Blog

How to actually learn to code

Ideas on building habits, getting unstuck, and turning practice into real skill. Written by the people building Devpuff, for the people using it.

White text reading 'How range() works in Python' on a dark purple dotted background

LatestOctober 12, 2026·8 min readLearn

range() in Python: start, stop, step, and why it is lazy

range(1000000) uses 24 bytes. A list of a thousand numbers uses 4,028. Here is what range actually is, measured.

Read Article

The archive

Browse every post

Newest first. Filter by category, or search for whatever you're stuck on.

White text reading 'Objects are not valid as a React child' on a dark purple dotted background

October 7, 2026·7 min readTools

Objects are not valid as a React child: what to render

Objects are not valid as a React child, and React tells you which one by listing its keys. In React 19 the promise version throws a different error.

White text reading 'How to fix npm install errors' on a dark purple dotted background

October 6, 2026·8 min readTools

npm install errors: read the code, not the stack

Every npm ERR code names one cause. ERESOLVE, E404, EJSONPARSE and the rest, with what each one means, measured against real installs.

October 5, 2026·7 min readArtificial Intelligence

Context windows, tokens and temperature, explained

The LLM context window, tokens and temperature decide what an AI assistant can see and how it answers. Knowing them explains most odd behaviour.

White text reading 'Unexpected token in JavaScript' on a dark purple dotted background

October 4, 2026·7 min readTools

Unexpected token in JavaScript: the two different errors

Unexpected token is two different errors. One is a typo in your file, the other means you got HTML where you expected JSON.

October 3, 2026·9 min readLearn

How to convert a string to a number in JavaScript

Converting a string to a number in JavaScript: an empty string is 0 with Number and NaN with parseInt. What four methods do to awkward input.

White text reading 'How to sort an array of objects in JavaScript' on a dark purple dotted background

October 2, 2026·9 min readLearn

Sort an array of objects by any property in JavaScript

To sort an array of objects in JavaScript, sort() changes the original in place. The default order is alphabetical even on numbers, so 100 beats 9.

October 1, 2026·9 min readLearn

How to sleep or wait in JavaScript

JavaScript has no sleep function. The three-line version everyone writes does not block the page, and a busy-wait loop does.

White text reading 'setTimeout vs setInterval in JavaScript' on a dark purple dotted background

September 30, 2026·9 min readLearn

setTimeout and setInterval explained

setTimeout in JavaScript is a minimum, not a promise. Twenty ticks of a 50ms interval took 1,213ms instead of 1,000, and the drift never comes back.

White text reading 'Rounding numbers in JavaScript' on a dark purple dotted background

September 29, 2026·9 min readLearn

Rounding in JavaScript: floor, ceil, round and toFixed

Rounding in JavaScript: (1.005).toFixed(2) returns 1.00, because 1.005 is really 1.0049999999999998934. Here is what to use instead.

September 28, 2026·8 min readLearn

Remove duplicates from an array in JavaScript

To remove duplicates from an array in JavaScript, a Set does it in one line and 31 times faster than the filter version. Neither works on objects.

White text reading 'Random numbers in JavaScript' on a dark purple dotted background

September 27, 2026·9 min readLearn

How to generate a random number in a range in JavaScript

To get a random number in JavaScript, the Math.round version of the formula gives 1 and 6 half the odds of the rest. Measured over 600,000 rolls.

White text reading 'How .gitignore works' on a dark purple dotted background

September 26, 2026·8 min readTools

.gitignore: what to ignore and why it stops working

A .gitignore rule has no effect on a file git already tracks. That one rule explains almost every case where ignoring appears broken.

White text reading 'How to undo git add' on a dark purple dotted background

September 25, 2026·8 min readTools

How to undo git add before committing

To undo a git add, git restore --staged unstages the file and keeps your edits. In a repo with no commits yet it fails, and git reset works.

White text reading 'Git stash explained' on a dark purple dotted background

September 24, 2026·8 min readTools

git stash: park changes without committing

Stash puts your uncommitted work aside and gives you a clean tree. It leaves untracked files behind unless you ask for them.

White text reading 'How to squash Git commits' on a dark purple dotted background

September 23, 2026·8 min readTools

How to squash commits with interactive rebase

Squashing collapses several commits into one. It rewrites them, so every hash changes and pushed history is off limits.

White text reading 'Git reset vs revert vs checkout' on a dark purple dotted background

September 22, 2026·7 min readTools

git reset vs revert vs checkout: undo without fear

Git reset vs revert: reset moves the branch and can destroy work, revert adds a commit and destroys nothing. Each measured on the same repository.

White text reading 'How to rename a Git branch' on a dark purple dotted background

September 21, 2026·8 min readTools

How to rename a Git branch, locally and remotely

To rename a git branch locally is one command. The upstream still points at the old remote branch afterwards, which is the step everyone misses.

White text reading 'Git pull vs fetch' on a dark purple dotted background

September 20, 2026·8 min readTools

git pull vs fetch: the difference, shown

Git pull vs fetch: fetch updates origin/main and leaves your files alone, pull does that and then merges. Here are the refs before and after.

White text reading 'Detached HEAD in Git and how to escape' on a dark purple dotted background

September 19, 2026·8 min readTools

Detached HEAD in Git: what it means and how to escape

A git detached HEAD means you are on a commit, not a branch. Commits made here are unreachable the moment you leave, and the reflog gets them back.

White text reading 'How to delete a Git branch' on a dark purple dotted background

September 18, 2026·8 min readTools

Delete a Git branch, locally and remotely

To delete a git branch you need two commands, because local and remote are separate. And everyone else keeps a dead copy until they prune.

White text reading 'Why your z-index is not working' on a dark purple dotted background

September 17, 2026·7 min readWeb Development

z-index not working? It is the parent, not the number

A child with z-index 9999 loses to a sibling with z-index 1 when the parent has opacity. Same markup without it, and 9999 wins.

White text reading 'CSS variables explained' on a dark purple dotted background

September 16, 2026·10 min readWeb Development

CSS variables in practice: scope, fallbacks and theming

Custom properties inherit and cascade, which is what separates them from Sass variables. An invalid value falls back further than you expect.

White text reading 'CSS units explained px, rem, em and vh' on a dark purple dotted background

September 15, 2026·10 min readWeb Development

CSS units: px, rem, em, vh and when to use each

CSS units compared: nested em compounds to 67.5px where rem stays at 24px. That difference is the whole reason to prefer one over the other.

White text reading 'CSS transitions explained' on a dark purple dotted background

September 14, 2026·11 min readWeb Development

CSS transitions: smooth state changes in four properties

Transitioning height to auto does not animate. Measured against an identical box going to a pixel value, one moved and one jumped.

White text reading 'How to truncate text with an ellipsis in CSS' on a dark purple dotted background

September 13, 2026·10 min readWeb Development

Truncate text with an ellipsis in CSS, one line or many

Truncating with text-overflow ellipsis in CSS needs three properties, not one. Drop white-space nowrap and text wraps instead of truncating.

White text reading 'Python f-strings explained' on a dark purple dotted background

September 12, 2026·8 min readLearn

f-strings in Python: formatting, specs, and the = trick

An f prefix lets you put expressions straight into a string. The format specs and the debugging form are what make them worth learning properly.

White text reading 'Recursion explained' on a dark purple dotted background

September 11, 2026·10 min readLearn

Recursion explained, with the call stack printed out

Recursion is a function calling itself until a base case stops it. Here is what the call stack does, and the exact depth where JavaScript gives up.

White text reading 'React hooks explained' on a dark purple dotted background

September 10, 2026·9 min readLearn

React hooks explained, the complete map

React ships around seventeen hooks and you need five. Here is what each one is for, the two rules that break everything, and how to pick the right one.

White text reading 'How to learn from AI-generated code' on a dark purple dotted background

September 9, 2026·9 min readArtificial Intelligence

How to actually learn from AI-generated code

You can learn from AI generated code or just ship it. Here is what the research found, and a protocol that keeps the speed without losing the skill.

White text reading 'HTML forms explained' on a dark purple dotted background

September 8, 2026·9 min readWeb Development

HTML forms, the complete beginner guide

HTML forms: a working one is nine lines. Here is that form, what the browser validates for free, and what decides whether a field reaches your server.

White text reading 'React useEffect explained' on a dark purple dotted background

September 7, 2026·9 min readLearn

useEffect explained, dependencies, cleanup, infinite loops

useEffect runs code after render. What the dependency array controls, why cleanup exists, and the four bugs that bite everyone in the same order.

September 6, 2026·11 min readLearn

How to remove an element from an array in JavaScript

To remove an element from an array in JavaScript, filter() keeps the original and splice() removes in place. Plus the traps that corrupt your data.

One commit from a feature branch being copied onto main as a new commit with a different hash

September 5, 2026·8 min readTools

git cherry-pick: move one commit anywhere

Cherry-pick copies a commit onto your current branch. It creates a new commit with a new hash, so the original stays where it was.

Three flex children sized unevenly by their content beside three grid children sized equally by their tracks

September 4, 2026·11 min readWeb Development

Flexbox vs Grid: how to choose in ten seconds

Flexbox vs grid: flex sizes items to their content, grid sizes the tracks. Measured, that gave 32px and 229px against three equal 193px columns.

A successful 200 response arriving at the browser and being stopped before it reaches the page's JavaScript

September 3, 2026·7 min readTools

CORS error: what the browser is actually blocking

A CORS error is the browser refusing a response the server already returned with a 200. Here is that proved with two real origins, and the fixes.

A directory tree with git searching upward for a .git folder and finding none before reaching the top

September 2, 2026·7 min readTools

fatal: not a git repository, and how to get out of it

fatal: not a git repository means git found no .git folder here or in any parent. Four causes, and the popular fix that quietly makes things worse.

Two arrays combined by spread into a new array, beside push spreading into an existing one and overflowing the stack

September 1, 2026·9 min readLearn

How to merge two arrays in JavaScript

To merge arrays in JavaScript, spread and concat both work. push(...arr) throws a RangeError at 200,000 items, which is why the choice matters.

The same object iterated with Object.keys and with for-in, where for-in returns an extra inherited key

August 31, 2026·9 min readLearn

How to loop through an object in JavaScript

To loop through an object in JavaScript, for...in walks inherited properties too. And integer-like keys come out first, whatever order you wrote.

A line of code with the value before the parentheses highlighted, showing it holds an array rather than a function

August 30, 2026·8 min readTools

"x is not a function" in JavaScript: causes and fixes

The value in front of the parentheses is not callable. Six causes, including the missing semicolon that turns an array into a function call.

A spread copy sharing its nested object with the original beside a deep clone with its own separate nested object

August 29, 2026·8 min readLearn

Shallow vs deep copy in JavaScript: how to clone properly

To copy an object in JavaScript, spread copies the top level only, so nested objects stay shared. Here is what each method keeps and destroys.

A function shown holding on to a variable from the outer function that created it, after that outer function has returned

August 28, 2026·10 min readLearn

JavaScript closures explained with 3 examples

JavaScript closures let a function remember variables around it after the function that made them finished. Three real uses and the classic loop bug.

An empty object checked three ways, with the JSON approach wrongly reporting a Date and an undefined value as empty

August 27, 2026·10 min readLearn

How to check if an object is empty in JavaScript

To check if an object is empty in JavaScript, Object.keys(obj).length === 0 is the answer. The JSON.stringify version reports a Date as empty.

A string capitalized by charAt and slice, with an emoji example showing the character split across two code units

August 26, 2026·8 min readLearn

How to capitalize the first letter of a string in JavaScript

To capitalize the first letter in JavaScript the one-liner works until that character is an emoji, whose length is 2 so slice(1) cuts it in half.

Two timelines compared, one running five requests end to end in sequence and one running the same five overlapping in parallel

August 25, 2026·11 min readLearn

Async await in JavaScript, explained with measured timings

async and await let you write asynchronous code that reads top to bottom. Here is how they work, and the habit that made a real script 4.7 times slower.

The same array searched with includes and indexOf, with only includes finding NaN

August 24, 2026·9 min readLearn

How to check if an array contains a value in JavaScript

To check if a JavaScript array contains a value, includes() finds NaN where indexOf() cannot. On 100,000 items a Set measured 1,245 times faster.

Four Python snippets side by side, each with its indentation mistake highlighted and its exact error message beneath

August 22, 2026·7 min readTools

Indentation Error in Python: the three messages, decoded

Python has three indentation messages and a fourth error that is not an IndentationError at all. Each one points at a different mistake.

A Python for loop taking each item from a list in turn, with the loop variable shown holding one value per pass

August 22, 2026·10 min readLearn

Python for loops: the complete beginner guide

A Python for loop walks a sequence directly, not a counter. Here is every form, including the else clause and the mutation trap.

The same list grown two ways, one gaining a nested list and one gaining the individual items

August 20, 2026·8 min readLearn

append vs extend in Python: the list-growing mixup

Python append vs extend: append adds one item, extend adds each item from an iterable. Extending with a string splits it into characters.

Two competing CSS rules with their specificity scored as three numbers, showing which one wins and why

August 18, 2026·6 min readWeb Development

CSS specificity: why your style is not applying

Specificity is three numbers compared left to right, not one score. Here are the contests that decide it, measured in a browser.

A single-colon selector targeting an existing element in a state beside a double-colon selector generating a new box

August 17, 2026·10 min readWeb Development

Pseudo-classes vs pseudo-elements: :hover and ::before

CSS pseudo-classes select an element in a state. Pseudo-elements create something never in your HTML, and on an image they silently do nothing.

The five CSS position values shown against the normal document flow, with absolute removed from it

August 17, 2026·10 min readWeb Development

CSS position: static, relative, absolute, fixed, sticky

CSS position has five values, and absolute is the one that catches everyone. Here is what each does to the box and the layout around it, measured.

Five identical sticky elements after scrolling, one held at the top and four scrolled away for different reasons

August 16, 2026·10 min readWeb Development

position: sticky is not working? Four measured reasons

CSS position sticky needs a threshold and a parent that does not scroll. Here are five identical elements, one that sticks and four that do not.

The same overflowing content under four overflow values, with the scrolling ones showing a narrower content box

August 16, 2026·10 min readWeb Development

CSS overflow: visible, hidden, scroll, auto and clip

Setting overflow-x to scroll silently changes overflow-y to auto. Scrollbars also take 15px out of your content box.

The same declarations applied to an inline and an inline-block element, with only the second one respecting width and height

August 14, 2026·10 min readWeb Development

The CSS display property: block, inline, flex, grid, none

An inline element with width 300px and height 300px measured 36 by 17. Display decides whether your sizes are obeyed at all.

One box in content-box sizing rendering wider than its declared width beside an identical box in border-box sizing rendering at its declared width

August 13, 2026·7 min readWeb Development

The CSS box model: what the numbers actually do

A box set to 200px wide can render at 250px. Here is the box model measured in a real browser, and why the computed width will not tell you.

A console showing a table of objects, a counted label, and a timing result beside a plain log of the same data

August 12, 2026·8 min readTools

Beyond console.log: the console methods worth knowing

console.log answers what is this value. Seven other methods answer how many times, how long, who called it, and which of these rows is wrong.

Two prompting paths from the same problem, one producing a finished answer and one producing an explanation followed by a practice attempt

August 11, 2026·7 min readArtificial Intelligence

How to use ChatGPT to learn coding, not to avoid it

Using ChatGPT to learn coding works or wastes your time depending on how you prompt. Here is the test that tells you which one you are doing.

A property chain with the third link highlighted as undefined and an arrow showing the error message names the fourth link instead

August 10, 2026·8 min readTools

