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

@AndreSchroeter +

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

7x7 Dev Board - Serielle Steuerung RS485 Arduino/RPi yay

24V Spannung

Erweiterbar über Steckverbindung AlfaZeta

Flip-Dot Boards XY5

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