Nuove risorse per Web designer e sviluppatori (marzo 2019)

Molto è successo negli ultimi mesi nel mondo dello sviluppo web. Innanzitutto, il nuovo editor basato su blocchi, nome in codice Gutenberg, è stato finalmente unito a WordPress 5.0. È un grande cambiamento sin dal suo inizio, poiché stabilisce una nuova base per l'evoluzione di WordPress in futuro e cambierà il modo in cui gli sviluppatori si estendono per le funzionalità di WordPress.

In secondo luogo, alcuni dei nostri colleghi sviluppatori hanno creato alcuni strumenti davvero utili come quello che consente visualizza JSON nel terminale e un paio di librerie React che possono essere di grande aiuto nella progettazione di siti web e nei progetti di sviluppo.

E infine, alcuni dei più efficaci risorse, riferimenti e plugin sono stati lanciati per aiutarti ad aggiornare i tuoi progetti in base alle nuove tendenze.

Andiamo sull'elenco più completo di nuove risorse per lo sviluppo web.

Manuale di Gutenberg

Il manuale ufficiale di WordPress in cui è possibile consultare i riferimenti per il design, esempi di codice per la creazione di blocchi e altri e una guida per contribuire al progetto. È il tuo primo riferimento per lo sviluppo con Gutenberg.

Block Scaffold

Con l'editor basato su blocchi, WP-CLI offre ora un modo conveniente per iniziare creando un blocco Gutenberg con un nuovo comando CLI, blocco ponteggio wp. Puoi crearlo e includerlo nei tuoi plug-in e temi esistenti.

CGB

Un altro modo per avviare facilmente un blocco Gutenberg è Creare Guten Block (CGB) è uno strumento per generare un boilerplate sviluppare un blocco Gutenberg. Consiste in strumenti moderni come React.js, Webpack, ESLint, Babel, ecc. La parte migliore è che tu non è necessario configurare nessuno di questi strumenti quindi puoi semplicemente concentrarti sulla scrittura del tuo codice.

Elementor Blocks per Gutenberg

Un plugin per WordPress che ti permette di inserire qualsiasi modello di Elementor e visualizzalo in anteprima direttamente all'interno dell'editor. Il plugin viene fornito con numerose altre compatibilità che forniscono esperienza di editing senza interruzioni tra Elementor e Gutenberg. Guarda questo video per vedere come sta andando in azione.

Blocchi atomici

Una serie di blocchi di Gutenberg con un numero crescente di raccolte. Al momento di questa scrittura, fornisce il “Post Grid Block” che ti permette di aggiungi un elenco di post del tuo sito in un layout a griglia. C'è anche a “Testimonial Block” che, come suggerisce il nome, per inserire un Testimonial all'interno della pagina. Controlla le anteprime complete dei blocchi in questa pagina.

Block Gallery

Un blocco accattivante per inserire la tua galleria di immagini, Block Gallery offre un'esperienza senza intoppi per aggiungere immagini al tuo post. È sufficiente rilasciare le immagini, modellare la visualizzazione della galleria (in stile massoneria, Carousel o Schermo intero) ed è tutto pronto. È, al momento, semplicemente il miglior blocco di galleria per WordPress.

CoBlocks

Una serie di blocchi dello stesso autore che ha sviluppato la Block Gallery di cui sopra, CoBlocks consiste in un numero di blocchi che miglioreranno il contenuto del tuo sito con Fisarmonica, tabella dei prezzi, Gif, Click-to-Tweet, e più blocchi da aggiungere.

StagBlocks

Un'altra suite di blocchi di Gutenberg. Il plugin porta un numero di blocchi interessanti che molti di voi apprezzerebbero. Include Stat Block che ti consente di personalizzare le statistiche all'interno dei tuoi post e pagine. Blocco di carte del sito web che lo farà sito web di anteprima in stile carta fantasia. Code Block che renderizza il codice con il colore evidenziato.

Otter Blocks

Inoltre, una collezione di blocchi di Gutenberg come il “Blocco di Google Maps” inserire una mappa, “Il nostro blocco di servizi” a inserire un elenco di servizi con un pulsante in una vista a griglia, e “Testimonianze Area Block” inserire un elenco di testimonianze. Otter Block è una raccolta di blocchi Gutenberg che le aziende e gli sviluppatori di temi apprezzerebbero.

