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

frontzurich 26 August 2021

frontzurich 26 August 2021

6f3ec7315ad0715ae2a5f89a52877218?s=128

bruce lawson

August 26, 2021
Tweet

Transcript

  1. @brucel

  2. @brucel

  3. @brucel

  4. @brucel

  5. @brucel

  6. @brucel

  7. @brucel

  8. @brucel §

  9. @brucel

  10. @brucel

  11. @brucel Treasure! • More performant • More accessible • More

    robust • Less code to write • Less code to test • More time in the pub
  12. @brucel

  13. @brucel The treasure map: • Use HTML properly • Write

    more HTML • Use CSS properly • Built-in beats Bolt-on. Bigly.
  14. @brucel

  15. @brucel

  16. @brucel

  17. @brucel

  18. @brucel Since its fi rst publication in 1970 The Technique

    of Furniture Making has established itself as the bible for all woodworkers.
  19. @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.
  20. None
  21. None
  22. None
  23. @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.
  24. @brucel

  25. @brucel 職⼈気質 The Japanese word shokunin is de fi ned

    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”
  26. @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”
  27. @brucel • Picture of TBL “web developer”

  28. Seren

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

  30. @brucel

  31. @brucel We broke it • fi xed width • bad

    contrast, fonts, colours • pixel-perfect layout • lack of captions for videos • lack of keyboard accessibility • removing focus indicator
  32. @brucel

  33. @brucel The Raw Materials

  34. @brucel b • web comping

  35. @brucel

  36. @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
  37. @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 fi rst templates, know the di ff erence between in-line elements like <span> and how they di ff er from block ones like <div>. This will save you a huge amount of headache when fi ddling with your CSS code.
  38. @brucel

  39. @brucel HTML is declarative <button type="button">Click Me!</button >

  40. @brucel HTML is fault-tolerant <blink>OMG you’re having a seizure</blink >

  41. @brucel so is backwards compatible <video src=“video.mp4” > <p>Can’t play

    it . <a href=“video.mp4”>Download it</a>.</p > </video >
  42. @brucel Silly HTML3 <FIG SRC=“nicodamus.jpeg" > 
 <CAPTION>Ground dweller: <I>Nicodamus

    bicolor</I> builds silk snares</CAPTION > 
 <P>A small hairy spider light fleshy red in color with a brown abdomen.
 <CREDIT>J. A. L. Cooke/OSF</CREDIT> </FIG>
  43. @brucel Clever HTML5 <FIGURE > <IMG SRC=“nicodamus.jpeg" > 
 <FIGCAPTION>Ground

    dweller: <I>Nicodamus bicolor</I> builds silk snares</FIGCAPTION > 
 <P>A small hairy spider light fleshy red in color with a brown abdomen.
 <SMALL>J. A. L. Cooke/OSF</SMALL> </FIG>
  44. @brucel Paving a cowpath <picture > <source srcset=“tiny.webp” type=“image/webp” >

    <img src=“small.jpg” alt=“...” > </picture>
  45. @brucel

  46. @brucel HTML is interoperable. <b><i>I’m badly nested</b></i >

  47. @brucel Ninja by Efe Palavan from the Noun Project

  48. @brucel CSS is fault tolerant button {color: black; background: white;

    background-image: linear-gradient (...); background-image: paint ( ... ); }
  49. @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.
  50. @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 “
  51. @brucel

  52. None
  53. None
  54. https://kryogenix.org/code/browser/everyonehasjs.html

  55. None
  56. @brucel Oooh demo

  57. @brucel Wooooh code <input type=“checkbox”><span>blah blah blah</span > <label for=“thing”>

    blah blah blah </label > <input id=“thing” type=“checkbox”>
  58. @brucel https://wicg.github.io/aom/explainer.html

  59. @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
  60. @brucel “Perhaps we could research why we need 92 variants

    of button related elements that aren't a native button, for example, and try to fi ll the native gap.” https://almanac.httparchive.org/en/2019/markup
  61. @brucel

  62. @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.”
  63. @brucel

  64. @brucel Screen reader users webaim.org/projects/screenreadersurvey5/ - used by kind permission

  65. @brucel • Leonie vid clip https://www.smashingmagazine.com/2019/02/accessibility-webinar/

  66. @brucel 11 tags are used on > 90% of pages

    <html > <head > <body > <title > <meta > <a > <div > <link > <script > <img > <span >
  67. @brucel 15 other elements occur on > 50% of pages:

    <ul > <li > <p > <style > <input > <br > <form > <h2 > <h1 > <iframe > <h3 > <button > <footer > <header > <nav >
  68. @brucel “Structured data” When you add markup to your content,

    you help search engines understand the di ff erent 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 tra ff i c. https://webmasters.googleblog.com/2019/04/enriching-search-results-structured-data.html
  69. @brucel ooooh $$$$ • Eventbrite leveraged event structured data and

    saw 100% increase in the typical YOY growth of tra ff i c from search. • Jobrapido integrated with the job experience on Google Search and saw 115% increase in organic tra ff i c, 270% increase of new user registrations from organic tra ff i c, and 15% lower bounce rate for Google visitors to job pages. • Rakuten used the recipe search experience and saw a 2.7X increase in tra ff i c from search engines and a 1.5X increase in session duration.
  70. @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>
  71. @brucel

  72. @brucel

  73. @brucel

  74. @brucel

  75. @brucel Accessibility is part of Usability “high conformance with web

    accessibility guidelines may provide bene fi ts to users without disabilities.”

  76. @brucel Schmutz, Sonderegger and Sauer 
 • Sixty-one participants without

    disabilities used one of three websites di ff 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
  77. @brucel

  78. @brucel https://twitter.com/goodwitch/status/1106231135443410944

  79. @brucel

  80. @brucel • Picture of TBL “web developer”

  81. @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/
  82. None
  83. @brucel What can you do? Learn the semantics of HTML.

    There are 120(ish) elements, that’s all!
  84. @brucel Most 2-year-olds can say about 100 words.

  85. @brucel By the time your toddler is 2 1/2, she'll

    probably know close to 300
  86. @brucel

  87. @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
  88. @brucel 98% of top million pages have errors https://webaim.org/projects/million/

  89. @brucel https://ada.is/contrast-widget/

  90. @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.
  91. @brucel tenon-ui.info Bruce Approved!

  92. @brucel react-bootstrap https://react-bootstrap.github.io/components/navs/

  93. @brucel What no <nav>? Bruce rejected.

  94. @brucel http://marcosmoura.com/angular-material-sidemenu/

  95. @brucel What no <nav>? Bruce rejected.

  96. @brucel http://www.commitstrip.com/en/2019/04/19/its-better-with-javascript/

  97. @brucel

  98. @brucel “Developer Experience” Bait-and-Switch We cannot continue to use as

    much JavaScript as is now “normal” and expect the web to fl ourish. To get this fi 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/ “
  99. Rise of The Smartphones

  100. None
  101. None
  102. None
  103. the highest average cost is 30,000% more than the cheapest

    average price https://www.visualcapitalist.com/cost-of-mobile-data-worldwide/
  104. Android majority median UK speed is 28.51 Mbps, USA is

    54.99 Mbps, and Hong Kong is 112.32 Mbps Android %age 1 GB data as %age GNI/ capita Download speed (Mbps) Rwanda 80% 3.39% 0.81 Cambodia 60% 1.74% 1.29 India 96% 0.45% 4.09 Indonesia 92% 1.21% 1.88 Laos 83% 2.25% 1.99 Philippines 87% 1.36% 2.05 Thailand 74% 1.14% 14.90 Vietnam 68% 1.07% 16.39
  105. Responsive images <picture > <source srcset=pic.avif media=image/avif > <source srcset=pic.webp

    media=image/webp > <img src=pic.jpg alt=whatevs > </picture>
  106. On a website I recently built, I could reduce the

    total image size from 1.72MB to 172KB just by converting images to avif. https://www.htmhell.dev/tips/the-avif-image-format/ “ 90% reduction in image weight
  107. @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-a ff ordable/ “
  108. 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 “
  109. 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
  110. None
  111. Developing countries are home to 94% of the global offline

    population. “ - State of Connectivity 2014,  ­ internet.org
  112. Making the internet universally accessible and affordable should be a

    global priority . “ World Bank
  113. Courtesy of Hesperian

  114. None
  115. None
  116. If you want to liberate a country, give them the

    internet. “ - Wael Ghonim, Egyptian internet activist
  117. None
  118. 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)
  119. 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)
  120. None
  121. None
  122. @brucel • [image of a crowd of people - terrible

    stock photo?]
  123. @brucel

  124. @brucel

  125. @brucel

  126. @brucel

  127. @brucel

  128. None
  129. THANKS ’N’ ELBOW BUMPS! brucelawson.co.uk @brucel * Other Bruce Lawsons

    are available. ** known to cause nausea in some jurisdictions.