Twimr03: Deep Thought – Ajax – Web Project Management

In past few days I have learned many things. Some of them are really stunning. Looks like innovation is flooding everywhere. I have learned few serious stuff about life too.

1.Awesome thought

“ When I was 5 years old,my mom always told me that happiness was the key to life.When i went to schools,they asked me what i wanted to be when I grew up”. I wrote down “Happy”.They told me I didn’t understand the assignment and I told them they didn't understand life.”

[CLICK HERE] 

Other than this paragraph above, there are few more things I have learned recently. Those are

• Stop your sharing spree: These days i am on sharing spree, and share lots lots of thing about myself via twitter/blogs/etc. But now the time has come to stop a bit, actually have to put a  check on what you are  going to do.
• Stop the expectations and live independent: Yep, i am realising that my expectations have risen in recent past, so I have to keep the expectations low!!! and in fact , i need to start living the life for myself.. again.

2.Cool and neat interface :

This is the interface for making skin for the HP laptops. this is so neat. Its coded in adobe flash player. These things are really appreciating.

[CLICK HERE] (takes little time to load so, please wait)

3.How to manage a small web project: a simple approach

This is a good article for managing the small web projects. Guess Its good to read if you are at all interested in web programming. [CLICK HERE]

4.Few tips about Ajax

Here are few tips for Ajax and jQuery programming.

Ajaxify your website w/ this jQuery Plug-in

Extend Google Analytics with jQuery (this one using Google Analytics API)

4.Guy who makes all my cross App talks look like a child's play:

Do you have plans to make a great bookmarklet? Do not miss this article.

5.Guideline for presenting your innovation/hack/software

This article is by Christian Heilmann. He is one the default judges in most of the hacking events like HackDay. He is sharing his experiences here, so that next time you go on stage to present your hack please remember these stuff.

Google Wave

Google wave is really stunning product coming up as open source. Its 2nd biggest thing coming to internet after e-mail. I love to share few thing via my blog.
This is 120 minute stunning video.

Then there are plenty of article all over the world to read about

• http://mashable.com/2009/05/28/google-wave-guide/
• http://technologizer.com/2009/05/28/is-wave-bloatware/
• http://www.techcrunch.com/2009/05/28/google-wave-drips-with-ambition-can-it-fulfill-googles-grand-web-vision/
• http://www.techcrunch.com/2009/05/28/what-just-happened-thursday-was-supposed-to-be-bing-day/
• http://www.techcrunch.com/2009/05/28/exclusive-video-interview-with-the-google-wave-founders/

Go read these content.. Do not miss to register yourself here http://wave.google.com , so that the moment wave will be launched you will be notified over email.
HAPPY WAVING

13 Great Online tools for web-developers (Interface designers)

As a web interface designer you might be spending plenty of time on internet.  Some time you might not be having your favourite editor or debugger with you and still you quickly wanted to develop a web page, a mash-up or a quick hack. Here in this blog I am giving you a full list of tool via which you can quickly develop your page without needing any desktop based tool.  In fact some of the tools which i am going to list down here is not even available for any desktop (windows/linux/mac).

Note: Things listed at the start may not be very useful but things at the end are really magical.

1.HTML Editor: [www.online-html-editor.de] This is full WYSIWYG editor, just type format and get the html code immediately.

2.CSS Editor:  [CSSMate] This is one of the nice CSS tool, you can change font, background,layout and get CSS code on the fly.

3.HTML Code Cleaner: [DirtyMarkup] This is, one of the must have tool. You can clean your HTML code. It helps you in removing empty paragraph and sort of things. Just visit and have a look.

4.Quick Layout Maker: [YUI: CSS Grid Builder] I love this tool a lot. This is a quick way to get a blank layout of a webpage via YUI CSS. Best way to create a browser neutral layout.

5. jQuery Function Builder: [jQuery Builder]If you choosing to use jQuery for your webpage/mash-up then use this tool to quickly come up with the function layout. This is Good because we often forget the syntax and notations.

6.Chart Generator: [Google Chart Builder]Use this one to get a quick Google chart. Nice one.

7.Regular Expression builder: [http://txt2re.com/] OMG This is awesome tool, just brilliant. Use this to quickly build a regular expression in any language. This is not only specific for web developer. This is great online tool of all developers, no matter which language you working in. I love this because,I  often work with different languages and I really hate to know that every language has different regular expression syntax.

8.YQL Console: [YQL Console] YQL is something which you find little weird at first, but once you know the power of it, you will be amazed. This is great way to create Mash-Up.
Here you type a SQL like syntax, which will be converted in to a URL, (REST URL) . This URL will fetch you data in the format you have selected (RSS/JSON/XML etc.) . You can get any data like search result from web, image. Or anything like images from flickr on even something like a very specific data from any URL. Please don't miss the HTML data source, because this can fetch you data from anywhere, using XPATH this is so powerful feature. Just enough tool to re-engineer entire web.

9.JavaScript Beautifier: [http://jsbeautifier.org/] This is a good tool to indent your JavaScript code online.

10.JavaScript Minifier: [JSMin] This is a great tool to compress your JavaScript code, minimize your JavaScript code to really really small one. saves lots of bandwidth. This is innovation of Douglas Crockford and has many implementation in other languages as well.

11.Image Compress: Smush.it™ This is really good tool, I don't know what it does, but i will compress your image well beyond your typical editor is compressing. Try it once. Good to save bandwidth.

12.JavaScript Code analysis: [JSLint] This finds bug in your JavaScript code automatically.This is another great invention of Douglas Crockford

13.Google API Playground: [AJAX APIs Playground] This is collection of working sample code which is using Google's Ajax APIs, nice and fancy way to quickly create a MashUp.

So that’s it. Enjoy creating Mash-Ups & Hack.. Online. 
Tip: Bookmark this BlogPost to launch these tools anywhere.

Twimr02: Five Useful stuff in last 10 days

This is the second edition of my Twimr series. I have started twimr series on my blog to collect various useful stuff via twitter. by tagging my twitter update with a HashTag #twimr.
Today i jus reviewed my twimr basket and I found 5  useful stuff in my basket. Lets know about it.

1. SlideShare Transcript Viewer: I keep admiring Christian Heilmann for his simple and useful innovations, This is another quick hack from him. If you frequent slide share user, then this might be useful for you.
2. Gesture recognition in GWT and IT Mill Toolkit: There is lots of innovation happening around the world using Wii Remote Controller, This might, inspire you to create next killer app using this.
3. Third item in my basket is a real funny thought (was set as status of gTalk by one of my friend) That is “Never hold your farts in. They travel up your spine, into your brain, and that is where shitty ideas come from.”
4. Mashup Generator: This is a cool web based fully drag and drop supported mash-up creator written by a Korean guy. Nice stuff!
5. 8 Cool Tips & Tricks to Make Most Of Google Chrome: Dont you think, title itself explaining everything, :) I don't have much to say!!

Fix JSON based Ajax in Chrome

I love JSON, because its very easy to work with JSON than working with XML. If you don't know what JSON is please read in detail here http://www.json.org/.
Here i am discussing the use of JSON and the JSON retrieval method for AJAX. This method does not work in Chrome, because chrome maintains a JavaScript cache. I will discuss the fix of this problem as well.
Lets take an example code, which will grab data from twitter search and it will display on your page.

<html>
<head>
<script>


   1:  
   2:     function getsearch()
   3:     {
   4:       var search_url='http://search.twitter.com/search.json?callback=mycallback&q=';
   5:       /*search_url will fetch you JSON with callback name as mycallback*/
   6:       var query='';
   7:       query=document.getElementById('query').value;
   8:       search_url=search_url+query;
   9:       var scrpt_div = document.getElementById('script_div');
  10:       scrpt_div.innerHTML = '';
  11:       var scrpt_ele = document.createElement('script');
  12:       scrpt_ele.src = search_url;
  13:       scrpt_div.appendChild(scrpt_ele);
  14:       var result_div = document.getElementById('result_div');
  15:       result_div.innerHTML = 'loading....';
  16:     }
  17:     function mycallback(data)
  18:     {
  19:       /*write code here to do the JOB*/
  20:       var html='';
  21:       for(var i=0;i<data.results.length;i++) 
  22:       { 
  23:         var tweet=data.results[i].text/*aah.. luxury of jus using the data, no parsing*/
  24:         html=html+tweet+'<br/>';
  25:         
  26:       }
  27:       var result_div = document.getElementById('result_div');
  28:       result_div.innerHTML = html;
  29:     }
  30:   
</script></head><body><div><form  action="javascript:void(0)"> <input id="query" type="text"></input> <input type="submit" onclick="getsearch();" value="search"></input> </form> </div><div id="result_div"><!--Here your Result will appear         --></div><div id="script_div"><!--Here your JSON script will come             <script src="http://search.twitter.com/search.json?callback=mycallback&q=hello">      </script>    --></div></body></html>

 Get this code in plain here .

In this code above, we are simply embedding a script element in the DOM whose src attribute will be the URL to retrieve JSON data (e.g http://search.twitter.com/search.json?q=hello’.) The URL will contain the call-back so that retrieving the JavaScript code for this element will result in calling your call back function and hence you will be able to use this JSON data in your call-back function.

The above code is hosted here, so try Demo1

If you try this code in Chrome browser, for a same query it will not work for the second time! Reason is Chrome does smart caching of JavaScript. So if it will find that the new script tag has same src  URL, it will not include that for second time,  and hence it will not work second time in chrome.To fix this problem, I have added in extra parameter in the JSON query URL. which will be a fake counter.
Instead of JSON URL like this

var search_url='http://search.twitter.com/search.json?callback=mycallback&q=';

you can modify by adding extra query parameter which does not mean anything to server. like this :

var search_url='http://search.twitter.com/search.json?callback=mycallback&count='+fake_counter+'&q=';

Increase the fake_counter on every call. So that new URL will be different from the previous one. This will fix the problem in chrome.


Now this fix code in PlainText is here and Demo2 is here

Twimr:Lets start this series

Twimr- stands for: ‘Things Which Ignited Me Recently’.

This is a new blog series i am starting today. This is first post of this series.  Goal is to post this series everyday, and mostly collect data via twitter, with a hash tag ‘#twimr’.

Now, here are the few things which ignited me recently.

• School of Rock Guitar Lessons: Jack black trying to train kids. See the passion he has in Rock. At least the way he is acting. I love this guy and every time i feel i am lacking passion in me i watch this video.
• Self-explanatory broken arm slings: nice slings. so creative!
• A Better Javascript Memoizer: Good way to optimize your JavaScript code. though this technique is old, and known as dynamic programming since ages but revisiting was fun.
• This is another creative stuff, path we follow!!
• Keep It Simple, Stupid: Nice article, which reminds you to the basic of keeping the things simple. gr8 lesson

Thanks watch out for more..