Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
I’M OFFLINE
COOL, WHAT NOW?
- we <3 ViewSource -
OLA GASIDLO
Lead Developer
CTO
AngefragtJS
@misprintedtype
Trigger Warnings
death / pandemic
animated gifs
@misprintedtype
Trigger Warnings
death / pandemic
animated gifs
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
„OFFLINE FIRST“ MEANS
GETTING ON SCREEN WITHOUT
A NETWORK REQUEST…
Jake Archibald @twitter
…THE MORE THAT’S THERE
BEFORE THE NETWORK, THE
MORE OFFLINE FIRST IT IS.
Jake Archibald @twitter
@misprintedtype
TELL ME…
@misprintedtype
WRONG
@misprintedtype
WHY?
@misprintedtype
@misprintedtype
@misprintedtype
COMMUNICATION
@misprintedtype
@misprintedtype
@misprintedtype
COMMUNICATION
INFORMATION
@misprintedtype
@misprintedtype
@misprintedtype
COMMUNICATION
INFORMATION
EMPOWERMENT
@misprintedtype
@misprintedtype
COMMUNICATION
INFORMATION
EMPOWERMENT
LOVE
@misprintedtype
@misprintedtype
COMMUNICATION
INFORMATION
EMPOWERMENT
LOVE
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
„YOU WANTED A BANANA BUT
WHAT YOU GOT WAS A
GORILLA HOLDING THE
BANANA AND THE ENTIRE
JUNGLE.“
Joe Armstrong
@misprintedtype
COMMUNICATION
INFORMATION
EMPOWERMENT
LOVE
@misprintedtype
@misprintedtype
@misprintedtype
WEALTHY WESTERN WEB
Bruce Lawson
@misprintedtype
https://speakerdeck.com/benschwarz/vanity-performance-metrics-looking-beyond-the-numbers
@misprintedtype
https://speakerdeck.com/benschwarz/vanity-performance-metrics-looking-beyond-the-numbers
500MB PER MONTH
Bastian Albers
2,4MB AVERAGE PAGE SIZE
= 6,94 SITES/DAY
Bastian Albers
~22MIN 720P VIDEO
Bastian Albers
TENS OF THOUSANDS
OF EMAILS
Bastian Albers
https://www.whistleout.com.au/MobilePhones/Guides/Mobile-broadband-usage-guide
@misprintedtype
@misprintedtype
@misprintedtype
the REAL world
@misprintedtype
the Router
@misprintedtypehttps://ingevald.files.wordpress.com/2009/02/sweden-river-fog-morning-looking-at-sun.jpg
@misprintedtype
@misprintedtype
(SNC - Service)
Using NAT zones, DTN routing
&& DakNet network.
Saami Network Connectivity
@misprintedtype
Learnings (requests & assets)
@misprintedtype
Check your requests!
@misprintedtype
beware of Lie-Fi
@misprintedtype
queries of bandwidth
@misprintedtype
queries of bandwidth
@misprintedtype
enhance assets with network
@misprintedtype
data over assets
@misprintedtype
@misprintedtype
SVG over IMG
@misprintedtype
base64 over IMG
@misprintedtype
base64 is expensive && heavy
@misprintedtype
the Pandemic
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
rm -rf ~/
@misprintedtype
first learning (data)
@misprintedtype
Decouple server && client and
build a task / message system.
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
save data locally && frequently
@misprintedtype
partial data updates
@misprintedtype
partial data updates
@misprintedtype
@misprintedtype
@misprintedtype
second learning (schema)
@misprintedtype
define flexible data schema
@misprintedtype
prevent merge conflicts
@misprintedtype
prevent merge conflicts
@misprintedtype
10/2014 12/2015
@misprintedtype
the Pizza
@misprintedtype
@misprintedtype
@misprintedtype
Learnings (security)
@misprintedtype
validate on server
@misprintedtype
validate on server
@misprintedtype
CORS <3
@misprintedtype
encrypt local data
@misprintedtype
@misprintedtype
@misprintedtype
use JSON Web Tokens
@misprintedtype
BONUS
@misprintedtype
the Rally
@misprintedtypehttps://en.wikipedia.org/wiki/Mongol_Rally#After_the_rally
@misprintedtypehttp://www.minicong.com/lo-tec/
@misprintedtype
@misprintedtype
1
2
3
4
5
6
7
8
1 1
1 1
1 1
1 1
1 1
0 0
0 0
0 0
@misprintedtype
Learnings
@misprintedtype
Rethink how to use technology,
by thinking about the issue.
Not about the tools.
@misprintedtype
You rock!
@misprintedtype
@misprintedtype
@misprintedtype
we <3 you!
@misprintedtype && @styladev
Upcoming SlideShare
Loading in …5
×

Ola Gasidlo: Cool, What Now? I'm Offline

681 views

Published on

Mozilla's View Source 2016 in Berlin

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ola Gasidlo: Cool, What Now? I'm Offline

  1. 1. I’M OFFLINE COOL, WHAT NOW? - we <3 ViewSource -
  2. 2. OLA GASIDLO Lead Developer CTO AngefragtJS
  3. 3. @misprintedtype Trigger Warnings death / pandemic animated gifs
  4. 4. @misprintedtype Trigger Warnings death / pandemic animated gifs
  5. 5. @misprintedtype
  6. 6. @misprintedtype
  7. 7. @misprintedtype
  8. 8. @misprintedtype
  9. 9. @misprintedtype
  10. 10. @misprintedtype
  11. 11. @misprintedtype
  12. 12. „OFFLINE FIRST“ MEANS GETTING ON SCREEN WITHOUT A NETWORK REQUEST… Jake Archibald @twitter
  13. 13. …THE MORE THAT’S THERE BEFORE THE NETWORK, THE MORE OFFLINE FIRST IT IS. Jake Archibald @twitter
  14. 14. @misprintedtype TELL ME…
  15. 15. @misprintedtype WRONG
  16. 16. @misprintedtype WHY?
  17. 17. @misprintedtype
  18. 18. @misprintedtype
  19. 19. @misprintedtype COMMUNICATION
  20. 20. @misprintedtype
  21. 21. @misprintedtype
  22. 22. @misprintedtype COMMUNICATION INFORMATION
  23. 23. @misprintedtype
  24. 24. @misprintedtype
  25. 25. @misprintedtype COMMUNICATION INFORMATION EMPOWERMENT
  26. 26. @misprintedtype
  27. 27. @misprintedtype COMMUNICATION INFORMATION EMPOWERMENT LOVE
  28. 28. @misprintedtype
  29. 29. @misprintedtype COMMUNICATION INFORMATION EMPOWERMENT LOVE
  30. 30. @misprintedtype
  31. 31. @misprintedtype
  32. 32. @misprintedtype
  33. 33. @misprintedtype
  34. 34. „YOU WANTED A BANANA BUT WHAT YOU GOT WAS A GORILLA HOLDING THE BANANA AND THE ENTIRE JUNGLE.“ Joe Armstrong
  35. 35. @misprintedtype COMMUNICATION INFORMATION EMPOWERMENT LOVE
  36. 36. @misprintedtype
  37. 37. @misprintedtype
  38. 38. @misprintedtype
  39. 39. WEALTHY WESTERN WEB Bruce Lawson
  40. 40. @misprintedtype https://speakerdeck.com/benschwarz/vanity-performance-metrics-looking-beyond-the-numbers
  41. 41. @misprintedtype https://speakerdeck.com/benschwarz/vanity-performance-metrics-looking-beyond-the-numbers
  42. 42. 500MB PER MONTH Bastian Albers
  43. 43. 2,4MB AVERAGE PAGE SIZE = 6,94 SITES/DAY Bastian Albers
  44. 44. ~22MIN 720P VIDEO Bastian Albers
  45. 45. TENS OF THOUSANDS OF EMAILS Bastian Albers https://www.whistleout.com.au/MobilePhones/Guides/Mobile-broadband-usage-guide
  46. 46. @misprintedtype
  47. 47. @misprintedtype
  48. 48. @misprintedtype the REAL world
  49. 49. @misprintedtype the Router
  50. 50. @misprintedtypehttps://ingevald.files.wordpress.com/2009/02/sweden-river-fog-morning-looking-at-sun.jpg
  51. 51. @misprintedtype
  52. 52. @misprintedtype (SNC - Service) Using NAT zones, DTN routing && DakNet network. Saami Network Connectivity
  53. 53. @misprintedtype Learnings (requests & assets)
  54. 54. @misprintedtype Check your requests!
  55. 55. @misprintedtype beware of Lie-Fi
  56. 56. @misprintedtype queries of bandwidth
  57. 57. @misprintedtype queries of bandwidth
  58. 58. @misprintedtype enhance assets with network
  59. 59. @misprintedtype data over assets
  60. 60. @misprintedtype
  61. 61. @misprintedtype SVG over IMG
  62. 62. @misprintedtype base64 over IMG
  63. 63. @misprintedtype base64 is expensive && heavy
  64. 64. @misprintedtype the Pandemic
  65. 65. @misprintedtype
  66. 66. @misprintedtype
  67. 67. @misprintedtype
  68. 68. @misprintedtype
  69. 69. @misprintedtype rm -rf ~/
  70. 70. @misprintedtype first learning (data)
  71. 71. @misprintedtype Decouple server && client and build a task / message system.
  72. 72. @misprintedtype
  73. 73. @misprintedtype
  74. 74. @misprintedtype
  75. 75. @misprintedtype
  76. 76. @misprintedtype save data locally && frequently
  77. 77. @misprintedtype partial data updates
  78. 78. @misprintedtype partial data updates
  79. 79. @misprintedtype
  80. 80. @misprintedtype
  81. 81. @misprintedtype second learning (schema)
  82. 82. @misprintedtype define flexible data schema
  83. 83. @misprintedtype prevent merge conflicts
  84. 84. @misprintedtype prevent merge conflicts
  85. 85. @misprintedtype 10/2014 12/2015
  86. 86. @misprintedtype the Pizza
  87. 87. @misprintedtype
  88. 88. @misprintedtype
  89. 89. @misprintedtype Learnings (security)
  90. 90. @misprintedtype validate on server
  91. 91. @misprintedtype validate on server
  92. 92. @misprintedtype CORS <3
  93. 93. @misprintedtype encrypt local data
  94. 94. @misprintedtype
  95. 95. @misprintedtype
  96. 96. @misprintedtype use JSON Web Tokens
  97. 97. @misprintedtype BONUS
  98. 98. @misprintedtype the Rally
  99. 99. @misprintedtypehttps://en.wikipedia.org/wiki/Mongol_Rally#After_the_rally
  100. 100. @misprintedtypehttp://www.minicong.com/lo-tec/
  101. 101. @misprintedtype
  102. 102. @misprintedtype 1 2 3 4 5 6 7 8 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0
  103. 103. @misprintedtype Learnings
  104. 104. @misprintedtype Rethink how to use technology, by thinking about the issue. Not about the tools.
  105. 105. @misprintedtype You rock!
  106. 106. @misprintedtype
  107. 107. @misprintedtype
  108. 108. @misprintedtype we <3 you! @misprintedtype && @styladev

×