Bästa HTML, CSS, Javascript Practice: Chrome Extension

För människor som just slutade Codecademy.

När du studerar programmering är det mest effektiva sättet att självstudier att utveckla en produkt. Detta tillvägagångssätt är mycket snabbare än att ta någon programmeringskurs för att förbättra dina programmeringsförmågor.

Normalt börjar man lära sig programmering med HTML, CSS och grundläggande Javascript i webbprogrammering, men innan de når serversidan är det svårt att göra en meningsfull applikation.

Så jag försökte alltid övertyga eleverna så här,

Det kommer att bli kul om du börjar lära dig serversidan och starta en applikation. Snälla, ge inte upp.

men många elever slutar lära sig programmering på HTML- och CSS-stadiet.

(Kanske är det inte bra att börja med HTML för att uppmuntra människor att studera programmering.)

En dag öppnade jag min Chrome-webbläsare för att börja arbeta. Då insåg jag att jag faktiskt hade använt den bästa applikationen som du kan bygga med bara HTML, CSS och Javascript.

Momentum

För att vara kort, om du installerar det här tillägget på Chrome, kommer varje gång du öppnar en ny flik ett hälsningsmeddelande över en superkul bild. Antalet nedladdningar är redan flera miljoner. Om du inte har använt detta rekommenderar jag starkt att du installerar det. Kanske kommer du bara att uppleva den här applikationen i 2 till 3 sekunder per ny flik, men du kan koppla av i det lilla ögonblicket.

Låt oss försöka klona den här applikationen!

Fas 1: Saker att förbereda

  • html
  • CSS
  • Javascript
  • Fin bild: från unsplash
  • manifest.json (ska laddas från Chrome)

Hur jag utvecklade applikationen snabbt var genom att fokusera på nuet, inte framtiden. Naturligtvis är det viktigt att ha en konkret plan när det inte är ditt soloprojekt. Men! Självmotivationens livslängd är mycket kort, så när du känner för att utveckla något ska du bättre avsluta det mycket snabbt. Om du börjar tänka på andra alternativ som kommer att förbättra din produkt kommer du aldrig att avsluta ditt projekt.

Låt oss hålla det enkelt.

Vi skapar en webbplats med en stor bild, ett stort hälsningsmeddelande och kanske den aktuella tiden.

Hitta en bild

Om du går till Unsplash-webbplatsen kan du hitta massor av coola licensfria bilder.

Eftersom jag är i Norge, bestämde jag mig för att använda den här bilden.
Tack, Vidar Nordli-Mathisen. (Det är alltid viktigt att erkänna deras talang.)

Foto av Vidar Nordli-Mathisen på Unsplash

Gör ett projekt

Enkelt Enkelt Enkelt

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

Det är allt vi behöver.

Okej, det här är den första versionen.

Det här är en enkel webbsida. För att laddas från Chrome måste du lägga till följande manifest.json-fil.

"Chrome_url_overrides" är den viktigaste egenskapen i den här applikationen.

Gå till tilläggssidanKlicka på Klicka på väljknappen i projektmappenVår ödmjuka förlängning ...Varje gång du öppnar den nya fliken visar den din enkla webbsida.

Där går du, vi har precis avslutat vårt första projekt.

Du kan bara använda den med den här funktionen. Kanske kan du redigera texten till något du vill motivera dig själv, till exempel "omöjligt är ingenting", "bara göra det", "vi är världen", något-något. Eller kanske kan du lägga ditt familjefoto istället.

Men låt oss göra det bättre än detta.

Fas 2: Saker som ska läggas till

  • Aktuell tid
  • Funktion för namnbyte
  • Bildändringsfunktion

För att inkludera de tre nya funktionerna ändrade jag HTML-filen som nedan.

CSS bör också ändras.

Då blir den nya sidan som nedan.

Åh, jag trodde att det var Momentum :)

Uppdaterar manifest.json

Nu lägger vi till två funktioner.

Först lägger vi till ett inmatningsformulär till den här applikationen så att folk kan sätta sitt namn på det. Vi lägger till detta formulär under meddelandet "Hej, Jungwon Seo".

Det här är fult, låt oss fixa det

Ny stil för input-taggen.

Okej, mycket bättre.

Från och med nu måste vi tänka på hur vi lagrar denna information.

Vi använder "cookie", men du kan inte använda "cookie" om du bara öppnar HTML-filen från Chrome Browser. Försök testa efter laddning som Chrome-förlängning.

Det fanns felaktig information om lagringstillståndet i det föregående inlägget. Du behöver inte behörighet för "lagring" för att använda "Cookie".

Eftersom jag fortfarande föredrar att använda jQuery, låt oss lägga till det.

Jag försökte lägga till jQuery CDN, men ...

