Sample   Leave a comment



Posted April 6, 2016 by jsusmer in Uncategorized

Tagged with

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 ,

An apology   Leave a comment

I know it’s too late to tell this, but, now its light and I could see it clearer and the fog created by those foolish developers have moved. I have set my sail high and am running freely in the WordPress landscapes like a small child with his favorite toy in his hand.

I’m feeling it’s power that will push my abilities to the heights that will enable easy web development. I’m planning to push WP to it limits and some day will post all what I have experienced during this!

Sorry WP, I misunderstood you these years!! Better late than never 🙂

Posted January 21, 2012 by jsusmer in 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 #3): Usability (Continued)   Leave a comment

Brining in the usability into your projects is very important. We already came across the areas that are expected to be ‘usable’. That is originally a never ending list, so please work on it to be in new areas that are relevant to your project.


(This is a broken part, will rewrite it once coming back to the same mental stat 😐 )

[Advice: If you are writing anything, make sure you comeback to it while you are in the same mental state, else the flow will be broken and may loose the entire topic]

Posted January 6, 2012 by jsusmer in Uncategorized

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