How to build a bad design system

Going with that title instead of the classic developer clickbait version Max used. ;)

We should ban margin from our components.

Don’t use margin?! This thing I’ve been doing my entire career and don’t have any particular problems with?!

Well, that’s not exactly Max’s point. The point is that any particular component doesn’t necessarily know what context it is in, so it also doesn’t know what kind of spacing is necessary around it. His solution? Leave it to a … Read article “Max Stoiber’s Strong Opinion About Margins”

The first “A” in the Jamstack stands for “APIs” and is a key contributor to what makes working with static sites so powerful. APIs give developers the freedom to offload complexity and provide avenues for including dynamic functionality to an otherwise static site. Often, accessing an API requires validating the authenticity of a request. This frequently manifests in the form of authentication (auth) and can be done either client side or server side depending on the service used and the … Read article “APIs and Authentication on the Jamstack”

Laura Kalbag wrote How to read RSS in 2020. This would be a nice place to send someone curious about RSS: what it is, what it’s for, and how you can start using it as a reader. I like this callout, too:

Sometimes the content is just an excerpt, encouraging you to read the rest of the content on the original site. I think this defeats the point of providing RSS, where a big benefit is that the reader

This is so cool. I mean, GraphQL is already cool. It’s very satisfying to write an understandable-looking query for whatever you want and then use that data in templates.

But what if you didn’t have to write the query at all? What if you just wrote the templates pretending you already had the data, and the query built itself? I haven’t even tried this project yet but it feels like how things should be.

Reminds me of how Perch CMS … Read article “gqless”

CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout examples. What we’re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to meet most of your layout needs.… Read article “4 CSS Grid Properties (and One Value) for Most of Your Layout Needs”

Firefox 72 was first out of the gate with “independent transforms.” That is, instead of having to combine transforms together, like:

.el {
  transform: translate(10px, 10px) scale(0.95) rotate(10deg);
}

…we can do:

.el {
  rotate: 10deg;
  scale: 0.95;
  translate: 10px 10px;
}

That’s extremely useful, as having to repeat other transforms when you change a single one, lest remove them, is tedious and prone to error.

But there is some nuance to know about here, and Dan Wilson digs in… Read article “How They Fit Together: Transform, Translate, Rotate, Scale, and Offset”