For coding (and sometimes writing) that usually means no lyrics. Instead I reach for the rhythm and rhapsody of movie scores. They are a great alternative to traditional classical music, which I don’t favor as much.

The Pursuit of Happyness

My first and favorite choice. This is such a delightful album, I was hooked immediately. Most of the tracks have a lively pace, but not at all frantic. With an optimistic feel to it, this is a great choice for tackling a challenging project or task you don’t exactly relish. ;)

Composer: Andrea Guerra

The Pursuit of Happyness

The Time Machine

I loved this soundtrack long before seeing the movie (which almost ruined it actually). I even selected the piece “Wish Me Luck” to play while I walked down the aisle when John and I got married. :) Overall the album has a wistful appeal. It’s great working music, though I did uncheck two of the songs in iTunes because they were very jarring to me.

Composer: Klaus Badelt

The Time Machine

Armageddon

For days when you’re feeling particularly enthused about your work. Many tracks have an upbeat, motivating tempo but never to the point of distraction. Some electric guitar compliments the piano and strings in an unexpected way. It’s edgy, in a good way.

Composer: Trevor Rabin

Armageddon

Martian Child

Perfect if you need a bit of soft music to ward off a dull silence. There’s nothing particularly engaging about it – in fact at times I don’t even notice it. That’s the best part actually. There are no sudden screeches or major crescendos. You can put it on and just work.

Composer: Aaron Zigman

Martian Child

Finding Nemo

If you prefer music with a lot of “movement” to keep the pistons in your brain firing, this will do the trick. Simultaneously happy, inspiring, soothing and energetic. I unchecked a few songs for the same reason stated above, but altogether it’s a splendid listening experience.

Composer: Thomas Newman

Finding Nemo

Gladiator

I think Hans Zimmer ranks among the most talented composers of our age, cranking out masterful scores like Pirates of Caribbean (also in my library) and The Da Vinci Code – but Gladiator is my favorite. Giving a sense of empowerment, it’s very affecting yet easy to listen to while you work. The last three tracks in particular make the album.

Composer: Hans Zimmer

Gladiator

Legends of the Fall

Both haunting and lilting, this was a tough choice to feature over two other soundtracks by James Horner that I own (Braveheart and Titanic), which are just as frequently played. But Legends is one of the first movie scores I ever bought and I’ve never grown tired of it all these years. That says something.

Composer: James Horner

Legends of the Fall

Did you like this post? Stay tuned for Music for the Designing Soul coming up next. You might also enjoy the list of music you can work to on design:related. What do you you listen to when working with code? Add your favorite in the comments!

CSS Branding

WordPress themers already know that labeling the top of a style sheet and providing a screen shot is the only way to know which theme is which when viewing them from the Presentation tab. But you don’t need to be running WordPress to know it helps immensely with keeping things organized (especially if you use multiple sheets for one website). Giving each sheet a name, description, URL (and a version number in some cases) is a good practice to get into.
/* Name: Client Site X
Theme URL: http://example.com
Description: 2 column, green, blue & white, fixed-width layout
Version: 1.0
Author: Charity Ondriezek
Author URL: http://designadaptations.com */

Grouping colors

I can never remember the hexadecimal codes for the associated colors I use on a design (or vice versa), so making a change to one is a pain unless I document my color scheme. Rather than copy/paste the hex number into a color picker to see for sure what color it is (or if it’s the right one), why not take the guess-work out and group all your colors together? I usually add something like this at the bottom of my style sheets. Then with a simple shortcut (cmd+end), I can go to the end of the page and grab the color I want immediately.
/* -------- COLORS ---------
dk red: #6f2422
lightest blue: #dbe9f4
lt blue: #acc5ef
mid blue: #3b5b81
dk blue: #091B2F
darkest blue: 0b1d32
--------------------------*/

Don’t forget the small stuff

I tend to keep elements chunked together based on their location within the layout as users see it. So all header styles are together under the label HEADER, and all sidebar styles are under the SIDEBAR label, etc. But it’s important to add comments for little things too, like what a certain style “does”. This helps a lot when working with a string of selectors, as sometimes seen in the Comments styling of a typical WordPress blog.
/* visual distinction for author comments */
ol.commentlist li.author{background:#fff; color:#333;}
/* visual distinction for alternating comments */
ol.commentlist li.alt {background:#333; color:#fff;}

Scanning with Find & Replace

Ok so this doesn’t actually apply to coding, but it’s where commenting really pays off. Whether you use a full-blown development tool like Dreamweaver, or something lighter and simpler like CSS Edit or Style Master, the ‘Find & Replace’ feature in these apps is probably the single most important time-saver (particularly if your CSS is complicated).

Need to change one color throughout the page (or the site)? Using the color grouping tip, copy the hex you need to switch out and enter it into the ‘Find’ input box. Enter the new hex code into the ‘Replace’ input. Select the search criteria and click ‘Replace All’.

Or let’s say you want to skip to a section quickly to make some edits. Search using just ‘Find’ and it’ll take you to the first result in the list (your comment). Using the tip above as an example, you could refine this even more to search for a keyword or string, such as “author comments”.

If your CSS is separated, indented and/or commented intelligibly, it’s easy to scan through a document to find what you need even without Find & Replace, but I can’t go a day without it. ;) What about you? Got any (regular or quirky) CSS habits that increase your productivity? Is there a feature of your favorite editor you find yourself using over and over?

In my quest to find the Mac variants of all the Windows keyboard shortcuts I relied on so heavily, I became obsessed and decided to start a list of commands for the programs I live in – to refer to until I can memorize everything. :) Whether you’re switching platforms or just converting to the keyboard persuasion, you may find this list very useful. I’m sure I’ll be adding to it as time goes on…

General application control

Word processing/text editing

Form field input

Firefox shortcuts

Mozilla has many more Firefox shortcuts available here.

Dreamweaver shortcuts

You can also create and/or edit custom keyboard shortcuts for DW. Just go to Dreamweaver > Keyboard Shortcuts to get started.

Photoshop shortcuts

Creative Curio also has a (more comprehensive) list of Photoshop keyboard shortcuts, many of which are platform independent. Again, with Photoshop you can assign your own as well. Just go to Window >Workspaces > Keyboard Shortcuts & Menus.

Navigating and searching

* Works in Finder and Dreamweaver’s Files window

Special fuctions

Want more? iboughtamac.com put together a list useful shortcuts too, although some are geared a bit more toward advanced users rather than newbies. And of course Apple has an extensive list of OS X keyboard commands for just about any function you’d want to perform.

One final note, if you just can’t get used to the Home and End keys functionality (Dreamweaver is the only app I know of where they work properly), check out Starry Hope’s Keyfixer mini-app. If remaps the key bindings so they’ll perform the same function as in Windows.

Some were gleaned from various resources that were much more complicated than they needed to be, and some I discovered quite by accident. :) All stand to save you days or weeks of work recreating precious add-ons and profile settings. For these short tutorials I recommend either a jump drive, networked machines, or a direct Ethernet connection (particularly for moving music).

Moving your iTunes Library

If you’re a music fanatic like me, you’ve no doubt spent countless hours perfecting iTunes as your digital jukebox, complete with ratings, album covers, genre labels, etc. And what about those Smart Playlists you’ve been able to create thanks to things like Play Count? Those cannot be recreated (without a lot more time invested) unless you transfer your entire Library. Here’s an easy way to do it:

• Copy just the music files on your PC and drop them in to User > Music > iTunes > iTunes Music on your Mac.
• On your PC, copy the .itl file residing in the iTunes folder (one step up from where your music lives).
• Back on your Mac, delete the existing .itl file and drop the new one in to the corresponding location (User > Music > iTunes).

Open up iTunes and your entire library should now be there, just as you left it, complete with ratings and play counts/lists and the works. Rock on.

Sidenote: For me, there was one small caveat. About 45-50 songs (out of nearly 1400) showed up with an exclamation point next to it, indicating the file could not be found. The songs were in fact there, but the path got lost somehow. When you double click to play you’ll be prompted to find the song, and once you do that all will be right with your music world again. :) No sweat compared to re-rating everything eh?

Migrating your tricked out Firefox profile

Safari is nice and all but Firefox is exceptional. To my mind there’s no equivalent, especially if you’re a designer or developer. (I would’ve been hard pressed to switch to a Mac in the first place if FF wasn’t available, because there are just some add-ons I wouldn’t want to do without.) The key to get up and running quickly on your new machine with this browser-based workhorse is in the profile folder, hidden by default in Windows.

