Meet CodedBits: All-in-one Toolbox for Web Developers

Categories Articles, Web Design

Patrick McNeil is a man who wears many hats! You may know him as the the author of two of the best selling web design books out there (The Web Designer’s Idea Book or the new volume 2 of the same collection), the author of the original Design Meltdown, a prolific blogger or a tutorials ninja, but then again Patrick put his curator hat on when he created CodedBits – a real swiss knife for web developers. We had the chance to sit down for a short talk with Patrick, here’s what we learned:

What is CodedBits?
In a nutshell, CodedBits is a portal to a selection of the best online tools for generating code. Things like CSS generators, image generators and place holder elements. It includes online tools that front end developers in particular use frequently.

How did you get the idea?

I was recently working on an article series about CSS3 for designers. As a part of the series I was referencing a lot of code generating tools that made producing certain cross browser code a lot easier. I realized that I actually used a lot of tools online to produce various things; such as favicons, rounded corners and lorem ipsum text. Through this, it occurred to me to not only consolidate the best code generating tools into a single place, but to provide an application like interface where you can easily load up the tool and put it to work. So I mashed together some jQuery to make it happen.

How long did it take to build it?

I spent about 15 hours on the project. I even got to use a few of the tools to produce the end product! Such as the noise generator and 3D CSS text tools.
I made use of the jQuery UI framework to build out dynamic tabs. When a tab is loaded it contains an iframe where the remote site is displayed. This is not a case of showing and hiding each tab; instead when you select a tool it creates a tab and loads up the tool. This way you can have multiple versions of the same tool open. I wanted to keep it as simple as possible, so the whole thing is pretty self contained and does not rely on WordPress or other back end system. In fact, if you have the files you can completely run it from your computer. Being lazy and not wanting to maintain a lot of code the whole thing runs off of some simple html lists of links. I was particularly geeked out when I found a tool to automagically find favicons!

Is it finished or an ongoing project?
It is hardly finished. I just had to move onto other tasks. The core functionality is there and I use it all the time. I can of course see a ton of ways to make it even cooler and I would really like to organize the tools even better.

What’s your favorite app included in CodeBits?

That is a hard question because I carefully selected the tools I liked best (it’s not intended to be an all inclusive list). My favorites probably include the HTML Snippet Generator, the Noise Texture Generator

What other web apps do you like / use?
Recently I was turned onto Trello and have been using it heavily. I also rely on HootSuite, Dropbox, Freshbooks and LastPass every day.

What are your favorite online destinations for casual browsing?
Casual browsing? I don’t think I even know what that is anymore!

Catalin is the founder of Mostash - a social marketing boutique - and he's always happy to share his passion for graphic design & social media.