All Marked Up

A tasty brew of web standards and internet culture.

Codebase. I’ve been playing with this app over the last couple of days and it seems (so far) to be exactly what I have been looking for. Currently I use Beanstalk plus lighthouse/pbwiki for my SVN hosting/bugtracking/documentation needs but having everything under one roof is a pretty major bonus. Interface is nice and snappy too, with a few niggly details but generally pretty good.

jQuery URL Toolbox *beta*

I have been working on a jQuery plugin (well actually a self-contained set of plugins) that extends the capabilites of my jQuery URL Parser. I’m calling it a ‘URL Toolbox’ as it does everything the URL parser does (i.e. retrieving various bits of any URL string) but also allows you to set parts of URL strings, link hrefs, form actions etc, amongst other things.

UPDATE (22.01.10) – I have now removed the $.observeUrl() function as I felt it was not really in line with the core idea behind the plugin. For those needing similar functionality I would highly recommend Ben Alman’s hashchange plugin. New version also includes a number of bugfixes (thanks to Pavol, Eugene et al.). Proper demos and docs coming soon I hope! :-)

It also includes a function, $.observeUrl(), that once called ‘listens’ for changes to the document URL hash fragment, and triggers a custom jquery event, ‘hash:change’ whenever the hash portion of the URL changes. The plugin includes a somewhat modified version of the jQuery History Plugin to enable full back/forwards/history support for hash changes, and will hopefully make it pretty trivial to include full bookmarking and history support in AJAX based apps/sites .

The plugin is still very beta, but I thought I would link to the current version of it here anyway for those that are feeling brave and want to have a play around.

Download the jQuery URL Toolbox beta

Some very quick pointers on how to use it are included below – once I have tested it further I will move it over to the projects area of my site and get some proper documentation together.

General usage:

  1. Use  var myUrl = $(element).url() to grab an element’s  URL and return a special ‘URL’ object. (a, form, img, base, link and iframe elements are supported, and using ‘document’ (no quotes) as the selector will return a URL object based on the current page’s URL)
  2. Then use myUrl.attr('theAttr') to return any part of the URL, where ‘theAttr’ can be any one of: source, protocol, host, port, query, file, hash or path.
  3. If you include a second argument to the attr() method – i.e. something like myUrl.attr('path', '/myNewPath/'), then it will set the value of that part of the URL to the value of the second argument. Whatever the URL of element the initial url() function was called on will be updated accordingly. If the document URL was used (via $(document).url()) then the location will be changed accordingly, normally resulting in a page refresh.
  4. Doing a .toString() on the URL object at any time will return the current string representation of the URL.
  5. The .segment(i) method (where ‘i’ is the segment number, starting from zero) will return the corresponding segment from the URL. Including a second parameter will set that segment.
  6. The .param('key') method (where ‘key’ is the query string key) will return the corresponding value of the suppied key in the URL query (GET) string, if there is one. Including a second parameter will set that parameter.
  7. If you have a hash fragment that consists of segments, like ‘#/part1/part2/’ then you can get/set those segments using the hashSegment() method, which works exactly like the segment() one.
  8. Similarly if you have a hash fragment that looks like a query string, the parts can be get/set using the hashParam() method.

Watching for hash changes in the document’s URL:

  1. Calling the $.observeUrl() function in your code will result in a custom ‘hash:changed’ event being triggered on the document any time the URL hash fragment is updated.
  2. It will also ensure that any changes to the URL hash fragment are correctly recorded in the browser’s history (‘fixed’ for all browsers) so that the back/forwards buttons can be used correctly.
  3. You can then set up you app to respond to hash changes by listening out for the hash:change event on the document, eg. $(document).bind('hash:change', function(e, hash){ doSomething() }

A lot to take in but I will try to get together some more comprehensive and less confusing documentation in the near future!

Any bugs, suggestions or otherwise please email me at mark[at]allmarkedup.com for now.

20 Comments »

The Duct Tape Programmer. Enjoyable article from Joel Spolsky which touches on what I feel is one of my main weaknesses – the sometimes chronic inability to actually ship software (in my case this normally applies to my own personal projects). Worth a read.

Preferences Considered Harmful. (Another) great article by Lukas Mathis on avoiding unnecessary preferences in apps (he talks specifically about desktop applications, but his points are all equally applicable to web apps, of course).

This is something I always strive for – as a user, preferences are really not my thing, and I try and reflect that in the way I build web apps. Don’t dazzle your users with a huge array of options!

Google Chrome Frame. Google’s solution to the IE ‘problem’ – an open source plugin that essentially patches IE to allow it to use Chrome’s JavaScript engine and rendering engine. Uses a custom X-UA-Compatible meta tag in the head to trigger the installation if it isn’t already present.

Will be really interesting to see how this pans out, and specifically whether it gets taken up within restrictive corporate environments where IE6 use is still very common.

Tweedledee and Tweedledum. Nice Alice-in-Wonderland-inspired teacup/teapot desktop/iphone wallpaper from those nice people at the Iconfactory.

SpriteMe. Fiendishly clever little bookmarklet by Steve Souders (of ‘Even Faster Websites’ fame) that will automagicaly assess all the background images in a page, calculate which could be sprited together and then generate those sprites and the corresponding CSS for you. Quite astounding. (Via Matthew Buchanan)

Opera Mini 5 Beta. Looks like they’ve done a really good job with this one – it’s just a shame I can’t play around with it on my iPhone. Thanks, Apple.

The devil in the details. A nice round up from Jeremy Keith on yesterday’s (perhaps slightly controversial) HTML5 updates, including the inspired-by-him reuse of <dt> and <dd> in the <details> and <figure> elements.

Now <dialog> leaves #html5, how to mark up speakers? <cite> as in html4? No! with the <b> tag, obviously!

Bruce Lawson, referring to this part of the HTML5 spec where it describes an ‘encouraged’ way for people to mark up conversations in the wake of <dialog> being dropped from the spec.

(It’s probably a good thing that <dialog> has gone – but the <b> tag? Really? It seems to me that there are a few die-hard <b> tag fans in the WHATWG/W3C that are desperately trying to find some real-world use to justify it’s existence).

« Older Entries Newer Entries »