Front-End Verktøy: Min Favoritt Finner 2017

0
88

En annen tolv måneder har gått og jeg er sikker på at alle dere som har kommet over noen interessante nye koding teknikker, teknologier, CSS triks (selvfølgelig!), og andre ting som vil gjøre deg mer produktiv i 2018.

Som noen av dere kanskje vet, jeg kuratere et ukentlig nyhetsbrev, kalt Web-Verktøy, Ukentlig, der jeg har dusinvis av lenkene hver uke til nye verktøy, hovedsakelig fokusere på ting som er nyttig for front-end utviklere. Så det er en underdrivelse å si at jeg har kommet over mange nye verktøy i løpet av de siste 12 måneder.

Som jeg har gjort i tidligere år, jeg har satt sammen en kort titt på noen av mine favoritt finner i front-end verktøy.

Og merk at dette er ikke en liste over “beste” eller “mest populære” verktøy 2017 – dette har ingenting å gjøre med popularitet eller-nummeret på GitHub stjerner. Dette er verktøy som jeg tror er unike, spennende og praktisk – men ikke nødvendigvis alt som er godt kjent. De er noen av mine personlige favoritt funn av året, ingenting mer.

tlapse

Når du arbeider på et nytt prosjekt, spesielt en stor og lang, er det lett å glemme de mange endringer prosjektets utforming har gått gjennom. tlapse er et kommandolinjeverktøy som lar deg sette opp automatiserte skjermbilder av arbeidet ved angitte intervaller, i hovedsak gir deg en visuell tidslinje av din utvikling i form av en rekke skjermbilder.

Prosjektet har 1,100+ stjerner på GitHub, så det virker utviklere er å finne en gyldig bruk for dette, selv om det virker litt narsissistisk ved første øyekast. I tillegg til nyheten av å være i stand til å se tilbake på utviklingen av prosjektet, antar jeg tlapse kan også brukes til å sende visuell fremgang rapporter til kunder, prosjektledere, eller andre teammedlemmer.

Du installerer tlapse som en global npm-pakke:

npm installere -g tlapse

Deretter kan du kjøre den i bakgrunnen, og starte arbeidet:

tlapse — localhost:3000

Som standard, tlapse vil ta skjermbilder på ett minutt intervaller, og bildene vil bli lagt til tlapse mappen i det aktuelle prosjektet (dvs. hvor du kjøre kommandoen):

Fordel, tlapse vil også ta et skjermbilde bare hvis den oppdager oppsettet er endret på noen måte. Så hvis den neste planlagte skjermbildet er det samme som tidligere, det vil hoppe over det:

Hvis du vil bruke en annen mappe eller endre skjermbilde frekvens, angir disse som valg sammen med de vanlige kommandoen:

tlapse –hver 3m –directory ./skjermbilder — localhost:3000

Som navnet antyder, tlapse kan du lage en time lapse-video eller animerte GIF-bilder som viser fremdriften av arbeidet. Her er en jeg laget mens mock-bygge en Bootstrap-basert layout:

Totalt sett er dette en enkel å bruke verktøy, selv for de som ikke er veldig komfortabel med kommando linje, og det er sikkert noen tilfeller for at de ønsker å ta skjermbilder av pågående arbeid.

KUTE.js

JavaScript-animasjon biblioteker er ikke sjeldne. Men KUTE.js fanget mitt øye på grunn av det viktigste salgsargument: Ytelse. Det kan ikke nektes at hvis du kommer til å selv vurdere komplekse animasjoner i web apps i dag, må du være forberedt på å håndtere potensielle problemer med ytelsen som et resultat av brukere som får tilgang til dine app på mobile enheter eller på tregere tilkoblinger.

I det øyeblikket du besøker de KUTE.js hjem side, du er møtt med en fargerik, komplekse, super-glatt animasjon, vitne om sannheten av dette verktøyet påstander.

I tillegg til ytelse, to andre ting som jeg liker:

  • En veldig fin API
  • En utmerket innb. system

