Ratgeber

Tools, die jeder Web-Developer braucht: Wir optimieren euren Workflow

Workflow für Web-Developer. (Bild: Shutterstock)

Web-Developer arbeiten vermehrt mit einer Vielzahl von Programmen gleichzeitig. Neben sehr viel Monitor benötigt es also auch einen abgestimmten Workflow und Programme die ineinander übergreifen.

Die Möglichkeiten und Variationen von Webseiten haben in dem letzten Jahrzehnt stark zugelegt. Eine Webseite besteht schon lange nicht mehr nur aus HTML, sondern es erfordert deutlich mehr Technik und Grips, um eine moderne und aktuelle Webseite zu erstellen. Der Quellcode wird somit immer umfangreicher und wir müssen trotzdem weiterhin eine gewisse Ordnung schaffen. Wie uns das tagtäglich gelingt? Hier kommen jetzt unsere Tools für euren Workflow!

Was braucht der Web-Developer? Tools die euren Workflow verbessern

Ein neues Projekt beginnt oft mit der Erstellung von einem Git-Repository. Dies ermöglicht uns mit mehreren Leuten gleichzeitig an einem Projekte zu arbeiten und wir erhalten eine komfortable Code-Versionierung. Dies ist nicht nur wichtig, sondern ein Must-Have für jedes größere Projekt. Ein solches Git-Repository kann als Service gemietet werden, zum Beispiel bei Github, Bitbucket oder Gitlab, oder natürlich auch auf dem eigenen Server bereitgestellt werden (benötigt Git-Support).

Für die Verwaltung eignet sich zum Beispiel wunderbar Git-Tower, das erst vor kurzem in der Version 3.0 erschienen ist. Git-Tower ermöglicht es nicht nur lokale Git-Projekte zu organisieren, sondern auch externe Repositorys anzubinden. Ein sehr umfangreicher und guter Git-Client, der einem immer einen Überblick verschafft.

Sucht euch einen Editor, mit dem ihr gerne arbeitet!

Ist das Git-Repository erstellt und verknüpft beginnt die weitere Vorbereitung. Hierfür öffnet man jetzt seinen favorisierten Code-Editor. Wer gerne clean und simple arbeiten möchte und zudem einen hohen Grad an Individualisierbarkeit wünscht, ist mit AtomVisual Studio Code oder Sublime-Text gut bedient. Wer hingegen lieber die Scham von einem WYSIWYG-Editor will, der sollte sich Coda oder Espresso anschauen. Hingegen der Fullstack-Entwickler doch lieber mit der Phpstorm-IDE arbeitet. Wer die Wahl hat, hat die Qual.

Ist der lieblings Editor geöffnet beginnt die Erstellung der Struktur. Ordner und Dateien werden angelegt, Packages und Bibliotheken werden hinzugefügt. Eine solche Struktur könnte folgendermaßen aussehen:


/assets/
-- /js/
-- /css/
-- /images/
-- /svg/
-- /icons/
-- /fonts/
/i18n/
/gateway/
/vendor/
index.html

In den Ordner assets kommen alle Materialien die für die Umsetzung benötigt werden. i18n ist für eine mögliche Mehrsprachigkeit, der Ordner gateway kann AJAX-Requests oder Schnittstellen bereitstellen und vendor beinhaltet Packages und Bibliotheken. Dies ist natürlich nur ein Beispiel für ein mögliches Web-Projekt. Egal wie ihr euer Projekt organisiert, ihr werden definitiv mit HTML, CSS und Javascript arbeiten und möglicherweise auch mit PHP.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
HB

Obwohl Vistual Studio Code eher ein Newcomer im Bereich der Texteditoren ist, hat es seit der Veröffenltichung viel Aufmerksamket gewonnen. Die Gründe dafür liegen auf der Hand: sehr leistungsstark, flexibel und platformübergreifend. Das Extension-Management ist integriert + es sind bereits mehrere tausend Extension verfügbar!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung