Like this book so far? We are also creating a supercharged UI/UX design tool for creating real, working application prototypes in the least amount of time and frustration possible.

For all the latest updates on this book and our new design tool, follow us on Twitter: @HeyUXZen

Make sense of code

If you're new to coding, the last thing you should do is to stress about all the bewildering programming languages available, worrying about which one is the best, how to make a website, or an app, or anything "useful", really. Instead, you should focus on the fundamentals of coding, the stuff that's applicable to anything you end up using or making.

Fundamentals

Many people think that you have to choose the best programming language to even start learning to code; the fear is that if you choose the wrong language, such as an unpopular language, that you wouldn't be able to catch up, or to find a job. The truth is that mastering the fundamentals will allow you to quickly pick up most mainstream programming languages.

The truth is that most mainstream programming languages encompass the same basic principles. Let's take an example from everyday life: suppose you want to ask someone to help you with something; when you communicate with someone, you are using a natural language that you and the other person both understand. And, if both of you understand another language, you can choose to use that other language to communicate — same result, different language.

Programming is the same way; you are basically asking the computer to do something, using a programming language that you and the computer can understand. You can also use a different programming language, and as long as the computer or program that you are programming understands this other programning language, the computer or program can do what you asked.

The textual content of a programming language is called code. A web browser, for example, understands HTML, CSS, and Javascript. These are three separate programming languages that you would typically use to tell a browser to "draw a website." It's often the case that you'll use a combination of programming languages, and it's important to note that mainstream programming languages were designed to be immediately applicable for real, production-quality work, which means these languages have lots of bells and whistles that are overwhelming for beginners. The best way to tackle this chaotic mess is to master the fundamentals; you should first learn the most important, endearing concepts before diving into the weeds.

To whet our appetite, let's look at how we can tell a web browser to "draw" a simple blog:

<h1>My blog 2.0</h1>

<p>
  Welcome to my <em>bloog</em>,

  I have a

    <a
      href="https://www.youtube.com/watch?v=YPdFWlQPpVs"
      target="_blank"
    >
      YouTube chaneeel
    </a>,

    too! 
</p>

My blog 2.0

Welcome to my bloog, I have a YouTube chaneeel , too!

The above HTML code instructs your web browser to draw:

  1. A big heading, My blog 2.0
  2. A paragraph, Welcome to my bloog, I have a YouTube chaneeel, too!, with the word bloog in italics, and the words YouTube chaneeel as a link that takes you to this person's channel on YouTube.

Don't worry too much about what the different symbols and abbreviated words mean in the above HTML code; the point is that 99% of code is just English, because the people writing code are HUMANS who communicate in a natural language, and when working in a team, programmers need to be able to read and understand each other's programming code. If you asked another programmer to fix your typo, and then to add another paragraph that describe this blogger's interests, your programming friend needs to be able to make sense of your original HTML code before she can even decide where and what to change, or add.

Why programming languages?

It's important to understand that a computer is not a magic device that can somehow truly understand you. We are probably many millions of years away from being able to just tell a computer to do complex tasks using natural language. We can cheat by creating a program that is programmed to recognize common patterns, and even to be able to extend the set of recognized patterns and seem like we have real AI, but that is all just an elaborate system of number crunching, not actual cognition.

A computer is nothing more than simple mechanical devices like a stapler; the only difference between a computer and a stapler is that a computer is more like a trillion microscopic staplers shoved into a tiny chip, with a mechanism to keep track of used staples, and to re-use staples so that you don't have to keep buying new staples. A computer can only really add and subtract numbers, which it does by basically treating unused staples as positive numbers, and treating used staples as negative numbers. But the beauty of this simple trick is that once you're able to add positive and negative numbers, you can get multiplication and division by just repeating addition many times over. And if you can do multiplication that way, then you can compute powers of numbers by repeating multiplications many times over.

When you peel off all the layers of a modern computer, everything that a computer can do is an arithmetic trick; for example, computers do not know what an alphabet is, neither does it know what a color is. Instead, HUMANS known as programmers have unanimously decided that the number 65 should be treated as the letter 'A'. And 'B' should be encoded by the number 66. And 'C' is 67. And the Chinese word for cat, 猫, is encoded by the number 29483. This system of assigning letters and words to numbers was designed by a committee of HUMANS in 19??, The Unicode Consortium.

Font designers know that even how the letter 'A' is drawn on a computer screen is nothing more than a small program that draws a slanted line on the left, a slanted line on the right, then a horizontal line in the middle; to draw the letter 'B', your font specifies another little program that instructs the computer to draw a vertical line, and then two bowl-like curves. Each different font is just a collection of tiny programs, organized according to the standard numerical encoding for each letter, or glyph, in font terms. So, a computer truly does not understand what a letter is, it is just an elaborate system of tiny programs that have a magic-feeling cumulative effect, taking advantage of the fact that our eyes can only detect visual changes in the 20-60 frames per second range; a computer can do few billion small tasks in less than 1/1000th of a second, well ahead of our slow 60 fps response time.

Absolutely everything about modern computers is the result of a humongous array of standardized tricks, designed over several decades, by many thousands of design comittees. This includes the Internet, how colors are encoded, how sound and movies are encoded, and much more, are all things that are designed by large committees, and the cumulative effect of these systems of encoding is that a computer looks and feels like a magical device. But just keep in mind that when it's all said and done, when you look at the tiniest thing that a computer actually does, it is only adding two numbers together and storing the result for the next addition in the pipeline.

That was a long-winded explanation for why we need programming languages. Programming languages are a compromise; since we're still millions of years away from being able to intuitively speak to a computer, we're stuck with two choices: 1) we can all just use zeroes and ones to program a computer, or 2) we can come up with a few English keywords and a few rules for how you should arrange these keywords to form instructions that a few special programs, called compilers and interpreters, can recognize and turn into working computer programs that have the effect of doing what we "coded".

We would all lose our sanity if we had to write in zeroes and ones, so instead, the entire world has decided to design a few programming languages (roughly several thousand, but most programmers know only four or five) to make the task of telling a computer what to do reasonably approachable.

Although mainstream programming languages are designed by large comittees, many of the most popular ones started as just one-person passion projects, done on one's spare time, for zero pay, out of one's burning desire to create an easier or more useful programming language. You'll find that each programming language as its own flavor, precisely because each programming language is designed by different people, often for different purposes.

The important thing you should take away from this is that you should include yourself in the creative act of programming language design. See yourself as a programming language architect or critic, rather than just trying to learn to "speak" a programming language. Unlike spoken languages, you have the unique opportunity to craft your own programming language, whenever you want — this compromise of having to string together keywords is really a blessing in disguise; and we're going to start our programming journey by designing our own programming language, right here, right now!

Our own programming language

Draw a big heading

Let's refer back to our simple blog. We instructed the web browser to draw a page title, and then draw a paragraph with some words in italics, and to include a link to our YouTube channel.

Imagine if you gave someone a sheet of paper and a pen; ask this person to "draw a big heading." You would naturally get a response like, "what should this heading say?" Likewise, when you ask the browser to draw a big heading, the browser would need the same information — the heading text.

Let's try to come up with our own programming language to tell the browser to draw a big heading:

I want you to draw a big heading.
It should have the text, "My blog 2.0".

Ok, so that's pretty clear, but it's quite wordy, and if you had to create many headings, it would be tedious to type everything out. Here's how it would look like if we had to draw three headings.

I want you to draw a big heading.
It should have the text, "My blog 2.0".

I want you to draw a big heading.
It should have the text, "Interesting stuff about me".

I want you to draw a big heading.
It should have the text, "Cool things around the web".

How about something shorter:

Draw big heading with text "My blog 2.0"

Draw big heading with text "Interesting stuff about me"

Draw big heading with text "Cool things around the web"

Better, but let's try to make it even more concise:

Big heading: My blog 2.0

Big heading: Interesting stuff about me

Big heading: Cool things around the web

Much shorter, and still understandable. Let's roll with this; so our language right now consists of the keywords Big heading:, and everything after : is the content of the big heading. Let's assume we've programmed the web browser to recognize this pattern. So far so good, let's move on to drawing a paragraph:

Draw a paragraph with…

Next, we want to start a new paragraph, and include a link in it to the blogger's YouTube channel. So, you would ask the browser to first start a new paragraph and tell it what the first part of the paragraph should say. Then, we tell it to write the text for our YouTube link, YouTube chaneeel, but the browser doesn't yet know what the actual address (URL) of the link, so we need to include this information as well. Since we only want the words YouTube channel to be a link, we need to tell the browser what the part after the link should say, ", too!".