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
   

   View Slide

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
   

   View Slide

3. Interaktionen
   Zentraler State
   Template
   Initialisierung
   counter.js
   hyperapp
   in action
   

   View Slide

4. Interaktionen
   Zentraler State
   Template
   Initialisierung
   counter.jsx
   hyperapp
   in action
   

   View Slide

5. And Now for Something
   Completely Different
   

   View Slide

6. Homeoffice
   

   View Slide

7. Home
   

   View Slide

8. View Slide

9. + =
   @AndreSchroeter
   

   View Slide

10. Keine Glastür
    Headset für Musik
    !
    

    View Slide

11. On Air LED
    

    View Slide

12. Mate
    Kisten
    Display
    32C3
    Hamburg
    

    View Slide

13. Mechanische
    Displays
    

    View Slide

14. Split-Flap
    Display
    

    View Slide

15. View Slide

16. View Slide

17. https://www.magazin.com/wanduhr-klappzahlenuhr-brick-p1463864/
    

    View Slide

18. Flip-Dot
    Display
    

    View Slide

19. View Slide

20. https://breakfastny.com/flip-disc
    

    View Slide

21. AlfaZeta - Flip-Dot Boards XY5 - https://flipdots.com/
    7x7 Dev Board
    - Serielle Steuerung RS485

    Arduino/RPi *yay*

    - 24V Spannung
    - Erweiterbar über

    Steckverbindung
    

    View Slide

22. Serielle
    Ansteuerung
    node.js
    

    View Slide

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
    

    View Slide

24. RS485 to

    USB Adapter
    Raspberry Pi
    Zero W
    Konfiguration
    (Adresse/Mode)
    Strom
    Steuersignal
    Rückseite
    24 V Netzteil
    

    View Slide

25. On Air
    Flip-Dot
    Display
    

    View Slide

26. Inhalt?
    Platz für zwei Buchstaben
    Lauftext?
    "
    Updates sind laut!
    

    View Slide

27. Icons
    Mikro an Kamera an Luft ist rein
    Zufälliges
    Monster
    

    View Slide

28. Zuverlässigkeit !important
    

    View Slide

29. Steuerung
    Version 1: Button
    

    View Slide

30. Steuerung
    Version 1.5: Button mit LED
    

    View Slide

31. Steuerung
    Version 2: Macbook Micro- und Kamera-Aktivität (automatisch)
    https://obdev.at/products/microsnitch/
    

    View Slide

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
    

    View Slide

33. Pixel
    49
    

    View Slide

34. Pixel Editor
    Simple Webapp
    Etwas CSS Magie
    hyperapp!
    Live Vorschau *flip*flip*
    

    View Slide

35. Kids Pixel Editor
    #
    

    View Slide

36. JavaScript + Types
    Tooling Support
    (VSCode, IntelliJ, …)
    

    View Slide

37. JavaScript + Types
    Tooling Support
    (VSCode, IntelliJ, …)
    

    View Slide

38. JavaScript + Types
    Tooling Support
    (VSCode, IntelliJ, …)
    

    View Slide

39. Debugging
    Redux DevTools
    kompatibel
    https://github.com/andyrj/hyperapp-redux-devtools
    

    View Slide

40. Module Bundler
    like Webpack but
    Batteries
    Included
    Zero Config
    Schnell!
    https://parceljs.org/
    

    View Slide

41. Wenig Pixel - Viele Möglichkeiten
    Male eine Rakete!
    

    View Slide

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
    

    View Slide

43. Animations
    

    View Slide

44. Navigation State
    

    View Slide

45. Possible
    Takeaways
    

    View Slide

46. hyperapp rocks
    hyperapp + TypeScript ~= Elm
    https://github.com/JorgeBucaran/hyperapp
    

    View Slide

47. Keine Angst
    vor Hardware
    

    View Slide

48. Simple is
    Beautiful
    

    View Slide

49. Danke!
    neuland.conf 2018
    Michael Geers | @naltatis
    

    View Slide

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
    

    View Slide