Goto Chicago

Transcript

1. @brucel §
2. @brucel Loveliness! • More performant • More accessible • More robust • Less code to write • Less code to test • More time in the pub
3. @brucel TL; DR • Use HTML properly • Write more HTML • Write less JavaScript • Built-in beats Bolt-on. Bigly.
4. @brucel
5. @brucel
6. @brucel
7. @brucel
8. @brucel • Picture of TBL “web developer”
9. Seren
10. @brucel http://info.cern.ch/hypertext/WWW/TheProject.html
11. @brucel
12. @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
13. @brucel The Raw Materials
14. @brucel b • web comping
15. @brucel HTML is declarative <button type="button">Click Me!</button>
16. @brucel HTML is fault-tolerant <blink>OMG you’re having a seizure</blink>
17. @brucel so is backwards compatible <video src=“video.mp4”> <p>Can’t play it. <a href=“video.mp4”>Download it</a>.</p> </video>
18. @brucel Paving a cowpath <picture> <source srcset=“tiny.webp” type=“image/webp”> <img src=“small.jpg” alt=“...”> </picture>
19. @brucel
20. @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.
21. @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 “
22. @brucel
25. https://kryogenix.org/code/browser/everyonehasjs.html
26. https://twitter.com/dracos/status/1251836594509791232
31. @brucel Oooh demo
32. @brucel Wooooh code <input type=“checkbox”><span>blah blah blah</span> <label><input type=“checkbox”> blah blah blah</label>
33. @brucel <button> <div class=“Btn”>Click me (if you can!)</div> • Remember to set ARIA role (in HTML or JS) • Remember to manage focusability • Remember to listen for the correct keypresses
34. @brucel
35. @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.”
36. @brucel
37. @brucel Screen reader users webaim.org/projects/screenreadersurvey5/ - used by kind permission
38. @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
39. @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.
40. @brucel <article itemscope itemtype="http://schema.org/BlogPosting"> <header> <h2 itemprop="headline" id="post-11">The HTML Treasure Hunt</h2> <time itemprop="dateCreated pubdate datePublished" datetime="2019-05-20">Monday 20 May 2019</time> </header> ... </article>
41. @brucel
42. @brucel
43. @brucel
44. @brucel
45. @brucel Accessibility is part of Usability “high conformance with web accessibility guidelines may provide benefits to users without disabilities.”

46. @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
47. @brucel
48. @brucel https://twitter.com/goodwitch/status/1106231135443410944
49. @brucel
50. @brucel • Picture of TBL “web developer”
51. @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/
52. @brucel What can you do? Learn the semantics of HTML. There are 120(ish) elements, that’s all!
53. @brucel Most 2-year-olds can say about 100 words.
54. @brucel By the time your toddler is 2 1/2, she'll probably know close to 300
55. @brucel
56. @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
57. @brucel 98% of top million pages have errors https://webaim.org/projects/million/
58. @brucel https://ada.is/contrast-widget/
59. @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.
60. @brucel tenon-ui.info Bruce Approved!
61. @brucel react-bootstrap https://react-bootstrap.github.io/components/navs/
62. @brucel What no <nav>? Bruce rejected.
63. @brucel React • Design System of Australian Government https://designsystem.gov.au/components/ • Reakit “strictly follows WAI-ARIA 1.1 standards. All components come with proper attributes and keyboard interactions out of the box” • Reach UI “is tested with Safari + VoiceOver, Firefox + NVDA, and Edge + JAWS. As the project matures we’ll get it audited by WebAIM to ensure that if you pick Reach UI, your app has a solid, accessible foundation.”
64. @brucel Others • Vuetensils “Follows WAI-ARIA authoring practices for accessibility baked in; semantics, ARIA attributes, roles, etc.” • Tournant UI and Vue a11y are small but growing. • Lion is a white-label, open-source, framework-agnostic component library from ING Bank: https://github.com/ing-bank/lion/
65. @brucel
66. @brucel
67. @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/ “
68. @brucel 500MB data: hours worked https://360.here.com/2015/06/03/offline-navigation-really-matters-500mb-data-costs-week-wages/
69. @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/ “
70. 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
72. Developing countries are home to 94% of the global offline population. “ - State of Connectivity 2014, internet.org
73. Making the internet universally accessible and affordable should be a global priority. “ World Bank
74. Courtesy of Hesperian
77. If you want to liberate a country, give them the internet. “ - Wael Ghonim, Egyptian internet activist
79. 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)
80. 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)
83. @brucel • [image of a crowd of people - terrible stock photo?]
84. @brucel
85. @brucel
86. @brucel
87. @brucel
88. @brucel
90. THANKS ’N’ SNOGS! brucelawson.co.uk @brucel * Other Bruce Lawsons are available. ** known to cause nausea in some jurisdictions.
91. THANKS ’N’ ELBOW BUMPS! brucelawson.co.uk @brucel * Other Bruce Lawsons are available. ** known to cause nausea in some jurisdictions.