5 ting, du ikke vidste, du kunne gøre med HTML

Lad os indse det, webudvikling kan let blive et rod. HTML, CSS og JavaScript har alle udviklet sig fra ydmyg oprindelse gennem mange år og er stort set entydige med hensyn til, hvordan du skal bruge dem. Som et resultat er det alt for let at opbygge et uvedligeholdeligt rod. Overholdelse af standarder og udnyttelse af de seneste forbedringer i specifikationerne garanterer ikke god kode, men det kan bestemt hjælpe.

I enhver form for softwareudvikling er modularitet konge, når det kommer til at opbygge vedligeholdelig kode. Som et resultat vil du holde øje med webkomponenter. Browsersupport er ikke fantastisk, men hvis du tager dig noget polyfills , kan du komme foran kurven og begynde at udnytte brugerdefinerede elementer til at strukturere din kode med det samme. Denne udviklingsstil er fremtiden, så det er værd at blive fortrolig med den nu.



Hold koden strømlinet for at få en klarere forståelse



Hold koden strømlinet for at få en klarere forståelse

HTML5 selv introducerede en række nye elementer (og udfasede flere) for at hjælpe med at tilskynde til god kodningspraksis. Du har måske hørt om semantisk markering, der henviser til brugen af ​​HTML5s beskrivende elementer som f.eks og for at angive typen af ​​indhold, de indeholder.

Corel Maler Essentials vs Clip Studio Paint Pro

Dette kan virkelig hjælpe med renheden af ​​din kode, da HTML-elementerne straks identificerer for eksempel, hvilke dele der repræsenterer menulinjen, dine indholdssektioner, sidefoden og så videre.



hvordan man tegner et ulvehoved fra siden

Det hjælper også, hvis du drager fordel af de nyeste JavaScript-standarder. JavaScript kan også blive rodet, men det er blevet meget lettere at arbejde med i de senere år. ES6-syntaks understøttes bredt i browsere, og funktioner som pilfunktioner og klasser kan gøre dit liv meget lettere - men alligevel er mange udviklere enten ikke bekendte med eller på vagt over for at bruge dem.

Fortsat temaet moduludvikling understøtter JavaScript nu også modulindlæsning, som kan hjælpe dig med at administrere dine afhængigheder rent.

01. Genkende og syntetisere tale

Lyden af ​​de kommende ting



Lyden af ​​de kommende ting(Billedkredit: Foto af Jason Rosewell på Unsplash)

Disse ville engang have været komplekse funktioner, der kræver specialsoftware, men de bygges nu direkte ind i browsere. Web Speech API har komponenter, der understøtter tekst til tale og tale til tekst. Sidstnævnte vil enten bruge en onlinetjeneste (Chrome bruger Google Cloud Speech API) eller enhedens oprindelige talegenkendelsestjeneste. Forvent at se dette blive brugt meget på mobile enheder i fremtiden.

02. Vis en farvevælger

Valg af den rigtige farve

hvordan man tegner en pinup-pige trin for trin
Valg af den rigtige farve(Billedkredit: Foto af Scott Webb på Unsplash)

Trivial, som det måske lyder, er dette et godt eksempel på, hvordan HTML5 forenkler almindelige opgaver, som tidligere ville have krævet brugerdefineret kodning af en ret kompleks UI-komponent. viser en visuel farvevælger, når der klikkes på den, ved hjælp af en farvevælger, der er hjemmehørende i enheden. Dette kan være særligt nyttigt med HTML-lærred. Det understøttes bredt med undtagelse af Safari på mobil.

03. Genfarv browsergrænsefladen

Farvetemaer til browsere

Farvetemaer til browsere(Billedkredit: Foto af Marko Blažević på Unsplash)

Dette kan tilbyde et dejligt æstetisk præg på mobile platforme. er designet til at instruere browseren om at genfarve værktøjslinjen, når du ser dit websted. Desværre er det lidt ikke-standardiseret, så mens 'tema-farve' fungerer med Chrome, Firefox og Opera, på iOS skal du bruge 'apple-mobile-web-app-status-bar-stil' (fungerer kun i fuldskærmstilstand).

04. Forskellige billeder til forskellige skærme

Angivelse af billedet og opløsningen

Angivelse af billedet og opløsningen(Billedkredit: Foto af Tran Mau Tri Tam på Unsplash)

Forhåbentlig implementerer du allerede responsivt design, i hvilket tilfælde dine billeder ændres til at passe til visningen. Dette er ikke perfekt, da du vil tvinge brugeren til at downloade den største version af billedet og derefter nedprøve det. Indtast HTML5 element, som giver dig mulighed for at angive forskellige billeder, der skal vises afhængigt af skærmopløsningen, hvor webstedet vises.

hvordan man bliver freelance illustrator

05. Vibrer din telefon

Shakin

Shakin 'overalt(Billedkredit: Foto af Gilles Lambert på Unsplash)

Den utvetydigt navngivne Vibration API udsætter en enkelt funktion, vibrere (), som gør nøjagtigt, hvad den siger på enheder, der understøtter den. Funktionen tager en liste, der beskriver et vibrationsmønster som argument. Det fungerer på Chrome, Firefox og Opera, selvom du ikke har lykken på Edge eller Safari. Det rapporteres, at nogle annoncer bruger dette til at tiltrække brugerens opmærksomhed, så juryen er klar over, om det faktisk er en god idé.

Denne artikel opstod oprindeligt i Webdesigner Opgave 266. Køb det her .

Relaterede artikler: