KBall from ZenDev
CSS & SCSS
A great video series by Jen Simmons of Mozilla on how to write CSS that takes advantage of the latest and greatest CSS features without leaving folks stuck on IE completely out in the cold.
A couple of the points in here don’t seem to quite hit the mark of ‘lesser known’ or advanced (ids overrule classes? That’s specificity 101!), but there’s enough good stuff that I’ll give it a pass and say this is definitely worth reading through. Lots of good tips and tricks in here, and a sense of humor to boot!
Did you know that
:after pseudoelements can be laid out as part of a grid in CSS Grid? Me neither! This article goes through that and many other super-cool applications of using these pseudoelements.
Last week’s edition included a super cool article about creating a sortable table purely using CSS, taking advantage of the Flexbox
order property. However, we also mentioned how as cool as this is, it plays havoc with accessibility. This article references that article and talks about when it does and does not make sense to use the
Nice combination of an ARIA overview and cheatsheet along with a detailed Vue.js example, along with a link back to a non-accessible version of the same example so you can see what the differences look like.
Now with bonus emoji! But I can forgive the excitement, because this release is huge. Benefits touted include the ability for zero-config webpack builds, a simplified config system in general (much needed!), massive performance improvements (examples cited upwards of 70%), and support for webassembly and other bundle times. Big deal! Go check it out.
A super cool bitesized nugget of a browser API that I didn’t know about. Did you know you can detect when a user has focused in on your page or tab, and when they leave it? I didn’t! But it’s been around for a while - all major browsers support it, including IE! :D This post uses the example of adding a sleeping a emoji when someone changes away from the tab, but I bet you can think of a number of other use cases too.
The ability to use progressive web applications with Chrome on desktops was not something I’d thought much about - we have Electron already for packaging up web for desktop, right? But this article not only discusses what that will look like but points out a HUGE advantage over packaged apps with Electron - security. Browser security bugs are constantly being discovered, and the Chrome release cycle is much faster than Electron. This highlights another big developer advantage - it would bring “desktop” applications into a web-like release cycle, allowing continuous updates. This is big!
Longtime readers will know I’m a HUGE fan of SVG, and one of the biggest reasons is that it SVGs are not just images, they are code very similar to HTML. That’s why it is great to see more and more advanced SVG-focused features in code editors, like these highlighted in VS code.
Typography has long been a place where the web has lagged behind more traditional mediums, but with the increasing power available in web fonts that is no longer true. Using custom fonts is getting continually easier, but the best practices keep shifting. This is a nice overview of the current state of the art, along with resources for learning more and some links to what’s coming up next.
I remember reading through the results of the 2016 Front-End Tooling Survey and being fascinated by what it showed. It helped me to make decisions for the future of ZURB Foundation (at the time I was leading the project), and gave me insight into what was happening around the world. Now the same team is launching another version of the survey. It takes 3 minutes - or at least, that’s how long it just took me. Go take it, and help the community learn about what’s going on in our world!
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!