Oroa dig inte, vi behöver bara lägga till ytterligare en egenskap i manifest.json.

Bra, nu är vi redo att koda i filen script.js.

Det jag vill göra först är:

  1. Få användare att skriva in sitt namn.
  2. Förvara i cookien (låt oss bara använda den mest populära koden)
  3. Tona ut inmatningsformuläret och blekna i hälsningsmeddelandet.

Nu är det första gången vi måste tänka som en riktig utvecklare.

Fall 1: När du öppnar det för första gången.
Fall 2: När du öppnar det efter att du har skrivit ditt namn.

Vi måste bestämma vad som ska vara synligt och vad som inte ska vara.

Fall 1:
Tid: Aktuell tid
Hälsningsmeddelande: Vad heter du?
Inmatningsform: Synlig

Fall 2:
Tid: Aktuell tid
Hälsningsmeddelande: Hej, !
Inmatningsform: osynlig

Och sättet att differentiera dessa två fall är att kontrollera om cookien har nyckeln "användarnamn".

Med tidsuppdateringsfunktionen kommer den nya script.js att vara som nedan.

Innan du skriver namnetEfter att ha skrivit in namnet

Okej, det verkar fungera.

Naturligtvis är det några saker som vi fortfarande behöver förbättra, till exempel övergångseffekter.

Men jag ska ge det till dig.

Vad mer?

Vi måste lägga till den funktionalitet som gör att användare kan ändra sin bild.

Unsplash API

Du kan enkelt registrera din app och få ett symbol från den här sidan.

För att kunna använda Unsplash API måste du registrera din ansökan på deras utvecklar-sida.

Genom att klicka på

För demoprodukten får du använda upp till 50 förfrågningar per timme. Och det räcker för oss.

Fyll bara i formuläret nedan hur du vill.

Skriv valfritt namn

Om du skapar applikationen ser du "Keys" -delen från den omdirigerade webbplatsen.

Jag har tagit bort den här applikationen, så det är ingen mening att försöka.

Du behöver bara kopiera 'Access Key' och tilldela din javascriptvariabel 'ACCESS_KEY'.

Vi kommer att använda sök-API: et.

Här är scenariot. Alla människor har olika intressen. Så jag vill först fråga deras intresse och sedan söker jag den bilden med Unsplash API. Efter det kommer jag att uppdatera bilden var 12: e timme (samma nyckelord, annan bild).

Så AJAX-funktionen kommer att vara som nedan.

Och den här funktionen kommer att anropas när du har skrivit in ditt intresse.

Sedan, som du kan förvänta oss, måste vi vara en utvecklare igen.

Fall 1–1: Allra första gången
Fall 1–2: Efter namnet
Fall 2: När du har skrivit in ditt intresse
Fall 3: 12 timmar senare.

Okej, låt oss bestämma en efter en.

I fall 1–1 behöver vi bara dölja all bildrelaterad del. Hoppa över detta.

I fall 1–2 visar bara inmatningsformuläret för intresset.

I fall 2, ring AJAX och spara bildinformationen.

I fall 3, låt oss bara ställa in giltighetstidens utgång till 12 timmar och om cookien är tom, ring AJAX-begäran igen.

Nyckelord: London

Ja, det fungerar.

Fas 3: Sista handen

Det är inte obligatoriskt att kreditera fotografen, men varför inte?

Vi kan skriva ytterligare ett par kodrader och kreditera fotografens namn och sida längst upp till vänster.

Så att vi kan använda fotografens information när du kontrollerar cookien för första gången.

En sak till, vad om någon vill ändra sitt intresse?

Låt oss lägga till den funktionen som gör att människor kan skriva in sitt intresse igen.

Innan du klickar på knappen

Varsågod. Om du klickar på knappen "Välj ett nytt intresse", kommer det att öppna inmatningsformuläret där du skrev ditt intresse tidigare.

När du klickar på knappen

Fas 4: Gör din egen produkt.

Jag vill bara att du ska uppleva processen från början till slut. Ändå måste du utveckla detta själv för att verkligen absorbera den färdighet du har lärt dig.

Det måste finnas några funktioner som du tycker att det vore bra att inkludera, till exempel sättet att välja slumpmässig bild. Eller kanske du tror att några av mina koder är ineffektiva. Du kan förbättra din version av samma produkt med en bättre kod.

Lycka till och ge inte upp!

Den fullständiga versionen finns här: https://github.com/thejungwon/MyChromeExtension

Denna berättelse publiceras i Noteworthy, där 10 000+ läsare kommer varje dag för att lära sig om de människor och idéer som formar de produkter vi älskar.

Följ vår publikation för att se fler produkt- och designhistorier presenterade av Journal-teamet.