UI


Thursday, April 19th, 2007

Canvas Corner 1.0

Category: Canvas, UI, Unobtrusive JS

Christian Effenberger was inspired by the reflection code and decided to implement Corner.js. The library uses unobtrusive JavaScript and microformats to allow users to simply add class names to an img tag to render them with corner effects, all via Canvas. If you wanted to add a shaded corner you would say: < View plain Read the rest…

Posted by Dion Almaer at 8:27 am
28 Comments

++++-
4.4 rating from 94 votes

Monday, April 16th, 2007

LightWindow 1.1: A window to various media

Category: UI

Kevin Miller has released LightWindow 1.1, another in the trend of light boxes. Another one? After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. Granted some of them were very nice but only fit a specific purpose, others were a nightmare on the code end, and others were just Read the rest…

Posted by Dion Almaer at 7:12 am
24 Comments

++++-
4.2 rating from 82 votes

Tuesday, March 27th, 2007

Stripe Generator: Web 2.0 Go Faster Stripes

Category: Showcase, UI

You gotta love the Web 2.0. Only now do you get gems such as the Stripe Generator, a tool that lets you tweak a bunch of settings to produce the stripes that you need for your own Web 2.0 application.

Posted by Dion Almaer at 6:27 am
20 Comments

+++--
3.5 rating from 8 votes

Monday, March 26th, 2007

ShadedBorder: JavaScript Round Corners with Drop Shadow

Category: JavaScript, Library, UI

Steffen Rusitschka is keeping the rounded corner legend alive with his new RUZEE.ShadedBorder JavaScript library. Why another? JavaScript-only Photoshop(tm)-like rendering without external images Round corners Drop shadows Glow effects Borders with different widths Full support for liquid designs Anti-Aliasing On-hover support (except for IE 6.0) Disable some of the corners, e.g. bottom-left Change borders on-the-fly Read the rest…

Posted by Dion Almaer at 6:06 am
17 Comments

+++--
3.9 rating from 107 votes

Thursday, March 1st, 2007

ColorJack: Visualize color theory

Category: Showcase, UI

ColorJack allows you to visualize color theory with the sphere. This reminds us of Kuler, the user generated color app from Adobe Labs. It is pretty amazing that so many people are sharing color groups :)

Posted by Dion Almaer at 6:12 am
11 Comments

++++-
4.2 rating from 32 votes

Thursday, February 22nd, 2007

ClassAnim & HoverHijax: Keeping Presentation out of Your JavaScript

Category: JavaScript, Library, Toolkit, UI, Yahoo!

Jeremy Gillick wants to keep the peanut butter separate from his jam, and to aide this has written a couple of YUI extensions to help out: When you’re animating a rollover or fading some colors do you stop and thing what you’re doing? You’re putting the colors, dimensions and effects into your JavaScript! The presentation Read the rest…

Posted by Dion Almaer at 6:02 am
1 Comment

+++--
3.7 rating from 18 votes

Wednesday, February 21st, 2007

Automated JavaScript Vertical Flip Image Reflection

Category: JavaScript, UI, Utility

Ara Pehlivanian has created a simple reflect.js script that allows you to add reflection to your images using simple JS that adds just one DOM element. Using Ara’s API you can get as simple as: < View plain text > javascript var reflections = new ARA.effects.Reflection(); reflections.addImage("myImageID"); reflections.reflect(); or more advanced: < View plain text Read the rest…

Posted by Dion Almaer at 8:45 am
15 Comments

+++--
3.5 rating from 70 votes

Sunday, January 28th, 2007

Zooomr Popup Icons

Category: UI, Usability

Podtech’s LunchMeet vidcast has done an interview with Kris Tate and Thomas Hawk of Flickr rival Zooomr. Zooomr has a lot of nice features, but one thing that stood out in the demo was the use of popup icons that appear when you hover over the photo. As you hover, they show up in the Read the rest…

Posted by Michael Mahemoff at 7:40 pm
9 Comments

+++--
3.8 rating from 30 votes

Monday, January 15th, 2007

