Google Analytics.NET

Prelude [skip]

I’ve been using Google Analytics for a while now, both for this blog and my projects site, and as many others I think the service is great.

While creating my project site, I wanted to make sure that the site had graceful degradation, especially that the site would be accessible without javascript.
This introduced a new problem for me, even though visitors with javascript disabled where able to see the site rendered, their visits where not tracked in Google Analytics.

I stumbled upon a solution by Remy Sharp (see here), in the form of a plugin written in PHP for the popular WordPress blog engine, and with his permission I ported it to a .NET solution.

So what does this project do?  

It generates a snippet that includes not only the regular Google Analytics script, but also a small <NOSCRIPT> tag with an image loaded from Google’s servers, with parameters about the current request.

The result:

The visitor with a javascript disabled browser is tracked, and appended with “[NOSCRIPT]” for easy identification in the dashboard.

Project Components

The project includes three basic components:

1. Core Engine
   Generates the snippets, either separately (for the NOSCRIPT, and the script), or the entire snippet
2. ASP.NET MVC Html Helpers
   
   
   <%= Html.GoogleAnalytics("UA-xxxxxx-x"/* Google Analytics Account ID */)%>
   
   

   
   
   
   
3. ASP.NET Web Forms
   
   
   <GoogleAnalytics:GAControl ID="GAControlID" runat="server" GoogleAnalyticsID="UA-xxxxxx-x" />
   
   

   
   

There’s also a small sample site, with both ASP.NET MVC and ASP.NET Web forms samples.

Where can I get it?

Visit the project page for more details.

Enjoy,

Erik

jQuery Console Plug-in

Prelude [skip]

A typical scenario for me when I start a new web site, is to include JavaScript snippets from previous sites.

I usually get to a stage where need to solve problem that think I’ve solved before.
Then, after a dark era for about 5 minutes of trying to actually remember when and where the solution is, I copy it to the new site.

Each time I keep telling myself that I need to create some kind of template for those typical snippets I always end up adding.

I wrote this jQuery plug-in since it’s one of the more common snippets I kept using.

Every web developer out there is familiar with the amazing FireBug plug-in for FireFox, and probably also with the great logging features such as :

console.log('something to log');

This is a great feature for debugging your JavaScripts, in fact, it’s a real life saver.

As you can’t really leave the FireFox specific syntax to throw errors in say… IE6, you’d usually end up writing something like this in your project :

function LogToConsole(MessageOrObject){

  if (typeof(window['console']) != 'undefined'){

    console.log(MessageOrObject);

  }

}

Now that’s fine, but it limits you to debugging only in Firefox, which of course is never enough.
Other browsers also have this feature, however, some with slightly different syntax.

Chrome’s JavaScript debugger is quite useful (Ctrl + Shift + J), and it also supports console.log.
So does Safari’s Developer (Which you need to enable in Settings –> Advanced, then Ctrl + Alt + I).
Surprisingly enough, even Internet Explorer 8’s developer (F12) uses the same syntax.
Opera’s DragonFly (Tools –> Advanced –> Developer Tools) however use a totally different syntax :

opera.postError({someLabel:'someValue'});

The console object also exposes several more helpful functions for debugging, such as console.error, console.trace etc.
These extra functions are not yet supported in a standard way in all browsers unfortunately.

So what does this plug-in do?  

Simply put, it enables you to do safe, cross browser logging to the console.

Examples:

To log any object to the console:

$.Console.Log('message',['dsad','dasdas'],{orJSON:'312'});

Or, for debugging:

$.Console.Debug('message',['dsad','dasdas'],{orJSON:'312'});

To log a selected element(s), this time using the Info function if available :

$('selector').Console($.Console.functions.Info) 

Here’s a list of all functions available in the $.Console.functions :

• Log
• Trace
• Debug
• Info
• Warn
• Error
• Dir
• DirXML
• Group
• GroupCollapsed
• GroupEnd
• Time
• TimeEnd
• Profile
• ProfileEnd
• Count

Please see http://getfirebug.com/console.html for more details on each function.

Where can I get it?

Project Page : Sample Page :  Fork the project at Github

Enjoy,

Erik

Update - jQuery Print Element Plugin version 1.0 Released

Thanks to John and David for their contribution and valuable input.

Version 1.0 has no new groundbreaking features, mostly bug fixes (see changelog).

There’s a new documentation page explaining the available options, and a new sample page as well.

As always, any feedback will be much appreciated, either as comments here at the blog,  as an issue at the issues section,  or a bug report at the official jQuery plugin page.

Enjoy,

Erik

Installing Windows 2008 R2 on an iMac (Boot Camp)

Skip the prelude and show me the steps!

Prelude:

I have an amazing iMac at work. unfortunately, I spend most of my time on the Windows side of the Boot Camp, since I develop mostly Windows Based software. This requires quite some tweaks, since I can’t really develop and test properly if I’m not on a server based operating system.

I started with XP on the boot camp, but after a short (and annoying) period I understood that I had to install Windows 2003 server.

Alas, the only Windows operating systems officially supported by Apple are XP and Vista.

I managed to install the Windows Server 2003 with only a few driver hiccups (especially the network driver), and worked with that for a rather long period.

When Windows 2008 Server got to the second service pack I though it was stable enough to install.

The installation went more smoothly than the 2003, since Windows 2008 SP2 is based on Vista, thus most of the drivers included in the Boot Camp worked out of the box.

This worked for a while, but was annoying..

I’ve been working quite a while with Windows 7 at home, and after you get used to the new interface, the usability and the speed, going back to the 32bit Server 2008 at work is not so peachy.

