Front-End-Tools: Meine Lieblings Findet 2017

0
65

Weitere zwölf Monate vergangen, und ich bin sicher, alle von Euch haben über einige interessante neue Codierung Techniken, Technologien, CSS-tricks (natürlich!), und andere Sachen, die macht Sie produktiver im Jahr 2018.

Wie einige von Euch vielleicht wissen, ich kuratiere eine wöchentliche Newsletters, Web-Tools, Wöchentlich, in der ich mit Dutzenden von links, die jede Woche auf neue tools, meist mit Schwerpunkt auf Dinge, die nützlich für die front-end-Entwickler. So ist es eine Untertreibung zu sagen, dass ich über viele der neuen tools in den letzten 12 Monaten.

Wie ich es getan habe in den vergangenen Jahren, habe ich zusammen einen kurzen Blick auf einige meiner Lieblings findet im front-end-tools.

Und bitte beachten Sie, dass dies ist nicht eine Liste der “besten” oder “beliebtesten” Werkzeuge 2017 – das hat nichts zu tun mit der Popularität oder Anzahl der GitHub-stars. Dies sind die Werkzeuge, die ich glaube, sind einzigartig, interessant und praktisch – aber nicht unbedingt alle bekannten. Sie sind einige meiner persönlichen Lieblings-Fundstücke des Jahres, nichts mehr.

tlapse

Bei der Arbeit an einem neuen Projekt, vor allem die große und langwierige, ist es leicht zu vergessen, die Anzahl der änderungen des Projekts layout durchgemacht hat. tlapse ist ein Befehlszeilen-Dienstprogramm, das Ihnen erlaubt, um automatisierte screenshots von Ihrer Arbeit in festgelegten Intervallen, im wesentlichen so dass Sie eine visuelle timeline Ihrer Entwicklung in form einer Reihe von screenshots.

Das Projekt verfügt über 1.100+ Sterne auf GitHub, so scheint es, Entwickler zu finden sind, eine gültige Anwendung für diese, obwohl es scheint ein wenig narzisstisch auf den ersten Blick. Neben der Neuheit des seins in der Lage, zurück zu blicken auf die Fortschritte Ihres Projekts, nehme ich an tlapse könnte auch verwendet werden, zu senden visual Fortschrittsberichte zu Kunden, Projekt-Managern oder anderen Entwicklung team-Mitglieder.

Sie installieren tlapse als Globale npm-Paket:

npm install-g tlapse

Dann führen Sie es im hintergrund und starten Sie Ihre Arbeit:

tlapse — localhost:3000

Standardmäßig tlapse nehmen screenshots in Intervallen von einer minute und die screenshots werden Hinzugefügt, um die tlapse Ordner in das aktuelle Projekt (also dort, wo Sie den Befehl ausführen):

Sinnvoll, tlapse wird auch ein screenshot nur, wenn er erkennt, das layout in irgendeiner Weise geändert wurde. Also, wenn die nächste geplante screenshot ist die gleiche wie die Vorherige, wird es zu überspringen:

Wenn Sie möchten, verwenden Sie ein anderes Verzeichnis oder ändern Sie die screenshot-Frequenz, geben Sie die Optionen zusammen mit den normalen Befehl:

tlapse –alle 3m –directory ./screenshots — localhost:3000

Wie der name schon sagt, tlapse ermöglicht es Ihnen, einen time-lapse-video oder animiertes GIF, das zeigt den Fortschritt Ihrer Arbeit. Hier habe ich die erstellt wurden, während mock-Aufbau eines Bootstrap-basierten layout:

Insgesamt ist dies ein einfach zu bedienendes tool, sogar für diejenigen, die nicht sehr komfortabel mit dem Befehl Linie, und es gibt sicherlich einige Anwendungsfälle für den Wunsch zu nehmen Sie screenshots des work in progress.

KUTE.js

JavaScript-animation-Bibliotheken sind nicht selten. Aber KUTE.js gefangen mein Auge durch seine wichtigste Verkaufsargument: die Leistung. Es kann nicht geleugnet werden, dass, wenn Sie gehen, um einmal in Erwägung, komplexe Animationen in web-apps heute, müssen Sie vorbereitet werden, um mögliche performance-Probleme als Folge der Benutzer, die Zugriff auf Ihre app auf mobilen Geräten oder bei langsameren verbindungen.

Der moment, die Sie besuchen, die KUTE.js Startseite begrüßt Sie mit einer bunten, komplexen super-glatte animation, Zeugnis für die Wahrheit dieses tool Forderungen.

Neben der Leistung, zwei andere Dinge, die ich mag:

  • Eine wirklich gute API
  • Eine ausgezeichnete callback-system

Bauen Sie Ihre Animationen erstellen tween-Objekte. Zum Beispiel:

var tween = KUTE.fromTo(
‘.box’,
{backgroundColor:’gelb’},
{backgroundColor:’orange’},
{complete: callback}
);

Das obige Beispiel erstellt eine fromTo() tween mit verschiedenen Optionen. Innerhalb fromTo() ich habe angegeben, ist der Selektor für das target-element, das die start-und end-Werte für die Eigenschaft animiert wird, und eine callback-Funktion, die ausgeführt wird, wenn die animation abgeschlossen ist.

Sie können auch erstellen tweens mithilfe von(), allTo(), und allFromTo(), mit dem letzteren Verfahren lassen Sie sich bewerben Animationen, um Sammlungen von Objekten.

Die callback-Funktionen ist sehr feinkörnig, so dass Sie zum ausführen von code (die könnte auch den Aufruf einer neuen animation insgesamt) an bestimmten Punkten, einschließlich:

  • Wenn eine animation startet
  • Für jeden frame der animation
  • Wenn eine animation angehalten
  • Wenn eine animation wieder aufgenommen, nachdem er angehalten wurde
  • Wenn eine animation beendet ist
  • Wenn eine animation abgeschlossen ist

Ich habe nur an der Oberfläche gekratzt features verfügbar. Die Dokumentation auf der Website ist gut, so, dass der check out für die vollständige API. Die CodePen unten, ist basiert auf einer der demos aus den API-docs, die verwendet die .Kette () – Methode zur Kette mehrere Animationen verwandeln.

Finden Sie die Pen-Chain-Transformation mit Animationen KUTE.js von Louis Lazaris (@impressivewebs) auf CodePen.

ScrollDir

Scrolling-Bibliotheken sind beliebt für einige Zeit. ScrollDir, von den Entwicklern von Dollar Shave Club, ist eine wirklich einfache, kleine, und intuitive Dienstprogramm, um Ihnen zu helfen ein paar einfache Dinge, mit scroll-Erkennung.

Sobald Sie drop in die Bibliothek, in seiner einfachsten form wird das Skript funktioniert einfach. Sie brauchen nicht zu nennen, die scrollDir () – Methode oder so etwas. Wenn Sie öffnen Sie Ihren browser, Entwickler-tools und untersuchen Sie die live-DOM beim scrollen nach oben und unten auf einer Seite ausgeführt ScrollDir, können Sie sehen, was es tut:

Wie Sie im obigen GIF, dieses Dienstprogramm fügt eine Daten-scrolldir-Attribut auf der Seite <html> – element, das Veränderungen auf einen von zwei Werten, je nach scroll-Richtung:

<!– wenn der Benutzer nach unten scrollen –>
<html-Daten-scrolldir=”unten”>

<!– wenn der Benutzer einen Bildlauf nach oben –>
<html-Daten-scrolldir=”up”>

Es wird standardmäßig auf “nach unten”, wenn die Seite wurde noch nicht gescrollt, obwohl es scheint, wie es könnte profitieren von einer “neutralen” Klasse als einen Dritten, optionalen staatlichen.

Mit diesem Attribut, ist es super einfach, um benutzerdefinierte änderungen an einer Seite, das layout mit nichts aber CSS, unter Ausnutzung der CSS Attribut-Selektoren:

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

[Daten-scrolldir=”up”] .footer-banner {
unten: -100px;
}

Sehen Sie den obigen code, kombiniert mit einigen einfachen CSS-übergänge, dargestellt in der CodePen unten, das ist ähnlich wie das Beispiel auf der ScrollDir Homepage:

Finden Sie den Stift ScrollDir basic demo von Louis Lazaris (@impressivewebs) auf CodePen.

ScrollDir bietet ein paar kleinere API-Optionen, wenn Sie wählen, um die nicht-auto-version des Skripts. In jedem Fall ist es tot einfach zu bedienen und ich bin sicher, in handliches kommen, wenn Sie etwas zu bauen, muss Veränderungen auf der Seite basiert auf scroll-Richtung.

CodeSandbox

Aufgrund der Popularität der web-app-Entwicklung mit Bibliotheken wie Reagieren und Vue, eine Reihe von verschiedenen IDEs und code-tools kommen auf die Szene, die zur Unterstützung von Entwicklern, die sich mit einer bestimmten Bibliothek oder ein framework.

CodeSandbox ist ein online-code-editor für vier der aktuellen big Player: Reagieren, Vue, Preact, und Schlank. Dieses tool ist etwas in die gleiche Kategorie wie CodePen-Projekte, sondern ist speziell für jede der vier oben genannten Bibliotheken.

Eines der netten features von CodeSandbox ist die Möglichkeit zum hinzufügen von npm-Pakete in der linken Navigationsleiste unter ein Fenster namens “Dependencies”. Es gibt einen button namens “Add Package”, dass ermöglicht die Suche nach Paketen in die npm-registry:

Und wenn Ihre app eine Abhängigkeit fehlt, CodeSandbox zeigt diese mit einer Fehlermeldung und eine option, um das benötigte Paket. In der folgenden GIF, ich habe zusammengesetzt, diese Reagieren Taschenrechner-app-als ein Beispiel-Projekt in CodeSandbox:

Hinweis das Projekt hatte noch eine fehlende Abhängigkeit, die konnte ich sofort installieren. Hier ist die CodeSandbox link zu meiner version des Projekts.

Ein weiteres feature, das meine Aufmerksamkeit erregte, ist die Fähigkeit, “peek” bei der definition einer Funktion im code-Fenster:

Wie viele nativen IDEs, diese können Sie in der Lage sein auf die Spur einer Funktion die Quelle, für eine schnellere Fehlersuche und so weiter. Es gibt auch einige saubere inline-code-Vervollständigung bietet, genau wie eine native-IDE.

Es gibt Tonnen mehr Funktionen, die ich noch nicht besprochen hier – einschließlich GitHub integration, Bereitstellung über die ZEIT und vieles mehr, so sicher sein, stöbern die verschiedenen Platten, um ein Gefühl für das, was Sie tun können.

AmplitudeJS

AmplitudeJS ist eine Abhängigkeit-frei (wie wir das heute tun wir das nicht?) HTML5-audio-player “für das moderne Internet”. Ich denke, eine Menge von unabhängigen hobby-driven Musik-Macher mit web-Entwicklung Erfahrung schätzen diese für eine Reihe von Gründen.

Amplitude ermöglicht Ihnen das erstellen Sie Ihre eigenen audio-player mit Ihrem eigenen benutzerdefinierten design und layout. Hinzufügen eines song-Liste, Sie können es hinzufügen, über die Haupt-Amplitude.init () – Methode im JSON-format. Hier ist ein Beispiel mit drei songs:

Die Amplitude.init({
Lieder: [
{
name: “Song Name”,
Künstler: “Künstler-Namen”,
album: “Album-Name”,
url: “/Pfad/zu/song.mp3”,
cover_art_url: “/path/to/artwork.jpg”
},
{
name: “Song Name Zwei”,
Künstler: “Künstler-Namen für Zwei”
album: “Album-Name Zwei”,
url: “/Pfad/zu/song.mp3”,
cover_art_url: “/path/to/artwork.jpg”
},
{
name: “Song Name Drei”,
Künstler: “Künstler-Namen” Drei,
album: “Album-Name Drei”,
url: “/Pfad/zu/song.mp3”,
cover_art_url: “/path/to/artwork.jpg”
}
]
});

Der code hinter dieser player gibt die audio-mit der Web-Audio-API, die Art wie das hinzufügen von HTML5-audio-element, aber mit nichts aber JavaScript. So könnte man technisch erzeugen eine funktionierende version des AmplitudeJS Spieler mit null HTML. Siehe in diesem CodePen als ein Beispiel, die auto-spielt das einzige Lied in der playlist hat und keine HTML. Auch wenn Sie untersuchen die generierten DOM, es ist nichts; es ist nur JavaScript. In diesem Beispiel verwende ich die “autoplay”: true option in der init () – Methode (der Standardwert ist false, natürlich).

Wenn Sie sehen wollen, die flexibel und abwechslungsreich-audio-Player, die gebaut werden können mit AmplitudeJS, schauen Sie auf der Beispiele-Seite. Die Flache Schwarze Player ist wohl mein Favorit für seine ähnlichkeit mit ein old-school-MP3-player. Ich habe es in ein CodePen-demo unter:

Finden Sie den Stift LeEgyj von Louis Lazaris (@impressivewebs) auf CodePen.

Hinsichtlich der Konfiguration AmplitudeJS, hier sind einige der highlights.

