Front-End Verktyg: Min Favorit Fynd av 2017

0
110

En annan tolv månader har gått och jag är säker på att ni alla har kommit över några intressanta nya tekniker för kodning, teknik, CSS-tricks (naturligtvis!), och andra grejer som kommer att göra dig mer produktiv 2018.

Som några av er kanske vet, jag sätta ihop ett veckobrev som kallas Web Verktyg Vecka, där jag har massor av länkar varje vecka för att nya verktyg, främst med fokus på saker som är användbara för front-end-utvecklare. Så det är en underdrift att säga att jag har stött på massor av nya verktyg under de senaste 12 månaderna.

Som jag har gjort under tidigare år, jag har satt ihop en kort titt på några av mina favorit fynd i front-end-verktyg.

Och observera att detta inte är en lista över “bästa” eller “mest populära” verktyg 2017 – detta har inget att göra med popularitet eller antal GitHub stjärnor. Dessa är verktyg som jag tror är unikt, intressant och praktiskt – men inte nödvändigtvis alla, som väl känd. De är några av mina personliga favorit fynd i år, inget mer.

tlapse

När man arbetar på ett nytt projekt, särskilt om en stor och lång, det är lätt att glömma antal förändringar projektets utformning har gått igenom. tlapse är ett kommandoradsverktyg som gör att du kan ställa in automatisk skärmdumpar av ditt arbete på bestämda intervall, som i huvudsak ger dig en visuell tidslinje för din utveckling i form av en serie skärmdumpar.

Projektet har 1,100+ stjärnor på GitHub, så det verkar som att utvecklarna är att hitta ett giltigt använda för detta, även om det verkar lite narcissistisk vid första anblicken. Förutom nyheten om att kunna se tillbaka på utvecklingen av ditt projekt, jag antar att tlapse kan också användas för att skicka visuella rapporter till kunder, projektledare, eller andra i utvecklingsteamet.

Du installerar tlapse som en global npm paket:

npm install-g tlapse

Då kör det i bakgrunden och börja ditt arbete:

tlapse — localhost:3000

Som standard, tlapse kommer att ta skärmdumpar på en minut och bilder kommer att läggas till tlapse mapp i den aktuella projektet (dvs där du kör kommandot):

Med fördel, tlapse kommer också att ta en skärmdump endast om den upptäcker layouten har förändrats på något sätt. Så om den nästa planerade skärmdump är samma som tidigare, det kommer att hoppa det:

Om du vill använda en annan katalog eller ändra skärmbilden frekvens, anger dessa alternativ tillsammans med det vanliga kommandot:

tlapse –varje 3m –directory ./skärmdumpar — localhost:3000

Som namnet antyder, tlapse tillåter dig att göra en time lapse video eller animerad GIF som visar utvecklingen av ditt arbete. Här är en som jag skapade och mock-att bygga en Bootstrap-baserad layout:

Generellt, detta är en enkel att använda verktyg, även för dem som inte är särskilt bekväm med kommandoraden, och det finns säkert vissa fall använda för att vilja ta skärmdumpar i arbete.

KUTE.js

JavaScript animation bibliotek är inte sällsynta. Men KUTE.js fångade mitt öga på grund av dess främsta försäljningsargument: – Prestanda. Det kan inte förnekas att om du kommer att ens överväga komplexa animationer i web apps idag, du måste vara beredd att ta itu med potentiella problem med prestanda som en följd av användare som har tillgång till din app för mobila enheter eller på långsammare anslutningar.

I det ögonblick du besöker KUTE.js startsidan möts du av med en färgglad, komplex, super-smidig animation, som vittnar om sanningen i detta verktyg: s fordringar.

Förutom prestanda, två andra saker jag gillar:

  • En riktigt trevlig API
  • Ett utmärkt system för återuppringning

Du börjar bygga din animationer genom att skapa tween objekt. Till exempel:

var tween = KUTE.fromTo(
‘.box’,
{backgroundColor:’gul’},
{backgroundColor: “orange”},
{komplett: återuppringning}
);

Exemplet ovan skapar en fromTo() tween med olika alternativ. Inne fromTo() jag har angetts i väljaren för målet element, start-och slut-värden för egenskapen att vara animerade, och en callback-funktion som ska köras när animeringen är klar.

Du kan också skapa tweens med att(), allTo(), och allFromTo(), med den senare metoden låter dig tillämpa animationer till samlingar av objekt.

Callback-funktionen är mycket finkornigt, så att du kan köra kod (vilket inkluderar ringer en ny animation helt och hållet) på angivna punkter, bland annat:

  • När en animering börjar
  • För varje bildruta i animationen
  • När en animering är pausad
  • När en animering har återupptagits efter att ha varit pausad
  • När en animering stoppas
  • När en film är klar

Jag har bara skrapat på ytan av de funktioner som är tillgängliga. Dokumentationen på webbplatsen är bra, så kontrollera att ut för full API. Den CodePen nedan är baserat på en av de demos från API-dokument som använder den .kedja() metod för att kedjan flera omvandla animationer.

