A presentation at neuland.conf in in Bremen, Germany by Michael Geers
Hyperapp Flipdots & Pixelkunst Michael Geers | @naltatis neuland.conf 2018
hyperapp.js Functional DOM Diffing Komponenten State Management 1kB JavaScript Elm, React/Redux The Important Parts Vergleich: ~30kB Elm, ~40kB React+Redux, ~60kB Vue, ~110kB Angular
counter.js hyperapp in action Zentraler State Interaktionen Template Initialisierung
counter.jsx hyperapp in action Zentraler State Interaktionen Template Initialisierung
And Now for Something Completely Different
Homeoffice
Home
Keine Glastür Headset für Musik !
On Air LED
Mate Kisten Display 32C3 Hamburg
Mechanische Displays
Split-Flap Display
https://www.magazin.com/wanduhr-klappzahlenuhr-brick-p1463864/
Flip-Dot Display
https://breakfastny.com/flip-disc
https://flipdots.com/
Serielle Ansteuerung node.js
Payload berechnen Jede Spalte ist ein Byte Basis 2 parseInt("0100000", 2) =>" 32 // 0x20 parseInt("0011111", 2) =>" 31 // 0x1f 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 1 1 1 1 1 0 0 1 0 1 0 1 0 0 1 1 1 1 1 0 0 1 1 1 1 1 0 0 1 0 1 0 1 0
Rückseite Konfiguration (Adresse/Mode) RS485 to USB Adapter Strom Steuersignal Raspberry Pi Zero W 24 V Netzteil
On Air Flip-Dot Display
Inhalt? Platz für zwei Buchstaben Lauftext? Updates sind laut! "
Icons Mikro an Zufälliges Monster Kamera an Luft ist rein
Zuverlässigkeit !important
Steuerung Version 1: Button
Steuerung Version 1.5: Button mit LED
Steuerung Version 2: Macbook Micro- und Kamera-Aktivität (automatisch) https://obdev.at/products/microsnitch/
Steuerung Flip-Dot Raspberry Pi Macbook Micro Snitch PUT /status/audio Log-File PUT /status/video On-Air Daemon PUT /status/idle Webservice Local Wifi
49 Pixel
Pixel Editor Simple Webapp Etwas CSS Magie hyperapp! Live Vorschau flipflip*
Kids # Pixel Editor
JavaScript + Types Tooling Support (VSCode, IntelliJ, …)
JavaScript + Types Tooling Support (VSCode, IntelliJ, …)
JavaScript + Types Tooling Support (VSCode, IntelliJ, …)
Debugging Redux DevTools kompatibel https://github.com/andyrj/hyperapp-redux-devtools
Module Bundler like Webpack but Batteries Included Zero Config Schnell! https://parceljs.org/
Wenig Pixel - Viele Möglichkeiten Male eine Rakete!
Try it yourself! https://7x7.ninja/ Responsive Progressive Webapp Lighthouse Score 100 :) 11kb Script https://github.com/naltatis/7x7ninja Und nein, das ist nicht mit mein em Display gekop pelt :)
Animations
Navigation State
Possible Takeaways
hyperapp rocks hyperapp + TypeScript ~= Elm https://github.com/JorgeBucaran/hyperapp
Keine Angst vor Hardware
Simple is Beautiful
Danke! Michael Geers | @naltatis neuland.conf 2018
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
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.