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
140
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
Die nächste Framework Generation? Was kommt nach React, Vue.js und Angular?
naltatis
0
51
evcc – Open Source Sonne tanken
naltatis
0
700
How Deep Is Your Micro Frontend
naltatis
2
680
Open Source Sonne tanken | Wallboxen mit evcc smarter machen
naltatis
1
2.1k
Energie & Feedback Loops
naltatis
0
210
Micro Frontends - Entkopplung bis zur Oberfläche
naltatis
1
580
Micro Frontends Lecture, USPCodeLab, University of São Paulo
naltatis
2
320
Inside the Micro Frontends Toolbox
naltatis
3
280
Bye Bye Frontend Monolith: Accelerating Feature Development with Micro Frontends
naltatis
3
270
Other Decks in Technology
See All in Technology
DX企業CTOとして考える技術への向き合い方
shoheitai
0
110
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
3.3k
Handling focus in 2024
tahia910
0
570
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
2
500
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
7
1.4k
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
3.4k
同じ様なUIをiOS/Android間で合わせるヒントNo.2
fumiyasac0921
1
110
Cracking the KubeCon CfP
inductor
2
280
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
160
Secrets of a PowerShell "Guru"
guyrleech
1
110
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
280
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
1.1k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
How STYLIGHT went responsive
nonsquared
92
4.8k
Embracing the Ebb and Flow
colly
80
4.2k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Web Components: a chance to create the future
zenorocha
306
41k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Web development in the modern age
philhawksworth
203
10k
Bash Introduction
62gerente
605
210k
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