Posted in Web Design on Thursday, 7th February 2013 at 9:27AM
This short tutorial will show you how to create a simple but effective jQuery slider that allows users to change the value of a number field on an HTML form. I built this for newofficeasia.com, a serviced office rental search site, to adjust the search radius but it could be easily adapted and put to all sorts of uses.
Posted in Technology on Thursday, 10th January 2013 at 8:51AM
About 6 years ago I was working mainly as an artist and decided I wanted to learn how to use a 'real' camera. Digital SLR cameras were becoming both affordable and capable enough to allow amateurs (i.e. me) to give it a go without breaking the bank so I invested in a Nikon D40x with a Nikon Nikkor 18-200 VRII zoom lens. My thinking was that this would be a flexible enough combination that it would cover me in most situations without needing to switch lenses.
A few weeks ago I happened to be reading a review of Sony's new large sensor compact camera the RX100 and realised that the capabilities of this tiny camera far exceeded those of my 6 year old DSLR in just about every aspect. Within a couple of days my entire setup was on ebay and a couple of weeks later I had more than enough money to cover the cost of an RX100.
Posted in Web Design on Wednesday, 5th December 2012 at 2:09PM
UPDATE 25/02/13: I have since re-worked this site to only use the proximity search. I have a new site on the horizon which may well use a similar setup and I will update the post if it comes to pass.
I have been working on a personal project recently called newofficeasia.com that requires search results to be sorted by distance from a user's location. Luckily there's a great add-on called Geofinder that does just that.
Things became a little more complictaed when I needed to add other search criteria into the mix such as keywords and other custom field data. Geofinder only selects and sorts entries based on their location but I needed the functionality of a fully fledged search module in combination with distance searching. This technique would be ideal for a classified ads site where botht he item description and location need to be searched. Here's a page on newofficeasia.com that demonstrates what I came up with, showing offices within 20 miles of Raffles Square, Singapore that contain the keyword 'ISDN'.
Posted in Web Design on Friday, 6th July 2012 at 2:23PM
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.
Download and unzip the syntax mode then place ‘expressionengine.mode’ in ‘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.
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
Posted in Web Design on Tuesday, 20th March 2012 at 5:10AM
It's been a year and a half since writing 'My top 10 ExpressionEngine addons' and there have been loads of exciting new add-ons released in that time, so I thought it was time to write a follow-up post to pick out 10 more of my favourites and give a few examples of how I might use them.
Posted in The Good Life on Sunday, 18th March 2012 at 2:40PM
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.
Posted in Web Design on Thursday, 19th January 2012 at 4:27PM
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.
Posted in Freelancing on Tuesday, 10th January 2012 at 9: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.
Posted in Web Design on Tuesday, 10th January 2012 at 9:05AM
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.
Posted in Freelancing on Tuesday, 27th September 2011 at 1:11PM
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.
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.
Saas Evening
30 x 25 cm
Acrylics, ink and cotton on plywood
