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

IJS_Munich.pdf

Avatar for bruce lawson bruce lawson
October 26, 2023
Technology
0
210

 IJS_Munich.pdf

Avatar for bruce lawson

bruce lawson

October 26, 2023
Tweet

More Decks by bruce lawson

See All by bruce lawson
Frontmania Utrecht: Whose Web is it, Anyway?
Avatar for bruce lawson brucel
0
510
Fusion 2024
Avatar for bruce lawson brucel
0
270
axe-con.pdf
Avatar for bruce lawson brucel
0
250
State of the Browser 2022
Avatar for bruce lawson brucel
0
640
FullStack eXchange, July 2022
Avatar for bruce lawson brucel
0
390
Why Web Standards are the new punk rock
Avatar for bruce lawson brucel
0
130
frontzurich 26 August 2021
Avatar for bruce lawson brucel
0
120
Whose Web Is It Anyway?
Avatar for bruce lawson brucel
0
220
Goto Chicago
Avatar for bruce lawson brucel
0
290

Other Decks in Technology

See All in Technology
AIにおけるソフトウェアテスト_ver1.00
Avatar for fumisuke fumisuke
1
330
AWSの新機能検証をやる時こそ、Amazon Qでプロンプトエンジニアリングを駆使しよう
Avatar for k-kun duelist2020jp
1
330
ガバクラのAWS長期継続割引 ～次の4/1に慌てないために～
Avatar for ひよこインフラエンジニア hamijay_cloud
1
580
生成AIによるCloud Native基盤構築の可能性と実践的ガードレールの敷設について
Avatar for nwiizo nwiizo
7
1.4k
持続可能なドキュメント運用のリアル: 1年間の成果とこれから
Avatar for akitok akitok_
1
270
Dynamic Reteaming And Self Organization
Avatar for Miho Nagase miholovesq
3
740
テストって楽しい！開発を加速させるテストの魅力 / Testing is Fun! The Fascinating of Testing to Accelerate Development
Avatar for END aiandrox
0
160
AIでめっちゃ便利になったけど、結局みんなで学ぶよねっていう話
Avatar for KAKEHASHI kakehashi
PRO
1
520
グループ ポリシー再確認 (2)
Avatar for Murachi Akira murachiakira
0
210
Winning at PHP in Production in 2025
Avatar for Benjamin Eberlei beberlei
1
270
Compose におけるパスワード自動入力とパスワード保存
Avatar for tonionagauzzi tonionagauzzi
0
190
OPENLOGI Company Profile
Avatar for OPENLOGI hr01
0
63k

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
268
20k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
230
18k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.5k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.3k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
179
53k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k

