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
110
Micro Frontends - True End-to-End Decoupling in Practice
naltatis
1
180
evcc: Sonne, Autos & dynamische Stromtarife
naltatis
0
810
Tractor Store 2.0 - TodoMVC for Micro Frontends
naltatis
0
270
Die nächste Framework Generation? Was kommt nach React, Vue.js und Angular?
naltatis
0
210
evcc – Open Source Sonne tanken
naltatis
0
1.9k
How Deep Is Your Micro Frontend
naltatis
2
880
Open Source Sonne tanken | Wallboxen mit evcc smarter machen
naltatis
1
2.5k
Energie & Feedback Loops
naltatis
1
330
Other Decks in Technology
See All in Technology
IAMのマニアックな話 2025を執筆して、 見えてきたAWSアカウント管理の現在
nrinetcom
PRO
4
600
SFTPコンテナからファイルをダウンロードする
dip
0
410
vLLM meetup Tokyo
jpishikawa
1
240
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
310
「実体」で築く共通認識: 開発現場のコミュニケーション最適化 / Let's Get on the Same Page with Concrete Artifacts: Optimization of Communication in dev teams
kazizi55
0
150
Model Mondays S2E01: Advanced Reasoning
nitya
0
410
AWS全冠したので振りかえってみる
tajimon
0
150
エンジニア採用から始まる技術広報と組織づくり/202506lt
nishiuma
8
1.7k
讓測試不再 BB! 從 BDD 到 CI/CD, 不靠人力也能 MVP
line_developers_tw
PRO
0
250
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
420
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
blueb
0
130
OpenTelemetry Collector internals
ymotongpoo
5
560
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
RailsConf 2023
tenderlove
30
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
480
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Writing Fast Ruby
sferik
628
61k
Code Review Best Practice
trishagee
68
18k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Navigating Team Friction
lara
186
15k
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