ZeroClipboard hosted on CDN

When working with ZeroClipboard, in my local environment it worked perfectly. However, when I uploaded the .swf to Amazon S3 I started receiving an error and the plugin stopped working.

After some googling I found out how to fix this. Here’s the beginning of my code:

var clip = new ZeroClipboard($(".copy"), {
    moviePath: "http://mysite-assets/js/lib/ZeroClipboard.swf",
    trustedDomains: location.host
});

I had to set the trustedDomains with my site url (not the CDN) to enable the Cross-Domain access.

For more info check out the setting options in the ZeroClipboard documentation.

GrooveControl for Grooveshark – Chrome Extension

Image

At work is really hard keep focused without any disturbing or distraction. There are always someone calling your attention, and often you need to stop what your doing to solve other problems.

In an effort to help focusing on my task, I am frequently listening music which not only amuses me as it reduces the noises in the environment. Grooveshark is my cloud music player but the thing is that it needs its window to be opened in order to play, and sometimes, you have so many windows and so many tabs, that it takes some time till you find your opened Grooveshark window, so you can pause and pay attention to who is calling you.

So, I created a Chrome Extension called GrooveControl, that displays a small and useful player that helps me to know what’s being played, pause, rewind or forward. That’s like 98% of what I usually do on Grooveshark’s window.

The good news for you, dear developer, is that it’s open-sourced. I’ve saved it in a public repository on GitHub. If you ever were curios about how to create a Chrome Extension, check it out, it’s very simple! And if you want to contribute to it, feel free to do so.

Shared Client and Server configuration with custom ActionResult – Solving it in a DRY way

I’m developing a MVC application and there are some configurations I want to use both on client and server side but I don’t want to replicate them, I want it be DRY (Don’t Repeat Yourself). Having it gives me the hability of changing some value on both sides without deploying the application again.

I could have created my properties in my AppSettings section and then print the variables on a page, but the AppSettings would become huge and the page header a mess.

Here is the solution I end up with. I created a JSON file containing my propeties, like so:

common.json

{
	"highlightProductId": 5,
	"bannerEnabled": false,
	"passwordLength": 15,
	"adURL": "http://google.com/ad"
}

That allows me to use the Newtonsoft or any other JavaScript parser like the JavaScriptDeserializer from .Net and have that JSON as a class. You can also deserialize it as “dynamic” if you are using the Newtonsoft library.

Well, that solves the problem for the server side. The client side though would have to call jQuery.getJSON to be able to read that file but that slows the page loading down and doesn’t give the user a nice experience because the user has to wait until the ajax call gets finished, so it can continue processing the rest of the script.

What I did was to turn that JSON into a JS file. To do that, you just have to assign that JSON to a variable and then you can embed the result in the page as a JavaScript file!

var common = { };

That is a valid JS file!

Now let’s teach MVC how to do that. Create the file below:

namespace System.Web.Mvc
{
    using System;

    public class JsonToJavaScriptResult : ActionResult
    {
        public string Prefix { get; private set; }
        public string JsonFile { get; set; }

        public JsonToJavaScriptResult(string prefix, string jsonFile)
        {
            JsonFile = jsonFile;
            Prefix = prefix;
        }

        public override void ExecuteResult(ControllerContext context)
        {
            if (context == null)
            {
                throw new ArgumentNullException("context");
            }

            HttpResponseBase response = context.HttpContext.Response;
            response.ContentType = "application/x-javascript";

            response.Write(Prefix);            
            response.WriteFile(JsonFile);
        }
    }
}

There we are creating a custom ActionResult that concatenates the prefix – which are the part that will hold our variable name – with the content of the file – our JSON – and writes it all to the page buffer.

Now let’s make our Controller that will use the newly created class.

    public class SharedController : Controller
    {        
        //
        // GET: /Shared/Script

        public JsonToJavaScriptResult Script()
        {
            const string fileName = "common.json"
            const string prefix = "var Shared = ";
            var jsonFile = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, fileName);

            return new JsonToJavaScriptResult(prefix, jsonFile);
        }
    }

The last step is just insert the script tag in your page that will embed our code.

<script src="@Url.Action("Script", "Shared")" type="application/x-javascript"></script>

and you can do something like that

<script type="text/javascript">
  alert(Shared.highlightProductId);
</script>

Any new ideas or improvements are welcome.

21 Things I learned from the jQuery Source

I know I’ve been posting only videos lately but this one deserves to be here too and I really don’t think videos are bad. Instead of reading and just listen to your mind you can watch the person talking, acting and see their personality.

In this two videos, the astonish Paul Irish tells us 10 things he learned from the jQuery Source and then 11 more things he learned from it. At first, when we look at the jQuery Source it looks scary and huge, but Paul Irish diggs in it and shows us that we can learn many things straight from the source, instead of looking for docs on the internet.

I personally already did this long time ago and I recommend to do it. It’s really like a wiki of javascript codes.

and here is the other

Click here to see the post in his blog.

jQuery Templates, Data Link, and Globalization Accepted as Official jQuery Plugins

Stephen Walther from the ASP.NET Team joins James Senior (@jsenior) on Web Camps TV to discuss an exciting announcement: Microsoft is making their first contributions to the jQuery open source project!
In the past 6 months, they’ve been busy working on three features:

  1. Templating
  2. Data-Linking
  3. Globalization

In this video, they show demos of the contributions in action, take a look:

Web Camps TV #6 - Microsoft Commits Code to jQuery!

Focus doesn’t work on IE

I’m documenting this cause i took me a long while to solve it. For some reason, i don’t know why, my input field couldn’t get focused. Here is the code similar of the one i was using:

myInput = document.getElementById("selected");
myInput.focus();

My solution was to add the select() method after i call the focus(), like this:

myInput.focus().select();

I hope it can help people with the same problem.