15 praktische Tools für eine reibungslose Webentwicklung

Wir sind nicht diejenigen, die an Stereotypen festhalten, aber es ist wahrscheinlich schon eine Weile her, dass ein (Stereo-) typischer Webentwickler seinen verdammten Bart rasiert oder seine Kleidung gewechselt oder ein Bad genommen oder diesen verdammten Bart rasiert hat …

Man kann es ihnen wirklich nicht verübeln. Es ist schon eine Weile her, dass alle Entwickler eine Verschnaufpause eingelegt haben. 2015 war ein gutes Jahr mit sprunghaften Fortschritten in der Webentwicklungstechnologie, aber ein Entwickler kann nicht mehr einfach seinen Laptop/MAC (wie ein Chef) herausholen und nach Belieben für eine Plattform programmieren.

Jetzt müssen Sie sich um das reaktionsschnelle Design mit Multi-Plattform-Unterstützung kümmern, HTML5, PHP7, die etwas später im Jahr veröffentlicht werden, Browser wie IE, die nicht aufhören werden, alles zu stören … Matrixähnliche Ebenen des Internets der Dinge selbst.

Das ist alles, was wir Entwickler tun können, um Schritt zu halten. Aber wir tun es, hauptsächlich aufgrund dieser raffinierten Tools.

Schau mal.

1 Komodo-Bearbeitung

Für einen Entwickler entsteht alles aus Code, daher ist es nur natürlich, mit dem besten Bearbeitungstool zu beginnen, das Sie finden können. Komodo Edit ist für all das und mehr ziemlich koscher. Es ist ein netter plattformübergreifender, mehrsprachiger Texteditor, in dem Sie Ihren Code schreiben und bearbeiten können. Oh, und er ist kostenlos.

Das Tool funktioniert unter Windows, Mac, Linux/UNIX, also kein Problem. Wir mögen es auch wegen seiner automatischen Code-Vervollständigungsfunktion für Sprachen wie HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (für etwa 5 Personen auf der Welt) usw. Das ist ein intelligenter Texteditor.

Bonuspunkte für zusätzlichen Komfort der Projektmanager-Funktion zum Organisieren und Verfolgen von Dateien.

2 CSS 3.0-Ersteller

Seien wir ehrlich, trotz allem, was Sie an CSS3 lieben, können Sie nicht anders, als es ein wenig zu hassen, wenn es darum geht, Syntax für Dinge wie abgerundete verdammte Kanten zu schreiben. Es ist so ein triviales Detail, um den Schlaf zu verlieren, aber Sie tun es trotzdem. Sie können sich nicht mehr als 100 neue Eigenschaften und ihre jeweiligen Präfixe merken. Also danke dem Herrn für ein Tool wie CSS 3.0 Maker.

Mit diesem netten kleinen Online-Tool können Sie kniffligen Code kopieren und in Ihr Stylesheet einfügen. Es generiert Code für Stildetails wie Boxradien, Farbverläufe, Text- und Boxschatten, Transformationen, Übergänge und Drehungen Ihrer Wahl. Es zeigt auch, welche Desktop- und mobilen Browser diese Stileigenschaften unterstützen. Ein kleiner Vorschaubereich zeigt den Effekt, der Code kann aus der Ansichtsbox kopiert oder in einer HTML-Datei heruntergeladen werden.

Für diejenigen von uns, die nicht viel Zeit für scheinbar banale Stildetails aufwenden können, ist dieses Tool ein Lebensretter.

3 – Präfix-frei

„Befreien Sie sich von der CSS-Präfix-Hölle!“ – Präfixfreie Einführungsseite.

Dies ist ein sachliches Werkzeug, das von einem Engel namens Lea Verou von Github gebracht wurde, um uns aus der „Präfix-Hölle“ zu befreien. Es fügt Stylesheets in

oder -Elementen ein Herstellerpräfix (an einer Stelle, die Sie nicht sehen können) hinzu. Außerdem: Sie müssen sich keine Gedanken über neue oder Elemente, .css()die Präfixe von jQuery oder Änderungen machen, die Sie vornehmen, da es alles abdeckt.

Was ist nicht zu mögen?

4 Block-Pfund

„Lorem Ipsum“ war viel zu lange der beliebteste Platzhaltertext. Glücklicherweise haben wir jetzt Blokk: Die Schriftart, die dem „Schmerz“ des unverständlichen Lateins ein schreiendes Ende bereitet.

Blokk gibt Ihnen Blocktext, der als Platzhalter beim Erstellen von Mockups und Wireframes verwendet werden kann. Es versteht sich auch von selbst, dass es die weniger, äh, Web-aufgeklärten Kunden bei Präsentationen nicht verwirren wird.

5 Fontello

Bevor Icon-Fonts zu einer Sache wurden, mussten Entwickler die Hilfe von Designern in Anspruch nehmen, um skalierbare Icons zu erstellen. Die Zeit, die es brauchte, um sie zu entwickeln (was übrigens das Erstellen, Extrahieren, Implementieren und Anpassen umfasst), grenzte an „absolut lächerlich“. Aber dann verwandelte jemand Symbole in Schriftarten und alle lebten glücklich … für die absehbare Zukunft.

Fontello ist ein großartiger Icon-Font-Generator. Sie können aus Tausenden von Symbolen auswählen, ihre Zuordnung anpassen oder ihre Namen bearbeiten und sie in einer einzigen Schriftartdatei zusammenstellen. Es ist erstaunlich und es ist kostenlos.

Wir können Vitaly Puzrin nicht genug danken.

6 Typprüfungen

Aktivieren Sie das JavaScript Ihres Browsers und testen Sie, wie die von Ihnen gewählte Schriftart auf einer tatsächlichen Website aussehen wird.

Typetester ist unkompliziert. Sie können damit verschiedene Schriftarten eingeben, vergleichen und ihr Aussehen testen. Sie können auch mit Größe, Tracking, Farbe usw. herumspielen, bis Sie das bekommen, was Sie wollen. Sie können bis zu 36 verschiedene Schriftarten gleichzeitig vergleichen. Stellen Sie sich vor, wie viel Zeit Sie damit sparen können.

Es ist ziemlich cool.

7 Schmutziges Markup

Das Codieren kann manchmal etwas ermüdend sein, aber Code-Reinigung gibt es auf Level: Völlige Langeweile. Es ist jedoch notwendig, wenn Sie Fehler vermeiden und schneller laden möchten.

Dirty Markup hilft, die Zeit zu sparen, die Sie ansonsten mit interessanteren Aktivitäten verbringen können (Bacon-Sandwich, irgendjemand?). Dieser verfügt über kombinierte Funktionen anderer Single-Syntax-Reinigungswerkzeuge. Wir sprechen von HTML Tidy, CSS Tidy, JS Beautify und Ace Editor. Das ist ein umfassender Reiniger.

Es ist eine webbasierte App zum Bereinigen und Formatieren von HTML, CSS und JavaScript. Mehr können wir nicht verlangen.

8 BugHerd

Mit diesem leistungsstarken Tool werden Sie vielleicht zu einem Wanzenkiller.

BugHerd folgt dem uralten Sprichwort „Keep it Short and Simple, Stupid“. Es kann Kunden-Feedback erfassen, kleinere Probleme selbst lösen und Fehler verfolgen (die Sie beseitigen können). Es spielt auch den Sekretär und verwaltet Ihre Projekte.

Eine supereinfache Point-and-Click-Benutzeroberfläche auf Ihrer Website ermöglicht es Ihren Benutzern, Probleme zu melden. BugHerd verwandelt sie in Berichte mit allen Informationen, die Sie benötigen könnten (wie die Browserversion des Benutzers). Es ist einfach einzurichten, macht Spaß und bietet Funktionen wie automatische Screenshots (Browsererweiterung), direkte Links, Dateianhänge, vollständige Auswahldaten und Diskussionen.

Bei einem Standardabonnement von 29 $/Monat ist das ein Haken.

9 Fliegengitter

Responsive Webdesign ist mehr als eine neue Modeerscheinung, denn es ist hier, um zu bleiben. Aber im Moment werden Sie flüssige Layouts bestenfalls schwierig finden. Sie werden auch feststellen, dass Sie in eine heftige Wut geraten, wenn Sie versuchen, Ihr Layout auf verschiedenen Bildschirmgrößen zu testen.

Glücklicherweise ist Screenfly eine nette kleine Web-App, die Ihre @media-Abfragen für Sie testet. Sie geben Ihre URL ein und es wird angezeigt, wie Ihre Abfragen mit den Geräteabmessungen umgehen, durch die Sie im oberen Bereich klicken.

Es berücksichtigt nicht den Rendering-Unterschied zwischen Browsern, aber Sie können dafür Browser Shots verwenden. Ansonsten ist es eine einfache, schön zusammengestellte Methode, um zu sehen, wie Ihre Website in verschiedenen Auflösungen aussieht.

10 Stiftung

Da wir über RWD sprechen, könnten wir genauso gut über Frameworks sprechen, um es zu entwickeln.

Die Internet-Debatte tobt darüber, welches Frontend-Framework besser ist: Bootstrap oder Foundation? Sie können das eine oder andere verwenden. Aber Foundation steht etwas mehr im Vordergrund, wenn es um Rastersysteme, proportionale Einheiten für das Design (obwohl Bootstrap 4.0 Alpha zu em- und rem-Einheiten gewechselt ist), Rechts-nach-Links-Unterstützung, Preistabellen, Touren und Off-Canvas-Navigation geht .

Es ist offensichtlich, dass wir Foundation bevorzugen. Es funktioniert mit SASS und CSS, ist vollgepackt mit einer ganzen Reihe von Features und generell komfortabler und flexibler.

Darin stimmen wir Zurb zu: Es ist ‚crazy fast‘.

11 Adobe Edge

Nach einem Jahrzehnt von Software, die Design vor Code stellt, gibt Adobe den Programmierern endlich einen Vorteil.

Diese ehrlich gesagt erstaunliche Auswahl an Tools und Diensten wurde unter Berücksichtigung der neuen Front-End-Codierungstrends entwickelt. Sie haben uns ein ganz besonderes Vergnügen bereitet. Edge Animate hilft Programmierern beim Erstellen von Animationen und beseitigt gleichzeitig alle Spuren von Flash. Sorry Adobe, Flash war großartig. Aber Animate verwendet Standard-HTML und JavaScript, und Sie wissen schon, Einheitsgröße …

Es gibt Edge Code zum Bearbeiten von CSS aus einem HTML-Dokument heraus. Inspect konsolidiert Browsertests und Gerätekompatibilitätstests für responsives Design und synchronisiert sie alle für eine superschnelle Aktualisierung/Anpassung. Das äußerst beliebte Typekit ist jetzt Teil der Edge-Familie. Reflow muss noch veröffentlicht werden, aber es wird wahrscheinlich andere Front-End-CSS-Grid-Hersteller aus dem Wasser blasen. Und es gibt noch mehr.

Wir wissen. Wir mussten auch unsere Kiefer vom Boden aufheben.

12 Landstreicher

Vagrant ist so viel mehr als nur virtuelle Entwicklungssoftware.

Mit dieser Schönheit können Sie tragbare, leicht reproduzierbare Arbeitsumgebungen erstellen. Es konsolidiert die Virtualisierungssoftware, die Server-Basisbox und die Konfigurationstools in einem leistungsstarken Paket. Grundsätzlich müssen Sie VirtualBox + Ubuntu + Chef nicht mehr haben. Vagrant erledigt die Arbeit aller drei und nimmt dabei weniger Platz ein. Power-User werden Ihnen auch sagen, wie Sie damit Multi-VM-Netzwerke einfach einrichten können.

Es ist in Ruby geschrieben, funktioniert aber für PHP, Java, JavaScript, Python und C#. Sie können mit Vagrant unter Windows, Mac OSX, Linux und FreeBSD arbeiten.

Es ist superschnell, weil es nichts von dem U-freundlichen hat, das gut aussieht, aber den dringend benötigten Platz einnimmt. Es eignet sich gut als Testumgebung für Entwickler.

Das kommt dem Heiligen Gral so nah wie möglich.

13 PageSpeed-Einblicke

Googles PageSpeed ​​Insights macht genau das, was es verspricht. Es gibt Ihnen Einblicke in die Front-End-Leistung Ihrer Seite. Das wird vielen hochkarätigen Entwicklern da draußen die Augen öffnen. Also feiern Sie ein Glucksen und beginnen Sie mit der beschleunigten Glatzenbildung von all den Haaren, die gezogen werden sollen.

Es misst lediglich die verstrichene Zeit zwischen: Anforderung und Rendering von Inhalten ohne Scrollen sichtbar und Anforderung und Rendering der ganzen Seite.

Es prüft die netzwerkunabhängigen Aspekte, um die Leistung Ihrer Seite zu berechnen: Serverkonfiguration, HTML-Struktur, JavaScript, CSS und Bilder.

Es ist messerscharf und gnadenlos schnell; Es wird also definitiv Ihre Gefühle verletzen und Sie möglicherweise zum Weinen bringen, wenn Sie eine niedrige Punktzahl erzielen. Es wird auch versuchen, dies auszugleichen, indem es Ihnen gezielte Vorschläge zur Verbesserung Ihrer Leistung macht, wie ein herablassender Elternteil.

Und wir lieben es.

14 Git

Die meisten modernen Entwickler sind bereits damit vertraut. So erklärt man sich doch die Existenz von Communities wie GitHub.

Git ist ein Open-Source-Revisionskontroll- und Quellcodeverwaltungssystem, das Ihren Projektverlauf in einem Repository verfolgt. Es ist im Grunde eine superschnelle, supereffiziente PA.

Es ermöglicht Ihnen, frei zu experimentieren, ohne befürchten zu müssen, alles für immer durcheinander zu bringen. Sie können auch mehrere Repositorys erstellen und Verzweigungen/Zusammenführungen verwenden, um mit einzelnen Funktionen zu arbeiten. Es ist ein besonders nützliches Werkzeug für gemeinsame Bemühungen.

Es ist vollständig verteilt, sodass Sie keinen No-Net-Albtraum fürchten müssen, wenn Sie (absichtlich oder aus Versehen) offline sind. Sie können die Updates einfach in Ihrem Haupt-Repository hinzufügen, das geduldig auf Sie wartet, wenn Sie wieder online sind.

15 W3C-Markup-Validierung

Dies ist der letzte Übergangsritus.

Die W3C-Markup-Validierung ist ziemlich einfach und notwendig. Wie das W3C es ausdrückt, kann die Validierung: Ihnen beim Debuggen helfen, Ihre Website zukunftssicher machen (Browser basieren auf W3C-Standards) und bei der Wartung helfen.

Es lehrt Sie auch, wie Sie standardkonform sein können, indem es Ihnen die „Fehler“ Ihrer Wege zeigt.

Die Markup-Validierung sollte nicht als repressiv angesehen werden, denn das ist sie wirklich nicht. Es wird Ihnen helfen zu lernen, wie man besseren Code schreibt …

Wie ein Profi.

Endeffekt

Es gibt natürlich mehr Tools, Plugins, Add-Ons und Ressourcen und Communitys im Allgemeinen, die das Entwickeln … nicht gerade einfacher, aber weniger mühsam machen. Und weitere werden gerade entwickelt. Es gibt ein Firebug-Add-on für Firefox, mit dem Sie HTML, CSS und JavaScript live überwachen und bearbeiten können. PixelDropr ist ein Photoshop-Add-On, mit dem Sie mit minimalem Aufwand entzückende Schaltflächen und Symbole für Ihre Website erstellen können.

Jeder professionelle Entwickler hat schließlich sein eigenes „Toolkit“ aus Apps und Software, auf das er sich verlässt, um schneller und effizienter zu arbeiten. Einige sind kostenlos, andere müssen wir bezahlen.

Aber wer kann der Bequemlichkeit einen Preis geben?