DevIdiot!

GitQuest: Visual Interactive Git & GitHub DAG Simulator

GitQuest: Learn Git by Actually Seeing How It WorksGit can be confusing when you're just starting out. You run commands like git commit, git branch, or git merge, but it's not always clear what's happening behind the scenes.What exactly is HEAD? How do branches work? What happens when two branches merge, and why do merge conflicts occur?I built GitQuest to make these concepts easier to understand.It's an interactive Git simulator where you can run commands and watch the repository change v

GHDraw: a full whiteboard in a single HTML file. No build step, no signup.

I got tired of whiteboard tools that ask for my email before I can draw one rectangle, so I built GHDraw: open the page and you are drawing. No account, no install, free.Try it: https://ghdraw.vercel.app/ | Repo: https://github.com/GokalpHizmetleri/GHDrawThe architecture constraint: the whole app is one index.html of vanilla JS. No framework, no bundler, no build step. That is what makes "free and no signup" sustainable. Drawing state autosaves to localStorage, boards save as .ghdraw files, and

I Built an Open-Source Routing Engine for JavaScript Using OpenStreetMap 🚗

What if you could calculate routes directly in your JavaScript application, without relying on Google Maps, external routing APIs, or a running routing server?That's the idea behind roadgraph-router, an open-source npm package I've been working on.After spending time experimenting with OpenStreetMap data, graph structures, and routing algorithms, I wanted to build something that could process real road networks while remaining lightweight enough to run in Node.js or directly in a browser.Today,

I'm 53, I build a JS game engine, and the bots think I'm fresh meat

Someone told me that if bots keep landing on my articles, it means I'm "fresh content" for them.I'm 53. I've spent my life working in a warehouse and on machines. The only fresh thing around here is my patience, and it's leaving fast.In my part of Italy we have a saying for situations like this: "Le mazzate ci vo!" Roughly: what this needs is a good beating. Here's why I've been saying it a lot lately. The illusion of numbersI build BeeEngine, a zero-dependency 2D game engine in vanilla Jav

The analysis counted zero bridges. The app exposes 51 methods.

I wanted to know how a desktop app's window talks to its main process. In Electron, that is the first question behind almost every "build me a feature like theirs" job: which calls cross the bridge, and what answers them on the other side.So I handed a shipped app to a reverse-engineering tool and read the summary. Three context bridges. None of them belonged to the app. The tool everyone starred this weekREA, short for Reverse Engineer Anything, is an MCP server and CLI that lets a coding

Hitting an exact KB range in the browser: building an exam photo resizer and age calculator with zero uploads

By Arvind Kumar, Editor, Sarkari Job SelectionEvery year, millions of Indian candidates fill in government exam forms. Most of these forms reject your photo unless it meets a narrow spec, for example 200×230 px and 20–50 KB for IBPS bank exams. The usual fix is an "online resizer" that uploads someone's face and signature to a random server. We wanted a version that never uploads anything, so we built one with <canvas> and about 150 lines of plain JavaScript. We also built a small age-elig

Your cookie banner might be decorative: how to check what loads before consent

Most websites now show a cookie banner. Far fewer check what the page does before anyone clicks it.A common pattern: the banner appears, the visitor hasn't touched it yet, and Google Analytics, the Meta Pixel and a session-recording script have already loaded and sent their first requests. The banner is there, but it isn't controlling anything.In the EU and UK, non-essential trackers are supposed to wait for consent, so this is a real problem for the site owner, and most of them don't know it's

Errors that say the fix

A stable code tells an agent what went wrong. Now it also says what todo: the error line carries docs, a link to that code's fix.$ vx run biuld --all --format json{"ok":false,"error":{"code":"VX_E_UNKNOWN_TASK","message":"vx run: no projects declare task(s): biuld. Did you mean build?","docs":"https://vznjs.github.io/vx/cli/#vx_e_unknown_task"}}No network? The same section ships inside vx:$ vx docs VX_E_UNKNOWN_TASK── cli.md § VX_E_UNKNOWN_TASK · https://vznjs.github.io/vx/cli/#vx_e_unknown_task

string.length is wrong for X and Bluesky. My counter failed 8 of 34 tests against X's own library

I'm Alex. I build Fuxux, a social media scheduler: you write a post once and it goes out to X, Bluesky, Instagram, LinkedIn, Threads and a few more.A scheduler has to answer one boring question before anything is sent: does this text fit? I assumed that was text.length <= limit. It isn't, and the two networks with the smallest limits are the two where it goes wrong.I also thought I had already solved it. Then I sat down to write this post, checked my own code against X's library to get the ex

How many tasks at once? Count the cores you are given

A task runner's first number is how many tasks to run at once. Too fewand cores sit idle. Too many and tasks fight for the same cores, eachone slower, and the run ends later than it would have with fewer.The obvious answer is "one per CPU". Inside a container, that answer iswrong. The CPU count lies in a containerA CI job often runs in a container with a CPU limit: Docker's--cpus=2, a Kubernetes limits.cpu, a hosted runner's plan. Thekernel enforces that limit through the job's cgroup. But

Telegram Mini App shop in Next.js fixing MainButton checkout and iOS viewport

Opening: you want to sell goods inside a Telegram Mini App. If you trust the raw initDataUnsafe object that the WebApp sends, a malicious user can forge it and trick your backend into thinking they are a legitimate user, leading to free orders or replay attacks. The fix is to verify the HMAC hash on the server before you enable the MainButton or create an invoice. In this guide we build a complete shop – product list, cart, MainButton‑triggered checkout, and a native Telegram invoice – using Nex

From an AI prompt to an SVG icon in React: a tested example

An SVG export can contain real vector paths and still be a poor fit for a tiny button. This example follows one image from its AI prompt through conversion to a React label, then looks at what survives at interface sizes.Disclosure: We build PunkerIcon, which produced the assets used in this experiment. AI assistance was used to draft this article; the SVG measurements and React example were checked against the actual files. 1. Start with the prompt and inspect the outputWe used this descri

15 - React: Rendering component dynamically

In JSX, React distinguishes between:built-in HTML elements: lowercase names like div, button, sectioncustom components: capitalized names like Card, Button, ProfileA common pattern is to pass the element/component as a prop and render it dynamically.type BoxProps = { as?: React.ElementType; children: React.ReactNode;};function Box({ as: Component = 'div', children }: BoxProps) { return <Component>{children}</Component>;}export default function App() { return ( <> &l

Server Components and Interactive UI: Where Animation Actually Belongs

Server Components and Interactive UI: Where Animation Actually BelongsA surprisingly common response to adding animation in a Next.js app is to put "use client" at the top of the component and move on.The animation works. The warning disappears. The page ships.Then the boundary spreads.The hero becomes a Client Component because its heading animates. The section below imports the hero, so that joins the client graph. A layout imports an animation provider. Before long, a mostly static page

14 - React Router: actions, forms, and submission

Routes can define an action in addition to a loader. Actions are used for form submissions, mutations, and server-like updates. 1. Defining a route actionimport { redirect } from 'react-router';export async function productAction({ request, params }: ActionFunctionArgs) { const formData = await request.formData(); const productId = params.productId; const name = formData.get('name'); if (!name || typeof name !== 'string') { return { error: 'Product name is required.' }; } await sav

13 - React Router: Data Mode

This tutorial covers the React Router v7+ data-router APIs used by modern React Router applications. The project currently uses React Router 8.3.1 and the declarative route configuration style.React Router routes are declared in a route tree. The router creates the route objects, resolves parameters, runs loaders, and renders the matching component. 1. Creating a routerUse createBrowserRouter to create a router for browser navigation. The router configuration can contain route components, n

12 - React: Redux advanced topics

Redux reducers should be pure functions. This means that, for the same input state and action, a reducer should always produce the same output.Reducers should not perform side effects such as:making HTTP requestsstarting timerswriting to local storageshowing notificationschanging external stateInstead, those side effects should be handled in places such as components, custom hooks, middleware, or asynchronous thunks. 1) Keeping reducers pureA reducer receives the previous state and an actio

11 - React: Redux and Redux Toolkit (RTK)

Redux is a state management library used when application state becomes large or shared across many components.The main idea is:state lives in a central storecomponents read state through selectorscomponents update state by dispatching actionsreducers decide how the state changes 1) Redux basicsA reducer is a function that receives the current state and an action, then returns the next state.const initialState = { counter: 0 };const reducer = (prevState = initialState, action: { type: strin

10 - React: Form Actions

Form actions are a newer React pattern for handling form submissions with server-style action functions.The basic idea is simple: instead of wiring a form to onSubmit and manually calling preventDefault(), we give the form an action.async function saveUser(formData: FormData) { const username = formData.get('username'); console.log(username);}export default function FormExample() { return ( <form action={saveUser}> <input name="username" /> <button type="submit"&gt

09 - React: handling forms

Form handling usually has two main concerns:form submissionform validationA form in HTML submits automatically when the user clicks a submit button. In React, we usually prevent that default behavior and handle submission ourselves. 1) Form submissionBy default, a button inside a form submits the form and refreshes the page. That is usually not what we want in React. Option 1: use a button with type="button"<button type="button" onClick={() => console.log('clicked')}>Save</