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
380
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
150
Single File Ruby Programs 2.0
fabrik42
1
200
Single File Ruby Programs
fabrik42
0
250
Agile Software Development for Software Developers
fabrik42
0
48
Phoenix Live View
fabrik42
0
580
Rails API-only considerations
fabrik42
0
360
Org-Mode
fabrik42
0
510
Flocking Simulation with Phoenix Channels
fabrik42
1
370
Cleaner, scalable views with object oriented components
fabrik42
0
360
Other Decks in Programming
See All in Programming
テスト駆動Kaggle
isax1015
1
870
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
210
構文解析器入門
ydah
7
1.8k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.9k
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9.3k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
290
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
2
490
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
240
PHPカンファレンス関西2025 基調講演
sugimotokei
5
930
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
A designer walks into a library…
pauljervisheath
207
24k
A Tale of Four Properties
chriscoyier
160
23k
Scaling GitHub
holman
461
140k
Designing Experiences People Love
moore
142
24k
How to Ace a Technical Interview
jacobian
278
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Automating Front-end Workflow
addyosmani
1370
200k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Building Applications with DynamoDB
mza
95
6.5k
Adopting Sorbet at Scale
ufuk
77
9.5k
Designing for Performance
lara
610
69k
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]