Sveži viri za spletne oblikovalce in razvijalce (oktober 2017)

Ta mesec Fresh Resouces bo nekoliko drugačen od prejšnjih mesecev. Mi, spletni razvijalci, živimo v hitro spreminjajoči se industriji in videla sem veliko objav nekaterih največjih tehnoloških podjetij, kot so Google, Microsoft, Firefox in PHP, kar bo spremenilo način gradnje na spletu.

V tem obroku bo polovica našega seznama o teh obvestilih. Torej bodite pripravljeni pozdraviti prihodnost!

Bistvena optimizacija slike

To je izčrpen članek za optimizacijo slike za splet napisal Addy Osmani. To ni tako kot drugi napisi, ki se vrtijo okoli tega, kako do, ali samo do in ne.

Ta članek dejansko vas vodi skozi tehnične podrobnosti kot tudi znanost za optimizacijo. Prav tako boste našli podrobne informacije o različnih pristopih optimizacije in oblikah slik, orodja, nasveti in primeri iz resničnega sveta.

PHP 7.2

Celovit referenca o tem, kaj prihaja v PHP 7.2. Poleg dodatkov, ki izboljšujejo zmogljivost aplikacije PHP, je na voljo tudi PHP 7.2 amortizacije, pri kateri se bo več stvari odstranilo in se ne smejo več uporabljati.

V PHP 7.2 obstajata dve funkciji, ki bosta opuščeni create_function () in __autoload (). Če ste spletni razvijalec, preglejte svojo kodo in naredite potrebne spremembe. Videl sem številne WordPress vtičnike, ki še vedno uporabljajo te dve funkciji.

API spletnega gostovanja

Iskreno nisem videl tega API-ja, ki bi prišel na splet. Vendar pa je približno polovica naše interakcije na spletu “skupne rabe”, ta API bo v veliko pomoč Spletnim razvijalcem je lažje izdelati izvirno izkušnjo delitve, zlasti na mobilni platformi.

Ta API je trenutno na voljo samo v brskalniku Google Chrome for Desktop in Android. Oglejte si ta videoposnetek v storitvi Youtube, da ga vidite v akciji.

Atribut Async slike

Druga stvar, ki bo revolucionirala splet, je async atribut za element img. V času pisanja je nekaj pristopov naložite sliko asinhrono, kar vključuje majhen trik JavaScripta. Kmalu bomo lahko le dodali async = on na img element.

Firefox Quantum

Mozilla je agresivno spodbujala posodobitve Firefoxa z nekaterimi izboljšavami, ki so jih poimenovali s kodo “Projekt Quantum”. Vključuje tudi Quantum CSS - nov motor za izjemno hitro upodabljanje CSS, nov uporabniški vmesnik in nove DevTools.

Sprostitev je pridobivanje vleke v spletnih razvijalcih in nekateri so že zamenjali svoj glavni brskalnik v Firefox. Obstaja več, da pridejo v tem projektu, vključno z Quantum DOM in WebRender. Ali bomo videli tekmovalca Node.js, ki temelji na motorju Firefox Quantum? No, morda ja.

MS Edge za iOS in Android

Microsoft je pravkar napovedal objavite najnovejši brskalnik, Edge, za iOS in Android. To pomeni, da je na voljo še en brskalnik, s katerim naj vaše spletne strani preskušajo.

Gutenberg

WordPress je trenutno na ambicioznem projektu z oznako Gutenberg. Gutenberg je a facelift za urejevalnik WordPress zgrajen skoraj v celoti z JavaScript.

Na tej točki je Gutenberg zgrajena z React vendar projekt razmišlja o drugem okviru, kot je Preact, Vue ali kaj drugega. Za zdaj je zapletena situacija. Torej, za WordPress razvijalci gradnjo teme in plugins, imejte oči na projektu, kot to bo spremenilo način, kako gradimo WordPress za vedno.

FoitFout

FoitFout je priročno orodje za primerjavo dveh različnih pristopov, tako imenovanih FOIT in FOUT do naložite pisave po meri na spletu. S tem orodjem lahko posnemate oba pristopa in se odločite, kateri pristop je najprimernejši za vaše spletno mesto.

Vuera

Vuera je a JavaScript knjižnica, ki vam omogoča uporabo Vue in React skupaj. Komponento Vue lahko vključite iz a .vue ali uporabite komponento React v Vue. Vaša ekipa lahko zdaj produktivnejši z vsakim okvirom ki jih raje uporabljajo.

Draggable

“Draggable” je fantastična knjižnica iz Shopify. Zgrajen je na samem brskalniku Povlecite API in omogočite obsežen API za delo. V primeru, da ne zagotavlja nekaj, kar potrebujete, lahko napišete a modul po meri za razširitev njegovih funkcionalnosti. Oglejte si demo, da vidite, kako deluje.

FlowchartJS

Kot že ime pove, je FlowchartJS a knjižnico, ki omogoča gradnjo diagrama poteka, kot v PowerPointu. Podobno lahko ustvarite različne oblike grafikona, vključno s krogom, elipso, kvadratom, diamantom, trikotnikom itd.

QuickBill

Lahka in lahka enostavna spletna aplikacija za ustvarjanje računa. Uporablja domorodne tehnologije brskalnikov in API-je za zagon, zato ni potreben noben račun. Enostavno pojdite na spletno mesto, dodajte elemente na račun in ustvarite datoteko PDF. To je to!

Mocka

Mocka je a vsebino, ki jo lahko uporabite za izdelavo spletne strani. To je samo 500 bajtov in popolnoma prilagodljiv. Z lahkoto lahko vključite v CSS datoteko vašega projekta z uporabo Sass mixina.

The CSS ponuja številne razrede vključno z mocka-media , da ustvarite ogrado slike, mocka-naslov za ustvarjanje naslova in mocka-text ustvariti poljubno besedilo.

VueStar

VueStar je a Komponenta Vue za dodajanje penečega učinka, ko kliknete ikono, podobno kot Twitter “srce” v svoji mobilni aplikaciji. Komponenta uvaja nov imenovani element vue-star kjer ga lahko dodate v spletno dobo. In končali ste!

Mrežno igrišče

CSS Grid uvaja nov koncept na spletu za gradnjo postavitve in je na prvi pogled nekako kompleksen glede na številne nove lastnosti, ki jih ima.

GridPlayground je v bistvu a Mozillina pobuda za poučevanje CSS Grid in za napeljevanje CSS Grid naprej. Tudi Firefox prinaša novo orodje DevTools za pregledovanje postavitve Grid.

Upravljalnik odrezkov

“Upravljalnik odrezkov” je preprosta aplikacijo za shranjevanje in upravljanje odrezkov kode. Ustvarite lahko nov element, prilepite kodo in nastavite točko. Na tej točki, nič preveč fancy in samo zagotavlja izvorno kodo, ki jo boste morali prevesti z uporabo NPM.

Vmesnik z zavihki

Odlično sprehod skozi gradnjo progresivne in dostopne navigacije z zavihki z minimalno uporabo JavaScripta. Odličen vir za tiste, ki želijo izvedeti več o dostopni zasnovi.

SwissInCSS

SwissInCSS razstavlja več klasičnih švicarskih modelov plakatov, ki uporabljajo nič drugega kot CSS. Izvorna koda je na voljo v CodePen.