Project Wallace

Project Wallace

@projectwallace.com

CSS analyzers that checks your complexity, specificity, performance, Design Tokens, custom properties and much more. Webmaster: @veneman.dev 🔖 projectwallace.com

519 followers73 following119 posts

Joan has been a long time supporter (like, reallllly long). Some well deserved limited edition stickers.

Joan León@nucliweb.net

Thank you so much @veneman.dev 🥰 Two awesome new stickers on my laptop from a great project: @projectwallace.com #CSS #CSSTools #WebPerfTools

or, instead of writing valuable content, let me just release another shitty webpage with CSS tools

Matthias Ott@matthiasott.com

Screw the narrative. Don’t believe the scare. The Web will never die. Love seeing you all sharing and publishing content on here – and on your personal sites and newsletters! 💚✊

Update color-sorter and css-design-tokens packages to replace colorjs with colordx to increase performance and decrease install size. 12MB had always been too much, but no longer!

Project Wallace reposted

Reminder: The State of CSS Survey is closing *SOON*, so **NOW** is the moment to complete it. stateofcss.com/en-US/ This survey directly influences efforts like Interop and feature planning, so this is **YOUR** moment to let browser vendors know what you find missing on the web!

Project Wallace reposted

A couple of months ago @ohhelloana.blog was complaining about the lack of choice in women's wear in developer clothing. I agree. Made this. My wife wears it now and it's *really* nice.

Okay, so I learned a thing about Grids today. Many of my components have these declarations to make spacing nice: `display: grid; gap: 2rem`. Apparently, `grid-template-columns` is now implicitly set to `auto`. Yada yada, 2018 @chriscoyier.net has my back! css-tricks.com/preventing-a...

css-tricks.comPreventing a Grid Blowout | CSS-TricksSay you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr.
Project Wallace@projectwallace.com

Wow, hadn't noticed the massive horizontal overflow. @polypane.app would have caught this. I don't even... I'm so disappointed in myself right now.

Project Wallace reposted

This article was also an opportunity to pay tribute to @donnie.damato.design, @projectwallace.com, @evilmartians.com, @samiamdesigns.bsky.social, @clearleft.com, @danmall.bsky.social and of course @designtokens.org 🫶 Let me know what you think ✌️

Louis Chenais@lucho.cool

I've been helping design system teams set up their design tokens architecture for several years now. Here's an article in which you'll find an overview of all the tips and tricks I share to start a design token system with confidence.

Dogfooding the Wallace stylelint plugin on an upcoming new page on the website. There's so much to improve: more granular error ranges, better error messaging, subtle bugs to fix. But it'll be good!

😇 Almost ready to publish my new stylelint plugin! It'll ship with ~70 rules (for now) and comes with presets for correctness, performance, design tokens and maintainability. Some of my favorite rules 👇

View full thread

🚫 no-duplicate-data-urls ⚠️ max-embedded-content-size (don't let them data urls get away from you) ⚠️ max-comment-size / max-comments 🚫 no-useless-custom-property-assignment

😇 Almost ready to publish my new stylelint plugin! It'll ship with ~70 rules (for now) and comes with presets for correctness, performance, design tokens and maintainability. Some of my favorite rules 👇

🚫 no-static-media/container-query => prevent `@media (width: 100px)` instead of `min-width` 🚫 no-unused-layers/custom-props/containers => once you define it, you should use it 🚫 no-atrule/property/value/selector-browserhacks (because @sturobson.com taught us well)

🎨 max-unique-colors/font-sizes/families/shadows/etc. ⚠️ max-lines-of-code (overall guard rail) ⚠️ max-selector-complexity (specificity is only part of story) ⚠️ max-spacing-resets (because @ohhelloana.blog a.blog is right and you shouldn't use excessive resets) 🌶️ no-property-shorthand 😈

Project Wallace reposted

Make that 3 mentions in 2 weeks! 🤪

Project Wallace@projectwallace.com

Two mentions from @syntax.fm in one week! You guyssss... ✌️ Episode 999 is all about writing maintainable CSS. You _bet_ Project Wallace is your Swiss army knife for that!

Project Wallace reposted

Removed all twitter links from @projectwallace.com blog! Finally. Did a round previously removing them from all other places, but 8 years of blog took a bit more effort. Linking to people's personal sites now, cuz websites are cool

"Your CSS has dirty secrets and Wallace knows them." is just a title that hits. Immediate guilt and fear flow through your veins. "Does it know about... the floats?", you ask yourself. Ha, who are you kidding, of course it does. And that tiny 8px font-size. Thought you'd get away with that, did ya?

Project Wallace reposted

Tried some wildly different fonts but I think Teko is just the best reflection of my border-radius:0 design. Added 2 gradients to the header at a late stage, quite like them. Added a lot more spacing to the homepage, but made the forms to submit URL a bunch smaller.

2 improvements shipped today! - denser analysis view (if you're on Firefox, or you have experimental grid-lanes enabled in chromium) - analyze custom element selectors, like details-utils, is-land, pagefind-search, etc. etc. (h/t @bkardell.com for the idea!)

Bart Veneman@veneman.dev

Make the gaps wider, add some scroll-margin and add an outline to the section when you scroll to it via the side nav. I'm shipping this! 🥰

Over 10,000 views so far and traffic is only slowly declining. One of the best things I've ever made and it's only going to be better next year!

Bart Veneman@veneman.dev

Announcing The CSS Selection! 📰 www.projectwallace.com/the-css-sele... 📚 100,000 websites ⏱️ 100+ metrics 🔖 7 chapters The biggest deep-dive ever into real-world use of CSS across the globe. Dive in and find out some hidden gems. Also, see how much of 'the new CSS' is actually used!

Come read the biggest-ever article we've ever done!

Bart Veneman@veneman.dev

Announcing The CSS Selection! 📰 www.projectwallace.com/the-css-sele... 📚 100,000 websites ⏱️ 100+ metrics 🔖 7 chapters The biggest deep-dive ever into real-world use of CSS across the globe. Dive in and find out some hidden gems. Also, see how much of 'the new CSS' is actually used!

Project Wallace reposted

align-content: home-stretch! Working on the last few bits so this beast can be released on Friday! 🫶🫶 Shoutout to @polypane.app for making this first edition possible. Imagine having incorporated several links to Polypane in the content already, and then @kilianvalkhof.com stepping up. 🫶🫶