iiinova — where your digital self keeps evolving

Bart Veneman @veneman.dev · 29/09/2026

Might be even better on a hoodie

A black hoodie with a print on the chest area. The print is in white. It starts with a horizontal line, below that, in small print "project". Below that the work "Wallace" in bold capitals. The letter "W" has some 80's-like stripes through it. At the bottom is another horizontal line, much thicker than the first one.

010

Bart Veneman @veneman.dev · 29/09/2026

Not quite there yet, but not a bad effort for someone learning how to use affinity.

A black t-shirt with a print on the chest area. The print is in white. It starts with a horizontal line, below thaht, in small print "project". Below that the work "Wallace" in bold capitals. The letter "W" has some 80's-like stripes through it. At the bottom is another horizontal line, much thicker than the first one.

220

Bart Veneman @veneman.dev · 29/09/2026

DM me for an address to send these to, if you fancy them!

Two types of stickers. On the left is a vertical one with a green-ish gradient from top to bottom. It says the word CSS three times on top of each other. Second sticker, on the right, is a black square with bold, white text on top saying "chaotic style sheets". Over top of that in green graffiti text the words "project wallace".

010

Bart Veneman @veneman.dev · 09/09/2026

Pretty close to shipping!

A portion of a page from project wallace. It shows three panels, two on the top, one at the bottom. The top left panel is titled "Baseline status summary" and shows a table and graph showing that 105 feaures are widely available, 3 newly available and 12 limited available. The top right panel is titled "Widely available features by year" and shows a table with all years since 2018 and each year has a bar graph of how many features of that year are used. The bottom panel shows a huge table with each used feature, the amount of usage, the dates from when it became newly available, widely available and a column for browser support with browser icons.

120

Bart Veneman @veneman.dev · 06/09/2026

Still some ways to go, but this is turning out useful.

3121

Bart Veneman @veneman.dev · 26/08/2026

Still one of the best side projects I've ever done (with a couple of mates). We had the whole app, checkout and purchase flow working, but we lost steam. Luckily I had these portraits or our boys made in time.

A white shelf with two portaits on it. They're both 48 by 48 studs on a black background. Both feature a boy's face in grayscale. One has yellow as contrast color, the other uses a purple-ish color.

030

Bart Veneman @veneman.dev · 19/08/2026

Mixing web-features with wallace's CSS analysis and you get... a new tool for CSS archeologists! h/t @patrickbrosset.com for pointing me to github.com/web-platform...

A bar chart titles "Widely available, by year". There are 12 columns for the years 2018 through 2026 and "not yet widely", "not baseline" and "untracked". The bars for these last three are grayed out.

Values per item:

2018: 3560
2019: 1818
2020: 107
2021: 9
2022: 182
2023: 222
2024: 120
2025: 58
2026: 10
not yet widely: 8
not baseline: 49
untracked: 671

193

Bart Veneman @veneman.dev · 19/08/2026

Trying out a new typeface. I think it works really well for headings. It's too wide for buttons, so I'll have find a solution for that.

Wallace's Analyze CSS form. The title is in a very pretty pixelated font.

110

Bart Veneman @veneman.dev · 16/08/2026

Ahwyeeaaah :sexy-dance.gif:

Project Wallace stylelint overview. There are three errors. 1 is for an `if()` that contains only an `else` branch. 2 is for an `if()` without an `else`. 3 is for an `else` that isn't the last condition in the `if()`.

021

Bart Veneman @veneman.dev · 16/08/2026

But, the good part: I'll be able to add a new stylelint rule to disallow using `else` anywhere but the end of a rule!

MDN example code, showing `else` as the first condition in a css if:

```css
div {
background-image: if(
else: none;
style(--scheme: ice): linear-gradient(#caf0f8, white, #caf0f8);
style(--scheme: fire): linear-gradient(#ffc971, white, #ffc971)
);
}
```

011

Bart Veneman @veneman.dev · 11/08/2026

Had to look up my own usage of pseudos, but found a good one! Was just in time to be #99!

Project Wallace CSS analysis output showing two panels side by side. The first one contains a list of 20 unique pseudo-classes, he second panel contains a list of 15 pseudo-elements.

230

Bart Veneman @veneman.dev · 06/08/2026

And I need this in my room for good vibes.

An LED neon-like light in the shape of a small hairy cow sitting down.

