Headless Browser Experiments

A short journey about taking screenshots with headless browsers.

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
    fabrik42@gmail.com
    

    View Slide