Archive for the ‘General’ Category

Mar 06 2011

IE 8 LogoSince google dropped support for IE6 beginning 2010 a lot of companies followed their lead.

Now over a year later Microsoft creates a new website: http://www.ie6countdown.com which is dedicated to watching Internet Explorer 6 usage drop to less than 1% worldwide, so more websites can choose to drop support for Internet Explorer 6, saving hours of work for web developers… LoL beter late than never.

As a developer I try to develop cross browser/cross plaform websites. In that respect I spent a lot of hours debugging and hacking markup, css and javascript in IE6. My employer doesn’t care about the fact that this browser is over a decade old and still wants pixel-perfect designs with state-of-the-art functionality and behaviors arghh.

The fact that a lot of people (mainly marketing and management) in the company still view their pages with IE6 mainly because the guys and galls from workplace management can’t install a newer version of this darn piece of software. Yo guys and galls check out this page and read the “What about corporate users?” section..

I hope that the site will encourage big companies to put some extra effort in replacing this old and outdated browser.

If you are viewing this post with IE6….pretty please with sugar on top donwload:

Molehill is the codename for the upcoming Flash version. The 3D capabilities enabled by the new APIs will also be available through ActionScript 3D frameworks, such as Alternativa3D, Away3d, CopperCube, Flare3D, Minko, Sophie3D or Yogurt3D.

Very impressive check out some Molehill demo’s:

Get the Flash Player Incubator and check out:

ApacheCaching is great for production sites and should be configured. However during development it can be a royal PITA. Below a few rules you can put in your .htaccess file when your site is on apache hosting. The benefits of caching your site are not always obvious:

  • Optimise site performance
  • Improve conversion rate
  • Bandwith saving through gzip and http compression

Editing .htaccess

First of all add MIME types using mod_mime.c. The AddType directive maps the given filename extensions onto the specified content type. MIME-type is the MIME type to use for filenames containing extension. This mapping is added to any already in force, overriding any mappings that already exist for the same extension.

<IfModule mod_mime.c>
    AddType text/css .css
    AddType application/x-javascript .js
    AddType text/html .html .htm
    AddType text/richtext .rtf .rtx
    AddType image/svg+xml .svg .svgz
    AddType text/plain .txt
    AddType text/xsd .xsd
    AddType text/xsl .xsl
    AddType text/xml .xml
    AddType video/asf .asf .asx .wax .wmv .wmx
    AddType video/avi .avi
    AddType image/bmp .bmp
    AddType application/java .class
    AddType video/divx .divx
    AddType application/msword .doc .docx
    AddType application/x-msdownload .exe
    AddType image/gif .gif
    AddType application/x-gzip .gz .gzip
    AddType image/x-icon .ico
    AddType image/jpeg .jpg .jpeg .jpe
    AddType application/vnd.ms-access .mdb
    AddType audio/midi .mid .midi
    AddType video/quicktime .mov .qt
    AddType audio/mpeg .mp3 .m4a
    AddType video/mp4 .mp4 .m4v
    AddType video/mpeg .mpeg .mpg .mpe
    AddType application/vnd.ms-project .mpp
    AddType application/vnd.oasis.opendocument.database .odb
    AddType application/vnd.oasis.opendocument.chart .odc
    AddType application/vnd.oasis.opendocument.formula .odf
    AddType application/vnd.oasis.opendocument.graphics .odg
    AddType application/vnd.oasis.opendocument.presentation .odp
    AddType application/vnd.oasis.opendocument.spreadsheet .ods
    AddType application/vnd.oasis.opendocument.text .odt
    AddType audio/ogg .ogg
    AddType application/pdf .pdf
    AddType image/png .png
    AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
    AddType audio/x-realaudio .ra .ram
    AddType application/x-shockwave-flash .swf
    AddType application/x-tar .tar
    AddType image/tiff .tif .tiff
    AddType audio/wav .wav
    AddType audio/wma .wma
    AddType application/vnd.ms-write .wri
    AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
    AddType application/zip .zip
</IfModule>

Next we add expire headers to the file types. Mod_expires.c controls the setting of the Expires HTTP header in server responses. The expiration date can set to be relative to either the time the source file was last modified, or to the time of the client access.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType text/html A3600
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/plain A3600
    ExpiresByType text/xsd A3600
    ExpiresByType text/xsl A3600
    ExpiresByType text/xml A3600
    ExpiresByType video/asf A31536000
    ExpiresByType video/avi A31536000
    ExpiresByType image/bmp A31536000
    ExpiresByType application/java A31536000
    ExpiresByType video/divx A31536000
    ExpiresByType application/msword A31536000
    ExpiresByType application/x-msdownload A31536000
    ExpiresByType image/gif A31536000
    ExpiresByType application/x-gzip A31536000
    ExpiresByType image/x-icon A31536000
    ExpiresByType image/jpeg A31536000
    ExpiresByType application/vnd.ms-access A31536000
    ExpiresByType audio/midi A31536000
    ExpiresByType video/quicktime A31536000
    ExpiresByType audio/mpeg A31536000
    ExpiresByType video/mp4 A31536000
    ExpiresByType video/mpeg A31536000
    ExpiresByType application/vnd.ms-project A31536000
    ExpiresByType application/vnd.oasis.opendocument.database A31536000
    ExpiresByType application/vnd.oasis.opendocument.chart A31536000
    ExpiresByType application/vnd.oasis.opendocument.formula A31536000
    ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
    ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
    ExpiresByType application/vnd.oasis.opendocument.text A31536000
    ExpiresByType audio/ogg A31536000
    ExpiresByType application/pdf A31536000
    ExpiresByType image/png A31536000
    ExpiresByType application/vnd.ms-powerpoint A31536000
    ExpiresByType audio/x-realaudio A31536000
    ExpiresByType application/x-shockwave-flash A31536000
    ExpiresByType application/x-tar A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType audio/wav A31536000
    ExpiresByType audio/wma A31536000
    ExpiresByType application/vnd.ms-write A31536000
    ExpiresByType application/vnd.ms-excel A31536000
    ExpiresByType application/zip A31536000
</IfModule>

Then we set the mod_deflate module. This module provides the DEFLATE output filter that allows output from your server to be compressed before being sent to the client over the network. To set the correct gzip directions there has to be a browser match.

<IfModule mod_deflate.c>
    <IfModule mod_setenvif.c>
        BrowserMatch ^Mozilla/4 gzip-only-text/html
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
        BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
        BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
    </IfModule>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
    AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
<FilesMatch "\.(css|js)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header set Cache-Control "public, must-revalidate, proxy-revalidate"
    </IfModule>
    FileETag MTime Size
    <IfModule mod_headers.c>
         Header set Author "Dotinga.com"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header set Cache-Control "public, must-revalidate, proxy-revalidate"
    </IfModule>
    FileETag MTime Size
    <IfModule mod_headers.c>
         Header set Author "Dotinga.com"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header set Cache-Control "public, must-revalidate, proxy-revalidate"
    </IfModule>
    FileETag MTime Size
    <IfModule mod_headers.c>
         Header set Author "J. Dotinga.com"
    </IfModule>
</FilesMatch>

More resources

Feb 19 2011

Here are some exmples for conditional comments for Internet Explorer.

Conditional comments only work in Explorer on Windows. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0 and higher.

I put them up mainly for reference :-)

<!--[if IE]>
This is Internet Explorer
<![endif]-->

<!--[if IE 5]>
This is Internet Explorer 5
<![endif]-->

<!--[if IE 5.0]>
This is Internet Explorer 5.0
<![endif]-->

<!--[if IE 5.5]>
This is Internet Explorer 5.5
<![endif]-->

<!--[if IE 6]>
This is Internet Explorer 6
<![endif]-->

<!--[if IE 7]>
This is Internet Explorer 7
<![endif]-->

<!--[if gte IE 5]>
This is Internet Explorer 5 and higher
<![endif]-->

<!--[if lt IE 6]>
This is Internet Explorer lower than 6
<![endif]-->

<!--[if lte IE 5.5]>
This is Internet Explorer 5.5 or lower
<![endif]-->

<!--[if gt IE 6]>
This is Internet Explorer 6 or higher
<![endif]-->