Cannot read properties of undefined: find the real cause

Cannot read properties of undefined names the property you asked for, not the value that is missing. Here is how to find the real one, measured in Node.

Two similar package names side by side, one with millions of weekly downloads and one with single digits

August 8, 2026·7 min readArtificial Intelligence

AI hallucinations in code, and how to catch them

An AI hallucination in code is rarely gibberish. It is a package name that sounds real, and every plausible-but-wrong one tested was already on npm.

Two diverging projection lines over the same decade, one rising for software developers and one falling for computer programmers

August 5, 2026·8 min readArtificial Intelligence

Will AI replace programmers? An honest answer

Will AI replace programmers? No. The same agency projects developers up 15 percent and computer programmers down 6 percent over one decade.

The same feature branch integrated two ways, one showing a merge commit joining two lines and one showing a single linear history

July 28, 2026·10 min readTools

Git merge vs rebase, with the real graphs side by side

Git merge vs rebase: merge preserves history and adds a commit, rebase rewrites it and adds none. Here is one branch integrated both ways.

One page request split into a browser side handling display and interaction and a server side handling data and rules

July 28, 2026·8 min readLearn

Frontend vs backend, which should you learn first?

Frontend vs backend: learn frontend first. Here is the reasoning, what each side does all day, and the questions that flip the answer.

A flex container labelled with its main axis and cross axis, showing how the two swap when flex direction changes to column

July 28, 2026·10 min readWeb Development

CSS flexbox, a guide built on measured layouts

Flexbox is two properties and one axis rule. Here is that model, measured in a real browser, plus the two traps that make flex items misbehave.

The four main DevTools panels labelled with the question each one answers about a page

July 28, 2026·9 min readTools

Chrome DevTools for beginners, the 20% you use daily

Chrome DevTools has about twenty panels and you need four. Here is what each answers, the shortcuts worth learning, and debugging without console.log.

A chat prompt on one side and generated code on the other, with the code containing an unreviewed section highlighted

July 21, 2026·9 min readArtificial Intelligence

Vibe coding, what it is and exactly where it breaks

Vibe coding means describing what you want and shipping what the AI writes without reading it. It works for four things and fails badly at five others.

Two database tables side by side with lines connecting matching rows, and the joined result set below them

July 21, 2026·9 min readLearn

SQL joins explained, which rows survive and why

SQL joins compared: INNER, LEFT, RIGHT, FULL and CROSS on the same two tables, with the real result rows. Plus why the Venn diagram misleads.

A Python for loop printing an index next to each item in a list, with enumerate supplying both values

July 21, 2026·11 min readLearn

Python for loop with index, enumerate() explained

For a Python for loop with the index, use enumerate(). The syntax, the start argument, and why range(len()) breaks on half of what you loop over.

A diagram tracing a browser request through DNS, a web server, and a database, and the response travelling back

July 21, 2026·9 min readLearn

How do websites work? Follow one click end to end

How do websites work? Type a URL, press enter, and here is every step in order, from name lookup to the pixels on your screen.

Six side-by-side boxes each showing a different CSS centering technique, with the centred element highlighted

July 21, 2026·9 min readWeb Development

How to center a div in CSS, every method that works

How to center a div: flexbox does it in two lines. Here is that method, the five others worth knowing, and the two reasons centering silently fails.

A Git branch with the HEAD pointer moving back one commit, and the changed files staying in the working directory

July 21, 2026·10 min readTools

How to undo your last Git commit, every scenario

To undo your last git commit, reset --soft HEAD~1 keeps the work. Here is the version for every situation, including commits already pushed.

Four growth curves plotted together showing constant, logarithmic, linear and quadratic complexity as input size increases

July 21, 2026·9 min readLearn

Big O notation explained with everyday examples

Big O notation describes how work grows as your data grows. Count operations instead of timing them and it becomes numbers you can check yourself.

{ }

✦

Reading about code is fun. Writing it is better.

Put an idea into practice right now. Write real code in your first free lesson.

Start Learning Free