Advanced Gutenberg Blocks

Questo plugin viene fornito con una manciata di Blocchi avanzati per arricchire i tuoi contenuti come il sommario generato automaticamente, “Giphy Blocks” per includere l'immagine GIF da Giphy.com, “Unsplash Block” per inserire immagini da Unsplash.com, “Banner Ad Block”, WooCommerce “Blocco pulsanti Add-to-Cart”, e molto di più.

Block Lab

Block Lab consente agli sviluppatori di creare facilmente un blocco Gutenberg. Il plugin ti permette di registra un nuovo blocco con una GUI user-friendly e modelli in PHP. Non hai nemmeno bisogno di imparare React.js.

Blocchi EDD

Un plug-in che consente di eseguire il rendering di prodotti Easy Digital Download nell'editor di Gutenberg. A differenza dell'utilizzo dello Shortcode, il blocco mostrerà le visualizzazioni del prodotto.

Prova Gutenberg

Non sei pronto per installare il plugin Gutenberg o aggiornare il tuo sito a WordPress 5.0? Puoi semplicemente carica questo sito per provare il nuovo editor.

Gutenberg Cloud

È come un AppStore per Gutenberg Blocks. Un posto centrale dove puoi arrivare Gutenberg Blocks che possono essere utilizzati in WordPress e Drupal. Sì, Drupal adotterà anche l'editor Gutenberg per il loro editore.

Esempi di Gutenberg

Un repository Github di esempi di codice per creare blocchi Gutenberg. Qui puoi trovare il Il più semplice Blocca per un esempio più complesso, come quello per creare a “Blocco ricetta” che imposta un modello nell'editor per gli utenti da aggiungere ricetta soddisfare. Un buon riferimento per coloro che preferiscono imparare da esempi reali, piuttosto che da un libro di testo.

GutenbergJS

La versione solo JavaScript di Gutenberg. È disponibile come pacchetto NPM che consente di integrare Gutenberg in qualsiasi applicazione JavaScript.

Disabilita Gutenberg

Anche se Gutenberg offre nuove possibilità a WordPress, ma non tutti sono pronti per questo. Se i tuoi siti esistenti non funzionano bene con Gutenberg, puoi installare questo plugin. Ti permette di disabilitare l'editor di Gutenberg per post particolari, tipi di post, ruoli utente, temi, oltre a disabilitare i fogli di stile Gutenberg nel front-end.

Editor classico

In alternativa, puoi installare questo plug-in in modo da poterti tenere aggiornato a WordPress 5.0 continuando a utilizzare il vecchio editor classico. Questo plugin sarà supportato fino al 2022.

ClassicPress

Un'altra alternativa è passare a un fork di WordPress, ClassicPress. Il focus di ClassicPress è attivo imprese, stabilità e sicurezza. È compatibile con i plugin di WordPress e prevede di introdurre nuove funzionalità interessanti nelle loro versioni future. Dai un'occhiata al nostro post: ClassicPress: alternativa a WordPress senza Gutenberg e React.js

Accelerare WordPress

Come WordPress è diventato così grande; più che una semplice piattaforma di blogging. Gutenberg, in particolare, ha aggiunto alcuni carichi extra, codici, file al tuo sito che potrebbero rallentare il tuo sito. Questo è un dettaglio a cui puoi fare riferimento per aiutarti a identificare i punti di riferimento sul tuo sito e indirizzarlo alle ultime best practice del settore.

Anteprima del browser dei codici di Visual Studio

Un editor di codice visivo che aggiunge un vero browser basato su Chrome Headless all'interno di Visual Studio Code. Questo ti permette di visualizza in anteprima il tuo lavoro in tempo reale proprio all'interno dell'editor del codice e abilita funzionalità come il debug in-editor.

Bundlesize

Bundlesize è uno strumento per mantieni il tuo file JavaScript bundling taglia sotto controllo. Puoi definire la dimensione massima di ciascuno dei tuoi file in bundle e ti avviserà quando ha circa o superato la dimensione massima definita. Bundlesize può essere integrato con un servizio CI come TravisCI e CircleCI per la perfetta implementazione del flusso di lavoro nel progetto.

