It’s Dangerous to Go Alone. Take These.

The world of web development is fraught with hazards. One unclosed tag or misplaced parentheses and everything melts down. Some independent projects are venturing deeper into the dangerous Deku forest of web interactivity. It’s ok though, there are tools.

1. Inspector/Debugger

The swiss pocket knife of web development is the inspector panel. You can enable it in Safari by going to “Safari >> Preferences… >> Advanced” and checking the box that says “Show Develop menu in menubar”. To bring up the inspector you can go to “Develop >> Show Web Inspector” or you can right click on any part of the page and select “Inspect Element”. Chrome features the same panel as Safari (both are built on WebKit) and can be accessed through “[wrench icon] >> Tools >> Developer tools” or the right click method from above.

Apple has a good overview of the tools along with a more thorough run through but it’ll probably do you the most good just to fish around yourself.

But I’m using Firefox!?

Have no fear, Firebug was the original swiss army knife inspector panel and its developers are no slouches. I’ll leave it to them to explain its use.

2. Javascript Library

If you are adding any kind of Javascript interactivity you probably want a library. The most popular and widely supported library is JQuery. The pro is it has everything. The con is it has everything. Other libraries exist such as Mootools and Prototype but, for this class, sticking to the well trod path of JQuery is for the best.

Using a library takes a lot of the verbosity and disorganization out of Javascript. Instead of writing document.getElementByID(“header”); you can just write $(“#header”). This is more powerful when using CSS selectors: $(“”) will find all h2 elements that also have the class ‘red’. If you are adding any interactivity to your site you’ll want a Javascript library.

The other reason for picking JQuery is the plugins (archived for the moment). They can be confusing and of inconsistent quality but overall they allow you to drop in functionality by only writing one line of code. I’m using a scrolling plugin on my class site. I haven’t had to write more than 10 lines to get some neat effects. For an example from our class: Dana has been doing cool things with JQuery.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s