What's the difference between Volts, Watts, and Amps?

In a world full of technology and electronics, we are often bombarded with terms that we seldom understand. Three terms that are thrown in front of us across all electronic products we purchase today are volt (V), watt (W), and amp (A). We see them listed everywhere - but what do they mean? Let me break these down for you.

I like to explain technical topics using every day metaphors that everyone understands. I find this leaves little room for confusion and allows people to move on and learn at an accelerated rate. In the case of electrical units, let's use the well-known garden hose as our metaphor of choice.

Let's start with volts (V).

Volts

The volt is a measure of electric potential - the energy that could be released if the current was allowed to flow. Under our garden hose metaphor, volts can be equivocally compared to water pressure, or, the potential that the hose has, should the current be allowed to flow.

Let's say we have a simple garden hose equipped with a spray nozzle. The nozzle can be either turned on or off, but the main faucet the hose is connected to is always turned on. Under this circumstance, the water pressure within the hose, whether or not the hose nozzle is open, remains the same. Now, think of the water pressure in terms of volts in a house, and think of the nozzle on the end of the hose in terms of a lightbulb. As long as there is power coming into the house, the voltage on the line remains the same whether or not the lightbulb is turned on.

In other words, the electric potential of the line remains constant at 120 volts (typical US home), regardless of any current flowing. Just like the water pressure (PSI) in the hose remains constant whether or not water is flowing out of the nozzle.

V = W / A

Next, amps (A)

Amp

Amps (A) or Amperes, are used to express the flow rate of electric charge. Going back to our garden hose metaphor, we can think of amps as the flow rate of water through the hose (gallons per minute). Referring back to volts and potential, if the hose nozzle is turned off, amps drop to 0, but voltage (electric potential) remains.

Amps are typically used to determine the current draw of appliances, and the gauge of wire required for a specific circuit within a home. The higher the calculated amperes, the thicker the gauge required to support the higher rate of flow.

A = W / V

Watts

A watt (W) is simply a unit of power. It can be used to express the rate of energy conversion or transfer with respect to time. Now this, may sound a lot like amps, but in our garden hose example, think of it as how quickly we can fill up a bucket with water from the hose. It is also the product of volts and amps - expressed as the rate at which work is done when one ampere (A) of current flows through the line with one volt (V) of electric potential.

To conclude, volts are the water pressure, amps are the flow rate, and watts are the rate at which we can fill a bucket with water.

JavaScript Event Delegation

Anyone who has ever been in a technical interview for web development has undoubtedly come across the topic of event delegation. If you don't know what event delegation is, you'll find yourself at the embarrassing intersection of "I feel like a dumbass" and "what are you talking about?". Let's look at some simple javascript code (jQuery) to get a better understanding of what this is.

$('#mySelector').click(function(){
    console.log("You clicked mySelector");
});

In this example, the element with the id of "mySelector" is clicked on and that click event triggers the console.log function to print out the message. This is simple. The html code for this element is this.

<a href="#" id="mySelector">Click me</a>

Here's where the problems start arising. What if you had a list of elements in your document and you wanted your function to fire whenever any of those elements was clicked?

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Simple, you might think, let's just add a class to each

  • element and fire off the code whenever the click event occurs on that element. Let's see how this would look.

    First, the javascript:

    $('.mySelector').click(function(){
        console.log("You clicked an item.");
    });

    Now, the html:

    <ul>
      <li class="mySelector">Item 1</li>
      <li class="mySelector">Item 2</li>
      <li class="mySelector">Item 3</li>
    </ul>

    So, now when any one of those elements is clicked, the function will fire. Great! It works. But here's the catch - what if this list was actually a todo list, and each element in the list was either added or removed dynamically? Let's look at the code for this.

    Javascript:

    var addItem = function(){
      $('ul').append("<li class=\"mySelector\">Item 4</li>");
    };

    This function is nothing special, it merely appends a new item to the todo list. For the sake of this example, let's just say we only call it once and only add one item to our 3 item list.

    Resulting html code after the addItem function is fired:

    <ul>
      <li class="mySelector">Item 1</li>
      <li class="mySelector">Item 2</li>
      <li class="mySelector">Item 3</li>
      <li class="mySelector">Item 4</li>
    </ul>

    You might be thinking to yourself, "great, we have a working todo list now!" Not so fast. If you click on items 1 through 3 in your list, you'll still fire the click event logging "You clicked an item" to the console. But, here's the twist. If you click item 4, nothing happens. Uhhhhh...what? Let's take a closer look at what's going on here.

    Your initial html code was this:

    <ul>
      <li class="mySelector">Item 1</li>
      <li class="mySelector">Item 2</li>
      <li class="mySelector">Item 3</li>
    </ul>

    This is what the code looked like when you first loaded the page, thus everything was loaded into the DOM (Document Object Model). Once a page is loaded, that's it, the DOM is set and everything in it is all javascript has to go off of.

    With that being said, when we ran our addItem function, the resulting code on the page was

    <ul>
      <li class="mySelector">Item 1</li>
      <li class="mySelector">Item 2</li>
      <li class="mySelector">Item 3</li>
      <li class="mySelector">Item 4</li>
    </ul>

    But, the code in the DOM was

    <ul>
      <li class="mySelector">Item 1</li>
      <li class="mySelector">Item 2</li>
      <li class="mySelector">Item 3</li>
    </ul>

    Meaning javascript didn't reload everything after the new call. It should't have to. In order to fix this, we need to add event listeners to the parent element of this application. If we keep trying to listen on the child elements, nothing will happen because those child elements are continuously being added and removed as we use our app!

    So, lets change up our original event listener to start listening for click. This time, we're going to pass in a couple different selectors to make things a bit easier.

    The javascript:

    $('ul').on('click', '.mySelector', function(){
      console.log("You clicked mySelector");
    });

    Now, we have a working app. What the code above does is listen for clicks on the parent element of the list you want to add to. Since that element will always be in the DOM, you will always hear when the clicks happen. Once it hears a click, it moves down to see if what you clicked on has a class of "mySelector," if it does, your function runs. If it doesn't, nothing happens.

    There you have it, folks. A simple explanation of event delegation in javascript. It's important to keep these things in mind when developing on the front end. Having a clear understanding of what's going on and how things work will keep you from spending too much time debugging crap like this (I spent hours debugging this same example a couple years ago).

  • I Have a Blog

    This is quite interesting as I never exactly thought blogging was something I'd be into, but I'm going to give it a go anyways. Truth be told, I'm not starting a blog because I want to write about things and cry to the world about my problems, I'm more interested in the software behind the scenes that's running the show - jekyll. Jekyll is a Ruby gem that let's me create a blog that's completely static but acts totally dynamic. Wtf?! Yeah, that's what I first thought. After digging into the structure a bit, I realized how friggin' awesome it is so I gem installed that ish and now here we are. Fast. Light. Database-free. Free. You can even write some code and it supports syntax highlighting!

    def whats_jekyll
      puts "Some cool shit, yo!"
    end

    So now, not so often but as often as the urge springs, I'll be updating this blog with things I have to say about, err, things...