Author: barce

I’m currently a big fan of this syntax for parsing and writing JSON.

In the past, you used to have to do eval on your JSON coming in, and that posed a great security risk. Now you can use string.parseJSON and object.toJSONString by using this script:

http://www.json.org/json.js

Enjoy!

This article was originally slated to be published in Webmonkey. I opted against having it published in favor of a more technical and useful article on caching in order to improve web server performance. But Webmonkey got bought up by Conde Nast. Here’s the article that was slated to be published, but is now published here:

Hidden beneath many of the so-called Web 2.0 websites is Ajax.

What’s Ajax? Ajax stands for Asynchronous Javascript and XML. It’s something of a misnomer since XML isn’t necessary for making a web page with Ajax effects on them. Also, the “asynchronous” in Ajax is misleading. Synchronous systems are controlled by a central clock. It’s really hard to see if there ever really was such a thing as synchronous Javascript.

Rather than looking at the words in the acronym, it’s best to look at the websites that use Ajax techniques.

You can check out the demos of Ajax techniques at Scriptaculous.

Also, if you take a look at GMail, Flickr, GoogleMaps, Ma.gnolia and the 37signals set of web applications, you’ll notice four technologies that stand out to make Ajax:

1) XMLHttpRequest — the little Javascript hack that makes “asynchronous Javascript” possible. This object will exchange data with a web server so that your web page doesn’t have to reload. Lots of great Javascript jockeys took a lot of time and care to make Javascript libraries so that you don’t have to deal with the internals too much. But for those of you that like the path of pain or hate hearing RTFM, the working draft can be found at the w3c’s.

A great Javascript library for using Ajax techniques is prototype.

2) XML — you can use xml to transfer data between your web page and the web server, but if you dig deep into the source code of certain sites that use Ajax techniques you’ll notice that

3) The DOM — the Document Object Model allows you to uniquely identify different parts of a web page so that you can use javascript to modify those different parts.

4) CSS – Cascading Style Sheets are a powerful way to apply site wide changes to different (X)HTML tags.

By combining these four technologies together, you can do pretty cool, neat effects on a web page that you’d be hard pressed to do with any other technology. In fact, I’m so confident that you’d use Ajax instead of any other technology that I’ve come up with a list of 6 things that you can only do in Ajax. You might want to try it using a Java Applet, or Flash. I’d be curious to hear what happens. Flash and Flex is catching up pretty quickly.

For previous webmonkey articles to get you up to speed on Ajax, I highly recommend “Ajax: It’s Good for what Rails You” by Paul Adams.

This article will show you 6 things that you can only do with Ajax:

1. Notifications w/o Reload
2. Lightbox & Thickbox
3. AjaxTerm
4. Livesearch
5. Edit in place w/Ajax
6. Flexstore on Rails

1) Look Ma, No Hands: Notifications without Reload

By using javascript’s setTimeout function, you can update a web page without having to re-load. A great example of this can be found in GMail, where you’re automatically notified if you’ve got mail without having to reload a page. No more pressing that check mail like a lab rat, unless you want to.

Also there are an array of chat programs that use Ajax techniques.

http://ajaxian.com/by/topic/chat/

If you’re familiar with trying to get a java chat applet to work on your OS X or Linux browser, you’ll be glad that Ajax is around.

2) Just dim the lights a bit to get us in the mood for… coding: Lightbox Gone Wild & Thickbox

Lightbox by Lokesh Dhakar allowed you to create a photo gallery where you could click on a thumbnail, pull up a medium to large sized photo, and dim everything else in the background. It’s a pretty cool effect that you can check out on the demo page.

Now what happens when you Ajax-ify lightbox? You can find out at the Lightbox Gone Wild demo:

http://particletree.com/examples/lightbox/

You can also find out at the thickbox demo page, too: http://jquery.com/demo/thickbox/ You can not only bring up pictures, but you can bring up text & forms that were called using the XMLHTTPRequest object, and have those show up brightly in contrast to a dim background. Moreover, you can have the forms post data to a webserver triggering any sort of CRUD (create, read, update, delete) function on your favorite database.

