Nuove risorse per Web designer e sviluppatori (ottobre 2017)

Questo mese Fresh Resouces sarà un po 'diverso rispetto ai mesi precedenti. Noi sviluppatori web ci guadagniamo da vivere in un settore in rapida evoluzione e ho visto molti annunci di alcune delle più grandi aziende tecnologiche come Google, Microsoft, Firefox e PHP, che cambieranno il modo in cui costruiamo la rete.

In questa puntata, metà della nostra lista riguarderà questi annunci. Quindi, sii pronto a salutare il futuro!

Ottimizzazione dell'immagine essenziale

È un articolo esaustivo per ottimizzare un'immagine per il web scritto da Addy Osmani. Non è come gli altri articoli che ruotano attorno a come fare, o cosa fare e cosa non fare.

Questo articolo ti guida attraverso i dettagli tecnici e il scienza dietro l'ottimizzazione. Troverai anche informazioni approfondite su diversi approcci di ottimizzazione e formati di immagine, strumenti, suggerimenti e alcuni esempi reali.

PHP 7.2

Un completo riferimento su ciò che viene in PHP 7.2. Oltre alle aggiunte che migliorano le prestazioni delle applicazioni PHP, viene fornito anche PHP 7.2 deprezzamento in cui molte cose verranno rimosse e non dovrebbe più essere usato.

In PHP 7.2, ci sono due funzioni che saranno deprecate vale a dire create_function () e __autoload (). Se sei uno sviluppatore web, rivedere il codice e apportare le modifiche necessarie. Ho visto numerosi plugin WordPress che utilizzano ancora queste due funzioni.

API Web Share

Onestamente, non ho visto questa API arrivare sul Web. Tuttavia, come la metà della nostra interazione sul web è circa “compartecipazione”, questa API farà grandi cose più facile per gli sviluppatori Web creare un'esperienza di condivisione nativa, in particolare sulla piattaforma mobile.

Questa API è attualmente disponibile solo in Google Chrome per desktop e Android. Guarda questo video Youtube per vederlo in azione.

Attributo asincrono di immagine

Un'altra cosa che rivoluzionerà il web è il async attributo per l'elemento img. Al momento della scrittura, ci sono una serie di approcci a carica l'immagine in modo asincrono che comporta un piccolo trucco di JavaScript. Presto saremo in grado di aggiungere async = on sul img elemento.

Firefox Quantum

Mozilla ha inviato aggressivamente aggiornamenti a Firefox con alcuni miglioramenti, nome in codice “Progetto Quantum”. Comprende CSS Quantum, un nuovo motore per rendering CSS estremamente veloce, una nuova interfaccia utente e nuovi strumenti DevTools.

L'uscita è guadagnando la trazione negli sviluppatori web e alcuni hanno già cambiato il loro browser principale in Firefox. Ci sono altri in arrivo in questo progetto tra cui Quantum DOM e WebRender. Stiamo andando a vedere il contendente Node.js basato sul motore Firefox Quantum? Bene, forse si.

MS Edge per iOS e Android

Microsoft ha appena annunciato rilascia il suo ultimo browser, Edge, su iOS e Android. Questo significa che c'è un altro browser con cui testare i tuoi siti web.

Gutenberg

WordPress è attualmente impegnato in un ambizioso progetto, il cui nome in codice è Gutenberg. Gutenberg è un Facelift all'editor di WordPress costruito quasi interamente con JavaScript.

A questo punto, Gutenberg è costruito con React ma il progetto sta considerando un altro framework come Preact, Vue o qualcos'altro. È una situazione complicata per ora. Quindi, per gli sviluppatori di WordPress che creano temi e plugin, mantieni gli occhi sul progetto come cambierà il modo in cui costruiamo WordPress per sempre.

FoitFout

FoitFout è uno strumento utile per confrontare due diversi approcci chiamati FOIT e FOUT caricare caratteri personalizzati sul web. Con questo strumento, sei in grado di emulare i due approcci e decidere quale approccio è più adatto per il tuo sito.

Vuera

Vuera è un Libreria JavaScript che consente di utilizzare Vue e React insieme. È possibile includere un componente Vue da a .vue o usare un componente React in Vue. La tua squadra ora può essere più produttivo con qualsiasi quadro che preferiscono usare.

trascinabili

“trascinabili” è una fantastica libreria di Shopify. È costruito sopra il browser nativo API Drag-n-Drop e ti consente di utilizzare un'API estesa. Nel caso in cui non fornisca qualcosa di cui hai bisogno, puoi scrivere a modulo personalizzato per estendere le sue funzionalità. Guarda la demo per vedere come funziona.

FlowchartJS

Come suggerisce il nome, FlowchartJS è un libreria che consente di creare un diagramma di flusso come in PowerPoint. Allo stesso modo, puoi creare varie forme di grafici tra cui cerchio, ellisse, quadrato, diamante, triangolo, ecc.

QuickBill

Un leggero e applicazione web semplice per creare una fattura. Utilizza le tecnologie browser native e le API per l'esecuzione, quindi non è necessario alcun account. Basta andare al sito Web, aggiungere gli articoli alla fattura e generare il file PDF. Questo è tutto!

Mocka

Mocka è un segnaposto di contenuto che è possibile utilizzare per il sito Web di prototipazione. È solo 500 byte e completamente personalizzabile. Puoi facilmente includerlo nel file CSS del tuo progetto usando il mixin di Sass.

Il CSS fornisce un numero di classi Compreso Mocka-media per creare un segnaposto immagine, Mocka-rubrica per creare un titolo, e Mocka-text per creare un testo arbitrario.

VueStar

VueStar è un Componente Vue per aggiungere un effetto scintillante quando fai clic su un'icona, simile a quello che fa Twitter con il “cuore” icona nella loro app mobile. Il componente introduce un nuovo elemento chiamato vue stelle dove puoi aggiungerlo nell'era web. E hai finito!

Grid Playground

La griglia CSS introduce un nuovo concetto sul web per costruire un layout ed è un po 'complesso a prima vista viste le numerose nuove proprietà che ha.

GridPlayground è fondamentalmente un Iniziativa Mozilla per insegnare CSS Grid e per spingere in avanti l'adozione della griglia Grid. Persino Firefox introduce un nuovo strumento in DevTools per ispezionare il layout della griglia.

Snippet Manager

“Snippet Manager” è un semplice app per archiviare e gestire frammenti di codice. È possibile creare un nuovo elemento, incollare il codice e impostare il punto. A questo punto, niente di troppo elegante e fornisce solo il codice sorgente che dovrai compilare usando NPM.

Interfaccia a schede

Un grande passo-passo sulla costruzione di una navigazione tab progressiva e accessibile con un uso minimo di JavaScript. Una grande risorsa per coloro che vogliono saperne di più sul design accessibile.

SwissInCSS

SwissInCSS esibisce molti dei classici cartelloni pubblicitari svizzeri utilizzando solo CSS. Il codice sorgente è disponibile in CodePen.