The Practical Developer

Introduction Most real data lives in more than one table. Users live in one table, orders in another, and the link between them is usually an ID, like user_id . A join combines rows from two tables based on that link, so you can ask questions like "show me each order, with the name of the person who placed it." There are four joins you need first. They differ only in which rows they keep when there is no match. The example tables -- users -- id | name -- 1 | Ali -- 2 | Sara -- 3 | Omar -- orders -- id | user_id | item -- 1 | 1 | Keyboard -- 2 | 1 | Mouse -- 3 | 2 | Monitor Ali has two orders, Sara has one, Omar has none, and every order belongs to a user in this example. INNER JOIN — only matching rows An INNER JOIN keeps only rows that match in both tables. Omar disappears here, because he has no orders. SELECT users.name, orders.item FROM users INNER JOIN orders ON users.id = orders.user_id; Result: name | item Ali | Keyboard Ali | Mouse ...

Introduction A branch is a separate line of work in Git. The main branch, usually called main , holds the stable code. When you start a feature or a fix, you create a branch, work there, and merge it back only when it is ready. If the work goes wrong, the main code is untouched. This is the workflow used by almost every team, and it is worth learning early, before you need it under pressure. Create and switch branches Check your current branch first, then create and switch in one step with the modern switch command, or the older checkout command if your Git version prefers it. git status git switch -c feature/login-form # Older Git: git checkout -b feature/login-form Name branches clearly: feature/login-form , fix/header-bug , docs/readme-update . A good branch name tells the next person what the branch is for, without opening it. Work normally on the branch, then commit as usual: git add . git commit -m "Add login form layout" Merge back to main When the work is ...

Introduction JavaScript often has to wait — for a network request, a file, or a timer. The old way to handle waiting was nested callbacks, which quickly became hard to read. Promises improved that. Async/await makes it read almost like normal, top-to-bottom code. If you understand promises and one keyword pair, async and await , you can write most asynchronous JavaScript you will need day to day. The basic pattern A function marked async always returns a promise. Inside it, await pauses that function until a promise settles, without blocking the rest of the program. async function getUser(userId) { const response = await fetch( `https://jsonplaceholder.typicode.com/users/${userId}` ); const user = await response.json(); return user; } getUser(1).then((user) => console.log(user.name)); Read it like normal code: fetch the user, wait for the JSON, return the user. The await lines are where the waiting happens, and they are easy to spot. Handling errors with try/c...

Introduction A REST API is a way for a frontend, a mobile app, or another service to ask your server for data, and to send data back. Node.js with Express is a good first choice for learning APIs because the setup is small and the concepts transfer to other backend frameworks. In this post, you will build a tiny users API with two routes: one to list users, and one to add a user. Step 1: Set up the project Create a folder, then run: npm init -y npm install express Add this to your package.json so you can run the server easily: { "scripts": { "start": "node index.js" } } Step 2: Create the server Create a file called index.js : const express = require("express"); const app = express(); app.use(express.json()); let users = [ { id: 1, name: "Ali" }, { id: 2, name: "Sara" }, ]; // GET /users — list all users app.get("/users", (req, res) => { res.json(users); }); // GET /users/:id — get one...

Introduction A list comprehension is a short way to create a new list by transforming or filtering an existing one. It is not magic, and it is not always the best choice. Used well, it makes code shorter and easier to read. Used badly, it makes code hard to follow. The basic pattern The pattern is: [expression for item in iterable] For example, to square every number in a list: numbers = [1, 2, 3, 4, 5] squares = [n * n for n in numbers] print(squares) # Output: [1, 4, 9, 16, 25] The normal loop version does the same thing in more lines: numbers = [1, 2, 3, 4, 5] squares = [] for n in numbers: squares.append(n * n) Both are correct. The comprehension is shorter when the transformation is simple. Adding a condition You can filter with if at the end: numbers = [1, 2, 3, 4, 5, 6] even_numbers = [n for n in numbers if n % 2 == 0] print(even_numbers) # Output: [2, 4, 6] You can also transform strings: names = ["ali", "sara", "omar"] capitalis...

Introduction useEffect is one of the most misunderstood React hooks. Beginners use it for everything. Experienced developers use it only when a component needs to sync with something outside React. The simple rule is this: if the code is a reaction to a user action, like a button click, use an event handler. If the code needs to run because the component is on screen, like fetching data or starting a timer, useEffect may be the right tool. What useEffect actually does useEffect runs after React has rendered your component and updated the screen. It is for side effects — work that affects the outside world, not just the calculation of what to show. Common valid uses: Fetching data when a component loads Subscribing to a WebSocket or event listener Starting and cleaning up a timer Syncing with browser APIs, like document title or local storage A correct data-fetching example import { useEffect, useState } from "react"; function UserProfile({ userId }) { const ...