Improving Safari 4's Tab User Interface

1 Like many people I downloaded Safari 4 Beta with some excitement (is that sad?) as soon as it was released a couple of days ago. My first thought upon opening the shiny new browser was that the user interface was a bit crazy (are Apple going cover flow crazy?) but there was something else that felt really wrong.. what was it? Then it hit me.. it was the new tabs UI where Apple have now positioned tabs at the top of the window, in fact they're located so close to the top of the window that they have entered the sacred area of the window title and become one with it, eugh. As far as I know this is the first time this has happened in OS X and I think it is *a really bad idea*. I know its takes up less space, I know its more compact than Camino, but I don't care. I think it is at best, an ugly solution, and at worst, a confusing interface implementation for users. It goes against every other window seen in OS X (yes, even those sexy transparent black HUD windows) and after a little digging in "Apple's Human Interface Guidelines on Window Elements":http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/XHIGWindows/chapter_18_section_4.html#//apple_ref/doc/uid/20000961-SW8 I found the following: bq. The only controls that belong in a title bar are the close, minimize, and zoom buttons. If a title bar is combined with a toolbar, the unified area can contain the toolbar control and the toolbar customization contextual menu (these controls are described in "Title Bar Buttons"). Do not place other controls in a title bar. There you go Apple. *You're violating your own guidelines* by putting other controls, i.e tabs, into the window title. I *pray* that Apple will rethink this interface design. Anyway, I present (da da daa!) my idea for the tab interface implementation. It's no more compact that Safari 3's tab UI but it does have the correct hierarchy of Window Title, Tab with Page Title, Address, Content and it doesn't violate the "Human Interface Guidelines":http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/XHIGIntro/chapter_1_section_1.html. "!http://seventytwo.co.uk/assets/0000/0016/safari4tabuimockupsmall.jpg!":http://seventytwo.co.uk/assets/0000/0012/safari4tabuimockup.jpg "View a larger version":http://seventytwo.co.uk/assets/0000/0012/safari4tabuimockup.jpg Like many people I downloaded Safari 4 Beta with some excitement (is that sad?) as soon as it was released a couple of days ago. My first thought upon opening the shiny new browser was that the user interface was a bit crazy (are Apple going cover flow crazy?) but there was something else that felt really wrong.. what was it? Then it hit me.. it was the new tabs UI where Apple have now positioned tabs at the top of the window, in fact they’re located so close to the top of the window that they have entered the sacred area of the window title and become one with it, eugh. As far as I know this is the first time this has happened in OS X and I think it is a really bad idea. I know its takes up less space, I know its more compact than Camino, but I don’t care. I think it is at best, an ugly solution, and at worst, a confusing interface implementation for users. It goes against every other window seen in OS X (yes, even those sexy transparent black HUD windows) and after a little digging in <a href="http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/XHIGWindows/chapter_18_section_4.html#//apple_ref/doc/uid/20000961-SW8">Apple’s Human Interface Guidelines on Window Elements</a> I found the following: <blockquote> The only controls that belong in a title bar are the close, minimize, and zoom buttons. If a title bar is combined with a toolbar, the unified area can contain the toolbar control and the toolbar customization contextual menu (these controls are described in “Title Bar Buttons”). Do not place other controls in a title bar. </blockquote> There you go Apple. You’re violating your own guidelines by putting other controls, i.e tabs, into the window title. I pray that Apple will rethink this interface design. Anyway, I present (da da daa!) my idea for the tab interface implementation. It’s no more compact that Safari 3’s tab UI but it does have the correct hierarchy of Window Title, Tab with Page Title, Address, Content and it doesn’t violate the <a href="http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/XHIGIntro/chapter_1_section_1.html">Human Interface Guidelines</a>. <a href="http://seventytwo.co.uk/assets/0000/0012/safari4tabuimockup.jpg"><img src="http://seventytwo.co.uk/assets/0000/0016/safari4tabuimockupsmall.jpg" alt="" /></a> <a href="http://seventytwo.co.uk/assets/0000/0012/safari4tabuimockup.jpg">View a larger version</a> true

2009-02-25T16:42:13+00:00

30 true

2009-02-25T16:00:00+00:00

2009-02-25T16:51:01+00:00

1 I've just finished implementing 'remember me' functionality in a Merb app I'm working on and I came across a gotcha when setting cookies that I thought I'd post up for anyone coming across the same thing. You can set a cookie with and expiry date in Merb using something like: <notextile> <pre class="textmate-source">cookies.set_cookie(:foo, 'true', :secure => true, :expires => 3.days.from_now)</pre> </notextile> I was setting a cookie using the value of a DateTime property on my model, something like this: <notextile> <pre class="textmate-source">cookies.set_cookie(:auth_token, session.user.remember_token, :expires => session.user.remember_token_expires_at)</pre> </notextile> Unfortunately the above code didn't work. I eventually found out that it was down to the DateTime property on the model that I was using for the <code>:expires</code> option. The <code>#set_cookie</code> method expects <code>:expires</code> to be supplied with a Time object, not a DateTime object. If it isn't given a Time object then it will not convert the value to the correct format required for a cookie. Thus you end up with a cookie that will expire at the end of the browser session instead. I’ve just finished implementing ‘remember me’ functionality in a Merb app I’m working on and I came across a gotcha when setting cookies that I thought I’d post up for anyone coming across the same thing. You can set a cookie with and expiry date in Merb using something like: <pre class="textmate-source">cookies.set_cookie(:foo, 'true', :secure => true, :expires => 3.days.from_now)</pre>I was setting a cookie using the value of a DateTime property on my model, something like this: <pre class="textmate-source">cookies.set_cookie(:auth_token, session.user.remember_token, :expires => session.user.remember_token_expires_at)</pre>Unfortunately the above code didn’t work. I eventually found out that it was down to the DateTime property on the model that I was using for the <code>:expires</code> option. The <code>#set_cookie</code> method expects <code>:expires</code> to be supplied with a Time object, not a DateTime object. If it isn’t given a Time object then it will not convert the value to the correct format required for a cookie. Thus you end up with a cookie that will expire at the end of the browser session instead. true

2009-01-14T07:23:34+00:00

* "http://wiki.merbivore.com/howto/cookies":http://wiki.merbivore.com/howto/cookies

<ul> <li><a href="http://wiki.merbivore.com/howto/cookies">http://wiki.merbivore.com/howto/cookies</a></li> </ul>

27 true

2009-01-14T06:50:00+00:00

Gotcha when setting expires on cookies in Merb

2009-01-14T07:25:30+00:00

1 Simon and I would like to wish you all a very merry Christmas! Simon and I would like to wish you all a very merry Christmas! true

2008-12-25T14:23:44+00:00

25 true

2008-12-25T14:21:00+00:00

Merry Christmas!

2008-12-25T14:23:44+00:00

1 !http://seventytwo.co.uk/assets/0000/0010/railsmerbmerge.gif! Wow. This is exciting. Rails and Merb have got it on and are carrying a love child, its called Rails 3. Merb has been a great thing for the Rails world helping to push Rails in a better direction. Many ideas from Merb are already appearing in Rails edge but from now on they'll be combining the "great minds":http://rubyonrails.org/merb of both frameworks to create a *killer ruby web framework*. More information can be found at the "official rails blog announcement":http://weblog.rubyonrails.org/2008/12/23/merb-gets-merged-into-rails-3. Exciting times ahead! bq. Rails 3 is going to kick ass. <img src="http://seventytwo.co.uk/assets/0000/0010/railsmerbmerge.gif" alt="" /> Wow. This is exciting. Rails and Merb have got it on and are carrying a love child, its called Rails 3. Merb has been a great thing for the Rails world helping to push Rails in a better direction. Many ideas from Merb are already appearing in Rails edge but from now on they’ll be combining the <a href="http://rubyonrails.org/merb">great minds</a> of both frameworks to create a killer ruby web framework. More information can be found at the <a href="http://weblog.rubyonrails.org/2008/12/23/merb-gets-merged-into-rails-3">official rails blog announcement</a>. Exciting times ahead! <blockquote> Rails 3 is going to kick ass. </blockquote> true

2008-12-23T12:58:09+00:00

24 true

2008-12-23T12:31:00+00:00

Merb and Rails evolve into Rails 3

2008-12-23T12:58:56+00:00

1 bq. A website wireframe is a basic visual guide used in web design to suggest the layout of fundamental elements in the interface. Let me start of with saying that *wireframes save time, effort and money*. By spending time making wireframes at the start of development we can make things easier, faster and more enjoyable for ourselves in the long run. Consider building a house without any architects drawings and you'll get the idea. When we started on our latest project at Makito Labs we wanted to make sure we had everything planned out to the nth degree to make our development process as smooth as possible. One of the things we decided upon very early in the project was that we were going to use wireframing for laying out the interface. Usually we would find ourselves jumping in, sketching out very rough ideas on paper, constructing them in Photoshop, and then iterating through a few different revisions. That can get seriously draining and time consuming. I now know that there is a better way. This time we're producing the wireframes before even thinking about the site design. Wireframes allow us to quickly come up and play around with possible UI layouts while being free from not having to care about the final design, instead we can focus on achieving the optimum layout of elements for our users. h2. Before you get started It's easier to start producing your wireframes if you have an idea of your how your site's or app's is going to be structured so I'd advise making a site map before you move into the wireframing otherwise you may end up wasting more time by wireframing things you don't need or missing things that you do. h2. Producing Wireframes As with most things there are quite a few ways of generating wireframes. Of course there is the good old pencil and paper but there are some other options which are easier to manipulate, not to mention easier on the environment. h3. HTML Wireframes Some people suggest using HTML but I belive it takes too much time to produce and can be a lot of hassle. "Paul Boag":http://boagworld.com/usability/quick_and_dirty_wireframes/ summed it up nicely: bq. ...the most common way to build wireframes is using HTML. Of course the downside of this approach is that it can take longer if you are overly precious about your code. Personally, when it comes to wireframes I prefer the quick and dirty approach. I create my HTML wireframes using the WYSIWYG editor in Dreamweaver, churning out the pages through a mixture of CSS and tables. I don’t care what is going on under the hood. All I care about is that I can get a sense of how the site would work. Taking this somewhat cavalier attitude to HTML wireframes is not without its drawbacks. Because the underlying code is a mess, ultimately the wireframe has to be thrown away. A better approach would be to use nice clean semantic code which can then be reused for the final build. However, in my experience this rarely works in reality h3. Software for Wireframing So if we're not going to use pencils or HTML, what else is there? Welll there are a few pieces for Windows users such as "Microsoft Visio":http://office.microsoft.com/en-us/visio/default.aspx or the full featured "Axure RP":http://www.axure.com/Default.aspx. Both of them looked pretty good to me but I'm a Mac man so I needed something OS X friendly. I finally narrowed my choices down to two products - the lovely "OmniGraffle":http://www.omnigroup.com/applications/OmniGraffle/ and a funky little piece of cross-platform software - a Mac *and* Windows friendly app called "Balsamiq Mockups":http://www.balsamiq.com/products/mockups. I already use "OmniGraffle":http://www.omnigroup.com/applications/OmniGraffle/ for quite a lot things like producing site maps, database schemas and domain models and there are quite a lot of "UI stencils available to download for free":http://graffletopia.com/categories/user-interface but after taking a look at "Balsamiq Mockups":http://www.balsamiq.com/products/mockups I was hooked. Unlike OmniGraffle it's made for one thing and one thing only - wireframing. Mockups gives you exactly what you want to create wireframes including possibly every UI element you can think of (I havent found any missing yet) and a nice sketchy feel which stops you from thinking about design and allows you to focus solely on laying out the UI. !http://seventytwo.co.uk/assets/0000/0008/balsamiq-mockups.jpg! h2. Life with wireframes Hopefully this post will make those of you who aren't wireframing consider using them in the future. We've found them to a very useful step in the development process and we'll definitely be continuing to use them in all our future projects. <blockquote> A website wireframe is a basic visual guide used in web design to suggest the layout of fundamental elements in the interface. </blockquote> Let me start of with saying that wireframes save time, effort and money. By spending time making wireframes at the start of development we can make things easier, faster and more enjoyable for ourselves in the long run. Consider building a house without any architects drawings and you’ll get the idea. When we started on our latest project at Makito Labs we wanted to make sure we had everything planned out to the nth degree to make our development process as smooth as possible. One of the things we decided upon very early in the project was that we were going to use wireframing for laying out the interface. Usually we would find ourselves jumping in, sketching out very rough ideas on paper, constructing them in Photoshop, and then iterating through a few different revisions. That can get seriously draining and time consuming. I now know that there is a better way. This time we’re producing the wireframes before even thinking about the site design. Wireframes allow us to quickly come up and play around with possible UI layouts while being free from not having to care about the final design, instead we can focus on achieving the optimum layout of elements for our users. <h2>Before you get started</h2> It’s easier to start producing your wireframes if you have an idea of your how your site’s or app’s is going to be structured so I’d advise making a site map before you move into the wireframing otherwise you may end up wasting more time by wireframing things you don’t need or missing things that you do. <h2>Producing Wireframes</h2> As with most things there are quite a few ways of generating wireframes. Of course there is the good old pencil and paper but there are some other options which are easier to manipulate, not to mention easier on the environment. <h3>HTML Wireframes</h3> Some people suggest using HTML but I belive it takes too much time to produce and can be a lot of hassle. <a href="http://boagworld.com/usability/quick_and_dirty_wireframes/">Paul Boag</a> summed it up nicely: <blockquote> …the most common way to build wireframes is using HTML. Of course the downside of this approach is that it can take longer if you are overly precious about your code. Personally, when it comes to wireframes I prefer the quick and dirty approach. I create my HTML wireframes using the WYSIWYG editor in Dreamweaver, churning out the pages through a mixture of CSS and tables. I don’t care what is going on under the hood. All I care about is that I can get a sense of how the site would work. </blockquote> Taking this somewhat cavalier attitude to HTML wireframes is not without its drawbacks. Because the underlying code is a mess, ultimately the wireframe has to be thrown away. A better approach would be to use nice clean semantic code which can then be reused for the final build. However, in my experience this rarely works in reality <h3>Software for Wireframing</h3> So if we’re not going to use pencils or HTML, what else is there? Welll there are a few pieces for Windows users such as <a href="http://office.microsoft.com/en-us/visio/default.aspx">Microsoft Visio</a> or the full featured <a href="http://www.axure.com/Default.aspx">Axure RP</a>. Both of them looked pretty good to me but I’m a Mac man so I needed something OS X friendly. I finally narrowed my choices down to two products – the lovely <a href="http://www.omnigroup.com/applications/OmniGraffle/">OmniGraffle</a> and a funky little piece of cross-platform software – a Mac and Windows friendly app called <a href="http://www.balsamiq.com/products/mockups">Balsamiq Mockups</a>. I already use <a href="http://www.omnigroup.com/applications/OmniGraffle/">OmniGraffle</a> for quite a lot things like producing site maps, database schemas and domain models and there are quite a lot of <a href="http://graffletopia.com/categories/user-interface">UI stencils available to download for free</a> but after taking a look at <a href="http://www.balsamiq.com/products/mockups">Balsamiq Mockups</a> I was hooked. Unlike OmniGraffle it’s made for one thing and one thing only – wireframing. Mockups gives you exactly what you want to create wireframes including possibly every UI element you can think of (I havent found any missing yet) and a nice sketchy feel which stops you from thinking about design and allows you to focus solely on laying out the UI. <img src="http://seventytwo.co.uk/assets/0000/0008/balsamiq-mockups.jpg" alt="" /> <h2>Life with wireframes</h2> Hopefully this post will make those of you who aren’t wireframing consider using them in the future. We’ve found them to a very useful step in the development process and we’ll definitely be continuing to use them in all our future projects. true

2008-10-22T11:08:17+01:00

Having recently discovered the joy of using wireframes for web development I thought it would be nice to write a little post about them and how you can make use of them in your development process.

Having recently discovered the joy of using wireframes for web development I thought it would be nice to write a little post about them and how you can make use of them in your development process.

20 true

2008-10-31T06:15:00+00:00

Working with Wireframes for the Web

2008-10-31T06:15:47+00:00

2 We're on the roll again, heading back to Brighton for a few days later this week. Next year Alistair and I will be moving to Brighton so that we can work on our devious plans more efficiently and set up Makito Labs HQ, so we're taking this trip to check out more of what Brighton has to offer and figure out boring things like how much moolah we're going to be taxed for renting office space. We'll be in Brighton from Thursday 30th October until Saturday 1st November, so if you're a Brighton local and fancy joining us for a pint or two then please "give one of us a shout":http://seventytwo.co.uk/authors or drop us a direct message on "Twitter":http://twitter.com/makitolabs. We'll be heading out on Thursday evening for drinks, so if you're able to drop by and fill us in on the best and worst that Brighton has to offer, you're more than welcome to a pint on us! We’re on the roll again, heading back to Brighton for a few days later this week. Next year Alistair and I will be moving to Brighton so that we can work on our devious plans more efficiently and set up Makito Labs HQ, so we’re taking this trip to check out more of what Brighton has to offer and figure out boring things like how much moolah we’re going to be taxed for renting office space. We’ll be in Brighton from Thursday 30th October until Saturday 1st November, so if you’re a Brighton local and fancy joining us for a pint or two then please <a href="http://seventytwo.co.uk/authors">give one of us a shout</a> or drop us a direct message on <a href="http://twitter.com/makitolabs">Twitter</a>. We’ll be heading out on Thursday evening for drinks, so if you’re able to drop by and fill us in on the best and worst that Brighton has to offer, you’re more than welcome to a pint on us! true

2008-10-27T15:28:18+00:00

22 true

2008-10-28T07:25:00+00:00

Brighton Ahoy!

2008-10-28T10:09:30+00:00

1 We recently had to install beanstalkd the messaging queue system from Philotic, Inc on our development machines. MacPorts didn't work so we decided to build it ourselves but any guides for installing on OS X are pretty thin on the ground so I thought I'd share what we had to do. # You need libevent installed for beanstalkd to work so download latest stable release of libevent from "their site":http://monkey.org/~provos/libevent/. # Unzip and <code>cd</code> into the libevent directory # Run <code>./configure && make</code> # Run <code>sudo make install</code> # Download latest stable release of beanstalkd from "their site":http://xph.us/software/beanstalkd/download.html # Unzip and <code>cd</code> into the beanstalkd directory # Open the Makefile in your favourite text editor and remove <code>-Wall</code> from <code>CFLAGS</code>. It causes some warnings when building in OS X for some reason. Save it. # Run <code>make</code> # Now we just need to move the beanstalkd executable. Run <code>sudo mv beanstalkd /usr/local/bin/</code> You should now be able to start the beanstalkd server. Open a new console and type <code>beanstalkd</code>. You should see something like: <pre> % beanstalkd beanstalkd: net.c:90 in unbrake: releasing the brakes </pre> Happy beanstalkd-ing! We recently had to install beanstalkd the messaging queue system from Philotic, Inc on our development machines. MacPorts didn’t work so we decided to build it ourselves but any guides for installing on OS X are pretty thin on the ground so I thought I’d share what we had to do. <ol> <li>You need libevent installed for beanstalkd to work so download latest stable release of libevent from <a href="http://monkey.org/~provos/libevent/">their site</a>.</li> <li>Unzip and <code>cd</code> into the libevent directory</li> <li>Run <code>./configure && make</code></li> <li>Run <code>sudo make install</code></li> <li>Download latest stable release of beanstalkd from <a href="http://xph.us/software/beanstalkd/download.html">their site</a></li> <li>Unzip and <code>cd</code> into the beanstalkd directory</li> <li>Open the Makefile in your favourite text editor and remove <code>-Wall</code> from <code>CFLAGS</code>. It causes some warnings when building in OS X for some reason. Save it.</li> <li>Run <code>make</code></li> <li>Now we just need to move the beanstalkd executable. Run <code>sudo mv beanstalkd /usr/local/bin/</code></li> </ol> You should now be able to start the beanstalkd server. Open a new console and type <code>beanstalkd</code>. You should see something like: <pre> % beanstalkd beanstalkd: net.c:90 in unbrake: releasing the brakes </pre> Happy beanstalkd-ing! true

2008-10-25T08:54:26+01:00

We recently had to install beanstalkd the messaging queue system from Philotic, Inc on our development machines. MacPorts didn't work so we decided to build it ourselves but any guides for installing on OS X are pretty thin on the ground so I thought I'd share what we had to do.

We recently had to install beanstalkd the messaging queue system from Philotic, Inc on our development machines. MacPorts didn’t work so we decided to build it ourselves but any guides for installing on OS X are pretty thin on the ground so I thought I’d share what we had to do.

21 true

2008-10-25T08:35:00+01:00

