Thursday, August 22, 2013

New Pluralsight Course: Fixing Common JavaScript Bugs


I'm pleased to announced that my last Pluralsight course has been released Fixing Common JavaScript Bugs.

This is not your typically "Let's learn JavavScript Course" from beginning to end. You can think of this course more like various episodes of Sherlock wherein you unexpectedly encounter a piece of dead rotting JavaScript and you must use your keen detective skills to identify and unpack the reason for its demise. And then, armed with the knowledge of the crime, you will be able to reconstruct the code back to it's original glory.

Since each clip is a mini-mystery, the names of the clip is more of a clue in order to not give away the culprit. However, to give you a taste of what you will encounter, here are some of the topics within...
  • Rules for Automatic Semicolon Insertion
  • Rules for how values are coerced when using ==
  • Different techniques to control the `this` implicit parameter
  • What hoisting is and how it can be different when declaring functions
  • Benefits of strict mode and a gotcha to watch out for
  • Gotchas with trailing commas
  • Reserved words and what to watch out for
  • Strange things when using numbers
  • Issues you may run into when checking types
  • The importance of truthy/falsey
  • Fake function overloading
  • When to use a closure and what one looks like
  • Various ways converting from one type to another
  • Weirdness with type wrappers
  • ... and more ...

Regardless if you use VanillaJS, jQuery, Backbone.js, AngularJS, KnockoutJS, Ember.js, or any other various library or framework, you will inevitably run into a JavaScript bug and will need to debug it. The focus of this course is not "how to debug", but rather the goal is to equip you with the knowledge of "how to identify a bug". In addition, we'll unpack what really is going on so that hopefully you can protect yourself from making future bugs or at least fix them quicker.

Do you feel like a little code mystery? Fire up your screen of choice (iPad, Apple TV, laptop, etc) and take a stab at Fixing Common JavaScript Bugs.

Thursday, August 15, 2013

Front-End Web Dev Trading Cards


NOTE: These trading cards don't actually exist. They are only a thought exercise :)

We should have front-end web development trading cards! I bet this would go wild on Kickstarter... or not, I don't know. I didn't grow up in a sporting family. Baseball trading cards seemed like a neat idea to me, but I wasn't interested in the subject.

I was talking to a group of individuals the other day and they didn't recognize one of the above front-end web developers. These were intelligent and forward thinking developers so it was an "Ah ha" moment for me. At one point I didn't know the above developers either, but I now see them as some of the most influential individuals in my field. It is often times difficult to know what resources we should be reading, where we should be learning, who should we be watching, and where are the places we can join in the effort.

At one point or another we all didn't know who the above developers were, but maybe having trading cards could help bring certain influencers to our attention. Why is that important? Because of their impact they have shaped the way our industry works. You may not agree with all of their ideas or frame of mind, but it is important to know where they are coming from and what they are trying to accomplish.

I could have made many more cards and I actually found it difficult to only pick a few. Who would you have on your trading card and why?

So What Is There Then!?!


So, if we don't have actual front-end web developer trading cards, then how does someone know who and where to look?

Currently the nicest resource that I know that specializes in helping a developer know who and where to look for what is going on in Front-End Web Development is http://uptodate.frontendrescue.org/

The website lists people to follow on twitter, blog to watch, newsletters to read, podcasts to listen to, and conferences to attend.

In addition you can also follow their @frontendrescue twitter account.

Wednesday, August 14, 2013

Reducing Filter and Map Down to Reduce

You've probably seen some of the new array methods in ECMAScript 5 (ES5) and you may have even used some of them before, but have you used the .reduce() method?

Not So Common Use Case


If you were anything like me, I first went and looked for some examples of how to use the .reduce() method. Most of the examples that I ran across all looked the same and didn't really seem very convincing to me. Most of the examples I found were adding up numbers across various objects. Here is the type of code that I saw...


Adding up values across a collection does seem like it could be helpful on occasion, but it didn't seem like it would be a very common use case in my day-to-day development. Deep down somewhere in my inner-algorithm I felt like there must be a better use case for this lowly .reduce() method. I wanted so much more for it.

SPOILERS: There is a better use case ;)

Data to Manipulate


So, before we proceed let's take a step back before revisiting the .reduce() method again. Partly to celebrate the announcement of the 12th Doctor and to make things a little more interesting we are going to use data about the 12 Doctors as we unpack .filter(), .map(), and .reduce(). Here is the data we will be using throughout the rest of this blog post.


