Fresh Resource for Web Developers - 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 che 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 un'operazione molto costosa e potrebbe ostacolare le prestazioni di rendering del tuo sito .
Tuttavia, in questo post non parleremo di come funziona VirtualDOM, invece, insieme agli altri strumenti, esamineremo le librerie che consentono di implementare immediatamente VirtualDOM . Vediamoli.
MaquetteJS
Un'implementazione di VirtualDOM che consente di creare un'interfaccia utente fluida che viene aggiornata con i dati che la circondano. È una pura libreria JavaScript e non aperta, quindi è possibile utilizzarla 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
) in confronto.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018.jpg)
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 libreria consiste in due funzioni principali el
, per creare o manipolare un elemento e mount
per aggiungerlo a un elemento selezionato. Puoi caricarlo nel browser e sul lato server con NodeJS.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-2.jpg)
Una libreria UI basata su modelli 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 include anche molte funzionalità necessarie per le moderne applicazioni Web, come ad esempio CSS Scoped, componenti personalizzati, SVG e animazione.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-3.jpg)
RitoJS è una soluzione piacevole da utilizzare e molto più semplice da apprendere per i principianti in quanto 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 Environement Node.js o nei browser e potrebbe essere un'ottima alternativa a Vue.js date le similitudini .
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-4.jpg)
hyperHTML, come suggerisce il nome, 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 caricando lo script dal CDN e accedendo a hyperHTML . Non c'è bisogno di strumenti complicati.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-5.jpg)
Per quanto sia bello, Mithril è una potente libreria JavaScript . Oltre a VirutalDOM e Components, Mithril è anche dotato di Routing e XHR con cui è possibile creare applicazioni Web a pagina singola senza fare affidamento su altre librerie . Il benchmark mostra che ha prestazioni migliori di alcune librerie popolari come Vue.js, React.js e Angular.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-6.jpg)
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 Polyfill
l'API nel browser che non lo supporta ancora . È un ottimo quadro se si preferisce adottare la via nativa.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-7.jpg)
Mentre ha una sintassi simile a HTML, SVG è un altro tipo di bestia con le sue stranezze. Questa libreria, come suggerisce il nome, ti consentirà di creare e manipolare SVG al volo .
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-8.jpg)
EmotionSH è un framework CSS-in-JS che potrebbe essere necessario quando si crea un sito Web con VirtualDOM . Ciò consente di fornire solo i bit di CSS necessari sul tuo sito e puoi 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.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-9.jpg)
Se hai seguito il web negli ultimi due anni, troverai React (quasi) ovunque. Questo è un corso di 5 video brevi che introduce React . Se vuoi tenere il passo con l'industria, questi potrebbero essere il posto giusto per iniziare.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-10.jpg)
Elements è una raccolta 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.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-11.jpg)
Modaal
Modaal è una libreria JavaScript costruita con in mente l'accessibilità. È stato verificato per "WCAG 2.0 Level AA Support" che (penso) sia la libreria "Modal" più accessibile oggi. È 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.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-12.jpg)
Un pacchetto NPM che consente di ottenere un ambiente di sviluppo WordPress attivo e funzionante in pochi minuti. È tutto configurato con strumenti moderni come Gulp, LiveReload, PostCSS, Babel in modo che tu possa concentrarti sullo sviluppo del tuo progetto piuttosto sulla configurazione di tuning-up.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-13.jpg)
Lando è anche uno strumento utile per creare rapidamente e facilmente un ambiente di sviluppo, proprio come WordPressify che abbiamo appena menzionato sopra. Ma invece di Node.js, si avvale di Docker una tecnologia di containerizzazione leggera e offre una maggiore flessibilità in termini di stack che si desidera utilizzare nel proprio sviluppo.
Ad esempio, è possibile specificare la versione di PHP, abilitare XDebug e installare Composer .
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-14.jpg)
WP-Docklines è una raccolta di immagini che è possibile utilizzare come riferimento per eseguire l'integrazione e la consegna continue per i temi e gli alveari di WordPress in servizi come Bitbucket, CircleCI e Gitlab. Ogni immagine è in bundle con strumenti comunemente necessari durante lo sviluppo di WordPress come PHP Code Sniffer, PHPUnit e WP-CLI.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-15.jpg)
WP-Locker è Docker Componi la configurazione per far girare un ambiente di sviluppo WordPress in pochi minuti. È configurato con Apache, MySQL e phpMyAdmin e poiché estende l'immagine di WP-Docklines, esegue anche gli strumenti extra sull'immagine immediatamente.
Basta digitare bin/start
per lasciarlo, configurare il localhost e installare plugin e temi che si sono configurati nel file di configurazione.
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-16.jpg)
Un'altra iniziativa open source di Facebook, Docusaurus è uno strumento per creare un sito Web di documentazione del progetto . Costruito con React e Markdown, puoi facilmente comporre la documentazione, mantenerla e persino creare un blog per il tuo sito e pubblicarlo su Github Pages .
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-17.jpg)
Yeoman è un pacchetto di nodi che consente di avviare rapidamente il progetto selezionando impalcature prefabbricate che si adattano ai tuoi progetti . Se si utilizza Visual Studio Code, questo plug-in semplificherà ulteriormente il flusso di lavoro di avvio poiché consente di eseguire il comando "Yo" direttamente dalla finestra Codice di Visual Studio .
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-18.jpg)
Una libreria JavaScript che ti permette di usare Promise
, await
, async
oggi in tutti i browser ; ha detto che funziona anche su Netscape. Promise
è uno dei punti di forza delle ultime specifiche JavaScript che renderà il tuo codice più snello, leggibile e facilmente mantenibile .
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-19.jpg)
Prettier è uno strumento per formattare il tuo codice per conformarsi allo standard di codifica della lingua . Riscriverà il tuo codice dallo scracth seguendo la regola che consente a te e al tuo team di essere più produttivi invece di discutere sugli stili di scrittura del codice .
![](http://hideout-lastation.com/img/tech-design-tips/324/fresh-resource-web-developers-january-2018-20.jpg)
![40 modelli di pagine Web gratuiti in Photoshop PSD](http://hideout-lastation.com/img/tech-design-tips/855/40-free-web-page-templates-photoshop-psd.jpg)
40 modelli di pagine Web gratuiti in Photoshop PSD
Il tempo è denaro, e questo è particolarmente vero per i web designer che possono guadagnare di più se sono in grado di gestire il tempo sui progetti. Una cosa che aiuta a risparmiare molto tempo ai progettisti sono i modelli già pronti. I modelli possono essere utilizzati come materiale di base per creare un sito Web personalizzato o puoi mostrarli ai tuoi clienti per aiutarli a visualizzare il prodotto finale.Qui
![18 estensioni gratuite di Photoshop per tutte le creatività](http://hideout-lastation.com/img/tech-design-tips/415/18-free-photoshop-extensions.jpg)
18 estensioni gratuite di Photoshop per tutte le creatività
Adobe Photoshop è un programma di editing grafico molto popolare che include una vasta gamma di funzionalità, troppe per essere nominate. È difficile immaginare che qualcuno possa persino aver bisogno di più funzioni. Eppure Photoshop supporta le estensioni, che ti permettono di aggiungere anche altre funzionalità utili al programma. Alc