{"id":61,"date":"2010-07-24T18:12:00","date_gmt":"2010-07-25T01:12:00","guid":{"rendered":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/harvest-gsoc-week-9\/"},"modified":"2024-08-14T09:20:05","modified_gmt":"2024-08-14T16:20:05","slug":"harvest-gsoc-week-9","status":"publish","type":"post","link":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/","title":{"rendered":"Harvest + GSoC week 9!"},"content":{"rendered":"\n

The past week, unfortunately, hasn’t been very productive for me. Still, I have a few things to show!<\/p>\n\n\n\n

I did a bunch of cleanup (again) and I toyed with animations for a while. There is now an animation (and a loading indicator) when new results are retrieved for the filters. One philosophy I have found myself following is that this UI that never, ever blocks on a task. So, no matter what is happening, you should always be able to click the same buttons you could before.
(On a related note, I’ve been very excited about Blender<\/a> lately).<\/p>\n\n\n\n\n\n\n\n

Turns out non-modal design has an interesting impact as far as loading indicators are concerned. I wanted this indicator to be totally unobtrusive, but also obvious. So, as soon as someone starts adjusting filters, they can see that Harvest is waiting, then loading results.<\/p>\n\n\n\n

It’s a little bubble that appears from the top of the results and is always visible at the top of the screen as the user scrolls. Conveniently enough, the existing results are all pushed away to make room for it. That was an accident at first, but really it makes the slide in a bit more pronounced and it means it doesn’t overlap anything you may have been looking at. (And even if it does, you can fix that by scrolling up).<\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Pretty simple :)<\/p>\n\n\n\n

I made a quick video to show how this is all working:<\/p>\n\n\n\n

dylanmc.ca\/wp-content\/uploads\/Demo-2010-07-24.ogv<\/a><\/strong> to see the video the old-fashioned way.
<\/video><\/p>\n\n\n\n

The other thing I tried<\/em> doing was to have the Javascript interface record its state in the location<\/em> so it can be bookmarked and navigated through in the browser history (with the Back and Forward buttons).<\/p>\n\n\n\n

I learned a lot of terrifying things, since I’ve never done that before.<\/p>\n\n\n\n

Of course, the first terrifying thing is that you can’t change any part of the URL except the part after #<\/em>, which never gets sent to the server. Well, you can<\/em> change the other parts, but when you do it redirects to the given URL. That’s a good thing, but it does make life a little difficult for me :)<\/p>\n\n\n\n

So, what we need to do is change location.hash<\/em> to describe the current state, just like we do with the query strings sent to the server. There also needs to be an event handler watching for that change. With those two bits in place, that event handler is called whenever the user presses the Back button or loads the page from a bookmark, and it can apply the given state.<\/p>\n\n\n\n

There are piles<\/em> of jQuery plugins for this job. Two stood out above the pack: Asual’s impressively professional looking jQuery Address<\/a>, and Ben Alman’s deliciously silly sounding jQuery BBQ<\/a>. After some pondering and licking my lips, I went with jQuery BBQ.<\/p>\n\n\n\n

BBQ is very clever in its simplicity. It uses the existing jQuery.param<\/a> stuff to generate a query string the usual way, then it puts that in the hash part of the url instead of the ?<\/em> part. It adds a \u201cdeparam\u201d function to deserialize those query strings, a browser-agnostic hashchange event, a few helper functions, a bunch of documentation, and that’s it.<\/p>\n\n\n\n

Unfortunately, even with jQuery BBQ, my work got really loopy here. In short, there are a lot of variables to deal with already and adding more almost exploded my brain.
(That was no doubt strengthened by a brief interlude at the family cottage, where I regressed to glorious redneckism and finally unlearned PHP)<\/p>\n\n\n\n

So, unfortunately, I’m going to hold off on that for now. I could have planned the Javascript stuff much better, and getting BBQ working smoothly is likely a rewrite away. It may be a bad idea anyway. If someone shares a link that has #querystring<\/em> instead of ?querystring<\/em>, that link won’t work for anyone who has Javascript disabled. Instead, I’ll probably go the Google Maps approach, offering a \u201cPermalink\u201d button but never editing the URL in operation.<\/p>\n\n\n\n

Next up: nicely formatted package details, and editing opportunities!<\/p>\n","protected":false},"excerpt":{"rendered":"

The past week, unfortunately, hasn’t been very productive for me. Still, I have a few things to show!<\/p>\n

I did a bunch of cleanup (again) and I toyed with animations for a while. There is now an animation (and a loading indicator) when new results are retrieved for the filters. One philosophy I have found myself following is that this UI that never, ever blocks on a task. So, no matter what is happening, you should always be able to click the same buttons you could before.
(On a related note, I’ve been very excited about Blender<\/a> lately)…<\/p>\n","protected":false},"author":2,"featured_media":530,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federate","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[35],"tags":[33,20,24,29],"class_list":["post-61","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gsoc-2010","tag-design","tag-harvest","tag-jquery","tag-web"],"yoast_head":"\nHarvest + GSoC week 9! - Dylan McCall<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Harvest + GSoC week 9! - Dylan McCall\" \/>\n<meta property=\"og:description\" content=\"The past week, unfortunately, hasn’t been very productive for me. Still, I have a few things to show! I did a bunch of cleanup (again) and I toyed with animations for a while. There is now an animation (and a loading indicator) when new results are retrieved for the filters. One philosophy I have found myself following is that this UI that never, ever blocks on a task. So, no matter what is happening, you should always be able to click the same buttons you could before.(On a related note, I’ve been very excited about Blender lately)…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/\" \/>\n<meta property=\"og:site_name\" content=\"Dylan McCall\" \/>\n<meta property=\"article:published_time\" content=\"2010-07-25T01:12:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-14T16:20:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dylanmc.ca\/wp-content\/uploads\/ResultsLoadingIndicator.png\" \/>\n\t<meta property=\"og:image:width\" content=\"888\" \/>\n\t<meta property=\"og:image:height\" content=\"166\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dylan McCall\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dylan McCall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/\"},\"author\":{\"name\":\"Dylan McCall\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5\"},\"headline\":\"Harvest + GSoC week 9!\",\"datePublished\":\"2010-07-25T01:12:00+00:00\",\"dateModified\":\"2024-08-14T16:20:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/\"},\"wordCount\":704,\"image\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/ResultsLoadingIndicator.png?fit=888%2C166&ssl=1\",\"keywords\":[\"design\",\"Harvest\",\"jquery\",\"web\"],\"articleSection\":[\"GSoC 2010\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/\",\"url\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/\",\"name\":\"Harvest + GSoC week 9! - Dylan McCall\",\"isPartOf\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/ResultsLoadingIndicator.png?fit=888%2C166&ssl=1\",\"datePublished\":\"2010-07-25T01:12:00+00:00\",\"dateModified\":\"2024-08-14T16:20:05+00:00\",\"author\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/ResultsLoadingIndicator.png?fit=888%2C166&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/ResultsLoadingIndicator.png?fit=888%2C166&ssl=1\",\"width\":\"888\",\"height\":\"166\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#website\",\"url\":\"https:\/\/dylanmc.ca\/\/-\/\",\"name\":\"Dylan McCall\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dylanmc.ca\/\/-\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5\",\"name\":\"Dylan McCall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94ab3a7e6a884542205e0408711cd54bb1fd5f4e90e7a5f621a54656a18a037?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94ab3a7e6a884542205e0408711cd54bb1fd5f4e90e7a5f621a54656a18a037?s=96&d=mm&r=g\",\"caption\":\"Dylan McCall\"},\"description\":\"Software developer, tea drinker, GNOME contributor. Occasionally a raving fanatic.\",\"sameAs\":[\"https:\/\/dylanmc.ca\/\/-\"],\"url\":\"https:\/\/dylanmc.ca\/\/-\/blog\/author\/dylan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Harvest + GSoC week 9! - Dylan McCall","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/","og_locale":"en_US","og_type":"article","og_title":"Harvest + GSoC week 9! - Dylan McCall","og_description":"The past week, unfortunately, hasn’t been very productive for me. Still, I have a few things to show! I did a bunch of cleanup (again) and I toyed with animations for a while. There is now an animation (and a loading indicator) when new results are retrieved for the filters. One philosophy I have found myself following is that this UI that never, ever blocks on a task. So, no matter what is happening, you should always be able to click the same buttons you could before.(On a related note, I’ve been very excited about Blender lately)…","og_url":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/","og_site_name":"Dylan McCall","article_published_time":"2010-07-25T01:12:00+00:00","article_modified_time":"2024-08-14T16:20:05+00:00","og_image":[{"width":888,"height":166,"url":"https:\/\/dylanmc.ca\/wp-content\/uploads\/ResultsLoadingIndicator.png","type":"image\/png"}],"author":"Dylan McCall","twitter_misc":{"Written by":"Dylan McCall","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/#article","isPartOf":{"@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/"},"author":{"name":"Dylan McCall","@id":"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5"},"headline":"Harvest + GSoC week 9!","datePublished":"2010-07-25T01:12:00+00:00","dateModified":"2024-08-14T16:20:05+00:00","mainEntityOfPage":{"@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/"},"wordCount":704,"image":{"@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/ResultsLoadingIndicator.png?fit=888%2C166&ssl=1","keywords":["design","Harvest","jquery","web"],"articleSection":["GSoC 2010"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/","url":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/","name":"Harvest + GSoC week 9! - Dylan McCall","isPartOf":{"@id":"https:\/\/dylanmc.ca\/\/-\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/#primaryimage"},"image":{"@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/ResultsLoadingIndicator.png?fit=888%2C166&ssl=1","datePublished":"2010-07-25T01:12:00+00:00","dateModified":"2024-08-14T16:20:05+00:00","author":{"@id":"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/24\/harvest-gsoc-week-9\/#primaryimage","url":"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/ResultsLoadingIndicator.png?fit=888%2C166&ssl=1","contentUrl":"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/ResultsLoadingIndicator.png?fit=888%2C166&ssl=1","width":"888","height":"166"},{"@type":"WebSite","@id":"https:\/\/dylanmc.ca\/\/-\/#website","url":"https:\/\/dylanmc.ca\/\/-\/","name":"Dylan McCall","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dylanmc.ca\/\/-\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5","name":"Dylan McCall","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94ab3a7e6a884542205e0408711cd54bb1fd5f4e90e7a5f621a54656a18a037?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94ab3a7e6a884542205e0408711cd54bb1fd5f4e90e7a5f621a54656a18a037?s=96&d=mm&r=g","caption":"Dylan McCall"},"description":"Software developer, tea drinker, GNOME contributor. Occasionally a raving fanatic.","sameAs":["https:\/\/dylanmc.ca\/\/-"],"url":"https:\/\/dylanmc.ca\/\/-\/blog\/author\/dylan\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/ResultsLoadingIndicator.png?fit=888%2C166&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcXOQX-Z","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/posts\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":15,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"predecessor-version":[{"id":11024,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/posts\/61\/revisions\/11024"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/media\/530"}],"wp:attachment":[{"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}