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

Codemotion Milan 2018

bruce lawson
November 30, 2018

Codemotion Milan 2018

How to be a shokunin of the Web

bruce lawson

November 30, 2018


  1. @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”
  2. @brucel Artisan: “a worker in a skilled trade, especially one

    that involves making things by hand.”
  3. @brucel robot A robot is a machine—especially one programmable by

    a computer— capable of carrying out a complex series of actions automatically
  4. @brucel robots you work with • Code linter/ validators •

    CSS grid/ gradient/ animation generators • SASS/ LESS • Babel • Webpack
  5. @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) “
  6. @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 “
  7. @brucel DISCLOSURE • Wix contractor (Web Standards, Open-Source, fashion advisor)

    • NOT consumer products • no longer have any connection, financial or otherwise
  8. @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. “
  9. @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/ “
  10. @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 “
  11. @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 “
  12. @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. “
  13. @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”
  14. @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. “
  15. @brucel Core Strengths of the Web • Universal • Open

    • Decentralised • Principle of least power
  16. @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)
  17. @brucel popular Indonesian online site BliBli has more than one-third

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

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

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

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

    34% 31% 35% Asia Vietnam Data: GSMA , June 2016 22% 44% 34%
  23. @brucel State of the Web in South-East Asia 4 December,

    5pm German time smashingmagazine.com/membership
  24. @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
  25. @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) “
  26. @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 “
  27. @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 “
  28. @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)
  29. @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) “
  30. @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 “
  31. @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 “
  32. @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/ “
  33. @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
  34. @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
  35. @brucel Good old CSS: • IDE support • syntax highlighting

    • code completions • validations • CSS generators • huge community
  36. @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”
  37. @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.”
  38. @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
  39. @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 “
  40. @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/ “
  41. @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/ “
  42. @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”
  43. @brucel Be one of the Goodies Princess Diana and Queen

    Mother welcoming Monty to heaven. Illustration by John Gara
  44. @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 “
  45. @brucel Accessibility is part of Usability “high conformance with web

    accessibility guidelines may provide benefits to users without disabilities.”

  46. @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
  47. @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/
  48. @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 “
  49. @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
  50. @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.
  51. 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
  52. Developing countries are home to 94% of the global offline

    population. - State of Connectivity 2014, internet.org
  53. If you want to liberate a country, give them the

    internet. “ - Wael Ghonim, Egyptian internet activist
  54. @brucel ▪ Progressive Enhancement ▪ Feature detection ▪ Compress images,

    use responsive images ▪ Performance matters! ▪ Consider a Progressive Web App ▪ Test in proxy browsers To be a Shokunin…