Beste HTML, CSS, Javascript-praksis: Chrome-utvidelse

For folk som nettopp er ferdig med Codecademy.

Når du studerer programmering, er den mest effektive måten å selvstudere å utvikle et produkt. Denne tilnærmingen er mye raskere enn å ta noe programmeringskurs for å forbedre programmeringsevnen.

Normalt begynner folk å lære programmering med HTML, CSS og grunnleggende Javascript i nettprogrammering, men før de kommer til serversiden er det vanskelig å lage en meningsfull applikasjon.

Så jeg har alltid prøvd å overbevise studentene om dette,

Det blir morsomt hvis du begynner å lære serversiden og starte noen applikasjoner. Vær så snill, ikke gi opp.

men mange studenter slutter å lære programmering mens de er på HTML og CSS.

(Det er kanskje ikke en god ide å starte med HTML for å oppmuntre folk til å studere programmering.)

En dag åpnet jeg Chrome-nettleseren for å begynne å jobbe. Da innså jeg at jeg faktisk hadde brukt det beste programmet som du kan bygge ved å bruke bare HTML, CSS og Javascript.

momentum

For å være kort, hvis du installerer denne utvidelsen på Chrome, vil det være en hilsen melding over et superkult bilde hver gang du åpner en ny fane. Antall nedlastinger er allerede flere millioner. Hvis du ikke har brukt dette, anbefaler jeg deg å installere det. Kanskje du bare vil oppleve denne applikasjonen i 2 til 3 sekunder per ny fane, men du kan slappe av i det lille øyeblikket.

La oss prøve å klone denne applikasjonen!

Fase 1: Ting å forberede

  • HTML
  • CSS
  • Javascript script~~POS=HEADCOMP
  • Fint bilde: fra unsplash
  • manifest.json (skal lastes fra Chrome)

Måten jeg utviklet applikasjonen raskt var ved å fokusere på nåtiden, ikke fremtiden. Selvfølgelig er det viktig å ha en konkret plan når det ikke er soloprosjektet ditt. Men! Selvmotivasjonens levetid er veldig kort, så når du føler for å utvikle noe, bør du fullføre det veldig raskt. Hvis du begynner å tenke på andre alternativer som vil forbedre produktet ditt, vil du aldri fullføre prosjektet ditt.

La oss holde det enkelt.

Vi lager et nettsted med ett stort bilde, en stor hilsen og kanskje den nåværende tiden.

Finn et bilde

Hvis du går til Unsplash-nettstedet, kan du finne mange kule lisensfrie bilder.

Siden jeg er i Norge, bestemte jeg meg for å bruke dette bildet.
Takk, Vidar Nordli-Mathisen. (Det er alltid viktig å erkjenne talentet deres.)

Foto av Vidar Nordli-Mathisen på Unsplash

Lag et prosjekt

Enkelt Enkelt Enkelt

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

Det er alt vi trenger.

OK, dette er den første versjonen.

Dette er en enkel webside. Nå, for å lastes fra Chrome, må du legge til følgende manifest.json-fil.

"Chrome_url_overrides" er den viktigste egenskapen i denne applikasjonen.

Gå til utvidelsessidenKlikk på Klikk på valgknappen inne i prosjektmappenVår ydmyke forlengelse ...Hver gang du åpner den nye fanen, vil den vise den enkle nettsiden din.

Der går du, vi er akkurat ferdig med vårt første prosjekt.

Du kan bruke den med bare denne funksjonaliteten. Kanskje kan du redigere teksten til noe du vil motivere deg med, for eksempel “umulig er ingenting”, “bare gjør det”, “vi er verden”, noe-noe. Eller kanskje du kan sette et familiebilde i stedet.

Men la oss gjøre det bedre enn dette.

Fase 2: Ting som skal legges til

  • Nåværende tid
  • Navneendringsfunksjon
  • Bildeskiftende funksjon

For å inkludere de tre nye funksjonene, endret jeg HTML-filen som nedenfor.

CSS bør endres også.

Da blir den nye siden som nedenfor.

Å, jeg trodde det var Momentum :)

Oppdaterer manifest.json

Nå vil vi legge til to funksjoner.

Først av alt legger vi til et innspillskjema til denne applikasjonen slik at folk kan sette navnet sitt på det. Vi legger til dette skjemaet under meldingen "Hello, Jungwon Seo".

Dette er stygt, la oss ordne det

Ny stil for input-taggen.

Ok, mye bedre.

Fra nå av må vi tenke på hvordan vi lagrer denne informasjonen.

Vi bruker "cookie", men du kan ikke bruke "cookie" hvis du bare åpner HTML-filen fra Chrome Browser. Prøv å teste etter lasting som Chrome-utvidelse.

Det var feil informasjon om lagringstillatelsen i forrige innlegg. Du trenger ikke "lagrings" -tillatelse for å bruke "Cookie".

Siden jeg fortsatt foretrekker å bruke jQuery, la oss legge det til.

Jeg prøvde å legge til jQuery CDN, men ...

Ikke bekymre deg, vi trenger bare å legge til en eiendom til i manifest.json.

Bra, nå er vi klar til å kode i script.js-filen.

Det jeg først vil gjøre er:

  1. Få brukere til å skrive navnet sitt.
  2. Oppbevar i cookie (la oss bare bruke den mest populære koden)
  3. Tone ut inndataformen og visne i hilsen-meldingen.

Nå er dette første gang vi må tenke som en ekte utvikler.

Sak 1: Når du åpner den for første gang.
Sak 2: Når du åpner det etter at du har skrevet navnet ditt.

Vi må bestemme hva som skal være synlig og hva som ikke skal være.

Sak 1:
Tid: Nåværende tid
Hilsen Melding: Hva heter du?
Inndataform: Synlig

Sak 2:
Tid: Nåværende tid
Hilsen melding: Hallo, !
Inndataform: Usynlig

Og måten å differensiere disse to tilfellene på er å sjekke om informasjonskapselen har nøkkelen ‘brukernavn’.

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

Før du skriver navnetEtter å ha skrevet navnet

OK, det ser ut til å virke.

Selvfølgelig er det noen ting vi fortsatt trenger å forbedre, for eksempel overgangseffekter.

Men jeg skal gi deg det.

Hva mer?

Vi må legge til funksjonaliteten som lar brukerne endre bildet sitt.

Unsplash API

Du kan enkelt registrere appen din og få et symbol fra denne siden.

For å bruke Unsplash API, må du registrere søknaden din på utviklersiden deres.

Ved å klikke på 'Ny applikasjon' kan du registrere din.

For demoproduktet har du lov til å bruke opptil 50 forespørsler i timen. Og det er nok for oss.

Bare fyll ut skjemaet nedenfor du vil.

Skriv inn hvilket som helst navn

Hvis du oppretter applikasjonen, vil du se 'Keys' -delen fra det omdirigerte nettstedet.

Jeg har slettet denne applikasjonen, så det er ikke noe poeng å prøve.

Du trenger bare å kopiere ‘Access Key’ og tilordne til javascriptvariabelen ‘ACCESS_KEY’.

Vi bruker søke-API.

Her er scenariet. Alle mennesker har forskjellige interesser. Så jeg vil spørre interessen deres først, og så søker jeg det bildet ved å bruke Unsplash API. Etter det vil jeg fortsette å oppdatere bildet hver 12. time (samme søkeord, annet bilde).

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

Og denne funksjonen vil bli kalt etter at du har skrevet inn interessen.

Så, som du kan forvente, må vi være en utvikler igjen.

Sak 1–1: Aller første gang
Sak 1–2: Etter navnet
Sak 2: Etter at du har skrevet inn interessen
Sak 3: 12 timer senere.

OK, la oss bestemme en etter en.

I sak 1–1, trenger vi bare å skjule all bilderelatert del. Hopp over dette.

I tilfelle 1–2 viser du bare inndataformen for interessen.

I tilfelle 2, ring AJAX og lagre bildeinformasjonen.

I tilfelle 3, la oss bare sette utløpstiden til 12 timer, og hvis informasjonskapselen er tom, kan du ringe AJAX-forespørselen på nytt.

Nøkkelord: London

Ja, det fungerer.

Fase 3: Finale berøringer

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

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

Slik at vi kan bruke fotografens informasjon når du sjekker informasjonskapselen for første gang.

En ting til, hva om noen vil endre interessen?

La oss legge til den funksjonaliteten som lar folk skrive inn interessen sin på nytt.

Før du klikker på knappen

Der går du. Hvis du klikker på knappen "Velg en ny interesse", vil den utløse for å åpne inndataformularet der du skrev interessen før.

Etter at du har klikket på knappen

Fase 4: Lag ditt eget produkt.

Jeg vil bare at du skal oppleve prosessen fra begynnelse til slutt. Likevel må du utvikle dette selv for å virkelig absorbere ferdigheten du har lært.

Det må være noen funksjoner som du synes det ville være greit å ta med, for eksempel hvordan du velger det tilfeldige bildet. Eller du kan tro at noen av kodene mine er ineffektive. Du kan forbedre din versjon av det samme produktet med en bedre kode.

Lykke til og ikke gi opp!

Den komplette versjonen finner du her: https://github.com/thejungwon/MyChromeExtension

Denne historien er publisert i Noteworthy, der 10 000+ lesere kommer hver dag for å lære om menneskene og ideene som former produktene vi elsker.

Følg publikasjonen vår for å se flere produkt- og designhistorier omtalt av Journal-teamet.