15+ Eines de primera línia que hauríeu de conèixer: Les meves preferències per al 2020

Ha passat un altre any i, si us agraden molts desenvolupadors web de la indústria, probablement haureu descobert una gran quantitat de noves eines front-end que heu considerat incorporar al vostre flux de treball. Estic a la mateixa barca, sobretot perquè estic profundament involucrat en la investigació periòdica de les novetats el paisatge d’eines.


En aquesta publicació, Arreglaré (amb algunes captures de pantalla i demostracions) algunes de les eines més interessants que heu trobat en cap moment que crec que us resultarà útil el 2020. No són necessàriament les eines més populars ni les eines més calentes, però crec que cadascuna d’elles és única en el seu cas d’ús i mereix una mica més d’atenció. Aquests són essencialment meus les troballes preferides de l’any en les eines de primera gamma.

Les millors eines front-end

Lletra directa

Eines de Front-End: Tecla de desplaçament

La detecció de pulsacions de clau amb JavaScript no és una tasca massa complexa, però aquesta poca utilitat de l’equip de GitHub la fa molt senzilla.

Amb ell podeu activar una acció sobre un element amb una drecera del teclat.

Els tipus de dreceres inclouen una seqüència de tecles, tecla combinada o fins i tot clau. També podeu tenir dreceres múltiples per a una sola acció.

El JavaScript és només una declaració i la importació:

importa {install} de “./hotkey.js”;

per a (const el document.querySelectorAll (‘[hot-hotkey]’)) {
instal·lar (el)
}

Una vegada que aquest codi estigui al seu lloc, el treball principal es realitza en HTML. Aquí teniu una llista d’enllaços que he creat per visualitzar algun contingut en funció de la drecera que s’utilitzi:

  • Exemple
  • Exemple
  • Exemple
  • Exemple
  • Exemple

Observeu els atributs de la clau de dades afegits a cadascun dels enllaços. Aquests són els que permeten els paràmetres directes per a les accions orientades (en aquest cas, activant un: selector de destinació mitjançant CSS). Múltiples tecles de cursor estan separades per una coma; les combinacions de tecles estan separades per un símbol més; i les seqüències de claus estan separades per un espai.

Aquí tens una demostració en directe:

Proveu cadascuna de les dreceres i observeu que el codi del plafó JavaScript és mínim. Molt senzill de configurar, un cop importat el mòdul. I, com a costat, aquí, si teniu una aplicació amb diverses tecles de drecera que voleu mostrar en una finestra modal (com es fa a Twitter, GitHub, etc.), potser voldreu consultar-la QuestionMark.js, i vell projecte meu.

Per descomptat, amb dreceres de teclat, voldreu prendre nota de les preocupacions d’accessibilitat, així que assegureu-vos de consultar el README de la representació per obtenir informació sobre això.

Freezeframe.js

Eines de Front-End: Freezeframe.js

Incorporar vídeos breus a les pàgines web és habitual per mostrar una acció. De vegades també és apropiat un GIF animat. Però els GIF acostumen a distreure perquè juguen automàticament el seu contingut.

Aquesta petita utilitat us permet afegir funcionalitats semblants a vídeo als GIF animats incrustats al vostre HTML.

Un cop inclosa la font Freezeframe.js a la pàgina, només cal que tingueu una única declaració de JavaScript:

Freezeframe nou (“. freezeframe”, {
disparador: ‘passar el cursor’,
superposició: fals
});

Si deixeu fora el segon argument (per exemple, un nou Freezeframe (“. Freezeframe”)), no hi haurà cap botó de reproducció i l’animació es dispara. L’únic defecte amb això és que, com que és un GIF animat, tècnicament no ho podeu fer "fer una pausa" tu, només pots "Atura" it (que vol dir que torna a començar des del principi). Però, normalment, amb els GIF, no és un gran problema.

Aquí teniu una demostració amb tres exemples diferents:

Tot i fer servir aquesta eina, però, pot no estalviar rendiment, ja que sembla que es carrega el GIF completament entre bastidors. Però suposo que això es pot utilitzar juntament amb una biblioteca de càrrega mandrosa si el GIF està fora de pantalla quan es carrega la pàgina..

Toolkit ARC

Eines de front-end: ARC Toolkit

Les vostres eines d’avantguarda inclouen moltes opcions d’accessibilitat.

Aquesta és una extensió de Chrome que afegeix una pestanya a les eines de desenvolupador per ajudar-vos a trobar errors i avisos d’accessibilitat relacionats amb les directrius del nivell A i AA de WCAG 2.1..

Dues raons per les quals aquesta eina és tan gran:

  • S’integra amb el flux de treball de prova / depuració existent dins de les eines del desenvolupador
  • La del grup Paciello, coneguda a la comunitat de desenvolupadors per obtenir informació sobre l’accessibilitat

Funcions del conjunt d'eines ARC

Un cop instal·lada l’extensió, només cal que seleccioneu la pestanya a les eines de desenvolupament i seleccioneu-la "Executar proves". La sortida inicial serà similar a la que veieu a la captura de pantalla anterior. Des d’allà, podeu aprofundir per visualitzar els possibles problemes d’accessibilitat relacionats amb una funció específica, tal com es mostra a la captura de pantalla següent:

Característiques complexes d'armes d'eines ARC

Fixeu-vos en el "Enllaços" l’opció de l’esquerra té la marca de selecció al costat. Això és el que he escollit examinar en aquest cas. A més, afegeix una superposició a la pàgina que mostra on es troben tots els objectes seleccionats, com podeu veure a sobre de les eines de desenvolupador de la pàgina en viu.

Escena.js

Eines de Front-End: Scene.js

Sembla que cada any hi ha una nova biblioteca d’animació de tipus al paisatge d’eines de front.

La meva elecció per a aquest any és Scene.js.

No és aquest amb el qual només podeu recollir i treballar en qüestió de minuts, com els altres fins ara.

Hi ha una corba d’aprenentatge per acostumar-se a l’API, que sembla una cosa així:

let scene = nova Escena ({
".caixa de cerca": {
"0%" : "amplada: 50px",
"70%": "amplada: 300px",
},
".línia": {
"30%" : "amplada: 0%",
"100%": "amplada: 100%",
}
}, {
durada: 1,
alleugeriment: Escena.EASE_IN_OUT,
seleccionador: cert,
}). exportCSS ();

scene.setTime (0);
deixar commutar = fals;

document.querySelector (".Presentar") .addEventListener ("feu clic", function () {
commutar =! commutar;
scene.setDirection (commuta) ? "normal" : "marxa enrere");
scene.play ();
});

Aquest és el codi d’una de les dades exemples a la pàgina principal. És un senzill petit quadre de cerca animat. Aquí teniu la seva demostració CodePen:

De nou, aquesta no serà una eina fàcil per aprendre ràpidament, però si us interessa provar una nova biblioteca d’animació amb la que sembla ser una API força senzilla, aquesta pot ser una bona opció.

Commento

Eines de Front-End: Commento

El paisatge en línia conscient de la privadesa actual podria utilitzar més eines com aquesta. Ja fa temps que estic pensant en opcions per a sistemes de comentaris millorats al meu lloc web de WordPress i Commento sembla sòlid.

M’agrada la funcionalitat d’alguna cosa com Disqus (upvotes / downvotes, comentaris superiors, etc.) però té massa inflada.

També m’agrada que els comentaris de WordPress s’allotgen de manera predeterminada, però no tenen aquestes funcions addicionals de Disqus. Crec que Commento és un pas en la direcció correcta per solucionar aquests problemes.

Si esteu pensant a passar d’una plataforma de comentaris existent a Commento, ho serà una mica de treball del que he llegit, així que és un gran desavantatge.

A més, tot i que Commento us permet importar des de Disqus, no podreu importar-lo "vots" a comentaris antics de Disqus o als avatars dels usuaris que han publicat comentaris.

Tampoc hi ha cap manera d’importar comentaris antics de WordPress a Commento tret que primer exporteu a Disqus, després importeu de Disqus a Commento (que es pot fer mitjançant una eina d’importació de Disqus quan us registreu a Commento).

L’inconvenient final és el fet que Commento no és gratuït a menys que l’autopedeixis. Però, quan teniu en compte els problemes de privacitat i la privacitat de Disqus, paga la pena mensual.

Història de Git

Eines de front-end: historial de Git

Tot i que no es troba només a la categoria d’eines de primera línia, és un dels meus preferits d’aquesta llista per la seva senzillesa i novetat en el seu funcionament..

Git History us permet visualitzar l’historial de qualsevol fitxer d’un repertori Git públic (GitHub, GitLab o Bitbucket).

Per exemple, diguem que voleu veure l’historial dels canvis a la secció Arxiu font per Normalitzar.css. El fitxer es troba a:

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

Per veure el seu historial, substituïu github.com a l’URL per github.githistory.xyz:

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

La sortida del nou URL carrega una forma interactiva i neta de visualitzar els canvis del fitxer amb el pas del temps. Algunes animacions fantàstiques es desencadenen cada vegada que trieu un punt d’historial, fet que us permetrà veure quins canvis van tenir lloc i quin usuari els va cometre..

Funcions CSS commuta

Eines de front-end: funcions CSS commuta

Si encara treballeu en un entorn on heu de fer proves de navegador existents, pot ser que sigui una petita extensió Chrome per afegir a la vostra caixa d’eines de prova.

Els paràmetres de funcions CSS, similars a ARC Toolkit esmentats anteriorment, afegeixen una pestanya nova a les eines de desenvolupament del navegador.

A la pestanya, notareu una llista de funcions CSS modernes.

Característiques CSS disponibles per canviar

Podeu commutar-los per veure de forma instantània com es veu la pàgina quan un usuari visita la pàgina en un navegador que no admet aquesta funció en particular. Aquesta és una manera excel·lent d’obtenir una visió ràpida de com es degraden els dissenys en entorns més antics.

Quan seleccioneu les diferents funcions, la pàgina s’actualitzarà automàticament per mostrar els canvis. Un lloc construït amb Flexbox, per exemple, es beneficiarà d’alguns CSS antics per mantenir la disposició sana mentre es millori progressivament en navegadors més nous.

Crea una aplicació

Eines de front-end: crea l'aplicació

Sens dubte, el vostre flux de treball de les eines de primera línia inclou un munt d’opcions per a versions. Aquest lloc web és una combinació d’un lloc d’aprenentatge i una eina de generació de projectes per als desenvolupadors que utilitzin (o vulguin aprendre a utilitzar) webpack o Parcel, els populars agrupadors d’actius..

Comproveu les categories de l’esquerra per triar les opcions que voleu crear i, a continuació, vegeu els fitxers i les opcions de configuració necessàries a la finestra principal.

Creeu opcions de configuració d’aplicacions

La pàgina és totalment interactiva, de manera que podeu fer clic en qualsevol dels fitxers virtuals per visualitzar-ne el contingut, o bé podeu passar el botó sobre una opció seleccionada per veure una descripció juntament amb les parts destacades de la creació rellevants per a aquesta opció..

Molt útil tant per aprendre com per crear nous projectes!

CSSJanus

Eines de front-end: CSS Janus

En l’àmbit de la internacionalització, es tracta d’una eina en línia que permet convertir fulls d’estils d’esquerra a dreta a dreta a esquerra i viceversa.

Això us permet crear fulls d’estils fàcilment per a idiomes de dreta a esquerra (rtl) com l’àrab i l’hebreu.

Aquí teniu un exemple CSS:

.exemple {
flotar: a l’esquerra;
alineació de text: esquerra;
encoixinat: 1px 2px 3px 4px;
marge-esquerra: 1em;
posició de fons: 5% 100px;
cursor: ne-redimensionar;
radi de vora: 1px 2px;
}

