Horrible Interfaces and How to Build Them
summary
Five quick demo interfaces built in vanilla JavaScript and HTML with CodePen links show exactly what gets built and how it behaves not just the idea Control of HTML5 audio uses player.play player.pause and a 0–1 volume scale a Pi entry uses a string to include the decimal point because Math.PI is short a mic version uses MediaStream + AudioContext and a scriptProcessor to sample peak loudness an incline slider rotates via CSS transform an eclipse uses hypotenuse math and CSS brightness and the handwriting demo uses a TensorFlow model (single digits) and Canvas hit regions which browsers barely support and sometimes confidently misrecognizes garbage
AI-written summary · about
chapters (9)
- 0:00Intro
- 0:43Horrible Interfaces - What?
- 4:07Key Takeaways - P!
- 6:05Gravity Falls Requirements
- 6:31Key Takeaways - Gravity
- 8:39Ice Scream Requirements
- 12:51Key Takeaways - Sunny Day
- 16:44Dotty Requirements
- 17:06Key Takeaways - Dotty
related talks
01h 10mSmart responsive interface design patterns
02mPrototyping
41mWeird Web & Curious Creation
01h 07mInclusive Design Series: How to stop worrying and love accessible forms
06mCSS *is* awesome
42mThe Case for Whimsy
23mThe invisible mechanisms in your interfaces
22mHow I Graduated from React to Vanilla JavaScript