20 nützliche Tools für Webentwickler

Das Leben als Webentwickler mag viele Belohnungen bieten, aber wenn Projektmanager Sie bitten, in immer kürzerer Zeit mehr und mehr zu tun, kann dies frustrierend werden. Es ist also immer gut, Tools zu finden, mit denen Sie Ihre Arbeit schneller und produktiver gestalten können. Hier haben wir einige der nützlichsten zusammengestellt.

Wie lange dauert es, ein Comic zu machen?

Einige haben Sie schon gehört, andere werden Sie bereits verwenden, aber hoffentlich gibt es mindestens ein oder zwei, die Ihre Arbeitsbelastung erleichtern und Ihren Tag erhellen können ...

01. Browser Kalorien

Holen Sie sich das Seitengewicht von was auch immer Sie



Holen Sie sich das Seitengewicht von allem, was Sie sehen

In einer Zeit, in der mehr von uns mehr als je zuvor über eine flockige mobile Verbindung surfen, müssen wir als Designer und Entwickler unsere Seitengewichte im Auge behalten. Diese Browsererweiterung platziert ein Symbol neben der Adressleiste, mit dem Sie beim Klicken das Seitengewicht von allem anzeigen, was Sie sich ansehen, aufgeschlüsselt nach Ressourcen, wenn Sie möchten.

02. Visual Studio-Code

Visual Studio-Code

Visual Studio-Code

Ein kostenloser Open-Source-Code-Editor von Microsoft, der überall ausgeführt werden kann und viele intelligente Funktionen bietet, um das Codieren schneller und einfacher zu machen. Integrierte Git-Befehle, Debugger und vieles mehr.

03. Firebug

Das Firefox-Add-On Firebug ist ein Muss für Entwickler

Das Firefox-Add-On Firebug ist ein Muss für Entwickler

Von den Entwicklern von Firefox können Sie mit dem erstaunlich nützlichen Add-On Firebug HTML, JavaScript und CSS live im Browser debuggen, bearbeiten und überwachen. Als eines der besten Webentwicklungstools auf dem Markt ist dies ein Muss für jeden, der in der Webentwicklung arbeitet.

04. HTML-Entitätszeichensuche

HTML-Entitätszeichensuche

Mit der HTML-Entitätszeichensuche können Sie sicherstellen, dass alle Zeichen auf Ihrer Seite überprüft werden

Die Verwendung von HTML-Entitäten ist wichtig, um sicherzustellen, dass alle Zeichen auf Ihrer Seite überprüft werden. Um jedoch häufig den richtigen Entitätscode zu finden, müssen 250 Zeichenzeilen durchsucht werden. Es ist auch als Widget im Mac Dashboard verfügbar.

05. -prefix-frei

Präfixfrei

-prefix-free hilft Ihnen, sich von der Hölle der CSS-Präfixe zu befreien

Dieses coole Werkzeug von Lea Verou Mit dieser Option können Sie nicht festgelegte CSS-Eigenschaften verwenden. Es funktioniert im Wesentlichen hinter den Kulissen und fügt jedem CSS-Code nur dann das Präfix des aktuellen Browsers hinzu, wenn es benötigt wird.

06. Cloud9 IDE

Cloud9 IDE

Mit Cloud9 IDE können Entwickler auf der ganzen Welt denselben Code bearbeiten und gemeinsam chatten

Cloud9 IDE ist ein Tool, mit dem Sie bei großen Codeprojekten mit anderen zusammenarbeiten können. Entwickler auf der ganzen Welt können denselben Code bearbeiten und in Echtzeit miteinander chatten. Dies entwickelt sich schnell zu einer der besten browserbasierten IDEs. Zu den Funktionen gehören Code-Vervollständigung und -Editor, Drop-Document-Bäume, Smart Drag und FTP-Integration.

07. Stiftung

Foundation3

Foundation 6 macht es 'verrückt schnell', reaktionsschnelle Designs zu codieren, sagen die Hersteller von ZURB

Hergestellt von Entwicklern für Entwickler bei ZURB Dieses Prototyping-Tool dient als Vorlage für Ihre reaktionsschnellen Designprojekte. Die neueste Version ist eine einfache Rasterstruktur, die das Styling noch komfortabler und flexibler macht. Es funktioniert sowohl mit SASS als auch mit CSS.

08. Fontello

Fontello

Fontello bietet eine einfache Möglichkeit, Symbole in Webschriftform zu generieren

Dieser Icon-Generator ist wirklich einzigartig. Wählen Sie die gewünschten Symbole aus und Fontello kompiliert sie zu benutzerdefinierten Web-Schriftarten. Sie können auch die Symbolcodes und -namen bearbeiten und anpassen.

09. Cloud Comp

Cloud Comp

Teilen Sie Websites und Apps mit Cloud Comp

Mit diesem leichten und benutzerfreundlichen Tool können Sie Websites und Apps mit anderen teilen. Es wurde speziell entwickelt, um Designern und Entwicklern die Möglichkeit zu geben, ihren Kunden Comps in einer realistischen Geräte-Shell zu präsentieren.

10. BLOCK

BLOCK

BLOKK ersetzt Dummy-Text durch Blöcke

BLOKK ist eine unterhaltsame Schriftart für 'Kunden, die kein Latein verstehen'. Mit anderen Worten, es ersetzt den gesamten Text durch Blöcke, um stattdessen generischen Text vorzuschlagen. Auf diese Weise können Sie gut aussehende Modelle und Drahtmodelle erstellen, ohne die Leute mit Lorem Ipsem zu verwechseln.

elf. Basislager

Basislager

Basecamp ist das Projektmanagement der Wahl für einen Großteil der Webdesign-Branche

Basecamp wurde von 37signals entwickelt und ist ein beliebtes Online-Tool, mit dem Sie die Zusammenarbeit und das Projektmanagement problemlos verwalten können. Alles läuft in der Cloud und die meisten Leute, die im Bereich Webdesign und -entwicklung arbeiten, werden damit vertraut sein.

12. Browser-Aufnahmen

Browser-Aufnahmen

Browser Shots macht Screenshots Ihrer Websites in verschiedenen Browsern

Browser Shots generiert Screenshots, wie Websites in sechs häufig verwendeten Webbrowsern mit einer Auflösung von 800 x 600 und 1024 x 768 angezeigt werden. Geben Sie einfach die Webadresse ein, und eine Gruppe verteilter Computer greift darauf zu und öffnet sie. Laden Sie dann Screenshots der Site hoch, damit Sie sie auschecken können.

13. FavIcon Generator

FavIcon Generator

FavIcon Generator

Ein Favicon ('Favoriten-Symbol') ist ein kleines 16x16-Bild, das beim Aufrufen Ihrer Website in der Positionsleiste und im Lesezeichenmenü des Browsers angezeigt wird. Mit diesem Tool können Sie sie ganz einfach für Ihre Site erstellen.

14. Symbolleiste für Webentwickler

Symbolleiste für Webentwickler

Die Web Developer-Erweiterung erweitert den Browser um eine Reihe nützlicher Tools

Diese Firefox-Plug-In-Funktion bietet eine Reihe nützlicher Tools, die Webentwickler täglich verwenden. Dies ist besonders nützlich, wenn Sie Ihre HTTP-Header-Informationen überprüfen oder wenn Sie Ihre XHTML validieren müssen.

fünfzehn. Lastaufprall

Lastaufprall

Load Impact simuliert große Datenmengen, um die Leistung Ihrer Site zu testen

Eine erfolgreiche Website wird schneller und schneller geladen. Load Impact ist ein Cloud-basierter Dienst für Lasttests und Website-Optimierung, der durch Simulation von Benutzern eine Verkehrslast generiert. Mit anderen Worten, Sie können testen, wie Ihre Website, Web-App, mobile App oder API mit bis zu 1,2 Millionen gleichzeitigen Benutzern funktioniert.

16. Lorem Ipsum Generator

Lorem Ipsum Generator

Lorem Ipsum Generator macht genau das, was Sie erwarten

Wenn Sie von BLOKK nicht beeindruckt sind (siehe 10) und bei Lorem Ipsum bleiben möchten, enthält diese Referenzseite zu diesem Thema, die Informationen zu seinen Ursprüngen enthält, auch einen zufälligen Lorem Ipsum-Generator.

17. W3c Markup Validation Service

W3c Markup Validation Service

Der W3c Markup Validation Service überprüft Ihre Dokumente auf Übereinstimmung mit der entsprechenden Spezifikation

Die Validierung von Webdokumenten ist ein wichtiger Schritt, der erheblich zur Verbesserung und Sicherung ihrer Qualität beitragen kann. Mit diesem kostenlosen W3C-Dienst können Sie die Gültigkeit von Markups für verschiedene Webdokumente in HTML, SMIL, XHTML und MathML und mehr überprüfen.

18. Typetester

Typetester

Machen Sie mit Typetester eine Spritztour mit Schriftarten

Der Typetester ist ein Browser-Tool zum Vergleichen verschiedener Arten von Schriftarten. Wählen Sie die Schriftart aus, die Sie testen möchten, sowie die von Ihnen gewählte Größe, Verfolgung, Farbe usw., und Typetester wendet sie auf einen festgelegten Text an, damit Sie sehen können, was er wird aussehen wie.

19. Pingdom

Pingdom

Pingdom ist ein großartiges Tool zur Überwachung der Leistung Ihrer Website

Pingdom ist ein Dienst, der die Verfügbarkeit, Ausfallzeit und Leistung von Websites erfasst. Wenn Sie eine vollständige Seite in HTML hochladen, wird der Ladevorgang der gesamten Website nachgeahmt, wobei alle Elemente (nämlich JavaScript, RSS, CSS und Bilder) berücksichtigt werden. Auf diese Weise können Sie die Effizienz Ihrer Website überprüfen und überwachen.

zwanzig. CSS Sprite Generator

CSS Sprite Generator

Mit CSS Sprite Generator können Sie die Leistung Ihrer Website verbessern

Durch die Reduzierung der Anzahl von HTTP-Anforderungen zielt dieses Tool darauf ab, die Ladegeschwindigkeit Ihrer Website zu erhöhen. Bilder werden bei definierten X- und Y-Koorindaten zu einem größeren Bild kombiniert. Nachdem dieses generierte Bild relevanten Seitenelementen zugewiesen wurde, kann die CSS-Eigenschaft für die Hintergrundposition verwendet werden, um den sichtbaren Bereich auf das gewünschte Komponentenbild zu verschieben.