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
380
Cleaner, scalable views with object oriented components
fabrik42
0
360
Other Decks in Programming
See All in Programming
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
6k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
250
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
230
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
200
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
27
8.1k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
AIのメモリー
watany
11
950
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
470
slogパッケージの深掘り
integral0515
0
120
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing for humans not robots
tammielis
253
25k
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Docker and Python
trallard
45
3.5k
Adopting Sorbet at Scale
ufuk
77
9.5k
GitHub's CSS Performance
jonrohan
1031
460k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
We Have a Design System, Now What?
morganepeng
53
7.7k
Scaling GitHub
holman
461
140k
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 fabrik42@gmail.com