Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hyperapp, Flipdots & Pixelkunst
Search
Michael Geers
October 19, 2018
Technology
0
170
Hyperapp, Flipdots & Pixelkunst
Vortrag auf der neuland.conf, Bremen
https://www.youtube.com/watch?v=IeLGfhHNqM8
Michael Geers
October 19, 2018
Tweet
Share
More Decks by Michael Geers
See All by Michael Geers
More Hearts than Stars: Smart Charging & Community Funding
naltatis
0
150
Micro Frontends - True End-to-End Decoupling in Practice
naltatis
1
210
evcc: Sonne, Autos & dynamische Stromtarife
naltatis
0
1k
Tractor Store 2.0 - TodoMVC for Micro Frontends
naltatis
0
300
Die nächste Framework Generation? Was kommt nach React, Vue.js und Angular?
naltatis
0
240
evcc – Open Source Sonne tanken
naltatis
0
2k
How Deep Is Your Micro Frontend
naltatis
2
910
Open Source Sonne tanken | Wallboxen mit evcc smarter machen
naltatis
1
2.5k
Energie & Feedback Loops
naltatis
1
340
Other Decks in Technology
See All in Technology
Where will it converge?
ibknadedeji
0
200
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
150
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
230
いまさら聞けない ABテスト入門
skmr2348
1
230
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
690
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
460
社内お問い合わせBotの仕組みと学び
nish01
1
530
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
120
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
140
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
110
Featured
See All Featured
Visualization
eitanlees
148
16k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
It's Worth the Effort
3n
187
28k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Automating Front-end Workflow
addyosmani
1371
200k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Statistics for Hackers
jakevdp
799
220k
Thoughts on Productivity
jonyablonski
70
4.9k
Transcript
Hyperapp Flipdots & Pixelkunst neuland.conf 2018 Michael Geers | @naltatis
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
Interaktionen Zentraler State Template Initialisierung counter.js hyperapp in action
Interaktionen Zentraler State Template Initialisierung counter.jsx hyperapp in action
And Now for Something Completely Different
Homeoffice
Home
None
+ = @AndreSchroeter
Keine Glastür Headset für Musik !
On Air LED
Mate Kisten Display 32C3 Hamburg
Mechanische Displays
Split-Flap Display
None
None
https://www.magazin.com/wanduhr-klappzahlenuhr-brick-p1463864/
Flip-Dot Display
None
https://breakfastny.com/flip-disc
AlfaZeta - Flip-Dot Boards XY5 - https://flipdots.com/ 7x7 Dev Board
- Serielle Steuerung RS485 Arduino/RPi *yay* - 24V Spannung - Erweiterbar über Steckverbindung
Serielle Ansteuerung node.js
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
RS485 to USB Adapter Raspberry Pi Zero W Konfiguration (Adresse/Mode)
Strom Steuersignal Rückseite 24 V Netzteil
On Air Flip-Dot Display
Inhalt? Platz für zwei Buchstaben Lauftext? " Updates sind laut!
Icons Mikro an Kamera an Luft ist rein Zufälliges Monster
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 Micro Snitch Log-File On-Air Daemon Webservice Flip-Dot Raspberry Pi
Macbook PUT /status/audio PUT /status/video PUT /status/idle Local Wifi
Pixel 49
Pixel Editor Simple Webapp Etwas CSS Magie hyperapp! Live Vorschau
*flip*flip*
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/ https://github.com/naltatis/7x7ninja Und nein, das ist nicht
mit meinem Display gekoppelt :) Responsive Progressive Webapp Lighthouse Score 100 :) 11kb Script
Animations
Navigation State
Possible Takeaways
hyperapp rocks hyperapp + TypeScript ~= Elm https://github.com/JorgeBucaran/hyperapp
Keine Angst vor Hardware
Simple is Beautiful
Danke! neuland.conf 2018 Michael Geers | @naltatis
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