- All Topics:
- apps
- css
- dashboard
- games
- javascript
- php
- tehcl
- textmate
- tools
- video
- updated:
- 2010.01.18
- published:
- 2010.01.17
- topics:
- apps
- video
I lead the team of people for Student Unions & Activities at the University of Minnesota who built this touch screen building directory installed in Coffman Memorial Union. The directory is a web app running in WebKit on a Mac Mini attached to a touch screen monitor. No Flash was used. Many of the graphic elements like the panels and buttons are generated entirely with CSS3. The 3D floor diagrams were created with Google SketchUp. Here's a first look at the project which launched early on Friday, January 15th:
We used a usability test driven design process. We were able to completely redesign portions of the project in the week before it launched based on direct user feedback. We are continuing to test and make iterative improvements to the directory. Special thanks to the totally epic team that made this possible: Ellie, Ethan, Kamran, Ken, Sungho, and Trent. My role included project management, creative direction, information architecture (IA), core PHP and MySQL work, as well as JavaScript work on the drag-and-drop administrative tool for the map data.
- published:
- 2010.01.10
Well, yesterday was the last day of 2009, and today starts a new decade. Hello 2010. You are so shiny and futuristic looking. Anyway, I figured I'd succumb to the incredibly predictable year-in-review post. So what did I do in 2009? I did quite a bit actually, and writing this post helps to remind me of that... otherwise I just have a tendency to think of all the things I didn't accomplish. Also, I find years tend to blur together without any reflection. Here's a handy little timeline [made with pure CSS and no images, don't-chya-know] of oh-nine:
January
February
March
April
May
June
July
August
September
October
November
December
Phwew... I got tired typing that, and even more tired re-reading it. Where do I get off thinking I didn't get anything done in 2009? It is a year I should definitely be proud of. Other things from the year not in the timeline: a bunch of browser bugs I found and submitted over the course of the year, countless projects at my full-time job at the University of Minnesota (probably most memorable is launching a complete redesign of the Events & Conferences site), and a ton of new friends gained and connections made.
My stated resolution for 2009 was to, "Help the collective improvement of the web." I'd say I kept that promise to myself (probably a personal first for a New Year's resolution). Every bug I submitted, every patch I wrote, and every crazy thing I tried to get web browsers to do were all my contributions to the vast collection of brilliant people out there who all helped to make 2009 the year that web browsers really got awesome.
In 2010 I will continue to work to make the web more awesomer [sic], and I'm also making some personal resolutions to dig deeply in the mobile web, spend a lot of time on interactive design and games, and also make way more time for doodling and drawing.
Another important statement I made back at the beginning of 2009 was that I believe making connections is perhaps the most important thing to be doing. I am genuinely grateful for every single connection I made with so many people over the last year, both new connections and re-connections. 2009 was a banner year in that regard, but staying connected is just as much a 2010 New Year's resolution for me. I look forward to attending more conferences, working with more people, helping people succeed at their passions, and being inspired by the work done by all of you brilliant folks.
Have a great 2010! Oh, and if you are interested, check out the CSS for no-images-used timeline.
- updated:
- 2009.12.31
- published:
- 2009.12.21
- topics:
- css
- javascript
My latest project is a little "Web Two-Point-Snow" fun I put together as my personal holiday gift to the internet, or should I say winternet… winternet? Ok, I'll stop. Anyway, the Winternetizer adds festive, fancy, 100% Flash-free flakes of falling snow to any website.
You'll have a much better experience using a browser that Santa has on his Nice List such as Safari, Firefox 3.5+, or Chrome. In fact, in those browsers, I'd go so far as to say the snow looks so real you will find yourself flopping on the ground to make snow angels. Give it a try now before you read about the super cool technical details behind it:
(Incidentally, you can also add the JavaScript directly to your own site to delight your visitors. The Winternetizer project page has details.)
The Secrets to Better Snow
Yes, it is true that falling snow scripts go back probably over a decade. We've all seen it done using falling snowflake GIFs, or falling periods, or the trusty asterisk (which to be fair, is a great six-sided stand-in for an actual flake).
However, if you have a modern browser, you will have noticed that my falling snow script has depth-of-field blurring and parallax, flakes that rotate as they fall, and you lucky Mac users no doubt noticed the pretty actual snowflake graphics. The total effect is accomplished with text, CSS, and JavaScript — no Flash, no PNGs, no GIFs, no Canvas.
- published:
- 2009.12.02
- topics:
- css
- javascript
- video
FlipBox is another LightBox clone (a JavaScript photo gallery tool) where the new twist is a fun "3D" tile flipping animation effect. It is much easier to demonstrate than to explain, so I decided to do my first screencast with audio (be gentle!) so I could show you what FlipBox is all about. Incidentally, Mac OSX 10.6 Snow Leopard has a great free screen capture tool built into QuickTime. Sorry in advance if the volume is a little low. Real action starts at 0:45:
More About FlipBox
FlipBox is jQuery-based and makes use of my rotate3Di plugin to create a 3D-like isometric tile flipping effect using the CSS3 transform property currently only supported by Safari, Chrome, and Firefox 3.5+. (That's another reason why I wanted to record a video demo.) If you happen to have an awesome web browser, you can check out a live demo of FlipBox.
In it's current state, with only a little preparation by the user, FlipBox is already a simple to use LightBox-like tool. There's a few other demos with this concept I hope to put together, and I would also like to write proper documentation and do a release.
- updated:
- 2009.11.10
- published:
- 2009.11.10
Have you ever updated the markup and CSS for a website but when you load it in your browser it renders incorrectly because of the browser's cache? Have you ever told a co-worker or client that they need to "refresh" or "force refresh?" Chances are then that other visitors to your site are running into this problem, too.
Busy sites like Twitter, Digg, Boing Boing and others use methods to avoid browser cache issues. They find it important for their sites to always display correctly. You too can ensure visitors to your website will always get exactly the version of your style sheets and related image files that you want them to get.
I wrote an article for SitePoint covering solutions to browser cache problems titled "Overcome Your Caching Conundrums".
In the article I cover popular ways to deal with JavaScript and CSS file cache control, as well as a trick-of-the-trade method that will also help you manage your image caching. Hint: Have you ever wished that url() for your background images was relative to the styled-document's location instead of being relative to the stylesheet file's location? I used to feel that way, and it wasn't too long ago that I saw Eric Meyer tweet a similar desire. But now I am actually quite glad that url() works the way it does, and that has to do entirely with CSS cache controlling.
Now go and read the article on SitePoint. I hope you will find it interesting!