de.hideout-lastation.com
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 .
Beste Ressourcen zum Skizzieren von Gitter-basierten Drahtbildern
Der Prozess der Gestaltung einer Schnittstelle beginnt immer mit der Ideengenerierung . Dies umfasst die Visualisierung, die Recherche auf anderen Websites und Rapid Prototyping. Diese frühe Ideenphase ist entscheidend für das Verständnis des Layouts und der Benutzererfahrung, die Sie erstellen möchten. Wi
Googles neuer reCAPTCHA ist jetzt unsichtbar
Viele von Ihnen kennen sich mit reCAPTCHA aus, dem System, das Online-Bots aussortiert, indem es Benutzer anweist, ein Kontrollkästchen anzukreuzen, um den Benutzer als menschlich zu verifizieren. Nun, dieses System bekommt bald ein Upgrade, da Google reCAPTCHA unsichtbar machen will .Mit diesem unsichtbaren reCAPTCHA-System wird Google mithilfe von maschinellem Lernen und fortgeschrittener Risikoanalyse feststellen, ob die Person, die die Website besucht, ein Mensch oder ein Bot ist.
