Neue Ressourcen für Webdesigner und -entwickler (März 2019)

In der Welt der Webentwicklung ist in den letzten Monaten viel passiert. Erstens das Neue Block-basierter Editor, Codename Gutenberg, wurde schließlich in WordPress 5.0 zusammengeführt. Es ist eine wirklich große Änderung seit seiner Gründung, da damit eine neue Grundlage für WordPress geschaffen wird, die sich in der Zukunft weiterentwickeln wird, und die Art und Weise, wie Entwickler WordPress-Funktionen nutzen, verändert wird.

Zweitens haben einige unserer Entwickler einige wirklich nützliche Tools entwickelt, darunter auch eines, das es erlaubt JSON im Terminal anzeigen und ein paar React-Bibliotheken, die eine große Hilfe bei Webdesign- und Entwicklungsprojekten darstellen können.

Und schließlich einige der effektivsten Ressourcen, Referenzen und Plugins wurden gestartet, um Sie bei der Aktualisierung Ihrer Projekte an die neueren Trends zu unterstützen.

Lassen Sie uns auf die umfassendste Liste neuer Webentwicklungsressourcen eingehen.

Gutenberg-Handbuch

Das offizielle WordPress-Handbuch, in dem Sie Referenzen für das Design nachschlagen können, Codebeispiele zum Erstellen von Blöcken und andere und einen Leitfaden, um zum Projekt beizutragen. Es ist Ihre erste Referenz für die Entwicklung mit Gutenberg.

Block Gerüst

Mit dem blockbasierten Editor bietet WP-CLI jetzt eine komfortable Möglichkeit, um damit anzufangen Erstellen eines Gutenberg-Blocks mit einem neuen CLI-Befehl, wp gerüstblock. Sie können es erstellen und in Ihre vorhandenen Plugins und Designs einfügen.

CGB

Eine andere Möglichkeit, einen Gutenberg-Block einfach zu starten, ist Create Guten Block (CGB) Erzeugen Sie eine Heizplatte einen Gutenberg-Block entwickeln. Es besteht aus modernen Tools wie React.js, Webpack, ESLint, Babel usw. Das Beste ist, dass Sie Sie müssen keines dieser Tools konfigurieren Sie können sich also einfach auf das Schreiben Ihres Codes konzentrieren.

Elementor-Blöcke für Gutenberg

Ein WordPress-Plugin, das es Ihnen ermöglicht Fügen Sie beliebige Elementor-Vorlagen ein und zeigen Sie es direkt im Editor an. Das Plugin bietet zahlreiche weitere Kompatibilitäten nahtlose Bearbeitungserfahrung zwischen Elementor und Gutenberg. Sehen Sie sich dieses Video an, um zu sehen, wie es in Aktion funktioniert.

Atomblöcke

Eine Reihe von Gutenberg-Blöcken mit einer wachsenden Anzahl von Sammlungen. Zum Zeitpunkt dieses Schreibens liefert es die “Post-Rasterblock” was erlaubt es dir Fügen Sie eine Liste der Beiträge Ihrer Website in einem Rasterlayout hinzu. Es gibt auch ein “Zeugnisblock” die, wie der Name schon sagt, ein Testimonial in die Seite einfügt. Schauen Sie sich die vollständige Vorschau der Blöcke auf dieser Seite an.

Galerie blockieren

Block Gallery ist ein auffälliger Block zum Einfügen Ihrer Bildergalerie und bietet eine nahtlose Erfahrung, um Bilder zu Ihrem Post hinzuzufügen. Legen Sie einfach Ihre Bilder ab, gestalten Sie die Galeriedarstellung (Masonry-Stil, Karussell oder Vollbild) und alles ist fertig. Im Moment ist es einfach der beste Galerie-Block für WordPress.

CoBlocks

CoBlocks besteht aus einer Reihe von Blöcken desselben Autors, der die oben genannte Block Gallery entwickelt hat. CoBlocks besteht aus einer Reihe von Blöcken, mit denen der Inhalt Ihrer Website erweitert wird Akkordeon, Preistabelle, Gif, Click-to-Tweet, und weitere Blöcke hinzugefügt werden.

