Spastronica

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

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!!!

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

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...

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

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...

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