Du begynner å bygge animasjoner ved å opprette tween objekter. For eksempel:

var tween = KUTE.fromTo(
‘.boksen’,
{backgroundColor:’gul’},
{backgroundColor:’oransje’},
{komplett: innb.}
);

Ovennevnte eksempel oppretter en fromTo() tween med ulike alternativer. Inne fromTo() jeg har angitt velgeren for mål-element, start-og slutt-verdier for eiendommen blir animert, og en callback-funksjon som skal utføres når animasjonen er ferdig.

Du kan også opprette tweens ved hjelp av(), allTo(), og allFromTo(), med sistnevnte metoder for å la deg bruke animasjoner til samlinger av objekter.

Innb. funksjonalitet er veldig finkornet, slik at du kan kjøre kode (som kan inkludere å ringe en ny animasjon helt) på spesifiserte punkter, blant annet:

  • Når en animasjon starter
  • For hver ramme av animasjon
  • Når en animasjon er midlertidig stoppet
  • Når en animasjon er gjenopptatt etter å ha vært midlertidig stoppet
  • Når en animasjon er stoppet
  • Når en animasjon er fullført

Jeg har bare skrapet overflaten av funksjonene som er tilgjengelig. Dokumentasjonen på området er god, så sjekk det ut for hele API-et. Den CodePen nedenfor er basert på en av demoer fra API docs, som bruker den .kjede() metode for å kjede flere forvandle animasjoner.

Se Penn Kjede Forvandle Animasjoner med KUTE.js av Louis Lazaris (@impressivewebs) på CodePen.

ScrollDir

Bla bibliotekene har vært populære for noen tid nå. ScrollDir, fra utviklerne hos Dollar Shave Club, er en veldig enkel, liten og intuitiv verktøy for å hjelpe deg med å gjøre et par enkle ting med bla gjenkjenning.

Når du slipper i biblioteket, i sin enkleste form skriptet bare virker. Du trenger ikke å ringe scrollDir () – metoden eller noe sånt. Hvis du åpne din nettleser verktøy for utviklere og undersøke live DOM mens du ruller opp og ned på en side som kjører ScrollDir, kan du se hva den gjør:

Som vist i ovennevnte GIF, dette verktøyet legger til en data-scrolldir attributtet til siden som <html> elementet, som endres til en av to verdier, avhengig av bla retning:

<!– når brukeren er å rulle ned –>
<html-data-scrolldir=”ned”>

<!– når brukeren er bla opp –>
<html-data-scrolldir=””>

Det defaults til “ned” når siden ennå ikke er blitt rullet, selv om det virker som om det kunne ha nytte av å ha en “nøytral” i klassen som en tredje valgfrie staten.

Med dette attributtet i sted, det er super enkelt å lage egendefinerte endringer på en side layout med ingenting, men CSS, tar nytte av CSS ‘ s attributt-velgere:

[data-scrolldir=”ned”] .header-banner {
øverst: -100px;
}

[data-scrolldir=”opp”] .bunntekst-banner {
bunnen: -100px;
}

Du kan se koden ovenfor, kombinert med noen enkle CSS overganger, vist i CodePen nedenfor, som er tilsvarende eksempel på ScrollDir hjemmesiden:

Se Penn ScrollDir grunnleggende demo av Louis Lazaris (@impressivewebs) på CodePen.

ScrollDir tilbyr noen mindre API valg hvis du velger å bruke ikke-auto versjon av manuset. I begge tilfeller er det som er død enkel å bruke, og jeg er sikker på at vil komme godt med hvis du bygger noe som må endringer til å skje på siden er basert på bla retning.

CodeSandbox

På grunn av populariteten av web app utvikling ved hjelp av bibliotekene som Reagerer og Vue, en rekke ulike IDEs og annen kode som verktøy har kommet på scenen, tar sikte på å hjelpe utviklere som jobber med et bestemt bibliotek eller rammeverk.

