Adobe Edge experiment: Eddie the Brick

August 11th, 2011

Adobe has seen the future — or at least a potential future — and they have prepared accordingly. If Flash meets an untimely end, Adobe Edge will rise to take its place. Even if Flash sticks around, Adobe Edge is a cool little tool that lets you add HTML/CSS/JS animation to a page in a design-friendly interface, dragging and dropping, timelining and keyframing.

I decided to give Edge a spin, and I made this unfunny Eddie the Brick cartoon with it.

Screenshot of Adobe Edge

The current release is Preview 1, and it’s pretty rough. While working with it I ran into several bugs and missing features. When I first saved my project, it reset all my settings. I was stumped for a bit because I turned off the auto-keyframe function and didn’t realize there was also a function that was hiding all my static objects (because they hadn’t been automatically given keyframes). My project involved bits of text appearing and disappearing, and I couldn’t find a way to have objects only appear at certain times. I used opacity keyframes instead. Images can’t be scaled in the interface. Also, the full animation can’t be looped. None of these are big deals, and I’m sure Adobe will address them as development continues.

One thing that might be an issue occurred when I added a whole bunch of keyframes. Eddie is jittering for the whole animation, so I created a repeating pattern of him slightly, rapidly moving about. The last few pastes I did of the pattern made the program hang for several minutes. It probably also makes up the bulk of the 240k JavaScript file Edge created for the project.

All in all, it’s a cool start, and I look forward to a much-polished version of this becoming a standard part of my workflow.

Tagged , , , , , , | Leave a comment

Scrapy helps me scrape

August 3rd, 2011

Between a recent Edward Tufte talk in Denver and the Kindle release of Flowing Data’s new book, my distraction of choice lately has been data visualization. In particular, I’ve been on the hunt for data about my city. I had an idea for a chart displaying a map of houses in Denver color-coded by year built. Now, this is simple and publicly available data. But it’s also not that easy to collect in bulk. The city of Denver has an online database of property records, but you have to search by address. You can’t just download a big table. Also, I don’t want my map to get cut off at the city limits, especially when what people think of as Denver extends far beyond these limits. Which means I’d have to figure out how to extract Denver’s data, and then do the same for every city in the metro area — assuming they even put their data online. This would be a serious pain.

Besides, someone has already gone through the pain for me: real estate websites. I won’t say exactly which site I went to because I’m pretty sure harvesting their data would be considered a terms of use violation. But let’s just say there’s a site out there (and there are several, actually) that serves up all kinds of basic, publicly available data about homes, and they make it easy to browse the entire Denver Metro Area from a single starting page. It couldn’t be more perfect for spidering and data-scraping.

This was my first time building a spider or scraping, but it didn’t take much searching around to find Scrapy, a Python framework for doing just this. It’s a little complicated to start, but they have a good tutorial, as well as a live command line environment that lets you test out code.

In the end, it worked beautifully. If you want the data I scraped, it’s here: Denver Metro Property Data

Now if I can just figure out how to call Google’s GPS-finding service more than 15,000 times a day…

Tagged , , , | Leave a comment

Splitter: A split-testing plugin for WordPress

July 27th, 2011

I built a new little WordPress plugin called Splitter, and I’m using it to run A/B tests on Truth (plus lies). Its purpose is to show different users slightly different page layouts and report back to Google Analytics who was looking at what. It works by randomly setting a cookie for new visitors and then using JavaScript to show/hide elements based on that cookie. It reports back to Google Analytics by setting a custom variable with the cookie’s value.

Here is the source for the plugin, which is made up of three files — two JavaScript, one PHP. The PHP file splitter.php defines the plugin, some settings, and inserts JavaScript based on those settings into the header of the page. The JavaScript file splitter.js does the work of actually setting the cookie, modifying the page, and setting the Google Analytics custom variable.

As for trigger_yoast.js — unfortunately, I ended up coding Splitter to work specifically with Yoast’s Google Analytics plugin. This was a tricky issue for me to figure out because the custom variable has to be set after the Google Analytics scripts are included but before the pageview event is fired. With a Google Analytics plugin, Splitter’s JavaScript can’t run until after the plugin is initialized, but then the plugin has to wait for Splitter to set the variable until it can finish what it’s doing. Yoast’s plugin lets us do that by providing the “Where should the tracking code be placed” and “Custom Code” settings. If the first is set to “Insert manually”, then it’s up to me to trigger the pageview event, so I added a footer action in splitter.php to do that. Then I set the “Custom Code” to call the function in splitter.js — gaVariable() — that sets the custom variable.

I used this to explore whether a couple of the widgets I’ve got in the sidebar of Truth (plus lies) were worth their real estate. The first was the tag cloud. I decided that the goal of my tag cloud was to encourage visitors to explore the most common topics on my blog, so if it was successful, the tag cloud would be driving down the bounce rate.

In my Splitter settings, I created state A, which showed the tag cloud widget, and state B, where it was hidden. The element is defined by a CSS selector. I defined my cookie name as ‘tagcloud’ and my two states as ‘yes’ and ‘no’. With this information, I created two custom segments in Google Analytics that matched for the custom variable name and values, which are the same as in the cookie. Then I applied my segments and checked out the Bounce Rate report for the home page of my blog. (The home page is the only page that had the tag cloud.) Here were my results:

Google Analytics Report

The total bounce rates were: 60.53% total, 68.18% with the tag cloud, and 53.33% with no tag cloud. So, a definite win for removing the tag cloud, right? Not necessarily. Here’s where I’m a total beginner at A/B testing. These results were for just 65 total pageviews — 40 with the tag cloud and 24 without. (I don’t know where the 65th one went.) This leads me into the biggest A/B testing trap, statistical significance. Crazy things can happen by chance, so it’s important to be rigorous about making sure your test results actually say something useful about your design.

The home page of Truth (plus lies) doesn’t get too many hits. Most of the traffic goes to single post pages, so I decided to end my split test without a strong conclusion. I did go ahead and remove the tag cloud though. Not only did my aborted test show no advantage, but some click tracking I was doing at the same time showed that no one ever clicked the tag cloud.

Before doing my second test, I improved Splitter by automatically turning my A/B tests into A/B/A tests. That is, when you create to states to test, the plugin will create a third “control” state that is a copy of the A state. The control state is tracked separately, so in Google Analytics, you’ve got three segments to look at. But now you know that two of these segments should be producing pretty much the same results and that any difference between them is pure chance. Which is helpful when you’re trying to decide if a difference between states A and B is significant.

Armed with this new feature, I set up a test that either shows or hides the “About Me” widget in Truth (plus lies)‘s sidebar. Actually, the test’s still going, and it’s been going for over a month. Here are the current results in Google Analytics:

Google Analytics Report

Still ambiguous! There’s a slight advantage for the “With” states. But for bounce rate, the difference between “With About Box” and “With About Box (Control)” is bigger than the difference between the control state and “No About Box”. A little clearer are the numbers for “Pages/Visit” and “Avg. Time on Site”. Both show “With” and “Control” close together and doing better than “No About Box”.

But only slightly. More than anything, my tests show me that the presence of both these widgets doesn’t make much difference to the users.

Tagged , , | Leave a comment

More on server-side image resizing

June 23rd, 2011

This is a follow-up about my modest plugin to use Timthumb to grab dynamically resized images for WordPress.

When we last checked in, my plugin called “ImgSize” was triggered whenever a thumbnail image was requested, and it provided a Timthumb-resized version. Shortly after this, I added the functionality to the plugin to do the same thing for any image that showed up in a post as well. Almost immediately, Google Analytics registered a large drop in traffic to my blog. Google Image Search was no longer indexing my images because their urls were now all to *.php files. I removed the new feature, and the traffic gradually came back.

I returned to the plugin and fixed the indexing problem by adding an .htaccess file to the plugin folder. This file turns on some URL-rewriting, which allows us to place the PHP script call behind an image-like url. Now instead of having an image tag asking for a source like this –

http://truthpluslies.com/wp-content/plugins/imgsize/timthumb/timthumb.php?src=http://truthpluslies.com/wp-content/uploads/hepburn-skateboarding.jpg&w=260

– The tag can request this much friendlier URL –

http://truthpluslies.com/wp-content/plugins/imgsize/resize/260/wp-content/uploads/hepburn-skateboarding.jpg

– And the lovely .htaccess file changes it into the correct request.

I’ve been running this modification on my site for a few weeks and can report no effect on my web traffic or search engine ranking. If you want to try it for yourself, here’s the source: ImgSize

Tagged , , , | Leave a comment

Columns with the Same Height

June 14th, 2011

If the people always want one thing, it’s columns that are the same height. Am I right, people?

It’s one of those annoying things that are really easy with table-based layout, but weirdly tricky when using proper CSS methods. In my time, I’ve made plenty of faux columns (columns that aren’t even but are in front of a background image that looks like two even columns) and I’ve used JavaScript to fix the column heights when the page loads.

Unfortunately, this week I found I needed two equal-height columns that each generated their own CSS box-shadow and that would respond to dynamic content that was constantly changing the height columns should be. On the first count, faux columns were out, and the second count would mean adding extra triggers to keep the JavaScript firing every time the column height changed, which was just too annoying.

Thankfully, I found yet another solution to this problem here: “Equal Height Columns using CSS” by Ed Eliot

First, you add a ridiculously amount of bottom padding to both of your columns, causing their backgrounds to extend past where the bottom should be. Next, you add an equal negative bottom margin, which tells the rest of the page to ignore all that padding. Finally, you surround the two columns with a container and tell that container to hide overflow, which will cut down the backgrounds to just below the bottom of the content of the tallest column. Voila.

Thanks, Ed.

Tagged , , | Leave a comment

Server-side Image Resizing

April 1st, 2011

Over at my blog for random images and news Truth (plus lies), I made a change not so long ago after realizing what’s probably true for most blogs these days — that the home page is not the front page. In other words, most visitors don’t come to a site through the home page. Far more often, they come to the site directly to one post, making that page their entryway. Single post pages are the real front pages of contemporary blogs, so they should be designed to do that job as well as presenting their specific content.

With this in mind, all my single post pages on Truth (plus lies) show the 5 most recent posts in their side bars. Better yet, posts that have featured images will show a smaller version of that image. Which is fantastic visually, but presented me with a little technical challenge. All those featured images were actually being loaded by the browser at full size and being resized on the client’s side, adding a lot of bloat and load time to my pages. I could’ve gone through and made sure the featured images were stored at their thumbnail size, but I wanted a more flexible solution. If I went through resaving all my images at sizes dictated by my current design, then what happens in the future when I change that design? Do I want to resize them all again?

This actually poses a deeper question for me: should I be saving all my content images at sizes dictated by my current design? Wouldn’t it be better to store the highest resolution image so I’ll have it ready in case I ever redesign to display larger images in my posts? What are my options?

It turns out there is a very good option, which is storing — and referencing — the high-res image file but resize it on the server side rather than the client side. There are two good scripts out there ready to do this job for you in a smart way. In fact, one is callled the Smart Image Resizer, and the other is Timthumb. Either would have probably done the job for me, but I went with Timthumb because it seems to have a few more people dedicated to updating it.

Both scripts do the same thing. They take an image url as an argument, along with parameters about what size you’d like that image at, and they return you a perfectly-sized version. They also keep a cache of images they’ve processed, so if you request the same image at the same size over and over, they don’t have to reprocess.

Here’s a picture of Katharine Hepburn skateboarding. The url of the image is http://truthpluslies.com/wp-content/uploads/hepburn-skateboarding.jpg

Now here’s a resized version generated by Timthumb. It’s done with a call like http://truthpluslies.com/wp-content/plugins/imgsize/timthumb/timthumb.php?src=http://truthpluslies.com/wp-content/uploads/hepburn-skateboarding.jpg&w=260

It ends up being ridiculously simple. To add it to my blog, I decided to make a little custom plugin, but I could’ve easily done it in my theme’s functions file as well. One advantage to the plugin is that it gave me a place to put my Timthumb folder. For now, all the plugin does is look for a width attribute whenever a request for a post thumbnail is made. Then it generates the image based on that width. In the future, I’ll probably add to this so that it works on post images as well, but that’s trickier because I don’t have a universal width for images in posts.

Here’s the entire code for my plugin:

add_filter( 'post_thumbnail_html', 'resize_thumbnail');

function resize_thumbnail( $html ) {
$src = $html;
$src = preg_replace('/^.*src\=[\'\"]/', '', $src);
$src = preg_replace('/[\'\"].*$/', '', $src);

$width = $html;
$width = preg_replace('/^.*width\=[\"\']/', '', $width);
$width = preg_replace('/[\'\"].*$/', '', $width);
if (preg_match('/^[1234567890]+$/', $width)) {
$width_string = "&w=".$width;
} else {
$width_string = "";
}

$html = preg_replace('/\s*width\=[\'\"][^\'\"]*[\'\"]/', '', $html);
$html = preg_replace('/\s*height\=[\'\"][^\'\"]*[\'\"]/', '', $html);

$add_string = " src=\"".WP_PLUGIN_URL."/imgsize/timthumb/timthumb.php?src=".$src.$width_string."\"";

$html = preg_replace('/ src\=[\'\"][^\'\"]*[\'\"]/', $add_string, $html);
return $html;
}

Tagged , , , , , | 1 Comment

Quotas – a bulk to-do tracker

March 19th, 2011

I use Remember the Milk to maintain my to-do list. In the past year, I’ve added a lot of repeating tasks to it. These are items like “clean for an hour” and “work on music (10 minutes)”, and they’re intended to build up as I blow them off so that I know how much laziness I have to make up for. Then what usually happens is that I take care of a bunch in a spurt of productivity.

The issue arises that my to-do list gets overrun by these multiple items, and it becomes tough to see past a long list of “clean for an hour” duplicates to notice some of the actual individual items like, say, “cancel cable”. Suddenly the list isn’t useful for anything other than a rough meter of long I’ve slacked on these repeating items.

Which brings us to Quotas, an idea for an application that keeps track of bulk to-do items. Instead of displaying a line for every individual instance of these repeating items, Quotas instead shows you a meter that builds up as time goes by and gets knocked back down when you actually do stuff.

And each meter doesn’t have to apply to a single item. One of my most important repeating tasks is “Do Something Awesome”, which is how I ensure that I stay active with my personal creative projects. I check off instances of “Do Something Awesome” when I post a substantial blog item (like this one) or when I post a song or an original drawing to one of my blogs. I also check one off when I post three minor blog items. Minor items are usually found images or links to interesting articles where I don’t editorialize much.

When I define “Do Something Awesome” as a quota in Quotas, I define how often its value increases — so let’s say it increases by 1 point every day. Then I’d define some actions that would make it decrease. Like a 200 word blog post, which would count for 1 point, so if I did this action every day, I’d stay caught up. Or how about reblogging a found image. I’d make that count for 1/3, and I’d also set a daily limit to this action of 3. So if I reblogged 3 images per day, I’d keep up. But if I fell behind, I wouldn’t be able to catch up solely by reblogging images, forcing me to do some of the other actions I’ve defined. This pretty much summarizes my self-imposed rules that I’m currently using with Remember the Milk.

Let’s look at some sketched wireframes.

Quotas Wireframes

I should point out that this interface is intended for an iPhone. Here we see the home screen, which would have a bar chart at the top, showing the current levels of all the quotas. These bars would expand in width if there aren’t enough of them to fill the space, but if there are too many, you could slide them horizontally to see what you might be missing. Below the bar chart is a grid of all the actions you’ve defined, scrolling downward if need be. When you want to report that you’ve completed something, you just tap on whatever you’ve done. (There’ll probably be some quick confirmation dialog — or maybe just an easy undo message.) To add a new quota or a new action, just scroll that section to the end, and an “Add” button will appear.

We can also see the quota screen and the action screen. These both list the actions and quotas they’re associated with, allowing you to edit those associations. On the quota screen, you can also complete an action that’s associated with that quota. The little “edit” triangle at the top right will reveal some delete buttons as well as making other fields editable.

Finally, I put the schedule screen on there. I’m not sure exactly what this will look like, but there will need to be a semi-sophisticated interface to define things like “once a month, on the first day of the month” or “every third monday and tuesday”.

Leave a comment

Box2DJS Platformer

December 28th, 2010

platformer screenshot
Here’s an experiment I’ve been working on: it’s a platformer demo made in JavaScript. It uses the Box2DJS physics engine, and it’s iOS compatible.

It’s meant to become a version of a Macromedia Director game I made long ago (and can’t seem to find a copy of) called “Guy”, which was played with a mouse. You click on the screen to place a marker, and your little man walks towards the marker. If you click above his head, he jumps. Guy was made with badly hacked, homemade physics, so this demo is turning out much different. It’s a lot wilder, and moving your guy around is a lot more like driving a vehicle than a person. Which is maybe not so great? Anyway, your character is more like a car because I made the choice to build him with a wheel, rather than simply slide him around the ground. In a lot of ways, this makes his walking a little more natural, but it also makes him harder to control. Some tweaking could hopefully fix that.

If you’d like to look at the JavaScript, it’s here. I also use jQuery in there. It works in Chrome, Safari, and Firefox, though it really putters in Firefox and Mobile Safari. Try it out, and let me know what you think.

Tagged , , , , , , , | Leave a comment

HTML5 Music Players

August 23rd, 2010

With the success of the iPad and the continued success of the iPhone (and also the sneaking suspicion that flash is over-used), I’ve been on the hunt for a new in-browser music player for my music web site Act Dead. Right now, it uses the del.icio.us mp3 player plugin for WordPress. The nice thing about this plugin is that it just automatically scans the page for mp3 links and adds a little play button next to all of them. So there’s very little set up. Ideally, I’d like a new plugin that does exactly this, but when necessary (like on an iOS device), the player uses an html5 music player instead of a flash-based player.

Unfortunately, I haven’t found anything that fits my needs exactly, and I’m not sure what I’m going to do. I might just wait, as this space has only just opened up, and I would bet that someone will make exactly what I need within a year.

For now, the most interesting player out there is jPlayer, a robust JavaScript library that lets you create and customize your music player with a bit of coding. I tested it on iPad, iPhone, Chrome, and Firefox. It smartly switches between its flash component and HTML5 depending on the browser. However, there is no WordPress plugin. This one is probably the best option for someone willing to do a little dev work, and it will probably be made into a fantastic plugin by somebody soon.

Until then, the best WordPress-ready option is the Degradable HTML5 Audio and Video plugin. This one lets you use shortcodes in your WordPress posts (like [audio src="http://myblog.com/wp-content/uploads/2009/09/mysong"]) and then it provides the appropriate player for the browser. Unfortunately, I don’t want to use shortcodes. Again, I just want JavaScript to scan my page for mp3 links and work auto-magically.

Has anyone else out there found any better html5/mp3 solutions?

Tagged , , , , | 1 Comment

Poser Wireframes

July 8th, 2010

Some simple sketches for an app idea. I like to draw on my iPad, and I’ve felt the need for a poseable figure — like those wooden ones that artists use for reference. Then it occurred to me that you could probably make a pretty cool iPhone app to be a virtual poseable figure. And you could build the app with HTML/JavaScript. So this is something I’d like to explore, but in the meantime, here’s how it would work:

Tagged , | Leave a comment