标签：#web

Your resume tells people what you’ve done. Your GitHub shows what you’ve built. But your personal website tells people who you are. When I started learning web development, I believed that a good resume and a few GitHub repositories were enough. Like many students, I spent countless hours building projects, solving coding problems, and learning new technologies. Every new project felt like a milestone, yet all of them remained scattered across different platforms. A recruiter would have to open my resume, visit my GitHub, search for my LinkedIn profile, and perhaps never even discover the articles I had written or the experiments I had built. That made me realise something important. Developers need a place on the internet that they truly own. Not another profile. Not another social media account. A place that represents their identity, work, and journey. That’s what a personal website becomes. More Than Just a Portfolio Many people hear the words personal website and immediately think of a portfolio with a few screenshots and a contact form. A great developer website goes much further. It answers questions before anyone has to ask them. Who are you? What technologies do you enjoy working with? What problems have you solved? What kind of developer are you becoming? What have you learned recently? How can someone reach you? Instead of forcing visitors to jump across five different platforms, everything exists in one carefully designed experience. Your Name Deserves a Home Every developer works hard to build projects. Very few work equally hard to build their own identity. When someone searches your name, what should they find? Ideally, the very first result should be something you completely control. A website with your own domain isn’t just another webpage. It’s your digital home. Unlike social platforms, algorithms cannot redesign your identity overnight. You decide what visitors see first. You decide which projects matter. You decide how your story is told. Resume

Nuxt vs SvelteKit. Which one is better? That is is what I've been testing out this week. I built the...

Rspack, developed by ByteDance, has released version 2.0, featuring enhanced performance, reduced dependencies, and a focus on modern ECMAScript modules. Key updates include a pure ESM core, improved static analysis, and support for RSC. Performance benchmarks show big improvements in build times. The project has experienced substantial growth, with npm downloads exceeding 5 million weekly. By Daniel Curtis

A request starts at 10:00:00.900 and finishes 200 ms later. Your latency log says -800 ms . That sounds impossible until the machine corrects its clock between the two reads. Then ordinary code turns an adjustable wall clock into a broken stopwatch. The subtraction that works—until it does not This is probably hiding in one of your metrics helpers: async function timed ( operation ) { const startedAt = Date . now (); const result = await operation (); return { result , durationMs : Date . now () - startedAt , }; } Most of the time, this reports a sensible number. That is what makes it dangerous. Date.now() answers a calendar question: how many milliseconds have passed since the Unix epoch according to this machine? The answer must remain comparable with logs, users, and other computers, so synchronization software is allowed to correct it. A correction can change its rate, jump it forward, or move it backward. If either correction lands between the two calls, the subtraction measures the clock adjustment as if it were work. A timestamp is a coordinate. A duration is a distance. They need different instruments. Your computer already has two kinds of clock Operating systems expose several clocks, but two mental buckets cover most application code: Question Clock JavaScript example “When did this happen?” Wall clock Date.now() , new Date() “How long did this take?” Monotonic clock performance.now() A wall clock follows civil time. It has an epoch and can be serialized as an ISO timestamp. A monotonic clock starts at an arbitrary origin and promises that later readings will not be lower than earlier readings. wall: 1000 ── 1001 ── 0998 ── 0999 clock correction monotonic: 40 ───── 41 ───── 42 ───── 43 On Linux, CLOCK_REALTIME is settable wall time . CLOCK_MONOTONIC cannot be set and does not make discontinuous jumps backward, although gradual frequency adjustment can affect its rate. Linux even has CLOCK_BOOTTIME for a monotonic counter that includes suspended time. Thre

Open the network tab on almost any web app, trigger a failed request, and you'll usually find one of two things staring back at the user: a raw stack trace, or a message so generic it might as well say "something happened." Neither one helps. Both exist for the same reason they were written by developers, for developers, and never translated for the person actually using the product. The Error Message Nobody Designed Most UI elements go through some level of design scrutiny. Buttons get spacing decisions. Forms get validation states. But error messages? They're usually whatever string got thrown at the moment something broke, copy-pasted straight from a try/catch block into a toast notification. "Error 500: Internal Server Error." "Failed to fetch." "Unexpected token in JSON at position 4." These are diagnostic breadcrumbs for engineers debugging a system. To a user trying to submit a form or complete a purchase, they're just noise confirmation that something went wrong, with zero indication of what to do next. This is where good web app design services earn their keep not in the buttons and layouts everyone notices, but in the failure states nobody plans for until users start complaining. Why This Keeps Happening It's not that teams don't care. It's that error handling sits at the intersection of two disciplines that rarely talk to each other at the moment. Backend logic throws whatever exception the code produces. The front end just needs something to display so the app doesn't silently freeze. Nobody's job, at that moment, is to ask: "what should the user actually understand right now?" The result is a UI layer that's polished everywhere except the one place users encounter when things go wrong which, ironically, is exactly when clear communication matters most. What a Good Error Message Actually Does A well-designed error message does three things a raw exception never does. It tells the user what happened, in plain language not "Error: NetworkException," but "W

You ask an LLM for JSON. You get this: json { "name": "test", "valid": True, "items": [1, 2, markdown Three problems in one response: markdown fences the LLM wasn't supposed to add, True instead of true (Python literal), and the response was cut off mid-array. JSON.parse() throws on all three. A linter tells you what's wrong. But you're left fixing it manually. I kept hitting this wall so often that I built a dedicated repair pipeline: AI JSONMedic . Why existing tools don't cut it JSONLint / JSONFormatter — great for valid-ish JSON with one missing comma. Not built for LLM failure modes: they flag errors but don't repair them. jsonrepair (npm) — solid library, handles many cases. AI JSONMedic actually uses it as a last-resort fallback. But it doesn't tell you what it changed, and doesn't handle all the LLM-specific cases we needed. The 14 failure modes we target Through building this, we catalogued how LLMs specifically break JSON: Markdown fences — ` json wrapping the output Trailing commas — [1, 2, 3,] (the model "runs out" of items but adds one more comma) Python literals — True , False , None instead of true , false , null Single quotes — {'key': 'value'} instead of double quotes Smart quotes — "key" (curly quotes from copy-paste) Unclosed brackets — truncated at max_tokens mid-array or mid-object Unclosed strings — "value without closing Concatenated objects — {"a":1}{"b":2} when streaming produces multiple chunks NDJSON — newline-delimited JSON that needs wrapping Python-style comments — # this is a comment inside JSON JavaScript-style comments — // inline or /* block */ Escaped backslashes — \\n instead of \n Duplicate keys — same key appearing twice (ambiguous — we warn, not silently pick) BOM / encoding issues — UTF-8 BOM at start of response What makes the repair pipeline different Each pass targets one failure mode. The order matters — strip fences first, then normalize quotes, then fix commas, then close truncated structures. Each change is tracked. The

I spent a week using video editing Skills to build a video editing Agent. It feels amazing! It can automatically edit a 30-minute video in just 10 minutes. Video editing Agent demo: automatically editing a 30-minute video in 10 minutes. I often use CapCut to edit talking-head videos, but after using it for a long time, I found several problems. Problem 1: Smart talking-head editing does not understand meaning Because it cannot understand the meaning, it sometimes fails to identify repeated sections. If I speak continuously for 20 or 30 minutes, editing the video myself becomes exhausting. Problem 2: The subtitle quality is poor The automatically generated subtitles contain many incorrect words and typos. So I used the Skills feature in Claude Code to build a video editing Agent. The fundamental difference is simple: CapCut vs. Agent: a fixed tool vs. an adaptive assistant. The key difference is: CapCut = fixed tool + manual operation Agent = adaptive system + automatic learning I am not replacing CapCut with a better algorithm. I am replacing it with a system that can continuously improve itself. But that is not even the most impressive part. The most impressive part is this: the more I use it, the better it understands me, and the faster it becomes. Three Core Designs 1. Agent Logic It only takes four steps. Video editing Agent workflow: from the video file to the final video. 2. The Skills System At first, I put every function into one large Skill. I had to add instructions to distinguish between different tasks, which was very inconvenient. Now I have separated the five core video editing tasks into five independent Skills and placed them in the .claude/skills/ directory. This makes the structure clearer and the tasks easier to select. When I enter /v , Claude Code automatically lists the five available Skills. The list of five independent Skills. I select one, and the AI runs that Skill. Simple, right? A manual task that used to take 10 minutes now only requires

If you are a fellow blogger or web developer looking to build a high-performance, developer-friendly,...

So I built a Chrome extension that does one very stupid thing: it waits a random amount of time, then screams at you like a goat if you don't dismiss the notification fast enough. Simple idea. Should've been a simple build. It was not, because Manifest V3 said no. The plan was easy, in my head Here's what I thought I needed: chrome.alarms to fire at a random interval chrome.notifications to show a "you good?" popup If the user ignores it for 60 seconds, play a goat sound Step 3 is where things fell apart. Because in Manifest V3, your background script isn't a persistent background page anymore — it's a service worker. And service workers have the audio capabilities of a rock. No Audio() object. No Web Audio API. Nothing. You can't just do new Audio('goat.mp3').play() and call it a day, because there's no DOM for it to live in. I found this out the way everyone finds out things in MV3: by writing the obvious code, watching it silently fail, and then spending 20 minutes wondering if I'd misspelled "goat." Enter: the offscreen document Chrome's answer to "service workers can't do X" for a bunch of X's (audio playback included) is the offscreen document API . It's exactly what it sounds like — a hidden HTML page that exists purely so your extension has something with a DOM, so it can do DOM things. In my case, playing an mp3 of a goat losing its mind. The flow ends up looking like this: service worker (background.js) → creates an offscreen document if one doesn't exist → sends it a message: "play the sound" offscreen.html/offscreen.js → has an <audio> tag → actually plays the sound → closes itself when done It's a little bit like hiring a stunt double because the main actor (your service worker) isn't allowed near water. The offscreen document does the wet work, then goes home. Rough version of what that looks like in code: // background.js async function playGoatSound () { if ( ! ( await chrome . offscreen . hasDocument ())) { await chrome . offscreen . createDocument

I’ve been building a small set of calculator pages for freelancers and small-business owners. The first version was pretty simple: put the formula on a page, add a few inputs, show the result. That works for a demo. It does not always work for a real user. The more I worked on it, the more I realized the hard part is not the math. The hard part is making the page feel trustworthy when someone is using it for a business decision. Here are the changes that mattered most. 1. Explain the assumption close to the input At first I wrote explanations below the calculator. Most people never read them. So now I try to put small notes near the input itself. For example, if a calculator asks for payment processing fees, the user should not have to scroll down to understand whether that means percentage fee, fixed fee, or both. This is boring UI work, but it reduces bad inputs. 2. Show intermediate numbers A single final result can feel like a black box. For business calculators, I’ve found it helps to show a few intermediate numbers: subtotal estimated fees estimated tax net amount break-even number Even if the final number is the same, users trust it more when they can see how the result was built. 3. Avoid pretending the answer is exact Small-business math has a lot of messy edges. Taxes vary. Fees vary. Local rules vary. Some people include owner salary in cost. Some do not. A calculator should not act like it knows every detail. I now prefer wording like: estimated monthly amount or rough break-even point That feels less flashy, but it is more honest. 4. Make the empty state useful A blank calculator page is not very helpful. I started adding realistic default numbers or examples where it makes sense. Not because the default is “correct”, but because it helps the user understand what kind of number belongs in each field. This is especially useful for people who are not spreadsheet-heavy. 5. Keep the result easy to copy A lot of users are not trying to stay on the page. They

Every time I needed to check whether my microphone actually worked before a call, or whether a key on a used keyboard was dead, I ended up on some sketchy "free online tester" that wanted an account, showed six ad banners, and — the worst part — happily streamed my webcam to a server I knew nothing about. So I built the thing I actually wanted: TestOnDevice — 118+ device tests that run 100% in the browser. No installs, no account, and nothing you record ever leaves your machine. Here's what I learned building it. The core constraint: the network is off-limits The single rule that shaped the whole project: no device data touches a server. No webcam frames, no audio buffers, no keystrokes, no sensor readings. That constraint turned out to be freeing rather than limiting, because modern browser APIs are genuinely powerful. Almost every "device test" is just a Web API plus a bit of rendering: What you're testing The API doing the work Microphone / speakers MediaDevices.getUserMedia , Web Audio ( AnalyserNode ) Webcam getUserMedia , <video> , MediaStreamTrack.getSettings() Keyboard keydown / keyup , KeyboardEvent.code Mouse / touch / stylus Pointer Events, PointerEvent.pressure Gamepads Gamepad API MIDI keyboards Web MIDI API Display ( dead pixels , refresh rate ) Fullscreen + requestAnimationFrame Motion / orientation DeviceOrientationEvent , DeviceMotionEvent A live mic meter, entirely local The microphone test is a good example of how little you need. Grab a stream, wire it into an AnalyserNode , and compute RMS on each frame for a level meter — no recording, no upload: const stream = await navigator . mediaDevices . getUserMedia ({ audio : true }); const ctx = new AudioContext (); const analyser = ctx . createAnalyser (); ctx . createMediaStreamSource ( stream ). connect ( analyser ); const data = new Uint8Array ( analyser . frequencyBinCount ); function tick () { analyser . getByteTimeDomainData ( data ); let sum = 0 ; for ( const v of data ) { const x = ( v - 128 )

The feature was supposed to be the easy one. NotebookLM generates flashcards. My extension reads them...

I self-host Umami for my SaaS, ParserBee . The main reason I picked it: privacy-friendly, cookie-less, first-party analytics that adblockers supposedly leave alone because the script comes from your own domain. That last assumption turned out to be wrong, and the reason is the subdomain name itself. Writing it up because the fix is small and the failure mode is silent. The problem My Umami instance ran at umami.parserbee.com , so the tracker was loaded like this: <script defer src= "https://umami.parserbee.com/script.js" data-website-id= "..." ></script> The EasyPrivacy filter list (used by uBlock Origin, Brave Shields, AdGuard, and most other blockers) contains a rule that matches the Umami tracker by hostname pattern, along the lines of: ||umami.*/script.js It doesn't target a specific company's server. It targets any host whose subdomain is literally named umami serving a file called script.js . Which is exactly how most of us name things when self-hosting: umami.mydomain.com , plausible.mydomain.com , matomo.mydomain.com . The filter lists know this convention, and they have rules for it. The result: every visitor with an adblocker never loads the script. No errors on your side, no console noise, nothing in the Umami logs. The traffic just quietly never shows up. I only caught it because signups were arriving from campaigns that Umami claimed nobody clicked; the server logs and Stripe disagreed with the analytics, and the server logs were right. The fix Serve the same Umami instance from a second hostname that no filter list matches. No proxying, no renaming files, no changes to the Umami install itself. I added u.parserbee.com as an alias for the same service: 1. DNS record. A CNAME (or A record) for u.parserbee.com pointing at the same server as the existing umami.parserbee.com . 2. Reverse proxy. Add the new hostname to the existing Umami site config so both route to the same instance. I run Umami in Docker behind Coolify, where this is just adding a second d

🚀 JavaScript Fundamentals (Week-03): Building a Strong Foundation "Before learning frameworks like React or backend technologies like Node.js, it's essential to build a strong understanding of JavaScript fundamentals. A solid foundation makes advanced concepts much easier to learn." Introduction During Week-03 of my Full Stack Development learning journey, I focused on understanding the fundamental concepts of JavaScript . Instead of only writing code, I wanted to understand how JavaScript works behind the scenes . In this week, I learned about variables, hoisting, different types of scope, execution context, call stack, closures, the this keyword, call() , apply() , bind() , module patterns, and clean coding principles like DRY and KISS . In this blog, I'll explain each concept in a simple and beginner-friendly way with examples. 📚 Topics Covered What is JavaScript? Variables ( var , let , const ) Hoisting Scope Global Scope Function Scope Block Scope Lexical Scope Scope Chain Execution Context Call Stack The this Keyword call() , apply() , and bind() Closures Module Pattern Common var vs let Bugs DRY Principle KISS Principle Conclusion 📌 What is JavaScript? JavaScript is a high-level, interpreted, single-threaded programming language used to build interactive and dynamic web applications. Initially, JavaScript was designed to run only in web browsers, but today it can also run on servers using Node.js . Some common uses of JavaScript include: Creating interactive web pages Form validation DOM manipulation API communication Web application development Backend development with Node.js Example console . log ( " Hello, JavaScript! " ); Output Hello , JavaScript ! 📦 Variables Variables are containers used to store data. JavaScript provides three ways to declare variables: var let const var Characteristics Function Scoped Can be redeclared Can be reassigned Hoisted var name = " Sai " ; var name = " Rahul " ; console . log ( name ); Output Rahul let Characteristics Block

Strings & Text Processing: Text Isn't as Simple as It Looks If someone asks you what's the simplest type of data in programming, there's a good chance you'll say strings . After all, they're just text. A person's name is a string. An email address is a string. A password is a string. Even the message you're reading right now is just a collection of strings. At first glance, there doesn't seem to be much to learn. You create a string, print it, compare it with another string, and move on. But after writing a few programs, things start getting... strange. You convert "hello" into uppercase, yet the original string somehow stays the same. An emoji that looks like a single character suddenly reports a length of 2 . Joining thousands of small strings together makes your program unexpectedly slower. And then someone introduces you to something called Regex , which looks less like code and more like an ancient spell. None of these are bugs. They're simply the result of how strings actually work behind the scenes. In this lesson, we'll uncover those hidden details one by one. Surprise #1: Why Didn't the String Change? Take a look at this code. const original = " hello " ; const shouted = original . toUpperCase (); console . log ( original ); console . log ( shouted ); What would you expect the output to be? Many beginners think the output will look like this: HELLO HELLO But that's not what happens. Instead, JavaScript prints: hello HELLO The original string remains exactly as it was. Why? Because strings are immutable . What Does "Immutable" Mean? The word immutable simply means: Once something is created, it cannot be changed. Think of a printed book. If you want every occurrence of the word hello to become HELLO , you don't magically change the ink that's already on the paper. Instead, you print a new copy with the updated text. Strings behave in a similar way. Whenever you use methods like: toUpperCase() toLowerCase() replace() concat() the original string stays untouch

Hey everyone! 👋 First of all, thank you so much for all the support, feedback, and feature suggestions since the Product Hunt launch. Every comment has been incredibly valuable, and I've already started implementing some of your ideas. Today I'm excited to share a new update to Rizzzler ! 🌙 ✨ What's New? 🎨 2 Brand-New Themes I've added two new themes , giving you even more ways to personalize your profile and match your own style. Whether you prefer something clean, vibrant, or expressive, there's now even more variety to choose from. 👀 Live Preview Panel One of the most requested improvements is finally here! You can now preview your showcase page while editing it . No more guessing how your profile will look after saving—see your changes in real time before publishing. 🎵 Audio Preview Choosing background music is now much easier. Instead of selecting tracks blindly, you can now preview audio directly before applying it to your profile. ✨ Profile Picture Decorations Want your profile to stand out even more? You can now add Profile Picture Decorations to give your avatar a unique look and make your showcase even more personal. More decoration styles will be added in future updates! ❤️ Thank You The feedback from the GitHub community and Product Hunt has been incredibly helpful. Many of these improvements came directly from community suggestions, and I'll continue building Rizzzler based on your ideas. If you have feature requests, bug reports, or suggestions, I'd love to hear them! 🔗 Try Rizzzler Website https://rizzzler.onrender.com Product Hunt https://www.producthunt.com/p/rizzzler-show-yourself-off GitHub https://github.com/DeveloperPuneet/Rizzzler-Stable Thank you for supporting Rizzzler! 🚀

The tutorial-to-production gap Every RAG tutorial follows the same arc. Load some...

If you have worked with APIs for a while, you have probably realized that designing an API is only...

That 130-file PR that shipped KeyEcho 1.0 contained a decision I never wrote about: the desktop app moved from Tauri 1 + Vue to Tauri 2 + SolidJS. The same summer, upweb.dev moved from Nuxt 4 to SolidStart, and keyecho.app (SSR, five languages, Stripe checkout) was built on SolidStart from scratch. Three separate decisions, same answer every time. Scope first. This post is about defaults for my personal projects. Near the end I'll cover two places where I still use React, one of which runs very well. The criteria changed Most of the code in my repos is AI-generated now. My job has shifted from writing code to reviewing it. The old framework checklist put most of its weight on learning curve and developer experience. Both are worth zero now: the model writes five frameworks fluently and knows the rules of hooks better than most humans do. AI crushed the price of writing code. Two costs didn't move: the runtime bytes every user downloads, and the human hours spent reviewing. Pick your stack by the new prices. Runtime cost lives in the architecture. No prompt removes it, so it decides the framework. Review bandwidth is finite, and AI throughput will grind down any consistency that is maintained by verbal agreement, so it decides the styling layer. I have seen more than one React codebase a few years into its life: two animation libraries, two carousel components, three styling systems, each introduced for a perfectly good reason on some ticket, and the sum is a mess nobody can clean up. AI did not invent that drift. It made it an order of magnitude faster. React is no longer my default: size and performance Let me discard the weak arguments first. Dependency arrays, stale closures, re-render storms: I am not going to relitigate any of it. The model knows the rules of hooks cold, eslint-plugin-react-hooks catches most slips, and React Compiler now handles memoization. The ergonomics debate no longer produces a winner. What still produces a winner is the client. react-do

PSRESTful wasn't designed in a product meeting. It was built by a developer who spent years wiring PromoStandards integrations by hand: crafting SOAP envelopes, hunting down the right namespace for each service version, and parsing megabytes of XML just to answer "how many blue mugs are in stock?" Every feature on the platform exists because that pain was real. This post walks through what "developer-first" actually means in practice: the choices in the API itself, the tools around it, and the open-source pieces you can read and reuse. All of it serves one goal: getting your supplier integration to production in days, not months . REST/JSON instead of SOAP/XML PromoStandards is a great idea: one standard instead of dozens of proprietary supplier APIs. But the transport it standardized on is SOAP/XML. In 2026, that means WSDLs, envelopes, namespaces, and hand-rolled XML parsing in ecosystems that stopped shipping good SOAP tooling a decade ago. PSRESTful puts a clean REST/JSON layer over every PromoStandards service: Product Data, Media Content, Pricing & Configuration (PPC), Inventory, Purchase Orders, Order Status, Shipment Notifications, and Invoices. Every endpoint follows a predictable, versioned URL pattern: curl -H "x-api-key: YOUR_API_KEY" \ "https://api.psrestful.com/v2.0.0/suppliers/{SUPPLIER_CODE}/inventory/{PRODUCT_ID}" You write the code once, and it works across every supplier. The payoff isn't just ergonomics: when we measured the move from XML to JSON , payloads shrank by 35–53%. And because everything is OpenAPI-based, you get an interactive API reference where every endpoint is documented and try-able. Protobuf, because JSON is sometimes still too heavy For most integrations JSON is plenty. But if you're syncing inventory and pricing across hundreds of suppliers, Product Pricing & Configuration responses can run into hundreds of kilobytes per product, and you're making thousands of calls per hour. That's why PSRESTful also serves Protocol Buffers ,