This project was an interesting one for a number of reasons. For a start, it was the first site that we’ve built where Photoshop was not the first application to be opened. The design also makes use of a rigid grid, although elements may break out of it occasionally to stand out. Each element was built to be modular, so that future enhancements to the design, or additional package designs do not break the layout.

A complex administration section to the site was coded from scratch, to provide a bespoke solution for managing projects and uploading Suzie’s showcase images. The system was written using PHP and MySQL, and makes use of the popular Javascript library JQuery for AJAX interactions and visual effects.

on splitText(delimiter, someText)
	set prevTIDs to AppleScript's text item delimiters
	set AppleScript's text item delimiters to delimiter
	set output to text items of someText
	set AppleScript's text item delimiters to prevTIDs
	return output
end splitText

on open {dropped_item}
	set myPath to (path to home folder) as string
	set myPath to myPath & "Dropbox:Public:"
	tell application "Finder" to duplicate (dropped_item) to folder (myPath as string)
	set fileName to item (count splitText(":", dropped_item as text)) of splitText(":", dropped_item as text)
	set filePath to "https://dl.getdropbox.com/u/1083712/" & fileName
	tell application "Finder" to set the clipboard to filePath as text
end open

The first chunk of code, starting with “on splitText” and ending with “end splitText” is just an function required to split a string apart at a given delimiter. This may already be built into AppleScript; if so, I couldn’t find it, so I’ve got a custom function to do it for me.

The next lines of the code say what to do when a file is dropped onto the Application. It gets your home directory, and appends “Dropbox:Public:” onto it – this assumes that your Dropbox is installed in the standard location. If not, you’ll have to set the variable “myPath” to wherever your Dropbox is actually located, using the syntax “Path:to:dropbox:folder:”.

Next, the AppleScript copies the file to that folder, and then uses the splitText function to get the individual file name. This is then added to the end of your public Dropbox URL (you will have to change this to your own URL – the current one is mine). The resulting URL is then inserted into the clipboard, ready for you to paste somewhere useful.

To use this script, alter the lines above that need changing, then use the File > Save As menu to save this as an Application. Now, whenever you drop a file onto it, it will get copied to your Dropbox Public folder, and the public URL copied into the clipboard.

You can download the Application (along with a custom icon) here. Open this with Script Editor and edit as above.

Enjoy!

First of all, let’s have a look at a couple of CSS3 techniques that are in use on this site.

Box Shadow

The CSS3 box-shadow (or -moz-box-shadow for Mozilla-based browsers and -webkit-box-shadow for Webkit-based browsers) property produces, as the name would suggest, a hazy drop shadow around the element in question. The full syntax is as follows:

box-shadow: 2px 2px 5px #c9c9c0

The first attribute is the horizontal offset of the shadow, the second is the vertical offset of the shadow, the third is the softness (0 will cause a hard-edged shadow) of the shadow, and the final attribute is the colour of the shadow.

The code above is that used on this website, and you see the shadow it produces around the codebox above. But don’t forget, that when dealing with the current browser market, you will have to include the above rule three times – one valid CSS3, one for Mozilla and one for Webkit, like below:

-moz-box-shadow: 2px 2px 5px #c9c9c0;
-webkit-box-shadow: 2px 2px 5px #c9c9c0;
box-shadow: 2px 2px 5px #c9c9c0;

Border Radius

Another popular attribute that’s also used on this site is the border-radius property (or -moz-border-radius and -webkit-border-radius). This does exactly what it says on the tin – adds a rounded corners to an element. The following is the code used on this site.

border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;

The one (and only) attribute for the property is the radius of the border – here, specified in ems so that it will increase if the text is increased. You can see the effect of the above code on the codebox above.

RGBa

This technique is not employed on this site, but I have used it on others. This is not a property by itself, but is instead used as the value of any other property that takes a colour attribute. It has the ability to give the element a colour, but also an opacity (‘RGB’ for the colour, ‘a’ for alpha transparency). The syntax is as follows:

color: rgba( 255, 255, 255, 0.5 )

The first three properties in the rgba brackets are the Red, Green and Blue values of the colour, respectively, from 0 (for none of that colour) to 255 (for all of that colour). The final one represents the transparency – 0.5, for example, is 50% transparent.

But the other browsers?

Now these are all very well, but what about the other browsers? Well, first you must remember this: websites do not have to look the same in all browsers. Therefore, it’s acceptable to have some styles when the site is viewed in Safari 4 that simply do not show when the site is viewed in Internet Explorer – as long as the functionality is still there.

So what can you do? Just make sure that if you use these properties, your site does not rely heavily on them – if you use the border-radius, ensure that the site looks acceptable with square corners. If you use the box-shadow, make sure that if the shadow doesn’t show, everything still looks ok. It might not look as good, mind, but it must still look ok.

The RGBa is the only one listed here where a further property must be defined for other browsers – ensure that you define a standard colour (in hex code, for example) on a line before the line that defines the RGa colour. The less compliant browsers will pick up on this and ignore the ones they don’t understand.

So don’t let the fact that CSS3 is not full supported wide-spread put you off from using it’s advanced features. Give them a go!