StagBlocks

Eine weitere Suite von Gutenberg Blocks. Das Plugin enthält eine Reihe interessanter Blöcke, die viele von Ihnen schätzen würden. Sie enthält einen Stat-Block, mit dem Sie Statistiken in Ihren Posts und Seiten anpassen können. Website Card Block was wird Vorschau einer Website in einem schicken Kartenstil. Code Block, der den Code mit hervorgehobenen Farben rendert.

Otterblöcke

Auch eine Sammlung von Gutenberg-Blöcken wie der “Google Maps-Block” eine Karte einfügen, “Unser Serviceblock” zu Einfügen einer Liste von Diensten mit einer Schaltfläche in einer Rasteransicht, und “Referenzen Area Block” um eine Liste von Referenzen einzufügen. Otter Block ist eine Sammlung von Gutenberg-Blöcken, die Unternehmen und Themenentwickler zu schätzen wissen.

Fortgeschrittene Gutenberg-Blöcke

Dieses Plugin enthält eine Handvoll erweiterte Blöcke zur Anreicherung Ihrer Inhalte wie das automatisch generierte Inhaltsverzeichnis, “Giphy-Blöcke” GIF-Bild von Giphy.com einschließen, “Block abbrechen” Bilder von Unsplash.com einfügen, “Banner-Werbeblock”, WooCommerce “Add-to-Cart-Tastenblock”, und vieles mehr.

Block Lab

Block Lab macht es Entwicklern leicht, einen Gutenberg-Block zu erstellen. Das Plugin ermöglicht es Ihnen Registrieren Sie einen neuen Block mit einer benutzerfreundlichen Benutzeroberfläche und Vorlagen in PHP. Sie müssen nicht einmal React.js lernen.

EDD-Blöcke

Ein Plugin, mit dem Sie Easy Digital Downloads-Produkte im Gutenberg-Editor rendern können. Im Gegensatz zur Verwendung des Kurzcodes werden im Produktblock Ansichten angezeigt.

Testen Sie Gutenberg

Sie sind nicht bereit, Gutenberg-Plugin zu installieren oder Ihre Website auf WordPress 5.0 zu aktualisieren? Das kannst du einfach Laden Sie diese Seite, um den neuen Editor auszuprobieren.

Gutenberg-Wolke

Es ist wie ein AppStore für Gutenberg Blocks. Ein zentraler Ort, an den Sie gelangen können Gutenberg-Blöcke, die in WordPress und Drupal verwendet werden können. Ja, Drupal wird auch den Gutenberg-Editor für ihren Editor übernehmen.

Gutenberg-Beispiele

Ein Github-Repository mit Codebeispielen zum Erstellen von Gutenberg-Blöcken. Hier finden Sie die einfachster Block zu einem komplexeren Beispiel, wie der eine zu erstellen “Rezeptblock” Dadurch wird im Editor eine Vorlage für die Benutzer festgelegt Rezept Inhalt. Eine gute Referenz für diejenigen, die lieber von echten Beispielen als von einem Lehrbuch lernen.

GutenbergJS

Die JavaScript-Version von Gutenberg. Es ist als NPM-Paket erhältlich, mit dem Sie Gutenberg in Ihre JavaScript-Anwendung integrieren können.

Deaktivieren Sie Gutenberg

Gutenberg bringt zwar neue Möglichkeiten in WordPress, aber nicht jeder ist dafür bereit. Wenn Ihre bestehenden Sites nicht gut mit Gutenberg zusammenarbeiten, können Sie dieses Plugin installieren. Es erlaubt dir zu Deaktivieren Sie den Gutenberg-Editor für bestimmte Beiträge, Beitragstypen, Benutzerrollen, Themen sowie Deaktivieren der Gutenberg-Stylesheets im Frontend.

Klassischer Editor

Alternativ können Sie dieses Plugin installieren, sodass Sie weiterhin auf WordPress 5.0 aktualisiert werden können, während Sie den alten klassischen Editor verwenden. Dieses Plugin wird bis 2022 unterstützt.

ClassicPress

Eine andere Alternative ist der Wechsel zu einer WordPress-Gabel, ClassicPress. ClassicPress konzentriert sich auf Unternehmen, Stabilität und Sicherheit. Es ist mit WordPress-Plugins kompatibel, und es ist geplant, neue interessante Funktionen in zukünftigen Versionen zu veröffentlichen. Schauen Sie sich unseren Beitrag an: ClassicPress: Alternative zu WordPress ohne Gutenberg & React.js

WordPress beschleunigen

Da WordPress so groß geworden ist; mehr als nur eine Blogging-Plattform. Vor allem Gutenberg hat Ihrer Website einige zusätzliche Belastungen, Codes und Dateien hinzugefügt, die Ihre Website verlangsamen können. Dies ist ein Detail, auf das Sie sich beziehen können, um die Schmerzpunkte auf Ihrer Website zu ermitteln und die neuesten Best Practices der Branche anzugehen.

Visual Studio Code Browser-Vorschau

Ein Visual Code-Editor, der in Visual Studio Code einen echten Browser mit Chrome Headless hinzufügt. Dies ermöglicht es Ihnen Vorschau Ihrer Arbeit in Echtzeit direkt im Code-Editor und ermöglicht Funktionen wie In-Editor-Debugging.

Bundlesize

Bundlesize ist ein Werkzeug dafür Behalten Sie Ihre JavaScript-Datei Bündelung Größe in Schach. Sie können die maximale Größe für jede der gebündelten Dateien definieren. Sie wird benachrichtigt, wenn die definierte maximale Größe überschritten wird. Bundlesize kann in einen CI-Service wie TravisCI und CircleCI integriert werden, um den Workflow in Ihrem Projekt nahtlos zu implementieren.

WP Emerge

Ein modernes WordPress-Theme-Framework basierend auf dem MVC-Muster. Wenn Sie es gewohnt sind, mit einem PHP-Framework wie Laravel und Slim zu arbeiten, werden Sie dieses Framework sicherlich schätzen. Sie können Dinge wie Router und Controller, DI-Container und Middlerware verwenden.

Leuchtturm Bot

Ein Hilfsprogramm, mit dem Sie Lighthouse mit Docker in einem CI-Dienst ausführen können. Es ist ein großartiges Werkzeug dafür Automatisieren Sie die Überprüfung Ihrer Website Jedes Mal, wenn Sie eine neue Änderung Ihres Website-Codes vornehmen.

Lernen Sie React App

Learn React App ist eine Ressource, um React.js zu lernen. Im Gegensatz zu den anderen Ressourcen sollte dies jedoch der Fall sein lokal auf Ihrem Computer installiert. Es enthält nicht nur Lernmaterialien, sondern auch Code und interaktive Beispiele. Das Beste daran ist, dass Sie es nach der Installation offline ausführen können.

WP-Akzeptanz

WP Acceptance ist ein neues Tool, mit dem Sie Abnahmetests durchführen können. Vereinfacht gesagt, Acceptance Tests ist eine Reihe von testet das Benutzerverhalten nach. Es gibt eine Reihe von Frameworks, um diese Art von Tests durchzuführen.

Wenn Sie jedoch hauptsächlich mit WordPress arbeiten, werden Sie dieses Tool für die Benutzerfreundlichkeit schätzen, da es auf die typischen WordPress-Projektanforderungen zugeschnitten ist.

Glänzend

Eine JavaScript-Bibliothek zu emulieren Sie Lichtreflexionen auf Ihrer Website, wenn Sie sie auf einem mobilen Gerät anzeigen. Sie können die Demo in https://pqina.nl/shiny/ anzeigen. Es ist erwähnenswert, dass es nur auf mobilen Geräten funktioniert, da es auf einer bestimmten API beruht, die nur auf mobilen Geräten verfügbar ist.

Reagieren Sie Lucid

ReactLucid ist ein Tool, das Ihnen helfen kann debuggen Sie React- und GraphQL-Anwendungen auf interaktivere Weise. Hiermit können Sie die Komponentenhierarchie, Status- / Requis-Änderungen in Ihrer React-Anwendung sowie das GraphQL-Schema, Abfragen und Mutationen in Echtzeit anzeigen.

CSS-Funktionen umschalten

Eine Chrome-Erweiterung, die es Ihnen ermöglicht Deaktivieren Sie bestimmte CSS-Funktionen in Chrome. Auf diese Weise können Sie sehen, wie Ihre Website gerendert wird, wenn bestimmte Funktionen nicht vorhanden sind. Sehr hilfreich, um neue CSS-Funktionen zu implementieren, die möglicherweise nicht in allen Browsern implementiert sind.

Blendy

Ein Werkzeug, das Ihnen helfen kann Anpassen der CSS-Hintergrundmischungsmodi an Ihr Bild. Sie können eine Vorschau der Mischmodi anzeigen, Farben ändern und Farbverläufe anwenden. Sie können Bilder von Unsplash verwenden oder vom Computer aus hochladen.

Reagiere Elementar

Eine Sammlung von React-Elementen, die sofort einsatzbereit sind. Kein externes CSS zum Importieren oder Anpassen von Konfigurationen zum Hinzufügen von Webpacks. Es enthält wichtige Komponenten wie Button, Checkbox, SelectList, Tabs, Tooltip und vieles mehr.

FX

Wenn Sie häufig mit JSON-Formaten zu tun haben, werden Sie dieses Tool sicherlich schätzen. fx ist ein Befehlszeilentool, mit dem Sie JSON-Daten in Terminal visualisieren können mit interaktivem Modus. so, dass Sie die Daten erweitern oder reduzieren können. fx kann über NPM oder Homebrew installiert werden.

Monica

Monica ist ziemlich auf eine eigene Kategorie eingestellt. Es ist eine Art CRM (Customer Relationship Manager), aber nicht für Ihren Kunden, sondern für Ihre Angehörigen wie Ihre Familie und Freunde.

Wie bei einem CRM können Sie mit ihnen den Überblick über Ihre Aktivitäten behalten, und wann Sie sie zuletzt angerufen haben usw. Darüber hinaus können Sie festlegen, dass Sie jemanden anrufen möchten, mit dem Sie schon länger nicht gesprochen haben. Sie nennen es PRM (Personal Relationship Manager).

Ionic Framework

Ionic Framework gibt es eigentlich schon eine Weile. In letzter Zeit hat es jedoch einen großen Sprung in seiner Funktionalität gemacht. Jetzt ist es nicht nur schneller, sondern auch Ionic kompatibel mit zwei aufsteigenden Stern-Frameworks: React.js und Vue.js.

Dies ist der Grundstein für Ionic Framework-agnostisches Werkzeug. Es funktioniert also nicht nur für bestimmte Frameworks, sondern kann auch mit den neuen arbeiten, wenn sich die Front-End-Entwicklung in der Zukunft entwickelt.

Bemerkenswert

Bemerkenswert ist eine Notizanwendung für Desktopanwendungen. Im Gegensatz zu anderen Apps gibt es keine proprietäre Formatierung, WYSIWYG oder andere typische Glocken. Das Der App-Editor wird hauptsächlich von Github-Markdown unterstützt. Notizen werden in einer flachen Datei gespeichert .md Dateien sowie den Anhang. Es funktioniert einfach und einfach.

TipTap

TipTap ist ein WYSIWYG-Editor, der auf ProseMirror mit Vue.js basiert. TipTap übernimmt nicht nur eine Reihe von Features von ProseMirror, sondern auch die großartige Markdown-Syntaxunterstützung. Außerdem enthält TipTap einige moderne Funktionen wie die Menüblase, in der das Formatierungsmenü beim Hervorheben von Text angezeigt wird, die Suggestion-Funktion, mit der Sie Tags markieren oder erwähnen können eine Person innerhalb des Inhalts und exportieren Sie die Möglichkeit, Inhalte in JSON-Formatierung zu exportieren.

Restplain

Restplain ist ein WordPress-Plugin, mit dem Sie auf einfache Weise eine Dokumentation der WordPress-REST-API-Endpunkte erstellen können, einschließlich der benutzerdefinierten Endpunkte auf Ihrer Website sowie einen API-Aufruf aus den Dokumenten heraus durchführen. Beachten Sie, dass das Endpunktschema zum Generieren der Dokumentation verwendet wird. Stellen Sie daher sicher, dass Sie ein geeignetes Schema für Ihre benutzerdefinierten Endpunkte hinzugefügt haben.

Content Loader reagieren

Content Loader reagieren ist eine benutzerdefinierte Reakt-Komponente, mit der Sie Inhaltsplatzhalter anzeigen können, während der tatsächliche Inhalt geladen wird. Es ähnelt dem Ladertyp, den Sie auf Facebook und Instagram sehen .

Mythisch

Mythic ist ein WordPress-Einstiegsthema mit modernen Best Practices wie Abhängigkeitseinspritzung, Ansichten und Steuerungen sowie modernen Werkzeugen wie der Verwendung von Webpack, Sass, Linting, PHP7 Mindestanforderung und BEM. Es ist ein großartiges Thema, um Ihre Fähigkeiten als Entwickler von Themen zu verbessern.

Github verfeinert

Eine Browsererweiterung, um Ihre Erfahrungen mit Github zu verfeinern. Es fügt mehrere praktische Hotkeys hinzu, verfeinert einige Layouts und Benutzeroberflächen, fügt automatisch einen Link zu Problemen und PRs hinzu und vieles mehr.

WC öffnen

Open WC ist eine Reihe von Tools, mit denen Sie eine benutzerdefinierte Webkomponente erstellen können. Es enthält die Hauptbibliothek zum Erstellen einer Webkomponente und Yeoman-Generatoren zum schnellen Generieren einer “WC öffnen” Projekt, das das Gerüst zum Testen enthält, fusseln, und setzt die Integration fort.

Offenes WC kann eine gute Alternative sein lieber mit einer nativen Web-Funktion implementieren anstatt ein Framework wie Vue.js oder React.js zu verwenden.

Gridsome

Gridsome ist ein Tool zum Erstellen statischer Websites und Webanwendungen mit Vue.js und GraphQL. Es ist in der Lage, mehrere Datenströme wie CMS wie WordPress und Drupal, eine lokale Datei wie Markdown oder Yaml oder eine externe API wie AirTable und Contentful zu verarbeiten. Dies ist eine wirklich großartige Alternative zu Gatsby.js, insbesondere wenn Vue.js gegenüber React.js bevorzugt wird.

Der Browser

Dies ist der Browser, wie er vom World Wide Web-Erfinder selbst, Tim Berners-Lee, vorgesehen ist. Es ist ein einfacher Browser zum Rendern von HTML und zeigt keine Adressleiste wie einen modernen Browser an. Sie können sie jedoch anzeigen, indem Sie zu navigieren Dokument> Aus vollständiger Dokumentenreferenz öffnen und fügen Sie eine URL ein und klicken Sie auf Öffnen. Und dort sehen Sie, wie Ihre Site mit dem ursprünglichen Browser dargestellt wird.

Raster

Raster ist ein modernes Raster-Framework, das mit modernen HTML- und CSS-Spezifikationen wie CSS-Grid, CSS Custom-Eigenschaft (Variable) und benutzerdefinierten Elementen erstellt wird. Ein perfekter Rahmen für diejenigen, die gerne an den Rändern leben.

Hooper

Eine Vue.js-Komponente zum Hinzufügen eines Karussells oder eines Schiebereglers. Es ist über Touch, Tastatur, Mausrad und andere Hilfsnavigation zugänglich und nutzbar. Es unterstützt RTL und vertikale Richtung, erweiterbar und natürlich Antwort.