Friday Frontend: Testing and Tracking Edition
Hope your week was amazing, and if you’re in the States that you had a great Labor Day holiday.
This week there were two themes standing out to me: 1 was looking again at the right way to do testing in the frontend. I include two articles, one on state-machine based testing that blew my mind (in a good way!) and another more traditional unit testing article. Worth looking at the two side by side.
The second theme was a growing push/pull on the subject of tracking between browser vendors (Firefox and Brave) and advertising companies. Google is the elephant in the room with teams on both sides. This to me is one of the big debates going on right now that will shape many things in the future of the web. Enjoy!
KBall from ZenDev
CSS & SCSS
A fascinating look at how the evolution in CSS layout technologies has changed the way we think about data overflow and layout, and how that can change the way we think about design on the web.
This is a fascinating look at how you can change colors on photos with carefully crafted SVGs and some CSS. The blend-mode effect is fascinating, because of the way it merges color into the background so even with shadows and other “imperfections” on the image, the color is updated correctly.
Specificity continues to be one of the topics that causes the most confusion among developers who are new to CSS. Sometimes even developers who’ve been writing CSS for a while can struggle to understand how it works. This is a great step by step guide to what specificity is and how it work.
A beautiful example of how CSS Grid not only simplifies our CSS, but also makes it more readable. I love the idea of using named grid lines to be able to create essentially a semantic “micro-dsl” for laying out items. In a grid representing days of the week, laying out duration with
grid-column: mon-morning / sat-night; just feels incredibly satisfying.
Very interesting look at using state machines to automatically generate tests. I’ve seen approaches like this before, but almost exclusively in the backend for testing model logic. Seeing it used to test a user interface is very interesting.
For another take on testing, this article looks at what the boundaries around unit testing should look like, particularly for Vue components. This looks a lot like how I think about tests, though frankly reading this right after the state machine testing article above it feels like a step backwards. Worth reading in combo with the above, let me know what you think!
The question of privacy and personal data is a huge issue playing out right now in the tech community, and Firefox is taking a pretty clear stand on the side of user privacy. With their latest release, they block 3rd party cookies by default.
This is possibly even more interesting, where a browser vendor (Brave) that is building a browser based on Chromium (largely Google backed) is taking Google to court over privacy breaches related to RTB. If you’re working in ad-tech or your business depends on advertising money, this is well worth paying attention to.
A very interesting set of thoughts and questions around the debate that occurred in JSParty #87. (Bias alert - I was in that original episode). The most interesting dimension is not around whether or not we should use JS but how do we adjust our tooling based on the problems at hand. IE how do we make sure we’re using JS for the right problems and not over-applying complex frameworks or libraries when simpler solutions will do?
The distinction between cancelation and simply closing a section is subtle, but I know that as a user I’ve been confused more than once by UIs that did one when I expected the other. This article does a great job of talking through the distinction and some of the thinking of how to make a clear design that doesn’t confuse the user. This is a must read if you’re a designer, but even if you’re a front-end dev I’d recommend reading it so you know what designs to push back on and ask questions.
Another great design-focused article looking at another common web pattern: tooltips! Tooltips are super super common, but as this article points out have all sorts of problems when it comes to accessibility and interacting on mobile devices. I love how the author not only calls out the problems but includes alternative approaches and why/when they are better.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!