Bedste HTML, CSS, Javascript-praksis: Chrome-udvidelse

For folk der lige er færdig med Codecademy.

Når du studerer programmering, er den mest effektive måde at selvstudium at udvikle et produkt. Denne tilgang er meget hurtigere end at tage et programmeringskursus for at forbedre dine programmeringsevner.

Normalt begynder folk at lære programmering med HTML, CSS og grundlæggende Javascript i webprogrammering, men inden de når serversiden er det svært at lave en meningsfuld applikation.

Så jeg har altid prøvet at overbevise eleverne om dette,

Det bliver sjovt, hvis du begynder at lære serversiden og starte noget program. Vær venlig ikke at give op.

men mange studerende holder op med at lære programmering på HTML- og CSS-stadiet.

(Det er måske ikke en god ide at starte med HTML for at tilskynde folk til at studere programmering.)

En dag åbnede jeg min Chrome-browser for at begynde at arbejde. Derefter indså jeg, at jeg faktisk havde brugt det bedste program, som du kun kan bygge ved hjælp af HTML, CSS og Javascript.

momentum

For at være kort, hvis du installerer denne udvidelse på Chrome, vil der, hver gang du åbner en ny fane, være en hilsenmeddelelse over et super cool billede. Antallet af downloads er allerede flere millioner. Hvis du ikke har brugt dette, vil jeg varmt anbefale dig at installere det. Måske oplever du kun denne applikation i 2 til 3 sekunder pr. Ny fane, men du kan slappe af i det lille øjeblik.

Lad os prøve at klone denne applikation!

Fase 1: Ting at forberede

  • HTML
  • CSS
  • Javascript
  • Dejligt billede: fra ikke-plash
  • manifest.json (skal indlæses fra Chrome)

Den måde, jeg udviklede applikationen hurtigt på, var ved at fokusere på nutiden, ikke fremtiden. Selvfølgelig er det vigtigt at have en konkret plan, når det ikke er dit solo-projekt. Men! Selvmotivations levetid er meget kort, så når du har lyst til at udvikle noget, skal du færdigbehandle det meget hurtigt. Hvis du begynder at tænke på andre muligheder, der vil forbedre dit produkt, afslutter du aldrig dit projekt.

Lad os holde det enkelt.

Vi opretter et websted med et stort billede, en stor hilsen og måske den aktuelle tid.

Find et billede

Hvis du går til Unsplash-webstedet, kan du finde masser af cool licensfrie billeder.

Da jeg er i Norge, besluttede jeg at bruge dette billede.
Tak, Vidar Nordli-Mathisen. (Det er altid vigtigt at anerkende deres talent.)

Foto af Vidar Nordli-Mathisen på Unsplash

Lav et projekt

Simple Simple Simple

En HTML-fil, en CSS, en Javascript og en manifestfil.

Det er alt, hvad vi har brug for.

Okay, dette er den første version.

Dette er en enkel webside. For at blive indlæst fra Chrome skal du tilføje følgende manifest.json-fil.

"Chrome_url_overrides" er den vigtigste egenskab i denne applikation.

Gå til udvidelsessidenKlik på knappen Klik på valgknappen inde i din projektmappeVores ydmyge udvidelse ...Hver gang du åbner den nye fane, viser den din enkle webside.

Der går du, vi er lige færdige med vores første projekt.

Du kan kun bruge den med denne funktion. Måske kan du redigere teksten til noget, du vil motivere dig med, som "umuligt er intet", "bare gør det", "vi er verden", noget-noget. Eller måske kan du placere dit familiebillede i stedet.

Men lad os gøre det bedre end dette.

Fase 2: Ting, der skal tilføjes

  • Nuværende tid
  • Navnskiftende funktion
  • Billedskiftende funktion

For at inkludere disse tre nye funktioner ændrede jeg HTML-filen som nedenfor.

CSS bør også ændres.

Så vil den nye side være som nedenfor.

Åh, jeg troede, det var Momentum :)

Opdaterer manifest.json

Nu tilføjer vi to funktioner.

Først og fremmest tilføjer vi en inputformular til denne applikation, så folk kan lægge deres navn på det. Vi tilføjer denne formular under meddelelsen "Hej, Jungwon Seo".

Dette er grimt, lad os ordne det

Ny stil til inputmærket.

Okay, meget bedre.

Fra nu af er vi nødt til at overveje, hvordan vi gemmer disse oplysninger.

Vi bruger "cookie", men du kan ikke bruge "cookie", hvis du bare åbner HTML-filen fra Chrome Browser. Prøv at teste efter indlæsning som en Chrome-udvidelse.

Der var forkerte oplysninger om lagringstilladelsen i det forrige indlæg. Du har ikke brug for tilladelsen 'opbevaring' for at bruge 'Cookie'.

Da jeg stadig foretrækker at bruge jQuery, lad os tilføje det.

Jeg prøvede at tilføje jQuery CDN, men ...

Bare rolig, vi skal bare tilføje en ejendom til i manifest.json.

Godt, nu er vi klar til at kode i script.js-filen.

Hvad jeg først vil gøre er:

  1. Få brugere til at skrive deres navn.
  2. Opbevar i cookie (lad os bare bruge den mest populære kode)
  3. Bleg indtastningsformularen og falm i hilsen meddelelsen.

Nu er dette første gang, at vi skal tænke som en rigtig udvikler.

Sag 1: Når du åbner den for første gang.
Tilfælde 2: Når du åbner det, når du har skrevet dit navn.

Vi er nødt til at beslutte, hvad der skal være synligt, og hvad der ikke skal være.

Sag 1:
Tid: Aktuel tid
Hilsen besked: Hvad hedder du?
Indtastningsform: Synlig

Sag 2:
Tid: Aktuel tid
Hilsen besked: Hej, !
Indtastningsform: Usynlig

Og måden at differentiere disse to tilfælde på er at kontrollere, om cookien har nøglen 'brugernavn'.

Med tidsopdateringsfunktion vil den nye script.js være som nedenfor.

Før du skriver navnetEfter at have skrevet navnet

Okay, det ser ud til at virke.

Selvfølgelig er der nogle ting, vi stadig har brug for at forbedre, såsom overgangseffekter.

Men jeg giver dig det.

Hvad ellers?

Vi er nødt til at tilføje den funktionalitet, der giver brugerne mulighed for at ændre deres billede.

Unsplash API

Du kan nemt registrere din app og få et symbol fra denne side.

For at bruge Unsplash API, skal du registrere din ansøgning på deres udviklerside.

Ved at klikke på 'Ny ansøgning' kan du registrere din.

Til demoproduktet har du tilladelse til at bruge op til 50 anmodninger i timen. Og det er nok for os.

Udfyld blot nedenstående formular, uanset hvor du vil.

Skriv ethvert navn

Hvis du opretter applikationen, vil du se 'Keys' -delen fra det omdirigerede websted.

Jeg har slettet denne ansøgning, så der er ingen mening at prøve.

Du skal bare kopiere 'Access Key' og tildele til din javascript-variabel 'ACCESS_KEY'.

Vi bruger søge-API'et.

Her er scenariet. Alle mennesker har forskellige interesser. Så jeg vil først spørge deres interesse, og så søger jeg det billede ved hjælp af Unsplash API. Derefter fortsætter jeg med at opdatere billedet hver 12. time (samme nøgleord, andet billede).

Så AJAX-funktionen vil være som nedenfor.

Og denne funktion kaldes, når du har skrevet din interesse.

Så som du kan forvente, er vi nødt til at være en udvikler igen.

Sag 1–1: Aller første gang
Sag 1–2: Efter navnet
Sag 2: Når du har skrevet din interesse
Sag 3: 12 timer senere.

Okay, lad os beslutte en efter en.

I sag 1–1 er vi bare nødt til at skjule al den billedrelaterede del. Spring over dette.

I sag 1–2 viser bare indtastningsformularen for interessen.

I tilfælde 2 skal du ringe til AJAX og gemme billedoplysningerne.

I sag 3, lad os bare indstille udløbetid til 12 timer, og hvis cookien er tom, skal du ringe til AJAX-anmodningen igen.

Nøgleord: London

Ja, det fungerer.

Fase 3: Sidste berøringer

Det er ikke obligatorisk at kreditere fotografen, men hvorfor ikke?

Vi kan skrive et par kodelinjer mere og kreditere fotografens navn og side øverst til venstre.

Så vi kan bruge fotografens oplysninger, når du tjekker cookien for første gang.

En ting til, hvad hvis nogen vil ændre deres interesse?

Lad os tilføje den funktionalitet, der giver folk mulighed for at indtaste deres interesse igen.

Før du klikker på knappen

Værsgo. Hvis du klikker på knappen "Vælg en ny interesse", udløses det for at åbne inputformularen, hvor du skrev din interesse før.

Når du har klikket på knappen

Fase 4: Lav dit eget produkt.

Jeg vil bare have dig til at opleve processen fra begyndelsen til slutningen. Stadig skal du udvikle dette selv for virkelig at absorbere den dygtighed, du har lært.

Der skal være nogle funktioner, som du synes, det ville være godt at medtage, såsom måden at vælge det tilfældige billede. Eller du synes måske, at nogle af mine koder er ineffektive. Du kan forbedre din version af det samme produkt med en bedre kode.

Held og lykke og giv ikke op!

Den komplette version findes her: https://github.com/thejungwon/MyChromeExtension

Denne historie er offentliggjort i Bemærkelsesværdigt, hvor 10.000+ læsere kommer hver dag for at lære om de mennesker og ideer, der former de produkter, vi elsker.

Følg vores publikation for at se flere produkt- og designhistorier, der er vist af Journal-teamet.