Learning to embrace the WTF of Utility CSS

Bulldog looks up happily with tongue out.
Bulldog looks up happily with tongue out.
Now we’re starting to see (and smell and taste) clearly. Photo by Vitor Fontes on Unsplash

Part 1 was a short “history of CSS” and an overview of Utility based CSS. Part 2 gets into Tailwind itself.

Why Tailwind

Ok, if you read Part 1, that was a loooong-winded “history” but we’ve arrived at the crux. If you didn’t check it out, it’s here.

Pat yourself on the back for reading it or scrolling quickly past. Yay! Oh no, didn’t read it? Review Part 1 here.

To Recap from earlier

So my friend had sent me a link to Tailwind and told me it was the bee’s knees. I said WTF is this dreck!


Learning to embrace the WTF of Utility CSS

Dog wearing glasses with googly eyes.
Dog wearing glasses with googly eyes.
Googly eyes are not a CSS property, but maybe they should be. Photo by Jane Almon on Unsplash

Part 1 is a short “history of CSS” and an overview of Utility based CSS. Part 2 gets into Tailwind itself.

The Devil’s in the details

For the last few years, I’ve been looking at various approaches to help designers and devs collaborate better. I’ve also wanted to empower designers to have more control of the actual result that is being created.

See my post on Low-Code For Designers.

Too often, designers are stuck telling devs that the header isn’t quite right and needs 16px or 1rem/1em more space at the bottom and devs are getting irritated.


Not a religious post, although Agile might be a religion for some.

Photo by Luis Quintero from Pexels

How it usually works

Love it or hate it, Agile and its methodology has taken over much of the tech business world. I’ve personally been in situations where it’s really helped keep things on track and realistic and in others where it’s caused needless overhead and micromanagement. As they say, YMMV (Your Mileage May Vary).

In short, an Agile story defines a feature of a larger effort in such a way as it can generally be picked up by a developer and finished in 2 weeks (aka a Sprint) or less. It really should generally be a few days or more. …


Beyond the technical challenges

Someone’s made a decision or indecision — Photo by Morgane Perraud on Unsplash

Accessibility, huh?

What is accessibility or a11y as it is often abbreviated? There’s a lot to it, but in a nutshell, accessibility is about making a site or app usable to the greatest number of people possible. Ideally, it’s a delightful experience too. It acknowledges that people may have permanent or temporary disabilities which make it difficult to use them. Accessibility best practices don’t just cover visual challenges but also hearing impairments, motor coordination issues, and cognitive disorders, to name just a few.

We’re all a little disabled sometimes

Manipulating your emotions through puppies

In fact, many of us without permanent disabilities may find ourselves technically disabled on…


Empowering designers and non-developers to get dirty (in a good way).

Photo by Korhan Erdol from Pexels

Working in the actual medium

Over the past few years, I’ve been looking for something that allows designers (and other non-developer stakeholders) to take an application idea from idea to design to implementation in the actual medium (HTML/CSS /JS) without necessarily needing to train team members on how to code. I also wanted to do more usability testing leveraging real data and form field interactions. I’ve found a number of solutions but I’ve been hearing more and more about the low-code / no-code movement for a while.

Why is Low-Code or No-Code becoming more prominent?

Recently, it’s been gradually gaining momentum because of a combination of factors which are:

  • The perceived shortage of…


Or, what problems, if any, does blockchain tech solve?

Photo by Olya Kobruseva from Pexels

Why am I writing this?

My motive right now

As a UX Designer, I’m really concerned with trying to figure out what the real problem is and coming up with the best solution all things considered (as much as possible). Understanding Distributed Ledger Technology (DLT aka Blockchain) Crypto/ Smart Contracts is important to me since I might have some “Blockchain” based projects coming on the near horizon. This is touted as a solution for certain problems. So I wanted to know why we should use DLTs, Crypto and Smart Contracts in the first place from a user standpoint?

I’ve read a ton of articles and white papers. Played around…


Doesn’t everyone want to manage more stuff?

Photo by Clint Patterson on Unsplash

On fiddling and digging deeper

I’ve been interested in the Internet of Things (aka IoT) for years and even went so far as to get an Arduino prototyping kit and mess around with it. Like many people in the tech industry, I’ve had my share of smart watches, Alexa, and Google Home, Philips Hue lighting, trackers for home health care, security, and various other devices. While interesting and sometimes useful, it’s been obvious that the consumer market for IoT was still in its infancy and was in a similar space in terms of development as e-commerce was 12-15 years ago.

After coming off an IoT…


Use canvases instead

Serious Business Plans prove you’re Serious (but maybe that’s all)

It used to be the case, and often still is, was that before you even thought about starting a Business, you needed to create a Business Plan. Maybe we should put it in all caps BUSINESS PLAN. Yes, that’s better!

It was a 30–40 page document (or even longer) that broke up your business into various categories like, Marketing, Projected Profit and Costs, Competitive Landscape, etc. This was primarily to prove to potential investors or the bank that you had a Plan and weren’t some random schmuck who hadn’t done their homework or thought stuff through.

Needless to say, it’s…


They need a rethink.

Illustration of germs on a surface with a bar of soap
Illustration of germs on a surface with a bar of soap
Photo by Gabby K from Pexels

Yuck!

Though they were probably always a bit unsanitary, during the Covid-19 crisis (I like to call it the Covidian) using any interface that was inherently communal became a not-so-great idea.

While research seems to show that the virus doesn’t live long on many surfaces and that it’s primarily transmitted via exhalation, surface transmission is still a risk.

Further mutations of the virus or future plagues may be different so I thought it was important to try to define proactively how these interactions might need to change or envision alternatives to current public UI; in particular, public/communal touch screens which seem…


We need to allow passphrases instead

Photo by cottonbro from Pexels

Magical incantations against hostile forces

How many times have you been asked to create this for a password? Or worse, had to integrate the feature into a design or project?

  • Choose a password that is a minimum of 8 characters long. Sometimes there’s a maximum too. Why? Probably some database limitation…
  • The password must have at least one letter and number (alpha-numeric).
  • It should also use at least one uppercase and lowercase character.
  • It must include at least one special character like !,#,$ or & (sometimes typical special characters {,],\ etc. are not supported. My wifi printer can’t enter a hash #…
  • If you’re lucky…

Mario Noble

I’m a UX Designer in Los Angeles, CA. I used to be interesting but now I just geek out, watch Netflix/Prime and get worked up over politics

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store