Archive for the ‘AJAX’ Category

Misuse of JavaScript annoys me

Saturday, March 29th, 2008

IMDB’s image provider has implemented the classic way of preventing image stealing: return false for the right-click or contextMenu event.

This annoys me so much.

Here, try right-clicking (or any clicking) on this link.

Ohhhh man, aren’t I clever and devious. I’ve told that link, via the evil JavaScript pseudo-protocol definition in the HTML <a> element to ‘trap’ your click events and do nothing with them.

And it’s so trivially easy to subvert, it just irritates me that this qualifies as security and / or is demanded by clients. A demonstration should suffice. In these examples, IMDB tries to prevent me from grabbing images out of their pictures tool. Sigh. Must it be so?

Or…

So, please, stop. Just stop. Because you don’t stop the slightly-enlightened from getting the goodies:

madeline_kahn

Yesterday’s post looks a little incoherent with a day of rest between it and I. Based on the entreaty of Mr. Graitcer in the comments, I thought that perhaps I could try to characterize what it is to be fatigued in this way.

First, let’s just say that it’s not the expectation of the teacher or the class curriculum that you work yourself into fatigue of this type. It’s not necessary or required. Yet in both of the BNR classes I’ve taken, the students worked late into the night on their own projects, or improving the assignments.

Therefore, the motivation to work to this level of fatigue is not extrinsic, it is clearly intrinsic. This is, clearly, the more cruel mistress. In a previous post I spoke of the self-selection implicit in defining the population for BNR classes. I suggested that one of the primary contributing factors in being in the class is having the funds to pay the fee or having a job where the administrators feel that paying such a fee for such a person is a worthy investment. People who have such funds ( if the meritocracy be believed ) or faith of their financial administrators likely get to this position be not being able to simply let it go.

I have worked through weekends at work, on work stuff simply because I could not let it go. I have gone to work early, repeatedly, after a few hours of sleep because the problem stalked me. It wouldn’t let me go, it wouldn’t let me sleep. It was better to be awake, approaching understanding, than to endure fitful sleep under the Damocles sword of the unfound answer’s shadow.[1]

Many people I’ve talked to say: “Go do something else, come back to it.” My sweet girlfriend has shuffled around in the wee hours to find me tapping away and urged me to come back to bed. I hear this, but this is something that I ( and I suspect many others ) simply cannot do. If I were to come back to bed I would imagine my text editor. If I were to go do something else I would be irked that I couldn’t look up on Google possible solutions as I was doing it.

I don’t know it well enough. I don’t understand it well enough, I don’t see how the parts work. Granted this quality among the full rank of attendees, you can see how I would suggest that a startup out of any one of these classes could blow the doors off of any particular problem.[2]

So it’s under this background mentality that you’ll see BNR-class attendees whipping themselves to perform, to create, and realize until deep into the night. Simply put, this is just how we’re wired.

Attendees like to maximize effort. That’s why we’re programmers, we like the force multiplier effect of knowing a programming tool. The reason we’re at this class is because we want help learning something very difficult in the most efficient and deep manner possible. BNR classes deliver this. So much of the work done here can be seen in light of trying to optimize knowledge gained per unit time.

Most of us have attempted to learn the material back in “the real world”, but we couldn’t get the information to ‘etch’ deeply enough. Learning this material against deadlines, users, wives, taxes, other obligations was simply too slow or too confusing. If you are a “can’t let it go” person who knows that shortly he’ll have to be back in the real world where he’ll have to let it go and you won’t have access to immediate peer feedback or a guru, you work hard.

Like summer camp, we come, we know it will be hard, but we know, looking back, we’ll be amazed by how much we learned, how much we changed, and we’ll remember the conversations, the food, the hard nights. We’ll remember that we were part of a special community for a brief flicker of time.

And if, to chase to that next eureka, we have to have bleary eyes and catnaps in the conference room, so be it. Damn the torpedoes, I came to learn rails.

So we slurp down cups of rocket fuel, we dose up on small quick munchies, we talk, we think, we code, we edit, we close our eyes and doze and then turn back to it, we take more fuel[3]. At the end of a multi-hour run your sugar crash comes but you have to keep pushing. And sure, you could go back to your bedroom, but the feedback loop outside of Oz is too slow. You see, we have to be good enough to be independent when we leave because, it all likelihood, we will be.

So what’s it like, in the dark of night as we ply away? Well, to set the scene, we’re in a very large conference room with a large projection screen hanging from the front wall. The churn of the heating provides a constant white noise that is overlain with collective symphony of keyboard tapping[4] and occasional double-click.

For the most part it’s fairly quiet, except that there are ‘flexible duos’ merging and separating. These duos emerge when one party wants to discuss an idea or a problem he is describing to the other party. They conversation is usually pretty quiet, but occasionally precipitates a whiteboard session.

The lighting is dim, but not dark. The eyes of the coders in troglodyte mode is respected.

And, of course the half audible curse of ‘fuck’ or ‘damn’ as an execution fails, or even worse, does something you didn’t know about and or didn’t plan for.

The tablecloths that drape the tables are rumpled. There are big reference books from O’Reilly press and the Pragmatic Programmers stacked up, splayed open, or fallen onto the floor.

IMG_7286.JPG

With the dim lighting and the lack of a clock in the room, Vegas-style, you could easily fall through scheduled reality and forget that time is actually passing. Eventually, the time will turn late and that’s when the real fatigue sets in.

There are enough peers present such that your quorum sensing lets you know “It’s OK to stay a bit longer”. Your eyes are dried out from staring at the screen, the typing fingers are sore and tired. The myriad of files you edit get lost, your new enemies are questions like “Where did I just write that thing a second ago?”

You reach the next item on your “to do” list and you attack that problem…and keep on going. In some ways it’s actually invigorating, working on something you care about this much, something that has this much of your love in it. Few things “outside” can hold your interest like this. In some ways, you feel more alive doing this kind of work in this environment that you may have felt at your day job for the last year.

Eventually the discussions between students achieves a sort of level of conversational shorthand. We’ve all been speaking to one another in these highly specialized terms for days and days. We’re all coming from the same reference and our discussions are short, brief, and truncated.

As the evening wears down more stammers work their way into the dialog. The solutions wear down. The bowl full of ice chips melts and the bottles, coffee mugs, and cans on the desk continue to multiply as the diminishing returns on coffee and sugar is reached, crossed, and run over by a distance of several miles.

IMG_7286.JPG

But eventually you reach your goal and you shuffle back to your hotel room and unwind by watching infomericals or NOVA and then drift off to sleep.

This is the society of the hack, and you’ve done a good day’s work. Sleep is quick and hurried, because the next round of class starts bright and early at nine in the morning.

Footnotes:

  1. Incidentally, the Silicon Valley exacerbates this problem. Most people can’t let it go, and there’s not much else to do besides work anyway, thus so many good ideas and good companies coming from that area.

  2. This is what the early internet adopters must have thought would happen. Global, flexible, talented groups meeting and fluxing, producing brilliance. Regrettably, it seems that this talent needs to be pulled out of their quotidian affairs to achieve this maximal “group flow” dynamic ( see: Cocoa Dev House or Burning Man )

  3. I recall a passage in The Fountainhead where Roark falls asleep at his drafting table and breaks a pot of coffee. I recall Ender Wiggin facing yet another round in the battle room after another brilliant performance around the absurd rules. In these passages I always see the author comme createur writing his experiences into the character’s life.

  4. Not really tapping. Apple laptops don’t have a cheap, plastic, clackity sound, like the PCs, but rather have a very pleasing whisper.

Hi all,

After the lengthy tour of duty yesterday, I’m back in for another lengthy day. I think that Wednesday is really the grinder day.

First, you’ve been lectured to for the last 3 days. There are very few minds that can take 8hr. / day lectures without feeling a bit tapioca-ish on the 24th hour.

Secondly, you’re listening and then working very hard on something that you just were introduced to. You have these head bashing against a wall sessions and then, suddenly, you’re set free ( because you’re doing something that’s old hat, something you learned, say, that morning ) and then you hit the wall with all that built-up acceleration. It takes a certain mental flexibility.

Third, the sugar, the munchies, the food, etc. By this time it’s all having some funky effects on your body.

Homesickness becomes a bit of a factor. You remember how good your bed is, how nice it is to be among your things and your life.

Now, about the work. You see, you can slide on day 1. You learn the material, you review it, you’re probably OK. DON’T BE FOOLED this is your one and only chance to get ahead of the abbatoir days 2 and 3.

Then comes day 2. If you want to keep ahead you’ll be working late on day 2, maybe even thinking that you’re going to catch a break on day 3. But no, my friends, day 3 is the grinder. Day 3 says “OK, you’re determined, but how determined are you?” You’re bleary from day 2, the cokes, the mountain of water bottles, can you do another 18-hour run at things?

At day 4 you’re going to be exhausted. You’re going to reach your limit. You start to feel like your treading water capability is turning into negative progress. Unless you’ve stayed up on the exercises and mentally integrated the concept and become with the ‘way things are done in this language’, you’re going to feel a bit behind.

