Better by Proxy at Smashing Conf NY

Better by Proxy at Smashing Conf NY

Proxy browsers get a bad rep. “They’re antiques.” “They behave in weird ways.” “They’re crappy browsers.” But a deeper understanding of what they accomplish, and what they do behind the scenes, reveals that they’re actually quite ingenious. And far from becoming outdated, they’re uniquely positioned to bring the web to the next wave of people and devices around the world.

We’ll look some of the more popular proxy browsers today, what they do, how to ensure your site works well on them, and why that’s so important.

Presented at Smashing Conf, NY in New York, NY on June 16, 2015.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

June 16, 2015
Tweet

Transcript

  1. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 8.
  6. 9.
  7. 10.
  8. 11.
  9. 12.

  10. 13.
  11. 14.
  12. 15.

    0 3000 6000 9000 12000 Kenya Pakistan Iran India Azerbaijan

    Armenia China Belarus Kazakhstan Bosnia Georgia Macedonia US
  13. 16.

    0 3000 6000 9000 12000 Kenya Pakistan Iran India Azerbaijan

    Armenia China Belarus Kazakhstan Bosnia Georgia Macedonia US 10x
  14. 17.
  15. 18.
  16. 24.
  17. 25.

    “…as bandwidth grows, and as processing power grows, and as

    browsers get better we just keep filling everything up. Jeff Veen Path to Performance Podcast
  18. 26.
  19. 27.
  20. 28.
  21. 29.
  22. 36.
  23. 38.
  24. 39.
  25. 40.
  26. 41.
  27. 42.
  28. 43.
  29. 44.
  30. 45.
  31. 46.
  32. 52.
  33. 53.
  34. 54.
  35. 55.
  36. 56.
  37. 57.
  38. 59.
  39. 60.
  40. 61.
  41. 62.

    23%

  42. 63.
  43. 66.
  44. 67.
  45. 68.
  46. 69.
  47. 70.
  48. 71.
  49. 83.

    POTENTIAL ISSUE #3:
 Image transcoding or compression may result
 in

    blurry images SOLUTION:
 Use Cache-Control: no-transform
  50. 84.
  51. 85.
  52. 88.
  53. 90.
  54. 91.
  55. 92.
  56. 93.
  57. 94.
  58. 95.
  59. 96.
  60. 98.
  61. 99.
  62. 100.
  63. 101.
  64. 102.
  65. 105.
  66. 106.

    contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout

    mousewheel resize scroll touchcancel touchend touchmove touchstart
  67. 109.
  68. 110.
  69. 111.
  70. 112.

    Limit data consumed and limit impact on device while providing

    a nearly equal experience to a typical browser.
  71. 113.

    contextmenu dblclick error keydown keypress keyup mousemove mouseenter mouseleave mouseout

    mousewheel resize scroll touchcancel touchend touchmove touchstart
  72. 114.
  73. 117.
  74. 124.
  75. 125.
  76. 126.
  77. 127.

    if('querySelector' in document && 'localStorage' in window && 'addEventListener' in

    window) { // bootstrap the javascript application } Sure, why not.
  78. 128.

    var hasStorage = (function() { try { localStorage.setItem(mod, mod); localStorage.removeItem(mod);

    return true; } catch (exception) { return false; } }()); if( 'querySelector' in document && hasStorage && 'addEventListener' in window ){ // bootstrap the javascript application }
  79. 129.

    var hasStorage = (function() { try { localStorage.setItem("test", "mod" );

    localStorage.removeItem("test"); return true; } catch (exception) { if (exception && exception.name=="QuotaExceededError" && localStorage.length == 0) { return true; } else { return false; } return false; } }()); if( 'querySelector' in document && hasStorage && 'addEventListener' in window ){ //cuts the mustard }
  80. 134.
  81. 136.
  82. 137.
  83. 138.
  84. 140.
  85. 141.

    var hasStorage = (function() { try { localStorage.setItem("test", "mod" );

    localStorage.removeItem("test"); return true; } catch (exception) { if (exception && exception.name=="QuotaExceededError" && localStorage.length == 0) { return true; } else { return false; } return false; } }()); if( 'querySelector' in document && hasStorage && 'addEventListener' in window ){ //cuts the mustard }
  86. 145.
  87. 146.
  88. 147.
  89. 148.
  90. 153.

    The journey begins by letting go of control, and becoming

    flexible. “ John Allsopp Dao of Web Design
  91. 154.