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 Slide

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

    View Slide

  3. PhantomJS
    SlimerJS
    CasperJS
    many more!

    View Slide

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

    View Slide

  5. TAKING SCREENSHOTS

    View Slide

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

    View Slide

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

    View 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 Slide

  9. SCREENSHOTS!

    View Slide

  10. View Slide

  11. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. RESPONSIVE MOCKUPS
    github.com/fabrik42/responsive_mockups

    View Slide

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

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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 .

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. RESPONSIVE MOCKUPS
    github.com/fabrik42/responsive_mockups

    View Slide

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

    View Slide

  34. View Slide

  35. View Slide

  36. DEMO TIME!

    View Slide

  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:

    View Slide

  38. View Slide

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

    View Slide

  40. Knows how to WebGL :)

    View Slide

  41. View Slide

  42. ONE MORE THING...

    View Slide

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

    View Slide

  44. MOVIES!

    View Slide

  45. View Slide

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

    View Slide

  47. DEMO TIME!

    View Slide

  48. Remember: We wanted to make things shareable.

    View Slide

  49. CUSTOMIZED MOVIES!

    View Slide

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

    View Slide

  51. ADVANCED DEMO TIME!

    View Slide

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

    View Slide