It can be found here: C:\Documents and Settings\User\Application Data\Firefox\Profiles\. If you’re looking for this by drill-down and don’t see the Application Data folder, you’ll have to make it visible by going to Tools > Folder Options > View, and selecting “show hidden files”.

On your Mac, copy the entire folder to this location: ~Library/Application Support/Firefox/Profiles. You should already have a default profile created, so you may want to create a new profile to assign to the folder you just migrated. (Then if something goes wrong you can revert to your default.) Open Terminal, and type in the following: /Applications/Firefox.app/Contents/MacOS/firefox -ProfileManager. This launches Firefox’s Profile Manager. Give your new profile a name, browse to the correct folder and you’re done.

Sidenote: If you’re not concerned with importing add-ons or password and just want your bookmarks imported, I recommend Foxmarks. You won’t have to mess with profile settings, and it’ll sync up all your bookmarks on any machines you’re running it on. Importing them is just a matter of pulling them down from Foxmark’s servers!

Going from Thunderbird to Mail

I totally dig Thunderbird, but in the spirit of switching platforms, I decided to give Mail a chance. Already I’m impressed with its junk filtering. Thunderbird was letting a lot more spam through than it should’ve been, but with Mail I’ve only seen a handful of messages slip by. Anyway I digress.

Again you’ll need to find your profile on Windows. The path is similar to that of Firefox’s: C:\Documents and Settings\User\Application Data\Thunderbird\Profiles\. Copy your profile to your jump drive or your Mac’s desktop.

• In Mail, go to File > Import > Mailboxes.
• Select mbox files (on Leopard) or Other (on Tiger), and browse to the source where you copied your profile folder.
• Drill down to Profile Name > Mail > Account Name.
• Select the folder(s) you want and click continue.

You should now see a new folder titled Import, with whatever file structure you had intact! Simply drag/drop the folders out of Import to suit your needs, or leave them there as an archive. Either way you’re all set.

Sidenote: I imported some of my email before upgrading to Leopard, and some after. For some reason the file structure was not maintained with the second import. Also note this tutorial is aimed at moving your email from another machine. Selecting the Thunderbird option only works if you’ve already been using Thunderbird on your Mac.

That about covers it! Switchers, enjoy. :)

kuler

With tools like this, working more color into a design can be as simple as discovering a palette someone else created! Available online or as a desktop widget, kuler makes it fun to browse and create schemes. Start with a base color and build your palette from there within a sleek, smart UI. Changing your palette is only a matter of clicking a different base color or changing a rule. Scrubby sliders allow for infinite combinations, dependent only on your imagination.

kuler from Adobe Labs

ColorBlender

Blend to your heart’s content with this online palette creation tool. Automatically create a scheme of coordinating colors, or directly edit individual colors to make a palette of your own design. When you’re satisfied, easily export to Photoshop or Illustrator. You can also save blends to go back to later.

ColorCombos

This one has a neat feature where you can enter any URL and it retrieves the color scheme used by that site. For me, this find was a huge time-saver, because I had been using ColorZilla to pick colors manually from sites I thought had a nice scheme. It was painstakingly slow. (Note: the latest version o Colorzilla allows viewing and saving palettes found on a website via the DOM Color Analyzer.) ColorCombos also has a nice testing feature, where you can enter multiple hex codes to see how your colors work together in close proximity.

ColorJack

Offers a variety of color picking and palette suggestion tools. The Sphere section shows you a color wheel and palette suggestion of six colors. Make adjustments a wheel, sliders, or choosing from one of several formulas. The Studio offers palette suggestions of three or more coordinating colors. Everything can be adjusted using the available functions or by entering your own values. There’s also a Spin button, which loads a random color scheme. ColorJack also has export features.

ColorJack

ColorSchemer

Aside from selling software, ColorSchemer provides a gallery of user created palettes you can browse freely, along with a search feature where you can enter a hex code which returns any palette containing that color. This is great if you have a base color in mind, but you’re having trouble finding or matching colors. The gallery is also a good source if you just need a little nudge of inspiration. :)

As a sidenote, an ever-present source of inspiration for choosing a palette can be found in your very own photos. Here are some great examples of color schemes sampled directly from photos.