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

Good Vibe

I am happy to announce that very recently I released my first skill for Amazon Alexa called “Good Vibe“. It’s one project that I built from an idea to it’s current state for about a month in my free hours after work. I definitely learned a lot of things in my effort to create a public service like it, and I would like to cover the highlights for it.

The idea

The idea came very recently after I bought an Amazon Echo device, I was looking for a similar skill that I can program how to respond with text or audio on specific queries. I wanted to get my hands dirty on developing a skill for Alexa.

Big influencers for the skill were also good friends of mine Serge and George with whom we were discussing a chat bot that can be easily customized by any user to respond to certain strings parts of a message. This was my intention as well, to be able to customize Alexa, without actually having to write a skill backed by running server or lambda with Python or Node.js.

I started from predefined set of commands responding only text to what Good Vibe is now, supporting any input as commands and responding a mix of text and uploaded and recorded audio. Of course all of this wouldn’t be possible without my wife standing next to me, validating my ideas and supporting me.

The tech stack

The skill by itself is naturally using Amazon’s Lambda service to read and create custom commands to and from database. What’s more interesting to this skill is that I also provide a web app which you can use to manage the commands and additionally create ones with audio.

For the web app, both the UI and backend are JavaScript based. For the UI itself I decided to try the Clarity design system that brings beautiful  and modern components and designs. Although I am trying to keep things very simple in the UI, the fonts the buttons and modal styles are Clarity based.

I do use only the styles of Clarity, without the Angular components. In fact I’ve tried to keep things as simple as possible in technical point of view as well, and not introducing any JS framework or unneeded library, it’s pure JS.

One of the best things the skill offers is also the ability upload an audio file or record one. Here I’d also like to take the opportunity to thank all contributors behind https://wavesurfer-js.org/ that I use it for audio visualization for recording and edit an audio before uploading it. For the microphone recording piece,  https://github.com/mattdiamond/Recorderjs provided big help.

The logo

screen-shot-2017-03-05-at-6-12-18-pm

The logo is something I am really delighted with. It’s not so much of the design, as you can see I wanted it to be closer to the Alexa logo. It is something entirely based on Alexa, that enhances it in a way, this is why we have the 3 squares around it representing that. But what I am mostly happy about is the interactivity of the logo as it’s live, to really bring the feeling of “Vibe” the glowing squares levitate around the Alexa circle.

As with many of the features in “Good Vibe” a great influence for this was my wife. One night I was struggling making the squares around the circle to look more live, as if they really are “vibing”. So while I was complaining how hard this would be, she just said “why not make it animated?”. I was like “wow that’s a great idea!”. But how am I supposed to create an animated logo, with GIF? Definitely not! Such animation of 10+ seconds can result in a very large gif file. Even if we can shrink to a reasonable size, still the question of the quality and transparency stands. So after quickly discarding the gif option, it got me thinking that actually everything I want to create for the logo is possible only with CSS! This way the logo can scale for any device, can have the best quality and is super small in terms of size of resources, smaller than even 1 frame of a gif or a single png file.

Current state and the future

Currently I am pleased with the 30+ users that have tried “Good Vibe”, most of which have defined more than 5 commands and are using it daily.

I am hoping this skill to reach more and more users and bring at least little joy to the ones using it and their close ones. Excited to see what the future holds!

You can try it out by enabling the skill here – https://www.amazon.com/dp/B06VV3F7RM

As well as visiting the web app to manage your commands here – https://alexavibe.com/

May the Orchestration be with you

Recently together with a friend of mine we were discussing the most hot topic these days – the new Star Wars movie. He showed me this uber cool site http://www.asciimation.co.nz/ that plays Episode IV in ASCII. He also showed me that there is a more geeky version of it using telnet http://www.blinkenlights.nl/services.html. So it got me thinking, I have never used the Telnet client part of vRO’s Net plugin + I am a Star Wars fan, what a great opportunity! Streaming Star Wars Episode IV in vRO’s logs:

vRO star wars

Read More

Automate business groups creation with catalog items and entitlements

If you are a business admin and you have to create a business group for a newly on-boarded department, and you want to entitle OOTB catalog items for the members of this group, how will you do it? Through the UI, you would

  1. Create a business group by:
    1. Open the Business Groups tab.
    2. Click on “new business group”.
    3. Fill in group information: name, description, default machine prefix, managers, managers emails, users, etc.
  2. Create Entitlement
    1. Open the Entitlements tab
    2. Click on “add entitlement”
    3. fill in entitlement information: name, description, expiration date, status, business group
  3. Assign the same users from the business group
  4. Assign catalog items to the entitlement

Those are a lot of clicks. Imagine if you could do it with a single click (or a lot less than the above example), with an automated solution that is less error prone and fast! Well you can do it with the help of ASD and vRO and here we will show you how to do it. We will create a vRO workflow and an ASD blueprint out of it that we will publish to the Catalog.

Read More