Transcript

  1. @brucel, www.brucelawson.co.uk

  2. @brucel §

  3. @brucel

  4. @brucel

  5. @brucel

  6. @brucel

  7. @brucel The web must be for ALL • people with

    disabilities (whether permanent, temporary or situational • people on lower-powered devices, contained networks, expensive data plans.

  8. MEDIAN DESKTOP 2485.7 KB ▲397.1% MEDIAN MOBILE 2175.9 KB ▲1402.7%

    Web pages keep getting bigger https://httparchive.org/reports/state-of-the-web#bytesTotal
  9. None

  10. Don’t Panic – The Facts About Population - Gapminder

  11. None
  12. None
  13. None
  14. None

  15. https://www.gapminder.org/fw/income-levels/

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

  17. Mind the gap the highest average cost is 30,000% more

    than the cheapest average price https://www.visualcapitalist.com/cost-of-mobile-data-worldwide/

  18. Android majority median UK speed is 28.51 Mbps, USA is

    54.99 Mbps, and Hong Kong is 112.32 Mbps Android %age Download speed (Mbps) Rwanda 80% 0.81 Cambodia 60% 1.29 India 96% 4.09 Indonesia 92% 1.88 Laos 83% 1.99 Philippines 87% 2.05 Thailand 74% 14.90 Vietnam 68% 16.39 Connection speed data: https://www.fastmetrics.com/internet-connection-speed-by-country.php Android stats: statcounter https://gs.statcounter.com/os-market-share/mobile/worldwide

  19. Downloading a typical app with 20 MB APK can take

    more than 30 minutes on a 2G network, and the download is likely to fail before completion, due to the flaky nature of the network. “ - How we built Facebook Lite for every Android phone and network Facebook Lite

  20. Twitter “Twitter Lite is network resilient. To reach every person

    on the planet, we need to reach people on slow and unreliable networks … Twitter Lite is interactive in under 5 seconds over 3G on most devices. Most of the world is using 2G or 3G networks; a fast initial experience is essential.” https://blog.twitter.com/engineering/en_us/topics/open-source/2017/how-we-built-twitter-lite.html
  21. None

  22. Best-selling device last year https://www.gsmarena.com/samsung_galaxy_a12-10604.php

  23. None
  24. None
  25. None
  26. None
  27. None
  28. None

  29. https://themarkup.org/still-loading/2022/10/19/dollars-to-megabits-you-may-be-paying-400-times-as-much-as-your-neighbor-for-internet-service

  30. None

  31. <!DOCTYPE html> <meta charset=utf-8> <title>Howdy</title> <h1>Hello, world!</h1> (77 bytes) 48

    KB, after minifying, optimising and gzipping

  32. https://medium.com/walmartglobaltech/the-bene fi ts-of-server-side-rendering-over-client-side-rendering-5d07 ff 2cefe8

  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None

  40. https://medium.com/walmartglobaltech/the-bene fi ts-of-server-side-rendering-over-client-side-rendering-5d07 ff 2cefe8

  41. None
  42. None

  43. React accessibility Nothing inherently inaccessible, if ▪ you choose the

    right components, eg one that produces <nav class=“nav”> rather than <div class=“nav”> ▪ you manually manage focus -all the time!- if making a Single Page Application

  44. https://careers.twitter.com

  45. https://twitter.com/aardrian/status/1629269332856373250

  46. https://platforms.barnardos.org.uk/standards/web-performance/

  47. Battery use is a safeguarding issue One fundamental problem that

    homeless and vulnerable people currently face is the issue of recharging their devices. Many homeless people put themselves in danger in order to access power for their devices, trespassing private property and using outdoor power sockets… This puts them at risk of altercations, violence, or even arrest. The potential for empowering homeless people through digital technology (Lemos&Crane 2013, PDF)

  48. React Native

  49. From the vendor "we found that React Native APIs provide

    strong support for accessibility. However, we also found many core components do not yet fully utilize platform accessibility APIs and support is missing for some platform specific features." Facebook, March 2021 The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired. Facebook, November 2015

  50. https://github.com/facebook/react-native/issues/31820

  51. None

  52. Reactembengularbonestraphubpack.js

  53. Good HTML is foundational Start off with just good quality

    code. That’s by far and away the best thing you could do for accessibility, especially screen reader accessibility. Screen readers are absolutely dependent on plain old semantic HTML. Divs and spans are the absolute worst thing you can do to us because they’re meaningless. HTML5 introduced a whole bunch of elements nav, main, header, footer, aside and such. And from a screen reader user point of view these were one of the most amazing strides forward I can remember coming across. https://f-word.dev/episodes/19/ - Léonie Watson

  54. @brucel

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

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


  56. @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 https://journals.sagepub.com/doi/10.1177/0018720816640962

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

  58. @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/

  59. @brucel What can you do? Learn the semantics of HTML.

    There are 120(ish) elements, that’s all!

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

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

    probably know close to 300

  62. @brucel

  63. Use the force <div class=btn> Clicky click </div>

  64. Visual impaired <div class=btn role=button aria-pressed=false> Clicky click </div>

  65. Keyboard <div class=btn role=button aria-pressed=false tabindex=0> Clicky click </div> wrapper.addEventListener("keydown",

    e => { if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") { toggleBtn(e.target); } });

  66. Style its states [aria-disabled] { pointer-events: none; opacity: 0.5; }

  67. Or ..... <button>

  68. Bruce’s law of web dev Built-in beats bolt-on. Bigly.

  69. HTML popover <button popovertarget=“mypopover"> Show popover</button> <div id="mypopover" popover> Popover

    content</div> ::backdrop { backdrop-filter: blur(3px);}

  70. <dialog> <dialog> <button autofocus>Close</button> <p>I’m a modal</p> </dialog> <button id=show>Show

    the dialog</button> const dialog = document.querySelector("dialog"); const showButton = document.querySelector("#show"); const closeButton = document.querySelector("dialog button"); // "Show the dialog" button opens the dialog modally showButton.addEventListener("click", () => { dialog.showModal(); }); // "Close" button closes the dialog closeButton.addEventListener("click", () => { dialog.close(); });

  71. HTML accordions <details name="accordian"> <summary>FAQ 1</summary> <p>This is the answer

    to Q1</p> </details> <details name="accordian"> <summary>FAQ 2</summary> <p>This is the answer to Q2</p> </details> <details name="accordian"> <summary>FAQ 3</summary> <p>This is the answer to Q3</p> </details> All browsers Speci fi cation stage

  72. <selectlist> https://microsoftedge.github.io/Demos/selectlist/index.html

  73. http://www.html5accessibility.com/index.html

  74. https://learn.microsoft.com/en-us/compliance/regulatory/o ff ering-section-508-vpats

  75. @brucel Progressive Web Apps • Web sites ++ • Can

    save to home screen, open full-screen • Can work o ff l ine (using Service Workers) • Much smaller initial install, instant updates but only the changes • Twitter, Wordle, Farmbound web.dev/learn/pwa/

  76. @brucel

  77. Google PM https://twitter.com/b1tr0t/status/1364996531527380993

  78. Early progressive web apps in Asia & Africa

  79. None

  80. https://daverupert.com/2023/05/getting-started-view-transitions/

  81. @brucel

  82. @brucel APIs not in Safari

  83. @brucel Rule 2.5.6 Apps that browse the web must use

    the appropriate WebKit framework and WebKit Javascript. https://developer.apple.com/app-store/review/guidelines/#software-requirements

  84. @brucel The illusion of competition

  85. @brucel https://arstechnica.com/security/2023/10/hackers-can-force-ios-and-macos-browsers-to-divulge-passwords-and-a-whole-lot-more/

  86. @brucel For your comfort and security. • The researchers have

    successfully leveraged iLeakage to recover YouTube viewing history, the content of a Gmail inbox—when a target is logged in—and a password as it’s being auto fi lled by a credential manager. • While iLeakage works against Macs only when running Safari, iPhones and iPads can be attacked when running any browser because they’re all based on Apple’s WebKit browser engine.

  87. @brucel

  88. @brucel open-web-advocacy.org

  89. @brucel

  90. @brucel

  91. @brucel Browsers are powered by an ‘engine,’ which is fundamental

    to browser performance.… Apple bans alternatives to its own browser engine on its mobile devices; a restriction that is unique to Apple. This restriction also seriously inhibits the capability of web apps – apps that run on a browser rather than having to be individually downloaded – depriving consumers and businesses of the full bene fi ts of this innovative technology. https://www.gov.uk/government/news/cma-plans-market-investigation-into-mobile-browsers-and-cloud-gaming

  92. @brucel

  93. @brucel

  94. @brucel Gatekeepers and core services Gatekeepers should therefore not use

    their position to require their dependent business users to use any of the services provided together with, or in support of, core platform services by the gatekeeper itself as part of the provision of services or products by those business users gatekeepers should also be prohibited from requiring end users to use such services

  95. @brucel https://ec.europa.eu/commission/presscorner/api/ fi les/document/print/en/ip_23_4328/IP_23_4328_EN.pdf

  96. @brucel Big teeth from March 2024 If a gatekeeper violates

    the rules laid down in the legislation, it risks a fi ne of up to 10% of its total worldwide turnover. For a repeat o ff ence, a fi ne of up to 20% of its worldwide turnover may be imposed.

  97. @brucel There is still a dif fi cult fi ght

    ahead Apple has a legal budget of over $1 billion USD annually. “work out how to get closer to a particular risk but be prepared to manage it it it does go nuclear, ... steer the ship as close as you can to that line because that's where the competitive advantage occurs. Apple had to pay a large fi ne, Tim [Cook]’s reaction was that's the right choice, don't let that scare you, I don't want you to stop pushing the envelope.’ Bruce Sewell - Former Apple General Council

  98. https://chromium.googlesource.com/chromium/src/+/main/docs/ios/build_instructions.md

  99. @brucel Apple employees are very sad :-(

  100. @brucel Set Safari free!

  101. @brucel Consider making a Progressive Web App next time, for

    cross- device joy, tasty HTML semantic goodness (h1 - h6!) and accessibility. Until the Apple Browser Ban is ended, use something like Capacitor.js to get it into App Store. Follow and support Open Web Advocacy.
  102. None
  103. None

  104. @brucel • [image of a crowd of people - terrible

    stock photo?]

  105. @brucel

  106. @brucel

  107. @brucel

  108. @brucel

  109. @brucel

  110. None

  111. THANKS ’N’ SNOGS! https://speakerdeck.com/brucel/ijs-munich brucelawson.co.uk * Other Bruce Lawsons are

    available. ** known to cause nausea in some jurisdictions.
OSZAR »