Hyperapp, Flipdots & Pixelkunst

Slide 1

Slide 1 text

Hyperapp Flipdots & Pixelkunst neuland.conf 2018 Michael Geers | @naltatis

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Interaktionen Zentraler State Template Initialisierung counter.js hyperapp in action

Slide 4

Slide 4 text

Interaktionen Zentraler State Template Initialisierung counter.jsx hyperapp in action

Slide 5

Slide 5 text

And Now for Something Completely Diﬀerent

Slide 6

Slide 6 text

Homeoffice

Slide 7

Slide 7 text

Home

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

+ = @AndreSchroeter

Slide 10

Slide 10 text

Keine Glastür Headset für Musik !

Slide 11

Slide 11 text

On Air LED

Slide 12

Slide 12 text

Mate Kisten Display 32C3 Hamburg

Slide 13

Slide 13 text

Mechanische Displays

Slide 14

Slide 14 text

Split-Flap Display

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Flip-Dot Display

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

https://breakfastny.com/flip-disc

Slide 21

Slide 21 text

AlfaZeta - Flip-Dot Boards XY5 - https://flipdots.com/ 7x7 Dev Board - Serielle Steuerung RS485  Arduino/RPi *yay*  - 24V Spannung - Erweiterbar über  Steckverbindung

Slide 22

Slide 22 text

Serielle Ansteuerung node.js

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

On Air Flip-Dot Display

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Zuverlässigkeit !important

Slide 29

Slide 29 text

Steuerung Version 1: Button

Slide 30

Slide 30 text

Steuerung Version 1.5: Button mit LED

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Pixel 49

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Kids Pixel Editor #

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Wenig Pixel - Viele Möglichkeiten Male eine Rakete!

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Animations

Slide 44

Slide 44 text

Navigation State

Slide 45

Slide 45 text

Possible Takeaways

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Keine Angst vor Hardware

Slide 48

Slide 48 text

Simple is Beautiful

Slide 49

Slide 49 text

Danke! neuland.conf 2018 Michael Geers | @naltatis

Slide 50

Slide 50 text

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