Beste HTML, CSS, Javascript Practice: Chrome-extensie

Voor mensen die net Codecademy hebben afgemaakt.

Wanneer u programmeren bestudeert, is het ontwikkelen van een product de meest efficiënte manier om zichzelf te bestuderen. Deze aanpak is veel sneller dan het volgen van een programmeercursus om uw programmeervaardigheden te verbeteren.

Normaal gesproken leren mensen programmeren met HTML, CSS en basis-Javascript in webprogrammering, maar voordat ze het servergedeelte bereiken, is het moeilijk om een ​​zinvolle toepassing te maken.

Dus ik heb altijd geprobeerd de studenten zo te overtuigen,

Het wordt leuk als je de server begint te leren en een applicatie start. Geef alsjeblieft niet op.

maar veel studenten leren niet meer programmeren in de HTML- en CSS-fase.

(Misschien is het beginnen met HTML geen goed idee om mensen aan te moedigen om programmeren te studeren.)

Op een dag opende ik mijn Chrome-browser om te beginnen met werken. Toen besefte ik dat ik eigenlijk de beste applicatie had gebruikt die je kunt bouwen met alleen HTML, CSS en Javascript.

stuwkracht

Kortom, als u deze extensie op Chrome installeert, wordt er elke keer dat u een nieuw tabblad opent, een begroetingsbericht boven een supercoole foto weergegeven. Het aantal downloads is al enkele miljoenen. Als je dit nog niet hebt gebruikt, raad ik je ten zeerste aan om het te installeren. Misschien ervaar je deze applicatie slechts 2 tot 3 seconden per nieuw tabblad, maar kun je je even ontspannen.

Laten we proberen deze applicatie te klonen!

Fase 1: Dingen om voor te bereiden

  • HTML
  • CSS
  • Javascript
  • Leuke foto: van Unplash
  • manifest.json (te laden vanuit Chrome)

De manier waarop ik de applicatie snel ontwikkelde, was door me te concentreren op het heden, niet op de toekomst. Het is natuurlijk belangrijk om een ​​concreet plan te hebben als het niet je soloproject is. Maar! De levensduur van zelfmotivatie is erg kort, dus als je zin hebt om iets te ontwikkelen, kun je het beter heel snel afmaken. Als je begint na te denken over andere opties die je product zullen verbeteren, zul je je project nooit afmaken.

Laten we het simpel houden.

We maken één website met één grote foto, één grote begroeting en misschien de huidige tijd.

Zoek een foto

Als je naar de Unsplash-website gaat, kun je tonnen coole licentievrije afbeeldingen vinden.

Omdat ik in Noorwegen ben, besloot ik deze foto te gebruiken.
Bedankt, Vidar Nordli-Mathisen. (Het is altijd belangrijk om hun talent te erkennen.)

Foto door Vidar Nordli-Mathisen op Unsplash

Maak een project

Eenvoudig Eenvoudig Eenvoudig

Eén HTML-bestand, één CSS, één Javascript en één manifestbestand.

Dat is alles wat we nodig hebben.

Oké, dit is de eerste versie.

Dit is een eenvoudige webpagina. Om nu vanuit Chrome te worden geladen, moet u het volgende manifest.json-bestand toevoegen.

"Chrome_url_overrides" is de belangrijkste eigenschap in deze toepassing.

Ga naar de extensiepaginaKlik op de knop Klik op de knop Selecteren in uw projectmapOnze bescheiden uitbreiding ...Telkens wanneer u het nieuwe tabblad opent, wordt uw eenvoudige webpagina weergegeven.

Daar gaan we, we zijn net klaar met ons eerste project.

U kunt het alleen met deze functionaliteit gebruiken. Misschien kun je de tekst bewerken tot iets waarmee je jezelf wilt motiveren, zoals "onmogelijk is niets", "doe het gewoon", "wij zijn de wereld", iets-iets. Of misschien kunt u in plaats daarvan uw familiefoto plaatsen.

Maar laten we het beter maken dan dit.

Fase 2: Dingen die moeten worden toegevoegd

  • Huidige tijd
  • Naam veranderende functie
  • Foto veranderende functie

Om die drie nieuwe functies op te nemen, heb ik het HTML-bestand zoals hieronder gewijzigd.

CSS moet ook worden gewijzigd.

Dan ziet de nieuwe pagina eruit zoals hieronder.

Oh, ik dacht dat het Momentum was :)

Manifest.json wordt bijgewerkt

Nu voegen we twee functies toe.

Allereerst voegen we een invoerformulier toe aan deze applicatie zodat mensen er hun naam op kunnen zetten. We voegen dit formulier toe onder het bericht 'Hallo, Jungwon Seo'.

Dit is lelijk, laten we het oplossen

Nieuwe stijl voor de invoertag.

Oké, veel beter.

Vanaf nu moeten we nadenken over hoe we deze informatie kunnen opslaan.

We gebruiken 'cookie', maar u kunt 'cookie' niet gebruiken als u het HTML-bestand opent vanuit Chrome Browser. Probeer na het laden te testen als een Chrome-extensie.

Er was onjuiste informatie over de opslagmachtiging in het vorige bericht. U hebt geen toestemming voor ‘opslag’ nodig om ‘Cookie’ te gebruiken.

Omdat ik nog steeds de voorkeur geef aan jQuery, laten we het toevoegen.

