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

Juli ist der Monat, in dem es Sommer gibt. Daher haben wir für die neuen Ressourcen dieses Monats einige heiße neue Tools von einigen etablierten sowie neuen Entwicklern.

Die Liste bietet eine ziemlich interessante Mischung von Tools, die von der Sketch-Bibliothek der WordPress-Community reichen und die Erstellung eines Prototyps der WordPress-Benutzeroberfläche ermöglichen, eine Handvoll davon Werkzeuge, die React.js und Vue.js erweitern, und ein paar Referenzen, um Ihre Entwicklungsfähigkeiten zu verbessern. Lass uns sie überprüfen.

WPRIG

Ein von Morten Rand-Hendriksenand erstelltes All-in-One-Starter-WordPress-Design verfügt über ein Erstellen Sie Prozessvorgaben mit modernen Tools wie Gulp, Babel, ESLint und Visual Studio Code Integration. Damit können Sie ein großartiges WP-Thema erstellen, ohne die umliegenden Entwicklungstools konfigurieren zu müssen.

VueNative

Ein auf Vue.js basierendes Framework zum Erstellen einer plattformübergreifenden mobilen Anwendung, mit der Sie Ihren Code mit der Vue.js-Spezifikation schreiben können. Das Werkzeug wird kompilieren Sie es zum React Native und machen Sie die magische Arbeit hinter den Kulissen mit der vue-native CLI. Wenn Sie bereits mit Vue.js vertraut sind, könnte dies eine geeignetes Framework zum Erstellen einer mobilen Anwendung.

SketchPress

Die Leute bei 10up haben gerade SketchPress veröffentlicht Skizzenvorlage zum schnellen Erstellen von Mockups und Designs der WordPress-Verwaltungsschnittstelle. Es enthält viele gängige Admin-Benutzeroberflächen wie die Hauptschaltfläche, die Menüleiste, Dashicons, Metabox usw. SketchPress ist ein hervorragendes Werkzeug für WordPress-Entwickler, um die Einstellungen oder Optionen der Plugins und Designs mit der WordPress-Benutzeroberfläche auszurichten.

Docz

Docz ist ein Dokumentationsgenerator auf MDX-Basis die in der letzten Runde dieser Serie vorgestellt wurde. Mit diesem Tool können Sie eine benutzerdefinierte JSX-Komponente importieren und in die Mischung mit Markdown-Syntax integrieren, genau wie beim Schreiben eines JSX-Dokuments.

Animista

CSS-Animation erweckt das Web zum Leben. Es ist jedoch nicht immer einfach, CSS-Animationen unter Berücksichtigung der Browser-Präfixe hinsichtlich Kompatibilität, Parametern und des Animationszeitrahmens zu erstellen. Animasta macht dies einfacher, indem Sie den Code für Sie generieren. Sie können Konfigurieren Sie die Animation in einer benutzerfreundlichen Oberfläche, von der aus Sie den Code einfach kopieren können.

GridToFlex

Einige Beispiele für ein allgemeines Weblayout, das mit dem nativen CSS-Grid erstellt wurde und Flexbox als Fallback für einen Browser verwenden, der dies noch nicht unterstützt. Schauen Sie sich unseren Beitrag an: Einführung in das CSS-Rasterlayout-Modul.

RatioBuddy

Ein schönes Werkzeug Generiere eine Box mit CSS mit einem definierten Verhältnis, zum Beispiel, 1: 1, 3: 4, usw. Das Tool generiert den zu kopierenden Code im SCSS-Format.

Wie man GraphQL darstellt

GraphQL ist eine Alternative zur REST-Datenstruktur und How to GraphQL ist eine umfassende Ressource, um es zu lernen. Es ist weitaus effizienter als REST, da nur die angeforderten Daten abgerufen werden, wodurch Last und Datenübertragung verringert werden.

Beispielhistorie

Ein einfaches WordPress-Plugin, um den Verlauf der im WordPress-Dashboard durchgeführten Aktivitäten anzuzeigen. Es unterstützt native WordPress-Aktivitäten, z. B. wenn ein Benutzer Beiträge und Seiten erstellt, sich anmeldet und andere Plugins aktiviert oder deaktiviert. Es kann auch verfolgen Sie die Aktivitäten anderer Plugins einschließlich Advanced Custom Fields (ACF) und Benutzerumschaltung. Dies ist ein großartiges Plugin, um die internen Aktivitäten Ihrer Websites zu verfolgen.

Transfer.sh

es ist ein praktisches Hilfsprogramm zum Freigeben von Dateien über den Shell-Befehl. Sie können jeden Dateityp für bis zu 10 GB hochladen. Es unterstützt auch die Dateiverschlüsselung. Und habe ich schon erwähnt, dass es völlig kostenlos ist?

FB Sonar

Ein Tool zum Debuggen von mobilen Apps für iOS und Android. Die App ist mit einigen Tools für ein praktisches Debugging-Erlebnis B. einen Protokollbetrachter, einen interaktiven Layout-Inspector und einen Netzwerk-Inspector. Wenn dies nicht genug ist, können Sie ein Plugin erstellen, um die App mit der gewünschten Funktionalität zu erweitern.

JSUI

Diese App verfügt über eine Reihe von Tools, mit denen Sie Ihre Projekte besser organisieren können. Sie können Erstellen Sie eine Gruppe, erstellen Sie ein neues Projekt mit einigen beliebten Projekten Wie React, Vue und Angular installieren Sie eine Projektabhängigkeit, führen einen Node.js-Server aus und vieles mehr. Eine großartige App für alle, die Dutzende von Projekten verwalten.

BrainMonkey

Ein PHP-Testprogramm, das mit einigen speziellen Tools für WordPress entwickelt wurde. Es bietet Werkzeuge, die es ermöglichen spotten PHP-Funktionen. Es bietet auch eine Reihe von Tools, die sich mit einigen WordPress-Funktionen wie add_action remove_action um nur einige zu nennen, die im Allgemeinen sind knifflig zu testen.

Fraktal

Fractal wurde als zentrales Dokumentationstool für Entwickler innerhalb eines Teams konzipiert, wenn eine Komponente in ein Projekt integriert werden muss. Es erlaubt dir zu Code-Snippet integrieren, Vorschauen, Dokumentation, Notizen anzeigen, usw. jeder Komponente.

Ant Design Pro

“AntDesign” ist eines der populärsten UI-Frameworks, die auf React.js basieren “Profi” Version für Unternehmensanwendungen. Es enthält mehrere zusätzliche Komponenten, die nicht im üblichen AntDesign-Paket enthalten sind, z. B. AvatarList, HeaderSearch und TagSelect.

Der Rahmen hat auch integrierte Entwicklungstools wie das Build-Tool, die Test Suite und die Bereitstellung So können Sie sofort an Ihrem Code arbeiten, anstatt Zeit für die Workflow-Konfiguration zu verschwenden.

LuminJS

Ein super kleines JavaScript-Bibliothek zum Hervorheben von Text auf Ihrer Website. Es funktioniert nahtlos mit einer komplexen DOM-Struktur und ist programmierbar, indem Sie die Geschwindigkeit, das Styling und die Animation einstellen können.

Eingabeaufforderungen

Ein handliches NPM-Paket zum Erstellen einer interaktiven CLI mit Node.js. Es unterstützt grundlegende Aufforderungen, mehrere Auswahlmöglichkeiten, dynamische Aufforderungen und viele Arten von Eingaben wie Kennwort, Text, Nummer und E-Mail-Adresse.

Wahrnehmung

Ein cooles WordPress-Plugin wäre das Verbessern Sie die Suche in der WordPress-Medienbibliothek durch Klassifizieren von Bildern mithilfe der Google Cloud Vision-API. Zum Beispiel, wenn Sie eine hochgeladen haben “Vogel” Bild können Sie das Bild mit dem Schlüsselwort suchen “Vogel” ob das Schlüsselwort im Bildnamen, Dateinamen oder den Metadaten enthalten ist oder nicht.

DevTube

Eine Sammlung von Von Youtube abgerufene Videos von mehreren Entwicklerkonferenzen wie JSConf, Google TechTalk und O'Reilly. Holen Sie sich jetzt Ihr Popcorn und verbessern Sie Ihre Dev-Fähigkeiten.

Reaktiv.wie

Die reaktive Programmierung ist auf dem Vormarsch; Ein neues Paradigma bei der Programmierung, insbesondere im Web, wo der Datenstrom reichlich ist und alle Millisekunden kontinuierlich fließt. Diese Ressource ist eine Initiative von Cèdric Soulas lehre dich die Prinzipien von reaktiv Programmierung.