L’anterior es convertirà en el següent:

.exemple {
surar: dret;
alineació de text: dreta;
encoixinat: 1px 4px 3px 2px;
marge-dreta: 1em;
posició de fons: 95% 100px;
cursor: nw-redimensionar;
radi de vora: 2px 1px;
}

Tingueu en compte que les diferències no només inclouen línies com float: esquerra i alinear text: a l’esquerra, sinó d’altres com les declaracions de rellotge horitzontal i els valors de posició de fons.

I de forma útil, si voleu que l’eina ignori un bloc d’estil o una sola declaració, podeu utilitzar la directiva @noflip:

/ * @noflip * / .ignored {
flotar: a l’esquerra;
}

.no ignorat {
flotar: a l’esquerra;
/ * @noflip * / background: #fff (poster-ltr.png);
}

Lladre de colors

Eines de front-end: lladre de colors

Color Thief és realment net i bastant senzill d’utilitzar, però és molt específic en els seus casos d’ús.

Bàsicament, utilitzant aquesta utilitat, podeu utilitzar JavaScript per agafar una paleta de colors des de 2 a 20 colors basada en una imatge determinada.

No és una cosa que fareu servir a tots els llocs web o aplicacions, però és una bona idea i sembla que fa un temps que es va actualitzar i es va actualitzar durant l’any passat..

Mitjançant l’API senzilla, podeu agafar una paleta de la imatge amb una sola línia:

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

A partir d’aquí, només serà qüestió de manipular la matriu que ha retornat. Podeu veure una demostració que he integrat a CodePen a continuació, que inclou un nombre de colors introduït per l’usuari a la imatge mostrada. El codi que estic utilitzant a la matriu és:

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

Creo la paleta amb elements i estils en línia. Els colors es retornen com a valors RGB.

A la demostració CodePen, utilitzo una solució per solucionar els problemes entre origen que he trobat a CodePen, però normalment no necessitareu aquestes línies (comentades) en un entorn acostumat.

RegexGuide

Eines de front-end: RegexGuide

Sembla que cada any trobo una fantàstica aplicació interactiva per afegir a la meva col·lecció d’eines de primera línia que ajuden a crear expressions regulars, així que aquí teniu l’entrada d’aquest any. I si sou mi, vareu rebre tota l’ajuda que pugueu obtenir.

Aquesta és una mica estranya per treure el cap al principi perquè passa pels passos un a un, com un assistent.

Quan hagueu acabat i teniu totes les condicions al seu lloc, podreu provar diferents valors per complir les condicions especificades i la pàgina indicarà de manera interactiva què funciona.

Aquest tipus d’eines sempre són algunes de les meves preferides, ja que no només funcionen com a forma de crear codi que d’altra manera seria tediós, sinó que també t’ajuden a aprendre la sintaxi..

Eines d’avantguarda: mencions d’honor

Així, doncs, són, segons la meva opinió, algunes de les eines més interessants que he trobat que crec que no han rebut prou atenció durant l’any passat. Estic segur que teniu les vostres pròpies troballes, així que no dubteu a deixar-les publicar als comentaris següents. Mentrestant, aquí hi ha una llista final de coses que no feien gaire la llista principal, però em va semblar que val la pena esmentar-les:

  • wehatecaptchas – Una alternativa captcha sense cap imatge ni desxiframent de lletra / número, ni tan sols una casella de selecció "confirmeu que no sóc un robot"
  • SimpleParallax – Una manera senzilla de fer efectes de paralaxi amb JavaScript.
  • Lite YouTube Embed – Aparentment 224X més ràpid que el codi d’incrustació tradicional.
  • Estils predeterminats del navegador – Introduïu qualsevol element HTML i aquesta eina us indicarà el CSS predeterminat de cada navegador per a aquest element.
  • Qui pot utilitzar – Introduïu una combinació de dos colors i aquesta eina us indicarà quins tipus d’usuaris amb deficiències visuals poden utilitzar aquest combinat per a text / fons.

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Maquetació i presentació de Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map