Slide 1
Slide 1 text
@brucel
Slide 2
Slide 2 text
@brucel
Slide 3
Slide 3 text
@brucel
§
Slide 4
Slide 4 text
@brucel
Slide 5
Slide 5 text
@brucel
Slide 6
Slide 6 text
@brucel
Treasure!
• More performant
• More accessible
• More robust
• Less code to write
• Less code to test
• More time in the pub/ playing Call Of Duty/ seeing your
kids
Slide 7
Slide 7 text
@brucel
Slide 8
Slide 8 text
@brucel
The treasure map:
• Use HTML properly
• Write more HTML
• Use CSS properly
• Built-in beats Bolt-on. Bigly.
Slide 9
Slide 9 text
@brucel
Slide 10
Slide 10 text
@brucel
Slide 11
Slide 11 text
@brucel
Slide 12
Slide 12 text
@brucel
Slide 13
Slide 13 text
@brucel
Since its first publication in 1970 The
Technique of Furniture Making has
established itself as the bible for all
woodworkers.
Slide 14
Slide 14 text
@brucel
Introduction
Any textbook concerned with the techniques of furniture-
making must deal primarily with the basic handcrafts for
it is upon this groundwork that machine production is built,
and in fact all the machine can ever do is to translate
the essential hand operations into rotary movements of
the cutting tool.
Slide 15
Slide 15 text
@brucel
anyone who has only been shown how to force a piece of
wood against a mechanised saw will have learnt very little,
but if he has had to saw that piece of wood by hand he
will be more likely to know that much more about it, he
will have greater respect for it and will understand in
greater depth the problems that will have to be faced in
its manipulation.
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
@brucel
Slide 20
Slide 20 text
@brucel
職⼈人気質
The Japanese word shokunin is defined by both
Japanese and Japanese-English dictionaries as
‘craftsman’ or ‘artisan,’ but such a literal
description does not fully express the deeper
meaning.
Tashio Odate - “Japanese Woodworking Tools: Their Tradition, Spirit and Use”
Slide 21
Slide 21 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 22
Slide 22 text
@brucel
• Picture of TBL “web developer”
Slide 23
Slide 23 text
Seren
Slide 24
Slide 24 text
@brucel
http://info.cern.ch/hypertext/WWW/TheProject.html
Slide 25
Slide 25 text
@brucel
Slide 26
Slide 26 text
@brucel
We broke it
• fixed width
• bad contrast, fonts, colours
• pixel-perfect layout
• lack of captions for videos
• lack of keyboard accessibility
• removing focus indicator
Slide 27
Slide 27 text
@brucel
The Raw Materials
Slide 28
Slide 28 text
@brucel
b
• web comping
Slide 29
Slide 29 text
@brucel
Slide 30
Slide 30 text
@brucel
Top four
1. Have a fundamental understanding of JavaScript
“Of course you can’t do full-stack JavaScript development (or
full-stack any web development for that matter), without
learning JavaScript itself.”
2. Front-End framework
3. Bootstrap 4
4. HTML/CSS
Slide 31
Slide 31 text
@brucel
As for HTML, there’s not much to learn right away
and you can kind of learn as you go, but before
making your first templates, know the difference
between in-line elements like and how they
differ from block ones like
. This will save you a
huge amount of headache when fiddling with your
CSS code.
Slide 32
Slide 32 text
@brucel
Slide 33
Slide 33 text
@brucel
HTML is declarative
Click Me!
Slide 34
Slide 34 text
@brucel
HTML is fault-tolerant
OMG you’re having a seizure
Slide 36
Slide 36 text
@brucel
Paving a cowpath
Slide 37
Slide 37 text
@brucel
Slide 38
Slide 38 text
@brucel
HTML is interoperable.
I’m badly nested
Slide 39
Slide 39 text
@brucel
Ninja by Efe Palavan
from the Noun Project
Slide 40
Slide 40 text
@brucel
JavaScript is NOT declarative
Imperative programming focuses on describing how a
program operates.
The term is often used in contrast to declarative
programming, which focuses on what the program should
accomplish without specifying how the program should
achieve the result.
Slide 41
Slide 41 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 42
Slide 42 text
@brucel
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
https://kryogenix.org/code/browser/everyonehasjs.html
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
@brucel
Oooh demo
Slide 48
Slide 48 text
@brucel
Wooooh code
blah blah blah
blah blah blah
Slide 49
Slide 49 text
@brucel
https://wicg.github.io/aom/explainer.html
Slide 50
Slide 50 text
@brucel
Click me (if you can!)
• Remember to set ARIA role (in HTML or JS)
• Remember to manage focusability
• Remember to listen for the correct keypresses
Slide 51
Slide 51 text
@brucel
Slide 52
Slide 52 text
@brucel
div
“The div element has no special meaning at all.
Authors are strongly encouraged to view the div element as
an element of last resort, for when no other element is
suitable. Use of more appropriate elements instead of
the div element leads to better accessibility for readers and
easier maintainability for authors.”
Slide 53
Slide 53 text
@brucel
Slide 54
Slide 54 text
@brucel
Screen reader users
webaim.org/projects/screenreadersurvey5/ - used by kind permission
Slide 55
Slide 55 text
@brucel
• Leonie vid clip
https://www.smashingmagazine.com/2019/02/accessibility-webinar/
Slide 56
Slide 56 text
@brucel
“Structured data”
When you add markup to your content, you help search
engines understand the different components of a page.
When Google's systems understand your page more clearly,
Google Search can surface content through the cool features
discussed in this post, which can enhance the user
experience and get you more traffic.
https://webmasters.googleblog.com/2019/04/enriching-search-results-structured-data.html
Slide 57
Slide 57 text
@brucel
ooooh $$$$
• Eventbrite leveraged event structured data and saw 100%
increase in the typical YOY growth of traffic from
search.
• Jobrapido integrated with the job experience on Google
Search and saw 115% increase in organic traffic, 270%
increase of new user registrations from organic traffic,
and 15% lower bounce rate for Google visitors to job
pages.
• Rakuten used the recipe search experience and saw a 2.7X
increase in traffic from search engines and a 1.5X
increase in session duration.
Slide 58
Slide 58 text
@brucel
The HTML Treasure Hunt
...Slide 59
Slide 59 text
@brucel
Slide 60
Slide 60 text
@brucel
Slide 61
Slide 61 text
@brucel
Slide 62
Slide 62 text
@brucel
Slide 63
Slide 63 text
@brucel
Accessibility is part of Usability
“high conformance with web
accessibility guidelines may
provide benefits to users
without disabilities.”
Slide 64
Slide 64 text
@brucel
Schmutz, Sonderegger and Sauer
• 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
Slide 65
Slide 65 text
@brucel
Slide 66
Slide 66 text
@brucel
https://twitter.com/goodwitch/status/1106231135443410944
Slide 67
Slide 67 text
@brucel
Slide 68
Slide 68 text
@brucel
Slide 69
Slide 69 text
@brucel
Slide 70
Slide 70 text
@brucel
Slide 71
Slide 71 text
@brucel
Slide 72
Slide 72 text
@brucel
Slide 73
Slide 73 text
@brucel
Slide 74
Slide 74 text
@brucel
Slide 75
Slide 75 text
@brucel
Slide 76
Slide 76 text
@brucel
Slide 77
Slide 77 text
@brucel
Slide 78
Slide 78 text
@brucel
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
@brucel
Slide 81
Slide 81 text
@brucel
Slide 82
Slide 82 text
@brucel
Slide 83
Slide 83 text
@brucel
webmonetization.org
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
@brucel
Slide 86
Slide 86 text
@brucel
Slide 87
Slide 87 text
@brucel
Slide 88
Slide 88 text
@brucel
Slide 89
Slide 89 text
@brucel
Slide 90
Slide 90 text
@brucel
Slide 91
Slide 91 text
@brucel
Slide 92
Slide 92 text
@brucel
Slide 93
Slide 93 text
@brucel
Interledger is developed by an open group of companies and individual
contributors, loosely organized as part of a Community Group of the World Wide
Web Consortium (W3C).
Interledger is an open protocol suite for sending payments across
different ledgers. Like routers on the Internet, connectors route packets of
money across independent payment networks.
The open architecture and minimal protocol enable interoperability for any value
transfer system.
Interledger is not tied to any one company, blockchain, or currency.
Slide 94
Slide 94 text
@brucel
Slide 95
Slide 95 text
@brucel
$306,552
(payments sent, not payments
facilitated/processed)
Slide 96
Slide 96 text
@brucel
Slide 97
Slide 97 text
@brucel
"Inevitably, 2020 will be another year of change for
digital publishers. However, just like in years past,
publishers will continue to thrive if they
embrace these industry changes and develop
new, differentiated sources of revenue.”
4 Reasons Why News Media Will Thrive In The Wake Of Privacy Regulation
(AdExchanger.com, Sept 2019)
Slide 98
Slide 98 text
@brucel
• Picture of TBL “web developer”
Slide 99
Slide 99 text
@brucel
Sir Uncle Timbo:
The web is for everyone and collectively we
hold the power to change it. It won’t be easy.
But if we dream a little and work a lot, we
can get the web we want.
https://webfoundation.org/2019/03/web-birthday-30/
Slide 100
Slide 100 text
@brucel
What can you do?
• Learn the semantics of HTML. There are 120(ish) elements, that’s all!
Slide 101
Slide 101 text
@brucel
Most 2-year-olds can say about 100 words.
Slide 102
Slide 102 text
@brucel
By the time your toddler is 2 1/2, she'll probably know close to 300
Slide 103
Slide 103 text
@brucel
Slide 104
Slide 104 text
@brucel
What can you do?
• Learn the semantics of HTML. There are 120(ish) elements, that’s all!
• Run automated tests and go for low-hanging fruit, e.g. colour contrast
Slide 105
Slide 105 text
@brucel
98% of top million pages have errors
https://webaim.org/projects/million/
Slide 106
Slide 106 text
@brucel
https://ada.is/contrast-widget/
Slide 107
Slide 107 text
@brucel
What can you do?
• Learn the semantics of HTML. There are 120(ish) elements, that’s all!
• Run automated tests and go for low-hanging fruit, e.g. colour contrast
• Use HTML (and CSS) wherever possible.
• Make sites that work without JavaScript, then enhance with JS.
• Choose your libraries carefully.
Slide 108
Slide 108 text
@brucel
tenon-ui.info
Bruce Approved!
Slide 109
Slide 109 text
@brucel
react-bootstrap
https://react-bootstrap.github.io/components/navs/
Slide 110
Slide 110 text
@brucel
What no ?
Bruce rejected.
Slide 111
Slide 111 text
@brucel
http://www.commitstrip.com/en/2019/04/19/its-better-with-javascript/
Slide 112
Slide 112 text
@brucel
Slide 113
Slide 113 text
@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/
“
Slide 114
Slide 114 text
@brucel
500MB data: hours worked
https://360.here.com/2015/06/03/offline-navigation-really-matters-500mb-data-costs-week-wages/
Slide 115
Slide 115 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 116
Slide 116 text
@brucel
The Baseline Costs of JavaScript Frameworks
Your React application will never load faster than about 1.1
seconds on an average phone in India, no matter how much
you optimize it. Your Angular app will always take at least
2.7 seconds to boot up.
Ankur Sethi, Nov 2018
https://blog.uncommon.is/the-baseline-costs-of-javascript-frameworks-f768e2865d4a
“
Slide 117
Slide 117 text
ICT access by population
Total
global population
~7.4 billion
High-speed
internet
1.1 billion
Total
internet users
3.2 billion
Mobile phones
5.2 billion
Within
mobile coverage
7 billion
World Bank: Digital Dividends 2016
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
Developing countries are home to 94% of the
global offline population.
“
- State of Connectivity 2014, internet.org
Slide 120
Slide 120 text
Making the internet universally accessible
and affordable should be a global priority.
“
World Bank
Slide 121
Slide 121 text
Courtesy of Hesperian
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
If you want to liberate a country, give them
the internet.
“
- Wael Ghonim, Egyptian internet activist
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 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.
“
Internet matters
- The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)
Slide 127
Slide 127 text
It took the Industrial Revolution of the 19th
century 50 years to produce the same result.
“
Internet matters
- The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
@brucel
• [image of a crowd of people - terrible stock
photo?]
Slide 132
Slide 132 text
@brucel
Slide 133
Slide 133 text
@brucel
Slide 134
Slide 134 text
@brucel
Slide 135
Slide 135 text
@brucel
Slide 136
Slide 136 text
@brucel
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
THANKS ’N’ SNOGS!
brucelawson.co.uk
@brucel
* Other Bruce Lawsons are available.
** known to cause nausea in some jurisdictions.