Airfront

Amongst us freelancers and small companies, its said that the lack of blog posts is a good thing, it means you’ve been “too busy” to take the time to write. So I’m not going to complain about that.

However it is something I intend to remedy this year. I’d like to focus more on this website as a method of continuing to improve my craft. One of the downsides of freelancing and working at a frenetic pace is having less time to experiment with code, design and emerging standards or best practices.

Which is why I’ve I’m going to make time for a realignment and update of this site. I’m always reading about developments and many times I’m lucky to get the opportunity to practice them on live projects but there is something to be said for doing it on personal projects where the risks are less. You can make mistakes without having to worry about them affecting commercial customers and their users.

So what have I been up-to for the last 10 months?

I had a brilliant time working with the wonderful people at Code Computerlove for most of 2011, its one of my favourite places to work and one of the best digital agencies in the UK. I feel honored to be continually asked to work with them, last year I helped a large team of designers, project managers, user experience architects and developers rebuild the website(s) for Oxfam UK. It was a grueling task, at times stressful but always fun.

There were lots of technical challenges working for such a large organization, they came with different needs and requirements from most of the jobs I’ve worked on but the team I was working with were so talented and friendly that it make it fun.

Working with the very talented Andrew Brandwood, we developed a module front-end system of HTML, CSS & JavaScript components that the application developers could use to build the site. I learned more than about development reusable components for large scale and high traffic e-commerce sites.

With the time I had left I worked with Studio Skylab on some nice site builds. I also had the pleasure of working with Building Blocks for a few weeks, helping them with some front-end tasks for Butlins and other high profile clients.  I’ve worked on some things that sadly I’m not allowed to talk about in specifics, some mobile-web development work and some character illustrations.

So all in all, professionally 2011 was brilliant. Huge thanks and love go out to all the people I worked with.

This year I will be sharing an office for at least the next six months (and hopefully more). I’m lucky to be sharing with the very talented Jono Brain, Mark Holt, Stuart Preece and Andrew Doran. Work wise I’ve been asked to do some mobile web-development and responsive design for a large niche content site so lots to learn and get through. Hopefully blogging and writing along the way after inspiration to do so from my recent trip to the New Adventures Conference in Nottingham this month.

• Permalink
• Comment on "10 month catch-up"0
• Share

UPDATE

Since writing this post, there has indeed been a textmate 2 released! It’s in Alpha and available here

For those interested in updating and skinning textmate 1 please read on:

I love Textmate and use it everyday but sadly version 2 doesn’t appear to be coming soon, so lets add some more awesome to Textmate in the meantime.

Upgrade the UI

The first thing we can do to give it the feel of a Textmate 2.0 is to give it a bit of a facelift. See the screenshot below:

If you like what you see then you can get the Subtle Gradient Leopard Dark Skin which has a simple install procedure.

Handle Project Tree Refreshing

I’ve tried to move away from Textmate because it is showing its age in certain areas or at least I’ve used it so much I have discovered its limitations. My biggest gripe is the way it indexes files in the project draw. For local files (files on your machine) its fine but if you’re connected to a network drive or “cloud” storage and that location has more than a few hundred files then you will notice how long it takes to read those files.

It will appear to hang when Textmate looses focus and then regains focus because each time you refocus to Textmate it re-indexes the files checking for any changes. Re-indexing happens a lot to me because I’m a front-end developer and I’m constantly switching between Photoshop, the browser(s), terminal and Textmate when building the site I’m working on.

So the first little addition to at least limit these issues is to download a plug-in called ”ReMate” by Ciaran Walsh. ReMate can be used to disable the automatic project tree refresh when the application regains focus. Generally this will be a massive help to most people. You can refresh at your own pace if you’ve changed files in another editor or overwritten them externally. You will still have the initial load time when first opening your project but bear with it because 99% of the time Textmate has not crashed, its simply dragging its feet. I find in the time it takes to make an espresso its loaded whatever project I was trying to open. To make it faster always try to be connected via Ethernet and not over a wireless connection.

Another thing you can do is to update the “Folder Pattern” expression from within Textmate’s preferences. Open Textmate Preferences and goto the Advanced section. Then click on Folder References and paste the following snippet:

A better Project Drawer

I’ve always throught the UI and basic functions of the project drawer in Textmate could be better and with “Project Plus” again from the life saver Ciaran Walsh we get something a little neater and with a few handy features. Firstly the drawer becomes a more lean and modern “panel” then it has the following nice little tricks up its sleeve:

• Project-tree state can be preserved when re-opening the project
• Sorting options through the project file list context menu
• Display folders on top
• Sort by file extension
• “Open With” option

You can download the latest version from Ciaran’s site but please do read the three blog posts detailing installation and the changes.

Add some Zen Coding

If you haven’t seen Zen Coding and particularly in Textmate then you’re in for a real treat. The native Textmate editing features and tab triggers combined with the default HTML bundle is a powerful tool-set but combined with Zen Coding its like getting an upgrade from a Nissan to a Porsche.

Zen Coding is a plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:

Becomes:

There is so much more to it than just that but from this simple example hopefully you see how quick it could make things for you. I uploaded a ZenCoding screencast I recorded a few months ago that might help and there is a slightly outdated demo video.

JSTools

If you’re doing any JavaScript coding in Textmate you need JSTools bundle. It has a front-end to JSLint and can minify your scripts with a number of popular services such as YUI, Closure Compiler and more.

And now wait

Duke Nukem eventually got made and lets hope a textmate upgrade does too.  If you’ve installed the above then you should have an upgraded coding experience while we wait. Thank you to all the very smart people that created these plug-ins and bundles.

• Permalink
• Comment on "Roll your own Textmate 2"0
• Share

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.

• Permalink
• Comment on "Front-end Productivity Apps - Issue 1"1
• Share