JavaScript visual effects V2, beta version

So, after some refactoring, renaming and general cleaning-up the Effects V2 stuff I finally declare it beta.

The effects require the Prototype JavaScript library (which is included with Ruby on Rails, but can be used in any web application framework).

UPDATE June 2: This page has demonstrations on the compatibility with various HTML elements

Features:

• Time-based animation
  All animation is now time-based, not frame based. So, if you tell an effect to last exactly one second, it will do so, regardless of the rendering speed of the browser.
• FPS settings
  Target frames-per-second option (will fall back to just not-so-many fps on slower computers)
• Transition modifiers
  • linear
  • sinoidal (eases in/out) [default transition]
  • reverse
  • flicker (randomizes)
  • wobble (well, wobbles)
• Set of combinable core effects
  • Scale()
  • Opacity()
  • MoveBy()
  • Parallel()
• Callbacks
  Add your own javascripts with the four callbacks beforeStart, beforeUpdate, afterUpdate and afterFinish
• Customization
  Lots of customization options with the core effects (namely .Scale)
• Basic engine options
  • from/to: allows partial runs, (e.g. change an elements opactiy from 75% to 25%)
  • duration
  • fps
  • transition
  • sync (allows to call on rendering manually, used for .Parallel())
• Powerful ‘prepackaged’ effects
  All these are thought of as examples you can tweak or use as templates for your own
  combinations of the core effects:
  • Fade() and Appear()
  • BlindUp() and BlindDown()
  • SlideUp() and SlideDown()
  • Puff()
  • Shake()
  • SwitchOff()
  • DropOut()

You can have a look at all this on the Effects V2 demo page!

Still missing is a new Version of Effect.Highlight and the “memory” ability of Effect.Scale; these two should be in shortly.

I really hope you’ll be able to add your own effect combinations and come up with cool stuff. Be sure to give to the community and share them!

Have fun.

Effects V2, new Slide effects

Quick update on a pair of effects that were requested: .SlideDown() and .SlideUp() now added to the demo page

Upload progress making progress

Sean Treadway has made some updates to the Upload Progress patch for Ruby on Rails that we co-developed.

If you don’t know what this is about, head straight to the Upload progress demo page!

So, give it a try—the more people are testing it, the sooner it will be in Rails!

Effects V2, new BlindDown effect

This functionality has been requested by some of you, so here it is:

Effect.BlindDown()—smoothly reveals an element by changing its height from 0 to whetever the full element measures. The element is NOT required to have a fixed height defined. It also works somewhat with tbody elements on tables (at least it does in Firefox).

But have a look at the Effects V2 demo page to see what this all amounts to.

Note that the name will probably change when it’s finished—if you have suggestions for new names for .Blind() and .BlindDown(), feel free to post a comment…

Agile Web Development with Rails, the beta version

The beta version of the upcoming book Agile Web Development with Rails is out. It’s the bible of Rails, and the Web 2.0 chapter was written be me (yeah!).

Take the train, don’t walk.

Yeah, I just said beta version of the book. Order now, and you get the beta PDF, and have the finished thing delivered when it’s ready.

Effects V2 – nearly finished

Most of the old effects are now reimplemented using my new Effects engine. Feel free to post your comments and wishes!

A new effect, Effect.MoveBy allows you to move elements around.

Also new: .Blind() and .SwitchOff()—two combination effects showing off what you can do with the new engine.

Head to the Effects V2 demo page

Update 2005/05/25: Done a bit of refactoring to allow standard from: and to: parameters. Added new core effect .Opacity(). Changed .Fade() and .Appear() to be prepackaged effects. Added .DropOut().

Agile Web Development with Rails

The book Agile Web Development with Rails which holds a chapter that I’ve written (on Ajax and the Prototype library) will be released (tentative date!) in July.

When it’s out, be sure to grab a copy! It’s the perfect companion to your Pickaxe. The book is really, really great. Thanks to Dave Thomas of the Pragmatic Programmers to have the chance to be part of making this wonderful book.

Effects, next level

A quick glimpse of what’s going to happen for the next version of my Effects stuff in the wonderful Prototype javascript library…

Check out the demo page for the next-generation effects.

These effects are thought of as a complete replacement of the current ones:

• You can now specify durations (which are now completetely independent of your users computer speed as they are time-based!) in a default way
• You can easily add your own Effects and combine them with each other.
• You can choose among some transition modifiers (it defaults to a smooth sinoidal transition) and priovide your own

Think of them as more mature now.

Of course, the effects are there to support the user to help her or him to tell what’s going on (especially for visual feedback with an Ajax application). But I can see artistic uses, too.

Note: it’s a work in progress, so check back often (or get the RSS feed). I’m happy to hear your comments. I hope to have most of the “1.0” effects migrated by the end of this week.

Fun tricks with the prototype Effects

Here are some hints and tricks for using the prototype effects.

(Note that my Typo CSS styles make some of the examples not work too good here. But you get the basic ideas. Play around yourself!)

Trick #1:
Using em units to allow Effect.Squish to scale text and child elements.

HTML for this:

<div onclick="new Effect.Squish(this)"
  style="font-size:1em;border:1px solid #888;
  background-color:#eee;
  line-height:1em;padding:1em;width:50%">
    <span style="font-size:1em">
    Testing Effect.Squish -- click me!
    </span>
    <div style="margin-top:0.5em;margin-bottom:0.5em;
    width:5em;height:2em;font-size:2em;
    background-color:#888;color:white;text-align:center;">
       I'm big!
   </div>
</div>

Trick #2:
Using multiple effects on one element.

Code:

<div
  onclick="new Effect.Scale(this, 150); new Effect.Appear(this);"
  style="background-color:#eee;width:50%;font-size:1em;">
  Click me to do a Appear <br/>
  and Scale at the same time!
</div>

Trick #3:
Mix em units and px units for great Scale usage.

Code:

<div onmouseover="new Effect.Scale(this, 120)"
  onmouseout="new Effect.Scale(this, 100)"
  style="width:50%;border:1px solid #888;
  background-color:#eee;padding:0.5em;">
    (move your mouse here)
    <div style="font-size:12px">
       I don't get scaled
    </div>
    <div style="font-size:1em">
       I get scaled!
    </div>
</div>

(Hmmm. Looking at what happens here, I guess there’s a bug in Effect.Scale. I’ll fix that soon.)

PostgreSQL on Mac OS X Tiger

If you go with the best (and you do that by using Mac OS X), you’ll want to use PostgreSQL with your Rails application (and not that other “database”).

So, what’s the deal?

First of all, install Rails on your Mac OS X Tiger system like described on this wiki page. Head straigt for the first option “Mac OS X Installer Package” of you are just starting out with Tiger, or check the other options for your setup.

Next, grab the PostgreSQL package from entropy.ch and follow the installation instructions for Mac OS X 10.3 (don’t mind the .3). If you’re like me, you’ll want full unicode support when creating your db, so change step 6 to something like (that’s all in one line!):

/usr/local/bin/initdb -D /usr/local/pgsql/data
--locale=en_US.UTF-8 --encoding=UNICODE

So, you’ve a nice running PostgreSQL setup on your Mac OS X Tiger box now. But, wait a minute—you want it to use with Rails, right? You want to grab the Ruby PostgreSQL driver from this page (get the snapshot version if you want to stay on the edge).
Follow the compile instructions. You’ll want to do a:

sudo make install

as the last step here. (Note: there’s a Gem version too, but it doesn’t compile out of the box on Mac OS X).

Then, get the Mac OS X native pgAdmin version. Just use the latest snapshot.

Untar, and launch. Have fun!

UPDATE: One thing that bugs me with this is that script/console seems to be broken, as I get a SIGBUS error from ruby-postgres. Webrick and script/runner work fine, though. Has anyone experienced this too?

UPDATE 2: The script/console not working correctly is discussed in greater detail and including a workaround over at the Ruby on Rails development site in ticket 1283.