Dustin Diaz

Google Reader shorts now available on this here website

polvero@gmail.com (Dustin Diaz) — Thu, 03 Jul 2008 02:39:11 +0000

This past week I’ve implemented “Reader Shorts” onto DustinDiaz.com(a website that once talked about JavaScript on a regular basis) as a way to include updates on my website on a more frequent basis. These “shorts” are also available as an xml feed and can be commented on (en route to a discussion) using Friend Feed.
One funny thing that dawned on me this week is that after including my Twitter updates, and now my Reader Shorts, I’ve come to the conclusion that there is no need to ever come up with your own database backend and that you can fully run a website off of other free web services. That’s right. No Wordpress, PostNuke, or MovableType. Instead, simple services like FriendFeed’s API, or Google Reader (as we’ve already seen), Twitter, Flickr, or better yet, TinyPaste (which is actually kind of a stretch).

Needless to say

I’ve caved in on trying to maintain this website and using Social Web Services to keep my 7,000+ subscribers seems like a good idea.

On another note

Google has been keeping me busy these last few months on Gmail where we’ve been diving into some exciting stuff. I recently moved to San Francisco so I now have ample time to add content to my Reader stream while shuttling to work in Mountain View. Wifi on a bus is super rad! And on that note, my stop is coming up which concludes this post. Cheers

Scoping anonymous functions

polvero@gmail.com (Dustin Diaz) — Tue, 06 May 2008 19:32:13 +0000

This is obviously a no-brainer in that knowing something like this works in JavaScript, but it never really occurred to me to even do such a thing until today. Take the following example which ‘calls’ the anonymous function within a unique scope:

Scoping anonymous funcitons

var o = 'hello world';

(function() {
  alert(this);
}).call(o);

It seems ridiculous (in a good way), but it works!

So what’s this mean?

It’s actually a big deal. Think about how many times you’ve lost your desired scope due to being inside the scope of another function. Confused? How many times have you done the following:

Pitfalls anonymous functions

// timeout functions
function Constructor() {
  this.foo = 'bar';
  var that = this;
  this.timerId = window.setTimeout(function() {
    alert(that.foo);
  }, 10000);
}

// local functions
Constructor.prototype.getFoo = function() {
  var that = this;
  var getInternalFoo = function() {
    return DED.isString(that.foo) ? that.foo : 'new foo';
  }();
};

Ok, still not a huge deal, but we can clean up the code a bit, and I would sway from using this on non-anonymous functions where scope should be explicitly defined by the author. Here’s how we can rewrite the code above without using the silly old this = that convention.

Rewritten with proper scope


// local functions
Constructor.prototype.getFoo = function() {
  var getInternalFoo = function() {
    return (DED.isString(this.foo) ? this.foo : 'new foo';
  }.call(this);
};

Ok, what about function callbacks that need scope inducing

(Hehe. Scope inducing, that sounds funny… (anyway)) As you noticed above in the first example with the setTimeout, the first argument takes in a function callback which is different than simply immediately invoking a function. Funny enough, the work around for this is to…. (yeah you guessed it), add another closure! Note the two following snippets of code. The first immediately executes and alerts “hello world”, the second waits for five seconds, and does likewise:

Scoping it up

var o = 'hello world';

// first snippet
(function() {
  alert(this);
}).call(o);

// second snippet
window.setTimeout(function() {
  (function() {
    alert(this);
  }).call(o);
}, 5000);

Pretty fun, huh? Yeah, I thought so too. Cheers.

Maximize your browser window on a Mac

polvero@gmail.com (Dustin Diaz) — Wed, 16 Apr 2008 21:24:26 +0000

There are very few things I don’t like on a Mac. One of them is the ability to maximize your application windows like the way you can on Microsoft Windows (Yes, the irony (no, actually that’s not irony, it makes complete sense)). What a Mac will do when you hit the green “+” maximize button is size your application window to the contents that your window contains. Not helpful. What MS Windows will do is actually size your window to the size of your screen blocking out all other applications. To me this is helpful since I don’t like these distractions in the background, and I enjoy the full realestate that I’m working in. Others seem to disagree saying that this Mac version of maximized space allows users to multi-task better. The fact is, I don’t want to think about multi-tasking when I don’t have to. Furthermore, there is no keyboard shortcut on a Mac to trigger this maximization. On Windows you can hit “alt + space + x”.

Fixing it

Actually, there is no real fix (unless Apple builds it into the OS), but I’ve come up with a hack (work around) for my browser. First thing to do is to create a text file and call it “maximize.html” (you can call it what ever you want, it’s only temporary). Then populate it with the following contents.

Maximize code


  
    maximize
  
  
    
      Maximize

It should look like this:

Next you want to open up this page in Firefox:

You should see a simple page with a link. What you want to do now is bookmark it. You can do this by control + clicking the link to bring up your context menu. Then choose “Bookmark This Link…”

Add a keyword shortcut

Obviously, this has been discussed before. If you’re using Firefox, you can add a keyword shortcut to make it even easier to use this functionality. Since afterall, this is usually the kind of setting you just want to trigger on the fly without having to use your mouse. To do this, simply track down your bookmark, load up the context menu by control + clicking the bookmark, then choose “Properties”

Then type in a short letter into the keyword input box… like “m” (the actual keyword is up to you).

That’s it

Try it out. It’s not optimal, but it does what I need when browsing the web in full maximum real estate.

Naked ‘08

polvero@gmail.com (Dustin Diaz) — Thu, 03 Apr 2008 19:37:31 +0000

The third annual CSS Naked Day is back in full swing. Sign ups have began for the event that will bring the web back to the nude on April 9th, 2008. Please take special note that the date is different (reason explained on the official site). If you want to sign up, please use the sign up form on the official website.

As a reminder, CSS Naked Day is a world-wide event that lasts for one international day (48 hours) where webmasters around the globe strip CSS from their websites to promote Web Standards with layered semantic markup, and a clear separation between content, and presentation to enhance accessbility.

Cheers!

Breakfast with Dustin 2008

polvero@gmail.com (Dustin Diaz) — Sun, 09 Mar 2008 16:39:39 +0000

This is your annual post to remind you SouthBy-goers in Texas that “Breakfast with Dustin” will continue on the final night at IHOP which is just a half mile away from the conference center beginning sometime around Tuesday at midnight ~ Wednesday 1am and surely to go on until about 4am for people looking for something to take up their time before their flight back home or just want to go to an “after the after the after-party.” This was once upon a time an event that I paid for, but now people find that paying six dollars for a few hot cakes, eggs, and orange is just fine coming out of their own pockets. I too, am fine with this. Nevertheless, let the tradition continue and I hope to see some of you there.
In the meantime, I will be twittering where I’m at and where I’m headed as well as posting to flickr. I’ve so far posted the Karaoke night at Buffalo Billiards, the respect panel with Zeldman moderating, and of course, the keynote which was a conversation between Henry Jenkins and Steven Johnson.
Cheers and see more of you later!

Randoms Log 1

polvero@gmail.com (Dustin Diaz) — Sun, 02 Mar 2008 06:57:27 +0000

It occurred to me that I’m a person who likes ramble. Lucky for you, I’ve kept that to a minimum here on this blog. On the other hand, this blog has been lacking some character lately so I thought I would incorporate a few ramblings into single posts every so often. Feel free to comment on any given ramble, or completely ignore them and wait until I post something worth your while. Cheers.

Hair

My hair appears to have reached a max-length. It’s grown longer than I’ve ever really had it. But now in the shower I’m starting to notice that hairs from my head seem to be clogging up the drain. I have a feeling I’m going to be losing my hair quicker than I think.

Driving

I can’t stand slow drivers. I understand folks driving moving vans or big rigs or it’s somehow obvious that you’ve got a motor problem where I can see smoke coming out of our hood. But besides those people, everyone should be driving fast. The speed limit should really be 85 MPH on all highways that are currently 65 MPH. And what’s with three lane roads that have 35 MPH speed limits. Have you ever driven that slow? Really, try it. It’s hard.

Canadian Beer

In all honesty, wasn’t as great as I thought it was going to be. After trying a dozen Hefeweizen beers in Vancouver, my conclusion is that America still makes better Hef’s (yes, even better than Belgium). People generally say American beer is crap, but it’s not true. It’s just that the only “American beer” people can think of is Budweiser, Miller, or Coors. Go out and try a Widmer Brother, a Blue Moon, a Sierra Nevada, or a Gordon Bierch. You know what I’m talking about.

The Portland Airport has free wifi

I think all airports should have free wifi. Just like the city of Mountain View.

Playing songs on repeat

I am creature of the “repeat song” feature that media players include. When I hear a song I like, I play it to death; over and over and over again. I amaze myself though that even when I’ve played a song 50 times over, I still won’t know the words. It doesn’t mean I’m not listening, it just means I’m listening to their voices, not their words. I consider a song successful if I feel the way the artist had intended, even if I didn’t understand the words.

Canon vs Nikon

This age old debate still seems to populate forums and mailing lists. I personally shoot with Nikon, and I have my own reasons why that I’m not going to into. But really, if you’re one of those people that still complains about this, you’re not taking enough pictures. The only thing that Canon and Nikon users can both agree on, is that they’re both better than Sony and Pentax.

Twitter

I’ve been using Twitter for almost a year now and it’s hard to say why I keep using it. There’s a funny paradox that runs across my mind every time I send a message to Twitter. You see, I do it as a personal benefit to myself. Like keeping a little journal of snippets of what I’m doing as I live. I figure that one day it will actually be interesting to go back and read. On the other hand, I keep my Twitters public and I have “friends” on Twitter. With that in mind I always think to myself “people are going to read this, so I should be clever.” Often times, that keeps me from twittering anything at all. Every twitter I make, I think it’s going to be the last; until I send another.

Facebook

Seriously. Still?

Camping

I have always said, and will always say “Camping without a camp fire is pointless.” If you didn’t have a camp fire, then you didn’t go camping. Period.

Bike to work day

About ten months ago it was Bike to work Day. Kind of like an Earth Day. You know, keep the car at home and pollute the earth a little less than you normally do. I took on this feat, however, I didn’t bike back home (I got a ride back). To this day, my bike has been sitting next to my desk. Perhaps the next Bike to work Day that rolls around, I’ll return home with my bike.

Sushi

About a week ago I tried Sushi for the first time, probably ever, and it wasn’t bad.

Photography

polvero@gmail.com (Dustin Diaz) — Tue, 19 Feb 2008 09:29:17 +0000

With all due respect, this site has mostly become a JavaScript weblog, but within the last two years I’ve really started to dive into photography. I own a Nikon D40 and D300 and read sites like Ken Rockwell. If you haven’t noticed, my Flickr stream has almost reached five thousand photos. I’ve made it a regular habit to bring my camera everywhere I go. Yes, this includes work where I’ve been stopped on a few occasions by a security guard only to show them my badge that every photo I take is fairly legitimate.

Nevertheless, the point being is that I’ve been getting a bit more serious into photography which makes it slightly more complicated to maintain a JavaScript blog. I DO in fact maintain this blog on a daily basis. My delicious feed is updated quite regularly, my prototype submissions seem to come in when people feel like submitting them, and of course my site pulls in my own flickr photos tagged dustindiazcom, effectively showing off my personal favs. However for those of you following my blog because of its original purpose, I apologize, the posts have really come to a minimum. If you haven’t done so already, take a gander at my archives or listen to some old podcasts, or perhaps if you’re motivated sit down and feast your eyes on a classic screencast.

Back to the point

So yeah, I’ve been walking around the planet capturing life with a little black machine in the palm of my hands known as a camera. If you’ve been enjoying what you’ve been seeing on Flickr, please do leave a comment. I’m sure most of you have added me as a friend by now.

I’ve been reading

Like I said before, I’ve been reading pretty much everything on Rockwell as well a few books that have caught my attention like Taking your photography to the next level by George Barr and Designing a photograph by Bill Smith. Both books that go beyond the mechanics of a camera and talk about framing and composition more so than messing around with apertures, white balances, ISO’s, and megapixels. I leave the mechanics to Ken Rockwell since he’s one of the few nerds that actually goes into high ISO comparisons (which by the way, is pretty cool too) but also believes that your camera doesn’t matter (also true (but of course, my opinion as well)).

Depth of Field

Somehow I became a depth of field junky and everything I captured had to do with the fine details. Take for example, this photo:

You can see my favorite beer (Hefeweizen) just coming into focus, which demonstrates a shallow depth of field. As a novice I thought the only way to achieve this was to buy a new lens that stops down with a low number (which is what I did). As it turns out, there’s three ways you can affect depth of field as learned through this interactive depth of field tutorial. After knowing such knowledge I then grabbed one of my older lenses and started taking photographs that revealed close-up details like this maple leaf just by getting up close and zooming in close:

I was instantly hooked to this art-form known as “bokeh” disregarding good color or composition. I figured if it had good bokeh then it was instantly a good photograph.

Good color

Bokeh alone is not good enough, and getting good color is often difficult. To this day I still haven’t mastered the art of white balancing. I know only a little of the science behind it, but it’s hard to tell what’s going on inside my Nikon when I set it to auto mode vs. cloudy mode (which happens to make my photos look warmer (even when it’s not cloudy)). I’m also a sucker for saturated photos, but sadly enough, over-saturating your photos can make them look very amateurish. I know, I have a lot of bad over-saturated photos that I thought were cool.

Good Composition

This is where “your camera doesn’t matter” really comes into play. Composition is really either about capturing the moment or simply lining up angles. Simply centering is the natural instinct of every point-n-shooter. But I’ve found that throwing subjects to the side adds a nice dramatic effect to the composition. Take for instance this fire hydrant I shot near my usual parking spot at Google.

Centering the image would have boring, but throwing it slightly off-centered makes it feel dramatic. Who knows why, but don’t you feel it? It’s as if there was a disturbance in the force and you can see it visually.

Making the perfect photograph

To this day I don’t know what makes the perfect photograph. It is of course an art form just like paintings or music. Art is in the eye of the beholder. But try locking yourself in a small room and take five hundred pictures. Surely you’re going to come out with a picture that is better than one of the other ones.

Photography is like JavaScript

As if you didn’t know it was coming to this. But let me be the first to put it into words. Photography is like JavaScript, and JavaScript is like photography. They are both expressive and beautiful. They can be done bad or good. They are both load and go. Pick up a camera and start shooting or simply grab a code editor, write code, and load it into a browser. Both are fun to compose. Both can view things from several angles. Both can detailed and complicated. Both can be simple. They are both object-oriented.

Conclusion

There is no conclusion. I will keep taking photos, capturing life as I see it. This was more or less an excuse to blog about something since I haven’t done so in over a month. I hope you’ve found it entertaining in the meantime.

Sincerely,
Your Blogmaster

Add and Remove Elements with JavaScript (reprise)

polvero@gmail.com (Dustin Diaz) — Thu, 03 Jan 2008 00:42:13 +0000

A long time ago (February 28th, 2005 to be exact), I wrote a post titled Add and Remove HTML elements dynamically with JavaScript. To this day, it continues to be the most highly traffic page on my website. However there is a number of things I’d like to point out that we can improve upon that implementation (since it is very outdated), and for the record, retract my three year old statement where I said “I hate JavaScript.” That simply isn’t true anymore, and it hasn’t been true for a while now. Nevertheless, let’s move onto business. Here’s how you can simply add and remove HTML elements.

The basics

When it comes down right to it, the bottom line is this. You need three ingredients. Event attachment; the ability create and append elements, and the ability to remove them. For example:

attach event / add / remove

* element.addEventListener(el, type, fn);
* parent.appendChild(element);
* parent.removeChild(element);

Yeah. That’s it. But this wouldn’t be much of a post if there wasn’t a demonstration of how to wrap this up in a easy to use interface. For this basic task, consider using two singleton’s as a skeleton to act as your API which will appropriately wrap your Dom object, and an Event object.

Dom and Event

var Dom = {
  get: function(el) { },
  add: function(el, dest) { },
  remove: function(el)
};

Event = {
  add: function(el, type, fn) { }
};

Your implementation code can live in a closure wrapper when we add this behavior to the window’s ‘load’ event.

implementation

Event.add(window, 'load', function() {
  // enclosed implementation here
});

Filling in the gaps

We can now essentially drop in our interface to do our heavy lifting.

Interface

var Dom = {
  get: function(el) {
    if (typeof el === 'string') {
      return document.getElementById(el);
    } else {
      return el;
    }
  },
  add: function(el, dest) {
    var el = this.get(el);
    var dest = this.get(dest);
    dest.appendChild(el);
  },
  remove: function(el) {
    var el = this.get(el);
    el.parentNode.removeChild(el);
  }
  };
  var Event = {
  add: function() {
    if (window.addEventListener) {
      return function(el, type, fn) {
        Dom.get(el).addEventListener(type, fn, false);
      };
    } else if (window.attachEvent) {
      return function(el, type, fn) {
        var f = function() {
          fn.call(Dom.get(el), window.event);
        };
        Dom.get(el).attachEvent('on' + type, f);
      };
    }
  }()
 };

Then simply use it to our convenience.

implementation

Event.add(window, 'load', function() {
  var i = 0;
  Event.add('add-element', 'click', function() {
    var el = document.createElement('p');
    el.innerHTML = 'Remove This Element (' + ++i + ')';
    Dom.add(el, 'content');
    Event.add(el, 'click', function(e) {
      Dom.remove(this);
    });
  });
});

You now have something that’s easy as Pie! View the demonstration. Cheers and happy new year!

JS Design Patterns Sample Chapter available on YUI Blog

polvero@gmail.com (Dustin Diaz) — Mon, 17 Dec 2007 20:01:38 +0000

Right now chapter nine of our book Pro JavaScript Design Patterns is available on the YUI Blog, The Flyweight Pattern. Go ahead and have a look see and check it out. Feel free to leave comments on the YUI Blog website.

Pro JavaScript Design Patterns hits the shelves

polvero@gmail.com (Dustin Diaz) — Tue, 11 Dec 2007 07:56:05 +0000

Today is an exciting day as my book has finally arrived and now available in stores. For those of you who have pre-ordered the book, your copy is on its way shortly. For anyone else, if you have an interest in software design patterns and want extend your knowledge on professional JavaScript development by applying these principles and techniques to the JavaScript language; look no further, and buy our book written by yours truly and Yahoo! Frontend Engineer, Ross Harmes.

Having been fascinated by Design Patterns mid 2005, that makes this book almost two years in the making as I was always eager to try and apply these patterns into the JavaScript language. With that in mind, a lot of thought, discussion, prototypes and proof of concepts were put into the authoring of this book which is why this will be a near timeless classic for the JavaScript language and an essential for the modern frontend programmer to add to his or her JavaScript repertoire seasoning.

Cheers to a happy launch and hope everyone is having a great holiday season.