Front-End Tools: Meine Lieblingsfunde von 2017

Zwölf weitere Monate sind vergangen und ich bin sicher, dass Sie alle auf einige interessante neue Coding-Techniken, Technologien, CSS-Tricks (natürlich!) und andere Dinge gestoßen sind, die Sie im Jahr 2018 produktiver machen werden.

Wie einige von Ihnen vielleicht wissen, kuratiere ich einen wöchentlichen Newsletter namens Web Tools Weekly, in dem ich jede Woche Dutzende von Links zu neuen Tools vorstelle, die sich hauptsächlich an Front-End-Entwickler richten. Daher ist es eine Untertreibung zu sagen, dass mir in den letzten 12 Monaten **viele neue Tools** begegnet sind.

Wie in den Jahren zuvor habe ich einen kurzen Überblick über einige meiner Lieblingsfunde bei Front-End-Tools zusammengestellt.

Und bitte beachten Sie, dass dies keine Liste der „besten“ oder „beliebtesten“ Tools von 2017 ist – dies hat nichts mit Popularität oder der Anzahl der GitHub-Sterne zu tun. Dies sind Tools, die ich für einzigartig, interessant und praktisch halte – aber nicht unbedingt alle sehr bekannt sind. Es sind einige meiner persönlichen Lieblingsfunde des Jahres, nicht mehr.

tlapse

Wenn Sie an einem neuen Projekt arbeiten, insbesondere an einem großen und langwierigen, vergisst man leicht, wie viele Änderungen das Layout des Projekts durchlaufen hat. tlapse ist ein Befehlszeilen-Tool, mit dem Sie automatisierte Screenshots Ihrer Arbeit in bestimmten Intervallen einrichten können, was Ihnen im Wesentlichen eine visuelle Zeitleiste Ihrer Entwicklung in Form einer Reihe von Screenshots liefert.

Das Projekt hat über 1.100 Sterne auf GitHub, daher scheint es, dass Entwickler einen gültigen Nutzen darin finden, auch wenn es auf den ersten Blick etwas narzisstisch erscheint. Neben der Neuheit, den Fortschritt Ihres Projekts nachvollziehen zu können, könnte tlapse meiner Meinung nach auch verwendet werden, um visuelle Fortschrittsberichte an Kunden, Projektmanager oder andere Teammitglieder zu senden.

Sie installieren tlapse als globales npm-Paket

npm install -g tlapse

Dann führen Sie es im Hintergrund aus und beginnen Sie mit Ihrer Arbeit

tlapse -- localhost:3000

Standardmäßig macht tlapse Screenshots im Abstand von einer Minute, und die Screenshots werden im Ordner tlapse im aktuellen Projekt (d. h. dort, wo Sie den Befehl ausführen) abgelegt.

Nützlicherweise macht tlapse nur dann einen Screenshot, wenn es erkennt, dass sich das Layout irgendwie geändert hat. Wenn also der nächste geplante Screenshot derselbe wie der vorherige ist, wird er übersprungen.

Wenn Sie ein anderes Verzeichnis verwenden oder die Screenshot-Frequenz ändern möchten, geben Sie dies als Optionen zusammen mit dem regulären Befehl an.

tlapse --every 3m --directory ./screenshots -- localhost:3000

Wie der Name schon sagt, ermöglicht Ihnen tlapse die Erstellung eines Zeitraffer-Videos oder eines animierten GIFs, das den Fortschritt Ihrer Arbeit zeigt. Hier ist eines, das ich beim Mock-Up eines Bootstrap-basierten Layouts erstellt habe.

Insgesamt ist dies ein einfach zu bedienendes Tool, auch für diejenigen, die nicht sehr gut mit der Befehlszeile zurechtkommen, und es gibt sicherlich einige Anwendungsfälle, um Screenshots von Arbeiten im Gange zu erstellen.

KUTE.js

JavaScript-Animationsbibliotheken sind nicht selten. Aber KUTE.js hat meine Aufmerksamkeit aufgrund seines Hauptverkaufsarguments auf sich gezogen: Leistung. Es ist unbestreitbar, dass man, wenn man überhaupt komplexe Animationen in Webanwendungen in Betracht ziehen möchte, bereit sein muss, potenzielle Leistungsprobleme zu bewältigen, die sich aus dem Zugriff von Benutzern auf Ihre App auf mobilen Geräten oder über langsamere Verbindungen ergeben.

