dottodotnet: Javascript

Showing posts with label Javascript. Show all posts

Tuesday, 21 January 2014

Should I be supporting those pesky users without JavaScript enabled?

In the past, I've personally been an strong believer that progressively enhancing your web site was the best approach for handling users with JavaScript (JS) disabled. This way, users without the luxury of JS (for whatever reason) get the basic functionality; whilst the other ~99% have their JS enabled browsers 'enhancing' their experience.

Recently however, I've been wrestling as to whether this is the correct approach, it isn't easy and can be costly in development time and effort. Am I just being old fashioned by sticking with the progressive enhancement approach? Possibly.

What should you be considering when deciding whether to support users without JS? I think there's two important questions/areas to cover...

What's the volume of users hitting your site and what are the percentage of your users that don't have a JS enabled browser?

If you don't have this data, it's simple to get by placing images loaded in different ways on your most popular page and reviewing your web server logs (using something like log parser) to compare:

An image (a blank gif) loaded using a standard img tag in the body of the HTML page
An image loaded using JS

Think about it, 1% is a big number if you've got 1 million users hitting your site every month!

Should your site need JS to function properly?

Don't complicate your web apps unnecessarily by throwing JS in as a requirement. Progressive enhancement works great in a lot of scenarios!
Does your ecommerce web app, really need JS enabled before someone can give you their money? Probably Not. Does your interactive messaging web app really need JS enabled to work properly? If you want to give your users a rich and interactive experience, yes.

You can always serve two different versions of your applications, this is what GMail does:

So I suppose I'm giving you the consultants answer of "It depends!". But it really does, it's not just black and white.

One more thing. If you do decide not to 'properly' support users without JS, you should let them know, rather than them just leaving them with a bad taste in their mouth over your "broken" web site.

Useful Links

A nice article from AListApart that's explains Progressive Enhancement
"How many people are missing out on JavaScript enhancement?" by the Government Digital Services Agency

Tuesday, 15 March 2011

jQuery Sytax Error - Unrecognized Expression

A recent upgrade to jQuery 1.5 from 1.2 highlighted a problem with jQuery expressions which resulted in a number of javascript errors...

Syntax error, unrecognized expression: [@attributename=value]' when calling ...

Some digging highlighted that attribute selectors, since jQuery 1.3 and above no longer use the @ syntax. This actually had been deprecated since version 1.1.4, but only from version 1.3 is it no longer supported.

Old way (pre jQuery 1.3)...

$("#holder input[@value=contacts2]");

New way (post jQuery 1.3)...

$("#holder input[value=contacts2]")

Friday, 30 April 2010

Finding a Client's Mac Address via Javascript

Unless a user is on an internal network, there is no way server-side (I know of) to retrieve the mac address of a user accessing a web page, simply because it isn't sent in the http headers for a request. Any attempt to analyze the underlying network communications server side is pointless as it will just return the MAC address for the last routing machine. However, it is possible to retrieve the mac address of the user simply using client-side Javascript in IE.


<html>
    <head>
        
    </head>
    <body>
        MAC Address
        
    </body>
</html>

Once you've accessed the WMI and got the MAC address you can even send the value server-side if necessary.

Implications: You are connecting to the WMI (Windows Management Instrumentation) for the local machine and therefore you may have a problem if your IE security settings are restrictive. Also, this won't work in non-IE browsers; only works for Windows operating systems. Not all that restrictive then?! ;)

Troubleshooting: If you get an 'automation server can't create object' error when running the script it is probably for one of the reasons below.

You need to enable 'Initialize and script ActiveX controls not marked as safe' on the security tab -> custom level options in IE
WMI isn't installed correctly
WMI isn't installed
Some other permission issue. Are you an administrator? If on Windows 2000 server, have you installed sp4?

P.S. Another plausible option is to use an ActiveX control in connecting to WMI.

Tuesday, 13 April 2010

What is the aspnet_client Directory Used For?

The aspnet_client directory holds important javascript files used by ASP.Net sites for client side validation on web form controls. Although the directory isn't required for an ASP.Net site to run, it will affect behaviour of certain controls with client side validation enabled, so removing the directory should be avoided (unless you know what you are doing).

If you've removed it by mistake you can regenerate it by reinstalling the ASP.Net site using:

aspnet_regiis -c

Thursday, 4 March 2010

jQuery .html() Problems in Internet Explorer

So I've developed my web application in firefox, all seems to be working fine but before I check-in I quickly check the application in the other major browsers; they all work great. All work great APART from IE!

In IE it turns out that the jQuery .html() attribute won't replace contents of first matched element unless the new HTML is valid (i.e. opening and closing tags match). Guess I can't complain with IE not liking the HTML I'm giving it when its imperfect. If only IE practiced what it preached! :)

// This fails in IE...
$('#someDivID').html("<div id='newDivID'><p>hello world</p></div></div>");

// This works in IE...
$('#someDivID').html("hello world");

That is all.

Tuesday, 16 February 2010

Using Analytics to Track Events & AJAX Navigation

Google Analytics is THE way to record and analyse everything about the traffic on your site. Whilst it's real easy to setup you need to change the default behaviour if you want to record javascript events and AJAX navigation changes; this is how to do exactly that.

Analytics requires two things to work. You need the Analytics resource on the client...

<script type="text/javascript">
   var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
   document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

...and call the tracker with your unique ID (provided when you sign up)...

<script type="text/javascript">
   try {
      var pageTracker = _gat._getTracker("123456789");
      pageTracker._trackPageview();
   } catch (err) { }
</script>

...it's the pageTracker._trackPageview(); part that sends the data to Google Analytics. Without parameters the current URL is sent. However, you can override the default behaviour and pass the URL as an argument.

So change the second part to...

<script type="text/javascript">
   try {
      var pageTracker = _gat._getTracker("123456789");
   } catch (err) { }
</script>

...then you can call pageTracker._trackPageview('/My-Virtual-URL'); with your 'virtual' URLs at will - perfect for recording javascript events and AJAX navigation changes :)

Tuesday, 26 January 2010

Syntax Highlighter for C#, XML, SQL and More

I used SyntaxHighlighter before on my last blog and it is perfect for putting snippets of code up with your blog posts. Looks like its come on a treat too and even offers hosted source files for those of us without access to file hosting (and those of us too lazy). Would like to see them using a CDN for the hosted files though - maybe the Amazon S3 service.

Plugging the highlighter couldn't be easier, just refererence a few CSS and JS files. There's a quick explanation here of getting the hosted version working on your blog.

Example using syntax highlighter...

string output = "SyntaxHighlighter is brillo!";

// Tell the world...
Console.WriteLine(output);