Shokunin of the Web - Speaker Deck

Slide 1

Slide 1 text

@brucel

Slide 2

Slide 2 text

@brucel 職⼈人気質 Shokunin is deﬁned in both Japanese and Japanese - English dictionary as “craftsman” or “artisan”. Tashio Odate - “Japanese Woodworking Tools: Their Tradition, Spirit and Use”

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

@brucel map Japan

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 robot A robot is a machine—especially one programmable by a computer— capable of carrying out a complex series of actions automatically

Slide 10

Slide 10 text

@brucel robots in your life • satnav • washing machine • coﬀee machine • VCR/ Tivo

Slide 11

Slide 11 text

@brucel robots you work with • Code linter/ validators • CSS grid/ gradient/ animation generators • SASS/ LESS • Babel • Webpack

Slide 12

Slide 12 text

@brucel

Slide 13

Slide 13 text

@brucel House of Fraser - www.drapersonline.com

Slide 14

Slide 14 text

@brucel

Slide 15

Slide 15 text

@brucel From a technological standpoint, fewer than half of today’s schoolchildren in China, Croatia, or Thailand can expect to ﬁnd a job in an occupation that exists today. (World Bank, p 100) “

Slide 16

Slide 16 text

@brucel Changes over the centuries, economies have adapted to massive changes in labor markets— the largest by far, being the shift out of agriculture. In 1910, there were 12 million farmworkers in the United States. One hundred years later, there were only 700,000 in a population more than three times larger. World Bank, Digital Dividends report 2016, Figure O.18 et seq “

Slide 17

Slide 17 text

@brucel

Slide 18

Slide 18 text

@brucel https://www.smashingmagazine.com/2017/06/advanced-website-builders/

Slide 19

Slide 19 text

@brucel DISCLOSURE • Wix contractor (Web Standards, Open-Source, fashion advisor) • NOT consumer products • no longer have any connection, ﬁnancial or otherwise

Slide 20

Slide 20 text

@brucel Wix ADI Once upon a time, creating a website was a complex, long and expensive process – one that only a small percentage of people and businesses could aﬀord. With just a few simple questions, Wix ADI designs tailored websites by learning about each person’s or business’ own needs. “

Slide 21

Slide 21 text

@brucel Next, choosing from billions of high-quality, stunning combinations and possibilities, Wix ADI perfectly matches optimal design and content elements Wix ADI gathers from across the web and social media for relevant content that you can use as is or customize. https://www.wix.com/blog/2016/06/wix-artificial-design-intelligence/ “

Slide 22

Slide 22 text

@brucel Wix Code Wix Code makes it easy to build web applications and robust websites. It’s serverless, hassle-free coding. Set up database collections, create content rich websites, add custom forms Control your website’s functionality with a little JavaScript and our APIs https://www.wix.com/code/home “

Slide 23

Slide 23 text

@brucel `

Slide 24

Slide 24 text

@brucel Photo: Bogaerts, Rob / Anefo  

Slide 25

Slide 25 text

@brucel

Slide 26

Slide 26 text

@brucel

Slide 27

Slide 27 text

@brucel

Slide 28

Slide 28 text

@brucel Don’t Mock the Artisanal-Pickle Makers Instead of rolling our eyes at self-conscious Brooklyn hipsters pickling everything in sight, we might look to them as guides to the future of the American economy. https://www.nytimes.com/2012/02/19/magazine/adam-davidson-craft-business.html “

Slide 29

Slide 29 text

@brucel Many of the manufacturers who are thriving in the United States (they exist, I swear!) have done so by avoiding direct competition with low-cost commodity producers in low- wage nations. Instead, they have scrutinized the market and created customized products for less price-sensitive customers. “

Slide 30

Slide 30 text

@brucel

Slide 31

Slide 31 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 32

Slide 32 text

@brucel 663highland https://en.wikipedia.org/wiki/Tokonoma#/media/File:Kannonin_Tottori16s4470.jpg

Slide 33

Slide 33 text

@brucel tokonoma Traditionally, shokunin honoured their tools of trade at New Year's - the sharpened and taken-care of tools would be placed in a tokonoma (a container or box still found in Japanese houses and shops), and two rice cakes and a tangerine (on top of rice paper) were placed on top of each toolbox, to honour the tools and express gratitude for performing their task. “

Slide 34

Slide 34 text

@brucel

Slide 35

Slide 35 text

@brucel

Slide 36

Slide 36 text

@brucel

Slide 37

Slide 37 text

@brucel

Slide 38

Slide 38 text

@brucel The Trinity of Tools

Slide 39

Slide 39 text

@brucel b • web comping

Slide 40

Slide 40 text

@brucel • Picture of TBL “web developer”

Slide 41

Slide 41 text

Seren

Slide 42

Slide 42 text

@brucel Core Strengths of the Web • Universal • Open • Decentralised • Principle of least power

Slide 43

Slide 43 text

@brucel

Slide 44

Slide 44 text

@brucel South-East Asia SEA to be the fastest growing internet market in the world (~480m users by 2020); Indonesia fastest growing nation in the world. - eConomy SEA - Google / Temasec (2016)

Slide 45

Slide 45 text

@brucel popular Indonesian online site BliBli has more than one-third of its 2.5 million customers living in rural areas - Techcrunch, July 2016

Slide 46

Slide 46 text

@brucel in Indonesia 75% of users are on older 2G, or GSM/EDGE, networks … more than half of Indonesian smartphone users said they experienced network problems daily. - Measuring and improving network performance Ericsson, September 2014

Slide 47

Slide 47 text

@brucel 38% 17% 45% Mobile internet Voice/ text only Non-mobile 34% 31% 35% Asia Indonesia Data: GSMA , June 2016

Slide 48

Slide 48 text

@brucel 38% 17% 45% Mobile internet Voice/ text only Non-mobile 34% 31% 35% Asia Thailand Data: GSMA , June 2016 26% 6% 68%

Slide 49

Slide 49 text

@brucel 38% 17% 45% Mobile internet Voice/ text only Non-mobile 34% 31% 35% Asia Philippines Data: GSMA , June 2016 28% 26% 46%

Slide 50

Slide 50 text

@brucel 38% 17% 45% Mobile internet Voice/ text only Non-mobile 34% 31% 35% Asia Vietnam Data: GSMA , June 2016 22% 44% 34%

Slide 51

Slide 51 text

@brucel

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

@brucel Step Out

Slide 54

Slide 54 text

@brucel Localising Stepout • Should they remove the “Seinfeld” references on the site that were meant for an American audience? • Should they translate the site into Hindi? If so, how do you say “group dating” in Hindi? • Should they ask users for their caste? • What kinds of oﬄine partnerships, if any, should they form? • And what role should mobile devices play? • 70 percent of payments that subscribers try to make can’t be processed because of problems with the credit card system. https://www.nytimes.com/2011/02/20/business/20ignite.html

Slide 55

Slide 55 text

@brucel Localising the global Successful online platforms cannot necessarily be transplanted to a foreign country without adapting to the local market and local institutions. (World Bank, p61) “

Slide 56

Slide 56 text

@brucel Flipkart has partnered with the Dabbawalas, the deliverymen famous for their reliable delivery of hot lunches, to deliver parcels in India.” (World Bank, p75) By Steve Evans from Citizen of the World - Mumbai Dabbawala or Tiffin Wallahs: 200,000 Tiffin Boxes Delivered Per Day https://commons.wikimedia.org/w/index.php?curid=5685307 “

Slide 57

Slide 57 text

@brucel techinasia.com given the number of unbanked people in the region plus the popularity of shopping as a weekly leisure activity, new brands will need to turn to brick-and-mortar spaces to entice consumers. https://www.techinasia.com/talk/new-retail-southeast-asia “

Slide 58

Slide 58 text

@brucel Payments in Thailand

Slide 59

Slide 59 text

@brucel eBay vs Taobao • Both entered the Chinese market in 2003 • eBay established dominant market share 85 percent by acquiring the Chinese market leader • By 2014, Taobao accounted for over 80 percent of the Chinese C2C market (eBay exited the Chinese market in 2006)

Slide 60

Slide 60 text

@brucel Taobao Alibaba’s success can be explained (at least in part) by its ability to adapt to local market conditions and culture to remove the information asymmetries unique to the Chinese C2C market. The Taobao website, for instance, indicates whether sellers are online and allows buyers to communi- cate instantly with the sellers through an online messaging system. (World Bank p61) “

Slide 61

Slide 61 text

@brucel Don’t do this!

Slide 62

Slide 62 text

@brucel Red ink in letter writing should be avoided, since writing a person's name in red ink suggests a wish for that person to die Asian Business Customs & Manners: A Country-by-Country Guide, Bosrock, Mary Murray 2007 “

Slide 63

Slide 63 text

@brucel And don’t do this!

Slide 64

Slide 64 text

@brucel Putri (Indo photo)

Slide 65

Slide 65 text

@brucel

Slide 66

Slide 66 text

@brucel Principle of Least Power The choice of language is a common design choice. The low power end of the scale is typically simpler to design, implement and use, but the high power end of the scale has all the attraction of being an open-ended hook into which anything can be placed: a door to uses bounded only by the imagination of the programmer. Sir Uncle Timbo https://www.w3.org/DesignIssues/Principles.html#PLP “

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

https://kryogenix.org/code/browser/everyonehasjs.html

Slide 70

Slide 70 text

@brucel Coming soon in mobile Chrome If a Data Saver user is on a 2G-speed or slower network according to the NetInfo API, Chrome disables scripts and sends an intervention header on every resource request. Users are shown a UI at the bottom of the screen indicating the page has been modiﬁed to save data. Users can enable scripts on the page by tapping “Show original” in the UI. css-tricks.com/new-mobile-chrome-feature-would-disable-scripts-on-slow-connections/ “

Slide 71

Slide 71 text

@brucel

Slide 72

Slide 72 text

@brucel

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

Other opinions are available. (But wrong.)

Slide 81

Slide 81 text

@brucel

Slide 82

Slide 82 text

@brucel The era of components

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

@brucel Thanks Cristiano Rastelli (@areaweb)

Slide 86

Slide 86 text

@brucel

Slide 87

Slide 87 text

@brucel Why is CSS for components a PITA? • Everything is global • Order aﬀects cascade • Dependency system - @import • Relies on markup structure (classes, IDs, descendant/ strucural combinators) • Breaks silently

Slide 88

Slide 88 text

@brucel

Slide 89

Slide 89 text

@brucel

Slide 90

Slide 90 text

@brucel There is a tremendous amount of memorization of unexpected behaviors, rules, names and other idiosyncrasies. It's amazingly powerful, for sure, but it is loaded with cruft https://twitter.com/JohnHargrove/status/985631372764221440

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

@brucel

Slide 93

Slide 93 text

@brucel What’s your biggest gripe w/ CSS-in-JS? “Always having to remember to camelCase properties then spending 10min pulling hair out when you do forget” “the cryptic domain-specific languages that each of the frameworks do just ever so slightly differently”

Slide 94

Slide 94 text

@brucel https://twitter.com/_philpl/status/935656757942251520 “When I test look and feel in browser, then I copy paste from inspector, only to have to re-write it as a JSON object” “Lack of linting, autocomplete, and css plug-ins for colors/ incrementing/ etc”. “Not a gripe. But a concern: Performance.”

Slide 95

Slide 95 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 96

Slide 96 text

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

Slide 97

Slide 97 text

@brucel Introducing Mr. Potato Mr Potato is a (React) component.

Slide 98

Slide 98 text

@brucel Sane APIs We use React and Typescript to provide an API for component logic

Slide 99

Slide 99 text

@brucel A bucket of parts The great thing about Mr. Potato is that all of his parts are reusable and customizable

Slide 100

Slide 100 text

@brucel Personalizing a Potato-Bruce Extending a component’s interface

Slide 101

Slide 101 text

@brucel {Mohawk: required;}

Slide 102

Slide 102 text

@brucel

Slide 103

Slide 103 text

@brucel Custom Pseudo-Elements Exposing internal parts all the way down

Slide 104

Slide 104 text

@brucel Custom States Use custom states with parameters

Slide 105

Slide 105 text

@brucel Custom States Use custom states with parameters

Slide 106

Slide 106 text

@brucel Mix it all together

Slide 107

Slide 107 text

@brucel

Slide 108

Slide 108 text

@brucel Try it out! potatobruce.io stylable.io @stylableio

Slide 109

Slide 109 text

@brucel James Kyle pretty sure all the CSS-in-JS libraries just died for me ... CSS could be perfectly static if given the right tools, that's exactly what stylable does. It gives you the tools you need in CSS so that you don't need to do a bunch of dynamic shit in JS. Making it static is a huge performance win - core team member of Yarn, Babel and TC39 https://twitter.com/jamiebuilds/status/929675977067655170 “

Slide 110

Slide 110 text

@brucel

Slide 111

Slide 111 text

@brucel

Slide 112

Slide 112 text

@brucel “Developer Experience” Bait-and-Switch We cannot continue to use as much JavaScript as is now “normal” and expect the web to ﬂourish. To get this ﬁxed, we need to confront the “developer experience” bait-and-switch. Tools that cost the poorest users to pay wealthy developers are bunk. Alex Russell https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/ “

Slide 113

Slide 113 text

@brucel 500MB data: hours worked

Slide 114

Slide 114 text

@brucel How To Make Internet Affordable Even with more phones than ever before, the cost of Internet is a major obstacle. 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. https://webwewant.org/news/how-to-make-internet-affordable/ “

Slide 115

Slide 115 text

Slide 116

Slide 116 text

@brucel Be one of the Goodies Princess Diana and Queen Mother welcoming Monty to heaven. Illustration by John Gara

Slide 117

Slide 117 text

@brucel

Slide 118

Slide 118 text

@brucel http://info.cern.ch/hypertext/WWW/TheProject.html

Slide 119

Slide 119 text

@brucel Uncle Timbo The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. https://www.w3.org/standards/webdesign/accessibility “

Slide 120

Slide 120 text

@brucel http://tim-berners-lee-quotes.splintered.co.uk/

Slide 121

Slide 121 text

@brucel http://tim-berners-lee-quotes.splintered.co.uk/

Slide 122

Slide 122 text

@brucel http://tim-berners-lee-quotes.splintered.co.uk/

Slide 123

Slide 123 text

@brucel http://tim-berners-lee-quotes.splintered.co.uk/

Slide 124

Slide 124 text

@brucel Schmutza, Sondereggera and Sauera  • Sixty-one participants without disabilities used one of three websites diﬀering in levels of accessibility • A high level of web accessibility led to better performance (i.e., task completion time and task completion rate) than low or very low accessibility. • Likewise, high web accessibility improved user ratings (i.e., perceived usability, aesthetics, workload and trustworthiness) compared to low or very low web accessibility. Department of Psychology, University of Fribourg, Fribourg, Switzerland www.unifr.ch/psycho/assets/files/KogErg/SchmutzSondereggerSauer2016.pdf

Slide 125

Slide 125 text

@brucel Accessibility is part of Usability • “high conformance with web accessibility guidelines may provide beneﬁts to users without disabilities.”  • a11y isn’t tricky. Hardest is with Web Components, and new AOM is going to help with that

Slide 126

Slide 126 text

@brucel Decentralisation No permission is needed from a central authority to post anything on the web, there is no central controlling node, and so no single point of failure … and no “kill switch”! This also implies freedom from indiscriminate censorship and surveillance. https://webfoundation.org/about/vision/history-of-the-web/

Slide 127

Slide 127 text

@brucel

Slide 128

Slide 128 text

@brucel Five years ago, buying a cell phone SIM card in Myanmar could set you back more than $2,000… In August [2014], Qatar’s Ooredoo began selling data- enabled cards with a 3G connection for $1.50. When a SIM Card Goes From $2,000 to $1.50 Bloomberg (29 Sept ’14) SIM: was $2,000 now $1.50 “

Slide 129

Slide 129 text

@brucel https://www.reuters.com/investigates/special-report/myanmar-facebook-hate/

Slide 130

Slide 130 text

@brucel UNHCR/Roger Arnold

Slide 131

Slide 131 text

@brucel Not just Burma Karsten Müller and Carlo Schwarz, researchers at the University of Warwick, scrutinized every anti-refugee attack in Germany, 3,335 in all, over a two-year span. In each, they analyzed the local community by any variable that seemed relevant. Wealth. Demographics. Support for far-right politics. Newspaper sales. Number of refugees. History of hate crime. Number of protests. https://www.nytimes.com/2018/08/21/world/europe/facebook-refugee-attacks- germany.html

Slide 132

Slide 132 text

@brucel Their reams of data converged on a breathtaking statistic: Wherever per-person Facebook use rose to one standard deviation above the national average, attacks on refugees increased by about 50 percent.

Slide 133

Slide 133 text

@brucel

Slide 134

Slide 134 text

@brucel politicalite.com

Slide 135

Slide 135 text

@brucel Coral

Slide 136

Slide 136 text

@brucel Photo by @snappybooth.co from nappy.co

Slide 137

Slide 137 text

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. It took the Industrial Revolution of the 19th century 50 years to produce the same result. - The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute) Internet matters

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

Courtesy of Hesperian

Slide 140

Slide 140 text

No content

Slide 141

Slide 141 text

No content

Slide 142

Slide 142 text

If you want to liberate a country, give them the internet. “ - Wael Ghonim, Egyptian internet activist

Slide 143

Slide 143 text

The web is…

Slide 144

Slide 144 text

No content

Slide 145

Slide 145 text

No content

Slide 146

Slide 146 text

No content

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

@brucel

Slide 149

Slide 149 text

@brucel

Slide 150

Slide 150 text

@brucel

Slide 151

Slide 151 text

@brucel

Slide 152

Slide 152 text

@brucel

Slide 153

Slide 153 text

@brucel

Slide 154

Slide 154 text

@brucel

Slide 155

Slide 155 text

Photo by Nick Webb https://www.flickr.com/photos/nickwebb/7662611544/