Sobald Sie die KUTE.js-Homepage besuchen, werden Sie mit einer farbenfrohen, komplexen und superflüssigen Animation begrüßt, die die Wahrheit der Behauptungen dieses Tools bezeugt.

Neben der Leistung gefallen mir zwei weitere Dinge

• Eine wirklich nette API
• Ein exzellentes Callback-System

Sie beginnen mit dem Erstellen Ihrer Animationen, indem Sie Tween-Objekte erstellen. Zum Beispiel

var tween = KUTE.fromTo(
  '.box',
  {backgroundColor:'yellow'},
  {backgroundColor:'orange'},
  {complete: callback}
);

Das obige Beispiel erstellt einen fromTo()-Tween mit verschiedenen Optionen. Innerhalb von fromTo() habe ich den Selektor für das Ziel-Element, die Start- und Endwerte für die animierte Eigenschaft und eine Callback-Funktion angegeben, die ausgeführt werden soll, wenn die Animation abgeschlossen ist.

Sie können Tweens auch mit to(), allTo() und allFromTo() erstellen, wobei letztere Methoden es Ihnen ermöglichen, Animationen auf Objekt-Sammlungen anzuwenden.

Die Callback-Funktionalität ist sehr fein granulare und ermöglicht es Ihnen, Code (der auch den Aufruf einer neuen Animation beinhalten kann) zu bestimmten Zeitpunkten auszuführen, einschließlich

• Wenn eine Animation beginnt
• Für jeden Frame der Animation
• Wenn eine Animation angehalten wird
• Wenn eine Animation nach dem Anhalten fortgesetzt wird
• Wenn eine Animation gestoppt wird
• Wenn eine Animation abgeschlossen ist

Ich habe nur an der Oberfläche der verfügbaren Funktionen gekratzt. Die Dokumentation auf der Website ist gut, also schauen Sie dort für die vollständige API nach. Der unten stehende CodePen basiert auf einer der Demos aus der API-Dokumentation, die die Methode .chain() verwendet, um mehrere Transformationsanimationen zu verketten.

Sehen Sie den Pen Chain Transform Animations with KUTE.js von Louis Lazaris (@impressivewebs) auf CodePen.

ScrollDir

Scrolling-Bibliotheken sind seit einiger Zeit beliebt. ScrollDir, von den Entwicklern bei Dollar Shave Club, ist ein wirklich einfaches, kleines und intuitives Hilfsprogramm, das Ihnen bei einigen einfachen Aufgaben mit der Scroll-Erkennung hilft.

Sobald Sie die Bibliothek einbinden, funktioniert das Skript in seiner einfachsten Form. Sie müssen die Methode scrollDir() oder etwas Ähnliches nicht aufrufen. Wenn Sie die Entwicklertools Ihres Browsers öffnen und den Live-DOM beim Scrollen nach oben und unten auf einer Seite, auf der ScrollDir ausgeführt wird, untersuchen, können Sie sehen, was es tut.

Wie im obigen GIF gezeigt, fügt dieses Hilfsprogramm dem <html>-Element der Seite ein Attribut data-scrolldir hinzu, das je nach Scrollrichtung auf einen von zwei Werte gesetzt wird.

<!-- when the user is scrolling down -->
<html data-scrolldir="down">

<!-- when the user is scrolling up -->
<html data-scrolldir="up">

Es wird standardmäßig auf „down“ gesetzt, wenn die Seite noch nicht gescrollt wurde, obwohl es so aussieht, als könnte es von einer „neutralen“ Klasse als dritter optionaler Zustand profitieren.

Mit diesem Attribut ist es super einfach, benutzerdefinierte Änderungen am Layout einer Seite nur mit CSS vorzunehmen, indem Sie die Attributselektoren von CSS nutzen.

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

[data-scrolldir="up"] .footer-banner {
  bottom: -100px;
}

Sie können den obigen Code, kombiniert mit einigen einfachen CSS-Übergängen, im unten stehenden CodePen sehen, der dem Beispiel auf der ScrollDir-Homepage ähnelt.

Sehen Sie den Pen ScrollDir basic demo von Louis Lazaris (@impressivewebs) auf CodePen.

ScrollDir bietet einige geringfügige API-Optionen, wenn Sie die nicht-automatische Version des Skripts verwenden möchten. In beiden Fällen ist es extrem einfach zu bedienen und wird Ihnen sicherlich nützlich sein, wenn Sie etwas erstellen, das auf der Seite basierend auf der Scroll-Richtung Änderungen erfordert.

CodeSandbox

Aufgrund der Popularität der Web-App-Entwicklung mit Bibliotheken wie React und Vue sind eine Reihe verschiedener IDEs und anderer Code-Tools auf den Markt gekommen, die Entwickler, die mit einer bestimmten Bibliothek oder einem bestimmten Framework arbeiten, unterstützen sollen.

CodeSandbox ist ein Online-Code-Editor für vier der aktuellen großen Player: React, Vue, Preact und Svelte. Dieses Tool ist etwas in der gleichen Kategorie wie CodePen Projects, aber es ist speziell für jede der vier genannten Bibliotheken konzipiert.

Eine der netten Funktionen von CodeSandbox ist die Möglichkeit, npm-Pakete in der linken Seitenleiste unter einem Bereich namens „Dependencies“ hinzuzufügen. Es gibt eine Schaltfläche namens „Add Package“, mit der Sie Pakete im npm-Registry suchen können.

Und wenn Ihrer App eine Abhängigkeit fehlt, wird CodeSandbox dies mit einer Fehlermeldung und der Option zum Hinzufügen des erforderlichen Pakets anzeigen. Im folgenden GIF habe ich diese React-Taschenrechner-App als Beispielprojekt in CodeSandbox zusammengestellt.

Beachten Sie, dass dem Projekt immer noch eine fehlende Abhängigkeit fehlte, die ich sofort installieren konnte. Hier ist der CodeSandbox-Link zu meiner Version dieses Projekts.

Eine weitere Funktion, die mir aufgefallen ist, ist die Möglichkeit, die Definition einer Funktion im Codefenster zu „durchsuchen“.

Wie viele native IDEs ermöglicht Ihnen dies, die Quelle einer Funktion zu finden, für eine schnellere Fehlerbehebung und so weiter. Es gibt auch einige saubere Inline-Codevervollständigungsfunktionen, genau wie in einer nativen IDE.

Es gibt unzählige weitere Funktionen, die ich hier nicht besprochen habe – einschließlich GitHub-Integration, Bereitstellung über ZEIT und vieles mehr –, also schauen Sie sich die verschiedenen Bedienfelder an, um ein Gefühl dafür zu bekommen, was Sie tun können.

AmplitudeJS

AmplitudeJS ist ein Abhängigkeits-freier (den mögen wir heutzutage, nicht wahr?) HTML5-Audioplayer „für das moderne Web“. Ich denke, viele unabhängige, Hobby-getriebene Musikmacher mit Webentwicklungs-Erfahrung werden dies aus verschiedenen Gründen zu schätzen wissen.

Amplitude ermöglicht es Ihnen, Ihren eigenen Audioplayer mit Ihrem eigenen Design und Layout zu erstellen. Um eine Songliste hinzuzufügen, können Sie dies über die Hauptmethode Amplitude.init() im JSON-Format tun. Hier ist ein Beispiel mit drei Songs.

Amplitude.init({
  songs: [
    {
      name: "Song Name One",
      artist: "Artist Name",
      album: "Album Name",
      url: "/path/to/song.mp3",
      cover_art_url: "/path/to/artwork.jpg"
    },
    {
      name: "Song Name Two",
      artist: "Artist Name Two",
      album: "Album Name Two",
      url: "/path/to/song.mp3",
      cover_art_url: "/path/to/artwork.jpg"
    },
    {
       name: "Song Name Three",
      artist: "Artist Name Three",
      album: "Album Name Three",
      url: "/path/to/song.mp3",
      cover_art_url: "/path/to/artwork.jpg"
    }
  ]
});

Der Code hinter diesem Player generiert den Ton mithilfe der Web Audio API, was so etwas wie das Hinzufügen des HTML5-Elements audio ist, aber nur mit JavaScript. Sie könnten also technisch gesehen eine funktionierende Version des AmplitudeJS-Players mit null HTML generieren. Sehen Sie sich diesen CodePen als Beispiel an, der das einzige Lied in der Playlist automatisch abspielt und kein HTML hat. Selbst wenn Sie den generierten DOM untersuchen, gibt es nichts, es ist nur JavaScript. In diesem Fall verwende ich die Option "autoplay": true in der init()-Methode (der Standardwert ist natürlich false).

Wenn Sie die flexiblen und vielfältigen Audioplayer sehen möchten, die mit AmplitudeJS erstellt werden können, sollten Sie sich unbedingt die Beispiele-Seite ansehen. Der Flat Black Player ist wahrscheinlich mein Favorit wegen seiner Ähnlichkeit mit einem Old-School-MP3-Player. Ich habe ihn in einen CodePen-Demo unten integriert.

