jQuery: Making AJAX Applications Crawlable

If you want a fast and responsive web app, then you are definitely using jQuery (or any other javascript libray) and ajax calls to keep the size of the page small and transfer only the data the user requested.

The problem that came along with this approach is that search engines can’t interact with your page the way a user does, and so, there is no way for a search engine to make the ajax call and get the content back from the server. Spiders just aren’t browsers and users! (Learn more about it here)

Continue reading

How to Minify JavaScript with C#, a Google PageSpeed suggestion

Google sais “compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time” and that is obviously true (you can read about it here. And although there are many tools to minify javascript, like JSMin and YUI Compressor, it’s quite time consuming (and boring) to have to run these tools for each change your Web Designer decides to do for every JS file in your project. Except that, non of these tools compacts JS in one file to minimize browser requests.

The solution I came up goes like this (in my project this code runs only once in every application boot by using HttpContext.Current.Cache)

Step 1
Add a new Web Form to your project and name it js.aspx

Continue reading

JSON to C# objects

.NET natively supports JSON through System.Web.Script.Serialization.JavaScriptSerializer.
In shorthand, it goes like this:

using System.Web.Script.Serialization;
var obj = new JavaScriptSerializer().Deserialize({YOUR JSON STRING});//String to Object

This, will de-serialize your JSON string to a generic object, but going from this to get a value well within the structure of a JSON string is quite messy:

Continue reading

Getting Real Time Visitor Stats to your WordPress.com blog through Google Analytics (and a little more!)

When I decided to create and maintain a blog, the first though that came to my mind was that I didn’t had the time neither to setup nor to support just another open source tool. I just wanted something to immediately start writing and posting and WordPress.com was the perfect solution. Everything is quick and easy here EXCEPT stats. They are awful, especially for someone like me that uses analytics for over 30 sites. I looked around but I found nothing about supporting google analytics to WordPress.com, and that is quite true, I couldn’t have full analytics support. The only thing I managed to do was to have real time visitor stats through google analytics (plus hits,pageviews,location etc), using a little hack and the google analytics image call. Nothing much, but I thought I should share and maybe some one else could find a better solution…

Supposing that this is your tracking code:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-xxxxxx-xx', 'wordpress.com');
  ga('send', 'pageview');
</script>

You just need to follow these steps:
Continue reading

jQuery: How to stop an animation and prevent multiple queued animations

There is a magic jQuery method for it, called stop(). When called, it immediately stops any active animation on matched elements.

For example the following

    $("...").animate({left: '+=100px'}, 2000).stop();//nothing happens, animation is queued

will queue the animation but it will not move. A second call for an animation on this object will move it first by 100px and then by whatever animation you choose:

    //Example 1    
    $("...").animate({left: '+=100px'}, 2000).stop();     //nothing happens, animation is queued
    $("...").delay(2000).animate({top: '+=200px'}, 2000); //moves to the right by 100 and then down by 200

This is the default behavior of “.stop()” but you can alter it with the help of two boolean arguments, clearQueue and jumpToEnd. Default values of these are false, meaning that when stop is called (either like “.stop()” or like “.stop(false, false)”), the object immediately stops any movement and the animation is queued, waiting for the next call:

Continue reading

jQuery: How to create a new plugin

Basic template:
The following template is a basic plugin. You can change the name “PluginName” to whatever you want, add or remove arguments and add of course your code!

//Map JQuery to the dollar sign (to avoid overrides)
(function( $ ){
    //Name and params
    $.fn.PluginName = function(a1, a2, ...) {
       ...
    };
})( jQuery );

//Usage
$("...").PluginName("arg1", "arg2", ...);

You can continue reading more information on plugin creation that include:

  • Use of ‘this’ keyword
  • Maintaining chainability
  • Default options/settings
  • Enforcing encapsulation
  • Binding and unbinding events

Continue reading