You only need 2 tools, Notepad++ and Zen Coding Extension. First of all, quickly download a copy of portable version of Notepad++ here

From the Menu Bar, navigate to Plugins > Plugin Manager > Show Plugin Manager

Scroll down to the bottom until you find Zen Coding – Python

You will have to restart Notepad++ after the plugin is installed.

Now you can use shorthand HTML that is supported by Zen coding to code html like

• ul turns into <ul></ul>
• div#abc turns into <div id=”abc”></div>
• p.indent10 becomes <p class=”indent10″></p
• ul>li*3>a becomes <ul>
      <li><a href=”"></a></li>
      <li><a href=”"></a></li>
      <li><a href=”"></a></li>
  </ul

Watch how this small code snippet like html:xt turns into

Visit the Google Code page for Zen Coding for a .

You can try an online demo of zen coding editor here.

She was astonished about how we are going to work if you live so far. So, I tried to explain her every bit of how freelancing works and how outsourcing works. I’m not sure about how you guys deal but this is how I deal with my projects in order to save myself from any swindlers and as well as maintaing trust and a healthy relationship with the client.

Firstly there are two methods of payments, Hourly and Fixed. I completely rely on fixed payment mode and never do hourly jobs. The advantage is that the client cannot see you, so if you are billing him by hours, he cannot really see you so the client may have a sense of insecure feeling of how many hours you actually worked on it. It can also lead to disputes later. So I work on a fixed price per project basis and payments are done in phases.

So the next thing is I sit down with client (I mean voice calls and video conferences here) and start discussing the project and the requirement. Once all the requirements are analyzed, all the features are sealed and the total price of project is negotiated.

Tip of the Trade
Never start a project until you get an upfront fee.

Dont charge high upfront fees, but this is something to save you from those complete rip offs.

As soon as I get the upfront payment I start the work. I divide the payment cycles in 3-4 phases.

During the design phase I keep updating the client by phone or emails. Once I finish the mock ups of the designs, the designs are shown to the cliet and during the revisions are done to the design, a second phase of payment is made.
After this the design is selected by the client and the development phase begins.

Again during the development phase, the client is updated regarding the status of the project by phone or email. once the development process has been done, the client is shown the demo on a staging website and another cycle of payment is done.

Any changes which the client wants are done on the staging website. The client is given backend access to the staging website and all features and training touse the website is given.

Then the last payment cycle follows and the site is moved from staging environment to a live website. All the deliverables (designs and coding) are then sent to client. This is how outsourcing works for me.

jQuery.each(jQuery.browser, function(i, val) {
if(i=="msie" && jQuery.browser.version.substr(0,1)=="6")
alert("Do stuff for IE 6")
});

• They are using a public PC which as the first version of Windows XP
• Or Inadequate Computer knowledge to upgrade or install other browsers
• Or Are lazy and probably not intamated about the buggy and insecure web browser.

What ever the case may be, the problem is that my website has 1-2 rendering issues with IE6. Though I use a separate stylesheet for IE6 but I want to end up dealing with this IE6. Working with IE6 is a huge burden. So I wanted a simple jQuery powered modal box to pop up and tell them if they are using IE 6.

This is a simple function that can help you get the version of your browser. It returns the browser version for Internet Explorer and for others it returns -1.

function vIE() {
// returns version for IE or -1 for other browsers
return (navigator.appName=='Microsoft Internet Explorer')?parseFloat((new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})")).exec(navigator.userAgent)[1]):-1;
}

Thanks to Marc Palau who commented this at The Future of Web

You can also detect Internet Explorer using jQuery

Pagination on blogs is quite in common. But an AJAX powered pagination on a cool themed blog is the apple of my eye. In this tutorial we are going to see how to change your old styled pagination into an AJAX powered dynamic pagination.

In this tutorial I assume that you have basic knowlege of editing HTML, PHP and Javascript. I have used jQuery for handling ajax and the modified code for pagination from Lester Chan’s WP-Page Navi

The tutorial will consists of creating a basic pagination using PHP, jQuery and editing some template pages. Make sure you backup your ooriginal theme before trying this.If you arent able to follow the tutorial download the zip file at the containing the required files. (including css style).

Step 1

Firstly, open up the index.php and/or home.php if it exists. Wrap the div that holds all the posts with a div of id #ajaxcontent. And add <?php pagenavi(); ?> just before the end of the content div.
Will look something like this

<div id="ajaxcontent">
<div id="content">
<?php if (have_posts()):
while (have_posts()):
the_post(); ?>
.......
.
.
.
.
<?php 
endwhile;
endif; ?>

<?php pagenavi(); ?>
</div><!-- end #content --></div>
<!-- end #ajaxcontent -->

Step 2

Create a new folder called plugins in your current template’s directory. Download the zip package containing all the files. Copy the pagenavi.php and pagenavi.css file into the plugins folder in your current template’s directory.

Step 3

Now just copy everything inside the #ajaxcontent wrapper(Make sure you dont include the ajaxcontent wrapper div too.) and create a new file called wp-ajax-post.php in your root directory and paste it there.

Step 4

Add this code on top of wp-ajax-post.php

<?php
require ('wp-blog-header.php'); query_posts('paged=' . $_GET['p']); $paged = $_GET['p'];
?>

Step 5

The last thing to do is, open functions.php in your template directory and include the pagenavi.php plugin like this

 <?php include("plugins/pagenavi.php"); ?> 

So that was the tutorial, check out the working example/demo on the home page of my blog Small Business and Technology Blog

Download Ajax Pagination Files

• <section>

  A section tag can be useful to provide something similar to a section of a chapter of text, or a book. Talking about blogs it can act as a wrapper to all blog entries on current page.

• <header>

  Please ite that this is not same as the <head> element.  <header></header> can be useful to wrap up all the header elements like logo, searchbox, subscripts etc.

• <footer>

  Footer of the page. This where all your copyrights related infoa nd other sitelinks goes. Similar to header.

• <nav>

  The nav element can be used to enclose the menus that you have got on the page.

• <article>

  The article tag can go inside the <section></section> tag. It depicts the tag for your article. For example each blog post can be wrapped inside an <article></article> tag

• <aside>

  The aside tag can be used to put up any other notes etc that you have to display. In other terms we can also use the <aside></aside> tags to create sidebars for your widgets.

I have writen about only a few tags here, however if you want to check about all the new tags then please visit http://www.phpguru.org/static/html5