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:

• Firefox
• Chrome
• Opera

Very impressive check out some Molehill demo’s:

Get the Flash Player Incubator and check out:

• Play online: http://molehill.zombietycoon.com/
• Play online: http://www.alternativaplatform.com/en/demos/maxracer/
• Demo available here: http://infiniteturtles.co.uk/projects/away3d/broomstick/ShallowWaterDemo.html

• 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

• Apache Caching Guide
• Ask Apache – Caching and Cache Control

In this posts I will point out a few pitfalls when doing a Flash as3 movie project.

Decide where the videocontent is placed

This is handy to know beforehand. It saves a lot of time and effort to do it first time right. Are you going to progressively download the movie or is it streaming? Does it come from a flash mediaserver? Know what you are working with before you start.

Create a prototype

Start with creating a prototype so you know the pitfalls. And you know the steps to recreate the experience. Afterwards you can tweak layout, performance etc.

When using Cue Points

Make sure you export your movie as .flv. F4v doesn’t support cue points. Cue points are a feature of the FLV video container format. FLV is a proprietary format developed specifically to complement Adobe Flash.

Cue Point code

Handling cuepoints in ActionSctipt3 is easy once you know the drill. One of the simplest methods is to create a simple Object which processes the onCuePoint and onMetaData event handlers in ActionScript 3.0. You can see an example of this in the following code:

var customClient:Object = new Object();
customClient.onCuePoint = cuePointHandler;
customClient.onMetaData = metaDataHandler;

var myVideo:Video = new Video();
addChild(myVideo);

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.client = customClient;
myVideo.attachNetStream(ns);
ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

function cuePointHandler(infoObject:Object):void
{
    trace("cuePoint");
}
function metaDataHandler(infoObject:Object):void
{
    trace("metaData");
}

Or you can create a CustomClient class which handles the meta data and cuepoints.

package
{
	public class CustomClient
	{
		public function onMetaData(info:Object):void
		{
			trace("metadata: duration=" + info.duration + " width=" + info.width + " height=" + info.height + " framerate=" + info.framerate);
		}
		public function onCuePoint(info:Object):void
		{
			trace("cuepoint: time=" + info.time + " name=" + info.name + " type=" + info.type);
		}
	}
}

These are the basics to start embedding video content.

Other resources

• How to Use Flash Video (FLV) Cue Points – David Stiller
• Playing back flv with actions – Peter Haan
• Adobe Help

When my Macbook Pro was stolen I succesfully changed all my account passwords whitin a day. I had backup copies of my passwords stored in my dropbox account. All I needed was another computer and access to my account. Here are the steps to keep your passwords safe and in the cloud.

I use a free Dropbox account to sync files that I access from multiple locations, using their secure web storage. It is incredibly convenient to develop something on my laptop, save it in my Dropbox folder, and access the files from my desktop or phone. Before, I would have emailed the files to myself.

Signup for a Dropbox account and download the client

• Create a dropbox account

Create an account first, then run the Dropbox Installer. From your browser’s Downloads window, double click the .dmg/.exe file that just downloaded. After downloading the client, follow the steps to install the client. Double click the Dropbox icon in your Applications folder or desktop to get all set up, and you’re good to go.

Download and Configure Keepass(X)

• KeepassX for Mac OS X / Keepass for Windows for storing passwords crossplatform, check here for more platforms

Start Keepass(X). The very first step is creating a new password database. To create one, click ‘File – New…’ in the main menu. A window will appear, which prompts you for a master password and/or key file. The database will be encrypted with the password you enter here. The password you enter here will be the only password you’ll ever have to remember from on now. It should be long and built up of mixed characters. Keep in mind that when someone gets your database file and guesses the password, he could access all passwords you stored in the database.

Adding an entry

Time to store your passwords in the database! Right-click and choose ‘Add Entry…’. In this window you can now edit your entry: enter some title for it, an username, an URL, the actual password, etc. If you don’t need some of the fields, just leave them empty. When you’re done, click [OK].

You’ll see your new entry in the password list on the right now.

Putting it al together

When dropbox is installing the program creates a shared folder which is synced to internet (the cloud). This is default your public folder.

The final thing to do is move your Keepass(X) database and keyfile to your shared folder and it is synced automatically.

Today I needed to export every layer in a photoshop document as files. Photoshop has a default script for this. You can find it here: file -> scripts -> Export Layers to Files.

The only drawback is that the filename is composed from a prefix + number + layer name. And I want only the layername. What we have to do is edit the “Export Layers to Files.jsx” file. This is a javascript file that we can edit.

• mac: /Applications/Adobe/Adobe\ Photoshop\ CS4/Presets/Scripts/
• win: C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Scripts