Installing beanstalkd on Mac OS X 10.5 (Leopard)

2008-10-25T08:54:49+01:00

1 !http://seventytwo.co.uk/assets/0000/0006/happeningapp.jpg! If you're wondering why It's been a little quiet around here for a few weeks, its because Simon and I have been working flat out on our first big web app, "Happeningapp":http://happeningapp.com/, for our newly found company, "Makito Labs":http://makitolabs.com/. The site went up yesterday and we're now accepting beta signups! bq. Happeningapp is the missing glue between you and all those lovely websites you’ve developed. Whether you need to know a little more about what’s going or prevent something catastrophic that’s waiting in the wings to trample all over your chi, we’re sure that Happeningapp is the answer. <img src="http://seventytwo.co.uk/assets/0000/0006/happeningapp.jpg" alt="" /> If you’re wondering why It’s been a little quiet around here for a few weeks, its because Simon and I have been working flat out on our first big web app, <a href="http://happeningapp.com/">Happeningapp</a>, for our newly found company, <a href="http://makitolabs.com/">Makito Labs</a>. The site went up yesterday and we’re now accepting beta signups! <blockquote> Happeningapp is the missing glue between you and all those lovely websites you’ve developed. Whether you need to know a little more about what’s going or prevent something catastrophic that’s waiting in the wings to trample all over your chi, we’re sure that Happeningapp is the answer. </blockquote> true

2008-10-17T03:33:35+01:00

19 true

2008-10-17T03:17:00+01:00

Happeningapp is accepting beta signups!

2008-10-17T03:45:15+01:00

1 Just a quick note to tell everyone that we've changed the way our comments system works. It previously required you to create a user account before being able to post a comment and featured nice things like threaded comments. After a brief discussion we decided that the user accounts feature was probably inhibiting user participation and that we didn't really need threaded comments right now - so *bang* its gone!. Now there's no excuse for not participating. ;) Just a quick note to tell everyone that we’ve changed the way our comments system works. It previously required you to create a user account before being able to post a comment and featured nice things like threaded comments. After a brief discussion we decided that the user accounts feature was probably inhibiting user participation and that we didn’t really need threaded comments right now – so bang its gone!. Now there’s no excuse for not participating. ;) true

2008-09-15T11:01:04+01:00

18 true

2008-09-15T10:53:00+01:00

Note: We have a new comments system

2008-09-15T11:01:04+01:00

2 Alistair and I are both major fanboys of "TextMate":http://macromates.com/ and espouse its use wherever possible. We thought it would be nice to share some of the TextMate bundles and plugins that keep us coding with optimum efficiency, so without further ado... * "TextMate Official SVN Repository":http://wiki.macromates.com/Main/SubversionCheckout - What it says on the tin! * "GetBundle":http://projects.validcode.net/getbundle - A really handy tool for downloading and updating bundles. h2. Bundles * "Minimal Design's Textmate HTML Bundle":http://minimaldesign.net/downloads/tools/textmate-html-bundle - This is a really great bundle which saves a lot of time and typing when working with (X)HTML. Stuffed full of tab triggers. * "Minimal Design's Textmate CSS Bundle":http://minimaldesign.net/downloads/tools/textmate-css-bundle - The brother to the above HTML bundle from Minimal Design. Equally useful for working with CSS. * "JavaScript Tools (Lint Checker and Compressor)":http://bundleforge.com/ - A fantastic JavaScript Lint Checker and compressor that will save you so much debugging pain it's unreal. Taste and see! * "jQuery":http://www.learningjquery.com/2006/09/textmate-bundle-for-jquery - A nice little plugin for our favourite JavaScript library. Plenty of tab triggers, genius. h2. Plugins * "ProjectPlus":http://ciaranwal.sh/2008/08/29/projectplus-update-2 - An invaluable plugin for any TextMate developer. Includes SCM status badges (SVN and Git), the missing drawer and lots of other little tweaks for keeping your project organised. * "XMLMate":http://ditchnet.org/xmlmate/ - Checks XML and XHTML documents for Well-Formedness and Validity whilst editing them in TextMate. Very handy indeed. * "XSLMate":http://www.ditchnet.org/xslmate/ - Turns TextMate into a nice XSTL/XQuery editor/debugger. Well, that's your lot for now! Hopefully there's some gems in there that will enhance your jedi coding skills, or at the very least make you go "daaaaaaamn, that's cool!". Enjoy! Alistair and I are both major fanboys of <a href="http://macromates.com/">TextMate</a> and espouse its use wherever possible. We thought it would be nice to share some of the TextMate bundles and plugins that keep us coding with optimum efficiency, so without further ado… <ul> <li><a href="http://wiki.macromates.com/Main/SubversionCheckout">TextMate Official SVN Repository</a> – What it says on the tin!</li> <li><a href="http://projects.validcode.net/getbundle">GetBundle</a> – A really handy tool for downloading and updating bundles.</li> </ul> <h2>Bundles</h2> <ul> <li><a href="http://minimaldesign.net/downloads/tools/textmate-html-bundle">Minimal Design’s Textmate HTML Bundle</a> – This is a really great bundle which saves a lot of time and typing when working with (X)HTML. Stuffed full of tab triggers.</li> <li><a href="http://minimaldesign.net/downloads/tools/textmate-css-bundle">Minimal Design’s Textmate CSS Bundle</a> – The brother to the above HTML bundle from Minimal Design. Equally useful for working with CSS.</li> <li><a href="http://bundleforge.com/" title="Lint Checker and Compressor">JavaScript Tools</a> – A fantastic JavaScript Lint Checker and compressor that will save you so much debugging pain it’s unreal. Taste and see!</li> <li><a href="http://www.learningjquery.com/2006/09/textmate-bundle-for-jquery">jQuery</a> – A nice little plugin for our favourite JavaScript library. Plenty of tab triggers, genius.</li> </ul> <h2>Plugins</h2> <ul> <li><a href="http://ciaranwal.sh/2008/08/29/projectplus-update-2">ProjectPlus</a> – An invaluable plugin for any TextMate developer. Includes SCM status badges (SVN and Git), the missing drawer and lots of other little tweaks for keeping your project organised.</li> <li><a href="http://ditchnet.org/xmlmate/">XMLMate</a> – Checks XML and XHTML documents for Well-Formedness and Validity whilst editing them in TextMate. Very handy indeed.</li> <li><a href="http://www.ditchnet.org/xslmate/">XSLMate</a> – Turns TextMate into a nice XSTL/XQuery editor/debugger.</li> </ul> Well, that’s your lot for now! Hopefully there’s some gems in there that will enhance your jedi coding skills, or at the very least make you go “daaaaaaamn, that’s cool!”. Enjoy! true

2008-08-09T17:08:23+01:00

Alistair and I are both major fanboys of "TextMate":http://macromates.com/ and espouse its use wherever possible. We thought it would be nice to share some of the TextMate bundles and plugins that keep us coding with optimum efficiency, so without further ado...

Alistair and I are both major fanboys of <a href="http://macromates.com/">TextMate</a> and espouse its use wherever possible. We thought it would be nice to share some of the TextMate bundles and plugins that keep us coding with optimum efficiency, so without further ado…

13 true

2008-09-12T03:50:00+01:00

TextMate Plugins and Bundles Goodness

2008-09-15T08:15:11+01:00

2 I'm still recovering from the fantastic "dConstruct":http://2008.dconstruct.org/ conference, but already rared up for BathCamp this coming Saturday. I'll be doing a wee talk on how we built "PingMyMap":http://pingmymap.com/ in five days, and the trials and tribulations we encountered on the way. You will likely be able to locate me hovering around any beer/food related areas, so please come over and say hi. I'll even give you a 72 sticker for your troubles. See you there! I’m still recovering from the fantastic <a href="http://2008.dconstruct.org/">dConstruct</a> conference, but already rared up for BathCamp this coming Saturday. I’ll be doing a wee talk on how we built <a href="http://pingmymap.com/">PingMyMap</a> in five days, and the trials and tribulations we encountered on the way. You will likely be able to locate me hovering around any beer/food related areas, so please come over and say hi. I’ll even give you a 72 sticker for your troubles. See you there! false

2008-09-08T04:08:17+01:00

17 true

2008-09-08T04:05:00+01:00

Another week, another geek fest

2008-09-08T04:08:17+01:00

1 !http://farm4.static.flickr.com/3036/2832804602_dd15cc3b1f.jpg! We're back from the mighty dConstruct 08 in Brighton! There were some fantastic talks, my personal favourites being 'Designing for the Coral Reef' from Matt Biddulph and Matt Jones of "Dopplr":http://www.dopplr.com/ fame (really funny guys) and "Jeremy Keith's":http://adactio.com/ epic 'The System of the World' which was rather mind expanding indeed. We met some really nice people, had some fun with our stickering antics (if you found the 72 stickered banana I hope it was tasty) and we really enjoyed the after party even if it was a bit of a squeeze. Hopefully we'll see some of you again soon. If you want to follow us on twitter (who doesn't like following new people) you catch me at "twitter.com/alistairholt":http://twitter.com/alistairholt and Simon is at "twitter.com/allidid":http://twitter.com/allidid <img src="http://farm4.static.flickr.com/3036/2832804602_dd15cc3b1f.jpg" alt="" /> We’re back from the mighty dConstruct 08 in Brighton! There were some fantastic talks, my personal favourites being ‘Designing for the Coral Reef’ from Matt Biddulph and Matt Jones of <a href="http://www.dopplr.com/">Dopplr</a> fame (really funny guys) and <a href="http://adactio.com/">Jeremy Keith’s</a> epic ‘The System of the World’ which was rather mind expanding indeed. We met some really nice people, had some fun with our stickering antics (if you found the 72 stickered banana I hope it was tasty) and we really enjoyed the after party even if it was a bit of a squeeze. Hopefully we’ll see some of you again soon. If you want to follow us on twitter (who doesn’t like following new people) you catch me at <a href="http://twitter.com/alistairholt">twitter.com/alistairholt</a> and Simon is at <a href="http://twitter.com/allidid">twitter.com/allidid</a> true

2008-09-06T09:47:44+01:00

16 true

2008-09-08T02:30:00+01:00

Back from dConstruct08

2008-09-08T03:45:19+01:00

2 Recently I've decided that I really need to get some kind of solid database schema versioning system in place for my PHP apps. "Rails":http://rubyonrails.org/ has its lovely "migrations":http://wiki.rubyonrails.org/rails/pages/UnderstandingMigrations system, but sadly there's no equivalent functionality built into the PHP "Zend_Db":http://framework.zend.com/manual/en/zend.db.html component at the moment. This is probably due to the fact that "Zend Framework":http://framework.zend.com/ is a decoupled framework, instead of being a full stack like Rails, so migrations may well never see the light of day. In my quest for a good PHP solution, I came across "Doctrine":http://www.phpdoctrine.org/. It's an open source PHP ORM (Object Relational Mapper) and DBAL (Database Abstraction Layer), so they tell me, but the part that interests me the most is the migrations. These are scripted in a very similar way to Rails migrations, with up and down methods to facilitate the creation/removal of tables, indexes and fields, and postUp and postDown methods to insert/delete data. I'll need to learn Doctrine's API fully before I can integrate it seamlessly into my apps, but being impatient as I am, I haven't done that yet. Instead I've hacked together a quick and dirty solution that uses "Subversion":http://subversion.tigris.org/ and "Bash":http://www.gnu.org/software/bash/ scripting for the legwork. I thought I'd share it here as it may well be handy for other developers in need of a quick solution. So, we'll assume that the following code is a part of a Bash script that you have on your server to deploy new releases... <notextile><pre class="textmate-source"># Run the latest database migration if it exists db_migrations="./working-copy/trunk/migrations" db_migration_latest="$db_migrations/latest.sql" if [ -e "$db_migration_latest" ] then current_date=`date +%Y-%m-%d_%H-%M-%S` new_filename="migration_$current_date.sql" mysql -uYOURMYSQLUSER -hlocalhost -pYOURMYSQLPASSWORD YOURDATABASENAME < $db_migration_latest svn mv $db_migration_latest $db_migrations/$new_filename svn commit -m "DEPLOY - Ran latest database migration and saved for reference as $new_filename" fi</pre></notextile> A nice simple way of doing releases is to have a working copy of your Subversion repository checked out on the live server (<code>svn checkout</code>). When you want to deploy a new release, all you have to do is run <code>svn update</code> (you can of course use <code>svn export</code> if you wish to export a clean, full release of your app without the <code>.svn</code> meta-data). In the trunk of your repository you could set it up to have two directories: <code>application</code> and <code>migrations</code>. The <code>application</code> directory would contain your application (website or blog etc.). To add a migration to be applied when you next deploy to the live server, just create a file in <code>migrations</code> called <code>latest.sql</code>. As you change the database schema for new features to be deployed in the next release, you can log the SQL you've run to make development database changes in <code>latest.sql</code>. Commit the <code>latest.sql</code> file along with all your other code, then when you deploy the latest release to your live server with the Bash script, it will check to see if <code>latest.sql</code> exists, import it into MySQL if it does, rename <code>latest.sql</code> with the current date and time, and then commit it back to the Subversion repository for archival purposes. I like this solution as it piggybacks on a version control system (Subversion in this case) and uses raw SQL, removing the need to write custom migration scripts. It's also language agnostic - always a bonus. The example I've given is pretty basic, but it could easily be expanded to support reverting to previous migrations if you also log SQL to revert database changes. Go forth and migrate! Recently I’ve decided that I really need to get some kind of solid database schema versioning system in place for my PHP apps. <a href="http://rubyonrails.org/">Rails</a> has its lovely <a href="http://wiki.rubyonrails.org/rails/pages/UnderstandingMigrations">migrations</a> system, but sadly there’s no equivalent functionality built into the PHP <a href="http://framework.zend.com/manual/en/zend.db.html">Zend_Db</a> component at the moment. This is probably due to the fact that <a href="http://framework.zend.com/">Zend Framework</a> is a decoupled framework, instead of being a full stack like Rails, so migrations may well never see the light of day. In my quest for a good PHP solution, I came across <a href="http://www.phpdoctrine.org/">Doctrine</a>. It’s an open source PHP ORM (Object Relational Mapper) and DBAL (Database Abstraction Layer), so they tell me, but the part that interests me the most is the migrations. These are scripted in a very similar way to Rails migrations, with up and down methods to facilitate the creation/removal of tables, indexes and fields, and postUp and postDown methods to insert/delete data. I’ll need to learn Doctrine’s API fully before I can integrate it seamlessly into my apps, but being impatient as I am, I haven’t done that yet. Instead I’ve hacked together a quick and dirty solution that uses <a href="http://subversion.tigris.org/">Subversion</a> and <a href="http://www.gnu.org/software/bash/">Bash</a> scripting for the legwork. I thought I’d share it here as it may well be handy for other developers in need of a quick solution. So, we’ll assume that the following code is a part of a Bash script that you have on your server to deploy new releases… <pre class="textmate-source"># Run the latest database migration if it exists db_migrations="./working-copy/trunk/migrations" db_migration_latest="$db_migrations/latest.sql" if [ -e "$db_migration_latest" ] then current_date=`date +%Y-%m-%d_%H-%M-%S` new_filename="migration_$current_date.sql" mysql -uYOURMYSQLUSER -hlocalhost -pYOURMYSQLPASSWORD YOURDATABASENAME < $db_migration_latest svn mv $db_migration_latest $db_migrations/$new_filename svn commit -m "DEPLOY - Ran latest database migration and saved for reference as $new_filename" fi</pre>A nice simple way of doing releases is to have a working copy of your Subversion repository checked out on the live server (<code>svn checkout</code>). When you want to deploy a new release, all you have to do is run <code>svn update</code> (you can of course use <code>svn export</code> if you wish to export a clean, full release of your app without the <code>.svn</code> meta-data). In the trunk of your repository you could set it up to have two directories: <code>application</code> and <code>migrations</code>. The <code>application</code> directory would contain your application (website or blog etc.). To add a migration to be applied when you next deploy to the live server, just create a file in <code>migrations</code> called <code>latest.sql</code>. As you change the database schema for new features to be deployed in the next release, you can log the SQL you’ve run to make development database changes in <code>latest.sql</code>. Commit the <code>latest.sql</code> file along with all your other code, then when you deploy the latest release to your live server with the Bash script, it will check to see if <code>latest.sql</code> exists, import it into MySQL if it does, rename <code>latest.sql</code> with the current date and time, and then commit it back to the Subversion repository for archival purposes. I like this solution as it piggybacks on a version control system (Subversion in this case) and uses raw SQL, removing the need to write custom migration scripts. It’s also language agnostic – always a bonus. The example I’ve given is pretty basic, but it could easily be expanded to support reverting to previous migrations if you also log SQL to revert database changes. Go forth and migrate! true

2008-08-12T14:38:03+01:00

Recently I've decided that I really need to get some kind of solid database schema versioning system in place for my PHP apps. "Rails":http://rubyonrails.org/ has its lovely "migrations":http://wiki.rubyonrails.org/rails/pages/UnderstandingMigrations system, but sadly there's no equivalent functionality built into the PHP "Zend_Db":http://framework.zend.com/manual/en/zend.db.html component at the moment. This is probably due to the fact that "Zend Framework":http://framework.zend.com/ is a decoupled framework, instead of being a full stack like Rails, so migrations may well never see the light of day. I'm taking matters into my own hands...

Recently I’ve decided that I really need to get some kind of solid database schema versioning system in place for my PHP apps. <a href="http://rubyonrails.org/">Rails</a> has its lovely <a href="http://wiki.rubyonrails.org/rails/pages/UnderstandingMigrations">migrations</a> system, but sadly there’s no equivalent functionality built into the PHP <a href="http://framework.zend.com/manual/en/zend.db.html">Zend_Db</a> component at the moment. This is probably due to the fact that <a href="http://framework.zend.com/">Zend Framework</a> is a decoupled framework, instead of being a full stack like Rails, so migrations may well never see the light of day. I’m taking matters into my own hands…

15 true

2008-08-13T14:29:00+01:00

Super Simple Database Migrations with Subversion and Bash Scripting

2008-08-14T09:45:32+01:00

2 Sitting here relaxing on a grey Sunday afternoon, it's been to nice to reflect on how far things have come with Seventytwo in just a few weeks. Our articles have been featured by the "Rails Envy Podcast":http://railsenvy.com/podcast, we've launched our "first mini web app":http://seventytwo.co.uk/posts/pingmymap-launched and there's plenty more in the pipeline. You may have noticed that we rolled out a new discussion feature at the end of last week, courtesy of Alistair's Rails Skillz (TM). Check it out, and of course, don't forget to join in the discussion! PingMyMap's just received a bunch of updates. Most of them are under the hood, but one bit of eye candy we've added is screenshots of the sites that you've added under 'My Sites'. With our love of openness, we're also planning to add "OpenID":http://openid.net/ support soon. To whet your appetite, here are some of the other things we'll be serving up in the coming weeks... * Article: TextMate Plugins and Bundles Goodness * Article: How A One Day Web App Hack Became Five (Lessons Learnt Developing PingMyMap) * Article: Zend Framework Form Decorators (Lessons Learnt Developing PingMyMap) * Article: Zend Framework Caching Configuration Files (Lessons Learnt Developing PingMyMap) * Article: Best Practices Breed Passion * Project: Zend Framework Classes * Project: TargetOrder jQuery Plugin (a remake of "this script":http://dancinginquicksand.com/targetorder/) * Project: Another Web App! Sitting here relaxing on a grey Sunday afternoon, it’s been to nice to reflect on how far things have come with Seventytwo in just a few weeks. Our articles have been featured by the <a href="http://railsenvy.com/podcast">Rails Envy Podcast</a>, we’ve launched our <a href="http://seventytwo.co.uk/posts/pingmymap-launched">first mini web app</a> and there’s plenty more in the pipeline. You may have noticed that we rolled out a new discussion feature at the end of last week, courtesy of Alistair’s Rails Skillz™. Check it out, and of course, don’t forget to join in the discussion! PingMyMap’s just received a bunch of updates. Most of them are under the hood, but one bit of eye candy we’ve added is screenshots of the sites that you’ve added under ‘My Sites’. With our love of openness, we’re also planning to add <a href="http://openid.net/">OpenID</a> support soon. To whet your appetite, here are some of the other things we’ll be serving up in the coming weeks… <ul> <li>Article: TextMate Plugins and Bundles Goodness</li> <li>Article: How A One Day Web App Hack Became Five (Lessons Learnt Developing PingMyMap)</li> <li>Article: Zend Framework Form Decorators (Lessons Learnt Developing PingMyMap)</li> <li>Article: Zend Framework Caching Configuration Files (Lessons Learnt Developing PingMyMap)</li> <li>Article: Best Practices Breed Passion</li> <li>Project: Zend Framework Classes</li> <li>Project: TargetOrder jQuery Plugin (a remake of <a href="http://dancinginquicksand.com/targetorder/">this script</a>)</li> <li>Project: Another Web App!</li> </ul> true

