$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by bruce lawson

Other Decks in Technology

Transcript

  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/

    View Slide

  2. @brucel

    View Slide

  3. @brucel

    View Slide

  4. @brucel

    View Slide

  5. @brucel

    View Slide

  6. @brucel

    View Slide

  7. @brucel

    View Slide

  8. @brucel

    View Slide

  9. @brucel

    View Slide

  10. @brucel

    View Slide

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

    View Slide

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

    View Slide

  13. @brucel

    View Slide

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

    View Slide

  15. @brucel

    View Slide

  16. @brucel

    View Slide

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

    View Slide

  18. @brucel

    View Slide

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

    View Slide

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

    View Slide

  21. @brucel
    vinyl

    View Slide

  22. @brucel

    View Slide

  23. @brucel

    View Slide

  24. @brucel
    • tabs (loads of cigarettes)

    View Slide

  25. @brucel
    Holy Web Wars
    • IE vs Netscape

    • Tables vs CSS

    • jQuery vs vanilla JS

    • Angular vs Ember vs React

    View Slide

  26. @brucel

    View Slide

  27. @brucel

    View Slide

  28. @brucel

    View Slide

  29. @brucel

    View Slide

  30. @brucel

    View Slide

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

    View Slide

  32. @brucel

    View Slide

  33. @brucel
    Because of
    • Re-usability

    • Composability

    • Testability

    • Shareability

    View Slide

  34. @brucel

    View Slide

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

    • Order affects cascade

    • Dependency system - @import

    • Relies on markup structure

    • Breaks silently

    View Slide

  36. @brucel
    CSS-in-JS

    View Slide

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

    View Slide

  38. @brucel
    Warning:
    OPINION
    AHEAD

    View Slide

  39. @brucel

    View Slide

  40. @brucel
    Legal notice:
    Other opinions are available.

    (But wrong)

    View Slide

  41. @brucel
    Good old CSS:
    • IDE support

    • syntax highlighting

    • code completions

    • validations

    • CSS generators

    • huge community

    View Slide

  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

    View Slide

  43. @brucel

    View Slide

  44. @brucel

    View Slide

  45. @brucel
    Ido’s dream
    • Modular

    • Dynamic

    • Performant

    • CSS capabilities

    • Tooling

    • Customization

    View Slide

  46. @brucel
    Introducing
    Stylable is a CSS preprocessor for styling components with typed CSS.

    View Slide

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

    View Slide

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

    View Slide

  49. @brucel
    Typed CSS
    • CSS Superset

    • Inner parts as Pseudo-Elements

    • Create custom Pseudo-Classes

    • Type aware dependencies

    • IDE & Build support

    • Optimization - "ruleset shaking"

    View Slide

  50. @brucel
    .gallery:loading::navBtn {}
    page.st.css
    :import {
    -st-from: "./gallery.st.css";
    -st-default: Gallery;
    }
    .gallery {
    -st-extends: Gallery;
    background-color: gold;
    }

    View Slide

  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;}

    View Slide

  52. @brucel
    Defining Gallery internals
    .root { … }
    Gallery:loading
    gallery.st.css:

    View Slide

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

    View Slide

  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

    View Slide

  55. @brucel
    Status of Stylable
    • Pseudo Elements & Classes

    • Imports

    • Mixins

    • Theming

    • VSCode Extension

    • Integration - React, Webpack

    View Slide

  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

    View Slide

  57. @brucel

    View Slide

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

    • Stylable repo - github.com/wix/stylable

    View Slide

  59. @brucel
    b

    View Slide

  60. @brucel

    View Slide

  61. @brucel

    View Slide

  62. @brucel

    View Slide

  63. @brucel

    View Slide

  64. @brucel

    View Slide

  65. @brucel

    View Slide

  66. @brucel
    Artisan: “a worker in a skilled trade, especially one that
    involves making things by hand.”

    View Slide

  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”

    View Slide

  68. @brucel

    View Slide

  69. @brucel

    View Slide

  70. @brucel

    View Slide

  71. @brucel

    View Slide

  72. @brucel

    View Slide

  73. @brucel

    View Slide

  74. @brucel

    View Slide

  75. @brucel

    View Slide

  76. @brucel

    View Slide

  77. @brucel
    What is the web?

    View Slide

  78. View Slide

  79. View Slide

  80. View Slide

  81. @brucel
    • [image of a crowd of people - terrible stock photo?]

    View Slide

  82. @brucel

    View Slide

  83. @brucel

    View Slide

  84. @brucel

    View Slide

  85. @brucel

    View Slide

  86. @brucel

    View Slide

  87. @brucel

    View Slide

  88. @brucel

    View Slide

  89. View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. @brucel
    Black Friday + Cyber Monday
    $2.9Bn

    View Slide

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

    View Slide

  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

    View Slide

  96. @brucel

    View Slide

  97. View Slide

  98. View Slide

  99. @brucel
    Sheraton Roma

    View Slide

  100. View Slide

  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


    View Slide

  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).

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  113. @brucel

    View Slide

  114. @brucel
    Video by ClubInternet, Pakistan. 

    Used by kind permission.
    http://clubinternet.co/
    https://vimeo.com/116787124

    View Slide

  115. @brucel

    View Slide

  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

    (household)

    View Slide

  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

    View Slide

  118. @brucel
    Making the internet universally accessible
    and affordable should be a global priority.

    World Bank

    View Slide

  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

    View Slide

  120. View Slide

  121. @brucel

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  126. Women
    25%
    Men
    75%
    Total nonagricultural employment
    Women
    44% Men
    56%
    Online work (Elance)
    Web empowers women

    View Slide

  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

    View Slide

  128. Online work: Most important disadvantages
    Payment is not 

    good 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

    View Slide

  129. View Slide

  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”

    View Slide

  131. View Slide

  132. Early progressive web apps in Asia & Africa
    @brucel

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  138. View Slide

  139. View Slide

  140. @brucel
    Responsive images saved
    - Mike Babb
    70%

    View Slide

  141. 500MB data: hours worked

    View Slide

  142. @brucel
    Warning:
    Liberal
    handwringing

    ahead

    View Slide

  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

    View Slide

  144. @brucel

    View Slide

  145. @brucel

    View Slide

  146. @brucel

    View Slide

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

    View Slide

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

    World Bank:

    View Slide

  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.

    View Slide

  150. @brucel
    Developing countries are home to 94% of the
    global offline population.

    - State of Connectivity 2014, internet.org

    View Slide

  151. @brucel

    View Slide

  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)

    View Slide

  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)

    View Slide

  154. @brucel
    love
    peace
    thanks
    boomshanka
    Bruce Lawson

    FFConf 2017
    F Delventhal https://www.flickr.com/photos/krossbow/10324856173/

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide