Blog Archive: February 2011

Front-end Productivity Apps - Issue 1

No matter how hard they try Apple just don’t include everything I need to get the most out of my Mac.

Over the past few years I’ve assembled a nice collection of utility applications and helpers that genuinely save me a lot of time and hassle each day. In this post I give them some deserved attention and hopefully they will help you as much as they help me.

Total Finder

 Finder is fine by default but its much better with the addition of Total Finder. If you’re a former Windows user and remember “Windows Commander” then think of that but for OSX.

Tabbed finder windows, “Dual” mode for easy dragging and dropping and a “Visor” mode for rapid access to your tabs and files. Easily switching on the showing of hidden files is very useful and you can prevent the creation of .ds_store files in certain places (helpful for version control when you don’t have the ability to ignore).

Mac Loc

Mac-Loc is a simple little app you can run when logged in to lock your machine while you’re away. It even has a nice little animation when locking the screen.

I know that the Apple default Key-chain & screen-saver application also does this if you enable it via the preferences but I’ve had nasty experiences with that not gaining focus to the log-in box when returning to the machine with no way of exiting other than to hard reboot.

1Password

If you don’t have 1Password then do yourself a favour and get it! 1Password can create strong, unique passwords for you, remember them, and restore them.

The key part is the remembering your passwords, it integrates into your web browser and you will never have to type another password again. Its secure and is easy to set-up “in the cloud” (I use a drop-box account)  so syncing passwords between different machines is done automatically. This is very helpful for general day to day use and a front-end developer more so because of the number of password protected development servers we have to use and so on.

Visor

If you use version control such as git or do any amount of work in terminal then you will surely love Visor. It essentially pins the terminal to the top of your screen and gives you quick access to it via a special short cut key on your keyboard. It still allows for the use of tabs and is just a neat and tidy way to access terminal when doing so on a regular basis, such as making commits and pulls in Git.

ImageAlpha

ImageAlpha is a GUI for pngnq and pngquant. It allows you to easily generate “paletted” PNG images with full alpha channel and test how they will look against different backgrounds. I’ve already created a screencast about imageAlpha if you’ve not seen it.

ImageOptim

ImageOptim optimizes images so they take up less disk space and load faster by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.

There is now also a finder integration. If you install the Snow Leopard service you can run ImageOptim from Finder’s context menu.

Xscope

Xscope is a very nice application from Artis Software and Icon Factory. This software gives you a set of design utilities to help you create pixel precise designs. I’ve seen plenty of developers use the tools in the Firefox “Web Developer Toolbar” such as the guides and rules, etc but this tool does it in your OS so it stays persistent and can easily copy values to your clipboard. Very powerful and more than worth bring into your production work-flow.

Summary

I think these are enough for you to chew on for now. All of the above will speed up your work tremendously. I’ve deliberately not mentioned code editing because I’m writing a special post on Textmate (my editor of choice).

There are plenty more productivity apps I use alongside these so I will be posting a follow up in the next few days. Feel free to comment back with suggestions of your own.

Noise Canceling

Working in open creative offices usually means lots of chatter, discussion and an office jukebox. In this article I share some tips to help regain your focus.

Speak up

The first and easiest thing you can do to alleviate these distractions is to be vocal. If you do it in the right way then you might find simply asking to turn the music off or for conversations to be taken elsewhere (such as a meeting room) will get you what you need.

If you’re trying to get work done and not simply because you dislike the choice of music then I’ve found people I’ve dealt with very understanding. At the least I’ve been helped to move to a desk away from the office jukebox or away from those employees that use the phone often as part of their work, etc.

Get good Headphones

For the first 6 months of freelancing I was using default iPod white ear-buds, these are just not up to the job for two reasons. The first being they leak sound very badly so you yourself become a source of distraction for other people. The second reason is they just do not block out the sound from the outside world sufficiently.

You need good “closed back” headphones, which simply means they sit over and around your ears. They are sometimes referred to as “closed cup” earphones. Obviously the more you spend the better they’ll be. You can get noise canceling headphones, which means they have built-in technology that prevents noise getting in. These would be ideal but I realise not everybody has that kind of money. I too don’t currently have noise canceling headphones (Although I plan to invest in a pair within the next 12 months).

Photo of the Sennheiser HD 215 heaphonesI’m currently using Sennheiser HD 215 MkII they cost around £50 and are more than adequate if not totally noise canceling. Unless your music or audio is turned up to 95% or above then these headphones don’t leak sound to people around you. I highly recommend them to start you off.

A nice thing about these headphones is the cord is longer than usual and detaches from the head unit so if you or a colleague accidentally stands on them they will pull out and hopefully prevent an injury and damage. Its also helpful for packing them away quickly.

Listen to “Sound Masking” audio

I personally just cannot concentrate or work well to music. You might be asking yourself why I have headphones? Good question, the reason is because I listen to audio that helps me to shut out the noise pollution around me. Its known as “sound masking”. If you want to try it I have uploaded the following “noise” loops.

White Noise

Brown Noise

The idea is that you put them on repeat/loop in your music app of choice and begin working. After 2 to 5 minutes you should stop hearing the white noise and put it to the back of your mind because It essentially “fills in” the sound spectrum around you with barely perceptible “unstructured” noise (“structured” noise would be sounds such as speech or music that have recognizable patterns and convey information). Your brain will tune out unstructured noise as it searches for the structured variety.

You’ve experienced this kind of thing before. When you turn on your computer, you hear the cooling fan begin to spin. However, your mind quickly filters out this unstructured sound and it becomes effectively “invisible”. Which is why I’ve found white noise extremely helpful when I’ve really needed to focus in louder than average offices.

Alternatives to White Noise

White or Brown noise isn’t for everybody, some people can’t filter out white noise loops, for you I’d recommend other forms of unstructured noise.

Alternative unstructured noise

Another form of unstructured noise might be helpful to you or a nice change from white noise. You can listen to the sound of the rain falling, waves hitting the beach or the sound of a bustling Forrest. Here I’ve uploaded the sound of a thunderstorm:

There is also a trend for slowing down film scores which I’m really getting int. For example here is the John Williams Jurrasic Park Theme but 1000x slower:

I wish I could just listen to music playing over the office stereo and be able to concentrate but I can’t. Sometimes its the lyrics that distract me and other times I just plain don’t like it. Dan Benjamin, Jeffrey Zeldman and Jason Santa Maria had an interesting discussion on this subject in episode 30 of The Big Web Show podcast.

You can find plenty more online at SoundCloud or sites like SimplyNoise. Hopefully they help you as much as they’ve helped me.

Freelance Treats

imageAlpha

One of my first screencasts showing an excellent tool called imageAlpha for OSX. If you’re a front-end developer and don’t know about this tool you should watch. It will save you a lot of time.

In summary its a tool for quickly exporting 8bit png files with alpha transparency.

I’m still learning how to do a professional screencast, If I had money for every time I said “err” I’d be a millionaire but I’m sure I’ll get better. Please let me know what you think.

Update: - Should clarify when I mentioned supporting IE6, I’m referring to fixing broken layouts and going to a small amount of effort to ensure the things I can correct for iE6 (such as png transparency) I will do them.

I wont unless specifically requested to do so, create rounded corners for IE6, etc.

Airfront Live

What took you so long?

Those that know me will be glad I’m writing this post because it means I’ve finished the one thing that has been tormenting and mocking me for over a year.

The next time I see them they wont have to hear me moan about “not getting the chance to work on my site” or about how “I got so far with it but started to hate it”.

I’m finally launching version 1 of my site. So not long in the making, I’ve only been in business for over 2 years! The clichéd “Cobbler never getting the chance to fix his own shoes” doesn’t quite cover it. To a degree that’s true but it was more than that, it the creative’s worst enemy perfectionism. We all have this little demon that sits on our shoulder saying otherwise perfectly legitimate choices are wrong or could be perceived a different and less interesting way but the truth is that there’s no “wrong” choice and everything can be perceived differently.

I’ve been fortunate enough to be very busy with client work from the first day I left the BBC and started Airfront. However along with limited time I was also striving for something too perfect in my own mind, which of course I was never going to achieve. Thankfully I realised the mistakes I was making and why I wasn’t getting very far and so here we are.

Technical details

The following is an overview of the site on a technical level and in upcoming blog posts and screencasts I will delve into them in a lot more detail.

Server side

This site is running on a LAMP server provided by the excellent Layershift. Content is handled by the ExpressionEngine (EE) a flexible CMS and is combined with some very powerful plugins such as Pixel & Tonic Matrix, Solspace Freeform and others. I’ve written some custom PHP for the very bespoke or simple functionality rather than bending EE to do something it wasn’t really designed to do.

Front-end

HTML, CSS and JavaScript wherever possible make use of some newer features supported by modern browsers which degrade nicely for older browsers. Referred to as “HTML5”, “CSS3”. My JavaScript library of choice for this site was jQuery 1.4. Combined with Modernizer and the Google WebFont Loader.

Some gratitude

Dotted around this site, particularly the homepage is the use of other people’s work as a kind of hat-tip to them. You will notice on the homepage, the poster on the wall of my office changes randomly to some posters by Eboy, Pixar, Kevin Cornell and others. I’ve written to these fine people and asked their permission, some have got back to me and other haven’t, so if you’re one of the people that hasn’t I’m hoping I have the OK to use those images.

The calendar is based on the brilliant Field Notes Brand calendar.

The office scene will be topical and seasonal as the weeks roll on. Helps me experiment and learn. For this week, can you find one of my favourite Pixar characters? (An easy one really).

Entry details

This is the archive page for all entries published: February 2011

Subscribe with RSS

© Airfront Media Limited 2008 – 2011. Powered by ExpressionEngine & Hosted by Layershift. Credits & Acknowledgements.

Top