XMLHttpRequest’s in Internet Explorer 5 and 6

Posted on by

Internet Explorer versions 5 and 6 did not define the XMLHttpRequest object identifier in their scripting languages as the XMLHttpRequest identifier itself was not standard at the time of their releases.

The following JavaScript encapsulation is used to provide a backward compatibility with these browsers :

 
if (typeof XMLHttpRequest == "undefined") 
  XMLHttpRequest = function () 
    { try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } 
      catch (e) {} 
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } 
      catch (e) {} 
    try { return new ActiveXObject("Microsoft.XMLHTTP"); } 
      catch (e) {} 
    //Microsoft.XMLHTTP points to Msxml2.XMLHTTP and is redundant 
    throw new Error("This browser does not support XMLHttpRequest."); 
};

Cross Domain Communication, Same Origin Policy and CORS

Posted on by

In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The term origin is defined using the domain name, protocol, and port number of the HTML document running the script. It has always been possible for the browser to make cross origin requests by specifying a resource from a foreign domain in the IMG, SCRIPT, IFRAME tags etc. But with these requests the client-side script does not have access to the content of this resource, it can only be executed or rendered by the browser.

The same origin policy permits scripts running on pages originating from the same site to access each other’s methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites. The goal of the policy is to prevent cross-site scripting (XSS), a type of computer security vulnerability typically found in Web applications that enables attackers to inject client-side script into Web pages viewed by other users.

With the growing popularity of Ajax, a group of interrelated web development methods used on the client-side to create asynchronous web applications, the same origin policy became more and more a serious drawback. With Ajax, data is usually retrieved using the XMLHttpRequest object.

Various alternatives have been developed to circumvent the same origin security feature, for example :

  • Flash or Silverlight with a  crossdomain.xml policy file
  • iFrame URL Technique
  • JSONP (JSON with padding)
  • XMLHttpRequest Level 2, which has been merged into the main XMLHttpRequest specification in December 2011
  • XDomainRequest (non standard) used by IE 8
  • window.location.hash hack
  • Facebook cross domain communication channel
  • window.postMessage() : supported by Firefox 3, Safari 4, Chrome and IE 8

With HTML 5, a new web browser technology emerged which defines ways for a web server to allow its resources be accessed by a web page from a different domain. This technology is called CORS (Cross-Origin Resource Sharing), a first working draft was published by W3C.

CORS works on a per-page access-control model. Every page has to respond with a special header, the Access-Control-Allow-Origin header to be accessible by a foreign site.In the CORS model the responsibility of Access Control is in the hands of the developers and not the server administrators. One drawback of this technology is that the Access-Control-Allow-Origin header is not yet supported by Amazon AWS S3. A lot of web designers are requesting this feature on the AWS Developer Forum.

The following list gives additional useful links to websites reporting about this topic :

HTML5 Video

Posted on by

Last update : January 30, 2013
The HTML5 video specification and the various browser implementations are in constant evolution. LongTail Video has spend a signficant amount of time understanding the limitations of the technology, testing playback across various browsers and devices, and optimizing the jwplayer for HTML5 playback.

Today LongTail Video published a State of HTML5 Video Report to share with other developers and users in the industry just what HTML5 can and cannot support.

Other useful informations about HTML5 Video are available at the following websites :

Optimize favicons

Posted on by

Last update : March 21, 2016

Favicons plugin by Telegraphics

Favicons plugin by Telegraphics

Favicons (.ico files) are the little pictures at the left of the URL on the address bar of the browser. Favicons are an excellent free branding tool for webmasters and blog owners. They help you create brand awareness. Favicons are downloaded by each new visitor to a website. Favicons are extremely important because they are requested before any other components by the browser. By optimizing faveicons, you reduce bandwidth costs and server load.

With the code

<link rel="shortcut icon" href="chateau.ico" />

you can reference any location for the favicon. If it is absent, the Browser tries to fetch it from the domains root instead and each time the browser requests this file, the cookies for the server’s root are sent.

An outstanding tutorial how to include favicons on websites and especially in WordPress blogs is shown at MaxBlogPress. There are various free tools available to create favicons. A plugin for Photoshop to create and optimize favicons is available from Telegraphics, free software by Toby Tain.

Thera are also numerous online webtools available to create and optimize favicons, for example :

Some useful links to websites with more information about optimizing favicons are listed below :

Optimize png images

Posted on by

PNG (Portable Network Graphics) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license.

PNG supports palette-based images, grayscale images, and full-color non-palette-based RGB[A] images (with or without alpha channel). PNG uses a non-patented lossless data compression method known as DEFLATE, which is the same algorithm used in the zlib compression library.

The first version of the PNG specification was released on October 1, 1996 as a W3C Recommendation.

Various tools are available for optimizing .png files; they do this by :

  • removing ancillary chunks
  • reducing color depth
  • optimizing line-by-line filter choice
  • optimizing DEFLATE compression.

In general one must use a combination of 2 tools in sequence for optimal compression: one which optimizes filters and removes ancillary chunks, and one which optimizes DEFLATE.

Some common tools are :

  • OptiPNG
  • PNGOUT
  • Pngcrush
  • PngGauntlet

There are several online tools available on the web to optimize .png files :

  • PunyPNG, compression and image optimization tool developed by Gracepoint Berkeley
  • Smush.it, by Yahoo Developer Network

A list of some useful tutorials about image compression is shown below :

Hide text with CSS

Posted on by

Sometimes you need to use an image, with text, for the background of an input button or an image link. This can be the case when you want to have a regular value in a button so that screen readers and people surfing without CSS can still figure out what the input says.

To hide the text with CSS, there are several possibilities :

  • set the font-size value to zero : the CSS specification does not indicate how browsers should display text when the font-size is set to a value of zero; many browsers handle it unpredictably
  • set the color of the text to transparent : it works in new browsers, including IE 9, but not in older IE versions
  • position the text out of the screen with left:-9999px or text-indent:-9999px
  • set the text invisible with span {display:none;} or span {visibility:hidden;}

The W3C published a technique using CSS to hide a portion of the link text as part of Techniques and Failures for Web Content Accessibility Guidelines 2.0.

Breadcrumbs

Posted on by

Breadcrumbs are navigational links that appear usually below the page header. They provide a hierarchical path that can assist users in orienting themselves within a site.They do not necessarily follow the directory structure. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

Facebook HTML5 Resource Center

Posted on by

In 2011, Facebook launched a HTML5 web portal to show developers how to build amazing products.The following topics are covered :

  • Build : Learn the tricks of the trade to building the most compelling experiences
  • Test : Utilize a wide array of tools to help ensure your experiences are consistent across browsers
  • Distribute : Utilize Facebook and other channels to distribute your app to a large audience
  • Showcases : View examples and learn how to use web standards such as HTML5, CSS3, and Javascript to deliver rich experiences in your website

The Friend of a Friend (FOAF) project

Posted on by

 

Friends of a Friend

The Friend of a Friend (FOAF) project is creating a Web of machine-readable pages describing people, the links between them and the things they create and do. The FOAF project began early in 2000 as an experimental linked information project, created by Dan Brickley and Libby Miller.

The primary technical documentation for the core FOAF vocabulary is the FOAF specification. The FOAF Wiki and documentation webpages provide more informations about the project.

Accesskey’s

Posted on by

Accesskey’s allow a computer user to jump to a specific part of a web page or to a link via the keyboard. In most web browsers, the user invokes the access key by pressing Alt (on PC) or Ctrl (on Mac) simultaneously with the appropriate character on the keyboard. The acceskeys are declared as follows :

<a href="index.html" accesskey="h">Home</a>

The use of the following key-mapping is common :

  • S – Skip navigation
  • 1 – Home page
  • 2 – What’s new
  • 3 – Site map
  • 4 – Search
  • 5 – Frequently Asked Questions (FAQ)
  • 6 – Help
  • 7 – Complaints procedure
  • 8 – Terms and conditions
  • 9 – Feedback form
  • 0 – Access key details