Più di 15 strumenti front-end che dovresti conoscere: I miei risultati preferiti per il 2020

Più di 15 strumenti front-end che dovresti conoscere: I miei risultati preferiti per il 2020

Più di 15 strumenti front-end che dovresti conoscere: I miei risultati preferiti per il 2020
СОДЕРЖАНИЕ
02 июня 2020

È passato un altro anno e se sei come molti sviluppatori web nel settore, probabilmente hai scoperto tutta una serie di nuovi strumenti front-end che hai considerato di incorporare nel tuo flusso di lavoro. Sono nella stessa barca, soprattutto perché sono profondamente coinvolto nella ricerca regolare delle novità il panorama degli strumenti.


In questo post, Ho intenzione di arrotondare (con alcuni screenshot e demo) alcuni degli strumenti front-end più interessanti che ho trovato che ritengo utili nel 2020. Questi non sono necessariamente gli strumenti più popolari o quelli più in voga, ma penso che ognuno di essi sia unico nel loro caso d’uso e meriti un po ‘più di attenzione. Questi sono essenzialmente i miei reperti preferiti dell’anno negli strumenti front-end.

I migliori strumenti front-end

Tasti di scelta rapida

Strumenti front-end: tasto di scelta rapida

Rilevare i tasti premuti con JavaScript non è un compito eccessivamente complesso, ma questa piccola utility del team di GitHub lo rende super semplice.

Con esso puoi attivare un’azione su un elemento con una scorciatoia da tastiera.

I tipi di scorciatoie includono un tasto, una combinazione di tasti o persino una sequenza di tasti. Puoi anche avere più scorciatoie per una singola azione.

JavaScript è solo una dichiarazione insieme a un’importazione:

importare {installa} da ‘./hotkey.js’;

for (const el of document.querySelectorAll (‘[data-hotkey]’)) {
installazione (EL)
}

Una volta installato quel codice, il lavoro principale viene svolto in HTML. Ecco un elenco di collegamenti che ho creato per visualizzare alcuni contenuti in base al collegamento utilizzato:

  • Esempio
  • Esempio
  • Esempio
  • Esempio
  • Esempio

Notare gli attributi dei tasti di scelta rapida dei dati aggiunti a ciascuno dei collegamenti. Questi sono ciò che abilita i tasti di scelta rapida per le azioni mirate (in questo caso, attivando un: selettore di destinazione tramite CSS). Più tasti di scelta rapida sono separati da una virgola; le combinazioni di tasti sono separate da un simbolo più; e le sequenze di tasti sono separate da uno spazio.

Ecco una demo dal vivo:

Prova ognuna delle scorciatoie e nota che il codice nel pannello JavaScript è minimo. Molto semplice da configurare, una volta importato il modulo. E come punto laterale qui, se hai un’app con più tasti di scelta rapida che desideri visualizzare in una finestra modale (come avviene su Twitter, GitHub, ecc.), Potresti voler dare un’occhiata QuestionMark.js, e il mio vecchio progetto.

Ovviamente, con le scorciatoie da tastiera, ti consigliamo di prendere nota dei problemi di accessibilità, quindi assicurati di leggere il README del repository per informazioni al riguardo.

Freezeframe.js

Strumenti front-end: Freezeframe.js

Incorporare brevi video in pagine Web è comune per mostrare un’azione in corso. A volte è anche appropriata una GIF animata. Ma le GIF tendono a distrarre perché riproducono automaticamente i loro contenuti.

Questa piccola utility ti consente di aggiungere funzionalità simili a video alle GIF animate incorporate nel tuo HTML.

Una volta inclusa la fonte Freezeframe.js nella tua pagina, hai bisogno di una sola dichiarazione JavaScript:

nuovo Freezeframe (‘. freezeframe’, {
trigger: ‘hover’,
overlay: false
});

Se si omette il secondo argomento (ad es. Nuovo Freezeframe (‘. Freezeframe’)), per impostazione predefinita non viene utilizzato alcun pulsante di riproduzione e l’animazione si attiva al passaggio del mouse. L’unico difetto di questo è che, poiché si tratta di una GIF animata, tecnicamente non puoi "pausa" puoi solo "fermare" esso (il che significa che ricomincia dall’inizio). Ma di solito con le GIF, questo non è un grosso problema.

