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
responsive view - viennajs 2013-08
Search
Klemens Gordon
August 28, 2013
Technology
0
60
responsive view - viennajs 2013-08
slides from my talk about
http://rv.k94n.com
on the viennajs meetup
Klemens Gordon
August 28, 2013
Tweet
Share
More Decks by Klemens Gordon
See All by Klemens Gordon
Yo Building Progressive Framework-less Vanilla Web-applications
k9ordon
0
150
A loosely coupled front-end
k9ordon
2
600
How to hamburger
k9ordon
0
63
Webpack FTW
k9ordon
1
670
Javascript Event Emitter
k9ordon
0
77
Other Decks in Technology
See All in Technology
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
7
4.2k
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
550
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
910
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
110
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.9k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
1
520
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.1k
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
210
Node.js 2025: What's new and what's next
ruyadorno
0
580
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
0
320
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Mobile First: as difficult as doing things right
swwweet
225
10k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
910
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Six Lessons from altMBA
skipperchong
29
4k
Facilitating Awesome Meetings
lara
56
6.6k
Practical Orchestrator
shlominoach
190
11k
Transcript
responsiveview develop & explorer responsive webdesign
frontend developer at karriere.at love vanilla js twitter.com/thisisgordon github.com/k9ordon hi.k94n.com
klemens gordon
current task optimizing the frontend of karriere.at for a lot
of screen sizes
the problem resizing, resizing, resizing.
whats already on the table bookletmarks, extensions, websites, … -http://responsinator.com/?url=k94n.com
-http://lab.maltewassermann.com/viewport- resizer AND a lot of devices (booting, unlocking, browser, typing, wlan …)
the initial plan show a website in different device sizes
like real devices lying on a desk keep it webkit - because I love the dev tools
let's-a go! a very basic solution. [[320,480],[320,500]].forEach(function(s){ var i =
document.createElement('iframe'); i.height = s[1]; i.width = s[0]; i.src = 'http://k94n.com'; document.body.appendChild(i); }); http://jsfiddle.net/k9ordon/UR2WK
what it looks like Browser Window 11” device 1 device
2 device 3
limitations - changing urls - cross domain issues (no iframe
to host connection) - size issues (iframe size is device pixel size) - cpu …
use cases - open tool with a target page loads
in every size - synced actions - change page from a device - scroll a device - focus a device - keydown
the ui device stage Controls: href, device-set, device-scale size device
1 device 2 device 3 device 4
Demos http://rv.k94n.com/#http://www.google.com/nexus/7/ http://rv.k94n.com/#http://mashable.com/ http://rv.k94n.com/#http://getbootstrap.com/examples/jumbotron/ http://rv.k94n.com/#http://thenextweb.com/ http://rv.k94n.com/#http://skinnyties.com/ http://rv.k94n.com/#http://aneventapart.com/
None
device sizing one does not simply put a 15” viewport
into a 11” screen easy, webkitTransform: scale(*) (scale does not resize the box model) device.js#L100
None
the crossdomain issue - keep devices in sync (scroll, location
…) => postMessage() => Weeeeeee chrome extension version! - no problem on initial load good for sharing without extension
communicating across domains 1/5 chrome extensions contentscript injects a waiter
"content_scripts": [{ "matches": ["http://*/*"], "js": ["config.js", "client.js"], "run_at": "document_idle", "all_frames": true }]
communicating across domains 2/5 waiter sends handshake to top window
& listens to messages top.postMessage({method: 'handshake', h: window.innerHeight, w: window.innerWidth, l: window.location.href, o:window.location. origin, r:document.referrer}, rv_host); client.js#L4
communicating across domains 3/5 top runs an instance of _stage,
validates the handshake and sends back a success handshake stage.js#L66
communicating across domains 4/5 waiter recives handshake & boots client
script
communicating across domains 5/5 client has event listeners on iframe
document + posts messages to top client.js#L55
Way to go ... - user agents - more +
custom device sets - rotateable devices - share/explore responsive sites - create sharable screenshots
None