5 asiaa, joita et tiennyt, että voit tehdä HTML: llä

Tunnustetaan tosiasia, että verkkokehityksestä voi helposti tulla sotku. HTML, CSS ja JavaScript kaikki ovat kehittyneet nöyrästä alkuperästä monien vuosien ajan, ja ovat suurelta osin yksiselitteisiä siitä, miten niitä tulisi käyttää. Tämän seurauksena on liian helppoa rakentaa kestämätöntä sotkua. Standardien noudattaminen ja viimeisimpien teknisten parannusten hyödyntäminen ei takaa hyvää koodia, mutta se voi varmasti auttaa.

Kaiken tyyppisessä ohjelmistokehityksessä modulaarisuus on kuningas ylläpidettävän koodin rakentamisessa. Tämän seurauksena sinun kannattaa seurata tarkasti verkkokomponentteja. Selaintuki ei ole suuri, mutta jos tartut itsellesi polyfillit , voit päästä käyrästä eteenpäin ja alkaa hyödyntää mukautettuja elementtejä koodin rakentamiseksi heti. Tämä kehitystyyli on tulevaisuus, joten kannattaa tutustua siihen nyt.

Pidä koodi virtaviivaisena, jotta ymmärrys olisi selkeämpi



Pidä koodi virtaviivaisena, jotta ymmärrys olisi selkeämpi

HTML5 itse esitti useita uusia elementtejä (ja hylkäsi useita) auttaakseen hyviä koodauskäytäntöjä. Olet ehkä kuullut semanttisesta merkinnästä, joka viittaa HTML5: n kuvaavien elementtien, kuten ja osoittamaan niiden sisältämän sisällön tyyppi.

Tämä voi todella auttaa koodisi puhtaudessa, koska HTML-elementit tunnistavat välittömästi esimerkiksi, mitkä osat edustavat valikkopalkkia, sisältöosiasi, alatunnistetta ja niin edelleen.

Se auttaa myös, jos hyödynnät uusimpia JavaScript-standardeja. JavaScript voi myös muuttua sekavaksi, mutta sen kanssa on tullut paljon helpompaa työskennellä viime vuosina. ES6-syntaksia tuetaan laajalti selaimissa, ja nuolitoiminnot ja luokat, kuten nuolitoiminnot ja luokat, voivat helpottaa elämääsi - silti monet kehittäjät ovat joko tuntemattomia tai varovaisia ​​käyttämään niitä.

Jatkamalla modulaarisen kehityksen teemaa, JavaScript tukee nyt myös moduulien lataamista, mikä voi auttaa sinua hallitsemaan riippuvuuksiasi puhtaasti.

01. Tunnista ja syntetisoi puhe

Tulevien asioiden ääni

Tulevien asioiden ääni(Kuvan luotto: Kuva Jason Rosewell Unsplashista)

Nämä olisivat aiemmin olleet monimutkaisia ​​toimintoja, jotka vaativat erikoistuneita ohjelmistoja, mutta niitä rakennetaan nyt suoraan selaimiin. Web Speech -sovellusliittymässä on komponentteja, jotka tukevat teksti puheeksi ja puhe tekstiksi. Viimeksi mainittu käyttää joko verkkopalvelua (Chrome käyttää Google Cloud Speech -sovellusliittymää) tai laitteen natiivipuheentunnistuspalvelua. Oletettavasti sitä käytetään tulevaisuudessa laajasti mobiililaitteissa.

02. Näytä värivalitsin

Oikean värin valinta

Oikean värin valinta(Kuvan luotto: Kuva: Scott Webb Unsplashista)

Vaikka se onkin triviaalia, tämä on hieno esimerkki siitä, kuinka HTML5 yksinkertaistaa yleisiä tehtäviä, jotka aiemmin olisivat vaatineet melko monimutkaisen käyttöliittymäkomponentin mukautettua koodausta. näyttää visuaalisen värivalitsimen, kun sitä napsautetaan, käyttäen laitteen alkuperäistä värivalitsinta. Tämä voi olla erityisen hyödyllistä HTML-kankaalle. Sitä tuetaan laajalti, lukuun ottamatta Safaria mobiililaitteilla.

03. Väritä selaimen käyttöliittymä

Väriteemat selaimille

Väriteemat selaimille(Kuvan luotto: Kuva: Marko Blažević Unsplashista)

Tämä voi tarjota mukavan esteettisen kosketuksen mobiilialustoille. on suunniteltu ohjaamaan selainta värittämään työkalurivi sivustoasi tarkasteltaessa. Valitettavasti se on vähän standardoimaton, joten vaikka 'teema-väri' toimii Chromen, Firefoxin ja Operan kanssa tarvitsemassasi iOS: ssä 'apple-mobile-web-app-status-bar-style' (toimii vain koko näytön tilassa).

04. Eri kuvat eri näytöille

Kuvan ja tarkkuuden määrittäminen

Kuvan ja tarkkuuden määrittäminen(Kuvan luotto: Kuva: Tran Mau Tri Tam on Unsplash)

Toivottavasti olet jo toteuttamassa reagoivaa suunnittelua, jolloin kuviesi kokoa muutetaan näkymän mukaan. Tämä ei ole täydellinen, koska pakotat käyttäjän lataamaan kuvan suurimman version ja otat sen sitten alas. Syötä HTML5 -elementti, jonka avulla voit määrittää näytettävät kuvat riippuen näytön tarkkuudesta, jolla sivustoa katsellaan.

05. Värinä puhelimesi

Shakin

Shakin 'kaikkialla(Kuvan luotto: Kuva: Gilles Lambert Unsplashista)

Yksiselitteisesti nimetty Tärinä-sovellusliittymä paljastaa yhden toiminnon, värinä (), joka tekee tarkalleen mitä se sanoo sitä tukevissa laitteissa. Funktio käyttää argumenttina luetteloa, joka kuvaa värähtelykuviota. Se toimii Chromella, Firefoxilla ja Operalla, vaikka sinulla ei ole onnea Edgessä tai Safarissa. On raportoitu, että jotkut mainokset käyttävät tätä houkutellakseen käyttäjän huomion, joten tuomaristo selvittää, onko se todella hyvä idea.

Tämä artikkeli ilmestyi alun perin Nettisivujen suunnittelija numero 266. Osta se täältä .

Aiheeseen liittyvät artikkelit: