Hyperapp, Flipdots & Pixelkunst

Vortrag auf der neuland.conf, Bremen
https://www.youtube.com/watch?v=IeLGfhHNqM8

Transcript

1. Hyperapp Flipdots & Pixelkunst neuland.conf 2018 Michael Geers | @naltatis
2. hyperapp.js Functional DOM Diffing Komponenten State Management Elm, React/Redux The Important Parts 1kB JavaScript Vergleich: ~30kB Elm, ~40kB React+Redux, ~60kB Vue, ~110kB Angular
3. Interaktionen Zentraler State Template Initialisierung counter.js hyperapp in action
4. Interaktionen Zentraler State Template Initialisierung counter.jsx hyperapp in action
5. And Now for Something Completely Different
6. Homeoffice
7. Home
9. + = @AndreSchroeter
10. Keine Glastür Headset für Musik !
11. On Air LED
12. Mate Kisten Display 32C3 Hamburg
13. Mechanische Displays
14. Split-Flap Display
17. https://www.magazin.com/wanduhr-klappzahlenuhr-brick-p1463864/
18. Flip-Dot Display
20. https://breakfastny.com/flip-disc
21. AlfaZeta - Flip-Dot Boards XY5 - https://flipdots.com/ 7x7 Dev Board - Serielle Steuerung RS485
 Arduino/RPi *yay*
 - 24V Spannung - Erweiterbar über
 Steckverbindung
22. Serielle Ansteuerung node.js
23. 0 1 0 0 0 0 0 0 0 1 1 1 1 1 0 0 1 0 1 1 0 0 0 1 1 1 1 1 0 0 1 0 1 1 0 0 0 1 1 1 1 1 0 1 0 0 0 0 0 Payload berechnen parseInt("0100000", 2) => 32 // 0x20 Jede Spalte ist ein Byte parseInt("0011111", 2) => 31 // 0x1f Basis 2
24. RS485 to
 USB Adapter Raspberry Pi Zero W Konfiguration (Adresse/Mode) Strom Steuersignal Rückseite 24 V Netzteil
25. On Air Flip-Dot Display
26. Inhalt? Platz für zwei Buchstaben Lauftext? " Updates sind laut!
27. Icons Mikro an Kamera an Luft ist rein Zufälliges Monster
28. Zuverlässigkeit !important
29. Steuerung Version 1: Button
30. Steuerung Version 1.5: Button mit LED
31. Steuerung Version 2: Macbook Micro- und Kamera-Aktivität (automatisch) https://obdev.at/products/microsnitch/
32. Steuerung Micro Snitch Log-File On-Air Daemon Webservice Flip-Dot Raspberry Pi Macbook PUT /status/audio PUT /status/video PUT /status/idle Local Wifi
33. Pixel 49
34. Pixel Editor Simple Webapp Etwas CSS Magie hyperapp! Live Vorschau *flip*flip*
35. Kids Pixel Editor #
36. JavaScript + Types Tooling Support (VSCode, IntelliJ, …)
37. JavaScript + Types Tooling Support (VSCode, IntelliJ, …)
38. JavaScript + Types Tooling Support (VSCode, IntelliJ, …)
39. Debugging Redux DevTools kompatibel https://github.com/andyrj/hyperapp-redux-devtools
40. Module Bundler like Webpack but Batteries Included Zero Config Schnell! https://parceljs.org/
41. Wenig Pixel - Viele Möglichkeiten Male eine Rakete!
42. Try it yourself! https://7x7.ninja/ https://github.com/naltatis/7x7ninja Und nein, das ist nicht mit meinem Display gekoppelt :) Responsive
 Progressive Webapp Lighthouse Score 100 :) 11kb Script
43. Animations
44. Navigation State
45. Possible Takeaways
46. hyperapp rocks hyperapp + TypeScript ~= Elm https://github.com/JorgeBucaran/hyperapp
47. Keine Angst vor Hardware
48. Simple is Beautiful
49. Danke! neuland.conf 2018 Michael Geers | @naltatis
50. Credits John Cleese Desk https://ichef.bbci.co.uk/images/ic/1200x675/p01gk35d.jpg Icons by Freepik https://www.flaticon.com Split-Flap Animation+ https://en.wikipedia.org/wiki/Split-flap_display Flip-Disk Schema https://breakfastny.com/flip-disc-system ŠJů (cs:ŠJů) - Own work https://commons.wikimedia.org/w/index.php?curid=10771385 Code: Carbon https://carbon.now.sh/ Fonts: Dank Mono & BPdots https://dank.sh/ https://www.fontsquirrel.com/fonts/BPdots