You'll discover different languages, frameworks, libraries, inventions and conventions.

One technology often requires knowledge of another one, and everything seems to be interconnected and intertwined.

With new technologies coming out often in such a fast paced and ever-changing industry, it can quickly get confusing for beginner coders.

When learning how to code, instead of just focusing on learning a specific technology, it can also help to learn the foundations – the building blocks – and to peel back the layers of abstraction to get to know the underlying principles that all these technologies have in common.

Understanding what coding is at a fundamental level will make solving problems easier and will give you a better understanding of how these technologies work underneath the hood.

In this article we will learn what coding is so you have a solid foundation on which to build.

How Do Computers Work?

Computers, when powered off, are just costly electronic machines. They're objects consisting of a bunch of metals, plastics, and other materials.

However, once you press the power button and they have gone through their power-up process, called booting up, they come to life.

Your computer turns into this extremely powerful machine. It's this electronic device that gets to do complicated tasks at mind boggling speeds that would be difficult, if not impossible, for humans to do.

Their screens are vibrant and active and there's a variety of buttons and icons ready to be clicked.

Computers and Electricity

Computers are powered and function with the help of electricity.

Electricity has only two states – it can be either turned on or off.

Electricity being turned on and flowing represents true, it has the 'on' state. On the other hand, when it's turned off and not flowing this represents false and the 'off' state.

It can only ever have one state at each point in time.

The two states of electricity are called Binary States, the prefix bi- meaning two.

What is Binary Code?

This concept of electrical charges and the existence of only two possible states ties in nicely with the numerical system computers use in their hardware. They use it to complete every single task they are given. It's called binary code and is made up of sequences of 0s and 1s.

Binary code by design corresponds directly with specific machine instructions, commands, and locations in the computer's memory. The computer then reads and interprets these instructions and then carries out particular tasks.

Computers are made up of a combination of thousands of tiny physical devices that act as electrical switches, called transistors.

These little electrical hardware components, the transistors, enable or disable the flow of electricity.

They can have either a positive or a negative electric charge depending on their state – that is, whether they carry electricity or don’t.

Those thousands of tiny little switches can either be on or off.

How Binary Works

You may have heard that ‘Computers work in 1s and 0s’ but what does that actually mean? We might not deal with binary code directly anymore, but it is the only thing that the computer's CPU understands.

Are there literally 0s and 1s stored in our physical devices flowing and moving around? Not really.

However, our CPU's consist of many microscopic digital circuits that carry information.

With the help of the transistors that come together to form these circuits and their tiny sequences of electrical signals that are switched either on (1) or off (0), there can only be only be two types of voltages – a high and a low. And that results in the representation of different values, that is different instructions or calculations being performed.

When these electrical signals from the transistor circuits and other electrical components are linked and combined/modified in a certain way, they can create a wide range of possible tasks and operations the computer can perform and see through.

Computers and Their Relationship with Humans

This machine-level programming language is the only language that computers can directly understand and are capable of making sense of.

The binary code can vary from computer to computer and from machine to machine. When it comes to this level of programming a computer, there is no portability. This means that programs and software can't be transferred to different systems.

Limitations of Machine Languages

Machine languages can vary depending on the operating system they are implemented on.

This is, of course, very limiting.

Machine code or binary code may run very fast, they may be the computer's native language, and they may be extremely efficient because the instructions are executed directly by the CPU. But it's a very dull and monotonous – not to mention extremely error-prone – way to use a computer.

Attempting to use a computer by manually typing binary codes for each transitor is a cumbersome process.

Making an error while directly managing the computer's data storage and operations is very hard to fix.

Machine-level languages are hard for humans to read, write, learn and understand. So programmers and computer scientists found a better and arguably easier way to solve problems.

The things a computer can do by itself are on a very primitive level and are limited in scope.

They are good at performing arithmetic calculations like adding numbers or checking if a number is equal to zero.

The Human Element in Computing

Humans created these machines that have revolutionized our way of life, but when it comes down to it, computers are really not that smart and have limited capabilities by themselves.

They only do exactly what they are told to do. They don’t make assumptions or have any common sense like humans do.

Computers at their core are machines that perform mathematical operations. But they are also good at displaying some text on the screen or repeating a task over and over again.

Those operations are basic and don’t go much further than that. They're known as the computer’s instruction set.

Even though at their core computers can only do very basic tasks, they are able to perform extremely complex actions and follow and execute instructions from programs they are given. This is thanks to the many layers of abstraction they have.

The true power however, lies in the hands of humans. Whatever we want to achieve and whatever we imagine, we can use this machine as a tool to do complicated calculations, conduct research to find and extract a document among billions of other documents, or keep in touch with friends and family far away.

Whatever we can think of, we can now create it by coding a program.

Computers and programs can improve our lives collectively all around the world. But how do we make them do what we want?

What is computer programming?

Computer coding and computer programming are terms that are often used interchangeably. They do have some differences though.

Programming vs coding

Programming means telling a computer what to do and how to do that thing you told it to do.

It involves providing well thought-out, methodogical instructions for your computer to read and execute.

You have to break down large tasks into smaller ones. And you keep repeating that process of breaking something down into smaller tasks until you reach a point where you don’t need to tell the computer what to do anymore – it already knows how to do that task.

The essence of programming is the process of problem solving, complex thinking, attention to detail, and reasoning – all using a computer.