Weebly: Online Website Creation Tool using Ajax

Category: Showcase, UI

David Rusenko told us about his product Weebly, a web site creation utility written with copious amounts of Ajax utilizing an easy to use drag and drop interface. We’re trying to make a tool that’s easy enough for the majority of web users to use, and guides the user towards creating a complete compliant web Read the rest…

Posted by Dion Almaer at 9:02 am
13 Comments

+++--
3.5 rating from 42 votes

Friday, January 12th, 2007

Animation with Continuations

Category: JavaScript, UI

Kris Zyp has written an article discussing the demonstration using continuations in JavaScript to facilitate writing animations with straightforward linear code. The example is a bunch of bouncing gears that animate up and down as they bounce. Explanation When you click on the button, this calls the addGear function and starts a new “thread” of Read the rest…

Posted by Dion Almaer at 9:08 am
9 Comments

+++--
3.3 rating from 26 votes

Thursday, January 11th, 2007

XUL UI Widgets that Degrade

Category: JavaScript, UI

Cedric Savarese got creative over his winter break and decided to experiment with XUL in HTML. It shows that you can write XUL UI widgets that degrades gracefully to DHTML widgets in browsers that do not support XUL (IE, Safari, Opera). This time, I was thinking about the interface for the next version of the Read the rest…

Posted by Dion Almaer at 10:07 am
17 Comments

++---
2.2 rating from 119 votes

Thursday, December 21st, 2006

Create cross browser vector graphics with Dojo

Category: Canvas, Dojo, UI

Dylan Schiemann, co-creator of the Dojo toolkit, has written a broad piece on creating cross browser vector graphics with Dojo. The article delves into the new dojo.gfx library that abstracts the slight mess of SVG vs. Canvas vs. VML. One of the examples in the article discusses drawing a clock with this snippet that shows Read the rest…

Posted by Dion Almaer at 8:30 am
14 Comments

++++-
4.1 rating from 30 votes

Wednesday, December 20th, 2006

Do you hate splitpane views?

Category: UI

Jesse Kuhnert, the Dojo and Tapestry commiter, must have had one too many UIs with split-panes on his desktop. It drove him to write about why splitpane views suck..: I’ve recently been involved in some discussions surrounding ixd issues and attempted to use Yahoo Mail and Google Mail as examples of bad/good interface design techniques. Read the rest…

Posted by Dion Almaer at 9:27 am
26 Comments

+++--
3.9 rating from 47 votes

Thursday, December 14th, 2006

Googles Rounded Corner Generator

Category: Google, UI

Zach has picked up on google’s own corner generator. Google probably doesn’t want this to be a corner service, but for now you can create your own google-esque corners with URLs such as: http://groups-beta.google.com/groups/roundedcorners?c=999999&bc=white&w=4&h=4&a=tr The parameter list: c – the color, as either a name or a CSS-style hex color spec (RGB or RRGGBB) sans Read the rest…

Posted by Dion Almaer at 11:36 am
25 Comments

++++-
4 rating from 117 votes

Thursday, November 23rd, 2006

Google Pages Adds Nice Image Editing

Category: Google, JavaScript, Showcase, UI

When I heard about JotSpot heading to the Googleplex I was excited to know that Abe Fettig (Jot) would be teaming up with the brains at Google Pages, and I can’t wait to see what happens in the world of WYSIWYG editing tools. Google Pages just released a few features, and one of them is Read the rest…

Posted by Dion Almaer at 10:15 am
2 Comments

+++--
3.6 rating from 18 votes

Wednesday, November 22nd, 2006

Script.aculo.us 1.7 beta: Now with Morphing

Category: JavaScript, Library, Prototype, Scriptaculous, UI

Morphing with CSS is all the rage now, and Script.aculo.us has stepped up to the plate with their 1.7 beta release. The two main features are: Morphing Effect.Morph is added to the pack, along with a nice helpful any_element.morph to go with it. E.g. showing both styles to morph elements using the given CSS: < Read the rest…

Posted by Dion Almaer at 4:59 am
13 Comments

+++--
3.6 rating from 29 votes