Matthew Hutchinson

about

Matt is a web developer from N. Ireland. He currently runs Hiddenloop and works in Dublin. Want to find out just a little bit more ?

An audio feed is available for the latest articles at matthewhutchinson.net, find it here.

Lightboxing, Control.Modal style

posted 7 months ago in , , , ,

You might have noticed a minor style change in the most recent blog entries. I’ve decided (from now on) to use a light-box for showing off any embedded videos and (biggish) images on the page. It keeps the layout tidy and allows you to focus on the video you’re watching or image your viewing, without distraction. So I can do things like this for images;

And even stuff like this, for videos

All of this is made possible using Control.Modal, a light weight, unobtrusive JavaScript library for creating modal windows and lightboxes using content that is already on the page. So with javascript turned off, everything still works, with the links navigating to anchor tags in the page.

At the moment I am applying display:none; on the modal content to avoid a visible onLoad jump effect as the content gets hidden by Control.Modal javascript. I’ll be changing this (since doing this hides the content when javascript is off, and CSS is on) – There’s also a small bug with the tv-icon link style on IE6.

In Mephisto, I was able to create my own custom ‘Modal Macro’ filter, so I can easily apply the effect to any content in my articles. Here is the code for doing just that. Save this as modal_macro.rb in the lib/ folder for any new or existing vendor/plugin. As usual, any comments, questions or suggestions are appreciated.

Behind the scenes

posted 8 months ago in , ,

Maybe youv’e noticed, maybe you haven’t, but quite a lot has changed at this site in the last few days. Its all behind the scenes work though, with the exception of a few style changes and new pages here and there. So what’s new;

  • Switched from Typo to the much better, Mephisto
  • Microformats have been applied to all entries (hAtom)
  • My updated footer profile and all comments have also got the hCard treatment
  • Pagination on old entries has been removed and I’ve got an archive for anything posted way back when. There is also a new tag cloud page
  • The entire layout is a bit more liquid (in more ways than one) Its now fluid rather than fixed – (drag your browser width) and built on liquid templates (part of Mephisto) There is a min-width defined – which (of course) falls over on narrow IE6 pages :(
  • Gone are the old AJAX comment submissions (in Typo) and AJAX on ‘search-as-you-type’ has also been removed.
  • I’ve added my own code to handle Gravatar caching, which was very easy to bolt into Mephisto. I’ll probably do another post on how this was done soon.
  • I’ve upgraded the server to the latest Lighttpd 1.5 RC. With the new mod-proxy-core module, it means I no longer have to work with a mongrel-pound-lighttpd stack. The site is just served straight-up, from Lighttpd to 3 Mongrels.
  • As usual the newer ‘more about me’ page still needs more work.
  • Last but not least, error pages have got a Batman inspired makeover.

The not so 'Zen', Zencart (1)

posted 8 months ago in

A few weeks ago I took on some work theming ZenCart, a popular open source PHP/MYSQL shopping cart system. After investiagting a number of solutions (including my much prefferred choice, Shopify), the client decided on something that would offer a better financial solution, and would work directly with the RealEx payment engine.

As an ecommerce sites go, ZenCart is perfectly suitable for the end user. It has the usual features and structure you would find in other online shops (recent products, related purchases, categorisation, notifcations, stock management etc.) The problem comes when you need to theme it. Here’s just a few of the issues that came up;

  • Abolutely no attempt has been made to sperate PHP code and HTML presentation. Opening up a templated page, means trawling through mountains of includes, function calls and PHP case statements to find the HTML you are looking for.
  • ZenCart claims to allow a table-less layout to be easily customised, and while there are no tables, the xHTML markup is some of the worst I have seen; semantically incorrect at best, grossly bloated and invalid at worst.
  • The promise of using a few CSS files to theme the shop is simply not true. In many pages with similar layouts you will find completely different class and id attributes for exactly the same elements.
  • The xHTML is inconsistent, in some pages a product list might be shown in a table, in others as an ordered-list. Combined with bad CSS identifiers, the size of your stylesheet grows and grows.
  • The admin panel seems to feature not one, but two built-in templating systems that (along with being confusing) allow raw-HTML to be entered by non-technical staff without any validation. I chose to avoid using them, to keep things simple.
  • For a complete re-theme, there are literally hundreds of files that need attention in the themes/ folder; and many of these contain application code.

Now I don’t know all of the history behind ZenCart, but I have to say I think it over promises on simplicity (a lot). Rather than a ‘zen’ like experience, working with it will probably cause your hair to fall out.

Shopify from JadedPixel on the other hand, is an outstanding piece of software. I followed its development closely (via their blog) from early last year. They make use of the Liquid templating system, and provide a large selection of well designed themes to choose from. They have gone as far as developing an offline application, Vision allowing developers and designers to build the required theme templates without having to setup a development box. It is a great approach to building a simpler e-commerce solution, with the minimum of fuss.

The disadvantages being its closed source, and a hosted-only solution. Setup is free, but requires a credit card to activate – and you must agree to a 3% commission on all sales.

1 comment

Pigeon Mashup

posted 11 months ago in , , ,

Question: what do you get when you cross, AJAX Google Maps, GPS, Air Quality Sensors and a bunch of Pigeons ?

Answer: The Pigeon Blog of course!

Back to it, and glad (1)

posted on Friday, the 24th of November 2006 at 17:35 in , , , ,

After months of working on other paid projects, Im back working on Skribe and since I have no major freelance work on my calendar for a while, I am aiming to focus on this until its done – yes done! – hard to imagine after almost 4 years of starts and stops. Im looking forward to getting into Rails again too (with 1.2RC1 now released) And after reading the ‘Little Book of Flow’ I should be able to effortlessly fly through the work – experiencing great joy – possibly.

Skribe has defintely been a big missed opportunity. Back in 2001 we were attempting to offer a free social site with conversation/video/photo sharing (sound familiar?). And in 2001 there were very few competitors about. Now with the success of Flickr, YouTube, MySpace, Bebo (and just about everyone) – its hard to think where Skribe fits in – I still believe our small team has enough original ideas and skills to break the mould and deliver a competitive product. If I didnt, I simply wouldn’t be trying.

So I guess this post officially restarts the long dead ‘Skribe Weekly’ – (which almost turned out to be an annual event) – The idea being to post about how the work is going, and get real people to feedback on our ideas and approach. So feel free to comment/criticise here – starting with some rough design mockups (more to come soon)

1 comment