7 fantastiske nettleserfunksjoner

Nye API-er for nettet ser ut til å bli utgitt hver uke. Det ville være kult å kunne bruke dem, men hvis du trenger å lage nettsteder for den gjennomsnittlige brukeren, vil du ikke kunne implementere dem på mange år - ikke sant? Feil. Å utforske det nyeste og beste av nettplattformen betyr at du får bruke de beste verktøyene du har til rådighet for brukerne dine, og bidra til å presse nettet fremover.

Her er en rekke forskjellige funksjoner - noen gamle, noen nye, alle underutnyttede - som kan implementeres raskt på nettstedet ditt, og vil nesten garantert forbedre opplevelsen.

01. Font Loading API

Selv om alt tekstinnholdet er lastet, blir brukerne blokkert fra å lese det på grunn av @ font-face

Selv om alt tekstinnholdet er lastet, blir brukerne blokkert fra å lese det på grunn av @ font-face

Hvis du noen gang har surfet på internett via Wi-Fi på hotellet, 2G eller annen ugudelig treg forbindelse de siste årene, har du utvilsomt møtt FOUT (blits av ustylert tekst). jeg elsker @ font-face like mye som neste person, men når du laster inn en multi-megabyte-skrift over en tilkobling målt i byte per sekund, kommer du til å ha dårlig tid.

Årsaken er at nettlesere historisk sett skjuler tekst fra brukeren til den egendefinerte skrifttypen er lastet inn. Nye skriftdimensjoner kan imidlertid påvirke utformingen av siden dramatisk, og det å ha en skriftendring etter at brukeren har begynt å samhandle med siden kan være en forferdelig opplevelse.

Det har alltid vært vanskelig å overvåke gjengivelse av skrift på nettet fordi vi aldri har hatt en måte å vite om en skrift er lastet inn eller ikke. Inntil nå var den mest pålitelige metoden å laste tekst inn i en lerret merke og sjekk bredden til den endret seg, og signaliserer en skriftbelastning. Det som er verre var å vite at all teksten allerede hadde blitt lastet ned av nettleseren, og at brukerne ble blokkert fra å se det de kom for å lese, bare for å gi nettleseren tid til å få den til å se penere ut.

Med den nye Font Loading API, kan du ta full kontroll over opplevelsen. Det løftebaserte API-et gir deg beskjed når webfontene dine er lastet inn - dette betyr at du kan definere en systemfont for den første gjengivelsen, og en veksle CSS-klasse slik at du bare bruker webfonten din etter at den er lastet inn.

body {font-family: Sans-Serif} body.fontLoaded {font-family: P4+RickRul3z-Sans} document.fonts.ready.then(function() { document.body.classList.add('fontLoaded'); });

Det er mye mer i denne spesifikasjonen, men denne funksjonen alene er en enorm gevinst. Det eneste problemet er det samme som vi har med alle nye API-er: det er nytt. Og derfor er nettleserstøtten ikke fantastisk. Per juli 2016 støttes API-en bare i Firefox og Chrome. Det er sannsynligvis en stor del av markedet, men vi kan ikke henge kritisk UX på et ikke-universelt API. Imidlertid kan vi få en nesten identisk API gjennom Bram Steins superlett Font Face Observer:

var font = new FontFaceObserver('P4+RickRul3z-Sans'); font.load().then(function () { document.body.classList.add('fontLoaded'); });

Mellom disse to API-ene vil du kunne tilby brukerne tekst som lastes inn umiddelbart, uten å måtte gi opp dine nydelige nettfonter.

02. Servicearbeidere

Jake Archibalds klassiske

Jake Archibalds klassiske 'AppCache is a douchebag' -tale går over alle måtene dette API kan skade deg

Den hotteste buzzfrasen for nettutvikling i 2016 må være progressive webapper. Det nye paradigmet for å lage webapper fremhever offline-funksjonalitet som en av de største manglende delene på nettet.

Servicearbeidere gir oss utrolig mye kraft, blant annet muligheten til å programmere alle nettverksforespørsler (les: 100 prosent frakoblet støtte). Det vil nesten helt sikkert være hjørnesteinen i enhver banebrytende ny app.

Selv om alle store nettleserleverandører (sans Apple) har forpliktet seg offentlig til å implementere Service Workers, vil det fortsatt vare måneder - om ikke år - før du kan stole på at API-et er i brukerens nettleser. Betyr det at vi må vente så lenge på å bruke den? Absolutt ikke.

Vi har kunnet gå frakoblet siden 2008 ... med AppCache. Ikke misforstå meg, AppCache er forferdelig av en rekke årsaker, hvorav de fleste er dekket i fargerike detaljer av Jake Archibald i sin 'AppCache is a douchebag' -tale fra JSConf 2013 . Men AppCache har en viktig styrke: utrolig nettleserstøtte.

hvordan man tegner en kube i ett punkt perspektiv

Hver større JavaScript-aktivert nettleser de siste årene har støttet den. Så mens vi kan (og bør) bygge med Service Workers, kan du gå tilbake til å bruke AppCache for grunnleggende ressursbufring i andre nettlesere.

if (navigator.serviceWorker) { navigator.serviceWorker.register('/sw.js') } else if (window.applicationCache) { var iframe = document.createElement('iframe'); iframe.src = '/customBuiltIframe.html'; document.body.appendChild(iframe); }

Åpenbart vil vi bruke Service Workers når de er tilgjengelige, så vi faller bare tilbake til AppCache etter at vi har bekreftet at Service Worker ikke er tilgjengelig. Den eneste fangsten er at for at AppCache skal fungere, må manifestattributtet (som brukes til å laste inn AppCache-konfigurasjonsfilen) inkluderes når siden lastes inn. Veien rundt dette er å legge til en skjult iframe til siden med bare manifestere definert.

blah

Og det er det! Nå har du statiske eiendeler i hurtigbufring, vil du få mye raskere lasting og nettopplevelse. Det er massevis av grove kanter med AppCache, så vær så snill å gjøre undersøkelser før du distribuerer, men med nøye oppmerksomhet kan du gi nesten alle brukerne en flott offlineopplevelse i dag.

03. Nettarbeidere

Dette er en av de mest fantastiske funksjonene i HTML5-spesifikasjonen

Dette er en av de mest fantastiske funksjonene i HTML5-spesifikasjonen

Nettarbeidere er sannsynligvis den mest underutnyttede delen av nettet. Introdusert av WebKit i 2008, løser dette API et av de mest gnagende problemene med å utvikle performante nettsteder: nettlesernes single-threaded natur. Siden nettleseren ikke har en måte å garantere at en del JavaScript ikke endrer tilstanden som en annen del er avhengig av, må den kjøre all koden i rekkefølge.

Du har kanskje lært dette på den harde måten hvis du noen gang prøvde å knytte en funksjon til en rullehendelse på nettstedet ditt. Fordi det kan skyte flere titalls ganger i sekundet, rangerer alt over veldig enkle funksjoner raskt hele siden. Nettarbeidere løser dette problemet ved å opprette en ny kontekst, atskilt fra DOM. Det betyr at du ikke har tilgang til DOM eller et antall globale vindusegenskaper. Din viktigste kommunikasjon er postMessage , et tilbakeringingsbasert tekstoverførings-API som lar deg sende data fra hovedskriptet til arbeideren og tilbake igjen.

// feature detect webworker, in case we are using an old browser if (window.Worker) { // worker.js is a separate JS file, which defines the worker var worker = new Worker('/worker.js'); worker.onmessage = function(e) { var result = e.data; console.log(result); } // We send a message to the Worker via postMessage. // It can be almost anything you want, (e.g. Object, Array, or String) // but keep in mind it will be stringified before it reaches the worker worker.postMessage({msg: 'Hello World'}); }

I en egen fil, som vi har navngitt worker.js , vi satte opp vår arbeider:

// Workers have a global function, importScripts, which does what it says on the tin // You can use it to load any JS file from your site, commonly external libraries importScripts('lib.js'); // All we need to do is wire up a global function called onmessage, and we can // receive any communications sent from our regular script onmessage = function(e) { // even though we sent an object in the above snippet, it was stringified. // so we need to parse it again to convert it to JSON. var data = JSON.parse(e.data) if (data.msg === 'Hello World') { postMessage('Right back atcha') } else { postMessage('I didn't want to say hello anyway...') } }

Selvfølgelig er dette et veldig dumt eksempel - du trenger aldri en arbeider bare for å sende tekst frem og tilbake. Du kan imidlertid se hvor enkelt API-en er, og hvor kraftig det kan være å ha en plass der du kan kjøre GPU-smeltende kode uten å miste så mye som en ramme på hovedtråden.

Når du har suppet nettstedet ditt med Web Workers, kan du gjøre ting som tidligere hadde vært ufattelige: endre størrelse på gigapikselbilder uten å kontakte serveren, inkludert fulle databaser som PouchDB, eller skrive litt AI for et sjakkspill. I utgangspunktet, hvis du kan kode det, kan du legge det til siden din via en webarbeider, alt mens du holder alt silkemykt.

04. Utklippstavle

GitHubs glatte

GitHubs glatte 'klon' -knapp gjør det lettere for brukere å raskt få gjort oppgavene sine

Det har vært måter å kopiere tekst siden Microsoft sendte IE4 i 1997, men var en lang, lang vei til der vi er i dag: med en interoperabel versjon som sendes i alle større nettlesere (Safari er fortsatt i teknisk forhåndsvisning, men den kommer snart! ). Det kan virke som en relativt enkel funksjon, og det er det, men hvis du legger det til det rette på nettstedet ditt, kan du overraske og glede brukere med en strømlinjeformet opplevelse.

I stedet for å stole på Flash-biblioteker eller andre hacks, kan vi bare bruke vanilje JavaScript:

