Category Archives: For Web Developers

CloudFlare – A Free CDN To Boost Your Website Speed

CDNs (Content Delivery Networks) are network of servers located on various parts of the world, in which each server tries to deliver the content to the user who is nearest to it. This way the delivering takes very less time, instead of relying on the single server for the whole world. These CDN server catches the static contents like web page themes, images, style sheets and other static scripts and content which will be same for most of the pages in the particular website. As usual the dynamic contents are retrieved from the original server. If you want to buy a CDN for a small website or for your blog it costs much greater than your hosting cost. Even though the costs came down in recent past years, it is still far from our hands to pluck. So what to do? Here comes the free CDN.

Free CDN & Easy Setup

CloudFlare is a new age CDN provider which provides CDN and other services that boosts your website for free. The most astonishing part of CloudFlare is, it doesn’t need any complex set up, just changing the DNS name server to their server is the only thing you have to do to utilize the benefits of CloudFlare. After changing your name server it only took  approximately 24-48 hours for CloudFlare to detect your site.

How It Works?

CloudFlare has 14 data centers around the world, soon after your site is recognized by these servers, they watch for the http requests generated and content delivered from your original server. The static files requested by the browsers are cached in the cloudflare’s servers for future use. The data collected based on these is synced over all the 14 data centers over the world. So now your content is distributed all over the world by storing it in the CloudFlare’s servers.

How It Speeds Up Your Website’s Loading Time?

Now consider a new user requesting a page from your server, the requests pings the CloudFlare’s nameservers (As we have already changed it to point CloudFlare’s Name servers)  the static content in the posted requests are processed by one of the 14 servers which is nearest to the user location. So the delivering of these static content takes very less time than usual as it is delivered from the shortest distance possile. The other requests from the user are forwarded to your site’s server. So your server has to process only the dynamic content of the pages, not all. This reduces server load, and increases the response time of the server.

To summarize the above process, cloudflare reduces approximately 60 percent of the requests to your server and half of the bandwidth from your server.

Other Features of CloudFlare That Helps In Boosting The Performance Of Your Site

CloudFlare Optimizer –  It optimizes your page by combining the javascripts of your pages (which includes cross site scripts like ‘facebook like’, ‘google ads’ and many others) to lower the request numbers, compresses the data from the server to minimize the need of bandwidth to deliver the data and enabling browser caching of content to save the future requests.

Security – CloudFlare servers handles the requests that considered as threats and saves your site from hackers and attacks.

CloudFlare Analytics – The analytical results provided by them are 100% accurate than JavaScript based site watchings (Like Google Analytics) . It won’t miss out a single request and single KB of data.

Automatic IPv6 – CloudFlare makes your site visible to a visitor from a IPv6 network. You don’t have to do any special settings to get this feature.

Integrability – CloudFlare works with other CDNs and other services.

Concluding

Alvistor.com is running along with CloudFlare for past one month and the result were incredible. We can able to save 30 to 40 percent of our bandwidth and nearly 45 percent of requests with the help of CloudFlare. We Strongly recommend to use cloudflare. Note: You need to change your domain’s name servers to point CloudFlare’s server on your own risk.

C and C++ Native Codes, Now Runs In Google Chrome

Google Chrome supports C and C++. Google lately added the Native Client (NaCL) technology to Chrome’s latest version which can execute native C/C++ compiled code inside the browser. HTML5, JavaScript, CSS3 are the programming equipments powered the web (client side) so far, now the list incremented with C and C++.

Why native code is needed for web now? Web and Cloud based computing are more popular today, lets take the example of any online text editor like Google Docs (docs.google.com) or Microsoft’s Docs.com, you can see that those programs are running in your browser, and computes the data locally and then updates it to the server. To build a program that can run in browser the only available programming language is JavaScript. Coding in JavaScript is a very difficult task for programmers. So if the browser supports any other language like C/C++ or Java, the programmers leverage on it to develop applications. Programming in native language is much easier than coding in JavaScript.

How it works? A programmer writes his application in C/C++ and the code is compiled. Now the compiled code is downloaded by the browser and runs in the same. Browser can not run the C/C++ code, here comes the NaCl, in which the program is executed. So more or less this online application works like a desktop application. Refer NaCl developer site.

Next is, interface. The program runs in NaCl and GUI designed in HTML, CSS, and JS rendered in the browser, these two sets are connected by an API called Pepper. The message passing between the web page and Native program running in NaCl are handled by Pepper. NaCl is the chemical formula for Sodium Chloride, which is nothing but a normal table Salt. So its salt and pepper combination makes this working.

Google says that NaCl will be available for every other browsers and in near future it is going to support more languages. NaCl Developer site and Google Code page has NaCl SDK, Demos, C++ tutorials etc.

Avoid Web Pages Jumping To Top While Using OnClick Event

When you use empty or ‘#’ reference in a href of a anchor tag (<a href=”#”></a>) to define any onclick or other functions like hover, ondblclick, you can find that the page jumps to the top or else it reloads again. I came across this problem when I tried to implement a tabs like design using JQuery’s “.click()” function. When ever the tab link (with # in the href) get pressed, JQuery comes in to play and hides the visible tab and shows another tab in the line according to the button clicked.

This problem persists over any where # link is used. The below code explains the problem. I am not certain why it happens, it may happen because the browser tries to find the # link, due to the failure it pose top of the page in the view port, or it may happen because the browser tries to re-render or redraw the page again using the available html source. While using empty href, you can able to see the page reloads, every time the particular click action is made irrespective of what functions used inside the onclick or any other functions used.

<a href="#" onclick="alert('After you click Ok, the page will jump back to the top')">Click to see the above code in action</a> 

Click to see the above code in action

The above code demonstrates the problem. The solution to avoid this is very simple. You have to replace # or empty href with a void JavaScript function ( JavaScript:void(0);  ). The demo and the code is given below.

<a href="JavaScript:void(0);" onclick="alert('This stops page jumping')">Click to see the above code in action</a> 

Click to see the above code in action

So here after never use empty or # reference in  anchor tag, particularly when you design some dynamic page or using transitions with the help of JQuery or any other JavaScript libraries.

Writing WordPress Blog In Other local Languages

Recently I designed a website for one of my client who has a requirement, that his site should be in his local language. Here the example is Tamil, a south Indian language, if you are not aware of this language, no problem. The question is “How you write a post in local language in your wordpress blog/site?”.

Actually the unicode character set helps you to write in any language. Transliteration tools are the best tool to write in any language, most of us are aware of it, if not here is the short description. Google’s transliteration tool residing at google.com/transliterate helps you to generate a your post in appropriate language as you type in the words of your language as phonetic English words resembles the sound of the word in your language. If it is difficult to understand what I said in the above sentence, just try using the tool.

Here is the hack for wordpress to accept your language. We know all of our data are stored in MySQL database and the database used by WP uses utf-8 default. Just changing the default preference, your unicode data will be accepted by WP. for that you need to open “wp-config.php” from WP installation root folder.

Find these lines

define(‘DB_CHARSET’, ‘utf8?);
define(‘DB_COLLATE’, ”);

and disable it by adding double slashes ( // ) before the line starts, like

//define(‘DB_CHARSET’, ‘utf8?);
//define(‘DB_COLLATE’, ”);

save it. Presto…!!!! Now everything works fine as you want.

Note, with out this WP hack, your unicode char set will not be accepted by your MySql database so all the letters will be replaced by question marks like ??????????????? ??? ????? ??????.

Warning: editing wordpress codes needs experience in it, at least when editing critical lines. If any problem occurs due to modifying you are the sole responsible to it. Any way you can over write these files with original WP files to rectify the problem (if occurs).

Want To View Two Webpages In One Tab? Check This!

Are you the kind of the person that have an idea of viewing two webpages in one tab? Well guess what Google’s chrome has an solution for you with its extensions. Well actually it is not gimmicky like merging two tabs into one, it actually divides the tab in to several segments and give room for you to browse webpages.

This is actually an extension in the Chrome web browser it is called as Chrome Splits. This extension actually does this to your browser flawlessly. First you need to open a tab, then you need to add an divider in the same window by adding it in the Chrome Splits extension menu. You can arrange the dividers in columns or in rows accordingly. Then you can type the specific web address in the specific dividers and view these website in a jiffy.

The only problem in this extension is the bookmark retrieving. Which with an simple copy paste you can deal with it. It is good for web developers an many profit oriented programs. Check this extension and do comment below and tell your feedback. To download Chrome Splits click here.

Moving or Restoring Large mySQL Database

Recently I moved one of my client’s website to westhost hosting, one of the best hosting provider which I always prefer. Usually, in most of the hosting services restoring database size is limited to certain point (like 5mb) in case of westhost it is 64mb. So if your database size is larger than that, you can’t restore it in the usual way using ‘phpMyAdmin’. So moving your database will be the big question mark, then how it can be done.

One simple way to do it is by using BigDump. Bigdump is a 10kb php script file written by Alexey Ozerov.

Download BigDump here. and follow the steps given there.

Precautions: while backing up your database through ‘phpMyAdmin’ do not select gzip or zip and also do not select “Extended Inserts”. While restoring database make chmod for the dump folder as “777″. Other things you can follow in normal and as usual way.

Best Of Open Source Web CMS

A content management system (CMS) is the collection of procedures used to manage work flow in a collaborative environment. These procedures can be manual or computer-based. The procedures are designed to do the following:

  • Allow for a large number of people to contribute to and share stored data
  • Control access to data, based on user roles (defining which information users or user groups can view, edit, publish, etc.)
  • Aid in easy storage and retrieval of data
  • Reduce repetitive duplicate input
  • Improve the ease of report writing
  • Improve communication between users

A web CMS is a Content Management System, designed to simplify the publication of web content to web sites and mobile devices—in particular, allowing content creators to submit content without requiring technical knowledge of HTML or any other mark up codes. It also includes the media type management of files like images and others.

Best of Open Source Web CMS

There are numerous web CMS are available all over internet, some of them were listed below,

as I already told the list is not going to stop, but based on the popularity and usage here only 4 of them is listed, I hope your requirement of good CMS will be completely fulfilled by any of those above.

WordPress being number one blogging platform, somehow enters in to the CMS race. WordPress is actually not a full pledged CMS, but it is ideal for bloggers and small site owners. Best choice for starters, novice because it is simple and requires less knowledge on web developing. For front end developing it is very easy to develop for wordpress than any other Web publishing platforms. I recommend WordPress for every one, but it is not the only choice, when your need pushes you can also choose other CMS.

Drupal with high number of available modules, which is highly flexible. Almost every need of a custom CMS with unlimited categorizations and customizable user levels will be satisfied. Best choice for large sites. Users needs little more knowledge on using drupal even though drupal is highly flexible to the needs, non simplicity is one of the major drawback.

Joomla which means collection of all, usually ideal choice for small or medium range sites, which doesn’t needs high segregation of content. The simplicity of Joomla lies in between the simplicity of wordpress and drupal. Joola also has large number of extensions, but still joomla is inflexible as a CMS.

This is not all, there are lots of CMSs but the above three has a larger community support and updates frequently. Still are you in doubt of choosing a CMS, post your requirement in below comment section let us help you.

How To Design A Faster Loading WebSite

A faster loading websites gives the users (readers) pleasant experience, and a faster site scores bonus and the slower ones dumped even though it has some good content and design.

To design a faster loading web site, we have to enlist the factors that affects the loading speed of a website. And they are

  1. HTML & CSS Rendering
  2. JavaScripts loading & running
  3. Files like pictures, background images, flash, sound files etc.,
  4. HTTP requests
  5. Cookie Access

Factors other than design issues are Network speed, server loads, that can be solved by choosing good hosting solutions. I westhost for shared hosting, vpsnet for cloud and buy cdn from vps.

Design Heuristics For Faster Loading

HTML & CSS

HTML and CSS is the basic building blocks of a web page. Always use externally linked css at the top of the html page in the head section and avoid internal and inline CSS codes. why? because

  • Inline Style sheets (CSS) are more often repeated again and again in a page, results in increased texts indeed increased size & rendering time.
  • Browser need CSS to show the content properly, so CSS should loaded before any other page elements.

Follow W3 standards for coding your page design.

Java Script

Use always external javascript, that written in a separate file like “script.js” and link this at the bottom of the page, before body tag. Java script only works after every page elements loaded, and loading of a java script should not delay a page display. A page is visible well before the loading of js, and it is only needed for some actions.

Some page design needs large javascript, to make a javascript load faster, minify it. Minifying in sense compressing, and eliminating spaces and comments in a javascript. There are lot of web service like MinifyJavaScript and JScompress

If you are using JQuery as your java library, then make use of Google APIS for hosted javascripts. For example alvistor is now using (at the time of writing this article) below link for latest version of minified JQuery JS. http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js So this loads faster from Google, instead loading your server.

Pictures & Background Images

Do not use the image as it is, try to compress it to the extent, at which there is no loss of quality. JPEG is common image extension, but .png, .gif plays better that .jpeg images.Here I am not talking about content images, here I pointing images that integrates with design like background images, buttons, etc.

There are many desktop software s for compressing a image, Smush.it from Yahoo developer network is a good online service for loss less image compression.

It is very important to make a image sizable and cache able. All the theme or design images should not load again and again for various pages of the same site, provided all the pages of the site uses same design. Making the images cache able, site only loads content not the images.

Reduce HTTP requests

Consider a page has 1 html file, 2 css file, 2 js file, 15 icons & buttons, 5 background images, totally there are 1+2+2+15+5=25 http requests are made to load a page. So to reduce the request, just reduce the files. How to do it.

Combining all CSS files in to 1 file and all JS files in one, there is another concept called gzip which compresses all the needed files in to one file. Regarding buttons and images there is anther concept in CSS called CSS Sprite.

Avoiding URL Re directions to reduce http requests.

CSS Sprite

Spriting is a concept of combining all images in to one and particular image is used by specifying the position of the needed image in the combined image. Here is an example, alvistor uses the single image for displaying icons. A particular image in this can be used by specifying  the position.

Here in this combined sprite image there are 15 icons for different purpose. If I upload this 15 separate images and link to my design, it needs 15 extra http requests for downloading each single icon of this. A browser can handle 1 request at a time, even though modern browsers are capable of handle 4 to 8 requests per time. Even if it is 4 it need 4 batch to download all icons completely. But in CSS Sprite, it the http request is reduced from 15 to 1, that means pretty faster loading.

This is not difficult as it seems. SpriteMe offers you a service, all you have to run your site under spriteMe, it will combine all your image in to one and re-write your CSS, all you have to do is just merge the CSS created by SpriteMe with your existing CSS.

Empty hooks & Cookies

These are some trivial things sometimes do its part in speeding up a site. Empty hooks for ‘href’ in anchor tag and ‘src’ in image tag should be eliminated.

Some complicated designs like eCommerce websites need cookies, if your design is going to set cookie make it small and less accessible.

Hooks and cookies are not going to affect the speed in considerable rate, but if you plan to optimize a design to the core, just take this also.

Flash & Other multimedia Components

I strongly recommend, not to use multimedia components and flash. It makes your site slow and occupies large amount of browser memory. HTML 5 is capable of doing all the animations that a flash can have. So stay away from Flash, up to my knowledge, flash don’t works for some operating system like apple’s ipad, and some other. If you want your design to work in all environment don’t in include flash and tedious multimedia components.

I hope, this article gives you some clear vision about designing a faster website design or theme. If you have any doubts and need clarification, I am eagerly waiting to respond your comments below.

Note: Test your site design with other sites at alvistor.com/speedtest