(WordPress-)Websites schneller und effektiver entwickeln
Hilfreiche Tipps und Tools, die Sie sofort nutzen können
Zwar gibt es inzwischen viele Website-Builder, Themes und vorgefertigte Vorlagen im Internet, doch entsprechen sie oft nicht den spezifischen Anforderungen des Kunden. Außerdem sind sie oft schwer zu pflegen, passen nicht ganz zum Stil des Hauses, haben Leistungsprobleme oder sind anfällig für Sicherheitslücken.
Deshalb ist es nach wie vor ratsam, eine eigene Website zu entwickeln (oder entwickeln zu lassen). Mit den folgenden Tipps können Sie Ihre eigene (WordPress-)Entwicklungsumgebung/ Ihren Arbeitsablauf verbessern.
Optimieren Sie Ihre Entwicklungsumgebung
Es gibt viele Informationen zu diesem Thema, aber gerade deshalb kann es schwierig sein, festzustellen, was Sie schneller programmieren lässt. Deshalb möchte ich hier ein paar Tipps geben, die sicher auch für Sie von Vorteil sein können.
Verwenden Sie den richtigen Texteditor
Es gibt viele Texteditoren auf dem Markt. Jeder Editor hat seine Vor- und Nachteile. Für die Entwicklung von Websites verwenden meine Kollegen und ich bei Dtch. Digitals gerne Sublime Text. Ein leichtgewichtiger, aber stabiler Editor mit einem umfangreichen Arsenal an Standardfunktionalitäten.
Personalisieren Sie Ihren Editor
Obwohl Sublime Text im Original schon toll aussieht, nutze ich gerne die Möglichkeit, ein eigenes Thema, Farbschema und eine eigene Schriftart zu installieren. Darüber hinaus können Sie diesen Editor mit Emmet erweitern, einem Toolset zum blitzschnellen Schreiben von HTML und CSS.
Schnelligkeit und Sorgfalt sind die Schlüsselwörter, wenn es um die Entwicklung von Websites geht, daher sind alle Tools, die dazu beitragen, natürlich willkommen.
Benutzerdefiniertes Thema und Farbschema
Monokai.pro ist eine schöne und funktionelle Erweiterung für Ihren Editor. Sie enthält eine vordefinierte Syntaxhervorhebung, die dafür sorgt, dass Sie sich ganz auf den Code konzentrieren können. Außerdem sind elegante Icons zur Unterscheidung von Dateien in der Seitenleiste enthalten, die die Navigation in Ihren Projekten erheblich erleichtern.
Benutzerdefinierte Schriftart
Um den Editor zu Ihrem eigenen zu machen, ist es ratsam, eine Schriftart zu wählen, mit der Sie sich wohl fühlen. Dies wird oft unterschätzt, aber da man manchmal stundenlang auf den Code schaut, ist es ratsam, eine klare und lesbare Schriftart zu wählen.
Es gibt viele Möglichkeiten, denken Sie an (kostenlose) Varianten wie ‘Fira Code’, ‘Monoid’ oder ‘Operator Mono’. Ich persönlich verwende die Schriftart “Dank Mono”, die von jemandem entwickelt wurde, der auch selbst Entwickler ist.
Eine Schriftart, die leicht zu lesen ist und die außerdem viele praktische Symbole enthält, die das Programmieren erleichtern. Die Schriftart kann über Gumroad gekauft und heruntergeladen werden.
Pakete
Sublime Text lässt sich auch leicht durch das Hinzufügen separater Pakete erweitern. Um loszulegen, drücken Sie im Editor Win/Linux: ctrl+shift+p, Mac: cmd+shift+p und verwenden Sie den Befehl Install Package Control
Ich habe für Sie eine Liste mit nützlichen Paketen zusammengestellt, die Sie während der Entwicklung verwenden können. Eine vollständige Übersicht aller Pakete finden Sie unter Package Control!
SightBarEnhancements
Muss man haben! Erweitert die Rechtsklick-Funktionalität in der Seitenleiste und bietet so viel mehr Kontrolle über Dateien und Ordner.
Seite-an-Seite-Vergleich
Vergleichen Sie Dateien in Registerkarten einfach Seite an Seite.
PlainTasks
Verwandelt .TODO-Dateien in umfassende Aufgabenlisten.
ColorPicker
Werkzeug, mit dem Sie Farben auswählen und z. B. Werte von RGB in HEX umwandeln können.
Loremipsum
Einfaches Hinzufügen von Dummy-Inhalten, um Ihre Entwicklungsseite vorübergehend zu füllen
Ausrichtung
Ermöglicht es Ihnen, die Ausrichtung Ihres Codes zu kontrollieren, um einen klaren und lesbaren Code zu gewährleisten.
Terminus
Bringt das Terminal in Ihren Sublime Text Editor. Mit diesem Plug-in können Sie Terminal-Sitzungen von einer Registerkarte aus starten.
Schnipsel
In Sublime Text können Sie Snippets verwenden. Mit diesen Snippets können Sie Teile von wiederverwendbarem Code neu implementieren oder die Funktionalität Ihres Editors erweitern. Praktische Tipps zur Verwendung von Snippets finden Sie auf dem FreeCodeCamp, und unter diesem Link finden Sie einige praktische Snippets, die Sie sofort verwenden können.
Abkürzungen
Sublime Text ist voll von Tricks, die Ihnen helfen, schneller zu programmieren. Prägen Sie sich also so viele Shortcuts wie möglich ein, damit Sie nicht jedes Mal zwischen Maus und Tastatur wechseln müssen; Sublime Text Shortcut Cheat Sheet
Das Emmet-Toolset
Emmet ist eine Open-Source-Erweiterung für Ihren Texteditor und kann Ihre Arbeitsabläufe um ein Vielfaches verbessern. Installieren Sie ‘Emmet’ und ‘EmmetOneLine’ über den Paketmanager von Sublime Text und Sie sind bereit für Speedcode!
Mit einer Zeile Code können Sie theoretisch ein ganzes HTML-Framework für Ihre Vorlagen erstellen. Sobald Sie anfangen zu tippen und Emmet erkennt, was Sie tun, erscheint ein praktischer Tooltip. Dieser enthält den Code, der erzeugt wird, sobald Sie TAB drücken. Ein Beispiel hierfür:
Emmet verwendet auch die so genannte “unscharfe Suche”, was bedeutet, dass Sie in Ihren .CSS- oder .SASS-Dateien nur Abkürzungen von CSS-Eigenschaften eingeben müssen, woraufhin Emmet sie automatisch vervollständigt. Wenn Sie z.B. mt eingeben, wird dies nach dem Drücken von TAB automatisch durch margin-top: …. ersetzt. Superpraktisch!
Wenn Sie diese Abkürzungen erst einmal beherrschen, erspart Ihnen das eine Menge Tipparbeit. Einen ausführlichen Spickzettel mit allen Möglichkeiten finden Sie online.
Tipp: Laden Sie das A5-PDF-Dokument zum Ausdrucken herunter!
Schalten Sie Ihren Google Chrome-Browser ein
Mit dem Web Inspector von Google stehen Ihnen bereits während der Entwicklung eine ganze Reihe von Daten und Funktionen zur Verfügung. Manchmal reicht das nicht aus, aber zum Glück können Sie selbst einige nützliche Funktionen hinzufügen, um noch produktiver zu sein. Die folgenden Erweiterungen werden Ihnen dabei sicher helfen.
Praktisches Tool zum Herausfinden von Farben auf einer Website
Erstellen Sie Internet Explorer-Registerkarten in Ihrem Chrome-Browser, um Ihren Code schnell zu testen.
Erstellen Sie Screenshots ganzer Webseiten und speichern Sie sie inklusive Anmerkungen als JPG oder PDF.
Umfassende und praktische Erweiterung/Checkliste, um u.a. Ihren Code zu validieren.
Mit dieser Erweiterung können Sie steuern, welche Teile Sie aus dem Browser-Cache löschen, was zum Beispiel bei der Entwicklung von Webshops nützlich ist.
Wenn Sie eine schnelle Suche nach den auf einer Website angezeigten Schriftarten durchführen möchten.
Bleiben Sie auf dem Laufenden
Da sich das Internet in rasantem Tempo weiterentwickelt, ist es auch für Webentwickler wichtig, ihr Wissen ständig zu erneuern und zu vertiefen.
Es ist ratsam, von Zeit zu Zeit Artikel zu lesen, die von anderen Entwicklern in Ihrem Bereich verfasst wurden, um auf dem Laufenden zu bleiben. Einige gute Blogs, die interessant und informativ in Bezug auf HTML, CSS und WordPress sind:
- https://www.wpbeginner.com/
- https://yoast.com/cat/wordpress/
- https://carriedils.com/blog/
- https://css-tricks.com/
- https://torquemag.io/
- https://www.smashingmagazine.com/
Ab und zu ist Schummeln wirklich besser, als das Rad selbst neu zu erfinden. Legen Sie unter Ihren Lesezeichen einen Ordner an, in dem Sie Ihre bevorzugten HTML/CSS-Galerien, GitHub-Repositories oder Codeschnipsel aufbewahren.
Ich selbst stöbere zum Beispiel gerne von Zeit zu Zeit auf diesen Websites:
- http://awwwards.com/
- https://dribbble.com/shots/popular/web-design
- https://codepen.io/
- https://tympanus.net/codrops/
Manchmal fehlt Ihnen die Zeit, nach Artikeln zu suchen, die für Sie von Interesse sein könnten. Indem Sie eine Reihe von relevanten Newslettern abonnieren, stellen Sie sicher, dass Sie zumindest alle Highlights erhalten.
- https://wpshout.com/newsletter/
- https://www.smashingmagazine.com/the-smashing-newsletter/
- https://wptavern.com/
Und vergessen Sie nicht, unseren News Flash zu abonnieren.
Übergeben Sie die Arbeit
Die oben genannten Tipps machen mir die Arbeit nicht nur leichter, sondern auch mehr Spaß. Zusammen mit dem Entwicklerteam fordern wir uns gegenseitig heraus, die schönsten und besten Techniken zu verwenden. Alles mit dem Ziel, eine schnelle und gut funktionierende Website für unsere Kunden zu erstellen. Auf diese Weise ist Dtch. Digitals selbst auch ein Kunde.
Bei Dtch. Digitals verstehen wir, dass die oben genannten Tipps nicht für jeden geeignet sind. Deshalb helfen meine Kollegen und ich Ihnen gerne bei der Entwicklung und Pflege Ihrer (neuen) Website. Vom Design über die Technik bis hin zur Umsetzung, wir helfen Ihnen gerne! Und ja, alle Tools und Tipps von oben würde ich dann auch gerne für Ihre Website verwenden!
Noch keine Kommentare.