I’m not sure about you, but I’ve certainly asked rather absurd looking questions like these to myself. Some of you might think it’s just a representational matter and it’s because it’s standardized. Surprisingly, there’s an actual reason why the negative sign is represented by a 1 in binary and not 0. If you can answer this question, kudos to you. If you can’t, then read on.

Being in Computer Science for almost half a decade, the Binary Number System has become second nature to me. That doesn’t mean that I can do Binary calculations in a second. I still need to write the numbers down and do the maths on paper. But one day while doing Binary calculations specifically with negative numbers, a weird thought came into my mind. “Why was the negative sign represented with a 1 rather than a 0?”. I knew the rules of Binary mathematics but just couldn’t figure it out until one day I stumbled upon the answer. It goes as follows.

Let’s take an example of a Binary number. Suppose the 8-bit number 11001010. Supposing that this number represents a signed decimal integer, it can be represented in Positional Notation as follows.

Or in more simple terms…

Now let’s find the value of the above formula in the Decimal System. Converting the number 11001010 to it’s twos complement gives us 00110110. Which means we can represent it like…

And then finding the value of the above formula gives us 54 as the answer. Which means the original number was -54.

This method of first converting a negative number to it’s positive twos compliment equivalent and then finding the value of that positive number in Decimal System and attaching a minus sign to it seems very tedious. But that’s what we’ve been taught since we encountered this Binary System. But it turns out that there’s an easier way of doing what we just did. And it all involves one slight change to the positional notation of the original negative number illustrated by Formula 2. And the change is…

If you didn’t notice, what I did is I made the weight of the Most Significant Bit of the original number into a negative number. It’s magnitude doesn’t change, only it’s sign. But watch how much of a significant change it does to our calculations. Finding the value of the above formula directly gives us -54.

You don’t need to do any kind of conversions to achieve the result. But the interesting thing is that it even works for positive numbers. For example let’s take the positive number 01001101. Representing the number in Signed Weighted Positional Notation, we get…

The value of the above formula is 77, which would be equal to the value if you were to calculate it this way…

“But what does this have to do with your question?”, you ask. The answer is that, the MSB does not just represent a sign in a binary number but it actually represents a negative weight. And that’s why it makes sense, because if the MSB is 1, then the negative weight is included in the calculation to give you the correct negative value. And if the MSB is 0, then the negative weight is not included in the calculation to give you the correct positive number.

This is one of the times mathematics shows us how beautiful it can be.

Why the negative sign is represented by 1 and not 0 in Binary. was originally published in semicolon.io on Medium, where people are continuing the conversation by highlighting and responding to this story.

I know how much jQuery does tasks easier for a lot of people who are into Web Development. But personally for me, it makes my life complicated more than it makes it easy. Besides I always like to code in vanilla JavaScript because it makes me feel more accomplished.

One of the features of jQuery that vanilla JavaScript lacks unfortunately is the ability to attach Event Handlers to a collection of elements all at once. In JavaScript, to achieve the same functionality you have iterate over the collection attaching the same Event Handler to each item. But what a lot of people don’t know is the magic of Event Bubbling which can be used to achieve the same functionality; sort of!

Now Event Bubbling is not the same concept as attaching Event Handlers to a collection at once. Rather it’s an entirely different concept which can be used to achieve the same functionality. I took this example because it was easier to teach. It’s just one of the things you can do using Event Bubbling. Therefore what I’ll be teaching you is the concept of Event Bubbling with the specified example and then you’ll be free to decide what to do with the knowledge you’ve gained. Read on.

In simple terms, Event Bubbling is the act of firing the same event by all the ancestors of the target element which initially fired the event. So suppose we have the following code.

<div class="grand-parent">
  <div class="parent">
    <div class="child">Click me!</div>
  </div>
</div>

Now if someone clicks the .child element, then not only the .child element will fire the click event but the .parent as well as the .grand-parent will fire the same click event successively. That is, first the .child element will fire click, then the .parent will do the same, and then the .grand-parent.

This concept is crucial as it will help us achieve the goal we’re looking out for. Let’s look at an example which will help you understand what’s going on under the hood. I’ve created an application which has a list of predefined superhero names. Users can add a superhero name to the list or delete a superhero name from the list. I’ve already coded the application and included the pen. Now let’s work through it. Explanation of the code is done through comments.

As you can see, attaching the Event Handler to the ancestors helps a lot to write short and concise code. One of the reasons I made the Add superhero name functionality is to show you the difference between using Event Bubbling and attaching the Event Handler directly to the target. Cause if you attach it directly to the target, then you have to go through a lot of overhead to find all the proper links to its ancestor elements and its siblings.

Ever since learning Event Bubbling I’m using it more often than I thought I would. Don’t be limited with what I just demonstrated. Try experimenting with these ideas and concepts and come up with new things. And if you do stumble upon them, do share!

Attaching Event Handlers the smart way using Event Bubbling in JavaScript. was originally published in semicolon.io on Medium, where people are continuing the conversation by highlighting and responding to this story.