? Links from around the web
Miriam Suzanne has been making a bunch of really lovely bite-size videos about making layouts with CSS Grid—with a special focus on subgrid.
The exciting part is how it’s so much faster to build complex layouts and this shows us just how much the field of web design has improved in recent years. And on this note: I remember wanting subgrid way back in 2007 and shaking my fist at the sky when I realized that the only way to build a particular design would require writing a ton of ugly CSS. Not anymore! These days we’re pretty gosh darn lucky to have the tools we do.
Here’s an interesting new book from Andrew Couldwell about design systems called Laying the Foundations. The book certainly looks very smart, too and I’m excited to read it.
In the introduction, Andrew writes:
System design is not a scary thing — this book aims to dispel that myth. It covers what design systems are, why they are important, and how to get stakeholder buy-in to create one. It introduces you to a simple model, and two very different approaches to creating a design system. What’s unique about this book is its focus on the importance of brand in design systems and creating documentation. It’s a comprehensive, practical guide that’s simple to follow and easy on the eye.
This week, Garrett Dimon wrote this cracking piece about quitting analytics and how he finds metrics on his personal site to hurt more than they help:
What over a decade of number-crunching analytics has taught me is that spending an hour writing, sharing, or helping someone is infinitely more valuable than spending that hour swimming through numbers. Moreover, trying to juice the numbers almost invariably divorces you from thinking about customers and understanding people. On the surface, it seems like a convenient proxy, but it’s not. They’re just numbers. If you’re searching for business insights, talking to real people beats raw data any day. It’s not as convenient, but when is anything worth doing convenient?
I entirely agree with Garrett on this point: when it comes to blogs and personal sites, analytics will focus your attention on the wrong things entirely.
Zach Leatherman published his talk from JAMstack Conf about how to own your content on social media using the IndieWeb:
For this talk I built a social media platform: MySpaceBook.info, the only social media site exclusively for astronauts. Unfortunately midway through the presentation an investor called me up to make an offer on the site and I was left with no choice but to sell it, taking all of the user data down with it. If you use the principles I outline in this talk, you would have been able to take agency over your data, preserving it on your own terms.
? From the Blog
Weaving One Element Over and Under Another Element
Here’s something I’ve never thought about before: stacking content on top of each other in such a way that they weave together, like this:
There’s a number of pretty incredible CSS tricks at play here — Preethi’s use of CSS Grid and the mix-blend-mode property to overlay each shape on top of the other. Just. Remarkable.
The `hidden` attribute is visibly weak
Chris explores all the issues and concerns that folks have with the hidden attribute that can be added to any element like this:
<div hidden>This content will be hidden</div>However! As useful as that sounds, it can be overridden rather easily with CSS and that could cause a bunch of issues, especially if you’re working in a large codebase. Chris also collects a ton of ideas from other web-folk about how to tackle it.
Workflow Considerations for Using an Image Management Service
Image management services (such as Cloudinary or ImageEngine) are wonderful because they greatly reduce the size of the images on your site but – beware! – there are many things you ought to consider before you pick one. Chris looks at a few requirements that are important for him, such as:
- This service should optimize the images and handle quality
- The images should be uploaded to my own independent server
- It should be easy to turn off the service at any time
There’s certainly a lot to consider here!
Let’s Make a Fancy, but Uncomplicated Page Loader
“While it’s tempting to build the fanciest of the fancy loaders, we can actually do a pretty darn good job with only a minimal amount of CSS and JavaScript” writes Maks Akymenko. He shows us how to do just that. Here’s an example of the demo he’s built:
We can do all of this with just a bit of SVG, flexbox, and the window.addEventListener() function. I love effects like this that are relatively easy to implement but make everything feel a bit snappier.
Also, if you’re forced to use a font loading technique that blocks text rendering then maybe a loading spinner is the best way to get around that problem!
WordPress.com
Hey, if you can build a site on WordPress.com, then you should build a site on WordPress.com. WordPress powers 31% of the internet and there’s a reason for that: it scales well for anyone, whether that’s a personal blog or an e-commerce site.
Use WordPress.com to start, update, and view your site seamlessly from any device. There is a generous free plan, but with any of three affordable paid plans you get a custom domain name and access to advanced design tools.
Testim.io Free Trial
QA & Devs agree on quality releases. Testim.io is the AI-powered solution to speed up the creation, execution, and maintenance of automated tests. We use dynamic locators and learn with every execution- but there is so much more we do!