Friday Frontend: Last Edition of the Year
Welcome to the last Friday Frontend of 2018!
I’ll be taking a 2 week hiatus for the holidays, and then will be back to our regularly scheduled newsletter on Friday, January 11th. I hope you too get a chance to take a break this holiday season, or at least a day here and there to reflect on the year that has been and the year to come.
Down below we’ve got an interesting and eclectic set of articles, ranging from philosophical arguments on best practices in CSS to a cool background-removing image tool, stopping off to talk about XSS. There’s also a number of more straightforward tutorials to keep upping your game. Enjoy!
KBall from ZenDev
CSS & SCSS
An argument that we should keep even pre-calculatable math in our CSS, rather than running the calculations and only including the final work. I definitely agree with this - reminds me of the statement that code is written once but read dozens of time. This is leaving notes to your future self (or anyone else in your codebase).
Very nice breakdown of the lifecycle of these different pseudo-classes, and how that changes when we take mobile devices into account.
A look into all the nuances of the visibility property and how it impacts accessibility.
In the ‘teaching a man to fish’ category, this article breaks down how the CSS specifications are organized and how you can go about using them to learn about CSS. If you’re trying to do something with CSS and can’t find a good tutorial or article on it, the specifications are the canonical source. Knowing how to research what you need will go a long way.
This is really interesting… more recent CSS specifications like flexbox have gone away from the old-web tendency to use physical directions like ‘left’, ‘right’, ‘top’, and ‘bottom’ in favor of logical directions like ‘start’ and ‘end’. This has made it far easier to manage a single set of CSS for multiple languages with different natural directions, making the web less english-centric. Now there are proposals (and implementations!) to extend this concept back to older properties like margins, paddings, float, and more. There are still challenges, but this is a very interesting direction.
D3 used to be the standard for creating custom data visualizations. It enabled power, data-driven and reactive animations in the time of jQuery and Backbone when creating ‘reactive’ front-ends was an extreme challenge. But as this article highlights - tools change, and in these days with the ability to control SVGs using powerful reactive frameworks like React and Vue, it may well be worth rethinking what tooling we should use for our dataviz.
A hosted tool that automatically identifies the background in photos and removes it, leaving you with bare images with transparent backgrounds. Seems to only work reliably with pictures of people, but still very very cool!
With last week’s news about Edge going to a Chromium base, there have been all sorts of “negative’ takes on why we need to use Firefox to help support diversity in browser engines and prevent a monopoly, but this is a great positive piece on the benefits of switching to Firefox.
Very design focused, but worth a readthrough, especially if you’re working in close coordination with designers, to understand the trends that then come trickling down to us in front-end implementation.