Daniel Tillett

I recently had a relatively large javascript (14KB) that I want to compress down. There are a lot of online JS compressors out there unfortunately not all of them actually work. After testing around a dozen of them I found the best two are JavaScript Utility and Javascript Compressor. JavaScript Utility was able to compress down my code to 5.0KB while Javascript Compressor compressed down to 6.3KB.

While both are good I would recommend using Javascript Utility, not only because it achieved a better compression ratio, but it also has a large number of other JS utilities that are worth using (especially JSLint). The only problem I found is I was only able to get the UTF-8 encoding option to actually run.

I was recently faced with working out what had changed in one of my big php files on the remote server (someone naughty had been playing with it). I use Mac OSX Dreamweaver and after a bit of searching around I found the following way to make Dreamweaver easily show you what has changed. This is not really anything major but it might save someone a bit of time.

First download and install TextWrangler. It is free and quite a nice text editing program.

Next open “Preferences” in Dreamweaver and select “File Compare”.

In “File Compare” browse to the “usr/bin/” folder and select “twdiff”.

Press OK and then go back to the main menu.

Open in Dreamweaver the local file in that you want to compare with the remote version. Select “Compare with Remote” from the “File” menu.

TextWrangler will now launch showing you the difference between the local version and the remote version. You can then chose to keep or reject any of the changes.

Here is a little css to create fluid rounded borders in css (no need for JavaScript) that appears to work well in all the browsers I have been able to test. The only exception seems to be Mac IE 5.2, but that browser is a total basket case for correct CSS support anyway. You can see how I used the technique in a live site by visiting Price USA - Shop where you want.

ORB can be used to create any width border and only requires one image to create all four corners. This should really help those who are trying to keep the small image count down - some of the rounded border techniques I have seen require 9 separate images. The key is to use a single composite images and displace it by the required amount to create the final borders. The following example shows how to create a three pixel wide light grey border (#DDD) using a 10 pixel corner. So how is this done?

Image

The image needs to be created as a composite image of the four rounded images. In the example shown below the image is 10×40 pixels with the individual round corners ordered (from top to bottom): top left, top right, bottom left, bottom right. You will need to adjust the image to suit your particular border width and color, as well as the diameter of your curve. 

b.bt, b.bt b, b.bb, b.bb b {display: block; height: 10px;font-size: 1px;background:url(images/grey.gif) no-repeat;position:relative}b.bt {top: -3px; left: -3px}b.bt b {background-position:100% -10px; left: 6px}b.bb {background-position:0 -20px; top:3px; left: -3px}b.bb b {background-position:100% -30px; left: 6px}#grey_border {border: #ddd 3px solid}

The key things to note here are the height value which needs to be set to the width value of your image and the background-position values for the image which need to be adjust by the width of your border. The values shown in the above example are for a 3 pixel wide border.

HTML

To create the box you just need add the following html inside the div with the border property.

<div id="grey_border"><b class="bt"><b></b></b>[your content]<b class="bb"><b></b></b></div>

I would appreciate feedback if the technique isn’t working in your browser. So far the only browser I have found where it doesn’t work is Mac IE 5.2, but since I’m a Mac person I haven’t been able to test it extensively in all the old Windows browsers.