010

Bart Veneman @veneman.dev · 02/08/2026

Also, look at these stats: bounce rates nearing 100%, lots of agents visiting, but no human interaction or feedback. Everything lacks joy.

A 90 day website stats chart. A slight upward trend visible for visitors, page views and bounce rate.

120

Bart Veneman @veneman.dev · 20/07/2026

Wouldn't it be cool if CSS minifiers would create a custom property for the data-url and then reuse that instead of inline the big data-url in the result twice? lightningcss.dev/playground/i...

Lightningcss playground. Two panels: input and output. Input panel shows a single ruleset with one selector and one declaration for `mask-image` with a value of some data-url. The output panel shows one rule with two declarations: two times mask-image, one of them vendor prefixed. Both of the declarations have the full data-url embedded. The output fills the entire picture.

3120

Bart Veneman @veneman.dev · 28/06/2026

You're not going to believe this, but I just found out that this is a real-world problem. At least for one of the major 🇳🇱 NL newspapers.

A CSS media query: `@media (min-width: 31.25em) and (max-width: 46.24em) and (min-width: 46.25em)`

260

Bart Veneman @veneman.dev · 24/06/2026

Dogfooding the stylelint plugin* and webpage, and coming across a `text-decoration-color` property that's vendor prefixed 3 times by Lightningcss... * I _will_ ship some day!

3 columns.

Column 1 contains several radio buttons for presets (Recommended, Correctness, Performance, Maintainability, Design tokens, Holistic). Maintainability is selected.

Column 2 contains a code block with a lot of CSS. Line 309 is highlighted. It contains this CSS: `-webkit-text-decoration-color: var(--netlify);` The property name is highlighted.

Column 3 contains a big table of stylelint issues. The top row is selected. It states 'Property "-webkit-text-decoration-color" is vendor-prefixed and is not allowed'.

110

Bart Veneman @veneman.dev · 18/06/2026

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.

A woman sitting on a bench, seen from the back. She is wearing a black shirt with a large print. The print is 3 lines of big, bold text saying "chaotic style sheets". On top of that a graffiti-lime text in bright pink is shown, saying "project wallace".

193

Bart Veneman @veneman.dev · 15/06/2026

Stu, you'll love this upcoming page on project wallace. Makes digging a lot quicker.

Project Wallace webpage with title "Lint CSS". Shows a form with url input and submit button. alwaystwisted.com is analyzed. Below form is a large panel with 3 columns. Column 1 shows which preset (recommended) is selected. Second column shows the scraped CSS, with highlighted lines for all issues. Third column shows all the stylelint issues found on that URL.

030

Bart Veneman @veneman.dev · 09/06/2026

How is this not the best phone you've ever seen

The front and back of a Sony Ericsson W810i

020

Bart Veneman @veneman.dev · 07/06/2026

Was inspired by someone's shirt at the lunch restaurant this morning but now I'm hoping these will arrive in time before CSS Day. Even ordered some extra for my kids who absolutely love them!

Black shirt with white text: chaotic style sheets. On top of that, green text in graffiti font: project wallace.

Black shirt with white text: chaotic style sheets. On top of that, bright pink text in graffiti font: project wallace.

010

Bart Veneman @veneman.dev · 07/06/2026

Gonna walk around in this and call my self the Prince of Chaotic Style Sheets.

A black t-shirt viewed from the back side. It has bit, fat, white text all over the back saying "chaotic style sheets". Over that white text are the words "project wallace" in a slightly comedic font in bright green-ish.

140

Bart Veneman @veneman.dev · 02/06/2026

It has been 0 days since I tried `:is(::before, ::after)` So I made it a lint rule, because that's my thing now.

Screenshot of a stylelint rule's readme called no-pseudo-elements-in-is-where.

270

Bart Veneman @veneman.dev · 01/06/2026

project wallace approves of this

project wallace's code quality page showing 100 out of 100 points for all metrics

210

Bart Veneman @veneman.dev · 26/05/2026

Stefan, I'm so, so, so, so deeply sorry about this. Oh, the irony 😂

Excerpt of the latest web weekly. One section about CSS shorthands at the top contains a quote "... I'm a big believer in more explicit code ...". The section underneath shows a CSS snippet with exactly two CSS properties, both of which are shorthands.

100

Bart Veneman @veneman.dev · 22/05/2026

TIL you can quote your `@keyframes` 🤨

CodePen test case. two keyframes in CSS, both with quoted name in the at-rule prelude. Test one uses that quoted name in the animation property, test 2 uses the unquoted name. Result shows that both approaches work.

250

Bart Veneman @veneman.dev · 20/05/2026

Stealing as many good ideas from Daniel Yuschik's defensive-css stylelint plugin as I can.

OG image for the stylelint plugin. Title: Project Wallace - Stylelint plugin. Subtext: A stylelint plugin that checks the complexity, design tokens, maintainability and correctness of your CSS.

130

Bart Veneman @veneman.dev · 14/04/2026

Man, drawing is hard. But this is the sort of vibe I want to go for. Going to tap into my network to find a local designer person to make this work.

A black shirt with a print on the chest. The print is a hand-drawn line drawing in white lines. It shows the letters CSS in an almost heart-like shape in a bold distorted font. Two hands are holding the letters. Around it are a space rocket, a bunny think about an ID selector, a robot wondering about projectwallace.com, a coffee mug, etc. etc.

000

Bart Veneman @veneman.dev · 06/04/2026

Added a metadata message to the css coverage reporter to get a feel for performance and it's cool and I saw the OXC folks do it. Had no idea that my own playwright suite would generate 4000+ JSON files. Well. It doesn't. There a bug somewhere, there were 'only' 247 (=== # of tests). Still cool!

Terminal output of CSS code coverage. The bottom of the report says:

Finished in 219ms on 4,018 JSON files containing 53 stylesheets with 6,344 lines of CSS in total.
Success: total line coverage is 94.74%
Success: all files pass minimum line coverage of 66.00%

120

Bart Veneman @veneman.dev · 28/03/2026

Stylelint's playground is nice for some toying around. Still tweaking code and error messages.

Stylelint playground with some gnarly CSS. Stylelint shouts loudly with errors based on projectwallace/stylelint-plugin

150

Bart Veneman @veneman.dev · 25/03/2026

Progress! Really enjoying this but also keep finding new issues, error messages to polish.

A page on project wallace that shows 3 panes. First pane shows 3 radio buttons for Preset option: recommended, performance and none. Second pane shows a CSS input field with some CSS in it. Third pane shows stylelint output with 7 errors, ranging from unreachable media query states and impossible z-index.

140

Bart Veneman @veneman.dev · 25/03/2026

Stumbled across this issue while auditing a website earlier this week. Immediately made it a new rule for my upcoming stylelint-plugin. That thing is going to be *packed* with goodies.

$Readme of the `no-duplicate-data-urls` stylelint rule readme. It shows the following markdown: # No duplicate data URLs Disallow the same data URL from being used more than once.  ```css thing { -webkit-mask-image: url(data:image/svg+xml,...); mask-image: url(data:image/svg+xml,...); /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ } ``` Repeating a large data URL increases file size unnecessarily. Store the data URL in a custom property once and reuse it with `var()`. ## Options ### `true` The following are considered problems:  ```css thing { -webkit-mask-image: url(data:image/svg+xml,%3Csvg%3E%3C/svg%3E); mask-image: url(data:image/svg+xml,%3Csvg%3E%3C/svg%3E); } ``` The following patterns are _not_ considered problems:  ```css :root { --icon: url(data:image/svg+xml,%3Csvg%3E%3C/svg%3E); } thing { -webkit-mask-image: var(--icon); mask-image: var(--icon); } ```$

210

Bart Veneman @veneman.dev · 23/03/2026

Nice post! Just a heads up, your `base` layer seems only defined and never used and there are some unintended custom properties. 🤫 But it looks so nice, it's been a while since I had last visited!

Project Wallace layer analysis highlighting the base layer where it's only defined in a range of layers, but no lines of usage found.

CSS from the speakers list of the website, but the font-size property tries to use a custom property called `14px` which doesn't exist.

Project Wallace's custom propety inspector showing there is a property called --_sidebar-color and later on a var tires to use the non-existent --sdiebar-color

100

Bart Veneman @veneman.dev · 21/03/2026

OH BOY!! (I also *really* need to step up my custom property naming conventions)

Partial output of a stylelint CI job. There are dozens of warning for 'custom property X was defined but never used" and 'selector complexity of "X" is 10 which is higher than the allowed maximum of 5'.

140

Bart Veneman @veneman.dev · 09/03/2026

Finally mustered up the energy to make a repro for Playwright for its strange CSS coverage issues: github.com/microsoft/pl... Blogged back in October www.projectwallace.com/blog/better-...

Part of a github bug report. Expected output shows a CSS atrule in full. Actual output shows the same atrule but atrule name, opening { and closing } are missing.

130

Bart Veneman @veneman.dev · 01/03/2026

Some before/after images for several pages. Think I'll leave it at this for now. Even fixed a couple of bugs I didn't know existed.

110

Bart Veneman @veneman.dev · 01/03/2026

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.

Project Wallace homepage. A hero banner says "Your css has dirty secrets and Wallace knows them" against a mostly dark gray background.

Project Wallace analysis page. The page header shows the page's title inline with toggles for choosing whether to analyze a URL, file or pasted CSS. The same gradient dark background is used.

171

Bart Veneman @veneman.dev · 27/02/2026

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! 🥰

9 panels densely packed, but one of the panels has a clear visual clue that it's currently selected/active.

140

Bart Veneman @veneman.dev · 27/02/2026

I'll admit that it looks a bit dense, but this is JUST 1 LINE OF CSS?!?!?!

The same data as in the previous screenshot: 10 panels in screen but now every thing is tucked in nicely in a pretty dense view with very little space between them, only the grid gaps.

130

Bart Veneman @veneman.dev · 27/02/2026

Can't wait to give grid-lanes a spin to see if I can reduce the amount of wasted space in our CSS analysis page.

Partial view of Project Wallace's CSS analysis page. It shows 10 panel-like elements in 2 rows, 5 panels per row. Each panel differs in height, with big differences. Between the first and second row is a lot of 'wasted' whitespace because the very first column is very tall.

190

Bart Veneman @veneman.dev · 18/02/2026

I wonder if this would be a good default 🤔

A CSS snippet with this code: `textarea { @media print { field-sizing: content; } }`.

020

Bart Veneman @veneman.dev · 15/02/2026

Just from this morning. This has to stop. Get your garbage machines off of the internet. They do not belong here. I don't want them here. Fuck. The . Fuck. Off.

Analytics page from project wallace showing chrome versions ranging from 42 to 59 and two top countries being US and Singapore

000

Bart Veneman @veneman.dev · 15/02/2026

Not proud of it, but I just used this specificity hack. Generally a huge fan of the `is()` pseudo class, but probably shouldn't use it for this 😅

Code screenshot of this CSS: `.markdown > :is(p, #ID-HACK) {}`

6111

Bart Veneman @veneman.dev · 06/02/2026

This edition is kindly sponsored by @polypane.app 🫶 The CSS Selection already contained several links to Polypane, even before I decided to accept sponsors. Having @kilianvalkhof.com contact me felt like puzzle pieces coming together. Super stoked and proud!

091

Bart Veneman @veneman.dev · 05/02/2026

Done! Only 12-ish hours left!

Partial view of a GitHub Pull Request page, with the status checks and "Squash and merge" button visible.

020

Bart Veneman @veneman.dev · 04/02/2026

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. 🫶🫶

Partial screenshot of a blog post that announces The CSS Selection

Excerpt from The CSS Selection about @media:

"The max-width and min-width features are quite unexpectedly used on most websites (88% and 86%). I did not expect prefers-reduced-motion to have such a great adoption rate even though it’s almost half of that of the top two. There are some other surprises here, like forced-colors being used a bunch more than prefers-color-scheme."

Below that is a sponsored block, reading: "Polypane wrote the complete guide to media queries" with a link to the Polypane website.

083

Bart Veneman @veneman.dev · 01/02/2026

Working on some design stuff after doing a couple rounds of editing. How about this as a social preview image?

A social media preview image, or card. The title is "The CSS Selection". Subtitled: "The state of real-world CSS usage, 2026 edition". The bottom shows some stats: 100+ metrics, 100,000 websites, 41% use :has(), 9.61% use @container. The design shows a bright grean/teal outline and a dark background with a dark-green to dark-gray gradient from top to bottom. There are two seemingly random rectangular shapes in the top right, probably visual decoration.

160

Bart Veneman @veneman.dev · 30/01/2026

Using 3 different @projectwallace.com libraries at work now 😆

President Obama decorating himself with a medal.

130