All posts tagged ‘tutorial’

File Under: JavaScript, Programming

Debug JavaScript With Venkman

In the first part of our JavaScript debugging tutorial, we talked about debugging methods that work in just about any web browser. These techniques are useful when you’re trying to get your script to work in a particularly troublesome browser. More often, however, you’re faced with some code that just plain doesn’t work, and you’re not sure why.

With a script debugger, you can pop the hood and study exactly how things work — the catch being that the only really robust debuggers exist only for Internet Explorer and the Mozilla family of browsers. But that’s OK. You don’t really care about browser compatibility yet; you just want the darn thing to work.

In today’s lesson, I’m going to show you how to use Venkman, Mozilla’s script debugger. It’s not really any better or worse than Microsoft’s Script Debugger, but it has the advantage on running on Windows, Linux, Unix, and Mac OS X. You can download it from Mozilla’s site. As with all extensions, you’ll need to restart your browser after installation. Once you restart, you should see a menu item named JavaScript Debugger under the Tools menu. Make sure to click on this menu item after you’ve loaded the page you want to debug. It also is a good idea to close any extraneous tabs before you start debugging.

Continue Reading “Debug JavaScript With Venkman” »
File Under: Social

Keep Track of Your Friends With XFN

So far, keeping track of your social relationships on the web has been something that primarily happens on the big social networking sites — Facebook, MySpace and Friendster. They all have different features, but the common thread between those sites is that you can define and manage your relationships with other users on each site.

But what happens to those relationships when you leave Facebook and go surfing around the larger web? How do you stay in touch with your friends and continue to manage those relationships once outside the sealed ecosystem of a social network?

And as popular as they are, we all have a few friends who purposefully avoid the big social networks for whatever reason. Even those people have loose systems for defining their relationships — maybe they have a blog and they keep a “blog roll” or a list of sites they like in the sidebar. It’s much less formal, but it’s analogous to the friends list in a site like Facebook or Friendster (just don’t point that out to them, lest they become even more reclusive).

The web is a big and complicated system of connected data, so surely there’s a structured way to define and manage relationships between people without joining a social network. And in fact there is.

It’s known as XFN, or the XHTML Friends Network. Using a series of different rel tags in your markup, you can indicate who your friends are what the nature of your relationship is.

While not officially part of Microformats, XFN uses some microformat components to define relationships, and the two groups share similar goals.

Continue Reading “Keep Track of Your Friends With XFN” »
File Under: APIs, Location

Get Local Search Results From Google

Finding what’s nearby is a big part of Google Maps. Now the same information is available on your own site, using Google’s APIs. Let your users search your map, finding nearby restaurants or other businesses and landmarks. Even better, take that data in its raw form and do whatever you want with it.

This tutorial will show several different methods for accessing local data from Google using JavaScript. From plug-and-play maps to direct access to search results, Google is making local listings available to your applications.

Continue Reading “Get Local Search Results From Google” »
File Under: HTML

Create Simple HTML Frames

So, I was walking through the office yesterday and someone asked me, “Jillo – if you had to pick one thing you were good at, what would it be?” “Well,” I said. “I tend a lovely garden. I’m very good with dogs. And I can explain frames in terms even my mother could understand:the picnic.”

Imagine, if you will….

It’s summer. It’s somewhere in the Midwest. You’re on vacation, so you drop in to see your mother (of course — my god! You fly over the Midwest, you have to visit your mother), and in your honor she holds a picnic.

So there you are. Dad, of course, is at the barbecue, making sure the beer cooler is always full, and the kids stick to the soda cooler. And Mom is spreading a buffet table out on the deck, with glorious amounts of food piled high in metal bowls, Tupperware, straw baskets, and the like.


So you pick up your plate, and it’s not just any kind of plate — it’s a special sturdy picnic plate (probably made by Coronet or some other fine brand) that has separators. You know the kind. It has a big part for the meat product, and a little portion for the salad, and a little portion for the dessert.

Now, in a few minutes you’ll be thinking of this separated plate as your frame document, but let’s not go there just yet. Let’s continue our picnic before we talk shop.

Continue Reading “Create Simple HTML Frames” »
File Under: Multimedia

Make Cool Photos – Cheap

Images have become an essential component of Web sites, and the need for good designers is growing. But to be a creative and original designer, it’s a good idea to invest in more than a couple CD-ROMs of clip art and a copy of Photoshop. Understanding how photography works and how image manipulation was done in the precomputer era provides a solid foundation for any Web designer. Plus creating your own cool pictures without leaning on the Photoshop crutch can give your sites a distinctive look.

Messing around with photographs can be fun, too, and there are plenty of ways to do it without any software or expensive equipment. Whether you’re sick of your same old camera and want something new or you want to take some kick-ass crazy color photos with your current camera, there are heaps of snazzy tricks out there to keep you busy in the land of reverse technology. Toy cameras, cross-processing, Polaroid manipulations, and Xerox transfers are just some of the ways to have a cheap, easy, good time with photography.

Let’s start by looking at some inexpensive cameras.

Continue Reading “Make Cool Photos – Cheap” »