DevIdiot!
Stop Treating Base64 Like Black Magic: A Veteran's Candid Guide
Let’s be honest for a second: Base64 is one of those primitives almost every developer touches every week, yet an alarming number of people still treat it like mysterious wizardry.I’ve lost count of how many PRs I’ve reviewed where someone said, "Don't worry, the sensitive token is encrypted with Base64," or watched a junior engineer spend half an afternoon staring at their screen because window.btoa() blew up on a simple emoji. Let’s pull up a chair, skip the academic jargon, and talk abou
Content Security Policy Blocking Your Scripts? Fix "Refused to Execute Inline Script" Properly
Originally published on the Djangix blog. This is a condensed version — the full article is linked at the end.You add a Content Security Policy, deploy, and the site looks fine but nothing responds. That is not the policy failing — it is the policy working. Your own inline code simply is not allowed yet. What the policy is doingCSP is a browser-enforced allowlist for scripts, styles, images and connections. Its main security value is against injected scripts, and injected code is usually in
JavaScript Promises for Beginners 🚀
When I started learning JavaScript, I learned about variables, functions, arrays, and DOM manipulation. Then I came across Promises.At first, Promises looked confusing, but simple examples helped me understand them.What is a Promise?A Promise is a JavaScript object that represents the eventual success or failure of an asynchronous operation.For example, imagine ordering food online 🍕. Your order may be accepted, rejected, or still processing.Promises have three states:Pending – The operation is
Blocked by CORS Policy: Every Console Message and Its Real Fix
Originally published on the Djangix blog: Blocked by CORS Policy: Every Console Message and Its Real FixThat red CORS message in the browser console feels like one error, but the sentence that follows it changes everything. Read the exact wording first: it tells you whether an origin was rejected, a header or method was not allowed, credentials were involved, or a preflight request failed — and each of those has a different fix on the server, not in the browser code making the request.Start with
One call, from fetch to a validated object — streaming structured output without the plumbing
You asked the model for a JSON object and set stream: true, because you want the UI (or the next step) to start the moment the first field lands instead of blocking on the last token. Then you're here:const res = await fetch(url, { method: "POST", body });const reader = res.body!.getReader();const decoder = new TextDecoder();let buf = "", json = "";for (;;) { const { value, done } = await reader.read(); if (done) break; buf += decoder.decode(value, { stream: true }); for (const line of buf.s
cloud computing
Unlocking Potential: A Deep Dive into Cloud ComputingIn today's rapidly evolving digital landscape, cloud computing has emerged as a transformative technology, fundamentally reshaping how businesses operate and innovate. Far from being a mere buzzword, it represents a paradigm shift in resource delivery, offering unparalleled flexibility, scalability, and efficiency.At its core, cloud computing involves the delivery of on-demand computing services—including servers, storage, databases, net
Node.js Caching Strategies: Build Faster and More Scalable APIs
Caching is one of the simplest ways to make a Node.js application faster without immediately scaling the underlying infrastructure. Instead of repeatedly performing expensive database queries, API requests, or computations, a cache allows frequently requested data to be served from a faster storage layer.The challenge is choosing the right caching strategy. Cache-aside, write-through, TTL-based expiration, and in-memory caching each solve different problems, and using the wrong approach can crea
Best In-Browser Video Compressor: We Tested 4 That Never Upload Your Video
Originally published on the RedPanda Compress blog.A growing number of video compressors promise that your file never leaves your computer. Instead of uploading the video to a server, they compress it inside the browser tab. That's good for privacy and it means no upload wait, but "runs in your browser" covers some very different technology. We ran the same video through the four in-browser compressors that actually get search traffic and measured what came back.Disclosure: I build RedPanda Comp
Hoisting in Javascript
What is Hoisting?Hoisting is the name for a JavaScript behavior where variable and function declarations act as if they were moved to the top of their containing scope. Nothing is physically moved: the engine registers every declaration in a scope before it runs any code in that scope, and the rest of this post is consequences of that one fact. This means that you can use variables and functions before they are declared in the code. Understanding hoisting is crucial for mastering JavaScrip
Your Cancel Button Might Only Be Canceling the Spinner
Click Cancel. The spinner disappears. The button becomes clickable again.Meanwhile, the request is still running.This is easy to miss in a UI review because the screen looks correct. You only notice when an old response overwrites newer results, a batch keeps starting jobs, or an upstream service continues processing work the user no longer wants.For an API tool with AI-assisted operations, cancellation is part of the user's control over the work. Disclosure: this article was prepared for the Po
Why We Migrated Client Sites from Monolithic Stacks to Next.js 15: An Engineering Teardown
IntroductionIn modern web development, performance is not simply a metric on a Lighthouse report—it directly governs crawl budget efficiency, Time to First Byte (TTFB), and mobile bounce rates. When evaluating architecture choices for high-traffic service platforms, many engineering teams default to traditional monolithic setups out of habit. In this article, we share practical architectural benchmarks and code configurations from our production deployments at CodeOrbit. 1. The Bottle
Server State vs Client State in React: Why TanStack Query Changes Everything
title: "Server State vs Client State in React: Why TanStack Query Changes Everything"published: truepublished_at: "2026-11-18T09:00:00+05:30"description: "Explore the architectural differences between server state and client state in React. Learn how TanStack Query eliminates Redux boilerplate for API calls through automated caching, background refetching, and optimistic updates."tags: [react, webdev, frontend, javascript]ai_disclosure_level: some_ai IntroductionFor years, front-end develop
How React Props and Redux Actually Work, Step by Step
A simple look at what happens when you click a button in React, how data moves from parent to child, and what changes when you add Redux. It looks simpleYou write onClick={() => setCount(count + 1)}. You click the button. The number on the screen changes. It feels fast and simple. But under the hood, React follows the same steps every time. Once you know these steps, React makes a lot more sense.Here is the example we will look at:function Parent() { const [count, setCount] = useState(0
EU Digital Identity Wallets are due by 24 December 2026: what changes for apps that scan passports
Originally published at EU Digital Identity Wallets are due by 24 December 2026: what changes for apps that scan passports"EU wallets are coming at the end of 2026" has been in a lot of product roadmaps this year. If your signup or onboarding flow asks for a photo of a passport or ID card, it is worth knowing what that sentence actually means. The short version: the date is exact (24 December 2026), it binds the Member States, not you, and it does not switch off document scans.Below: where the d
React Frontend Error Boundary — Reliable JavaScript Reporting for Cohort Experiments
TL;DR: Put a small backend relay between the React application and the error destination. Collect render failures, global JavaScript errors, and unhandled promise rejections, but let the relay derive the tenant and experiment cohort from authenticated server state. Give every occurrence a unique event ID, give equivalent failures a stable fingerprint, and retry with a fixed budget. This is enough for basic runtime error tracking and honest per-tenant cost attribution. It is not a substitute for
IdP Logout in an SPA
SequenceConfirm and quiesce. The user confirms logout. The shell first instructs every embedded child application to log itself out and waits until all of them report completion. Nothing auth-related happens until this phase finishes.Read the ID token from the SDK's token store. If there isn't one, skip the IdP round trip: clear local state and go straight to the shared logout landing page.Navigate the top window to the IdP's end-session endpoint, with two parameters:id_token_hint — the cu
VASTAdTagURI in a DAAST Wrapper Validates as XML. Audio Players Read DAASTAdTagURI.
The podcast stitcher logs a VAST-style no-fill. Finance sees the deal as delivered in the ad server. The XML attachment in the ticket is a <DAAST> root with a <Wrapper>, an <Impression>, and a redirect URL that opens fine in a browser.The failure is the element name around that URL, not the hostname.<DAAST version="1.0"> <Ad id="audio-wrap-1"> <Wrapper> <AdSystem>Video Ad Server</AdSystem> <Impression><![CDATA[https://ssp.exa
Architectural Breakdown: A solarpunk garden for your GitHub profile, generated daily from your contr
The Day I Learned Why Your GitHub Profile SVG Should Never Use Pillow Or: How a 10KB Memory Leak Nearly Drowned a Solarpunk Garden on an 8GB VMIt was 2:47 AM on a Tuesday when the pager went off. Our GitHub profile garden service was silently leaking memory on every cron run, and nobody noticed until the 8GB VM started swapping to death on the third consecutive deployment cycle. The SVG badge looked beautiful. The architecture behind it was a slow murder.Here is the post-mortem. No fl
Build Notes: A Browser-Local Image Compressor for Everyday Upload Problems
I built Quick Image Kit as a small browser-local image toolkit: quickimagekit.comThe product is intentionally practical. Many people do not need a full photo editor. They need to make a phone photo small enough for an upload form, profile page, email attachment, document portal, school system, job application, or favicon package.The design constraint is simple: the image should be processed in the browser where possible, so the original file does not need to be uploaded to a processing server.
From Icon Search to React Components: Building a Reusable Icon Collection
Finding an SVG icon is easy. Keeping a consistent set of icons across an evolving React application takes a little more planning.Consider a dashboard with navigation, billing, notifications, and account settings. Each screen needs icons, but downloading them one by one quickly leads to a folder of unrelated assets.A more practical approach is to build a collection specifically for the project. 1. Create a collection for your UIOn SVGicons, you can create a named Icon Collection and add icon