Se Pennan Kedja Omvandla Animationer med KUTE.js Louis Lazaris (@impressivewebs) på CodePen.

ScrollDir

Rulla bibliotek har varit populära ett tag nu. ScrollDir, från utvecklare på Dollar Shave Club, är en riktigt enkel, liten och intuitivt verktyg för att hjälpa dig att göra ett par enkla saker med bläddra upptäckt.

När du släpper i biblioteket, i sin enklaste form scriptet bara fungerar. Du behöver inte ringa scrollDir () – metoden eller något liknande. Om du öppnar din webbläsare developer tools och granska DOM live medan du bläddrar uppåt och nedåt på en sida som kör ScrollDir, kan du se hur det fungerar:

Som framgår ovan GIF, detta verktyg lägger till en data-scrolldir attribut till den sida som är <html> – elementet, som ändras till ett av två värden, beroende på bläddra riktning:

<!– när användaren är i rullning ner –>
<html-data-scrolldir=”ner”>

<!– när användaren rullar upp –>
<html-data-scrolldir=””>

Standardvärde är “ner” när sidan har ännu inte bläddrat, även om det verkar som det skulle kunna ha nytta av att ha en “neutral” klass som en tredje frivilligt tillstånd.

Med detta attribut på plats, det är super lätt att göra egna förändringar för att en sidas layout med ingenting men CSS, dra nytta av CSS-attribut-selektorer:

[data-scrolldir=”ner”] .header-banner {
toppen: -100px;
}

[data-scrolldir=”fram”] .sidfot-banner {
botten: -100px;
}

Du kan se den ovan nämnda kod i kombination med några enkla CSS övergångar, visat i CodePen nedan, som är liknande till exempel på ScrollDir hemsida:

Se Pennan ScrollDir grundläggande demo av Louis Lazaris (@impressivewebs) på CodePen.

ScrollDir erbjuder några mindre API alternativ om du väljer att använda den icke-auto version av skriptet. I båda fallen är det superenkelt att använda och jag är säker på kommer att komma väl till pass om du ska bygga något som måste förändringar ske på den sida som är baserad på bläddra riktning.

CodeSandbox

På grund av populariteten av web app-utveckling med hjälp av bibliotek som Reagerar och Vue, ett antal olika IDEs och annan kod verktyg har kommit ut på scenen, som syftar till att hjälpa utvecklare som arbetar med ett specifikt bibliotek eller ram.

CodeSandbox är en online-kod-editorn för fyra av de nuvarande stora spelare: Reagera, Vue, Preact, och Svelte. Detta verktyg är lite i samma kategori som CodePen Projekt, men är särskilt utformad för var och en av de fyra ovan nämnda bibliotek.

En av de trevliga funktionerna i CodeSandbox är möjligheten att lägga till npm paket på vänster sida bar under en ruta som heter “Beroenden”. Det finns en knapp som heter “Lägg till Paket” som tillåter dig att söka efter paket i npm-registret:

Och om din app saknas ett beroende, CodeSandbox kommer att ange detta med ett felmeddelande och ett alternativ för att lägga till paket. I följande GIF, jag har pusslat ihop den här Reagerar kalkylator app som ett exempel projekt i CodeSandbox:

Märker projektet hade fortfarande saknas ett beroende, som jag kunde installera direkt. Här är CodeSandbox länk till min version av det projektet.

En annan funktion som fångade mitt öga är förmågan att “kika” på den definition av en funktion i fönstret kod:

Som många infödda IDEs, detta gör att du för att kunna spåra en funktion som källa, för snabbare felsökning och whatnot. Det finns också några rent inline-kod tillägg har, precis som en infödd IDE.

Det finns massor mer har jag inte diskuterat här – inklusive GitHub integration, implementering via ZEIT, och mycket mer – så se till att rota runt i olika paneler för att få en känsla för vad du kan göra.

AmplitudeJS

AmplitudeJS är ett beroende-fri (vi gillar att numera inte vi?) HTML5 audio-spelare “för den moderna webben”. Jag tror att en hel del av oberoende hobby-driven musik beslutsfattare med web utveckling erfarenhet kommer att uppskatta detta för ett antal skäl.

Amplituden kan du bygga din egen musikspelare med din egna design och layout. Att lägga till en låt listan kan du lägga till det via de stora Amplitud.init() metoden i JSON-format. Här är ett exempel med tre låtar:

Amplitud.init({
sånger: [
{
namn: “Song Name”,
konstnär: “Artistnamn”,
album: “Album Name”,
url: “/sökväg/till/sång.mp3”,
cover_art_url: “/path/to/artwork.jpg”
},
{
namn: “Låten Två Namn”,
konstnär: “Artistnamn Två”,
album: “albumnamn Två”,
url: “/sökväg/till/sång.mp3”,
cover_art_url: “/path/to/artwork.jpg”
},
{
namn: “Song Name Tre”,
konstnär: “Artistnamn Tre”,
album: “albumnamn Tre”,
url: “/sökväg/till/sång.mp3”,
cover_art_url: “/path/to/artwork.jpg”
}
]
});

Koden bakom denna spelare genererar ljud använda Web Audio API, vilket är ungefär som att lägga till HTML5 audio element, men med ingenting men JavaScript. Så du kan tekniskt generera en fungerande version av AmplitudeJS spelare med noll HTML. Se detta CodePen som ett exempel, som auto-spel den enda låten i spellistan och har inga HTML. Även om du undersöker den genererade DOM, för det finns inget, det är bara JavaScript. I det exempel jag använder “autoplay”: true alternativ i init () – metod (standardvärdet är false, naturligtvis).

Om du vill se den flexibel och varierad audio-spelare som kan byggas med AmplitudeJS, se till att kolla in exempel sida. Platt Svart Spelare är nog min favorit för sin likhet med en old-school MP3-spelare. Jag har lagt det i en CodePen demo nedan:

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

I fråga om att konfigurera AmplitudeJS, här är några av höjdpunkterna.

All information som du ger i JSON kan läggas till dynamiskt för att spelaren var du vill. Till exempel följande HTML-skulle visa låtnamn, artist, album, och fil-URL för den låt som spelas för tillfället:

<p amplitud-song-info=”namn” amplitud-main-song-info=”true”>
<p amplitud-song-info=”artist” amplitud-main-song-info=”true”>
<p amplitud-song-info=”album” i am-main-song-info=”true”>
<p amplitud-song-info=”url” – amplitud-main-song-info=”true”>

Märker amplitud-song-info attribut, som anger vilken bit av data som du vill mata in i elementet. Du skulle inte nödvändigtvis använder sig av punkterna, men det är ett sätt att göra det. Du kan se i aktion i detta CodePen demo.

Med metadata funktioner, att lägga till en löpande tid eller återstående tid indikator för aktuell låt är lätt:

<p class=”amplitud-tid-kvar” amplitud-main-time-återstående=”true”>
<p class=”amplitud-aktuell tidpunkt” amplitud-main-aktuell tid=”true”>

En annan bra funktion är möjligheten att arbeta med callbacks (vilket är ganska mycket ett måste för alla bra API). Här är två av callback-alternativ som används i ett enkelt exempel:

Amplitud.init({
sånger: [
// låtar lista skulle vara här…
],
callbacks: {
before_play: function() {
dokumentet.querySelector(‘.msg’).innerHTML = ” Sång kommer nu att påbörja…’;
},
after_stop: function() {
dokumentet.querySelector(‘.msg’).innerHTML = ” Sång har ett slut!’;
}
}
});

Du kan se i aktion i detta CodePen. Jag har bildat en rudimentär play/pause-knappen för att hjälpa till med callbacks. För att se det slutliga återuppringning, du har att vänta den här låten för att slutföra (pausa inte utlösa after_stop återuppringning). Knappen är byggd med ingenting men ett par HTML-attribut, utan extra skript behövs.

Detta är ett riktigt litet urval av vad som är möjligt med den här spelaren och hur flexibel den är. Docs är fast och bör komma igång med detta verktyg i ingen tid.

Hedersomnämnanden

Det är en närmare titt på fem av mina favoriter från det gångna året. Men det finns massor av andra som är värt att undersöka på samma sätt mindre kända. Jag har listat några av dessa nedan:

  • BunnyJS –En ES6-baserade front-end framework som gör reklam som “Enkel som jQuery, bättre då jQuery UI, kraftfulla som Reagerar”.
  • keyframes-verktyg –Ett verktyg för att konvertera CSS-animationer till en keyframes objektet är lämplig för användning med Webb Animationer API.
  • Konsul – En Reagera renderare som gör att webbläsarens verktyg för utvecklare konsolen.
  • över-tabs – Enkel kommunikation mellan utländska ursprung flikar i webbläsaren.
  • svgi – ETT CLI verktyg för att inspektera innehållet i SVG-filer, vilket ger information om SVG (antal noder, vägar, behållare, former, träd hierarki, etc.).
  • CSS i JS Playground – Lek med koden för bara om någon av CSS-och JavaScript-lösningar (JSS, stil-komponenter, glamorös, etc.).

Vad är Din Favorit Hitta på Året?

Så det är det. Som jag sa i början, det var inte menat att vara en prisutdelning för bästa verktygen av året, utan mer en titt på några inte-så-vanliga alternativ som är intressanta och praktiska. Jag hoppas att du hittar några av dem användbara. Om du är intresserad av att fortsätta hålla upp med den tillströmning av nya verktyg inom front-end utveckling, se till att prenumerera på mitt nyhetsbrev.

Har du snubblat på (eller inbyggd) något coolt över det senaste året som skulle vara av intresse att front-end utvecklare? Låt mig veta i kommentarerna, jag skulle älska att ta en titt.