Zum Hauptinhalt springen
frustfrei.dev

Entwicklung

Was gehört zu einer Entwicklungsumgebung, und mit welchen Werkzeugen richtest du sie ein?

Was gehört zu einer Entwicklungsumgebung?

Um eine Website zu entwickeln, benötigst du neben einem Texteditor, auch IDE genannt, folgende Dinge:

  • Node.js zur Ausführung von Tools wie dem Website-Starterkit
  • Paketmanager wie npm zur Installation und Verwaltung von Tools
  • Webserver zur Bereitstellung deiner Website im Browser

Folgendes Diagramm zeigt, warum ein Webserver notwendig ist:

Wenn du eine Webseite in deinem Browser aufrufst, sendet dieser eine Anfrage an einen Webserver (meist Apache oder Nginx). Der Webserver antwortet mit den Dateien, die für die Webseite benötigt werden (HTML, CSS, JavaScript, Bilder usw.). Der Browser interpretiert diese Daten und stellt das Resultat dar.

Ein solcher Webserver ist auch im Website-Starterkit enthalten.

IDE

Editoren werden meist IDE1 genannt. Sie erleichtern dir das Schreiben von HTML, CSS und JavaScript und anderen Sprachen. Im Seminar GT 1191 haben wir eine vorkonfigurierte Version von Visual Studio Code genutzt.

Visual Studio Code
Kostenlose IDE von Microsoft.
VS Code Profile
Vorkonfigurierte Einstellungen für Visual Studio Code.
Emmet Cheat Sheet
Auflistung aller Kurzbefehle, um komplexes Markus schreiben zu können.

Lass uns nun Node.js und einen Paketmanager installieren. Dazu brauchst du drei Dinge: das Terminal, in dem du Befehle ausführst, Node.js samt Paketmanager zur Installation deiner Tools, und Git zur Versionierung deiner Projekte.

TerminalNode.js und PaketmanagerGit

Werkzeuge

Can I use
Zeigt an, welcher Browser welches Front-end-Feature unterstützt.
Can I email
Das Selbe wie „Can I use“, nur für E-Mails.
Chrome DevTools
Zur allgemeinen Bedienung über die Verwendung spezifischer Informationen.
Dear Console …
Sammlung von kleinen Scripts für die DevTools-Konsole.
Browserslist
Browserkompatibilitätskonfiguration für beliebte JavaScript-Tools wie Autoprefixer, Babel, ESLint, PostCSS und Webpack. Interessant ist auch die Checkliste.

Umgebungen

Website-Starterkit
Vorkonfiguriertes Parcel, der prefekte Start für deine erste Website.
Astro
Bevorzugtes Web-Framework, bei denen der Inhalt im Vordergrund steht.
Laravel Herd
Einfache PHP-Entwicklungsumgebung für Mac und Windows, um PHP und Nginx bereitzustellen.

Fußnoten

  1. IDE steht für Integrated Development Environment. Ein Editor, der speziell für die Entwicklung von Software und Webseiten konzipiert ist. ↩