Marcos Placona Blog

Programming, technology and the taming of the web.

Category: Website Optimization (page 1 of 2)

Hints and tips about website optimization, query optimization and CDN

The unreliable Internet Explorer

Reading time: 1 – 2 minutes

The unreliable IE
(Photo: BlubrNL)

I was stuck with this problem today, and thought I should write a blog post about it, so should anyone encounter the same thing, they won’t waste time trying to track exactly what’s happening.

Basically it was flagged to me this morning by my project manager that when you tried to submit a form that calls for a report generation using the enter key, the report would not be generated.

I then tried the same pattern (on Firefox), and obviously got results. Project managers are known to use Internet Explorer, so I dusted off my IE 8, and tried the same thing. Continue reading

Updating Java on Centos

Reading time: 3 – 5 minutes

Java on Centos
(Photo: tutchiio)

I’m only writing this blog post because I usually try to keep my VPS up to date, and usually one of the things I have to do to accomplish such thing is updating the Java version.
I always need to do a little bit of “googling” in order to find my way around this, as there’s a few steps that need to be taken, so you can make sure that your classpath is correct, and that the newly installed Java is running as your default installation.
I start by going to the Java website and downloading the most recent version.
It can be a bit tricky to download Java using wget, as Java’s wesbite uses your session in order to download the file, so if you try something like:

wget http://link_to_new_java_update

You will end up with a file called something like:

http://cds.sun.com/is-bin/INTERSHOP.enfinity/WFS/CDS-CDS_Developer-Site/en_US/-/USD/VerifyItem-Start/jdk-6u16-linux-i586.bin?BundledLineItemUUID=ovdIBe.mkHUAAAEjoKEu23n3&OrderID=7iFIBe.
mxpUAAAEjiKEu23n3&ProductID=Dx1IBe.prBgAAAEirRcTvuC_&FileName=/

I’ve just downloaded the file to my downloads folder.
It’s got everything you need, but a big name you don’t need, so let’s simply rename it, and move it to where we want it to be installed.
If you want to find out where your java installation is, simply execute the following command:

which java

In my case I normally install things in “/opt/soft”, so I simply issue the following command:

sudo mv *.bin /opt/soft/jdk-6u16-linux-i586.bin

This will move everything with a .bin extension to the place where I like to install my software. Notice that as I’m moving it to a protected folder “/opt”, I need to use sudo in front, so I have the necessary permissions to create files.
The file should now be called “jdk-6u16-linux-i586.bin” and be located at “/opt/soft” in my case, so:

cd /opt/soft

We then need to give it some permissions, as we are going to have to call this file as an executable:

sudo chmod a+x jdk-6u16-linux-i586.bin

If you execute ls-l on the command line, you should now see that this file has execute permissions.
You can now execute the file by issuing:

./jdk-6u16-linux-i586.bin

It will then ask to read a bunch of terms & conditions, and you are going to have to type “yes” to accept it.
Once you’ve accepted it, you will have to change your classpath, so your system becomes “aware” that a new java version has been installed, and is going to be used.
Create or edit the file /etc/profile.d/java.sh:

sudo nano /etc/profile.d/java.sh

This file must have the following code:

export JAVA_HOME=/opt/soft/jdk1.6.0_16/
export PATH=$JAVA_HOME/bin:$PATH
export PATH=$PATH:$JAVA_HOME/bin

In this case we are updating to JDK 1.6 release 16, but you should replace it with whatever versio you are installing.
By running:

java -version

You should see that the current version is the one you’ve just installed. If it’s not, it means you’ve done something wrong, so just repeat all the steps carefully, and you should be ok.

I truly hate you IE!

Reading time: 1 – 2 minutes

Firefox vs. IE
(Photo: Kay Kim)

I just came across a very interesting bug on my website. I’ve made a post on twitter today asking the local CSS gurus if they knew of any way to fix this:
IE screws up again
As you can see, the contents were being shifted about 150px to the left from where they were supposed to be (you can click on the image above to see it bigger). Only IE does it, every other browser (Safari, Chrome, Opera, Firefox (few different versions including Linux)) simply displays the page correctly. Continue reading

Sticky JavaScript Persistence

Reading time: 1 – 2 minutes

Sticky Javascript Persistence
On my last blog post I explained how to create a drag and drop using cloning, so you can can drag & drop multiple objects
I’ve recently been working on a personal project where I need some persistence on the client’s browser.

At first I thought about using Ajax to save at every user interaction, but then I realized it might be a bad idea, as this could possibly result in hundreds (if not thousands) database calls.

I then started to tinker with JavaScript arrays. They are useful but can be a nightmare when they grow too big and need to be updated at specific points.

My last resource would be Twitter, there’s loads of experienced developer there, so why not ask for some advice?

As soon as I posted my question about browser persistence with JavaScript, I got a couple of options from twips, but the one that impressed me the most was @reybango‘s suggestion, which is what  I’m gonna be talking about on this very blog post.

Speed up yor website – Part 2 – The Free CDN

Reading time: 6 – 9 minutes

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.

CDN With multiple=

What you can see from the image, is that you have all of your servers in a “Cloud of Computers“, and the requests are mapped to the nearest one. In some cases you have more than one server per country or region. The beauty of it, is that applications deployed on the cloud are highly scalable, and you normally don’t need to manage the servers, as they are managed by the provider.
There are some companies offering CDN for a very reasonable price, but today we’re gonna be talking about free stuff!
Before I start with this tutorial, I have to make it clear that the form of CDN we’re going to be using here, is not truly CDN, as it doesn’t offer a very high scalability, and hasn’t been developed for the sole purpose of serving static files, so it won’t have the same high performance of a service designated only for the task.
For some (like myself), it won’t make such a huge difference, as this method still is better than nothing, and is immensely faster than much servers around. I host my applications on my own VPS and don’t have bandwidth limitations. But for most people who use Hosting Companies and have limited bandwidth, this will be a huge improvement.

Step one – The Idea:

Google provides us with it’s wonderful Google App Engine. It’s free for anyone, you can store up to 500mb (enough for static content), and have about 5 million page views a month. Anything beyond it is charged (very tiny fee). Everybody knows Google, so you know they have servers almost everywhere. Put this all together, and you’ll get started.
To make this idea start to happen, simply create an account with Google App Engine. Simply use your Google login details, and and confirm your application with the code Google sends to you visa SMS (you need to have a mobile phone).
Now, you will need to download and install Python (it’s only required for the App Engine can run on your computer). I find Python 2.5 works better than Python 3, so you can get it from here.
It’s time to install the App Engine Client on your computer. Once it’s installed, you should be ready to go.

Step two – Create an Application:

Simply login to your newly created App Engine Account and click the button Create an Application

App Engine - Create Application
Give it a name and title, and then save it. Use a short name, as it will be you application’s handler, and you’ll access it by going to [app_name].appspot.com

Step three – Create your Application Folder:

If you are on a windows environment, normally the App Engine will be installed on “C:Program FilesGooglegoogle_appengine”. If not, it will be installed wherever you chose during installation.

Go to this folder, and create a new folder with the same name as the application you have just created on step 2.

You will now copy your assets folder into this folder. I like to keep the same structure, so by only changing one variable on my website, I can change the the domain it uses to look for images.

So if for example my website was looking for images at http://images.domain.com/images, I’d just change this variable to point to [app_name].appspot.com/images

So, on my folder I’ll have exactly the same structure as I had on my website plus a few files I’ll describe now:
app.yaml: this is our application configuration including URL’s and versions. More info here.

application: my-application
version: 1
runtime: python
api_version: 1
handlers:
- url: /images
static_dir: images
- url: /styles
static_dir: styles

Notice I’m specifying my static directories and their relative paths. You have to change it accordingly.

deploy.bat: This is a file I create for convenience. It executes command lines for me, so i don’t have to type them all the time I want to deploy. The contents of this file will normally be:

"C:Python25python" "C:Program FilesGooglegoogle_appengineappcfg.py" update "C:Program FilesGooglegoogle_appengine[app_name]"

Notice that on the first part of, I’m simply telling my script what I use when it comes to running python scripts. I then update my application by its name, and giving the application folder.

So manually it would be something like:

python "C:Program FilesGooglegoogle_appengineappcfg.py" update "C:Program FilesGooglegoogle_appengine[app_name]"

Step four – Deploying your Application:

Now it’s the big time. Simply double click the file called deploy.bat and you should see a screen like this:
Deploying to CDN

If it doesn’t give you any warning or error message, you should be ready to access your file.

If you decide to delete this file, simply delete it from the folder, and deploy again, and the file will be deleted. You don’t need to worry about minor versions, as the App Engine will deal with it for you.

To be honest, I never worry too much about the version numbers, as I’m constantly uploading stuff to my server. But if for some reason you do, you can simply change the “version” flag on you app.yaml file.

I hope this article is helpful. please don’t hesitate asking me questions or sending suggesting on how to improve this article.

Older posts