WP Emerge

Un moderno Framework per tema WordPress basato sul pattern MVC. Se sei abituato a lavorare con un framework PHP come Laravel e Slim, sono sicuro che apprezzerai davvero questo framework. Puoi usare cose come Router e Controller, DI Container e Middlerware.

Bot del faro

Uno strumento di utilità che consente di eseguire Lighthouse in un servizio CI tramite Docker. È un ottimo strumento per automatizza il controllo delle prestazioni del tuo sito web ogni volta che invii una nuova modifica al codice del tuo sito web.

Scopri l'app React

Learn React App è una risorsa per imparare React.js. Ma a differenza delle altre risorse là fuori, questo dovrebbe essere installato localmente nel tuo computer. Non contiene solo materiale didattico ma anche codice e campioni interattivi. La parte migliore è che puoi farlo mentre sei offline una volta installato.

Accettazione del WP

WP Acceptance è uno strumento nuovo che consente di eseguire test di accettazione. Per dirla semplicemente, Acceptance Tests è una serie di test per emulare il comportamento degli utenti. Ci sono una serie di framework là fuori per eseguire questo tipo di test.

Tuttavia, se lavori principalmente con WordPress, apprezzerai questo strumento per la facilità d'uso in quanto è progettato e adattato ai tipici progetti WordPress necessari.

Brillante

Una libreria JavaScript a emula il riflesso della luce sul tuo sito web quando viene visualizzato sul dispositivo mobile. È possibile visualizzare la demo in https://pqina.nl/shiny/. Vale la pena notare che funzionerà solo su dispositivi mobili poiché si basa su una determinata API disponibile solo su dispositivi mobili.

Reagisci Lucido

ReactLucid è uno strumento per aiutarti eseguire il debug di applicazioni React e GraphQL in un modo più interattivo. Permette di vedere la gerarchia dei componenti, le modifiche di stato / oggetti di scena all'interno dell'applicazione React e lo schema GraphQL, le query e le mutazioni in tempo reale.

Funzionalità CSS attiva

Un'estensione di Chrome che ti permette di disabilitare alcune funzionalità CSS in Chrome. Con questo, puoi vedere come il tuo sito web renderà e si comporterà quando alcune funzionalità non esistono. Abbastanza utile per aiutarti a implementare nuove funzionalità CSS che potrebbero non essere implementate in tutti i browser.

blendy

Uno strumento che può aiutarti personalizza le modalità di fusione in background CSS con la tua immagine. È possibile visualizzare l'anteprima delle modalità di fusione, cambiare i colori e applicare sfumature. È possibile utilizzare le immagini da Unsplash o caricarle dal computer.

Reagire Elementale

Una raccolta di elementi React che funzionano fin da subito. Nessun file CSS esterno per importare o personalizzare le configurazioni da aggiungere su Webpack. Viene fornito con componenti essenziali come Button, Checkbox, SelectList, Tabs, Tooltip e molto altro.

FX

Se hai spesso a che fare con formattazione JSON, sono sicuro che apprezzerai questo strumento. fx è un strumento da riga di comando che consente di visualizzare i dati JSON nel terminale con la modalità interattiva. in un modo che è possibile espandere o comprimere i dati. fx può essere installato tramite NPM o Homebrew.

Monica

Monica è abbastanza nella sua categoria. È una specie di CRM (Customer Relationship Manager) ma non è pensato per il tuo cliente ma per i tuoi cari come la tua famiglia e gli amici.

Come un CRM, ti permette di tenere traccia di cose come le tue attività con loro, e quando l'hai chiamato così ecc. Ancora di più, può essere impostato per ricordarti di chiamare qualcuno con cui non hai parlato per un po '. Lo chiamano un PRM (Personal Relationship Manager).

Quadro ionico

La struttura ionica è in realtà in circolazione da un po 'di tempo. Ma ultimamente ha fatto un bel salto nella sua funzionalità. Ora non solo è più veloce, ma lo è anche Ionic compatibile con due framework di stelle nascenti: React.js e Vue.js.

