Codemotion Berlin/ Milan 2018

@brucel §

@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 map Japan

@brucel

@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

@brucel House of Fraser - www.drapersonline.com

@brucel

@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

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

@brucel Photo: Bogaerts, Rob / Anefo  

@brucel

@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

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

@brucel 663highland 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

@brucel The Raw Materials

@brucel b • web comping

@brucel • Picture of TBL “web developer”

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

@brucel

@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

34% 31% 35% Asia Thailand Data: GSMA , June 2016 26% 6% 68%

34% 31% 35% Asia Philippines Data: GSMA , June 2016 28% 26% 46%

34% 31% 35% Asia Vietnam Data: GSMA , June 2016 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

@brucel Step Out

@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 Payments in Thailand

@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 Don’t do this!

@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 And don’t do this!

@brucel Putri (Indo photo)

@brucel

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

@brucel

Other opinions are available. (But wrong.)

@brucel

@brucel The era of components

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

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

@brucel Thanks Cristiano Rastelli (@areaweb)

@brucel

@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

@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

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

@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 {Mohawk: required;}

@brucel

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

@brucel Custom States Use custom states with parameters

@brucel Mix it all together

@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

@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 職⼈人気質 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”

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

@brucel

@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

@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 UNHCR/Roger Arnold

@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

@brucel politicalite.com

@brucel Coral

@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

Courtesy of Hesperian

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

The web is…

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

@brucel

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

@brucel Thank you!

Codemotion Berlin/ Milan 2018

Codemotion Berlin/ Milan 2018

More Decks by bruce lawson

Other Decks in Technology

Featured

Transcript