Nuove risorse per web designer e sviluppatori (marzo 2017)

Con CLI (Command Line Interface) siamo in grado di snellire e automatizzare i flussi di lavoro di sviluppo web. Ed è per questo che in questa puntata abbiamo incluso un certo numero di CLI fantastici che puoi installare sul tuo computer locale o eseguire alcune cose sul server. Inoltre, ne abbiamo inclusi alcuni Strumenti PHP, componenti aggiuntivi del browser e librerie JavaScript. Vediamoli.

Clicca per altre risorse

Trova la nostra intera collezione di risorse consigliate e i migliori strumenti di sviluppo e progettazione web disponibili.

Guetzli

Un nuovo codificatore di Google consente di comprimere l'immagine fino al 35% dalle dimensioni iniziali pur mantenendo la qualità. E 'piuttosto una svolta dato che analoghi codificatori open source, come ad esempio JPEGOptim e jpegtran, sono limitati a solo il 20% in avarage. Vedo che ci saranno un certo numero di app e plugin per la piattaforma CMS che integrano Guetzli per ottimizzare i file JPEG.

Roadmap degli sviluppatori

Come suggerisce il nome, Developer Roadmap è un infografica del viaggio di essere uno sviluppatore Web. Ci sono tre corsi Front-end, Back-end e DevOps. Queste tabelle di marcia sono come, beh, una mappa; e sono un ottimo riferimento per vedere dove siamo attualmente, cosa potremmo aver perso, e dove andremo dopo.

Netlify CMS

SmashingMagazine ha recentemente fatto un grassetto mossa di abbandonare WordPress e provare qualcosa di completamente nuovo con un nuovo CMS chiamato Netlify CMS. È un nuovo CMS costruito su React.js e può esserlo integrato con qualsiasi generatore di siti statici come Jekyll, Hugo e MiddleMan.

BadSSL

È un sito Web per verificare la configurazione SSL. BadSSL è uno strumento utile per eseguire il debug e gli errori su SSL installati sul tuo sito.

Alix

Alix è un Estensione Chrome che ti consente di verificare l'accessibilità del tuo sito web. Una volta installato e abilitato, il plugin aggiungerà una casella di sovrapposizione su un numero di elementi nella pagina che pongono avvertimenti o errori.

AR.js

È AR.js Librerie JavaScript a differenza delle altre. Questa libreria ci consente di creare una realtà aumentata utilizzando la tecnologia Web e Funziona sorprendentemente molto velocemente sui telefoni cellulari.

Reagire Trend

È un reagire componente da Unsplash per creare grazioso grafico a linee in genere per mostrare le tendenze. Il componente è configurabile; puoi impostare lo spessore della linea, il colore, i gradienti e la levigatezza della curva. Puoi semplicemente usare la GUI per generare convenientemente il codice del componente.

Gitee

UN applicazione macOS per monitorare la tua attività Github direttamente dal tuo desktop, Gitee aggiunge un nuovo elemento sulla barra di stato che mostra numeri di stelle, follower e notifiche. Inoltre, puoi anche visualizza i grafici del tuo push e effettua commit su un repository e repository di tendenza sul mese e la settimana corrente. In poche parole è Github on Desktop.

Goops

Goops è un CLI a portata di mano che analizzerà la directory del progetto e determinare le directory e i file da aggiungere nel file .gitignore. La CLI può essere installata tramite NPM. Una volta installato, digitare goops e fatto.

Debug CSS

DebugCSS è un Utilità drop-in CSS che consente di analizzare e convalidare l'output CSS sul browser. Funziona in modo abbastanza simile ad Alix, quando si carica il foglio di stile debugCSS o si usa il bookmarklet evidenzia gli elementi sulla pagina che presentano errori o avvisi.

EagleJS

EagleJS è un Libreria JavaScript per creare presentazioni simile a RevealJS. EagleJS è diverso in alcuni modi; è costruito usando Vue.js, un framework MVC JavaScript e usa Pug come il sistema di template per costruire la slide.

BootstrapTour

UN Libreria JavaScript per creare guide pop-up utilizzando un componente Bootstrap. Le guide pop-up di solito appaiono per i nuovi utenti per guidarli attraverso l'interfaccia dell'applicazione, le nuove funzionalità e per mostrare suggerimenti. È una libreria perfetta se il tuo sito è stato creato con Bootstrap.

mattone

Il mattone è una libreria JavaScript progettata per costruire l'interfaccia utente dell'applicazione Web. Troverete alcuni comuni come il Calendario, Menu e Form tra i componenti in bundle, Inoltre viene fornito con a "Storage-IndexedDB" componente per permetterti di memorizzare i dati sul lato client usando IndexedDB.

OctoTree

OctoTree è una bella utility che consente di navigare su codici sorgente e file su Github con struttura ad albero come in un IDE o editor di codice. Viene fornito come componente aggiuntivo per Chrome, Safari, Firefox e Opera e disponibile nel repository aggiuntivo ufficiale. Octotree supporta il repository Github privato e aziendale.

Notifica Github

Un'altra utile estensione Github per Chrome. Una volta installato, sarai in grado di ricevere notifiche anche se non sei attualmente su pagine Github. Un ottimo plugin se vuoi stare al passo con i tuoi repository.

Deployer

Il deployer è uno strumento per distribuire i tuoi siti PHP. Funziona con una serie di framework e piattaforme popolari tra cui WordPress, Drupal, Magento, Laravel e CodeIgniter. Con questo strumento, puoi comporre le tue ricette, un comando da eseguire durante la distribuzione. Viene fornito con Rollback funzionalità che consente di tornare alla versione precedente in caso di guasti.

PHPStan

Una CLI che scansiona i file PHP per trovare errori senza eseguire il runtime. Ciò significa che non è necessario un ambiente PHP completo per eseguire il debug dei file PHP sul progetto.

NGINX Boilerplate

Una raccolta di configurazioni Nginx comuni che includono cache di backend, limite di velocità di connessione e richieste e alcune altre best practice per aumentare la velocità del tuo sito e ottimizzarlo per la corsa al traffico.

pieno di bolle

Bubbly è una grande linea di comando che puoi installare sul tuo server per generare, gestire e rinnovare il certificato con Let's Encrypt. Doplying SSL ora sta diventando molto più facile.

Waffle Grid

Eppure, un altro framework di griglia CSS creato con Flexbox che penso dovresti esaminare.