Fortunately day 5 is the wind-up day. There’s a sense of graduation and possibility. If you can integrate the first 3 days quickly you’re going to be in a good position to re-discover the last two days quickly. I think that may be the optimal take-away from a class like this.

I’m not sure, I’ll be a good empirical guinea pig for the next few months.

Making some progress with Javascript menus

Saturday, September 2nd, 2006

As I posted earlier, I’m undertaking to better understand the basics of the DOM, Javascript, and DHTML on my pilgrimage to being Ajax competent. I’m using Ajax in Action as my guide.

Recently at work, we had need of a basic ‘dashboard’. It’s a pretty simple design: boxes on the left with one level of drop down for menus, a big, central ‘content’ section in the middle.

I was thinking of how I wanted to implement this.

  1. It needed to be flexible (i.e. layout should be described in an XML file)
  2. It needed to be updatable without touching the JavaScript (to get a feel for the Ajax design)
  3. It needed to be somewhat visually appealing.

The goal was to use Javascript to create a 100% DOM rendered page that worked in IE and Firefox.

Here’s the product

Here’s how I did it after the jump….

Going further with javascript and the DOM

Sunday, August 20th, 2006

One of the main things that really blows programmers’ minds when they really see the power of it is a topic called ‘closures’ or ‘lambda functions’ or ‘anonymous subroutines’.

I decided to edit the previous post’s code to use closures, to get the hang of this technique in JavaScript. It makes your code a lot more flexible as I think the simple example below demonstrates.

For the code, look after the jump…

(more…)

If you’re not in the programming field, you likely got hit by a bunch of acronyms there as if you had been hit by a bus. Let me break it down:

  • AJAX : A technique that makes websites look fast and smooth, unlike “old” style application. Think about the way Google maps looks, or Netflix.
  • DOM: HTML (the language that web pages are written in) can be seen as a “tree-like” structure. This structure goes by the name of “DOM”, or “Document Object Model”
  • Javascript: A language for telling your browser ( Firefox, IE, etc. ), to do something to the HTML page sent from the server within your browser. Thus what’s on the server and sent to everyone else doesn’t change, just your particular ‘view’ in *your browser

So, anyway, if you want to write in the AJAX mindset, you need to understand the latter two ideas rather well. The last time I really looked at Javascript was for one of my senior-year classes (way) back in 2000. Javascript has come a long way (baby) and with the advent of the AJAX technique, it’s really the only game in town.

I wrote a very simple script to help me get the hang of the language, so for you, here it is.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Steven Harms">
<!-- Date: 2006-08-19 -->
<script type="text/javascript" charset="utf-8">
    function configurePage(doTextChange){
        // doTextChange is a variable passed as a YES or NO argument that
        // is used to decide if the default text 'Moopy Hobo' is changed to
        // something else

        //Get the HTML <body> tag reference
        var htmlParent = document.getElementsByTagName('Body')[0];

        //Create a <p> tag element
        var childEl = document.createElement('p');

        // This is something subtle, you need to create a text node and bond
        // that to the <p> element.  In the DOM inspector, this shows
        // up as 'nodeName' = #text
        var tf = document.createTextNode("Moopy hobo");

        // Bond the text to the <p> element
        childEl.appendChild(tf);

        // Handle the argument
        if ( doTextChange == 'YES' ){
            childEl.firstChild.nodeValue="Monsier Hobo"
        }

        // This is for getting familiar with using the DOM to manipulate
        // text elments

        //Changing the style at the line level...
        childEl.style.width="200px";
        childEl.style.fontFamily="garamond; helvetica";

        //Changing the style at the line level, but with CSS
        childEl.className='graybackground';

        //add some other JavaScript events
        childEl.addEventListener('mouseover',changebk,false);
        childEl.addEventListener('mouseout',dazzle,false);

        //Finally, put this loaded up <p> tag onto the page by appending
        //it to the <html><body> node
        htmlParent.appendChild(childEl);

    }

    // A function for callbacks, the alert() is pretty annoying when
    // testing so I've commented it out, but enabling it makes things
    // a bit more obvious
    function dazzle(){
        //alert('you are dazzled');
        this.className='graybackground'
    }

    //Nifty!
    function changebk(){
        this.className='redbackground'
    }
</script>

<style type="text/css" media="screen">
    .graybackground{
        background-color: #BBB;
    }
    .redbackground{
        background-color: red;
    }
</style>

</head>
<body onload="configurePage('YES')">
<!-- Look Ma, no content! -->
</body>
</html>