Why I Like Designing in the Browser – Cloud Four
This describes how I like to work too.
Same HTML, Different CSS
Like a little mini CSS Zen Garden, here’s one compenent styled five very different ways.
Crucially, the order of the markup doesn’t consider the appearance—it’s concerned purely with what makes sense semantically. And now with CSS grid, elements can be rearranged regardless of source order.
CSS is powerful and capable of doing amazingly beautiful things. Let’s embrace that and keep the HTML semantical instead of adapting it to the need of the next design change.
Related links
5 Questions for Jeremy Keith · Frontend Dogma
If you like the prospect of an old man ranting at clouds, this is for you.
MomBoard: E-ink display for a parent with amnesia
Technology doesn’t have to be terrible. Here’s an absolutely wonderful use of an e-ink display:
I made as much use of vanilla HTML and CSS as possible. I used a small amount of JavaScript but no framework or other libraries.
New CSS that can actually be used in 2024 | Thomasorus
Logical properties, container queries, :has, :is, :where, min(), max(), clamp(), nesting, cascade layers, subgrid, and more.
Hyper-responsive web components | Trys Mudford
Trys describes exactly the situation where you really do need to use the Shadow DOM in a web component—as opposed to just sticking to HTML web components—, and that’s when the component is going to be distributed and you have no idea where:
This component needed to be incredibly portable, looking great on any third-party website, in any position, at any viewport, with any amount of content. It had to be a “hyper-responsive” component.
Related posts
Manual ’till it hurts
Try writing your HTML in HTML, your CSS in CSS, and your JavaScript in JavaScript.
Declarative design
Defining the inputs instead of trying to control the outputs.
aria-live
An exception to my general rule that ARIA attributes should be added with JavaScript.
Utopia
Why do I like fluid responsive typography? Let me count the ways…
Getting started
Links for someone looking to get started in web development.