Ik probeerde jQuery CDN toe te voegen, maar ...

Maak je geen zorgen, we moeten nog een eigenschap toevoegen in manifest.json.

Goed, nu zijn we klaar om het script.js-bestand te coderen.

Wat ik eerst wil doen is:

  1. Laat gebruikers hun naam typen.
  2. Opslaan in cookie (laten we alleen de meest populaire code gebruiken)
  3. Fade out the input form and fade in the greeting message.

Dit is de eerste keer dat we als een echte ontwikkelaar moeten denken.

Geval 1: Wanneer u het voor de eerste keer opent.
Geval 2: Wanneer u het opent nadat u uw naam hebt getypt.

We moeten beslissen wat zichtbaar moet zijn en wat niet.

Zaak 1:
Tijd: Huidige tijd
Begroeting: wat is je naam?
Invoerformulier: zichtbaar

Geval 2:
Tijd: Huidige tijd
Begroetingsbericht: Hallo, !
Invoervorm: Onzichtbaar

En de manier om deze twee gevallen te onderscheiden is om te controleren of de cookie de sleutel ‘gebruikersnaam’ heeft.

Met de tijdbijwerkfunctie ziet het nieuwe script.js er als volgt uit.

Voordat u de naam typtNa het typen van de naam

Oké, het lijkt te werken.

Natuurlijk zijn er nog enkele dingen die we nog moeten verbeteren, zoals overgangseffecten.

Maar ik zal het je geven.

Wat nu nog meer?

We moeten de functionaliteit toevoegen waarmee gebruikers hun foto kunnen wijzigen.

Unsplash API

U kunt uw app eenvoudig registreren en een token krijgen van deze pagina.

Om Unsplash API te gebruiken, moet u uw applicatie registreren op hun ontwikkelaarspagina.

Door op 'Nieuwe applicatie' te klikken, kunt u de uwe registreren.

Voor het demo-product mag u maximaal 50 aanvragen per uur gebruiken. En dat is genoeg voor ons.

Vul het onderstaande formulier in zoals u dat wilt.

Typ een willekeurige naam

Als u de applicatie maakt, ziet u het gedeelte 'Keys' van de omgeleide website.

Ik heb deze applicatie verwijderd, dus geen zin om het te proberen.

U hoeft alleen maar ‘Access Key’ te kopiëren en in uw javascript-variabele ‘ACCESS_KEY’ toe te wijzen.

We zullen de zoek-API gebruiken.

Dit is het scenario. Alle mensen hebben verschillende interesses. Dus ik wil eerst hun interesse vragen en dan zal ik die afbeelding doorzoeken met behulp van de Unsplash API. Daarna blijf ik de afbeelding elke 12 uur bijwerken (hetzelfde trefwoord, andere afbeelding).

De AJAX-functie ziet er dus als volgt uit.

En deze functie wordt genoemd nadat u uw interesse hebt getypt.

Dan, zoals je kunt verwachten, moeten we weer een ontwikkelaar zijn.

Geval 1–1: allereerste keer
Geval 1–2: achter de naam
Geval 2: Nadat u uw interesse hebt getypt
Geval 3: 12 uur later.

Oké, laten we een voor een beslissen.

In geval 1–1 moeten we alleen al het aan afbeeldingen gerelateerde deel verbergen. Sla dit over.

In geval 1-2 wordt alleen het invoerformulier voor de interesse weergegeven.

Bel in geval 2 AJAX en sla de afbeeldingsinformatie op.

In geval 3 stellen we de vervaltijd gewoon in op 12 uur en als de cookie leeg is, belt u het AJAX-verzoek opnieuw.

Trefwoord: Londen

Ja, het werkt.

Fase 3: Laatste hand

Het is niet verplicht om de fotograaf te crediteren, maar waarom niet?

We kunnen een paar extra regels code schrijven en de naam en pagina van de fotograaf links bovenaan vermelden.

Zodat we de informatie van de fotograaf kunnen gebruiken wanneer u de cookie voor het eerst bekijkt.

Nog één ding, wat als iemand zijn interesse wil veranderen?

Laten we die functionaliteit toevoegen waarmee mensen hun interesse opnieuw kunnen typen.

Voordat u op de knop klikt

Daar ga je. Als u op de knop "Een nieuwe interesse kiezen" klikt, wordt het invoerformulier geopend waar u eerder uw interesse hebt getypt.

Nadat u op de knop hebt geklikt

Fase 4: maak je eigen product.

Ik wil gewoon dat je het proces van het begin tot het einde ervaart. Toch moet je dit zelf ontwikkelen om de vaardigheid die je hebt geleerd echt te absorberen.

Er moeten enkele functies zijn waarvan u denkt dat het goed zou zijn om deze op te nemen, zoals de manier om de willekeurige afbeelding te kiezen. Of je denkt misschien dat sommige van mijn codes inefficiënt zijn. U kunt uw versie van hetzelfde product verbeteren met een betere code.

Veel succes en geef niet op!

De volledige versie is hier te vinden: https://github.com/thejungwon/MyChromeExtension

Dit verhaal is gepubliceerd in Noteworthy, waar meer dan 10.000 lezers elke dag komen om te leren over de mensen en ideeën die de producten vormen waar we van houden.

Volg onze publicatie voor meer product- en ontwerpverhalen van het Journal-team.