Archive for the ‘Lesson’ Category

jQuery fun #1: Number puzzle   Leave a comment

jQuery is popular for the effects they produce. May be most web developers use the download and manipulate method to create the desired effect. Designers on the other hand are scared of terms like programming, coding, logic etc. In most cases it’s the ignorance of these people that blocks the creation of original code. From scratch designs are good when you go for tailoring your needs.

As usual to learn this we need to try it. The following will surely inspire you in getting interested for writing original codes.


<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Demo</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
  //Puzzlw logic
  var pCells = $('.pCell');
  var Cur16 = [3, 3];
  pCells.bind('click', function(){
	  var x = parseInt($(this).attr('id')) - 1;
	  var now = [Math.floor(x/4), x % 4];

	  if(!cmpArrays(Cur16, now)){
		  var lCell = [now[0], now[1]];
		  if(cmpArrays(Cur16, lCell) || 
				  cmpArrays(Cur16, [now[0] - 1, now[1]]) || 
				  cmpArrays(Cur16, [now[0], now[1]+1]) || 
				  cmpArrays(Cur16, [now[0], now[1]-1])){
			  pCells[Cur16[0]*4 + Cur16[1]].src = pCells[now[0]*4+now[1]].src;
			  pCells[now[0]*4+now[1]].src = "/no/16.png";

		  	  Cur16 = now;
  function cmpArrays(a, b) {
	   if (a == b) {
	       return true;
	   for (key in a) {
	     if (a[key] != b[key]) {
	         return false;
	   return true;
  //puzzle end
<table width="100%" height="100%">>
<tr><td align="center" height="600px" valign="middle">
	<td><img class="pCell" id="1" src="/no/1.png" /></td>
	<td><img class="pCell" id="2" src="/no/2.png" /></td>
	<td><img class="pCell" id="3" src="/no/3.png" /></td>
	<td><img class="pCell" id="4" src="/no/4.png" /></td>
	<td><img class="pCell" id="5" src="/no/5.png" /></td>
	<td><img class="pCell" id="6" src="/no/6.png" /></td>
	<td><img class="pCell" id="7" src="/no/7.png" /></td>
	<td><img class="pCell" id="8" src="/no/8.png" /></td>
	<td><img class="pCell" id="9" src="/no/9.png" /></td>
	<td><img class="pCell" id="10" src="/no/10.png" /></td>
	<td><img class="pCell" id="11" src="/no/11.png" /></td>
	<td><img class="pCell" id="12" src="/no/12.png" /></td>
	<td><img class="pCell" id="13" src="/no/13.png" /></td>
	<td><img class="pCell" id="14" src="/no/14.png" /></td>
	<td><img class="pCell" id="15" src="/no/15.png" /></td>
	<td><img class="pCell" id="16" src="/no/16.png" /></td>

Next step? Write the shuffle code for this

Posted February 25, 2012 by jsusmer in Lesson, mind waves

_SESSION fun #1: Visit History   Leave a comment

Practically SESSIONS have infinite serious uses. But, being serious is one part, being ‘interesting’ is more serious than that. Usually people won’t agree to include thee types of weird sections in their pages, since your browser will always decolorize the visited links! I thought it might get user attraction and they will pay attention to see their progress in finishing up reading web site contents. Anyway this is fun and those who have just started understanding SESSIONS; this will be a good part to play with … hopes they are also not in the lat minute to production!

The code does this:

  •  Tracks the current and past posts
  • Displays a list in the last visited order

Funny part, it will never show if you ever been here before, simply removes the current page from visited pages list, so visited will never know that they have been her once!


// Place this in the single.php

$visited_pages = $_SESSION['vpages'];
 $last_visited_page = $_SESSION['lpage'];

 while ( have_posts() ) : the_post();
   $the_title = get_the_title();
	echo "<h1>".$the_title."</h1>";
	echo "<h2>".get_the_excerpt()."</h2>";

	 if($last_visited_page != $the_title){
     	    $already_pages = explode("~", $visited_pages);
     	    $visited_pages = $last_visited_page;
     	    foreach ($already_pages as $item){
        	    if($the_title != $item && $last_visited_page != $item) :
        	      $visited_pages .= "~".$item;
    	   $visited_pages = $last_visited_page;
endwhile;	 }
$_SESSION['vpages']= $visited_pages;
$_SESSION['lpage'] = $last_visited_page;

  echo "<BR>Visited Pages:<ol> ". preg_replace("/([^~]+)~*/", "<li>$1</li>",$visited_pages) . "</ol>";


Like always I think if you like this one, try to build one pie chart that shows how many posts are read and how many are left! You can use the Google Chart API to build the graph.

Posted February 4, 2012 by jsusmer in Lesson, mind waves

Tagged with ,

To be a programmer (#4): Logic   Leave a comment

It’s always been difficult to tell how to develop logic. And hopefully I will not try to do the same and end up looking lie a joker. But, “To Be a programmer” series will have to eventually face the same challenge.

To be a programmer one is supposed to develop logics that will tackle many situations that pop up during the conversion of requirements. In this case most people will recommend forgetting the usability considerations we reviewed during past posts. Should you accept this or not is your concern. But, being in some range of usability will surely help you in long run.

Are you confused where the usability comes in the context of logic building? No? Then it’s OK. It is something that deals with the review of thee logic that you created to solve some problem. This always happened when you need to improve the logic or need to fix a bug that you (or your Tester) have dug out. So be usable for yourself,

I want to interchange values in two fields (or variables, storage location, container or register or ….). How do I do it? This is where the logic comes in. So many people used to think it by aligning the problem to a physical situation. But, not always easy to spot parallel physical situations, still it stays the best though aid so far, at least for the beginners. Now I have refreshed your programming class memories, I know that you realized the small logic we need to solve this swapping problem and have recalled the salt and sugar in the two containers and the empty bowel that you have purchased to try this logic out.

This was very easy, because you have heard this hundred times and I had just tried my luck by choosing the same old problem. Now that you have logic, will you be recalling the algorithm that will list the simple instructions to solve this problem? Not exactly, right? Oh, OK, I got it, why we need to write it down when it’s just 3 lines to implement in a coding language. Fine, I too don’t want your 3 lines.

Let’s go back and ask: I want to sort the price list in ascending order.   Ha, right if it’s in a database you can ask the server to list it in order by adding the keywords to the query language statement. Bad luck, it’s not in a database. I will cal the sort function and will give me the list in order. Totally lost, there is not library available to ‘Call’. So, do you really want me to write the logic? If you can I’ll be happy, if you don’t I will also be happy. Since its one less logic maker around and I can get all the credits!!

From early days of programming language evolution, authors has tried to keep the logic out of the language, and allowed developers to build logics in to functions and keep it in the accompanying library. There must be some reason for this, think on it, I bet you will get convinced on why you should be a good logic creator thus become a skilled problem solver.

SO you are convinced that you need logic creation skills. And will ask, how do I learn it? My point will be; everyone have some level of logic skill, otherwise you cannot live in this complicated world; one need to sharpen the skills. That will need either self trial on logic building or by reading logics written by others. SO go on and try out some and read many.

Posted January 7, 2012 by jsusmer in Lesson, mind waves

To be a programmer (part #2): Usability   Leave a comment

In the previous post I have mentioned about systems and the process involved in designing and developing systems. What you learned based on it is expected to help you in becoming a good programmer in the sense of requirement analysis and technical architecture. A good functional specification is only one part of developing a good system. Of course, the technical side also should be good, but it’s just the concern of the developer. There is another key factor which the user is really concerned on. I will try to guide you through this new interesting area.


Why is it always felt that the giants like Microsoft, Apple and Adobe are the only ones who can create popular applications or systems easily? Why reviewer gives 5 starts to some unique products whose vendors are not event listed in NASDAQ? Why we tempt to use some ugly looking software to convert video files or documents to PDF?


Do these ring any bells? Yes, it’s not just the requirement or technology that drives users in for these soft tools; it’s their usability and uniqueness.


Usability seemed to be the most prominent factor that attracted me to some software tools. From the beginning of my DTP life I havebeen pulled to tools from Microsoft, Adobe and Corel. These tools gave the best inhabitable environment in the DTP world. Some people have argued pointing to some specific features that some other tools offered, but, that was not thought as a convincing one compared to the usability of the tools I was happy with.

Some features that are very friendly

  • on a new line in MSword type in a asterisks followed with a space and a statement, then press enter, a bulleted section will be automatically started
  • Try holding the Alt key while (drag) using the move ore select tool in Adobe Illustrator, you will get duplicate object. Pressing Alt key while applying transformations will bring duplicates and also bring repeated actions, this will help you create easy figures, specially while drawing flowers
  • A combination of ruler tool and arbitrary rotate menu command will help you easily correct slightly angled photos. The ruler will automatically enter the correct angle to correct the error, yes, this is in Adobe Photoshop


In the same way command mode tools like greps, sed, awk, etc. have penetrated into my systems only because of the usability and the unique simplicity. If you have ever needed to work with text and patterns you should try these tools.


Now the real tough job is: how to bring the Usability in? The easiest method is to be in users shoes and walk along. This option has many drawbacks – not exactly a result issue – the most important of it is the domain knowledge of the designer. Not all systems are build for expert robots, and we cannot tell that the systematic process will be followed, if that was the case we must need no input forms or UI or error checking, so we are in real world and people are looking for easy options to do this fasted and effectively and hopes to make les mistakes.

Usability comes at following interactions:

  1. While entering repeated or bulk data – here users always want to do some way out by expecting import options or default values
  2. Cross verifications – users usually gets stuck with data that are missing in part. Let me explain, if an entire record is missing that will be easy to find out, but when a specific field from linked information is missing or is incorrect, digging it out will be a real challenge. So people expect some data mining. The most popular activity now in air is reports – some times lots of them that you may need to add a big description to remind you what this report will help you find out.
  3. Moving around – can also be termed drilling down information. Here users expect a definite flawless flow from different levels. Usually this is something related to the visual presentation of the information. An attractive easy to use ‘navigation’ will attract users to se the system.
  4. Configure or setup – from a small monitoring script to expensive software suites require configuration before it can be used once. If a configuration process is too complicated and is not well documented users will try to avoid using such systems – or the developer/implementation team will need to respond to huge number of support calls.
  5. Migration – may be from an older version or from a manual or entirely different system. In both case the system architect must try to minimize the hiccups. Terms like backward compatibility, seamless migration, auto upgrade, etc. are very catchy for users and their IT department.
  6. Notifications or Errors – the best usable notification messages are those that end users worry about the issue. The worry can be ended by;
    1. Pointing out the exact reason for the notification
    2. Suggesting a recovery option or a remedy
    3. Pointing to the exact help (support call or help document)

These messages are to be constructed with an aim to help both the user and the developer. All message should have connected reference number that will help the developer to get to the root cause, this usually saves hours of debugging efforts.


Posted November 19, 2011 by jsusmer in Lesson, mind waves

To be a Programmer (#1): What is a system?   Leave a comment

System is conceptually similar to a machine, just that there are no physical of its own. Yes, we are talking about software systems. A machine is that reduces human effort — physical — like a press or typewriter. Software systems or simply computer applications or software are built to reduce information processing effort, usually while dealing with huge amounts of data.
A pessimist may say that systems are tools to hide human incapability. Whatever definition we put, systems are helping us in the way they are built for.

As a programming student one must know the effort that we are trying to minimize by creating a system. There are many ways that a system can be created. Mostly,

  • create one from scratch
  • combine some existing systems to deliver the required feature
  •   or, customize an existing one

Based on the selection we make, the effort will be different that you, as a programmer, put in.

To get the maximum output and flexibility, and you have plenty of time, building from scratch is the best option.

If you have no time and what the easy way out, sacrificing flexibility and control to the highest level, you can go for integrating existing systems in some way to meet the requirements. This method demands a good knowledge of the ingredients that you are going mix to cook the recipe.

If you are in a mood where the off the shelf system needs minor kicks and slaps, and you really know where to apply them. Go for the customization. As in the case of integration method, this ways also needs you to have the location maps and a good compass, otherwise you will be lost in the code jungle. This method is gaining popularity because of the explosions in Open Source Software. Even though not all open sources are free, you can secure the code by paying the cost and start digging around to make it yours.

A programmer needs to do (or be?) SAD (System Analysis & Design) to some extend. This part of system evolution brings in the feel of the size of effort that we are going to ease for the target audience. Now, how good you are in this will decide how effective the system is going to be, eventually how proud you are going to be. A bad execution of this phase will bring SADness into your work. How to do an effective SAD is up to you, there are many guidelines that you can follow, but you should apply and digest it correctly.

It’s usual that people tend to ask which technology I should use, what programming language to opt, what process should I follow, etc. There are no easy answers for this. The answers always depend on the effort you are going to ease (in short we can call it ‘the requirements’). The destination is important, how comfortable the journey will depend on the money & time you are going to spend for it. The thumb rule should be “what am I having at present to tackle the issue at hand”. It may not be always the best rule in all cases, but it’s an effective way to control the spending.  

I suggest you read on these topics and make an understanding of the standards before coming back to read the next part of this series