My review of 2021 generated lots of encouraging comments. Here’s what happened with Project Wallace in 2022:
- CSS Code Quality is the biggest release in terms of complexity and amount of usage. Read more about it in the introduction post.
- The Online CSS Prettifier is a tool that already exists on a lot of other websites, but I don’t like having to google my way out of this every time, so I decided Project Wallace should have it’s own prettifier.
- The core CSS Analyzer (please star it on GitHub!) has seen 10 releases this year in total:
- Support for analyzing Embedded Content in CSS, like base64 encoded fonts or images;
- Lots of browserhacks are now analyzed, ranging from at-rules and selectors to properties and values;
- The relatively new
@layerat-rule is now analyzed
- Total bundle size went down a lot because CSSTree now supports tree shaking!
- Lots of performance improvements and less overall memory usage, despite adding more and more features.
Although the amount of visitors seems to have doubled, the amount of pageviews has only increased slightly. Part of this is due to an error on my end where analytics was broken on the Projects side, but still it’s a remarkable difference in visitors vs. pageviews ratio.
I’m starting to think that there’s less ‘quality’ traffic to the site, and more one-off visitors. According to Fathom the bounce rate is slightly higher than last year, so I think there are more people coming for a handful of pages and then moving along with their day. At first sight this frustrated me a little, but on second thought I think that’s a good thing: people come here to accomplish a task and then get on with the work they intended to do. Project Wallace is not a social media platform, we don’t need high engagement, we need high quality tools to do our work.
- The CSS Analyzer is still on top in terms of page views, partially thanks to coliss.com, but the gap is becoming smaller with…
- The CSS Code Quality page is catching up in terms of popularity quickly. It has been mentioned of several websites like habr.com, kachibito.net and many others.
- By far the best blog post ever I’ve written: CSS Complexity: it’s complicated peaks at 6,000+ page views at the time of writing and it’s still being visited every single day.
|Analyze CSS (url)||742||3,161||6,379|
|Analyze CSS (raw input)||8||503||2,345|
|CSS Code Quality (url)||-||-||4,788|
|CSS Code Quality (raw input)||-||-||790|
It’s amazing to see that there’s such an interest in CSS Code Quality tooling. The funny part is that I started writing it to help someone explain how the plain CSS analytics could be translated to ‘quality’. Apparently there are more people struggling with the raw output of their CSS analytics. And I get it. Having the data is one, but understanding what it means is something different. The CSS Code Quality package is still very crude, so I’m planning on some additions to help explain some of the concepts using the actual CSS that was analyzed. That should give everyone (myself included!) a better understanding on why some rankings are under-performing.
It’s no surprise that the CSS Prettifier isn’t used very often. What does surprise me is that the CSS Scraper is so much less popular than the rest. I expected more people to be in need of a tool like this. Perhaps this is because the link is not in the site header. Ultimately, everyone analyzing CSS by URL uses this feature under the hood, so the actual total is more in the 11,000+ range, which is bonkers.
- Update the CSS Analyzer to use Bramus’ Specificity calculator. It’s more correct and saves me a bunch of work in maintaining;
- Adding a page to the website to quickly calculate specificity. There’s already a bunch of them out there, but like the prettifier, I don’t like context switching;
- Improving the CSS Code Quality page to use the analyzed CSS to explain the bits that are sub-optimal;
- Implementing lots of new analysis features, like native CSS nesting, reporting on color formats used and the most important: calculating total CSS complexity!
I’m pretty happy with these numbers, but even more happy with the feedback that comes from the CSS community in many forms. A part of that community was at CSS Day Conference this year and I was lucky to meet some inspiring people there, like Bramus and Vadim. Also, Roman just keeps pushing CSSTree to the next level, which is incredibly generous and exciting.
Their enthusiasm and generosity really help driving Project Wallace forward and I can’t wait to see what 2023 will bring us.
Keep an eye on this little website!
A deep-dive in how the Analyze CSS page renders 6 times faster by applying 2 basic principles.
There's lots of places in CSS to have complexity, but we tend to focus on selectors most of the time. Let's have a look at other places too.