I’ve decided to get back at jQuery draggable and droppable to a personal project I’ve been working on. In the past, I’ve demonstrated how to do basic drag and drop, but this time I needed something a little bit more elaborated.

I won’t spoil my personal project by showing what it before it gets done, but I’ll show here an example of what I wanted to accomplish which will use pretty much the same functionality, but in other application.

The idea is:

I have a stage where I have a bunch of components that should be dragged from one side to another. Those components have to be cloned, and not totally dragged as I might want to use them more than one time.

A sketch of it would be on the lines of:

As you can see, my icons need to stay on the left, but a clone of it can always be dragged to the right. This is not a finished version, but show pretty much all of the steps I had to follow in order to accomplish it. It’s not a simple solution, and did involve loads of researching and asking around. The jQuery’s documentation is not really vast, and does not cover (and should not really) every single example.

I start with importing all my necessary libraries from Google Servers.

To continue with our series of website optimization tricks, I’ll talk a little bit more about Content Delivery Network (CDN), and will talk you though the steps of creating a totally free CDN for your website.

Basically, as I’ve already stated on my previous post, a CDN is an external network which specializes in serving static content. It normally consists of a few servers spread around the world, so the data will travel the shortest route to get to their destination based on Geolocation.

In other words, if you’re in Japan, why should you have to wait for the data to travel from Europe, if there’s a server just next door to you.

Assets such as stylesheets, images and videos are often the major hit taken by a webserver when a webpage is loaded. I’m often trying to improve my page loads by using published pages (flat html) and rewrites, so I don’t need to run a dynamic page when it’s not necessary.

It came to my attention today that my website was serving blank pages, and I got really intrigued with it. I checked the memory, and everything was fine, and my logs wouldn’t indicate any obvious error. I did a quick research, and some people were saying this happens due to your log files being full which cause your OS’s open file to go nuts, and you run out of file slots.

By running out of slots, your Apache starts serving blank pages, and won’t work properly either. A quick way around to it, is cleaning up your logs.

Did you know that search engines consider things like http://www.placona.co.uk/index.cfm and http://placona.co.uk/index.cfm as duplicate content? It might sound like a wise thing to do, as your site would be accessible by whichever URL related to your domain. I’ll say here it’s not, as search engines like Google consider this an offense and will penalize you should they think you’re doing it on purpose.

Google normally are very strict and harsh with people trying to “play” with their search engine, or people who try to black hat SEO. And content duplication might be just what will put your domain on the bottom of their search.