15+ Front-End-Tools, die Sie kennen sollten: Meine Lieblingsergebnisse für 2020

Ein weiteres Jahr ist vergangen und wenn Sie wie viele Webentwickler in der Branche sind, haben Sie wahrscheinlich eine ganze Reihe neuer Front-End-Tools entdeckt, die Sie in Ihren Workflow integrieren möchten. Ich sitze im selben Boot, vor allem, weil ich regelmäßig nach neuen Erkenntnissen suche die Werkzeuglandschaft.


In diesem Beitrag, Ich werde (mit einigen Screenshots und Demos) einige der interessantesten Front-End-Tools zusammenfassen, die ich für nützlich befunden habe. Dies sind nicht unbedingt die beliebtesten oder heißesten Werkzeuge, aber ich denke, jedes von ihnen ist in seinem Anwendungsfall einzigartig und verdient etwas mehr Aufmerksamkeit. Dies sind im Wesentlichen meine Lieblingsfunde des Jahres in Front-End-Tools.

Beste Front-End-Tools

Hotkey

Front-End-Tools: Hotkey

Das Erkennen von Tastenanschlägen mit JavaScript ist keine allzu komplexe Aufgabe, aber dieses kleine Dienstprogramm des GitHub-Teams macht es sehr einfach.

Damit können Sie eine Aktion für ein Element mit einer Tastenkombination auslösen.

Die Arten von Verknüpfungen umfassen eine Taste, eine Tastenkombination oder sogar eine Tastenfolge. Sie können auch mehrere Verknüpfungen für eine einzelne Aktion verwenden.

Das JavaScript ist nur eine Deklaration zusammen mit einem Import:

{install} aus ‘./hotkey.js’ importieren;

for (const el von document.querySelectorAll (‘[Daten-Hotkey]’)) {
install (el)
}}

Sobald dieser Code vorhanden ist, wird die Hauptarbeit im HTML erledigt. Hier ist eine Liste von Links, die ich erstellt habe, um je nach verwendeter Verknüpfung Inhalte anzuzeigen:

  • Beispiel
  • Beispiel
  • Beispiel
  • Beispiel
  • Beispiel

Beachten Sie die Daten-Hotkey-Attribute, die jedem der Links hinzugefügt wurden. Diese aktivieren die Hotkeys für die gezielten Aktionen (in diesem Fall wird ein: Zielselektor über CSS ausgelöst). Mehrere Hotkeys werden durch ein Komma getrennt. Tastenkombinationen werden durch ein Pluszeichen getrennt. und Tastenfolgen sind durch ein Leerzeichen getrennt.

Hier ist eine Live-Demo:

Probieren Sie jede der Verknüpfungen aus und stellen Sie fest, dass der Code im JavaScript-Bereich minimal ist. Sehr einfach einzurichten, sobald das Modul importiert wurde. Wenn Sie eine App mit mehreren Tastenkombinationen haben, die Sie in einem modalen Fenster anzeigen möchten (wie dies bei Twitter, GitHub usw. der Fall ist), sollten Sie dies als Nebeneffekt auschecken QuestionMark.js, und altes Projekt von mir.

Bei Tastaturkürzeln sollten Sie natürlich die Bedenken hinsichtlich der Barrierefreiheit berücksichtigen. Weitere Informationen hierzu finden Sie in der README-Datei des Repos.

Freezeframe.js

Front-End-Tools: Freezeframe.js

Das Einbetten kurzer Videos in Webseiten ist üblich, um zu zeigen, dass eine Aktion stattfindet. Manchmal ist auch ein animiertes GIF angebracht. GIFs lenken jedoch eher ab, da sie ihren Inhalt automatisch abspielen.

Mit diesem kleinen Dienstprogramm können Sie animierten GIFs, die in Ihren HTML-Code eingebettet sind, videoähnliche Funktionen hinzufügen.

Sobald Sie die Quelle Freezeframe.js in Ihre Seite aufgenommen haben, benötigen Sie nur eine einzige JavaScript-Deklaration:

neuer Freezeframe (‘. freezeframe’, {
Auslöser: ‘Hover’,
Overlay: falsch
});

Wenn Sie das zweite Argument weglassen (z. B. neues Freezeframe (‘. Freezeframe’)), wird standardmäßig keine Wiedergabetaste verwendet und die Animation wird beim Hover ausgelöst. Der einzige Fehler dabei ist, dass Sie es technisch nicht können, da es sich um ein animiertes GIF handelt "Pause" es kannst du nur "halt" es (was bedeutet, dass es wieder von vorne beginnt). Bei GIFs ist dies normalerweise keine große Sache.

Hier ist eine Demo mit drei verschiedenen Beispielen:

Die alleinige Verwendung dieses Tools spart jedoch möglicherweise nicht an Leistung, da das gesamte GIF hinter den Kulissen geladen zu sein scheint. Ich gehe jedoch davon aus, dass dies zusammen mit einer Bibliothek zum verzögerten Laden verwendet werden kann, wenn das GIF beim Laden der Seite nicht auf dem Bildschirm angezeigt wird.

ARC Toolkit

Front-End-Tools: ARC Toolkit

Ihre Front-End-Tools sollten zahlreiche Eingabehilfen enthalten.

Dies ist eine Chrome-Erweiterung, die Ihren Entwicklertools eine Registerkarte hinzufügt, mit der Sie Barrierefreiheitsfehler und Warnungen im Zusammenhang mit den WCAG 2.1 Level A- und AA-Richtlinien finden können.

Zwei Gründe, warum dieses Tool so großartig ist:

  • Es lässt sich in Ihren vorhandenen Test- / Debugging-Workflow in die Entwicklertools integrieren
  • Es wurde von der Paciello Group erstellt, die in der Entwicklergemeinde für ihre Einblicke in die Barrierefreiheit bekannt ist

ARC Toolkit-Funktionen

Sobald die Erweiterung installiert ist, wählen Sie einfach die Registerkarte in Ihren Entwicklertools und wählen Sie "Führen Sie Tests aus". Die anfängliche Ausgabe ähnelt der im vorherigen Screenshot gezeigten. Von dort aus können Sie einen Drilldown durchführen, um mögliche Zugänglichkeitsprobleme im Zusammenhang mit einer bestimmten Funktion anzuzeigen, wie im nächsten Screenshot gezeigt:

ARC Toolkit-Funktionen Drilldown

Beachten Sie die "Links" Die Option links hat das Häkchen daneben. Das habe ich in diesem Fall untersucht. Dadurch wird auch eine Überlagerung auf der Seite hinzugefügt, die anzeigt, wo sich alle ausgewählten Objekte befinden, wie Sie über den Entwicklertools auf der Live-Seite sehen können.

Scene.js

Front-End-Tools: Scene.js

Jedes Jahr scheint es eine Art neue Animationsbibliothek in der Front-End-Tool-Landschaft zu geben.

Meine Wahl für dieses Jahr ist Scene.js.

Dies ist nicht eine, mit der Sie einfach in wenigen Minuten arbeiten können, wie bei den anderen, die bisher vorgestellt wurden.

Es gibt eine Lernkurve, um sich an die API zu gewöhnen, die ungefähr so ​​aussieht:

let scene = neue Szene ({
".Suchbox": {
"0%" :: "Breite: 50px",
"70%":: "Breite: 300px",
}},
".Linie": {
"30%" :: "Breite: 0%",
"100%":: "Breite: 100%",
}}
}, {
Dauer: 1,
Lockerung: Scene.EASE_IN_OUT,
Selektor: wahr,
}). exportCSS ();

scene.setTime (0);
let toggle = false;

document.querySelector (".einreichen") .addEventListener ("klicken", function () {
toggle =! toggle;
scene.setDirection (umschalten ? "normal" :: "umkehren");
scene.play ();
});

Das ist der Code für einen der Beispiele auf der Homepage. Es ist ein einfaches kleines animiertes Suchfeld. Hier ist ihre CodePen-Demo:

Auch dies ist kein leicht zu erlernendes Tool. Wenn Sie jedoch eine neue Animationsbibliothek mit einer scheinbar recht einfachen API ausprobieren möchten, ist dies möglicherweise eine gute Option.

Kommentar

Front-End-Tools: Kommentar

Die aktuelle datenschutzbewusste Online-Landschaft könnte weitere Tools wie dieses verwenden. Ich habe schon seit einiger Zeit über Optionen für verbesserte Kommentarsysteme auf meiner WordPress-Website nachgedacht, und Commento sieht solide aus.

Ich mag die Funktionalität von etwas wie Disqus (Upvotes / Downvotes, Top-Kommentare usw.), aber es hat zu viel aufblähen.

Ich mag auch, dass WordPress-Kommentare standardmäßig selbst gehostet werden, aber ihnen fehlen die zusätzlichen Funktionen von Disqus. Ich denke, Commento ist ein Schritt in die richtige Richtung, um diese Probleme zu beheben.

Wenn Sie erwägen, von einer vorhandenen Kommentierungsplattform zu Commento zu wechseln, ist dies der Fall ziemlich viel Arbeit Nach dem, was ich gelesen habe, ist das ein großer Nachteil.

Obwohl Sie mit Commento aus Disqus importieren können, können Sie das nicht importieren "Stimmen" zu alten Kommentaren von Disqus oder den Avataren der Benutzer, die Kommentare gepostet haben.

Es gibt auch keine Möglichkeit, alte WordPress-Kommentare in Commento zu importieren, es sei denn, Sie exportieren zuerst nach Disqus und dann von Disqus nach Commento (dies kann mit einem Disqus-Importtool erfolgen, wenn Sie sich für Commento anmelden)..

Der letzte Nachteil ist die Tatsache, dass Commento nur dann kostenlos ist, wenn Sie es selbst hosten. Wenn Sie jedoch die Aufblähungs- und Datenschutzprobleme von Disqus berücksichtigen, lohnt sich die geringe monatliche Gebühr.

Git-Geschichte

Front-End-Tools: Git-Verlauf

Obwohl dies nicht nur in der Kategorie der Front-End-Tools enthalten ist, ist es aufgrund seiner Einfachheit und Neuheit in der Funktionsweise einer meiner Favoriten auf dieser Liste.

Mit Git History können Sie den Verlauf für jede Datei in einem öffentlichen Git-Repo anzeigen (GitHub, GitLab oder Bitbucket)..

Angenommen, Sie möchten den Verlauf der Änderungen an der anzeigen Quelldatei zum Normalize.css. Die Datei befindet sich unter:

https://github.com/necolas/normalize.css/blob/master/normalize.css

Ersetzen Sie github.com in der URL durch github.githistory.xyz, um den Verlauf anzuzeigen:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

Die Ausgabe unter der neuen URL lädt eine übersichtliche, interaktive Methode zum Anzeigen der Änderungen der Datei im Laufe der Zeit. Jedes Mal, wenn Sie einen Verlaufspunkt auswählen, werden einige coole Animationen ausgelöst, sodass Sie sehen können, welche Änderungen vorgenommen wurden und welcher Benutzer sie festgeschrieben hat.

CSS-Funktion schaltet um

Front-End-Tools: CSS-Funktionsumschaltung

Wenn Sie noch in einer Umgebung arbeiten, in der Sie einige ältere Browsertests durchführen müssen, ist dies möglicherweise eine nette kleine Chrome-Erweiterung, die Sie Ihrer Test-Toolbox hinzufügen können.

CSS Feature Toggles, ähnlich wie das oben erwähnte ARC Toolkit, fügt den Entwicklertools Ihres Browsers eine neue Registerkarte hinzu.

Auf der Registerkarte sehen Sie eine Liste moderner CSS-Funktionen.

Zum Umschalten verfügbare CSS-Funktionen

Sie können diese umschalten, um sofort zu sehen, wie Ihre Seite aussieht, wenn ein Benutzer die Seite in einem Browser besucht, der diese bestimmte Funktion nicht unterstützt. Dies ist eine großartige Möglichkeit, um einen schnellen Überblick darüber zu erhalten, wie sich Ihre Layouts in älteren Umgebungen verschlechtern.

Bei Auswahl der verschiedenen Funktionen wird die Seite automatisch aktualisiert, um die Änderungen anzuzeigen. Eine mit Flexbox erstellte Site wird beispielsweise von älterem CSS profitieren, um das Layout gesund zu halten und in neueren Browsern schrittweise zu verbessern.

App erstellen

Front-End-Tools: App erstellen

Zweifellos enthält Ihr Front-End-Tool-Workflow zahlreiche Optionen für Builds. Diese Website ist eine Kombination aus einer Lernwebsite und einem Projektgenerierungstool für Entwickler, die Webpack oder Parcel, die beliebten Asset-Bundler, verwenden (oder lernen möchten, wie man sie verwendet).

Führen Sie einen Drilldown in die Kategorien auf der linken Seite durch, um die gewünschten Optionen für Ihren Build auszuwählen. Anschließend werden die erforderlichen Dateien und Konfigurationsoptionen im Hauptfenster angezeigt.

Erstellen Sie App-Konfigurationsoptionen

Die Seite ist vollständig interaktiv, sodass Sie auf eine der virtuellen Dateien klicken können, um deren Inhalt anzuzeigen, oder Sie können den Mauszeiger über eine ausgewählte Option bewegen, um eine Beschreibung zusammen mit hervorgehobenen Teilen des Builds anzuzeigen, die für diese Option relevant sind.

Sehr nützlich sowohl zum Lernen als auch zum Erstellen neuer Projekte!

CSSJanus

Front-End-Tools: CSS Janus

Im Bereich der Internationalisierung ist dies ein Online-Tool, mit dem Sie Stylesheets von links nach rechts nach rechts nach links und umgekehrt konvertieren können.

Auf diese Weise können Sie auf einfache Weise Stylesheets für Sprachen von rechts nach links (RTL) wie Arabisch und Hebräisch erstellen.

Hier ist ein CSS-Beispiel:

.Beispiel {
float: left;
Textausrichtung: links;
Polsterung: 1px 2px 3px 4px;
Rand links: 1em;
Hintergrundposition: 5% 100px;
Cursor: ne-resize;
Randradius: 1px 2px;
}}

Das Obige wird wie folgt konvertiert:

.Beispiel {
schweben rechts;
Textausrichtung: rechts;
Polsterung: 1px 4px 3px 2px;
Rand rechts: 1em;
Hintergrundposition: 95% 100px;
Cursor: nw-resize;
Randradius: 2px 1px;
}}

Beachten Sie, dass die Unterschiede nicht nur Zeilen wie float: left und text-align: left umfassen, sondern auch Zeilen wie horizontale Auffülldeklarationen und Hintergrundpositionswerte.

Wenn das Tool einen Stilblock oder eine einzelne Deklaration ignorieren soll, können Sie die Direktive @noflip verwenden:

/ * @noflip * / .ignored {
float: left;
}}

.nicht ignoriert {
float: left;
/ * @noflip * / background: #fff (poster-ltr.png);
}}

Farbdieb

Front-End-Tools: Farbdieb

Color Thief ist sehr ordentlich und recht einfach zu bedienen, aber in seinen Anwendungsfällen sehr spezifisch.

Grundsätzlich können Sie mit diesem Dienstprogramm JavaScript verwenden, um eine Farbpalette mit 2 bis 20 Farben basierend auf einem bestimmten Bild zu erstellen.

Dies wird nicht auf jeder Website oder App verwendet, aber es ist eine gute Idee, die es anscheinend schon eine Weile gibt und die im letzten Jahr aktualisiert wurde.

Mit der einfachen API können Sie eine Palette mit einer einzigen Zeile aus dem Bild ziehen:

let myPalette = colorThief.getPalette (img, 10);

Von dort aus müssen Sie nur noch das zurückgegebene Array manipulieren. Unten sehen Sie eine Demo, die ich in CodePen erstellt habe und die eine vom Benutzer eingegebene Anzahl von Farben aus dem gezeigten Bild erfasst. Der Code, den ich für das Array verwende, lautet:

myPalette.forEach (
Element => colours.innerHTML + = ""
);

Ich erstelle die Palette mit Elementen und Inline-Stilen. Die Farben werden als RGB-Werte zurückgegeben.

In der CodePen-Demo verwende ich eine Problemumgehung, um die Ursprungsprobleme zu umgehen, auf die ich bei CodePen gestoßen bin. Normalerweise benötigen Sie diese Zeilen (kommentiert) jedoch nicht in einer üblichen Umgebung.

RegexGuide

Front-End-Tools: RegexGuide

Es scheint, als würde ich jedes Jahr eine coole interaktive App finden, die ich zu meiner Sammlung von Front-End-Tools hinzufügen kann, mit deren Hilfe reguläre Ausdrücke erstellt werden können. Hier also der diesjährige Eintrag. Und wenn du wie ich bist, wirst du alle Hilfe nehmen, die du bekommen kannst, um diese zu bauen.

Dieser ist etwas seltsam, um zuerst den Kopf herumzukriegen, weil er wie ein Zauberer die Schritte nacheinander durchläuft.

Wenn Sie fertig sind und alle Bedingungen erfüllt sind, können Sie verschiedene Werte ausprobieren, um die angegebenen Bedingungen zu erfüllen. Auf der Seite wird interaktiv angezeigt, was funktioniert.

Diese Art von Tools gehören immer zu meinen Favoriten, da sie nicht nur dazu dienen, Code zu erstellen, der sonst langwierig wäre, sondern Ihnen auch beim Erlernen der Syntax helfen.

Front-End-Tools: Lobende Erwähnungen

Dies sind meiner Meinung nach einige der interessanteren Front-End-Tools, die meiner Meinung nach im letzten Jahr nicht genügend Beachtung gefunden haben. Ich bin mir sicher, dass Sie Ihre eigenen Funde haben. Sie können sie also gerne in den Kommentaren unten ablegen. In der Zwischenzeit ist hier eine endgültige Liste von Dingen, die nicht ganz in die Hauptliste aufgenommen wurden, aber ich dachte, sie wären erwähnenswert:

  • wehatecaptchas – Eine Captcha-Alternative ohne Bild- oder Buchstaben- / Zahlenentschlüsselung, nicht einmal mit einem Kontrollkästchen "Bestätige, dass ich kein Roboter bin"
  • simpleParallax – Eine einfache Möglichkeit, Parallaxeeffekte mit JavaScript zu erzielen.
  • Lite YouTube einbetten – Anscheinend 224X schneller als der herkömmliche Einbettungscode.
  • Browser-Standardstile – Geben Sie ein beliebiges HTML-Element ein. Dieses Tool informiert Sie über das Standard-CSS jedes Browsers für dieses Element.
  • Wer kann verwenden – Geben Sie eine zweifarbige Kombination ein und dieses Tool zeigt Ihnen, welche Arten von sehbehinderten Benutzern diese Kombination für Text / Hintergrund verwenden können.

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Layout und Präsentation von Karol K..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map