My Development Toolbox

Over the years I've carried around my own personal toolbox for development. The contents has changed throughout the years; however, the purpose has remained the same; to provide me with tool, templates, and snippets to allow me to build my web pages quicker, faster, and cheaper.

In this week's post, I'll walk you through what I currently keep in my toolbox from a high level so that you may be able to build your own or add some new tools into one you already have.

General Guidelines

Before we dive too much into the contents, I want to comment on a few guidelines that I try to keep when updating my toolbox. One of the largest guidelines that I attempt to follow is that everything must be free to be reused and redistributed. The reason for this is simple, I hope to applies these items into a variety of my projects and thus am redistributing them. I don't want to worry about paying a licensing fee every time that I want to add this module or use that font. Keeping this open, free, and available to be redistributed makes everything a lot easier.

The second guideline that I follow is to try and keep a copy of the license and author information of everything in your toolbox. This includes deciding on a license that fits your views and opinions for your own works that you add. Keeping a license around will help if someone asks you when you attempt to integrate it into a project. In addition to the licenses is the author's or the source's information. This could be nothing more than a url in my opinion but knowing where you got something and who did it can help you build a network of people and sites to keep an eye on for new stuff they may develop or post.

The third primary guideline that I try to keep is to store your toolbox in the cloud and on a flash drive. Some people argue that with the device syncing powers of tools like Dropbox or Evernote that you don't really need to keep a copy with in arm's reach on a thumb drive; however, I still like the speed of reaching into my bad and tossing someone my thumb drive to get the file(s) in the event I can't interact with the cloud easily or quickly. This is often the case at conferences.

CSS Examples

The first item I currently have in my toolbox is a group of files that provide various CSS examples. These are anything from templates to style a vcard, a CSS reset file, or examples of things that I took more than 2 seconds of effort to truly learn how to do.

Fonts

This is an area where I'm still getting my feet wet; however, with the ability to embed fonts into your web pages through CSS3, having open and freely-redistributable fonts comes in handy. One good resource for learning some of the legal nuances of embedding fonts, I highly encourage you to check out www.FontEmbedding.com.

Icons

Having the right icon for a given scenario or page can cause huge improvements to a page's design. Having the wrong icons can destroy just the same as well. I found myself searching for just the right icons on the web and in various libraries way too much. Now, I keep track of the icons that I have frequently used and will constantly add to them as needed. One item that I've began to track in here too are example favicon.ico files and icons for iPhone shortcuts.

Images

The reason why I have Icons and Images in separates folders in my toolbox is because of their intent. I keep images for background images and stock photos. The stock photos I'll probably branch out as my collection grows. As for the backgrounds, this ranges from simple gradients to watermarks to signify drafts or beta releases.

Scripts

I use this folder in a similar way to that which I use the CSS section. Here I keep a list of utility scripts (like an Html5 Feature Detection script) as well as snippets on how to use certain jQuery plug ins or do something else through JavaScript

Templates

This section of my toolbox is used for a variety of different scenarios. Since my day job is working in the Microsoft .Net space, I have a number of Project and File templates in this directory (since the ones that come out of the box in Visual Studio hurt my head). This is also the place where I keep track of other design and layout templates that I've either made or have found online

Utilities

My utilities folder is for any reusable, compiled component. This include stuff like a tool for handling database version migrations, database documentation, a random password generator, and abstraction classes that I can quickly plug into my .Net projects without worrying about rewriting the same abstraction layers over and over again.

Web File Examples

This folder I use for references and as a launching pad for creating some files. This folder contains a files that lists the DocTypes that I use the most, an example robots.txt, a sitemap.xml, opensearch.xml, and dublin.rdf. These are files that are missed in a number of templates and having them available makes it easy to add them in.

Personal Information

This isn't so much a folder as just a category of other items you should toss into your toolbox. Some of these items would be check lists that you use to keep yourself on track or to define a process that you have with your workflow, a copy of a personal biography that you may use for a presentation, a vcard of your contact information, a copy of the license(s) you place your own work under, and a copy of your CV or Resume.

That's my current toolbox. Obviously it's web heavy; however, that's where I find myself the most these days and what I enjoy doing. There's so much out there to learn and do and apply to your day jobs, it's nice to be able to have the resources you need and are familiar with at your finger tips.

-J