Skip to content

Beautifying using JSON.stringify and useCapture

May 18, 2012

This week I’ve been getting back into the swing of things at work after having a week off due to an injury.  Once I got back I began working on two small bugs in Popcorn Maker, bug #519 and bug #619.  Both of these bugs involved 1 or 2 line fixes, but were quite interesting in the fact that I learned a lot about two JavaScript methods that I use almost regularly, JSON.stringify and addEventListener.

Bug #519 was about making sure that trackevent handles ( used to resize a trackevent ) made the trackevent gain focus. Currently, clicking on a trackevent would give it focus, but clicking on the handles ( which are a child element of the trackevent ) would not.  After digging into the code a bit nothing jumped out a me that was glaringly wrong, so I figured it was an event bubbling issue.  I remember that the third arguement of addEventListener ( the one everyone forgets about ) had something to do with event bubbling so I went and looked it up on MDN.  The third arguement, also called userCapture, basically specifies if you want events to bubble as they normally do, from a child element up to it’s parent ( which means it would have a value of false, which I’m sure everyone is used to seeing ) or create what is called an event reflow ( I think ) and change the way an event gets triggered. By setting userCapture to true I noticed that events now fire from the parent element first and then to each of it’s children ( pending they have an event listener for the given event ).  This seemed to do the trick and the trackevent handles were now recognizing a click event and everything was being handled as it should.  The fix that I just explained worked because the event must have been getting captured and thrown away somewhere before it bubbled up to the parent element.  Doing what I did allows us to make sure that the event gives priority to it’s parent first ensuring that it get’s fired there and then fires the event on each of it’s children.  It was pretty cool playing around with how userCapture works and the difference it makes on events that get fired.  I don’t see setting userCapture to true to be something I will use very often, as an event that bubbles from a child up is typically what you want, but knowing how to change the flow and use it accordingly is definitely a powerful tool to remember we have in our arsenal as coders.

The other neat thing I learned this week was that I could use JSON.stringify to beautify JSON. Up until now I have only ever used JSON.stringify to do convert a JavaScript object into a string and never even bothered looking up what other arguements it took.  For bug #619 I wrote a recursive JSON beautifying function to do what I needed and put it up for review.  Bobby Ricther then asked me why I didn’t use something that was built in to do this already, like JSON.stringify.  I had no idea what he was talking about so I looked it up and was pretty amazed at what I found out.  I learned that JSON.stringify actually takes 3 arguements, the first being the source object, the second is a replacer function which lets you customize how you handle various data types, and the third being a spacer which lets you specify how the JSON is printed out. My fix went from a 25 line function to a 1  line fix once I found this out, which looked like the following:

var beautifiedObject = JSON.stringify( obj, null, 2 );

And that was it, I have beautified JavaScript in 24 less lines of code.  This is one of those things that you have to do the hard before you can learn the easy way and how awesome it is. Unless someone told me, I probably would have went on writing my own JSON beautifier functions until the end of time, so thanks for sharing that knowledge Bobby!

This week in general has been great for getting back into the swing of things again and refreshing myself with Popcorn Maker again, it’s crazy how fast the project is moving now a days. You don’t realize the crazy amount of bug mail you get until you take a week off and let it pile up.  Also with a project moving as fast as Popcorn Maker it’s also hard to stay up to date after taking that much time off, the code is changing so much everyday it’s crazy.  I’m looking forward to next week and getting ready to release 0.5 of Popcorn Maker!

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: