How Password Hashing Works
3 min readThoughts & Theory
Websites don’t store your password, they store a hash. How hashing works, why that’s the reason password reset exists, and why storing less is safer.
Learn web development one little thing at a time.
Practical tutorials on JavaScript, CSS, HTML, React, and the frontend and backend basics behind them.
What we write about
Latest articles
Why Invalid Card Numbers Fail Instantly
3 min readThoughts & Theory
Payment forms reject invalid card numbers instantly thanks to the Luhn algorithm — a 1954 checksum your browser runs before contacting anyone at all.
Will AI Replace Junior Developers?
4 min readThoughts & Theory
The junior role is changing rather than disappearing. Why the first job gets harder, and which developers end up with the advantage as AI spreads.
Why I Stopped Memorizing Docker Commands
3 min readThoughts & Theory
Forgetting Docker commands isn’t a sign you’re failing. Why experienced developers look things up, and why a personal cheat sheet beats memorization.
Why You Should Still Know curl in 2026
7 min readSetup & Tools
curl still matters in 2026. Why AI-generated fetch calls don’t replace it, and how curl teaches you HTTP through headers, debugging and API testing.
Remote Work! Freedom or Burnout?
7 min readThoughts & Theory
The honest case for and against remote work as a developer — the freedom and flexibility against distraction, isolation and blurred hours.
Docker & Docker Compose Cheat Sheet
6 min readSetup & Tools
A practical Docker and Docker Compose cheat sheet: start and stop services, follow logs, run commands inside containers, and clean up what you don’t need.
Javascript Testing Tools Explained
5 min readSetup & Tools
Jest, Vitest, Testing Library, Mocha, Chai and Sinon explained for beginners — what each tool actually does, and which one to start with.
Javascript Testing for Beginners
7 min readSetup & Tools
A plain-English introduction to Javascript testing: what a test actually is, why it matters, the types worth knowing, and the tools to start with.
Component Naming Conventions in React
6 min readIn the Browser
Three naming conventions for components that clash with your UI library — wrapping, naming by purpose, and prefixes — with the tradeoffs of each.
Simple Ways to Create a CSS Overlay Effect
5 min readIn the Browser
Lay a gradient or solid tint over an image using a ::before pseudo-element. Four copy-ready overlays with before-and-after photos.
Practices Behind Clean Lines Of Code
4 min readThoughts & Theory
The unglamorous half of programming — reading other people's code, naming things well, chasing bugs, and keeping a codebase alive.
The border-image-slice CSS Property
4 min readIn the Browser
Slice a photo into a nine-patch grid and wrap it around a box. What one, two, three and four border-image-slice values each do.
CSS Gradient Borders with border-image
11 min readIn the Browser
Turn a plain border into a gradient with border-image and border-image-slice. Linear, radial and conic examples, no image files needed.
How to Install Java on Mac: Step-by-Step Guide
6 min readSetup & Tools
Install Java on a Mac with Homebrew or the Oracle JDK, set JAVA_HOME, verify the install, and fix “Unable to locate a Java Runtime” errors.
Am I Too Old to Learn Coding?
9 min readThoughts & Theory
Am I too old to learn coding? A developer who started late on why age is rarely the real obstacle, what the learning curve looks like, and where to begin.
clip-path: inset() Explained
5 min readIn the Browser
Crop an element by pushing its sides in with clip-path: inset(). What one, two, three and four values do, plus the round keyword.
CSS Triangles with clip-path
5 min readIn the Browser
Copy-ready clip-path: polygon() code for triangles — right, isosceles, acute and obtuse — all built by moving one corner of a square.
CSS Arrow Shapes with clip-path
5 min readIn the Browser
Copy-ready clip-path: polygon() code for direction signs, arrows and pointers in all four directions, with a diagram for every shape.
Clip-path For Quick Polygons – Ready Code-To-Copy
4 min readIn the Browser
Copy-ready clip-path: polygon() code for pentagons, hexagons, heptagons, octagons, nonagons and decagons, with diagrams for each.
clip-path: circle() Explained
8 min readIn the Browser
Crop any element to a circle with clip-path: circle(). Radius, positioning with at, and how to isolate one face in a group photo.
Why are internet cookies called cookies?
4 min readThoughts & Theory
Why are internet cookies called cookies? The name traces back to magic cookies in Unix, Lou Montulli, and a piece of early 1990s browser history.
MacOS Shortcuts – Cheatsheet for New Users
9 min readSetup & Tools
A macOS shortcuts cheatsheet for new Mac users: editing, Finder, window and screenshot shortcuts, plus the Windows equivalents if you just switched.
Husky Hooks: Improve Your Git Workflow
11 min readSetup & Tools
Run lint and tests automatically on every commit with Husky Git hooks. Setup, pre-commit examples, Husky vs GitHub Actions, and how to skip a hook.
Infinite CSS Flip Card Animation
6 min readIn the Browser
Spin a card forever with animation plus @keyframes — around X, around Y or both — and the rotation value that makes it snap back.
CSS Motion: transform, transition, animation
5 min readThoughts & Theory
What transform, transition, animation and @keyframes each do in CSS, and every value they take, explained in plain English without code.
CSS Flip Card Animation on Hover
5 min readIn the Browser
Flip a card on hover with transform: rotateY() and a transition — around X, around Y or both, and how to make it flip back on hover-out.
How to Type the Copyright Symbol on Mac
6 min readSetup & Tools
Type the copyright symbol on a Mac with Option + G. Plus the Character Viewer fallback and shortcuts for ™, ®, degree and section symbols.
How to Close a Full Screen on Mac
6 min readSetup & Tools
Three ways to exit full screen on Mac: the green button, press and hold Esc, or Control + Command + F — plus what to do when an app won’t budge.
How to Install Postgres on MacOS
7 min readSetup & Tools
Install PostgreSQL on macOS with Homebrew, run it as a background service, fix “command not found: psql”, and connect with the psql shell.
HTML for Blinking Text – Simple Copy & Paste Code
2 min readIn the Browser
The HTML blink tag is obsolete and no longer works in any browser. Here is the CSS animation that recreates blinking text, ready to copy and paste.
The CSS text-shadow Property
3 min readIn the Browser
Five worked text-shadow examples — positive and negative offsets, stacked colors, and the blur value that ruins readability.
How To Build Stunning Rounded Text – Handy Tips
7 min readIn the Browser
Bend a line of text into a circle with one span per letter, absolute positioning and transform: rotate(). Full copy-ready coordinates.
What does git add -a do?
7 min readSetup & Tools
git add -a doesn’t exist. The command you want is git add -A — here’s how it differs from git add . and when that difference actually matters.
Made Easy With Reusable Code – Why Classes Matter
2 min readIn the Browser
Style many elements at once with a single CSS class, then name it so it still makes sense in six months. With do and don't examples.
Express.js Middleware Interview Questions
7 min readThoughts & Theory
Express.js interview questions on middleware, routes and app.use, with clear answers on req.params vs req.query vs req.body and express.Router().
How CSS Became So Powerful with Animations
2 min readThoughts & Theory
How CSS went from decorating static pages to driving motion — and why animation is a way of communicating state, not just decoration.
How to Restart Your Node App Without Nodemon
5 min readSetup & Tools
Node.js 18.11 added a built-in --watch flag that restarts your app when files change. No nodemon, no config, no extra dependency to install.
Circular CSS Button with Shadow Effect
8 min readIn the Browser
Build a round push-button in CSS: inset shadows for the base, a gradient face, hover and active states, and a soft shadow underneath.
How inset Works in box-shadow (Made Simple)
3 min readIn the Browser
The inset keyword draws a shadow inside the element instead of around it. Here is how to build a soft pressed-in effect with two shadows.
How box-shadow Works (Made Simple)
2 min readIn the Browser
What each box-shadow value actually does — offset, blur, spread and color — built up step by step on one simple box you can copy.
CSS Water Drop Effect on Text
7 min readIn the Browser
Sit a glossy CSS water drop on top of a heading using border-radius, layered box-shadows and two pseudo-element highlights.
CSS Neon Text Effect
5 min readIn the Browser
Build a glowing neon sign with nothing but layered box-shadow and text-shadow — outer glow, inset glow and a matching text halo.
CSS Grayscale Filter – A Complete Guide
10 min readIn the Browser
Apply filter: grayscale() to text, backgrounds, photos, SVG, Font Awesome icons and emoji — with a before-and-after for every case.
CSS Conic Gradient Made Easy
12 min readIn the Browser
Sweep colors around a point with conic-gradient. Move the center, set the start angle, add color stops and build pie-chart style wedges.
How To Create A Stunning Gray CSS Water Drop
5 min readIn the Browser
Draw a water drop in pure CSS: an uneven border-radius, four stacked box-shadows for volume, and two pseudo-elements for the highlights.
CSS Folded Corner Effect with clip-path
7 min readIn the Browser
Build a folded paper corner with clip-path and a ::before pseudo-element — no images, and a drop-shadow trick that clipped boxes allow.
CSS Keyframes Animation Explained
9 min readIn the Browser
Build a @keyframes animation one layer at a time — color, shape, position, rotation and delay — on a single box, with the shorthand at the end.
The CSS last-child Selector
5 min readIn the Browser
:last-child targets the final element inside its parent. Worked examples on lists and paragraphs, plus the :nth-last-child(1) equivalent.
What Does span Do in HTML?
4 min readIn the Browser
What the HTML span tag is for, how it differs from div, and how to style a single word — or a single letter — without breaking the line.
Is CSS a Programming Language?
1 min readThoughts & Theory
No — CSS is a style sheet language, not a programming language. What separates the two, and what CSS does instead, with an example.
CSS Filters: Opacity and Saturate
4 min readIn the Browser
Use filter: opacity() to fade an image into its background and filter: saturate() to dial its colors up or down. Side-by-side examples.
CSS Filters: Adjust Contrast and Brightness
5 min readIn the Browser
Control light and dark in an image with filter: contrast() and filter: brightness(). What each percentage does, with side-by-side photos.
Using CSS Opacity for Transparency
3 min readIn the Browser
How the CSS opacity property works from 0 to 1, how to fade it smoothly on hover, and why a parent background tints its children.
CSS Word Spacing – How to Do It Right
2 min readIn the Browser
word-spacing controls the gap between words. Three headings compared — normal, widened and negative — and the values worth avoiding.
How to install Git on Mac – MacOS for beginners
5 min readSetup & Tools
Install Git on macOS with Xcode Command Line Tools or Homebrew, set your commit identity, and learn the handful of commands you’ll use every day.
Is HTML a Programming Language? Find Out Now!
2 min readThoughts & Theory
No — HTML is a markup language, not a programming language. Here is what that distinction actually means, and why it matters.
How to install Homebrew – MacOS for beginners
8 min readSetup & Tools
Homebrew is the package manager macOS is missing. Install it with one terminal command, verify it worked, and fix the PATH error that catches beginners.
How to Add Sass to A Create-React-App Project
4 min readSetup & Tools
Add Sass to a Create React App project with one npm install, plus the real difference between Sass and SCSS syntax and how to remove CRA later.
nth-child vs nth-of-type in CSS
2 min readIn the Browser
:nth-child() counts every sibling; :nth-of-type() counts only elements of that tag. The same markup styled both ways, side by side.
How to Install npm on MacOS
5 min readSetup & Tools
Install Node.js and npm on macOS with Homebrew in four steps: check what you already have, install, verify the versions, then update npm to the latest.
How To Make CSS Reflection – The Easy Way
3 min readIn the Browser
Mirror any element with a single declaration: -webkit-box-reflect. Direction, distance, and a linear-gradient fade-out, with examples.
Make Your Work Easier by Using Variables in CSS
6 min readIn the Browser
CSS custom properties from scratch: declaring them in :root, global vs local scope, combining them, and how var() fallbacks really work.
Javascript Double Question Mark (??)
7 min readThoughts & Theory
The Javascript double question mark (??) is the nullish coalescing operator. How it works, how it differs from ||, and how to chain it safely.
Best Job Sites for Web Developers
12 min readThoughts & Theory
The best job sites for web developers: remote boards, junior-friendly listings, freelance platforms, and the filters worth using on each one.
HTML Lists: ol, ul and dl Explained
4 min readIn the Browser
Ordered, unordered and description lists in HTML — nesting them, swapping the marker for an image or emoji, and going horizontal.
Is CSS Case-Sensitive?
2 min readIn the Browser
Property names and keyword values in CSS are case-insensitive, so GREEN and green are the same. Class and id names are not — here is why.
Integration vs Unit Tests: How to Choose
7 min readSetup & Tools
What separates a unit test from an integration test, when each one is worth writing, and why mocking an external provider can give you false confidence.
Common TypeScript Errors and Fixes
5 min readServer Side
Fixes for the TypeScript errors beginners hit most: TS2307, TS2580, TS7006, TS7016 and TS18003 — what each one means and how to solve it.
CSS Letter Spacing – Working on The Correct Way
2 min readIn the Browser
letter-spacing sets the gap between characters. Three headings compared side by side, plus the negative value that ruins legibility.
The CSS nth-of-type Selector Explained
3 min readIn the Browser
:nth-of-type() counts elements by tag, not by position among siblings. Target one, target all with (n), or target several types at once.
Drop-shadow VS Box-shadow: What is the difference?
4 min readIn the Browser
box-shadow follows an element's rectangle. filter: drop-shadow() follows its real shape. See both side by side on a CSS bee you can copy.
The CSS Sepia Filter Explained
3 min readIn the Browser
Give photos an aged, brownish look with filter: sepia(). Worked example, before-and-after images, and how to stack it with grayscale.
How to Make Grayscale Images with CSS
2 min readIn the Browser
Turn a photo black and white with the CSS filter: grayscale() property. A short worked example comparing the original, 50% and 100%.
How to Make A Blinking Animation Using CSS
5 min readIn the Browser
Build a pair of blinking cartoon eyes in pure CSS — an eyelid pseudo-element animated by a @keyframes rule with a natural double blink.
Deploy a Next.js App with Render.com
5 min readSetup & Tools
Deploy a Next.js app to Render.com step by step: connect GitHub, configure the web service, start the deploy, and add extra repositories later.
Why Your Next.js Deploy Fails on Render
7 min readSetup & Tools
A brand new Next.js app fails to deploy on Render.com because of the default build settings. Here is the cause, and the change that gets it live.
CSS backdrop-filter: grayscale()
3 min readIn the Browser
backdrop-filter: grayscale() desaturates what is behind an element, leaving its own content untouched. Worked example plus a value table.
How To Calculate CSS Line Height
2 min readIn the Browser
How line-height sets the space above and below a line of text, what normal actually resolves to, and why negative values are ignored.
The CSS nth-child Selector Explained
12 min readIn the Browser
Every :nth-child() pattern worked out on the same seven elements — odd, even, 3n, n+3, -n+3, ranges and counting backwards.
Express.js Server with TypeScript
13 min readSetup & Tools
Set up an Express.js server with TypeScript from scratch: start in plain JavaScript, add TypeScript, configure outDir, and wire up the build script.
Introduction To The Powerful CSS Blur Effect
5 min readIn the Browser
Build a frosted-glass panel with backdrop-filter: blur(), step by step — including the overflow: hidden fix for a blur that bleeds out.
Do You Still Need npm install --save?
6 min readSetup & Tools
Since npm 5, --save is the default and the flag does nothing. Here are the npm install flags that still matter: --save-dev, --save-optional, --save-peer.
Developer Burnout: Signs and Recovery
6 min readThoughts & Theory
How burnout shows up for developers — falling productivity, lost motivation, exhaustion, isolation — and four practical ways back out.
Transparent Button in CSS
6 min readIn the Browser
Build a transparent button in HTML and CSS: shadows instead of a background, plus hover and active states that swap the label text.
Change the Default Port in Create React App
6 min readSetup & Tools
Three ways to change the default port in a Create React App project: package.json, the command line, or a .env file. Pick whichever suits your setup.
How To Make A CSS Text Reflection Effect
6 min readIn the Browser
Mirror a heading under itself using a ::before pseudo-element, rotate(180deg) scaleX(-1), and a gradient clipped to the text.
CSS Linear Gradient: A Practical Guide
5 min readIn the Browser
Control linear-gradient direction with keywords or degrees, then use percentage color stops for soft blends or hard-edged stripes.
How To Make a CSS Shine Effect Animation
11 min readIn the Browser
Sweep a glossy highlight across an element: a skewed ::before pseudo-element, overflow: hidden, and a two-stop @keyframes animation.
Learn How to Select Only the CSS First Child
6 min readIn the Browser
:first-child in CSS with five worked examples — lists, paragraphs, multiple parents, and :not(:first-child) — each with the Sass form.
Impostor Syndrome in Tech: The Signs
6 min readThoughts & Theory
Impostor syndrome in tech: four signs you are experiencing it, and five practical ways to quiet the voice saying you do not belong.
Javascript Array Methods Explained
9 min readIn the Browser
The Javascript array methods you’ll actually use — map, filter, reduce, find, some, every, slice, splice and more — each with a short, clear example.
CSS Flip Card with Two Sides
11 min readIn the Browser
Build a two-sided card that flips on hover with transform-style: preserve-3d and backface-visibility: hidden — on the X or the Y axis.
How to Improve Pull Requests: 3 Basic Rules
5 min readThoughts & Theory
Three habits that make a pull request easier to review: screenshots for UI changes, proactive comments, and a title that says what actually changed.
Gray vs Grey in CSS. What Is the Right Choice?
1 min readThoughts & Theory
gray and grey are the same CSS keyword — browsers treat them identically. The same goes for lightgray/lightgrey and darkgray/darkgrey.
How to Make Rainbow Text in CSS
3 min readIn the Browser
Make rainbow text in CSS with a linear-gradient, background-clip: text and color: transparent — three declarations, shown step by step.
How To Decide If Programming Is Right For You?
7 min readThoughts & Theory
An honest list of what makes programming a great career and what makes it hard — opportunity and creativity against bugs, burnout and doubt.
What Is the CSS Box Model in Simple Terms
5 min readIn the Browser
Content, border, padding and margin explained with one worked example — including how to add up an element's real width and height.
Absolute Paths in a Node Project
5 min readServer Side
Two ways to use absolute paths in a Node project — NODE_PATH and package.json imports — with the tradeoffs of each and how your IDE handles them.
How to Use !important in CSS
4 min readIn the Browser
!important overrides every other declaration for a property. Where the flag goes, a worked id/class/type example, and why to avoid it.
Striped Text Effect in CSS
3 min readIn the Browser
Fill text with black and white stripes using a linear-gradient, background-clip: text and color: transparent. Three stripe directions.
How To Make A CSS Reflection Effect
4 min readIn the Browser
Build a mirror-like reflection under any block with a ::before pseudo-element, a fading linear-gradient and a touch of opacity.
CSS Radial Gradient: A Practical Guide
6 min readIn the Browser
Blend colors outward from a point with radial-gradient. Circle vs ellipse, moving the center to a side or corner, and target-like rings.
CSS Scale on Hover with transform
12 min readIn the Browser
Grow or shrink an element on hover with transform: scale(). Eight examples covering both axes, scaleX and scaleY, plus a transition.
CSS Colorful Text – Crafting Vibrant Effects
5 min readIn the Browser
Layer a gradient fill, a colored outline and a drop shadow onto the same heading, one declaration at a time, with a screenshot per step.
CSS Text Outline Effect
2 min readIn the Browser
Outline text and hollow out the middle with -webkit-text-stroke plus color: transparent. Step-by-step, with the split width/color form.
CSS Border Styles Explained
9 min readIn the Browser
Border style, width, color, the shorthand and border-radius, with worked examples for single sides, mixed sides and curved corners.
CSS Text Decoration Explained with Examples
6 min readIn the Browser
Underline, overline and line-through in CSS: the line, style, color and thickness properties, how to mix them, and the shorthand.
CSS box-sizing: border-box Explained
4 min readIn the Browser
Why a 300px box ends up 350px wide, and how box-sizing: border-box fixes it. Both models compared with the maths written out.
What is Scrum? 101 Guide For New Developers
8 min readThoughts & Theory
Scrum explained for new developers: sprints, backlog, standups, sprint planning, planning poker and retros — the jargon your first job assumes you know.
Environment Variables with Dotenv
8 min readServer Side
Keep API keys out of Git with dotenv. Setup for JavaScript and Rails, per-environment .env files, .gitignore, and how to print variables safely.
How to Embed CodePen in a WordPress Blog
7 min readSetup & Tools
How to embed a CodePen project in a WordPress blog properly, and how to fix the “referer required” error that pasting the project URL gives you.
How to Center in CSS Using Different Ways
8 min readIn the Browser
Four ways to centre an element in CSS — flexbox, grid, place-items and absolute positioning — compared on the same box, plus what to avoid.
Better Pull Requests: Prep and Split
6 min readThoughts & Theory
Split a large feature into reviewable pull requests using prerequisite changes and well-scoped commits, worked through on a real full-stack example.
What Is a Cron Job? Simple Guide for Beginners
12 min readServer Side
What a cron job is, how cron works, and how to write cron time syntax — every minute, daily, weekly — plus the crontab file and how to read cron logs.
What You Need to Know About CSS Color Methods
7 min readIn the Browser
CSS color names, HEX, RGB and HSL side by side — what each value means and how to add an alpha channel to every one of them.
CSS Selectors: A Complete Guide
6 min readIn the Browser
Every CSS selector a beginner needs: universal, class, id, type, the four combinators, and the ::before, ::after and :hover pseudo-classes.
How To Work With CSS Syntax: The Correct Way!
1 min readIn the Browser
Every CSS rule has four parts: selector, declaration block, property and value. Here is what each one is called and where it goes.
HTML Text Formatting Elements
4 min readIn the Browser
Format text with HTML alone — b, strong, i, em, u, del, mark, sub and sup — plus when to reach for strong over b, with br and hr.
The Most Useful HTML Elements
11 min readIn the Browser
A working reference for the HTML elements you actually use — head tags, body tags, lists, tables and images — with a snippet for each.
Why Are Software Bugs Called Bugs?
2 min readThoughts & Theory
A moth in a Harvard relay, a 1947 logbook entry, and why the note says the first *actual* case of a bug — the word was already decades old.