I contacted my webhost, MediaTemple, asking how I could get the grid-server configured to gzip my css and javascript. At first technical support didn’t seem to know what gzip was. After some back and forth I tried adding some lines to my .htaccess file to enable and configure mod_gzip. It turns out mod_deflate has replaced Apache 1.3’s mod_gzip in Apache2.

So if your site is hosted on an Apache2 server and mod_deflate is loaded you can add the following lines to the .htaccess file in your main web directory. Now the YSlow plugin for Firebug will give your site an “A” in the “Gzip components” category, and if you have results similar to mine your javascript and css files will be 60-70% smaller. Nice, yes?

The following code gzips everything but images.

# BEGIN gzip

# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Don't compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary

# END gzip

Microsoft Connect
https://connect.microsoft.com/

Internet Explorer Beta Feedback
After signing up to Connect, go to the following page, scroll down to “Internet Explorer Beta Feedback” and click on Apply Now.
https://connect.microsoft.com/directory/

Request for <Canvas> Support in IE8
After that the following link will work which is the link to the suggestion for adding <canvas> support to IE8.
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334060

Cheers,

Greg

Download

Release Notes:

• Added functionality for creating multiple new windows from a single Json data request
• Added animated canvas loading icon to xhr and iframe load methods
• onContentLoaded now works with iframes
• Added styling options which can be set globally and for individual windows
• Added global effects option which toggles most of the window transition effects
• Now you can set individual windows to be draggable, resizable, closable, maximizable, or minimizable, overriding the global settings (Joel Lindau)
• Added closeAll() method which closes all windows at once
• Added more examples
• Fixed scrollbar bug in Firefox 2 on the Mac. Scrollbars no longer bleed through windows that are above them
• Made speed optimizations (Joel Lindau)

Known Issues:

I added a YouTube example using Swiff. Opera 9 doesn’t play well with the Swiff, but did better with SWFobject. Mac Firefox 2 doesn’t do well with Flash in general.

Enjoy.

This Mootools pie chart class is based on Stoyan Stefanov’s Canvas Pie. I have added a dynamically drawn image map that overlays the canvas. The image map areas coincide with the pie slices and trigger the Mootools tooltips.

Demo and Download

The code now requires less html markup than the original. After adding the js and css assets to the html header, all you need to do is add the “pieChart” class to your tables. The pie chart javascript then inserts everything else for you.

I also swapped out Stoyan’s random color algorithm for one that makes a nice rainbow, something with a more Mootools feel to it.

After working on this I realized it would be nice if the canvas element had a usemap parameter like img elements do. This would have saved me from having to overlay the canvas with a blank, transparent gif, and would make creating clickable canvas graphics slightly more intuitive for people. Better yet if after closing a path there were a way to add the individual shape created directly to the dom, and thus circumvent the need for an image map entirely.

This code has been tested in Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9.

Enjoy.

See the Demo

Here are three simple functions for either cascading any number of elements in an array of elements or arranging those elements into a circle or grid. Elements move from one arrangement to another via the Mootools Fx.Morph.

Cascade

function arrangeCascade(elements, xOffset, yOffset) {
	var containerTopOffset = 50;
	var containerLeftOffset = 150;
	$$(elements).each(function(el){
		indexLevel++;
		el.setStyle('zIndex', indexLevel);
		containerTopOffset += yOffset;
		containerLeftOffset += xOffset;
			var myMorph = new Fx.Morph(el, {
				'duration': 400
			});
			myMorph.start({
				'top': containerTopOffset,
				'left': containerLeftOffset
			});
	});
}

Arrange in Circle

function arrangeCircle(elements, centerX, centerY, radius){
	var i = 1;
	var sides = ($$(elements).length);
	$$(elements).each(function(el){
		indexLevel++;
		el.setStyle('zIndex', indexLevel);
		var pointRatio = i/sides;
		var xSteps = Math.cos(pointRatio*2*Math.PI);
		var ySteps = Math.sin(pointRatio*2*Math.PI);
		var pointX = centerX + xSteps * radius;
		var pointY = centerY + ySteps * radius;
		var myMorph = new Fx.Morph(el, {
			'duration': 400
		});
		myMorph.start({
			'top': pointY,
			'left': pointX
		});
		i++;
	});
}

Arrange in Grid

function arrangeGrid(elements, columns, xOffset, yOffset){
	var containerTopOffset = 120;
	var containerLeftOffset = 150;
	var i = 1;
	$$(elements).each(function(el){
		indexLevel++;
		el.setStyle('zIndex', indexLevel);
		if (i > 1 && i <= columns){
			containerLeftOffset += xOffset;
		} else if (i > 1){
			containerLeftOffset = 150;
			containerTopOffset += yOffset;
			i = 1;
		}
		var myMorph = new Fx.Morph(el, {
			‘duration’: 400
		});
		myMorph.start({
			‘top’: containerTopOffset,
			‘left’: containerLeftOffset
		});
		i++;
	});
}

Features

Demo and Download

• No images. The windows, including their controls, gradients and shadows, are drawn with the canvas tag.
• Adjustable rounded corner radius.
• Windows can be focused, dragged, resized, maximized, restored down and closed.
• Dynamically create new windows on demand.
• Fullwindow window size is adjusted if the browser window size changes.
• Minimal HTML markup required.
• Tested in Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9.

Gently guide the user rather than push them.

Design is communication. Speak simply, directly and sincerely, avoiding hype and obfuscation.

Don’t be presumptuous or nagging. By default turn off features that may annoy many users, and refrain then from nagging users to turn those features on.

Be patient. Inspiration arises in the gap between thoughts.

Good design is invisible. The user should be able to naturally and intuitively navigate and become absorbed in the content, forgetting entirely that there is a design that is structuring their experience.

Don’t overwhelm the user with options. Maintain a sense of focus.

Remove the unneccesary.

Refine the details until there is a visual harmony, a resonance of the whole. This is like tuning each string on a guitar, not too tight, not too loose.

When in doubt, simplify.

One well functioning feature is better than 10 with bugs.

Avoid hacks. Hacks have a way of requiring more hacks. It is sort of like Western medicine where you take one drug and then you require another drug to treat the symptoms of the first drug, and then yet another drug to treat the symptoms of the second drug, and so on in a rather messy, unsustainable spiral.

Avoid trendy features and design elements. Try to design with a sense of timelessness.

Be authentic. Work with what you have rather than what you wish you had.

Be patient. Inspiration arises in the gap between thoughts. Allow designs to develop naturally, organically, at their own pace; gradually increasing the beneficial and reducing the unbeneficial.

Do no harm. Don’t create design for harmful content. The paycheck isn’t worth it.

If a user interface is designed well then the distinction between user and interface begins to dissolve.

When you get in a well engineered car, like a BMW, or on a nice bike, like a Gary Fisher, the vehicle feels like an extension of your body. There isn’t a sense of awkwardness in the connection. It feels natural, and thus good. The same thing can be accomplished with application user interfaces. That should be the goal. The end-user should feel like they snap right into the interface, like the interface is a natural extension of their person.

A natural interface doesn’t accost the user. It isn’t aesthetically aggressive. It is passive, even hidden or concealed. It isn’t demanding, but rather inviting. It doesn’t push the user, but gently guides them.

If a user interface is designed well then the distinction between user and interface begins to dissolve. There is a sense of union. The user breathes and the interface breathes with them. The user thinks “do this”, and it happens without the user thinking about how to do it. They just do it, because it is natural.

This is a deeper approach to beauty. Instead of making your website or application “fancier”, and thus more monstrous, in an attempt to impress the end-user, streamline it and impress the user with how well it functions. Impress the user with the attention you have given to the fine details. Your website shouldn’t need cosmetics or a hip hairdo. When in doubt, simplify. Pay attention to flow. The user experience should be seamless. This is natural design.

What I am looking for is a fairly straight-forward PHP/MySQL application with the following features:

Client Management

• Client Login
• Client Info available to admin, e.g., contact information and notes

Asset Management

• Ability for admin and clients to upload and download resource files from a private directory for each client.
• Thumbnails of images

Time Management

• Time Sheet specific to each client

Content Management

• Ability for admin to create new global pages and add them to the menu. This would allow the admin to create pages such as Payment Methods, FAQ, Contracts, Links, and so forth that would be accessible to all users.

Other Features

• Valid XHTML and CSS
• Themeable

Anyone know of an application out there that might suit me? Are you a graphic designer / artist? What kind of features would you like to see in a client asset management system like this? I am also open to collaborating with a programmer to create an open source application such as this. I imagine there are a lot of freelance designers and small design firms that could use an app with this feature set.

by Dieter Rams