Gruber posted today on Daring Fireball. That the The New York Times Skimmer prototype is still available. It’s rare fascinating look at the the process that likely went through to in development of this new site:

• The New York Times Skimmer (launch version)
• The New York Times Skimmer (prototype version)

Who knows how long the prototype will remain up so go now. I’ve also added screenshots below in case the prototype goes away.

Prototype - home page

Final Version - home page

Prototype - article

Final Version - article

First of all i gotta say that this is an excellent use of modern javascript techniques. They are using the awesome jquery framework to pull in their RSS feeds and populate the skimmer ad for the animation effects.

The two versions seem to be mostly different aesthetically. There are differences between the two javascript functions but I haven’t dug into them. The most obvious UI changes with the final version are:

• Moved the nav to the right
• Removed the dark top bar and lightened the palette as a whole
• Added raised dropshadow effect around main content area
• Use of the nyt font for headlines (using Typekit.com service)
• Altered the typography (all caps for nav, removed blue from headlines, increased line-height slightly for excerpt text)
• Addition of a byline with the journalist’s name
• Articles now load in a overlay popup with the skimmer remaining visible behind it, rather than a slidedown which covers everything except the nav.
• Home Page name changed to Top Stories

All in all it’s a excellent improvement between the prototype and the final version. They went from what was essentially a mock iTunes app to a more readable approach that focuses more on the content than the navigation.

The final design recalls more the feeling of a paper, while still maintaining the clean webified rss reader approach. I especially love the use of their typeface for the headlines and the removal of the blue link color which makes it feel less like a list of links to be clicked though immediately and more like a something that deserves to be read throughly.

Still however I do have two main critiques from a UI perspective…

First a small critique: The only way to close the popup are to use the “Back to Section” button or to hit the Esc key. Instead of this approach, they should have used a simple close button on the upper right. Also clicking on the background should close the popup as well (this is how most overlay popups work).

The biggest issue however is that clicking on an article loads iframe to load the entire page. It’s a shame really. They’ve gone through all this effort to create a clean ajax approach which makes the online version of their paper fun to use and then they ruin it by dragging the user back to their cluttered site. It would have been simple to use ajax to show only the article content in a clean easy to read manner. Maybe they did this because of advertising or maybe it was because they thought iframes would be easier to code—whatever their reason, it turns the Skimmer into nothing more than a gimmick.

Small Fix for IE. CeeTip v1.0.1

Announcing without much fanfare CeeTip, a basic jquery tooltip plugin which works smoothly with CeeBox (v2.0.9 and higher).

I couldn’t find one I wanted* which also worked properly with CeeBox**, so I borrowed code from vTip, turned into a jquery plugin and modified it as follows:

• moved all the css to the javascript (it’s so minimal that it seemed silly to have another css file.)
• added some optional settings.
• added a minimized version (only 1.6KB).

Download CeeTip 1.0.1

You can also find CeeTip on Github

* the problem I was having finding a tooltip is that several were either ugly or their file size was way too big.

** Other tooltips can work as long as they either somehow keep the title tag intact or they store the title in linkelement.t on the link in question.

Erg. Note to self Safari (webkit) wrongly considers typeof /regexp/ == ‘function’ when all the other browsers use typeof /regexp/ == ‘object’

CeeBox 2.0.7 released with bug fix for Safari/webkit that effected video embedding. Hopefully that’s the last of the bugs.

On a side note, I changed comments on my blog to be in reverse chronological order and put the comment field at the top as a temporary fix to the “OMG there are so many damned comments!” issue on some of the posts. I will likely revamp comments with a nested comments plugin or something when I revamp catcubed.com.

Again I had nifty idea. Use an external JSON file to add more video support so that I and others could release additional video support without releasing the main jquery.ceebox.js file and without increasing to the bulk of ceebox. Makes it easy for sites to add support selectively too so that CeeBox is more an adaptive tool rather than a heavy do everything.

Get it all working too for in the new CeeBox 2.0.6… which also include a bug fix for video galleries. Missed a bug in my checking during the 2.0.5 release.

It’s my first time messing with JSON. Pretty nifty cool stuff.

I released version 2.0 of CeeBox earlier this month. On the way to 2.0, I most likely completely rewrote the thing 3–4 times as I learned new and better ways to do things. Numerous times I would be riding on my bike and suddenly have inspiration for a new solution. Other times I would just dive into another javascript tutorial and find the answer laying there.

The development of CeeBox It’s been a long road and has taken a lot more of my time than I originally anticipated, but it’s been a great learning experience. I highly recommend anyone who wants to learn more javascript  to create a plugin for their favorite framework. Personally I recommend jQuery though they all have their strengths. Tripwire magazine has a great writeup on all of the main javascript frameworks.

I just released 2.0.5 today which fixes a bug that was submitted by one of my readers (I am thankful for everyone who submits bugs) and adds the last bit of functionality I wanted to include: namely, the ability to add additional video player support (relatively) easily. This last bit was made possible by some knowledge I gained from John Resig’s awesome and simple Learning Advanced Javascript tutorial and a better grasp of regular expressions.

Anyway, I think I’m finally happy with CeeBox as it stands:

• It’s pretty small for a script with this much functionality (12KB minimized). There are lightbox style scripts which are smaller but they have less functionality.
• And there are lightbox style scripts that are bigger and also have less functionality
• Really, I think it has become is one of the best full functional lightbox clone scripts out there for two main reasons:
  • The only one that tops it for support of various video sites is the mootools based mediabox advanced which is a pretty impressive plugin (though it’s 18KB). But then again additional support can be easily added to CeeBox.
  • There are few that offer galleries for videos and none that I’ve seen that make it so easy to create galleries (there is no need to add gallery names in the class or rel for every damned link, just activate the ceebox function on a parent element)

There are a couple things it can’t do which I may add later, but I don’t need them at the moment, so I’m solidly gonna take a break from adding more functionality:

• It doesn’t currently support direct links to quicktime, wmv, or mp3 natively but you can use the public function $.fn.ceebox.popup to do that if you want.
• A number of video players are difficult if not impossible to add native ceebox support for because of the automatic detection method I use for video embeding.
  • Daily Show (and a number of other sites) don’t include a id in the link to their video page, so I can’t automatically create the src link.
  • Flickr video does include the id, but there is no way to differentiate from the link itself which is a page with a photo and which is a page with a video. It would be fairly easy to add support for video but then it would assume every link to flickr was a video link. Clumsy to say the least.

I will continue to issue bug fixes when required, but the feature additions will slow to a trickle. Most likely I I will let it sit at 2.0.x for a while until I’m confident that every bug is squashed, and then I will promote it to 2.1.

With CeeBox wrapping up, I have a number of additional personal web projects that I’d like to get to.

• CeeTip – a basic small tooltip that works with CeeBox. (I already have a working version of this that I use, but I’d like to rework it and release it officially)
• CeeBox wordpress plugin – I have a half-assed CeeBox WP plugin that I use for this site, but I need to learn more php to do it right. If anyone with more Wordpress plugin knowhow wants to help with this that would be great.
• Color Animation – I have an inkling to improve the color animation plugin, as it has been sitting there stagnant since 2007. It’s got a few issues that others have submitted and could use a little improvement, but it’s been ignored by it’s creator. Supposedly the jQuery UI has better color animation support, but I don’t need the whole UI library for every project.
• CatCubed overhaul – In the upcoming months I will be overhauling this site.

Anyways, I’m out. This post turned into something much longer than expected, but then again I’ve been working on this a while so it deserves a solid post to mark the conclusion.

CeeBox is now a full fledged jQuery plugin. I’m pretty proud as this is the first full fledged jquery plugin I’ve ever coded.

You can download it directly from github: Ceebox 1.4 Make that CeeBox 1.4.1 (I found a small error in the minimized css file and then decided to reorganize the css file a bit to make it easier to change graphics)

Make that

If you are running CeeBox 1.3.4 and it makes you happy feel free to skip this upgrade. There is no additional functionality (though it is slightly more usable as a jquery plugin). I did however do a bit more code optimization reducing the size of the minimized version to 8.4KB which is smaller than a majority of the lightbox-like plugins out there—it’s even slightly smaller than Thickbox which this was originally inspired from.

Screenshot of it in operation (Note the next button which is the right side of the image is rolled over):

I am also working on making a WordPress plugin out of this. Actually I did create a basic CeeBox wordpress plugin already but it is not ready for release.