• Read more about Toggle CSS3 Bookmarklet

If you’ve begun to use CSS3 experimental features in your sites lately such as box-shadow, border-radius or text-shadow, you know how much pain it can take away from the design process. Unfortunately, lots of people are still using Internet Explorer and can’t see all these pretty additions you’ve added.

I thought it would be useful to have a simple way to run a sanity check on my design to make sure it wasn’t going to look awful or unreadable once all of the CSS3 goodies were taken away. With that in mind, I created a bookmarklet that will toggle the display of all of that modern goodness.

Just drag this link: Toggle CSS3 into your bookmark toolbar. Then, by clicking it, you can turn off (and back on) the most common CSS3 improvements. Once installed, if you visit a page such as CSS3.info and click the bookmarklet, you should see the CSS3 effects toggle off.

Note that this is a simple, none-too-bright bookmarklet and only removes the obvious traces of CSS3. It doesn’t inspect your CSS for non-supported color values (like RGBA) or deal with many of the more advanced features of CSS3. In fact, all it does is eradicate these styles:

• border-radius
• box-shadow
• text-shadow
• border-image
• background-origin
• background-clip

However, it’s still a useful tool if you’re designing for the future with an eye for the past. Enjoy!

• Read more about Simple Mustache JSON Serialization

If you’ve taken a look at Mustache, the “stupid in a good way” templating engine, you might know that there are also Javascript Mustache renderers such as Mustache.js. Today we’ve released a small library called mustache_json that allows you to compile your Mustache view objects into JSON, allowing them to be interpreted by Javascript Mustache rendering engines.

What this means for your project is that you will finally have a identical client-side and server-side rendering interface, opening wide the opportunities for pushing more of the rendering work onto the client-side, a boon for many real-time and heavy-interaction applications.

To install mustache_json, just get the gem from Gemcutter:

gem install mustache_json

To use it, simply require 'mustache_json' and all of your Mustache objects will automatically be given a #to_json method. For instance:

require 'mustache_json'  class Person < Mustache   def initialize(first_name, last_name)     context[:first_name], context[:last_name] = first_name, last_name   end      def initials     "#{context[:first_name][0..0]}.#{context[:last_name][0..0]}."   end      def listing     "#{context[:last_name]}, #{context[:first_name]}"   end end  bob = Person.new('Bob', 'Bobson') bob.to_json

This will render into a JSON object that looks like this:

{"last_name":"Bobson","initials":"B.B.","listing":"Bobson, Bob","first_name":"Bob"}

Mustache JSON gives you access to all of the public instance methods you declare in your Mustache as well as any context you have set. It is essentially a fully compiled version of the Mustache view, providing everything another renderer needs to create the actual markup. The JSON back-end for this library is swappable, meaning you can use the JSON gem, JSON pure, ActiveSupport, or Yajl by default (and any other class with an encode method if you’ve got a different library).

Documentation is available on RDoc.info and the source is available on GitHub. Stay tuned for posts in the future about utilizing this library to actually perform identical rendering in Ruby and Javascript.

• Read more about Twitter Search Plus: Find Replies Inline with Twitter Search

Last night after watching the Lost premiere I had a question to which I was having a hard time finding the answer. The show had just ended and I wanted to know (tiny spoiler alert) who the woman Benjamin Linus was talking to at the end of the episode was. Google was no help (the episode had finished mere minutes before) so I turned to Twitter for some real-time searching.

By searching for lost old woman I was able to find plenty of other people asking the same question I had, but no one was giving the answer. I suspected that a reply to one of the tweets in question would have the answer so a few more minutes of manually searching for replies to the search result tweets finally yielded my answer. It also showed me how useful Twitter Search could be with a built-in way to find replies to the tweets. Rather than request the feature and wait until Twitter decides to implement it, I got my hands dirty with Greasemonkey and rolled my own.

Twitter Search Plus

This userscript (which requires the Greasemonkey Firefox Extension or equivalent userscript support in another browser) will automatically add a “Find Replies” link to the actions on Twitter search results and go out, find, and insert the replies to the user in question inline, just like the Show Conversation view. Here’s a screenshot of it in action:

This makes it really convenient to discover if a tweet you found while searching sparked any conversation. While I used it for entertainment, you could easily also find out who replied to a negative post about your brand, or if anyone else has already answered a question you were about to answer.

Installation and Limitations

You can install the script by following this link and see the source right here as a GitHub Gist. The script has also been posted to UserScripts.org.

Because there is no way to sort Twitter searches from oldest to newest, you will only see the 15 most recent replies to the user posted after the tweet in question. If the tweet is old or the user is extremely popular you might not get the replies you’re looking for. I’m open to suggestions as to how to make this work better.

Happy Twittering!

• Read more about Faking 'onpaste' in Firefox

When trying to find a solution for cleaning Rich Text pasting into a textarea, we needed to find a way to detect pastes and trigger an event based on said action. Internet Explorer and Safari both have an onpaste event that allows you to hook javascript into a paste event, but Firefox does not allow this.

After a little Googling, I didn’t really come across much of a solution so I decided to roll my own.

  function checkForPaste(event) {     var e = event.element();     if ((e.previousValue && e.value.length > e.previousValue.length + 1) ||         (!e.previousValue && e.value.length > 1)) {        if (e.onpaste) {         e.onpaste(e)       } else if (e.readAttribute("onpaste")) {         eval(e.readAttribute("onpaste"));       }     }       e.previousValue = e.value;   }        function firefoxOnPaste() {     $$('textarea').each(function(e) {        if (e.onpaste || e.readAttribute("onpaste")) {         Event.observe(e,'input',checkForPaste);       }     });   }      if (Prototype.Browser.Gecko) {     document.observe('dom:loaded', firefoxOnPaste);   }

This snippet of code will automatically detect if an onpaste has been either added to a textarea’s attribute list (e.g. <textarea onpaste='alert("Pasted!")/>) or set programmatically. It will then automatically simulate paste detection using the oninput event and trigger the onpaste code when it believes a paste has been made.

The snippet will detect correctly for all pasting I’ve tried, including selecting a chunk and pasting a replacement. The only major caveat I’ve seen thus far is that the first input change after the page load will register as a paste if the textarea’s value has already been set. In any case, I thought it was a relatively straightforward way to solve the problem.

• Read more about Use 'link_to_remote' unobtrusively

I have become a big believer in unobtrusive scripting utilizing lowpro, but I still like being able to use the Rails Prototype helpers because they are there and simple (not to mention hooked into plugins such as Redbox). But by default, the href on a link_to_remote is set to ‘#’, which hardly gives the desired behavior when Javascript is disabled. However, with a quick rewrite of the link_to_remote helper, we can achieve unobtrusiveness (if not complete code separation) for any link_to_remote call:

def link_to_remote(name, options = {}, html_options = {})     html_options.merge!({:href => url_for(options[:url])}) unless options[:url].blank?     super(name, options, html_options) end

Link_to_remote is actually just a wrapper on link_to_function, which accepts html options. However, if you set href in the html_options hash, it will override the default ‘#’ and use the url specified. Now whether javascript is enabled or not, the same URL will be called. Respond_to to the rescue! Just drop some custom code into the action to which you are linking, and you can easily render out an HTML page or perform javascript behavior, depending on the format desired:

class SomeController < ApplicationController   def some_action     respond_to do |format|       format.html { redirect_to :back } # reload the page we were just on       format.js { render :update do |page|          # update the content dynamically       end }     end   end end

It’s a simple technique, but this has allowed me to use redboxes for modal controls and seamlessly degrade to a properly laid out form if javascript is disabled, all without changing a single line of code in the redbox plugin.