Web Design » Web Design

Shortening URLs in-house

Patrick — Thu, 27 May 2010 21:21:01 +0000

All websites now use URL extensions that redirect for easy to remember URLs.

A recent example is Google’s http://google.com/pacman – a simple / and one word is much easier to remember than say /google_pacman.html (which is still keeping it simple!)
(I’m sure if you looked into it, the files aren’t actually stored in a /pacman folder either )

There are URL shortening methods out there, such as http://bit.ly and http://tiny.cc, but I feel these don’t give you enough power for customisation. And what if you have your own domain that you want to use?!

I’ve made my own simple ‘Redirect Setup Script’ that enables you to create redirects with the click of a button.
You can view a demo here: http://patjack.co.uk/newurls (note this doesn’t actually set up any redirects on my site ) and see how easy it is.

My method uses PHP that appends the redirect to your root .htaccess file, and uses mod_rewrite. An alternative method would be to use a meta redirect, which I’ve included in the downloadable folder for those that might not have mod_rewrite on their servers. The downside to the meta redirect is that you need to actually create the folder and index.html file, the .htaccess method just uses the root .htaccess file.

To swap between using the .htaccess mod_rewrite method and the meta re-direct method, just open up ‘process.php’ and change the $use_htaccess from TRUE to FALSE.

The script also uses REGEX to make sure you don’t use some silly extension, or input an invalid URL.

To use, just download the folder from here

A quick example

I’ve set up a redirect for when I have a chocolate cake craving but don’t want to bake a whole cake. To see my secret, click through to http://patjack.co.uk/cake. Mmmmm…

Download: Script.zip

Here’s what gets appended to your root .htaccess and the index.html files respectively

.htaccess

RedirectMatch /".$_YOUR_EXTENSION."/.* ".$_URL_GOES_HERE." [R=301,L] RedirectMatch /".$_YOUR_EXTENSION." ".$_URL_GOES_HERE." [R=301,L]";
There’s a need for two redirects to catch both cases where you may browse to example.com/extension (with no slash) example.com/extension/ (with a slash) or anything else – example.com/extension/index.html

index.html

Redirect

Batch compress all files in a folder with YUI Compressor

Patrick — Mon, 24 May 2010 16:07:51 +0000

I’ve recently read up on the importance of site performance for search engine optimisation (SEO).

Google is saying that this year (2010) it may start using the speed your site loads as a factor in determining where your site shows up in its results list.

One great way of decreasing the load times of your site is to compress the CSS and Javascript.

Before…

After…

There are several methods out there, but Yahoo’s YUI Compressor is supposed to be the best.
The compressor is a java (.jar) file that you need to run from the command prompt or terminal. The biggest flaw in it’s design is that you can only compress one file at a time.

Here comes the solution!

I’ve created a small bash script (.sh) that you can double click to convert all the javascript / css files in a folder (and all folders recursively)

here it is:
#!/bin/sh for file in `find . -name "*.js"` do echo "Compressing $file …" java -jar min.jar --type js -o $file $file done

The file’s pretty self explanatory; it finds all the files ending in .js (you can change this to .css for CSS files) and performs the compress action on each file.

To get this to work, you must make the script executable (download mine at the end of this post) and have the YUI Compressor file in the same directory as the batch.sh script (note that it needs to be called min.jar)

From terminal, you just need to go to the directory with the javascript files in and type
./batch.sh
to run the script.

et voila!

Update – an ever better option

If you put the batch.sh file in your /usr/local/bin folder then you’ll be able to use the command anywhere from within terminal (it must be chmodded a+x) I’ve made a file called ‘yuicompress’ which means, if placed in the /usr/local/bin folder (you need root access) you can type ‘yuicompress’ in terminal to get the command to work!

Type
yuicompress arg
where arg is either ‘css’ or ‘js’ (no quotes) to compress CSS or JavaScript respectively.
The one thing you need to do with this new script is place the min.jar (or compressor.jar as I’ve renamed it) in a global place. I chose ~/Library/Application Support/YUICompressor/compressor.jar

Download the files below and place the yuicompress in /usr/local/bin, and the YUICompress folder in ~/Library/Application Support/YUICompressor/compressor.jar to get this to work from any older on your Mac/Unix box

Downloads:
Script: Batch Convert for YUI Compressor
YUI Compressor: YUI Compressor .jar file
Chmodded yuicompress script & YUICompressor folder:

Preloading images with css

Patrick — Thu, 25 Sep 2008 07:03:02 +0000

The order in which images load when viewing a website fis always a tricky thing to get right. Usually, if you have any sort of javascript gallery for viewing images, these images will load first (as javascript normally loads first). This is always a pain if the main layout images have not yet loaded – you’ll get the javascript gallery appearing with none of the layout images.

There are plenty of solutions out there to set the order of image loading, and most solutions use javascript. Now to me, this is like trying to fight fire with fire; solving the problem of certain javascript images loading first with yet more javascript. But what’s wrong with javascript, surely a little more won’t harm anyone.
Well, javascript means more work for the client’s computer and makes loading times (only a fraction) slower. Also, if you’re not that familiar with javascript, is can be quite daunting to keep adding this.object(); and that.var=10; to your code.

I’ve come up with a far simpler and easier method to solve the problem using only valid CSS and good old HTML.

My trick uses the display:none; style.

What you need to do is add the img tag:

straight after the opening tag. This will be the first thing your browser picks up, meaning it should be the first thing your browser loads (even though it’s not displayed!) Now when the image crops up again later on in the source, it will have already been loaded into the cache and can be displayed instantly.

A simple, valid, cross-browser compliant solution.

Integrating thickbox with imageflow

Patrick — Tue, 05 Aug 2008 07:07:05 +0000

Update: Modified to work with version 1.3 of imageflow

- a simple hack

If you already use thickbox on your site, there’s a simple way to integrate it with the ImageFlow script by Finn Rudolph.

Imageflow is a mimic of Apple’s cover flow for Mac OS X and iTunes, and combining it with Thickbox is similar to QuickLook for the Mac.

Step 1

Make sure you have the thickbox.js, jquery.js and thickbox.css scripts uploaded to your server, and referenced in the head of your web page.

Step 2

Change the longdesc attribute for each image in the imageflow div to:

javascript:tb_show( 'caption', 'images/image.jpg', 'slideshow1' )

where ‘caption’ is the caption of the image and ‘images/image.jpg’ is the URL of the image. Unfortunately the ‘slideshow1′ – gallery option doesn’t seem to work with this implementation. I’m looking into it, but in the mean time if you have any ideas let me know!

Step 3

Small CSS fixes: Open thickbox.css, and change the z-index of #TB_window to 10200 (higher than 10002). The z-index of the #scrollbar and #slider in imageflow.css are 10001 and 10002 respectively. #TB_window must have a z-index higher than both of these.

Change the z-index of #TB_overlay to 10199. This is to make sure the (grey) background is on top of the slider and scrollbar as well.

Step 4

There is no step 4
You can preview my hack here

OR – to make your life even easier – you can download the whole package here [106Kb]
** Version 1.3

I’m here for support, and will try to update to the latest version of Imageflow whenever it’s released. If you appreciate my work, then please do donate – it’s definitely not ‘free’ for me to do all this time-consuming stuff