This is mostly useful for other servers to evaluate javascript, without needing a direct bridge. I’m using it in Ruby instead of Johnson (which seems to have problems with GC) which provides a nice degree of separation.

Use:

/eval?js=12*12 => {“success”:true,”result”:144}

/eval?js=12*a => {“success”:false,”exception”:”ReferenceError: a is not defined”}

Context is maintained

/eval?js=this.a=9 => {“success”:true,”result”:null}

/eval?js=12*a => {“success”:true,”result”:108}

It’s also possible to supply a source file on disk and a context name:

/eval?js=func()&file=/abs/path/to/file => {“success”:true,”result”: “func output ok”}

Note that to be able to call functions, you’ll need to expose them using the CommonJS “exports” declaration.

Github Page

http://github.com/weepy/node_eval

Plugin for jQuery providing native support for missing CSS in IE. Currently provides:

• E > F (direct descendant)
• :hover (normally only available to a tags)
• E + F (sibling)
• [rel=attr] (attribute selection)
• :first-child and any other selectors containing : and supported by jQuery
• :focus
• plus others

How it works

• parses the stylesheets for rules that match a regex
• replaces selectors that match with corresponding rules with an internal class .cssie-x (x is an integer)
• add the class cssie-x using the original selector using jQuery
• for :hover and :focus, automatically setup up jQuery events to add/remove the .cssie-x class upon hover/focus

Usage

• include ‘cssie.js’ in your page after ‘jquery.js’
• $.cssie() on the jQuery.ready event
• You can cause the same behaviour on non MSIE browsers with: $.cssie(true)

UPDATE: it also handlers multiple class selectors (e.g .class_a.class_b)

See it here => www.chesstwit.com

It’s goal is simple: make it easy to play chess online with your twit friends and I’m pretty pleased with the result. You can login without typing your password (OAuth) and your opponent is sent a Direct Message to inform them. Now we just need to hit critical mass.

From a technical perspective, it’s a fairly straight forward Rails project running on Passenger, with UI written in jQuery.

Where it gets interesting is that chess logic is written in Javascript, which means it can be used on both the UI and the server side validation. The fantastic ruby gem Johnson is then used server side to validate the moves.

I’m a big fan of this technique, so the Johnson gem is a god send. The alternative would be to write the logic twice in both ruby and javascript, something we did on 64squar.es. It works, but it’s a pain if you want to change the rules and great discipline is needed to keep the code bases in sync architecturally. So it worked ok for Chess, but any game where the rules are still in development, or if you want to produce many games it would be difficult.

We’ve got quite a few games apps planned for the future using this technique, so keep any eye out!

def self.find_or_create opts
  first(:conditions => opts) || create(opts)
end

It’s use is simple:

 Membership.find_or_create :channel_id, :user_id

Now there is a dynamic finder self.find_or_create_by_XXX, but it isn’t useful in the same way.

Is there a reason why something like that method isn’t in AR core ?

After Playing around with _lots_ Growl style plugins for jQuery, I came to the impression that whilst they mostly looked nice, they all were very bloated and difficult to customize.

So – of course – I rolled my own! Only this one is different.It doesn’t have curvy corners, or callbacks, or other distractions. It’s solid, works well, looks pretty decent and – oh – it’s only _20_ lines of code!

Being simple means it’s very easy to understand and easy to change to your own tastes.

Screeny

Installation

• include vanilla-notify.js
• depends on jQuery (1.3.2 tested)
• include the relevant CSS somewhere

Examples

 $.notify('Hello')

 $.notify('<h1>Hello</h1><p>Hi there</p>')

 $.notify('With class: error', {klass: 'error' })

 $.notify("I'll be here for 7610.4 years!", {delay: 1e10 })

Links

• Javascript File
• Github Project
• Issue Tracker

Compatibility

Tested in

• Firefox 3.5
• Safari 4

If you think you can go =>=>here <=<=

A jQuery factory for creating sprites from images, including transparent PNG’s in IE

Features

• Works from a rectangluar grid of sprites.
• Fast, good for rendering large numbers of similar sprites
• Preloading CSS for large images (will add the ‘loading’ class to the element until the image has been loaded)
• Can use transparent PNGS for IE6 and IE7
• Light mode, using half the number of elements (only suitable for non-transparent images)
• Easy to update sprite to a different index – useful for animation

Example of use

$().ready( function() {
  var options = {
                  src: "http://..." ,
                  width: 60,
                  height: 60,
                  index: [2,6],
                  light: true
                }
  var factory = new SpriteFactory(options)
  $("#mydiv")
    .append(factory.generate([1,2]))
    .append(factory.generate([1,3]))
})

Also see Demo

Options

• ‘src’ => location of source image
• ‘width’ => width of sprite
• ‘height’ => height of sprite
• ‘index’ => location of required sprite on image
• ‘light’ => Only use one element (no good for IE6, IE7)

Links

• Demo
• Javascript File
• Github Project
• Issue Tracker

Compatibility

Tested in

• Firefox 3.5
• Safari 4
• IE 6, 7, 8

jQuery.path provides a method of multidimensional animation, and in particular provides a method for animating along bezier curves and arcs.

Bezier

Example: animate along a bezier path. See demo

var bezier_params = {
    start: {
      x: 185,
      y: 185,
      angle: 10
    },
    end: {
      x:540,
      y:110,
      angle: -10,
      length: 0.25
    }
  }

$("my_elem").animate({path : new $.path.bezier(bezier_params)})

Bezier curves are made form a start point, an end point each with a control point

• start is starting point
• end is the final point
• x,y indicate the coordinates at that point. Required
• angle is the angle of the control point from the line joining the start and end. Optional, default is 0
• length is the distance from the point to it’s control point as a ratio of the distance from start to end. Optional, default is 1/3

Arc

Exampe: animate along an arc. See demo

var arc_params = {
    center: [285,185],
        radius: 100,
        start: 30,
        end: 200,
        dir: -1
  }

$("my_elem").animate({path : new $.path.arc(arc_params)})

• center is the coords of the centre of an imaginary circle that contains the start and end point
• radius is the radius of this circle
• start is the angle of the start point. 0 is “North”, measured clockwise
• end is the angle of the start point. 0 is “North”, measured clockwise
• dir is the direction to move in. Only required if not obvious from start and end (e.g. if start is 100, end is 30, but you want to animate clockwise)

Other Paths

It is trivial to create other paths, or even animate other parameters. E.g:

var SineWave = function() {
  this.css = function(p) {
    var s = Math.sin(p*20)
    var x = 500 - p * 300
    var y = s * 50 + 150
    var o = ((s+2)/4+0.1)
    return {top: y + "px", left: x + "px", opacity: o}
  }
};

$("my_elem").animate({path : new SineWave})

Links

• Demo
• Javascript File
• Github Project
• Issue Tracker