Archive for February, 2009

Sample Apache cache configuration

Thursday, February 26th, 2009

The Apache 2 web server can be configured to define a custom cache policy, allowing a fine-grained control over your web site content lifecycle in browser caches. This article provides a step-by-step simple configuration sample. The reader is invited to read first this other article presenting the HTTP 1.1 cache mechanisms.

Step 1: Activate expiration module

By default, Apache 2 doesn’t insert any expiration header in served documents. This feature is provided by a specific module, mod_expires.

Two operations are required to activate the feature:
•    add mod_expires to the list of enabled modules,

a2enmod expires

•    add the ExpiresActive On directive to the site configuration.

NameVirtualHost *
<VirtualHost>
...
   <Directory /var/www/mysite>
      ExpiresActive On
   </Directory>
...
</VirtualHost>

Step 2: Define a default expiration policy

A default expiration policy that applies to all documents can be specified using the ExpiresDefault directive.

I would recommend to define the default expiration period to a very short value, in order to avoid client browsers keeping forever in cache documents for which you forgot to provide an explicit expiration period (see next paragraphs).

NameVirtualHost *
<VirtualHost>
...
   <Directory /var/www/mysite>
      ExpiresActive On
      ExpiresDefault "access plus 10 minutes"
   </Directory>
...
</VirtualHost>

Step 3: Define an expiration date per document type

A specific expiration policy can be defined for each document type using the ExpiresByType directive.

It is for instance possible to define an explicit expiration policy for HTML pages, javascript, images and json text files in order to control their lifetime in the browser cache, and avoid unnecessary validity checks from the client.

NameVirtualHost *
<VirtualHost>
...
   <Directory /var/www/mysite>
      ExpiresActive On
      ExpiresDefault "access plus 10 minutes"

      ExpiresByType text/html "access plus 1 day"
      ExpiresByType text/javascript "access plus 1 day"
      ExpiresByType text/x-json "access plus 1 day"

      ExpiresByType image/gif "access plus 1 month"
      ExpiresByType image/png "access plus 1 month"
      ExpiresByType image/jpg "access plus 1 month"

   </Directory>
...
</VirtualHost>

Note: The apache 2 web server uses the MIME-type to categorize documents. In order to have the proper directive applied to them, JSON text files must be sent as text/x-json documents.

Step 4: Mark session-specific documents as non-cacheable

Even if a large part of a specific site might be cacheable without disturbing the service, some specific documents are purely dynamic (like the results of a search query for instance) and must not be cached.

Fortunately enough, it is allowed to define exceptions to the general expiration policy defined for a given file type, using file pattern matching with the FilesMatch directive.

Thus, it is possible to specify that a Cache-Control header corresponding to “no-cache” be inserted for all files matching a given criteria, that can be based on a regular expression.

The Header directive is used to insert specific Cache-control values. It is provided by the mod_header module, which is activated by default.

NameVirtualHost *
<VirtualHost>
...
   <Directory /var/www/mysite>
      ExpiresActive On
      ExpiresDefault "access plus 10 minutes"
      ExpiresByType text/html "access plus 1 day"
      ExpiresByType text/javascript "access plus 1 day"
      ExpiresByType text/x-json "access plus 1 day"

      ExpiresByType image/gif "access plus 1 month"
      ExpiresByType image/png "access plus 1 month"
      ExpiresByType image/jpg "access plus 1 month"


      <FilesMatch "searchResults.html">
            Header set Cache-control "no-cache"
      </FilesMatch>

   </Directory>
...
</VirtualHost>

HTTP caching explained

Wednesday, February 11th, 2009

Web developers can take advantage of HTTP caching mechanisms to improve significantly the performance and the robustness of their site.

HTTP caching mechanisms are however not well-known and often not-well understood. This article aims at clarifying things without going into too much details.

For a more complete description of these mechanisms, please refer to the HTTP/1.1 RFC.

The HTTP/1.1 protocol includes two basic “caching” mechanisms to:

  • eliminate the need to send requests in many cases, using an “expiration” mechanism,
  • eliminate the need to send full responses in many other cases, using a “validation” mechanism.

The HTTP/1.1 Expiration model

The HTTP/1.1 expiration model, as defined in [RFC2616 §13.2], is designed to avoid the client making requests to the origin server until the corresponding content has expired.

The HTTP/1.1 expiration model does not mandate that the origin server explicitly specifies expiration dates for contents. For that reason, each client needs to define its own caching algorithm.

Note: A simple algorithm is provided in [RFC2616 §13.2], based on the last modification date of a document. If that information is provided, then the expiration date equals ten percent of the difference between the reception date and the modification date.

However, deterministic client behaviour is often desirable to avoid server congestion, and two headers can be used to explicitly specify the expiration date of a particular content:
• Expires (see [RFC2616 §14.21]),
• Cache-control, max-age directive (see [RFC2616 §14.9]).

Note: The Cache-control header always takes precedence over the Expires header

Example:

A page that expires in ten minutes (see how both headers are here redundant)

HTTP/1.1 200 OK
Date: Mon 06 Oct 2008 12:33:48 GMT
Server: Apache/2.2.8
Cache-Control: max-age=600
Expires: Mon 06 Oct 2008 12:43:48 GMT

More, the Cache-control header can also be used to further control the cache handling on the client side, by using a set of directives that directly control the client caching algorithm.

Example:

Never cache this page (Expires header will be ignored):

HTTP/1.1 200 OK
Date: Mon 06 Oct 2008 12:33:48 GMT
Server: Apache/2.2.8
Cache-Control: no-cache
Expires: Mon 06 Oct 2008 12:43:48 GMT

Always revalidate this page (Expires header will be ignored):

HTTP/1.1 200 OK
Date: Mon 06 Oct 2008 12:33:48 GMT
Server: Apache/2.2.8
Cache-Control: must-revalidate
Expires: Mon 06 Oct 2008 12:43:48 GMT

The HTTP/1.1 Validation model

The HTTP/1.1 validation model, as defined in [RFC2616 §13.3], is designed to request the client to verify first if a content has changed before fetching it from the server.

To verify if a stale cache entry is still valid, the client simply inserts specific headers in the request it sends to the origin server, passing back a specific tag it has received in the initial request. If the origin server recognizes that the tag corresponds to a content that hasn’t changed, it responds with a “304 Not Modified”. Otherwise, it sends back the updated document.

Note: Hints that this mechanism is at work can thus be found by looking for “304 Not Modified” responses in the web server logs.

The following two headers are typically used to tag a particular content:
• Last-Modified (see [RFC2616 §14.29]),
• Etag (see [RFC2616 §14.19]).

Caching documents retrieved through HTTPS

By default, most browsers do not cache documents retrieved through HTTPS for security reasons.

However, the origin server can use the Cache-Control header to specify that a specific document is public, and can thus be cached.

Example:

HTTP/1.1 200 OK
Date: Mon 06 Oct 2008 12:33:48 GMT
Server: Apache/2.2.8
Cache-Control: public
Expires: Mon 06 Oct 2008 12:43:48 GMT

SVG inline in XHTML

Sunday, February 1st, 2009

SVG is now supported by all web browsers except IE. Opera has the best SVG support, but Safari and Firefox are not far behind. I think it is now time to take advantage of the powerful SVG features.

What does SVG add to the web developer toolkit ?

Well, as its names indicates, SVG first provides a simple syntax to draw shapes that scale: it is thus particularly handy to draw screen layouts and buttons. I see some people starting to get interested …

But wait: SVG also includes a wide range of gradient, opacity and geometric transformations that can be applied not only to native SVG shapes, but also to images. This give you access to many fancy effects very hard to achieve with HTML alone, like for instance image reflection or fading.

Want more ? Check this out: SVG markup can be modified dynamically using javascript, allowing you to actually animate it. Who said cover-flow at the back of the class ?

Animation through javascript sucks on low-end devices ? Well, SVG also includes native animation capabilities (unfortunately only supported today by Opera).

Fair enough, but the whole web is built on top of HTML, and switching to full SVG is definitely an option.

Well, the cherry on the cake is that you don’t have to: SVG can be inserted inline into XHTML. How powerful that is ?

You will find detailed information on why and how it works on the SVG wiki. A method to have inline SVG supported by IE using the Adobe SVG viewer is also provided.

Here is an overview of what you need to do.

  • First, you need to use XHTML, because plain old HTML doesn’t support being extended by another markup language, and your SVG markup will be ignored by the browsers.
  • Second, you need to make sure that the SVG-aware browsers know this is XHTML, by delivering your content to them as application/xhtml+xml. You probably nevertheless still want to deliver your content to IE as text/html, so what you need is conditional mime-types based on the Accept header of the user agent.
    • it can be done at the HTTP server level. See example below for apache (example taken from the SVG wiki):
      AddType text/html .xhtml
      RewriteEngine on
      RewriteBase /
      RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
      RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
      RewriteCond %{REQUEST_URI} \.xhtml$
      RewriteCond %{THE_REQUEST} HTTP/1\.1
      RewriteRule .* - [T=application/xhtml+xml]
      
    • If you don’t have access to your web server configuration, you can still:
      • modify headers on the fly. See an example for PHP below:
        if(preg_match("|application/xhtml\+xml|i",$_SERVER["HTTP_ACCEPT"]){
          header("Content-Type: application/xhtml+xml");
        }
        
      • or insert meta tags in the HTML head to specify the proper mime-type. See another example for PHP:
        if(preg_match("|application/xhtml\+xml|i",$_SERVER["HTTP_ACCEPT"]){
          echo "<meta http-equiv='Content-Type' content='application/xhtml+xml' />" ;
        }
        
      • If you use WordPress, the simpliest way is to use the Content-Negotiation plugin
  • Third, put your SVG under an SVG tag
  • <div id="myDIV">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    	 xmlns:xlink="http://www.w3.org/1999/xlink"
    	 viewBox="0 0 400 50"
    	 id="myDIVBG">
    	    <defs>
    	      <linearGradient id="myGrad">
    		<stop style="stop-color:#ff5b06;"
                            offset="0" />
    		<stop style="stop-color:#ffb11a;"
                            offset="1" />
    	      </linearGradient>
    	    </defs>
    	    <rect style="fill:url(#myGrad);"
    	       width="400" height="50"
                   x="0" y="0" rx="10" ry="10" />
        </svg>
        HTML Text with SVG background
    </div>
    
  • Fourth, style your SVG with CSS
  • <style type="text/css">
    #myDIV {
        position:relative;
        width:400px;
        height:50px;
    }
    #myDIV svg {
        position:absolute;
    }
    #myDIV svg:hover rect {
        fill: red !important;
    }
    #myDIV span {
        position:absolute;
        top:15px;
        left:40px;
        font-size: 16px;
        font-weight: bold;
    }
    </style>
    

The result should look like this:

HTML Text with SVG background

Please note in particular how the CSS styling allows the SVG to be perfectly integrated in the page:

  • the absolute positioning of the svg root element allows the next-coming HTML span to appear on top of the SVG background
  • the :hover behaviour allows a dynamic update of the SVG rect element fill attribute when the element is moused over

You will find more examples below:

Le monde selon jeanclod

Sunday, February 1st, 2009

This is a french Kaizou:

Ce Kaizou propose une réinterprétation du Web selon les propres mots de notre ami jean-claude Van Damme. Les citations proviennent de cette page.

See it in actionDownload it

Bad Klingon translator

Sunday, February 1st, 2009

This Kaizou file (badly) translates web pages in english into Klingon Language (see http://www.kli.org/).

See it in actionDownload it

Fuddish translator

Sunday, February 1st, 2009

This Kaizou file translates web pages in english into Elmer Fudd’s language.

See it in actionDownload it

South Carolina words of wisdom

Sunday, February 1st, 2009

This Kaizou file replaces some sentences in the page by Miss South Carolina quotes. As most of my Kaizous, It works on every web page, but is targeted at a few selected sites for the demonstration. Just edit the file to add more sites. Note: Works poorly for IE users.

See it in actionDownload it

All your web are belong to Kaizou

Sunday, February 1st, 2009

This Kaizou file replaces some sentences in the page by ‘All your base are belong to us’ quotes.

See it in actionDownload it

Google has been kaizoed !

Sunday, February 1st, 2009

A revamping of the Google Home page: replaces the google logo by a kaizou logo, and change all links to point back to http://www.kaizou.org.

See it in actionDownload it

Yodish translator

Sunday, February 1st, 2009

This Kaizou file translates web pages in english into Yodish, based on rules defined on [YodaJeff.com](http://www.yodajeff.com/pages/talk/likeyoda.shtml “Learn how to talk like Yoda”).

See it in actionDownload it


download free edition adobe photoshopfree download hustler magazine in adobe format Kopen oem software download adobe after effectsadobe svg veiwer downloaddownload adobe acrobat for freeppd download adobe Windows 7 adobe flash player active x downloadadobe reader kostenloser download download Adobe software