Neue Ressourcen für Webdesigner und -entwickler (Juni 2015)

Können Sie glauben, dass diese Serie seit fast drei Jahren läuft? In dieser kurzen Zeit haben wir mindestens 30 Listen mit den neuesten Ressourcen für Webdesigner und -entwickler zusammengestellt. Und wir werden dies mit einer neuen Compilation für Juni fortsetzen.

In dieser Zusammenstellung werden wir uns ein paar JavaScript-Bibliotheken anschauen, um Schieberegler anzuzeigen, das Scrollen für Datentabellen zu verbessern, einen coolen Aufzugseffekt für eine Schaltfläche zum Scrollen nach oben und vieles mehr.

Lass uns sie überprüfen.

Mittlerer Stil Bestätigen

Medium wurde für sein Design gelobt; Das Layout und die Benutzeroberfläche scheinen gründlich durchdacht worden zu sein. Darüber hinaus werden Webentwickler dazu inspiriert, entweder JavaScript- oder CSS-Bibliotheken zu entwickeln, um die Benutzeroberfläche zu replizieren. Medium Style Confirm ist eine JavaScript-Bibliothek, die dem Popup- oder Dialogfeld in Medium ähnelt.

Pinguin

Penguin ist ein neues Front-End-Framework, das Sie als Grundlage für Ihre Websites verwenden können. Mit Tools wie Grunt und Sass können Sie leicht Bibliotheken oder CSS hinzufügen oder entfernen, die Sie nicht aus dem Framework benötigen, um es so leicht wie möglich zu machen. Es ist auch eine gute Alternative für Bootstrap und Foundation.

Elevator.js

Haben Sie diese Schaltfläche in einer Website gesehen, mit der Sie zum oberen Rand der Seite springen können? Die meisten Schaltflächen führen Sie einfach nach oben, aber mit Elevator.js erhalten Sie einen gleitenden Beschleunigungseffekt, der einem Aufzug, der Musik und dem Effekt ähnelt “Ding!” Sobald Sie die oberste Etage erreicht haben, ertönt der Ton. Wirklich nett!

X-Instagram

X-Instagram ist ein benutzerdefiniertes Element aus Polymer, das Bilder von Instagram per Tag abruft und zeigt. Dieses Element vereinfacht den gesamten Prozess. Wir fügen das Element einfach wie ein normales HTML-Element hinzu und geben das Tag-Schlüsselwort als Elementattribute an.

Und lass die Magie beginnen!

CamanJS

CamanJS ist eine großartige JavaScript-Bibliothek für die Bildmanipulation. Es kommt mit einem Funktionssatz, den Sie normalerweise in einem Bildeditor finden würden. Sie können die Unschärfe des Bildes schwarz oder weiß machen und sogar den Kontrast erhöhen.

ClusterizeJS

Clusterize.js ist eine JavaScript-Bibliothek, die die Leistung beim Umgang mit vielen Daten in Tabellen erhöht. Wenn Sie beispielsweise mit 5000 in einer Liste eine Tabelle nach unten scrollen, wird das Erlebnis normalerweise langsam und ruckartig. Diese JavaScript-Bibliotheken behandeln dieses Problem und sorgen für einen reibungslosen Ablauf der Bildlaufaktion.

Setz den Test

Setz den Test ist eine Sammlung von Fragen zur Bewertung Ihrer Fähigkeiten und Kenntnisse in CSS3, HTML5 und JavaScript. Jeder Test erhält eine Reihe von Fragen und eine begrenzte Zeit, um alle diese Fragen zu beantworten. Es ist eine gute Quelle, um herauszufinden, wie gut wir mit diesen Sprachen wirklich sind.

HTML-Pfeile

Dies ist eine Sammlung von speziellen nativen Unicode-Symbolen, die Sie in HTML und CSS einbetten können. Zu diesen Zeichen gehören Pfeile, Währung und Interpunktion. Sie werden feststellen, dass Sie manchmal kein Zeichensymbol benötigen, um diese Zeichen anzuzeigen.

Flickity

Flickity ist eine JavaScript-Bibliothek zum Anzeigen von Karussells, Galerien oder Schiebereglern auf Ihrer Website. Es ist für den Touchscreen optimiert. Sie können die Karussells mühelos mit dem Finger oder mit dem Trackpad verschieben, wenn Sie sich auf einem Laptop befinden. Es enthält auch eine Reihe von Optionen, die eine vollständige Anpassung auf beliebige Weise ermöglichen.

Typeslab

Typeslab ist ein praktisches Werkzeug, um ein Slab-Poster zu erstellen. Schreiben Sie einfach den Inhalt und wählen Sie die Schriftart aus. Typeslab generiert das Poster sofort. Sie können es dann herunterladen oder in Imgur veröffentlichen.

MatchMedia

Matchmedia ist eine Bibliothek, die CSS-Medienabfragen repliziert. Die Bibliothek ist nicht wirklich frisch, aber es ist eine wirklich nützliche Bibliothek, die ich auf die Liste gesetzt habe. Wenn Sie Skripte basierend auf der Größe des Ansichtsfensters des Benutzers oder des Medientyps ausführen müssen, ist dies die gewünschte Bibliothek.

Das folgende Beispiel zeigt ein Skript in einer Größe von 320px und darunter:

 if (matchMedia ('nur Bildschirm und (max. Breite: 320px)'). passt)  

Sass Burger

Sass Burger enthält ein Mixin, mit dem Sie eine “Hamburger” Symbol und verwandeln es in eine Kreuzmarke mit weniger Aufwand.

Marx

Marx ist eine Sammlung von CSS-Stilregeln, um die Elementstile einheitlicher zu gestalten. Es ist anpassbar (mit Sass), leicht und funktioniert sofort. Eine gute Alternative zu bereits bekannten CSS-Reset-Tools wie Normalize.css.

CSS.js

CSS.js wird verwendet, um CSS-Dateien für die Style-Deklaration zu parsen. Die Bibliothek wurde ursprünglich für das Team von Jotform verwendet, um eine WYSIWYG-Erfahrung für die Formularbearbeitung mit CSS aufzubauen. Jetzt haben sie es für alle zur Verfügung gestellt. Es lohnt sich zu sparen, falls Sie es später brauchen.