2024/Brighton/testing: Difference between revisions
(archive etherpad) |
Tantek.com (talk | contribs) (fix a few typos) |
||
| Line 22: | Line 22: | ||
* Jeremy: I like "bookmarklets". Snippets of code to run on any page. | * 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. | * 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 | * Prefers dumb bookmarklets as they work across browsers. But good thing with 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 | * Has some on blog: adactio.com/journal | ||
* HTML5 Validator: useful for finding genuine mistakes even though browsers are much more forgiving these days | * HTML5 Validator: useful for finding genuine mistakes even though browsers are much more forgiving these days | ||
* Page Speed Insights - Lighthouse | * Page Speed Insights - Lighthouse | ||
* ANDI: | * ANDI: | ||
* tota11y: prefers over ANDI (wasn't working today | * tota11y: prefers over ANDI (wasn't working today ) | ||
* 1.4.12Text Spacing | * 1.4.12Text Spacing | ||
* Tip: bump up the view to 400% to see if everything still works | * Tip: bump up the view to 400% to see if everything still works | ||
* Invert | * Invert 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 | * 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. | * 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 | * Paragraph border maker: Fran knew a tool called "x-ray bookmarklet" that used to show different of the code. "X Ray Goggles" kind of works the same over hover. | ||
* sslabs.com: looks as SSL certificates | * sslabs.com: looks as SSL certificates | ||
* securityheaders.com | * securityheaders.com | ||
| Line 43: | Line 42: | ||
*Andy: | *Andy: | ||
* Voiceover: | * Voiceover: 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 | * nvda: Windows screen reader | ||
* Selenium: tests with | * Selenium: tests with | ||
* Most of these (above) are also available as browser | * Most of these (above) are also available as browser | ||
* Some of these won't work | * Some of these won't work | ||
* Helpful for | * Helpful for and performance. | ||
* Terence: has "elnk" feature that puts the page in black and white to look at how page is | * Terence: has "elnk" feature that puts the page in black and white to look at how page is without colour. shkspr.mobi.blog | ||
* Lynx: text only | * Lynx: text only 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 | * 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 | * "motherfuckingwebsite.com" - example with NO . | ||
* 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. | * 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. | * Crystal energy: uses for hosting as it's meant to be very green. | ||
| Line 63: | Line 62: | ||
* Using "Wave" as accessibility tool | * Using "Wave" as accessibility tool | ||
* Andy: Silk Tide - also can simulate for | * Andy: Silk Tide - also can simulate for blindness | ||
* Scout: Something to be said for writing in HTML first | * Scout: Something to be said for writing in HTML first | ||
| Line 78: | Line 77: | ||
* Firefox is really good for inspecting accessibility. | * Firefox is really good for inspecting accessibility. | ||
* Can add: Axe DevTools to Firefox add-ons for | * Can add: Axe DevTools to Firefox add-ons for 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. | * Terence: Sub resource Integrity: allows you to ask your website to only load external source if it is the same. | ||
Latest revision as of 14:32, 10 March 2024
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
Participants
- Andy
- Fran
- Terence
- Ros
- Jeremy
- Scout
- Calum
- Add yourself here… (see this for more details)
Notes
- 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.