Category: Articles

How to Defer Parsing of JavaScript in WordPress

The most important one for a WordPress site is its speed and performance. So this is the reason why we should defer parsing of Javascript in wordpress.

So in order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. This means that if you have lots of JS or <script> tags, it will take more time for the website’s content to appear, as it first waits for all the JavaScript to load.

By minimizing the amount of JavaScript needed to render the page and by defer parsing of JavaScript, the website would not wait for the JS code to load, which would result in a quicker loading time, so you can reduce the initial load time of your page.

When you check your website in the Pingdom, GTMetrix or Google’s Page insights, you will get “Defer loading of javascript” warning. If you get this warning, then you should follow the steps below.

How To Defer Parsing Javascript?

You can enable defer parsing for JavaScript just by adding ‘defer’ attribute. For example

How To Defer Parsing Javascript in WordPress?

To defer parsing of JS in WordPress, add the below code to the bottom of your theme’s functions.php file.

if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        return "$url' defer ";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

So we have learned how to improve the speed and performance of your website or WordPress powered website by deferring parsing of JavaScript. Remember, the faster and smoother your site is, the more traffic and happier visitors you will have!

Check .htaccess is working or not on server !

Previously I wrote Rewriting tips using .htaccess file for URL rewriting.

Common Usage of .htaccess file :
– Authorization, authentication
– Rewriting URLs
– Blocking
– Directory listing
– MIME types
– Cache Control, and many more.

Here is a test to check that .htaccess or mod_rewrite is enabled on any type of hosting whether shared or dedicated.

Now we want to check for mod_rewrite is enabled or not.

1- First of all create an empty file and name it test.html (or what you want) and upload this file on you hosting server.

2- Create a .htaccess file and put the following code into it. (create htaccess.txt file )

[php]
RewriteEngine On
Options +FollowSymLinks
RewriteRule ^test\.html http://www.google.com/? [R=301,L]
[/php]

Note: On windows machine first create htaccess.txt file, then adds the above code into it, upload on server, after uploading remove the .txt extension.

3- Now run this URL into your browser http://www.domain-name.com/test.html (replace domain-name.com with your actual domain name).

If it redirects you on google.com then mod_rewrite is working on your server host, if it is not, shows you a blank file means mod_rewrite is not working.

4- If your site runs in some folder then adds the folder name before test.html and uploads the htaccess file in the root folder. Eg

[php]
RewriteEngine On
Options +FollowSymLinks
RewriteRule ^foldername/test\.html http://www.google.com/? [R=301,L]
[/php]

QR Code generation using Google Chart API

These days QR Code has become more and more popular as it capture all the information using a Smart Phone. QR codes can be used in Google’s Android operating system and iOS devices (iPhone/iPod/iPad), as well as by using 3rd party barcode scanners.

So here I am going to tell how to build QR Code generator using Google Chart API.

First of all you need to create two file
– index.php: in the file you create a form where you collects the input from the user like size, encoding, content and correction. And make the action of the this form to generate.php.

– generate.php: in this file collect the input data from the above form and process it with Google Chart API and create the dynamic QR Code.

File index.php

[html]
<html>
<head>
<style>
body{
width:100%;
margin:0px;
padding:0px;
}
#container{
font-family: Arial, serif;
font-size:12px;
padding-top:20px;
width:700px;
margin: auto;
}
form{
width:300px;
padding: 0px;
margin: 0px;
}
form textarea{
font-family: Arial, serif;
font-size:12px;
width:270px;
margin:5px;
height:40px;
overflow: hidden;
}
iframe{
border:1px solid #DDD;
}
#generator{
width: 300px;
float:left;
}
#generator fieldset{
border:1px solid #DDD;
}
#result{
padding-top:7px;
margin-left:340px;
width: 350px;
}
</style>
</head>
<body>
<div id="container">
<h1>QR Code Generator</h1>
<div id="generator">
<form target="qrcode-iframe" action="generate.php" method="post">
<fieldset>
<legend>Size:</legend>
<input type="radio" name="size" value="150×150" checked>150×150<br>
<input type="radio" name="size" value="200×200">200×200<br>
<input type="radio" name="size" value="250×250">250×250<br>
<input type="radio" name="size" value="300×300">300×300<br>
</fieldset>
<fieldset>
<legend>Encoding:</legend>
<input type="radio" name="encoding" value="UTF-8" checked>UTF-8<br>
<input type="radio" name="encoding" value="Shift_JIS">Shift_JIS<br>
<input type="radio" name="encoding" value="ISO-8859-1">ISO-8859-1<br>
</fieldset>
<fieldset>
<legend>Content:</legend>
<textarea name="content"></textarea>
</fieldset>
<fieldset>
<legend>Error correction:</legend>
<select name="correction">
<option value="L" selected>L</option>
<option value="M">M</option>
<option value="Q">Q</option>
<option value="H">H</option>
</select>
</fieldset>
<input type="submit" value="Generate QR Code"></input>
</form>
</div>
<div id="result">
<iframe name="qrcode-iframe" frameborder="0" id="qrcode" src="generate.php" height="315px;" width="350px"></iframe>
</div>
</div>
</body>
</html>
[/html]

In the above file collects the data from the user and sends that data to generate.php and create the QR Code using Google Chart API in the iFrame.

File generate.php

[php]
<?php
if(isset($_REQUEST[‘content’])){
//capture from the form
$qr_size = $_REQUEST[‘size’];
$qr_content = $_REQUEST[‘content’];
$qr_correction = strtoupper($_REQUEST[‘correction’]);
$qr_encoding = $_REQUEST[‘encoding’];

//form google chart api link
$qrImageUrl = "https://chart.googleapis.com/chart?cht=qr&chs=$qr_size&chl=$qr_content&choe=$qr_encoding&chld=$qr_correction";

//print out the image
echo ‘<img src="’.$qrImageUrl.’">’;
}
?>
[/php]

In the above file (generate.php) collects the data from the form using REQUEST method and append the data into the Google Chart API URL and generate the QR Code image.

.htaccess Tips

Hypertext Access, commonly shortened to htaccess, is a configuration file which controls the directory it is placed in and all the subdirectories underneath it. It’s an incredibly useful feature which allows webmasters to control how many aspects of their website works. You can redirect pages, change the extensions of pages, password protect directories and much much more.
So here I write “Rewriting tip using .htaccess” file and how to “Redirect sub domain to sub folder”.

Rewriting tip using .htaccess:

Let us take an example,

suppose Original URL:
Eg:http://twitter.com/followers.php?id=qualitytuts

and we want our Rewriting URL like below:
Eg:http://twitter.com/qualitytuts/followers

Below is the .htaccess Code for the above example
[php]
RewriteEngine On

RewriteRule ^([a-zA-Z0-9_-]+)/\followers$ followers.php?id=$1

RewriteRule ^([a-zA-Z0-9_-]+)/\following$ following.php?id=$1
[/php]

Redirect sub domain to sub folder:

[php]
RewriteEngine On

RewriteCond %{HTTP_HOST} ^demos\.qualitytuts\.com$
RewriteCond %{REQUEST_URI} !^/demos/
RewriteRule (.*) /demos/$1

RewriteEngine On

RewriteCond %{HTTP_HOST} ^labs\.qualitytuts\.com$
RewriteCond %{REQUEST_URI} !^/labs/
RewriteRule (.*) /labs/$1
[/php]

In the above code you have to replace your sub-domain and directory name.

 

WordPress 3.5 Beta 1

WordPress 3.5 is set to be launched in December. Before its release, beta version has been released. It is quite obvious that the beta version is not meant to be run on production site. Here the work is still in progress and beta version has been made available just to let the users know what new features are there for them. The developers can run the beta version locally on their computers, work on various modules and they can suggest if some bugs or problems are there and in a manner the developers can help the wordpress team to make the new version successful.

The WordPress team concentrated on improving the already existing WordPress features and removed features that are no longer popular in the new version.

New features of WordPress 3.5:
  1. Appearance: The appearance has been made more appealing which is helpful for the new developers. The welcome screen now consists of the facility to customize the site where we can change the Site title & tagline, colors, background image, front page display at one go. The ‘change your theme completely’ link directly redirects to the Themes page from where we can select the theme totally customized by a developer. Here we have the option to write a first blog post, add a new about page, modify widgets, create or modify existing WordPress navigation menu and link to the new overhauled WordPress Media manager.

    A new color picker. And the all-HiDPI (retina) dashboard have also been added.
  2. Media : Media in a new and more sleeky look has been made available with the new version.
  3. Accessibility: Keyboard navigation and screen reader support have both been improved.
  4. Plugins: We can browse and install plugins marked as favorites on WordPress.org, directly from the dashboard.
  5. Mobile: It’ll be easier to link up your WordPress install with mobile apps available in wordpress database, as XML-RPC is now enabled by default.
  6. Links: The Link Manager has been removed from the wordpress sidebar in new installs because they were obsolete. A plugin named ‘Link manager is available to manage the links. In WordPress 3.5, the Link Manager (which some use to build blogrolls) will be disabled by default. If we have links when we update, it’ll still be there. But we can use this plugin to ensure it will always be there, even if we update to a later version of WordPress or remove all of the current links.

    There are even more under the hood changes with the new WordPress 3.5 version, but most probably you won’t even notice them.

Changes relevant for developers in wordpress 3.5:

  • External libraries updated: TinyMCE 3.5.6. SimplePie 1.3. jQuery 1.8.2. jQuery UI 1.9 (and it’s not even released yet). They have also added Backbone 0.9.2 and Underscore 1.3.3, and one can use protocol-relative links when enqueueing scripts and styles.
  • WP Query: We can now ask to receive posts in the order specified by post__in.
    • XML-RPC: New user management, profile editing, and post revision methods. We’ve also removed AtomPub.
  • Multisite: switch_to_blog() is now used in more places, is faster, and more reliable. One can now use multisite in a subdirectory, and uploaded files no longer go through ms-files (for new installs).
  • TinyMCE: API support for “views” has been added which is used to offer previews and interaction of elements from the visual editor.
  • Posts API: Major performance improvements when working with hierarchies of pages and post ancestors. Also, one can now “turn on” native custom columns for taxonomies on edit post screens.
  • Comments API: Search for comments of a particular status, or with a meta query (same as with WP_Query).
  • oEmbed: They have added support for a few oEmbed providers, and they now handle SSL links.

Along with all this, a brand new theme has also been introduced named “Twenty twelve”. It has been made available for download on WordPress Theme Directory (http://wordpress.org/extend/themes/twentytwelve). The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. One with a custom menu, header image, and background has been shown below.

Quality Points One Should Keep In Mind To Make Business Successful Via Websites

Nowadays internet has become such a vital part of our life that from waking up in the morning until sleeping at night we are connected to the whole world through it either on our personal computer, mobile or I-pad etc. Viewing from the perspective of branding and enhancing our business through internet via a website is the need of the era. Popularity in a certain field socially is counted a lot.

Even a child today asks any enquirer to refer internet. If a child finds any person asking about some product, or some service provided by a certain enterprise or organization, he/she without a second thought asks the person to google it. Whats this?? Today internet has flourshed so much that every information someone wants is there on internet. So internet is a very good medium to enhance our business with the changes going on these days in our society.

To make full utilization of internet for enhancing our business, certain points are required to be kept in mind always. Because an idea gives us profit only when it Is used in a positive manner and with perfect planning about all the things.

A website is mirror to any business. Every aspect of a particular business should be represented in such a manner that the first glance of your website may tempt the user of your website to navigate it properly. It should be designed and developed keeping in mind each and every small thing related to our business so that the user in very friendly manner gets the appropriate information & is not misguided in any way. Through this only we can develop trust which is the key ingredient to develop long term relationship with them. Customers nowadays are in very hurry. They just want instant results these days. Delay of even 2-3 seconds can cause loss of a customer. So keeping in mind their requirements & needs and serving accordingly is very essential.

So I am here in this article trying to incorporate summary of several points which should be kept in mind before taking the decision to give our business shape via a website.

1)    Determine the prime purpose of your website:

  • Kind of business (It may be a firm trying to increase sell of its products, an organization trying to reach people to serve them, personal blogging, etc.)

According to the type of business the type of website varies. In case of a firm trying to sell its products we have to make an e-commerce website which includes all the products available in that firm along with the prices, shopping cart is included and payment gateway is also required to be integrated. Web portals or blogs can be made.

  • Brand building :  It doesn’t mean just spending money on the brand. Instead, it’s about building an entity that will resonate with your customers and keep them coming back again and again—even when there’s no deal or promotion to entice them. To grow a business online you first need to grow your product. For brand building :
    • Research the audience properly. You must be well aware of the targeted audience.
    • Determine what your audience wants & try to provide them that only.
    • Balance your online media mix through repetition, and get your ads out in front of your target audience using behavioral targeting, site specific targeting and re-messaging.
    • Social media integration like facebook, twitter so that you can know what people have to say about your product and this is a good medium to interact with the audience.
    • Build up your reputation online.

2)    Requirements:

A website is integration of designing , developing, database programming, flash & javascript programming, marketing of website, SEO integration at one place. So to build a good website specialized personnels are required. In web market nowadays many tools are available using which we can ourself make our website after knowing some basics like wordpress but to develop a well established website one requires to hire some professionals and it incurs money to the business. But if our business is successful online, it’s an asset.Nowadays outsourcing is done. So we should decide properly whether we have to do our work on our own or to outsource it.

3)    Keen analysis of business and division into logical sections:

In case of small scale business a website of 5-6 pages can work well but in case of large scale and big business organizations in which various departments are there, proper division should be mirrored in the website too. So for that proper functioning of a particular business should be analyzed properly and web pages should be decided according to that only. The process of doing business should be identified properly.

4)    Building an appropriate navigation system:

A proper distribution of all the pages and links to those pages (navigation system) should be made so that it’s easy for users to access what they want on your website. Home page should be designed in such a way that links for every page in our website should be from home page only. It should not look so messy that it is difficult to understand for the user where to click and how to reach a particular page. The top menu, left menu, right menu, bottom menu should be well maintained. Search box should be there.

5)    Innovative designing:

Rich look and feel to a website is very necessary to entice our users. The placement of each and every pixel at the required place is very important. New innovative designing idea, Use of proper color combination, Pixel perfect website,

Typography, etc. are to be kept in mind.

Website should be easily reponding. It should consist of optimized images & other content so that it may not take much time to open particular pages due to which user gets irritated. It should be fast & must give quick responses to the users.

6)    Search engine friendly website:

SEO work starts at the designing level only. Well skilled web designers nowadays design SEO friendly website keeping in mind all the tips & tricks to make the website easily searchable. Proper tags, metatags, headlines are used. Flash & javascript programming is used less. Frames should not be used. Such things should be kept in mind and well skilled professionals should be hired for this work.

 

7)    Content writing:

The content is very important for a website promotion. Good content attracts users quickly and it is important to develop trust in the users. Content makes a website search engine friendly too if it consist of keywords properly. All the copyright rules should be kept in mind. The content should not be copied from somewhere. It should not include defamation about any one or any organization. Copyright & trademark concerns should be kept in mind to avoid any legal ambiguities in future regarding domain name, pictures and content of a website.

 

8)    Interactive and user understandable communication

Proper communication with the users of the website is very necessary for making our business successful. In case of queries from the user, proper response should be there. Enquiry forms should be made in interactive and understandable manner. Contact Us should include proper address of the firm, contact number & e-mail address so that proper communication can be made. Nowadays Instant Chat System, Instant Messaging System, Forums are maintained to let the user know true & proper information.

9)    Development of the website:

Here design functions & operations are described in detail. Screen layouts, business rules, process diagrams and other documentation are described & the output describes the new system as a collection of modules or subsystems.

Design elements describe the desired software features in detail, and generally include functional hierarchy diagrams, screen layout diagrams, tables of business rules, business process diagrams, pseudocode, and a complete entity-relationship diagram with a full data dictionary. These design elements are intended to describe the software in sufficient detail that skilled programmers may develop the software with minimal additional input design.

10) Testing of the website:

Before publishing our work, we need to do the testing. We should get our website tested by a layman who has basic knowledge of computer and internet, observe him while navigating our website carefully so that we may know where he is finding difficulty. We should note all the points. Unit, system and user acceptance testings are often performed.  After testing we should immediately go for the changes required in our website.

11) Maintenance of the website:

Modifications done in website after implementing the idea to correct faults, improve performance and other attributes is very important aspect.

From time to time we should upgrade the technology used in our website to pace up with the current scenario in IT industry. The content and products should be updated frequently so that users of website get proper information regarding what we deliver.

I have tried to cover all the points one should keep in mind while making a website for their business. Will try to cover these points in details in forthcoming articles. Hope these points may bring success to your business for a long term.