Il Front-end development è lo sviluppo di quegli elementi di un sito che un utente vede e con cui interagisce. È una combinazione di competenze di programmazione e design.

La vera sfida per chi fa questo lavoro è stare sempre al passo con novità, cambiamenti, tool e tecniche usate per realizzare un sito web.

Ecco, dunque, la lista di risorse suddivise in categorie redatta dall’utente Medium Bradley Nice e certificata da me 😀

  • Colori
  • Generatori di CSS
  • Calcolatori e Convertitori
  • Tipografia e Font
  • Icone
  • Analisi dello stile
  • Tool per sviluppatori
  • Testing
  • Ottimizzazione
  • Ispirazioni
  • Wireframe, mockup e prototipi
  • Risorse

COLORI

Color Hex: si tratta di un tool gratuito che fornisce informazioni su qualsiasi colore

Material Color Picker

Simple Flat Colour Selector: permette di selezionare il formato del codice colore che si vuole utilizzare e cliccare quello che serve per vederlo apparire nella clipboard, pronto per essere utilizzato.

anteprima di Simple Flat Colour Selector

ColorDrop: è un tool per la combinazione dei colori.

Palettable: genera delle meravigliose palette.

ColorFavs: ideale per creare palette colori utilizzando immagini e foto.

uiGradients: fenomenali gradienti di colore di cui ho anche parlato qualche tempo fa in questo articolo.

Web Colour Data: questo progetto risponde alle domande: Quali sono i colori più comuni sul web? Quali brand preferiscono determinati colori? Quali colori sono generalmente trovati assieme?

anteprima di Web Colour Data

Material UI Colors: è la guida di Google per l’implementazione dei colori “Material“. Ogni colore ha diverse sfumature e tonalità e tutti si combinano armonicamente tra loro.


GENERATORI di CSS

CSS3 Generator: un generatore che permette di definire velocemente le caratteristiche di un elemento ed esportarne il codice.

Ultimate CSS Gradient Generator: generatore di gradienti CSS3

Border-Radius: semplicissimo strumento per definire il valore del border-radius, i prefissi per i vari browser e, inoltre, copia il codice generato.

CSS MenuMaker: crea menu responsive in CSS3

On/Off Flip switch: genera dei toggle on/off in CSS3

CSS3 Patterns Gallery: è una gallery di pattern in CSS3


CALCOLATORI e CONVERTITORI

DPI Love: trova DPI/PPI di ogni schermo

Code Beautify: analizza e corregge file JSON, XML, JavaScript, CSS3, HTML, Excel

PXtoEM: converte i pixel in EM

anteprima di PXtoEM

Density Converter: convertitorè di densità di pixel

Is This Retina?: calcolatore DPI/PPI

NTH-Test: test per nth-child e nth-of-type


TIPOGRAFIA e FONT

Google Fonts: e vabeh, questo lo conoscete già 😝

Type Genius: trova la combo perfetta tra diverse font per il prossimo progetto

TypeWonder: questo è fenomenale, perché permette di testare ogni web-font su qualsiasi sito

Font Squirrel: font gratis!

Dafont: altri font gratis!

Font Space: ancora font gratis!

What Font Is:  risale al nome del font da un’immagine (così eviti di chiederlo su RDG 😎)

tinytype: è una tabella di comparazione che mostra i font di default presenti su diversi sistemi operativi

Typetester: compara i font tra Edge, Google e Typekit

Best Free Fonts 2016: semplicemente i migliori caratteri del 2016


ICONE

Material Design Icons: è la collezione completa delle icone di Google: belle, ultracompatibili e gratis!

Iconogen: genera fantastiche favicon e icon per Windows/iOS/Android

Font Awesome: ic0ne vettoriali scalabili e personalizzabili

Maki: mette a disposizione un set di icone per mappe!

Batch:  300+ icone per interfacce web e mobile

Fontello: è un generatore di icon font

Fontastic: come quello precedente, anche questo è un generatore di icon font

Iconmonstr: una collezione di icone, realizzata da un designer tedesco, che possono sempre tornare utili

anteprima di Iconmonstr

Octicons: icon font realizzato da GitHub

Icon Melon: libreria di icone SVG


ANALISI dello STILE

Stylify Me: inserisci l’url del tuo sito ed eccoti la lista di colori e font utilizzati

Colours: trova il colore dominante del tuo progetto

Type-o-matic: un’estensione per browser che trova tutti i font di una pagina


EDITORS

CodePen: fornisce uno showcase di progetti con codici editabili

CSSDeck: una fantastica collezione di risorse CSS e JS

Liveweave: ottimo tool per testare HTML, CSS e JS

webflow: un drag and drop builder per creare sitiweb responsive


TOOL per SVILUPPATORI

Chrome DevTools: tool per analisi e debugging integrato in Chrome

LiveReload: modifica CSS ed immagini live, senza dover ricaricare la pagina

Bower: la soluzione per gestire le risorse esterne in un sito


TESTING

W3C Markup Validation: controlla la validità di file HTML, XHTML, SMIL o MathML

W3C CSS Validation: fa un check della validità di file CSS

CSS Lint: che problemi ha il tuo CSS? Scoprilo con CSS Lint

JS Lint: scritto in JS per file JS: trova i problemi di file in JavaScript senza romperti la testa

Pesticide: debugging per CSS

Browsershots: test per il cross-browsing

Responsinator: dai un’occhiata a come sarà visualizzato il tuo sito sui device più utilizzati

Pingdom Website Speed Test: testa e analizza il tempo di caricamento di pagine web

WebPagetest: speed test da diverse parti del globo del tuo sito web

PageSpeed Insights: analizza i siti e ti suggerisce le soluzioni per alleggerirlo

GTmetrix: valuta le performances del tuo sito e ti suggerisce come migliorarlo


OTTIMIZZAZIONE

Helium: analizza il tuo sito e scopre eventuale codice CSS non utilizzato

CSS Tidy: ottimizzatore CSS open source

CSS Compressor: comprime il CSS per migliorarne le performance

JavaScript Minifier: minimizza il tuo JavaScript

FF Subsetter: riduce il peso dei tuoi font-face

Compressor.io: questo tool riduce il peso delle immagini mantenendo la risoluzione

Prefix free: aggiunge il prefisso del browser in uso al tuo CSS solo quando necessario

Adaptive Images: riconosce il device dei tuoi visitatori e automaticamente crea immagini scalate a dimensioni adeguate, velocizzando il caricamento


ISPIRAZIONI

CoDrops: divenuto molto popolare, CoDrops offre risorse ed ispirazioni fenomenali per i designer

Designrfix — Graphic Design Inspiration — Tutorials & Web Design Resources: un altro utile blog d’ispirazione

OneXtraPixel — Web Design and Development Online Magazine: un magazine online per designer e sviluppatori che condivide consigli, tutorial, tool e risorse

MonsterPost: è il blog sul web creato dal famoso Template Monster

FromUpNorth — High Quality Design inspiration

Vandelay Design: raccoglie tantissime risorse, freebies, articoli e risorse WordPress

DesignM.ag: una community per designer e sviluppatori

Abduzeedo — Design Inspiration and Tutorials: un altro sito che colleziona fantastiche ispirazioni per i propri progetti

CSS Mania — CSS Galleries: qui trovate design e soluzioni innovative


WIREFRAME, MOCKUP e PROTOTIPI

Origami: free tool creato da Facebook per progettare moderne interfacce utente

Cacoo: utile per creare diagrammi, site map, flussi di lavoro, mappe mentali, wireframe, diagrammi UML e di network

Marvel: sposta le immagini dal tuo Dropbox o dal desktop in prototipi per app mobile e web

Placeit: ideale per creare mockup di iPhone e iPad

MockFlow: un servizio online pensato per i designer per pianificare, costruire e condividere lavori

Justinmind: wireframe interattivi per web e mobile

Wireframe.cc: tool free per creare wireframe minimale


RISORSE

Vector Open Stock: vettori gratis!

Buttons: libreria di buttons

Animate.css: libreria per animazioni CSS

Subtle Patterns: pattern gratis

Placehold.it: immagini segnaposto

Holder.js: anche questo sito fornisce immagini segnaposto

Hammer.js: gesture multi-touch per il web

Textillate: un plugin per animare testi in CSS3

Modernizr: libreria JS che analizza le caratteristiche HTML e CSS3 del browser in uso

Isotope: crea fantastici portfolio filtrabili

Polymer: rende semplice la creazione di layout ed elementi

CodyHouse: una libreria con meravigliose risorse in CSS, HMTL e JS

Modest Maps: libreria gratuita di mappe interattive

GraphicBurger: risorse grafiche gratuite offerte alla community

Per questo mese è tutto, la lista è ricca e completa quindi fatene un buon uso!

Alla prossima.