UIZE JavaScript Framework BLOG

Spastronica

2010-04-14T14:07:00.000-07:00

OK, so this has absolutely NOTHING to do with UIZE, except that it occurred while doing development on some UIZE code.

So, I enjoy listening to electronica music while I code (what software engineer doesn't, right?). In particular, I was listening to Space Station Soma, one of SOMA FM's streams, and I started getting rather aggravated by the particular piece I was listening to. It seems to fall into this peculiar little experimental / avant garde / unlistenable subgenre of electronica music that is particularly aggrating in a kind of frenetically spastic way.

Therefore, I have coined the term "spastronica". It's the words "spastic" and "electronica" combined together in what I believe is technically referred to as a portmanteau. A quick search on Google brings up not a single page for this word. Not one! Therefore, I claim this term as my invention, and this post shall be the first proudly indexed result for this brand spanking new, hot-off-the-presses, freshly minted, steaming-its-freshly-baked-pie-sitting-on-the-window-sill-and-waiting-to-be-stolen-aromas, term spastronica.

Dion Almaer reports on Virtual DOM Events

2010-01-17T18:36:00.000-08:00

Dion Almaer, co-founder of ajaxian.com, reports on the UIZE JavaScript Framework's support for a useful new construct called Virtual DOM Events.

Response to the article by readers is overwhelmingly positive, with a high rating from many votes and a healthy serving of lively comments and feedback. From the feedback, it is clear that the folks behind YUI are thinking along similar lines, although their "synthetic events" feature is not as fleshed out at the time, nor is it thoroughly documented like the UIZE Virtual DOM Events feature. This article struck a chord, and it took all of a day for developers behind jQuery to transcode the UIZE implementation and offer equivalent features. Well, you know what they say: "Imitation is the sincerest form of flattery". UIZE considers itself flattered. Dion links to two examples on the uize.com Web site in this article: the Edge Virtual DOM Events and Virtual DOM Events examples.

READ THE ARTICLE

Look, ma... no images!!!

2009-12-14T22:18:00.000-08:00

It's really nice to see what is possible when combining the UIZE JavaScript Framework with the neat new features of CSS3 - like text shadow - that are being implemented in the newer versions of Firefox, Chrome, Safari, and Opera (and some more that I'm probably missing). No, it's not clear yet whether IE9 will support text shadow, but hopefully they will join the party - there's fun to be had for all.

In this new example that I put together, a new method of the Uize.Fx module is being used to create CSS style "fades" - or gradients - across a series of nodes. In this case, the nodes are links in a navigation menu. The UIZE JavaScript Framework lets you perform compound fades and supply different curve functions to different components of a fade. So, for example, you could provide a different curve function for the red color channel of the background color as the curve functions you provide for the green and blue color channels. This allows for some pretty radical and nuanced transitions. No, the same linear curve applied to everything is definitely not interesting, anymore. Compound non-linear is the new black.

Take a look at the example and experiment with the different presets. If you've got the time, hang up your coat and linger for a while. Once you get the hang of it, you'll be creating your own tasty gradients

http://www.uize.com/examples/fade-css-style-across-nodes.html

Animating the CSS Text Shadow Property

2009-12-04T15:32:00.000-08:00

Just finished up with adding support for text shadow animation to the UIZE JavaScript Framework. I think you’ll find something interesting to look at here…

http://www.uize.com/examples/hover-fader-text-shadow-animation.html

I love the fact that Firefox 3.5x fully supports the text-shadow property. It's nice to see it in Google Chrome, Safari, and Opera, as well. Would be nice to get the IE folks on board. Performance seems to be best in Safari, so far. Chrome 3.0 seems to have some rendering issues with text shadow: not quite as smooth as it could be, and there appears to be some interaction between the shadow and the text above it. Nevertheless, the results are pretty consistent between all the browsers that support text shadow, which is encouraging.

When animating text shadow, it's once again pretty compelling to apply different curve functions to different components of what you're animating. So, a text shadow can move, or its blur radius can change over time, or its color can change... but why should these all have to happen at the same rate? I just spent a bit of time playing with settings and came up with the short list of presets you'll see on the example page, but I can just tell from my cursory experimentation that there's a whole world of Hollywood movie credit like text effects awaiting the creative mind with these new features of CSS3. My favorite preset so far is the "Sci-fi Materialize", which makes me think of a Star Trek transporter.

ASCII.jp gets excited about image wipe effects...

2009-11-22T16:04:00.000-08:00

The Japanese Web site ASCII.jp has released a follow up article to their first introductory review of the UIZE JavaScript Framework. This time, they take a look at UIZE's support for sophisticated image wipe animation effects. The writers do a great job of capturing snapshots of image wipes in progress to complement the sample code provided. Another nice look at the power of UIZE from ASCII.jp. Domo arigato!

http://ascii.jp/elem/000/000/475/475252/

UIZE gets review on ASCII.jp

2009-11-02T21:58:00.000-08:00

The Japanese Web site ASCII.jp has written a nice multi-page review of the UIZE JavaScript Framework, complete with their own samples. Sweeeeeeeeeet! Hopefully we will see UIZE catching on in Japan.

http://ascii.jp/elem/000/000/466/466515/

A humble widget...

2009-10-21T20:00:00.000-07:00

A humble widget... but glowy (at least, in browsers that support text-shadow, like Chrome and Safari).

It's cool to see browser-rendered text with effects that are actually useful in the application's styling.

OK, so it's a humble widget. But then, I threw it together in a couple of days. More a UX exercise than anything else. I wanted to add some little UX touches to this type of critter. For example, it's always bugged me how the percent key behaves in that ugly ass Windows calculator whenever I've used it. Why can't you just do "85 % 15 =" to get 85 percent of 15? Or how about "15 x 85%"? Or how about "15 + 20%"? Or "15 - 20%"? Well, the Windows calculator does the last two, but you have to click the equals button after the percent - annoying. Even more annoying, if you try to reiterate the operation using the equals key -- just like doing "2 x = = = =" to get 2 to the power of 5 (remember that?) -- you end up adding the percent as it resolved the first time, rather than adding the same percent over and over. So, I came up with what I thought was a better implementation, where "15 + 20% = = = =" would just keep compounding the 20% increase on the running value.

Besides the percent implementation I wanted to be able to use the minus key to do things like "3 x -5 = -15". The Windows calculator just turns that into "3 - 5". Other little touches that I threw in are: entry in the display field, with filtering out of unacceptable characters, triggering of operations with the keys "*", "/", "+", "-", "=", "%", "m" (memory plus), escape (clear), and simulation of clicking the buttons on the keypad when typing keys in the display field. Finally, buttons on the keypad are disabled when they can't be used. Type in "2.5" and the "." button becomes disabled (can't have two decimal points in the same number or we might have to send the Number Nazis after you). Try getting the square root of "-1" and you get an extreme illustration of this principle.

See it in action here: JavaScript calculator widget

Let's get non-linear...

2009-09-01T23:28:00.000-07:00

Riffing on the curves work that I did recently, I tried to see what juicy effects could be produced by taking some boring old CSS and throwing a few curves at it. Now, you can do some pretty fun things when you get non-linear. We’ve all seen the JavaScript animation effects where you animate the value of a CSS style property over time. It gets a little more interesting when you start animating several CSS style properties over time – but still not interesting enough for me (I have an appetite for the strange).

Work that I did around animation made it possible to animate multiple CSS properties in the same animation, but then also provide different curves for the different properties being animated. So, if you’re animating background color and border color at the same time, why do they both have to transition at the same pace – or in the same manner? Sure, you can throw an easing equation on the entire animation, so things get bouncy and stuff, but that’s still not interesting enough. What if it were easy to make the border color animation bouncy, and the background color animation an ease-in? Now things start looking interesting. And what if you could even… prepare yourself now… provide different curves for different components of color values?!?!? That would just be insane! So, of course, I went and tried it. Result: beauty. It’s truly lovely to see different animations that all have the same start settings and that all have the same end settings, but that feel wildly different because of the curves that govern what happens between point A and point B. Example: you fade the border color from black to white. OK, so somewhere in the middle it’s gray, right? WRONG! Not when you’ve got some juicy curves doing different things for red, green, and blue.

I put together a little example to demonstrate what happens when you go and get non-linear on animation’s ass. It’s a demo of the hover fader widget that is being used to create animated menu effects. Yeah, pages get sticky when people spend five minutes just tickling a nav menu repeatedly to see pretty colors. Hey, I won’t vouch for all of the settings I came up with: some of them are just outlandish and should NEVER be used on any Web site, or risk getting a knock on the door from the usability police. But, then again, life is too short to be boring. One should use the awesome power of curves wisely.

PS: Some of my favorites are “A Fading Fusion of Fuchsia and Morning Glory”, “Spectral Background Fade Out”, “Prismatic Border”, “Gold Ingots”, and “Aqua Border, Oscillating Tail Slows Down Towards End”. But, they’re all kind of fun. And this is just what I could come up with, with a little bit of tooling around and imagining what curves might produce what kinds of effects.

http://www.uize.com/examples/hover-fader-color-effects.html

IMPROVED MODULE: Uize.Widget.Calendar

2009-09-01T22:31:00.000-07:00

The Uize.Widget.Calendar module has been improved with the addition of the new snapViewOnValueChange set-get property, which lets you control whether or not the values of the month and year set-get properties should automatically be set when the value of the value set-get property changes.

When this property is set to true, the month and year properties will be automatically set when the value of the value property changes, to ensure that the newly selected date is in view. In this mode, the values of the month and year properties can still be changed so that the currently selected date is not in view, but whenever the value property is next modified, the month and year properties will be "snapped back" to the month and year of the selected date.