Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Headless Browser Experiments

Christian Bäuerlein
January 28, 2016
Programming
0
170

Headless Browser Experiments

A short journey about taking screenshots with headless browsers.

Christian Bäuerlein

January 28, 2016
Tweet

More Decks by Christian Bäuerlein

See All by Christian Bäuerlein
Single File Ruby Programs 2.0
fabrik42
1
93
Single File Ruby Programs
fabrik42
0
88
Agile Software Development for Software Developers
fabrik42
0
29
Phoenix Live View
fabrik42
0
250
Rails API-only considerations
fabrik42
0
150
Org-Mode
fabrik42
0
250
Flocking Simulation with Phoenix Channels
fabrik42
1
150
Cleaner, scalable views with object oriented components
fabrik42
0
180
Coding Night 2015
fabrik42
0
180

Other Decks in Programming

See All in Programming
どのくらい速くなるの？Laravel MixとViteを性能比較してみました！
akitotsukahara
0
160
Arquiteturas Multi-Tenant RubyConf 2022
sobrinho
0
100
SwiftUI Navigation のすべて
kalupas226
8
3k
I shall define this only once
freekmurze
0
210
Swift Concurrency Next Step
shiz
7
740
Perl でも GraphQL を使いたい
nakaokat
0
1.2k
セキュリティスキャンツール cdk-nag を使ってみた
kinyok
0
180
SASユーザー総会2022：Time-varying treatmentsに対するIPTW法による因果効果の推定
norihirosuzuki
0
210
CoreGraphicsでドット絵を描こう
noppefoxwolf
0
400
iOSのウィジェットでも猫走らせたい / iOSDC Japan 2022 Day2 Unconference
kyome22
3
510
iOS ライブラリをセルフサービスで生成する仕組み
junkpiano
2
190
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
6
9.2k

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
A Modern Web Designer's Workflow
chriscoyier
690
180k
Three Pipe Problems
jasonvnalue
89
8.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
235
1.1M
Designing for Performance
lara
597
64k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
BBQ
matthewcrist
74
8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
Faster Mobile Websites
deanohume
294
29k
Unsuck your backbone
ammeep
659
55k
4 Signs Your Business is Dying
shpigford
169
20k
Bash Introduction
62gerente
598
210k

Transcript

  1. HEADLESS BROWSER EXPERIMENTS A short journey about taking screenshots with

    headless browsers Christian Bäuerlein / @fabrik42

  2. A headless browser is a web browser without a graphical

    user interface.

  3. PhantomJS SlimerJS CasperJS many more!

  4. USE CASES Running test suites Web scraping / Automation Taking

    screenshots

  5. TAKING SCREENSHOTS

  6. The project: A desktop website that lets users create a

    custom mobile web app.

  7. The challenges: How to render a list of created apps?

    How to share your creations with others?

  8. 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 :)

  9. SCREENSHOTS!

  10. None
  11. None

  12. PHANTOMJS 1.X Good Just one binary Not So Good Project

    was somehow stalled Bad No web font support :(

  13. PHANTOMJS 2.0! Including web font support! *yay* Let's try again...

  14. PROBLEM Present your work on a web page to somebody

    who can't access it right now.

  15. RESPONSIVE MOCKUPS github.com/fabrik42/responsive_mockups

  16. RESPONSIVE MOCKUPS Takes screenshots of a webpage in different resolutions

    and automatically applies it to mockup templates.
  17. None
  18. None
  19. None

  20. REQUIREMENTS Easy to install. No dependencies, if possible. Nice templates

    to start right away.

  21. EASY INSTALLATION brew install phantomjs git clone [responsive_mockups] && cd

    responsive_mockups phantomjs example.js

  22. EXAMPLE.JS var mockup = require('./index'); mockup.create({ url: 'https://flinc.org/home', template: 'flat_responsive_2',

    output: 'my_mockup.png' });

  23. 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>.
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None

  32. RESPONSIVE MOCKUPS github.com/fabrik42/responsive_mockups

  33. Mockup graphics are nice, but what about... MOCKUP PHOTOS?

  34. None
  35. None

  36. DEMO TIME!

  37. http://phantomjs.org/supported-web-standards.html WebGL CSS 3D Video and Audio The following features,

    due to the nature of PhantomJS, are irrelevant:
  38. None

  39. Atom Editor Visual Studio Code Slack Mapbox Map Designer ...

    nightmare.js!

  40. Knows how to WebGL :)

  41. None

  42. ONE MORE THING...

  43. Now that we mastered all kind of images, what about...

  44. MOVIES!

  45. None

  46. STOP MOTION IN HTML & JS Create an animation Stop

    at every frame Make a screenshot Go to the next frame

  47. DEMO TIME!

  48. Remember: We wanted to make things shareable.

  49. CUSTOMIZED MOVIES!

  50. Manipulate the movie while rendering the frames browser .evaluate(function (currentFrame)

    { stage.goto(currentFrame); }, currentFrame)

  51. ADVANCED DEMO TIME!

  52. Q & A Christian Bäuerlein github.com/fabrik42 twitter.com/fabrik42 fabrik42@gmail.com