DevIdiot!

I Built a State Management Library That Works Like React's useState

I Built a State Management Library That Works Like React's useState — Meet CreateStoreIf you've worked with React, you've probably used useState countless times.It's simple, predictable, and gets the job done.But as an application grows, things get a little more complicated. You have components deeply nested in the component tree that need access to the same state. Suddenly, you're passing props through multiple components, introducing Context Providers, or bringing in a state management l

Next.js opengraph-image in Crawled – currently not indexed: should you fix it?

Search Console's Page indexing report put 14 URLs from this site under "Crawled – currently not indexed". Only 4 of them were pages. The other 10 were files: six per-page opengraph-image routes, feed.xml, favicon.ico, and the root card twice, once with its cache-busting query. None of those should ever be in the index, so the status is harmless for them. I still added X-Robots-Tag: noindex to every one, but the more useful thing I learned is what that header does not do. Why does Google cra

🚀 New React Challenge: Nested Comments

Flattening a comment thread into a single array works until you need to reply to a reply. Then you're faking depth with parent ids, and every edit or delete means rebuilding the whole list. A recursive tree keeps the shape of the conversation and lets you update just the branch that changed. 🧩 OverviewBuild a threaded comments UI: render a recursive thread, then reply, edit, collapse, and delete nodes while every update returns a new tree instead of mutating the seed.👉 https://www.reactchal

Recoloring a Product Photo with an SVG Filter – and Where It Breaks

Short answer: yes, one SVG filter can recolor a transparent-background product photo to any color. A feColorMatrix that desaturates the image, followed by a three-stop feComponentTransfer table, is about twenty lines. It works. But the result depends on the tonal range of the photo you feed it, and on the masters I tested that dependency pushed the colors darker or lighter than requested.I found this while building a color preview for pi-pi.ee, an online shop I built. The shop stocks black, grey

The Architecture of Impenetrable Web Security: Why Amiry Design Engineers Decoupled Defense Systems

Most digital agencies treat cybersecurity as an afterthought—an SSL certificate slapped on a shared hosting server running an outdated WordPress installation with 35 third-party plugins. This approach is catastrophic for international organizations and luxury brands. In 2026, automated credential stuffing, distributed denial-of-service (DDoS) attacks, and SQL injection bots crawl the web 24/7 searching for vulnerable attack vectors.At Amiry Design, our security philosophy starts from first princ

How to Add a Rich Text Editor to a shadcn/ui App

shadcn/ui gives you buttons, dialogs, inputs, and dozens of other components, but no rich text editor. When you need one for blog posts, comments, notes, or a CMS, you usually end up wiring Tiptap yourself and building a toolbar that matches the rest of your UI.editorcn is that missing piece. It's a set of Tiptap-based editors installed with the shadcn CLI and styled with your shadcn theme tokens. Like shadcn/ui, the source is copied into your project, so you own the code.In this guide you'll:In

How I Built a Bilingual Portfolio with Next.js and TypeScript

A portfolio is a strange project. It has to be small enough to stay fast, but complete enough to show how you think. It has to work in two languages without feeling like two separate sites. And it has to be easy to update, because the work it describes will keep changing.This site is the result of those constraints. It is a static Next.js export with English at / and Arabic at /ar, two root layouts, a typed content model, and a design system built around one accent color. Here is how the pieces

How Old Are You, Exactly? The Month-End Rule Behind a Correct Age Calculator

We are a small Saudi team in Riyadh, and one of our free browser tools is an age calculator. It answers a question that sounds trivial: "how old am I, in years, months and days?" People use it for school forms, visa applications and official papers, so the answer has to match what other careful software says, to the day.It turned out that "years, months and days" is not a single obvious calculation. The hard part is the end of the month. This post shows the short function we ship, the bug in the

Loading states for a heavy 3D model - do not show an empty canvas

