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
Headless Browser Experiments
Search
Christian Bäuerlein
January 28, 2016
Programming
0
340
Headless Browser Experiments
A short journey about taking screenshots with headless browsers.
Christian Bäuerlein
January 28, 2016
Tweet
Share
More Decks by Christian Bäuerlein
See All by Christian Bäuerlein
Single File Ruby Programs @ RubyUnconf 2023
fabrik42
0
130
Single File Ruby Programs 2.0
fabrik42
1
190
Single File Ruby Programs
fabrik42
0
200
Agile Software Development for Software Developers
fabrik42
0
42
Phoenix Live View
fabrik42
0
510
Rails API-only considerations
fabrik42
0
320
Org-Mode
fabrik42
0
460
Flocking Simulation with Phoenix Channels
fabrik42
1
340
Cleaner, scalable views with object oriented components
fabrik42
0
330
Other Decks in Programming
See All in Programming
Keeping it Ruby: Why Your Product Needs a Ruby SDK - RubyWorld 2024
envek
0
180
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
3
1k
今からはじめるAndroidアプリ開発 2024 / DevFest 2024
star_zero
0
1k
42 best practices for Symfony, a decade later
tucksaun
1
180
CSC305 Lecture 26
javiergs
PRO
0
140
fs2-io を試してたらバグを見つけて直した話
chencmd
0
220
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
1
360
Security_for_introducing_eBPF
kentatada
0
110
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
700
【re:Growth 2024】 Aurora DSQL をちゃんと話します!
maroon1st
0
770
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
110
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
Featured
See All Featured
Visualization
eitanlees
146
15k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Making Projects Easy
brettharned
116
5.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
It's Worth the Effort
3n
183
28k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Transcript
HEADLESS BROWSER EXPERIMENTS A short journey about taking screenshots with
headless browsers Christian Bäuerlein / @fabrik42
A headless browser is a web browser without a graphical
user interface.
PhantomJS SlimerJS CasperJS many more!
USE CASES Running test suites Web scraping / Automation Taking
screenshots
TAKING SCREENSHOTS
The project: A desktop website that lets users create a
custom mobile web app.
The challenges: How to render a list of created apps?
How to share your creations with others?
HTML IS NOT SHAREABLE URLs are easy to share. Textual
content is easy to share. Visual representations in HTML are not easy to share. But images are :)
SCREENSHOTS!
None
None
PHANTOMJS 1.X Good Just one binary Not So Good Project
was somehow stalled Bad No web font support :(
PHANTOMJS 2.0! Including web font support! *yay* Let's try again...
PROBLEM Present your work on a web page to somebody
who can't access it right now.
RESPONSIVE MOCKUPS github.com/fabrik42/responsive_mockups
RESPONSIVE MOCKUPS Takes screenshots of a webpage in different resolutions
and automatically applies it to mockup templates.
None
None
None
REQUIREMENTS Easy to install. No dependencies, if possible. Nice templates
to start right away.
EASY INSTALLATION brew install phantomjs git clone [responsive_mockups] && cd
responsive_mockups phantomjs example.js
EXAMPLE.JS var mockup = require('./index'); mockup.create({ url: 'https://flinc.org/home', template: 'flat_responsive_2',
output: 'my_mockup.png' });
HOW IT WORKS 1. User provides URL and template name.
2. PhantomJS generates screenshots based on different viewports. 3. PhantomJS assembles mockup image using a local HTML file and <canvas>.
None
None
None
None
None
None
None
None
RESPONSIVE MOCKUPS github.com/fabrik42/responsive_mockups
Mockup graphics are nice, but what about... MOCKUP PHOTOS?
None
None
DEMO TIME!
http://phantomjs.org/supported-web-standards.html WebGL CSS 3D Video and Audio The following features,
due to the nature of PhantomJS, are irrelevant:
None
Atom Editor Visual Studio Code Slack Mapbox Map Designer ...
nightmare.js!
Knows how to WebGL :)
None
ONE MORE THING...
Now that we mastered all kind of images, what about...
MOVIES!
None
STOP MOTION IN HTML & JS Create an animation Stop
at every frame Make a screenshot Go to the next frame
DEMO TIME!
Remember: We wanted to make things shareable.
CUSTOMIZED MOVIES!
Manipulate the movie while rendering the frames browser .evaluate(function (currentFrame)
{ stage.goto(currentFrame); }, currentFrame)
ADVANCED DEMO TIME!
Q & A Christian Bäuerlein github.com/fabrik42 twitter.com/fabrik42
[email protected]