var button = document.querySelector(‘.copyButton'); var range = document.createRange(); range.selectNode(button); window.getSelection().addRange(range); try { var result = document.execCommand('copy'); var msg = result ? 'successful' : 'unsuccessful'; console.log('copy was ' + msg); } catch(err) { console.log(err) } window.getSelection().removeAllRanges();

Som de fleste 20 år gamle nettleser-API-er, er det klumpete, men det er ganske greit. Du oppretter bare et område (innholdet som velges, i vårt tilfelle .copyButton element), og kjør deretter execCommand ('kopi') på den. Som jeg sa, det er enkelt og lite, og det kan resultere i store gevinster for brukervennlighet for ethvert nettsted.

05. Blob API

Takket være Blob API kan brukerne nå enkelt lagre genererte bilder, tekst og så videre

Takket være Blob API kan brukerne nå enkelt lagre genererte bilder, tekst og så videre

Du trenger ikke å nå ut til serveren for å opprette en fil. Med klatter (binære store objekter) kan du ta alt vilkårlig innhold - det være seg brukeropprettede lerretbilder, genererte dokumenter som de på kodingsider som CodePen eller JS Bin, eller til og med siden du allerede er på.

content demo var pageContent = new XMLSerializer().serializeToString(document); var pageBlob = new Blob([pageContent], {type: 'application/octet-stream'}); var a = document.createElement('a'); a.href = URL.createObjectURL(pageBlob); a.innerText = 'Click me to download this page!'; document.documentElement.appendChild(a);

Dette er veldig nyttig når som helst brukeren oppretter innhold på nettstedet ditt, eller du må reise tilbake til serveren din for å laste ned noe generert innhold bare for å utløse dialogboksen 'Lagre'.

Alt som kreves er at du sender inn en rekke innhold du vil generere blobben fra, så vel som mime-typen du vil at klienten skal behandle, og du får en binær blob som representerer det innholdet.

hvordan bli kunstnerisk leder

Hvis du vil være i stand til å laste ned det på siden, sender du bloben til URL. createObjectURL og opprett en lenke som peker mot den. Du kan enten få brukeren til å klikke på en knapp, eller ringe .klikk () deg selv. Uansett kan du laste ned filene dine uten å forlate brukerens enhet, noe som sparer båndbredde og tid.

06. Rull Snap Points

Denne nye CSS-spesifikasjonen gjør det mulig for devs å skille presentasjon fra logikk ved koding av karuseller

Denne nye CSS-spesifikasjonen gjør det mulig for devs å skille presentasjon fra logikk ved koding av karuseller

På nesten hver jobb jeg noen gang har hatt, har jeg måttet implementere en karusell. Til tross for at det er et enkelt konsept, ender det uunngåelig med å være mer kode enn det føles riktig - og lykke til med å prøve å sikre at det er tilgjengelig og performant.

Fordi jeg ikke er alene om denne sisyfiske oppgaven, opprettet Matt Rakow og Jacob Rossi fra Microsoft CSS Scroll Snap Points. I stedet for å animere alle lysbildene dine med JavaScript, lar Snap Points oss skille presentasjonen vår fra logikken vår og definere den karusellignende interaksjonen helt i CSS.

#carousel { scroll-snap-type: mandatory; } .slides { scroll-snap-points-x: repeat(100%); }

Nå når brukeren slutter å rulle, vil det siste lysbildet snappe til venstre for karusellbeholderen. Alt annet fungerer automatisk, med GPU-drevet godhet. Selvfølgelig er det mye mer du kan gjøre med det, og en rekke egenskaper og verdier du kan bruke til å tilpasse karusellen din.

Det er verdt å merke seg at mens Internet Explorer-teamet opprettet spesifikasjonen, har den utviklet seg ganske siden. Som et resultat er implementeringene ganske forskjellige i nettlesere - bruk et verktøy som Autoprefixer for å sikre at du dekker basene dine. Og som alltid, sørg for at du laster inn en polyfyll som scrollsnap-polyfill for nettlesere som ikke støttes - du vil ikke at innholdet skal være utilgjengelig.

07. IndeksertDB

Denne minimalistiske innpakningen for IndexedDB fra David Fahlander gir deg syntaks i jQuery-stil

Denne minimalistiske innpakningen for IndexedDB fra David Fahlander gir deg syntaks i jQuery-stil

IndexedDB er enda et trekk ved nettplattformen som er kriminelt underutnyttet. Effektivt en full database i nettleseren, den lar deg lagre dusinvis av megabyte innhold på mobil (vanligvis over 50 MB) og hvor som helst opp til hundrevis av gigabyte på skrivebordet (ja gigabyte, med en ‘g’)! Det er også et flott alternativ for lagring av blobs med data, for eksempel sideelementer eller bilder, slik at de kan lastes inn selv når brukerens enhet er offline.

Den største ulempen med IndexedDB har alltid vært dens stumpe syntaks. Selv om det er teknisk strålende, er det mye mer komplekst enn document.cookie, localStorage eller annen datalagringsmetode. Du bør ikke la det stoppe deg lenger! Det er noen fantastiske biblioteker som dekker nettleserforskjeller, samt gir deg mye mer menneskelig lesbar syntaks.

For eksempel gir Dexie.js deg en vakker syntaks i jQuery-stil rundt transaksjonene dine, og localForage-innpakningen gir deg kraften til IndexedDB med den enkle API-en til localStorage. Kanskje en av de kuleste innpakningene er Mikeal Rogers ’PouchDB. Dette er en fullstendig implementering av CouchDB på klientsiden, noe som betyr at du får Couchs innebygde full replikering (du kan replikere hele databasen ned til brukerens enhet!).

IndexedDB er latterlig kraftig, og med nylige oppdateringer til Safari og mengden av flotte biblioteker som bretter over uoverensstemmelser i nettlesere, bør du virkelig sjekke det ut i dag.

Konklusjon

Det jeg har dekket her er toppen av isfjellet. Det er dusinvis og dusinvis av APIer og funksjoner som er opprettet for å forbedre nettplattformen. Ikke alle får blanke omslagsfunksjoner eller grundige blogginnlegg, men de er der og venter i brukernes nettlesere på at du skal wow dem med. Ikke la mangel på full nettleserstøtte hindre deg i å spille med noen nye API-er. Med bare litt progressiv forbedring kan du gi en flott opplevelse til nesten alle brukerne, og bidra til å skyve nettet fremover.