WebFiddleFeatured
CSS Box Model Explained with Examples
CSS box model explained with examples: content, padding, border and margin, content-box vs border-box math, margin collapsing and DevTools tips.
- CSS
- Frontend
- Design
WebFiddle Blog
Tutorials on web development and the languages WebFiddle runs, written by Atish Barua. Most examples open in a sandbox with one click.
JavaScript Basics for Beginners
Learn JavaScript basics: const and let, functions, the DOM, arrays and objects, with runnable examples and answers to common beginner questions.
JavaScript4 min read
CSS Basics: Selectors, Flexbox and Media Queries
Learn CSS basics: selectors, padding and margin, Flexbox alignment, media queries, colors and units, with examples you can edit live.
CSS4 min read
HTML Basics: Tags, Attributes and Structure
Learn HTML basics: page structure, common tags, attributes, forms with built-in validation and semantic elements, with examples to try in the browser.
HTML5 min read
React useState Lazy Initialization Explained
Why useState(expensive()) runs on every render and how passing an initializer function makes React compute initial state only once.
React5 min read
Virtual DOM vs Real DOM in React
How React's virtual DOM, reconciliation and commit phase update the real DOM, and what Fiber and React 18 concurrent rendering changed.
React6 min read
React key Prop vs State: Reset a Component
Reset a React component's state by changing its key instead of syncing props in useEffect, with a runnable example and when not to.
React6 min read
301 vs 302 Redirects: Which One to Use
When to use a 301 or 302 redirect, which URL Google shows in search for each, and how 307 and 308 keep POST requests intact.
HTTP5 min read
How We Run Node.js Code in the Browser
How WebFiddle runs Node.js-style code in a Web Worker with a process and Buffer shim, and the limits: no require, npm packages or fs.
Node.js5 min read
Async/Await in Node.js: A Practical Guide
Practical async/await patterns for Node.js: sequential steps, Promise.all, Promise.allSettled, error handling and top-level await.
JavaScript4 min read
PHP in WebAssembly vs Server-Side PHP
How PHP in WebAssembly compares with server-side PHP on latency, privacy, databases and security, and when each one is the right choice.
PHP5 min read
Best Online Python Compilers Compared
WebFiddle, Programiz, Google Colab, Replit and Brython compared: where code runs, Python version, packages and best use.
Python6 min read
Semantic HTML for SEO and Accessibility
How semantic HTML elements like main, nav and article improve accessibility, and what Google actually says about semantic markup and SEO.
HTML6 min read
CSS Grid vs Flexbox: When to Use Which
When to use CSS Grid vs Flexbox: one- vs two-dimensional layout, a combined app layout example, and responsive grids with minmax().
CSS5 min read
React Hooks Explained for Beginners
A beginner's guide to React Hooks: useState, useEffect, useMemo, useCallback and useRef, the rules of hooks, and when each is worth using.
React5 min read
10 ES6 Features Every JavaScript Developer Uses
The 10 ES2015 features used across modern JavaScript: let/const, arrow functions, destructuring, spread, modules, Promises, classes, Map and Set.
JavaScript5 min read
Python List Comprehension: If Else and Examples
Python list comprehension explained: syntax, filtering with if, if else before for, nested loops, dict and set comprehensions, and loop speed.
Python7 min read
PHP 8 Features: What's New from 8.0 to 8.5
The headline features of every PHP 8 release from 8.0 to 8.5, with runnable examples you can test across versions in the browser.
PHP5 min read
Node.js Event Loop Explained with Phases
How the Node.js event loop works: its six phases, where process.nextTick and promises run, what libuv's thread pool does, and how to avoid blocking.
Node.js6 min read
Why Learn TypeScript: Benefits and Trade-offs
Why learn TypeScript: static typing, interfaces and safer refactoring, plus real trade-offs such as build steps, erased runtime types and a learning curve.
TypeScript5 min read
Is WebAssembly the Future of Web Development?
What WebAssembly is, why it can run faster than JavaScript, real products using it, and why it works with JavaScript rather than replacing it.
WebAssembly6 min read
How to Use npm Packages in the Browser
Use npm packages in the browser without a bundler, using ES modules, import maps and ESM CDNs like esm.sh, plus what works in WebFiddle.
NPM5 min read