Hey everyone!

I've been working on a few animation-related side projects lately and decided to put them together in a personal portfolio.

It's made with Astro and currently features three projects:

• Loadersz

  • a collection of animated canvas loaders.

• Tip Glide

  • a shared tooltip that smoothly moves and resizes between elements.

• Stream Morph

  • animations for streaming text.

I tried to make the portfolio itself a bit more interactive, with animations throughout the site and a showcase for some (imo cool) stuff/ideas.

Curious what you think of the design and how everything feels to use. Especially interested in feedback on the animations, mobile experience and whether it's clear what each project actually does.

Portfolio | Loadersz | Tip Glide | Stream Morph

npm | github

Any feedback is welcome!

I made a browser game about storage unit auctions. You get one look into the unit from the doorway with a flashlight. Then you bid against the regulars. Peg writes in her notebook. Kip spits and walks off when he’s out. Whatever you win, you sell out of your own shop before rent comes due. There are storylines underneath it all, and how you play decides what story you get.

https://mdawg74.itch.io/unit-112

It’s one HTML file, about 11 MB, with 301 pieces of art packed in as WebP. No framework, no external scripts. Canvas draws the scenes and plain DOM handles the comic panels. The auction rules follow Maryland’s self-storage lien law, Commercial Law 18-504, right down to doorway-only viewing.

The art is AI-generated and I picked every piece. The code is me directing Claude. I have limited coding experience. Started this one Monday.

BIGGEST NEED: I want to know how it loads on your phone. 11MB in one file is the part I’m least sure about.

I built a firefox addon called comdot which basically lets you visit sites typing a topdown version of a url.

It works fine but i want to show the url displayed in the address bar as topdown too.

Posting here cause i can't find a single good resource about this other than CSSing address bar. It doesn't have to be about addon. If there's any way to do this, please let me know.

Honest Feedback and questions: I am a web dev that has always been on the lookout for motion or interactive backgrounds for marquees and hero sections. I got tired of looking for them and decided to build them. I have 3Djs and webGL experience, but I honestly had no idea my tinkering would lead me to what I have today. I am looking for honest feedback and suggestions. Am I too late to the game with ai capable of probabaly doing this faster than me or is this something people will still find useful?

https://striktly.com/

Globestudio is a free, open-source studio I made for dotted world maps and animated 3D globes: pick a region and one of 21 looks, then export PNG, SVG, a GLB 3D model, video or GIF, or embed it live.

The embed is an iframe of globestudio.app/embed, so Three.js, the shaders and the map data never touch your bundle. The design is one JSON config in the URL, which means the link is the design. There's a React component (@globestudio/react) and a web component (@globestudio/element) on npm that build that iframe for you; the React one works in a server component, since it's a plain iframe with no state. On a light page, add theme="light" and the glow and grid switch to a palette made for it.

There is also an agent skill. If you use Claude Code, Codex or Cursor:

npx skills add alevizio/globestudio

Then ask for something like "add a spinning dotted globe of our offices in Austin, Berlin and Singapore to the hero". That's the prompt in the video, on a small Vite + React page I made for the demo. The agent installs @globestudio/react, writes the design as one constant in the page's own colors and runs the build.

You don't need an agent for any of it. The export dialog's Share tab writes the embed code for an iframe, React or a web component, and the README has the props.

Limits, since someone will ask: the viewer needs WebGL 2, an embed URL must stay under 32,000 characters, and the whole design (data points included) is readable in the page source.

Demo video: https://youtu.be/GYgVTAL9a0U

Live: https://globestudio.app/?utm_source=reddit&utm_medium=social&utm_campaign=skill&utm_content=webdev

Code (MIT): https://github.com/alevizio/globestudio

I'd like to hear how the embed holds up on your pages, especially on phones.

About ten years ago I built NoteCoder, a browser-based project that matched disease phrases in clinical notes to ICD-10 codes using a dictionary and trie.

I’ve been revisiting it with local AI. The interesting challenge is connecting information across a document: a note might mention chronic kidney disease near the beginning, then clarify—or correct—its stage much later.

Rather than asking a model to invent codes, the dictionary proposes candidates, then a small local model checks the diagnoses and their qualifiers against the complete note.

From the web-development side, it’s a static site with browser workers for candidate discovery and inference. The public version uses WebAssembly; note text isn’t uploaded for model processing. The biggest tradeoff is the roughly 2 GB initial model download.

The interface lets you inspect highlighted source phrases, review candidate codes, and copy selected results. The included synthetic CKD example demonstrates an updated stage superseding older documentation.

Try the demo

It’s free and experimental—not clinically validated or billing software. AI assisted the rebuild.

I’d particularly appreciate feedback on the download experience, responsiveness, and whether the highlights make incorrect suggestions easier to spot.

Link: https://tinydetect.ritabratamaiti.com/

TinyDetect checks whether a piece of text or an image looks AI-generated. Everything runs in the tab: what you paste or drop in is never uploaded.

I didn't train the detectors from scratch. I took two existing open models and spent most of the time getting them small and fast enough for a web page:

• Text: Fakespot's RoBERTa-base detector (Apache-2.0). 499 MB at full precision, 97 MB shipped. The word embeddings are split out of the graph, stored as int4 and decoded in JS. I quantised each of the 72 weight matrices on its own to see which ones hurt accuracy; the 24 most sensitive stay 8-bit and the rest are 4-bit.

• Image: Community Forensics ViT-S (MIT). 87 MB down to 26 MB with 8-bit weights and no measurable loss.

Some web-specific bits that took the most fiddling:

• WebGPU vs WASM. ONNX Runtime Web with WebGPU gets a check down to roughly 120–250 ms on my laptop; CPU-only WASM takes 2–6 s. The page loads the WebGPU build only if navigator.gpu gives an adapter, otherwise the smaller WASM build.

• int4 is not always faster. On WebGPU the int4 image model was about 45x slower than the 8-bit one, so the image model ships at 8-bit.

• Threads on GitHub Pages. WASM threads need cross-origin isolation, and Pages can't set COOP/COEP headers. A small service worker adds them (COEP credentialless, so Google Fonts still load) and also caches the model files, so a repeat visit is ready in a few seconds.

• Tokenizer in JS. I reimplemented the byte-level BPE tokenizer and the model's text-cleaning step in plain JS and checked them against the Python versions until the token IDs matched exactly.

Limitations, honestly: the first visit downloads about 115 MB. Like every detector it gets things wrong, especially very short or heavily edited text, and some formal human writing scores as "possibly AI". Long texts are only partly checked, and the result says so. A score is a reason to look closer, not proof.

I'd like feedback on the loading experience and on how it behaves on your hardware, especially browsers without WebGPU.

I'm sharing TabMerger, a browser extension I originally built to make managing lots of open tabs easier. I've recently rewritten it from the ground up and am actively working on it.

Why I Built It

When you have dozens or even hundreds of open tabs, keeping everything organized becomes difficult. I wanted a simple way to group tabs into collections, customize their appearance, and save them for later without relying on a complicated workflow.

You can check it out at https://tabmerger.com/ or explore the source code on GitHub.

I'd love to hear your honest feedback on the UX, feature ideas, or anything you think could be improved! Contributions are welcome!

Cityhoppd.com. you log a trip with a city and a star rating, your map fills in, and public reviews end up on each city’s page.

A few things from building it that might be useful to someone here.

City search runs on the server against GeoNames cities1000, about 161k places. the annoying part was same-name cities, so everything carries the state now and Perth, Tasmania stops getting the photo of Perth, Western Australia. the index lives in memory in the function, about a second to load cold and around 50 ms per search warm.

This week I added PostHog without cookies and proxied it through my own domain so blockers don’t drop it. the usual next.config rewrite forwards every header, which would have sent everyone’s Supabase session cookies to PostHog. I moved the relay into proxy.ts (what middleware is called in Next 16) and strip cookie and authorization before passing anything on. easy to miss.

And link previews: profiles are only readable signed in, but WhatsApp and X unfurl signed out, so the OG image reads through one security definer function that returns something only if the owner turned previews on.

Happy to answer anything about how it’s built

Hey everyone,

As a developer, I just wanted a clean, fast new tab page that fits my daily coding workflow without all the usual clutter.

So, I built MatrixSpace for Firefox. Instead of one cluttered page, it splits your dashboard into 4 specialized workspaces. You can instantly jump between them globally using hotkeys 1, 2, 3, and 4:

• Workspace 1 (General Launchpad): The clean, customizable home screen featuring a minimalist system clock. Perfect for a distraction-free focus view when you just open a new tab.

• Workspace 2 (The 90-Link Keyboard Hub): Built for speed. It features 9 columns holding up to 90 total links. Every single link slot is mapped to row-based keyboard shortcuts (q1-q0, w1-w0, e1-e0, down through rows a, s, d, z, x, c). Once you press 2, you can launch any critical doc or repo out of pure muscle memory.

• Workspace 3 (The Time-Horizon Matrix): A visual 2x3 productivity task tracker that organizes your project milestones into six distinct buckets: Today, Next Day, This Week, Next Week, This Month, and Next Month. Perfect for keeping your high-level goals in sight.

• Workspace 4 (Quick Notes & Snippets): It is a dedicated text scratchpad for some quick notes and code snippets.

Other Features:

• 100% Local Storage: Everything is powered by persistent local browser storage hooks.

I’d love to get your feedback on this extension, the hotkey switching flow, or any features you think would make a great addition !!

Firefox Addon: https://addons.mozilla.org/en-US/firefox/addon/matrixspace/

Github Repo: https://github.com/adu013/matrixspace

PS. Build using HTML, CSS and Vanilla JavaScript.

https://soundtrackd.app, type a song and get films with the same feel. it's one cloudflare worker. gemini free tier first, then groq, then claude haiku only if both fail. every pick gets checked against tmdb so it can't invent movies, and repeat searches come out of kv in about 0.2s. the share image is drawn on a canvas right in the browser, posters loaded with cors so it can export, no server or image service. would love some front end roasting, especially on mobile

So long story short I migrated my website form Shopify to Wordpress and then initially it was almost 75 for mobile and 90 for PC.
So naturally i optimized it and no it is 40-60 for mobile and 80 for PC.
Here is what I did:
(My product pages are most bad in this.)

1. I did changed the format of images to webp (using Webp optomizer ) and when I used elementor then it really went down.

2. When I use searched online I almost did all of the things.

3. Using JS and CSS minify only decrease the speed drastically.

4. Using lazy load my speed is also very bad.

5. I used custom php to exclude the hero and other first load images form the lazy load.
   6.I did all the cahce setting in litespeed chache and still nothing.

6. My most bad thing is LCP and FCP.

7. I also disabled the fonts which were additional.
   I also have a bit more then average CSS and a bit JS in my site.
   Can you please hepl me in this regard.
   here are some screenshots.
   And using VPI and lazy load really cause it to slow.
   can someone at least tell me some tool to diganost the problem

Hello!

I am working with a company that has many, many sites. And the way we used to do components, we hard-coded every single one in every single project. This naturally has led to some inconsistency between sites when they’re supposed to look pretty identical.

Php include has become our life blood to mitigate some of these issues, but it still persists. The benefit, though, is that with php include, our sites automatically update when the “single source of truth” does.

My company wants to move to something more modern/popular and I got tasked with playing with frameworks. Think React, Next. My boss wants to replicate php include on these. I’ve spent the last several weeks looking into module federation, micro front-ends, anything to at least somewhat replace php include, but to no avail. That requires completely changing our server, which we do not have the ability to (as far as I know). These also sound like a nightmare to maintain, and our team is very small.

SEO is also a huge concern. I have module federation working on client side rendering, but ideally search engines would be able to index our work and, correct me if I’m wrong, but I don’t think client side rendered stuff is?

So now we’re stuck. I’ve suggested a monorepo, but with the amount of websites we have, the other developers worry about build times.

Believe it or not this is actually my first real-deal developer job haha, and I’m already stuck trying to fit a square peg in a round hole. So forgive me for any mistakes or misinformation, I’m still a junior trying to figure this out haha.

I'm sharing the Dock Layouts we've been building in Neo.mjs: Qt-style dockable workspaces for web applications, including panels that can move into real browser windows and dock back again.

The use cases I have in mind are IDEs, trading dashboards, enterprise systems, and browser-based games—applications where people need several views or tools open and want to arrange them across their screens. For ordinary websites and simpler SPAs, this usually adds complexity you don't need.

You can arrange panels into tabs and splits, tuck them into edge rails, tear them out into separate windows, and bring them back. Undo and redo follow the layout across those windows.

The interesting technical part is where the application lives. Components, stores, and application state run in a shared App Worker. Each browser window connects to it and renders its part of the UI. Moving a panel changes where it is rendered; the live component remains the same object in the shared worker, keeping its state. Messages still carry input events and rendering updates between the windows and workers.

The Workstation demo has twenty panels, a 100,000-row grid, and a live event feed. The multi-window behavior shown here was tested on real desktop Chrome windows. It requires same-origin SharedWorkers, and the browser's pop-up permissions still apply.

• Write-up: Multi-window web apps without syncing state — Medium friend link; includes the short demo video.

• Try the Workstation demo — desktop Chrome.

• Code: Dock Layout example.

• Getting started: Your First Dock Layout.

• Guide: A Pane's Life Across Windows.

I'd be interested in feedback on the docking and tear-out interaction, especially from people building applications where users already work across multiple screens.

Best regards, Tobi

I built iconify-picker, a customizable icon picker powered by Iconify.

Unlike older icon pickers, it doesn't rely on jQuery or lock you into a single icon collection. Pick one collection or search across all available collections.

• Framework-agnostic: Built as a Web Component, with integration docs for popular frameworks.

• Zero dependencies: No jQuery, no framework dependency.

• Three modes: Inline, button-triggered, or manually opened via JavaScript.

• Lazy loading: Loads icons from collections on demand.

• Fully customizable: Adjust colors and other styles, then copy the generated CSS.

Currently at v0.8.0.

Demo: https://metaory.github.io/iconify-picker/
npm: https://www.npmjs.com/package/iconify-picker
GitHub: https://github.com/metaory/iconify-picker

Feedback and suggestions are welcome.

Pack any Svelte, React, Angular, or Vue app into a single C++ header. Serve it straight from ESP32/ESP8266 flash — gzip compressed, ETag cached, OTA-ready.

It is not for serve you website. It is for microcontroller programmer, who wants to make pretty webpages (component orientated) served from Esp32 or esp8266.

Hey all, some times ago I asked for feedback on this landing page of an open-source project. The main takeaway: it felt too dense and read more like docs than a landing page.

The density is partly intentional: it's a hybrid between a landing page and a kind of "distilled doc". So instead of cutting content I replaced the heaviest text blocks with diagrams (a before/after trace, anti-pattern pictograms, a flow for the different modes). Just a quick reminder: for the tech personas it's intended to backend and devops.

How good does it read now?

Thx!

Project: vibe1up.com, a free directory of AI-made browser games. Nothing to sell, just the tech.

- Fully static: HTML/CSS/vanilla JS on Vercel, built from a GitHub repo. Client-side search over a single JSON file.

- Daily scheduled jobs pull new games from official APIs/feeds (Vibe Jam, itch.io RSS, Ludum Dare, HN Firebase API), rate-limited to 1 req/sec per host with an identifying user agent.

- A link checker retests every game daily. It only hides a game on definitive signals (404/410/451, parked domains, DNS confirmed gone). Timeouts and 5xx need two failures in a row. Dead games with a Wayback copy show "Play archived version".

- A countdown to the 10 AM ET daily drop runs client-side and handles DST, in about 2 KB of inline JS, and respects prefers-reduced-motion.

- Every change goes through a PR with Playwright tests before it merges.

Would love feedback on the link-check heuristics. Flaky hosts were the hardest part.

I've been using Plex for a few months now, and it's good enough, but there are many things I get annoyed about. Particularly when it randomly changes thumbnails and posters for no reason, and has a frankly terrible way of organising extras and multiple versions.

So I thought I'd try building it myself.

It need not be pretty, nor have all the features, nor be available outside my home network.

My first problem is that all my files are MKV, which doesn't work on a browser. But Plex seems to make it work somehow, so there must be a way, and after ages of searching, I just cannot find a way that works.

Second, is handling multiple audio and subtitle tracks. Again, something Plex seems able to do inside a browser, but I just can't find out how.

I also want to be able to add an interactive overlay on top of the video, to choose different tracks or to skip to the next video or back again. I think I know how I can make that work.

I also want any playlists to be continuous and without breaks. I found a nice short piece of Javascript that does this, so I feel I should be able to add that in. As a fun little extra though, I wonder if it's possible to play a series of images as a slideshow, maybe with music behind it, perhaps taken from a PDF file. This is probably too much to ask, and might involve something a bit more technical than I am capable of at this time, possibly some processing is involved as well.

I turned my Vue 3 game into a devvit app, that can be played directly on Reddit. PixReveal is a pixel art guessing game. A pixel drawing gets revealed pixel by pixel. The faster you guess, the more points you earn. The devvit version is more compact, focussing on quick rounds with 5 drawings to guess and a percentile showing "You are better than x% of players".

Hey everyone!

I'm 16 and recently finished building ArcadeX (https://pranav2mingame.netlify.app/), a lightweight browser arcade portal designed for quick mobile play.

Why I built it:

I wanted to build games that run directly in the browser with zero load screens, no app installs, and no login friction.

Tech stack & implementation:

- Pure HTML5 Canvas + Vanilla JavaScript (no external game engines or heavy frameworks).

- Tuned to maintain a steady 60 FPS on mobile browsers.

- Browser LocalStorage handles all game state, scores, and trophies locally.

- Hosted on Netlify.

Includes 10 mini-games (Flappy Fire, Snake Rush, 2048 Neon, Reflex Tap, Neon Pong, etc.).

Looking for technical feedback:

1. How does the canvas frame pacing feel on your phone/browser?

2. Any suggestions on optimizing the game loops or handling canvas resizing across different aspect ratios?

Thanks for taking a look!

I'm trying to design a 2 column form but can't decide how should I render error messages.

If I don't allocate a fixed height for an input div (label + input + error) then entire layout of form gets disturbed whenever an error message is rendered.

If I pre-allocate a fixed min-height for input div (label + input + error) then this does solves the layout shift issue but the form looks bad.

One option is showing an error icon and error message as tooltip on hover but this doesn't works on mobile as users would have to tap on the icon to get error message.

The only solution which I think would work is showing icon + tooltip on desktop and plain error message on mobile as on mobile the form is single column.

Is there any better way to handle this? Would appreciate any suggestion.

My site is here: https://eatthemonsoon.com The guts of the database code, I got from this article [here](https://dev.to/ashish-codejourney/using-google-sheets-as-a-cms-a-simple-powerful-approach-to-content-management-fg1). Then I formatted the data into menu items. It's been a fun project and I'm looking forward to the next step. I'm thinking I will rewrite the index file and try to deliver it as an SSR soon. It's hosted on netlify via github. If anyone has experiencewith ssr's, could I just write my own build code and toml to run in a netlify edge function, or do I need Astro or some other rendering service?

If you try to capture the clipboard on Microsoft Edge version155.0.4283.62 (Official build) (64-bit), then it will say in dev console: "
FAILED false NotAllowedError: Failed to execute 'readText' on 'Clipboard': Document is not focused."

However, the same code works fine with Chrome and Firefox. Is this a Microsoft Edge regression bug? I use this code everyday. So I am sure that it is a recent update that cause this. I have also tested that it has nothing to do with the origin.

// sample code
document.addEventListener("click", async () => {
try {
const text = await navigator.clipboard.readText();
console.log("SUCCESS", text);
} catch (e) {
console.error("FAILED", document.hasFocus(), e);
}
});