Neue Ressourcen für Webdesigner und -entwickler (Februar 2018)

Nachdem ich diese Serie seit Jahren behandelt habe, habe ich gesehen, wie Werkzeuge kommen und gehen. EIN Fast jede Woche werden einige neue Tools veröffentlicht. In den letzten Wochen glaube ich jedoch, dass es etwas langsamer wird. Ich habe etwas länger als sonst gebraucht Suchen Sie nach Github und anderen Quellen, um nach neuen Tools zu suchen Das sind kostenlos, Open Source und erwähnenswert für diese Serie.

Im heutigen Beitrag habe ich eine Mischung aus Tools aus einem JavaScript-Framework, Test-Tools und ein paar für die Entwicklung von WordPress-Sites. Lass uns sie überprüfen.

Kutt

Ein Anwendung, die URLs mit Ihrem eigenen Domainnamen verkürzt. Es basiert auf modernen Stacks wie Node.js, React und Redux mit einer Handvoll Integrierte Funktionen, einschließlich kennwortgeschützter URL, RESTful-API, und detaillierte Statistiken zur Überwachung Ihrer URLs. Das Beste ist, es ist kostenlos und Sie können es auf Ihrem eigenen Server hosten.

WordHat

WordHat ist ein Tool zur Integration von Behat in WordPress. Behat ist ein BDD-Framework (Open Source) für Behavior-Driven Development (PHP), in dem Sie Ihre PHP-Anwendung auf ausdrucksstärkere Weise testen können.

Dieses Tool ist äußerst nützlich, da das WordPress-Theme und das Plugin mit Funktionen komplizierter werden. WordHat und Behat stellen sicher, dass sich Ihr Theme oder Plugin wie erwartet verhält wenn der Benutzer damit interagiert.

WP Browser

Ähnlich wie bei WordHat ist WP-Browser eine Erweiterung der Codeception speziell für WordPress-Anwendungen, Designs und Plugins entwickelt. Codeception ist ein Werkzeug, das ausgeführt werden muss testen in Ihrer Anwendung ähnlich wie PHPUnit und Behat, aber es enthält mehr. Das können Sie tun Browsertests, BDD, Unit-Integrationstests und API-Tests.

Node WP Internationalisierung

Der Name spricht für sich. Es ist ein NodeJS-Modul, mit dem Sie viele Dinge automatisieren können, um Ihre Designs oder Plugins zu internationalisieren. Installieren Sie das Modul und geben Sie den Typ ein wpi18n makepot um die POT-Datei zu erzeugen aus dem übersetzbaren Text in Ihren WordPress-Plugins oder Designs.

Vielen Dank

Ein weiteres NodeJS-Modul, das kürzlich auf Github angesiedelt ist. “Vielen Dank” werden Generieren Sie eine Liste von Betreuern von Paketen, die in Ihrem Open-Source-Projekt verwendet werden und verknüpfen Sie es mit ihrer Spenden- oder OpenCollective-Seite als Zeichen der Dankbarkeit ihres Beitrags für die Community.

Guten Block erstellen

Gutenberg ist zu hören und wird mit WordPress 5.0 ausgeliefert. Das ist ein NPM-Modul zur Erzeugung einer Gutenberg-Blockentwicklungskesselplatte mit modernen Stack wie React, Webpack, Babel und Sass. Führen Sie einfach die Befehlszeile aus ,Create-guten-Block, und du bist fertig.

WP Vue

WP Vue ist ein Vorlage, die mit Vue erstellt wurde, um WordPress-Beiträge anzuzeigen. Diese Vorlage ist ein guter Ausgangspunkt, wenn Sie Ihre WordPress-Site erstellen möchten kopflos. Sehen Sie auf der Demo-Seite nach, wie es funktioniert. Ändern Sie die URL des Endpunkts der WP-API-URL von einer beliebigen WordPress-Site; Die Beiträge werden automatisch mit den Beiträgen der neuen Endpunkt-URL aufgefüllt.

Stimulus

EIN neues JavaScript-Framework von Basecamp. Im Gegensatz zu React oder Vue müssen Sie nicht die gesamte Anwendung mit JavaScript schreiben oder synthetische Attribute hinzufügen.

StimulusJS arbeitet in einem einfachen HTML-Code, den wir bereits mit kennen Daten- Attribute. Es erfordert auch keine komplexe Build-Konfiguration. Sie können Fügen Sie das Skript einfach wie auf jQuery auf der Webseite hinzu und das ist es - beginnen Sie mit dem Schreiben des Skripts und machen Sie Ihre Anwendung lebendig.

Manta

EIN kostenlose Anwendung zum Erstellen und Verwalten von Rechnungen. Sie können eine Notiz hinzufügen, eine Währung festlegen, einen Rabatt anwenden und eine Liste mit Kunden oder Kunden hinzufügen, Fügen Sie Ihr Logo hinzu, gestalten Sie die Rechnungsvorlage und laden Sie sie in einem PDF-Format herunter. Es ist für Mac OS, Windows und Linux verfügbar. Wenn Sie ein Freelancer sind, könnte dies die Rechnungsstellung sein, nach der Sie gesucht haben, um Ihr freiberufliches Unternehmen zu führen.

Statisch reagieren

Wie der Name schon sagt, ist dies ein Werkzeug, mit dem Sie das tun können Erzeugen Sie mit React eine statische Site. Es wird mit allen vorkonfigurierten Tools geliefert, sodass Sie mit der Erstellung von Inhalten für das Web beginnen können. Und da Sie eine statische Site sind, können Sie Hosten Sie die Site sogar in einem Shared Hosting mit geringen Ressourcen.

Piklist

Piklist ist eine Entwicklung, die WordPress ermöglicht das Erstellen eines komplexen Website-Setups mit WordPress mit weniger Code. Es verfügt über eine Reihe von Hilfsfunktionen und Hooks, um fast alle Teile in WordPress zu erweitern, wie beispielsweise die Einstellungsseite, Benutzerdefinierte Felder, Administratorbenachrichtigungen, Shortcode, Widgets, Taxonomien, Benutzer, und vieles mehr.

Strapi

EIN inhaltsunabhängiges CMS-Framework zum Erstellen einer Inhalts-API. Sie können Ihre eigene Inhaltsstruktur und die API entwerfen und verfügen über ein schönes Admin-Bedienfeld, um diese zu verwalten. Es bietet jedoch kein integriertes Vorlagen-System. Es bietet Ihnen die Möglichkeit, eine beliebige Front-End-Bibliothek Ihrer Wahl auszuwählen wie React oder Vue.

PaketJS

ParcelJS ist ein Bündler Ähnlich wie Webpack und Browserify, nur dass es schneller läuft und keine Konfiguration erfordert. Es unterstützt gängige Entwicklungspakete für HTML, JS, CSS und Transformatoren wie PostCSS und Babel out-of-the-xbox. Sie können sich also einfach auf Ihren Code konzentrieren, anstatt Zeit für die Konfiguration zu verschwenden.

GoodShare

Eine JavaScript-Bibliothek zu Schaltfläche "Social Media" mit der Anteilsanzahl für ein paar Social Media anzeigen. Es unterstützt viele soziale Medien, einschließlich solcher, von denen Sie noch nie gehört haben, wie Vkontakte, Odnoklassniki, SurfingBird und auch einige wenige Messenger-Plattformen wie Skype, WhatsApp und LINE. GoodShare ist auch als Vue-Komponente verfügbar.

CopyChar

Eine Website, auf die Sie zugreifen können Sonderzeichen finden und in die Zwischenablage kopieren. Buchstaben, Interpunktionen, Mathematik, Pfeile und Emoji sind einige der Charaktere, die auf der Website enthalten sind. Einfach Klicken oder tippen Sie auf ein Zeichen, um es in Ihre Zwischenablage zu kopieren.

Nerven

Nerv ist ein anderer reaktive VirtualDOM-Bibliothek; eine Alternative zu ReactJS. Es bringt die vertraute Syntax JSX von React mit sich, jedoch mit einigen bemerkenswerten Unterschieden. Nerv unterstützt Internet Explorer 8! und es ist nur ein Drittel der Größe von React. Immer noch, Nerv ist kompatibel mit den React-Add-Ons der komplexesten.

HyperappJS

Eine weitere JavaScript-Bibliothek, die es wert ist, eine Webanwendung zu erstellen. Es kombiniert die Statusverwaltung mit einer virtuellen DOM-Engine unterstützt Schlüsselaktualisierungen und Lebenszyklusereignisse ohne Abhängigkeiten.

VulcanJS

Vulcan ist ein Stapel von Tools zum Erstellen einer modernen Webanwendung. Es ist mit React, GraphQL und Meteor vorkonfektioniert. Da es sich um ein Full-Stack-Framework handelt, das eine ganze Reihe von Hilfskomponenten bereitstellt Fein abgestimmt auf das Backend und das Frontend ist alles einfach einsatzbereit. So können Sie Ihre App schnell zum Laufen bringen.

Koa11y

Eine Desktop-Anwendung für Windows, Mac OS und Linux, um Probleme mit der Zugänglichkeit auf der Website zu untersuchen. Koa11y gibt Hinweise und Warnungen aus, ob Ihre Website die Barrierefreiheitsstandards verletzt.

Dies sollte ein Werkzeug in jeder Webentwickler-Toolbox sein. Navigieren Sie einen Tag lang mit der Tastatur über Ihre Tastatur, um zu verstehen, wie wichtig die Barrierefreiheit ist.

TablePlus

Wirklich schön aussehende GUI-Anwendung zur Verwaltung der Datenbank. TablePlus unterstützt eine Vielzahl von Datenbank-Engines, darunter natürlich MySQL, SQLite, Redis, Postgres, MS SQL und vieles mehr. TablePlus ist für MacOS und Windows verfügbar.