Bookmark dump

I have this huge folder that I have been collecting links in for several years. It's one of those folders that I use to catch anything that I find interesting, may need for reference or want to read in the future. The trouble is, I never (spare a few) really go back and review them. So I'm popping them all here as a sort of.. archive, but also to share with the world the random collection of interesting things I have found.

The general topic is web development, so bear that in mind before you begin.

1. Open WP Page - This is a bookmarklet, it sits at the top of the folder and I actually use it a lot to quickly navigate to the WordPress admin page, without really needing to think about it.

2. 44x44 Cursor - Another little bookmarklet, which despite being near the top and theoretically very useful for accessibility testing, I never use it. Not sure where I found it, it made your cursor into a 44x44 square, which was the button/link/interactive element minimum size in WCAG 2.1 (it's been reduced to 24x24 now in WCAG 2.2 for Level AA).

3. Toggle CSS - A bookmarklet that does what it says on the tin. Toggles the CSS on a webpage so you can see its barebones HTML

4. Width overflow - A bookmarklet that runs a JavaScript command to check the webpage and spit out any element that overflow the width of the browser into the console.

5. Colour contrast checker - This is the WebAIM one. I would usually find this by typing it into the browser, rather than navigating my bookmarks. It's a solid one to use, but I prefer colourcontrast.cc these days as it's so visual.

6. The W3C Markup Validation Service - Every developer worth their salt will validate their code. The one run by the W3C is the only one, in my eyes.

7. CSSBattle - A silly game that helps you work on your CSS wizardry. You try to replicate a provided image with as little code as possible.

8. Images done right: Web graphics, good to the last byte — Martian Chronicles, Evil Martians’ team blog - An article I never read about web graphics and using SVGs

9. Revenge CSS - Bookmarklet that uses selectors to find bad markup, not sure I would trust this these days, it is not actively maintained 😛

10. buttonClub - A Codepen made by an old friend who loved collecting buttons with fun hovers. Not very accessible, so don't condone their use but they're fun to look at and inspire you to find ways of building them accessibly.

11. CSS Font stack - A complete collection of web-safe CSS font stacks.

12. &what; - A list of symbols and their HTML entity codes.

13. HTML Spec: 13.5 Named character references - The same as above but from the Web Hypertext Application Technology Working Group

14. Animate On Scroll - A library for easy animation on scroll. Haven't used this in a very very long time.

15. Screen Reader Keyboard Shortcuts and Gestures - A cheatsheet for how the heck to navigate using a screenreader, covers NVDA, JAWS, Narrator, VoiceOver and TalkBack

16. Tornis - A library that gives you a tonne of metrics about the browser being used and the positioning of the cursor. Can be used to make fancy position-based changes. Not sure how performant it is. Never really used it.

17. Umbraco documentation - Umbraco is a .NET CMS, and it has a huge community behind it that keeps it going. This is the wiki for their product.

18. Paul Seal YouTube - Paul Seal is The Guy for Umbraco tutorial videos.

19. jQuery docs: $( document ).ready() - Brain always struggled to remember how to initiate jQuery, so brain bookmarked it. I try to avoid using jQuery now because of the weight it adds to a webpage.

20. Accessible Autocomplete - Developed by the UK government, still in alpha, so not released officially but I have used it in a few projects because Accessible!!

21. Stacking Cards example - Reminds me of a university project one of my peers did, when you would scroll through pages, like into the screen.

22. Google Maps documentation: Markers - Reference this a lot when building maps with the Google Maps API.

23. Textures.js - JavaScript injected SVGs? Not sure I ever used this but I find the patterns visually appealing.

24. noUiSlider - Think I used this once? It's a range input that has multiple handles. Claims to be accessible to boot.

25. ChartJS starter examples - When I had to use ChartJS every other day and I just wanted somewhere quick to start from!

26. ChartJS plugin: chartjs-plugin-deferred - More ChartJS stuff, this one was to make the load in animation wait until a trigger (i.e. scrolling down)

27. Stackoverflow: Values above points - chart.js - When I had to get the values to sit above the point in the chart 😅

28. Stackoverflow: Random color generator - In the answers, there is a few ways of going about generating a rando colour using JavaScript

29. Plyr: A simple, accessible and customisable media player - Never used it, but what a cool tool.

30. Roslyn error - Lol. The Roslyn error comes up a lot when building Umbraco projects for the first time. This is just a snippet to fix it.

31. Useful :nth-child Recipes - Nth child magic! This article helps when brain can't brain.

32. WAS Sample Exam Questions - When I considered becoming a Web Accessibility Specialist but had no idea what I needed to know 100% before doing an exam. Exam fear, engage.

33. Laracasts - A tutorial website for Laravel (php) stuff.

34. Gitmoji - I have my own version of Gitmoji that I use for this website, nothing official, but just a visual way to show what the update consists of.

35. Daily.dev - A new tab dashboard for dev articles. Used this for a bit. Had a group with my colleagues but found only two of us were contributing. Also found it distracting every time I opened a new tab.

36. CSS shadows under adjacent elements - Article about how to deal with CSS shadows overlapping. A dumb frustration that I feel CSSWG should fix.

37. Create beautiful images of your code - Create completely inaccessible, but beautiful pictures of your code using several different colour themes. Usually made to share on social media or somewhere that people don't actually want to copy the code.

38. Modern CSS Solutions for Old CSS Problems - A project by Stephanie Eckles, whom I admire. Some really good tips and tricks, I recommend having a peruse.

39. Scribble Light Pattern - A cool repeatable background pattern.

40. overflow-x, overflow-y tests - An article that proved that I wasn't going absolutely potty. If overflow X or Y "is specified as ‘visible’ and the other is ‘scroll’ or ‘auto".

41. Dummy (or yummy!) paragraph generator using PHP - I had completely forgotten about this one. A friend created it for me and their choice of words is spot on. Here is a sample: Cupcake chocolate beans Gingerbread marzipan

42. Avoiding <img> layout shifts: aspect-ratio vs width & height attributes - I love using aspect ratio!! This was written before my obsession began.

43. Eric Bailey - Just Eric Bailey lol.

44. Hero banners - Not quite the hero we think they are - An article about sustainability, eco-developers and the role of lorge images.

45. custom-device-emulation-chrome - I had this project idea. And this library was gonna help. But honestly, it was so long ago I cannot for the life of me remember what the project idea was.

46. GTMatrix - What is this and why do I have it bookmarked? Looks like some SEO bullshit

47. File examples - Ah! File examples 😀 I have a collection of example files saved to my machine, this is a great resource.

48. URL-encoder for SVG - A converter for using SVGs are background images, border images or masks.

49. Neurodiversity Design System - A coherent set of standards and principles that combine neurodiversity and user experience design.

50. AccessibilityChecker - A free tool that gives you a report of the page and its accessibility sins. (I don't typically use this, my go-to is aXe by Deque University)

51. Hypermedia Systems - Recommended to read by a colleague. They describe it as 'a simpler approach to building applications on the Web and beyond with htmx and Hyperview'.

Ok! We made it! I took out a few links that were dead at the time of writing. And I am sure at some point this list will become a link graveyard of its own, but I feel refreshed, like a digital spring clean.

Time to delete the folder 🪠🧼🫧