Astonishing photoshop alike image effects through javascript and canvas/vml

corner.js: Simulates a whole bunch of image effects! The script allows you to add individual corners, shadings and shadows to images on your webpages.

sphere.js: Simulates a spherical image effect! The script allows you to add an spherical picture effect with individual zooming, shading, shining, transparency and colors to images on your webpages.

glossy.js: Simulates a glossy shaded and beveled button look! The script allows you to add individual corners, shadings and shadows to images on your webpages.

instant.js: Simulates an instant picture look including tilt! The script allows you to add individual colors, tiltings and shadows to images on your webpages.

bevel.js: Simulates a whole bunch of image effects! The script allows you to add bevels with individual glowing, shading and shining to images on your webpages.

shiftzoom.js: Supports zoom & pan functionality! The library allows you to add/remove zoom and pan functionality to oversized images on your webpages.

slided.js: Simulates a slide frame look including gradients! The script allows you to add individual colors, shadings and shadows to images on your webpages.

filmed.js: Simulates a film strip look including reflection! The script allows you to add individual colors, shining and shadows to images on your webpages.

mapper.js: Emulates native area highlighting! The script allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG).

busy.js: Supports native spinner animations! The library allows you to add/remove loading indicators to block-level elements on your webpages.

curl.js: Simulates a page curl image effect! The script allows you to add curls with individual paperback color, shadow opacity and size to images on your webpages.

edge.js: Simulates masked image edges! The script allows you to add individual masks (inc. inbuilt mask) to images on your webpages.

reflex.js: Simulates a Cover Flow™ image effect! The script allows you to add individual borders, tiltings and reflections to images on your webpages.

loupe.js: Simulates an authentic looking magnifying glass! The script allows you to add a loupe for magnifying (inc. start viewpoint) to an image on your webpage.

http://www.netzgesta.de/cvi/

Ten Javascript Tools Everyone Should Have

JavaScript frameworks have exploded on the scene over the last few years but they're no replacement for a good toolbox: those little snippets of code you seem to include in every single project.

http://www.hunlock.com/blogs/Ten_Javascript_Tools_Everyone_Should_Have

PURE Unbobtrusive Rendering Engine

A simple and ultra-fast templating tool to generate HTML from JSON data
The representation (HTML) and the logic (JS) remain totally separated

http://github.com/pure/pure/wikis

Ruby on Rails Code Quality Checklist

1. Each controller action only calls one model method other than an initial find or new. (Make custom .new or .update methods in the model with all necessary). ...
2. Only one or two instance variables are shared between each controller and view. ...
3. All model and variable names are both immediately obvious (to a new developer) and as short as possible without using abbreviations. ...
4. All custom "finds" accessed from more than one place in the code use named_scope instead of a custom method. ...
5. A .find or .find_by_ is never called in a view or view helper. ...
6. There is zero custom code that duplicates functionality of a built-in function in rails. ...
7. Code has been aggressively DRYed during development. ...
8. All functionality used in two or more models has been turned into a library/module. ...
9. All logic duplicated between two or more apps has been turned into a gemified plugin. ...
10. STI is not used anywhere ...
11. Every design choice should yield the most simplistic design possible for the need of users at the current time. No guesses for future functionality were designed into the application. ...
12. Close to full test coverage exists at the highest level of the application: on and between controller actions. Coverage is highest for code used by the most number of end users. ...
13. All tests pass before code is merged into a shared repository. ...
14. Every fixed defect on a deployed product has tests added to prevent regression. ...
15. Every plugin installed has been code reviewed. ...

http://www.matthewpaulmoore.com/articles/1276-ruby-on-rails-code-quality-checklist

Bluff. Beautiful graphs in JavaScript

Bluff is a JavaScript port of the Gruff graphing library for Ruby. It is designed to support all the features of Gruff with minimal dependencies; the only third-party scripts you need to run it are a copy of JS.Class (about 2kb gzipped) and a copy of Google’s ExCanvas to support canvas in Internet Explorer. Both these scripts are supplied with the Bluff download. Bluff itself is around 8kb gzipped.

To draw a graph, you create a new Bluff graph object using the id of a canvas element on the page, set some options, add the data and labels, then tell the graph to draw.

http://bluff.jcoglan.com

How to Create an Image Selection Plugin for tinyMCE with Ruby on Rails

TinyMCE is a great content editor written in javascript from the folks at Moxiecode systems. We created a plugin for tinyMCE that allows users to select images from a selection of thumbnails instead of having to type a URL into a popup.

http://wiki.rubyonrails.org/rails/pages/HowToUseTinyMCE

Part 1: http://hackd.wordpress.com/2007/08/23/how-to-create-an-image-selction-plugin-for-tinymce-with-ruby-on-rails/

Part 2: http://hackd.wordpress.com/2007/08/28/part-two-how-to-create-an-image-selection-plugin-for-tinymce-with-ruby-on-rails/

TinyMCE GZip Compressor Ruby on Rails Plugin

DOM Ready for prototype

If you are tired of waiting for your whole page to load including images, flash, ads and movies before your javascript executes? Well then you are someone like me.

Dan at Vivabit created the DOM Ready extension for the Prototype framework which allows you to start executing code when the DOM is ready and all elements are available, leaving the images and other element loading in the background. Very nice work and something i’ve been waiting for a long time!

http://www.skyrocket.be/2006/10/11/dom-ready-for-prototype/

A Technique for Lazy Script Loading

Bob Matsuoka has written a guest article on the topic of lazy script loading. Thanks so much Bob!

A recent article "Lazily load functionality via Unobtrusive Scripts" discussed how to lazily load Javascript script files by appending script elements to the HEAD tag.

While this works as expected, I've found that for best results, you should also consider tracking which scripts have been loaded in order to prevent re-loading an already loaded script, and more importantly supporting callbacks so that you can guarantee loading of scripts prior to calling functions that depend on that code.

LazyLoader.load('js/myscript1.js');

http://ajaxian.com/archives/a-technique-for-lazy-script-loading

MSN is now implementing a technique for loading JavaScript in a way that doesn’t stall the rendering of the document. They use Dynodes, a technique I also recommend for loading functionality on demand so it only consumes bandwidth when it is needed.

http://www.artzstudio.com/2008/07/beating-blocking-javascript-asynchronous-js/
http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
http://www.jspatterns.com/javascript-includes-and-domcontentloaded-event/

Why JavaScript helpers in rails are evil

Ruby on Rails gained so much attention and appreciation mostly because it simplifies the development process of AJAX-driven applications. When I started to learn Rails I was already very familiar with other MVC-based frameworks, and actually I’ve created one myself (in PHP5) in my previous work. My framework also uses Prototype JavaScript library, so when l was learning Rails it was nothing new when I saw “Ajax.Updater(...)”. I remember that when I added first AJAX-feature in the Depot (it’s a tutorial application used in well known “Agile Web Development in Ruby on Rails” book) I was shocked about how simple it is, but then I looked into the HTML output and it shocked me once more…

http://blog.solnic.eu/2007/10/30/why-javascript-helpers-in-rails-are-evil

Using RJS without calling the server

If you want an easy way to use visual effects on your page or to manipulate the DOM in an AJAX style way but without making a call to the server, then take a look at this helper method...

Sometimes there are times when you want to use Rails' built-in RJS features, but without hitting the server. For simplicity sake, let's imagine that you want to visually highlight an area of the page when a user clicks on a link, but you don't want to make a call to the server for something as simple as this. Well you can do just that using the link_to_function helper in the view.
link_to_function

link_to_function is normally used to provide a clickable link on your HTML that will call a specified JavaScript function. However it can also take a page block in exactly the same way that you use RJS templates. When the link is clicked, it will execute the JavaScript generated by the RJS block. Take this example...

‹div id="menu">Make me flash!‹/div›
‹div id="highlight_link"›
<%= link_to_function "Click me!" do |page|           
       page['menu'].visual_effect :highlight
       page['highlight_link'].remove                  
    end %>
‹/div›

This little snippet of code will create a link that when clicked, will highlight the menu div and then remove the actual link from the page itself. Remember: you'll need to include the Prototype library for this to work, by adding ‹%=javascript_include_tag :defaults %› in the ‹head› of your HTML page.

Obtrusive?

Some people don't like this approach, as it creates "obtrusive" JavaScript. "Obtrusive" means that the JavaScript code is mixed in with the HTML rather than being abstracted out. It, also isn't very "Railsy" using it in the view. But most of Rails' JavaScript helpers create obtrusive JavaScript, so it depends upon how puritanical you want to be. For a quick way of manipulating the DOM, this is a simple and easy time-saving method to use.

WhatLanguage: Ruby Library To Detect The Language Of A Text

WhatLanguage is a library by Peter Cooper that makes it quick and easy to determine what language a supplied text is written in. It's pretty accurate on anything from a short sentence up to several paragraphs in all of the languages supplied with the library (Dutch, English, Farsi, Russian, French, German, Portuguese, Spanish, Pinyin) and adding languages of your own choosing isn't difficult.

http://www.rubyinside.com/whatlanguage-ruby-language-detection-library-1085.html

RubyRun

RubyRunCE (Community Edition) is now available through free downloads from Rubysophic or Rubyforge. RubyRunCE is intended to be a standalone application performance diagnostic tool targeting both Ruby and Ruby-on-Rails applications. Typical users of RuyRunCE are developers, administrators and operation personnel who are frequently required to troubleshoot Ruby and Rails application problems.

In the grander scheme, RubyRunCE is one element of a next generation diagnostic solution which Rubysophic is developing. This solution extends beyond the classic tooling and consulting paradigms, and provides a SaaS based platform cooperating with a set of environment generic and specific data collecting tools. This SaaS platform lets individual, intra and inter-company technical talents perform problem solving activities which are often required to be team-based, collaborative, online, creative, and cognitive.

Typical IT situations that will benefit from this solution range from pre-sales installation support, web site outages, customer critical situations due to software defects, and launching new web applications, to hunting for rarely found, highly skilled troubleshooters in specific technical communities out in the public.

http://www.rubysophic.com/products/RubyRun/

dump() - Javascript equivalent of PHP's print_r() function

The moment I saw the print_r() function of PHP, I fell in love with it. It is a very necessary function and I cannot understand why no other language supports it. JavaScript is one such language. So, I have ported the print_r function to javascript.

http://www.openjs.com/scripts/others/dump_function_php_print_r.php

Making URLs look memorable

Bluga.net WebThumb provides a white-label web service API for generating web thumbnails and full size snapshots of websites.

WebThumb offers more features and quicker response times then any other service.

• Real-time thumbnails
• Flash 9 Support
• PDF Support
• Quick response times
• REST API
• API clients for PHP, Ruby, Python
• Cache the thumbnails on your server or Webthumbs
• Browser windows from 75x75 to 1280x2048

RubyGem for webthumb

Webthumb is a service to create thumbnails from websites (descriptive name, isn’t it…). It creates different sized thumbnails by default and you can request custom sizes.It offers an API to access it’s services and we wrapped up some code i wrote while on vacation and bundled it as a gem.The code is still a bit clumsy (as i wrote it on vacation :-) ) but it works nice for us. There is already another ruby wrapper for the API but it is not available as a RubyGem and does not expose some of the latest webthumb functionalities so we decided to write our own library. Josh gave us some extra credits so we could develop the API. Thanks. The gem is available on Simplificator’s github repo.

Ajax Pagination in less than 5 minutes

Recently one of my client asked me to add 'ajax' pagination to his application. His site already had a very nice pagination using the excellent will_paginate from Mislav and the guys(PJ & Chris) from err the blog but since my client had a special need where he had to have Ajax.

It took me virtually no time to convert the standard pagination into an Ajax navigation while still degrading gracefully.(it works even without Javascript)

I really enjoy using will_paginate, it's very well written and the authors keep up with the bugs and new features.

Start by installing will_paginate:
http://github.com/mislav/will_paginate/wikis

Then go watch the Railcast screencast about will paginate.

Once you have your pagination working, we will do some ' progressive enhancement'.

What we want is to add a behavior to the pagination link. The behavior would make the same call than the normal link but via an ajax(Javascript) call.

Add lowpro

To do that, you simply need to add the excellent 'lowpro' Prototype extension from Dan Webb
You can get the files directly from the lowpro's repository.

Add lowpro.js to your public/javascript folder.
Don't forget to include the javascript in your page.
<%= javascript_include_tag 'lowpro' %>

Create a behavior

Now open your application.js file (or whichever Javascript file you're using) and add the following:

Event.addBehavior.reassignAfterAjax = true;
Event.addBehavior({
  'div.pagination a' : Remote.Link
})

Refresh your cache, reload your page, and test the link. It will probably look like it doesn't do anything but if you are using firebug or if you are checking your logs, you'll notice something happened. The problem is that we didn't tell our action to send an Ajax response so we get the html full page all over again.

Setup a response for javascript requests

Got to your action handling the pagination and let's setup a response for Javascript:

def index
   @photos = Photo.paginate(:all, :conditions => ["photos.user_id = ?", current_user.id], :page => params[:page])
   respond_to do |format|
      format.html # index.html.erb
      format.js do
         render :update do |page|
            page.replace_html 'photos', :partial => "photos"
         end
      end
   end
end

Perfect! Now when a visitor clicks on my pagination links, only the photos are paginated, the rest of the page stays the same. Note that my navigation bar is inside the partial so it gets 'updated' after a visitor clicks on any pagination link.

http://railsontherun.com/2007/9/27/ajax-pagination-in-less-than-5-minutes

Low Pro: Unobtrusive Scripting For Prototype

Low Pro is a set of extensions to the Prototype library that make it easier to implement unobtrusive DOM scripting and forms the JavaScript component of the Unobtrusive JavaScript Plugin For Rails but can be used separately. It’s essentially a compilation of various tried and tested, previously published techniques adapted for use with Prototype and mainly centres around enhancing event handling and DOM manipulation. Low Pro uses portions of code and/or inspiration from Dean Edwards, Matthias Miller, Sylvian Zimmer, Justin Palmer and John Resig.

http://ajaxian.com/archives/unobtrusive-javascript-and-ajax-for-rails
http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype