Coping With The Broken Web

A talk on testing browsers

http://2013.frontendconf.ch/

Transcript

1. Coping With The
   Broken Web
   Rodney Rehm - @rodneyrehm
   

   View Slide

2. Where I come from
   

   View Slide

3. http://medialize.github.io/URI.js/
   

   View Slide

4. http://coding.smashingmagazine.com/2012/10/09/designing-javascript-apis-usability/
   

   View Slide

5. I like making stuff
   simple
   

   View Slide

6. … recently at work
   

   View Slide

7. View Slide

8. But…
   

   View Slide

9. View Slide

10. What do you mean by
    „broken“?
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. 
    … been around for ages
    

    View Slide

16. Events triggered when clicking on
    http://rodneyrehm.github.io/select-events/
    

    View Slide

17. View Slide

18. View Slide

19. Assumptions…
    http://www.freefoto.com/preview/41-23-4/American-highway-road
    

    View Slide

20. … Reality
    http://farm9.staticflickr.com/8019/7597671400_9dcf23ab7a_o_d.jpg
    

    View Slide

21. Check your
    assumptions. In fact,
    check your assumptions
    at the door.
    Lois McMaster Bujold
    

    View Slide

22. Despair?
    Opportunity!
    

    View Slide

23. http://www.flickr.com/photos/mennonitechurchusa-archives/7597671400/in/set-72157630434425392
    

    View Slide

24. Grokking Results
    

    View Slide

25. Single result set
    

    View Slide

26. View Slide

27. Aggregate results
    

    View Slide

28. Beware of the flood
    

    View Slide

29. Summary and details
    

    View Slide

30. Tools?
    

    View Slide

31. Running Tests
    

    View Slide

32. Running tests
    

    View Slide

33. Running tests
    

    View Slide

34. Running tests
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. https://github.com/rodneyrehm/testharness-helper
    

    View Slide

41. View Slide

42. Aggregating Results?
    

    View Slide

43. Storing results
    

    View Slide

44. Storing results
    

    View Slide

45. Test Environment?
    

    View Slide

46. (some) real devices!
    

    View Slide

47. (some) real devices!
    

    View Slide

48. virtual machines
    

    View Slide

49. virtual machines
    s
    

    View Slide

50. Which Browser Is This?
    

    View Slide

51. github.com/bestiejs/platform.js
    Identifying browsers
    

    View Slide

52. Utilities?
    

    View Slide

53. View Slide

54. Central System?
    

    View Slide

55. CSS WG HTML WG
    

    View Slide

56. View Slide

57. 64 %
    24 %
    11 %
    Approved
    In Review
    Unknown
    

    View Slide

58. Submitted in January
    

    View Slide

59. No Fun
    

    View Slide

60. Future?
    

    View Slide

61. View Slide

62. • identify and fix legal issues (who owns
    tests)
    • moving to github in progress
    • extract meta data from specifications for
    test coverage analysis and linking
    

    View Slide

63. • centralize test efforts across WGs
    • run tests in cloud and collect data
    • to build compatibility tables
    • show browser support in
    specifications, WebPlatform.org, anywhere
    

    View Slide

64. • use github for reviewing test suites
    • integrate adding tests into
    WebPlatform.org
    • make submitting bugs off a test dead
    simple
    • painless local development
    environment
    

    View Slide

65. View Slide

66. View Slide

67. View Slide

68. They‘re working on it!
    

    View Slide

69. Motivation?
    

    View Slide

70. your tests are run by
    W3C and browser vendors
    

    View Slide

71. collected data
    ===
    articles, workshops,
    talks
    ===
    street-cred
    

    View Slide

72. insights into
    specifications
    &
    credibility for
    mailing lists
    

    View Slide

73. You are part of the
    web, start caring for it!
    

    View Slide

74. When the web is
    not doing what you
    want it to, fight back,
    WRITE TESTS!
    Me, I think
    

    View Slide

75. Recap
    • testharness.js to run tests
    • firebase.io to aggregate data
    • real browsers, devices and BrowserStack
    • don‘t wait for W3C to get their testing
    sorted, have some fun now
    

    View Slide

76. View Slide

77. Thank You!
    Questions?
    

    View Slide

78. TestTheWebForward.org
    Join the Rebellion™
    

    View Slide