Questo pone le basi perché Ionic sia un strumento agnostico quadro. Quindi, non solo funziona per particolari framework, ma potrebbe anche funzionare con quelli nuovi in ​​quanto lo sviluppo front-end evolve in futuro.

Notevole

Notevole è un'applicazione desktop da prendere appunti. A differenza di qualsiasi altra app simile, non viene fornita con la formattazione proprietaria, WYSIWYG o altri tipici campanelli e fischietti. Il l'editor di app è principalmente basato su Gdown-Flavored Markdown. Le note sono memorizzate in un file flat .md file e l'allegato. Funziona e semplice.

TipTap

TipTap è un editor WYSIWYG basato su ProseMirror con Vue.js. Oltre ad ereditare un numero di funzionalità da ProseMirror, come il fantastico supporto per la sintassi di Markdown, TipTap offre alcune funzionalità moderne come il menu Bubble in cui apparirà il menu di formattazione quando evidenzi il testo, la funzione Suggerimenti in cui puoi taggare o menzionare una persona all'interno del contenuto ed esporta il possibilità di esportare il contenuto nella formattazione JSON.

Restplain

Restplain è un plugin per WordPress che ti consente di generare facilmente la documentazione dei tuoi endpoint REST di WordPress inclusi endpoint personalizzati sul tuo sito e effettuare una chiamata API dall'interno dei documenti. Una cosa da notare è che si basa sullo schema dell'endpoint per generare la documentazione, quindi assicurati di aver aggiunto uno schema appropriato per i tuoi endpoint personalizzati.

Reagire caricatore di contenuto

Reagire caricatore di contenuto è un componente personalizzato React che consente di visualizzare segnaposto contenuto durante il caricamento del contenuto effettivo. È simile al tipo di caricatore che vedi su Facebook e Instagram .

Mitico

Mythic è un tema di avviamento WordPress con le migliori pratiche moderne come Iniezione delle dipendenze, Viste e Controller, oltre a strumenti moderni come l'uso di Webpack, Sass, Linting, PHP7 requisito minimo e BEM. È un grande tema per migliorare le tue abilità come sviluppatore di temi.

Github raffinato

Un'estensione del browser per perfezionare la tua esperienza quando usi Github. Aggiunge diversi comodi tasti di scelta rapida, perfeziona alcuni layout e interfacce utente, aggiunge automaticamente il collegamento a problemi e PR e molto altro.

WC aperto

Open WC è un set di strumenti che consentono di creare componenti Web personalizzati. Include la libreria principale per creare un componente Web, i generatori Yeoman per generare rapidamente un “WC aperto” progetto, che include lo scaffold per i test, linting, e continua l'integrazione.

Aprire il WC può essere una buona alternativa se lo si desidera preferisco implementare con una funzionalità web nativa piuttosto che utilizzare un framework come Vue.js o React.js.

Gridsome

Gridsome è un strumento per costruire siti Web statici e applicazioni Web con Vue.js e GraphQL. È in grado di gestire più flussi di dati come CMS come WordPress e Drupal, un file locale come Markdown o Yaml o API esterne come AirTable e Contentful. Questa è davvero un'ottima alternativa a Gatsby.js, specialmente se preferisci Vue.js su React.js.

Il browser

Questo è il browser come previsto dallo stesso inventore del World Wide Web, Tim Berners-Lee. È un semplice browser per il rendering HTML e non mostra una barra degli indirizzi come un browser moderno ma puoi visualizzarli navigando Documento> Apri dal riferimento completo del documento e incollare in un URL e fare clic Aperto. E lì vedrai come il tuo sito verrà visualizzato con il browser originale.

raster

Raster è un framework di griglia moderno costruito con le moderne specifiche HTML e CSS come griglia CSS, proprietà personalizzata CSS (variabile) e elemento personalizzato. Un quadro perfetto per chi ama vivere ai margini.

Hooper

Un componente Vue.js per aggiungere un carosello o uno slider. È accessibile e utilizzabile tramite Touch, Keyboard, Mouse Wheel e altre funzioni di navigazione assistiva, supporta RTL e direzione verticale, estensibile e, naturalmente, risposta.