Hope you had a great week! This week’s Friday Frontend has some really interesting articles that highlight the ways newer CSS specs are opening up the possibilities of design.

First there’s a great video on the challenges of implementing container queries and how other tools we already have can solve many of the same problems. Then there’s a vision into the round, organic layout of the future enabled by CSS shapes. And then way down in other awesomeness there’s a fascinating exploration of designing in code with modern CSS.

Along the way of course there’s your normal helping of JavaScript and other goodness.

Happy Friday! Enjoy!
KBall from ZenDev

CSS & SCSS

Solving container queries today

Container queries have been on the “I wish we could have that” list for designers and front-end developers for a long time. In this fascinating talk, Greg Witworth from the Edge team talks about why they turn out to be very difficult to implement, and then shifts gears to show us how we can solve almost all the problems container queries would solve with other modern browser tools and APIs.


Take A New Look At CSS Shapes

This is super cool!!! Make sure you update you use the very latest and greatest version of Firefox though, because most of the demos don’t work even in Chrome. I can’t wait for these options to get more widespread… the web of boxes that is our current internet is going to turn into a beautifully curved and multifaceted experience.


The Complete CSS Demo for OpenType Features

Not being much of a typography guy, I had no idea there were so many different features of fonts… much less that you could manipulate them all with a font-feature-settings property that is supported across all browsers. Wow!


21 CSS Animation Examples

A great set of inspirations for different types of animations you can do with CSS, each with a gif showing the animation, a list of compatible browsers, and a link off to a demo with code.


How to Create Printer-friendly Pages with CSS

Printing webpages always feels like a bit of a crapshoot to me. Will this end up looking anything at all like what it does in a browser? Will I get the information I need? I think the reason is that many web developers are completely unaware or uncaring of print styles for their websites. Some frameworks do a reasonable job of doing the “right thing” out of the box (I remember a long discussion about how to do this right in ZURB Foundation), but to a great extent it’s up to the developer. If your site is something you think folks might want to print, you owe it to your users to learn how to do this.


JavaScript

Render Caching for React

Very interesting demonstration of how to very simply set up localstorage caching of React pages. It’s posed as an alternative for those who can’t go all the way to SSR, but I think this has some very interesting possibilities to optimize performance for slow network connections of anyone using your application multiple times.


Comparing the React and Vue Ecosystems with a Real-World SPA

This is an interesting walkthrough showing side-by-side equivalent code in React and Vue. The author is open about being more experienced with Vue, but having spent some time in both frameworks I think he does at writing relatively idiomatic code for each. If you’ve tried one and are curious how the other is different, or you’re still making your mind up for which you want to learn, this article will help.


JS By Example: 8 Distinct Uses Of JavaScript Array Slice

(Bias alert - I wrote this) The JavaScript array slice method is one of the most powerful and commonly used built-ins in the JavaScript language. And with the rise of React and other functionally oriented JavaScript practices, it is becoming even more important. This article teaches how slice works and how you can use it via a series of more and more complex examples.


What’s Coming Up in JavaScript 2018: Async Generators, Better Regex

A look into the ongoing improvements coming in everyone’s favorite language. While async generators are sexy, I’m actually more excited by the regex improvements. I use regular expressions every day, and JavaScript’s regex engine still lags behind a number of server-side languages.


Vue.js - Scoped Styles vs CSS Modules

A look at how Vue makes it super easy to apply styles that are either soft-scoped (to component and its children) or hard scoped (purely within this component) all within a single file component.


Other Awesomeness

The Ecological Impact of Browser Diversity

Interesting and valuable perspective on the importance of testing for (and using) multiple types of browsers. Also, gotta love the biologically-inspired illustrations. Not sure I’ve ever seen a browser compared to a living cell before. :)


Frontend Masters Bootcamp

This won’t be a fit for most of you, but if you’re on this list because you are aspirational about learning front-end (rather than currently using it and trying to improve), or you know someone who really wants to get into this space, this might be a good fit. Frontend Masters is offering a 2 week long bootcamp to get you going with HTML, CSS, and JavaScript, from two excellent and experienced teachers, for the low low cost of $10 (which will get donated to nonprofits anyway). If you know someone who’s been on the fence wanting to learn, send this link over to them!


Designing With Code

A fascinating exploration of how doing design work in HTML and CSS can lead to unexpected discoveries and beautiful designs. The new power of CSS grid brings the web almost up to tools like Sketch in terms of power, while the fluid nature of the way the browser renders things leads to new discoveries and a more organic feel.


So What’s New in Babel 7?

A solid breakdown of what is new in Babel 7. I think one of the biggest things I notice is the emphasis on creating more powerful integration techniques for other tooling. Increasingly, babel is configured by other tools rather than by end developers, and the core team appears to be embracing that future. For individual developers, this should end up translating to less time thinking about babel and more powerful tooling.