Programming involves thinking of all the different steps a user could take and considering all the different things that could go wrong. Once you've thought of all potential problems a user may encounter you have to find solutions before you code anything.

We can think of problem solving as taking an input (the information and details about our problem that we want to solve) and generating an output (the end goal or the solution to our problem).

Outputs can be complicated and millions can run per second.

Problem Solving with Algorithms

When you're problem solving using a computer, you need to express the solution to that problem according to the instruction set of the computer.

For that purpose, we use algorithms – a systematic approach to solving problems.

Algorithms are an idea or method that's expressed in a very concise and precise set of rules and step by step instructions. The computer needs to follow these instructions in order to solve the problem.

When we think of algorithms, they don’t only apply to computers. They are also machine independent.

We humans follow algorithms too – sets of instructions for completing tasks in our daily lives.

Some examples could be:

• counting people in a room
• doing arithmetic calculations
• trying to figure out the correct route to take to reach a particular destination
• following a cooking recipe

In the last example, we can think of the recipe as the instructions that we use, and we're the computer that has to read and then execute them correctly.

An algorithm is a plan that presents the steps you need to follow in order to get a desired result.

How Computers Use Algorithms

When it comes to computers, algorithms need to be precise as computers take everything literally. They don’t read between the lines or make any assumptions.

There is no room for ambiguity, so algorithms not only need to be precise but also organized, correct, free from errors, efficient, and well-designed. All this helps minimize the time and effort the computer needs to spend to complete a task.

Computers execute algorithms in a mechanical way without putting much thought into each step. And they should work in the exact way we intended them to work.

A computer program is a collection of those instructions – or algorithms – in a text file which serves as an instruction manual.

It describes a very precise sequence of steps for the computer to follow. The computer performs a particular task, its hardrive executes the instructions, and you get the final desired result in the end.

Aside from the thinking, research, design, and in-depth planning, programming also involves testing, debugging, deployment, and maintanance of the finished result.

When you're developing a program to solve a particular problem, you typically express the idea for the solution using an algorithm. Then developers code the program by implementing that algorithm. You use a language that has particular syntax and that both humans and computers can understand.

This is where the actual coding comes in.

What is Computer Coding? A Simple Definition.

Coding is the process of transforming ideas, solutions, and instructions into the language that the computer can understand – that is, binary-machine code.

Coding is how humans are able to talk with computers.

Coding involves communicating and giving instructions for different actions we want our computers to perform using a computer programming language.

Programming languages, like JavaSctipt, Java, C/C++, or Python, act as the translator between humans and machines.

These languages bridge the communication gap between computers and humans by representing, expressing, and putting algorithms into practice. They do this using a specific sequence of statements that machines understand and can follow.

Programming languages are similar to human languages in the sense that they are made up of basic syntactical elements like nouns, verbs, and phrases. And you group these elements together to form something that resembles a sentence to create meaning.

These languages actually resemble and look a lot like English. But they offer a shorter, more precise and less verbose way to create instructions that the computer can understand.

A spoken/natural language like English, on the other hand, leaves a lot of room for ambiguity and different interpretations from different people.

Programming languages are a set of rules that define how you write computer code.

We use computer code to create all the web applications, websites, games, operating systems, and all the other software programs and technologies we use on a daily basis.

You can look at the code that makes up your favorite websites by hitting Control and clicking your touchpad/mouse then selecting View Page Source (or inspect) from the menu that pops up (or you can use the shortcut Option Command U):

You'll then see the HTML, CSS, and JavaScript that make up the frontend code of the website you're using:

In a nutshell, coding is the act of translating problems that are first in a natural, human language to a machine readable language. And that translation happens thanks to programming languages and coding.

Coding requires that you understand the intricacies, the particular syntax, and the specific keywords that make up a programming language. Once you know these features of a language, you can start developing applications.

Conclusion

In this article we learned how computers work at a high level. We then definied what programming is, what coding is, and the differences between them.

Remember that coding is only the process of writing code to develop programs and applications.

Coding is a subset of programming, which entails the logical reasoning, analysis, and planning out a sequence of instructions for a computer program or application before any coding is done.

Programming is the bigger picture in the process. Coding is a part of that process, but should always come after the programming, or problem-solving and planning stage.

I hoped this helped you understsand programming and coding basics. Thanks for reading!

I'll explain a brief history of encoding in this article (and I'll discuss how little standardisation there was) and then I'll talk about what we use now. I'll also cover some Computer Science theory you need to understand.

Introduction to Encoding

A computer only can understand binary. Binary is the language of computers, and is made up of 0's and 1's. There is nothing else allowed. One digit is called a bit, and a byte is 8 bits. So 8 0's or 1's make up one byte.

Everything eventually ends up as binary – programming languages, mouse moves, typing, and all the words on the screen.

If all the text you're reading was once binary too, then how do we turn binary into text? Let's look at what we used to do back in the beginning.

A Brief History of Encoding

In the early days of the internet, it was English only. We didn't need to worry about any other characters and the American Standard Code for Information Interchange (ASCII) was the character encoding that fit this purpose.

ASCII is a mapping, from binary to alphanumeric characters. So when the PC receives binary:

01001000 01100101 01101100 01101100 01101111 00100000 01110111 01101111 01110010 01101100 01100100

With ASCII it can translate that into "Hello world".

One byte (eight bits) was large enough to fit every English character, and some control characters too. Some of these control characters were used for instruments called teleprinters, so at the time they were useful (not so much now!)

