My company is moving into Web 2.0...What do do?

I had an interesting question yesterday in my inbox. I thought I would share the question and my answer to it. When I look at my answer now I see I may have gone a tab overboard on what the developer was looking for, but hey it made a good blog article!

The Question

My company is looking at moving into Web 2.0 in the near future. What can I do now to prepare for this? Do I need to look into Ajax? What can you recommend me doing so I can be ahead of the game?

My Answer

Web 2.0 is not solely about Ajax as a lot of people tend to believe. Ajax is one small piece that makes up the whole idea behind Web 2.0. Now there are all of these fancy definitions and explanations of what Web 2.0 is. If you want to read what O'Reilly had to say about it, look at this article: http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html.

What I say Web 2.0 is this:
A Web 2.0 style of application changes a way a user is able to get their hands on information and spread its wealth. The application can be customized to a certain extent to meet the user's exact needs while doing it in a way that is not painful! It allows users to recommend information and spread their wealth and knowledge around making your site stronger with a minimum amount of effort on your part and the users.

Now I may have lost you with my definition. But lets look at some examples that are out on the net now.

Look at models like Netflix. All of my friend's can recommend DVDs to me that they loved or hated. I can rate movies and what I rate gives me suggestions on other things that are like it. I can pick a movie and they suggest others that fall into the same category. I have seen some great stuff I never heard of because of this wealth of information.

Wikis are a great example of a Web 2.0 type of application. Tons of information generated by users based around a very simple idea. Content is being generated all of the time by people that were not in the group of people that started it. Heck even articles that are not popular are really important to that site. If an unpopular article is found on a search engine, that is one user that comes to your site. Now if you have 1000's of these unpopular articles, that is 1000's of user's that you would have never seen. So the unpopular is actually popular when you look at it in this way. (If you want more info on this look into "The Long Tail"). Plus most wikis do not use Ajax! Hence why Ajax is only a piece of Web 2.0 that is not really needed. (But it does help!)

A Web 2.0 application is not solely a web application either. Apple’s Itunes application is considered a Web 2.0 application. It is ground breaking in the way we look for music from our personal PCs at home!

Now that I have you scratching your head with "Does my boss know this?" You may want to forward him and the rest of the team this email to understand what Web 2.0 is.

I will give you a few pointers to get ahead in the development. One big thing with Web 2.0 applications is having your components being able to work independently. A lot of traditional applications required you to do A than B than C all the way to Z to get something done. This may not be the correct way for everyone to fill out a form or perform actions on your site. A Web 2.0 would allow a user to customize the way they approach this form.

From personal experience I have worked on applications with the Army when I did contract work for them. The General says it has to be coded this way. The people in the field must do step A first, Step B second and so on. So we code the application, send it to the testers in the field and they say. I code C first and when I get into the office I do A and B since you need to run the test first. With a Web 2.0 application you would probably not run into this type of situation with a modular type of look and feel.

Again, Web 2.0 from my point of view is allowing the user to get to and use information faster and easier. So what you probably need to look at is: how can I make this site easier to use? Can I break up long steps so they can be done individually? Can I incorporate Ajax or some other technique to get data to the user in a seamless manner? Is there some way I can add a feedback mechanism that can get the word out to the developers and their family, friends, strangers, etc?

Trust me; there is nothing better than peer to peer advertising of your information. Look at the viral effect MySpace has on people. Most of that traffic to that site comes from the free advertising! People say "Look at my page" or "Did you see that" or "Oh my god look at that weird chick!" You can not pay for that type of advertising in this world. I know I can not go through a day and not hear the words myspace or Google Video or YouTube!

So hopefully I did not confuse you too much! I know you were probably expecting something totally different to appear in your inbox. Something more on the lines of: Yeah, read about Ajax and make sure you do this and that when you do it.

