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!
Best,
KBall from ZenDev
CSS & SCSS
Overflow And Data Loss In CSS
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.
How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG
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.
Understanding Specificity in CSS
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.
Solving Problems With CSS Grid: The Gantt Chart
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.
JavaScript
Model-Based Testing in React with State Machines
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.
Knowing What To Test - Vue Component Unit Testing
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!
JavaScript to Know for React
A great look at a number of JavaScript features that are often “assumed” in React documentation and features, but may confuse new React developers, particularly those who have been working in JavaScript for a while but perhaps not caught up with the latest language features.
A Practical Guide to Symbols in JavaScript
Symbols are a feature that I’ve used in other languages (particularly Ruby) but never before in JavaScript. That said, after reading this I think I’m going to start - in particular the ability to disambiguate between user data and program data and prevent issues like prototype pollution and function overriding looks super cool and powerful!
A Quick Intro to Recursion in Javascript
I almost didn’t include this, because it feels super basic. Recursion is a pretty early topic in any computer science course. But I realized as I was reading about it - I very rarely see recursion mentioned in web development tutorials or other JavaScript related learning. For those who don’t come from a computer science background, it might not be in your toolkit. And if not, it should be; there are some problems that are soooo much simpler to tackle recursively. So if it’s not in your toolkit, read this - it’s a super simple and quick, but clear introduction to the concept of recursion.
Other Awesomeness
Today’s Firefox Blocks Third-Party Tracking Cookies and Cryptomining by Default
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.
Brave uncovers Google’s GDPR workaround
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.
Should a website work without JavaScript?
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?
Cancel vs Close: Design to Distinguish the Difference
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.
The problem with tooltips and what to do instead
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.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)