Howdy, y’all! Earlier this week Figma launched Auto Layout which allows components to work a lot more like elements on a web page and respond to the text within a frame. Just like this:
Make sure to check out the video tutorial that Figma posted which walks through building a layout from scratch and how this latest feature can speed things up considerably.
Next up, Lynn Fisher redesigned her personal website and, in a post all about it, she walks us step-by-step through her process. With this latest design you can increase the width of the browser window and watch in delight as the illustrations on the page crack to open and reveal more within them:
It’s a pretty complicated beast of a website! But this post reminded me that Lynn has been doing amazing web design work for years now and so it’s thoroughly worth checking out her archive of work and spending a lazy weekend afternoon digging through each of them.
And finally this week, Firefox 71 released with a host of exciting new features and Chris Mills has all the details:
This time around, we have a plethora of new developer tools features. These include the web socket message inspector, console multi-line editor mode, log on events, and network panel full text search!
And as if that wasn’t good enough, there are important new web platform features available, like CSS subgrid, column-span, Promise.allSettled, and the Media Session API.
I’m particularly excited about the release of subgrid as I’ve been dreaming about this feature for years. But if you need a refresh as to what subgrid is and how it can help us then Rachel Andrew made some fantastic notes about it:
You can nest grids when using Grid Layout, a Grid Item can become a Grid Container by setting
display: gridon it. However […] the tracks defined on that nested grid have no relationship to the tracks on the parent.
? From the blog
The Rising Complexity of JAMstack Sites and How to Manage Them
Mike Riethmuller loves static site generators and the JAMstack approach to dealing with content — by moving away from CMSs and giant databases by instead favoring APIs. However! Mike noticed that his projects have become a lot more difficult over time:
Despite my enthusiasm, I’m often disheartened by the steep complexity curve I typically encounter about halfway through a JAMstack project. Normally the first few weeks are incredibly liberating. It’s easy to get started, there is good visible progress, everything feels lean and fast. Over time, as more features are added, the build steps become more complex, multiple APIs are added, and suddenly everything feels slow. In other words, the development experience begins to suffer.
It usually looks something like this:
That’s why Mike built Supermaya, an Eleventy starter kit that’s designed to add richer features to a blog that you can setup extremely quickly!
Techniques for rendering text in ThreeJS
Daniel Velasquez has made a super in-depth article all about how to render text with WebGL and how that can get extremely complicated pretty quickly.
The interesting thing about this post is that there are so many considerations we need to take into account before we get started on a project like this.
Masking GIFs with other GIFs
Last week, we mentioned Cassie Evans’ wonderful trick where she masked two gifs together to make this rather beautiful effect:
I was so excited about this little demo that I began digging into how Cassie did it. It’s all done with SVG masks, which I haven’t used before, so I walk through how that’s done, step by step.
Netlify
A big shout out to Netlify for sponsoring this week’s newsletter! We use and love Netlify around here at CSS-Tricks and have used it on some of our own projects. It’s super fast to set up a new site with a GitHub workflow and deploy updates when commits are pushed to your production branch — including content edits using the Git-backed Netlify CMS.
Best yet, there’s a free tier. Try it now and deploy a site in seconds. 🚀
