🎤 Case study: Wafflevision - a real project built on web tech, from prototype to deployed piece
Articles & resources
- https://wesbos.com/javascript/
- https://htmlforpeople.com/
- https://github.com/leonardomso/33-js-concepts
- https://alan.norbauer.com/articles/browser-debugging-tricks
- https://www.trevorlasn.com/blog/javascript-logical-operators
Creative Web Dev Studios
- Active Theory
- Lusion
- Resn
- Unit9
- Junni
- MakeMePulse
- RGA
- Media Monks
- Tool
- Wieden + Kennedy
- North Kingdom
The browser console
- Activity: alter the functionality of an existing site
SVG
CSS
- Enhancing User Experience With CSS Animations
- CSS Doodle by @yuanchuan
- Ana Tudor
- Drawing with A Single Div
Interesting Web APIs (check caniuse.com)
- Canvas API (Bitmap drawing docs)
- WebGL (High-performance 3d graphics)
- DeviceOrientationEvent (Accelerometer/gyroscope)
- MediaDevices & Media Streams API (Webcam, microphone, WebRTC streaming)
- WebSockets API (Persistent data streams)
- Web Audio API (Audio playback/analysis/synthesis)
- WebRTC (Video/audio/data streaming)
- WebXR (Build VR/AR/MR in-browser)
- Web MIDI API (MIDI devices)
- Gamepad API (Game controller devices)
- Web Serial API (Serial devices like Arduino/Teensy)
- Geolocation API (GPS)
- Web Bluetooth
Web-based creative tools & libraries:
- Realtime graphics libraries
- Live coding
- Audio (see previous class for a list)
- Voice-recognition
- Web Speech API demo (Chrome only)
- Face trackers
- Body trackers
- Fonts
- Augmented/Mixed/Virtual Reality
- Multi-user sync
🎤 Case study: TB-y2k - a real Node.js/CLI project, live-coded - why a CLI tool made sense here, and how it fit into the larger pipeline
- A CLI (Command-Line Interface, vs. GUI) lets you run commands directly instead of clicking through an app
- Why it's worth knowing: automation (batch-processing files, running scripts on a schedule), scripting your own tools, and it's how most dev/build tooling (including pm, below) actually gets used
- Vibe coding tools like Gemini CLI, GitHub Copilot, & Claude Code are also offered as terminal applications
🔍 Further (setup details - useful when you actually need them, not required reading now)
- Shells: Bash/zsh (Mac/Linux), Powershell/WSL (Windows)
- Package managers to install CLI tools: Homebrew (Mac), Chocolatey/Scoop (Windows), apt (Linux)
- Media conversion tools: imagemagick, ffmpeg, SoX, media-utility-scripts
What is Node?
- Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
pm - Node Package manager
- package.json - project config file
*
pm install
*
pm run [command]
- Use this example project to try it out
Use cases
- Web Server & development tools
- WebSocket server
- Build tools & automations
- Batch file-processing tasks
- CLI tasks in a friendlier environment
- General plumbing to connect different apps (http requests, file handling, websocket connections, etc)
Node Resources
- Node.js
- Introduction to Node.js
- Beginner's Series to: Node.js
- Node.js Ultimate Beginner's Guide in 7 Easy Steps
- Node.js Tutorial for Beginners: Learn Node in 1 Hour
- Build an API from Scratch with Node.js Express
- Node Weekly
- The Coding Train topics
Tutorial:
Read:
- Articles above on CSS and other web tech
- Research the enormous landscape of web-based creative tools
Watch:
- Kate Compton: Creating generative art with Javascript
- Tim Holman - Generative Art Speedrun
- Generative Machines with Matt DesLauriers
Build something with a new (to you) Web Browser feature or Node.js
- Find a tool or API above ☝️
- Present your ML/Final project progress