5 Neueste Web-Entwicklungstools, die Sie kennen sollten

Wenn Sie unsere monatliche Postserie zu Fresh Resources für Designer und Entwickler verfolgen, können Sie sehen, dass jeden Monat zahlreiche neue Tools eingeführt werden. Die Liste ist wahrscheinlich unendlich. Als ich 2008 anfing, HTML und CSS zu lernen, gab es die meisten dieser Tools noch nicht.

Heute wächst das Web exponentiell. Es wird auch komplexer als je zuvor. Wir brauchen mehr Tools, die helfen können, die Website-Entwicklung etwas zu steigern. Also, in diesem Post haben wir eine Reihe von trendigen Tools zusammengestellt, die bei der Webentwicklung helfen werden .

Hoffentlich können diese Listen Ihnen helfen, die richtigen Webentwicklungswerkzeuge einzuführen, besonders für diejenigen von Ihnen, die gerade erst anfangen.

1. CSS Pre-Prozessoren

CSS ist sehr einfach zu schreiben. Die Syntax ist einfach und leicht zu verstehen. Aber wenn Ihr Projekt größer wird, müssen Sie möglicherweise mehrere Stylesheets verwalten, um Tausende von CSS-Zeilen zu verwalten. Wenn Sie CSS kennen, wissen Sie, dass es in dieser Situation sehr schwierig wird, es zu verwalten.

Hier werden CSS Pre-Prozessoren wirklich nützlich. Wir haben in der Vergangenheit schon einige Male CSS-Präprozessoren behandelt, daher bin ich mir sicher, dass Sie mit diesen bereits vertraut sind. Für diejenigen, die neu sind, erlaubt es uns der CSS- Preprozessor, Programmiersprachen mit Variablen und Funktionen zu schreiben, die dann in browserkonformes CSS-Format übersetzt werden . Wir können CSS-Eigenschaften auch mit speziellen Regeln wie @extend und @include .

Es gibt eine Reihe von CSS Pre-Prozessoren: SASS, LESS, Stylus und Mythos.

2. Vorlagen-Engine

Das Erstellen einer statischen HTML-Seite ist einfach. Wenn Sie jedoch mehrere HTML-Seiten in Ihrem Projekt verwalten müssen, können die Dinge außer Kontrolle geraten. Die meisten dieser Seiten können dieselben Komponenten wie Header, Sidebar und Fußzeile verwenden.

Wenn Sie etwas in der Seitenleiste ändern, sollten Sie es für die Seitenleiste auf den anderen Seiten einzeln ändern oder stattdessen eine Template Engine verwenden?

Die Verwendung einer Template Engine klingt für diese Situation besser. Es gibt jetzt eine Reihe von Vorlagen-Engines, die wir verwenden können, wie Kit, Jade und Lenker. Jeder hat seine eigenen Schreibkonventionen. Kit zum Beispiel kommt nur mit Variablen und Import-Fähigkeit, die wie ein einfaches HTML-Kommentar-Tag deklariert werden.

 // Beispiel für das Importieren einer separaten Vorlage  // Dies ist eine Variable 

Jade und Lenker sind mit vielen robusten Funktionen ausgestattet, um komplexere Projekte zu ermöglichen. Wir werden sie in einem separaten Beitrag genauer besprechen (bleiben Sie dran!). Wenn Sie eine skalierbare statische Website erstellen möchten, sollten Sie die Vorteile einer Template Engine nutzen .

3. Task Runner

Der Prozess zum Erstellen einer Website ist sehr repetitiv. Veredelung, Kompilierung, Unit Testing, Linting, Verkettung von Dateien und Browser Refreshing, um nur einige zu nennen, sind die Dinge, die wir sehr oft in Projekten tun würden. Zum Glück können sie mit einem Task Runner wie Grunt und Gulp automatisiert werden.

Sie können Grunt Gruntfile.js eine Reihe von Aufgaben auszuführen, die in Gruntfile.js angegeben Gruntfile.js . Es gibt jetzt eine Menge Plugins, um fast alles mit Grunt zu automatisieren, also musst du nicht deine eigenen Grunt-Aufgaben schreiben.

Wenn Sie beispielsweise Ihre LESS-Datei in CSS kompilieren möchten, können Sie grunt-contrib-less installieren. In unserem vorherigen Post haben wir auch Grunt verwendet, um unnötige Module in jQuery zu entfernen.

Wenn Ihr Projekt Sie ermüdet, ist es an der Zeit, einen Task Runner einzusetzen, um Ihren Workflow zu optimieren.

4. Synchronisiertes Testwerkzeug

Hier ist ein unvermeidliches Tool, wenn Sie eine für Mobilgeräte optimierte Website erstellen. Wenn Sie viele Geräte zum Testen Ihrer Website haben, benötigen Sie unbedingt Synchronisiertes Testen, mit dem Sie Ihre Website gleichzeitig auf mehreren Geräten testen können.

Das erneute Laden des Browsers sowie die Interaktionen wie Klicken und Scrollen werden auf allen getesteten Geräten gleichzeitig wiedergegeben und ersparen sich so wiederholende Aktionen.

Es gibt zwei Tools, die Sie ausprobieren können: Ein Grunt-Plugin namens BrowserSync und eine GUI-Anwendung namens Ghostlab.

5. Entwicklungs-Toolkit

Development Toolkit stellt eine Reihe von Tools in einer Anwendung zusammen. Wenn Sie mit der textbasierten Einstellung in Grunt nicht vertraut sind, wäre eine GUI-Anwendung wahrscheinlich ein besseres Werkzeug für Sie.

Codekit ist Vorreiter für diese Art von Anwendungen und umfasst LESS, Sass, Kit, Jade, Siml, Uglify, Bower und vieles mehr auf seiner Feature-Liste.

Codekit ist eine OS X-only App. Wenn Sie Windows verwenden, können Sie Prepros ausprobieren, wenn Sie Linux verwenden, gibt es Koala-App .

Screencasts mit Scrimba anzeigen und teilen

Kostenlose YouTube-Videos bieten viele Tutorials zur Webentwicklung für Anfänger. Aber Screencasts sind noch populärer geworden, da Sie ein Snippet oder eine Funktion, die Sie entwickelt haben, schnell aufzeichnen und veröffentlichen können.Die kostenlose App Scrimba ist eine brandneue Möglichkeit, Ihre Code-Snippets freizugeben und Beispiele zu finden, die von anderen aufgenommen wurden .Diese

(Tech- und Design-Tipps)

10 besten Mobile App Suchmaschinen

Wenn Sie ein iOS-Benutzer sind, verwenden Sie fast sicher den App Store, um die App zu finden, die Sie auf Ihrem Telefon installieren möchten. Die Suchfunktionen für den App Store sind jedoch weit davon entfernt, leistungsstark zu sein. Es hilft Ihnen nicht, Alternativen zu den Apps zu finden, die Sie normalerweise erhalten.

(Tech- und Design-Tipps)