I decided to do some multitasking while watching Superbowl LI, a short hackathon to make a start on a web app.
I tweeted on Wednesday that I was going to do hackaton, and asked for some ideas. I got some interesting suggestions:
Some stellar ideas, but I needed something that I could get into some sort of working state in the 3 hours it normally takes to play a Superbowl.
Finishing a web app in 3 hours is bit of a challenge, but I was pretty sure I could get something useable enough to share with world.
I’m not a designer, I pretend to be sometimes.
I struggled picking the right color for my designs, so I built Cymbolism to help. I also struggle with picking the right fonts to use in my designs, and none of the tools I found were exactly what I was looking for.
I decided to start on building a web app that allows you to easily try different web font combinations, starting with fonts available from Google Web Fonts.
I knew I wouldn’t have time to branding and build the web app, but I wanted to at least come up with a good name.
Playing League of Legends, I’m always looking to land a Wombo Combo with my team, this process of combining abilities came to mind when I thought about trying to find the perfect font combination for a design.
I played with the words a little checked what was available to register, and arrived at: Wombos
It was quite difficult to wait until the start of the game before I could start making. But as soon as balled was kicked to start the game, I got started started.
I used my preferred Laravel based stack and decided to build the web app in public, so I made the code available on Github.
mubashariqbal/wombos
_Contribute to wombos development by creating an account on GitHub._github.com
Everyone was free to follow along as I built the app. I didn’t think many people would, so I decided to host the site on Heroku and deployed often. I like quick and easy it to get hosting setup with Heroku, and pretty much free while you’re in development, especially for what I needed.
I used the Google Fonts API, to get a the list off all fonts available, and built a quick Bootstrap/JQuery based user interface to allow the user to select 3 different fonts used on some common scenarios. I also added an alternative dark color scheme. Whenever the user selected a new font, the display would be updated automatically to reflect the change.
I thought it would be good to show users some popular combinations that might work for their design project, so I added to the user controls.
User controls
That was about all I planned to build for the hackathon.
Due to the overtime, I ended up having 4 hours to get started on my web app, and I’m pretty happy with how things turned out.
I have lots of other ideas for Wombos: From more style guide templates, to other color schemes, and other font sources.
I plan to continue developing Wombos, and will also extend the tool to help people pick color combinations too.
Superbowl Sunday was a lot of fun. I watched a great game of Football, and managed to get a head start on a web app I’ve been meaning to build for a long time.
Checkout Wombos and let me know what you think in the comments below.
