The article explains how to design and animate a *circular* menu (that rotates in a circle!) in CSS using offset and animation-composition.
If there is any one web design style trend that is dominant right now, it’s The Linear Look, as Alex Trost shows off here.
A global design system is what Brad Frost says we need to save the world from unnecessary repeat (and error prone) work. Dave Rupert and I spoke with Brad on ShopTalk all about it. I still had some questions (you know I’m big on asking questions!), and Brad’s going to think on them.
I feel like if a styleable Web Components-based system ends up being the goal, Shoelace is already doing an amazing job there. Also drab looks interesting in the absolutely minimal styling, leaning on what the web platform gives us natively, and just adding the JavaScript to make them work correctly.
I like the case Jim Nielsen makes here in Part 2 of his series on why a role of “Design Engineer” makes a lot of sense.
You’re given a design with a note: the dividing line between these two containers should be interactive so the user can drag to resize the respective containers on either side.
Maybe you’re picking up on this around here, but I’m pretty big on asking all the right questions as an important part of your journey to “senior” in any role. With this small design note (or mockup), there are definitely going to be questions.
- Does the interaction have a resize affordance?
- How does it happen (e.g. on mouse in or mouse down)?
- When does it happen (e.g. immediately or on a delay)?
- Where does it happen? Directly on the line itself, or in a target area? How big is the target?
- Is there some kind of snapping involved?
Maybe you answer them yourself, but you’re thinking about them. In this case, in order to ask and answer these questions, you need someone who is saavy in design/UX and coding.
I had the thought gosh I wish this table’s rows were numbered when I was looking at the big table of Interop 2024 popular votes. I don’t know the that the <table> needed numbering, but when I wanted to know the “rank” of some of the items, I found myself wishing it did.
Fortunately, CSS has a quick answer:
table {
counter-reset: tr;
tbody tr {
counter-increment: tr;
:where(td, th):first-child::before {
content: "#" counter(tr) ": ";
}
}Code language: CSS (css)Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.