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
62
Micro Frontends - True End-to-End Decoupling in Practice
naltatis
1
140
evcc: Sonne, Autos & dynamische Stromtarife
naltatis
0
650
Tractor Store 2.0 - TodoMVC for Micro Frontends
naltatis
0
250
Die nächste Framework Generation? Was kommt nach React, Vue.js und Angular?
naltatis
0
190
evcc – Open Source Sonne tanken
naltatis
0
1.8k
How Deep Is Your Micro Frontend
naltatis
2
850
Open Source Sonne tanken | Wallboxen mit evcc smarter machen
naltatis
1
2.4k
Energie & Feedback Loops
naltatis
1
320
Other Decks in Technology
See All in Technology
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
220
IVRyにおけるNLP活用と NLP2025の関連論文紹介
keisukeosone
0
170
Multitenant 23ai の全貌 - 機能・設計・実装・運用からマイクロサービスまで
oracle4engineer
PRO
2
180
AIエージェントの地上戦 〜開発計画と運用実践 / 2025/04/08 Findy W&Bミートアップ #19
smiyawaki0820
25
8.2k
はじめてのSDET / My first challenge as a SDET
bun913
0
160
テキスト解析で見る PyCon APAC 2025 セッション&スピーカートレンド分析
negi111111
0
270
「家族アルバム みてね」を支えるS3ライフサイクル戦略
fanglang
4
640
”知のインストール”戦略:テキスト資産をAIの文脈理解に活かす
kworkdev
PRO
9
4k
ペアーズにおけるData Catalog導入の取り組み
hisamouna
0
270
Re:VIEWで書いた「Compose で Android の edge-to-edge に対応する」をRoo Codeで発表資料にしてもらった
tomoya0x00
0
260
「それはhowなんよ〜」のガイドライン #orestudy
77web
9
2.4k
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
180
Featured
See All Featured
Become a Pro
speakerdeck
PRO
27
5.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Fireside Chat
paigeccino
37
3.4k
Gamification - CAS2011
davidbonilla
81
5.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
The Cult of Friendly URLs
andyhume
78
6.3k
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