Nuove risorse per web designer e sviluppatori (gennaio 2018)

Il nuovo anno 2018 è qui. Se guardiamo ai progressi nello sviluppo del web cinque anni fa, è completamente diverso da quello che abbiamo oggi. Oggi ci sono nuovi metodi, strumenti e persino un paradigma completamente nuovo questo cambia il modo in cui costruiamo i siti web oggi - e VirtualDOM è uno di questi.

DOM (Document Object Model) è un modello ad albero che definisce come è strutturato un sito web. Selezionare, attraversare e manipolare il DOM potrebbe essere una oprerazione molto costosa e potrebbe ostacolare le prestazioni di rendering del tuo sito.

Tuttavia, in questo post non discuteremo come funziona VirtualDOM, invece, insieme agli altri strumenti, esamineremo librerie che consentono di implementare VirtualDOM subito. Vediamoli.

MaquetteJS

Un implementazione di VirtualDOM che ti permette di costruire un'interfaccia utente fluida che si aggiorna con i dati che la circondano. È un puro JavaScript e unopiniated biblioteca quindi è possibile usalo insieme a un linguaggio sintetico come CoffeeScript, TypeScript e JSX. Un'ottima libreria alternativa a React.js; MaquetteJS è di dimensioni molto più ridotte (solo 3kb) comparabile.

Redom

Questa è una delle mie librerie VirtualDOM preferite, in quanto è facile prenderla semplicemente osservando la sintassi. Con solo 2Kb, puoi creare una pagina Web di rendering veloce o un componente HTML personalizzato. La biblioteca è composta due funzioni primarie EL, per creare o manipolare un elemento, e montare per aggiungerlo a un elemento selezionato. Puoi caricarlo nel browser e sul lato server con NodeJS.

ReactiveJS

Un modello Libreria dell'interfaccia utente per creare applicazioni Web altamente interattive. Originariamente costruito per TheGuardian, ReactiveJS è progettato per funzionare su browser e dispositivi mobili; quindi puoi fare affidamento sulla sua affidabilità. ReactiveJS viene anche con molte funzionalità necessarie per le moderne applicazioni Web subito disponibili, come CSS Scoped, Componenti personalizzati, SVG e animazione.

RiotJS

RitoJS è un lavoro piacevole e molto più semplice da imparare per i principianti consente di definire un componente personalizzato con l'elemento HTML e gli attributi HTML mentre le librerie precedenti impongono di utilizzare la pura sintassi JavaScript.

RiotJS è compatibile con Node.js Environement o nei browser e potrebbe essere un ottima alternativa a Vue.js date le similitudini.

HyperHTML

hyperHTML, come il nome suggerisce, offre prestazioni durante il rendering e la manipolazione del DOM. Puoi usarlo per creare elementi personalizzati e componenti Web. Funziona facilmente come jQuery in cui può essere utilizzato nel browser da caricamento dello script dal CDN e accesso a hyperHTML. Non c'è bisogno di complicati utensili.

Mithril

Per quanto sia bello, Mithril è un potente libreria JavaScript. Oltre a VirutalDOM e Components, Mithril è anche dotato di Routing e XHR con cui puoi creare un'applicazione web a pagina singola senza fare affidamento su altre librerie. Benchmark mostra che ha prestazioni migliori di alcune librerie popolari come Vue.js, React.js e Angular.

SlimJS

SlimJS è una libreria JavaScript per creare componenti Web personalizzati utilizzando l'API Web Component nativa. Poiché è costruito attorno al componente browser nativo, SlimJS è dotato di un polyfill che spegne l'API nel browser che non lo supporta ancora. È un ottimo quadro se si preferisce adottare la via nativa.

VSVG

Mentre ha una sintassi simile a HTML, SVG è un altro tipo di bestia con le sue peculiarità. Questa libreria, come suggerisce il nome, lo farà ti permettono di creare e manipolare SVG al volo.

EmotionSH

EmotionSH è Framework CSS-in-JS che potrebbe essere necessario quando si crea un sito Web con VirtualDOM. Ciò ti consente di fornire solo bit di CSS necessari sul tuo sito e puoi farlo aggiornare dinamicamente lo stile senza essere convocati con la denominazione e la specificità della classe mentre lo stile viene scartato solo per il Componente a cui è applicato.

React Starter Kit

Se hai seguito il web negli ultimi due anni, troverai React (quasi) ovunque. Questo è un 5 corso di breve video che introduce React. Se vuoi stare al passo con l'industria, questi potrebbero essere il posto giusto per iniziare.

Elementi

Elements è una collezione di Componenti iOS per creare un prototipo di app iOS in Sketch. È stato creato dalle persone da Sketch e aggiornato con l'interfaccia utente di iPhone X..

Modaal

Modaal è una libreria JavaScript costruita con in mente l'accessibilità. È stato verificato per “Supporto di livello AA WCAG 2.0” quello (penso) di più accessibile “Modale” biblioteca oggi. Suo leggero, compatibile con jQuery e può essere utilizzato per immagini, video e persino Instagram. Inoltre, questo breve corso di Google ti aiuterà a iniziare con l'accessibilità del Web e perché è importante.

WordPressify

Un pacchetto NPM che consente di ottenere un ambiente di sviluppo WordPress attivo e funzionante in pochi minuti. È tutto pronto con strumenti moderni come Gulp, LiveReload, PostCSS, Babel quindi puoi concentrarti sullo sviluppo del tuo progetto piuttosto sulla configurazione di tuning-up.

Lando

Lando è anche uno strumento utile per far ruotare un ambiente di sviluppo in modo facile e veloce, tanto come WordPressify che abbiamo appena menzionato sopra. Ma invece di Node.js, ci vuole vantaggio di Docker una containerizzazione leggera tecnologia e offre più flessibilità in termini di stack che vorresti utilizzare nel tuo sviluppo.

Ad esempio, puoi specificare la versione di PHP, abilitare XDebug e installare Composer.

WP-Docklines

WP-Docklines è un raccolta di immagini che è possibile utilizzare come riferimento per eseguire l'integrazione e la consegna continue per i tuoi temi WordPress e pluin in servizi come Bitbucket, CircleCI e Gitlab. Ogni immagine è in bundle con strumenti comunemente necessari per lo sviluppo di WordPress come PHP Code Sniffer, PHPUnit e WP-CLI.

WP-Locker

WP-Locker è Docker Componi la configurazione per far girare un ambiente di sviluppo WordPress in pochi minuti. È configurare con Apache, MySQL e phpMyAdmin e poiché estende l'immagine di WP-Docklines, esegue anche gli strumenti extra sull'immagine immediatamente.

Semplicemente genere bin / inizio lasciarlo, configurare il localhost e installa i plugin e temi che hai configurato nel file di configurazione.

Docusaurus

Un'altra iniziativa open source da Facebook, Docusaurus è uno strumento per creare un sito Web di documentazione del tuo progetto. Costruito con React e Markdown, puoi facilmente comporre la documentazione, mantenerla e persino creare un blog per il tuo sito, e pubblicalo su Github Pages.

VSCode Yo

Yeoman è un pacchetto di nodi che ti consente di avviare rapidamente il progetto selezionando le impalcature prefabbricate che si adattano ai tuoi progetti. Se utilizzi Visual Studio Code, questo plug-in semplificherà ulteriormente il flusso di lavoro all'avvio in quanto ti consente di farlo corri il “yo” comando direttamente dalla finestra Codice di Visual Studio.

BluebirdJS

Una libreria JavaScript che ti permette di usare Promettere, attendere, async oggi in tutti i browser; ha detto che funziona anche su Netscape. Promettere è uno dei punti di forza delle ultime specifiche di JavaScript Rendi il tuo codice più snello, leggibile e facilmente mantenibile.

Prettier

Prettier è uno strumento per formattare il codice per conformarsi allo standard di codifica della lingua. Riscriverà il tuo codice dallo scracth seguendo la regola che consente a te e alla tua squadra di essere più produttivo invece di discutere sugli stili di scrittura del codice.