Avoid describing your code as automatically doing something. If you need to do multiple things at once, separate it out into a convenience function or method. Finally, make it easy to call each step explicitly. Please don’t put the orchestration code, that calls code that interacts with the outside world, into a constructor. This makes the code less flexible and harder to test. Instead, use the constructor to set up the internal state.
UPDATE (2007-07-17): After searching for ‘sliding doors css “dead space”‘ I found that someone already solved the problem without using JavaScript.
About a year ago I read Sliding Doors of CSS on A List Apart. While I admired the elegance of the design, I found the dead space on the left side of the tabs to be annoying.
The problem comes down to not being able to wrap an individual anchor tag around a list item tag and have it work. The anchor tag had to be put inside the list item tag, and try as I and the author might, it couldn’t be made to include the entire tab. The left side of the tabs were unclickable, as can be seen in the example.
The other day, I got the idea to fix the problem with JavaScript. I could make the list item trigger an onclick event. I could also make it show a hand cursor when hovering over the list item. The hand cursor thing could be done with CSS, but I like doing it in the JavaScript better, because if somehow the JavaScript code doesn’t execute properly, it won’t show a hand cursor in an area that’s not actually clickable.
I use the following JavaScript code, which relies on the JQuery library, to make the dead space clickable. On the first try I had the whole page flicker in Firefox when part of the anchor was clicked (the part that wasn’t dead space before). I tested it on the old page and it didn’t have the whole page flicker issue. So I figured out that it was probably a result of both the link and the javascript being triggered, and I added an event for the anchor to tell it not to trigger the dead-space event if the user clicked on the anchor.
clickedAnchor = false;
function fixDeadSpace(headerDiv) {
var items = $('li', headerDiv);
items.css('cursor', 'pointer');
items.click(function(arg) {
if (! clickedAnchor) {
window.location.href = $('a', arg.target).attr('href');
}
});
$('a', headerDiv).click(function() { clickedAnchor = true; });
}
$(function() {
fixDeadSpace($('#header'));
});
To use, make sure the JQuery library is available, and add the above in a script tag. Here is the example with my code added, and different query strings in the links.
It behaves just about the same as if the left part of the tab were part of the link. The only difference that might be noticeable to a very small number of users is that when you hover over the area outside the anchor tag, the location isn’t shown in the status bar.
Watch Dexter, Anybots, Inc.‘s self-balancing robot. Then watch the video of Honda’s Asimo robot walking and then falling down while attempting to climb stairs (I know they’ve had successful stair-climbing demonstrations since). Quite a contrast, isn’t it? Dexter’s walk looks like a human walk, a pretty feeble human, but a human walk. The Asimo robot’s walk looks like a souped up robot’s walk.
Both robots have their advantages. I’d like to see Dexter get the ability run off battery power. It would also be interesting to see other combinations of the two types of robots. But I will always remember Dexter as he is right now when I think back to the day that I first saw a self-balancing biped robot.
Another Steve Jobs quote (via SvN):
Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.
I love how he uses first-person plural here (presumably by “we” he means Apple). It’s part of his Reality Distortion FieldWP. I think Apple employees have a strong sense of “if you weren’t great you wouldn’t be working here”. Sure, not all Apple employees are great for the company, but the feeling is very encouraging to those who are, and it leads many people to achieve great things.
There’s a damn impressive demo of the next version of BackPack on Signal vs. Noise.
It shows a cross-platform web application with main items draggable up and down on the page, todo items draggable within and between todo lists, and images draggable horizontally. Part of making it work well involves showing drag handles only when elements are hovered over. This is a really clever way to stretch the limits of browser technology.
What it really shows, though, is that a small company with only a few great hackers can do things that are just as impressive as what hundreds of Googlers can do in building GMail. And I bet they did it in a tenth of the amount of code.
I just don’t think a business person could commission anyone to come out with something like the new version of BackPack. It’s too creative for it to be done just by throwing lots of money at the problem.
“Good morning to everyone”, said Tim, smiling at the front of the table. “Before we start, we’d like to ask you to hold your questions until after each presentation. Each pitch is about ten minutes.”
“I can’t do that”, said Jobs. “I’m not built that way. So if you want me to leave, I will, but I can’t just sit here.”
— Steve Jobs (found via Signal vs. Noise).
I’ve been using Gmail lately. Overall it’s a great user experience, but two kinds of windows popping up annoy me.
First, why do links in the message body pop up in new windows, and why is there no way to change that?
Second, why use old-fashioned question popups for “there is no subject, are you sure?” messages? I’ve seen some cross-browser javascript for modal boxes in front of a page that seems to work fine. And unlike the standard popups, they aren’t modal across the tabs, only modal across the browser page.
I think there’s a geek consensus about the annoyingness of pop-up windows. Why is Google going with the stuffy, professional way of doing things?