Front End

Front-End, basically, means everything that happens in the browser. This includes the page design (layout, colours, typography), behaviour, and implementation.
HTML, CSS, and JavaScript are the three main technologies used in front-end development:

• HTML is the foundation on which all webpages are built, so it is essential.
• CSS allows you to customize the look of HTML. It is not essential, but webpages without CSS look very plain.
• JavaScript is not essential, but it allows you to add special behaviour to a webpage that is not possible using HTML and CSS alone. Many websites can be built without using JavaScript.

In addition to those three technologies, a front-end developer will likely use additional technology in the form of frameworks, libraries, and tools such as:

• jQuery
• Bootstrap
• express.js
• SASS
• LESS
• YAML
• AngularJS
• AJAX

Front-end development can be as simple as basic a webpage, as complicated as managing a database¹, or as challenging as writing a game.
Front-end development can be, roughly, divided into:

• Design: the layout, look, colours, typography, usability
• Implementation: turning the design into something functional

As well, front-end development skills can also be used for writing browser extensions for Mozilla Firefox, Google Chrome, Microsoft Edge, and Apple Safari – because they all use HTML, CSS and JavaScript.
In the past, there were more front-end technologies, but these are, effectively, obsolete:

• VBScript
• ActionScript
• Flash
• Java
• and others

Back-End

Back-End, basically, means everything that happens on the server. This mostly involves database work and processing data on the server to be sent to the browser.
A programming language (or two), a database, and server software are the main technologies used in back-end development. However, there is a lot more variety in back-end technology than in front-end technology.
Much of the skills and knowledge of front-end development are also applicable for back-end work because the back-end (server) has to send HTML pages to the front-end (browser or client).
In terms of programming languages, the following are commonly used for back-end development:

• PHP
• Python
• Ruby
• Java
• C#
• C++
• Perl
• Scala
• JavaScript
• and many more

Relational and non-relational databases are used (though, usually not on the same project):

• MySQL
• MariaDB
• MongoDB
• and many others

There is also the server technology that is used:

• Apache
• nginx
• node.js
• and many more

There are also many frameworks and libraries that are used:

• WordPress
• Django
• Ruby on Rails
• Laravel
• Symfony
• CodeIgnitor
• KOA
• Flask
• and many more

Backend-end development can be, roughly, divided into:

• Database Design: the structure of the database
• Application Coding: this is the algorithms, processing, and flow of data through the back-end. This may be even further subdivided.
• Glue Coding: this is code that binds the database, application, and server technology together
• Server: for most small installations, the default configuration of the server is often “good enough” (assuming it has been properly secured). However, for larger servers, or more complex tasks, there can be custom server development and configuration. While this could be lumped together with Application Coding it is a sufficiently complex task that needs to be done independently of everything else

Full-Stack

Full-Stack refers the full-stack of technology, which is everything from the front-end all the way to the back-end.
So full-stack means everything that occurs on the server, in the browser and everything in between.
While there is a lot of technology involved (not to mention design issues), it is possible to learn enough to be a proficient full-stack developer. It is not about learning everything, it is about learning enough to do what you need.

The post Understanding the Difference Between "Front-End", "Back-End", and "Full-Stack". appeared first on Complete, Concrete, Concise.

A Little Background

In the 1980s, Sir Tim Berners-Lee was working at CERNfound it difficult to access documents and information from different computers:

I found it frustrating that in those days, there was different information on different computers, but you had to log on to different computers to get at it. Also, sometimes you had to learn a different program on each computer. So finding out how things worked was really difficult.¹

In 1989, he proposed a hypertext² based system for accessing, sharing, and linking documents. At that time, the standard practice for document organization was a centralized repository. Sir Tim Berners-Lee proposed to do away with that:

[T]he hope would be to allow a pool of information to develop which could grow and evolve with the organisation and the projects it describes. For this to be possible, the method of storage must not place its own restraints on the information. This is why a “web” of notes with links (like references) between them is far more useful than a fixed hierarchical system.³

In 1990, he wrote the first web browser and web server and developed three fundamental technologies that form the foundation of the World Wide Web:

• Hypertext Markup Language (HTML) – this is used to create webpages.
• Uniform Resource Locator (URL) – a string of characters used to identify a resource and its location.⁴
• Hypertext Transfer Protocol (HTTP) – the protocol by which HTML resources are accessed on the Internet.

While Sir Tim Berners-Lee’s primary concern was for a web of interconnected hypertext documents, he realized that many other resources could be interlinked. His implementation was so successful that the World Wide Web includes:

1. Documents – like this webpage
2. Images – Flickr allows people to share and access photos
3. Video – YouTube allows people to share and access videos
4. Audio – Spotify allows people to listen to music
5. Applications – Google Docs is an online word processor

The first website to go live was at CERN in 1991.
By the end of 1991, there were a total of three websites worldwide:

1. CERN
2. The World Wide Web Virtual Library (also at CERN)
3. Stanford Linear Accelerator Center – the first North American website.

By the end of 1992, there were a total of 10 websites worldwide.
As of early 2023, there are almost 2 billion websites.

The World Wide Web

The Internet is the global network of interconnected devices transferring datagrams⁵ using the Internet Protocol (IP). Most datagrams are transported using the Transmission Control Protocol (TCP) protocol.⁶
The World Wide Web (WWW) is a service that runs on the Internet. It is the collection of documents⁷ written in Hypertext Markup Language (HTML)⁸, identified by a Uniform Resource Locator (URL), and transferred using the Hypertext Transfer Protocol (HTTP). All of this is done on the Internet using TCP and IP.
IP identifies devices on the Internet, TCP transports datagrams between them, and HTTP⁹ is used to access content. TCP is like a delivery company that transports goods to the correct address, while HTTP packages resources so that they can be transported by TCP from one device to another. There are other application layer protocols like FTP,¹⁰ SSH,¹¹ SMTP,¹² POP3,¹³ that are used on the Internet, but HTTP is the most commonly used.

HTTP is not the only application layer protocol in use on the Internet, but it is the most visible. Most people don’t notice (or even know about) other application layer protocols such as: FTP,¹⁰ SSH,¹¹ SMTP,¹² POP3,¹³ etc.

Hypertext Markup Language (HTML)

HTML is used to write webpages and web applications. It is often combined with Cascading Style Sheets (CSS) and JavaScript (JS).¹⁴
HTML documents are sent by web servers and rendered by web clients (web browsers) to display the contents of a webpage to a user.
Here’s an example of a simple webpage:

<!DOCTYPE html>
<html>
  <head>
    <title>A Simple Webpage</title>
  </head>
  <body>
    <h1>This is important!</h1>
    <p>Check out this site:</p>
    <a href="//example.com">Example</a>
  </body>
</html>

All HTML documents are composed of HTML tags which (usually) come in pairs. There is an opening tag, like <html> and its corresponding closing tag </html>. These tags markup the document.
HTML tags perform three different functions:

• Structural Markup tags are used to indicate the structure and purpose of the text in the document. We can see that this page is divided into two parts: a <head> that contains metainformation¹⁵ about the page and a <body> that contains the content displayed to the user. In the body, we see there is a heading (<h1>) and a paragraph (<p>).
• Presentational Markup is used to indicate how text should be displayed to the user – for example, bold, italic, strikethrough, etc. There is no presentation markup in this simple webpage. CSS is recommended for presentation markup.
• Hypertext Markup is used to create links inside the document to other documents or resources. In this page, there is a single hypertext link – the anchor tag <a>

In general, HTML documents are plain text documents with special annotations (HTML tags) to describe the structure of the document. Web clients (web browsers) display the content to the user.

Uniform Resource Locator (URL)

A Uniform Resource Locator (URL) is used to access resources on the WWW. It has the following format:

<access protocol>://<host>/<location & resource name>

• access protocol specifies how the resource is to be accessed. For the WWW it is either HTTP or HTTPS¹⁶. There are many different access protocols for the Internet.¹⁷ Technically, you should always include the access protocol when you type the URL for a website. However, browsers (being helpful) will automatically prefix the protocol for you.
• host specifies which device on the Internet contains the resource. It can be an IP address (like 127.0.0.1) or, more commonly, a human readable string (like www.complete-concrete-concise.com) which is translated by a Domain Name System (DNS) into an IP address.
• location & resource name specifies the name of the resource and where it is located. If no resource name is given, web servers return index.html by default.

Let’s consider the following URL:

https://complete-concrete-concise.com/sample/helloworld.html

• The access protocol is https.
• The host is complete-concrete-concise.com.
• The location & resource is /sample/helloworld.html.

Hypertext Transfer Protocol (HTTP)

HTTP responses indicate the status of a request, with two common responses being 200 (OK) for a successful request and 404 (NOT FOUND) for when the requested resource cannot be found.

HTTP is a request-response protocol for data transfer on the World Wide Web. It is most commonly used for transferring hypertext documents, like HTML, but can be used to transfer other types of content.

It operates on a client-server model. The client sends a request to a server. The server then responds to the client. For example, a web browser (client) that requests a webpage from a website (server); the website (server) responds by sending the webpage to the web browser (client).¹⁸

It is a stateless protocol.¹⁹ This means that each HTTP request is independent of all other HTTP requests. In other words, the current request knows nothing about previous requests: all information to fulfill the request must be contained in the request itself.

Two common HTTP requests are GET, used to request a resource from a server, and POST, used to send data to a server, such as when submitting a comment or form.

HTTP responses indicate the status of a request, with two common responses being 200 (OK) for a successful request and 404 (NOT FOUND) for when the requested resource cannot be found.

Summary

1. The World Wide Web is one of many services that run on top of the Internet.
2. The World Wide Web is the global collection of resources written using Hypertext Markup Language (HTML),²⁰ identified using a Uniform Resource Locator (URL), and transferred using the Hypertext Transfer Protocol (HTTP).
3. Clients request resources from servers using HTTP.
4. Servers respond to clients using HTTP.
5. HTTP is transported using TCP between devices adhering to the Internet Protocol.
6. The flexibility of HTTP has contributed to the World Wide Web becoming extremely popular because it handles all types of content: from documents to videos, from images to applications.

Further Reading

If you are interested in learning more about, check out the following resources:

World Wide Web

• Architecture of the World Wide Web

Uniform Resource Locators

• URIs, URLs, and URNs: Clarifications and Recommendations

Hypertext Transfer Protocol

• RFC2616 – this is an older document about the HTTP/1.1 specification. It is a good place to start because it is all in one place.

If you want more information, then the following, more recent, documents give more information. They update RFC2616 and break it down into multiple documents, but may be information overload:

• RFC 7230 Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing
• RFC 7231 Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
• RFC 7232 Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests
• RFC 7233 Hypertext Transfer Protocol (HTTP/1.1): Range Requests
• RFC 7234 Hypertext Transfer Protocol (HTTP/1.1): Caching
• RFC 7235 Hypertext Transfer Protocol (HTTP/1.1): Authentication

The post Understanding How the World Wide Web (WWW) Works appeared first on Complete, Concrete, Concise.

The Internet

The Internet is the global network of connected devices that adhere to the Internet Protocol (IP).

The Internet Protocol allows devices to connect to the Internet and communicate with other devices connected to the Internet. It is a specification for a basic unit of data transfer or datagram.

The IP datagram consists of a header and a payload.

The header has a source address and a destination address. As a result, there is no true anonymity on the Internet, since the transfer of information requires knowing the source and destination of the information transfer¹.
The payload is the information part of the packet and its content depends on what is being transmitted. It is at the payload level that the World Wide Web and other Internet services (like email, Voice over IP (VoIP), File Transfer Protocol (FTP), etc) exist.
The IP Header also includes a transport protocol. This controls how the datagram is transported through the Internet. Two common transport protocols are: Transmission Control Protocol (TCP) and User Datagram Protocol (UDP).
TCP is a robust protocol that verifies the packet is received. If the packet is not received, it is retransmitted.
UDP is less robust – it doesn’t verify that the packet is received. This may seem strange, but some data transfers don’t need to be robust – they can tolerate lost packets. For example, video streaming can survive the occasional “lost” data packet.

The use of TCP on the Internet is sometimes referred to as tcp/ip or TCP/IP. This is read as TCP over IP.

IP Addresses

Each device connected to the Internet must be uniquely identifiable². This is done by assigning each device on the Internet a unique number called an IP Address. There are two types of IP addresses: IPv4 and IPv6 – they are not compatible.³

IPv4 is the older and most commonly used (for now) addressing scheme. Each device on the Internet is assigned a unique identifier. This identifier is a 32 bit number. This means there are 2³² different numbers available. Which means a maximum of 4294967296 devices can be connected to the Internet when using IPv4 addressing⁴.
The addresses are written in dotted notation. This is done by dividing the 32 bit number into four 8 bit octets.⁵ Each octet is written in decimal notation separated by a period. IPv4 addresses look similar to these examples: 127.0.0.1 or 192.168.1.101, or 10.184.216.34.
IPv6 is a newer addressing scheme and was introduced to expand the number of available IP addresses.⁶ IPv6 addresses are 128 bits long and allow for 2¹²⁸ unique addresses⁷.
IPv6 addresses are written differently from IPv4 addresses. The 128 bit address is divided into eight 16 bit hextets.⁸ These are written in hexadecimal⁹ notation and separated by colons¹⁰. IPv6 addresses look similar to these examples: ::1¹¹, or FE80:0000:0000:0000:0202:B3FF:FE1E:8329

Clients and Servers

Devices on the Internet are classified as clients or servers¹².
A client requests resources from a server. It tends to have a transitory connection to the Internet and may not always be available.
A server provides (serves) resources to clients. It tends to be permanently connected to the Internet and always available.

You can think of the relationship between clients and servers as being similar to the relationship between students and teachers. The students (clients) request information from the teacher (server) and the teacher (server) provides information to the students (clients).

If clients wish to communicate with other clients, the information is sent first to the server and then the server forwards the information to other clients.
There is a third relationship: peer-to-peer (P2P). Like clients, peers tend to be characterized by transitory connections to the Internet.
Peers are devices that connect directly with other devices instead of going through a server. P2P devices act both as server and client. Communication between peers is direct and not mediated by a server.

Domain Names

Most people rarely (if ever) access resources on the Internet by entering IP Addresses. Addresses like 192.168.1.1 might be fine for computers but they are not easy for humans to use. A Domain Name is a string of characters (preferably easy to remember) that act as an alias for an IP Address.
Domain names are hierarchically organized. The Internet Corporation for Assigned Names and Numbers (ICANN) manages the structure of domain names on the Internet.
Domains are composed of two parts: the hostname and the top-level domain.¹³
For example: complete-concrete-concise is the hostname and .com is the top-level domain.
The mapping from a domain name into an IP Address is performed by a Domain Name System Server (DNS Server). The domain name is sent to the DNS Server and the server returns the associated IP Address.¹⁴
Globally, there are 13 root servers from which all domain names are resolved.¹⁵

Summary

1. The Internet is the global network of connected devices which adhere to the Internet Protocol.
2. The Internet Protocol is a datagram composed of a header and a payload.
3. The IP header consists of a source address, destination address, and a transport protocol.
4. Every device connected to the Internet requires a unique identifying address.
5. The IP payload carries the data for a specific service. This might be the World Wide Web, email, Voice over Internet, or any other service.
6. The Internet tends to be hierarchical with a client-server model.
7. Clients request services and resources from the Internet and tend to have a transitory presence on the Internet.
8. Servers provide services and resources on the Internet and tend to have a permanent presence on the Internet.
9. Domain names are a (human readable) way of accessing resources on the Internet. Domain names are sent to a global network of DNS Servers that return the IP Address associated with the domain.

The post Understanding How the Internet Works appeared first on Complete, Concrete, Concise.