- No shared (and contextual) sense of purpose
- Overbuilding, or scaling too early
- Inability to make decisions and move forward quickly
- Lack of clear ownership and dedicated resources
- Lack of cultural alignment
The common thread among these issues is that none are related to technical or tooling decisions —or even to the components themselves.
Like a little mini Utopia:
Handy little tool for calculating viewport-based clamped values.
Wise words:
Myself, I think some tools are a good idea. But as few as possible, and the easier they are to stop using, the better.
To paraphrase Michael Pollan:
Write CSS, not too much, mostly vanilla.
I don’t like making unpaid contributions to a for-profit publisher whose proprietor is an alt-right troll.
Same.
I can see no good arguments for redirecting my voice into anyone else’s for-profit venture-funded algorithm-driven engagement-maximizing wet dream.
Despite growing pains and potential problems, I think this could be one of the most interesting movements on the web in recent years. Let’s see where it goes.
I’m getting the same vibe as Bastian about Mastodon:
Suddenly there was this old Twitter vibe. Real conversations. Real people. Interesting content. A feeling of a warm welcoming group. No algorithm to mess around with our timelines. No troll army to destory every tiny bit of peace. Yes, Mastodon is rough around the edges. Many parts are not intuitive. But this roughness somehow added to the positive experience for me.
This could really work!
An excellent explainer from Trys and James of their supersmart Utopia approach:
Utopia encourages the curation of a system small enough to be held in short-term memory, rather than one so sprawling it must be constantly referred to.
Type and space are linked, so if you’re going to have a fluid type calculator, it makes sense to have a fluid space calculator too. More great work from Trys and James!
Sounds like some convergent thinking with the ideas behind Utopia.
I think that the idea that that any typographic attribute (including variable font parameters) can be a function (linear, exponential, stepped, Bezier, random, or otherwise) of any given input variable (user preference, screen dimensions, connection speed, time of day, display language, or whatever else) is an incredibly powerful one, and worth exploring as an aesthetic as well as a technical proposition.
Here’s a demo you can play with.
Trys has been investigating how to incorporate CSS clamp() into the brilliant Utopia project. I won’t pretend to understand all the maths here—this is a very deep dive!
He’s also created a CSS generator Mark 2 if you want to use clamp() in your fluid type.
A walk down memory lane, looking at the history modular CSS methodologies (and the people behind them):
I like the questions that the TELUS team ask about any potential components to be added to their design system:
- Is it on brand?
- Is it accessible?
- Has it been tested?
- Can it be reused?
They also have design principles.
No longer focused on recreating the wheel (or icon), designers can turn their attention to different types of challenges.
This is a potentially useful bit of CSS that I had no idea existed.
A weirdly over-engineered online book with bizarre scrolljacking (I would advise disabling JavaScript but then all the links stop working so you won’t be able to go past the table of contents) but it’s free and the content—by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield— looks good:
A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life. Learn how you can create your design system and help your team improve product quality while reducing design debt.
This
will-changeproperty that was intended to SOLVE problems for animators may end up doing the opposite.It seems wise for the browsers to step back and let the spec authors fill in the implementation details and gain consensus before moving forward.
A thorough and compelling demonstration of why it makes sense to size all the properties of your components—font size, margins, borders, etc.—in ems or rems rather than mixing in pixels for some properties. It’s all about the scalability, innit?
Some good thoughts in here about writing scalable CSS …although the finger-pointing at sites (that are shipping at scale) reminds me a bit of that quote by copywriter Paul Butterworth: “Where the heck were you when the page was blank?”
If you’re trying to retrofit an existing desktop-centric site for small screens, this server-side image-resizing technique might be useful but is definitely not the right tool for a content-out, small-screen-first approach.
Once again I’m getting all my CSS3 information from Jonathan. This time he’s discovered the vw and vh units which allow you to specify sizes relative to the size of the viewport.
You can now store (and scale) MySQL databases with Amazon. Handy.