标签：#web

Jotai v2.20.0 has been released, focusing on improved performance for high-throughput scenarios. Key changes involve adjustments to internal building blocks and addressing previous performance regressions. While the API for everyday use remains unchanged, library authors should note some deprecations as the groundwork for Jotai v3 begins. By Daniel Curtis

When building a website, choosing a button design can take more time than expected. You may want something simple, soft, colorful, dark, outlined, or slightly unusual—but comparing many styles usually means repeatedly editing CSS and refreshing the page. To make that process easier, I created a browser-based button showcase. Try It Online You can use it directly from the following page: https://uni928.github.io/Uni928PublicHTMLs/index78.html There is nothing to install. Open the page, browse the available designs, and choose a button you like. Many Button Styles in One Place The page includes a wide range of button designs, including: Light and subtle buttons Solid-color buttons Dark buttons Gradient buttons Outline buttons Rounded and pill-shaped buttons Buttons with icons More experimental designs The buttons are displayed as actual interactive elements, so you can compare their hover, focus, and pressed states directly in the browser. Click a Button to Copy It The main feature of this tool is its copy workflow. Clicking a button copies a minimal HTML example for that design. This makes it easier to take only the button you need instead of copying the entire showcase page. The generated example includes the necessary HTML and CSS, so it can be pasted into a new file and tested immediately. Copy Features for Faster Comparison The site also includes additional copy-related features to make browsing a large number of designs more convenient. You can: Copy a button directly by clicking it Review the generated code Copy frequently used button types from the quick-copy panel Receive visual feedback after a successful copy Use copied examples as standalone HTML files This is especially useful when you want to compare several designs before deciding which one to use in a project. Useful for Prototypes and Small Projects This tool is intended for situations where you need a usable button quickly, such as: Creating a prototype Building a small static website Testing a landi

The Challenge Rendering a complex 153-concept-node, 1,200-edge mythic relationship topology for mobile devices without triggering main-thread layout thrashing or heavy client-side JavaScript execution. The Technical Approach Build-Time D3 Force Layout Computation : Pre-computing node coordinates and physics simulation during the Astro static build step. Zero-Runtime SVG Pre-rendering : Outputting the rendered topology as inline SVG with CSS design tokens, preserving 60 FPS scrolling on mobile. Canonical Lore Data Architecture : Structuring 153 canonical concept nodes across Tang Dynasty exorcistic texts ( Nuo rituals) and Black Myth: Zhong Kui motifs. Check out the live interactive relationship map: Black Myth Lore & Concept Map Official website: blackmyth.game

If you've been anywhere near AI job postings lately, you've seen the title: Forward-Deployed Engineer. Sometimes it's "Deployment Engineer" or "Solutions Engineer" or "Applied AI Engineer." Sarvam is hiring more than a hundred of them. Palantir built a large part of its business on them. OpenAI, Anthropic, and a long tail of AI startups are all competing for the same people. And yet, if you ask five engineers what an FDE is , you'll get five different answers. Let's fix that. The one-sentence definition A Forward-Deployed Engineer is an engineer who is deployed forward — to the customer — to take a powerful but generic product and make it solve that specific customer's real problem. The word "forward" is borrowed from the military sense: you're not back at HQ, you're out in the field where the actual work happens. For an FDE, "the field" is the customer's environment — their data, their workflows, their constraints, their stakeholders. Think of it as part engineer, part consultant, part founder-in-the-field. You build, but you build for someone specific, sitting right next to you . Why AI companies need this role so badly right now Here's the thing about modern AI products: they're incredibly powerful and incredibly generic . A foundation model or an AI platform can do a thousand things — but an enterprise customer doesn't want a thousand things. They want their one problem solved, with their data, inside their systems, respecting their compliance rules. That gap — between "powerful generic product" and "solves my specific problem" — is exactly where deals are won and lost. And it's too custom, too messy, and too high-stakes to solve with documentation alone. So AI companies send an engineer to close the gap in person. That engineer is the FDE. One strong FDE can be the difference between a seven-figure enterprise contract signing or walking away. That's why the role is: High-leverage — your work directly moves revenue Well-paid — companies pay up for people who can

As developers, we end up needing to convert or resize a file constantly — a screenshot that needs to be a PNG for docs, an asset that needs to hit exact social-preview dimensions, a PDF that needs merging before a demo. Reaching for ffmpeg , imagemagick , or a paid SaaS every time is overkill for a one-off task. Here are two free, no-signup web tools that cover most of that day-to-day friction. 1. FreelyConvert — general-purpose file conversion freelyconvert.com A browser-based converter covering documents, images, video, and audio: 500+ formats — PDF, DOC/DOCX, images (JPG/PNG/GIF/BMP/SVG/WEBP), video (MP4/AVI/MOV/MKV), audio (MP3/WAV/FLAC/AAC), spreadsheets, presentations No account/signup — upload, convert, download Batch conversion for multiple files in one pass Auto-delete after 24 hours and SSL encryption in transit Useful specifically for: PDF ↔ image conversions ( pdf-to-jpg , images-to-pdf ) Merging PDFs without touching a CLI tool Compressing video/audio for quick sharing Quick image compression when you don't want to script it 2. ImageResizer.dev — client-side image resizing/conversion imageresizer.dev This one's worth calling out for devs specifically: it runs entirely client-side via the Canvas API — nothing is uploaded to a server. That's a real difference if you're resizing anything you'd rather not send off-device, and it also means it's fast (no upload/download round trip). Features: Exact dimension presets for social platforms (Instagram, LinkedIn, X/Twitter, YouTube, TikTok, Pinterest, WhatsApp) — handy for generating OG images or social preview assets without hardcoding dimensions yourself Format conversion across JPG, PNG, WebP, AVIF, BMP, GIF, SVG Crop, flip, upscale , plus bulk resize/compress for batches Aspect-ratio locking to avoid distortion No account, no watermark Good fit for generating og:image assets, favicon prep, or resizing screenshots for a README without spinning up a script. Why bother mentioning these Neither requires an accoun

A headless content API has two kinds of callers, and it's tempting to secure them the same way. That's the mistake. There's a human logging into an admin UI to edit content, and there's a machine — a website, a build step — pulling published content through a delivery endpoint. They authenticate with different credentials, and those credentials have opposite properties. Treat them identically and you either make the machine path painfully slow or the human path dangerously weak. I built a small headless content API ( Depot ) partly to get this boundary right. Here's the reasoning. The two credentials A session proves "this human is logged in." Short-lived, rides in an httpOnly cookie, checked on management routes. A delivery token proves "this machine may read this account's published content." Long-lived, sent as a Bearer header, checked on every public read. Two auth surfaces, kept explicit: /** * - requireUser() — admin session (httpOnly JWT cookie) for the management API. * - requireToken() — a `depot_…` bearer token for the public delivery API. */ Why they get different hashing Here's the part people get wrong. Both credentials get stored as hashes — never plaintext — but not the same kind of hash , and the reason is entropy. Passwords are low-entropy. Humans pick summer2024 . An attacker who steals your DB will brute-force guesses against the stored hashes, so you want hashing to be deliberately slow — that's exactly what bcrypt's cost factor buys you: import bcrypt from " bcryptjs " ; const ROUNDS = 10 ; // deliberately slow — the point is to resist brute force export function hashPassword ( plain : string ): Promise < string > { return bcrypt . hash ( plain , ROUNDS ); } export function verifyPassword ( plain : string , hash : string ): Promise < boolean > { return bcrypt . compare ( plain , hash ); } Tokens are high-entropy. I generate them — 32 random bytes — so there's nothing to guess. A stolen hash can't be reversed by brute force because the keyspace i

Patreon is laying off 20 percent of its workers, or around 93 employees, as reported earlier by 404 Media. In a memo to employees, Patreon CEO Jack Conte writes that the company isn't making these changes "because we believe AI replaces humans," but says AI has "fundamentally transformed the tech industry, including how we work, […]

If you build anything on top of hosted AI APIs, latency isn't a detail you get to ignore — it's a feature. A sluggish time-to-first-token is the difference between an assistant that feels alive and one that feels broken. Yet when I went looking for an honest answer to a simple question — how fast is provider X from where my users actually are? — I couldn't find one. The numbers people quote tend to come from a single machine in a single region (usually somewhere in the US), from vendor-reported status pages, or from a benchmark that got run once and never refreshed. There was no independent, measured , regional view. So I built one: LLM Latency Tracker , a provider-neutral tracker of latency and uptime for AI inference APIs. How it works The core idea is boring on purpose: actually measure, don't scrape. A small Python prober — standard library only, no API key needed for the edge probes — opens real connections to each provider's endpoint and times every phase of the handshake: DNS resolution → TCP connect → TLS negotiation → time-to-first-byte (TTFB) . That's the edge view: how long the network path itself takes before a single byte comes back. Separately, where possible, it measures inference time-to-first-token (TTFT) — the thing your users actually feel, i.e. how long after you hit "send" the model starts streaming. Those two numbers answer different questions, and keeping them apart matters. Edge latency is about the network and the front door; TTFT is about the model and the queue behind it. The probes run from four regions — Europe (Germany), US Central, Asia (Tokyo), and South America (São Paulo) — because "fast" is meaningless without "from where." Results land in a SQLite time-series; a static-site generator turns that into the pages you see, hosted on Cloudflare Pages, and the whole thing is self-updating on a schedule. There's no always-on backend to rot or page me at 3am. It currently covers ~45 providers — the usual Western labs (OpenAI, Anthropic, Go

Last month I set out to build a new product, and after a full week I had shipped exactly zero features. Not because I was slow. Not because the work was hard. Because before anyone could write a single line of business logic, my team had to re-decide a dozen things our company should have settled years ago . I've been a full-stack developer for almost five years — long enough to have worn most of the hats: WordPress developer, QA, frontend, backend, solution architect, founding engineer. I've built more than twenty web applications and a handful of mobile ones. Some of them I'm genuinely proud of: systems that poll PLCs every five seconds to watch over industrial equipment, a cybersecurity dashboard that mapped attacks across the world in real time using tree-based graphs, an OTT platform that streamed live events — including FIFA — to millions of concurrent viewers. Today I work on enterprise supply-chain finance software. So when I tell you the hardest part of that new product had nothing to do with code, I know how it sounds. Let me explain. The week that disappeared The experiment was ambitious on purpose. I wanted to build the new application — eventually a microfrontend inside a larger enterprise platform — but I didn't want to write most of it myself. I wanted Claude Code to implement while I acted as the architect: review, test, challenge, refine, repeat. That part worked. The AI wasn't the bottleneck. The bottleneck was everything that came before the first feature. Should we use React? Vite? Keep Create React App because the parent app still runs it — or migrate both? How does the parent consume the child, and does local development still work? Does authentication still work? Does routing? Do we adopt TypeScript when the existing app doesn't, knowing that splits one product into two standards? The app also had to feel native to the existing product — same spacing, typography, colors, interactions — except the company had a component library, not a design s

You have a row in Postgres. You want that same row in MongoDB — not tonight in a batch job, but the instant it changes. And next month you'll want it in Redis too, and maybe POSTed to some webhook. Today that's a Kafka cluster, a Debezium connector, a sink connector, a schema registry, and a weekend. For a job that is, at its heart, one sentence: a source → one or more destinations → kept in sync. Syncle is an open-source tool that does exactly that sentence, and nothing you didn't ask for. Connect your databases, draw a bridge from a source to one or more destinations, and the moment a row changes in the source it's written to every destination you linked. Any engine to any engine — PostgreSQL · MySQL/MariaDB · SQLite · MongoDB · Redis — plus HTTP endpoints when you need them. This post is a tour of what it does and, for the curious, how it's built. The core idea: a bridge A bridge reads rows from a source and writes each one to its destinations . A destination is either: another database — the headline feature. Postgres → MongoDB, MySQL → SQLite, MongoDB → Redis. One bridge can fan out to several databases at once, and bridges can chain (A → B → C). an HTTP endpoint — POST/PUT/PATCH each row to a URL with a payload you design, for feeding a service instead of a database. The interesting part isn't that it copies data — plenty of things copy data. It's the guarantees around how . No duplicates, ever Every database write is an idempotent upsert , keyed by columns you choose. So replays, retries, and at-least-once redeliveries never double-write. Under the hood each engine does it with its own native atomic operation: Engine Upsert PostgreSQL / SQLite INSERT ... ON CONFLICT MySQL INSERT ... ON DUPLICATE KEY UPDATE MongoDB updateOne(filter, ..., { upsert: true }) Inserts, updates, and deletes all propagate — a delete routes to a keyed delete on each target. Missing table? It builds it If the destination table or collection doesn't exist, Syncle creates it from the sou

1. Introduction: What is TanStack Query? TanStack Query (formerly React Query) is a framework-agnostic state management library designed specifically to manage Server State —handling data fetching, caching, background updating, and cache invalidation. 2. Server State vs. Client State & The Memory Reality Client State: Owned and controlled entirely by the browser (e.g., isModalOpen , selected UI theme). Server State: Owned by the remote backend database (e.g., user profiles, posts, cart items). The browser only holds a read-only temporary snapshot . Where is data physically stored? Physical Location: By default, cached data lives strictly in the browser tab's JavaScript RAM (In-Memory) . Backend ("The Server"): Refers to your remote API/database (regardless of whether it runs on Kubernetes, Docker containers, serverless functions, or bare metal). Optional Persistence: You can opt to sync this RAM cache to localStorage , sessionStorage , or IndexedDB using TanStack Query Persisters. import React , { useState } from ' react ' ; import { QueryClient , QueryClientProvider , useQuery , useMutation , useQueryClient , } from ' @tanstack/react-query ' ; // 1. Initialize QueryClient (manages the RAM cache) const queryClient = new QueryClient ({ defaultOptions : { queries : { staleTime : 10000 , // Data stays fresh in RAM for 10 seconds }, }, }); // Mock API functions async function fetchPost ( postId ) { const res = await fetch ( `[https://jsonplaceholder.typicode.com/posts/$](https://jsonplaceholder.typicode.com/posts/$){postId}` ); if ( ! res . ok ) throw new Error ( ' Network error ' ); return res . json (); } async function createPost ( newPost ) { const res = await fetch ( ' [https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts) ' , { method : ' POST ' , headers : { ' Content-Type ' : ' application/json ' }, body : JSON . stringify ( newPost ), }); return res . json (); } // 2. Query Component (Fetching & Reading Data) function PostViewe

Every developer has had this moment. You need a date picker, so you start searching. You find one that's perfect... until you realize it requires React. Or Vue. Or jQuery. Or an entire date library just to select a few dates. After trying several solutions, I kept asking myself: Why is such a common UI component often more complicated than it needs to be? So I decided to build my own. Meet RollDate . The Goal I didn't want to create "another date picker." I wanted to build something that I would actually enjoy using in my own projects. The goals were simple: Infinite scroll Zero framework dependencies Simple API Modern UI Mobile-friendly scrolling TypeScript support Easy customization Good documentation Why Scrolling? Most date pickers rely on clicking tiny arrows or dropdowns. On mobile devices, this often feels awkward. I wanted something closer to native mobile pickers, where changing the month or year is just a smooth scroll. That became one of RollDate's core ideas. More Than Just Picking a Date While building the component, I realized different projects need different selection modes. So instead of maintaining separate components, RollDate supports: Single date selection Date range selection Multiple date selection The API stays the same regardless of the mode. new RollDate ( " #date " , { selectType : " range " }); Optional Time Picker Many date pickers force you to install another plugin if you need time selection. I wanted it built in. RollDate supports: 24-hour mode 12-hour AM/PM mode Configurable minute steps Enable it with one option. new RollDate ( " #date " , { enableTime : true }); Dependency-Free One of the main design goals was keeping the library independent. No React. No Vue. No jQuery. No Moment.js. No Day.js. Just plain JavaScript. That means it works almost anywhere: Vanilla JavaScript React Vue Angular Svelte Astro ...or any framework capable of using DOM components. A Better Developer Experience I care a lot about developer experience. That's

If you have ever tried building a website change detection system or visual testing tool, you’ve likely stumbled into the "False Positive Trap." You configure a cron job to monitor a target URL, take snapshots every 15 minutes, and compare them. But within hours, your inbox is flooded with alerts for: Tailwind CSS dynamic hash class mutations (e.g. class="bg-blue-500_a3f9" turning into class="bg-blue-500_b81c" after a deployment) Lazy-loaded images rendering at offset offsets Anti-bot verification scripts altering invisible DOM nodes Hydration mismatches in React/Vue single-page applications At PageWatch.tech , solving these exact edge cases was the primary focus of our engineering roadmap. In this article, I’ll share the 3 core algorithmic fixes we implemented to achieve reliable, noise-free website change monitoring. 🛑 Problem 1: Structural Hash Instability in Modern Frameworks Modern frontend frameworks like Next.js, Nuxt, and Remix insert dynamic build IDs, hydration keys, and inline CSS chunk hashes into the HTML structure. For example, a innocent paragraph tag might look like this today: <p class= "text-gray-700 css-1a2b3c" data-reactroot= "" > Product Price: $99 </p> And like this tomorrow after a routine production deployment: <p class= "text-gray-700 css-9x8y7z" data-reactroot= "" > Product Price: $99 </p> A standard raw string comparison flags this as a critical change even though zero user-facing content changed . The Solution: Attribute Normalization & CSS Class Sanitization Before computing DOM structural hashes, we run a normalize pass that strips generated hashes and framework-specific attributes: import * as htmlparser2 from " htmlparser2 " ; /** * Normalizes dynamic framework attributes and hashed CSS classes * before running DOM diff calculations. */ export function normalizeDOMNode ( node : any ): void { if ( node . attribs ) { // 1. Remove hydration and framework metadata const volatileAttrs = [ " data-reactroot " , " data-reactid " , " data-hydr

When engineers talk about visual regression or website change monitoring, pixel-level diffing algorithms (like pixelmatch or Euclidean RGB distance) are usually the default solution. However, in real-world web environments, pixel-by-pixel comparisons fundamentally fail under normal user interactions and dynamic rendering conditions: Elastic Layout Shifts: A single 20px dynamic banner inserted at the top of a page pushes every subsequent DOM element down, causing 100% of the downstream pixels to fail a pixelmatch test, even if the content itself hasn't changed. Sub-Pixel Anti-Aliasing Jitter: Operating systems (macOS vs. Linux vs. Windows) render font glyphs with subtle sub-pixel anti-aliasing variations, creating thousands of false-positive pixel deltas. Semantic vs. Cosmetic Changes: Changing a single word in a paragraph should trigger a localized alert, but a minor color gradient shift in a hero image shouldn't trigger an emergency notification. At PageWatch.tech , we solved this by combining classical Structural Similarity (SSIM) , ORB Feature Alignment , and Siamese Neural Networks (SNN) for latent-space semantic comparison. In this article, I will dive into the mathematics, neural network architectures, and TypeScript implementation of our computer vision diff pipeline. 🧮 1. Beyond Pixel Comparison: Structural Similarity Index (SSIM) Unlike raw Mean Squared Error (MSE), SSIM measures visual change based on human perception across three dimensions: Luminance , Contrast , and Structure . Mathematically, the SSIM between two image windows $x$ and $y$ is defined as: $$\text{SSIM}(x, y) = \frac{(2\mu_x\mu_y + C_1)(2\sigma_{xy} + C_2)}{(\mu_x^2 + \mu_y^2 + C_1)(\sigma_x^2 + \sigma_y^2 + C_2)}$$ Where: $\mu_x, \mu_y$ are the local pixel mean intensities. $\sigma_x^2, \sigma_y^2$ are the local variances. $\sigma_{xy}$ is the covariance between $x$ and $y$. $C_1, C_2$ are stabilization constants. TypeScript Implementation of SSIM Window Sliding Below is a snippet of how

I have been quiet lately I know - but don't worry I haven't forgotten you all and how much you like...

Letting a stranger contact a car owner without giving them the number There is a small, very common problem in Indian cities that turns out to be a surprisingly good systems design exercise. A car is parked badly. It is blocking a gate, a driveway, another car. Someone needs the owner to move it, right now. The traditional fix is a phone number written on a sticker on the windscreen. That works. It also means a stranger — any stranger, forever — has the owner's personal number. Why the sticker is worse than it looks Once a number is visible on a windscreen, a few things follow: It gets scraped. Numbers on vehicles end up in marketing lists. It cannot be revoked. Change your number and every sticker you own is now wrong. It has no context. A 2am call could be a genuine emergency or someone who saw the number three months ago. It is a safety issue for some owners in a way it is not for others. A number attached to a vehicle, at a known parking spot, at predictable times, is more information than most people realise they are publishing. So the requirement is oddly specific: a stranger must be able to reach the owner, immediately, without ever learning how to reach them again. That constraint is what makes this interesting. The naive version, and why it fails First instinct: put a QR code on the vehicle that opens a page with a "call owner" button, and put the number behind the button. This solves nothing. The number is still in the page source. Anyone who wants it can get it, and now you have added a scan step for the honest majority while stopping none of the dishonest minority. Second instinct: put a contact form behind the QR. The stranger types a message, the owner gets a notification. Better on privacy, useless in practice. The person needs the car moved in the next ninety seconds. They are not filling in a form and waiting for an email. If the fast path is not there, they go back to writing an angry note. The real requirement is synchronous contact with asynchron

Watermarking a PDF — adding semi-transparent text over pages — sounds like something only desktop software handles. But with pdf-lib and a bit of canvas math, you can build a fully browser-based watermark tool. This post walks through the implementation details, including text rendering, rotation, and multi-page support. Why client-side? Traditional watermark tools upload your file, process it on a server, and send the result back. For documents that might be confidential or contain sensitive information, this introduces an unnecessary privacy risk. A browser-based approach: Processes everything locally Keeps files on the user's device Works offline after loading Avoids server-side bandwidth costs The stack Vue 3 + Composition API pdf-lib for PDF manipulation and watermarks PDF.js ( pdfjs-dist ) for preview rendering Vite for bundling Adding a text watermark pdf-lib provides a built-in PDFDocument.embedFont() method for custom fonts and page.drawText() for placing text. Here's how to add a rotated, semi-transparent watermark across all pages: < script setup lang= "ts" > import { ref } from ' vue ' import { PDFDocument , rgb , StandardFonts } from ' pdf-lib ' const file = ref < File | null > ( null ) const watermarkText = ref ( ' DRAFT ' ) const opacity = ref ( 0.3 ) const fontSize = ref ( 72 ) const rotationDeg = ref ( - 45 ) const applying = ref ( false ) async function handleFileUpload ( selected : File ) { file . value = selected } async function applyWatermark () { if ( ! file . value ) return applying . value = true try { const arrayBuffer = await file . value . arrayBuffer () const pdfDoc = await PDFDocument . load ( arrayBuffer ) // Embed the Helvetica font — required for correct rendering const helveticaFont = await pdfDoc . embedFont ( StandardFonts . HelveticaBold ) const pages = pdfDoc . getPages () pages . forEach (( page ) => { const { width , height } = page . getSize () page . drawText ( watermarkText . value , { x : ( width - helveticaFont . widthOfT

Hi, my name is Dan, I'm a frontend engineer and open-source maintainer. I've spent the last couple of years building Nano Kit — a lightweight, modular state management ecosystem for modern web apps: signals-based stores , a router , data fetching , i18n , and SSR support , all built on the same tiny reactive core. It recently hit 1.0 , and in this post I want to give you four honest reasons to try it. 1. It's fast At the heart of Nano Kit is a push-pull reactivity system based on the algorithm from alien-signals — one of the fastest signal implementations in the JavaScript ecosystem. I didn't use alien-signals directly, though. Nano Kit needed things it doesn't provide, so I built a dedicated fork called Agera : Signal lifecycles — you can listen to signal activation and deactivation, which powers Nano Kit's mountable stores (run setup logic on first listener, clean up on last). Real tree-shaking — Agera is designed so that only the code you use ends up in your bundle; alien-signals is not well tree-shakable. The result keeps almost all of alien-signals' raw speed. Here is how @nano_kit/store compares to other popular state management libraries in a reactivity benchmark : Library Latency avg (ns) Throughput avg (ops/s) alien-signals 294.00 ± 2.24% 3,559,763 @nano_kit/store 303.55 ± 0.75% 3,365,816 svelte/store 428.58 ± 0.61% 2,479,118 rxjs 454.74 ± 0.07% 2,250,397 nanostores 1,373.2 ± 5.96% 952,399 mobx 3,474.7 ± 1.86% 306,094 valtio 5,041.3 ± 11.46% 254,109 jotai 9,454.6 ± 16.45% 157,853 effector 24,885 ± 11.78% 62,744 @reatom/core 59,430 ± 15.61% 22,741 Benchmark was run on AMD Ryzen 5 PRO 3400G with Node.js v24.14.1 That's ~3.5× faster than nanostores and an order of magnitude faster than most atomic state managers — while shipping lifecycles and mountable stores on top. 2. It's small Nano Kit exists largely because of Nano Stores . I love its philosophy: atomic stores, mountable resources, logic moved out of components, and an obsessive focus on bundle size. Nan

In 1996, Bandai sold 82 million Tamagotchis. Kids carried egg-shaped plastic keychains everywhere, frantically pressing three buttons to feed, clean, and play with a pixelated blob that would literally die if you ignored it during math class. It was the first time millions of people felt genuine emotional attachment to a piece of software. 30 years later, I rebuilt that entire experience — in the browser, with TypeScript, zero dependencies, completely open source. No app store. No download. No install. Just open a tab and adopt your pet. And in the process, I learned more about state machines, game loops, and emotional design than any computer science course ever taught me. Why Build a Virtual Pet in 2025? Three reasons: 1. Nostalgia Is a Distribution Hack People share things that trigger childhood memories. It's not rational — it's emotional. A browser-based Tamagotchi hits a nerve that no todo app or dashboard ever will. When I shared an early prototype, the response wasn't "cool tech stack." It was: "OH MY GOD I used to cry when mine died in second grade" That emotional reaction is worth more than any Product Hunt launch. 2. Game State Machines Are Criminally Underrated Every tutorial teaches state machines with traffic lights or toggle buttons. Boring. Useless. Forgettable. A virtual pet has dozens of interconnected states , real-time decay, evolution paths, conditional transitions, and edge cases that force you to actually think about state architecture. After building this, implementing complex UI flows in production apps felt trivial. 3. Not Everything Needs to Be a SaaS The indie dev world is obsessed with "revenue-generating side projects." Sometimes you should build something purely because it makes people smile. The best projects are the ones you'd use even if nobody else existed. Meet Your New Pet When you open Tamagochi, you get an egg. It hatches. A tiny pixelated creature appears. It has needs. Meet them, and it thrives. Ignore them, and... well, game

In 2023, Bitly's free plan gave you 100 links per month with full analytics. In 2025, they slashed it to 5 links per month . Five. And they started showing full-screen interstitial ads before redirecting — even on links you created years ago. In 2026, their cheapest paid plan is $10/month — just to shorten links without ads. I was paying $120/year to turn long URLs into short ones. A problem that takes 3 lines of code to solve. So I solved it myself. For free. Forever. Introducing ZipLink ZipLink is a fast, self-hostable URL shortener built with Next.js and Firebase. Deploy it once, use it forever. No monthly fees. No link limits. No ads. No "upgrade to unlock analytics." Your links. Your data. Your domain. Your rules. https://yourdomain.com/abc123 → https://some-really-long-url.com/path/to/thing?utm=whatever That's it. That's the product. Except you own it completely. The State of URL Shorteners in 2026 (It's Embarrassing) Let me show you what the "industry leaders" are charging for what is essentially a database lookup: The Comparison Table Feature Bitly Rebrandly Short.io Dub.co TinyURL Pro ZipLink Monthly cost $10-$300/mo $13-$349/mo $19-$149/mo $24-$299/mo $9.99/mo $0 Annual cost $96-$2,388/yr $156-$4,188/yr $228-$1,788/yr $288-$3,588/yr $119.88/yr $0 Free tier links 5/month 10/month 1,000 total 25/month Unlimited (no analytics) Unlimited Custom domain Paid only Free (1 domain) Required Paid only Paid only Yes (yours) Click analytics Paid only Paid only Free (basic) Paid only Paid only Full, free Link expiration Paid only Paid only Yes Yes No Yes Password protection Enterprise only Paid only Paid Paid No Yes API access Paid only Paid only Yes Yes Paid Full, free QR codes 2 free, then paid Paid Yes Paid Paid Unlimited Self-hostable No No No Yes (complex) No Yes (simple) Data ownership Their servers Their servers Their servers Their servers Their servers Your Firebase Ads/interstitials Yes (free tier) No No No Yes (free tier) Never Links disappear if you stop pay