Yahoo SDK & YUI are simply awesome!!!!

I must appreciate the fact on how much Yahoo gives freedom and power to developers through libraries and toolkits.

I am currently using YUI and Yahoo SDK for building a small application and I am highly impressed with the libraries.

For sure Y! are doing great job, making our life lil more simpler

I have been using some libraries like Rico, scriptaculous, Dojo and trust me when I say, YUI stands tall here.

If you havent tried it yet, get yourself hooked on http://developer.yahoo.com. Loads of tutorials, code, demos. For FREE

Try it now…

Cheerz
Shri

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Im coming to Yahoo Open HackDay!!!! R u?

Yup, I am coming to Yahoo Open HackDay. I got a confirmation from Yahoo about this today.

So, now what next? Think of an idea we can build during those 2 days and enjoy it.

I have thought of a small widget kind of an application called “Mini-Yahoo”

If you also have got Invitation for HackDay, please drop me a mail. we can discuss on the idea and build it.

CHeerz
Shri

PS: Did I tell you, hacking in Taj Residency could really be fun!!!!

30 Day Project : Starts Today!!!

“Leave complex problems to BIG people, try to solve simple-small issues”

Yes, thats exactly what I am starting today. NO big deal. Just simple applications.

To start with today I got hooked with a small problem. So I got this idea.

I wont reveal much of what the app will be, what it shud be, or how I wud be wasting my time

The idea is to get something UP & Running,Quickly, very Quickly and then can keep on improving it!!!!

So write to u in detail on 15th September!!!

Keep guessing!!!!
Cheerz
Sridhar

<Hint>No Rocket Science, it has something to do with IndicComputing!!!!! </Hint>

37Signals vs TechCrunch : A Ridiculous debate!!!!!

Michael Arrington of TechCrunch has gone crazy to post such an article attacking 37signals, which has led to heavy debate over web.

The debate is about should software be given free or should be charged?

Michael says it should be free and I guess he probably mis-understood, the concept of 37signals. 37Signals has a array of web based simple applications some of which are free and some of which are paid services.

Yes, you cannot charge every software product, but if some products have extra features, value and above useful stuff. Why wudnt anyone pay?

Give free version of your product, if people like it and find it useful, they would surely want to have a Paid version of the same.

I mean if you cannot ask people to “Pay-N-Search’ but it is not applicable. But, project management suites need more security, features and simplicity. So they can be charged.

What do u think? Should software be free? or charged?

Drop in comments……

<span style=”color:#008080;”><em>If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored. </em></span>

<span style=”color:#008080;”><em>The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.</em></span>

<span style=”color:#008080;”><strong>CHECK out and BUY the PHP and Script.aculo.us  book {My Book} at Packt official site</strong>
<a title=”PHP and Scriptaculous Book” href=”http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book”> http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book</a></span>

How to learn Programming????

Most of the time, I hear people saying I am NOT good at programming but at “XYZ”, yes this is completely okay, but if you have some inclination towards learning programming or be a good programmer, here are few simple tips, I follow them so I thought I would share with you pals.

1. Join some Developer Network.

With lot of developer network platforms, half-of the work of the developer is already done and distributed in the form of “Packages”.

Im hooked to Yahoo Developer Network, for many reasons. One, it supports all the languages be it .Net, Java, PHP, Python etc etc.

More reasons for using any Developer Network, I can feel are

1. Cross Browser compatibility, one doesnt have to worry about the small issues of browsers

2. Loads of tutorials, code and examples

3. Forums and discussion boards

You can even learn a lot by looking at the code, examples and tutorials.

Some of the developer networks available are

1. Yahoo Developer Network

2. Google Code

3. Facebook Developer Network

4. Script.aculo.us Network

If you have used or know of any other developer network, drop in comments.

Cheerz

Web Design Tip #4: Using ToolTips Helps a LOT!!!!

ToolTips are really useful. If you are considering of making a web start-up. This tip would surely come in handy.

According to wikiperdia:

” The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with supplementary information regarding the item being hovered over “

Where can we use ToolTips?

Most of the time, designers are not sure when we should use ToolTips. Lets us imagine a scenario where in user has to fill details. It would be really nice to put down a form tooltip to guide user on do’s-n-dont’s.

UserName <input type=”text”>

Now, if we apply a form tooltip, at the right-hand side a tip would appear when the user clicks on the text box.

“Choose username as smart as ur”

This not only helps in guiding the user about the details but also helps in creating humor

Which are the free ToolTips we can use?

Im using YUI{Yahoo UI library} and it has some really powerful features for tooltips. Alternatively one can also use the below mentioned libraries which can surely help in grooving the UI.

1. ProtoTIP : Simple, sleak, beautiful, can add effects and AJAX support. Good for Prototype+ Scriptaculous libraries {Im using it as well}

2. Ask The CSS Guy : ONLY useful for forms

3. Nifty Corners Cube: Awesome library perfect for all rounded-corner needs

4. Last but not least, Google it

If you know of any other library, drop in comments, I shall update the post.

Related Posts:

Web Design Tip#1: Yellow Fade Technique

Web Design Tip#2: Alternative Row colors for Rowset

Web Design Tip#3: Epicentric Designing

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Web 2.0 + Ajax = CRAP!!!

With nice weather around, lot of start-ups are growing like mushrooms, I generally keep track of web start-ups.

Myth#1

Build something using php, mysql and ajax, call it web 2.0 and it is a potential future google. Crap!!!

Ajax is nice, very nice. It is a screwdriver to speed up applications. Lot of people who hardly know about serious programming think ajax is about “effects”.

While a mail exchange of thoughts, Sidu raised this point.

Yes, I totally agree. Ajax has a better taste. Out of total 70 million blogs, if I guess around 30 million blogs will be on technology. Not everyone of those 30 million is a serious ajax programmer. But still write about ajax. This leads to free publicity and creating lot of hype about the looks than actual features

Myth#2

Use any ajax library, add fade effect and it gives you edge over competitor!!!! Again, crap.

Yes, adding fade effect is awesome, but even more important thing is knowing where to apply fade effect. That one can only know when you are seriously involved in coding.

Myth#3

I know ajax, I read gigaom, ajaxian etc etc. Biggest crap!!!!

Lot of people are “ajax experts”, “Gurus” but when it comes to talking about Ajax with showing live working code. Naa, I am busy!!!!

I personally feel un-conferences like Barcamps etc should encourage lot of working code, demos, workshops than mere PPT sessions. Yes, PPT’s are neeeded but as a support let people do hands-on, see how things works. Than theory!!!!

If you have ever felt the same, or came across situations I have mentioned,  Drop in your views in the comments.

Cheerz
Sridhar

First Bangalore Blogger’s Meet!!!!

Bangalore Blogger’s Meet :

This is a nice step towards making a great blogger community in Bangalore. No wonder we have some of the most wonderful blogs coming from Bangalore. But isnt it a great idea to really meet the bloggers in person and share the knowledge???

It sure is. What you should do now is to quickly register Here 

Some bloggers focus on Lifestyle, Fashion, Technology, Journal, what such events help is to get all these folks under one roof.  Guess its true, digital world is shrinking!!!

After this Meet, the group plans to have a collective during BarCamp which is scheduled this month end.  [Ref]

Bangalore Bloggers Meet is on 21st July. OMG, I remember something related to that day. Yes, Its my B’day!!!!

Hope to see you during Bangalore Blogger Meet. I am dropping out of this.

Details for the event: 

Bangalore Blogger Meet

Date : 21st July

Venue:   BrewHaHa,  Near Jyoti Nivas College,  Koramangala, Bangalore

Cheerz
Sridhar

PS: Yes, I guess Dhivya is right. But confusion was created coz Sanjukta’s blog says its on 7th July and the PBWiki site says 21st. What the Heck is this now? Huh?

Web Tip #1: Yellow Fade Technique (YFT)

Web 2.0, Web 2.0 *Yawn Yawn*

I guess the web is half full with Web 2.0 jagron. I wont go deep in explaning what exactly  web 2.0 is, but I would stress on one point.

“No Refreshing of Whole Page” {AJAX, as we call it}

I surf web for more than 20 websites {new} a day, one thing I find pretty common and uncommon is the UI. Some sites suck so-much that I never visit them again, and some are so awesome that i fall in love with them.

So here, I am starting a new section “Web Tips” for web workers to plan and design sites in a way to impress the users.

Web Tips #1: Yellow Fade Technique

When you are using AJAX in your site, often one feels it’s a big deal to implement AJAX and then they feel like next Google. But, most of them fail to understand that the user is unaware of what happened just now? For god sake, he doesnt understand AJAX

So the user panics, can be to an extent, he says “Goodbye”

What can be done to avoid such things? Tell the user you have posted/got the data.

How? Simple

Yellow Fade Technique

Just change the background of the DIV to light yellow and then once the operation is done, again with a time duration fade it out to the original color. This really helps users in understanding that something has happened.

If you are one of the fans of WordPress, it has that implementation in the comments tab.

I am implementing it as well, so you can expect a YFT treat tutorial soon from me.

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Cheerz
Sridhar 

