20 essential terms in web development

Photo by Joel Filipe on Unsplash

If you are a React developer and want to jump straight to my followup article about React, you can find it here: https://medium.com/@ho.wan/essential-terms-for-a-react-developer-feb88be0206b

This article represents a list of the key terms and concepts that are particularly useful for a web developer to get to grips with. There is a lot of technical jargon and acronyms that can be incredibly daunting for anyone who is new to web development.

Definitions found in official documentation are often too verbose and not friendly to new developers. I have provided a short description for each of these terms. As an engineer who has recently transitioned to software development, this is the terminology cheatsheet I wish I had when I started.

To experienced developers, please pass on to the junior developers as this may help them more than you think! To junior devs and students, don’t worry if any of these concepts seem daunting, the best way to learn is to gain hands on experience with them.

Disclaimer: The following definitions are based on my own interpretation, and may not necessarily match formal definitions.

Client (Frontend)

In web development, the client generally refers to the web browser on the user’s device, eg. Chrome. Client-side rendering means that the html on the webpage is controlled by the javascript read by the browser.

Frontend development generally means writing the HTML, CSS and JavaScript code that is sent directly to the client.

Server (Backend)

A server often refers to a computer or program that provides data to send to a client or other servers.

Backend development generally means writing code that runs on a server. Common backend languages are PHP, JavaScript (using Node.js), Java, C#, Python, Ruby, and Golang.

Server-side rendering

Server-side rendering means that the HTML is generated on the server, sent to the user through a HTTP request and rendered directly on the browser.

Because server-side rendered web pages are pre-generated, they are more easily found by the web crawlers such as Google’s, and leads to higher search ranking than rendering client side using React.

URL (Uniform Resource Locator, a subset of URI)

The address of the web page, eg: https://www.example.com

DNS (Domain Name System)

DNS is used to assign an IP address to a URL which is easier for people to type, eg. assigning 93.184.216.34 to www.example.com

HTTP (Hypertext Transfer Protocol)

HTTP is the standard for sending information over the internet, in a way that allows web browsers to understand and display on a web page. Most commonly, when you type a URL into the browser, a HTML page is sent in response and rendered by the client as a web page.

HTTPS (Hypertext Transfer Protocol Secure)

HTTPS uses TLS (Transport Layer Security) to encrypt information sent through a HTTP request. Data sent over HTTP only can be easily intercepted, therefore any sensitive data must be sent over HTTPS.

TLS (Transport Layer Security)

TLS is the primary protocol to secure web pages over HTTPS, and replaces SSL (Secure Sockets Layer) which is now deprecated. Services such as Cloudflare or LetsEncrypt can be used to set up encryption for custom domains.

API (Application programming interface)

An API provides a way for two computer programs to interact with each other. This often uses an agreed standard such as JSON, XML, or HTML to represent the data. The standard way to share data over the internet is to use a REST API.

REST API (Representational State Transfer, aka RESTful API)

A website can use a REST API to share data with other websites or programs. This uses HTTP requests, with common ones being:

  • GET to return data

Public parameters can be included as part of the url, often called Query Parameters or a Query String, eg: https://www.google.com/search?q=cats

JSON (Javascript Object Notation)

JSON is a standard for representing data as objects using Javascript syntax. Often used in APIs to send and receive data. JSON uses curly braces (parentheses) to separate items, and looks like this:

{
"person": {
"firstName": "John",
"lastName": "Doe",
"pet": [{
"name": "Fluffy",
"type": "Dog",
}],
},
}

XML (Extensible Markup Language)

XML is a language to represent data, and uses a similar notation to HTML. XML uses angle brackets to hold blocks of information, and looks like this:

<person firstName="John" lastName="Doe">
<pet name="Fluffy" type="Dog"/>
</person>

YAML(YAML Ain’t Markup Language, Yet Another Markup Language)

Yet Another Markup Language to represent data, commonly used for configuration files. YAML uses indentation to represent hierarchy and dashes to denote blocks, and looks like this:

person:
firstName: "John"
lastName: "Doe"
- pet:
name: "Fluffy"
type: "Dog"

Cookie (HTTP cookie)

Cookies are used to store data in the user’s browser, and remains even after restarting the browser. They are often used to store authentication tokens to check if the user is logged in. For private data, recommended settings are:

  • Secure: only allows cookie to be transmitted through HTTPS.

Tracking cookies can be used by 3rd party adverts on websites to build a browsing history of the user. As a user, this can be prevented by enabling ‘block third-party cookies’ in browser settings (enabled by default in Safari). As a developer, you should design pages to work without relying on third-party cookies.

Local Storage

Local storage can be used by web browsers to store data from websites in key/value pairs, and is permanently persisted until deleted. Cookies are recommended over local storage for private data as local storage does not much security protection.

Session Storage

Session storage is similar to local storage except the data is removed for new sessions, such as closing and reopening the browser or new tabs.

JWT (JSON Web Token)

JWT is a standard that is often used for authentication on websites. JWT contains a header, payload and signature, and uses an agreed private key to verify the owner’s identity. The main benefit is that it does not require a database to validate the token (sometimes called stateless), as the JWT standard provides the means of coding based on the private key and signature.

As JWT does not need to be checked against a database, it can have performance benefits as it does not require as many database calls to implement. However JWT has greater security risks than a server-side sessions approach, and be wary of using third-party libraries as they often do not implement the standards safely.

Server-Side Sessions (Session-based authentication, bearer token)

A sessions based approach to authentication generally involves checking a hashed password against a database. If the hashed password matches, a session ID is generated and stored on the client as a cookie for that domain. This cookie can be checked on any pages that require authentication.

To avoid a lot of database lookups for the session ID, it is recommended to use an in-memory (RAM based) data store such as Redis or Memcached for sessions data.

CORS (Cross-Origin Resource Sharing)

CORS is a standard that restricts what information can be sent between a server and client (typically). This is to ensure the data is being sent and received from trusted sources only.

The main setting to get right is ‘Access-Control-Allow-Origin’ which is used to check that the data is coming from a trusted domain, which should be the address of your web server, or external APIs when using them. Using ‘Access-Control-Allow-Origin: * ’ means any domain can send data to your website, and is not recommended for production websites.

React (React.js)

React is a JavaScript library that is used to update the HTML on the webpage based on user interaction. The main benefits are:

  • Components on the page can update without having to reload the page

Angular and Vue offer similar functionality to React, and each has a slightly different approach.

React is designed primarily to be run in the client, such as a web browser like chrome. Electron can be used to run React as a desktop app in Windows, MaxOS and Linux. React Native uses a similar syntax to React but is designed to run on both Android and iOS platforms to create apps for the app store. It is possible to render React pages on a server, using a library such as Next.js or Gatsby.

Closing remarks

I hope this article has been useful. As an engineer coming into the software world without a computer science background, I believe it’s important to understand the principles and use cases rather than memorize definitions from official documentation.

If this has been useful, then give it a like and please share. You can find the follow up article focusing on React here: https://medium.com/@ho.wan/essential-terms-for-a-react-developer-feb88be0206b

Ho-Wan is the founder of Spandraw, a web app to mark-up PDFs, generate load takedowns, and to generate 3D IFC models from PDF files. He is an experienced structural engineer, turned software developer.

Software developer, Structural engineer. Founder of Spandraw.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store