How to convert a 4-byte hexadecimal sequence in a little-endian architecture into decimal

Here is my technique for solving the problem of converting a 4-byte hexadecimal sequence in a little-endian architecture into decimal.

This may seem rather niche but it was a surprisingly large part of Week 5 in my CS271 class. The class’s materials and extra help I found around the web seemed to go off on tangents that were interesting but unrelated to solving this kind of problem quickly, and all I really wanted was a simple step-by-step guide I could use on exams.

Therefore, I am sharing my simple 5-step technique for converting hex to decimal in a little-endian architecture here! Hope someone else finds it helpful.

Example problem:

The four-byte sequence 0x86 0x65 0x53 0x82 stored in consecutive memory cells in a little-endian architecture represents ___________ (decimal) when interpreted as a 32-bit signed integer.

From reading this, we know: 

  • it’s little-endian, so we are going to reverse the order of the bits
  • our result will be signed

Step 1: Reverse the bytes

Take the bits in blocks of two and work right to left.

0x86 0x65 0x53 0x82 becomes 0x82536586

Step 2: Look at the most significant bit and determine if there will be a negative result

0x82536586   <-- that's this dude in red here

The most significant bit here contains an 8.

We know that in hex a most-significant bit of 7 or more means we are looking at a negative number. (If this were a positive number, ie: the most significant bit is between 0 and 6, then skip ahead to Step 4.)

Step 3: Since we are working with a negative number, flip the bits (subtract our hex sequence from FFFFFFFF) and add 1

  FFFFFFFF
- 82536586
  7DAC9A79

Add one to the result:

7DAC9A79
      +1
7DAC9A7A

The result is the hex sequence we will use for the next step.

7DAC9A7A

Step 4: Multiply each term by 16 raised to a power

To convert a hex value into a decimal value, we multiply each “position” in the hex sequence by 16 raised to a power. Working from right to left, we know that furthest-right position is 16^0 (so, just a 1). The second-from-right position is 16^1 (so, just a 16). The third-from-right position is 16^2, and so on.

Recall that A = 10, B = 11, C = 12, D = 13, E = 14, and F = 15 when working in hex.

(7*16^7)+(D*16^6)+(A*16^5)+(C*16^4)+(9*16^3)+(A*16^2)+(7*16^1)+A

The result of this long sequence is:

2108463738

Remember that negative sign? Now’s a good time to stick it on.

-2108463738

And there you have it: the result is -2108463738.

Some final notes

  • Be sure to observe whether the problem expects a signed decimal result or an unsigned decimal result. If the problem is asking for unsigned, you can skip the FFFFFFFF subtraction step entirely, even if the most significant bit is 7 or higher.
  • Remember that when working with a signed hexadecimal number, you look at the most significant bit to determine if it’s negative or positive.
    • 0-7 = positive
    • 8-F = negative
  • If you had to do the flipping step, don’t forget to put that negative sign onto your final answer!

CSS: Hide “spinners” (up/down arrows) on inputs with type=”number” using a class

Quick (and potentially dirty) CSS fix for getting rid of “spinners” in input boxes that are type=”number” using a class to restrict the change to just one input element instead of every input in your app.

These little arrows look different on every browser (or they used to, anyway – they look pretty consistent across Chrome, Firefox, and Safari nowadays).  There’s no one-size-fits-all fix for hiding them because different browsers handle them differently.

Screen Shot 2016-04-08 at 7.35.23 AM
These ugly little things don’t even fit properly in the default input field on my browser!

Anyway, here’s the code I’ve recycled across a couple projects now to get rid of them:

JSFiddle: https://jsfiddle.net/faz7wm43/1/
Tested in Firefox 31, Chrome 48, Safari 9.0.3 on Mac and Chrome 48 on iPhone.

/* hide up/down arrows ("spinners") on input fields marked type="number" */
.no-spinners {
  -moz-appearance:textfield;
}

.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Put the no-spinners class on your input themselves.

<input type="number" class="no-spinners"/>

Full disclosure: I didn’t test this on IE.

JavaScript and Regex: Using a regular expression and .replace() to strip (foo) from a string

Here’s a quick tutorial on using regular expressions in JavaScript to edit a string and return the modified result. My strings looked like this:

"Toyota (1999 - 2005)"
"Ford (1995 and up)"
"Honda (up to 2015)"
"Kia or Chevy (any)

In this case, each string was the name property on an object. (Ie: you’re not looking at an array of strings in the example above.)

For display purposes, I wanted to show (in my app’s template) only what came before the first parenthesis, like so:

Toyota
Ford
Honda
Kia or Chevy

Thanks to guide on how to use regex to remove everything after a particular character, and this refresher on how .replace() works, I had this problem solved in a matter of minutes with the following expression, where params[0] is the string (more about why my method looks like this after the code):

export function stripParensFromCarData(params/*, hash*/) {
  return params[0].replace(/\(.*\)/,'');
}

I used this method in an Ember helper I wrote to format strings for display in a handlebars template. The helper was hooked up like so in the .hbs file:

{{strip-parens-from-car-data carString}}

My favorite tool for testing regular expressions as I write them is regexr.com.