Tutorial: How-To make a Tag Cloud using PHP & MySQL

How to make Tag Cloud using PHP & MySQL

Tag Clouds are pretty common now-a-days in almost all the web 2.0 company sites. Be it Technorati, Zoom CLouds, WordPress, Blogger etc.

Why Tag Clouds are important?

Pretty much for the same reasoon: Appealing Users.

On seeing all these even I have decided to introduce the Tag Cloud feature in our project.

Now, the very important question: How do we code to create a Tag Cloud using PHP & MySql?

Here I will show you how to code it.

First the logic:

1. Collect all the tags & Count{how-many times it has been tagged} from DB{MySQL}

2. Put them into a array {PHP}

3. Calculate the maximum and minimum count of the tags used

4. Now, loop through each tag and just change the size of the font.

5. Define a simple class say “wrapper” which will contain the tag clouds

6. Call the function to generate the tag cloud.  {Javascript}

Now, since Im falling short of time, so I will cut the crap and you guys take the code directly.

Yes, a word from me, I will surely update it as time permits in full detail.

Cheerz

Srinix

PS: Download the Code here: Tag Cloud Code

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

PHP and Script.aculo.us Book

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

FPDF, PDFLib with PHP which one to choose?

FPDF is a php class used to generate PDF files out of text or html files. ‘F’ stands for Free.

Whereas PDFLib is also a powerful class for generating PDF files, but its not free.

Have you tried any of these with PHP? Which one would you prefer?

In terms of features, customization, encoding facilities and above all performance. Have you tried using ajax to get data from mysql and then post it to create PDF using PHP?

This weekend, I am working on both of them, if you happen to work on them already. Please drop me a line.

Cheerz
Sridhar

Web tutorials *Yawn Yawn*: Webonic

Do u also Yawn thinking of tutorials available on web? Be it Php, Mysql, CSS etc, Its all same stuff, again and again in new fonts!!!!

Its time for some real new useful stuff and not same yawning.

I have started a new blog, which I call it as my technology playground.

Its important to write code, and Its even more important to build some useful code and share it with community.

Since, this blog is more personal. I will write and collect all the tutorials which I will be working/learning for buliding my own web product.

http://webonic.blogspot.com/

Webonic will contain tutorials, code, demos related to PHP, MySQL, AJAX & CSS. Its not user-generated/collected, all will be stuff I am working on. You are free to add if you want to.

Happy Hacking
Sridhar

How-To create Rounded Corners using RICO Library!!!

How-To create Rounded Corners using RICO Library!!!

In my previous two posts I have covered some tutorials using Script.aculo.us to enhance the User Experience. But, Script.aculo.us doesnt have the beauty of adding Rounded Corners, which RICO is rich in!!!!

1. Making a simple SlideShow using Script.aculo.us
2. How to Use Script.aculo.us Effects to add beauty

In this tutorial, we will explore yet another AJAX library. RICO Library

RICO is a powerful, creative ajax library which gives you control over UI designing as well as functionality.

In this tutorial, we will see how to create Rounded Edge Corners.
I assume these steps are already done before you see the naked code.

1. You have downloaded RICO library. If not, you can do it here
2. You have downloaded the Prototype Library. If not, you can do it here
3. Enable javascript in your system.

OKay, so lets see the code:

Include all the files{Rico & Prototype} inside the html code.

<head>
<script type=”text/javascript” src=”../src/rico.js” mce_src=”../src/rico.js”>  {SRC should be ur rico.js path}
<script type=”text/javascript” src=”../src/prototype.js” mce_src=”../src/prototype.js”>  {SRC should be ur prototype.js path}
</head>

so once, we are done with including the libraries to your html file.

Now, time to add some content to the Body of the html file.

<body>
<div id=”roundMe” style=”position:absolute;top:240px;left:35px;width:250px;background:’lightblue’;color:’red’;”>
<div id=”Content” style=”height:200px;width:250px;padding:8px;”>

Hello This is me, a Rounded Corner hell.

</div>
</div>
</body>

Understanding this particular code is very important, from the compatibility point of view. Coz if you skip some of the style parameters, this code wont work properly in IE.

U know IE sucks!!! {Keep an eye on Padding, it stinks in IE}

Okay, so no big deal here in code. Just two DIV tags and inside the child DIV the content is placed.

Simple, Isnt it? kooool. Lets go and add a simple line and see the magic.

Now, that we have decided the structure and included the libraries, what are we waiting for? Oh, yeah we still need to call the functions of RICO.

<script type=”text/javascript”>
Rico.Corner.round(’roundMe’);  // The parameter is the id of the outer DIV tag
</script>

What else? Not much. Just save it and see the magic.

If you still want to keep on hacking other options, you are always welcome!!!

Just add these parameters to the same line.

Rico.Corner.round(’roundMe’,{color:’transparent’,compact:true,blend:true;});

What all other options one can add to Corners?

1. Color
2. Blend
3. Compact
4. Color
5. BgColor
6. Specify which corners to be rounded
7. border.

For more information. Visit Demos @officially site of RICO.

Yes, some folks out there can argue that we can do it with CSS also. I agree with you. But can you do it in just one line of code?

Sorry dude!!!

Anyways I have attached a simple code for the same at the bottom if you can want. Take it, use it, try it and please let me know as well, if I missed any.

Cheerz
Sridhar

Download COde: ROunded Corner Using RICO Library

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

UI Designing with CSS: Example login form

After the dot com bubble, start-ups are growing like mushrooms everywhere. And, 80% of these being either in Consumer Internet or Mobile.

So what do these web-based start-ups focus on mostly?

User Experience. Users have become powerful and above all decision makers. If users like the service, UI, application they will support it else they will kill them.

Talking about user experience, Its very important to understand what would a user appreciate? I will explain this taking a simple example of login form.

A simple login form would consits of normal buttons and a table.

Enter Name: <input type=”text”>

Enter Email: <input type=”text”>

<input type=”button” value=”Submit”>

No big deal. A simple two text boxes and a submit button. Simple?

Okay, so why not make small yet sweet changes to this code?

Through adding CSS{Cascading Style Sheets}!!!

Lets add some style on mouseover and mouseout operations.

<input type=”button” class=”Button” onmouseover=”this.className=’ButtonHover’” onmouseout=’Button’”>

In the style section just add the following piece of information.

Button {
background:green;
}

ButtonHover{
Background:lightgreen;
}

This would add the following functionality to our code.

Whenever the mouse is moved over the button the background is set to lightgreen and whenever removed again back to green.

Though there is no big deal here, the thing that needs to be taken care is that small useful things matter and count.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

How to make a Modal Window using Prototype?

Okay, its been somedays I was working on how to create a simple, beautiful yet powerful modal window for a project I am working on.

Modal Window sometimes called as Modal Dialogue box, are widely used across to increase the user experience.

After doing a lot of {re}search, I came across, Lightbox by Lokesh. Then, I came across this LightBox Gone Wild, yes by the folks behind Wufoo.

I must admit, these guys have done a great job!!! Thanks for sharing this.

Now, coming back to our tutorial.

You must have prototype AJAX library to use this {sorry for Non-prototype lovers}. Once, you have both Prototype and Lightbox Gone Wild.

Just add them to your html page.

<link rel=”stylesheet” href=”css/lightbox.css” mce_href=”css/lightbox.css” type=”text/css” />
<script src=”scripts/prototype.js” mce_src=”scripts/prototype.js” type=”text/javascript”></script>
<script src=”scripts/lightbox.js” mce_src=”scripts/lightbox.js” type=”text/javascript”></script>

Once, we have added the libraries to the html page. Now, we move on to create the lightboxes {a.k.a simple html files which will be shown in our Modal Window.}

Some HTML files, lets us say About.html

<p> About Us Page</p>
<h3>This is a simple About Me page, where you can add all HTML tags.</h3>

Now the important task: Activating the Lightbox

<a href=”About.html” mce_href=”About.html” class=”lbOn”>About Me</a>

Notice: the italics class=”lbOn”, onclick this will call the function to load the lightbox.

We can add all the HTML tags inside a lightbox, which means there are N number of options for you to surprise your friends.

De-Activating the Lightbox

<a href=”#” mce_href=”#” class=”lbAction” rel=”deactivate”>Close Lightbox.</a>
A simple link, clicking on which will take you back to the page.

Linking it to another Lighbox inside:

<a href=”confirm.html” mce_href=”confirm.html” class=”lbAction” rel=”insert”>Go to Another Lightbox</a>

Till here we saw how to Activate, Deactivate and Insert a lightbox inside a lightbox.

Now, AJAX stuff.

Lets say you want to give, a form to fill to user and collect the data using the modal window. We can do it, with the help of Prototype library. Use the following piece of code.

insert: function(e){
link = Event.element(e).parentNode;
Element.remove($(‘lbContent’));
var myAjax = new Ajax.Request(
link.href,
{method: ‘post’, parameters: “”, onComplete: this.processInfo.bindAsEventListener(this)}
);
}

I am writing a code to add some more functionality like onload, on mouseover etc. Once done will share the code as well.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book