DevIdiot!

The example cards on our landing page take a highlight function as an argument, so each note underlines its own words

The first thing you see on nakodo.app is a field guide page with three example creators on it. Hover any of the three and a note opens beside it explaining what the product saw in that entry, with the part it is talking about underlined.That last clause is the whole problem. A picture of a product tells you nothing about which part of it matters, so the note has to be anchored on the thing it explains. And the thing it explains is different every time: in the first entry it is three words inside

Your Next.js redirect() Silently Does Nothing Because It's Inside a try/catch

A user fills in your form and clicks "Create post". The post is saved in the database. And the page shows "Could not create post".They try again. Now there are two posts.Nothing is wrong with your database. Your error handling caught something it was never supposed to catch. The Code That Causes It// app/actions.ts'use server';import { redirect } from 'next/navigation';export async function createPost(formData: FormData) { try { const post = await db.post.create({ data: { title: St

How to Build a Reusable React Data Grid with TypeScript

As a React application grows, data grids often become one of the most duplicated parts of the codebase. Orders, customers, invoices, inventory, and audit logs may all need tables, but each screen can end up implementing formatting, editing, validation, and loading behavior differently.A reusable React Grid Layout component solves this by separating what a screen displays from how the grid behaves.Instead of configuring every grid from scratch, developers define columns and provide data. The shar

Mastering the Native Drag and Drop API in React

What is the Drag and Drop API?The Drag and Drop API is a built-in browser capability that allows web applications to make elements on a webpage interactive through dragging and dropping. Instead of forcing users to click buttons or select items from drop-down menus, this browser feature enables users to click on an item, hold down the mouse button or touchscreen, move the item across the screen, and release it over a designated area. The browser automatically tracks the movement coordinate

Add an animated toast stack to a Next.js app in 5 minutes (shadcn registry or npm)

Free kit: animated pieces + 8 AI prompts → https://qodesign.dev/free?utm_source=devto&utm_medium=tutorial&utm_campaign=tutorial7&utm_content=topMost apps built with Cursor, v0 or Lovable end up with toasts sooner or later: "Saved", "Copied", "Something went wrong". The default is usually a flat box in a corner that appears and disappears, and if three fire at once they pile on top of each other.This post adds a toast stack that behaves more like a deck of cards. New toasts slide in a

Your Redux Store Is Not a Cache

At work I inherited an internal resource planner: about 500 people used it to plan who works on what. I was the only frontend developer on it, and the codebase was old.Every piece of data in that app lived in Redux Toolkit. Employees, projects, weekly allocations, departments: each had a slice, a set of thunks, and hand-written isLoading and error flags. It worked, technically. It also refetched everything all the time, showed loaders in the wrong places, and sometimes showed two screens that di

Frontend Performance Is an Architecture Problem, Not an Optimization Problem

We often treat frontend performance as something to fix after a page becomes slow.We optimize images, add memoization, reduce component re-renders, and run Lighthouse audits. These techniques can help—but what if the biggest performance problems were introduced much earlier, during architectural decisions?In modern React and Next.js applications, performance is influenced by several decisions:Rendering strategy: When should a page use static rendering, server rendering, or client-side rendering?

My Plugin Has 14 Rules. Two of Them Found 60% of Everything.

A plugin's README tells you it has fourteen rules. It does not tell you that onyour codebase, two of them will do almost all of the work and six will neverspeak at all.I measured mine. Fourteen rules in eslint-plugin-react-features that have nocounterpart in eslint-plugin-react, pointed at the 100 .tsx files of thisblog — a public tree, so the numbers below are yours to check rather than mineto be believed on.308 findings across 54 files. The shaperulefindingsfilesreact-no-inline-functions1

What the fsType field in a font means, and how to read it with fontTools

Font tooling keeps mentioning fsType, and it is easy to treat it as a magic number where 0 is fine and anything else is a problem. The spec says something more specific, and a few things in it are easy to misread. So I read the field on fonts installed on my Mac, then on the fonts inside a PDF, and wrote down what each reading means. fsType is one 16-bit number with three jobsfsType lives in the OS/2 table of a TrueType or OpenType font. The OpenType spec (the OS/2 page on learn.microsoft.c

Three things I saw when a PDF had fonts I may not embed

Putting a PDF brochure on a website is a common small-site job, and converting it to a web page is the easy part. The fonts are harder to reason about. If the PDF carries a font whose license says no embedding, what does the converter do with it? I tried a set of test files to find out, and the answer was not one thing but three. What the license flag saysA font with an OS/2 table carries a 16-bit license field there, called fsType. The spec page for that table on learn.microsoft.com, which

Why my converted PDF page showed a different font: it was Type 1, not a license flag

I converted a 4-page brochure PDF to HTML and the headline font survived while the body text came out in something else. Same page, same words, different typeface. A font license flag such as fsType is one possible explanation, but in this file it was not the cause, and the real one was easy to check. What I convertedThe sample is a public brochure from the Wikimedia Commons file "Evaluating Wikipedia" (Wiki Education Foundation and others, CC BY-SA 3.0). I cut the first 4 pages out of the

Chromium turned my CFF OpenType font into Type 3 at every fsType value I tried

Which fonts survive "print to PDF" as real fonts, and which ones turn into drawing instructions? That decides what a PDF-to-HTML converter can later hand back to a browser as a web font. The fsType flag in the font's OS/2 table is the obvious suspect. In the one test below, it explained two of three fonts and nothing for the third. Three fonts, six fsType values eachThe test is small. I took Pacifico and Liberation Sans (both TrueType outlines) and Noto Serif SC (CFF outlines in an .otf), a

A font-license checkpoint for PDF-to-HTML: what fsType can and can't tell you

If you convert PDFs into web pages, someone eventually asks whether you are allowed to put the PDF's fonts into the HTML. The obvious design is a checkpoint that reads the font's license flag and stops the pipeline when it says no. Looking at what actually arrives at that point changed where I would put the check.The flag is fsType, a 16-bit field in the font's OS/2 table. Per the OpenType spec (the OS/2 page on learn.microsoft.com, read on 2026-10-28), bits 0–3 hold the usage permission, with v

What WebAssembly Changes About Browser-Local Image Compression

A browser can run a mature image encoder without sending the image to a server. WebAssembly makes that practical by letting developers compile existing native libraries for the browser. The interesting engineering decisions come afterward: how bytes reach the encoder, which thread does the work, and how much memory remains available. What runs, and whereWebAssembly, usually shortened to Wasm, is a portable binary compilation target. Languages including C, C++, and Rust can produce modules t

I built a free, privacy-first 8th Pay Commission pension calculator as a static site

India's 8th Central Pay Commission will revise pensions for roughly 69 lakh central government pensioners. Most "calculators" online are ad-heavy, English-only, or don't show their formulas. So I built one that runs entirely in the browser.Live: https://8cpc-pension-calculator.vercel.app/ (Hindi: https://8cpc-pension-calculator.vercel.app/hi/) What it doesNew basic pension at every projected fitment factor (1.92 to 3.833)DA/DR with arrears, family pension, commutation and 15-year restoratio

JSON Patch explained: how to apply one in JavaScript and Python

A PUT sends the whole document, and if someone changed a field while you were looking, your copy can overwrite it. A JSON Patch (RFC 6902) sends only the difference, as data a reviewer can read line by line. Below is one patch that uses all six operations, applied in JavaScript and Python. After that come how to generate and send one, and what each library leaves behind when a patch fails halfway. One patch can use all six operationsA patch is a JSON array of operation objects. Each has an

I solved my problem of keep forgetting my projects and work to do.

I have a really bad memory when it comes to my old projects and work to do. I couldn't find a way to manage all of them . Ofc I could pay notion or other app 12$ a month but ofc that wouldn't be fun. So I made this webapp to manage all my project , worktodo , emails to reply and etc etc, I also added a note init so if I forget something it remind me . I added a webhook connected to my WhatsApp so it send me a notification on wp . And I need a honest suggestion should I add am ai to manage all th

The quiet engineering of instant play: no install, no sign-up, no wait

The quiet engineering of instant play: no install, no sign-up, no waitOpen a game on your phone and count what happens before you actually play. There is usually a store page, a download, a progress bar, a permissions screen, an account form, a tutorial you cannot skip, and then, eventually, the game. Each of those steps is small on its own. Together they are a wall, and most players bounce off it before ever reaching the fun part.Instant play is the opposite philosophy. You click, and the

Responsive Table Mobile Layout: Rows to Cards in React

TL;DRFor a responsive table on mobile, render each row as a card below 768px: the main field as the title, one status or amount in the corner, two to four label and value pairs, and the row actions in a menu. Keep horizontal scrolling only for grids people compare column by column, like a timesheet or a pricing matrix. Switch the layouts with CSS breakpoints so the server HTML is already right, and give sorting, selection and bulk actions their own phone controls, because the headers and c

Is Your React App Invisible to ChatGPT? Test What AI Crawlers Actually See

Here's a bug report you'll never get: "ChatGPT says our product doesn't have a free tier."Nobody files it, because nobody connects the dots. But if your pricing page is a client-rendered React app, there's a decent chance the AI system that answered that question received this:<!doctype html><html> <head><title>Pricing | Acme</title></head> <body> <div id="root"></div> <script src="/assets/index-8f3a.js"></script> </bo