The Blog That Refused To Throw NPE: javascript

Showing posts with label javascript. Show all posts

Saturday, 18 October 2008

Adobe Flash 10 released

It looks like it's "sniffer-update" time again... quite a few sites seem to have 'broken' with this new release, at least in Internet Explorer.

Here's a quick way of detecting the Flash version using ActiveXObject:


function testFlashIE() {
        var flashMajor=0;
        var flashInstalled=false;
 try {
  flAXO = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
  flVersion = flAXO.GetVariable("$version");
  flMajor = flVersion.substring(
                            flVersion.indexOf(" ")+1,
                            flVersion.indexOf(","));  
                flashInstalled=true;
                flashMajor=flMajor;
 }
 catch (e) {} // ignore

 if (!flashMajor) {
        // here comes the usual flash detection loop 
        // for older versions
        // ...
 }

        return flashInstalled?flashMajor:null;
}

Thoughts?

Wednesday, 24 September 2008

Aptivate Web Design Guidelines for Low Bandwidth

The NGO Aptivate, Cambridge, UK, brought together some useful information about simple bandwidth optimisation techniques/issues.

You can access their Web Design Guidelines for Low Bandwidth at:
http://www.aptivate.org/webguidelines/Home.html

Don't worry about bandwidth!
Soon we will all have infinite bandwidth for no cost.

Heard that before?

In fact it is not true for the majority of the world's population. Many people in remote locations and the developing world do not have fast Internet connections and won't be getting them any time soon.

This is why Aptivate has written a set of Web Design Guidelines for Low Bandwidth, at a time when web site optimisation seems to be going out of fashion.

Very interesting to see the world statistics for bandwidth and Internet access costs. Just goes to show how lucky we are in Western Europe / North America!

Also, here are a couple of the "tips" which particularly caught my attention:

drop using HTML tables for layout, switch to CSS: this has been discussed over and over and over, again and again and again, and yet... well, you get my drift =);

make your site cacheable: basically, avoid getting too wild with dynamic content;

externalise your CSS stylesheets and JS scripts: load it (them) only once for the whole site or sets of pages and let the browser subsequently use the cached version;

minimize the use of HTTP requests: there are lots of ways to do this like client-side form validation using Javascript, making sure dynamic pages don't require looping back to the server for pulling in extra files (CSS, images, etc.), and so on and so forth.

file and image optimisation: shrink PDF and optimise images for use on the web;

provide some sort of support for 'old' browser versions which may have limited support for CSS, Javascript, etc.

There is a lot more interesting information on the site covering a variety of topics: high-level design, CSS, caching, compression, multimedia, browser compatibility, search, PDF optimisation, and much more. Well worth the read!

Thoughts?

Friday, 5 September 2008

Google Chrome - user-agent (UA)

For anyone interested in browser detection, here is Google Chrome's "useragent" string:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

You can get it by simply typing "about:" in the omnibox ("address" bar)
or alternatively by adding the following to your <head> section.



<script language="javascript">
function showUA()
{
 userAgent = navigator.userAgent;
 alert("UserAgent: " + userAgent);
}

window.onload=showUA;
</script>

So something similar to the following could be used to detect which browser you are using:



<html>
<head>
  <script language="javascript">
    function setBrowser()
    {
      var browser="unknown";
      var userAgent = navigator.userAgent.toLowerCase();
      if (userAgent.indexOf("opera") > -1)
        browser="Opera";
      else if (userAgent.indexOf("konqueror") > -1)
        browser="Konqueror";
      else if (userAgent.indexOf("firefox") > -1)
        browser="Firefox";
      else if (userAgent.indexOf("netscape") > -1)
        browser="Netscape";
      else if (userAgent.indexOf("msie") > -1)
        browser="Internet Explorer";
      else if (userAgent.indexOf("chrome") > -1)
        browser="Chrome";
      else if (userAgent.indexOf("safari") > -1)
        browser="Safari";

      var brDiv=document.getElementById("browser");
      brDiv.innerHTML="<b>" + browser + "</b>";
    }

    window.onload=setBrowser;
  </script>
</head>
<body>
  You are using: 
  <div id="browser"></div>
</body>
</html>

If you are using one of those popular browsers its name should show up in the empty "browser" div in the body section. Note that the order of the tests is critical. For instance, both Opera and Netscape useragent strings contain "msie" so it is necessary to test for those browsers before testing for Internet Explorer.

Of course the above script is certainly very basic and we could take things a step further and not only retrieve browser name but also browser version for instance, or test for other things like whether the browser is Java-enabled, which Javascript version is available, which Flash Player version is installed or which operating system is being used.

Let me just share a couple of links which cover this more comprehensive approach to Javascript browser sniffing:
- Browser sniffing: takes an in-depth look at how to sniff all major and lots of minor browsers.
- JavaScript Browser Sniffer: the "ultimate" mainstream browser detection script.

Have fun!