Thankfully, Microsoft came out with Windows Server 2008 R2 (or should I saw Windows 7 Server).

Installing it was not as trivial as the previous versions, and that’s why I decide to write this LONG post :)

Installation Steps:  

1. Alter the ISO to work on Mac:
   Burning the original ISO downloaded from Microsoft wont work, you’ll see two CD’s (Windows and EFI), and booting from the windows will result in something like this:
   

   1.
   2.
   Select CD-ROM Boot Type:

   (The keyboard won't be responsive at all)
   Follow the instructions thoroughly from this great post : http://jowie.com/blog/post/2008/02/24/Select-CD-ROM-Boot-Type-prompt-while-trying-to-boot-from-Vista-x64-DVD-burnt-from-iso-file.aspx
   Be sure to notice the bold comments about Windows 7 (E.g. 8 sectors to load instead of 4).
2. Follow the instructions from  http://www.win2008r2workstation.com/ (especially the enable audio part)
3. Install Boot Camp (64 bit) from your Mac OS X CD
4. Upgrade Boot Camp to 2.1 (for 64 Bit Vista) - http://www.apple.com/downloads/macosx/apple/application_updates/bootcampupdate21forwindowsvista64.html
5. The volume will be REALLY low, you need to install an updated driver for the RealTek Audio Card - http://www.realtek.com.tw/downloads/downloadsCheck.aspx?Langid=1&PFid=24&Level=4&Conn=3&DownTypeID=3
   (Click accept to get to the download links)

That’s it, you’re good to go!

Small note,

The Windows 2008 R2 allows you to add your computer to the domain WITHOUT requiring a domain administrator’s password, as long as you are not using a name for the computer that has already been registered in the domain..

Cheers,

Erik

Trusting http://www.hotlinkfiles.com/

Just reconnected to the blog after a small vacation only to see that the entire layout looked awful.

For some unknown reason, not only did http://www.hotlinkfiles.com/ block my javascript, images and css files, they deleted my user as well.

Oh well, back to the drawing board..

Until I’ve resolved the issue, I’ve reverted the blog to the current simple theme..

Erik

Connecting to my very well hidden artistic side

As a part of the redesign I’m doing for my github site, I wanted to add a comic image of myself (inspired by @addyosmani and @davidwalshblog’s great avatars)

First, as always, lazy part of me tried some shortcuts.
I googled “cartoonize me”, and spent some time with the Simpsonize me without any good results.
After a while I found a rather cool site called befunky, which allows you to upload an image and do several sorts of effects on it, one being the cartoon effect, which I wanted..

Here’s the result:

Although I was rather pleased with the result, it didn’t satisfy me.

Okies then, if you want something done right, do it yourself, right?

I fired up Adobe Illustrator, and hooked up the Genius Tablet I got for my talented Fiancée and gave it a try.

Here’s the result:

There should be a law forbidding people with graphic “talents” like me to even attempt to draw.

This is one of those “hmm.. it might be better to outsource this..” moments..

:)

jQuery Late Loader Plugin

Prelude

When enhancing dynamic pages (no matter the server side language behind), jQuery is more than helpful.
Especially since there’s loads of jQuery plugins out there, saving so much time and effort.
When using javascripts in reoccurring user controls, controlling the added javascripts and css files from the server language is possible (to prevent duplicate loading), but in many cases adds bloated and hard to maintain code.
Keeping the includes only in the markup is easier to maintain (IMHO), however might cause unneeded http requests to your scripts and css files, especially if you have a page with multiple reoccurring user controls.

The Plugin

This plugin will allow you to include scripts ands css files dynamically, with success and failure callbacks.

Usage

$.LateLoader = 

    {

        LoadScriptOrCSS: 

        /*

        Loads a javascript/css from the passed url if it wasn't previously loaded

         

        The parameter can either be a string with the wanted url( then the default

        params are used (See Defaults for more details)), or an option object 

        URL -> relative or absolute URL to your javascript/css 

        */

        IsScriptOrCSSLoaded:

        /*

        Returns true|false if a javascript/css is already loaded

        (via LoadScriptOrCSS)

        

        Parameters : 

        URL-> relative or absolute URL to your javascript/css 

        Type->'js' or 'css' (defaults to 'js')

        */

        GetLoadedScriptOrCSSs: 

        /*

        Returns an array of all loaded scripts (object with 2 arrays, css and js)

        */

        GetLoadedScriptOrCSSsByType:

        /*

        Returns an array of all loaded scripts/css according to the passed type

        

        Parameter : 

        Type->'js' or 'css' 

        */

        PluginDefaults:

        {

            ArrayDataKey: "LateLoaderDataKey", 

                  //Unique key used to identify the jQuery Data collection

            ElementToAttachDataTo: "body", 

                  //DOM object that hosts the jQuery Data collection

            RemoteTimeout: 1500 

                  //MS of timeout to wait for a remote script..

        },

        Defaults:

            {

                URL: null, 

                  //Will be filled in by LoadScriptOrCSS's parameter

                Type: 'js', 

                  // 'js' or 'css' (defaults to 'js')

                LoadedCallBackFunction: null, 

                  // Called when the javascript/css is loaded (default is null)

                ErrorCallBackFunction: null 

                  // Called when an error occurs (default is null)

            }

    }

Where can you get it?

Main project page | Sample Page | Wiki | Source

What’s missing in it?

Detecting remote css files that are missing are so far only supported in IE
The plugin should scan the existing scripts / links includes as well as the data loaded by the plugin

Got suggestions?

I’d love to hear any feedback!

Enjoy,

Erik