Problem to Solve


What we want to do is to take all the Doctors from year 2000 until today and change their data up just a little bit. We want to massage the data a little bit and have keys of doctorNumber, playedBy, and yearsPlayed. We don't want to just directly map one field to another, but for doctorNumber we want to prepend a "#" and for the yearsPlayed we want to want how many years the doctor played and not a range.

Desired Output


Based on the above problem that we want to solve, the end result of our data manipulation should produce the following results.


So, let's first use the .filter() and .map() methods to solve this, and then we will redirect to solve the same problem using the reduce method.

Filter and Map



ECMAScript 5 Array Filter and Map


IE9+ and other modern browsers implement ECMAScript 5 and with that comes a lot of nice features in JavaScript. Some of these nice features are additional array methods. Two of these handy methods are .filter() and .map().

Here we use the .filter() method to narrow down the array items to only those that include Doctors that only began past the year 2000. The method will iterate over your array of items and invoke the function you provided passing it as an argument. If you return a truthy value from the function then that means you want to keep the item in the resultant array otherwise the item will not be included in the result.

The result of the .filter() method is an array so we then immediately call the .map() method off of that array. This method also iterates over the array, much like the .filter() method did, but the return inside of the function argument for .map() defines what that object will look like in the new array. In this case we are changing up our object to use new keys and to change up the values slightly.


ECMAScript 5 Polyfill


If you are using an older browser (IE8 or less) then you won't have the ES5 methods available to you. However, you can still use the above code if you provide a ES5 polyfill to fill in the functionality gap. A polyfill is a library that will mimic a native browser's API if it isn't available. HTML5Please recommends either using es5-shim or augment.js if you want to support ES5 methods.

The nice thing about a polyfill is that if the native feature does exist, then it will be used. The polyfill should only kick in if the browser does not provide the functionality you are expecting. The idea is that your code can be written in such a way that it follows the official browser API and hopefully one day you won't need the polyfill anymore or at least not many people will need it.

Underscore Filter and Map


Instead of using the native ES5 array methods or using a polyfill, you could instead decide to use a library such as Underscore or Lo-Dash. These libraries contain many helper utilities methods that I find helpful in most every web application I write. Two of many methods provided are .filter() and .map().


The code is very similar to what we had before. The main difference is that we need to split out our two method calls. This is a little cumbersome, but it makes sense because the methods return an array and we can't chain them together and continue to call Underscore methods.

Underscore Chaining


Thankfully, there is a way in Underscore that we can chain these together if we want to. There is some extra syntax sugar that we need to sprinkle, but it isn't too much.

The main thing you have to do is the call the .chain() method and pass in the array that you want to use while you chain Underscore methods. From then on you just keep calling Underscore methods as you like and it will share the array among the various methods. At the point you are ready to get the result of your manipulations you can call the .value() method to get the value.


I personally don't use Underscore's chaining mechanism, but it is nice to know that it does support that feature.

Reducing Filter and Map with Reduce


So, back to the main topic of this blog post. After finding the same use case over and over again on the internet (summing up a property over a collection) I then approached some friends of mine to see if they knew of another use case for the .reduce() method. The infamous Jim Cowart came to the rescue! He actually had written a blog post about this very topic called Underscore – _.reduce().

ECMAScript 5 Reduce


So, let's convert the above .filter() and .map() code above and convert it to use the .reduce() method instead. As the first argument you provide the .reduce() method a function that will be invoked for each item in he array. In addition this method also takes a second memo argument that will be passed from one iteration to the next. Instead of passing a number, like we did at the beginning of this post, we are going to pass an empty array. Then inside our function argument we will have an if statement, which will serve as our "filter", and if our criteria is matched we will push a new value to our memo array. The "map" happens as we push a custom object onto our array. Before we finish our function we need to return the memo array. Once the statement has completed then a new array will be returned that will be the filtered and mapped version that you wanted.

NOTE: The above polyfills listed also include the .reduce() method.


Underscore Reduce


Much like our previous examples, you can also use the .reduce() method from Underscore or Lo-Dash instead of the native or polyfilled version.


Other Methods


If you like what you see with .filter(), .map(), and .reduce() then you are in luck because there are many more methods that you can use that are available both in ES5 and also in Underscore or Lo-Dash. Knowing what is available is half the battle ;)