Alle Informationen, die Sie in der JSON-dynamisch Hinzugefügt werden können, um die Spieler-wo immer Sie wollen. Beispielsweise den folgenden HTML-Code angezeigt, und der song-name, Interpret, album und-Datei-URL für den aktuell spielenden track:

<p amplitude-song-info=”name” amplitude-main-song-info=”true”>
<p amplitude-song-info=”Künstler” 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 die amplitude-song-info-Attribut, das definiert, welche bit der Daten, die Sie wollen zu injizieren in das element. Sie würde nicht unbedingt durch die Verwendung von Absätzen, aber das ist ein Weg, es zu tun. Sie können dies in Aktion zu sehen in diesem CodePen-demo.

Mit dem Metadaten-Funktionen, hinzufügen von einem Laufenden Zeit oder der verbleibenden Zeit Anzeige für den aktuellen song, ist einfach:

<p class=”amplitude-Zeit-Verbleibende” amplitude-main-time-remaining=”true”>
<p class=”amplitude-aktuelle Zeit,” amplitude-main-aktuelle Zeit=”true”>

Ein weiteres großartiges feature ist die Fähigkeit zu arbeiten mit callbacks (das ist so ziemlich ein muss für jede gute API). Hier sind zwei der callback-Optionen verwendet, die in einem einfachen Beispiel:

Die Amplitude.init({
Lieder: [
// songs, die Liste wäre hier…
],
Rückrufe: {
before_play: function() {
Dokument.querySelector(‘.msg’).innerHTML = ‘Song wird nun gestartet…’;
},
after_stop: function() {
Dokument.querySelector(‘.msg’).innerHTML = ‘Lied beendet hat!’;
}
}
});

Sie können dies in Aktion zu sehen in diesem CodePen. Ich habe aufgenommen eine rudimentäre Wiedergabe – /pause-Taste, um Ihnen helfen, mit der Rückrufe. Zu sehen, der Letzte Rückruf, Sie müssen warten, bis der song komplett auf, (Pause wird nicht ausgelöst, die after_stop callback). Die Schaltfläche ist mit nichts, aber ein paar HTML-Attribute, keine extra-scripting benötigt.

Dies ist eine wirklich kleine Auswahl, was möglich ist mit diesem player und wie flexibel es ist. Die docs sind solide und sollten Sie aufstehen und laufen mit diesem Werkzeug in kürzester Zeit.

Lobende Erwähnungen

Das ist einen ausführlichen Blick auf fünf meiner Favoriten aus dem vergangenen Jahr. Aber es gibt viele andere lohnt sich zu untersuchen, sind ebenso weniger bekannte. Ich habe einige davon genannt unter:

  • BunnyJS –Ein ES6-basierte front-end-framework, wirbt als “Einfaches wie jQuery, besser als jQuery UI, mächtig wie Reagieren”.
  • keyframes-tool –Ein Kommandozeilen-tool zum konvertieren von CSS-Animationen, um eine keyframes Objekt geeignet für die Verwendung mit dem Web-Animationen API.
  • Konsul – Reagieren renderer, rendert der browser-Entwickler-tools-Konsole.
  • über-tabs – Einfache Kommunikation zwischen cross-origin-browser-tabs.
  • svgi – Ein CLI-tool zur Prüfung der Inhalte von SVG-Dateien, die Bereitstellung von Informationen über die SVG – (Anzahl der Knoten, Pfade, Container, Formen, Hierarchie, etc).
  • CSS in JS-Spielplatz – Spielen, um mit dem code für gerade ungefähr jedem von CSS-in JavaScript-Lösungen (JSS, Stil-Komponenten, glamourös, etc).

Was ist Ihre Lieblings-Fundstück des Jahres?

Das ist es also. Wie ich am Anfang schon gesagt, das war nicht dazu gedacht, eine Preisverleihung für die besten tools des Jahres, sondern mehr ein Blick auf einige nicht-so-mainstream-alternativen, die interessant und praktisch. Ich hoffe, Sie finden einige von Ihnen nützlich. Wenn Sie interessiert sind, weiterhin zu halten mit dem Zustrom von neuen tools im front-end-Entwicklung, werden Sie sicher, abonnieren Sie meinen newsletter.

Haben Sie darüber gestolpert ist (oder gebaut) etwas kühl im vergangenen Jahr, dass wäre von Interesse zu front-end-Entwickler? Lassen Sie mich wissen in den Kommentaren, ich würde gerne, um einen Blick zu nehmen.