First off, cookieless domains are your friends for content distribution. Why? Because every time a web browser talks to a server it sends a copy of all its cookies for that domain. As you can imagine this is quite ridiculous if your client is requesting an image, CSS, JS or other static resource which can never use that cookie information. These wasted upload bits are totally unnecessary so lets get rid of them with the help of a cookieless domain.

Sub or New Domain?

You might think there is a magical ‘no cookies’ option on your server but there isn’t. A cookieless domain is simply one that has never set a cookie. This means two options; create a sub domain (like s.forstmist.org) or create a new domain name.

At first glance a sub domain seems nice and simple but there is a caveat. If you redirect your visitors from a sub domain (www.forestmist.org) to your root domain (forestmist.org) you’ll end up with cookies on your root domain. These root cookies are automatically sent along with any requests to all sub domains. That’s right, having cookies on your root domain taints all your sub domains from becoming cookieless domains. This is not a concern if you channel all your visitors to a www sub domain since any cookies there will not be available to the root domain and therefore won’t taint other sub domains.

For short domain name lovers, registering a new domain for serving static content is a no brainer. I definitely fall into this category so I registered forestmisty.org which I shall use as an example in the rest of this guide.

.htaccess Redirect

With the new misty domain setup and pointing to my web server everything was working great. Requests to static images weren’t passing cookie information but what if someone went to the root of forestmisty.org? What if a broken link sent them to a 404? WordPress would handle the request and that means potential cookies from it or Google Analytics. Yikes!

What would be nice is if we can allow any requests for forestmisty.org/wp-content/ but redirect anything else back to forestmist.org. We can do exactly that with the following .htaccess commands.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^forestmisty.org$ [NC]
RewriteCond %{REQUEST_URI} !^/wp-content/?(.*)$ [NC]
RewriteRule ^(.*)?$ http://forestmist.org/$1 [R=301,L]

The first line enables the Apache rewrite engine.
The second line says anytime a request comes in for ‘forestmisty.org’ continue to the next line.
The third line says if the request is NOT for ‘/wp-content/…’ continue to the next line.
The forth line says if we made it this far redirect the original request to forestmist.org including any extra query information like /favicon.ico, /creative-resume, etc…

By the way…
^ means the start of a string.
$ means the end of a string.
? means the preceding character or collection in parenthesis is optional.
. means any one character.
* means the preceding character can occur 0 or more times.
$1 means insert whatever was inside the first set of parenthesis to the left.
[NC] means not case sensitive.
[R=301] means do a 301 redirect.
[L] means the last rule so don’t bother processing the rest of the .htaccess file.

Now we can rest assured that requests to our new cookieless domain will stay cookie free by only servering up what are almost always static file requests from the /wp-content folder.

Configure WordPress

Our new domain is setup and protected pretty well thanks to our .htaccess file so now it’s time for WordPress to join the fray. Specially, WordPress needs to have any /wp-content  links rewritten to point to the same location on our cookie free domain.

• Download, install and activate the excellent CDN Linker by W-Mark Kubacki.
• Login to WordPress
• Settings » CDN Linker
• Enter your new cookieless domain for CDN URL.
• Change your ‘Include Dirs’ line to read ‘wp-content’ if you setup your .htaccess file like mine.
• Save Changes

Load your home page and view source. You should see your new cookieless domain being referenced quite often. Yay!

Success

With a little bit of effort our server is less stressed, our clients are loading faster and hopefully you’ve got a silly grin on your face.

I was delighted to find scandir. Problem was, scandir returns files mixed with folders and that would upset my flock of easily frightened Windows users.

So a quick… er medium… ok fine,  an exasperating search on Google and only outdated, complex and inefficient samples were to be found. PUFF!

So, here is the version I came up with.

Downloads

• Sort by Folder is optimized for easier PHP comprehension.
• Sort by Folder (with HTML) contains extra code which adds more information and cleaner formatting to the generated HTML.

How it works

The most crucial part of all the code you will see inside the demo is the PHP getObjects() function. Without this everything else would be moot so lets go over it in a bit more detail.

function getObjects($path) {
    $path .= '/';
    $array = scandir($path); // returns an array of files and folders sorted alphabetically
    $array = array_diff($array, array('.', '..', '.DS_Store', 'Thumbs.db')); // filter out things we don't want

    $return_array = array();

    foreach($array as $item) {
        if(is_dir($path . $item)) {
            $return_array[$item] = getObjects($path . '/' . $item);
        }
    }

    $count = 0;
    foreach($array as $item) {
        if(!is_dir($path . $item)) {
            $return_array[$item] = $item;
            $count++;
        }
    }
    if($count == 0) {
        $return_array[''] = '';
    }

    return $return_array;
}

Line 3
Scandir returns an array of mixed folders and files for the path requested. This does not include sub directories.

Line 4
Filter out any undesirables. That means the current ‘.’ and parent directory ‘..’ although we don’t want any Mac ‘.DS_Store’ or WIndows ‘Thumbs.db’ files either.

Line 6
We create a new array called $return_array which will be built up with all the folders and files in the order we want them. Folders first, then files. Both alphabetically.

Line 8-12
Here we loop through each item in our filtered results from scandir. If the item is a directory we set the results of $return_array[$item] to a recursive call of the very same function we are already in. Traveling deeper each recursive call, that means we can handle seemingly infinite directory structures. Neat.

This first loop through only cares about directories which is exactly what puts them first in our $return_array. Files will come next.

Line 14
We set a variable $count to 0 to keep track of how many files we find in the next foreach loop.

Line 15-19
In this second loop we check to make sure the items are not directories and if so return those items while incrementing the $count variable.

Line 21-23
Now that we are finished looping for files we can check our $count variable. If 0 then set $return_array to ”. This can useful later in case we want to do something special for directories without files.

Line 25
Finally, we return whatever we have found. In most cases this means returning an $array to another instance of the function although ultimately the original one will return a completed array to the PHP call outside our function that started it all.

In the demo we can now loop through this nicely ordered array and write out some HTML and CSS, add a sprinkle of JavaScript and we have a real working web app.

Epilogue

Once you get your head around recursive loops things become much simpler. Plus you get to worry more about optimizing your code since each loop can be run so many times. It’s a good problem to have, really.

Anyway, I certainly hope this helps you in your next endeavor. I know I certainly would be lost without all the wonderful code and tutorials shared by others.

Cheers!

I think it came out pretty nice. Works perfect in nice browsers like Chrome, FireFox, Safari, Opera and even works well in IE 6, 7 and 8. The nicer browsers will have subtle shadows, rounded corners, bit cleaner lines between items but really that could be considered progressive enhancement. The site is perfectly readable in old busted browsers too. Good job if I do say so myself.

I learned a lot on this project, more so than I had imagined but then again… good projects always prepare you for the next challenge. I’m proud to have stuck with it over the course of many days it took.

xoxo

-Daniel

Seems like such a basic feature but even their friendly support folks confirmed that there was no addon or plan to release the feature in a future version. Weird!

No matter though, let’s make our own.

Investigation

I spent untold amounts of time clawing through unfamiliar Java code. A occasional scrap was enough to forge my determination but nothing really made sense yet. Too many files, too many directories but maybe if I just kept trying…

A-ha!

Hidden deep within the lair of <Tomcat>\webapps\Halogen\WEB-INF\classes\com\halogensoftware\common\security\ is a file called ‘Utility.class’. Inside, a string that resembles the worst regular expression ever created.

^a`Z{b1Y}c2X[d3W]e4V|f5U\g6T:h7S;i8R”j9Q’k0P<l-O>m=N?n~M,o!L.p@K/q#Jr$Is%Ht^Gu&Fv*Ew(Dx)Cy_Bz+A

I was sure this string was used to encrypt the passwords stored in the database but I needed a way to confirm that so…

Using a test account I set the password to the number 1 which was encrypted as the letter Y. Password 11 became Y}. Password 111 became Y}c.

Ah, so simple!

If your password was the ^ symbol it would find it in the string above and then move right one space and choose the letter “a” as your encrypted password. If your password was ^^ then the the first encrypted character would be “a” again but the second one would shift two places to the right and store the ` symbol

Here are a few more example conversions.

• ^^^ becomes a`Z
• wT7w becomes (hi)
• A+z becomes ^^^

Notice that in the last example we’ve simply looped around once we hit the right side of the hash string.

Now that we know how it works let’s build our own utility in ASP that we can use to reset anyone’s password.

The Solution

Besides the obvious DSN string, you’ll want to carefully consider how you validate your users.

The setup I used at work talked to a Human Resources database and would validate no less than three pieces of information before even attempting a reset. I urge you dear reader to do the same.

sID = Request.Form("id")
sPassword = Request.Form("password")

Set oConn = Server.CreateObject("ADODB.Connection")
oConn.Open "DSN String for the Halogen eAppraisal Database"

Set oRS = Server.CreateObject("ADODB.Recordset")
oRS.Open "SELECT TOP 1 * FROM [view-user_info] WHERE username = '" & sID & "'", oConn, 0, 3 'adOpenForwardOnly, adLockOptimistic

If not oRS.EOF then
	sKeyCode = "a`Z{b1Y}c2X[d3W]e4V|f5U\g6T:h7S;i8R""j9Q'k0P<l-O>m=N?n~M,o!L.p@K/q#Jr$Is%Ht^Gu&Fv*Ew(Dx)Cy_Bz+A"
	sKeyCodeLength = Len(sKeyCode)
	x = 1
	sBadChar = 0
	Do until x > Len(sPassword)
		sChar = Mid(sPassword, x, 1)

		If InStr(sKeyCode, sChar) then
			sKeyCodePos = InStr(sKeyCode, sChar) + x
			If sKeyCodePos > sKeyCodeLength then
				'Need to loop around the beginning
				Do until sKeyCodePos <= sKeyCodeLength
					sKeyCodePos = sKeyCodePos - sKeyCodeLength
				loop
			End If
			sEncodeChar = Mid(sKeyCode, sKeyCodePos, 1)
			sEncodePassword = sEncodePassword + sEncodeChar
		Else
			'Could not find a character in sKeyCode
			sBadChar = sBadChar + 1
		End If
		x = x + 1
	loop

	If sBadChar > 0 then
		Response.Write "<p><strong>Unsupported characters were used to try to set the encrypted password. New password was not saved.</strong></p>"
	Else
		oRS("password") = sEncodePassword
		oRS("password_change_date") = NULL
		oRS.Update
		Response.Write "<p>The password for your account " & sID & " has been reset.</p>"
	End If
Else
	Response.Write "<p><strong>A corresponding account for the user " & sID & " does not exist. Please contact support.</strong></p>"
End If

oRS.Close
oConn.Close
Set oRS = nothing
Set oConn = nothing

Questions welcome so feel free to comment below.

See ya later, space cowboy.

Synthesizers, music trackers and games require seamless audio loops though so we need something a bit simpler for our first foray into HTML5 audio.

Oooh, how about a retro beatbox with individual track adjustments (start/stop/loop/volume) that could be used to build a unique soundscape from many separate instruments. Perfect!

Fantasy can only become reality through hard work so let’s get started with some tests first.

Loop Method 1

Uses the ‘loop’ property.

<audio id="audio_1" controls preload loop>
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.ogg">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.wav">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.mp3">
</audio>

Loop Method 2

Uses a JavaScript function to loop when an ‘ended’ event is called.

<audio id="audio_2" controls preload>
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.ogg">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.wav">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.mp3">
</audio>

document.getElementById('audio_2').addEventListener('ended', function(){
this.currentTime = 0;
}, false);

Loop Method 3

Uses two JavaScript functions and two audio elements with the same source to alternate playback duties.

<audio id="audio_3" controls preload>
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.ogg">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.wav">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.mp3">
</audio>
<audio id="audio_4" controls preload>
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.ogg">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.wav">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.mp3">
</audio>

document.getElementById('audio_3').addEventListener('ended', function(){
this.currentTime = 0;
this.pause();
document.getElementById('audio_4').play();
}, false);

document.getElementById('audio_4').addEventListener('ended', function(){
this.currentTime = 0;
this.pause();
document.getElementById('audio_3').play();
}, false);

Browser Support

Tests were done on Windows 7 with Chrome 5.0.342.9 beta, FireFox 3.6.3, Internet Explorer 9.0 Preview, Opera 10.51 and Safari 4.0.5.

Chrome seems to trigger loops before the current sound is completely finished leading to some odd jumpiness. All loop methods are affected.

FireFox doesn’t seem to like the ‘loop’ property of method 1, odd. Method 2 has the slightest of delays between loops and method 3 was actually perfect! I didn’t believe it until verification at the millisecond level with Audacity. Hooray Mozilla!

Internet Explorer 9 doesn’t support the audio tag yet. Hopefully it will before an official release.

Opera performs almost as well as FireFox although there is still a small delay even when using method 3.

Safari seems slow to start playback which is very easy to detect once you hear a loop. All loop methods affected.

Feedback on other browsers/OS compatibility would be very interesting so please feel free to discuss any findings in the comments below.

Final Thoughts

As of right now (April 11, 2010) only FireFox can do a perfect loop by cheating a bit and using two <audio> elements with JavaScript.

So yeah, it’s a bit too early for HTML5 audio loops but don’t let that stop you from creating sound boards, media players and other fun things.

