Another life goal: ✅
This was good fun! @bkardell.com and @meyerweb.com were really cool about this and had some really good questions that made me rethink some aspects of Wallace. 10/10 would recommend. 20 year old me still can't believe I get to make stuff like this.
Igalia Chats thumbnail for this episode
New Igalia Chats episode 🎙️
We sat down with @veneman.dev of @projectwallace.com to dig into the study of CSS on the Web — how it's analyzed, what the data reveals, and why it matters.
🎧 Give it a listen: www.igalia.com/chats/projec...
Definitely one of the best scores I've come across. Nothing to worry about 😉
Glad you like it, Josh!
- Redesigned homepage
- Main background a bit darker
- Swapped nav items & removed CSS scraper (not Wallace's main purpose, but a lot of search engine traffic)
- Page forms use less vertical space
- Form tabs use less verbose text (URL, File, Paste CSS)
- Consistent hero usage on all pages
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.
Had some back and forth with Claude to come up with better reasons to use Wallace. I've never focused much on _why_ you should use Wallace, just listed the tools and be done. A recent convo with @bkardell.com made me question that. Now I'll probably start shouting at you for not knowing your CSS.
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.
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.
Specificity is capped at 255 per number, but as data shows it does occur in extreme cases.
Maybe 128·248·256? That would allow for a thousands separator: 128·1,234·12 or 128·1.234·12 in other locales.
Surely we can do better
128,248,156 🙂↔️ too much like one number
128-248-156 🤷 looks like an equation?
128/248/156 🫤 don't know, Americans probably think this is a date
128:248:156 📖 eh, a bible verse?
128.248.156 🙄 same localisation problem and looks like an IP-address
Writing specificity with commas as separators is confusing, as @meyerweb.com noted. The CSS Selection highlighted this with some edge cases like 146,546,159 which could be read as 1 number, depending on your thousands separator, which depends on locale. A very good point. What should use instead?
I'm considering hiring a designer for a couple of hours to help me with some things on @projectwallace.com. Homepage needs work and the other pages lack coherence. Do you have recommendations for a designer or how to approach this?
9 panels densely packed, but one of the panels has a clear visual clue that it's currently selected/active.
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! 🥰
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.
I'll admit that it looks a bit dense, but this is JUST 1 LINE OF CSS?!?!?!
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.
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.
And the video is live.
It's a long one, but I made sure to time stamp it if you just want to jump to the results for each section (but you should totally just watch the entire thing 😅)
youtu.be/PBDU2krty0M
Excellent job of making the outcome of my css-code-quality page look better than I do 🤣
Redesigning the webpage for it has been on my list for years, but I've been struggling with a good UI for it. You seem to have fixed it for me! 🎉🫶
Video coming out later today where I'm doing an F1 team website championship.
I ranked each on design (subjective, by me), performance, accessibility (both using lighthouse scores) and CSS (using project wallace score).
Each round gives points out using f1 point system.
Wanna guess who won?
Really curious to see what Wallace will flag, will definitely watch!
👀
Next on my list: see if Parsel and Rework are still a good fit for @httparchive.org's CSS almanac chapter. Need to make sure that modern features are parsed well. First looks suggest that at-layer triggers an error. The CSS selection says adoption rate of 2.7%. Yikes.
Yeah, my 'cut-off' of where CSS is too powerful depends on whether the markup still makes sense if CSS hasn't loaded (yet, or at all), whether it makes sense when printed, or whether it makes sense as not-an-image when viewing in high-contrast of with AT. A lot of it-depends going on in that list.
Personally I do not agree with the newsletter being too long. On the contrary. You pick out the good stuff and I'm always slightly disappointed when I reach the end.
was not prepared for this so shortly after lunch, Bruce
Yeah, looks like they could benefit from switching to csstree. It's in their transitive dependencies now anyway.
This is pretty much the only OSS project that I regularly contribute to. I thought the graph was broken or someone messed up their CI. Turns out it's useful!
<time>
<table></table>
</time>
gotcha, thnx
🔥 tip: if you suffer from high heart rate in rest, switch your prog rock playlist for something not prog rock
Then eslint/csstree is your go-to!
