I released an extremely polished browser extension, Random Bookmark From Folder 2.0 (Firefox, Chrome, source code). It’s basically an entirely new product, as nothing except the icon could be ported from the legacy Firefox version. As a Web developer, I think it’s a wonderful piece of frontend engineering, and I learned a lot that I’d like to share.
- Svelte is a marvelous tool for writing frontend interfaces. Give it an HTML file sprinkled with JavaScript expressions, and Svelte creates what is essentially a mini-library for producing or rewriting the DOM equivalent. Svelte itself won’t need to run on the end user’s device, which minimizes the burden on their CPU, and you’re freed of a lot of the maintenance burdens of vanilla JavaScript without much of a performance trade-off.
- Webpack is a powerful tool for working with modular JavaScript (including Svelte components), and is better-suited for Multi-Page Apps than Rollup. However, as of 3.x it’s not very elegant at handling anything else despite the developers’ efforts, and it’s worth it to use Gulp alongside it to process CSS/Sass. Maybe 4.x changes that, but it’s not well-documented yet.
- WAI-ARIA Authoring Practices is an excellent guide to making many kinds of widgets accessible. It describes not only how to use WAI-ARIA features, but also what keyboard controls to implement. I’m proud to say RBFF follows every recommendation for Tree Views except type-ahead.
- CSS Grid is an amazingly natural fit for tree view widgets. Place the expander in the first row & first column, specify that the children container spans all other columns, and do whatever else you want.
- When creating user interfaces that can be controlled by either mouse or keyboard (such as those recommended by WAI-ARIA Authoring Practices), it can be useful to add elements that can only be focused by keyboard (
tabindex="0"in HTML andpointer-events: none;in CSS), and make sure that any of their mouse counterparts that can otherwise be focused havetabindex="-1". This makes it trivial to detect when the user is using a keyboard instead of a mouse, so that you know when to do things such as display non-standard keyboard controls. If the for-keyboards element is part of a CSS Grid, it can be positioned to overlap whichever grid cells make sense for the focus outline.