Of course, along the way we also cover some cool CSS functionality, hear some exciting iOS/Safari news, and get a super cool deep dive into what it’s like to use the web through a screen reader.
KBall from ZenDev
P.S. I try not to do much in the way of self promotion on this newsletter, but I recently wrote a post for the folks at LogRocket talking about the Frontend Development landscape that you might be interested in: “The increasing nature of frontend complexity”
CSS & SCSS
We hear a lot about CSS Grid, but we haven’t heard as much about the CSS Multi Columns layout, even though it is tremendously powerful for a number of column layout problems, and has very wide browser support. This article quickly covers what columns are capable of, and then dives into something really interesting - how you can combine columns with grid to create some super powerful responsive layouts with just a few lines of CSS.
Now this is COOL! This new open source tool released by IBM takes as input a high level specification for a grid - breakpoints, number of columns, gutter sizes, number of rows and the like - and outputs everything you need to use that grid in your project. Not only does it output CSS Grid-based SCSS, but also Flexbox based fallback SCSS and a Sketch file with prebuilt artboards and grid settings for your designers! You can use it as a one-off grid generator, or integrate it straight into your build system. Super cool!
I tend to be a little skeptical of approaches like Atomic CSS, the poster child of “Utility-based CSS”, but I have to admit that this article makes some very strong points. In particular, the idea of starting with small, functionally composable classes and working up from there makes a ton of sense to me.
An excellent in-depth walkthrough on how to use the new variable fonts feature to manipulate multiple features of your fonts using only CSS. I’m excited about this one - browser support is starting to get there (Chrome and Safari yes, Edge and Firefox have previews available), and this is going to make fonts on the web so much more powerful (and lightweight!)
The next major release of webpack is just around the corner, with the beta available today. Check it out for some major upgrades - zero config for simple projects, JSON tree shaking, webassembly support and more!
While still only available in beta/developer builds of iOS 11.1 and macOS 10.13.4, the changelog for the next version of Safari is up and BOY does it get me excited. The biggest item on the list is support for the Web Payments API, which means mobile websites will be able to let folks check out with Apple Pay, but there’s also support for Service Workers (PWAs on iOS here we come!) and much much more.
As exciting as PWA support on iOS is, it’s not all rainbows and sunshine. There are some major differences from how PWAs behave on Android, and some definitely challenges and drawbacks. Read through this article for a sense of the gotchas and what to look for.
After a scarily plausible post that went ridiculously viral talking about how third party dependencies could quietly and almost untrackably harvest sensitive information from your site, developer David Gilbertson talks about some sensible ways to protect yourself and your customer’s information without having to read the source of every npm package you ever use on your site.
This article was incredibly eye-opening for me. While I’ve been interested in accessibility for a while, I always conceptually start with keyboard navigation. I like to use the keyboard to navigate a lot (I’m a coder, I live in my terminal, etc…) and so translating it to the web seems natural. But this article gave me a truly different perspective on the subject of accessibility as it comes to visibility - what the experience of the web is like for someone who is visually impaired. Wow. Definitely go read it.
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!