Blog Redesign Phase One

Monday, October 11th, 2010
 Mg 0798

This blog has long been overdue for a redesign. I’ve grown tired of rounded corners, sans-serif body fonts, and small photos. It’s high time I made some changes around here.

So welcome to phase one of my blog redesign. Hopefully the text is now more readable, the photos and videos have more room to breathe, and everything looks and feels better, more or less.

Further changes are to come. With phase two, more consistency. Phase 3, refinement. Phase IV, killer ants.

A beforeAfter wordpress plugin

Thursday, September 30th, 2010
ungraded
graded

What you see above is an example of the beforeAfter jquery plugin in use. If you drag the controls overlaid on the image to the left or right, click anywhere in the image1, or click the links just below the image, you’ll be able to compare the graded and ungraded looks of a frame from a short film I graded a couple of months ago.2

beforeAfter was written by admin at catchmyfame.com. You can find the original code, see some demonstration images, and read up on his reasons for developing the plugin in his blog post about beforeAfter.

I was very happy to come across this plugin. I’ve wanted for a while to be able to post before-and-after examples like this to my blog to demonstrate film grading and photo editing work, and this was nearly exactly what I needed. I took the code, wrapped it into a WordPress plugin, and modified it to add a few features. Since I was to benefit from code released freely into the wild by its author, it’s only natural to release the modifications. The beforeAfter wordpress plugin I’ve constructed can be downloaded here:

http://zachfine.com/beforeAfter_wp.tar.gz

I wrote the plugin’s original author to ask for his blessing before releasing this altered version of beforeAfter, and he agreed. Below are excerpts from that email message, which explain my alterations to the code and also contains some instructions on how to use the plugin:

<email message>
On Mon, Jul 19, 2010 at 2:53 PM, Zach wrote:
Hello there,

I was extremely happy to find your jquery beforeAfter script on the net. I’ve wanted for a while to post before and after images to my blog that help show people how to make adjustments to photos or grade video footage, beforeAfter seems like a fantastic way to do that.

I constructed a wordpress plugin based on your script and installed it on my server. It worked very well, but I realized while testing it that the following additional features would be very useful to me (and possibly to others as well):

  • the ability to have an arbitrary number of instances of beforeAfter containers per page
  • the ability to set custom “Show only before” and “Show only after” text strings via custom attribute in the container’s html.
  • the ability to set a custom initial wipe starting point via custom attribute in the container’s html. The reason for this is that I want the beforeAfter controller and its function to be instantly obvious to visitors, so I want to manually place the initial wipe point over the area of greatest between-image contrast — or I might want to place the wipe point over the area I mean to emphasize.

So I read up on javascript and jquery and made a few modifications. It was only after making these modifications that I noticed the script’s license stipulates “No Derivative Works”. I think this means I can’t use the modifications I’ve made unless you give me approval to use my modified version of your script, though I could be wrong. I was planning on sending you these modifications regardless, thinking that in the best-case scenario you might like the modifications and/or make them available to others.

My mods to the script:

Example of container html:3

<div class="container" data-wipeto="35" data-beforetext="original" data-aftertext="graded" data-animateintro="true" data-introdelay="3000" data-introduration="3000"> <div><img alt="ungraded" src="http://zachfine.com/blog/wp-content/uploads/2010/07/LB-01-00-57-05-original.jpg" height="254" width="450" /></div> <div><img alt="graded" src="http://zachfine.com/blog/wp-content/uploads/2010/07/LB-01-00-57-05-graded.jpg" height="254" width="450" /></div> </div&

Note that I’ve set the user configuration settings above using valid html5 custom attributes. In this manner each container can have its own settings. The html5 spec requires that custom attributes be lowercase and begin with “data-”. Unfortunately this means no camelCasing, which cuts down on the readability of variable names. Maybe underscores are allowed?

Because my goal was to allow an arbitrary number of beforeAfter containers on a page, I’ve changed the jquery selectors in the script to look for divs of class “container”, rather than id “container”. I’ve always used id’s to single out individual design elements on a page, and classes for a class of elements. I could be wrong about this paradigm.

This html produces the following

Redundant image removed –see demo at top of this blog post, it’s a working example of the result of that container’s html.

Any beforeAfter settings not set by the user in the html will get the defaults. The “wipeto” point will be set to “50″ (out of 100), the “beforetext” will be set to “Show only before”, etc.

Here’s the jquery code I use to iterate through each of the the divs of class “container” in the DOM, iterating through each div’s custom attributes to construct an object of options, and then calling the beforeAfter plugin on that div and passing it the set of user-set options:

<script type="text/javascript">
$(function(){
   $('div.container').each(function (index) {
      var $div = $(this);

      var userOptions = {};
      $.each(this.attributes, function(i, attrib) {
             if( /^data-/.test(attrib.name) ) {
              userOptions[attrib.name.replace(/data-/g, '')] = attrib.value;
              }
      });

// Adding just one more option to the object of arguments:                      
      userOptions['imagepath'] = '<?php echo WP_PLUGIN_URL . "/beforeafter/js/"; ?>';

      $div.beforeAfter(userOptions);
   });
});
</script>

This bit of script is in my wordpress plugin, with more comments, here: http://zachfine.com/blog/wp-content/plugins/beforeafter/beforeAfter-source.php

I made a few of changes to the jquery.beforeafter.js script to make use of the new “wipeto”, “beforetext”, and “aftertext” vars, and to remove camelCasing from the options/defaults vars to be consistent with the html5 custom attributes. My altered version is available here: http://zachfine.com/blog/wp-content/plugins/beforeafter/js/jquery.beforeafterZ.js
</email message>

I plan to use this plugin quite a bit in the near future. I hope you all enjoy using it as well. Thanks again to admin at catchmyfame.com for writing the original plugin and allowing me to distribute and use this modified version.

  1. Clicking rather than dragging the controls works just fine on iPhone/iPad. []
  2. Yes, I really did track a “power window” to the actress’s face, matte-ing a selective color adjustment, to restore/enhance the blue color of her eyes. Thanks for asking. []
  3. Yeah, the formatting doesn’t look so hot after it’s wrapped by your web browser, but you should have seen it before! The demo of the plugin at the top of this blog post can serve as a more readable example –see the html code of the post. []

Jay Leno in his daytime, Coldwater Canyon slot

Saturday, July 3rd, 2010
Jay Leno driving along Coldwater Canyon
Click either photo to see it full-size.
Rachel and I were driving along Coldwater Canyon Blvd in Studio City this morning when we spotted something that’s a not-infrequent sight around here: Jay Leno driving one of his very cool vintage cars down the road.

I grabbed her cell phone1 and snapped a couple of pictures. He did the same. I don’t think he has a blog in which he posts photos of people in the act of taking his picture2, but if he does you’ll now be able to find a photo of me on it.

Jay Leno driving a vintage car

  1. It’s an iPhone 4G. I’m pretty impressed by its camera’s image quality. I don’t think I gave the phone enough time to properly set its exposure for that 2nd shot, there’s likely have been better highlight detail had I waited a couple of seconds. []
  2. which is something I’d definitely do if I were any sort of celebrity []

Let the album art downloads commence

Saturday, May 1st, 2010
I bit the bullet and bought a license for the application “TuneUp”, which is now in the process of going through my entire iTunes Library to fix my track and album names and info as well as download album art for the tracks. It seems to work very well, and a working 20%-off coupon code can be found at the TuneUp developer blog.

not a blog post, just an image I attached to a tweet

Friday, March 19th, 2010
I was surprised to see this item at its position in Amazon’s bestsellers in Electronics, so I tweeted about it. I added this image, which went straight to posterous, which autoposted here. I’ve changed the date to push this post into the past so that it doesn’t show up on the front page of my blog. Even I set limits for how uninteresting a post I’ll leave sitting on the front page.

iPhone OS 3.0 copy & paste photo bug?

Wednesday, June 24th, 2009
Edit: wrote this up as bug# 7009722 using Apple’s public bug reporter page.

My last post should have included 3 photos, but one was missing. I’d cut the first photo, of a light fixture, and pasted it to the end of the email I’d sent to posterous (a service that makes it simple to create blog posts via email). I checked the copy of the email in my sent mail folder, and it too was missing the photo.
 
I’m going to try replicating that action in this post. If the photo of the light fixture, which went missing from the last post, is also missing from this one, I’ll report the bug to apple.
 
If you know Seattle at all, you may be able to guess the locations at which I shot the other two photos.

See the full gallery on posterous

Posted via email from Zachary’s posterous

more Tor Bridge links

Wednesday, June 17th, 2009
Yesterday I posted a link to my Tor bridge and links to information on how to set up such a bridge. Several visitors went to the effort of setting up Tor bridges on their computers and then posted their Tor bridge links as comments to that earlier post. Very cool. Unfortunately, in my blog’s current design, comments are only visible when viewing that blog entry directly and don’t show up on the main page. In order to better expose those Tor bridge links in case anyone needs them, I’m re-posting them below:

  1. 67.165.94.243:443 AF293E70D1DB3AF126B3BD6F5DD2B4D904705BB0
  2. 24.2.226.175:443 F4D078BDFDA345F2A1299B3FF55ECC921959F366
  3. 66.30.41.122:34983 46EF32AACC7EFD3FCB7CED651BAFC190122DA8F4
  4. 71.174.111.132:9000 28A2DC5E9853A5CE0A35F20EB345690200BB042A
  5. 71.203.101.115:9001 3B45A28070BF7669C282030E85F475C91A222195
  6. 75.84.153.203:9001 8BA6A76D36F5A9830F25B5D8315906434AEE50FF
  7. 213.163.90.5:443 3BDBCFE76B74A3D117DB2967AA682A00C7A91D3A
  8. 91.66.240.177:443 9F1B11827EFAF23CD18E60960E1C2A7EE95A7BF1

If you happen to be in Iran and need uncensored access to the internet, you can hopefully use these Tor bridges to bypass the Iranian government’s block of gmail, facebook, twitter, etc. Here are links to the Tor software in English and in Farsi.

If more Tor bridges are added as comments to this or to the previous post, I’ll edit this post to include them.

2009-06-17 11:38am PST edit: +2 bridges.

Blog redesign in progress

Saturday, March 14th, 2009
screenshot of blog redesign in progress

I’ve started to tire of my blog’s design and have begun to tear it down1 in order to rebuild. “In LA v2.0″ will be wider2, mostly free of sans-serif fonts3, with larger images, more whitespace, a redesigned theme and header –and the page will display in 3D4 if you look at it through polarized glasses.
  1. er, I’m tearing down and rebuilding an auxiliary copy []
  2. because I refuse to continue to design for 800×600 resolution displays []
  3. blocks of text with serifs are easier to read by word shape, unless you’re on an OS that doesn’t render them properly :) []
  4. or at least with 50% less glare []