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
56
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
520
How to hamburger
k9ordon
0
59
Webpack FTW
k9ordon
1
600
Javascript Event Emitter
k9ordon
0
71
Other Decks in Technology
See All in Technology
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.8k
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
スレットハンティングについて知っておきたいこと
hacket
0
130
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
280
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
YesSQL, Process and Tooling at Scale
rocio
166
14k
BBQ
matthewcrist
82
9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
A Philosophy of Restraint
colly
200
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Six Lessons from altMBA
skipperchong
24
3.2k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Debugging Ruby Performance
tmm1
71
11k
GraphQLとの向き合い方2022年版
quramy
36
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
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