Tabicons

Google is in no doubt a coder's best friend, but the endless pile of tabs on tabs that can build up are not. Tabicons looks to provide an entirely web / URL based tab tool to keep this organized.

Comment

Inspiration

The inspiration behind this project was the hundreds and hundreds of articles searched through while learning / working on a coding project paired with Microsoft Edge's new introduction of a vertical tab system. After wasting enough time trying to scan through each tab, I finally wanted to try and tackle the problem so that I could quickly and easily find "sections" of tabs that I could organize.

What it does

This project then provides new tabs (like a new web page) that has a unique user customizable icon shown as the favicon. With this icon, there is a quick visual marker that can distinguish different tabs or tab sections.

How we built it

The process to building the application mainly hinged on three large entities: Github pages for hosting, Angular for the web framework, and the Material Icons library for providing the icons.

Then, the rest of it was manipulating the html elements in order to link the URL with a "search" for a corresponding icon as well as processing the favicon.

Challenges we ran into

There were a couple issues that I ran into while building this project:

  • How to turn a SVG into an object I can modify and apply colors to (especially for dark mode).
  • The sheer quantity of icons made the angular developement server crash (so I had to work on a subset of images).
  • How to work with the unique SVG management inside of angular's single page application.
  • How to host the angular application on Github pages.
  • Regular expressions and URL parsing / data passing in order to create "savable" URLs.
  • Sleep deprivation (from working all night) since I started late.

Accomplishments that we're proud of

I'm incredibly happy that I was able to (perhaps not robustly) tackle all of the challenges and could create a fairly cohesive website (that doesn't look too bad either). I'm also very proud of the fact that it supports so many different icons, as well as a customization method for recoloring and detecting dark mode.

All things considered, I'm just very happy I ended up completing a project for the hackathon and that I could participate.

What we learned

As it always is when I step away from a whole coding paradigm, I was able to re-learn a lot of what I had forgotten with Angular development. This includes (while rudimentary) routing, forms, and element manipulation. I was also able to play with other new libraries that I had never taken advantage of before, such as a color picker library.

What's next for Tabicons

While I am happy with the amount of functionality built into the application currently (it is completely usable), there is still a lot of work that can be done. This includes increasing the icon customization. Currently, there is only one type of icons that can be chosen (filled). While you can select the color, it leaves out the other 4-5 styles of icons out. Beyond that, there is also the possibility for other icon customizations (backgrounds, sizes) and finally a more built up user interactive such as cookie storage of past icons, icon browsing built into the site, etc.

Oh, not to mention searching incorrect URLs also does not fail elegantly.

Of course, as a project built up in approximately 8 hours there is LOTS of bad code that needs to be cleaned up and documentation that HAS to be done. Something I will definitely tackle once I get some good rest!

Built With

Share this project:

Updates