[Robin]: It’s been a long and winding road, but container queries are starting to arrive. They just landed in Chrome Canary. I first spotted this news on Andy Bell’s blog a few weeks ago when he made a great example and tutorial.
First up, we need to head to Chrome Canary and toggle on container queries in chrome://flags/. Once that’s done, we can write some quick HTML, like this:
<div class="parent">
<div class="child">
This is the child element
</div>
</div>Now we can start to write CSS:
.parent {
contain: layout inline-size;
}
.child {
padding: 50px;
background: blue;
}
@container (min-width: 700px) {
.child {
background: red;
}
}That contain property there is performance-focused CSS to help the browser do more performant things with rendering and painting, and it has been part of the story of unlocking these container queries (usage is required here). The real fun part is @container (min-width: 700px) which is basically saying, When
.parent is wider than 700px, change the background of .child to red.
Here’s a quick demo I made that you can check out in Chrome Canary:
Nothing too impressive, sure. But the remarkable thing here is that we finally have all these super powers to style a child element based on the width of its parent. Let’s say I wanted to change the text color or any components within .child if this parent element was in a sidebar. That’s now possible!
Ahmed Shadeed made a much more elaborate series of examples as to how we might use container queries in his “Say Hello to Container Queries” post:
A web page consists of different sections and components, and we make them responsive by using CSS media queries. There is nothing wrong with that, but it has limitations. For example, we can use a media query to show the minimal version of a component on mobile versus desktop.
Oftentimes, responsive web design is not about the viewport or the screen size. It’s about the container size.
He then made this fabulous diagram that illustrates the difference between media queries and container queries:
How useful are container queries going to be? Well, Scott Jehl said this half a decade ago.
I’m so thoroughly excited for container queries landing in more browsers in the near future because they allow us to make much more flexible and elegant components in our design system.
Career Laddering
Next up, Sarah Drasner wrote this great piece about the importance of career laddering when it comes to engineering:
Career laddering is typically a system used to show what expectations are at different levels of a role, a purpose of which is defining how one might be promoted. This can have different forms, but tends to be an internal document that states the expectations of a staff member at any given stage of their career.
Sarah then built this fabulous site that documents each of the different steps on this ladder, from Engineer to Senior Engineer and all the way up to Principal. As Sarah writes, if folks don’t have a clear path to success, then they’re going to be unmotivated or they’re going to burn out.
Reading this piece made me feel that (1) wow, Sarah is a great manager, and (2) that I sincerely wish I had this clear outline when I was at my previous gig. Having an idea of where I was going and what I needed to do to get there would have been so helpful.
Sarah’s argument and goal with the career laddering site isn’t to provide us with a perfect system that we absolutely must use precisely like this though, as she writes:
Again, it’s not important that you use my exact system, but I want to show that having clarity about the roles and expectations of each team member can really go a long way.
One thing I noticed about Sarah’s career ladders: seniority isn’t just about how well you personally code or even how efficient you are. Seniority is instead about how much you aid the community of devs and engineers around you. The more senior you are, the more helpful to everyone you ought to be.
Building a setting component
Adam Argyle shows how to build a settings component that’s responsive and supports multiple devices. One piece of advice I loved here is the way Adam was uses CSS Grid just to add margins to things, like this:
.foo {
display: grid;
gap: 1em;
}There’s lots of other smart tricks in this post, just as there is in this other post from Adam all about building a sidenav component. Here, Adam goes through all the complexities of making a pop-out menu, such as supporting accessible motion and making sure that folks can transition the menu. Adam does that by wrapping the nav in a link:
Extremely smart stuff.
Creating an Editable Textarea That Supports Syntax-Highlighted Code
I found this post by Oliver Geer to be super interesting: he walks us through a super simple code editing interface without using a project like CodeMirror or Ace. It looks something like this:
What is interesting to me is all the annoying edge cases Oliver hit along the way and how he accounted for them as he coded:
[…] what I like best about this is that we’re working with normal, semantic HTML elements, leveraging native attributes to get the behavior we want, leaning on CSS to create the illusion that we’re only interacting with one element, then reaching for JavaScript to solve some edge cases.
One last thing…
Buttons are often the most boring part of a design, but not if you’re George Francis. He managed to build this very peculiar wobbly liquid button with SVG:
Cassie Evans then made some fun wiggly buttons that are equally as neat:
This all started by a thread on the GreenSock forums where someone asked how to replicate the buck wild buttons of the Utopia Agriculture website. Even though I speak just a little Japanese, I found that it’s absolutely worth scrolling around and exploring this website because it has a ton of fabulous animations.
Sponsor
3 Successful customer-centric monitoring strategies
In today’s digital world, developers must maintain a laser focus on delivering fast and error-free experiences for their customers. Learn three proven strategies that put the customer at the center of your performance monitoring workflow.
Sponsor
Netlify
Create amazing experiences for the web in record time — without thinking once about servers or devops. With just seconds of setup, Netlify provides everything to take modern web projects from first preview to full production. Trigger automated deploys, integrate dozens of third-party services, and easily create serverless APIs.
[Chris]: I’m just gonna toss a bonus link down here this week: SVG Crop (from Steve Dennett). Say you’ve got an SVG file that has some space on any of the four edges (top, bottom, left, or right). Drag and drop it onto this little web-based tool and it will hack it off.
In looking at the output, all it does is fiddle with the viewBox of the SVG, leaving the internal stuff exactly the same. So it must do some math to figure out the top-most, right-most, bottom-most, and left-most coordinates that the SVG shapes go to, and make a new viewBox with those thresholds. Clever.
