2024/Brighton/testing

Testing was a session at IndieWebCamp Brighton 2024.

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

Participants

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

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.

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.