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

Headless Browser Experiments

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

Other Decks in Programming

Transcript

  1. HEADLESS BROWSER
    EXPERIMENTS
    A short journey about taking screenshots
    with headless browsers
    Christian Bäuerlein / @fabrik42

    View full-size slide

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

    View full-size slide

  3. PhantomJS
    SlimerJS
    CasperJS
    many more!

    View full-size slide

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

    View full-size slide

  5. TAKING SCREENSHOTS

    View full-size slide

  6. The project:
    A desktop website that lets users
    create a custom mobile web app.

    View full-size slide

  7. The challenges:
    How to render a list of created apps?
    How to share your creations with others?

    View full-size slide

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

    View full-size slide

  9. SCREENSHOTS!

    View full-size slide

  10. PHANTOMJS 1.X
    Good
    Just one binary
    Not So Good
    Project was somehow stalled
    Bad
    No web font support :(

    View full-size slide

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

    View full-size slide

  12. PROBLEM
    Present your work on a web page
    to somebody who can't access it right now.

    View full-size slide

  13. RESPONSIVE MOCKUPS
    github.com/fabrik42/responsive_mockups

    View full-size slide

  14. RESPONSIVE MOCKUPS
    Takes screenshots of a webpage in different resolutions and
    automatically applies it to mockup templates.

    View full-size slide

  15. REQUIREMENTS
    Easy to install.
    No dependencies, if possible.
    Nice templates to start right away.

    View full-size slide

  16. EASY INSTALLATION
    brew install phantomjs
    git clone [responsive_mockups] && cd responsive_mockups
    phantomjs example.js

    View full-size slide

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

    View full-size slide

  18. 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 .

    View full-size slide

  19. RESPONSIVE MOCKUPS
    github.com/fabrik42/responsive_mockups

    View full-size slide

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

    View full-size slide

  21. http://phantomjs.org/supported-web-standards.html
    WebGL
    CSS 3D
    Video and Audio
    The following features, due to the nature of
    PhantomJS, are irrelevant:

    View full-size slide

  22. Atom Editor
    Visual Studio Code
    Slack
    Mapbox Map Designer
    ... nightmare.js!

    View full-size slide

  23. Knows how to WebGL :)

    View full-size slide

  24. ONE MORE THING...

    View full-size slide

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

    View full-size slide

  26. STOP MOTION IN HTML & JS
    Create an animation
    Stop at every frame
    Make a screenshot
    Go to the next frame

    View full-size slide

  27. Remember: We wanted to make things shareable.

    View full-size slide

  28. CUSTOMIZED MOVIES!

    View full-size slide

  29. Manipulate the movie while rendering the frames
    browser
    .evaluate(function (currentFrame) {
    stage.goto(currentFrame);
    }, currentFrame)

    View full-size slide

  30. ADVANCED DEMO TIME!

    View full-size slide

  31. Q & A
    Christian Bäuerlein
    github.com/fabrik42
    twitter.com/fabrik42
    [email protected]

    View full-size slide