FFConf, Brighton, 9 - 10 November 2017

Slide 1

Slide 1 text

@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.ﬂickr.com/photos/krossbow/10324856173/

Slide 2

Slide 2 text

@brucel

Slide 3

Slide 3 text

@brucel

Slide 4

Slide 4 text

@brucel

Slide 5

Slide 5 text

@brucel

Slide 6

Slide 6 text

@brucel

Slide 7

Slide 7 text

@brucel

Slide 8

Slide 8 text

@brucel

Slide 9

Slide 9 text

@brucel

Slide 10

Slide 10 text

@brucel

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

@brucel

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@brucel

Slide 16

Slide 16 text

@brucel

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

@brucel

Slide 19

Slide 19 text

@brucel blairstirrett - http://www.ﬂickr.com/photos/blairstirrett/2268209979/

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

@brucel vinyl

Slide 22

Slide 22 text

@brucel

Slide 23

Slide 23 text

@brucel

Slide 24

Slide 24 text

@brucel • tabs (loads of cigarettes)

Slide 25

Slide 25 text

@brucel Holy Web Wars • IE vs Netscape • Tables vs CSS • jQuery vs vanilla JS • Angular vs Ember vs React

Slide 26

Slide 26 text

@brucel

Slide 27

Slide 27 text

@brucel

Slide 28

Slide 28 text

@brucel

Slide 29

Slide 29 text

@brucel

Slide 30

Slide 30 text

@brucel

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

@brucel

Slide 33

Slide 33 text

@brucel Because of • Re-usability • Composability • Testability • Shareability

Slide 34

Slide 34 text

@brucel

Slide 35

Slide 35 text

@brucel Why is CSS for components a PITA? • Everything is global • Order aﬀects cascade • Dependency system - @import • Relies on markup structure • Breaks silently

Slide 36

Slide 36 text

@brucel CSS-in-JS

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

@brucel Warning: OPINION AHEAD

Slide 39

Slide 39 text

@brucel

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

@brucel Good old CSS: • IDE support • syntax highlighting • code completions • validations • CSS generators • huge community

Slide 42

Slide 42 text

@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

Slide 43

Slide 43 text

@brucel

Slide 44

Slide 44 text

@brucel

Slide 45

Slide 45 text

@brucel Ido’s dream • Modular • Dynamic • Performant • CSS capabilities • Tooling • Customization

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

@brucel Typed CSS • CSS Superset • Inner parts as Pseudo-Elements • Create custom Pseudo-Classes • Type aware dependencies • IDE & Build support • Optimization - "ruleset shaking"

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

@brucel Deﬁning Gallery internals .root { … } Gallery:loading gallery.st.css:

Slide 53

Slide 53 text

@brucel Deﬁning Gallery internals .root { -st-states: loading, empty; } Gallery:loading gallery.st.css:

Slide 54

Slide 54 text

@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: Deﬁning Gallery inner navBtn

Slide 55

Slide 55 text

@brucel Status of Stylable • Pseudo Elements & Classes • Imports • Mixins • Theming • VSCode Extension • Integration - React, Webpack

Slide 56

Slide 56 text

@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

Slide 57

Slide 57 text

@brucel

Slide 58

Slide 58 text

@brucel Get ‘em while they’re hot • Stylable docs - Stylable.io • Stylable repo - github.com/wix/stylable

Slide 59

Slide 59 text

@brucel b

Slide 60

Slide 60 text

@brucel

Slide 61

Slide 61 text

@brucel

Slide 62

Slide 62 text

@brucel

Slide 63

Slide 63 text

@brucel

Slide 64

Slide 64 text

@brucel

Slide 65

Slide 65 text

@brucel

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

@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”

Slide 68

Slide 68 text

@brucel

Slide 69

Slide 69 text

@brucel

Slide 70

Slide 70 text

@brucel

Slide 71

Slide 71 text

@brucel

Slide 72

Slide 72 text

@brucel

Slide 73

Slide 73 text

@brucel

Slide 74

Slide 74 text

@brucel

Slide 75

Slide 75 text

@brucel

Slide 76

Slide 76 text

@brucel

Slide 77

Slide 77 text

@brucel What is the web?

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

@brucel

Slide 83

Slide 83 text

@brucel

Slide 84

Slide 84 text

@brucel

Slide 85

Slide 85 text

@brucel

Slide 86

Slide 86 text

@brucel

Slide 87

Slide 87 text

@brucel

Slide 88

Slide 88 text

@brucel

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

@brucel Black Friday + Cyber Monday $2.9Bn

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

@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

Slide 96

Slide 96 text

@brucel

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

@brucel Sheraton Roma

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

@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 “

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

@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 “

Slide 104

Slide 104 text

@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. “

Slide 105

Slide 105 text

@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

Slide 106

Slide 106 text

@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

Slide 107

Slide 107 text

@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

Slide 108

Slide 108 text

@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

Slide 109

Slide 109 text

@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

Slide 110

Slide 110 text

@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

Slide 111

Slide 111 text

@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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

@brucel

Slide 114

Slide 114 text

@brucel Video by ClubInternet, Pakistan.   Used by kind permission. http://clubinternet.co/ https://vimeo.com/116787124

Slide 115

Slide 115 text

@brucel

Slide 116

Slide 116 text

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)

Slide 117

Slide 117 text

@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

Slide 118

Slide 118 text

@brucel Making the internet universally accessible and affordable should be a global priority. “ World Bank

Slide 119

Slide 119 text

@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

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

@brucel

Slide 122

Slide 122 text

@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

Slide 123

Slide 123 text

@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

Slide 124

Slide 124 text

@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

Slide 125

Slide 125 text

@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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

@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”

Slide 131

Slide 131 text

No content

Slide 132

Slide 132 text

Early progressive web apps in Asia & Africa @brucel

Slide 133

Slide 133 text

@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

Slide 134

Slide 134 text

@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

Slide 135

Slide 135 text

@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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

“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

Slide 138

Slide 138 text

No content

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

@brucel Responsive images saved - Mike Babb 70%

Slide 141

Slide 141 text

500MB data: hours worked

Slide 142

Slide 142 text

@brucel Warning: Liberal handwringing ahead

Slide 143

Slide 143 text

@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

Slide 144

Slide 144 text

@brucel

Slide 145

Slide 145 text

@brucel

Slide 146

Slide 146 text

@brucel

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

@brucel Access to the internet is critical, but not sufﬁcient “ World Bank:

Slide 149

Slide 149 text

@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. “

Slide 150

Slide 150 text

@brucel Developing countries are home to 94% of the global offline population. “ - State of Connectivity 2014, internet.org

Slide 151

Slide 151 text

@brucel

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

@brucel love peace thanks boomshanka Bruce Lawson FFConf 2017 F Delventhal https://www.ﬂickr.com/photos/krossbow/10324856173/

Slide 155

Slide 155 text

@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

Slide 156

Slide 156 text

@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

Slide 157

Slide 157 text

@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