Web 2.0 is more than Ajax. Web 2.0 is basically imitating what you and I do everyday in our life. We set up a routine so it is easy for us to follow and maintain. That is what Web 2.0 is about! (Oh don't forget about Beta and reflective logos!)

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages

A good response to the eweek Ajax security article

Over on port80software there is a great response to the eweek article on Ajax Security. Check it out here: http://www.port80software.com/200ok/archive/2006/08/04/2424.aspx. The article sounds just like me when I talk in front of user groups!

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages

Allow user to scroll and maintain position with "Scroll To Bottom of the Div" example

Well I am getting tired of being emailed the same question about my entry Scroll To Bottom of a Div. So I sat down in a few minutes I came up with this. My first attempt used onscroll, but it Opera appears to not supporet onscroll on a div. So I had to twidle my thumbs and realized I just had to use the last know position as a reference. Duh...

So how do I keep the scroll position of a div if the user scrolls it and also allow for it to stick to the bottom?

Put this code in your head:

  var chatscroll = new Object();

  chatscroll.Pane = function(scrollContainerId){
    this.bottomThreshold = 20;
    this.scrollContainerId = scrollContainerId;
    this._lastScrollPosition = 100000000;
  }

  chatscroll.Pane.prototype.activeScroll = function(){

    var _ref = this;
    var scrollDiv = document.getElementById(this.scrollContainerId);
    var currentHeight = 0;
    
    var _getElementHeight = function(){
      var intHt = 0;
      if(scrollDiv.style.pixelHeight)intHt = scrollDiv.style.pixelHeight;
      else intHt = scrollDiv.offsetHeight;
      return parseInt(intHt);
    }

    var _hasUserScrolled = function(){
      if(_ref._lastScrollPosition == scrollDiv.scrollTop || _ref._lastScrollPosition == null){
        return false;
      }
      return true;
    }

    var _scrollIfInZone = function(){
      if( !_hasUserScrolled || 
          (currentHeight - scrollDiv.scrollTop - _getElementHeight() <= _ref.bottomThreshold)){
          scrollDiv.scrollTop = currentHeight;
          _ref._isUserActive = false;
      }
    }


    if (scrollDiv.scrollHeight > 0)currentHeight = scrollDiv.scrollHeight;
    else if(scrollDiv.offsetHeight > 0)currentHeight = scrollDiv.offsetHeight;

    _scrollIfInZone();

    _ref = null;
    scrollDiv = null;

  }

Create a new instance with the name of the div;

var divScroll = new chatscroll.Pane('divExample');

When ever you add something to the div call the method activeScroll

divScroll.activeScroll();

And the magic will occur. Below is a working example (may have to refresh, example runs for 1.5 seconds):

I tested this on Win XP with IE6, Firefox 1.5, Netscape 8.04, Mozilla 1.7.12, and Opera 8.5.1 with no issues.
My MAC testers came through: Safari 2.0.4, Camino 1.0.2int, Firefox 1.5.0.5, and Opera 9.0.1 are good. Minor issue with Opera 8.52 and touchpad. I don't think that is a show stopper.

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages

Surprise From Dojo, not what I was expecting

Lately I have been looking into Ajax frameworks to see what they have to offer. People always ask me what framework I use and I also say I use my own or prototype. Normally I get a blank stare when I respond with that. So I started to do research to find out what toolkits offer. Now this post is not about what frameworks have to offer there are plenty out there. They all say the same thing under a 100 words or less. Search Ajaxian.com, plenty of articles on it.

When I was doing my personal research, I saw something that blew me away. It was not the functionality of a framework, but the actual coding of the website itself. I ended up at the famous website of Dojo to see what they have to offer.

Whenever I go to a so-called "Web 2.0" site, I look at Firebug to see what is going on behind the scenes. The following screenshot is what I see when I open up the Dojo's start page in my Firebug console:

How many XMLHttpRequests does a page need to load it? There are 23 GET requests! WOW.... I was lost of what to say when I saw that. Now I did not look at what is happening under the hood, but all I know is that IE only can do two connections at a time, combine that with images, CSS files, and the page itself and you get some extra loading time in there. But that was only the start to my amazement. The following also just made me scratch my chin and wonder what the developers were thinking.

I start to take notes on the features so I can remember what the frameworks have. I click on the "see it in action" tab, and than I click on "effects demo" and than "view demo". I play around with the fade, move, and explode for awhile and get ready to jot down the URL for quick reference. I really do not want to click on multiple things to re-examine the functionality in the future. Plus if a person says “Can it do this?” I can just look up my reference and send them to the demo. Better to see it in action than in some documentation. Think it has a bigger impact seeing instead of believing it works.

I go to bookmark this page and than it hit me. Wait a minute! I can not do this everyday task of surfing. It appears they used a request to get the data for the demo. So how am I supposed to point back to this page? I searched around a little more and seems like I can not do it. HMMMMM....

Now Dojo has some very nice things in it. I point out the toolkit to people when they are looking an editor and other components that other toolkits lack. The thing that turns me away from the toolkit is the coding of the website.

My biggest pet peeve with the XMLHttpRequest object is the reinvention of website navigation. Why reinvent the frame/iframe? So if you are a developer looking to use Ajax on a webpage, make sure I can bookmark a page! If you want a nice framework, look into Dojo, just do not bookmark anything!

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages