A Best Camera: The Casio WQV-1 Wrist Camera

Commercial photographer and serial iPhone camera user Chase Jarvis has recently popularized the idea that “the best camera is the one that is with you” in a big way. Armed with a camera small enough that you’re willing to carry it everywhere you become free to capture moments, record mental notes, and other save images that would have otherwise passed you by. Though his weapon of choice is a cell phone camera my weapon has recently been an artifact of a decade ago picked up off of eBay — the Casio WQV-1 wrist watch camera. Though it only takes postage sized [120×120 pixels] black and white images it does so in a way that satisfies my bestcam needs.

Chase Jarvis Late Train Home new profile pic Enter

Ancient BUT Charming

Everything about the Casio Wristcam screams ancient technology — from the sub megabit images, to the slow slow buffer, to the infrared syncing of data from the watch to your desktop computer. (Remember Palm Pilot organizers?)

REMOTE SEND

Casio had made a few models of watch cameras in the 90s with this model being the first — later models had quicker buffers, longer lasting batteries and even color images, but the line didn’t seem to last very long. They can often be found on eBay, but fluctuate wildly in starting price.

With all its flaws and having been far surpassed by even the worst of camera phones, the images from this original spy style watch camera often capture the essence of the subject — and its this quick, sketchbook style documentation of an object that I’m looking for when I’m on the go and want to remember a moment for a later, more serious or deliberate photo session.

Following The Best Camera Idea Through

This “best camera” notion is something that I long ago realized and took to heart and has dictated a lot of the style and subjects of my photography a mix of landscapes, observational and local travel style photos. It is also why, on the morning of September 11, 2001, I was carrying a camera on my commute into Manhattan that historic and haunting morning.

Chase has taken so many photos with his iPhone camera that he put together a book of the snapshots, moments and saved images in a recent book entitled The Best Camera and has an iPhone app and photo sharing site of the same name.

Buy The Best Camera Is The One That's With You by Chase Jarvis on Amazon.com

Your own best camera doesn’t have to be a wristwatch or a camera phone — I carry a point and shoot digital camera or my DSLR with me quite often. But if your only camera is one that you leave behind more often then not consider buying something you’re willing to travel with as a compliment.

Related Links

CSS3 Box Shadow in Internet Explorer [Blur-Shadow]

For a recent project I was given the task of creating a lightbox style help dialog. The dialog was intended to highlight content of an odd or unknown size in addition to the more controlled information box. Essentially a figure in the shape of 2 adjacent rectangles of variable sizes that needed to be highlighted. The backbreaker — the 8 sided popup needed a large, opaque & diffuse drop shadow to make it stand out off the content.

This was the perfect use case for CSS box-shadow, but its also a public facing promotional site that for good reasons couldn’t just thumb its nose atMicrosoft Internet Explorer. The value proposition for any new CSS property – to make things like shadows and gradients easy to develop and manage with one rule replacing old complex solutions – is lost if you still have to code for that old complex solution juggling multiple PNG images and layering in added markup. Still, that work sounded painful to write for IE6, IE7 & IE8 as well as Firefox, Safari and Chrome so I started looking for an alternative in the proprietary MS filters which are supported in Internet Explorer 5.5 and up.

Testing Through the MS Filters

All examples have been posted in this companion document.

Drop Shadow

drop-shadow example

filter:progid:DXImageTransform.Microsoft.DropShadow(color='#000000',offX='20',offY='20');

Drop Shadow is not really what you’d hope it was. This filter draws a copy of the original block and shifts and colors it based on the designated parameters. Unfortunately while the “drop” part works as expected there isn’t much control over the “shadow” and you’re left with quite a hard copy of the original. While it may be useful in limited cases its not a wholesale replacement for box-shadow.

Shadow

shadow example

filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='120',strength='20');

Shadow creates a gradient that isn’t so much of a shadow against another plane as it is an extrusion or motion trail behind the target element. Possibly interesting amidst an animation, but there isn’t a standard CSS equivalent so again it has limited uses.

Blur

blur example

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');

Blur is one of those filters that makes you wonder why they exist. It does exactly what it says and directly blurs the content of the block it is applied to making the content unreadable. I imagine it was implemented with the idea that it could be a scripted part of a transition [e.g. blurring an image in a slideshow] but as a static style its something to avoid. Or maybe it could be exploited…

The Cross Browser Solution

From experimentation I saw that while Blur is applied to the target content directly and would never work as is its parameters and appearance most closely resembled the control we have with CSS box-shadow. So how do we make “blur” apply to a “shadow”? We blur a duplicate of the target layer, position it behind the target and then “drop” the position of it as desired. Pay attention to the offset of the blurred layer as IE will include the edge of the blur as the top and left of the block.

<style type="text/css">
.example5wrap {
    position: relative;
    height: 100px;
}
.example5 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    -moz-box-shadow: rgba(0,0,0,0.50) 20px 20px 50px 5px;
    -webkit-box-shadow: rgba(0,0,0,0.50) 20px 20px 50px;
    box-shadow: rgba(0,0,0,0.50) 20px 20px 50px 5px;
 }
.ie-shadow {
    display: none; /* don't show in non-ie browsers */
}
</style>
<!--[if IE]>
<style type="text/css">
.ie-shadow {
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 102px; /* match target width */
    height: 102px; /* match target height */
    z-index: 1;
    background: #000;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');
}
</style>
<![endif]-->

solution in Firefox 3.5 and Internet Explorer 8

I’m sure there’s some way to calculate the Blur parameters to match the appearance of css3 property, but in this case I just eyeballed the IE numbers. Additionally,the extra div that that the blur filter is applied to can easily be scripted to be added in IE only and added to the DOM and styled to match the target object. Doing this in jQuery would look something like the following:

if ($.browser.msie) {
    var $elm = $(".target");
    var pos = $(elm).position();
    $elm.after("<div class='ie-shadow'></div>");
    $(".ie-shadow").width($(elm).width()).height($(elm).height()).css("left", (pos.left + 5) + "px").css("top",(pos.top + 5) + "px");
}

Conclusion

I’m not the first person to come up with this method of creating a box-shadow. Some searching the internets revealed a few similar setups and even an older javascript library to automate things, but I was unhappy with the explanation of the problem or basis for the code I found. There are certainly some limitations to this method. First browsers as recent as Firefox 3.0 will not see either solution so you should. Second, as you’ve can see positioning and z-index is used to overlap content and that may limit your layout options. Ultimately its another good tool to have in your arsenal along with standard ‘flat’ background images as well as more complex PNG based solutions. In the end that’s what we do as web developers — collect these little tools and tricks and whip them out when they best fit the project.

This is one article of 52 I’ll be writing in year 2010 on web design, technology, photography and probably some other topics. Please let me know what you think of the project and the topics covered.

Project 52 For 2010 – This Time With Words

At some point tomorrow I’ll be posting an article covering CSS box-shadow and some tricks to make similar effects in Internet Explorer. This will be the first article in a new weekly series of articles I’ll be writing in 2010 as a participant in Project52.

Project52 logo

Now, this isn’t my first time committing to a weekly project — I started a weekly digital photography project just last year. That resulted in around 15 weeks of semi-regular postings or so before I stopped. What makes me think I can stick with it this year? The motivations and audience is different this time around.

With the photography project the output was important to share, but it was as much about exploring my own workflow and bringing the use of Photoshop and that extra polish back into my workflow. What I found was that it did change my habits — and rather quickly. As the weeks went on it didn’t seem as important to me to pick one image to process and post to the world when I was paying more attention to everything I posted to Flickr or my store.

The audience for the articles and tutorials I plan to write this year is external and not internal and the motivations for sharing in January will still be there in December. With the speed things are changing in the web standards world with HTML5, CSS3, mobile browsers and new devices there will be plenty to cover in 2010. Mix that with digital photography and a new venture or two from that half of my life and I have plenty of topics to rant about or tutorials to write. Project52 is just the external push I need to drop a timeline and motivation to finish some drafts of articles or write up some ideas that have been floating around in my head for a while now.

There’s a list of nearly 700 participants on the Project52 web site. Some you may recognize from the web development world — I’m really looking forward to the entries from the likes of Kimberly Blessing, D. Keith Robinson and Derek Featherstone (who was the first person I saw to mention the project). But I’m also looking forward to reading a lot from names I don’t recognize and learning a lot from all the participants in 2010.