From IndieWeb

Testing was a session at IndieWebCamp Brighton 2024.

Notes archived from: https://etherpad.indieweb.org/testing

IndieWebCamp Brighton 2024
Session: Testing
When: 2024-03-09 15:00



  • Jeremy: I like "bookmarklets". Snippets of code to run on any page.
  • Two ways to do. 1 is put a lot of complexity into the script itself. Or, 2 (dumb), pass the URL to a service elsewhere that will do the complex stuff.
  • Prefers dumb bookmarklets as they work across browsers. But good thing with extensions is they should (hopefully) be updated if changes. Dumb bookmarklets also more likely to let the site be read without content security policy boundaries.
  • Has some on blog: adactio.com/journal
  • HTML5 Validator: useful for finding genuine mistakes even though browsers are much more forgiving these days
  • Page Speed Insights - Lighthouse
  • ANDI: accessibility
  • tota11y: prefers over ANDI (wasn't working today unfortunately)
  • 1.4.12Text Spacing
  • Tip: bump up the view to 400% to see if everything still works
  • Invert colors on page to view or view in monochrome to test for
  • No JS Side-by-side: lets you view the page split in two with one side with JS on, and one side JS off
  • worldwideweb30.com: fun that lets you see your website in the first ever web browser.
  • Paragraph border maker: Fran knew a tool called "x-ray bookmarklet" that used to show different elements of the code. "X Ray Goggles" kind of works the same over hover.
  • sslabs.com: looks as SSL certificates
  • securityheaders.com
  • themarkup.org / blacklight: looking at what crap is tracking you
  • Website Carbon Calculator: looks at hosting, and hosting greenness. If you want clients interested in performance, bring up green-ness and get their interest ;)
  • Request Map Generator: requestmap.webperf.tools shows the back deep end of the rabbit hole of where data is pulled from. AMAZING in visual tool. Visually displays everything the end user is downloading. Type in www.cnn.com and be amazed.
  • Andy:
  • Voiceover: screen reader (built into Mac) that will read a screen which you can do with your eyes closed for a sense reading
  • nvda: Windows screen reader
  • Selenium: tests with GitHub
  • Most of these (above) are also available as browser extensions
  • Some of these won't work
  • Helpful for accessibility and performance.
  • Terence: has "elnk" feature that puts the page in black and white to look at how page is visualized without colour. shkspr.mobi.blog
  • Lynx: text only browser that shows you the structure of your page to show you what a screen reader will see.
  • You can turn off CSS on some browsers. "Naked CSS Day". You can see things that is running the back
  • "motherfuckingwebsite.com" - example with NO CSS.
  • Getting structure right to begin with is one of the hardest bit. Thinking about the structure of HTML is essential so if you can work on logical structure of the page.
  • Crystal energy: uses for hosting as it's meant to be very green.
  • Calum:
  • Using "Wave" as accessibility tool
  • Andy: Silk Tide - also can simulate for color blindness
  • Scout: Something to be said for writing in HTML first
  • Fran: Write in HTML first. Makes it automatically mobile friendly.
  • Jeremy: Building robustly, if you have built from HTML first and CSS is a layer, you can then easily make changes at future days. Jeremy also has different themes on his site.

The testing tools are helpful to expose each of the layers built into web design. They are the 'x-ray vision'.

Fran: Grid layout and flex layout reads nicely in Firefox. Under "layout".

  • Jeremy: Under dev tools on Firefox: Hit "Network", disable cache, hit the bin, click the stopwatch: you'll see what is taking up most space on website broken down by code
  • Firefox is really good for inspecting accessibility.
  • Can add: Axe DevTools to Firefox add-ons for accessibility reading. Takes away false positives.
  • Terence: Sub resource Integrity: allows you to ask your website to only load external source if it is the same.

See Also