Introduction
The first time I ever touched a computer was in my first year of university. Back then, I had no clear idea of how to learn a field as vast as computer science, and it was one round of trial and error after another.
In this post, I look back on how I, a lost first-year student, made my way through computer science. I explain how a browser works from the bottom up and introduce books that are useful for each topic along the way.
Key Concepts in Computer Science
Before getting into the main part, here are three key concepts in computer science worth keeping in mind.
“Divide each difficulty” (René Descartes)
The IT systems in the world are extremely complex.
Have you ever seen a photo of a CPU? A CPU is made up of an enormous number of gates. PCs and smartphones are built by combining such complex hardware. IT systems are made up of huge numbers of electronic devices connected by cables and electromagnetic waves.
Building such complex systems is a complex problem.
The approach that has long been used to deal with complex problems like this is “divide each difficulty.” You break a complex problem down into small, (relatively) simple problems, solve them one by one, and then combine the solutions to solve the whole problem.
This may sound obvious, but it comes up again and again when you study computer science.
Examples include modularization in programming, divide-and-conquer in algorithms, and the way components are assembled in digital circuits.
If you keep “divide each difficulty” in mind, you will find the courage to tackle even complex problems when you run into them.
Building on existing technology
This applies to science in general, but information technology is built by stacking technologies on top of one another.
New technology is made by building on existing technologies that already work well.
You solve the problems you split up in the “divide each difficulty” step one by one, then combine those solutions cleverly to create new technology.
Examples where you can see this layering include the layered structure of communication protocols and the organization of hardware.
Specifications and standardization
The concepts so far apply to science in general, but specifications and standardization may be concepts unique to information technology.
Information technology is not derived from nature the way physics is (although, of course, things like the performance limits of hardware are). Instead, people decide on specifications and build systems on top of them.
And standardization, the act of getting many people to agree on a single specification, is extremely important for running and inventing the IT systems of the world efficiently.
Examples where specifications and standardization matter include communication protocols and the OS as the interface between hardware and software.
Wherever there are humans, there is standardization.
I believe the three concepts above are essential for dealing with complex, intricate problems.
Of course, there are many other important concepts as well.
UNIX is the OS from which many of today’s widely used operating systems descend.
This book introduces the core ideas of UNIX and gets you thinking about what kind of software ends up being used by many people for a long time.
What Is a Browser?
A browser is software that sends and receives website data, renders pages (displays them), and so on.
Well-known browsers include Safari, Google Chrome, Firefox, and the late Internet Explorer.
Making a browser work requires almost all of the main technologies of computer science: communication, computers, operating systems, programs, and more.
On top of that, it lets you deepen your understanding of the three key concepts in information technology mentioned above, especially specifications.
Below, we look at the technologies of computer science from the bottom up, in this order: communication, computers, operating systems, programs, and browsers.
How Does Communication Work?
In this world, information is transmitted by electric currents flowing through cables and electromagnetic waves flying through the air.
What flies around there are not the numbers and letters we use when we talk. Instead, information is carried by physical signals, such as a voltage being on or off.
So why 0 and 1? Actually, it does not have to be 0 and 1. If the medium can represent three or more states, 0, 1, and 2 would work just as well.
However, restricting things to the two states 0 and 1, the smallest unit of information, gives more stability.
For example, suppose a voltage can take any value continuously from 5V to 0V. If you divide the voltage range into three parts versus two parts, the latter is more stable. That is because in the real world, physical quantities that take continuous values are affected by noise such as cosmic rays and temperature, so they are not stable.
So, to separate states clearly, you need to keep a large distance between one state and the next.
Why can information be transmitted with 0s and 1s?
Why can 0s and 1s carry information?
It is because information is “encoded.”
The numbers and letters we use every day, such as “0”, “1”, … or “a”, are each represented by a different symbol so that we can tell them apart.
In fact, there is no necessity for them to be represented by those particular symbols.
For example, in ASCII, a well-known character encoding, “A” is represented by the number 0x41 (01000001 in binary). This is where the concept of “specifications and standardization” comes in.
If you decide in advance, as a specification, how to represent symbols with 0s and 1s, you can encode each symbol and represent it with 0s and 1s.
Information and communication
In communication, what matters is how 0s and 1s are sent and received.
For example, when 0001 is sent, the sender and receiver may agree on the timing at which to split it into 0, 0, 0, 1; there are also clever methods such as Manchester code. For the start of a transmission, too, you can simply assign some symbol, just like the start codon in DNA.
Here you can catch a glimpse of how important “specifications” are.
Information theory
Information theory is the field that studies how to encode information efficiently, and how to encode and decode it when there is instability such as noise.
QR codes are an interesting application of information theory.
I will only introduce information theory briefly here and leave the rest to the books below.
If you want a theory book that uses plenty of math while carefully explaining what it all means, this is the one.
Protocols and the layered structure
In communication, you need routing: deciding who sends what to where.
That is because in the real world, not every device is connected one-to-one by a cable or wireless link. Instead, devices can reach each other by hopping through other devices on a network connected like a mesh.
So, besides the devices that send and receive information, you also need devices that route information (such as routers) and someone to find the destination (such as DNS servers).
Moreover, in addition to the content you want to convey, the information itself has to carry what communication needs, such as the sender and the receiver.
This cannot be attached arbitrarily; it must follow “specifications” (or protocols) defined through “standardization.”
If you just keep adding to such specifications, they become too complex.
So they are split into layers to “divide the difficulty.”
Today, the TCP/IP model is widely used, and it plays a big part in how browsers work.
This book covers the TCP/IP model, and communication in general, in detail. Reading it will give you a solid understanding of the fundamentals of communication, starting from how things work.
How Do Computers Compute?
How does a computer process the information it receives through communication?
Components of a computer
A computer is made up of several components working together.
The main ones are the following.
- CPU
The CPU is the hardware that processes information: it computes, moves, and temporarily stores data.
It is the most important piece of hardware in a computer.
- Memory
Hardware that stores data such as programs.
Depending on the physical medium, memory differs in volatility (volatile or non-volatile), access speed, and capacity.
Modern computers improve performance, such as speed and capacity, through tricks like arranging different kinds of memory into a hierarchy.
- Input/output devices
Input/output devices include displays, keyboards, and equipment for sending and receiving communications.
Data obtained through this hardware is processed by the CPU or stored in memory.
What computers can do
Using the components above, a computer can do a handful of things.
By combining them, it does bigger things. That is exactly “building on existing technology.”
- Moving data
A computer can move data.
You might think, “Moving? How trivial,” but this is an important operation that could be called the essence of information processing.
In fact, if you look at the code you get when a program in a high-level language (such as C) is compiled (translated) into assembly language (a program in a form closer to what the machine reads, such as x86), you will see that most of it consists of mov instructions, which move data.
-
Arithmetic: basic operations such as addition, subtraction, multiplication, division, shifts, and logical operations.
-
Comparison: comparing data lets you branch the processing.
-
Jump: jumps make loops and conditional branches possible.
There are many other operations, but computation proceeds by using these basic ones.
Computers can do surprisingly few things, don’t you think? And yet, by combining them, they can do amazing things!
What makes this possible is programming. You can see that programming is a truly creative activity.
I will leave the details to the books below.
This book covers the interface between software and hardware in detail. Specifically, it covers topics such as CPU design and instruction sets (ISAs). The authors are giants who lead this field.
It covers similar ground to Patahene, but explains everything from the lower gate level up to building a CPU. A distinctive feature of this book is its wealth of hardware description language (HDL) implementation examples.
What Is an OS (Operating System)?
An OS is software, such as Windows, Linux, Mac OS, or iOS, that underpins PCs and smartphones.
Any app, whatever it is, needs basic operations to do its computing: allocating memory, working with files, managing hardware, managing communication, and so on.
The software that handles all of this comprehensively is the OS.
The OS assumes that the hardware works correctly and uses it to manage that hardware. That is exactly “building on existing technology.”
That said, given its role, the OS covers a very broad range and sits at a low level, so explaining how it works in detail within limited space is difficult.
So I will leave the details to the books below.
Using Go, a modern language, this book explains what the OS does and what operations you can perform with it.
A very thick book, but one of those books that is thick precisely because its explanations are so careful.
A book where you build your own OS.
What Is a Program?
So far, we have covered communication, computers, and operating systems.
Here, I explain what programs, which you need in order to build real applications on top of all this, are like.
Below is a program that computes Fibonacci numbers.
def fibonacci(n):
# 基本条件
if n <= 1:
return n
# 再帰的な手続き
else:
return fibonacci(n - 1) + fibonacci(n - 2)
# フィボナッチ数列の 10 番目の数を求める
print(fibonacci(10))As you can see, a program carries out computation using “variables” and “functions.”
In practice, a program like this is interpreted and executed by an interpreter.
Alternatively, it is translated into assembly language or machine code by software called a compiler and then executed.
Algorithms and data structures
What matters in a program are algorithms and data structures.
According to Wikipedia, an algorithm
refers to a procedure that correctly finds the solution to a “computable” problem whose solution is well defined
So a program can be described as an abstract thing called an algorithm turned into code.
Moreover, to solve problems, the concept of data structures is also indispensable.
According to Wikipedia, a data structure
is an organization that makes it easy to manage stored data, such as looking up and modifying each item
By using a data structure that suits the nature of your data, you can make problems easier to deal with.
I will leave the details to the book below.
When learning data structures and algorithms, it is also important to actually write programs.
Competitive programming contests are a great way to learn while having fun.
In Japan, AtCoder is a well-known competitive programming site.
I also recommend アルゴ式 (Algo Method), a site with learning materials across many areas.
Program development is a world of splitting problems and abstraction
Personally, I think program development is a world of splitting problems and abstraction.
Large-scale programs can reach tens of millions of lines. To develop programs that large, the idea of “divide each difficulty” and the idea of abstracting things to make them easy to reuse become important.
In that sense, I think programming is packed with the essence of computer science.
Compilers
By now, many readers may be wondering how programs connect to the OS and the computer.
Questions like: what is the difference between an interpreter and a compiler, and why can a program run on a computer that only understands 0s and 1s?
An important topic for understanding why programs run is compilers.
Earlier, I explained the operations a computer can perform. In practice, these are specified by instruction sets (ISAs) such as x86, and the computer can execute a program once a high-level language such as C has been translated into an assembly language such as x86.
Compilers are packed with the essence of computer science. What I find especially fascinating is how much theory contributes to implementation. So I recommend the following.
Of all the books I read in university, this is the one (a website, actually) that influenced me the most.
I think the best way to really learn information technology is, after all, to write programs and build things yourself.
In this book, you actually write a C compiler in C. Because you build it incrementally (a little at a time) so that the compiler always works, it is easy to stay motivated and keep enjoying it. The book also covers techniques and tools for developing large-scale software, which will be very helpful for your future development work.
Although it is a relatively thin book, it gives you a comprehensive grounding in compiler fundamentals.
- コンパイラ―原理・技法・ツール (Information & Computing) (Compilers: Principles, Techniques, and Tools), Aho et al.
For a more detailed book on compilers, try this one. It is thick, but it covers many topics. At first, it may be best to use it like a dictionary.
How Does a Browser Work?
First, what does a browser need in order to work? It needs resources, such as the design, text, and images used to display a web page.
To get these resources, you need to send a request to a web server saying “please give me the resource.” To send this request, you need to define the specification of the request message and make use of the OS, the computer, and communication. That is exactly “building on existing technology.”
The server that receives the request then sends back the requested resource.
The browser receives it and displays the page on the screen based on that resource. This requires a program for displaying it.
Browsers also have a JavaScript execution engine and send, receive, and process all kinds of data for each page.
I will leave the finer details to the books and sites below, but I hope you can now see that a browser is made possible by drawing on many technologies.
This covers HTML/CSS, which describe static content, and goes into detail on how the engines that render them work.
A repository implementing a browser in Rust.
A blog series that implements browser rendering in Rust.
Advice for Your Future Learning
Make the most of the browser
The browser, which has driven the information society, is a powerful weapon for learning and development.
However, its vast amount of information is a mixed bag of gems and junk, and the drawback is that it is very hard to sort out what to use.
- Search skills + fundamentals
That is why search skills matter. Searching for the information you want is a skill that takes quite a bit of practice. An important factor in improving that search skill is having a solid foundation in the subject you are searching for. Still, in practice, how much information you can get depends on your search skills. Start by building your foundation with good books.
Official documentation matters
One thing I have come to feel strongly is the importance of official documentation. In IT, documentation is often in English, so you tend to rely on Japanese blog posts and the like, but most of what is in those blogs is written in the official documentation. And very often, the slow and steady way turns out to be the fastest. Make a conscious effort to read the official documentation.
Take part in events
There are many events that bring together students, working professionals, and researchers specializing in information technology.
Taking part in them gives you opportunities to boost your motivation and technical skills, and to broaden your interests through the people you meet.
Here are some well-known events.
I took part in this one myself and was greatly inspired by the other participants and the instructors. I highly encourage you to apply.
Others include
and more. Do look them up.
Ask questions
This applies to everything, but asking questions is important. The knowledge you gain from the answers matters, of course, but the process of coming up with a question also makes you think things through and shows you what you do and do not understand.
Write code
What I regret about my first year of university is that I focused only on deepening my understanding through reading and hardly wrote any code.
Writing code may be hard at first, but once you get the hang of it, it gives you a lot of freedom and is really fun.
Writing code also deepens your understanding even further. As you go through trial and error in your implementation, you start paying attention to the fine details, such as corner cases.
As Feynman put it, “What I cannot create, I do not understand.”
Output matters
This overlaps with writing code, but I have found that output matters.
In my first year, almost everything I did was input, and I often felt anxious, not knowing whether I really understood things.
By programming, you can check that your program actually works correctly,
and by rereading articles where you summarized your understanding, you can see how well you understood things at each point in time.
Conclusion
This completes the laying of the “highway of knowledge.”
From here on, it is you who will drive down this “highway of knowledge.” In the world of computer science, where new technologies keep emerging one after another, mastering the foundational technologies will give you great strength.
And with that, Let’s deep dive!