Nuove risorse per Web designer e sviluppatori (giugno 2015)

Riesci a credere che questa serie è in corso da quasi 3 anni? In quel breve lasso di tempo, abbiamo presentato almeno 30 elenchi delle risorse più recenti per web designer e sviluppatori. E continueremo a farlo con una nuova compilation per giugno.

In questa compilation, esamineremo alcune librerie JavaScript per la visualizzazione di cursori, uno scorrimento più fluido per le tabelle di dati, un effetto ascensore elegante per un pulsante da scorrimento verso l'alto e altro ancora.

Vediamoli.

Conferma stile medio

Medium è stato elogiato per il suo design; il layout e l'interfaccia utente sembrano essere stati pensati a fondo. Inoltre, ispira gli sviluppatori Web a sviluppare librerie JavaScript o CSS per replicare l'interfaccia utente. Medium Style Confirm è una libreria JavaScript simile alla finestra di pop-up o di dialogo in Medium.

Pinguino

Penguin è un nuovo framework di front-end che puoi utilizzare come base per i tuoi siti web. Con strumenti come Grunt e Sass, puoi facilmente aggiungere o rimuovere librerie o CSS che non ti servono al di fuori del framework rendendolo il più leggero possibile. È anche una buona alternativa per Bootstrap e Foundation.

Elevator.js

Hai visto quel pulsante in un sito Web che ti consente di scorrere fino alla parte superiore della pagina? La maggior parte dei pulsanti ti porta in cima, ma con Elevator.js ottieni un effetto di accelerazione scorrevole simile a un ascensore, alla musica e “Ding!” suono una volta raggiunto l'ultimo piano. Veramente bello!

X-Instagram

X-Instagram è un elemento personalizzato Polymer che estrae e mostra le immagini da Instagram per tag. Questo elemento rende l'intero processo molto più semplice. Semplicemente aggiungiamo l'elemento proprio come un normale elemento HTML e specificiamo la parola chiave tag come attributi dell'elemento.

E che la magia abbia inizio!

CamanJS

CamanJS è una grande libreria JavaScript per la manipolazione delle immagini. Viene fornito con un set di funzioni che si trovano comunemente in un editor di immagini. È possibile trasformare l'immagine sfocata, in bianco e nero e persino aumentare il contrasto.

ClusterizeJS

Clusterize.js è una libreria JavaScript che aumenterà le prestazioni quando si gestiscono molti dati nelle tabelle. Mentre scorri lungo un tavolo con, diciamo, 5000 nella lista, normalmente l'esperienza diventerà lenta e secca. Queste librerie JavaScript risolveranno questo problema, rendendo l'azione di scorrimento scorrevole fino in fondo.

Sit the Test

Sit the Test è una raccolta di domande per valutare le tue abilità e conoscenze su CSS3, HTML5 e JavaScript. Ad ogni prova vengono fornite una serie di domande e un tempo limitato per completare tutte queste domande. È una buona fonte scoprire quanto siamo bravi con queste lingue.

Frecce HTML

Questa è una raccolta di speciali simboli nativi Unicode che puoi incorporare in HTML e CSS. Questi caratteri includono frecce, valuta e punteggiatura. Scoprirai che, a volte, non hai bisogno dell'icona del carattere per visualizzare quei caratteri.

Flickity

Flickity è una libreria JavaScript per mostrare caroselli, gallerie o cursori sul tuo sito web. È ottimizzato per il touchscreen; puoi far scorrere le giostre senza fatica con un dito o il trackpad se sei su un laptop. Inoltre è dotato di un sacco di opzioni che consentono la piena personalizzazione in qualsiasi modo tu voglia.

Typeslab

Typeslab è uno strumento utile per creare un poster di tipo Slab. Basta scrivere il contenuto e scegliere il carattere, Typeslab genererà il poster all'istante. È quindi possibile scaricarlo o pubblicarlo in Imgur.

Matchmedia

Matchmedia è una libreria che replica le query multimediali CSS. La libreria non è così recente, ma è una libreria davvero utile che ho deciso di mettere sulla lista. Se è necessario eseguire lo scripting in base alla dimensione del viewport dell'utente o al tipo di supporto, questa è la libreria desiderata.

Di seguito è riportato un esempio utilizzato per eseguire lo script in una dimensione viewport 320px e inferiore:

 if (matchMedia ('solo schermo e (max-larghezza: 320px)'). corrispondenze)  

Sass Burger

Sass Burger ha un Mixin che ti permette di creare un “Hamburger” icona e trasformarlo in un segno di croce con meno problemi.

Marx

Marx è una raccolta di regole di stile CSS per rendere più coerenti gli stili degli elementi. È personalizzabile (con Sass), leggero e funziona fuori dalla scatola. Una buona alternativa ai già popolari strumenti di ripristino CSS come Normalize.css.

css.js

css.js è usato per analizzare i file CSS per la dichiarazione di stile. La libreria è stata inizialmente utilizzata per il team di Jotform per creare un'esperienza WYSIWYG per la modifica dei moduli con i CSS. Ora hanno open source per tutti noi. Vale la pena risparmiare, nel caso in cui ne hai bisogno in seguito.