matthew ephraim

Mansfield Reformatory Pictures

February 8th, 2011

Tub

Chair

Bench

Mansfield Reformatory

Washington DC Pictures

February 7th, 2011

Dome

Enshrined Forever

Monument

Washington DC

Boston Pictures

February 6th, 2011

Ship

Jumble

Parking

Boston

Introducing Candid Canvas

July 21st, 2010

The Canvas Tag

If you’re a web developer (or even mildly interested in the world of web development) you’ve probably heard of HTML5′s new Canvas tag. You’re probably also aware that the Canvas tag allows web developers to create some really great animations right in the browser. No plugins needed (well, depending on your browser, maybe one plugin).

As soon as I saw what was possible with the Canvas tag, I wanted to start using it myself. So, I looked at some of the Canvas tutorials available online and figured out how to create some simple drawings. It was fun, and simple, and I was happy.

And then I decided to try my hand at creating some Canvas animations.

The Problem

Now, I’m not a Canvas expert, so my analysis could be way off base, but I quickly came to the conclusion that creating a Canvas animation could be quite difficult. It’s fairly easy to do if your animation only has a few elements. And it’s manageable if you don’t mind having a lot of extra code for handling the animation’s timing and state variables. But, as time went on, I found that even simple animations became difficult to manage very quickly. My hat’s off to the developers that have created some of the more complex Canvas animations out there. I don’t know how you do it.

My first instinct when I began to run into problems with the Canvas animations I was trying to create was to look for a Canvas animation library that might help me out. It turns out that there are a few out there. Unfortunately, I didn’t find one that I felt fit well with the kinds of animations I wanted to create.

And so, with a stack of problems I intended to solve, I set out to create a Canvas animation library that would solve each and every one of them.

Candid Canvas

What I came up with was a new Canvas animation library that I call Candid Canvas.

  • Unlike several of the other Canvas animation libraries out there, Candid Canvas doesn’t provide you with any special drawing tools. You’re still on your own when it comes to drawing your animation.
  • Candid Canvas also doesn’t keep track of the elements that have been drawn to the Canvas tag. You’re on your own for that too.
  • Candid Canvas is intended to help you manage the parts of creating a Canvas animation related to, well…animating it.
  • Candid Canvas helps you break down your animation into separate scenes.
  • And it helps you break your scenes down into individual elements responsible for drawing different pieces of the scene.
  • Candid Canvas also helps you play, pause and reset your animation.

Candid Canvas is not a library for everyone. But if you’re looking for a little extra help when creating Canvas animation, I hope that Candid Canvas will work for you!

Download, contribute and submit bugs and feature requests at the Candid Canvas Github project.

Usability, Browsability and…Sniffability?

May 3rd, 2010

As any cat owner (or roommate of a cat owner) knows, there are times when a scented candle becomes a crucial component of maintaining one’s own sanity. Recently, when posed with a situation in which I found myself lacking the proper oder masking equipment, I took a stroll over to my local big box retailer and made my way to the home and garden section. There I began my search for perfect flame activated cat stink deterrent.

Now, anyone who’s ever tried to choose a winner among a wide variety of competing scents knows that there’s really only one way to figure how a particular candle matches up with your own scent preferences. You pick it up. And you smell it. Unfotunately (as you will see below), with many candles this obvious scent comparision technique is difficult, if not impossible. Clearly, the companies who make the candles that are most difficult to smell are indifferent to or ignorant of how their target audience actually browses their products.

Perhaps it seems a little silly to analyze the usability (and sniffability) of scented candles. After all, candles come cheap. If you buy the wrong one, you can just buy another one next time. However, I would argue that a few simple packaging changes can make all the difference in the world when it comes to making a candle easy to smell.

And with that, I’d like to show you a few examples of what I found during my candle adventures.

First, the Good

The companies that make these first 3 candles clearly get it. The packaging is easy to open without breaking and one candle brand even includes holes to allow sniffing without opening the packaging. This is how candle packaging should be designed.

A good candle A good candle A good candle

Now, the Bad

I’m not a candle expert, so I can’t tell you why so many candles come in glass jars. What I can tell you is that glass jars that aren’t easy to open make for a bad candle browsing experience. Not the worst candle browsing experience, mind you. That experience is reserved for the candles below.

Some bad candles

And finally, the Ugly

Two types of candles, and two types of impossible to preview packaging. Let’s hope the description on the package is vivid enough to evoke an accurate scent in the consumer’s mind. Otherwise, you’re really rolling the dice when you choose to buy a candle that you can’t actually smell.

An ugly candle Some ugly candles

User experience is a hot topic in the world of web design right now. And usability certainly is key to making a good website. However, a good user experience is vital everywhere. Even when it comes to things as trivial as candle shopping. I’d like to think that the candle makers who took the time to truly consider how their customers would seek out their products will be rewarded with success.

And yes, I bought one of the easier to sniff candles.

My Naive Apple Tablet Predictions

January 27th, 2010

Being somewhat of an Apple fanboy, I thought it might be fun come up with a list of Apple announcement predictions before the official tablet(?) announcement later today.

I haven’t been following any of the rumor sites lately, so my predictions come from complete ignorance. Nevertheless, what follows are my completely baseless guesses and crazy dreams about what Steve Jobs will introduce today.

Naive Apple Tablet Predictions

  • Apple will introduce not just a tablet computer or also-ran ebook reader, but a completely new class of device, or rather, line of devices. Steve Jobs will give a rundown of past innovations like the printing press, the personal computer, the Internet and finally the new Apple device. He will be dismissive of the terms “tablet” and “ebook reader” because of their limited scope and demonstrate how the Apple device goes forward into uncharted territory.
  • The device will be thinner than any ebook reader or tablet currently on the market. It will be made of metal, probably aluminum and will feel very solid. It will also have a full color touch screen that covers almost the entire front side of the device, with practically no frame around the edges. It won’t look like a larger version of the iPhone. It will be much more visually stunning and innovative.
  • The new line of devices won’t follow the “i” naming convention. So, no iTab or iSlab or anything along those lines. Rather, the new devices will have names like “Slate” and “Slate Pro”, with a small model targeted at consumers and a bigger model targeted at pro users. The iPhone will also be updated to support some of the features that the new devices offer.
  • It doesn’t seem likely that the new device will use e-paper, as it will probably still need to function somewhat like a traditional computer. However, I could see the new device featuring a technology like OLED, which would allow for a high contrast screen that is also low power.
  • The touch screen on the device will be amazing. The responsiveness, multi touch and included software will raise the bar for touch screens and tablets to the next level, similar to what the iPhone did for smartphones.
  • The device will use solid state for storage and will have an impressive amount of storage space for a device so thin.
  • Battery life will be amazing. Something like 10 to 15 hours on a charge and even longer when in a lower power mode.
  • Apple will announce a list of partnerships with magazines like Time and newspapers like the New York Times for a new type of subscription that allows users to subscribe to a newspaper or magazine through the device and receive the latest copy wirelessly. The Media Store (maybe?) version of a magazine like Time will look nearly identical to the print version, but will also contain interactive ads, supplemental videos and links to related content online. Subscription fees will be in the area of $10 for most media offered.
  • The new Media Store will also offer enhanced versions of books. The books will function similar to the way they do on most e-readers, but the Apple device will offer a new level of interactivity with the books. It will likely also include video and links to online content within books, just like the the other types of media.
  • Finally, Apple will overhaul iTunes. The name “iTunes” is no longer relevant and hasn’t been for a long time. The existing iTunes software will be reworked into a new application that manages the different types of content that can be downloaded to the Apple device as well as the content on regular Apple computers and iPhones.

These are my pipe dreams. In reality, I expect something a lot closer to a big fat iPhone

Draggability for the Raphaël Library

October 31st, 2009

I’ve been using the Raphaël JavaScript library a lot lately for a JavaScript SVG project I’ve been working on. It’s easy to use and eases a lot of the pain of using JavaScript with SVG. However, I eventually came to a point where I needed to have SVG elements that could be dragged around on the Raphael canvas. After looking around for a good plugin that would allow me to do what I wanted, I decided that I needed to write my own. The result is the raphael.draggable plugin.

raphael.draggable is fairly straightforward to use. You simply need to call the draggable.enable() on the raphael object you would like to enable the plugin for. raphael.draggable works for all raphael elements and for raphael sets as well. Sets that have raphael.draggable enabled will drag all elements in the set whenever any element in the set is dragged.

