In web application development, that is just one thing. You need to know about lot more things before you can consider yourself successful.

So, if you know them already that’s good, you don’t need to read any further otherwise continue reading to know why each of these skills are important for you(the web developer).

Here are the skills

1. the structure : HTML
2. the presentation: CSS
3. the behavior: JavaScript

With these three skill you have ability to become the super cool static website developer or a front end developer

1. the database: SQL
2. the server-side language : PHP( other options are JSP/ASP/PERL/RUBY choice is yours, as all the fight for best happens here)

These two skill will make you a web developer.

All five of these skills will make you a most prized web developer, in your organization.

HTML

You think you know HTML, think again. I have been interviewing lot of people, they have all rated themselves nearing 7-8 out of 10, whenever I asked them to rate their knowledge of html. Every time I tried to verify their claim, they came down to 2-3, reason is simple, HTML is very simple and everyone thinks they can bluff their way through, After all what is HTML, just tables and forms isn’t?

Well you are wrong, HTML is the one of the most important skill that you should have, you should know HTML better then you know your server side language, why?

Simply because your server side language is optional, but HTML is must, even when you dream about a web page. It gives your website a structure and layout. This is what an end user see’s and care about. You don’t know HTML, you can’t fix the strange behaviors that you see in you website.

Without proper layout, you site/application is nothing. With proper use of HTML you can not only create most accessible websites, you can also create a website which will look good in absence of css and will work without javascript.

So go and revise you HTML again, and remember just know is not enough, you have to understand where to use what.

CSS

CSS is used to give the look and feel to your website. You as a web developer need to know and understand how it works, and how you can simplify the html layout’s so that it becomes manageable. Design is what your users/client sees.

On the basis of your sites design, your ability is judged initially.

CSS is easy to learn, but it’s application is another story, all thanks to browser incompatibilities. So to make your website look good in all the browser you need CSS. Just knowing CSS is not enough, you have to understand it’s application also.

JavaScript

JavaScript is not just for validations as many of you think, it is what gives you ability to do some nifty things with your webpage(like lightbox, rating’s , ajax).

It adds behavior to your website, makes it interesting and improves the users experience. If you have still not chosen any framework, do it now. jQuery, prototype, YUI, Dojo are some of the interesting frameworks that make developers life easier.

If have master all the three skills above you can already consider your self above average web developer even if that person has 10 years of experience. Remember we are in IT industry. IT is Information Technology, where Information aka Knowledge is important.

SQL

The most neglected in the bunch, when this is the second most important skill that a web developer should have.

Why? what a question, we are building web applications that almost always relay on database, If you don’t understand the SQL how do you propose to get the data fast enough from your database? Almost all the websites can be distilled down to simple SELECT,INSERT, UPDATE operations. If you can master them, you can dictate your terms.

When I say SQL I don’t just mean queries but also the database schema and intricacies of database itself.

PHP

Before you get up in arms against me for suggesting PHP and not your favorite language, understand this, I am talking about web applications only, and their is no other scripting language which is so easy to learn and program with. At the same time, it provides functions for everything you can think off that is required in a web application development environment.

Please spare me the talk about java and .net they are platforms and/or programming language. If you understand “you should not use sword to do the job of needle and vice versa” then you know what I mean.

Their are many frameworks that you can use. Also their are many ready to use open source packages that you can use and adapt to your needs, you don’t need to start from scratch all the time.

If you have read till here, then I would love to know your views on these skills and others that you think are important for a successful web development career.

For quite some time now I was looking for a plugin which is lightweight, and can show images in lightbox like effect, in my blog.

The effort of creating a javascript functionality for that was putting me off, then few days back I saw the prettyPhoto, it is a jQuery based plugin for creating the lightbox effects for the images.

This made my job pretty easier, now I can have my lightbox effect, all i needed to was convert it into a wordpress plugin. So I did some modifications to the prettyPhoto to suite my needs, and here is the result of my work. Check out an working example below.

How To Install

1. Just download the akwpLightbox plugin, akwplightbox.zip.
2. Extract akwplightbox.zip into akwpLightbox folder.
3. Upload this folder into ‘wp-content/plugin’ folder.
4. Now go to plugins section in admin and activate the plugin

Now, enjoy the lightbox effect.

How To use

Next time when you are adding a image in the post or page, just remember to link you image to full size image, or to image that you want to show in the lightbox. You may want to check “title” attribute of anchor tag, this will be displayed below the image as caption in the lightbox.