CodeSandbox er en online kode editor for fire av dagens store spillere: Reagerer, Vue, Preact, og Svelte. Dette verktøyet er litt i samme kategori som CodePen Prosjekter, men er spesielt utviklet for hver av de fire nevnte biblioteker.

En av de fine funksjonene i CodeSandbox er muligheten til å legge til npm-pakker i feltet til venstre, under en rute som heter “Avhengigheter”. Det er en knapp som heter “Legg Pakken” som lar deg søke etter pakker i npm-registret:

Og hvis appen din mangler en avhengighet, CodeSandbox vil indikere dette med en feilmelding, og et alternativ for å legge til den nødvendige pakken. I det følgende GIF, jeg har satt sammen denne Reagere kalkulator app som et eksempel prosjektet i CodeSandbox:

Merknad prosjektet hadde fortsatt mangler en avhengighet, som jeg var i stand til å installere umiddelbart. Her er CodeSandbox link til min versjon av dette prosjektet.

En annen funksjon som fanget mitt øye er evnen til å “kikke” på definisjon av en funksjon i kode-vinduet:

Som mange innfødte IDEs, dette tillater deg å være i stand til å spore opp en funksjon er kilde, for raskere feilsøking og whatnot. Det er også noen rene inline-kode ferdigstillelse funksjoner, akkurat som en innfødt IDE.

Det er tonnevis av flere funksjoner jeg ikke har diskutert her, inkludert GitHub integrering, distribusjon via ZEIT, og mye mer – så vær sikker på å rote rundt i de ulike panelene for å få en følelse for hva du kan gjøre.

AmplitudeJS

AmplitudeJS er en avhengighet-fri (vi som i dag er vi ikke?) HTML5 audio-spiller “for det moderne nettet”. Jeg tror mye av uavhengige hobby-drevet musikk beslutningstakere med web-utvikling erfaring vil sette pris på denne for en rekke årsaker.

Amplituden kan du bygge opp din egen audio spiller med dine egne design og layout. For å legge til en sang liste, kan du legge den til via den viktigste Amplitude.init () – metoden i JSON-format. Her er et eksempel med tre sanger:

Amplitude.init({
sanger: [
{
navn: Navnet på Sangen One”,
artist: “artistnavn”,
album: “albumnavn”,
url: “/sti/til/sang.mp3”,
cover_art_url: “/path/to/artwork.jpg”
},
{
navn: Navnet på Sangen To”,
artist: “artistnavn To”,
album: “albumnavn To”,
url: “/sti/til/sang.mp3”,
cover_art_url: “/path/to/artwork.jpg”
},
{
navn: Navnet på Sangen Tre”,
artist: “artistnavn Tre”,
album: “albumnavn Tre”,
url: “/sti/til/sang.mp3”,
cover_art_url: “/path/to/artwork.jpg”
}
]
});

Koden bak denne spilleren genererer lyd ved hjelp av Web-Audio-API, som er typen som legger til HTML5 audio-element, men med ingenting, men JavaScript. Så du kan teknisk generere en fungerende versjon av AmplitudeJS spiller med null HTML. Se denne CodePen som et eksempel, som automatisk spiller av bare sang i spillelisten, og har ingen HTML. Selv om du undersøke generert DOM, det er ingenting der, det er bare JavaScript. I dette tilfellet, jeg bruker “autoplay”: true-alternativet i init () – metoden (standard er false, selvfølgelig).

Hvis du ønsker å se på fleksible og varierte audio-spillere som kan være innebygd med AmplitudeJS, sørg for å sjekke ut eksempler side. Flat Sort-Spiller er nok min favoritt for sin likhet til en old-school MP3-spiller. Jeg har satt det inn i en CodePen demo nedenfor:

Se Penn LeEgyj av Louis Lazaris (@impressivewebs) på CodePen.

I form av konfigurere AmplitudeJS, her er noen av høydepunktene.

All informasjon du oppgir i JSON kan legges dynamisk til spilleren hvor du vil. For eksempel følgende HTML ville vise navnet på sangen, artisten, albumet, og filen URL for det gjeldende sporet:

<p amplitude-sang-info=”navn” amplitude-main-sang-info=”true”>
<p amplitude-sang-info=”artist” amplitude-main-sang-info=”true”>
<p amplitude-sang-info=”album” amplitude-main-sang-info=”true”>
<p amplitude-sang-info=”url” amplitude-main-sang-info=”true”>

Legg merke til den amplitude-sang-info-attributtet, som definerer hvor mye data du ønsker å legge inn dette elementet. Du ville ikke nødvendigvis bruke avsnitt, men det er en måte å gjøre det på. Du kan se dette i aksjon i denne CodePen demo.

Med metadata-funksjoner, som å legge til en løpende tid eller gjenværende tid for indikatoren for gjeldende sang er enkel:

<p class=”amplitude-time-gjenværende” amplitude-main-tid-igjen=”true”>
<p class=”amplitude-gjeldende-tid” amplitude-main-gjeldende-tiden=”true”>

En annen flott funksjon er muligheten til å arbeide med tilbakering (som er ganske mye et must for enhver god API). Her er to av innb. alternativer som brukes i et enkelt eksempel:

Amplitude.init({
sanger: [
// sanger liste ville være her…
],
tilbakering: {
before_play: function() {
dokumentet.querySelector(‘.msg’).innerHTML = ” Sang vil nå begynne…’;
},
after_stop: function() {
dokumentet.querySelector(‘.msg’).innerHTML = ” Sang er ferdig!’;
}
}
});

Du kan se dette i aksjon i denne CodePen. Jeg har tatt en rudimentær play/pause-knappen for å hjelpe til med tilbakering. For å se de endelige tilbakeringing, må du vente til sangen for å fullføre (pause ikke utløse after_stop innb.). Knappen er bygget ved hjelp av ingenting, men noen HTML-attributter, ingen ekstra skripting nødvendig.

Dette er en veldig liten prøvesmak på hva som er mulig med denne spilleren, og hvor fleksibelt det er. Docs er solid og bør få deg opp og kjører med dette verktøyet på kort tid.

Hederlig Omtale

Det er en detaljert titt på fem av mine favoritter fra det siste året. Men det er mange andre som er verdt å undersøke tilsvarende mindre kjente. Jeg har listet opp noen av disse nedenfor:

  • BunnyJS –En ES6-basert front-end rammeverk som annonserer som “Enkelt som jQuery, bedre enn jQuery UI, kraftige som Reagerer”.
  • keyframes-tool –En kommandolinje verktøy for å konvertere CSS-animasjoner til en keyframes objekt egnet for bruk med Web-Animasjoner API.
  • Konsul – En Reagerer renderer som gjør til nettleserens verktøy for utviklere-konsollen.
  • over-faner – Enkel kommunikasjon mellom cross-opprinnelse faner.
  • svgi – EN CLI verktøy for å inspisere innholdet av SVG-filer, gi informasjon om SVG (antall noder, stier, containere, figurer, tre hierarki, etc.).
  • CSS i JS-Lekeplass – Spille rundt med kode for bare om noen av CSS-i-JavaScript-løsninger (JSS, stylet-komponenter, glamorøse, etc.).

Hva er Din Favoritt Finne av Året?

Så det er det. Som jeg sa i starten, dette var ikke ment å være en prisutdeling for beste verktøyene av året, men mer en titt på noen ikke-så-mainstream alternativer som er interessant og praktisk. Jeg håper du finner noen av dem er nyttig. Hvis du er interessert i å fortsette å holde tritt med tilstrømningen av nye verktøy i front-end utvikling, sørg for å abonnere på mine nyhetsbrev.

Har du snublet over (eller bygget) noe kult over det siste året, som vil være av interesse for front-end utviklere? Gi meg beskjed i kommentarfeltet, og jeg vil gjerne ta en titt.