Douglas Crockford, JavaScript genius, presents an article on the use of "new" when creating objects in JavaScript. Excellent read that will make your code better. I know I’ll use his <select> code somewhere.
technorati tags:javascript, functions
Here’s a quick little tip to keep in mind when working with JavaScript: you can quickly convert a number (int, decimal, etc.) to a string by doing this
var i = 1; var newString = i + "";
Edit on 11/21/06, 12:21PM Eastern. As pointed out in the comments below, my "excellent" example is totally bogus and leads to invalid (X)HTML. (It does, however, work in browsers, while it shouldn’t.) If you need a numeric ID, do what I do in the real world, not in my examples: preface it with a unique identifier. (Talking about baseball cards? How about using "bbc_NUMBER"?). In my own defense, this was the only thing I could think of to illustrate my point at the time. Bad example follows. ARGH!.
Now, you’re thinking: wow, why would you explain something so stupidly simple? Because even though it’s simple, it’s a useful and powerful technique. How? What if you’re working with numeric IDs on the backend that are printed dynamically into your code on the front end? Eventually, you’ll wind up with something like <element id="1" />. You’ll have a string ID and need to send an int back. Or, you’ll be iterating through a for loop, and you’ll need to do something with that iterator (access an element in the DOM, say).
Let’s say you have a function that looks like this bound to element’s onclick:
function myFunction(anID){ // hide clicked-on element document.getElementById(?????).style.display = "none"; for(var i = 0; i<4; i++){ document.getElementById(?????).style.color = "red"; } // send an AJAX request back with this ID sendAjax(anID); //Yellow fade to show done yellowFade(); }
Is anID an int? Convert it to a string in your document.getElementById() call like so:
document.getElementById(anId+"").style.display = "none".What about that for block? Fill that in like so:
document.getElementById(i+"").style.color = "red";
>Your ints are now strings.
Alex Russell, the Dojo project lead, presented this talk at the Ajax Experience. It’s a PDF deck that’s worth a quick scan if you’re a Dojo developer.
technorati tags:dojo, javascript
Blogged with Flock
Ajaxian is running a series of recaps from their Ajax Experiene: Boston conference. Among the early highlights so far: Animation & Data Visualization in Javascript, which introduces us to JSViz, a JavaScript-based visualization engine. I’ve only tinkered around with the demo, but it looks killer.
technorati tags:jsviz, javascript, data, visualization, dhtml
Blogged with Flock
Sent to the office colleagues:
Very nice interface and use of technology (javascript libraries Behavior and Prototype). The design really supports the interface (note how all columns are even and each panel has a solid top edge which scream "draggable," to promote and invite users to drag items around the page, yet dragging things around keeps the newspaper column feel in tact). Of particular note is the introductory steps they present to take you through initially building your page, which are a great, unobtrusive wizard. In all, it’s a pretty nice take on the "AJAXy homepage."
Josh, one of the guys I work with, pointed out how well the screen resizes, which is very true. Fonts scale pretty well, too. Very "scalable" design, in terms of screen size and what’s on the screen.
technorati tags:espn, redesign, ui, interface, design, ajax, behavior, prototype
Ajaxian has a nice little thread on IE DOM toolbars. Originally meant as an intro for DOM Helper, it kind of evolved to incorporate a couple other toolbars. Sure, we all use the FireBug and Web Developer extensions for FireFox, but what do we use for IE?
I personally use Microsoft’s Developer Toolbar, which I was only fairly happy with, mostly due to it’s kind of unintuitive UI. (Yes, floating tooltips are easy to make in .NET applications. No, they are not good as the primary means to communicate data). The Ajaxian article finally prompted me to figure out how to modify the DOM in the IE toolbar (because, apparently, it’s always been possible if hidden). Click on (or otherwise select) an element, and use the middle pane to add and modify attributes.
I’ve been trying to use the right pane, which, to me, seems like it should work (but is apparently only meant to show your element’s current style, which is pretty valuable nonetheless). I especially like how the attribute names are a big, giant dropdown so that you can see them all. With that middle pane, IE’s toolbar is better then the Web Developer extension (more robust), yet still not as great as FireBug. Hopefully, it works in IE 7 right off the bat.
Here’s a little CSS tip that a lot of people are unaware of: you can give an element as many CSS classes as you’d like by adding them to that element’s class attribute separated by spaces.
This is how it looks: <div class="big orange square">. Your div now belongs to three classes: big, orange, and square.
What about adding classes with a script? Just use element.className += ” classname” to add them (that’s space + classname). To subtract? Set element.className equal to a string without that element. You can do this by splicing that unwanted class out of a string, using a regular expression to filter it away, or using any other string manipulation. Just set element.className = to your new string. Voila.
technorati tags:css, classes, html, dhtml, javascript
I’ve been using Dojo’s FisheyeList widget (think of Mac OSX’s dock) in an internal app I’ve been
building for TheLadders.com. It’s a totally killer piece of script,
and works very well right out of the box. However, there’s not much (read: there’s no) documentation on using it. So, in the hope of
helping someone out, here’s what I’ve figured out so far. (I’m working on dojo version 0.31, and by no means is this list exhaustive).
In all, this widget gives you a great effect with a very quick installation. Does anyone else have any tips for using the FisheyeList?
technorati tags:dojo, javascript, dojo FisheyeList, dock, css, web development, dojo toolkit
How many programming languages have styleguides? Just about all of them. How about "web languages" like HTML, CSS, and JavaScript? On the development team level, there’s probably a lot. But there’s nothing close to the universal standard that Java enjoys. How do UI developers write code that other UI developers can understand? They use something like Dojo’s JavaScript styleguide.
Adopted from the Java Programming Conventions Guide, Dojo’s JavaScript styleguide is the common syntax that Dojo’s developers use. The Dojo Foundation is no slouch when it comes to programming, and they’ve created a styleguide that encapsulates many of the "standard quirks" of JavaScript development (like smooshing together if-else blocks and placing {s on the same line as your function header). In all, it’s an effective resource for getting everyone (especially Java guys who refuse to do anything in a non-Java syntax way) to write code in nearly the same language.
technorati tags:javascript, styleguide, development
Looks like I’m getting a little pub. Well, indirectly. And, no, I’m not actually named in the article at all.
TheLadders.com Redefines the Art of the Job Search, and I wrote "the latest Web technologies" behind that redefinition. It’s really simple: CSS and JavaScript and DHTML. Hundreds of lines of each.
My Jobs is a slick bit of CSS, JavaScript, and DHTML, and has bits and pieces that spread across to other parts of the site, too. I feel like I’m at the cutting edge of Web 2.0. Now, if they’d just get a quote from me next time …
technorati tags:Web 2.0, TheLadders, DHTML, javascript, project
Blogged with Flock