2008-08-10T09:30:46+01:00

Sitting here relaxing on a grey Sunday afternoon, it's been to nice to reflect on how far things have come with Seventytwo in just a few weeks. Our articles have been featured by the "Rails Envy Podcast":http://railsenvy.com/podcast, we've launched our "first mini web app":http://seventytwo.co.uk/posts/pingmymap-launched and there's plenty more in the pipeline.

Sitting here relaxing on a grey Sunday afternoon, it’s been to nice to reflect on how far things have come with Seventytwo in just a few weeks. Our articles have been featured by the <a href="http://railsenvy.com/podcast">Rails Envy Podcast</a>, we’ve launched our <a href="http://seventytwo.co.uk/posts/pingmymap-launched">first mini web app</a> and there’s plenty more in the pipeline.

14 true

2008-08-10T08:56:00+01:00

Blood, Sweat and a Taste of Things to Come

2008-08-12T05:37:47+01:00

1 We've had to change our RSS feed URL again, it is now "http://feeds.feedburner.com/seventytwocouk":http://feeds.feedburner.com/seventytwocouk. We’ve had to change our RSS feed URL again, it is now <a href="http://feeds.feedburner.com/seventytwocouk">http://feeds.feedburner.com/seventytwocouk</a>. true

2008-08-06T09:56:21+01:00

12 true

2008-08-06T09:55:00+01:00

New Feed URL.. again

2008-08-06T09:56:33+01:00

2 !http://seventytwo.co.uk/assets/0000/0001/pingmymap.jpg! The One Day Web App Hack finished yesterday after 5 days (yes, you read that right!). Much sleep has been lost, many things cursed and possibly a few tears shed to bring you this pingtastic web app! You can check out the fruit of our efforts over at "PingMyMap.com":http://pingmymap.com. To get all the details on our API you just can tuck into the "Documentation":http://pingmymap.com/documentation/, or even better go ahead and "sign up":http://pingmymap.com/#register (it'll only take you 30 seconds, we promise). We'd love to know what you think, so drop us a message over at "Get Satisfaction":http://getsatisfaction.com/pingmymap. Next week we'll be telling the saga of the One "But Really Five" Day Web App Hack, sharing some handy design and development tips that we learnt in the process of building PingMyMap. For now we're going to get going with promoting the site and enjoy a few well deserved beers! Cheers! <img src="http://seventytwo.co.uk/assets/0000/0001/pingmymap.jpg" alt="" /> The One Day Web App Hack finished yesterday after 5 days (yes, you read that right!). Much sleep has been lost, many things cursed and possibly a few tears shed to bring you this pingtastic web app! You can check out the fruit of our efforts over at <a href="http://pingmymap.com">PingMyMap.com</a>. To get all the details on our API you just can tuck into the <a href="http://pingmymap.com/documentation/">Documentation</a>, or even better go ahead and <a href="http://pingmymap.com/#register">sign up</a> (it’ll only take you 30 seconds, we promise). We’d love to know what you think, so drop us a message over at <a href="http://getsatisfaction.com/pingmymap">Get Satisfaction</a>. Next week we’ll be telling the saga of the One “But Really Five” Day Web App Hack, sharing some handy design and development tips that we learnt in the process of building PingMyMap. For now we’re going to get going with promoting the site and enjoy a few well deserved beers! Cheers! true

2008-08-04T08:07:31+01:00

11 true

2008-08-05T14:51:00+01:00

PingMyMap Launched!

2008-08-06T14:18:02+01:00

1 We thought we should let you know where we are up to on our 'One Day Web App Hack' adventure. Simon and I have been working flat out for two days solid, apart from the odd break for food and beverages, and we're probably about 90% there at the time of writing. Unfortunately we've had a few issues getting the "Zend PHP framework":http://framework.zend.com/ to do exactly what we want in certain places. This is the first time Simon has really used the framework for a serious project and he's learning as we go, but pretty rapidly I might add. Simon tells me "its beautiful but I'm just stupid". Things are going pretty well on my side of the app, the designs are done, builds are almost complete and the UI is looking good. After that, all that remains to be done is some cross-browser testing and implementation of alpha PNG fixes for IE6. Overall we're really pleased with progress so far and the app is shaping up to be very nice indeed. Stay tuned for more updates soon! We thought we should let you know where we are up to on our ‘One Day Web App Hack’ adventure. Simon and I have been working flat out for two days solid, apart from the odd break for food and beverages, and we’re probably about 90% there at the time of writing. Unfortunately we’ve had a few issues getting the <a href="http://framework.zend.com/">Zend PHP framework</a> to do exactly what we want in certain places. This is the first time Simon has really used the framework for a serious project and he’s learning as we go, but pretty rapidly I might add. Simon tells me “its beautiful but I’m just stupid”. Things are going pretty well on my side of the app, the designs are done, builds are almost complete and the UI is looking good. After that, all that remains to be done is some cross-browser testing and implementation of alpha PNG fixes for IE6. Overall we’re really pleased with progress so far and the app is shaping up to be very nice indeed. Stay tuned for more updates soon! false

2008-07-31T10:38:53+01:00

10 true

2008-07-31T10:24:00+01:00

Update: One Day Web App Hack

2008-08-06T08:58:05+01:00

2 Our one day of web app hacking madness has begun! Alistair's in Chester, limbering up to pump out some sexy eye candy and I'm down here in Plymouth, poised to code the heart of the beast that we're naming PingMyMap.com! You can keep track of the mayhem via our "Twitter feed":http://twitter.com/onedaywebapp (as long as it doesn't go down...). Catch you on the flip side! <notextile> <div id="twitter_div"> <h2 class="twitter-title">Twitter Updates</h2> <ul id="twitter_update_list"><li></li></ul></div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/onedaywebapp.json?callback=twitterCallback2&count=10"></script> </notextile> Our one day of web app hacking madness has begun! Alistair’s in Chester, limbering up to pump out some sexy eye candy and I’m down here in Plymouth, poised to code the heart of the beast that we’re naming PingMyMap.com! You can keep track of the mayhem via our <a href="http://twitter.com/onedaywebapp">Twitter feed</a> (as long as it doesn’t go down…). Catch you on the flip side! <div id="twitter_div"> <h2 class="twitter-title">Twitter Updates</h2> <ul id="twitter_update_list"><li></li></ul></div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/onedaywebapp.json?callback=twitterCallback2&count=10"></script> false

2008-07-30T01:52:03+01:00

9 true

2008-07-30T01:45:00+01:00

One Day Web App Hack Begins!

2008-08-12T14:54:10+01:00

2 As a follow up to my article on getting your sites indexed with Sitemaps and search engine pings, we've decided to develop a simple web app that will handle all the pinging for you. The challenge is that we've only got one day to design and develop it in. On Wednesday (30th July), Alistair and myself will be designing, coding and building a pingtastic web app from scratch. Tune in on Wednesday evening (GMT) to share our triumph (or watch us fall flat on our faces)! As a follow up to my article on getting your sites indexed with Sitemaps and search engine pings, we’ve decided to develop a simple web app that will handle all the pinging for you. The challenge is that we’ve only got one day to design and develop it in. On Wednesday (30th July), Alistair and myself will be designing, coding and building a pingtastic web app from scratch. Tune in on Wednesday evening (GMT) to share our triumph (or watch us fall flat on our faces)! false

2008-07-28T07:41:50+01:00

8 true

2008-07-28T07:13:00+01:00

Announcement: One Day Web App Hack

2008-08-06T08:58:05+01:00

1 Both Simon and I will be attending the "dConstruct 08":http://2008.dconstruct.org/ web conference on the 5th September in Brighton, UK. Please say hello if you see us there, we're quite friendly. If you haven't booked your place it looks like there are some "tickets still available":http://clearleft.eventwax.com/dconstruct-2008/. Both Simon and I will be attending the <a href="http://2008.dconstruct.org/">dConstruct 08</a> web conference on the 5th September in Brighton, UK. Please say hello if you see us there, we’re quite friendly. If you haven’t booked your place it looks like there are some <a href="http://clearleft.eventwax.com/dconstruct-2008/">tickets still available</a>. true

2008-07-26T03:28:46+01:00

7 true

2008-07-26T03:23:00+01:00

Seventytwo at dConstruct 08

2008-08-06T13:38:17+01:00

1 With the site re-launch comes a new feed URL! The old URLs are getting redirected but if you're having any trouble then the new URL to subscribe to is "http://feeds.feedburner.com/seventytwo":http://feeds.feedburner.com/seventytwo With the site re-launch comes a new feed URL! The old URLs are getting redirected but if you’re having any trouble then the new URL to subscribe to is <a href="http://feeds.feedburner.com/seventytwo">http://feeds.feedburner.com/seventytwo</a> false

2008-07-21T10:19:24+01:00

5 true

2008-07-21T10:10:00+01:00

New Feed URL

2008-08-06T08:58:05+01:00

2 <div class="note"> h2. Update If you don't fancy getting your hands dirty with code or just love automation, then check out the mini web app we launched earlier this week, "PingMyMap":http://pingmymap.com/. It's a free service for web developers and site admins which allows you to easily notify multiple search engines of updates to your site's Sitemaps. Pingtastic! </div> For various reasons, some sites simply aren't well indexed. Despite having highly relevant content, you just can't get your site to show up in search engine results, or perhaps you have some pages that are unfortunately tucked away. h2. All Content is Not Created Equal I personally advocate progressively enhanced, standards-based and accessible content solutions (damn I sound so buzzword!), but it's pretty clear that there's a lot of content out there that just isn't so ready to expose itself to search engine crawlers. Flash movies are notorious for suffering from indexing issues due to their non-semantic structure (although credit is due to Google, who are "taking action":http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html). Complex JavaScript heavy sites often have many potential pitfalls when it comes to crawlers sussing out the structure and content, such as hash links (e.g. <a href="#">Save</a>) and content that is dynamically loaded via AJAX requests. Even if your content is on the most accessible, standards compliant site in the whole of the web, there's a fantastic tool that will give you indexing bliss, no matter how your site is structured. h2. Google et Al To The Rescue Google Sitemaps will be familiar to a lot of web developers as a mechanism to make Google aware of pages and content on your site. What many people still don't know, is that several other web giants support XML Sitemaps as a standard: Yahoo!, Microsoft, Ask.com, Moreover.com and IBM. These companies "got on board":http://www.google.com/press/pressrel/sitemapsorg.html in the couple of years after Google Sitemaps were launched (June 2005), and the "Sitemaps protocol":http://www.sitemaps.org/protocol.php was established. The "Sitemaps protocol":http://www.sitemaps.org/protocol.php is comprehensive and equips you with everything you need to know to create Sitemaps. h2. Ping - A World of Discovery Well, this is all well and good, and we're jolly happy that these collaborating search engines can find our stuff, but how are we going to make sure that they keep checking our sitemaps for updates? It's a chicken and egg situation, but one for which there is a tasteful solution. Google, Yahoo!, Microsoft and Ask.com all offer ping services that you can submit your sitemap URLs to. This means that you can notify these search engines of sitemap updates on your terms and in an automated fashion without having to manually submit your sitemap URL to each service one by one. Here's a PHP script to help you get your Sitemaps ping action on the go. I've opted to use the cURL functions (which are compiled into most PHP installations) over <code>file_get_contents()</code> with the fopen_url wrapper as it's a more secure solution. h3. PHP Ping Script <notextile> <pre class="textmate-source"><?php # Switch output on or off define('OUTPUT', true); # Sitemap URL define('SITEMAP_URL', "http://www.example.com/sitemap.xml"); # Search engine pings configuration $pings_config = Array( Array('name' => 'Google', 'url' => 'http://www.google.com/webmasters/sitemaps/ping?sitemap='), Array('name' => 'Yahoo!', 'url' => 'http://search.yahooapis.com/SiteExplorerService/V1/ping?sitemap='), Array('name' => 'Ask.com', 'url' => 'http://submissions.ask.com/ping?sitemap='), Array('name' => 'Microsoft Live Search', 'url' => 'http://webmaster.live.com/ping.aspx?siteMap='), Array('name' => 'Moreover.com', 'url' => 'http://api.moreover.com/ping?u='), ); # ................................................................. class Ping { public function __construct($pings_config, &$pinged){ # Loop through sites to ping $pinged = 0; foreach($pings_config AS $ping_config){ $result = false; # Construct ping URL $ping_url = $ping_config['url'].urlencode(SITEMAP_URL); # Initialize cURL session $ch = curl_init(); if($ch !== false){ # Set cURL options curl_setopt($ch, CURLOPT_URL, $ping_url); curl_setopt($ch, CURLOPT_HEADER, true); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); # Execute HTTP request to ping URL $response = curl_exec($ch); # Check for any cURL error if(!curl_errno($ch)){ if(preg_match('/\d\d\d/', $response, $status_code)){ # Check HTTP status code if($status_code[0]==200){ $result = true; # Increment the pinged_count if successfully pinged $pinged++; } } } # Close cURL session curl_close($ch); } # Output ping result if(OUTPUT){ echo "[", ($result ? "OK" : "ERROR") , "] {$ping_config['name']}\n"; } } } } # Count number of sites to ping $stat_pings_count = count($pings_config); # Ping the sites $pinged = 0; $ping = new Ping($pings_config, $pinged); # Output ping results summary if(OUTPUT){ echo "Pinged $pinged out of $stat_pings_count sites successfully\n"; } # exit(0); # Needed if script is run from the CLI</pre> </notextile> For you Ruby divas out there, here's an auto-magical script that will give you the same jazz. h3. Ruby Ping Script <notextile> <pre class="textmate-source"># Switch output on or off OUTPUT = true # Sitemap URL SITEMAP_URL = 'http://www.example.com/sitemap.xml' # Search engine pings configuration pings_config = [ {:name => 'Google', :url => 'http://www.google.com/webmasters/sitemaps/ping?sitemap='}, {:name => 'Yahoo!', :url => 'http://search.yahooapis.com/SiteExplorerService/V1/ping?sitemap='}, {:name => 'Ask.com', :url => 'http://submissions.ask.com/ping?sitemap='}, {:name => 'Microsoft Live Search', :url => 'http://webmaster.live.com/ping.aspx?siteMap='}, {:name => 'Moreover.com', :url => 'http://api.moreover.com/ping?u='} ]; # ................................................................. require 'cgi' require 'net/http' class Ping attr_accessor :pinged_count def initialize(pings_config) # Loop through sites to ping @pinged_count = 0; pings_config.each do |ping_config| # Construct ping URL ping_url = ping_config[:url] + CGI::escape(SITEMAP_URL); # Execute HTTP request to ping URL response = Net::HTTP.get_response(URI.parse(ping_url)) # Check HTTP status code result = true if response.code == '200' # Increment the pinged_count if successfully pinged @pinged_count += 1 if result # Output ping result puts "[#{result ? 'OK' : 'ERROR'}] #{ping_config[:name]}" if OUTPUT end end end # Count number of sites to ping stat_pings_count = pings_config.size; # Ping the sites ping = Ping.new(pings_config) # Output ping results summary puts "Pinged #{ping.pinged_count} out of #{stat_pings_count} sites successfully" if OUTPUT # exit 0 # Needed if script is run from the CLI</pre> </notextile> (Thanks to Alistair for beautifying my wretched Ruby script!) h3. Let's Automate, Baby For bonus points you can schedule your ping script with "CRON":http://en.wikipedia.org/wiki/Cron so that it pings the search engines with your Sitemap every week, for example. You can either include it within a scheduled script that generates your Sitemaps (which will be a typical approach for CMS-driven sites), or simply call it directly. If you're calling the ping script directly by itself then make sure you uncomment the last line so that it returns an exit code when it's executed. You'll also want to add a "shebang":http://tinyurl.com/2pscey line to the start of the script (alter your path as required): * PHP: <code>#!/usr/bin/php</code> * Ruby: <code>#!/usr/bin/ruby</code> h3. Minor Caveat The scripts both check the HTTP status code of the search engine ping URL that has been requested (not your Sitemap URL) is 200 (OK). The Microsoft Live Search ping endpoint appears to be the only one that returns a 404 (Not Found) status code if you submit a Sitemap URL that doesn't exist. Unfortunately none of the search engines return a parsable response (unless you really want to parse inconsistent HTML!). h2. No Blackhat Required! Combined with "mod_rewritten":http://www.apacheref.com/ref/mod_rewrite.html URLs (surely the greatest freebie in the SEO toolkit!), Sitemaps give us a perfect opportunity for shameless self-promotion. Instead of twiddling your thumbs and hoping that search engines will discover all of your site and its updates, you can now be confident that they'll have the inside dope. Now that's what I call standards satisfaction! If anyone would like to contribute a port of the ping script shown above to Python, please drop me an e-mail at simon [at] seventytwo [dot] co [dot] uk. <div class="note"> <h2>Update</h2> If you don’t fancy getting your hands dirty with code or just love automation, then check out the mini web app we launched earlier this week, <a href="http://pingmymap.com/">PingMyMap</a>. It’s a free service for web developers and site admins which allows you to easily notify multiple search engines of updates to your site’s Sitemaps. Pingtastic! </div> For various reasons, some sites simply aren’t well indexed. Despite having highly relevant content, you just can’t get your site to show up in search engine results, or perhaps you have some pages that are unfortunately tucked away. <h2>All Content is Not Created Equal</h2> I personally advocate progressively enhanced, standards-based and accessible content solutions (damn I sound so buzzword!), but it’s pretty clear that there’s a lot of content out there that just isn’t so ready to expose itself to search engine crawlers. Flash movies are notorious for suffering from indexing issues due to their non-semantic structure (although credit is due to Google, who are <a href="http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html">taking action</a>). Complex JavaScript heavy sites often have many potential pitfalls when it comes to crawlers sussing out the structure and content, such as hash links (e.g. <a href="#">Save</a>) and content that is dynamically loaded via AJAX requests. Even if your content is on the most accessible, standards compliant site in the whole of the web, there’s a fantastic tool that will give you indexing bliss, no matter how your site is structured. <h2>Google et Al To The Rescue</h2> Google Sitemaps will be familiar to a lot of web developers as a mechanism to make Google aware of pages and content on your site. What many people still don’t know, is that several other web giants support XML Sitemaps as a standard: Yahoo!, Microsoft, Ask.com, Moreover.com and IBM. These companies <a href="http://www.google.com/press/pressrel/sitemapsorg.html">got on board</a> in the couple of years after Google Sitemaps were launched (June 2005), and the <a href="http://www.sitemaps.org/protocol.php">Sitemaps protocol</a> was established. The <a href="http://www.sitemaps.org/protocol.php">Sitemaps protocol</a> is comprehensive and equips you with everything you need to know to create Sitemaps. <h2>Ping – A World of Discovery</h2> Well, this is all well and good, and we’re jolly happy that these collaborating search engines can find our stuff, but how are we going to make sure that they keep checking our sitemaps for updates? It’s a chicken and egg situation, but one for which there is a tasteful solution. Google, Yahoo!, Microsoft and Ask.com all offer ping services that you can submit your sitemap URLs to. This means that you can notify these search engines of sitemap updates on your terms and in an automated fashion without having to manually submit your sitemap URL to each service one by one. Here’s a PHP script to help you get your Sitemaps ping action on the go. I’ve opted to use the cURL functions (which are compiled into most PHP installations) over <code>file_get_contents()</code> with the fopen_url wrapper as it’s a more secure solution. <h3>PHP Ping Script</h3> <pre class="textmate-source"><?php # Switch output on or off define('OUTPUT', true); # Sitemap URL define('SITEMAP_URL', "http://www.example.com/sitemap.xml"); # Search engine pings configuration $pings_config = Array( Array('name' => 'Google', 'url' => 'http://www.google.com/webmasters/sitemaps/ping?sitemap='), Array('name' => 'Yahoo!', 'url' => 'http://search.yahooapis.com/SiteExplorerService/V1/ping?sitemap='), Array('name' => 'Ask.com', 'url' => 'http://submissions.ask.com/ping?sitemap='), Array('name' => 'Microsoft Live Search', 'url' => 'http://webmaster.live.com/ping.aspx?siteMap='), Array('name' => 'Moreover.com', 'url' => 'http://api.moreover.com/ping?u='), ); # ................................................................. class Ping { public function __construct($pings_config, &$pinged){ # Loop through sites to ping $pinged = 0; foreach($pings_config AS $ping_config){ $result = false; # Construct ping URL $ping_url = $ping_config['url'].urlencode(SITEMAP_URL); # Initialize cURL session $ch = curl_init(); if($ch !== false){ # Set cURL options curl_setopt($ch, CURLOPT_URL, $ping_url); curl_setopt($ch, CURLOPT_HEADER, true); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); # Execute HTTP request to ping URL $response = curl_exec($ch); # Check for any cURL error if(!curl_errno($ch)){ if(preg_match('/\d\d\d/', $response, $status_code)){ # Check HTTP status code if($status_code[0]==200){ $result = true; # Increment the pinged_count if successfully pinged $pinged++; } } } # Close cURL session curl_close($ch); } # Output ping result if(OUTPUT){ echo "[", ($result ? "OK" : "ERROR") , "] {$ping_config['name']}\n"; } } } } # Count number of sites to ping $stat_pings_count = count($pings_config); # Ping the sites $pinged = 0; $ping = new Ping($pings_config, $pinged); # Output ping results summary if(OUTPUT){ echo "Pinged $pinged out of $stat_pings_count sites successfully\n"; } # exit(0); # Needed if script is run from the CLI</pre>For you Ruby divas out there, here’s an auto-magical script that will give you the same jazz. <h3>Ruby Ping Script</h3> <pre class="textmate-source"># Switch output on or off OUTPUT = true # Sitemap URL SITEMAP_URL = 'http://www.example.com/sitemap.xml' # Search engine pings configuration pings_config = [ {:name => 'Google', :url => 'http://www.google.com/webmasters/sitemaps/ping?sitemap='}, {:name => 'Yahoo!', :url => 'http://search.yahooapis.com/SiteExplorerService/V1/ping?sitemap='}, {:name => 'Ask.com', :url => 'http://submissions.ask.com/ping?sitemap='}, {:name => 'Microsoft Live Search', :url => 'http://webmaster.live.com/ping.aspx?siteMap='}, {:name => 'Moreover.com', :url => 'http://api.moreover.com/ping?u='} ]; # ................................................................. require 'cgi' require 'net/http' class Ping attr_accessor :pinged_count def initialize(pings_config) # Loop through sites to ping @pinged_count = 0; pings_config.each do |ping_config| # Construct ping URL ping_url = ping_config[:url] + CGI::escape(SITEMAP_URL); # Execute HTTP request to ping URL response = Net::HTTP.get_response(URI.parse(ping_url)) # Check HTTP status code result = true if response.code == '200' # Increment the pinged_count if successfully pinged @pinged_count += 1 if result # Output ping result puts "[#{result ? 'OK' : 'ERROR'}] #{ping_config[:name]}" if OUTPUT end end end # Count number of sites to ping stat_pings_count = pings_config.size; # Ping the sites ping = Ping.new(pings_config) # Output ping results summary puts "Pinged #{ping.pinged_count} out of #{stat_pings_count} sites successfully" if OUTPUT # exit 0 # Needed if script is run from the CLI</pre>(Thanks to Alistair for beautifying my wretched Ruby script!) <h3>Let’s Automate, Baby</h3> For bonus points you can schedule your ping script with <a href="http://en.wikipedia.org/wiki/Cron">CRON</a> so that it pings the search engines with your Sitemap every week, for example. You can either include it within a scheduled script that generates your Sitemaps (which will be a typical approach for CMS-driven sites), or simply call it directly. If you’re calling the ping script directly by itself then make sure you uncomment the last line so that it returns an exit code when it’s executed. You’ll also want to add a <a href="http://tinyurl.com/2pscey">shebang</a> line to the start of the script (alter your path as required): <ul> <li>PHP: <code>#!/usr/bin/php</code></li> <li>Ruby: <code>#!/usr/bin/ruby</code></li> </ul> <h3>Minor Caveat</h3> The scripts both check the HTTP status code of the search engine ping URL that has been requested (not your Sitemap URL) is 200 (OK). The Microsoft Live Search ping endpoint appears to be the only one that returns a 404 (Not Found) status code if you submit a Sitemap URL that doesn’t exist. Unfortunately none of the search engines return a parsable response (unless you really want to parse inconsistent HTML!). <h2>No Blackhat Required!</h2> Combined with <a href="http://www.apacheref.com/ref/mod_rewrite.html">mod_rewritten</a> URLs (surely the greatest freebie in the SEO toolkit!), Sitemaps give us a perfect opportunity for shameless self-promotion. Instead of twiddling your thumbs and hoping that search engines will discover all of your site and its updates, you can now be confident that they’ll have the inside dope. Now that’s what I call standards satisfaction! If anyone would like to contribute a port of the ping script shown above to Python, please drop me an e-mail at simon [at] seventytwo [dot] co [dot] uk. true

2008-07-13T13:23:10+01:00

Since the dawn of web search, getting your site well ranked in search engines has been the holy grail of web spinners everywhere. In this world of proprietary algorithms and SEO speculation, there is (gasp) a simple standard between search engines that has the power to unite us all and bring world peace! Well, at the very least it can give your site a fighting chance at getting indexed. Behold, Sitemaps, the standard.

Since the dawn of web search, getting your site well ranked in search engines has been the holy grail of web spinners everywhere. In this world of proprietary algorithms and SEO speculation, there is (gasp) a simple standard between search engines that has the power to unite us all and bring world peace! Well, at the very least it can give your site a fighting chance at getting indexed. Behold, Sitemaps, the standard.

* "Official Sitemaps Website":http://www.sitemaps.org/ - Sponsored by Google, Yahoo! and Microsoft * "XML Sitemaps Generator":http://www.xml-sitemaps.com/ - Bear in mind that this will only include pages/content that are accessible to their crawler * "Mephisto (Google) Sitemap":http://www.appelsiini.net/projects/mephisto_sitemap - Plugin for Mephisto that generates Sitemaps * "Wikipedia on Sitemaps":http://en.wikipedia.org/wiki/Google_Sitemaps

<ul> <li><a href="http://www.sitemaps.org/">Official Sitemaps Website</a> – Sponsored by Google, Yahoo! and Microsoft</li> <li><a href="http://www.xml-sitemaps.com/">XML Sitemaps Generator</a> – Bear in mind that this will only include pages/content that are accessible to their crawler</li> <li><a href="http://www.appelsiini.net/projects/mephisto_sitemap">Mephisto (Google) Sitemap</a> – Plugin for Mephisto that generates Sitemaps</li> <li><a href="http://en.wikipedia.org/wiki/Google_Sitemaps">Wikipedia on Sitemaps</a></li> </ul>

2 true

2008-07-20T16:00:00+01:00

How to Reach Enlightenment and Get Your Site Indexed by Search Engines

2008-08-10T09:26:42+01:00

1 Let's face it. HTML file uploads aren't that great. Luckily we have tools like "SWFUpload":http://swfupload.org/ out there which allow us to make file uploading a lot better. SWFUpload will allow us to do all sorts of fancy things including upload queues, multiple file uploads and progress info/bars. Utilising SWFUpload with Rails can be tricky. For this tutorial we're going to be using SWFUpload, the popular "attachment_fu plugin":http://github.com/technoweenie/attachment_fu/tree/master, some attachment_fu hacks and the "mimetype_fu plugin":http://github.com/mattetti/mimetype-fu/tree/master. We will assume that you have got as far as installing attachment_fu, setting up your models and controllers and integrating SWFUpload into the process. h2. So what are the problems? # Flash 8 doesn't send meta data along with uploaded files which will stop Rails loading the users session, and thus, processing the uploads # Rails 2 comes with "Cross-Site Request Forging":http://en.wikipedia.org/wiki/Cross-site_request_forgery protection on any non-GET HTML/Ajax requests. SWFUpload uses POST requests to upload files # Flash 8 sends incorrect MIME type data with uploaded files which will stop attachment_fu from recognising image uploads h2. 1. Making SWFUpload work with Rails sessions We're going to need to hack the CGI::Session class in Rails so that we can pass the session ID in the query string of the Flash request and have Rails load the session correctly. Below is the code required to make this alteration to CGI::Session courtesy of "Duane Johnson":http://blog.inquirylabs.com/2006/12/09/getting-the-_session_id-from-swfupload/. <notextile> <pre class="textmate-source"># The following code is a work-around for the Flash 8 bug that prevents our multiple file uploader # from sending the _session_id. Here, we hack the Session#initialize method and force the session_id # to load from the query string via the request uri. (Tested on Lighttpd, Mongrel, Apache) class CGI::Session alias original_initialize initialize def initialize(request, option = {}) session_key = option['session_key'] || '_session_id' query_string = if (qs = request.env_table["QUERY_STRING"]) and qs != "" qs elsif (ru = request.env_table["REQUEST_URI"][0..-1]).include?("?") ru[(ru.index("?") + 1)..-1] end if query_string and query_string.include?(session_key) option['session_id'] = query_string.scan(/#{session_key}=(.*?)(&.*?)*$/).flatten.first end original_initialize(request, option) end end</pre> </notextile> h3. Rails 2 You should put this code into a file, swfupload_session_hack.rb for example, and then put this file into the config/initializers directory of your application. Rails 2 will automatically load any files in there so this is the perfect place for it. h3. Older version of Rails If you're not yet on Rails 2 then simply append the code to the bottom of your environment.rb file. Basically this code will look at the request URL and if it finds the session ID being passed it will load the session from this ID. The key that the code will look for in the query string will depend on how you have you app configured. It will first look for your <code>session_key</code> value which would normally be defined in environment.rb. For example, you can see that the session_key for the app below is <code>_mylovelyapp_session</code>. If it doesn't find <code>session_key</code> defined in environment.rb it will instead default to looking for the <code>_session_id</code> key in the request URL. The following is an example of what you might have in your environment.rb. In this case, we would need to pass the following key and value pair in the SWFUpload upload URL: <code>_mylovelyapp_session=thesessionid</code>. <notextile> <pre class="textmate-source"> config.action_controller.session = { :session_key => '_mylovelyapp_session', :secret => 'xxx' }</pre> </notextile> Passing the session ID in the query string is simple. All we need to do is append our key/value pair to the <code>upload_url</code> we have defined for our SWFUpload implementation. <code><%= session.session_id %></code> will get us the session ID. Nice. <notextile> <pre class="textmate-source">var swfu; $(function(){ swfu = new SWFUpload({ upload_url : '<%= your_upload_path %>?_mylovelyapp_session=<%= session.session_id %>', ... }); });</pre> </notextile> h2. 2. Working with Cross-site Request Forging protection in Rails 2 If you're using anything below Rails 2 you can skip this part as "CSRF":http://en.wikipedia.org/wiki/Cross-site_request_forgery protection was introduced in Rails 2.0. Rails 2 auto-magically passes an authenticity token in any non-GET request by appending a hidden field to your forms. Because we're not using a form for SWFUpload wer're going to need to append the authenticy_token to the <code>upload_url</code> ourselves. Fortunately this is very simple and only requires another key/value addition to the URL: <notextile> <pre class="textmate-source">$(function(){ swfu = new SWFUpload({ upload_url : '<%= your_upload_path %>?_mylovelyapp_session=<%= session.session_id %>&authenticity_token=<%= form_authenticity_token %>', ... }); });</pre> </notextile> It's easy to get the value for the authenticity token manually by using <code><%= form_authenticity_token %></code>. *Rails will look for the <code>authenticity_token</code> key in the request URL so you must use this as the key.* h2. 3. Hacking attachment_fu to allow content type detection of SWFUpload-ed files The final problem we're going to run into when using SWFUpload with Rails and attachment_fu is that SWFUpload submits files to Rails with their content type set to <code>application/octet-stream</code> which will prevent attachment_fu from recognising image uploads. We're going to use the "mimetype_fu plugin":http://github.com/mattetti/mimetype-fu/tree/master to detect the mime type from our file uploads. This plugin will use the Operating System that the Rails app is running under to open the file and check on the header for the mime type. Pretty nifty. Unfortunately, for Windows users the plugin will only look at the file extension to try to determine the content type of the file. We'll run one of the following commands at the root of our Rails app to get it installed: * Git: <code>script/plugin install git://github.com/mattetti/mimetype-fu.git</code> * Subversion: <code>script/plugin install http://mimetype-fu.googlecode.com/svn/trunk/</code> *Note:* There are several other ways to install plugins. E.g. "Piston":http://piston.rubyforge.org/ for SVN ("and unofficially, git":http://technicalpickles.com/posts/piston-and-git-for-the-win), Git Submodules and SVN Externals to name a few. Add the code below into the config/initializers directory of your application. I called my file attachment_fu_hacks.rb. <notextile> <pre class="textmate-source">Technoweenie::AttachmentFu::InstanceMethods.module_eval do # Overriding this method to allow content_type to be detected when # swfupload submits images with content_type set to 'application/octet-stream' def uploaded_data=(file_data) return nil if file_data.nil? || file_data.size == 0 self.content_type = detect_mimetype(file_data) self.filename = file_data.original_filename if respond_to?(:filename) if file_data.is_a?(StringIO) file_data.rewind self.temp_data = file_data.read else self.temp_path = file_data.path end end def detect_mimetype(file_data) if file_data.content_type.strip == "application/octet-stream" return File.mime_type?(file_data.original_filename) else return file_data.content_type end end end</pre> </notextile> Attachment_fu will now check all file uploads it receives to see if their content type is 'application/octet-stream' and if so, will use mimetype_fu to determine the content type of the file. h2. Finished And that's all there is to it. Happy SWFUpload-ing! Let’s face it. HTML file uploads aren’t that great. Luckily we have tools like <a href="http://swfupload.org/">SWFUpload</a> out there which allow us to make file uploading a lot better. SWFUpload will allow us to do all sorts of fancy things including upload queues, multiple file uploads and progress info/bars. Utilising SWFUpload with Rails can be tricky. For this tutorial we’re going to be using SWFUpload, the popular <a href="http://github.com/technoweenie/attachment_fu/tree/master">attachment_fu plugin</a>, some attachment_fu hacks and the <a href="http://github.com/mattetti/mimetype-fu/tree/master">mimetype_fu plugin</a>. We will assume that you have got as far as installing attachment_fu, setting up your models and controllers and integrating SWFUpload into the process. <h2>So what are the problems?</h2> <ol> <li>Flash 8 doesn’t send meta data along with uploaded files which will stop Rails loading the users session, and thus, processing the uploads</li> <li>Rails 2 comes with <a href="http://en.wikipedia.org/wiki/Cross-site_request_forgery">Cross-Site Request Forging</a> protection on any non-GET HTML/Ajax requests. SWFUpload uses POST requests to upload files</li> <li>Flash 8 sends incorrect MIME type data with uploaded files which will stop attachment_fu from recognising image uploads</li> </ol> <h2>1. Making SWFUpload work with Rails sessions</h2> We’re going to need to hack the CGI::Session class in Rails so that we can pass the session ID in the query string of the Flash request and have Rails load the session correctly. Below is the code required to make this alteration to CGI::Session courtesy of <a href="http://blog.inquirylabs.com/2006/12/09/getting-the-_session_id-from-swfupload/">Duane Johnson</a>. <pre class="textmate-source"># The following code is a work-around for the Flash 8 bug that prevents our multiple file uploader # from sending the _session_id. Here, we hack the Session#initialize method and force the session_id # to load from the query string via the request uri. (Tested on Lighttpd, Mongrel, Apache) class CGI::Session alias original_initialize initialize def initialize(request, option = {}) session_key = option['session_key'] || '_session_id' query_string = if (qs = request.env_table["QUERY_STRING"]) and qs != "" qs elsif (ru = request.env_table["REQUEST_URI"][0..-1]).include?("?") ru[(ru.index("?") + 1)..-1] end if query_string and query_string.include?(session_key) option['session_id'] = query_string.scan(/#{session_key}=(.*?)(&.*?)*$/).flatten.first end original_initialize(request, option) end end</pre><h3>Rails 2</h3> You should put this code into a file, swfupload_session_hack.rb for example, and then put this file into the config/initializers directory of your application. Rails 2 will automatically load any files in there so this is the perfect place for it. <h3>Older version of Rails</h3> If you’re not yet on Rails 2 then simply append the code to the bottom of your environment.rb file. Basically this code will look at the request URL and if it finds the session ID being passed it will load the session from this ID. The key that the code will look for in the query string will depend on how you have you app configured. It will first look for your <code>session_key</code> value which would normally be defined in environment.rb. For example, you can see that the session_key for the app below is <code>_mylovelyapp_session</code>. If it doesn’t find <code>session_key</code> defined in environment.rb it will instead default to looking for the <code>_session_id</code> key in the request URL. The following is an example of what you might have in your environment.rb. In this case, we would need to pass the following key and value pair in the SWFUpload upload URL: <code>_mylovelyapp_session=thesessionid</code>. <pre class="textmate-source"> config.action_controller.session = { :session_key => '_mylovelyapp_session', :secret => 'xxx' }</pre>Passing the session ID in the query string is simple. All we need to do is append our key/value pair to the <code>upload_url</code> we have defined for our SWFUpload implementation. <code><%= session.session_id %></code> will get us the session ID. Nice. <pre class="textmate-source">var swfu; $(function(){ swfu = new SWFUpload({ upload_url : '<%= your_upload_path %>?_mylovelyapp_session=<%= session.session_id %>', ... }); });</pre><h2>2. Working with Cross-site Request Forging protection in Rails 2</h2> If you’re using anything below Rails 2 you can skip this part as <a href="http://en.wikipedia.org/wiki/Cross-site_request_forgery">CSRF</a> protection was introduced in Rails 2.0. Rails 2 auto-magically passes an authenticity token in any non-GET request by appending a hidden field to your forms. Because we’re not using a form for SWFUpload wer’re going to need to append the authenticy_token to the <code>upload_url</code> ourselves. Fortunately this is very simple and only requires another key/value addition to the URL: <pre class="textmate-source">$(function(){ swfu = new SWFUpload({ upload_url : '<%= your_upload_path %>?_mylovelyapp_session=<%= session.session_id %>&authenticity_token=<%= form_authenticity_token %>', ... }); });</pre>It’s easy to get the value for the authenticity token manually by using <code><%= form_authenticity_token %></code>. Rails will look for the <code>authenticity_token</code> key in the request URL so you must use this as the key. <h2>3. Hacking attachment_fu to allow content type detection of SWFUpload-ed files</h2> The final problem we’re going to run into when using SWFUpload with Rails and attachment_fu is that SWFUpload submits files to Rails with their content type set to <code>application/octet-stream</code> which will prevent attachment_fu from recognising image uploads. We’re going to use the <a href="http://github.com/mattetti/mimetype-fu/tree/master">mimetype_fu plugin</a> to detect the mime type from our file uploads. This plugin will use the Operating System that the Rails app is running under to open the file and check on the header for the mime type. Pretty nifty. Unfortunately, for Windows users the plugin will only look at the file extension to try to determine the content type of the file. We’ll run one of the following commands at the root of our Rails app to get it installed: <ul> <li>Git: <code>script/plugin install git://github.com/mattetti/mimetype-fu.git</code></li> <li>Subversion: <code>script/plugin install http://mimetype-fu.googlecode.com/svn/trunk/</code></li> </ul> Note: There are several other ways to install plugins. E.g. <a href="http://piston.rubyforge.org/">Piston</a> for SVN (<a href="http://technicalpickles.com/posts/piston-and-git-for-the-win">and unofficially, git</a>), Git Submodules and SVN Externals to name a few. Add the code below into the config/initializers directory of your application. I called my file attachment_fu_hacks.rb. <pre class="textmate-source">Technoweenie::AttachmentFu::InstanceMethods.module_eval do # Overriding this method to allow content_type to be detected when # swfupload submits images with content_type set to 'application/octet-stream' def uploaded_data=(file_data) return nil if file_data.nil? || file_data.size == 0 self.content_type = detect_mimetype(file_data) self.filename = file_data.original_filename if respond_to?(:filename) if file_data.is_a?(StringIO) file_data.rewind self.temp_data = file_data.read else self.temp_path = file_data.path end end def detect_mimetype(file_data) if file_data.content_type.strip == "application/octet-stream" return File.mime_type?(file_data.original_filename) else return file_data.content_type end end end</pre>Attachment_fu will now check all file uploads it receives to see if their content type is ‘application/octet-stream’ and if so, will use mimetype_fu to determine the content type of the file. <h2>Finished</h2> And that’s all there is to it. Happy SWFUpload-ing! true

2008-07-08T14:36:57+01:00

Unfortunately Rails and SWFUpload don't work together without a little bit of tweaking to our Rails applications. We'll show you how to make it work.

Unfortunately Rails and SWFUpload don’t work together without a little bit of tweaking to our Rails applications. We’ll show you how to make it work.

1 true

2008-07-20T16:00:00+01:00

Making SWFUpload and Rails work together

2008-08-06T13:38:10+01:00