Ecco una demo con tre diversi esempi:

L’uso di questo strumento da solo, tuttavia, potrebbe non risparmiare sulle prestazioni in quanto sembra il pieno carico di GIF dietro le quinte. Ma suppongo che questo potrebbe essere usato insieme a una libreria a caricamento lento se la GIF è fuori schermo quando la pagina viene caricata.

ARC Toolkit

Strumenti front-end: ARC Toolkit

I tuoi strumenti front-end dovrebbero includere molte opzioni di accessibilità.

Questa è un’estensione di Chrome che aggiunge una scheda ai tuoi strumenti di sviluppo per aiutarti a trovare errori di accessibilità e avvisi relativi alle linee guida WCAG 2.1 Livello A e AA.

Due motivi per cui questo strumento è così eccezionale:

  • Si integra con il flusso di lavoro di test / debug esistente all’interno degli strumenti di sviluppo
  • È realizzato da The Paciello Group, che sono ben noti nella comunità degli sviluppatori per le loro intuizioni sull’accessibilità

Caratteristiche di ARC Toolkit

Una volta installata l’estensione, basta scegliere la scheda negli strumenti di sviluppo e selezionare "Esegui test". L’output iniziale sarà simile a quello che vedi nella schermata precedente. Da lì è possibile eseguire il drill down per visualizzare eventuali problemi di accessibilità correlati a una funzionalità specifica, come mostrato nella schermata seguente:

ARC Toolkit Features Drill-down

Notare il "link" L’opzione a sinistra ha il segno di spunta accanto. Questo è quello che ho scelto di esaminare in questo caso. Questo aggiunge anche un overlay sulla pagina che mostra dove si trovano tutti gli oggetti selezionati, come puoi vedere sopra gli strumenti di sviluppo sulla pagina live.

Scene.js

Strumenti front-end: Scene.js

Ogni anno sembra esserci una nuova libreria di animazioni sul panorama degli strumenti front-end.

La mia scelta per quest’anno è Scene.js.

Questo non è uno che puoi semplicemente prendere e lavorare in pochi minuti come gli altri presentati finora.

C’è una curva di apprendimento per abituarsi all’API, che assomiglia a questo:

lascia scena = nuova scena ({
".casella di ricerca": {
"0%" : "larghezza: 50px",
"70%": "larghezza: 300px",
},
".linea": {
"30%" : "larghezza: 0%",
"100%": "larghezza: 100%",
}
}, {
durata: 1,
easing: Scene.EASE_IN_OUT,
selettore: vero,
}) ExportCSS ().;

scene.setTime (0);
let toggle = false;

document.querySelector (".Invia") .AddEventListener ("clic", funzione() {
toggle =! toggle;
scene.setDirection (ginocchiera ? "normale" : "inversione");
scene.play ();
});

Questo è il codice per uno dei esempi sulla home page. È una semplice piccola casella di ricerca animata. Ecco la loro demo di CodePen:

Ancora una volta, questo non sarà uno strumento facile da imparare rapidamente, ma se sei interessato a provare una nuova libreria di animazioni con quella che sembra essere un’API piuttosto semplice, questa potrebbe essere una buona opzione.

commento

Strumenti front-end: Commento

L’attuale panorama online consapevole della privacy potrebbe utilizzare più strumenti come questo. Ho preso in considerazione le opzioni per migliorare i sistemi di commento sul mio sito Web WordPress da un po ‘di tempo e Commento sembra solido.

Mi piace la funzionalità di qualcosa come Disqus (voti positivi / negativi, commenti principali, ecc.) Ma ce l’ha troppo gonfio.

Mi piace anche che i commenti di WordPress siano auto-ospitati di default, ma mancano di quelle funzionalità extra di Disqus. Penso che Commento sia un passo nella giusta direzione per risolvere questi problemi.

Se stai pensando di passare da una piattaforma di commento esistente a Commento, lo è un bel po ‘di lavoro da quello che ho letto, quindi questo è un grande svantaggio.

Inoltre, sebbene Commento ti permetta di importare da Disqus, non sarai in grado di importare "voti" sui vecchi commenti di Disqus o sugli avatar degli utenti che hanno pubblicato commenti.

