Whenever I stepped into a new project, whether at a job or for fun, one of the first things I did was read the app's css in its entirety. Css is best when it's reused and the only way to reuse something is to know about it. So I would make notes on useful utilities (if there were any) and when building out or refactoring the front-end I would try to reuse things where and when I could.

Often times though css files were very long and it was difficult to get a high level overview of the system of visual styles that the css represented. A designer would give you a spec with a light gray border. Sometimes the color was specified. Sometimes it wasn't. But I didn't have a quick way to check if we already had a light gray border that we could reuse. This seemed less than ideal.

Brent Jackson and I had started to work together at a company and the type scale that I had implemented wasn't that well thought out and didn't relate to our spacing scale. We had talked about making it more well thought out and so I did some work to more quickly audit the mess that I had created. I created some bash scripts and vim macros that would help show an answer to simple questions like 'what are all of the font-sizes in our type scale?' or 'what grays do we use?'. This worked for me but it didn't go a long way in illustrating the answers to the organization at large. The knowledge wasn't easy to share and still required some manual work on my part.

It was around this time that I stumbled across a talk by Alex Sexton about how the coolest part about rise of css preprocessors was not the preprocessors themselves, but that there were now open source abstract syntax tree generators for css. I didn't know what an AST was at the time but his talk quickly illustrated how powerful they could be.

Here is an example of an ast generated by postcss

It turned out an AST was exactly what I needed to easily document the visual styles that are present in a css file. My goal was that I wanted to understand more about the quality of the css but also the cohesiveness of the visual styles. It was an attempt in many ways at a rudimentary style guide that required zero configuration or upfront effort to generate.

Around this time I got invited to speak at my first meetup. When the meetup tweeted out about my talk, Hampton Catlin (the creator of Sass), tweeted back at me that he couldn't wait to hear my talk. All of a sudden I went from feeling like I was getting ready to casually chat about css with 30 people to feeling a lot of pressure to put something really amazing together. I rolled up my sleeves. I am not great at javascript, but I knew enough to hack together a prototype where I generated an AST and then traveresed the tree to show some things I was interested in visualizing. It still required some manual work to setup and it only worked on my computer. My friend Brent Jackson had been diving more and more into javascript and decided to help me build it out into an actual web app that other people could use by inserting a url. We used angular because we didn't know anything else and it helped us quickly get an MVP together. It was all client side JS and it was extremely slow. But it ran on gh-pages for free. And we got a very simple demo together for my talk. The demo was interesting enough that Hampton chatted with me afterwards. He's a pretty rad dude.

After the talk, when I started to show it to some designers I knew, one of them asked me 'When are you going to pipe real data in?' I asked him what he meant. 'Obviously this data is fake, nobody would have this many font-sizes.' I wish I had a photo of his face when I told him the data was real and that yes people did have that many font-sizes on their website. This exchange was exactly what I wanted. Css is not often at the top of many peoples minds. It's a black box people throw things into until something works and then they move a long. Rarely do we take a step back and look at the systems that we are creating in totality. I hoped that if we created some better feedback loops for css authors and designers , people would be more thoughtful about their css and maybe, just maybe, the internet would be a little better as a result.

The link to cssstats seemed to make the rounds on the internet and we got a lot of compliments from people who were starting to use it. One of my colleagues at the time who was very good at javascript - thought the project was pretty neat and volunteered to clean up the code and start to do the AST generation on the server side to speed up performance and make the app a bit more stable. I expected that maybe he'd finish in a couple of months because that kind of work sounded pretty difficult to me.

I had a chat message from him two hours later 'here is the link, it's up on heroku.' The app was a lot faster, but it also cost money to run now. At the time the monthly bill from heroku was generally between 125-250 dollars depending on how much traffic we were getting. The real problem with heroku was that the site went down a lot. Generally several times a week. At the time the money wasn't an issue. I was fortunate to be well-paid at the time and the cost was well worth it to keep the service public and free for all to use.

In the winter of 2014, a year after our first version of cssstats had been released, I went to visit Jackson in Brooklyn. We sat in a coffee shop and sketched out some ideas for the next version. Jackson had been getting even better at javascript so he had some ideas on how to architevt v2 that would also include some new data visualizations for specificity and ruleset graphs. Over the course of two or three days, he built it out, all by himself. The second version: handled more urls, had increased scraping capabilities, showed filesizes, and even included a specificity graph (amongst other things).

Example graphs for specificity and ruleset size.

As bad as I am at javascript, I'm even worse at dev ops. But this new and improved cssstats was a good excuse for me to figure out a cheaper and more stable system for hosting the site. I rolled up my sleeves and dug into AWS. Luckily I was able to hack something together that worked. The app was more stable and the monthly fee was lower at first. But the problem was that by making the app even better, more people were using it, so the operational costs mostly stayed the same. The stability was what I cared about more and the site was able to handle spikes in traffic with ease.

Lots of people offer to help with open source projects, but not many people always follow through. So it was a pleasent surprise when we started to get more and more pull requests from this guy neither Jackson or I knew. His pull requests helped to fix a lot of small bugs that I never would have been able to debug myself. He helped make the app even more modular and open sourced a number of packages that build out the core of css stats. We quickly made him a core contributor as besides writing great code, he was a nice guy to work with! And that matters to us.

Around this time last year I left the states and took a significant paycut to work remotely. All of a sudden the monthly fee to keep cssstats up and running was unsustainable for my financial situation. In total I had spent about $4,800 dollars to keep it up and running, which was money that I was more than happy to spend. I've gotten a lot from the design and css community, so the opportunity to give back was exciting to me.

In an effort to keep the site up I put out a plea for help and got a couple of corporate sponsors in Mailchimp and Digital Ocean. Through their combined efforts we have been able to keep the site running for the last 14 months.

Unfortunately in two months time we will come to the end of the allotted credit window with Digital Ocean. They've been nothing but gracious in offering to support our service up until now and I really can't thank them enough.

So I'm asking for help again. I am currently unemployed and am unable to foot the bill to keep the service up and running once our credit runs out. If your company wants to help us keep the site free for all to use, please contact me at hi@mrmrs.cc. I'd love to chat as I want to see it continue to exist as a web app. I truly believe it's been a useful service for both designers and css authors to build better websites. We're approaching 1 million page views, which I think is a pretty neat milestone that I never expected this project to hit. We also have an entire org on github with 24 repos we've put together to help people manipulate abstract syntax trees and visualize their css.

We'd like to continue developing cssstats as a webapp and adding features that will help people author better css and audit their design systems. We've been working on new stuff for the past year and are pretty close to launching version 3. No matter what happens, everything is open source, so it will always be availabe to run locally. But I'd prefer to keep it as a webapp as it lowers the barrier of entry for use and I think that's an important part of building a more inclusive web.

I'd also like to extend a huge thanks to @jxnblk, 4lpine, and Adam Putinski for helping me turn a poorly constructed prototype into a fully fledged service that lots of people have used to learn about css and design systems.

If it wasn't for them I'd still be using vim macros and bash scripts and I wouldn't have gotten to meet a lot of rad people in the css community.

<3