A structured introduction to modern Webdesign

Scope

What I want to talk about today covers short glimpses into many fields. There are many questions I had myself when I started working and exploring in this field. You find yourself confronted with so many decisions at the get-go that it can seem impossible even to start.

I want to take you by the hand as a complete beginner, someone who only knows the term Webdesign, and guide you to those first lessons to learn, videos to watch, documentation pages to read and give you an overview of what you are dealing with.

In the following paragraphs, I want to cover the following areas:

• Basic technology: How does it all work? What is a website, and how does it work? What are the technological building blocks that go into it?
• Software: What kind of software is out there to help me? What is a “framework”? What is the difference between a tool and a framework?
• Starting point: What is a “good” first project? Where do I begin?
• Help: Where do I get it? When do I need it?

Surely you feel overwhelmed right now by what you are about to undertake, but rest assured: Even if there is sometimes some difficulty and if there are setbacks, the effort you put in will be worth it. It’s an amazing feeling to see a finished project, to see a tool you came up with in use, to profit from automation of a process you used to do manually.

Let’s dive right in!

Basic technology

For the sake of readability, I will spare you the same story over again how some smart people in the military invented the Internet formerly named the ARPANET. You can find that in a history book – or on the Internet. All you need to know is the fact that the Internet enables computers to send text back and forth. Now you might think that you can also send images but that’s not exactly right. The images you send via the Internet get translated into a machine language that explains how they look. There are many such languages. JPEG, PNG, and SVG might be some you have seen before.

Why do I tell you this? Because it is also a good introduction to Webdesign and why it strikes people as difficult: Let’s say you have a computer and want it to show everyone on the Internet a nice representation of your local business. If you are only able to send them pure text files, that’s going to be a pretty boring introduction. With pictures, you’re already one step further, but now you’re still stuck with a long text and some pictures. What about the positioning of text, interactivity, colors, layout, all that stuff?

HTML exists to solve this problem. It is a language to give the text meaning. We call programs that understand this language browsers. They receive a document written in HTML and show you a nice graphical representation of what that HTML contains. HTML has commands to turn text into a link or a heading, and just like that, we can create basic websites.

To extend the functionality of pure functionality, people introduced further languages to cover additional ground:

• CSS gives you the ability to define how text and other objects should look, and in modern versions, it can also define animations.
• JavaScript is an actual programming language that enables you to change the content of a website dynamically or to do work in the background (Is the value in that input field an email address? If the user clicks there I want to show them a picture of a cat etc.)
• SVG makes it possible to draw basic graphics in the browser.
• PHP enables you to generate an HTML document dynamically the moment someone asks for it.

These technologies introduce multiple ways of how to do Webdesign. Let’s assume you insert a URL into your browser’s address bar. What happens? What are the possible ways? Your browser will send a request to the address you gave it. If the destination is a computer awaiting your request, we expect it to send us a valid HTML document. It could either

• already have that document ready for us. In this case, we speak of a static website or
• have to do some work to figure out what to send back. The website might, for example, contain a spot where the date should be displayed. The server would then have to look up the date and insert that value before sending us the HTML document we expect. In this case, we speak of dynamic websites.

In the first case, we will always receive the same website no matter how many times we call it and at which time. The space for the date will always contain the same value. The second time, we will receive an individual return value every time because the server has to look up the date every time.

In the second case above, the server has to do all the heavy lifting, while your browser, the client, only displays whatever the server sends it. Imagine, however, that you want to write an online game, say, Sudoku. If it goes well, you might have millions of people playing your game. Do you want all those people using your computer for their games? That would be a lot of work.

It would be best if you could send them the rules of Sudoku and what the board is supposed to look like and let the browser do the rest. Your computer should be smart enough to do the rest. That’s where JavaScript comes in. It is a programming language your browser understands and which can access the website the browser displays. So the server sends you some JavaScript code that describes how the game works, your browser executes that code, and you have a game. Now the server doesn’t care anymore if you play one or ten games, and if you win or lose, it sends the rules and layout once. Cool, right?

We call code that running on the server “server-side.” The most widely used language here is PHP. This way, you can access data from a database without opening the database up to browsers. If, for example, a username shows on a website, PHP gets that name from the database, inserts it into the HTML as pure text, and sends it to the browser. That way, only the server needs to access the database – not the browser.

The code that runs in the browser is called “client-side,” and we write it in JavaScript.

Most websites today feature some interaction. That could be a login to access some personal dashboard, messaging, leaving comments, or shopping. That functionality requires code to run that reacts to your requests either on the server or in the browser. Typically you will use a combination of both. The modern trend, however, is to put more and more functionality into the browser, which means to write more code in JavaScript. There is also a system to write server-side code in JavaScript, so JavaScript that gets executed on the server, called NodeJs.

Software

One of the core lessons in programming is that someone already did what you want to do, and you don’t need to re-invent the wheel. There are already websites out there that have a login-functionality that is secure and makes sense – why would you do it differently? The core differentiation you can make here is the one between a tool and a framework. Both help you find a solution to your problem. However, the framework will be part of that solution – the tool will not. Angular, for example, is a web framework to build modern websites. Every website you build with angular contains the angular code + your code, so you use the framework and add your details to it. Dreamweaver, on the other hand, used to be a tool to design websites, but it generates a website for you, that doesn’t require Dreamweaver to run. Once you hit export, Dreamweaver’s work is done.

To keep everything nice and compact, people modularize frameworks so people can use only the building blocks they need rather than bringing a lot of code they don’t require. Sometimes there are also multiple ways to solve a problem. These two facts have introduced the terminology of a software stack. That term describes the list of tools and frameworks you use for your project. Some work well together; some are written by the same people and make sense together. There are, therefore, some famous software stacks out there which we will talk about later.

You will also read the term library. Function-wise it is interchangeable with a framework. It is code you bundle with yours to build a website. However, the “Inversion of Control”-principle states that a library is a piece of code you call to do a task while a framework is code that calls you to do something where it needs you. You could use a math-library to compute the square root of a number when you need it. WordPress is a framework, and it will ask you for the name of your website and what you want it to look like.

In the last paragraph, I mentioned WordPress and called it a framework. That is not the whole truth. WordPress doesn’t require you to do any more programming. All you do is manage your content. That includes actions like creating pages, uploading images, writing text in an online editor to be displayed on the website. This nature of the system is why we call this sort of framework a Content-Management-System or CMS. Joomla and Wikipedia are further examples.

While WordPress uses PHP (and is, therefore, a server-side technology), Angular, for example, is a framework written in JavaScript and is therefore client-sided. The only real restriction here is that user data and other confidential data will always be stored on your server and not entirely in the client. It will, therefore, make some functionality on the server necessary for the client to retrieve the data it needs. So if you have a website with user data, you will need some code on the server-side.

Starting Point

At this point, you are aware of most of the important lingo that you need. This should help you decide what you want to do and how. For example: If you are more interested in the design aspects, structure, color, fonts, etc. CSS would be a good starting point for you. If you don’t want to do any coding but need a website, a CMS like WordPress is your goto solution, and if coding aka the art of building functionality is what you are after, you only have to choose server or client-side, and you’re off to a good start. I now want to teach you a little bit about how to get going.

First off, I want to list some good sources of information:

• Documentation: For most modern projects, you will find great online tutorials and “Getting Started” guides. I cannot emphasize enough how valuable these are. They are usually free and provided by the people who built the system you will be working with, so they know what they are talking about and have heard the questions you have a hundred times.
• StackOverflow: If there are any questions, and you google for an answer, you will find responses on many websites. Don’t use any of them except StackOverflow (and maybe Git-type products like Jira, Github, Gitlab etc.). SO is where you find good people giving good answers. Forget about Quora, random internet forums, and blogs.
• Online Courses: You will find many of these on youtube and educational platforms like Udacity or Udemy. Many of the latter educational platforms offer free courses. These are worth checking out.
• Pinpoint examples: Once you have evolved a bit and know what you are doing, you will start working on more specialized projects. At this point, the requirements of your project will pose restrictions on what software you use and which languages you code in. That can cause compatibility issues and you might face difficulties getting tools and frameworks to work together (like connecting a database to a node.js server or parsing the return values from an API you built in the client-side code). I have made the experience over the last decade or so that you will quite frequently find a guide on exactly the stack you use on websites like medium.com, where someone will be doing exactly the stuff you do even though it’s highly specific, and explain the step with which you were having issues. You should, however, not start with these. Figure out your software stack based on the project and the properties of the building blocks of your system and then go searching for help rather than first looking for some random guides and then copying their work. It would greatly impede your understanding and progress.

I want to end this article with some important remarks I want you to keep with you and to remember whenever you do any programming:

• Programming is no science. Every library and framework has flaws and clear indications of personal preference by the people who built it. Don’t expect yourself to understand it all in one sitting. Look for help if you need it and accept your mistakes as possibilities to learn.
• Motivation is key. If you are working on spare-time projects, don’t bum yourself out by focusing on details and small, possibly irrelevant bugs. If you feel frustrated or stuck, do something else. That could be sports or another hobby or just work on another part of the project that offers more satisfaction. If you force yourself too much to work on one part that doesn’t make progress, you will lose interest.
• Search for explanations and help, not copy-paste solutions. Try to learn every time you put something in a search engine, so you never have to google it again. Otherwise, you run the risk of becoming a script kiddie, which you will only notice months and years in when you realize that you haven’t understood anything. A deep understanding of this kind of topic comes from exposure and concentration.
• Share your progress, talk about your projects. Join groups and talk to others about what you do and let them be a part of it – either as a programmer or user. It will give you a lot of joy to see others use what you built.
• Follow the big guys. Support matters, and no matter how good the marketing pitch for some framework sounds, if it has only three developers and they haven’t been active in the last three months, your most likely better off using the framework facebook develops and maintains with 100 commits every day.

My personal favorites

I don’t want you to go off and do what I do. I do those things because I like them – you might not. None the less I want to introduce you to some of the technologies I find interesting:

• Node.js is a dialect of JavaScript for server-side programming. The amazing thing is, that you can now write both server- and client-side code in JavaScript.
• Angular is developed by Google and offers a compelling way of structuring client-side code for modern progressive web apps.
• The MEAN stack is named after the initials of four projects that work well together. Angular is the A, N for Node.js. I like those two so much that I mentioned them separately. The other two are M for MongoDB which is a database that works well with node.js, and that can store JSON objects, saving you the effort to work with old-school MySQL-type databases. Express is a nice way of rendering dynamic pages in a node.js-server.
• AWS: Amazon Web Services is a giant company offering tons of products for all needs of a programmer. I have made the experience that they offer a great toolkit for programmers at every level and any project. It’s worth noting though that using their ecosystem is not always free and requires a lot of reading.
• Visual Studio Code: If you are having a hard time deciding which IDE to use or which editor – this is the one. Every language, every ecosystem. Just use VSCode and get the right plugins. You can thank me later.
• Mlab.com: This is a MongoDB hosting provider that offers a free tier. For small projects this is optimal and as soon as your project grows, you can either level up to a pro tier or run your own server somewhere.
• Github, CircleCI, and Codecov: These three offer the following for an open source project:
  • Hosting for the code provided by Github. This also enables collaboration, version and release management and offers you a publicly available issue-tracker.
  • A continuous integration pipeline provided by CircleCi. Continuous integration is a powerful tool – especially once you have gotten used to writing unit-tests.
  • Coverage reporting provided by Codecov. For those unit-tests mentioned above, you can then export coverage reports and visualize the results in the Github Readme.

For an example of this, you can check out my Evolutionary Optimization Example on Github for reference. I hope you liked this article and I’m looking forward to your questions and comments below.