Using the raphael.draggable plugin

 // Creating a canvas and enabling draggable for it
var paper = Raphael(0,0, 800, 600);
paper.draggable.enable();

// Creating a rectangle element and enabling draggable for it
var rect = paper.rect(0, 0, 100, 100);
rect.attr({ 'fill': 'white' });
rect.draggable.enable();

// Creating a set and enabling draggable for it
var set = paper.set();
set.draggable.enable();
set.push(rect);

Currently, raphael.draggable has only been tested for Firefox and Safari. Those are the only two browsers I needed to test it for. Source code and documentation are available on github. Constructive criticism, and especially constructive contributions to the code are welcome!

An Old Friend

October 28th, 2009

Last week, the city of Chicago announced that demolition of the Michael Reese Hospital campus would begin. And, unlike so many delayed city projects, the demolition of the campus has indeed started.

When I first explored the Michael Reese campus, one of the buildings that stood out to me was the Friend Pavilion. At first glance, it looked like a simple, concrete structure. Small and nestled in a grove of trees and gardens, I didn’t immediately pay much attention to it among the other large, modern structures. However, when I got closer, I was drawn in by Friend’s expansive windows and simple interior.

Friend was built as a place where patients could rest and be rehabilitated. When I was finally able to explore the building from the inside, I struck by how truly peaceful the interior was. Despite being a hospital in the middle of a bustling metropolis, the world inside of the Friend Pavilion was surprisingly tranquil and relaxing. The simple, open rooms and picturesque landscape outside made for a very appealing place to rest. Pictures of the building don’t do it justice.

Not so long ago, not even that much more than a year ago, patients were still being served by the Friend Pavilion. When I first became interested in the hospital campus in early 2008, I visited the Friend pavilion several times and noted that it certainly wasn’t in pristine condition. But, at the same time, the building wasn’t in the dilapidated condition that the city of Chicago pretends that it was in. It was only through purposeful negligence by the city that Friend (like many of the other buildings on the campus) was allowed to deteriorate.

As sad as it makes me to say it, the building never will be restored or recognized for the sanctuary that it was and could have been. This week, the Friend Pavilion was destroyed with little fanfare.

The Friend Pavilion

Yes, they'll all come to see me...

At my window sad & lonely

Well I was thinking...

More Michael Reese Photos

The End of Michael Reese Hospital

October 23rd, 2009

The Michael Reese Hospital campus saga is one that I’ve been following ever since I stumbled on the campus a little over a year ago. I’ve been following the efforts that preservationists have been making to save the historically significant Walter Gropius buildings on the site. I handed out literature and attended community meetings, hoping that some of the buildings would be saved. In the end, it looks like most of the campus will still be lost.

This week, despite Chicago losing its bid for the 2016 Olympics, demolition of the campus begins. There is hope that at least one of the buildings, the Singer Pavilion, might be saved. But, alas, the rest of the campus may be lost.

The Singer Pavilion

Singer Pavilion

Singer Pavilion

Thanks to the Gropius in Chicago Coalition and the rest of the architectural preservation community for all of your efforts in trying to save these buildings.

Introducing GhostscriptSharp

July 8th, 2009

A few months ago, I posted some code that I had used to generate thumbnail images from PDF files. Before writing the code, I had searched high and low for some simple code that would allow me to take a PDF file and generate a thumbnail from the first page of that PDF file. Unfortunately, I didn’t find many C# solutions. The best I could find was the Ghostscript library and some references to using it from C#.

In my previous post, I talked about some of the issues I had with using Ghostscript from the command line. It wasn’t difficult, but it wasn’t something that I wanted to do. Finally, I ended up writing a C# wrapper that would talk to the Ghostscript library and generate the PDF thumbnail files that I wanted. I figured it was a common enough issue that at least someone else would find it useful.

Almost immediately, that post became the most popular post on my site. I still get 10 or so Google hits from it every day. So, I figured I’d clean up the code a little bit (which involved some helpful changes that people suggested in the comments of my post) and release it to the world.

I decided to call the library GhostscriptSharp and you can find it on Github. There are probably a lot of things that could be added or cleaned up, so if you’d like to contribute, feel free to create your own fork and let me know if you have changes I could pull in.