Due to security changes in Adobe Flash player 10, this script doesn't work anymore when updated to Flash player 10. Several other similar solutions already solved this problem; FancyUpload, YUI Uploader.

Thanks for the introduction Willem and hi all! Willem asked me to write some posts on additional topics like Flash, Actionscript and so on. I hope you will enjoy some of my findings, codes, tips or stories.

For my first contribution i'd like to start sharing a script i wrote a few months ago.

A problem i often encouter is that people, often customers, would like to upload multiple files all together, instead of, what you often see, one file at the time. Of course a very simple solution is to put multiple HTML upload fields on a page, but obviously we could think of a better solution. There are many alternatives on the internet, but most of them aren't customizable and as a real webdeveloper, i would like to create my own solution of course. That is why i created a solution combining three popular webtechnologies; Javascript, Flash and PHP; Javascript constrols the visual aspects, while Flash in combination with PHP handles the upload process.

Since Flash 8, the possibility to communicate between Flash and Javascript is improved, so you can communicate easily using the Flash's ExternalInterface API. With this you can call javascript functions from Actionscript and pass any number of arguments of any data type and vice versa!

To see a working example of my multiple upload solution, click here (no files will be actually uploaded).

I also helped willem out with the design and think we came up with a nice look for this weblog. As you can see at the top we included a menu and added the page 'projects'. I hope we will be able to give this page some content and if i improved my multiple upload script, i will add this as a project. Untill then, you can download the source of this first version here.

When adding this tiny javascript to the onkeyup event of your inputbox, the border will turn green when the email address. It uses scriptaculous' morph function to perform this transformation. See a demo
(more...)

From now, the number of ajaxorized team members is upgraded to 2, since Martijn joins the team. Martijn and I met in our universities masters program and share the same passion for informatics, web development, javascript, PHP and, of course, black coffee. So, a warm welcome to Martijn!

That right guys, prototype 1.6.0 is on it's way and there is one aspect I want to share with you. In stead of using the old-fashioned 'http-header' way to transport JSON, the prototype framework now eats files with the content-type 'application/json'. A short example:

1. First, we will use prototype to make an ajax request.

    new Ajax.Request('ajax.php',{ onSuccess: handleSuccess }, method: 'get' });

2. After this, on the serverside we set the json headers and output the formatted data using the Services_JSON class:

   <?php
   require_once "services_json.class.php";
    
   /* Set the JSON header */
   header("content-type:application/json");
    
   /* Format some data */
   $aData = array("Car", "Plane", "Train");
    
   $oJson = new Services_JSON(SERVICES_JSON_LOOSE_TYPE);
    
   /* Output */
   echo $oJson->encode($aData);
   ?>

3. And finally this alerts 'Car', 'Plain' and 'Train':

   function handleSuccess(transport) {
     $A(transport.responseJSON).each(function(str) {
       alert(str);
     });
   }

I made some improvements on the password strength meters available on the web. Using prototype/scriptaculous, I stole some code from ZeBadger (thanks!) and created a new meter which dynamically changes while typing your password.

Click here to see the demo

If you want to use this script, feel free to download the source and use it on your website.

Enjoy.

While playing around with the prototype framework, I wrote 2 code snipplets I want to share with you:

 
var _ = function(sEName, id, classname, attributes) {
	var e = document.createElement(sEName);
	if(id) { e.id = id; }
	if(classname) { e.className = classname; }
	if(attributes) { for(var p in attributes) { e.setAttribute(p, attributes[p]); }	}
	return $(e);
}
 
Element.addMethods({
	_a: function(element, e) {
		element.appendChild(e);
		return $(e);
	},
	_r: function(element, e) {
		element.removeChild(e);
		return$(e);
	}
});

Using the functions above, you will be able to create HTML structures on the fast DOM-lane:

 
var oHTML = _('div', 'head', 'headClass');
oHTML._a(_('div', 'second', 'secondClass'))._a(_('img', 'myimage', 'images', {src:'pica.jpg'}));
document.body.appendChild(oHTML);

Which results in:

 
<div id="head" class="headClass">
<div id="second" class="secondClass">
     <img src="pica.jpg" id="myimage" class="images" />
  </div>
</div>
 

Enjoy.

In a few years, we (as in web developers) will no longer be speaking the language of (X)HTML4(.01). We will no longer speak the language of <div>'s. No, in a few years, we will no longer be partying like it's 1999. HTML5 (or Web Applications 1.0 as people call it who use the Web 2.0 phrase as well) is on it's way. Since three major Browser vendors (Mozilla, Apple and Opera ) came together as the WhatWG (Web Hypertext Application Technology Working Group) to construct the new HTML standard, the basic thought of the extended HTML version becomes more and more clear. Backwards compatibility width HTML 4.01 and XHMTL 1.1, more specific elements to fulfill the needs of web applications (instead of using <div> for every single one of them), <audio> and <video> tag support, the <dialog> element to describe conversations and many more functionalities. Sounds promising, isn't it?

(more...)

I've written a GreaseMonkey userscript that recognizes dates and replaces them with links to Google Calendar. So, suppose someone sends you an invitation for a particular date, it will be transformed to a link to that day in Google Calendar.

(more...)

Once, long before the Ajax and Web 2.0 era , there was a time we used HTML <center> for text-alignment and javascripts stunning alert() function for debugging our websites and applications. But times are changing. To develop high performance Web 2.0 'killer apps', we need more tools and better applications to create web applications based upon Javascript frameworks (such as prototype, jQuery, scriptaculous, moo tools etc.) feeded by PHP as a backend. Below I will sum up some free Firefox-extensions to build web applications quick, efficient and flawless. Ok, almost flawless then. (more...)

A few months ago I was assigned to a project where a company, while their new site was being developed, wanted to track the visitors on their website for marketing purposes. The only problem was that their current website was constructed with Frontpage a few years ago and consisted of hundreds of static HTML pages. Since I'm (very) lazy I was not planning to copy paste the whole thing, I figured out a way to include the GA code in every static html page.

First, I wrote a .htaccess file which rewrites all (including files in subdirs) .html and .htm pages to addgoogleanalytics.php:

RewriteEngine on
RewriteRule ^(.*).html?$ addgoogleanalytics.php?file=$0

Wow, it that all? Yes it is. So helloworld.html will be rewrited to addgoogleanalytics.php?file=helloworld.html, and the user won't even notice. Now, take a look at addgoogleanalytics.php:

<?php
/* Open the given file and add the google analytics code */
$sData = file_get_contents($_GET['file']);
$sData = str_replace("</body>", "
<script src=\"http://www.google-analytics.com/urchin.js\" type=\"text/javascript\">
</script>
<script type=\"text/javascript\">
_uacct = \"UA-1808705-3\";
urchinTracker();
</script>
 
</body>", $sData);
echo $sData;
?>

Enjoy.