3) Is Ajax just some shell game?

Yes, it is when you’ve got a tool like AjaxTerm.

Don’t you just hate it when you’re at a public terminal and don’t have access to a command-line shell?

AjaxTerm allows you to turn your browser into a unix command-line shell. In the case of the picture below, I’m using irssi which was invoked in bash:

This is definitely the coolest use of Ajax I’ve run into so far.

You can set up your PC to have the AjaxTerm script written in Python to run over SSL. If you’re at an internet cafe and without your laptop, you can point your browser to the IP address of your PC, and voila, a shell for logging in.

4) Don’t get nervous all because you’re live.

With livesearch you can type in letters and get your search results right away without having to hit the submit button.

You can find an example of livesearch for Amazon products at MyBigRiver.com.

But if you hate commercialism, you can check out a BitFlux demo. Try typing in ‘php.’

For a tutorial on how to implement livesearch check out php magazine: http://ajax.phpmagazine.net/2006/02/explore_amazon_web_services_wi.html For the latest news on livesearch, check out Ajaxian.

5) Flickr’s Ajax based, Edit-in-place functionality is not only cool but it can save a media intern hours when it comes to updating entry names.

Instead of waiting for the browser to re-load each time you update a picture’s name, you can just move on to the next picture and update it’s name.

A great tutorial for edit-in-place can be found at 24ways: 24ways.org/advent/edit-in-place-with-ajax

6) So does all this Ajax mean that Flash is dead? Not really.

In fact Christoph Coenraets came out with a hybrid of a shopping cart that’s Ajax and Flash. Time to flex those coding muscles. The tutorial is on his website. With Flex on Rails you can use a slider to control which search results come up. You can get realtime results.

Are there only 6 things that you can only do in Ajax? Or that you’d rather do in Ajax? I hope these 6 great ideas by some great web developers get you brainstorming about more new ideas.

There’s a fabulous list of Web 2.0 related sites that just might be using Ajax.

The beauty of the Web is that if you see something that isn’t Ajax’d you can just go out there and code it thanks to the resources on this website as well as the Internet.

I got to work on demo software this week that was used to pitch Dev Khare, who works at Venrock Associates.

Dev (pronounced just like DAVE) sees about 2 to 3 presentations per day and they’re mostly in the area of mobile computing.

What are your thoughts on pitching to VC?

Here’s what he said he likes to see in a pitch using just 5 slides:

1. Your team, their skills relevant to the product you want funded, and who’s missing from your team.
2. What market will you be serving? EG Our market is 50 million people and they all eat popcorn, but they have no way of telling people about popcorn. Here are the studies that back this up.
3. Product slide: Here’s how we’ll do it. Also here’s what we don’t know yet.
4. Here’s how we’ll sell to our first 100,000 customers and make $1,000,000 in 1 month. This is the example slide where you show how you get your customers through your product. (Show product demo.)
5. These are our competitors, and we’re better than them b/c we have
   a blackbox for understanding popcorn.

Say thank you. Take your prospective VC out to dinner (just kidding). That’s it. 5 slides.

Dev said that you’d be surprised at how many people have 40 – 50 slides. You just need 5 because if the idea is compelling enough they’ll do the research and check your numbers.

What do you think of Dev’s advice?

To develop Codebelay, I set up SQL tables using normalization. The database I selected was MySQL.

Hivelogic has an excellent tutorial called Building Ruby, Rails, LightTPD, and MySQL on Tiger.

I built my ruby on rails set up the hivelogic way, and have been quite happy with how fast LightTPD and fastCGI serve out database dependent web pages.

The only thing I would change is adding a root account to my MacMini and using su to compiling and install files.

Typing sudo tar zxvf some_package.tar.gz ; sudo ./configure ; sudo make ; sudo make test ; sudo make install — and then having to type in a password all on top of it turned out to be really tedious.