Sehen Sie den Pen LeEgyj von Louis Lazaris (@impressivewebs) auf CodePen.

In Bezug auf die Konfiguration von AmplitudeJS sind hier einige der Highlights.

Alle Informationen, die Sie im JSON bereitstellen, können dynamisch zum Player hinzugefügt werden, wo immer Sie möchten. Zum Beispiel würde die folgende HTML den Songnamen, Künstler, Album und die Dateiname für den aktuell gespielten Track anzeigen.

<p amplitude-song-info="name" amplitude-main-song-info="true">
<p amplitude-song-info="artist" 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">

Beachten Sie das Attribut amplitude-song-info, das angibt, welcher Datenabschnitt in dieses Element eingefügt werden soll. Sie würden nicht unbedingt Absätze verwenden, aber das ist eine Möglichkeit. Sie können dies in dieser CodePen-Demo in Aktion sehen.

Mit den Metadaten-Funktionen ist das Hinzufügen einer Laufzeit- oder Restzeitanzeige für den aktuellen Song einfach.

<p class="amplitude-time-remaining" amplitude-main-time-remaining="true">
<p class="amplitude-current-time" amplitude-main-current-time="true">

Eine weitere großartige Funktion ist die Möglichkeit, mit Callbacks zu arbeiten (was für jede gute API quasi ein Muss ist). Hier sind zwei der Callback-Optionen, die in einem einfachen Beispiel verwendet werden.

Amplitude.init({
  songs: [
    // songs list would be here...
  ],
  callbacks: {
    before_play: function() {
      document.querySelector('.msg').innerHTML = 'Song will now begin...';
    },
    after_stop: function() {
      document.querySelector('.msg').innerHTML = 'Song has ended!';
    }
  }
});

Sie können dies in diesem CodePen in Aktion sehen. Ich habe eine rudimentäre Play/Pause-Schaltfläche integriert, um bei den Callbacks zu helfen. Um den letzten Callback zu sehen, müssen Sie warten, bis der Song abgeschlossen ist (pausieren löst nicht den after_stop-Callback aus). Die Schaltfläche wird nur mit einigen HTML-Attributen erstellt, ohne zusätzlichen Skriptcode.

Dies ist nur eine sehr kleine Auswahl dessen, was mit diesem Player möglich ist und wie flexibel er ist. Die Dokumentation ist solide und sollte Sie in kürzester Zeit mit diesem Tool zum Laufen bringen.

Ehrenwerte Erwähnungen

Das war ein detaillierter Blick auf fünf meiner Favoriten aus dem letzten Jahr. Aber es gibt noch viele andere, die eine genauere Betrachtung wert sind und die ähnlich weniger bekannt sind. Ich habe einige davon unten aufgelistet.

• BunnyJS – Ein ES6-basiertes Front-End-Framework, das sich als „Einfach wie jQuery, besser als jQuery UI, mächtig wie React“ bewirbt.
• keyframes-tool – Ein Befehlszeilen-Tool zur Konvertierung von CSS-Animationen in ein Keyframes-Objekt, das für die Verwendung mit der Web Animations API geeignet ist.
• Konsul – Ein React-Renderer, der auf die Entwicklerkonsolen des Browsers rendert.
• across-tabs – Einfache Kommunikation zwischen Browser-Tabs mit unterschiedlichen Ursprüngen.
• svgi – Ein CLI-Tool zur Inspektion des Inhalts von SVG-Dateien, das Informationen über das SVG liefert (Anzahl der Knoten, Pfade, Container, Formen, Baumhierarchie usw.).
• CSS in JS Playground – Experimentieren Sie mit dem Code für so gut wie jede CSS-in-JavaScript-Lösung (JSS, styled-components, glamorous usw.).

Was ist Ihr Lieblingsfund des Jahres?

Das war's. Wie ich eingangs sagte, war dies keine Preisverleihung für die besten Tools des Jahres, sondern eher ein Blick auf einige nicht so bekannte Alternativen, die interessant und praktisch sind. Ich hoffe, Sie finden einige davon nützlich. Wenn Sie weiterhin über den Zustrom neuer Tools in der Front-End-Entwicklung auf dem Laufenden bleiben möchten, abonnieren Sie unbedingt meinen Newsletter.

Sind Sie im vergangenen Jahr auf etwas Cooles gestoßen (oder haben Sie etwas gebaut), das für Front-End-Entwickler von Interesse sein könnte? Lassen Sie es mich in den Kommentaren wissen, ich würde es gerne sehen.