Then open the file and search for “fileNameBody +=” and edit:

var fileNameBody = fileNamePrefix;
fileNameBody += "_" + zeroSuppress(i, 4);
fileNameBody += "_" + layerName;

to:

var fileNameBody = fileNamePrefix;
fileNameBody += layerName;

You have to make sure there are no duplicate layernames otherwise the script will overwrite these files. If you don’t want to edit this file you can download my version.

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]-->

Here are the direct links:

HTML5

• Audio Tag
• Video Tag
• Canvas Tag
• Canvas Tag 3d WebGL (you’ll need a webgl capable browser, most nightly build FF, Chrome support this feature)

CSS3

• Web fonts
• 2d Transforms
• Text Stroke
• Transitions
• Animations

This blog also uses some css3 styles like gradients, rounded corners and box shadow.

If you are planning to download very many files you may want to check php set_time_limit value.

Start by creating a folder structure, this usually works for me:
project-name
|-input -> here the xml
|-output -> the downloaded images (make sure you (chmod 0777) this folder

My XML:

<?xml version="1.0" encoding="UTF-8"?>
    <items>
        <item>
            <image>http://www.path-to-some.com/image.gif</image>
        </item>
        <item>
            <image>http://www.path-to-some.com/image.gif</image>
        </item>
        <item>
            <image>http://www.path-to-some.com/image.gif</image>
        </item>
<items>

PHP:
For some strange reason I can’t use fopen, fclose and fwrite in my post, so be careful when copy-pasting the code to remove the whitespace. My hosting provider changed some settings and now I’m able to use fopen() etc. again.

<?php // get files from XML getImagesFromXML("input/images.xml"); function getImagesFromXML($xmlurl) {     $input = file_get_contents($xmlurl);     $xml = new SimpleXMLElement($input);     foreach($xml--->item as $v)
    {
        $url =  $v-&gt;image;
        $tmp = explode("/", $url);
        save($url, end($tmp), "output/");
    }

}

function save($image_location, $file_name, $save_folder)
{
	$contents = file_get_contents($image_location);
	list($version, $status_code, $msg) = explode(' ', $http_response_header[0], 3);

	// Check the HTTP Status code
	switch($status_code)
	{
		case 200:
		    // Everything alright download file
			$target_file = $save_folder . $file_name;

			// Check if file already exists
			if (file_exists($target_file))
			{
                            echo "The file $target_file exists
";
                        }
                        else
                        {
                            echo "The file $target_file does not exist
";
                            $fp = fopen ( $target_file, 'w' );
                			fwrite ( $fp, $contents );
                			fclose ( $fp );
                			return $target_file;
                        }

			break;
		case 503:
		case 403:
		case 400:
		default:
			return false;
	}
}
?>

getImagesFromXML:
Line 3: Calls the getImagesFromXML function with the created XML.
Line 5/6: Gets the content from the xml and creates a SimpleXMLElement
Line 8: Loops through the XML parsing the url out
Line 9/10: Creates an array from the url string. The image name can be extracted by taking the last slice in the array e.g. end($tmp);
line 11: Puts the location, name and folder in the save function

save:
Line 21: fetches the image
Line 22: Gets the statuscode from the http_response_header
Line 25: Switch on statuscodes (200 ok)
Line 32: Check if the file already exists
Line 38/42: Saves the image to the local filesystem

That’s it! Happy coding.

My previous development tool of choice was TextMate. On windows I used TextPad and NotePad++. I think it’s ideal for developing in a project environment, but when you have to quickly edit a html, css or javascript file you have to create a project first.

You can grab the community edition of Intelij 10 here.

Here is how to setup a simple html, css and javascript project in intelij 10. I’m using the paid version and I don’t know the difference with the community edition. You can try the full version for 30 days, it’s worth trying.

Step 1 – setup project

Create a new project from scratch. Choose next. In this screen you can set your project preferences, like below. Make sure you choose .ipr (file based) for your project file format. Otherwise you can’t add files and directories manually.

Then choose next. The following dialog will be shown:

Choose whatever you like, I’ll select not to create src dir. Choose next.
In this screen select ‘Web Application’ like below, then click finish.

Now Intelij will build your project, and you can start adding files.

Step 2 – add folders and files

First we’ll be adding an index.html by right clicking the root project folder and choose html file. Same goes for css and js directories and files.

Step 3 – setup run/debug configuration

In this step we will be creating the run/debug settings, to debug the javascript from within Intelij.

In the run debug settings press the plus button, then choose javascript debugging and then local or server if you have a localhost. In the name field you specify local or remote. In the html location you browse to your created index.html file. Click apply and your project is setup and you can add a javascript library.

If anyone has additional tips for debuging in intelij please let me know!