Skip to main content

The Non-Technical Guide To Confusing Words & Concepts in Tech

For whatever reason the tech industry like to use multiple words for the same concept. Some people may argue that there are subtle differences between function, method, and procedure... But I'm like, c'mon, it's a group of logic that may take data as input, does some data transformation, and may return data to the caller. Whether or not it is attached to a class and modifies properties, uses dependency injection or reaches out for the things it needs is irrelevant to me.

So here we go let's start by clarifying that first example

Conceptual Equivalents​

Functions, Methods, and Procedures​

Traditionally, these are distinguished as follows:

  • Function: A reusable block of logic that takes arguments and returns a value.
  • Method: A function tied to an object/class.
  • Procedure: A function that doesn’t return a value (or, in database contexts, a stored procedure that executes some logic in the database layer).

But when you strip away the tradition, what do you really have? A reusable piece of logic that may take arguments and may return values. That’s it. Everything else is implementation details and convention.

Mux and Router​

Both Multiplexers (Mux) and Routers handle directing data to the right destination. The difference is their context:

TermUsed InWhat It Does
Mux (Multiplexer)Electronics, networkingDirects multiple inputs to one output (e.g., selecting a signal in circuits).
RouterWeb servers, networkingDirects requests to the right handler (e.g., a web request to the correct API endpoint).

Example in Web Development (Router)​

A router in Express.js (Node.js) determines which function to run based on the URL:

const express = require('express');
const app = express();

app.get('/home', (req, res) => {
  res.send('Welcome to Home Page');
});

app.listen(3000);

Here, app.get('/home') acts like a Mux, choosing the right response for the given path.

The Ambiguity​

API (REST API vs. General API Usage)​

The term API (Application Programming Interface) is often used in two different ways, leading to confusion.

1️⃣ The Generic Meaning of API​

An API is any way for two software systems to communicate. It’s a broad term that applies to libraries, databases, operating systems, and more.

  • Examples:
    • The DOM API lets JavaScript interact with web pages.
    • The Fetch API allows browsers to make HTTP requests.
    • The PostgreSQL API enables database queries from an app.

2️⃣ REST API (A Specific Type of API)​

A REST API (or Web API) is a specific kind of API that runs over HTTP. It follows REST (REpresentational State Transfer) principles, allowing different systems (like a frontend app and a backend server) to communicate.

  • Examples of REST API Requests: 
    GET /users/123  → Fetch user details  
    POST /users     → Create a new user  
    PUT /users/123  → Update user info  
    DELETE /users/123 → Remove user
  • Common REST API Technologies: Express.js, Django REST Framework, Flask, Spring Boot

How They Differ​

FeatureGeneric APIREST API (Web API)
DefinitionAny interface for software communicationAPI that follows REST rules over HTTP
ExamplesOS APIs, Browser APIs, Database APIsWeb services (Twitter API, GitHub API)
Data ExchangeFunction calls, memory access, IPCHTTP requests (GET, POST, etc.)
FormatVaries (binary, structured, etc.)JSON, XML (often JSON)

🔗 Further Reading:

Pure Basics​

Frontend vs. Backend​

Usually used to refer to typical client <-> server communication (your laptop/phone <-> computer in datacenter), but can also be used to refer more generally to specfic pieces of other types of software, for example, compilers also have frontends and backends:

In compiler design, the frontend handles the source code analysis (lexical, syntax, and semantic analysis) and generates an intermediate representation, while the backend optimizes and translates that representation into target machine code.

CRUD Apps​

CRUD stands for Create, Read, Update, Delete—the four basic operations for managing data in most applications. Whether you're building a simple to-do list or a full-fledged social media platform, CRUD is at the core of how apps interact with data.

  • Create (C): Adding new data (e.g., signing up for an account).
  • Read (R): Fetching or displaying existing data (e.g., viewing a profile).
  • Update (U): Modifying existing data (e.g., editing a comment).
  • Delete (D): Removing data (e.g., deleting a post).

CRUD operations can be performed via a database (storing data) and a backend (handling requests). The frontend typically interacts with the backend via APIs to trigger these operations.

🛠 Common technologies used for CRUD apps:

  • Frontend: React, Vue, Angular (for UI interactions)
  • Backend: Node.js (Express), Django, Flask, Ruby on Rails (for handling requests)
  • Database: PostgreSQL, MySQL, MongoDB, Firebase (for storing data)

🔗 Good explanations & examples:

Useful Frontend​

DOM (Document Object Model)​

The DOM is a structured representation of a webpage, acting as a bridge between code and what you see on the screen. Think of it as a tree of elements where each HTML tag (like <div>, <p>, <button>) is a node.

  • Why it matters: JavaScript can modify the DOM dynamically, allowing for interactive webpages (e.g., changing text when a button is clicked).
  • Example: Changing text with JavaScript: 
    document.getElementById("title").innerText = "Hello, World!";
  • Common DOM APIs: document.querySelector(), addEventListener(), innerHTML

🔗 Further Reading:

Reactivity​

Reactivity is a programming concept where changes to data automatically update the UI without manually rewriting code. It's the foundation of modern frontend frameworks like Vue and React.

  • Example (Without Reactivity): You manually update the UI when data changes: 
    let count = 0;
    function updateUI() {
      document.getElementById("counter").innerText = count;
    }
    count++;
    updateUI();
  • Example (With Reactivity in Vue): The UI updates automatically when count changes: 
    <template>
      <p>{{ count }}</p>
      <button @click="count++">Increase</button>
    </template>
    <script>
    import { ref } from "vue";
    export default {
      setup() {
        const count = ref(0);
        return { count };
      },
    };
    </script>

🔗 Further Reading:

Hydration​

Hydration is a technique used in server-rendered apps where an initial HTML page is sent from the server, and then JavaScript "hydrates" it by attaching interactivity (event handlers, state, etc.).

  • Why it matters: Improves performance by showing a fast-loading static page first, then making it interactive.
  • Example:
    • You load a blog page—HTML is visible instantly
    • JavaScript loads—Now buttons and forms work

Common use cases:

  • Next.js & Nuxt.js: Hydrate server-rendered pages for SEO + interactivity
  • Progressive Web Apps (PWAs): Load fast, then enhance with JS
  • Static Site Generators (SSGs): Load prebuilt HTML, hydrate with JavaScript

🔗 Further Reading:

Subject with a Service​

This is a common design pattern where a "subject" (often an object, entity, or data source) is paired with a "service" that manages operations related to that subject. The service handles business logic, data manipulation, and interactions with other parts of the system.

Why Use This Pattern?​

  • Separation of Concerns: The subject holds data, while the service handles logic.
  • Easier Maintenance: Keeping logic in services makes code more modular and reusable.
  • Better Testing: You can test the service independently of the UI or database.

Example: Users & UserService​

Instead of having user-related logic scattered across different files, we centralize it in a service:

Without a Service (Bad Example)​

Logic is mixed directly into a UI component:

function deleteUser(userId) {
  fetch(`/api/users/${userId}`, { method: "DELETE" })
    .then(() => alert("User deleted"));
}
With a Service (Better Example)​

The service handles the logic, making the UI cleaner:

// userService.js
export const userService = {
  deleteUser(userId) {
    return fetch(`/api/users/${userId}`, { method: "DELETE" });
  }
};

// In a UI component
import { userService } from "./userService";

function handleDelete(userId) {
  userService.deleteUser(userId).then(() => alert("User deleted"));
}

Common Use Cases:​

  • Frontend: Vue’s Pinia store, React’s Context API, or Angular services
  • Backend: Service layer in Django, Express.js, or Spring Boot
  • API Management: Handling HTTP requests in a separate service

🔗 Further Reading:

Needs a Category​

Declarative v. Imperative​

  • Declarative - You specify what to do, but not how
  • Imperative - YOu specify not only what to do, but exactly how

SQL / "Sequel"​

It's "Sequel" lol, the debate rages on but I will always prefer to say "Sequel".

This is the primary query language in tech. Relational Databases have been aroung for like 50 years and SQL is the language used to query these databses.

Two Key Points about SQL & Relational Databases:

  • The Database Engine uses pk_popup:<Relational Logic> to figure out the set of records to return to you.
  • SQL is pk_dclink:higer_section pk_popup:<Declarative> - You tell it what to do (return this result set), but not how to do it. The engine determines the specific algorithms to use in the query pipeline

Dependency injection​

While you may be able to infer the meaning from the words themselves, this is a "$5 word for a 20 cent concept" Credit: Mosh Hamedani

Constant, Linear, Quadratic, and Logarithmic Time (or Space) Complexity​

Time complexity describes how the runtime of an algorithm changes as the input size grows. Space complexity describes how memory usage changes with input size. We often measure these using Big O notation, which provides an upper bound on how performance scales.

  • O(1) – Constant Time: The operation takes the same amount of time regardless of input size.
    • Example: Looking up an item in a hashmap (dictionary).
  • O(n) – Linear Time: The time grows proportionally to the input size.
    • Example: Looping through a list.
  • O(n²) – Quadratic Time: Time grows quadratically with input size (bad for large inputs).
    • Example: Checking all pairs in a list (nested loops).
  • O(log n) – Logarithmic Time: Time grows slowly as input size increases.
    • Example: Binary search (dividing a sorted list in half repeatedly).

There are many other complexities (e.g., O(n log n), O(2ⁿ)), but these are the most common.

🔗 Good explanations & examples: