15+ Front-end-værktøjer, du bør vide om: Mine foretrukne fund for 2020

15+ Front-end-værktøjer, du bør vide om: Mine foretrukne fund for 2020

15+ Front-end-værktøjer, du bør vide om: Mine foretrukne fund for 2020
СОДЕРЖАНИЕ
02 июня 2020

Et andet år er gået, og hvis du kan lide mange webudviklere i branchen, har du sandsynligvis opdaget en hel række nye front-end-værktøjer, som du har overvejet at indarbejde i din arbejdsgang. Jeg er i den samme båd, især da jeg er dybt involveret i regelmæssigt at undersøge, hvad der er nyt i værktøjets landskab.


I dette indlæg, Jeg vil runde op (med nogle skærmbilleder og demoer) nogle af de mest interessante front-end-værktøjer, som jeg har fundet, at jeg tror, ​​du vil finde nyttige i 2020. Disse er ikke nødvendigvis de mest populære værktøjer eller de hotteste værktøjer, men jeg synes, hver af dem er unikke i deres brugssag og fortjener lidt mere opmærksomhed. Disse er hovedsageligt mine Årets foretrukne fund i front-end værktøjer.

Bedste front-end værktøjer

Genvejstast

Front-End-værktøjer: Hotkey

Detektering af tastetryk med JavaScript er ikke en alt for kompliceret opgave, men dette lille værktøj fra teamet på GitHub gør det superenkelt.

Med det kan du udløse en handling på et element med en tastaturgenvej.

De typer genveje inkluderer en nøgle, nøglekombination eller endda nøglesekvens. Du kan også have flere genveje til en enkelt handling.

JavaScript er kun en erklæring sammen med en import:

import {install} fra ‘./hotkey.js’;

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

Når denne kode er på plads, udføres hovedarbejdet i HTML. Her er en liste over links, som jeg oprettede for at vise noget indhold afhængigt af den anvendte genvej:

  • Eksempel
  • Eksempel
  • Eksempel
  • Eksempel
  • Eksempel

Bemærk datatast-tastattributterne, der er tilføjet til hvert af linkene. Dette er det, der muliggør genvejstasterne til de målrettede handlinger (i dette tilfælde udløser en: målvælger via CSS). Flere genvejstaster adskilles med et komma; tastkombinationer adskilles med et plussymbol; og nøglesekvenser adskilles med et mellemrum.

Her er en live demo:

Prøv hver enkelt genvej, og bemærk, at koden i JavaScript-panelet er minimal. Meget enkel at konfigurere, når modulet er importeret. Og som et sidepunkt her, hvis du har en app med flere genvejstaster, du vil vise i et modalvindue (som det gøres på Twitter, GitHub osv.), Kan du tjekke ud QuestionMark.js, og mit gamle projekt.

Med tastaturgenveje vil du naturligvis bemærke bekymringerne om tilgængelighed, så sørg for at tjekke repoets README for at få oplysninger om det.

Freezeframe.js

Front-End-værktøjer: Freezeframe.js

Det er almindeligt at integrere korte videoer på websider for at vise en handling, der finder sted. Nogle gange er en animeret GIF også passende. Men GIF’er har en tendens til at være distraherende, fordi de automatisk spiller deres indhold.

Dette lille værktøj giver dig mulighed for at tilføje videolignende funktionalitet til animerede GIF’er, der er integreret i din HTML.

Når du har inkluderet kilden Freezeframe.js på din side, har du kun brug for en enkelt JavaScript-erklæring:

ny Freezeframe (‘. freezeframe’, {
trigger: ‘hover’,
overlay: falsk
});

Hvis du udelater det andet argument (f.eks. Nyt Freezeframe (‘. Freezeframe’)), vil det som standard ikke være nogen play-knap, og animationen udløses på musen. Den eneste mangel ved dette er, at fordi det er en animeret GIF, kan du teknisk ikke "pause" det kan du kun "hold op" det (hvilket betyder, at det starter igen fra starten). Men normalt med GIF’er er dette ikke en big deal.

Her er en demo med tre forskellige eksempler:

Brug af dette værktøj alene sparer dog muligvis ikke ydelse, da det ser ud til, at de fulde GIF-belastninger er bag kulisserne. Men jeg antager, at dette kunne bruges sammen med et doven belastningsbibliotek, hvis GIF er slukket, når siden indlæses.

ARC værktøjssæt

Front-End-værktøjer: ARC Toolkit

Dine go-to-front-værktøjer skal indeholde masser af tilgængelighedsmuligheder.

Dette er en Chrome-udvidelse, der tilføjer en fane til dine udviklerværktøjer til at hjælpe dig med at finde tilgængelighedsfejl og advarsler relateret til WCAG 2.1 niveau A og AA-retningslinjerne.

To grunde til, at dette værktøj er så stort:

  • Det integreres med din eksisterende test / debugging-arbejdsgang i udviklerværktøjerne
  • Det er lavet af The Paciello Group, der er kendt i udviklerfællesskabet for deres tilgængelighedsindsigt

ARC Toolkit-funktioner

Når udvidelsen er installeret, skal du blot vælge fanen i dine udviklerværktøjer og vælge "Kør test". Den oprindelige output svarer til det, du ser i det forrige skærmbillede. Derfra kan du bore ned for at se eventuelle tilgængelighedsproblemer, der er relateret til en bestemt funktion, som vist i det næste skærmbillede:

ARC værktøjssæt Funktioner Drill-down

Bemærk! "Links" indstillingen til venstre har markeringen ved siden af. Det er hvad jeg har valgt at undersøge i dette tilfælde. Dette tilføjer også et overlay på siden, der viser, hvor alle de valgte objekter er, som du kan se ovenfor udviklerværktøjerne på live-siden.

Scene.js

Front-End-værktøjer: Scene.js

Hvert år ser der ud til at være et nyt animationsbibliotek af slags i frontend-værktøjslandskabet.

Mit valg for dette år er Scene.js.

Dette er ikke en, du bare kan samle op og arbejde med i løbet af få minutter, som de andre hidtil omtalt.

Der er en indlæringskurve for at vænne sig til API, der ligner sådan:

lad scene = ny scene ({
".søgefeltet": {
"0%" : "bredde: 50px",
"70%": "bredde: 300px",
},
".linje": {
"30%" : "bredde: 0%",
"100%": "bredde: 100%",
}
}, {
varighed: 1,
lettelse: Scene.EASE_IN_OUT,
vælger: sandt,
}) ExportCSS (.);

scene.setTime (0);
lad skifte = falsk;

document.querySelector (".Indsend") .AddEventListener ("klik", funktion () {
toggle =! toggle;
scene.setDirection (toggle ? "normal" : "baglæns");
scene.play ();
});

Det er koden for en af eksempler på hjemmesiden. Det er et simpelt lille animeret søgefelt. Her er deres CodePen-demo:

Igen, dette vil ikke være et let værktøj at lære hurtigt, men hvis du er interesseret i at prøve et nyt animationsbibliotek med det, der ser ud til at være et ret ligetil API, kan dette muligvis være en god mulighed.

Commento

Front-end-værktøjer: Kommentar

Det aktuelle online-landskabsbevidste online landskab kunne bruge flere værktøjer som dette. Jeg har overvejet muligheder for forbedrede kommentarsystemer på mit WordPress-websted i et stykke tid nu, og Kommento ser solid ud.

Jeg kan godt lide funktionaliteten i noget som Disqus (upvotes / downvotes, top comments osv.), Men det har det for meget oppustethed.

Jeg kan også godt lide at WordPress-kommentarer er som standard hostede selv, men de mangler disse ekstra funktioner i Disqus. Jeg tror, ​​at Kommento er et skridt i den rigtige retning for at løse disse problemer.

Hvis du overvejer at skifte fra en eksisterende kommenteringsplatform til Kommento, er det det ganske lidt arbejde fra hvad jeg har læst, så det er en stor ulempe.

Selvom Commento giver dig mulighed for at importere fra Disqus, vil du ikke være i stand til at importere "stemmer" på gamle kommentarer fra Disqus eller avatarer fra de brugere, der sendte kommentarer.

Der er heller ingen måde at importere gamle WordPress-kommentarer til Kommento, medmindre du først eksporterer til Disqus, derefter importerer fra Disqus til Kommento (hvilket kan gøres ved hjælp af et Disqus-importværktøj, når du tilmelder dig Commento).

Den sidste ulempe er, at Commento ikke er gratis, medmindre du selv er vært for det. Men når du overvejer oppustethed og privatlivets fred i Disqus, er det lille månedlige gebyr værd.

Git historie

Front-End-værktøjer: Git-historie

Selvom dette ikke kun er i kategorien værktøjer til front-end, er det en af ​​mine favoritter på denne liste på grund af dens enkelhed og nyhed i den måde, det fungerer.

Git History giver dig mulighed for at se historikken for enhver fil i en offentlig Git-repo (GitHub, GitLab eller Bitbucket).

Lad os for eksempel sige, at du vil se historien med ændringer til kildefil til Normalize.css. Filen er placeret på:

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

Udskift github.com i URL’en med github.githistory.xyz for at se dens historie:

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

Outputet på den nye URL indlæser en pæn, interaktiv måde at se filens ændringer over tid. Nogle seje animationer udløses, hver gang du vælger et historikpunkt, så du kan se, hvilke ændringer der fandt sted, og hvilken bruger, der begik dem.

CSS-funktion skifter

Front-end-værktøjer: CSS-funktion skifter

Hvis du stadig arbejder i et miljø, hvor du er nødt til at udføre en arvet browser-test, kan dette muligvis være en dejlig lille Chrome-udvidelse at føje til din testværktøjskasse.

CSS-funktion Toggles, der ligner ARC Toolkit nævnt ovenfor, tilføjer en ny fane til din browsers udviklerværktøjer.

På fanen bemærker du en liste over moderne CSS-funktioner.

CSS-funktioner til rådighed for at skifte

Du kan skifte til disse med det samme for at se, hvordan din side ser ud, når en bruger besøger siden i en browser, der ikke understøtter den bestemte funktion. Dette er en fantastisk måde at få et hurtigt overblik over, hvordan dine layouts forringes i ældre miljøer.

Når du vælger de forskellige funktioner, opdateres siden automatisk for at vise ændringerne. Et websted, der er bygget med Flexbox, vil for eksempel drage fordel af nogle ældre CSS for at holde layoutet sane, mens det gradvist forbedres i nyere browsere.

Opret app

Front-end-værktøjer: Opret app

Der er ingen tvivl om, at din front-end-værktøjs workflow indeholder masser af muligheder for builds. Dette websted er en kombination af et læringssite og et projektgenerationsværktøj til udviklere, der bruger (eller ønsker at lære at bruge) webpack eller Parcel, de populære aktivitetsbundtere.

Bor ned i kategorierne til venstre for at vælge de indstillinger, du vil have til din build, og se derefter de nødvendige filer og konfigurationsindstillinger vises i hovedvinduet.

Opret appkonfigurationsindstillinger

Siden er fuldt interaktiv, så du kan klikke på en hvilken som helst af de virtuelle filer for at se deres indhold, eller du kan holde musepekeren over en valgt mulighed for at se en beskrivelse sammen med fremhævede dele af build, der er relevante for den mulighed.

Meget nyttig både til læring og til oprettelse af nye projekter!

CSSJanus

Front-End-værktøjer: CSS Janus

På området internationalisering er dette et online værktøj, der giver dig mulighed for at konvertere stilark fra venstre til højre til højre til venstre og vice versa.

Dette giver dig mulighed for nemt at oprette stilark til højre-til-venstre (rtl) sprog som arabisk og hebraisk.

Her er et CSS-eksempel:

.eksempel {
flyde: venstre;
tekstjustering: venstre;
polstring: 1px 2px 3px 4px;
margin-left: 1em;
baggrundsposition: 5% 100px;
cursor: ne-resize;
grænseradius: 1px 2px;
}

Ovenstående konverteres til følgende:

.eksempel {
float: højre;
tekstjustering: højre;
polstring: 1px 4px 3px 2px;
margin-højre: 1em;
baggrundsposition: 95% 100px;
markør: nw-størrelse;
grænseradius: 2px 1px;
}

Bemærk, at forskellene ikke kun inkluderer linjer som flyder: venstre og tekstjustering: venstre, men andre kan lide horisontale polsterdeklarationer og baggrundspositionværdier.

Og nyttigt, hvis du vil have værktøjet til at ignorere en stilblok eller en enkelt erklæring, kan du bruge @noflip-direktivet:

/ * @noflip * / .ignored {
flyde: venstre;
}

.ikke ignoreret {
flyde: venstre;
/ * @noflip * / baggrund: #fff (poster-ltr.png);
}

Farvetyv

Frontværktøj: Farvetyv

Color Thief er virkelig pæn og temmelig enkel at bruge, men er meget specifik i brugssager.

Grundlæggende kan du bruge dette værktøj bruge JavaScript til at få fat i en farvepalet overalt fra 2 til 20 farver baseret på et givet billede.

Dette er ikke noget, du vil bruge på ethvert websted eller app, men det er en dejlig idé og tilsyneladende har eksisteret i et stykke tid og blev opdateret i det forløbne år.

Ved hjælp af den enkle API kan du hente en palet fra billedet med en enkelt linje:

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

Derfra er det bare et spørgsmål om at manipulere den matrix, der er returneret. Du kan se en demo, jeg har indbygget i CodePen nedenfor, der griber et brugerindtastet antal farver fra det viste billede. Koden, jeg bruger på matrixen, er:

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

Jeg bygger paletten ved hjælp af elementer og inline-stilarter. Farverne returneres som RGB-værdier.

I CodePen-demoen bruger jeg en løsning til at komme rundt på tværs af oprindelsesproblemer, som jeg stødte på på CodePen, men normalt har du ikke brug for disse linjer (kommenteres) i et almindeligt miljø.

RegexGuide

Front-End-værktøjer: RegexGuide

Det ser ud til, at jeg hvert år finder en cool interaktiv app til at tilføje min samling af front-end-værktøjer, der hjælper med at opbygge regelmæssige udtryk, så her er dette års indgang. Og hvis du er som mig, tager du al den hjælp, du kan få med at bygge disse.

Denne er lidt underlig at få dit hoved først, fordi det går gennem trinene en efter en, som en troldmand.

Når du er færdig og har alle betingelser på plads, er du i stand til at prøve forskellige værdier for at opfylde de specificerede betingelser, og siden viser interaktivt, hvad der fungerer.

Denne slags værktøjer er altid nogle af mine favoritter, fordi de ikke kun fungerer som en måde at oprette kode, der ellers ville være kedelig, men de hjælper dig også med at lære syntaks.

Front-end-værktøjer: hæderlige omtaler

Så disse er efter min mening nogle af de mere interessante front-end-værktøjer, jeg har fundet, at jeg tror ikke fik nok opmærksomhed i det forløbne år. Jeg er sikker på, at du har dine egne sådanne fund, så slip dem gerne i kommentarerne herunder. I mellemtiden er her en endelig liste over ting, der ikke helt lavede hovedlisten, men jeg mente var værd at nævne:

  • wehatecaptchas – Et captcha-alternativ uden dekryptering af billede eller bogstav / tal, ikke engang et afkrydsningsfelt til "bekræft, at jeg ikke er en robot"
  • simpleParallax – En nem måde at udføre parallaxeffekter med JavaScript.
  • Lite YouTube Embed – Tilsyneladende 224X hurtigere end den traditionelle integrerede kode.
  • Browsers standardstilarter – Indtast ethvert HTML-element, og dette værktøj fortæller dig hver browsers standard CSS for dette element.
  • Hvem kan bruge – Indtast en tofarvekombination, og dette værktøj fortæller dig, hvilke slags synshæmmede brugere der kan bruge denne kombination til tekst / baggrund.

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

Layout og præsentation af Karol K.

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