Tuoreet resurssit web-suunnittelijoille ja kehittäjille (lokakuu 2017)

Tässä kuussa Fresh Resouces tulee olemaan hieman erilainen kuin edellisinä kuukausina. Me web-kehittäjät elämme nopeasti muuttuvassa teollisuudessa, ja olen nähnyt paljon ilmoituksia joistakin suurimmista teknologiayrityksistä, kuten Google, Microsoft, Firefox ja PHP, jotka muuttavat tapaa rakentaa verkko.

Tässä erässä puolet listastamme tulee olemaan kyseisistä ilmoituksista. Joten, olkaa valmiita sanomaan tervetulleeksi tulevaisuuteen!

Essential Image Optimization

Se on tyhjentävä artikkeli web-kuvan optimoimiseksi kirjoittanut Addy Osmani. Se ei ole kuin muut kirjoitukset, jotka kiertävät vain ohjeen tai vain tekemisen ja kiellon ympärillä.

Tämä artikkeli todella käy läpi tekniset yksityiskohdat sekä optimoinnin takana. Löydät myös perusteellista tietoa useista optimointimenetelmistä ja kuvamuodoista, työkaluja, vinkkejä ja joitakin todellisia esimerkkejä.

PHP 7.2

Kattava viittaus PHP: n tuloon 7.2. PHP 7.2 -sovelluksen mukana tulee myös PHP-sovelluksen suorituskykyä parantavia lisäyksiä poistot, joissa useita asioita poistetaan ja sitä ei pitäisi enää käyttää.

PHP 7.2: ssa on kaksi toimintoa, jotka poistetaan käytöstä create_function () ja __autoload (). Jos olet web-kehittäjä, tarkista koodi ja tee tarvittavat muutokset. Olen nähnyt lukuisia WordPress-laajennuksia, jotka käyttävät edelleen näitä kahta toimintoa.

Web Share API

En rehellisesti näyttänyt, että tämä API on tulossa verkkoon. Koska puolet vuorovaikutuksestamme verkossa on kuitenkin kyse “jakaminen”, tämä API tekee paljon asioita Web-kehittäjien on helpompi rakentaa natiivi jakamiskokemus, erityisesti mobiilialustalla.

Tämä API on käytettävissä vain Google Chromen työpöydällä ja Androidissa. Katso tämä Youtube-video nähdäksesi sen toiminnassa.

Image Async -määrite

Toinen asia, joka mullistaa webin, on async img-elementin attribuutti. Kirjallisuuden aikaan on olemassa muutama lähestymistapa ladata kuvan asynkronisesti, johon liittyy pieni temppu JavaScript. Pian voimme vain lisätä async = päällä päälle img elementti.

Firefox Quantum

Mozilla on aggressiivisesti painanut Firefoxin päivityksiä, joiden parannukset ovat koodinimiä “Project Quantum”. Se sisältää Quantum CSS - uuden moottorin erittäin nopea CSS-renderointi, uusi käyttöliittymä ja uudet DevTools-laitteet.

Julkaisu on hankkimaan vetoa web-kehittäjissä ja jotkut ovat jo vaihtaneet pääselaimensa Firefoxiin. Tässä projektissa on paljon enemmän, kuten Quantum DOM ja WebRender. Aiotteko nähdä Node.js-kilpailijan Firefox Quantum -moottoriin? No, ehkä kyllä.

MS Edge iOS: lle ja Androidille

Microsoft on juuri ilmoittanut julkaise uusin selain, Edge, iOS: lle ja Androidille. Tämä tarkoittaa sitä, että sivustoillesi on vielä yksi selain.

Gutenberg

WordPress on parhaillaan kunnianhimoisessa hankkeessa, koodilla nimeltä Gutenberg. Gutenberg on a facelift WordPress-editoriin, joka on rakennettu lähes kokonaan JavaScriptin avulla.

Tässä vaiheessa Gutenberg on rakennettu Reactilla mutta projekti harkitsee toista kehystä, kuten Preact, Vue tai jotain muuta. Se on nyt monimutkainen tilanne. Joten WordPress-kehittäjille rakennetaan teemoja ja laajennuksia, pidä silmäsi projektissa se muuttaa tapaa rakentaa WordPress ikuisesti.

FoitFout

FoitFout on kätevä työkalu, jolla voidaan verrata kahta eri lähestymistapaa, joita kutsutaan nimellä FOIT ja FOUT ladata mukautettuja fontteja verkossa. Tämän työkalun avulla voit jäljitellä näitä kahta lähestymistapaa ja päättää, mikä lähestymistapa sopii parhaiten sivustoosi.

Vuera

Vuera on a JavaScript-kirjasto, jonka avulla voit käyttää Vue- ja React-tiedostoja yhdessä. Voit lisätä Vue-komponentin a: sta .vue tai käytä React-komponenttia Vueissa. Joukkueesi voi nyt olla tuottavampi minkä tahansa kehyksen kanssa että he haluavat käyttää.

vedettäviä

“vedettäviä” on fantastinen kirjasto Shopifystä. Se on rakennettu alkuperäisen selaimen päälle Vedä-n-Drop-sovellusliittymä ja mahdollistaa laajan API-sovelluksen. Jos siinä ei ole jotain, mitä tarvitset, voit kirjoittaa a mukautettu moduuli sen toimintojen laajentamiseksi. Katso demo, miten se toimii.

FlowchartJS

Kuten nimi viittaa, FlowchartJS on a kirjasto, joka mahdollistaa vuokaavion rakentamisen kuten PowerPointissa. Samoin voit luoda erilaisia ​​kaavion muotoja, kuten ympyrän, ellipsin, neliön, timantin, kolmion jne.

QuickBill

Kevyt ja kevyt yksinkertainen verkkosovellus laskun luomiseksi. Se käyttää natiivia selaintekniikoita ja sovellusliittymiä, jotta niitä ei tarvita. Siirry vain verkkosivustoon, lisää kohteet laskuun ja luo PDF-tiedosto. Se siitä!

mocka

Mocka on a sisältöpaikkamerkki, jota voit käyttää prototyyppisivustolla. Se on vain 500 tavua ja täysin muokattavissa. Voit sisällyttää sen helposti projektisi CSS-tiedostoon käyttämällä Sass-sekoitusta.

CSS tarjoaa useita luokkia mukaan lukien mocka-media luoda kuva-paikanvaraajan, mocka-otsikko luoda otsikko ja mocka-text luoda mielivaltainen teksti.

VueStar

VueStar on a Vue-komponentti lisää kuohuviiniä, kun napsautat kuvaketta, samanlainen kuin mitä Twitter tekee “sydän” kuvaketta mobiilisovelluksessa. Komponentti esittelee uuden nimikkeen vue tähden missä voit lisätä sen web-iässä. Ja olet valmis!

Grid-leikkipaikka

CSS Grid esittelee uuden konseptin verkossa, jotta se voi rakentaa ulkoasun ja se on ensiluokkainen monimutkainen, kun otetaan huomioon lukuisat uudet ominaisuudet.

GridPlayground on pohjimmiltaan a Mozillan aloite CSS Grid -opetuksen opettamiseksi ja CSS Gridin käyttöönoton edistämiseksi. Jopa Firefox tuo DevToolsille uuden työkalun tarkastamaan Grid-asettelua.

Lohkonhallinta

“Lohkonhallinta” on yksinkertainen sovellus tallentaa ja hallita koodinpätkiä. Voit luoda uuden kohteen, liittää koodin ja asettaa pisteen. Tässä vaiheessa mikään ei liian hieno ja se tarjoaa vain lähdekoodin, joka sinun täytyy kääntää NPM: n avulla.

Välilehti

Suuri Kävele läpi edistyksellisen ja helppokäyttöisen välilehden navigoinnin ja JavaScriptin käytön. Erinomainen resurssi niille, jotka haluavat oppia lisää esteettömästä suunnittelusta.

SwissInCSS

SwissInCSS: llä on useita klassisia sveitsiläisiä julisteita, joissa ei ole muuta kuin CSS. Lähdekoodi on saatavilla CodePenissä.