Web 2.0 Recipes With PHP + DHTML

An anonymous reader writes "Take a look at these full simple code examples for dynamic elements for your web apps, including: Ad boxes, Pop-ups, Spinners, and Tabs. Easy ways to show and hide content on the page." From the article: "Incorporating JavaScript into your page makes the page dynamic and creates a more compelling user experience. Users can get more data more quickly, look at information from different aspects, and seamlessly navigate the site -- and the site doesn't have to go back to the server for lots of pages. However, there's also a reason to avoid using JavaScript: browser compatibility. In the early days of flat HTML, Internet Explorer rendered pages differently from Netscape. Those problems were fixed, but when support for CSS was added, new compatibility issues arose. Now most of the CSS issues have been solved, but JavaScript compatibility issues have cropped up. These compatibility problems have no easy solution. You need to weigh the benefit of what the JavaScript is doing against the number of browsers you'll need to test against and support."

Wow

[aftk2]

This article's been on the front page for a couple of minutes, with no comments. Perhaps Web 2.0 is tired?

For me, I really like JavaScript and AJAX when it helps to actually improve the user experience. Dynamic tabs? What's the point? How is it really functionally than just heading to a different page, or using some middleware to control what content is served, after a page reload?

Now, on a website I built [theportlandscene.com], I've used AJAX (shudder) to create a commenting system that doesn't require the user to initially be logged in. The user can visit a page, submit a comment through the form, and if the user isn't logged in, they're presented with the ability to login right then and there, without losing their comment, and without even being shuttled off to a different section of the site, wondering if their comment will post when they're finished. If they don't have an account, they can create one right there. I think those kinds of tricks make remote scripting worthwhile.

Plus, I think adding new widgets to HTML through JavaScript is pretty keen - like the sliders and calendar that Yahoo is making available under the BSD license at their developer area [yahoo.com].

Re:IE Script Warnings

[eggz128]

My biggest hesitancy in using javascript is the IE warning bar that makes any page containing script look threatening

That only happens on XP post SP2 and when the content you are viewing is on a local drive. Once your page is uploaded -- or if you give it "The mark of the web" (Google for it) on your local drive -- the yellow warning bar no longer appears.

Re:Wow

[ultranova]

Now, on a website I built, I've used AJAX (shudder) to create a commenting system that doesn't require the user to initially be logged in. The user can visit a page, submit a comment through the form, and if the user isn't logged in, they're presented with the ability to login right then and there, without losing their comment, and without even being shuttled off to a different section of the site, wondering if their comment will post when they're finished. If they don't have an account, they can create one right there. I think those kinds of tricks make remote scripting worthwhile.

Or you could just have the comment submit form include "username" and "password" fields if the user is not logged in, and if you need to go to another page to create an account, move the comment text around in a hidden field. No reason whatsoever to use user-side scripting, just good old PHP / JSP / ASP / whatever.

Why is this an article specifically?

[Ahnteis]

I ask because there are whole sites ( http://www.dynamicdrive.com/ [dynamicdrive.com] ) that provide many more examples along with compatibility information. There are also huge sites with tutorials about developing your own scripts.

So why choose this seemingly random PAGE that offers (as far as I can tell) nothing new?

Re:Wow

[RomulusNR]

No, the problem is that Web 2.0 does not equal DHTML, or even AJAX, which is really just DHTML with back-room data loading. The article admits shamelessly it's just about DHTML. The difference between DHTML and Ajax is the difference between Experts Exchange and Google Mail.

I guess "Web 2.0" will never be defined. Is Web 2.0 "thick client" browsing, or is it providing and soliciting community-enhanced content?

Stupid code

[Bogtha]

IBM's JavaScript articles are usually high quality. But this one is awful. It uses invalid code, it doesn't degrade gracefully, it mixes HTML, CSS and JavaScript into the same file instead of separating them, and it breaks when you try and do things as simple as open a link in a new tab.

Don't be fooled by the "senior software engineer with more than 20 years of experience" author, this guy doesn't know the most basic, newbie things. I can only imagine that his 20 years of experience was with something other than HTML, CSS and JavaScript. For example:

• The code doesn't use a doctype line. Not only does that preclude basic QA in the form of validation, but it kicks browsers into "quirks mode", which screws up CSS rendering.
• The code uses href="javascript:...". This is stupid and wrong [jibbering.com].
• He just dumps content out wherever he likes, hides it with CSS and then shows it with JavaScript. So much for backwards compatibility. When CSS is not available, you'll just get random bits of content scattered throughout the page.

That's just the tip of the iceberg. This is an exceptionally poor article.

Re:Stupid code

[Anonymous Coward]

It wasn't with actual GUI development either, or he wouldn't have called it a spinner. A spinner [eclipse.org] (Already defined by IBM [eclipse.org]) is something entirely different.

SWT calls what he was doing an ExpandBox and I've also seen them called Accordions.

Re:Wow

[fbg111]

Perhaps Web 2.0 is tired?

No, PHP is tired. It's now all about Ruby [ruby-lang.org], Python [python.org], LISP [gigamonkeys.com], and the more obscure but no less interesting Lua [lua.org], Scala [scala.epfl.ch], Qi [lambdassociates.org], OCaml [extremetech.com], among others, and various [rubyonrails.org] derivatives [djangoproject.com] and frameworks [turbogears.org].