Front-End Tools: Mijn Favoriete Vondsten van 2017

0
16

De andere twaalf maanden zijn verstreken, en ik ben er zeker van dat u zijn gekomen over een aantal interessante nieuwe codering technieken, technologieën, CSS trucs (natuurlijk!), en andere zaken die ervoor zorgt dat je productiever te zijn in 2018.

Zoals sommige van jullie misschien weten, ik pastoor een wekelijkse nieuwsbrief met de naam Web Tools Week, waarin ik zijn voorzien van tientallen links om elke week nieuwe tools, vooral gericht op dingen die nuttig is voor front-end ontwikkelaars. Het is dus een understatement om te zeggen dat ik veel van de nieuwe instrumenten in de afgelopen 12 maanden.

Als ik heb gedaan in de afgelopen jaren, ik heb samen met een korte blik op enkele van mijn favoriete vondsten in de front-end tools.

En let op: dit is niet een lijst van de “beste” of “meest populaire” instrumenten van 2017 – dit heeft niets te maken met de populariteit of het nummer van GitHub sterren. Dit zijn tools die ik van mening zijn uniek, interessant en praktisch – maar niet noodzakelijkerwijs alle bekende. Ze zijn een aantal van mijn persoonlijke favoriete vondsten van het jaar, niets meer.

tlapse

Bij het werken aan een nieuw project, met name een groot en lang, het is makkelijk te vergeten dat het aantal wijzigingen van het project lay-out is gegaan door. tlapse is een command-line utility die u toelaat om het opstellen van een automatische screenshots van je werk op bepaalde tijdstippen, in wezen geeft u een visuele tijdlijn van je ontwikkeling in de vorm van een serie screenshots.

Het project heeft de 1.100+ sterren op GitHub, zodat het lijkt ontwikkelaars zijn het vinden van een geldig gebruiken, ook al lijkt het een beetje narcistisch op het eerste gezicht. Naast de nieuwigheid dat het in staat is om terug te kijken op de voortgang van uw project, ik veronderstel dat tlapse kan ook worden gebruikt voor het verzenden van visuele vooruitgang rapporten voor opdrachtgevers, projectmanagers, of andere ontwikkeling van de teamleden.

U installeert tlapse als een globale npm-pakket:

npm installeren -g tlapse

Vervolgens uitvoeren op de achtergrond en het begin van de werken:

tlapse — localhost:3000

Standaard tlapse zal screenshots te nemen met tussenpozen van een minuut en de screenshots toegevoegd aan de tlapse map in het huidige project (d.w.z. wanneer u de opdracht uitvoert):

Nuttig, tlapse zal ook een screenshot alleen als het detecteert de lay-out is veranderd op een bepaalde manier. Dus als de volgende geplande screenshot is hetzelfde als de vorige, het zal overslaan:

Als u gebruik wilt maken van een andere map of het wijzigen van de screenshot frequentie, voer deze dan als opties, samen met de reguliere opdracht:

tlapse –per 3m –map ./screenshots — localhost:3000

Zoals de naam al doet vermoeden, tlapse kunt u een time-lapse video of animated GIF dat toont de voortgang van uw werk. Hier is een die ik gemaakt terwijl mock-het bouwen van een Bootstrap-gebaseerde lay-out:

Samengevat, dit is een makkelijk te gebruiken tool, zelfs voor degenen die niet erg comfortabel met de command line, en er zijn zeker een aantal use cases voor willen nemen screenshots van het werk in uitvoering.

KUTE.js

JavaScript animatie bibliotheken zijn niet zeldzaam. Maar KUTE.js mijn oog viel op door de belangrijkste selling point: de Prestaties. Het kan niet worden ontkend dat als je gaat om te overwegen zelfs complexe documenten in web apps van vandaag, moet je bereid zijn om te gaan met mogelijke problemen met de prestaties als gevolg van gebruikers die uw app op mobiele apparaten of op tragere verbindingen.

Op het moment dat u een bezoek aan de KUTE.js home pagina, wordt u begroet met een kleurrijke, complexe, vloeiende animatie, getuigt van de waarheid van deze hulpprogramma ‘ s claims.

In aanvulling op de prestaties, twee andere dingen die ik leuk vind:

  • Echt een leuke API
  • Een uitstekende callback systeem

Je start met het bouwen aan uw animaties door het creëren van tween objecten. Bijvoorbeeld:

var tween = KUTE.fromTo(
‘.box’,
{achtergrondkleur:’geel’},
{achtergrondkleur:’oranje’},
{compleet: de callback}
);

Het bovenstaande voorbeeld maakt een fromTo() tween met verschillende opties. Binnen fromTo() ik heb aangegeven dat de selector voor het target element, het begin en het einde waarden voor de eigenschap wordt geanimeerd, en een callback functie uit te voeren wanneer de animatie is voltooid.

U kunt ook tweens gebruik te (de), allTo(), en allFromTo(), met de laatste methoden waarmee u animaties collecties van objecten.

De callback-functionaliteit is zeer fijnkorrelig, zodat u om code uit te voeren (zoals het bellen van een nieuwe animatie in totaal), op bepaalde punten, waaronder:

  • Wanneer een animatie begint
  • Voor elk frame van de animatie
  • Wanneer een animatie wordt onderbroken
  • Wanneer een animatie wordt hervat na te zijn onderbroken
  • Wanneer een animatie is gestopt
  • Wanneer een animatie is voltooid

Ik heb alleen krassen op het oppervlak van de functies die beschikbaar zijn. De documentatie op de site is goed, dus dat je voor de volledige API. De CodePen hieronder is gebaseerd op een van de demo ‘ s van de API-docs, die gebruik maakt van de .ketting() methode om een keten van meerdere transformeren animaties.

Zie de Pen van de Ketting Transformeren Animaties met KUTE.js door Louis Lazaris (@impressivewebs) op CodePen.

ScrollDir

Scrollen bibliotheken zijn populair voor enige tijd. ScrollDir, een van de ontwikkelaars van de Dollar Shave Club, is een echt eenvoudige, kleine en intuïtief programma waarmee u met een paar eenvoudige dingen met scroll-detectie.

Zodra u drop in de bibliotheek, in zijn eenvoudigste vorm het script werkt gewoon. U hoeft niet te bellen met de scrollDir () – methode of iets dergelijks. Als u uw browser opent, de ontwikkelaar van tools en bekijk de live DOM terwijl u omhoog en omlaag bladeren op een pagina waarop ScrollDir, kunt u zien wat het doet:

Zoals weergegeven in de bovenstaande GIF, deze tool voegt een data-scrolldir attribuut om de pagina ‘ s <html> element, dat veranderingen op één van twee waarden, afhankelijk van de scroll-richting:

<!– wanneer de gebruiker naar beneden scrollen –>
<html-gegevens-scrolldir=”down”>

<!– wanneer de gebruiker scrollen –>
<html-gegevens-scrolldir=”up”>

It defaults to “down” wanneer de pagina nog niet is geschoven, hoewel het lijkt alsof het zou kunnen profiteren van het hebben van een “neutrale” klasse als een derde optionele toestand.

Met dit kenmerk in zijn plaats, het is super makkelijk om te maken aangepaste veranderingen aan een pagina lay-out met CSS, het nemen van voordeel van CSS is de attribuut-selectors:

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

[data-scrolldir=”up”] .voet-banner {
bodem: -100px;
}

U kunt de bovenstaande code, gecombineerd met een aantal eenvoudige CSS transities, aangetoond in de CodePen hieronder, die vergelijkbaar is met het voorbeeld op de ScrollDir home pagina:

Zie de Pen ScrollDir basic demo door Louis Lazaris (@impressivewebs) op CodePen.

ScrollDir heeft een paar kleine API opties als u kiest om het gebruik van de niet-automatische versie van het script. Het is dood eenvoudig in gebruik en ik ben er zeker van pas kunnen komen als je iets te bouwen dat de behoeften van de veranderingen op de pagina die is gebaseerd op de scroll-richting.

CodeSandbox

Door de populariteit van web applicatie ontwikkeling met behulp van bibliotheken willen Reageren en Vue, een aantal verschillende Ide ‘ s en andere code tools hebben op het toneel, gericht op het helpen van ontwikkelaars die werken met een specifieke bibliotheek of kader.

CodeSandbox is een online code-editor voor vier van de huidige grote spelers: Reageren, Vue, Preact, en Slank. Deze tool is een beetje in dezelfde categorie als CodePen Projecten, maar is speciaal ontworpen voor elk van de vier genoemde bibliotheken.

Een van de leuke features van CodeSandbox is de mogelijkheid tot het toevoegen van npm pakketten in het linkermenu, onder een venster genaamd “Afhankelijkheden”. Er is een knop genaamd “Pakket Toevoegen” die u toelaat om te zoeken naar pakketten in de npm-register:

En als je de app is het ontbreken van een afhankelijkheid, CodeSandbox aangegeven met een foutmelding en een optie voor het toevoegen van de benodigde pakket. In de volgende GIF, heb ik samengevoegd deze Reageren calculator app als een voorbeeld project in CodeSandbox:

Aankondiging van het project nog een ontbrekende afhankelijkheid, die ik in staat was om onmiddellijk installeren. Hier is de CodeSandbox link naar mijn versie van dat project.

Een ander kenmerk dat mijn aandacht trok is de mogelijkheid om te “spieken” bij de definitie van een functie in de code venster:

Zoals veel native Ide ‘ s, deze kunt u in staat zijn om het opsporen van een functie van de bron, voor het sneller opsporen van fouten en whatnot. Er zijn ook enkele schone inline-code-aanvulling-functies, net als een native IDE.

Er zijn er nog veel meer functies die ik nog niet hier besproken – met inbegrip van GitHub integratie, implementatie via ZEIT, en nog veel meer – dus zorg ervoor om rond te porren van de verschillende panelen om een gevoel te krijgen voor wat je kunt doen.

AmplitudeJS

AmplitudeJS is een afhankelijkheid-gratis (zoals we dat tegenwoordig doen we dat niet?) HTML5 audio player “voor de moderne web”. Ik denk dat veel van onafhankelijke hobby-gedreven makers van muziek met web development ervaring zal waarderen deze voor een aantal redenen.

Amplitude kunt u uw eigen audio-speler met uw eigen ontwerp en lay-out. Voor het toevoegen van een song lijst, kunt u deze toevoegen via de grootste Amplitude.init() methode in JSON formaat. Hier is een voorbeeld met drie nummers:

Amplitude.init({
nummers: [
{
naam: “de Naam van een Nummer Een”,
kunstenaar: “de Naam van de Artiest”,
album: “de Naam van het Album”,
url: “/pad/naar/song.mp3”,
cover_art_url: “/path/to/artwork.jpg”
},
{
naam: “de Naam van een Nummer Twee”,
kunstenaar: “de Naam van de Artiest”,
album: “de Naam van het Album Twee”,
url: “/pad/naar/song.mp3”,
cover_art_url: “/path/to/artwork.jpg”
},
{
naam: “de Naam van een Nummer Drie”,
kunstenaar: “de Naam van de Artiest en Drie”,
album: “de Naam van het Album Drie”,
url: “/pad/naar/song.mp3”,
cover_art_url: “/path/to/artwork.jpg”
}
]
});

De code achter deze speler genereert de audio via de Web Audio API, dat is een beetje zoals het toevoegen van HTML5 audio-element, maar met niets anders dan JavaScript. Dus je zou kunnen technisch genereren van een werkende versie van de AmplitudeJS speler met nul HTML. Zie deze CodePen als voorbeeld, die auto-speelt het enige nummer in de afspeellijst en heeft geen HTML-code. Zelfs als je onderzoekt de gegenereerde DOM, er is niets, het is gewoon JavaScript. In dat geval, ik ben met behulp van de “autoplay”: true optie in de methode init () (de standaardwaarde is false, natuurlijk).

Als u wilt zien van de flexibele en gevarieerde audio-spelers die kunnen worden gebouwd met AmplitudeJS, zorg ervoor om te controleren de voorbeelden pagina. De Platte Zwarte Speler is waarschijnlijk mijn favoriet voor de gelijkenis met een old-school MP3-speler. Ik heb het in een CodePen demo hieronder:

Zie de Pen LeEgyj door Louis Lazaris (@impressivewebs) op CodePen.

In termen van het configureren van AmplitudeJS, hier zijn enkele van de hoogtepunten.

Alle info die u in de JSON kan dynamisch zijn toegevoegd aan de speler waar u maar wilt. Bijvoorbeeld de volgende HTML-code display de naam van het nummer, de artiest, het album en de bestands-URL voor het nummer dat wordt afgespeeld:

<p amplitude-song-info=”naam” amplitude-main-song-info=”true”>
<p amplitude-song-info=”kunstenaar” amplitude-main-song-info=”true”>
<p amplitude-song-info=”album” amplitude-main-song-info=”true”>
<p amplitude-song-info=”url” amplitude-main-song-info=”true”>

Let op de amplitude-song-info-attribuut, die bepaalt welke bits van de gegevens die u wilt injecteren in dat element. Zou je niet per se gebruik maken van alinea ‘ s, maar dat is één manier om het te doen. U kunt dit zien in actie in dit CodePen demo.

Met de functies voor metagegevens, het toevoegen van een speelduur of resterende tijd indicator voor de huidige song is eenvoudig:

<p class=”amplitude-tijd-resterende” amplitude-main-tijd-resterende=”true”>
<p class=”amplitude-huidige-time” amplitude-main-stroom-tijd=”true”>

Een andere leuke functie is de mogelijkheid om te werken met callbacks (dat is vrijwel een must voor een goede API). Hier twee van de opties voor terugbellen gebruikt in een eenvoudig voorbeeld:

Amplitude.init({
nummers: [
// lijst met nummers zou hier…
],
callbacks: {
before_play: function() {
document.querySelector(‘.msg’).innerHTML = ‘Song zal nu beginnen…’;
},
after_stop: function() {
document.querySelector(‘.msg’).innerHTML = ‘Song is afgelopen!’;
}
}
});

U kunt dit zien in actie in dit CodePen. Ik heb overgenomen van een rudimentair play/pause knop om te helpen met de callbacks. Om te zien de laatste terugbellen, je moet wachten voor de song voltooien (pauzeren niet leiden tot de after_stop terugbellen). De button is gebouwd met niets, maar een paar HTML-attributen, geen extra scripts nodig.

Dit is een heel klein voorproefje van wat mogelijk is met deze speler en hoe flexibel is. De documenten zijn solide en moet de slag kunt met deze tool in een mum van tijd.

Eervolle Vermeldingen

Dat is een gedetailleerde blik op de vijf van mijn favorieten van het afgelopen jaar. Maar er zijn veel anderen de moeite waard te onderzoeken die zijn ook minder bekende. Ik heb hieronder een aantal van deze hieronder:

  • BunnyJS –Een ES6-based front-end framework dat adverteert als “Eenvoudig, zoals jQuery, beter dan jQuery UI, krachtige graag Reageren”.
  • keyframes-tool –Een command line tool voor het converteren van CSS-animaties om een keyframes object geschikt is voor gebruik met de Web-Animaties API.
  • Konsul – Een Reageren renderer dat maakt de browser developer tools console.
  • over-tabs – een vlotte communicatie tussen de cross-origin tabbladen in de browser.
  • svgi – EEN CLI tool om te inspecteren de inhoud van SVG-bestanden, het verstrekken van informatie over de SVG (aantal knooppunten, paden, containers, vormen, boom hiërarchie, enz.).
  • CSS in JS Speeltuin – Spelen met de code voor zowat elk van de CSS-JavaScript-oplossingen (JSS, stijl-onderdelen, glamoureuze, enz.).

Wat is Je Favoriete vondst van het Jaar?

Dus dat is het. Zoals ik zei in het begin, dit was niet bedoeld als een prijsuitreiking voor de beste tools van het jaar, maar meer van een blik op een aantal niet-zo-mainstream alternatieven die zijn interessant en praktisch. Ik hoop dat u hier een aantal van hen nuttig. Als je geïnteresseerd bent in een voortgezette te houden met de instroom van nieuwe tools in front-end ontwikkeling, zorg ervoor dat u te abonneren op mijn nieuwsbrief.

Heb je struikelde over (of gebouwd) iets afkoelen in het afgelopen jaar, dat zou van belang zijn voor front-end ontwikkelaars? Laat het me weten in de comments, ik zou graag een kijkje nemen.