https://www.webdevdrops.com Practical web development tutorials by a senior frontend engineer: Git, React, TypeScript, Node.js, SQL and AI coding tools like Claude Code and Cursor. en Wed, 28 Oct 2026 09:00:00 GMT https://www.webdevdrops.com/solid-principles https://www.webdevdrops.com/solid-principles Wed, 28 Oct 2026 09:00:00 GMT The five SOLID principles explained with real TypeScript code: an order checkout refactored step by step, plus the type-system traps to watch for. TypeScript https://www.webdevdrops.com/sql-joins https://www.webdevdrops.com/sql-joins Tue, 27 Oct 2026 09:00:00 GMT SQL joins explained with diagrams: INNER, LEFT, RIGHT, FULL OUTER, CROSS and SELF JOIN on the same two tables, plus anti joins and common mistakes. Databases https://www.webdevdrops.com/claude-code-subagents https://www.webdevdrops.com/claude-code-subagents Mon, 26 Oct 2026 09:00:00 GMT Learn how Claude Code subagents work, how to create your own in .claude/agents, and how to write custom slash commands that run them, with tested examples. AI Tools https://www.webdevdrops.com/spec-driven-development https://www.webdevdrops.com/spec-driven-development Sun, 25 Oct 2026 09:00:00 GMT What spec-driven development is, how to write a spec for an AI coding agent, and how to use it with Claude Code, GitHub Spec Kit, OpenSpec and Kiro. AI Tools https://www.webdevdrops.com/opencode-vs-claude-code https://www.webdevdrops.com/opencode-vs-claude-code Fri, 23 Oct 2026 09:00:00 GMT OpenCode vs Claude Code in 2026: models, pricing, permissions, setup and benchmarks of the two terminal coding agents, and which one to pick for your work. AI Tools https://www.webdevdrops.com/idempotency https://www.webdevdrops.com/idempotency Thu, 22 Oct 2026 09:00:00 GMT What idempotency means, which HTTP methods are idempotent, and how to add idempotency keys to a Node.js API with Express and Redis, step by step. Node.js https://www.webdevdrops.com/react-forms-and-validations-react-hook-form https://www.webdevdrops.com/react-forms-and-validations-react-hook-form Sun, 10 May 2020 09:00:00 GMT Learn React Hook Form step by step: register fields, validate with built-in rules or a Zod schema, show errors, handle async submit and reset the form. React https://www.webdevdrops.com/git-undo-commit https://www.webdevdrops.com/git-undo-commit Tue, 20 Oct 2026 09:00:00 GMT How to undo the last commit in Git: git reset to keep or discard changes, git revert for pushed commits, plus amend, reflog and reverting a file. Git https://www.webdevdrops.com/git-rename-delete-branch https://www.webdevdrops.com/git-rename-delete-branch Sun, 18 Oct 2026 09:00:00 GMT How to rename a Git branch and delete a Git branch, local and remote: the commands, the errors Git shows and how to clean up merged branches. Git https://www.webdevdrops.com/build-mcp-server-typescript https://www.webdevdrops.com/build-mcp-server-typescript Thu, 15 Oct 2026 09:00:00 GMT How to build an MCP server in TypeScript with the official SDK v2: a tool, a resource and a prompt, tested in the MCP Inspector and Claude Code. AI Tools https://www.webdevdrops.com/claude-code-hooks https://www.webdevdrops.com/claude-code-hooks Thu, 15 Oct 2026 09:00:00 GMT Claude Code hooks run your own scripts at fixed points of a session. Learn the events, the config and 5 practical examples that also work on Windows. AI Tools https://www.webdevdrops.com/claude-code-skills https://www.webdevdrops.com/claude-code-skills Thu, 15 Oct 2026 09:00:00 GMT Learn what Claude Code skills are, how to write your own SKILL.md and how to test it, with three working examples you can copy into your project. AI Tools https://www.webdevdrops.com/codex-vs-claude-code https://www.webdevdrops.com/codex-vs-claude-code Thu, 15 Oct 2026 09:00:00 GMT Codex vs Claude Code in 2026: how the two terminal coding agents compare on safety, models, benchmarks, pricing and setup, and which one to pick. AI Tools https://www.webdevdrops.com/cursor-vs-claude-code https://www.webdevdrops.com/cursor-vs-claude-code Thu, 15 Oct 2026 09:00:00 GMT Cursor vs Claude Code in 2026: how the AI editor and the terminal agent differ in workflow, models and pricing, and how to pick the right one for you. AI Tools https://www.webdevdrops.com/git-bash https://www.webdevdrops.com/git-bash Thu, 15 Oct 2026 09:00:00 GMT What Git Bash is, how to install it on Windows, the commands you will use every day and how to make it your terminal in VS Code and Windows Terminal. Git https://www.webdevdrops.com/git-worktree https://www.webdevdrops.com/git-worktree Thu, 15 Oct 2026 09:00:00 GMT Learn how git worktree lets you check out several branches at once, how to add, list and remove worktrees, and how to run AI coding agents in parallel. Git https://www.webdevdrops.com/how-to-access-device-cameras-with-javascript https://www.webdevdrops.com/how-to-access-device-cameras-with-javascript Sat, 30 May 2020 09:00:00 GMT How to access the device camera with JavaScript and the MediaStream API: show the video, switch between front and rear cameras and take screenshots. JavaScript https://www.webdevdrops.com/node-js-with-typescript https://www.webdevdrops.com/node-js-with-typescript Sun, 03 May 2020 09:00:00 GMT How to develop in Node.js with TypeScript using ts-node-dev: setup, an Express example with live reload and the build for production. Node.js TypeScript https://www.webdevdrops.com/git-on-windows-github-install-configure https://www.webdevdrops.com/git-on-windows-github-install-configure Fri, 03 Apr 2020 09:00:00 GMT How to install and configure Git on Windows, create a local repository, set up an SSH key and push your code to GitHub. https://www.webdevdrops.com/5-essential-productivity-tools-in-web-development https://www.webdevdrops.com/5-essential-productivity-tools-in-web-development Thu, 02 Apr 2020 09:00:00 GMT Five tools that speed up web development: Emmet for HTML and CSS, Prettier, live reload, DevDocs and VS Code, with tips on how to use each one. https://www.webdevdrops.com/build-static-site-generator-nodejs-8969ebe34b22 https://www.webdevdrops.com/build-static-site-generator-nodejs-8969ebe34b22 Fri, 15 Sep 2017 09:00:00 GMT Build your own static site generator in about 40 lines of Node.js: read the config, render templates and write the HTML to a public folder. https://www.webdevdrops.com/http-primer-for-frontend-developers-f091a2070637 https://www.webdevdrops.com/http-primer-for-frontend-developers-f091a2070637 Tue, 29 Aug 2017 09:00:00 GMT HTTP basics for frontend developers: how requests and responses work, with methods, URIs, headers, body and status codes explained. https://www.webdevdrops.com/react-minimal-setup-with-webpack-ee7f724df031 https://www.webdevdrops.com/react-minimal-setup-with-webpack-ee7f724df031 Mon, 21 Aug 2017 09:00:00 GMT A minimal webpack and Babel setup to start a React project from scratch, without create-react-app, with a sample component. https://www.webdevdrops.com/build-an-svg-icon-component-with-react-de9db211ebd6 https://www.webdevdrops.com/build-an-svg-icon-component-with-react-de9db211ebd6 Tue, 15 Aug 2017 09:00:00 GMT How to build a React icon component that renders SVG icons by name, using an SVG sprite and svg-sprite-loader with webpack.