If you’re neither a pro­gram­mer nor a web designer, you probably don’t think much about what’s behind the programs and internet pages that you use every day. They are based in part on very com­pli­cat­ed and long in­struc­tions to your computer. This command text is called source code. On the basis of a par­tic­u­lar pro­gram­ming language, pro­gram­mers lay out all of the rules for a computer-ex­e­cutable ap­pli­ca­tion. If the author writes an unnoticed error into their work that violates the spec­i­fi­ca­tions of the pro­gram­ming language, then the program either won’t function properly, will do nothing, or will crash.

De­f­i­n­i­tion

Source code is a human-readable text written in a specific pro­gram­ming language. The goal of the source code is to set exact rules and spec­i­fi­ca­tions for the computer that can be trans­lat­ed into the machine’s language. As a result, source codes are the foun­da­tion of programs and websites.

What is source code?

Computers - re­gard­less of whether it’s a home PC, modern smart­phone, or sci­en­tif­ic computer - work in the binary system: on/off, loaded/not loaded, 1/0. A sequence of bits instructs the computer as to what it should do. While commands were created in this way in the early days of computer tech­nol­o­gy, we have long since switched to writing ap­pli­ca­tions in a human-readable pro­gram­ming language. This may sound strange at first since source code could also look like confused gibberish to a layman. In context, “human-readable” is un­der­stood as the coun­ter­part to the term “machine-readable”. While computers only work with number values, humans com­mu­ni­cate with words. So, just like a foreign language, one must learn at least one of the various pro­gram­ming languages before being able to program, etc.

Different pro­gram­ming languages

There are hundreds of different pro­gram­ming languages. It’s im­pos­si­ble to say for certain which are better or worse, as it depends on the context of the project and the ap­pli­ca­tion for which the source code is used. Some of the most popular pro­gram­ming languages are:

  • BASIC
  • Java
  • C
  • C++
  • Pascal
  • Python
  • PHP
  • JavaScript

For the computer to un­der­stand these languages, however, they need to first be trans­lat­ed into machine code.

Compiler & In­ter­preter

For the computer to be able to further process the source code written by the pro­gram­mer, there needs to be a trans­la­tion between the two – this occurs in the form of an ad­di­tion­al program. This as­sis­tance ap­pli­ca­tion can be in either the form of a compiler or an in­ter­preter:

  • Compiler: This ap­pli­ca­tion type trans­lates (compiles) the source code into a code that the process un­der­stands and can execute. This machine code is saved in the form of an ex­e­cutable file.

  • In­ter­preter: An in­ter­preter trans­lates the source code line for line and executes it directly. The trans­la­tion process is much faster than a compiler but the execution is slower and requires a large amount of memory.

You don’t get to choose, either: each pro­gram­ming language de­ter­mines whether a compiler or an in­ter­preter is used in com­bi­na­tion with it. Nowadays, an in­ter­me­di­ate solution is being used in­creas­ing­ly often - Just-in-time com­pi­la­tion (JIT). This type of trans­la­tion attempts to combine the ad­van­tages of both variants (quick analysis and quick execution) and is used in browsers, for example, to more ef­fec­tive­ly handle JavaScript, PHP, or Java.

Markup languages

The foun­da­tion of a website is also referred to as a source code. However, this is not a case of a pro­gram­ming language but rather the markup language HTML. A markup language de­ter­mines how content is struc­tured. For example, using HTML allows you to define headlines, para­graphs, or high­lights. An HTML document isn’t a program in and of itself but may contain one, for example in the form of JavaScript Code. A similar principle applies for other markup languages, such as XML.

Structure of a source text

Depending on the pro­gram­ming language in question, you’re limited to certain con­ven­tions when writing a program. Very few pro­gram­ming languages appear out of nowhere, though, and most of them build on one another. For this reason, certain elements come into use in various different program codes:

  • Commands: In­struc­tions are as a rule the basis for all ap­pli­ca­tions. Here, the pro­gram­mer makes it clear for their future program what needs to be done. Such commands can, for example, trigger certain cal­cu­la­tions or display a text.

  • Variables: Variables are vacancies that can be filled with in­for­ma­tion. These are referred to within the source code again and again with an assigned name.

  • Com­par­isons: The structure of most programs is built by queries that function on the if-then scheme, i.e. the principle of propo­si­tion­al logic. If a par­tic­u­lar truth value is entered, then one solution is triggered instead of another.

  • Loop: Queries can also be the foun­da­tion for loops in a source code. A command is repeated until a certain value is reached. When the program ends the loop and runs the rest of the code.

  • Comments: In all common pro­gram­ming languages, you can comment on lines within the code. This makes it possible to write text in the source code that isn’t taken into account by the program. Comments are entered into the source code, for example, so that you or another developer can continue to un­der­stand parts of the code in the future.

With the creation of a source code, there’s always a problem to solve. De­vel­op­ers write programs in order to provide solutions. The way to do that, though, is not set in stone. When two pro­gram­mers are dealing with the same problem, it could well happen that the two resulting source codes are quite different from one another - even if they are working in the same language.

Even though in many cases there isn’t one right answer, all pro­gram­ming work has one thing in common - a good source code avoids un­nec­es­sary text. The ad­di­tion­al text makes the problem confusing, slower, and more prone to errors. Par­tic­u­lar­ly confusing source code that even pro­fes­sion­als can’t read is referred to as spaghetti code since the structure may be as tangled as dangly pasta on a plate.

Create source code

To write a source code, all you really need is a simple text editor - like the Notepad on Windows or TextEdit on Mac. This way, source code can be saved as plain text (e.g. in ASCII coding  or with UTF-8 encoding) with the correct file name ending for the pro­gram­ming language. So if you find a file with the ending “.cpp” on your hard drive, then it’s actually a text file, likely con­tain­ing code in the C++ pro­gram­ming language.

Fact

File name ex­ten­sions are con­ven­tions. The suffix, which is usually separated from the attached file name by a period, is meant to indicate the format of the file. Windows uses the file ending - if it’s known - to identify which program the cor­re­spond­ing file is to be run with. Other operating systems that are based on Unix (e.g. macOS) consult the content of the file to determine the format.

Text editor

In addition to the standard programs of the operating system, there are also advanced text editors that simplify source code work through various functions:

  • Syntax high­light­ing: Every pro­gram­ming language uses its own syntax. In many text editors, you first select the pro­gram­ming language in which you want to create your source code and then the program au­to­mat­i­cal­ly high­lights critical elements. In­den­ta­tions that clarify the structure of the source code are also created by the program on its own.

  • Au­to­com­plete: Many text editors for pro­gram­mers know the cor­re­spond­ing commands of a pro­gram­ming language, complete them au­to­mat­i­cal­ly, and close open paren­the­ses by them­selves.

  • Bracket high­light­ing: Pro­gram­ming languages use paren­the­ses (or brackets) to group elements together. To keep track of large code documents, some text editors mark the brackets in which you’re currently working.

  • Code folding: Source code is built hi­er­ar­chi­cal­ly, in most cases, through in­den­ta­tions and paren­the­ses. To give a better overview during the pro­gram­ming process, some text editors allow you to collapse the source code located on the deeper levels. This hides parts of the code that aren’t currently relevant.

  • Compiler in­te­gra­tion: Some text editors can be upgraded using plugins with compilers. This makes it possible to directly test the program that’s just been written.

  • Multiline editing: Source code written by hand can be a very elaborate endeavor. For this reason, de­vel­op­ers like when they can do as many steps as possible at the same time. Multiline editing allows them to make identical changes to multiple sections of the document, saving time.
Image: Screenshot of the text editor Notepad++
The text editor Notepad++ supports de­vel­op­ers with functions like au­to­com­plete and syntax high­light­ing

In­te­grat­ed de­vel­op­ment en­vi­ron­ment (IDE)

