Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FFConf, Brighton, 9 - 10 November 2017

bruce lawson
November 10, 2017

FFConf, Brighton, 9 - 10 November 2017

If you're going out of San Francisco, be sure to wear web standards in your hair

bruce lawson

November 10, 2017

More Decks by bruce lawson

Other Decks in Technology


  1. @brucel If you’re going out of San Francisco Be sure

    to wear Web Standards in your hair Bruce Lawson FFConf 2017 F Delventhal https://www.flickr.com/photos/krossbow/10324856173/
  2. @brucel

  3. @brucel

  4. @brucel

  5. @brucel

  6. @brucel

  7. @brucel

  8. @brucel

  9. @brucel

  10. @brucel

  11. @brucel Matt Gibson https://en.wikipedia.org/wiki/Mod_(subculture)#/media/File:Quadrophenia_exhibit_2.jpg

  12. @brucel Triton Rocker https://upload.wikimedia.org/wikipedia/commons/7/7b/Chelsea-Bridge-Rockers.jpg

  13. @brucel

  14. @brucel Severino - https://upload.wikimedia.org/wikipedia/commons/1/14/Rolling_stones_-_11_luglio_2006_-_san_siro.jpg

  15. @brucel

  16. @brucel

  17. @brucel Алый Король Алый Король https://en.wikipedia.org/wiki/Iron_Maiden#/media/File:Iron_Maiden_en_Costa_Rica.jpg

  18. @brucel

  19. @brucel blairstirrett - http://www.flickr.com/photos/blairstirrett/2268209979/

  20. @brucel https://upload.wikimedia.org/wikipedia/commons/c/c5/SeanConnery88.jpg

  21. @brucel vinyl

  22. @brucel

  23. @brucel

  24. @brucel • tabs (loads of cigarettes)

  25. @brucel Holy Web Wars • IE vs Netscape • Tables

    vs CSS • jQuery vs vanilla JS • Angular vs Ember vs React
  26. @brucel

  27. @brucel

  28. @brucel

  29. @brucel

  30. @brucel

  31. @brucel • Something about being convinced by component-based architecture

  32. @brucel

  33. @brucel Because of • Re-usability • Composability • Testability •

  34. @brucel

  35. @brucel Why is CSS for components a PITA? • Everything

    is global • Order affects cascade • Dependency system - @import • Relies on markup structure • Breaks silently
  36. @brucel CSS-in-JS

  37. @brucel document.tags.H1.fontSize = "20pt";

  38. @brucel Warning: OPINION AHEAD

  39. @brucel

  40. @brucel Legal notice: Other opinions are available. (But wrong)

  41. @brucel Good old CSS: • IDE support • syntax highlighting

    • code completions • validations • CSS generators • huge community
  42. @brucel CSS-in-JS costs us! • Loading JS library to handle

    CSS creation at runtime • Creating / modifying stylesheets at runtime • Server-Side Rendering = CSS × 2
  43. @brucel

  44. @brucel

  45. @brucel Ido’s dream • Modular • Dynamic • Performant •

    CSS capabilities • Tooling • Customization
  46. @brucel Introducing Stylable is a CSS preprocessor for styling components

    with typed CSS.
  47. @brucel Abstraction - custom states .gallery:loading::navBtn { visibility:hidden; }

  48. @brucel Abstraction - inner parts .gallery::navBtn::icon { color:green; }

  49. @brucel Typed CSS • CSS Superset • Inner parts as

    Pseudo-Elements • Create custom Pseudo-Classes • Type aware dependencies • IDE & Build support • Optimization - "ruleset shaking"
  50. @brucel .gallery:loading::navBtn {} page.st.css :import { -st-from: "./gallery.st.css"; -st-default: Gallery;

    } .gallery { -st-extends: Gallery; background-color: gold; }
  51. @brucel Styling inside the gallery :import { -st-from: "./gallery.st.css"; -st-default:

    Gallery;} .gallery { -st-extends: Gallery; background-color: gold;} .gallery:loading::navBtn { visibility: hidden;}
  52. @brucel Defining Gallery internals .root { … } Gallery:loading gallery.st.css:

  53. @brucel Defining Gallery internals .root { -st-states: loading, empty; }

    Gallery:loading gallery.st.css:
  54. @brucel :import { -st-from: "./icon-button.st.css"; -st-default: IconButton;} .root { -st-states:

    loading, empty;} .navBtn { -st-extends: IconButton;} Gallery::navBtn::icon gallery.st.css: Defining Gallery inner navBtn
  55. @brucel Status of Stylable • Pseudo Elements & Classes •

    Imports • Mixins • Theming • VSCode Extension • Integration - React, Webpack
  56. @brucel W.I.P. • Pseudo-Classes with parameters: .grid::column:name("email") {color:goldenrod;} • Formatters:

    .item {color: darker(red);} • Declaration Interfaces • MOAR Integrations • Dogfooding and battle-testing • Web Components Compatibility, Houdini
  57. @brucel

  58. @brucel Get ‘em while they’re hot • Stylable docs -

    Stylable.io • Stylable repo - github.com/wix/stylable
  59. @brucel b

  60. @brucel

  61. @brucel

  62. @brucel

  63. @brucel

  64. @brucel

  65. @brucel

  66. @brucel Artisan: “a worker in a skilled trade, especially one

    that involves making things by hand.”
  67. @brucel 職⼈人気質 Shokunin means not only having technical skill, but

    also implies an attitude and social consciousness... a social obligation to work his best for the general welfare of the people, [an] obligation both material and spiritual. Tashio Odate - “Japanese Woodworking Tools: Their Tradition, Spirit and Use”
  68. @brucel

  69. @brucel

  70. @brucel

  71. @brucel

  72. @brucel

  73. @brucel

  74. @brucel

  75. @brucel

  76. @brucel

  77. @brucel What is the web?

  78. None
  79. None
  80. None
  81. @brucel • [image of a crowd of people - terrible

    stock photo?]
  82. @brucel

  83. @brucel

  84. @brucel

  85. @brucel

  86. @brucel

  87. @brucel

  88. @brucel

  89. None
  90. None
  91. None
  92. None
  93. @brucel Black Friday + Cyber Monday $2.9Bn

  94. @brucel Double 11 Day, 2014 $9.2Bn Source: Nanjing Marketing Group,

    Q4 2014
  95. @brucel Total online retail spending in China reached $307 billion

    in 2013 and is forecast to grow at a compound annual rate of nearly 20% until 2019, when it should exceed $1 trillion. “ $1 trillion online by 2019 - China Online Retail Forecast Forrester
  96. @brucel

  97. None
  98. None
  99. @brucel Sheraton Roma

  100. None
  101. @brucel World Bank: Landlocked countries generally pay higher prices for

    bandwidth than coastal countries. In Africa, for instance, being landlocked adds an average of US$232 to the monthly price for fixed broadband access. World Bank. 2016. World Development Report 2016: Digital Dividends. Washington, DC: World Bank. doi:10.1596/978-1-4648-0671-1. License: Creative Commons Attribution CC BY 3.0 IGO “
  102. @brucel for mobile broadband too, the range is more than

    100-fold between Pakistan (US$1.48 for a GB of data a month, downloaded to a mobile handset) and São Tomé and Príncipe (US$169.38). “
  103. @brucel Paradox The employment rate in connected areas relative to

    unconnected areas increased by between 4.2% and 10% when fast internet became available. Fast internet and employment in Africa http://voxdev.org/topic/technology-innovation/fast-internet-and-employment-africa “
  104. @brucel In most countries in our sample, the increase in

    skilled employment was biggest for workers with secondary or tertiary education, but those who only completed primary school were also more likely to hold a job. “
  105. @brucel Despite the fact that Africa has the lowest income

    per capita of any region, affordability was only identified as the most important barrier in one out of 13 markets in our survey. 
 “ Africa: not just affordability - GSMA Consumer barriers to mobile internet adoption in Africa - July 2016
  106. @brucel Network coverage was not perceived as an issue in

    most countries, reflecting the increasing availability of mobile networks. However, mobile broadband (3G or 4G) coverage remains low in most parts of Africa. 
 “ Africa: not just networks - GSMA Consumer barriers to mobile internet adoption in Africa - July 2016
  107. @brucel A lack of awareness and locally relevant content was

    considered the most important barrier to internet adoption in North Africa and the second biggest barrier in Sub-Saharan Africa. 
 “ Lack of awareness/ content. - GSMA Consumer barriers to mobile internet adoption in Africa - July 2016
  108. @brucel A lack of digital skills was identified as the

    biggest barrier to internet adoption in Sub-Saharan Africa and the second biggest in North Africa. 
 “ Lack of digital skills - GSMA Consumer barriers to mobile internet adoption in Africa - July 2016
  109. @brucel A lack of awareness and locally relevant content was

    the most commonly cited barrier to internet adoption: 72% of non-internet users across the six survey markets felt this was a barrier. 
 “ Asia - GSMA Consumer barriers to mobile internet adoption in Asia - January 2016
  110. @brucel 50% of websites worldwide are in English, a language

    spoken by only 10% of speakers in the survey countries. By way of contrast, only 2% of websites worldwide are in Mandarin and less than 0.1% are in Hindi. 
 “ Asia - GSMA Consumer barriers to mobile internet adoption in Asia - January 2016
  111. @brucel In Africa, 7 in 10 people who do not

    use the internet say they just don’t know how to use it, and almost 4 in 10 say they do not know what the internet is. 
 In high-income Poland and the Slovak Republic, one- fifth of adults cannot use a computer. “ Digital illiteracy? - World Bank
  112. @brucel 41% do not use the internet at all, 53%

    do not have broadband access at home, and 23% do not use cell phones. “ American seniors - Older Adults and Technology Use (Pew Research Centre, April 2014)
  113. @brucel

  114. @brucel Video by ClubInternet, Pakistan. 
 Used by kind permission.

    http://clubinternet.co/ https://vimeo.com/116787124
  115. @brucel

  116. Digital Divide: Africa 2011-12 Individuals who use the internet (%)

    0 5 10 15 20 25 Bottom Upper
 40% 60% Mature Young
 (45+) (15-24) Rural Urban Women Men
 Gender Location Age Income distribution
  117. @brucel Rural mobile internet users grew by a staggering 93%

    between December 2014-Dec 2015, yet only nine per cent of the hinterland has access to the technology. In comparison, 53% of urban areas had mobile internet connectivity and grew at 71% during the same period. “ Digital Divide (India) - Times of India, 3 Feb 1016
  118. @brucel Making the internet universally accessible and affordable should be

    a global priority. “ World Bank
  119. @brucel In Nigeria, the data needed to watch just 2

    minutes of online video a day can cost more than sending a child to school for a month. “ Nigeria - How To Make Internet Affordable
  120. None
  121. @brucel

  122. @brucel • Settle on fair and transparent ICT taxes. •

    Get governments and donors to step up efforts. • Agree on “affordability”: 1 GB for 2% • Invest in public access solutions. • Make getting women online a top priority. Fast Africa
  123. @brucel Online work can prove particularly beneficial for women, youth,

    older workers, and the disabled, who may prefer the flexibility of working from home or working flexible hours. “ Online work
  124. @brucel In India… women are 62% less likely to use

    the internet than men. Many of the underlying reasons for this – affordability, skills and content – are the same as for men; they are simply felt more acutely by women. “ Gender divide - GSMA Consumer barriers to mobile internet adoption in Africa - July 2016
  125. @brucel Rural Internet users are today almost exclusively male (98%)

    “ Rural India’s gender divide - Boston Consulting Group - The Rising Connected Consumer in Rural India July 2016
  126. Women 25% Men 75% Total nonagricultural employment Women 44% Men

    56% Online work (Elance) Web empowers women
  127. Online work: Most important advantages Able to earn extra money

    Higher chances of getting higher earnings than in jobs offline Able to work from home 
 and work flexible hours Reduce time and 
 cost for job search Provide access to the 
 job market which 
 was limited before Higher chances of 
 getting a job that matches 
 my skills and interests 0 10 20 30 40 50 Men Women Percent of respondents
  128. Online work: Most important disadvantages Payment is not 

    enough Friends and family 
 do not understand 
 what I am doing Do not have any 
 social benefits Require access to an 
 online payment system Require access to internet Require internet and 
 computer skills The job is temporary, 
 and it is not for a 
 long-term career 0 10 20 30 40 Men Women Percent of respondents
  129. None
  130. @brucel The government of the Indian state of Kerala set

    up the Kudumbashree project to outsource information technology services to cooperatives of women from poor families; 90 percent of the women had not previously worked outside the home. “ “Prosperity of the family”
  131. None
  132. Early progressive web apps in Asia & Africa @brucel

  133. @brucel Downloading a typical app with 20 MB APK can

    take more than 30 minutes on a 2G network, and the download is likely to fail before completion, due to the flaky nature of the network. “ - How we built Facebook Lite for every Android phone and network
  134. @brucel 
 With space this limited, the user is

    comparing their personal photo collection with the adoption of a new app on their phone. “ - Mobile App Developers Are Suffering
  135. @brucel we didn’t stand a chance as we were fighting

    with both our competitors and other apps for a few more MB of room inside people’s phones. “ Birdly - Why you shouldn’t bother creating a mobile app
  136. https://dev.opera.com/articles/pwa-nigeria-kenya-interview/ “Nigerians are extremely data sensitive.” “People side-load apps and

    other content from third parties [or via] Xender.” Constance Okoghenun: @brucel
  137. “With PWAs […], without the download overhead of native apps

    […] developers in Nigeria can now give a great and up-to-date experience to their users.” @brucel
  138. None
  139. None
  140. @brucel Responsive images saved - Mike Babb 70%

  141. 500MB data: hours worked

  142. @brucel Warning: Liberal handwringing ahead

  143. @brucel Guard the web as you work on it Someone

    or something or some combination of people and things is using YouTube to systematically frighten, traumatise, and abuse children, automatically and at scale, and it forces me to question my own beliefs about the internet, at every level. https://medium.com/@jamesbridle/something-is-wrong-on-the-internet-c39c471271d2
  144. @brucel

  145. @brucel

  146. @brucel

  147. @brucel https://www.buzzfeed.com/sheerafrenkel/fake-news-spreads-trump-around-the-world

  148. @brucel Access to the internet is critical, but not sufficient

    “ World Bank:
  149. @brucel the full benefits of the information and communications transformation

    will not be realized unless countries continue to improve their business climate, invest in people’s education and health, and promote good governance. “
  150. @brucel Developing countries are home to 94% of the global

    offline population. “ - State of Connectivity 2014, internet.org
  151. @brucel

  152. @brucel an increase in Internet maturity similar to the one

    experienced in mature countries over the past 5 years creates an increase in real GDP per capita of $500 on average during this period. “ Internet matters - The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)
  153. @brucel It took the Industrial Revolution of the 19th century

    50 years to produce the same result. “ Internet matters - The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)
  154. @brucel love peace thanks boomshanka Bruce Lawson FFConf 2017 F

    Delventhal https://www.flickr.com/photos/krossbow/10324856173/
  155. @brucel Resources ▪ World Bank, Digital Dividends report http://www.worldbank.org/en/publication/wdr2016 ▪

    Population forecast video by Hans Rosling (raw data from United Nations) https://www.gapminder.org/ videos/dont-panic-the-facts-about-population/ ▪ More than half of humanity lives within this circle (Washington Post)) https://www.washingtonpost.com/news/ worldviews/wp/2013/05/07/map-more-than-half-of-humanity-lives-within-this-circle/ ▪ Nigeria video cost vs school fees statistic https://webwewant.org/news/how-to-make-internet-affordable/ ▪ Population and GDP figures from CIA World Fact Book https://www.cia.gov/library/publications/the-world- factbook/ ▪ Stats on page size/ images ratio from httparchive.org ▪ GSMA report on Africa (https://www.gsmaintelligence.com/research/2016/07/consumer-barriers-to-mobile- internet-adoption-in-africa/568/) Asia (https://www.gsmaintelligence.com/research/2016/06/consumer- barriers-to-mobile-internet-adoption-in-asia/559/) ▪ Fast Africa: How Do We Get FAST Internet? (Policy Advice) https://webwewant.org/fast-africa/toolkit/get- fast-internet-policy-advice/ ▪ McKinsey report www.mckinsey.com/insights/high_tech_telecoms_internet/internet_matters ▪ Facebook, Myanmar, anti-muslim sentiment https://www.buzzfeed.com/sheerafrenkel/fake-news-spreads- trump-around-the-world
  156. @brucel Picture sources ▪ Me by HTML sign in Tokyo

    by Doug Schepers (@shepazu), used with permission. All rights reserved. ▪ World Development Report 2016: Digital Dividends www.worldbank.org/en/publication/wdr2016 ▪ “Is Google usable” video - clubinternet.co; used with permission. All rights reserved. https://vimeo.com/116787124
  157. @brucel Maps ▪ True size of Africa by Kai Krause

    (Public Domain) ▪ Map of China Single Color by FreeVectorMaps.com ▪ Map of Africa Single Color by FreeVectorMaps.com ▪ Map of Asia Single Color by FreeVectorMaps.com