Resurse proaspete pentru designeri web și dezvoltatori (octombrie 2017)

În această lună, Fresh Resouces va fi un pic diferit față de lunile precedente. Noi, dezvoltatorii web, trăim într-o industrie rapidă și am văzut multe anunțuri de la unele dintre cele mai mari companii de tehnologie, cum ar fi Google, Microsoft, Firefox și PHP, care vor schimba modul în care construim internetul.

În această tranșă, jumătate din lista noastră va fi legată de aceste anunțuri. Deci, fi gata să salutăm viitorul!

Optimizarea optimă a imaginilor

Este un articol exhaustiv pentru a optimiza o imagine pentru web scris de Addy Osmani. Nu este ca și alte scrieri care se învârt în jurul valorii de modul de a face, sau de a face și nu numai.

Acest articol vă uită efectiv prin detaliile tehnice, precum și prin știință din spatele optimizării. Veți găsi, de asemenea, informații detaliate despre mai multe abordări de optimizare și formate de imagine, instrumente, sfaturi și câteva exemple din lumea reală.

PHP 7.2

Un mod cuprinzător referință la ceea ce vine în PHP 7.2. În afară de adăugările care îmbunătățesc performanța aplicațiilor PHP, PHP 7.2 vine de asemenea cu deprecierea în care mai multe lucruri vor fi eliminate și nu ar trebui să mai fie utilizate.

În PHP 7.2, există două funcții care urmează să fie depreciate și anume create_function () și __autoload (). Dacă sunteți un dezvoltator web, revizuiți codul și efectuați modificările necesare. Am văzut numeroase pluginuri WordPress care utilizează în continuare aceste două funcții.

API pentru distribuirea web

Sincer, nu am văzut acest API venind pe web. Cu toate acestea, este vorba despre jumătate din interacțiunea noastră pe web “partajare”, acest API va face foarte mult lucrurile mai ușor pentru dezvoltatorii web pentru a construi o experiență de partajare nativă, în special pe platforma mobilă.

Acest API este disponibil în prezent numai în Google Chrome pentru desktop și Android. Consultați acest videoclip pe YouTube pentru ao vedea în acțiune.

Atributul Async de imagine

Un alt lucru care va revolutiona webul este async atribut pentru elementul img. La momentul redactării, există o serie de abordări încărcați imaginea asincron care implică un mic truc de JavaScript. În curând vom putea să adăugăm async = on pe img element.

Firefox Quantum

Mozilla a lansat agresiv actualizări pentru Firefox cu câteva îmbunătățiri, cu nume de cod “Proiectul Quantum”. Acesta include CSS Quantum - un motor nou pentru extrem de rapide redarea CSS, un nou interfață utilizator și noile DevTools.

Eliberarea este câștigând tracțiune în dezvoltatorii web iar unii au schimbat deja browserul principal în Firefox. Mai multe vor veni în acest proiect, inclusiv Quantum DOM și WebRender. Vom vedea candidatul Node.js bazat pe motorul Firefox Quantum? Poate da.

MS Edge pentru iOS și Android

Microsoft tocmai a anunțat lansa cel mai recent browser, Edge, pentru iOS și Android. Acest lucru înseamnă că există încă un browser pentru site-urile dvs. pentru a testa.

Gutenberg

WordPress este în prezent pe un proiect ambițios, codat pe nume Gutenberg. Gutenberg este a facelift editorului WordPress construit aproape în întregime cu JavaScript.

În acest moment, Gutenberg este construit cu React dar proiectul are în vedere un alt cadru cum ar fi Preact, Vue sau altceva. Este o situație complicată pentru moment. Deci, pentru dezvoltatorii WordPress construirea de teme și plugin-uri, păstrați-vă ochii pe proiect ca aceasta va schimba modul în care construim WordPress pentru totdeauna.

FoitFout

FoitFout este un instrument util pentru a compara două abordări diferite așa-numitele FOIT și FOUT la încărcați fonturi personalizate pe web. Cu acest instrument, puteți să îmbinați cele două abordări și să decideți ce abordare este cea mai potrivită pentru site-ul dvs..

Vuera

Vuera este a Bibliotecă JavaScript care vă permite să utilizați împreună Vue și React. Puteți include o componentă Vue de la .vue sau utilizați o componentă React în Vue. Echipa dvs. poate fi acum mai productiv cu orice cadru pe care le preferă să le folosească.

draggable

“draggable” este o bibliotecă fantastică de la Shopify. Acesta este construit pe partea de sus a browser-ului nativ Drag-n-Drop API și vă permite să utilizați un API extensiv. În cazul în care nu oferă ceva de care aveți nevoie, puteți scrie a modul particularizat pentru extinderea funcționalităților sale. Verificați demo-ul pentru a vedea cum funcționează.

FlowchartJS

După cum sugerează și numele, FlowchartJS este a bibliotecă care permite construirea unei diagrame ca în PowerPoint. În mod similar, puteți crea diferite forme de diagramă, inclusiv cerc, elipsă, pătrat, diamant, triunghi, etc.

QuickBill

O ușoară și ușoară aplicație web simplă pentru a crea o factură. Utilizează tehnologii de navigare native și API-uri pentru a rula, astfel încât nu este nevoie de un cont. Pur și simplu accesați site-ul web, adăugați elementele la factură și generați fișierul PDF. Asta e!

Mocka

Mocka este a conținut placeholder pe care îl puteți utiliza pentru site-ul prototip. Sunt doar 500 octeți și pot fi complet personalizate. Puteți să o includeți ușor în fișierul CSS al proiectului, utilizând mixerul Sass.

CSS oferă o serie de clase inclusiv mocka-media pentru a crea un substituent de imagine, mocka-titlu pentru a crea un titlu și mocka text pentru a crea un text arbitrar.

VueStar

VueStar este a Vue componentă pentru a adăuga un efect spumante atunci când faceți clic pe o pictogramă, similar cu ceea ce face Twitter cu “inimă” pictograma din aplicația lor mobilă. Componenta introduce un nou element numit vue stele unde îl puteți adăuga în era web. Și ați terminat!

Grila de joaca pentru copii

CSS Grid introduce un nou concept pe web pentru a construi un aspect și este destul de complex la prima vedere având în vedere numeroasele proprietăți noi pe care le are.

GridPlayground este, în principiu, a Inițiativa Mozilla de a preda CSS Grid și de a impulsiona adoptarea CSS Grid. Chiar și Firefox aduce un nou instrument DevTools pentru a inspecta aspectul rețelei.

Manager de fragmente

“Manager de fragmente” este un simplu app pentru a stoca și gestiona fragmente de cod. Puteți crea un element nou, inserați codul și setați punctul. În acest moment, nimic nu prea fantezie și oferă doar codul sursă pe care va trebui să îl compilați folosind NPM.

Interfața cu interfață

O minunată faceți clic pe fereastra de navigare progresivă și accesibilă a fișierelor cu utilizarea minimă a JavaScript. O resursă excelentă pentru cei care doresc să afle mai multe despre designul accesibil.

SwissInCSS

SwissInCSS expune mai multe modele clasice de postere elvețiene folosind doar CSS. Codul sursă este disponibil în CodePen.