Get updates

JavaScript

Scott Silent Death Ship Builder Goes Open Source

Silent Death is a fast and fun space combat miniatures game. Previously I began working on a browser-based ship builder app. That app is now open source, with code available on github.

Continue Reading…

Scott Scriptaculous Sortable Drag and Drop Tree Fix

While Scripty2 looks great, drag and drop is still in development and I’m continuing to work with Sortables in Scriptaculous for the time being.

I’ve uncovered what looks like a drag and drop tree bug, and in this post I’ll go over the code to fix it.

Continue Reading…

Scott Q&A: How to Customize Rails to_json output?

Rails has a bunch of JavaScript helpers, but once you move beyond those and want to write your own JavaScript code for your application, you may find yourself dealing with some JSON produced on the server-side.

By default, the to_json method in Rails is probably a lot more verbose than most people want. I’ll share a few tips on how to tame it.

Question: How can I slim down the output of to_json in Rails?

Continue Reading…

Scott JavaScript Variables and Anonymous Objects

JavaScript is not Ruby, but it does offer syntax that can lead to expressive code. There’s one case where JavaScript could have gone a step further and given us even more expressive code syntax, when dealing with object literals or anonymous objects.

Continue Reading…

Scott JavaScript Event Delegation

Coding interactive behavior into “dumb” HTML elements is one of the basic scenarios for JavaScript use. The standard method is usually to hunt through the DOM looking for elements of a certain id or class and attach an event handler function directly to each one.

For most types of events, there’s a better way: Event Delegation. At the basic level it involves attaching an event delegation function to a parent element, then catching events which bubble up and passing them off to specific handlers based on the event’s target.

Continue Reading…

Scott Learn to Program with JavaScript: Instant Feedback

Last time, with part one of this Learn to Program with JavaScript series, I introduced some basic HTML with an interactive tutorial. As JavaScript works very nicely inside a web page, this gave us the foundation. Now it’s time to add actual JavaScript on top.

Just like other aspects of an HTML page, JavaScript goes into a specific tag. The <script> tag, to be precise. Try out the first example to see our own version of “hello world” in JavaScript:

Continue Reading…

Scott JavaScript RegExp Tool Available

There are times when I just need to process some text quickly and efficiently. Regular Expressions are very well suited to this task, and now I’ve released my own JavaScript Regular Expressions tool for just this purpose.

Continue Reading…

Scott Comet for Web Games

For those not familiar with Comet, you’re either not a front end web developer or you’ve been kept in the dark. To sum it up quickly, Comet is a technology like Ajax. While Ajax basically consists of an asynchronous request by the client to the server, followed by the server’s response, Comet is a bit different. In Comet the client establishes a connection (or makes a request) to the server, and then generally keeps that connection open for the server to send responses back to the client on its own schedule.

Continue Reading…

Scott Extending JavaScript Strings with Chomp using Prototypes

Chomp is that oh-so-fun function in Perl to bite off extra newlines from the end of a string. It can be useful to have chomp for JavaScript too, especially in cases such as reading input in textareas.

This time around, I’m going to take a quick look at how we can take the standalone JavaScript chomp function and make it even more accessible by extending JavaScript’s String object, which also gives us an excuse to try out the awesome prototype feature in JavaScript.

Continue Reading…

Scott Learn to Program with JavaScript Series: An HTML Beginner’s Interactive Tutorial

I’m a web developer by day and have been programming, in one language or another, most of my life since age 10. But for someone without consistent (or any) programming experience, how do you learn to program? This question was brought on by a friend of mine who had a programming class or two years ago and is now setting his sights on giving it another shot.

The good news is that you don’t have to be a life-long programmer to have some fun with it. Old, young, students, hobbyists, and non-programmer professionals can all learn to program, provided they have some interest and a little time (it doesn’t take much to get started).

Continue Reading…

Scott Introduction to Regular Expressions in JavaScript: Alternation and Grouping

Regular expressions provide lots of flexibility in processing text, and this article introduces two additional metacharacters (three counting both parentheses), but first I’ll start with a summary of what was covered in the previous regex article:

Continue Reading…

Scott Introduction to Regular Expressions in JavaScript

If you’re a programmer who has ever had to develop an application dealing with text input (which is most of them), from files, databases, or user input, you might be interested to know that regular expressions can make your job a lot easier.

Unlike most dry regular expressions tutorials out there (Mike’s smart post aside), I intend to provide more than just the “what”; I’ll walk you through the “how” and “why” too. After all, why would you care to learn regular expressions if you don’t get to find out about some of the cool and powerful things you can do with them?

Continue Reading…

Scott Chomp for JavaScript

In most programming languages, there exist certain simple and useful functions that people come to rely upon. From my days with Perl, chomp was one of those functions for me.

Given a string, chomp bit off all newline characters at the end of the string (and returned the number of newline characters it removed).

Continue Reading…

Scott JavaScript Check All Checkboxes

Have you ever used a site with a bunch of checkboxes, and you needed to check all of the checkboxes but they didn’t provide that feature directly in their user interface? You might shrug, and click away until the job is done… or use the “JavaScript command line” aka your browser’s address bar, to do it the power-user way.

I realize that may not be a common problem, but in my day job I kept running into it while adding hundreds of keywords at MSN’s adCenter (wanting all of them to use all match types).

Hasn’t someone else already solved this problem? Seems very likely, but my searches were only pulling up examples of “check all” functions to use on your own site, so after a bit of coding I present to you my check-all checkboxes function:

Continue Reading…

Scott Q&A: How to use plain JavaScript in RJS templates

What’s all the fuss over RJS templates for Rails? JavaScript is not, in my opinion, the dirty/scary/tedious or otherwise lame language some people seem to think it is. I actually enjoy writing JavaScript objects, and currently the codebase of my hierarchical list manager app contains about as much JavaScript as Ruby code.

Despite my JavaScript predilection (or because of it), I am happy to work with RJS templates. Why? Because they make working with JavaScript (and client-side capabilities JavaScript offers) in Rails a whole lot easier. A lot of what makes Rails really fun is stuff like the easy integration of Ajax and JavaScript for the UI, such as Scriptaculous.

RJS templates make it a snap to respond to an Ajax request with much more than just an update for a single element, through a number of wrapper functions that generate JavaScript for you. Yet sometimes you’ll still want to interact with your own custom JavaScript functions and objects.

Question: How can plain JavaScript be used inside RJS templates?

Continue Reading…

Scott Scriptaculous Effect.Squish afterFinish callback fix

Previously as I was using Scriptaculous I ran into a problem with afterFinish on Effect.Squish. This is my solution.

Continue Reading…

Scott The Scriptaculous afterFinish problem

On the heels of working out the proper syntax to use when returning JavaScript to execute after an Ajax request, I ran into trouble with a Scriptaculous effect callback.

Continue Reading…

Scott Q&A: How Rails Returns JavaScript to Execute on Ajax Request?

On the road to a better to-do list application, I need to start with a solid base and advance one step at a time. That base includes simple ajax functionality so list items can be manipulated without a full page reload.

Question: When the user clicks an Ajax link to destroy a list item, how do I have Rails return JavaScript code to be executed which will hide that item?

Continue Reading…

3DM Design is where Scott Drake publishes thoughts on programming web applications in JavaScript and Ruby.