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

Shokunin of the Web

6f3ec7315ad0715ae2a5f89a52877218?s=47 bruce lawson
September 21, 2018

Shokunin of the Web

Generate Conference, Royal Institution London, 21 September 2018

6f3ec7315ad0715ae2a5f89a52877218?s=128

bruce lawson

September 21, 2018
Tweet

More Decks by bruce lawson

Other Decks in Technology

Transcript

  1. @brucel

  2. @brucel 職⼈人気質 Shokunin is defined in both Japanese and Japanese

    - English dictionary as “craftsman” or “artisan”. Tashio Odate - “Japanese Woodworking Tools: Their Tradition, Spirit and Use”
  3. @brucel Artisan: “a worker in a skilled trade, especially one

    that involves making things by hand.”
  4. @brucel map Japan

  5. @brucel

  6. @brucel

  7. @brucel

  8. @brucel

  9. @brucel robot A robot is a machine—especially one programmable by

    a computer— capable of carrying out a complex series of actions automatically
  10. @brucel robots in your life • satnav • washing machine

    • coffee machine • VCR/ Tivo
  11. @brucel robots you work with • Code linter/ validators •

    CSS grid/ gradient/ animation generators • SASS/ LESS • Babel • Webpack
  12. @brucel

  13. @brucel House of Fraser - www.drapersonline.com

  14. @brucel

  15. @brucel From a technological standpoint, fewer than half of today’s

    schoolchildren in China, Croatia, or Thailand can expect to find a job in an occupation that exists today. (World Bank, p 100) “
  16. @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 “
  17. @brucel

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

  19. @brucel DISCLOSURE • Wix contractor (Web Standards, Open-Source, fashion advisor)

    • NOT consumer products • no longer have any connection, financial or otherwise
  20. @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 afford. With just a few simple questions, Wix ADI designs tailored websites by learning about each person’s or business’ own needs. “
  21. @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/ “
  22. @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 “
  23. @brucel `

  24. @brucel Photo: Bogaerts, Rob / Anefo 


  25. @brucel

  26. @brucel

  27. @brucel

  28. @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 “
  29. @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. “
  30. @brucel

  31. @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”
  32. @brucel 663highland https://en.wikipedia.org/wiki/Tokonoma#/media/File:Kannonin_Tottori16s4470.jpg

  33. @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. “
  34. @brucel

  35. @brucel

  36. @brucel

  37. @brucel

  38. @brucel The Trinity of Tools

  39. @brucel b • web comping

  40. @brucel • Picture of TBL “web developer”

  41. Seren

  42. @brucel Core Strengths of the Web • Universal • Open

    • Decentralised • Principle of least power
  43. @brucel

  44. @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)
  45. @brucel popular Indonesian online site BliBli has more than one-third

    of its 2.5 million customers living in rural areas - Techcrunch, July 2016
  46. @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
  47. @brucel 38% 17% 45% Mobile internet Voice/ text only Non-mobile

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

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

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

    34% 31% 35% Asia Vietnam Data: GSMA , June 2016 22% 44% 34%
  51. @brucel

  52. None
  53. @brucel Step Out

  54. @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 offline 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
  55. @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) “
  56. @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 “
  57. @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 “
  58. @brucel Payments in Thailand

  59. @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)
  60. @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) “
  61. @brucel Don’t do this!

  62. @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 “
  63. @brucel And don’t do this!

  64. @brucel Putri (Indo photo)

  65. @brucel

  66. @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 “
  67. None
  68. None
  69. https://kryogenix.org/code/browser/everyonehasjs.html

  70. @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 modified 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/ “
  71. @brucel

  72. @brucel

  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. Other opinions are available. (But wrong.)

  81. @brucel

  82. @brucel The era of components

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

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

    Shareability
  85. @brucel Thanks Cristiano Rastelli (@areaweb)

  86. @brucel

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

    is global • Order affects cascade • Dependency system - @import • Relies on markup structure (classes, IDs, descendant/ strucural combinators) • Breaks silently
  88. @brucel

  89. @brucel

  90. @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
  91. @brucel Good old CSS: • IDE support • syntax highlighting

    • code completions • validations • CSS generators • huge community
  92. @brucel

  93. @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”
  94. @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.”
  95. @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
  96. @brucel Introducing Stylable is a CSS preprocessor for styling components

    with typed CSS.
  97. @brucel Introducing Mr. Potato Mr Potato is a (React) component.

  98. @brucel Sane APIs We use React and Typescript to provide

    an API for component logic
  99. @brucel A bucket of parts The great thing about Mr.

    Potato is that all of his parts are reusable and customizable
  100. @brucel Personalizing a Potato-Bruce Extending a component’s interface

  101. @brucel {Mohawk: required;}

  102. @brucel

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

  104. @brucel Custom States Use custom states with parameters

  105. @brucel Custom States Use custom states with parameters

  106. @brucel Mix it all together

  107. @brucel

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

  109. @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 “
  110. @brucel

  111. @brucel

  112. @brucel “Developer Experience” Bait-and-Switch We cannot continue to use as

    much JavaScript as is now “normal” and expect the web to flourish. To get this fixed, 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/ “
  113. @brucel 500MB data: hours worked

  114. @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/ “
  115. @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”
  116. @brucel Be one of the Goodies Princess Diana and Queen

    Mother welcoming Monty to heaven. Illustration by John Gara
  117. @brucel

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

  119. @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 “
  120. @brucel http://tim-berners-lee-quotes.splintered.co.uk/

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

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

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

  124. @brucel Schmutza, Sondereggera and Sauera
 • Sixty-one participants without disabilities

    used one of three websites differing 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
  125. @brucel Accessibility is part of Usability • “high conformance with

    web accessibility guidelines may provide benefits to users without disabilities.”
 • a11y isn’t tricky. Hardest is with Web Components, and new AOM is going to help with that
  126. @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/
  127. @brucel

  128. @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 “
  129. @brucel https://www.reuters.com/investigates/special-report/myanmar-facebook-hate/

  130. @brucel UNHCR/Roger Arnold

  131. @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
  132. @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.
  133. @brucel

  134. @brucel politicalite.com

  135. @brucel Coral

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

  137. 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
  138. Developing countries are home to 94% of the global offline

    population. - State of Connectivity 2014, internet.org
  139. Courtesy of Hesperian

  140. None
  141. None
  142. If you want to liberate a country, give them the

    internet. “ - Wael Ghonim, Egyptian internet activist
  143. The web is…

  144. None
  145. None
  146. None
  147. @brucel • [image of a crowd of people - terrible

    stock photo?]
  148. @brucel

  149. @brucel

  150. @brucel

  151. @brucel

  152. @brucel

  153. @brucel

  154. @brucel

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