Even a well-compressed product model is a few MB, and for a second or two on a normal connection the user is looking at an empty canvas. That gap is where people decide the page is broken and leave. A configurator needs a loading state as much as it needs the model. GLTFLoader gives you progress for freeThe loader reports bytes as they arrive:loader.load( '/models/pool.glb', (gltf) => { scene.add(gltf.scene); hideLoader() }, (event) => { if (event.lengthComputable) { const

Running VS Code end-to-end tests on a Windows desktop nobody can see

My end-to-end tests press Ctrl+S in real VS Code windows. That can't happen on the screen I'm working on.The extension under test is Virga, which runs Apex and SOQL scratches against an org with Ctrl+S and lets you close them without a "save changes?" dialog. Most of what can go wrong in it lives in VS Code itself: auto save, the dirty state of a tab, native dialogs, keymaps that also want Ctrl+S, tabs that come back after a restart. A fake of the VS Code API can imitate those, and Virga's unit

How to Calculate How Many Tiles You Need (And Why You Need Extra)

Buying tile or flooring is a math puzzle.You calculate the square footage, but you forget to add the 10-15% waste for cuts and breakage. You end up one box short, and the store is out of stock.Let's look at how to automate this calculation using JavaScript. The Math (Step-by-Step)Calculate the Area of the Room:Length × Width = Total Square FeetCalculate the Area of a Single Tile:(Tile Length in inches × Tile Width in inches) ÷ 144 = Tile Square FeetDivide Room Area by Tile Area:Room Square

You Sorted the Products by Popularity and the Object Put Them Back in ID Order

The best sellers pagehad one job.Most popular first.The server did the sorting.It ran the query,ordered by units sold,and sent the resultas an object keyed by product id.{"1042": {...}, "87": {...}, "530": {...}}Easy lookups on the page,the developer said.The page looped over Object.valuesand drew the cards.The cards came out87, 530, 1042.Not by sales.By id.The oldest productssat at the top of the best sellers,whether anyone bought them or not.Nobody noticed for a month,because the oldest produc

How we built an in-browser bitcoin treasury sizing calculator

Small companies in the UK and the US sometimes want a clear way to think about the size of a possible bitcoin allocation. What they usually do not want is to type reserve figures into a tool that sends those figures to someone else's server.We built a free, open-formula sizing calculator that runs in the browser. Nothing typed into it leaves the device.The method is conservative and deliberately simple. It starts with what the business must protect, not with a target holding:Set aside a fixed nu

Scoped custom element registries end tag clashes

This note has an interactive demo. Try it in the originalTwo libraries can now define the same custom element name on one page without breaking each other. Scoped custom element registries became Baseline on 27 October 2026, when Firefox 159 shipped them. Chrome and Edge 146 and Safari 26 already had them. The problem: one name, one pageEvery custom element you've ever registered went into the same place: window.customElements, the global registry. Names in it have to be unique across the w

Folded into an earlier OnePassApps post: the Focus Timer's Pomodoro cycle

I work on OnePassApps, the team behind app.onepassapps.com.This post has been folded into an earlier one on this channel, because it was measuring the same thing and the full version had already been published on 7 November 2026.The full write-up is here: "Pomodoro Cycle in the Browser: What Happens When a Focus Block Ends" - https://dev.to/onepassapps/pomodoro-cycle-in-the-browser-what-happens-when-a-focus-block-ends-8m5That post runs the Focus Timer's Pomodoro cycle to the end with every phase

Test Your Tab Panels: Resolvable IDs, Accessible Names and Focus Entry

The attribute exists. Does its target?An assertion that finds aria-controls can pass while the relationship is broken. In the Panel Association lab, Broken Case 2 gives its tabs controls references, but the mounted content has no matching ID. The string exists. Its destination does not.The useful regression contract is not "we added ARIA." It is "this tab identifies the intended panel, that panel gets its name from this tab, and keyboard focus reaches the appropriate beginning of the conte

The 7 Nuxt 4 changes that actually break apps (and how to find them in 10 seconds)

Nuxt 3 reached end of life on 31 July 2026. Your app still runs, but it no longer gets security patches or bug fixes, and new module releases are moving to Nuxt 4.The good news is that the Nuxt 3 → 4 upgrade is much smaller than Nuxt 2 → 3 was. The bad news is that most of the breaking changes don't throw errors. They change behaviour quietly, so things look fine until a user notices.After going through the official upgrade guide line by line, these are the seven changes I'd check first.data and

4 WASM threads ran a matting model 2.6–3.0 faster than 1, but only behind COOP and COEP

If you run an ONNX model in the browser with ONNX Runtime Web and never touched your server headers, your WASM backend is probably running on a single thread. Turning on more threads costs two response headers. A benchmark on 2026-11-10, on one Apple M4 Mac with desktop Chromium and ONNX Runtime Web 1.27.0, put a number on the difference: the same video matting model ran 2.6–3.0× faster per frame with 4 WASM threads than with 1. The model and how each frame was timedThe model is RVM MobileN

The Best Next.js CRM Templates in 2026 (Compared)

A CRM looks like a dashboard but behaves like an app. Beyond charts, it needs a contacts list you can search and filter, a pipeline where deals move between stages, deal records with values and close dates, tasks tied to people, and a fast way to jump between all of them. CRM templates differ mostly in two things: whether there's a real database behind the screens, and how much of that daily workflow is actually built. This is an honest comparison of four Next.js CRM templates, one of them ours,

What Is React? Explained Simply for Beginners

Originally published on CodingCush.React is a free JavaScript library for building user interfaces, the parts of a website or app that people actually see and click. Instead of writing one giant page of code, you build small reusable pieces called components, like buttons, cards, menus and forms, and React puts them together on the screen. You describe what the screen should look like, and React updates it automatically when your data changes. That simple idea is why React powers so many modern