Enormous projects can be realized more easily with special programs. In­te­grat­ed de­vel­op­ment en­vi­ron­ments combine multiple tools that de­vel­op­ers need for their work (hence, “in­te­grat­ed”), speeding up the workflow. Other ad­van­tages of such IDEs are the tools that com­mu­ni­cate with one another seam­less­ly and make syn­chro­nous changes. These tools usually include:

  • Text editors: The text editor is also a core piece of the de­vel­op­ment en­vi­ron­ment. Although a few visual pro­gram­ming languages exist that function through the arrange­ment of graphical elements, the vast majority of ap­pli­ca­tions are written using classic source code. Text editors that are part of an IDE have a similar range of functions as editors that are used for pro­gram­ming outside of an en­vi­ron­ment.
     
  • Compiler/In­ter­preter: IDEs also contain a compiler and/or in­ter­preter. This way, pro­gram­mers can run their code directly from the en­vi­ron­ment.
     
  • Debugger: The use of a debugger is essential for sensible pro­gram­ming work. This tool is also a standard component of an in­te­grat­ed de­vel­op­ment en­vi­ron­ment. With this tool, you can search your source code for errors (bugs) by using break­points to interrupt the flow of the program and analyze the executed processes.
     
  • Linker: To finish off a com­pi­la­tion process, various elements have to be merged. A linker is a program that carries out this task and creates an ex­e­cutable file.
     
  • Version man­age­ment: This tool records all of the changes that you make to the source code and can restore older versions of the code. This way, your entire project is not in danger if you ac­ci­den­tal­ly make an error. A version man­age­ment tool is also essential when multiple de­vel­op­ers are working together on the same project.
     
  • GUI builder: Part of many ap­pli­ca­tions is a graphical user interface (GUI). Of course, this also has to be defined in the source code. A GUI builder supports de­vel­op­ers when designing the interface. In the form of a WYSIWYG editor, you can often organize graphic elements using drag-and-drop. The GUI builder trans­lates these into functions of the pro­gram­ming language within the IDE.

Well-known examples of the in­te­grat­ed de­vel­op­ment en­vi­ron­ment are the open source Eclipse or the Microsoft product Visual Studio.

Website source code

Even the basic structure of a website is usually referred to as a source code, even though it’s a document and not a program. Websites are written in the HTML markup language. In general, though, it’s not uncommon for websites to also contain elements that are written in a pro­gram­ming language such as JavaScript. What both languages have in common is that they can be written in a simple text editor.

Even if you’re not a web designer, it could be worth­while examining the source code of a page on the internet, for example, to detect faulty elements. All popular browsers give you various pos­si­bil­i­ties for viewing the source code of a website. Even if they all have different names, you can find the same functions in Mozilla Firefox, Internet Explorer (or Microsoft Edge), and Google Chrome.

One option for making the source code of a website visible is by saving it as an HTML file. By either right-clicking or accessing the menu, you can easily download the page. It’s important that you select “HTML only” as the file type (if you save the entire website, it will be displayed as it appears in the browser - including all images and without the HTML tags). Then you can open the file with a text editor. The simple editors that come with your operating system will most likely present the code in a very confusing way, however. With a text editor that has a wider range of functions, you can display the source code in a form that’s easier to read.

Image: Context menu in Google Chrome browser
Browsers - such as Google Chrome - offer multiple options for dis­play­ing the source code

Even without saving the page, you can view the source code of a website. Modern browsers have two methods available - simply display the HTML code of the entire website or display an analysis tool to help you examine the code. The first option isn’t very different from the pre­sen­ta­tion of the down­loaded file. It opens a new tab or a new page that displays the source code with struc­tured line numbering.

The second option is more in­ter­est­ing and offers more functions: the analysis tool can be found in the context menu under “Inspect” (Chrome) or “Inspect element” (Internet Explorer & Firefox). This opens an area within the window. Here, you can display the source code (in addition to other functions). The dif­fer­ence between this and the first option is that within this developer tool, you can directly select the cor­re­spond­ing elements on the website by moving the mouse pointer over the source code. This means that the tool is showing you which part is affected by a line of code. This is utilized by web design pro­fes­sion­als to check the pre­sen­ta­tion of their websites, for example.

Image: The developer tools in Google Chrome
With the browser’s developer tools, you can precisely inspect the source code of a website
Tip

The inspect function can be opened in various different ways. Aside from the context menu, you can also open it by right-clicking the mouse, or by pressing F12 in the most popular browsers.

Copy­rights for source codes

A lot of work and creative energy goes into a source code. This is why the source code of a program is also copyright protected. Just like with other in­tel­lec­tu­al property rights, it’s not permitted to dis­trib­ute the code of a third party without per­mis­sion. This applies es­pe­cial­ly to pro­pri­etary software. It is a different story for open source programs. In the software de­vel­op­ment world, there’s already a very active open source scene that is much more liberal with its code. The un­der­ly­ing impetus of the open culture among de­vel­op­ers is to col­lec­tive­ly work on projects, thereby de­vel­op­ing and improving software in the long term. On GitHub, Source­Forge, or other com­pa­ra­ble platforms, de­vel­op­ers make their source code widely available to other pro­gram­mers. However, de­vel­op­ers of open source programs usually have to adhere to certain con­di­tions, such as naming the author and license, if they want to use the code.

Go to Main Menu