Featured today is Kushagra Gour, creator of Web Maker and Hint.css.
Hint.css is a tooltip library that lets users create tooltips in CSS easily. Web Maker is an offline browser-based web playground that is also used by schools to teach students programming in areas of low network connectivity, like the Himalayas.
Kushagra, a.k.a Chin Chang (on the internet) is an independent product maker who lives in India. He likes to write code, create games, draw, play the piano, and beatbox.
How did your open source journey begin? What got you started with Hint.css & Web Maker?
My open source journey began in college—I remember finding out about Git and Github. My very first repo on Github was a motion tracker implemented in ActionScript (I used to make Flash games a lot when I started programming).
Hint.css was a fun experiment to implement something really amazing I learnt—that you can actually access any attribute’s value in CSS (using the attr function on content property) and display it inside an element!
I had used popular libraries like tipsy.js to create tooltips (which required you to put tooltip content as an attribute on the target 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 when Hint.css was born—the first-ever CSS-only tooltip library :)
Web Maker was something that came out of my own need for a frontend 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 did you encourage people to use Web Maker?
Web Maker was created with two primary goals: speed and offline availability. These two features make it a very suitable tool for teaching frontend web development at schools, like in the Himalayan regions where there is almost no network connectivity.
Apart from that, Web Maker’s speed makes it the perfect tool to do quick experiments and tests. When you want to try out a small bit of code, you don’t want to spend time waiting for an app to load, and then for network requests to generate previews after every code change. Web Maker, be it the Chrome extension or Web app, loads instantly and show previews instantly.
How much time do you usually set aside for Hint.css & Web Maker?
Hint.css is pretty much stable. It does what it is supposed to do—create tooltips easily with just CSS. While there are a few bugs and limitations, they're mostly due to the way things work in CSS at the moment and might fix over time.
As for Web Maker, that's a big project! There are thousands of users all over the world, so bugs get reported regularly. If it’s a critical bug, I need to take it up immediately. Since I am now working full-time on my projects, I am able to take critical bugs and small enhancements as-and-when they come in.
Still, most of my time on Web Maker is spent on developing features for big releases—the list is long!
What are you learning right now? What do you want to learn next?
I have been focusing a lot on web accessibility in the recent past. I've realized that, as a developer, everything you do to make your app better for the user more or less falls under accessibility.
Can a blind person access your app? Can a person with low or no network connectivity access your app? Can someone with low-end processor power access your app? Even improving the performance of your app, in the end, makes it more accessible.
Accessibility is a large domain, and I am constantly trying to get better at it. I've also created some documentation to help increase awareness and knowledge about web accessibility.
As to what I'd like to learn next, I really don’t have any particular topic in mind. I work on website frontends. I just want to keep building the best quality frontends—so that I can make mistakes—and hence learn. Building products teaches you a lot about different domains like tech, documentation, support, and security.
What’s the peskiest bug you’ve come across? How did you fix it?
Over the years, there have been many—the details of which I don't recall. With Web Maker especially, the number is high, since it deals with service workers (and service workers are really pesky!). There are all sorts of weird issues, like service workers not being able to control a page, pages not getting reloaded while debugging, etc.
Thankfully, many developers face them, and forums like StackOverflow are extremely helpful. Even if something is unsolved on these forums, you can always ask the awesome Chrome developer advocates for help.
How important is it for you to ensure quality? How do you ensure it?
To ensure quality in your product, you need to know what it means to say 'best quality'—what are the various factors that describe a product’s quality?
Like I mentioned before, most of these factors end up making the product more accessible to the user. I feel like most of us developers and designers complicate products unnecessarily, in the name of improvements. More often than not, these "improvements" end up making the product experience worse than before.
For me, a quality product is one that enables users to do what they want it to do, without any interference. None of your design, fonts, logic, or 3rd party scripts should interfere with the user’s experience.
Almost everything I create spawns out of my own necessity. I created Web Maker because I wanted an offline frontend playground. I created CSSBattle because I wanted to play such a game. What this means is that I am the very first user of my own products—and that is a very big thing to have!
This way, you can see things from a very different perspective (when compared to a developer). You start to face the real issues that users might face and can fix them before they start affecting others.
Even if you don’t care about your users (just saying), you’ll still fix bugs—because you, as a user, will face them—and this will, in turn, help other users too. I feel lucky to make and work on such products :)
What do you think is the best way for developers to network? What social media networks do you use frequent?
Although there are a lot of mediums for networking today (conferences, Twitter, Slack groups, hackathons, etc.), I am an introvert who prefers online networking over meetups. Still, I wish I could talk to more people and learn from them easily. My small domain of networking is limited to Twitter.
What do you do in your spare time? Have you created programmatic fixes for real-life problems?
A lot of things, actually :) I am a very creative person, so I like to create things. I like making art (I participate in Inktober every year), I play the piano, football and table-tennis. I have a lot to blog about (mostly tech stuff), but I am very bad at taking time out to do so—but I am trying to improve that. I also recently started a tweet-sized Frontend learning course on Twitter.
Apart from that, I spend a lot of time helping my brother with his project. In fact, I am also building a software solution for him to keep track of all the details of every cow at our cowshed, which he currently handles on paper.
Have you ever faced coder’s block? What did you do to overcome it?
Many times! There have been times when I have literally spent 3-5 days wanting to start working on a feature, but did nothing.
I thought about this problem and understood that it happens because I think a lot about each feature before actually developing it. For example, what tech I’ll use, how I will code it, what the security implications are, how the backend will be handled, etc. I almost visualize the code before typing it out.
When I think that much, I generally hit a blocker or sub-optimal approach (remember, this is still in my thoughts), and then I start figuring out solutions. This thought process has no end, at least not a near one. To top it all off, there are web distractions. I get distracted by Twitter and YouTube a lot, mostly while I am not coding and just thinking.
To come out of such blocks, I created a few guidelines for myself. All I have to do is to remind myself that these guidelines have been proven to work (at least for me, they have worked several times in the past):
- If you want to make something, just start making it. Most of my time gets wasted thinking about future consequences. It is not bad to think about future implications, but spending too much time on them can be dangerous. Leave all the performance, design, and testing stuff aside and just start building from what you currently know. A lot of things solve themselves as you progress in a project. Plus, when you get something done, you feel more happy and motivated to move forward.
- I can do anything. I also get stuck if I can’t figure out (in my thoughts) how a particular thing will work in a big feature. And then, I don’t even start working on that feature. Reminding myself that 'I can do anything' assures my brain that I don’t need to wait to figure it out. Instead, I should start development right away and see how it goes. Honestly, this guideline holds true for all of us (most of the time). If a developer has a good understanding of basic programming and can search for things on the web, there is hardly anything they can’t achieve. Just don’t stop.
Also, looking back at things I have created in the past always motivates me and helps me overcome such blockers.
(Responses are edited for clarity).
We ❤️ open source. Fill out this form to get free, unlimited access to BrowserStack for your project's testing needs.
Recommended reading
