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
150
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
Tractor Store 2.0 - TodoMVC for Micro Frontends
naltatis
0
64
Die nächste Framework Generation? Was kommt nach React, Vue.js und Angular?
naltatis
0
75
evcc – Open Source Sonne tanken
naltatis
0
1.1k
How Deep Is Your Micro Frontend
naltatis
2
740
Open Source Sonne tanken | Wallboxen mit evcc smarter machen
naltatis
1
2.2k
Energie & Feedback Loops
naltatis
0
250
Micro Frontends - Entkopplung bis zur Oberfläche
naltatis
1
630
Micro Frontends Lecture, USPCodeLab, University of São Paulo
naltatis
2
340
Inside the Micro Frontends Toolbox
naltatis
3
320
Other Decks in Technology
See All in Technology
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Designing for humans not robots
tammielis
247
25k
The Mythical Team-Month
searls
217
43k
The World Runs on Bad Software
bkeepers
PRO
63
11k
In The Pink: A Labor of Love
frogandcode
139
22k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Designing Experiences People Love
moore
136
23k
Bash Introduction
62gerente
607
210k
Rails Girls Zürich Keynote
gr2m
93
13k
Leading Effective Engineering Teams 2024
addyosmani
3
300
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
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