ExpressionEngine 2 syntax mode for Coda 2

Posted in Web Design on Friday, 6th July 2012 at 2:23PM

ExpressionEngine 2 syntax mode for Coda 2

UPDATE 31st October 2014: With the release of Coda 2.5 the Channel entry tag gained a red background.  You can remove this by importing the Coda EE2.sss file that has been added below.  Drag the file to your Coda icon in the dock and select 'Coda EE2' from the dropdown menu that appears. Close the preference window and your tag should be restored.  I have also updated the syntax mode with some of the newer EE2 tags.

UPDATE 3rd August 2012: The original version of this syntax mode stopped working with the Coda 2.0.2 update.  The latest version should restore functionality.

I've been Googling 'ExpressionEngine syntax mode for Coda 2' almost daily for the last few weeks in the hopes that someone would come up with an EE2 syntax mode for the brilliant new code editor from Panic and put me out of my misery, but so far I've been left wanting.

As an act of desperation I decided to have a go at putting something together myself using existing syntax modes as a base from which to start.  After a bit of trial and error I have come up with something which works well enough to get me through until someone who knows what they're doing releases something better.

So far I have enabled basic syntax highlighting for ExpressionEngine 2 tags / parameters and added auto-completion for  most standard ExpressionEngine tags, variables and parameters along with some Structure tags for good measure.  The mode imports the built-in modes for HTML, PHP and Javascript so in theory these should all be highlighted correctly as well.

Feel free to download it and try it out it but please bear in mind it is only a stop-gap measure and is by no means perfect.  If you have any good suggestions as to how it could be improved, leave a comment below and I will try and update it when I get a moment to spare.

To Install

Download and unzip the syntax mode then place ‘expressionengine.mode’ in ‘User > Library > Application Support > Coda 2 > Modes’ and restart Coda 2.  You can use any of the default colour stylesheets ('Coda > Preferences > Colors') although it was developed using Coda Bright.  You could also export, adapt and re-import any of these stylesheets to colour it to your taste.  I have added the stylesheet that I use below - it is more or less identical to Coda Bright except I have made the 'channel entries' tag and 'channel forms' tags bold.  Add it by dragging the .sss file to the Coda logo in your dock and selecting 'Coda EE2' from the dropdown menu.

Download v1.3

Coda EE2.sss


1.0 - Initial release

1.1 - Fixed autocomplete for closing channel entries tag.  Adjusted class for !=  and = signs.

1.2 - Updated to work with Coda 2.0.2

1.3 - Updated for Coda 2.5 and with latest EE tags

Where to plant that fruit tree. Finding sunlight hours in any spot of your garden.

Posted in The Good Life on Sunday, 18th March 2012 at 2:40PM

Where to plant that fruit tree. Finding sunlight hours in any spot of your garden.

Spring is in the air and I have recently been faced with an unusual dilema.  Having just moved house we wanted to plant a few fruit trees in quite an irregular shaped garden with numerous potential obstacles between the ground and the sun and I couldn't work where each tree would be best situated to gain maximum sunlight throughout the summer.  Having pondered various locations and even planted a couple of the trees I had a flash of inspiration that gave me the precise sunlight hours for any spot of the garden at any point in time.

Cross browser automatically expanding headings with backgrounds using css inline-block

Posted in Web Design on Thursday, 19th January 2012 at 4:27PM

Cross browser automatically expanding headings with backgrounds using css inline-block

Headings with background colours are a common design element of modern websites.  Because headings are displayed as block by default, they will by nature stretch to fill the full available width of their containing element which is fine until you want them to have a background which only sits below the text and not the full width of the parent element.  You may be able to use set widths to achieve something similar but this doesn't account for scaling text sizes or content generated by a client via their CMS which can change frequently.

In an ideal world the 'inline-block' declaration should cater for these eventualities by providing the styling capabilities of a block level element such as padding and margins, but with the 'expand-with-content' property of inline elements.  Unfortunately, support for this property is patchy and unreliable on a lot of commonly used browsers but I came across this snippet of CSS which gets all browsers from IE6 onwards to behave - and it works like a charm every time.


Creating a hollow box with rounded corners for web backgrounds using Photoshop CS5

Posted in Web Design on Tuesday, 10th January 2012 at 9:05AM

Creating a hollow box with rounded corners for web backgrounds using Photoshop CS5

I count myself as being fairly proficient with Photoshop but at the same time I am sure there are a lot of very basic techniques that I am unaware of and until recently this was one of them.  Whilst there are a few different ways to achieve HTML curved corners for your website including javascript methods and CSS3, for those clients who insist that their site looks identical in every browser the only reliable solution is to use 2 background images on an outer and inner element.

Dorset based freelance web designer / developer and ExpressionEngine devotee

Posted in Freelancing on Tuesday, 10th January 2012 at 8:59AM

Web designer and developer, Michael Sibley (AKA Siblify) is on the move. Having promised myself that I would take full advantage of the mobility that the freelancing lifestyle has to offer, I am relocating southwards, from Gloucestershire to sunny Dorset.

My passion is for creating a superior web experience, not just for end-users but also for site administrators through meticulous design and a keen awareness of usability.  I want people to feel empowered to edit and update their websites so I base all my sites around ExpressionEngine, a fully featured and highly flexible Content Management System or CMS, to make changing the content really easy without compromising design or functionality.

Qualities to look for in a good freelance web designer / developer

Posted in Freelancing on Tuesday, 27th September 2011 at 1:11PM

Qualities to look for in a good freelance web designer / developer

I recently wrote an article entitled 'Agency vs Freelancer. Choosing the right person(s) for your new website' which compared the pros and cons of using either an agency or freelancer to build your new website.  In this article I want to examine in greater depth some of the qualities to look for when hiring a freelance web designer. Finding a suitable freelancer can be a bit of a minefield so it really is worth taking careful consideration when trying to select the right person for the job.

The skills for the job

When using a solo freelancer it would unrealistic to expect them to be an expert in every area of the web development process but you should ensure they are competent (if not exceptional) at the core skills needed to get your website from initial proposal through to sign off and launch.

Building an interactive map and world clock using HTML 5 & jQuery

Posted in Web Design on Tuesday, 27th September 2011 at 12:40PM

Building an interactive map and world clock using HTML 5 & jQuery

I have recently been working on a serviced office space rental site called which included the need for an interactive map highlighting the countries which the company dealt with.  There was also the requirement that the map display the current local time for the capital of the active country or area.

For several years my first port of call for a project such as this would have been Flash, but this is no longer the case thanks to tools such as the jQuery javascript library and its wealth of community built plugins which makes coding these sorts of things relatively straight forward whilst negating the need for browser plugins.  Creating the graphics for each country and positioning them correctly was fiddly and time consuming but the actual coding was fairly simple.

Agency vs Freelancer. Choosing the right person(s) for your new website.

Posted in Web Design on Wednesday, 3rd August 2011 at 10:02AM

Being a freelancer that has worked closely with agencies in the past I find it interesting what makes people choose one option over the other.  They both produce a similar product but come at it from a different angle and often with varying results. Before deciding who is best suited for any particular project there are a few things I would recommend thinking about to ensure you get the right person for the job at the right price.


Without the overheads that larger business' inevitably incur, freelance web developers are often able to keep their rates relatively low.  There's only one salary to pay, no premises to rent and no shareholders to demand that profits continue to build year on year.  In my experience, sites that I have built on behalf of agencies have been charged out at 2-3 times the figure I would have demanded as a freelancer.

New Painting - View over Macau

Posted in Art on Tuesday, 19th July 2011 at 7:50AM

New Painting - View over Macau

The last 12 months have been hectic thanks to a combination of high web demand and new babies which has resulted in some very slow progress on the painting fron but finally I have something new to show - View over Macau.

This painting was made using cotton and ink on raw canvas and was based on a view overlooking the Chinese special administrative region of Macau.  A short walk from bright lights and casinos of down-town Macau is a more gritty, less glitzy city, which provided an irresistable backdrop for this rather dark and foreboding painting.  Buildings are stacked in a haphazard almost accidental fashion with numerous wires and washing lines acting as linkages between the spaces people live in.

Michael's Paintings

The High Sierra

The High Sierra
46 x 46 cm
Acrylics, ink and cotton on canvas

Michael's photos

Thunderstorm Virunga

Thunderstorm over the Virunga mountains

Featured Web Project

Infinity production page

Project: Infinity Productions