Coding-Workshop-Final

Ein paar Codepen-Beispiele zum Weiterentwickeln

Für den letzten Coding Workshop hier einige Ansätze zum selbständig herumwerkeln.

HTML-Elemente auf Knopfdruck

Ein Knopf zum zusätzliche <div> Tags generieren, einer um sie zu entfernen.

Neu dürften die Funktionen document.createElement() und appendChild() sein. Erstere braucht als Argument eine Zeichenfolge mit dem Namen des Tags, der generiert werden soll. Letztere wird als Methode des Parent-Elements aufgerufen, dem das HTML als Child untergeordnet werden soll.

Beispiel

const newP = document.createElement("p");
newP.innerHTML = "Hello World"
document.body.appendChild(newP)

Das Gleiche, etwas komplizierter

codepen.io/oolong32/pen/rNWpXgv

Auf Knopfdruck werden neue Paragraphen generiert.
Ihr Inhalt kommt aus einem Textfeld.
die Positionierung erfolgt nach Zufallsprinzip.

Mit der CSS-Eigenschaft position wird eingestellt, wie ein Element im ‘Document Flow´ behandelt wird. Normalwert ist static. relative ist im Verhältnis dazu, wo es normalerweise zu liegen käme, fixed im Verhältnis zum Viewport und absolute im Verhältnis zum Nullpunkt des Dokuments oder zum Nullpunkt des Parent, so es denn einen hat.

Beispiel:

#foo {
  position: relative;
  top: 10px;
  left: 10px;
}

#bar {
  position: fixed;
  top: 10px;
  left: 10px;
}

#baz {
  position: absolute;
  top: 10px;
  left: 10px;
}

#foo ist 10px nach unten und 10px nach rechts verschoben zum Punkt, wo es normalerweise zu liegen kommt.

#bar steht 10px nach unten und rechts eingerückt zur linken oberen Fensterecke bei Scroll bleibt es stehen. Es kann zu Überlagerungen kommen, weil es aus dem ‘Document Flow’ fällt.

#baz steht 10px nach unten und rechts eingerückt zur linken oberen Fensterecke. Bei Scroll bewegt es sich mit dem Dokument. Es kann zu Überlagerungen kommen, weil es aus dem ‘Document Flow’ fällt.

Fun Fact: Wenn du position: fixed verstanden hast, kannst du versuchen, mit deinen Dev-Tools-Kenntnissen die Bezahlbarriere der New York Times zu hacken. Tipp: Es ist so einfach, dass es fast nicht zu glauben ist.

Das allererste p5 Beispiel

codepen.io/oolong32/pen/NWbXQOR

p5p5 ist die am weitesten verbreitete Creative Coding Bibliothek für JavaScript (es ist Processing von Java nach JavaScript übersetzt).

In p5-Projekten passiert in HTML und CSS meist gar nichts. Der JavaScript-Teil ist in diesem Beispiel fast selbsterklärend. Das Beispiel habe ich praktisch 1:1 von der p5, ‘get started’ Seite kopiert.

Erklärungsbedarf gibt es im Zusammenhang mit dem Canvas-Element, das in p5 eine grosse Rolle spielt. Es ist ein HTML-Tag <canvas></canvas> mit bestimmter Breite und Höhe, in den wie auf eine Leinwand gezeichnet werden kann. Dieses Canvas Element wird in p5 meist direkt aus JavaScript generiert (mit der Funktion createCanvas()).

Random Walker

codepen.io/oolong32/pen/mdOpNda

Ebenfalls ein Klassiker unter den Einstiegsübungen für Creative Coding: Ein Punkt bewegt sich zufällig in der Fläche. Auf dieser Grundlage gibt es viele Möglichkeiten zur Variation: Der Punkt kann weitere Eigenschaften haben, eine Spur hinterlassen, auf die Ränder der Fläche reagieren, mit anderen Punkten reagieren, seine Bewegung kann statt rein zufällig nach gewissen Gesetzmässigkeiten erfolgen etc.

Dan Shiffman nimmt in seinen Videos immer wieder Bezug auf den random Walker.

Hier das «erste» von Shiffmans Videos, falls du von vorne beginnen möchtest.

Ich kann jetzt ein bisschen Coden, wie mache ich weiter?

Du kennst jetzt HTML und CSS ziemlich gut, und hast etwas Erfahrungen mit JavaScript (und sogar mit Python). Von hier aus gibt es verschiedene Wege, die du verfolgen könntest.

Creative Coding
Datenvisualisierung
Websites entwickeln
- Frontend
- Backend

Creative Coding

Oben stehts schon mehrfach, aber wenn du hier zu lesen beginnst: p5 ist das am weitesten verbreitete Creative Coding Bibliothek für JavaScript. Der beste Einstieg dazu sind die Videos von Dan Shiffman.

Abgesehen davon, dass es grossen Spass macht, Animationen fürs Web zu programmieren, ist dies auch der kurzweiligste Weg, deine JavaScript-Skills aufzumöbeln.

3D

Three.js ist eine JavaScript-Bibliothek zur Generierung von 3D-Modellen. Three.js Fundamentals ist eine Sammlung von Tutorials. Die Liste des benötigten Vorwissens ist lang, aber voll guter Hinweise für JavaScript-Lernende.

Datenvisualisierung

D3 ist eine JavaScript-Bibliothek zur Visualisierung von Daten, die z.B. in Tabellenform vorliegen. D3 wird z.B. in Online-Zeitungen wie der NZZ und der NY Times verwendet. Einen Einstiegskurs gibt es z.B. bei Codecademy.

Websites entwickeln

Was wir im Kurs gemacht haben, heisst im Entwickler-Jargon «Frontend Entwicklung». Gemeint sind damit die Dinge, die es braucht, damit der Browser ein Dokument rendern kann. Also HTML, CSS und JavaScript. Alles was auf dem Server passiert, wird mit «Backend Entwicklung» betitelt (das ist etwas sehr grob verkürzt). Beispiele wären das Programmieren von CMS-Komponenten, Datenbanken- und Server-Konfiguration etc. In der Praxis lassen sich diese Bereiche aber meist nicht so einfach trennen.

CMS

Wenn du Lust darauf hast, Websites zu bauen, beginnst du am besten mit einem sehr einfachen CMS, z.B. Kirby. Das kann sehr viel, ohne dass es eine Datenbank und komplizierte Konfigurationen braucht. Es gibt eine solide Dokumentation und gut sortierte Youtube-Videos

Ein fortgeschritteneres CMS ist Craft (Achtung Lizenzgebühr). Es ist sehr gut durchdacht, gut dokumentiert und weit verbreitet.

Dom-Manipulation

Im Zusammenhang mit Websites ist DOM-Manipulation das wichtigste Einsatzgebiet von JavaScript. Auf der Website Plain JS gibt es eine sehr gute Sammlung einfacher Funktionen für die üblichen Anforderungen.

Unterstützende Tools

Sass ist eine CSS-Vorstufe, die Stylesheets viel effizienter machen kann.
Tailwind ist eine Sammlung vorgefertigter Stylesheets, zum bauen von Websites ab der Stange. Kann z.B. für Prototypen Sinn machen
Das Terminal ist die beste Software auf deinem Computer
Brew ist eine Software-Sammlung zur Installation per Terminal.
[Valet] ist ein virtueller Server. Damit kannst du einen Ordner zu einem lokalen Server machen, der sich wie ein Web-Host verhält und eine «schöne» Adresse wie my-project.test statt localhost:3000 hat.

JS-Frameworks

Du kannst mit reinem HTML, CSS und Javascript extrem weit kommen. Es gibt aber Systeme/Bibliotheken/Frameworks, die die Arbeit effizienter machen können. Die sich aber auch zu extremen Kostentreibern und Performance-Killern entwickeln können.

JavaScript-Frameworks sind Systeme, die die Datenverarbeitung innerhalb einer Website handhaben, die attraktive Animationen und Übergänge zwischen Seiten ermöglichen, und die kompliziertere Abläufe wie z.B. das Abrufen von Daten von anderen Web-Diensten stark vereinfachen. Sie sind aber notorisch schwierig zu administrieren. Du musst viel Zeit und Ausdauer mitbringen, viel im Terminal arbeiten idealerweise auch die Grundlagen von Node und Git kennen, puh.

Vue
Svelte
React (kein Link, weil ich gegen Facebook bin)

Node

Jetzt habe ich Node erwähnt, da muss ich noch etwas nachlegen.

Node ist eine Software, die dazu dient, JavaScript auf einem Server laufen zu lassen (statt im Browser, wo es von Natur aus hingehört), um damit z.B. CMS zu betreiben. Die Entwicklung von Node hat zu einem extremen Innovationsschub geführt, aber auch zu einem unglaublichen Wildwuchs an Systemen und Komponenten. Das ist alles extrem interessant, aber wahrscheinlich nur für totale Geeks zu empfehlen.

Die folgenden zwei MDN-Tutorials finde ich sehr gut.

Digital Typography – UI/UX Design

Technik Workshops