Bruce Lawson - Shokunin of the web - Codemotion Berlin 2018

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

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

@brucel
robot
A robot is a machine—especially one programmable by
a computer— capable of carrying out a complex series of
actions automatically

@brucel
robots in your life
• satnav

• washing machine

• coﬀee machine

• VCR/ Tivo

@brucel
robots you work with
• Code linter/ validators

• CSS grid/ gradient/ animation generators

• SASS/ LESS

• Babel

• Webpack

@brucel
House of Fraser
- www.drapersonline.com

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

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

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

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

• NOT consumer products

• no longer have any connection, ﬁnancial or otherwise

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

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

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

@brucel Photo: Bogaerts, Rob / Anefo

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

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

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

@brucel663highland https://en.wikipedia.org/wiki/Tokonoma#/media/File:Kannonin_Tottori16s4470.jpg

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

“

@brucel
• Picture of TBL “web developer”

@brucel
Core Strengths of the Web
• Universal

• Open

• Decentralised

• Principle of least power

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

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

- Techcrunch, July 2016

@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

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

@brucel
38%
17%
45%
34%
31%
35%
Asia Thailand
26%
6%
68%

@brucel
38%
17%
45%
34%
31%
35%
Asia Philippines
28%
26%
46%

@brucel
38%
17%
45%
34%
31%
35%
Asia Vietnam
22%
44%
34%

@brucel
smashingmagazine.com/membership

@brucel
State of the Web in South-East Asia

4 December, 5pm German time
smashingmagazine.com/membership

@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

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

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

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

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

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

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

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

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

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

Other opinions are available.
(But wrong.)

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

@brucel
Because of
• Re-usability

• Composability

• Testability

• Shareability

@brucel
Thanks Cristiano Rastelli
(@areaweb)

@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

@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

@brucel
Good old CSS:
• IDE support

• syntax highlighting

• code completions

• validations

• CSS generators

• huge community

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

@brucel
https://twitter.com/_philpl/status/935656757942251520
“WhenItestlookandfeelinbrowser,thenIcopypastefrom
inspector,onlytohavetore-writeitasaJSONobject”
“Lack of linting, autocomplete, and css plug-ins for
colors/ incrementing/ etc”.
“Not a gripe. But a concern: Performance.”

@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

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

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

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

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

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

@brucel
Custom States
Use custom states with parameters

@brucel
Try it out!
potatobruce.io

stylable.io

@stylableio

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

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

@brucel
500MB data: hours worked

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

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

Illustration by John Gara

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

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

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

@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

@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

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

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

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

@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

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

@brucel
https://voice.mozilla.org/

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

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

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

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

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

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

Bruce Lawson - Shokunin of the web - Codemotion Berlin 2018

Recommended

Recommended

More Related Content

Similar to Bruce Lawson - Shokunin of the web - Codemotion Berlin 2018

Similar to Bruce Lawson - Shokunin of the web - Codemotion Berlin 2018 (20)

More from Codemotion

More from Codemotion (20)

Recently uploaded

Recently uploaded (20)

Bruce Lawson - Shokunin of the web - Codemotion Berlin 2018