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

frontzurich 26 August 2021

frontzurich 26 August 2021

bruce lawson

August 26, 2021
Tweet

More Decks by bruce lawson

Other Decks in Technology

Transcript

  1. @brucel

    View Slide

  2. @brucel

    View Slide

  3. @brucel

    View Slide

  4. @brucel

    View Slide

  5. @brucel

    View Slide

  6. @brucel

    View Slide

  7. @brucel

    View Slide

  8. @brucel
    §

    View Slide

  9. @brucel

    View Slide

  10. @brucel

    View Slide

  11. @brucel
    Treasure!
    • More performant

    • More accessible

    • More robust

    • Less code to write

    • Less code to test

    • More time in the pub

    View Slide

  12. @brucel

    View Slide

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

    • Write more HTML

    • Use CSS properly

    • Built-in beats Bolt-on. Bigly.

    View Slide

  14. @brucel

    View Slide

  15. @brucel

    View Slide

  16. @brucel

    View Slide

  17. @brucel

    View Slide

  18. @brucel
    Since its
    fi
    rst publication in 1970 The
    Technique of Furniture Making has
    established itself as the bible for all
    woodworkers.

    View Slide

  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.

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  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.

    View Slide

  24. @brucel

    View Slide

  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”

    View Slide

  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”

    View Slide

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

    View Slide

  28. Seren

    View Slide

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

    View Slide

  30. @brucel

    View Slide

  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

    View Slide

  32. @brucel

    View Slide

  33. @brucel
    The Raw Materials

    View Slide

  34. @brucel
    b
    • web comping

    View Slide

  35. @brucel

    View Slide

  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

    View Slide

  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 and how they
    di
    ff
    er from block ones like . This will save you a
    huge amount of headache when
    fi
    ddling with your
    CSS code.

    View Slide

  38. @brucel

    View Slide

  39. @brucel
    HTML is declarative
    Click Me!>

    View Slide

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

    View Slide

  41. @brucel
    so is backwards compatible
    >

    Can’t play it
    .

    Download it.>

    >

    View Slide

  42. @brucel
    Silly HTML3
    >


    Ground dweller: Nicodamus
    bicolor builds silk snares>


    A small hairy spider light fleshy red in
    color with a brown abdomen.

    J. A. L. Cooke/OSF





    View Slide

  43. @brucel
    Clever HTML5
    >

    >


    Ground dweller: Nicodamus bicolor
    builds silk snares>


    A small hairy spider light fleshy red in color
    with a brown abdomen.

    J. A. L. Cooke/OSF





    View Slide

  44. @brucel
    Paving a cowpath
    >

    type=“image/webp”
    >

    >




    View Slide

  45. @brucel

    View Slide

  46. @brucel
    HTML is interoperable.
    I’m badly nested>

    View Slide

  47. @brucel
    Ninja by Efe Palavan


    from the Noun Project

    View Slide

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

    background: white;

    background-image: linear-gradient (...);

    background-image: paint ( ... );

    }

    View Slide

  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.

    View Slide

  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

    View Slide

  51. @brucel

    View Slide

  52. View Slide

  53. View Slide

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

    View Slide

  55. View Slide

  56. @brucel
    Oooh demo

    View Slide

  57. @brucel
    Wooooh code
    blah blah blah>

    blah blah blah >


    View Slide

  58. @brucel
    https://wicg.github.io/aom/explainer.html

    View Slide

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

    View Slide

  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

    View Slide

  61. @brucel

    View Slide

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

    View Slide

  63. @brucel

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  67. @brucel
    15 other elements occur on > 50% of pages:


    >

    >

    >

    >

    >


    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    View Slide

  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

    View Slide

  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.

    View Slide

  70. @brucel
    >

    >

    The HTML Treasure Hunt>

    datetime="2019-05-20">Monday 20 May 2019>

    >

    ..
    .


    View Slide

  71. @brucel

    View Slide

  72. @brucel

    View Slide

  73. @brucel

    View Slide

  74. @brucel

    View Slide

  75. @brucel
    Accessibility is part of Usability
    “high conformance with web
    accessibility guidelines may
    provide bene
    fi
    ts to users
    without disabilities.”


    View Slide

  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

    View Slide

  77. @brucel

    View Slide

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

    View Slide

  79. @brucel

    View Slide

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

    View Slide

  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/

    View Slide

  82. View Slide

  83. @brucel
    What can you do?
    Learn the semantics of HTML. There are 120(ish) elements, that’s all!

    View Slide

  84. @brucel
    Most 2-year-olds can say about 100 words.

    View Slide

  85. @brucel
    By the time your toddler is 2 1/2, she'll probably know close to 300

    View Slide

  86. @brucel

    View Slide

  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

    View Slide

  88. @brucel
    98% of top million pages have errors
    https://webaim.org/projects/million/

    View Slide

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

    View Slide

  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.

    View Slide

  91. @brucel
    tenon-ui.info
    Bruce Approved!

    View Slide

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

    View Slide

  93. @brucel
    What no ?


    Bruce rejected.

    View Slide

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

    View Slide

  95. @brucel
    What no ?


    Bruce rejected.

    View Slide

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

    View Slide

  97. @brucel

    View Slide

  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/

    View Slide

  99. Rise of The Smartphones

    View Slide

  100. View Slide

  101. View Slide

  102. View Slide

  103. the highest average cost is 30,000% more
    than the cheapest average price

    https://www.visualcapitalist.com/cost-of-mobile-data-worldwide/

    View Slide

  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

    View Slide

  105. Responsive images
    >

    >

    >

    >


    View Slide

  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

    View Slide

  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/

    View Slide

  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


    View Slide

  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

    View Slide

  110. View Slide

  111. Developing countries are home to 94% of the
    global offline population.

    - State of Connectivity 2014,
     ­
    internet.org

    View Slide

  112. Making the internet universally accessible
    and affordable should be a global priority
    .


    World Bank

    View Slide

  113. Courtesy of Hesperian

    View Slide

  114. View Slide

  115. View Slide

  116. If you want to liberate a country, give them
    the internet.

    - Wael Ghonim, Egyptian internet activist

    View Slide

  117. View Slide

  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)

    View Slide

  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)

    View Slide

  120. View Slide

  121. View Slide

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

    View Slide

  123. @brucel

    View Slide

  124. @brucel

    View Slide

  125. @brucel

    View Slide

  126. @brucel

    View Slide

  127. @brucel

    View Slide

  128. View Slide

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


    ** known to cause nausea in some jurisdictions.

    View Slide