The writer, Stewart O’Nan, once said “The two hardest things about writing are starting and not stopping.” Programming at its essentials is writing. When I’m wearing my web developer hat, it seems that I spend over a quarter of my time browsing around the OS-X Finder. So what better way to start programming then having a file framework. Not only can you start more quickly, but your structure will stay consistent. Think of the last time you edited someone else’s project and that person placed all their files in one folder. Oh, the horror!

Introduction to my file framework

The guiding principle for my file framework is:

Either precisely title all files with hierarchical prefixes or create sub folders to categorize your files.

With video projects and print projects that output to one file, file organization isn’t as essential. With web design, you do not want the files you publish getting mixed up with your source files. Yes, we all have at least once uploaded a 100MB Photoshop file to the online server and wondered why it was taking so long. This file framework focuses on web production and output.

Balance is key to file organization–it’s a means to an end. Besides SEO of a static web site or ease of future editing, most of the time your file organization isn’t going to impact the final product. I’ve seen both sides of the coin:

• Artistic Pilers: one folder file organization where that person has taken the visual metaphor of the desktop a little too far, “creating a well-named folder is not very creative”
• Obsessive Compulsive Filers: the overcompensation that there are too many files in a folder if you have to scroll or look for a file.

The source folder

My source folder has an abbreviated name of the project. All the subfolders within my source folder start with an underscore. This is because under OS-X folders are not sorted first (this is very annoying!).

• __jobNumber: (folder) Sometimes I receive job numbers for my projects after I began them. If you don’t have the job number before you begin work, then do not place the job number in the name of the main folder. This will invalidate all linked files within the folder. Naming a sub folder with the job number will still allow a search for that job number. Remember, do not change the name of the project folder!
• _copy: (folder) Place the Word Documents and the text files that you have created from them here. In general, you will want to create text documents before pasting copy into an HTML page to to rid yourself of the Word character encoding.
• _flash: (folder) Place Adobe Flash files here (SWFs and FLAs) and move the finalized SWFs to the “live folder.” If you have many external file dependencies, it may be more productive to work with the source files in the “live folder.”
• _flash_source: (folder) Place images and any files that your Flash files link to. If you keep all these linked files here, you can update them by overwriting the old files and clicking Update from within the Flash library.
• _fromSuper: (folder) Place original layout files (such as Adobe Illustrator and Photoshop) from your creative director here. There have been too many times in the past that I’ve overwritten the original and had to ask for it again from my supervisor. Another option could be a _fromClient folder.
• _layout: (folder) Place the edited layout files here, and take time to name these files correctly, so that you can refer to them later on.
• _old: (folder) Place any files you want to keep, but don’t want to clutter up the other folders here
• Notice to Future Designers: (file) If you want to tell future designers any important information, write a note here. Suggestions include your name and contact information and the path name to your working folder.

The live folder

When working with web sites, your “live folder” will need to be in your local servers document folder.

• images: (folder) Place your graphics here. I recommend naming them close to the DOM of their usage
• css: (folder) Place your IE hacks files, PNG fixes, and CSS files here
• js: (folder) Place your JavaScript files here
• index.html: (file) HTML template containing header information such as meta tags and structural markup such as frameworks/grids/wrappers

Current project folders

You are going to want to get to these folders as fast as you possibly can. If you work on a Macintosh, place your source folder and your live folder on the left side of the Finder window. If you work on a Windows computer, place place your source folder and your live folder on the Start Bar or the Places Bar. On my Windows XP machine my Start Bar looks similar to the OS-X dock, since I have so many folder shortcuts (large icons) on it.

In conclusion

I hope these ideas better prepare you for starting new projects and increase your productivity by not placing all your files in one folder–while also not having to create the same folders when you begin your project or while you are in the middle of working. If you have more suggestions to add to this file framework, please respond below.

Suggested extensions for making coding easier

Web Developer

The Web Developer FireFox extension was the first FireFox extension I ever installed. It was mid-2004, and I was frustrated with Cascading Style Sheets. I was using CSS, not for the first time, but I was using CSS for margins and padding and widths– all those things we used spacer gifs and tables for back in the web’s infancy–for the first time. The sole reason that I would have even paid for this extension was the Outline tab and it’s “Outline Block Level Elements” The fact that I could actually know where one element ended and another begin was a godsend. There are many more uses for the plug-in. Almost too many to name here. The highlights that I use (or used to use) regularly are:

• Outline and highlight block level elements, deprecated elements, frames, links, and other tag and CSS elements
• Disable images
• View the CSS for a particular element by clicking on that element
• Disable cache and cookies
• Display various page and screen sizes for testing (what does this site look like on an 800×600?)
• Disable background images (ever browsed though MySpace, which reminds GeoCities circa 1997)
• View the CSS for a web page while browsing
• Edit the CSS style sheet of web page without reloading
• Validate HTML, CSS, feeds, and links

Firebug

I have only mentioned Web Developer first because it was my gateway drug of FireFox extensions. I use Firebug more often now that CSS is even more prevalent then it was in 2004, thus simplifying the HTML and making hand-coding HTML much easier. Firebug focuses solely on the content of a page and doesn’t have the browser related features such as disabling the cache or resizing the browser window. It shines when you want to tweak HTML, CSS and JavaScript contained in a page, all on the fly.

The way Firebug works is by clicking the “Inspect” button and selecting an element on the page. The HTML and CSS associated with that element is then displayed. The inheritance and overriding of CSS attributes can be seen (hence the cascading in cascading style sheets) and any CSS attributes can be edited or disabled.

Firebug helped make my CSS leaner. Before I discovered it, I often ignored the inheritance features of CSS and repeated the same attributes numerous times, since inheritance is an abstraction that is hard to remember without either modeling (which Firebug does) or precise documentation. Firebug shows this inheritance, thus making the relationships between.

Firebug will measure and illustrate all the offsets, margins, padding, and sizes for you–similar to what you would have in a WYSIWYG editor. Since offsets, margins, and padding can often overlap, there is a “Layout” tab that allow editing of these qualities and shows their relationships.

Link Checker

If you’ve ever clicked through a large site in order to test all the hyperlinks, you’ll find this simple add-on convenient and productive. It will highlight valid and invalid links of a page. Once Link Checker is installed, you’ll have to add the toolbar button yourself.

Measure It

You could use the guides in Firebug, but most times, one just wants to quickly estimate the correct margin or padding. This add-on gives the height and width in pixels of a rectangle that can be drawn atop the webpage.

ColorZilla

ColorZilla adds an eyedropper tool to the status bar that allows color sampling and copies RGB values (in five different ways) to the clipboard. This means you don’t have to go back to Illustrator or PhotoShop to grab RGB values for your CSS.

A note about Internet Explorer

Unfortunately, the majority of web users browse with Microsoft Internet Explorer and thus testing a site with IE is necessary. At work, I create my websites on an Apple Macintosh and have an old Dell laptop with IE 6 installed to test websites with Internet Explorer. A tool that I have not used extensively, but does help sometimes in debugging under IE is Internet Explorer Developer Toolbar.

Diagnostic Styling

This isn’t a plug-in or browser add-on. Using Diagnostic CSS Styling helps point out, for the most part, incomplete tagging. CSS allows you to style based on attribute values. For example, if you use “#” for links that you do not have a URL for, then you can highlight these with a red border.