Friday Frontend: Future of Layout Design Edition
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.
Happy Friday! Enjoy!
KBall from ZenDev
CSS & SCSS
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.
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.
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!
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.
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.
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.
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.
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.
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. :)
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.
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.