But the control characters were things like 7 (111 in binary) that would make a bell sound on your PC, 8 (1000 in binary) that would print over the last character it just printed, or 12 (1100 in binary) that would clear a video terminal from all the text just written.

Computers at this time were using 8 bits for one byte (they didn't always), so there were no issues. We could store all our control characters, all our numbers, all the English characters and have some left! Because one byte can encode 255 characters, and ASCII only needed 127 characters. So we had 128 encodings that were unused.

Let's look at an ASCII table here to see every character. All lowercase and uppercase A-Z and 0-9 were encoded to binary numbers. Remember the first 32 are unprintable control characters.

ASCII Character Table

Can you see how it ends with 127? We have some spare room at the end.

Issues with ASCII

The spare characters were 127 through to 255. People began to think about what would be best to fill those remaining characters. But everyone had different ideas about what those final characters should be.

The American National Standards Institute (ANSI - don't get confused with ASCII) is a standards body for establishing standards across lots of different fields. They decided what everyone was doing with 0-127, which is what ASCII was already doing. But the rest were open.

No one was debating what 0-127 in the ASCII encoding was. The problem was with the spare ones.

Below is what the first IBM computers did with the 128-255 encodings for ASCII.

Some squiggles, some background icons, math operators and some accented characters like é.

But other computers didn't all follow this. And everyone wanted to implement their own encodings for the end of ASCII.

These different endings for ASCII were called code pages.

What are ASCII Code Pages?

Here's a collection of over 465 different codepages! You can see that there were multiple codepages EVEN for the same language. Greek and Chinese both have multiple codepages, for example.

So how on EARTH were we ever going to standardise this? Or make it work between differing languages? Between the same language with different codepages? In a non English language?

Chinese has over 100,000 different characters. We don't even have enough spare characters for Chinese, let alone agreeing that the final characters should be Chinese ones. This isn't looking so good.

This problem even has its own term: Mojibake.

It's garbled text you may sometimes see from decoding text, but using the wrong decoding. It means character transformation in Japanese.

Example of completely garbled text (mojibake).

This sounds a little insane...

Exactly! We will have zero chance of reliably interchanging data.

The internet is just a huge connection of computers around the world. Imagine if all these countries decided what they each thought the standards should be. If the Greek computers only accepted Greek and the English computers only sent English...? You would just be shouting into an empty cave. No one would understand you. And no one would be able to decode the nonsense.

ASCII wasn't fit for real life use. In a global, connected internet, we had to evolve, or else forever deal with hundreds of codepages.

��� Unless you ������ fancied trying ��� to ��� read paragraphs like this. �֎֏0590֐��׀ׁׂ׃ׅׄ׆ׇ

Along Came Unicode

Unicode is sometimes called the Universal Coded Character Set (UCS), or even ISO/IEC 10646. But Unicode is its more common name.

But, this is where Unicode entered the scene to help solve the problems that encoding and code pages were causing.

Unicode is made up of lots of code points (mapping lots of characters from around the world to a key that all computers can reference.) A collection of code points is called a character set - which is what Unicode is.

We can map something abstract to a letter we want to reference. And it does every character! Even Egyptian Hieroglyphs.

Some people did all the hard work of mapping what each character would be (in all the languages) to a key that we could all access. They look like this:

"Hello World"

U+0048 : LATIN CAPITAL LETTER H

U+0065 : LATIN SMALL LETTER E
U+006C : LATIN SMALL LETTER L
U+006C : LATIN SMALL LETTER L
U+006F : LATIN SMALL LETTER O
U+0020 : SPACE [SP]
U+0057 : LATIN CAPITAL LETTER W
U+006F : LATIN SMALL LETTER O
U+0072 : LATIN SMALL LETTER R
U+006C : LATIN SMALL LETTER L
U+0064 : LATIN SMALL LETTER D

The U+ lets us know it's the Unicode standard, and the number is what results when the binary get's transformed to numbers. It uses hexadecimal notation which is just a simpler way of representing binary numbers. You don't have to worry too much about the hexadecimal here, though.

Here's a link where you can type whatever you want into the text box, and see the Unicode character encoding. Or look at all 143,859 Unicode character points here. You can also see where each character is from in the world!

I just want to be clear. At this point we have a big dictionary of code points mapping to characters. A really big character set. Nothing more.

There's one final ingredient we need to add to our mix.

Unicode Transform Protocol (UTF)

UTF is a way we encode Unicode code points. The UTF encodings are defined by the Unicode standard, and are able to encode every single Unicode code point we need.

But there are different types of UTF standards. They differ depending on the amount of bytes used to encode one code point. It also depends on whether you're using UTF-8 (one byte per code point), UTF-16 (two bytes per code point) or UTF-32 (four bytes per code point).

If we have these different encodings, how do we know which encoding a file will use? There's a thing called a Byte Order Mark (BOM) - sometimes referred to as an Encoding Signature. The BOM is a two-byte marker at the beginning of a file that tells what encoding the file is using.

UTF-8 is the most used on the internet, and is also specified in HTML5 as the preferred encoding for new documents, so I'll spend the most time explaining this one.

You can see in the diagram even from 2012, UTF-8 was widely becoming the most used encoding. And for the web it still is.

_W3 diagram to show how well used UTF-8 is used on a variety of websites._

What is UTF-8 and How Does it Work?

UTF-8 encodes all the Unicode code points from 0-127 in 1 byte (the same as ASCII). This means that if you were coding your program using ASCII, and your users used UTF-8, they wouldn't notice anything was wrong. Everything would just work.

Just remember how strong a selling point this is. We needed to remain ASCII backwards compatible while UTF-8 was being implemented and used by everyone. It doesn't break anything currently being used.

Because it's called UTF-8, remember that's the minimum number of bits (8 bits being one byte!) that a code point will be. There are other Unicode characters that are stored in multiple bytes (up to 6 bytes depending on the character). This is what people mean when the encoding is called variable length.

It might be more, depending on the language. English is 1 byte. European (Latin), Hebrew and Arabic are represented with 2 bytes. 3 bytes are used for Chinese, Japanese, Korean and other Asian characters. You get the idea.

When you need a character to span more than one byte, you have a bit combination to identify a continuation sign, saying this character is continued over the next several bytes. So you’ll still only use one byte per character for English, but if you need a document to contain some foreign characters, you can do that too.

And now, wonderfully, we can all agree on what the Sumerian cuneiform characters encoding is (𒀵 𒁷𒂅 𒐤), as well as some emoji's 😉😉 so we can all communicate!

The high level overview is: You first read the BOM so you know your encoding. You decode the file into Unicode code points, and then represent the characters from the Unicode character set into characters drawn onto the screen.

A Final Word About UTF

Remember, encoding is key. If I send the complete wrong encoding you can't read anything. Be aware of it when receiving or sending data. Often it is abstracted away in the tools you use everyday, but as programmers it's important to understand what is happening under the hood.

How do we specify our encodings, then? Because HTML is written in English, and almost all encodings can deal with English fine. We can embed it right at the top in the <head> section.

<html lang="en">
<head>
  <meta charset="utf-8">
</head>

It's important to do this at the very start of the <head>, as the parsing of the HTML may have to start again if the encoding it's currently using is wrong.

We also can get the encoding from the Content-Type header from the HTTP request/ response.

If an HTML document doesn't contain the encoding tag, the HTML5 spec has some interesting ways it can guess the encoding called BOM sniffing. This is where it guesses the encoding from the Byte Order Mark (BOM) we discussed earlier.

So is that it?

Unicode isn't finished. Like any standard, we add, remove and make new proposals to the standard. No specification is ever considered "complete".

There are generally 1 or 2 release a year, and you can find them here.

Recently I read about a very interesting bug around Twitter rendering Russian Unicode characters incorrectly.

If you have read this far, congratulations – it's a lot to digest.

I would encourage you to do one last piece of homework.

Look at how broken websites can really be when the encoding is wrong. I used this Google Chrome extension and changed my encoding and tried to read webpages. The message was completely unclear. Try and read this article. Try and navigate Wikipedia. See Mojibake for yourself.

It helps to see how important encoding truly is.

Conclusion

In my time spent researching and trying to simplify this article, I learned about Michael Everson. Since 1993, he has proposed over 200 Unicode changes, and has added thousands of characters to the standard. As of 2003, he was credited as the leading contributor of Unicode proposals. He is one huge reason why Unicode is what it is. Very impressive, and he has done a great deal for the Internet as we know it.

I hope this has explained a good overview of why we need encodings, what problems encoding solves, and what happens when it goes wrong.

I share my writing on Twitter if you enjoyed this article and want to see more.

One bit is one 0 or 1. 8 bits make up a byte. From these simple pieces we can build incredibly complex connected computer systems to render videos, show text from around the world, and compute extremely complex algorithms.

Some data (some English characters like a, e, i, o and u) can be represented by one byte, but some pieces of data take multiple bytes to be represented.

But endianness is a fundamental part of how computers read and understand bytes.

What is Endianness?

Different languages read their text in different orders. English reads from left to right, for example, while Arabic is read right to left.

This is exactly what endianness is for computers.

If my computer reads bytes from left to right, and your computer reads from right to left, we're going to have issues when we need to communicate.

Endianness means that the bytes in computer memory are read in a certain order.

We won't have any issues if we never need to share information. Each computer is internally consistent for their own data. It's just the internet has enabled us to share more data than we ever have before, and our data is not always read in the same order.

Endianness is represented two ways Big-endian (BE) and Little-endian (LE).

• BE stores the big-end first. When reading multiple bytes the first byte (or the lowest memory address) is the biggest - so it makes the most sense to people who read left to right.
• LE stores the little-end first. When reading multiple bytes the first byte (or the lowest memory address) is the littlest - so it makes most sense to people who read right to left.

If the above doesn't make sense, that's ok – let's look at an example.

Example of How Endianness Works

Let's take a number that we have to use multiple bytes to represent, and show the big-endian and little-endian ways it can be represented.

We'll take a number that requires three bytes to be represented in binary.

This may slightly oversimplify it, but I hope it serves as a helpful visual explanation.

A binary example where big-endian and little-endian numbers are arranged in the order they would be read.

The 0b at the beginning is just notation to let readers know it's binary. So we know the difference between binary 1100 and 1,100 as the decimal number (one thousand, one hundred). I also used colours to hopefully make it clearer.

I just want to be clear that bit ordering is fine. There is no difference between the ordering of bits. But there is a difference in the correct ordering of bytes. I hope the above demonstrates the order of the 0's and 1's within a byte don't change. But the byte ordering does change.

If we only ever had to send one byte too, there'd be no issues (there aren't multiple ways to order only 1 thing). It's only an issue with a sequence of more than one byte.

Most Significant Byte (MSbyte)

The terminology Most Significant Byte is a common way to describe endianness so I want to make sure I cover it thoroughly.

Before we begin explaining with bits and bytes, let's just do it with a decimal number.

If I took the decimal number 2,984, what number could you change to change the number by the smallest amount? The 4. If I change the 4 to 5, the whole number only goes up by 1.

But let's say you change the 2 in 2,984. It will change the number significantly and go up by a thousand.

This is the exact same with bytes and bits.

We refer to the byte holding the smallest position as the Least Significant Byte (LSbyte) and the bit holding the smallest position as the Least Significant Bit (LSbit).

A diagram to illustrate that the byte containing the lowest position numbers is the least significant byte.

The byte that holds the most significant position is referred to as the Most Significant Byte (MSbyte) and the bit holding the most significant bit position is the Most Significant Bit (MSbit).

Now knowing this new definition, we can define BE and LE as:

• Big endian stores data MSbyte first
• Little endian stores data MSbyte last

When might this be an issue?

Endianness has to be a consideration in computing in a few different cases.

For example Unicode characters (the character set used to render characters on your phone, PC, TV, everywhere!) have to pass a special character byte sequence (U+FEFF BYTE ORDER MARK) called the Byte Order Mark or BOM. The BOM serves a few purposes.

The BOM makes the system aware:

• That the incoming stream is Unicode.
• Of which Unicode character encoding is used.
• Of the endian order of the incoming stream.

Some programming languages even expect you to detail what byte order sequence is being used. So one program may use, send, and receive numbers in BE or LE depending on what you want. Swift is one example of this (the language used to do iOS development).

The Apple documentation detailing how to get the little-endian representation of an Integer.

You can read some Swift code here for an example of byte swapping to get little and big-endian representations of Integers too.

Why is this even an issue in the first place?

It just happens that different protocols emerged and then later had to interact with one another. BE is the dominant order in any network protocols, and is referred to as network order, for example. On the other hand, most PC's are little-endian.

You can run a C++ code snippet online here to see what endian your machine is (mine is little-endian).

Endianness has largely ceased to matter with higher level languages and abstracting away particular pieces of implementation details we don't need to worry about.

Another part of it is processors decide whether they are little-endian or big-endian (or can handle both - called Bi-endian) so consumer choice has driven part of what we consider "normal" in our computer systems.

Conclusion

I hope this article has explained what endianness is, what big-endian and little-endian are, and that you understand these concepts more clearly now.

I share my writing on Twitter if you enjoyed this article and want to see more.

One of the first things we learn about computers is that they only understand 0s and 1s, or bits.

We humans, on the other hand, communicate numbers via the decimal system. This system uses digits from 0 to 9 along with plus and minus signs (+ and -) to denote positive or negative numbers.

Since computers can use only two digits – 0 and 1 – engineers and mathematicians back in the day designed clever techniques for representing negative numbers and for doing arithmetic with them. Let's explore the beauty of those techniques.

First, some background on how computers work

Software, images, text, videos, numbers and everything in between are 0s and 1s at the lowest level in our computer.

For images, text, videos and numbers, we have encoding schemes that decide how these stuff will get to 0s and 1s. For example, ASCII and Unicode for text.

The software programs we code get to 0s and 1s via compilers and assemblers. Those set of 0s and 1s known as machine code (or machine instruction) are first stored in our computer's main memory (RAM) before the processor can execute them.

_The fetch decode execute cycle architected by Sir John von Neumann. Every digital computer follows this cycle to run machine code._

The processor starts the execution cycle by fetching the instructions from the main memory, then the control unit of the processor decodes those instructions into two parts – operation code (opcode) and operands.

The opcode decides the further action that needs to be performed like ADD (addition), JMP (jump), INC (increment) and so on. The operands are the values (or memory locations) on which that operation will be performed.

The decoded instructions are sent to the Arithmetic and Logic Unit (ALU) for execution. In the ALU, the instruction is executed based on the opcode on the operands and the result is stored back in the memory.

For example, the assembly code ADD eax, 42 is first turned into machine code (0s and 1s) by the assembler. Then it is stored into the main memory before the fetch-decode-execute cycle can begin.

When the fetching of the machine code for ADD eax, 42 from the memory finishes, the instruction is decoded. The decoded output says that the opcode is ADD and the operands are eax and 42.

eax is a register – a memory location inbuilt into the processor that can be accessed instantaneously by the processor. The eax register is called an accumulator in most processors.

The ADD eax, 42 assembly code is designed to add 42 to the current value of the eax register (accumulator) and stores that sum in eax. It is eax = eax + 42.

Suppose that currently eax is 20. This means that the value of eax after executing ADD eax, 42 will be 20 + 42 = 62.

EDVAC was one of the earliest electronic binary computer built for the U.S. Army's Ballistics Research Laboratory. (Image source, Public Domain).

The design of early computers such as EDVAC started with the desire to make tedious mathematical calculations easier and faster.

The whole responsibility of making computers compute lay on the shoulders of adders – circuits that add two numbers. This is because sophisticated operations like subtraction, multiplication, and division utilize adders in their circuits.

Ultimately computers are just a fast arithmetic machines with logic capabilities. Understanding the challenges and the beauty of binary arithmetic design (of positive and especially negative integers) is one of the most fundamental concepts in a computer processor.

Let's first see how decimal numbers are represented in binary and how to add two binary values. Then we will start exploring the beauty.

How the binary system works

If I tell you to read out 872500, you will likely say 872.5K. Let's take a look at how our minds do this.

We assign the one's place to the first digit from the right, then the ten's place to the second from the right, the hundredths to the third, and so on, growing each time by power of 10.

These powers of 10 in each place are the weights of the places. The weight of the hundredth place is one hundred. We multiply the digits in each place by their place's weight and sum them all up to get a complete number.

In the above diagram, you can see that the growth of each place's weight is in the powers of 10, starting from 10^0 and going through 10^5. That's why decimals are called a base ten system.

In binary, each place's weight grows by a power of 2. This means that the place's weight starts from 2^0 and ends at 2^something. That's the only difference.

00110101 in decimal translates to 53. Computers interpret binary in the same way as we humans interpret decimals, that is multiplying each place's digit by its weight and summing them up.

How to add 1s and 0s

Addition works in binary pretty much the same way as it's done in decimals. Let's see that through an example. We'll add two binary numbers: 1101 (13) and 1100 (12).

As we do in the decimal system, we start from the one's place (2^0). Adding 1 and 0 gives us 1. So we put a 1 there. Stay with me and you'll get the whole picture.

0 plus 0 is 0. Moving on.

1 plus 1 is 2. And 2 in binary is represented as 10. We carry 1 to the next place and keep 0 as a result of the current place we are in. Isn't this the same as exceeding 9 in a place in decimal addition?

We have two 1s there and one 1 that was carried forward from the previous place, so there are a total of three 1s. Their sum will be 3, and in binary 3 is 11 so we write 11. The final result comes out to be 11001 or 25 in decimal form, which is indeed 13 + 12.

The above computation assumes that we have five bits available to store the result. If a 4-bit computer does this addition, then it will only have four bits available to store the result.

That fifth bit will be called an overflow in 4-bit computers. In integer arithmetic, the overflow bit is ignored or discarded. So we would have got 1001 (9) as our result if we were using a 4-bit computer.

The beauty of binary arithmetic design

Two important terms we need to understand before we move forward are least significant bit and most significant bit.

The bit on the rightmost is the least significant bit because it has the smallest place weight (2^0). And the bit on the leftmost is the most significant bit as it has the highest place weight (2^7).

If the world only had positive numbers, then this would have been the end of this article (because we have already learned how to represent decimals in binary and how to add them in binary).

Thankfully, we have negative numbers, too.

The beauty of the CPU's arithmetic design rests in negativeness.

So how do computers represent negative numbers, and how does arithmetic on negative numbers work? Let's see an encoding approach to this problem.

Please note that in the below sections we will be working with a 4-bit computer to understand the concepts, meaning the fifth bit will be treated as an overflow. The same principles apply to all the CPU architectures like 16-bit, 32-bit or 64-bit to do arithmetic.

The sign magnitude encoding approach

1101 in decimal form would be -5 in this encoding scheme. The leftmost or the most significant bit is the sign bit. It tells the processor about the sign of the number – that is, whether the number is positive or negative.

0 in the sign bit represents a positive value and 1 represents a negative value. The remaining bits tells us the actual magnitude.

In 1101, the sign bit is 1, so the number is negative. 101 equals 5 in decimal. So 1101 will compute to -5 in decimal.

All possible numbers that can be represented by four bits with sign bit encoding scheme

In the above diagram you can see all the integers that can be represented by four bits using this encoding approach. All looks good up to this point.

But if we look closely, we can see a very serious design issue in this encoding scheme. Let's face that issue.

Let's add a positive and a negative number. For example we'll add +4 and -1. Our answer should be (+4) + (-1) = (+3) that is 0011.

See, the result is 1101 (-5). The actual answer should be 0011 (+3). If we were to implement this approach on a processor then we would need to add logic to deal with this issue, and engineers hate additional complexity in their logic.

As we add more circuits, the power consumption increases and performance suffers.

This might sound like a trivial issue for modern transistor-based computers.

But think of early computers like EDVAC which was run on thousands of vacuum tubes consuming power in kilowatts operated by hundreds of people a day. And the government spent millions to build them.

In those days putting additional circuits and vacuum tubes meant thousands of dollars and serious maintenance trouble.

So engineers had to think of a smarter encoding design.

Now, the time has come to reveal the beauty that will tackle this problem and make our system simpler, more performant, and less power hungry.

A beautiful encoding system enters and the CPU shines ❤️

In this encoding scheme, like in the previous one, the leftmost bit acts as a sign bit – but with some art involved to represent negative numbers.

The positive numbers are represented in the exact same way as the previous encoding scheme: a leading 0 followed by remaining bits for the magnitude. For example, in this encoding scheme too, 6 will be represented as 0110.

To represent a negative number, a two step math process is run in its positive counterpart. Meaning to represent -6 we will do a two step math process on +6 to get to -6 in binary.

Let's see how -6 will encode to binary:

In the previous sign magnitude approach, to calculate the negative of +6, we would have simply changed the sign bit from 0 to 1. 0110 (+6) would become 1110 (-6).

In this new encoding scheme, we first invert the bits. Changing zeros to ones and ones to zeros. 0110 (+6) becomes 1001. Inverting the bits is called "one's complement", so here we have calculated one's complement of 0110 resulting in 1001. Then...

We add 0001 (+1) to the one's complement we got from step one (1001). The result 1010 will be the binary representation of -6. This encoding scheme is called two's complement. So keep in mind that calculating two's complement of a positive integer gives us its negative counterpart.

Inverting bits gives us the one's complement. Adding one to the one's complement gives us the two's complement of the original bits we started with. Simple, right?

All possible numbers that can be represented by four bits with two's complement encoding scheme

Now, let's see why this encoding scheme is so beautiful. We'll add 0100 (+4) and 1111 (-1).

See, we get the accurate result with the two's complement encoding scheme. Now we can add integers without worrying about their signs.

We've learned how a negative integer can be represented in 0s and 1s via two's complement encoding. Now suppose we execute ADD eax, -3 and the current value in the eax register is -1. So the value in eax after the execution of ADD eax, -3 will be -4 (which is 1100 in two's complement encoding).

When the operating system retrieves 1100 from eax to present the result to the user, how does the operating system decode 1100 to decimal? Or suppose if we as a programmer come across 1100, how can we figure out what number 1100 represents?

Of course we cannot keep on calculating two's complement of each positive integer to see when we hit 1100. That will be too slow.

Programmers and the OS use a beautiful property of two's complement to decode the binary into decimal.

When we calculate two's complement of a positive number, we get its negative counterpart. Well, the reverse is also true – which means calculating two's complement of a negative number will give us its positive counterpart. We will see the why of this in a minute.

First, let's understand how the OS or a programmer will decode 1100 to decimal.

On retrieving 1100 from the eax register, the OS sees 1 as sign bit that signals that the integer is negative. Two's complement of 1100 is calculated that gives the positive counterpart of 1100 which comes out as 0100 (+4). The OS then prepends a negative sign on the positive counterpart and returns the final answer as -4. Re-read this paragraph once again and you'll get a better understanding.

Then the CPU smiles and says goodbye to the beauty for today ;)

The CPU has gone to its house to meet its mother. Now we have plenty of time to discuss the inner workings of the art of two's complement.

Why and how does two's complement encoding work?

If I tell you to find the negative of a number, say +42, what's the simplest way to find the negative of +42?

Arguably, the simplest way is to subtract the number from 0, right? 0 - (+42) = -42. If we repeat this, we get back to the positive value, 0 - (-42) = +42. This is all the math that two's complement is built upon.

We are doing 10000 (0 in decimal since the leftmost 1 is an overflow) minus 0101 (+5). We get 1011 that is -5 in decimal in two's complement encoding. Ignore how subtraction is done. That's not important. Understanding the intuition behind two's complement is important.

10000 can be written as 1111 + 0001 (try adding these two, you will get 10000). So actually we are doing:

        10000       -   0101
=>  (1111 + 0001)   -   0101

Rearranging the above equation we can write it as:

    (1111 + 0001)  -  0101
=>  (1111 - 0101)  +  0001

Step 1: subtract 0101 from 1111

        1 1 1 1
       -0 1 0 1
       ---------
        1 0 1 0

       see, subtracting 0101 from 1111 is equivalent 
       to inverting the bits of 0101, as we got 1010 as a result. 



Step 2: add 0001 to the above result  

        1 0 1 0  ---> result of step 1
       +0 0 0 1
       ---------
        1 0 1 1      

       we get 1011 that is -5 in two's complement encoding.

Did you see that the two's complement system fundamentally does 0 minus the number? Inverting the bits and adding one is a fast and clever way to subtract the number from 0.

This is the reason we get the positive of a negative number and negative of a positive number when we calculate its two's complement – because we are actually subtracting the number from 0 (0 - number).

Computers in the 1900s used to have just the addition arithmetic logic because the two's complement encoding scheme is so beautiful that subtraction can easily be performed.

For example, to subtract 12 from 100, the CPU computes two's complement of +12 that produces -12 then we add -12 to 100 giving us the required output.

Why don't we directly subtract from 0 to find the negative of a number or vice versa in binary?

Because subtraction is a slow and complicated process (thanks to borrowing) so our computer will need an expensive subtraction circuit if we go that way. Imagine subtracting from 0 every time we want to represent a negative integer. It'll be a nightmare for us and for our computers as well!

The two's complement encoding is a more performant solution, leads to a simple circuit design, and saves a lot of money. This is because we don't need an expensive circuit for subtraction and there's no additional logic to deal with the arithmetic of + and - integers. Just plain addition and we get to do both – add and subtract.

So let's appreciate our computer designers for this beautiful encoding scheme – the two's complement ❤️.

Final words

I promised myself that I would never charge for any learning material I produce. Whatever I do for education, whether it be a simple article or a course or an ebook, will always be 100% free and open.

I post useful resources and share meaningful thoughts on my Twitter account. You can follow me there and send me a DM if you learned something new from this article. It'll make my day :)

Every developer, every author, and every human being learns from someone. I believe the people and resources we learn from should be cited and spread. This encourages those good ones to do more for all of us. So here are my good ones.

Animesh of mycodeschool taught me many programming concepts better than anyone else including the concepts I wrote about in this article.

André Jaenisch, my mentor and friend, without his reviewing efforts and constant support I would not have written this article.

Happy learning!

Previously, I shared my usage of padStart to elegantly replace what would’ve been loads of if statements. This magical method threw me off my rocker. I simply couldn’t believe it existed.

What it does

Mozilla Developer Network (MDN) Docs:

The padStart() method pads the current string with another string (repeated, if needed) so that the resulting string reaches the given length. The padding is applied from the start (left) of the current string.

Keep prepending a string to another string until the target length is met.

If the length is already less than the original string’s length, nothing happens.

And since padStart returns a string, we can chain its methods.

See? 1, 2, 3, 4, and 5 are all less than or equal to world's length of 5, so padStart doesn’t do anything.

Browser support

Unfortunately, support’s currently “meh”

Desktop supportMobile support

You can either use babel-polyfill or the polyfill by MDN.

Here’s MDN’s polyfill.

Some points of interest:

• Prototypes (lines 1 and 2)
• Bitwise operators (line 4)
• padString.repeat (line 14)
• padString.slice (line 17)

I’m down to step through them if you are ?

Lines 1 and 2 aren’t that bad: “If padStart isn’t supported by the browser, let’s create our own padStart and add it” (that’s polyfill-ing in a nutshell).

A common way to check a method’s browser support is to inspect its object’s prototype. Since padStart is a string method, it should exist on String.prototype.

My old version of Safari doesn’t support padStart.

My Safari’s padStart support

But my Chrome and Firefox do.

Chrome padStart supportFirefox padStart support

Consider this safety check on line 1

if (!String.prototype.padStart) {
}

That if statement would only return true in my old Safari. It returns false in Chrome/Firefox, so no polyfill-ing happens.

Moving on, line 2 creates a new function called padStart and assigns it to String.prototype.padStart. Because of JavaScript’s inheritance model, any string created afterwards can use padStart.

This function takes two parameters

1. targetLength: How long should the resulting string be?

2. padString: What are we padding it with?

Let’s shower this code with debugger statements.

I also removed that if statement from line 1, so even the native String.prototype.padStart will be overridden by this function–makes it useful if you want to debug in Chrome.

Don’t override prototypes in production, kids!

Using our initial example

'world'.padStart(11, 'hello ');

Check out line 2. We see that targetLength and padString made their way into our function. No craziness yet, but it’s coming. I’ve been avoiding line 5 long enough.

Bitwise operators

The comment above line 5 briefly describes its purpose: “If targetLength is a number, round it down. If it’s not a number, make it 0”.

Bitwise operators make this possible.

targetLength >> 0;

This operator >> is known as a sign-propagating right shift (LOLWUT?). You use it with two numbers

a >> b

What this does:

1. a is converted into binary (details here).
2. Binary a gets right-shifted b times.

Our targetLength is 11–that’s 1011 in binary (here’s a converter if you don’t believe me ?).

A side effect of converting to binary is that numbers get rounded down and most non-numbers become 0.

Try the following examples

See? Fractions become whole numbers. Non-numbers become 0, with one notable exception…

Binary is just 1’s and 0’s, right? Those 1’s and 0’s represent “on” and “off” switches–true and false. true's binary form is 1, and false's binary form is 0. Just keep that in mind.

So now that we’ve “sanitized” targetLength, we begin the right-shifting.

Right-shift means you move each bit to the right n times. That’s it.

Here’s a PowerPoint visualization of 11 >> 1 (I forgot how great PowerPoint actually is).

Turn 11 into 1011 and right-shift it 1 time. Your end result is 101, which is 5 in binary.

But our code says targetLength >> 0.

So we’re right-shifting 0 times…

The whole point of right-shifting 0 times is to abuse that side effect of converting targetLength into binary. We don’t actually want to shift anything because that’ll change the value.

Moving on

Jump to line 7’s debugger now. targetLength has been sanitized. Next!

Line 11.

padString = String(padString || ' ');

If we don’t provide a padString argument, it defaults to an empty space. I actually never noticed until now.

Line 17.

Notice how line 13 had another safety check, “If the original string’s length is greater than targetLength, don’t do anything. Just return the original string”

That makes sense because if our targetLength is 1, but the string is already 10 characters, what’s the point? We demonstrated that earlier with

// just returns 'world'
'world'.padStart(0, 'hello ');

Line 18 determines how many more characters we need by subtracting targetLength from the original string’s length. We need 6, in this case.

Line 27.

We skipped that if statement on line 20 because targetLength and padString.length just happened to be the same, but we’ll revisit that soon.

For now, we’re stopped right before line 29. Let’s break it up.

padString.slice(0, targetLength);

The good old String.prototype.slice method.

MDN Docs:

The slice() method extracts a section of a string and returns it as a new string.

It’s index-based, so we’re starting at index 0 of padString, and grabbing the amount of characters equal to targetLength. It’s kind of like

Return that sliced padString combined with the original string, and you’re done!

Almost done

I’d normally conclude here, but we haven’t explored that if statement on line 20. To make sure we hit it this time, let’s try another earlier example

'yo'.padStart(20, 'yo');

I skipped to line 20 because we already know what happens up to this point.

if (targetLength > padString.length)

targetLength is 18, and padString is 'yo', with 2 as its length. 18 > 2, so what next?

padString += padString.repeat(targetLength / padString.length);

Remember, padStart returns a sliced padString + original string. If you want to pad 'yo' with 'yo' until it’s 20 characters long, you’ll have to repeat many times. This is where that logic happens, using padString.repeat.

MDN Docs:

The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

So it copy/pastes the string n times.

In order to find out how many repeats we need, divide targetLength by padString.length.

Repeat 'yo' 9 times and get a string of 'yo's that is 18 characters long. Add that to your original 'yo', and your final count is 20 characters.

Mission accomplished. Until next time!