← All Spotlight Stories

Spotlight: Kushagra Gour

Creator of Hint.css and Web Maker

Kushagra Gour
On
Share on Twitter Share on LinkedIn Share on Facebook

Hey Kushagra, can you tell us about your background? Where did you grow up? How did you venture into programming?

Hello there! My name is Kushagra Gour and I am a Front-end developer and a side-product guy. I am currently working as a Front-end Lead with a bunch of crazy people at PushOwl. I have spent my childhood at many places due to my father being in the Navy, most of it in Cochin, Mumbai, and Delhi. Around 8th-9th standard, my uncle got an assembled PC at home (it had 64MB of RAM back then πŸ˜…). I used to play games on it. Plus, we were taught C++ at school - I found it really amazing to program, take input, and print output! Seemed like magic! I used to make small text-based games in C++. My first big game was graphical KBC in C++ and when it worked, I distributed cheeni (sugar) to all my family members. πŸ˜‚ And the journey began since then!

The next big thing that got me more passionate about programming and in-game development was the introduction to Adobe Flash (Macromedia Flash back then)! It was such amazing software that enabled me to combine code and art to develop creative stuff – games! I started making small games and participating in game jams before starting actual front-end development. It was only in my final year of college and then my first job when I got serious about front-end development.

What inspired you to build Hint.css and Web Maker?

Hint.css was a fun experiment to implement something really interesting I learned –– that you can actually access any attribute’s value in CSS (using the attr function on the content property) and display it inside an element!

It immediately hit me –– what if we could read that same attribute with tooltip content and just show it styled as a tooltip inside the element using CSS? That’s how Hint.css was born, the first-ever CSS-only tooltip library. :) I was overwhelmed to see the love it got on sites like Hacker News (it reached #1 on the front page) and Reddit.

Web Maker was something that came out of my own need for a front-end playground that was really quick and could work offline. Something I could use in my free time in trains, airports, or anywhere without network connectivity. It first started out as a Chrome extension, and now is also available as a PWA to use on any modern browser.

How many other core contributors work on Hint.css and Web Maker today, apart from yourself?

Well, no one actually! I occasionally receive issues to request features or PRs to fix some bugs. But otherwise, I alone maintain these 2 projects.

Hint.css and Web Maker Logo
8.1k+
Stars
32
total contributors
~8 years
since first release

What problems do Hint.css and Web Maker solve for their users?

Well…Hint.css is a CSS-only library. So the main USP of it is that anyone can just drop in a CSS file in their project, put some attributes in HTML and get tooltips working. So it’s much simpler than adding a JS library and configuring it. Also, since there is no JS, it is comparatively performant too. :)

For Web Maker, as I mentioned, it was to solve my own problem –– to be able to do front-end experiments without network and with speed. Web Maker does just that for its users. And people just love it for the ease and speed of using it.

What are some major features coming up in Hint.css and Web Maker in the next releases?

Hint.css is for the most part on auto-pilot. It’s been running smoothly without much maintenance. But since it was released, CSS has come a long way. I plan to refactor it using modern CSS and build tools to make it much better for users and contributors.

Web Maker was on hold for the past year due to focus on my other side-products. But the good news is that it’s soon getting revived and I am working on version 5.0. It will feature a complete asset management system and a much better development experience. I am excited about this major release.

What have been the most frequent feature requests from users in both the projects that you haven’t gotten to yet?

Hint.css is a CSS-only library and therefore has a lot of limitations that come from CSS feature support and some browser bugs. The most wanted feature to date has been the support for multilines and formatting inside the tooltips. There are only hacks as of now to support these to some extent. But I am hopeful the rapid development in CSS standards will someday enable Hint.css to get on par with its JS counterparts.

As for Web Maker, I don’t think there is one thing that I can term as most requested. But there is one thing that almost everyone expects from a front-end playground these days –– A VSCode like editor, and that is something I want to bring in by default in Web Maker. 😁

Who is the ideal user of Hint.css? What are some use cases of using Hint.css?

If you are someone who is just starting with web development with not much experience in JavaScript, or if you are working on a simple website with not many heavy requirements from the tooltips or if you are working on a rapid prototype and want to quickly drop in some tooltips –– Hint.css is for you! There is no faster method I know for getting really simple tooltips on the page than Hint.css! 🀩

The limitations of a CSS-only library may sound too much for practical use, but you’ll be surprised to know that it has been used in production by websites like Fiverr and Webflow!

Are there any success stories about other people or organizations using Hint.css or Web Maker that you would like to share?

Web Maker has enabled a lot of people around the world to learn and experiment with web development, in times and places where it is otherwise difficult to do so. I keep getting emails from teachers that use Web Maker to teach Front-end to students in schools where network connectivity is absent or limited.

There is one specific story that I want to share with you all. I once learned that an organization that teaches programming to students in remote areas was using Web Maker to teach kids in the low-bandwidth Himalayan region! I really like to teach people to code and when I heard about this, I felt so proud that my product is helping someone teach kids to program! 😍

Web Maker and Hint.css are both free-to-use products. If someone wants to support these, they can do so on Patreon or BuyMeACoffee.

About DeepSource
DeepSource helps you automatically find and fix issues in your code during code reviews, such as bug risks, anti-patterns, performance issues, and security flaws. It takes less than 5 minutes to set up with your Bitbucket, GitHub, or GitLab account. It works for Python, Go, Ruby, and JavaScript.
Get started for free
Get new spotlight stories delivered to your inbox.
Subscribe to get notified when we add a new spotlight story, once every month.