Hopefully with some more optimizations audio support will continue to improve and a HTML5 beatbox fantasy can become reality.

Until then there are plenty of other fun things to play with.

Cheers!

Here are some ways to target all the image elements on a page while leaving the rest of the hypertext in peace.

JavaScript

Lightweight, no framework required and works well in IE 6, 7, 8, Chrome, FireFox and Safari. Demo »

document.oncontextmenu = context_menu;

function context_menu(e) {
if (!e) var e = window.event;
	var eTarget = (window.event) ? e.srcElement : e.target;

	if (eTarget.nodeName == "IMG") {
		//context menu attempt on top of an image element
		return false;
	}
}

jQuery

Perhaps the prettiest code of the three. Demo »

$(document).ready(function(){
	$(document).bind("contextmenu",function(e){
		if(e.target.nodeName == 'IMG'){
			//context menu attempt on top of an image element
			return false;
		}
	});
});

MooTools

Moo… Demo »

window.addEvent('domready', function() {
	$(document.body).addEvent('contextmenu', function(e) {
		if(e.target.nodeName == 'IMG') {
			//context menu attempt on top of an image element
			return false;
		}
	});
});

Final Thoughts

With a bit more code you can target specific IDs, class names or any number of elemental combinations. Doing so will limit your context menu friendly fire and keep both you and your users in a happy balance.

Cheers!

Founder of the home for the experimentally insane.

I’ve added a new experimental section to the site which I hope will contain many a mad thing for you dear visitor.

On on first journey we find out if its possible to create strange shapes using only CSS.

So come one and come all to see the gross disregard for copyright law as we make your very own Bahamas logo using CSS!

Bookmarks are easily forgotten but with a few tweaks FireFox 3 can back them up for you.

Customize your bookmark backup settings

Open FireFox 3.

Go to about:config in your location bar.

Specify browser.bookmarks as your filter.

Set browser.bookmarks.autoExportHTML to true.

Create a new string titled browser.bookmarks.file and set its value to the location you want to backup all your bookmarks to.

In my case I entered “D:\ForestMist\Personal\bookmarks.html”.

Restart FireFox.

Epilogue

Everytime you close FireFox it will export a fresh copy of all your bookmarks to the file you specified. There may a slight performance hit for doing this but I think the benefits far outweigh the cost.

Now you can mirror your bookmarks with services like SugarSync, share them easily with friends or just have peace of mind in case the new JSON database FireFox 3 uses behind the scenes explodes in a spectacular example of Murphy’s Law.

Audio

Boagworld
Good all around podcast for those in the web industry.

Games

World of Warcarft
For more hours than I care to admit.

Looking forward to Bayoneta, Bioshock 2 and Brutal Legend on the PS3.

Music

Luxury by Tiga

Memory Gospel by Moby

She’s Got Me Dancing by Tommy Sparks

Video

Hulu
Great for keeping up with various shows on my timetable. Yes, 3am showings of Inspector Gadget is exactly how I roll. Currently hopeful that Warehouse 13 and Defying Gravity will continue to be interesting.

Netflix
Love the Blu-ray and wide selection. Sci-fi and Comedy dominate the rental lists.

Pixel Perfect
Bert Monroy’s excellent show on Photoshop and related topics. Excellent for learning new techniques and reinforcing current skills.

TED
My late night sleep aid and all around mind stimulator. Love the fact that I can watch these on my iPhone from the comfort of bed.

Tekzilla
Patrick and Veronica do a great job of hosting this show about all things tech. The bloopers at the end of each episode are the perfect icing to an entertainly educational show.

Websites

Authentic Jobs
I visit a lot of job sites regularly but I really enjoy their layout and consistent quality of postings the best. Strong contenders include  Krop and the 37signals Job Board.

deviantART
Wonderful site for sampling a wide range of art, photography and design. I don’t think my mom would approve of some of the material but perhaps that is why I like it so much.  ;)

Twitter
I really enjoy the exercise of distilling an idea down to it’s essentials so it will remain true despite the 140 character limit. It’s a really great way to improve your writing skills.

Nice of Carsonified to post although their isn’t as much video content as I would like.

The following presentations were the best by far.

• Doing a Start Up in the Real World by David Heinemeier Hansson
  Great talk filled with real advice. No fluff. Watch it then formulate your own plan to make the world a better place.
• 14 Web App Survival Tips by Ryan Carson
  Lots of tips for the aspiring web app creator to help deal with promotion, finance and more.