Wednesday, January 27th, 2010

Rolling a coke can around with pure CSS

Category: CSS, Showcase

Román Cortés is having a lot of fun with CSS tricks these days. He just built an example rolling CSS coke can that uses background-attachment, background-position, and a few other tricks to get the effect. No fancy CSS3 needed here! The key pieces used: < View plain text > css p {     background-image: Read the rest…

Posted by Dion Almaer at 6:33 am

4.7 rating from 160 votes

Friday, January 22nd, 2010

YouTube and Vimeo turn on HTML5 video tag

Category: Showcase, Video

At Google I/O the team showed a demo of YouTube running video right in the browser, instead of in the rectangle of Flash. Now, that URL takes you to the beta, which you can opt-in too. I am torn on what to write on this showcase though…. so, especially since it is Friday, here are Read the rest…

Posted by Dion Almaer at 6:21 am

4.6 rating from 44 votes

Friday, January 15th, 2010

A live video tool tip showcase of HTML5 video, canvas, and Ext

Category: Sencha, Showcase

David Davis of Ext doesn’t just have a cool name. He does cool stuff :) His latest post explains a showcase of melding HTML5 video and canvas support as he creates a live video tooltip. The example uses Ext JS web desktop and the code created delivers a special Panel that is able to deliver Read the rest…

Posted by Dion Almaer at 6:26 am
1 Comment

4 rating from 42 votes

Monday, December 21st, 2009

Side by side diffs that look great, all in the browser

Category: Showcase

We knew that we needed VCS support for Bespin. We also knew that we wanted to have support that is richer than just having command line access. Since we are in a rich UI environment we can do more, and one of the features I was excited to play with was diff visualization. Well, the Read the rest…

Posted by Dion Almaer at 10:10 am
1 Comment

3.5 rating from 26 votes

Tuesday, December 15th, 2009

3D CSS Parallax Effect

Category: CSS, Showcase

Roman Cortes has a fun parallax effect using just CSS and HTML. Scroll over the bad boy above and see it at work. Then view the source and have your eyes bleed :) < View plain text > HTML <style type="text/css">         a#a96:hover img {left: 224px}a#a96:hover b.d1 {background-position: 224px 0; width: 224px}a#a96:hover Read the rest…

Posted by Dion Almaer at 6:40 am

4.5 rating from 80 votes

Wednesday, November 25th, 2009

CBC Radio 3 Case Study

Category: Articles, Editorial, Prototype, Showcase

Phil Rabin of CBC Radio 3 has kindly written a guest post on his experience creating a fantastic Web interface for the station that uses Flash for audio, but a full HTML experience that maintains state from page to page. CBC Radio 3 is a community, radio station and user-generated independent music library which is Read the rest…

Posted by Dion Almaer at 6:05 am

3 rating from 36 votes

Friday, November 6th, 2009

Mockingbird: Cappuccino-based visual mockup tool

Category: Cappuccino, Showcase

Mockingbird is a nice Cappuccino based tool that lets you quickly mockup a wire-frame on the Web. Fire it up, build out your “pages”, drag and drop your UI, and then share it with your clients!

Posted by Dion Almaer at 6:19 am

2 rating from 93 votes

Tuesday, October 27th, 2009

BookGlutton: Dojo-driven eBook Reading App

Category: Dojo, Showcase

Aaron Miller and his team have released BookGlutton an online bookstore and social network meant to facilitate social reading. It features a Dojo-driven e-book reading app with chat and annotation, and the store now offers over 500 O’Reilly titles for sale. The site is built using Dojo and PHP and features pagination, real-time chat, group Read the rest…

Posted by Dion Almaer at 6:28 am
1 Comment

2.2 rating from 64 votes

Monday, October 26th, 2009

Be a CSS Ninja with your Font Dragr

Category: Firefox, Showcase, Typography

The CSS Ninja has created a Font Dragr drag and drop font tester: Font dragr is an experimental web app that uses HTML5 & CSS3 to create a useful standalone web based application for testing custom fonts, once you visit it for the first time you don’t need to be online to use it after Read the rest…

Posted by Dion Almaer at 6:34 am

1.7 rating from 53 votes

Friday, October 23rd, 2009

JIRA now has a live walk-through demo using jQuery

Category: jQuery, Showcase

Atlassian has created a new JIRA Interactive Tour that walks you through the application, live. We have seen a couple of these before, and this one is really cool. It is one thing watching a screencast of an application that you want to learn, but having an assistant that helps you inside the live app Read the rest…

Posted by Dion Almaer at 5:27 am

2.3 rating from 78 votes

Wednesday, October 21st, 2009

Apple goes live with HTML5 video

Category: Apple, Showcase, Video

Apple has a fair amount of video on their site, and now you will find it displayed via <video> As always, it looks very nice indeed. The video controls look very much like the new Quicktime X: All via the code: Of course, for all the deets on video, check out brother Mark.

Posted by Dion Almaer at 12:52 am

3.3 rating from 72 votes

Tuesday, October 20th, 2009

Cloudera Desktop, MooTools Update

Category: MooTools, Showcase

Aaron Newton of MooTools fame is now at Cloudera, the awesome Hadoop startup, and has posted about the rich Cloudera Desktop project he has been working on. In the post he discusses the implementation and how it uses new features in the new MooTools 1.2.4 release such as: MooTools Depender MooTools ships with a dependency Read the rest…

Posted by Dion Almaer at 8:30 am

2.8 rating from 51 votes

Monday, August 31st, 2009

Clamato: Smalltalk-esque runtime in the browser

Category: JavaScript, Showcase

As soon as we developed Bespin we wanted a world where we could create an application in the editor and see it live… and then edit it all live too! Server-side JS makes this quite possible. Clamato is experimenting in this way too, albeit slightly differently: Clamato is a Smalltalk dialect that is designed to Read the rest…

Posted by Dion Almaer at 6:31 am

4.2 rating from 19 votes

Friday, August 7th, 2009

Tori’s Eye: You can never have enough Twitter visualizations

Category: jQuery, Showcase

We posted on the audio + processing Twitter visualization this week, and today we have a new one. Luis Abreu and Quodis Labs have created a jQuery DOM based visualization, Tori’s Eye. It’s a twitter visualization animated with jQuery, fetches search rss results( has a default keyword, user can change ), and for each result Read the rest…

Posted by Dion Almaer at 6:44 am

4.1 rating from 58 votes

Wednesday, August 5th, 2009

HTML5 Audio + Processing(Canvas) Experiment

Category: Canvas, Showcase

Sebastian Deutsch has a nice new experiment that uses HTML5 audio + Processing (which uses Canvas) to visualize Twitter streams sync’d to music. In their words: We’ve created a litttle experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one Read the rest…

Posted by Dion Almaer at 12:55 am

4.1 rating from 29 votes

Tuesday, August 4th, 2009

Curve Explorer: Visualize with Ease

Category: Showcase, Utility

Chris Vanrensburg has created a curve explorer that gives you a nice visualization of curve functions which are used for animations (easing and the like). Chris has more: I looked at the work of Robert Penner, since it seems to have become the gold standard for motion curves. Nice stuff, and it inspired me. I Read the rest…

Posted by Dion Almaer at 6:43 am

4.4 rating from 22 votes