Though I know how to code and develop websites from scratch, at my day job our internal tools platform is currently built in Bubble.io's no-code platform (largely because the original developers didn't know how to, well, develop. I'm slowly working on moving away from it). That being said, it is a very user-friendly platform to create responsive web apps, and, because I spend a lot of time in it, I decided to create a browser extension to give me quick shortcuts to some tools that I normally would need to access manually. Things such as switching a page from the production environment to the development environment quickly, enabling or disabling the built-in debug mode, or a notification when a long database transfer has been completed, which are normally time-consuming or not possible. So, having this goal, I have set out to create this extension.
The Icon
I tend to create most of the assets I know I'll need for a project before-hand, so that I can focus purely on the code later. So today, I created the icon for this project:
I designed this icon in Adobe Illustrator, using only a few shapes (4 to be exact). I designed this icon so that when the extension is inactive, the blue bubble will become grey. It is also symbolic of the two words in the name of this extension: a bubble, signifying Bubble.io, and a gear, representing the purpose of the extension.
If you would like to follow along with my development of this extension (and other projects), check out my GitHub here.