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
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
910
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
360
地理情報とAPIのトレンド
nagix
0
160
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Git: the NoSQL Database
bkeepers
PRO
423
64k
It's Worth the Effort
3n
181
27k
Embracing the Ebb and Flow
colly
81
4.3k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Gamification - CAS2011
davidbonilla
78
4.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Facilitating Awesome Meetings
lara
46
5.8k
Infographics Made Easy
chrislema
238
18k
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