Credits

I will say all credit goes to Stephane Caron for creating simple to use prettyPhoto plugin that made this possible.

If you have any questions, suggestions or issues just leave a comment below.

It is a modal pop up box. It can be used to display any url as popup box.

It’s simplicity lies in the fact that, we can use it to display forms etc, and then submit the forms, something like I used it for thesoko login box.

Here is an screenshot of akModal in action.

I had created this when I didn’t know enough javascript to use AJAX etc, for submitting a form. I also didn’t want to write very complex javascript for something that can be easily handled using a simple iframe.

Anatomy of akModal Box

Features
• Easy to create popup box
• No AJAX required for submitting forms

Dependencies
• DimScreen plugin(for blacking the background)
• Dimensions plugin(for center alignment)
• Interface plugin (for puff effect)

How to create it
This is the simplest process of all; you need to include all the dependencies along with akmodal.js file. Then just call
$.showAkModal(navurl,title,box_width,box_height) function onclick event.

navurl: it is the url to show in the popup box.
title: is the title to show for pop up box.
box_width & box_height: it is width and height of the pop up box that you want to show.

For example,

<a href='test.htm' id='ak_sign_in' onclick="$.showAkModal(this.href,'Sign In',230,170);return false;"> sign in</a>

How to destroy it
There are two functions that you can call from inside the iframe, to remove the pop up box.

1. First function is akModalRemove(), this will simply remove the popup box from the view, as it does when you click the close button in title of popup box. To use this function from our Iframe window just call this function like this

parent.$.akModalRemove();

2. Second function is akModalHideAndRedirect(redirect_url), this will remove the popup box and redirect the page to url specified by redirect_url parameter. This function is useful when you have sign in forms etc, where on successful login you want to show the user, a bit customized page. To use this function from Iframe window just call this function like

parent.$.akModalHideAndRedirect(‘http:amiworks.co.in/talk’);

How to customize it

Just goto line number 35 in akmodal.js file, and change the styles etc as per your requirement.

If you need more information leave a comment below.

Update(5th July 2008) : released version 1.1.0.

• This version removes the error that was due to dependency on interface plugin.
• Updated to use dimensions plugin 1.2

Version 1.0 can be downloaded from akModal.zip

I faced the same problem, with my akWpUploder plugin. I googled but could not find anything interesting, or should I say, simple way of adding ajax to my plugin. So I dig into the wordpress code base for solution, as auto-saving feature of wordpress was one such thing that I wanted to use.

There I found what I was really looking for, a very simple way of using Ajax to get things done.

Problem: How to use WordPress functions in you plugin when using ajax

Let me explain the problem first, while I was working on my plugin I needed to insert the photo data into the database. To do this I needed to use wordpress database functions, but the way I knew to use ajax(i.e. creating a separate php file which handles the ajax request), it was bit difficult and messy. It would have involved either making a direct connection with the database or including the wordpress config file.

I was not happy with either of these options, I needed a simpler solution.

Solution: admin-ajax.php and action hook wp_ajax_

As I mentioned earlier I dig into wordpress to see the way WP uses ajax to save the posts.

What I found was this code.

      default :
	do_action( 'wp_ajax_' . $_POST['action'] );
 	die('0');

So, now all I needed to do was send all my ajax request to admin-ajax.php provide an ‘action’ and wordpress will call the function attached to that hook.

Neat, isn’t it? Now I can keep my plugin simple.

Implementation: an example

You might be thinking “It’s ok, but can you show me an example?”

Yeah, sure I will.

First we take care of javascript, here I am using Jquery, the easiest javascript library available.

1. Let’s include jquery:

   <?php
   echo'<script src="'.get_option('siteurl'). '/wp-content/plugins/jquery-1.2.3.min.js"> </script>';

2. Now the code for ajax request: their are two things to notice
   1. the ‘action‘, which contains the value to be used with ‘wp_ajax_‘ to make a wordpress hook.
   2. the other is ‘cookie‘ which contains the cookie required to authenticate you admin access to admin-ajax.php.

   <script>
    $.post(siteurl+"/wp-admin/admin-ajax.php", {action:"ak_attach", 'cookie': encodeURIComponent(document.cookie)},
    function(str)
   {
         alert(str);
   });
   
   </script>

With this the javascript part of the things is over.

Now we will take care of handling this request in our plugin.

1. So first we will create the function that will respond to ajax request. you should notice that i have used the exit at the end this is because i want the script to end here, other wise i will get ’0′ with my data.

   <?php
   function ajaxResponse(){
   global $wpdb; 	global $userdata;
   get_currentuserinfo();
    echo "Hello ". $userdata->user_login;
    exit;
    }

2. Now we need to tell wordpress about this function, so we will attach this function to the Hook that we created, by providing the action parameter in the javascript code above.

    add_action('wp_ajax_ak_attach', 'ajaxResponse');

That’s it we are done.

Now that you know how to use ajax easily while writing the your plugin, go ahead and use it. Download code for this demo plugin which shows the whole operation, and can act as template.

Note: admin-ajax.php only allows admin users to post the data, which means this can only be used on admin area of wordpress and not in the general scenario. For using ajax in other situations please check Using AJAX with your WordPress Plugin tutorial by Ronald.

This is the plugin based on jEditable plugin created by Tuupola and Dylan Verheul. The purpose of create this plugin was to specifically solve the problem that i was facing, ie to give my users option button to save and or cancel, instead of using enter to save the content.

I will not say that akeditable is any improvement over jEditable, which is far better then what i have done. akeditable was meant to be used with situations similar to the way i have used it in celsias project or people section.

It works in exactly same fashion as jEditable, ie you click on the text to edit or a link and it converts the area into a from. Check out the live demo.

How To Use It

1. It is very simple, just call the akedit on click function of the element you want to convert in to editable area with the ID of the element.

   <div id="editme" onclick="akedit('ajax.php?mode=eg1','editme',{
   type : 'textarea',
   name : 'usercomment',
   width: '232px',
   height: '80px',
   submit:'save'
   });"> THIS IS EDITABLE ON CLICK
   </div>

2. Parameter to akedit function is the url: where you want to post the form data, the id of the element you want to convert into editable area and settings as hash like the value for submit button and other stuff.

   akedit('ajax.php?mode=eg1','editme',{
        type : 'textarea',
        name : 'usercomment',
        width: '232px',
        height: '80px',
        submit:'save'
   });

3. That’s it you are done.

Processing On Server

1. you get the post data as
   1. id, the id of the div you were editing and,

      id	editme

2. <name that you specified in the setting> , which contains the value that user typed in the textarea or textbox.

   usercomment	THIS IS EDITABLE ON CLICK i added this

Update(25 August 2009):Released the new version 1.1 of the plugin, and also made it compatible with jQuery 1.3.x

It is built using jquery framework, UI library and youtube API. It shows how easy it is to build cool application with jquery.

Check out the Tubespy here . Read more about Tubespy here.

This is an early alpha release and it works only on firefox now in Beta and it works with both firefox and IE. check out the demo here. You can download the plugin from http://code.google.com/p/akslideshow/downloads/list .

It has been tested with jquery 1.2.3.

How To Use It

1. first include the stylesheet

   <link href="akslide.css" rel="stylesheet" type="text/css" />

2. now include the jQuery and akslideshow.js file

   <script src="jquery-1.2.3.min.js" type="text/javascript">
   </script>
   <script src="jquery.akslideshow.js" type="text/javascript">
   </script>

3. We will initialize the gallery now, for that we need to pass three parameters
   1. an array with list of image paths to be used for slideshow

      var imglist=new Array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg');

   2. two more arrays with description and title in same order in which they need to be displayed.

      var caption=new Array('A Dove Amongst the Host?','Natura','the same blooming tree again','Refreshed','P1000018');
      var titles=new Array('seeks2dream','fabrizio.pincelli','aatual666','seeks2dream','munness');

   3. and a code to initialize the slideshow

      $(function(){
      $('#gallery').initSlideShow({img:imglist,cap:caption,title:titles});
      
      });

4. finally we need to have a div with id specified above for holding the slideshow.

   <div id="gallery" >HERE GALLERY WILL COME</div>

Still To Do

1. make it work in IE 6 and above
2. sliding needs to be smooth
3. center the image properly, instead of left or right alignment

In other words, if you are beginning with javascript and looking for a javascript library that can help you jumpstart your value as javascript developer then look no further then jquery.

it makes advance javascript programming an easy task for beginners also.

This is the presentation that i gave at Gnunify’08.

here are some of the references to kick start your jquery journey.

1. jQuery Documentation
2. jquery tutorials for designers
3. jquery crash course
4. 50+ amazing jquery example   (could not help but add it)