Inoltre, non è possibile importare vecchi commenti WordPress in Commento se non si esporta prima in Disqus, quindi si importa da Disqus a Commento (cosa che può essere eseguita utilizzando uno strumento di importazione Disqus quando si registra per Commento).

Lo svantaggio finale è il fatto che Commento non è gratuito se non lo si ospita. Ma se si considerano i problemi di gonfia e privacy di Disqus, vale la pena pagare una piccola tariffa mensile.

Storia Git

Strumenti front-end: cronologia Git

Sebbene questo non rientri esclusivamente nella categoria degli strumenti front-end, è uno dei miei preferiti in questo elenco per la sua semplicità e novità nel modo in cui funziona.

Cronologia Git consente di visualizzare la cronologia di qualsiasi file in un repository Git pubblico (GitHub, GitLab o Bitbucket).

Ad esempio, supponiamo che tu voglia visualizzare la cronologia delle modifiche a file sorgente per Normalize.css. Il file si trova in:

https://github.com/necolas/normalize.css/blob/master/normalize.css

Per visualizzare la sua cronologia, sostituisci github.com nell’URL con github.githistory.xyz:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

L’output nel nuovo URL carica un modo pulito e interattivo per visualizzare le modifiche del file nel tempo. Alcune fantastiche animazioni vengono attivate ogni volta che scegli un punto storico, permettendoti di vedere quali cambiamenti hanno avuto luogo e quale utente li ha commessi.

Attiva / disattiva funzionalità CSS

Strumenti front-end: funzione CSS attiva / disattiva

Se stai ancora lavorando in un ambiente in cui devi eseguire alcuni test del browser legacy, questa potrebbe essere una piccola estensione di Chrome da aggiungere alla tua casella degli strumenti di test.

Attiva / disattiva funzionalità CSS, simile a ARC Toolkit sopra menzionato, aggiunge una nuova scheda agli strumenti di sviluppo del browser.

Nella scheda noterai un elenco di moderne funzionalità CSS.

Funzioni CSS disponibili per attivare / disattivare

Puoi attivarli per vedere immediatamente come appare la tua pagina quando un utente visita la pagina in un browser che non supporta quella particolare funzione. Questo è un ottimo modo per avere una rapida panoramica di come i tuoi layout si degradano negli ambienti più vecchi.

Quando si selezionano le diverse funzionalità, la pagina si aggiornerà automaticamente per visualizzare le modifiche. Un sito creato con Flexbox, ad esempio, trarrà vantaggio da alcuni CSS più vecchi per mantenere sano il layout e migliorare progressivamente nei browser più recenti.

Crea app

Strumenti front-end: crea app

Senza dubbio il flusso di lavoro degli strumenti front-end include molte opzioni per le build. Questo sito Web è una combinazione di un sito di apprendimento e uno strumento di generazione di progetti per gli sviluppatori che utilizzano (o desiderano imparare a utilizzare) webpack o Parcel, i popolari bundle di risorse.

Esegui il drill down nelle categorie a sinistra per scegliere le opzioni che desideri per la tua build, quindi vedi i file necessari e le opzioni di configurazione visualizzate nella finestra principale.

Crea opzioni di configurazione app

La pagina è completamente interattiva, quindi puoi fare clic su uno qualsiasi dei file virtuali per visualizzarne il contenuto oppure puoi passare con il mouse sopra un’opzione selezionata per visualizzare una descrizione insieme a parti evidenziate della build che sono pertinenti a tale opzione.

Molto utile sia per l’apprendimento che per la creazione di nuovi progetti!

CSSJanus

Strumenti front-end: CSS Janus

Nell’area dell’internazionalizzazione, questo è uno strumento online che ti consente di convertire i fogli di stile da sinistra a destra a destra a sinistra e viceversa.

Ciò consente di creare facilmente fogli di stile per le lingue da destra a sinistra (rtl) come l’arabo e l’ebraico.

Ecco un esempio CSS:

.esempio {
galleggiante: a sinistra;
text-align: left;
imbottitura: 1px 2px 3px 4px;
margine sinistro: 1em;
posizione di sfondo: 5% 100 px;
cursore: ne-resize;
bordo-raggio: 1px 2px;
}

Quanto sopra verrà convertito nel seguente:

.esempio {
galleggiante: a destra;
text-align: right;
imbottitura: 1px 4px 3px 2px;
margine-destra: 1em;
posizione di sfondo: 95% 100 px;
cursore: nw-resize;
bordo-raggio: 2px 1px;
}

Si noti che le differenze includono non solo linee come float: left e text-align: left ma altre come dichiarazioni di riempimento orizzontale e valori di posizione di sfondo.

E utilmente, se vuoi che lo strumento ignori un blocco di stile o una singola dichiarazione, puoi usare la direttiva @noflip:

/ * @noflip * / .ignored {
galleggiante: a sinistra;
}

.non ignorato {
galleggiante: a sinistra;
/ * @noflip * / background: #fff (poster-ltr.png);
}

Ladro di colori

Strumenti front-end: ladro di colori

Color Thief è davvero pulito e abbastanza semplice da usare ma è molto specifico nei suoi casi d’uso.

Fondamentalmente, usando questa utility, puoi usare JavaScript per catturare una tavolozza di colori da 2 a 20 colori in base a una data immagine.

Questo non è qualcosa che utilizzerai su tutti i siti Web o app, ma è una buona idea e apparentemente è in circolazione da un po ‘di tempo ed è stato aggiornato nell’ultimo anno.

Usando la semplice API, puoi prendere una tavolozza dall’immagine con una sola riga:

let myPalette = colorThief.getPalette (img, 10);

Da lì, si tratta solo di manipolare l’array restituito. Puoi vedere una demo che ho costruito in CodePen di seguito che cattura un numero di colori inserito dall’utente dall’immagine mostrata. Il codice che sto usando sull’array è:

myPalette.forEach (
elemento => colors.innerHTML + = ""
);

Sto creando la palette usando elementi e stili incorporati. I colori vengono restituiti come valori RGB.

Nella demo di CodePen, sto usando una soluzione alternativa per aggirare i problemi di origine incrociata che ho riscontrato su CodePen, ma normalmente non hai bisogno di quelle righe (commentate) in un ambiente consueto.

RegexGuide

Strumenti front-end: RegexGuide

Sembra che ogni anno trovo un’app interattiva interessante da aggiungere alla mia raccolta di strumenti front-end che aiuta a creare espressioni regolari, quindi ecco la voce di quest’anno. E se sei come me, prenderai tutto l’aiuto che puoi ottenere per costruirli.

Questo è un po ‘strano per farti girare la testa all’inizio perché attraversa i passaggi uno per uno, come un mago.

Quando hai finito e hai tutte le condizioni in atto, puoi provare diversi valori per soddisfare le condizioni specificate e la pagina indicherà in modo interattivo ciò che funziona.

Questi tipi di strumenti sono sempre alcuni dei miei preferiti perché funzionano non solo come un modo per creare codice che altrimenti sarebbe noioso, ma aiutano anche a imparare la sintassi.

Strumenti front-end: menzioni d’onore

Quindi quelli sono, secondo me, alcuni degli strumenti front-end più interessanti che ho scoperto che penso che non abbia ricevuto abbastanza attenzione durante l’anno passato. Sono sicuro che hai le tue scoperte, quindi sentiti libero di lasciarle nei commenti qui sotto. Nel frattempo, ecco un elenco finale di cose che non hanno fatto la lista principale ma ho pensato che valesse la pena menzionare:

  • wehatecaptchas – Un’alternativa captcha senza decifrazione di immagini o lettere / numeri, nemmeno una casella di controllo "conferma che non sono un robot"
  • simpleParallax – Un modo semplice per eseguire effetti di parallasse con JavaScript.
  • Lite YouTube Embed – Apparentemente 224 volte più veloce del tradizionale codice di incorporamento.
  • Stili predefiniti del browser – Inserisci qualsiasi elemento HTML e questo strumento ti dirà il CSS predefinito di ciascun browser per quell’elemento.
  • Chi può usare – Inserisci una combinazione di due colori e questo strumento ti dirà quali tipi di utenti ipovedenti possono usare quella combinazione per testo / sfondo.

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Layout e presentazione di Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector