Optimize Clarity CSS

clarity_logo.21dda15557a6ebf26fce
VMware’s Clarity provides very nice and clean styles to typical HMTL components. In this topic we will focus only the CSS section of Clarity that can be used with vanilla JS, without the Angular components. It suits well if you want a common look and feel across your site or app, similarly to Twitter’s Bootstrap. Now there is small problem, the range of components the CSS covers is a lot, and even minified it is ~770KB. But for a small and medium websites most likely you would use just a fraction of what the whole library can provide. For example you would want to style the buttons and inputs, probably also include the responsive grid in place, but you would not want the card view or datagrid styles for example. So here will extract only the used styles reducing the size of the CSS we want to distribute, using the great tool https://github.com/giakki/uncss

So after I developed and tested my HTML site with the original CSS of Clarity, I am ready to optimize it

uncss welcome.html index.html ... any html and template files

The result of this would be the CSS containing only the rules that are used, i.e. that can be fined in the HTML elements.

And basically this is it! In my case I was able to reduce the size of the css from 770 KB to 200 KB, isn’t that sweet!

Want more?

Since Clarity also embeds the Metropolis font in the CSS, another 160KB-ish optimization that you may consider is to remove it and fallback to “Avenir Next” or “Helvetica Neue”. This however needs to be done by hand, in the clarity.css file find

“@font-face{font-family:’Metropolis’;src:url(data:” and remove the whole @font-face definition.

Now of-course it is questionable if you should remove the font, as Metropolis is really nice font and the Clarity team have picked it with a reason, to provide better UI. This is why I would stick with it.

Note: based on the dynamic nature of your application, there may be components or styles dynamically added that uncss cannot predict. Therefore it is good to have all styles defined in the input HTML files by default. For example if you have a element with “dropdown” class, it is nice to also specify it’s states, like “open”.

Visualizing ski pass statistics from Livigno

Recently I went snowboarding with friends in Livigno, Italy. Everything was perfetto! The variety of slopes and parks was impressive. The weather couldn’t be better with fresh snow every morning and sunny days. It was a full week of pure fun, sport and leisure. This was my first time in Italy, in the winter, and I must say that I love it as much as I love it in the summer.

One thing that I did almost the next day when I got back home, was to check the lift pass statistics as suggested on my pass at http://www.skipasslivigno.com/skicheck/

When I entered my pass number I was surprised that I received only one .csv file that if I open in Excel I will see raw data of few columns and many rows, representing all my lift entries. We also gathered with friends to compare and discuss when and where someone of us was riding. As you can imagine it was hard to compare anything using text editors.

And by talking with others I heard that it is common for other resorts also.

As a data visualization fan, I thought that it would be nice to have a way to visualize all of this raw data, in a user friendly way. I wanted to see which slopes/lifts I was riding the most, which my friends were riding, when and where we were together, when we were riding on opposite slopes and how our days were going. So I went over the stats and started experimenting with ideas, how such statistics will be nice to be shown.

So I started building a ski stats visualization library, having my own and my friends’ stats from Livigno. I can say that it is now ready for preview and I wanted to get feedback for it. You can see a demo of it here http://tgeorgiev.github.io/skistats/ . It is fully functional, so if you have visited Livigno and have your ski pass statistics, go ahead and provide them to see you visualizations. There is also a demo mode, that shows fake data, to have a better feeling of the project.

Skistats screenshot

It is still in early development stages, so if you find any issues, have feature requests or want to see stats for other resorts, please open a new issue in the GitHub project page or comment your thought bellow this post. You can also check here how you can contribute.

Read More

JavaScript on conferences

Recently two big conferences were held in Sofia – jQuery Bulgaria and Java2Days. Luckily I was able to attend both and I really liked both of them.

What was interesting about those events was that one was free and it was in Saturday, while the other was paid and during two workdays. One was targeting JavaScript developers, while the other Java developers. One was about JavaScript and the other … well JavaScript was hot topic 🙂 At one point I even though I was on JavaScript2Days, which by the way would be awesome to have!

Read More