Luciano German Panaro's blog 2011-05-14T19:56:16-03:00 Luciano German Panaro Copyright (c) 2008-2011 Luciano German Panaro FX Queues plugin and jQuery 1.4 2010-01-15T00:00:00-03:00 <p>So <a href="" target="_blank">jQuery1.4</a> has been finally released and, though I haven't been able to test the <a href="" target="_blank">FX Queues plugin</a> yet with it, I already got some feedback mentioning it's not working.</p> <p>During the next couple of days I will be releasing a new version compatible with jQuery 1.4 - It will be a good way to get back to some Javascript hacking after many months with just Ruby in my head :)</p> <p>Stay tuned!</p> <h2>Update:</h2> <p>So it just took me an hour to do the update to 1.4 -- seems like <strong>jQuery.queue()</strong> is behaving a little different.</p> <p>Since the plugins site for 1.4 is still to be released, for now you can grab the code from GitHub: <a href="" target="_blank"></a></p> Quick tip: Running Clearance features 2009-03-10T00:00:00-02:00 <p>If you are working with <a title="Clearance GitHub" href="" target="_blank">Clearance</a> and want to have its features (<em>script/generate clearance_features</em>), <strong>be sure to have a layout that prints flash messages</strong> (<em>notice</em>, <em>error</em>, <em>success</em> and <em>failure</em>), as these are used in some scenarios.</p> <p>Nothing crazy, but hopefully I'm saving you a headache :).</p> FxQueues update: now compatible with jQuery 1.3.1 2009-02-15T00:00:00-02:00 <p>For all <a href="" target="_blank">FxQueues plugin</a> users, I just pushed a new version (<a href="" target="_blank">2.0.3</a>) that is only compatible with <strong>jQuery 1.3.x</strong>, since many tests and the main example under 2.0.2 weren't working with jQuery's latest version.</p> <p>So if you are using jQuery 1.3.1, you should be using <a href="" target="_blank">FxQueues 2.0.3</a>, otherwise you can stick to <a href="" target="_blank">2.0.2</a>, as only internal changes have been done and there are no new features.</p> Update: Creating a news carousel with jQuery, now with time based switching 2009-01-11T00:00:00-02:00 <p>This is just a simple and quick update on the <a title="Creating a news carousel with jQuery" href="" target="_blank">Creating a news carousel with jQuery</a> post.</p> <p>After reading <a href="" target="_blank">this comment</a>, and going through the code, I decided to implement the time-based switching functionality and also clean up the code a little bit (<a href="" target="_blank">check it out here</a>).</p> <p>The additions made (along with some code cleaning) were:</p> <ul> <li>Append a simple div that will shrink while the picture is shown and reinitialized when the picture is switched.</li> <li>Add a <strong>setInterval</strong> call that will do the picture switching (and the new div's animation).</li> </ul> <p><span style="text-decoration:underline;"><strong>Update 01/12:</strong></span> I added some fixes to the code</p> <ul> <li>Use the image's load event to calculate each individual width. When all images are loaded, then the carousel is initiated.</li> <li>The <strong>animate_timer</strong> function now stops all animations on the timer div before reinitializing the animation</li> </ul> <span style="text-decoration:underline;"><strong>Update 01/27:</strong></span> Even more fixes :) <ul> <li>Work with cases were images are already in cache and load event is fired before we attach to it.</li> <li>Fixed the way the news animation was calculated.</li> <li>Added 2 more news to help test it better.</li> </ul> <p>So here's the new javascript that will do this:</p> <pre class='prettyprint'> $(function() { var carousel = $('#news_carousel'); var news = carousel.find(''); var controls = null; // Will hold the ul with the controls var timer = null; // Will hold the timer div var wait = 5000; // Milliseconds to wait for auto-switching var widths = []; // Will hold the widths of each image var items_size = news.find('li').length; var initialized = false; if (!items_size) { return; } // Controls html to append var controls_str = '&lt;ul class="controls"&gt;'; for ( var i = 1; i &lt;= items_size; i++) { controls_str += '&lt;li&gt;&lt;a href="#"&gt;' + i + '&lt;/a&gt;&lt;/li&gt;'; } controls_str += '&lt;/ul&gt;'; // Cache the controls list controls = carousel.append(controls_str).find('ul.controls'); // Make the first button in controls active controls.find('li:first a').addClass('active'); // Hook to the controls' click events controls.find('li a').click(function(event) { move_news( $(this) ); return false; }); // Append the timer and cache it timer = carousel.append('&lt;div class="timer"&gt;&lt;/div&gt;').find('div.timer'); // Store each item's width and calculate the total width news.find('li img') .each(function(i, e) { widths[i] = $(e).width(); if ( all_images_loaded() ) { init_carousel(); } }) .load(function(e) { var i = news.find('li img').index(this); widths[i] = $(this).width(); if ( all_images_loaded() ) { init_carousel(); } }); function all_images_loaded() { if (items_size == widths.length) && (jQuery.inArray(0, widths) 1 ) { return false; } var current_active = controls.find('li'); if (new_active == 'next') { var next = current_active.parent().next().find('a'); if ( !next.length ) { next = controls.find('li:first a'); } new_active = next; } var current_index = parseInt(current_active.text(), 10) - 1; var new_index = parseInt(new_active.text(), 10) - 1; var move_to = new_index - current_index; if (!move_to) { return false; } var direction = (move_to &gt; 0)? '-=': '+='; var move = 0; var bottom = Math.min(current_index, new_index); var top = Math.max(current_index, new_index); while (bottom &lt; top) { move += widths[bottom]; bottom++; } news.animate({marginLeft: direction + move }, 500); new_active.addClass('active'); current_active.removeClass('active'); } function animate_timer() { timer.stop().css({width: '100px'}).animate({width: '1px'}, wait); } // Initializer, called when all images are loaded function init_carousel() { if (initialized) { return false; } // Set the news ul total width var width = 0; for( var i = 0; i &lt; widths.length; i++) { width += widths[i]; } news.width(width); // Make the news change every X seconds setInterval(function() { move_news('next'); animate_timer(); }, wait); animate_timer(); initialized = true; } }); </pre> jQuery Object Cache Update 2009-01-11T00:00:00-02:00 <p>After discussing with <a title="Andrew Luetgers" href="" target="_blank">Andrew Luetgers</a> some improvements that could be done to the <a title="jQuery Object Cache" href="" target="_blank">Object Cache</a> plugin, I updated the plugin to a new version.</p> <p>The new improvement is that now you can store a selection automatically:</p> <pre class='prettyprint'> // Will store in cache $("#sidebarNav") with #sidebarNav key $$("#sidebarNav"); </pre> <p>This will let you avoid doing <em>$("#menu").cache("menu")</em>, which is a bit redundant. Now by doing <em>$$("#menu")</em> you will be able to store it in the cache and retrieve it automatically. There is also a <strong>reload</strong> option that you can pass to that call in order to, well, reload the the cached object with that selection:</p> <pre class='prettyprint'> // Will reload #sidebarNav with $("#sidebarNav") $$("#sidebarNav", true); </pre> <p>You can grab the <a title="jQuery Object Cache Plugin" href="" target="_blank">new version of the Object Cache plugin here</a>.</p> New jQuery plugin: Object Cache 2008-11-20T00:00:00-02:00 <p>Inspired by <a href="" target="_blank">Benjamin Sterling</a>'s <a href="" target="_blank">"Better jQuery Code"</a> article I decided to develop a simple plugin to make his first point (<em>Caching</em>) easier... nothing fancy, just a few methods, but you will hopefully find it useful.</p> <p>Its objective is to let you store a jQuery object with a simple key in a global cache, so that you can access the same object easily, without having to write the same selection, filtering or traversing code (i.e: $("#main &lt; p") or $("#main").children(".selected").eq(0)).</p> <h2>Here is how it works:</h2> <pre class='prettyprint'> // Store in cache - Returns current object $("#mainNav").cache("main_navigation"); // Retrieve from cache - Returns cached object $$("main_navigation"); // or jQueryCache("main_navigation"); // Remove from cache $$.remove("main_navigation"); // Clear Cache $$.clear(); // Load jQueryCache with noConflict to avoid overriding window.$$ $$.noConflict(); </pre> <p>There is a lot of room for improvement, which will be done depending on the feedback I get, so feel free to contact me with any ideas or corrections you might come up with.</p> <p><a href="" target="_blank">You can get the Jquery Object Cache plugin here</a>.</p> Creating a Rack Middleware for Minifying Your Javascript files 2008-10-15T00:00:00-03:00 <p>If you are in the Ruby world you have probably heard of <a href="" target="_blank">Rack</a>. If you haven't, and you are a Pythonista, then you only need to know that Rack is a sort of "<a href="" target="_blank">WSGI</a> for Ruby". And in case you don't know what Rack or WSGI are, then here's a brief description:</p> <p><blockquote>"Rack provides a minimal, modular and adaptable interface for developing web applications in Ruby. By wrapping HTTP requests and responses in the simplest way possible, it unifies and distills the API for web servers, web frameworks, and software in between (the so-called middleware) into a single method call."</blockquote></p> <p>So you can think of Rack as a "<a href="" target="_blank">frameworks framework</a>". <a href="" target="_blank">Merb</a> and other <a href="" target="_blank">ruby</a> <a href="" target="_blank">frameworks</a> already support Rack, which means that they can share the middleware described above.</p> <h2>Creating a Rack Middleware</h2> <p>So let's say you want your application (built on Rails, Merb, Ramaze or even Rack) to intercept any request for javascript files so that you can first minify them. Below is the sample code for achieving this with a Rack Middleware:</p> <p><em>(You can checkout this code, its spec and example from <a href="" target="_blank"></a>. The javascript minifier is a port from <a href="" target="_blank">Douglas Crockford's library</a> <a href="" target="_blank">done by Ryan Grove</a>.)</em></p> <pre class='prettyprint'> class JavascriptMinifier F = ::File def initialize(app, path) @app = app @root = F.expand_path(path) raise "Provided path #{@root} does not exist" unless end def call(env) path = F.join(@root, Utils.unescape(env["PATH_INFO"])) unless path.match(/.*\/(\w+\.js)$/) and F.file?(path) return end if env["PATH_INFO"].include?("..") or !F.readable?(path) body = "Forbidden\n" size = body.respond_to?(:bytesize) ? body.bytesize : body.size return [ 403, {"Content-Type" =&gt; "text/plain","Content-Length" =&gt; size.to_s}, [body] ] end last_modified = F.mtime(path) min_path = F.join(@root, "m_#{last_modified.to_i}_#{F.basename(path)}") unless F.file?(min_path), "r") { |file|, "w") { |f| f.puts JSMin.minify(file) } } end [200, { "Last-Modified" =&gt; F.mtime(min_path).httpdate, "Content-Type" =&gt; "text/javascript", "Content-Length" =&gt; F.size(min_path).to_s },, "r")] end end </pre> <p>Rack Middleware's interface is dead simple. As <a href="">Marc-André Cournoyer points out</a>: <em>"It must have a call method and receive a Rack app as the first argument of new"</em>.</p> <p>So here, when we initialize the JavascriptMinifier, we pass the root path where the javascript files are placed. Every time it gets called, the middleware first checks if the request is for a javascript file. If it's not, it passes it to the application. If the request is for a javascript in a parent directory, then we return a forbidden (403) page. Finally, if the request passes these filters, the middleware creates a minified version of the javascript file and returns it.</p> <h2>Running your application with middleware</h2> <p>This is also really simple using <a href="" target="_blank">Rack::Builder</a>:</p> <p><blockquote>"Rack::Builder implements a small DSL to iteratively construct Rack applications. <a href="" target="_blank">use</a> adds a middleware to the stack, <a href="">run</a> dispatches to an application." </blockquote></p> <p>So here is an example of a rackup file that you can use to startup your application with some middleware:</p> <pre class='prettyprint'> use Rack::CommonLogger use Rack::ShowExceptions use JavascriptMinifier, "./" run </pre> <h2>Testing and Spec'ing helpers</h2> <p>Rack provides two helpers that will be of great use for testing your application: <a href="" target="_blank">Rack::MockRequest</a> and <a href="" target="_blank">Rack::MockResponse</a>, so you have no excuses to test your Rack Middleware and do some TDD/BDD!</p> <h2>Where to go from here</h2> <p>To learn how to develop your own Rack Middleware, your best resource will be Rack sources. You will learn a lot of Rack (and Ruby in general) by reading the code and specs they provide: <a href="" target="_blank">URLMap</a>, <a href="">CommonLogger</a>, <a href="">File</a>. There also is a <a href="">group</a> where you can ask your questions too.</p> <p>So enjoy your trip with Rack Middleware and feel free to comment your thoughts and questions!</p> Creating a news carousel with jQuery 2008-10-05T00:00:00-03:00 <p>Last week I had to do a news carousel for a project I'm developing. It had been a while since I had the chance to do something interesting with jQuery, so I wanted to share the experience of how easily you can build similar widgets for your site.</p> <p>So first let's take a look at <a href="" target="_blank">what we want to build</a>.</p> <p>Now, I know that there are a few plugins out there for jQuery that probably can do this, but the point of this post is to show how simple it is to create something like this with a few lines of jQuery and CSS.</p> <p>Let's begin by defining how we will organize the content. Being a list of news, we can either use an ordered or an unordered list.</p> <pre class='prettyprint'> &lt;div id="news_carousel"&gt; &lt;ul class="news"&gt; &lt;li&gt; &lt;img src="" alt="" /&gt; &lt;strong&gt;&lt;a href="#"&gt;Title&lt;/a&gt;&lt;/strong&gt; &lt;span&gt;Description&lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </pre> <p>Now that we have our content, we have to style it. The keys here are to:</p> <ul> <li>Align the list elements one next to the other.</li> <li>Make <em>#news_carousel</em> just show one list element at a time</li> <li>Use relative and absolute positioning to show the titles and descriptions over each image</li> </ul> <p>Here's the CSS used in the sample with some comments:</p> <pre class='prettyprint'> #news_carousel { width: 444px; height: 333px; margin: 0; padding: 0; overflow: hidden; /* this will make only show 1 li */ position: relative; } #news_carousel { list-style-type: none; margin: 0; padding: 0; position: relative; } #news_carousel ul li { margin: 0; padding: 0; position: relative; /* to do absolute positioning of the child paragraph */ float: left; /* align one next to the other */ } #news_carousel li p { position: absolute; bottom: 10px; left: 0; margin: 5px; } #news_carousel li p strong { display: block; padding: 5px; margin: 0; font-size: 20px; background: #444; } #news_carousel li p span { padding: 2px 5px; color: #000; background: #fff; } #news_carousel ul.controls { position: absolute; top: 0px; right: 20px; list-style-type: none; } #news_carousel ul.controls li a { float: left; font-size: 15px; margin: 5px; padding: 2px 7px; background: #000; text-decoration: none; outline: none; } #news_carousel ul.controls li { border: 2px solid #ccc; } </pre> <p>The Javascript code is pretty self-explanatory:</p> <pre class='prettyprint'> var news_carousel = function() { var items_size = $('#news_carousel ul li').length; if (items_size == 0) return; // Calculate the total width and set that value to // the width // Store each item width var width = 0; var widths = []; $('#news_carousel li img').each(function(i, e) { widths[i] = $(e).width(); width += widths[i]; }); $("#news_carousel").width(width); // Append the controls controls = '&lt;ul class="controls"&gt;&lt;li&gt;&lt;a class="active" href="#"&gt;1&lt;/a&gt;'; for ( var i = 2; i &lt;= items_size; i++) { controls += '&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;' + i + '&lt;/a&gt;&lt;/li&gt;'; } controls += '&lt;/ul&gt;'; $('#news_carousel').append(controls); $('#news_carousel ul.controls li a').click(function(event) { // if the ul is already moving, then do nothing if ($("#news_carousel").length &gt; 0) return false; var clicked_item = $(; var current_active = $("#news_carousel ul.controls li"); var current_index = parseInt(current_active.text()); var new_index = parseInt(clicked_item.text()); var move = new_index - current_index; //how many items it should be moved if (move != 0) { direction = (move &gt; 0)? "-=": "+="; $('#news_carousel') .animate({marginLeft: direction + widths[new_index-1] }, 300); clicked_item.addClass("active"); current_active.removeClass("active"); } return false; }); }(); </pre> <p>And that's it! Around 100 lines of code and you have your own home-made news carousel. Hope you found it useful! :)</p> <p>(Pictures taken from: <a href=""></a> and <a href=""></a>.)</p> RSpec Link Fest! 2008-10-02T00:00:00-03:00 <p>Now that I am developing a few new ruby and ror projects I wanted to begin with BDD and RSpec. There are lots of content all around the web so here's a quick list of a few links that you might find useful if you are in your baby steps with RSpec (as I am :).</p> <p><a href="">RSpec Story Runner is being replaced</a> by <a href="">Cucumber</a> for RSpec 1.1.5, but as mentioned <a href="">here</a>, if you are about to start you should go with Cucumber. <a href="">Here are the instructions for installing RoR support</a>.</p> <ul> <li><a href="">RSpec's site</a> (there are a few <a href="">examples</a> for Rails controllers, models, views and helpers)</li> <li><a href="">RSpec on Github</a></li> <li><a href="">Cucumber</a></li> <li><a href="">Webrat</a></li> <li><a href="">David Chelimsky's (RSpec's creator) blog</a></li> <li> <a href="">Andrzej Krzywda's blog</a> <ul> <li><a href="">BDD examples with user stories and Webrat</a></li> <li><a href="">Story Driven Development</a></li> <li><a href="">TDD with Rails</a></li> </ul> </li> <li><a href="">RSpec and Restful Authentication</a></li> <li><a href="">RSpec plain text story runner on a fresh rails app </a></li> <li><a href="">Story writing is fun</a></li> <li><a href="">Some RSpec useful links</a></li> <li><a href="">RSpec, it should behave like</a></li> <li><a href="">Understanding RSpec stories, a tutorial</a></li> <li><a href="">NetBeans: Screencast on RSpec support</a></li> </ul> <p>Hope you find it useful!</p> New skin, new (old) plugin 2008-03-13T00:00:00-02:00 <p>When I launched this blog a few months ago I promised myself I would post at least weekly. Well, it is pretty obvious that I haven't. Even more, I was just able to do a few posts commenting on some news I found interesting.</p> <p>So the inmediate question that comes up is simply "why?" . Well, there are many reasons why:</p> <ul> <li>Study comes first.</li> <li>Work comes second (well, it comes first sometimes).</li> <li>I couldn't find time to write (a sort of corollary of the first two) anything I liked.</li> <li>I hated the template I had.</li> </ul> <p>From these bullets, there is one that can be (sort of) easily fixed. Creating a new appealing template that would make me want to post every week can't be <strong>that </strong>hard, right? Well, it is, especially if you are a designer-wannabe. It took me a long time to come up with a template that I liked, but I am pretty glad with the result.</p> <p>In the meantime, I came across a plugin from John Resig with similar functionality. Since it's core implementation was far better than mine, I updated the <a href="" target="_blank">jQuery FxQueues Plugin to a 2.0 version</a>, by merging John's and my code (I also created a new example page and some unit tests).</p> <p>So now that I have a template that I like there is one thing less preventing me from writing new posts. I have a few ideas for some posts and hopefully you will be able to read them soon.</p> <p>Hope you like this new template as I do!</p> jQuery UI 1.5a and jQuery Enchant 1.0a! 2008-02-06T00:00:00-02:00 <p>Finally we have<a href="" target="_blank"> alpha releases of jQuery UI 1.5 and jQuery Enchant 1.0</a> (which is the brand new effects library).</p> <p>Of course it's far from being production ready, but it is a great preview of what the official releases will be. I can't wait to give jQuery Enchant a try!</p> RubyConf 2007 Videos 2007-12-11T00:00:00-03:00 <p>Since I always tend to bookmark links I find interesting and many times just forget about them rightaway, I just wanted to let you know (and also remind myself) that <a href="" target="_blank">RubyConf 2007's videos are now available</a>, so I'll be watching most (if not all) of them, and probably let you know which of them I found useful/interesting.</p> <p>(BTW, the <a href="" target="_blank">Creating a Weblog in 15 minutes screencast was ported by Akita</a>.)</p> OAuth Core 1.0 Specification released 2007-12-05T00:00:00-03:00 <p>Finally <a href="" target="_blank">the OAuth Core Specification 1.0</a> was released. For those who don't know, OAuth allows the you the User to grant access to your private resources on one site (which is called the Service Provider), to another site (called Consumer, not to be confused with you, the User). While OpenID is all about using a single identity to sign into many sites, OAuth is about giving access to your stuff without sharing your identity at all (or its secret parts).</p> <p>If you want a quick introduction to OAuth's concepts, there is <a href="" target="_blank">a good talk of Leah Culver, from Pownce</a>, where you can see OAuth in action in <a href="" target="_blank">Nsyght</a>.</p> <p>We'll have to read the specification in detail, and see if the big players implement their service providers. Since <a href="" target="_blank">OpenID 2.0's draft</a> is about to be approved (and since <a href="" target="_blank">both Google and Microsoft have new OpenID support</a>), it will be interesting to see how both OpenID and OAuth complement each other.</p> <p><strong>12/06:</strong> <a href="" target="_blank">A few hours after I posted this</a>, <a href="" target="_blank">OpenID 2.0 specification was released</a> so we'll have to see what happens from now on.</p> Rails 2.0 RC 2 released 2007-11-29T00:00:00-03:00 <p>A few hours ago the <a href="" target="_blank">second release candidate of Ruby on Rails 2.0 was released</a>.</p> <p>If you want to know what changes are being implemented for RoR's next version, go check the <a href="" target="_blank">first RC announcement</a>, and also <a href="" target="_blank">Ryan Daigle's blog</a>, where many of the new features are explained.</p> On user interface design patterns 2007-11-25T00:00:00-03:00 <p>While surfing <a href="" target="_blank">dzone</a> I found a site called <a href="" target="_blank">UI-Patterns</a>:</p> <p><a href="" target="_blank">UI-Patterns</a> are not the first to create a UI design library. A popular design library is the <a href="" target="_blank">Yahoo! Design Pattern Library</a>. While very useful, it is far from complete. The purpose of this site is over time to fill some of the gaps – especially by providing code examples as to how how the different patterns can be implemented.</p> <p>Some of the patterns introduced are really interesting, but the way they are presented is a few steps behind Yahoo's. It's still great work, and I can't imagine how difficult is to formalize those patterns, but having a video showing the pattern in action is an advantage over plain screenshots.</p> <p>Another site on user interface patterns I found is <a href="" target="_blank">Welie</a>, which covers a good list of common practices in interaction design.</p> <p>So for those interested in getting to know more about design patterns for the user experience, here is an interesting presentation in <a href="">Yahoo! User Interface Theater</a>, called "Designing the Rich Web Experience: Principles and Patterns for Rich Interaction Design on the Web". Enjoy!</p> <p><em>Bill Scott served as a Yahoo Ajax Evangelist and engineering manager from 2005-7. In this talk, given at nearly a dozen conferences around the world, Bill taxonomizes the rich interaction patterns that characterize the evolving web — a must-see for web designers and frontend engineers</em></p> High-performance JavaScript: Why Everything You've Been Taught Is Wrong 2007-11-22T00:00:00-03:00 <p>That's the title of an interesting talk that was uploaded in Y! Video regarding javascript performance given by <a href="" target="_blank">Plaxo's Chief Platform Architect, Joseph Smarr.</a></p> <p>There are a few interesting ideas (most of them are not new, but it never hurts reminding them). As Joseph Smarr explains, when developing a new version of Plaxo, they found many performance issues that put in jeopardy the release of their new system.</p> <p>It looks like at first they tried to develop their application without paying too much attention on browser's limitations, and without considering javascript's strengths and weaknesses (too much OOP boilerplate, as he says, like getters and setters and stuff…). However they were able to adopt new and better practices, that allowed them to ship Plaxo 3.0.</p> New jQuery queueing plugin 2007-11-18T00:00:00-03:00 <p>I'm beginning this blog with a jquery plugin I had to develop a few weeks ago for a project I'm working on.</p> <p>Even though<strong> jQuery</strong> is a great javascript library, its latest version brings a queue control, it doesn't work for different elements. That is, if you had something like</p> <p>$("#myDiv").animate({fontSize: "30px"}).animate({marginLeft: "40px"})</p> <p>it would queue the animations. But what if you wanted to be able to queue different elements (just like <strong>Scriptaculous</strong> allows)? Well, that's the reason why I developed the <a title="jQuery Fx Queues" href="">jQuery Fx Queues plugin</a>. So go ahead and check it out, and feel free to send me your comments or any bugs you find.</p>