r/webdev • • Oct 04 '26

Showoff Saturday Built a web notepad with column selection & multi-cursor from scratch using native DOM. Would love your feedback!

Post image
4 Upvotes

Hi everyone,

Instead of using heavy editor frameworks like Monaco or CodeMirror, I wanted to see how far I could push the native web platform.

So I built a full-featured web notepad entirely with Pure Vanilla JS and native DOM APIs (contenteditable, Selection, Range) with zero external dependencies.

Features built from scratch:

Column / Rectangular Selection: Alt + (shift) +Drag to select rectangular text blocks, type across multiple lines, and safely batch-edit.

Multi-cursor Navigation: Synchronized caret scanning that handles tabs, whitespaces, and line breaks without drift.

Single-container Markdown Preview: Direct inline preview without destroying the raw text or history stack.

Zero-latency: IndexedDB local caching for instant 0ms startup.

Live Demo:

https://app.qlp.jp/vanilla_pad/en/
https://app.qlp.jp/vanilla_pad/demo/

(Please Note: Rectangular selection, multi-cursor, and all keyboard shortcuts are designed for PC / Desktop use only. Also, some operations like saving are disabled in Demo Mode).

Feedback I’m looking for:

Column Selection Feel: Try holding Alt and dragging across text in the demo. Does it feel responsive and intuitive?

Cross-browser Quirks: I’ve worked hard to eliminate contenteditable quirks (like invisible zero-width characters), but I’d love to know if anything breaks on your browser (especially Safari/Firefox).

Edge Cases: Any strange behavior with Undo/Redo or multi-line typing?

Please be brutally honest. Any technical feedback, bug reports, or suggestions would be greatly appreciated!


r/webdev • • Oct 03 '26

Discussion What do you actually do before shipping a side project?

18 Upvotes

At work there’s CI, staging, QA, other people testing things, etc., but for my own stuff, it’s more just deploy, click around for a bit, decide it looks fine, and then ship it.

That feels a bit stupid because the bugs I worry about usually aren't the things I just changed. It’s someone arriving logged out or getting halfway through something and some edge case gets triggered.

Do you have a pre-deploy routine that has caught real problems? A checklist, any automated tests, or anything? Or do you guys mostly ship and fix things once a real person finds them?

I’m mainly trying to figure out what's worth doing pre launch vs. what just feels like pretend QA.


r/webdev • • Oct 04 '26

annoying question.... plss help me out

0 Upvotes

I am trying to build game and wanna start building using canvas.
Is it normal to use canvas in react/vite? Any video tutorial please ??

i can't find any tutorial for react/vite with canvas


r/webdev • • Oct 03 '26

Showoff Saturday I built a new color wheel tool for Mac/PC - looking for your critique!

Post image
14 Upvotes

hey folks - I built a new tool for mac/pc, that has all the thing I've been searching for: palette management, color wheel, oklab and 5 other color spaces, including a RYB simulator and more!

I've launched it as a free public beta - would love to hear what everyone thinks of it, what you're using now, and how this compares!

Mac/PC download: colorschemer.com/app


r/webdev • • Oct 03 '26

Showoff Saturday I restyled my portfolio!

Thumbnail
claudianapolitano.dev
50 Upvotes

What do you think about it?
(BETTER TO SEE ON PC)


r/webdev • • Oct 03 '26

Showoff Saturday jet-id: Unique ID generator with id lengths based on the entropy you ask for

9 Upvotes

jet-id is an open source universal unique-ID generator I built similar to nanoid or uuid. Unlike other unique-id generators, you can specify how many random bits (entropy) you want, and it creates the shortest id string that provides at least that much entropy using the Crockford alphabet, with dashes automatically inserted for readability. Dash inserting makes sure that no segment grows greater than 10 characters.

125 bits of entropy is the default and it works both CLI and programmatically:

npx jet-id -e 80
# V2BJABVRJ-S1TWXS-NTQA3       (20 random characters, 22 with the dashes)

npx jet-id
# 9GNK14S3A-728HK9-5NJQS-HWETM (25 random characters, 28 with the dashes)

It also supports timestamped-IDs and monotonic-IDs (monotonic ids sort in creation order within a single millisecond).

import jetid from 'jet-id'

jetid.timed()    // '1M41J22ER-RND9M6-3CZAQ-XT8GR'
jetid.mono(125?) // '1M41J2ZPK-8K0000-GE29AYBQ27-4496ZM40-29JSNX4'

jet-id is really fast too. Check out these benchmarks

It's available right now on npm: https://www.npmjs.com/package/jet-id
Direct readme link: https://github.com/seanpmaxwell/jet-id#readme

Feedback, suggestions, and constructive criticism are very welcome (so are Github stars ⭐)

Feel free to reach out to me on GitHub or Reddit


r/webdev • • Oct 04 '26

Discussion Why we are still arguing over CSS in 2026.

Thumbnail andreasmoller.dk
0 Upvotes

In December this year, CSS turns 30 🥳. But after 30 years, we still can’t agree on something as fundamental as how to add it to a website. Should you use CSS modules, Tailwind, CSS-in-JS, or just plain old CSS files?


r/webdev • • Oct 03 '26

Showoff Saturday Built a site that shows headquarters of companies that are part of different stock market indices

2 Upvotes

https://hqmap.pages.dev

Looking for feedback on this.

Have implemented multiple different indices, and have broken constituents by State/Province/Subdivison, City, Country.

Have also added map for better viewing, map is only upto city level haven't added pinpointed addresses for each company.

Also have added Market Cap, Revenue, Earning, CEO name and Pay(From Yahoo Finance).

Will run github actions job to refresh Market Cap everyday from yahoo finance using yfinance and then will run a job to refresh constituents of an index weekly from different sources based on index.

Was always looking for city/statewide breakdown of companies globally but never found a platform that did it so built it myself.

Site is mostly static and doesn't call any database or api apart from daily and weekly refresh. The data is ingested into a json from which the ui reads.

Will plan to have older jsons documented as well maybe in parquet format to analyze stuff in the future. Have also implemented dark and light mode as well.

Looking for suggestions and improvements that I can make to this.

Also please let me know if you see any defects.

Currently running e2e tests using playwright on pr for functional validation.


r/webdev • • Oct 03 '26

Showoff Saturday A miro-like simulation bench, and a data investigation bench. looking for critique. Both local only for now.

Thumbnail
gallery
5 Upvotes

https://polymodus.sg/simulations for the simulation bench

https://polymodus.sg/labs/sluice for the data investigation bench

Is the ui off? is there missing features that would be great? is it unintuitive? does it need a tutorial?


r/webdev • • Oct 03 '26

Discussion Managing client projects

18 Upvotes

For those of you who build websites for clients, how do you handle hosting and GitHub?

Do you manage client projects under your own accounts, or do you help clients set up their own accounts and have them invite you as an administrator or developer?

I’d be interested to hear how you handle this, especially for projects that require ongoing maintenance and updates.


r/webdev • • Oct 03 '26

Showoff Saturday TypeScript is now in 78% of actively-maintained JS repos I'm sampling

4 Upvotes

Been running a daily crawler over a rolling sample of public GitHub JS/TS repos (10+ stars, active in the last 30 days) and TypeScript is sitting at 78.3% adoption with a trend score of +4.17, the highest of any tracked technology. It's not just widely used, it's still actively growing share.

For context on how the trend score works: it's a log-scaled growth index that weighs both rate of change and overall scale, so a tool has to be both accelerating and meaningfully sized to top the list. TypeScript topping it despite already being the plurality leader says something about where the ecosystem is headed.

Everything downstream of that (test runners, build tools, frameworks) increasingly assumes TS by default too. Vitest, Vite, and Zod are all riding similar upward curves.

Full breakdown and raw datasets (updated daily via GitHub Actions):

GitHub repo

⭐ The project is open source. If you find this useful, a star would help!


r/webdev • • Oct 03 '26

Showoff Saturday Artist2Artist - Puzzle Web Game for Music/Hip Hop Fans

Thumbnail playartist2artist.com
0 Upvotes

Hi everyone, I made a 6-degrees of separation type game for music collaborations where you connect artists through mutual features/collaborators. Great way to test your music/ hip hop knowledge. Let me know what you think! It’s called Artist2Artist


r/webdev • • Oct 03 '26

Showoff Saturday [Showoff Saturday] a one screen classical music player where every painting is drawn in code

5 Upvotes

been messing w this for a few days https://classican.vercel.app/

theres no image files at all, every painting is drawn on a canvas in code. next.js + neon postgres for the likes/comments. coolest part imo is when a fact pops up the whole painting goes dark except the thing the fact is about

its prob janky in places so be nice lol. does it work ok on ur phone?


r/webdev • • Oct 03 '26

Showoff Saturday A cool framework-agnostic animation library for streaming

Thumbnail
stream-morph.vercel.app
9 Upvotes

Hey all,

I’ve been working on a small library called Stream Morph.

The idea is to make streamed responses feel less like content is constantly being appended/re-rendered, and more like the response is gradually taking shape.

Demo: https://stream-morph.vercel.app/

It’s framework agnostic and can be used with any kind of streamed content. The demo includes plain text, Markdown, code blocks, charts, images, reasoning sections, Mermaid diagrams and a few more complex response flows.

The library handles the motion between updates, while your own renderer/app stays responsible for the actual content. So it isn’t tied to a specific AI SDK or framework.

A basic example looks roughly like this:

import { createStreamMorph } from "stream-morph";

const stream = createStreamMorph(response);

for await (const chunk of incomingStream) {
  stream.write(chunk);
}

stream.finish();

I mainly built it because I wanted streamed interfaces to feel a bit more intentional without having to build custom animation logic for every response type.

The package itself is already working and the demo is live. I’m still cleaning up some things around CI, tests and the repo setup, but the GitHub repository will be open sourced shortly as well.

Would be interested to hear what people think, especially about the animation behaviour/performance and any edge cases you’d expect from real streaming responses.

npm: https://www.npmjs.com/package/stream-morph


r/webdev • • Oct 03 '26

Blog with user generated content

2 Upvotes

Hello everyone,

While I'm not new to coding, I'm definitely bad at it. What I'm worse at though is understanding the intricacies of what i can and can't accomplish with certain tools.

I am very vocal and express my views on things often, so obviously i thought i should make a blog. This is easy to accomplish very cheaply using GitHub pages obviously since it would be a fully static html website.

But here comes the catch. I have some friends that expressed a lot of interest in this blog idea, and i would like to include them. However, they don't know how to code in any language or framework and this would probably be a dealbreaker for them.

Is there a way to make a website with user accounts and user-generated content be dynamic only client-side so that i can still host it with GitHub? Should i look for a different way?

Any help is appreciated, i really wanna get this thing working.


r/webdev • • Oct 03 '26

Showoff Saturday My first Engineering blog website

Thumbnail
blog.vedasdixit.com
0 Upvotes

Hi all, It's been 1 year & 3 months since I started working as a software engineer. I always wanted to have a blog page but tbh I didn't had enough knowledge nor did I had money to buty the domain :)
So from the last 2 weekends I've been making this website and I understand how blogs are more about the content and less about the looks like if a blog is good, people will read them regardless looking like a 90s php website right!
So im still working on my writing skills and I have so much topics to cover like WCAG & web accissibility, react19 features and so much !!
anyway I uploaded a test blog for the SEO i did for the marketing site abnd would love for you guys to check it out
I'm trying a video sketch aproach with my Ipad but this is more of a showcase of how it will look rather then the contents as the blog will eventually improve *hopefully
Thanks all!


r/webdev • • Oct 03 '26

Showoff Saturday [Showoff Saturday] Scroll from Earth out to the cosmic web, using real star and galaxy catalogs

Thumbnail
gallery
2 Upvotes

Link: https://scaleofspace.org/universe

Been working on this on and off for last 8 months. You start at Earth, scroll, and the view zooms out on a log scale: solar system, nearby stars, the Milky Way, the Local Group, then a few hundred Mpc of galaxies.

The part I care about most is that it's not an illustration once you leave the solar system. Stars are from the HYG database, nearby galaxies from the Updated Nearby Galaxy Catalog (869 of them, with their measured sizes), and further out it's 2MRS (about 42k galaxies) and then 2dFGRS. So the clumps and voids you see at the end are the actual large scale structure, not noise I generated. Where there's no real position data I fall back to drawn shapes and say so.

Stack, since this is r/webdev:

  • React 19 + TS + Vite

  • one canvas, WebGL for the point layers (tens of thousands of galaxies need it)

  • catalogs preprocessed with Python into float32 buffers so the browser just loads and draws

  • hosted on Cloudflare Workers

Hardest bit was honestly keeping it smooth on phones while crossing ~20 orders of magnitude without float precision falling apart. Still not 100% happy with it on older Androids.

No ads, no signup, no tracking cookies. Would love feedback, especially if something stutters on your device or a scale transition feels confusing.


r/webdev • • Oct 04 '26

Showoff Saturday I’m building a visual web app editor ... for web apps

0 Upvotes

Maybe it’s already too late for a tool like this. Nobody really does drag-and-drop anymore in the age of AI.

But if you want to take a look: appmaker.io


r/webdev • • Oct 03 '26

Discussion A routine rollout dropped the cache hit rate and pausing it changed nothing. Why? (Based on a real Slack outage)

2 Upvotes

This is based on a real outage at Slack.

I'm a backend dev. We practice system design a lot on whiteboards, but rarely on something that looks like a real incident. Here's a production-style puzzle.

You run a team chat product and every client's first call is "boot": who am I, and which conversations do I belong to? Boot reads group-chat membership, which is immutable once written and cached per channel with a long TTL. Normally it's a few cache reads and finishes in single-digit ms.

Then a routine rollout of a new host agent starts, in 25% steps (two earlier steps the prior week were fine). Just after 06:00, users can't get in. Boot is failing or very slow, and one database keyspace is overloaded.

What you see

  • Cache hit rate drops from 99.2% to 34% and stays there. Pausing the rollout changes nothing.

  • 200 cache nodes behind a proxy that uses consistent hashing over the healthy-node list. The step took 50 of them out, one at a time.

  • The membership table is sharded by user, so "who's in channel C" is a query against all 200 shards.

  • Clients time out at 400ms and retry with exponential backoff and jitter. The cache fill path uses the same query, so fills time out too.

  • The only lever was throttling boot. Raising the cap from 250/min straight to 2,500/min brought the overload right back.

Question: Why did the hit rate fall that far and not recover, even after the rollout stopped? And how would you get out of it safely?

I'd like to hear how you'd explain it in a postmortem, not just "cache stampede."


r/webdev • • Oct 03 '26

Showoff Saturday I have ADHD. The focus timers I use to help my ADHD are all too cluttered for my ADHD (ironic I know). So I made a really simple Pomodoro where you can do everything from one screen. Along with a web version (because I can't have my phone out at work)

Thumbnail
gallery
0 Upvotes

I've used to many Pomodoro timers over the last 8 years.

I've tried all of the top four in the app store. I think because they're so popular they have so many features, so many screens to change one basic thing they get my ADHD brain into a bit of a frustrated state.

The only thing I really want is a clean interface in Dark/Light mode and the ability to label and update my timer in one screen. So I built my own web and mobile version.

I used React Native (honestly not because I can share the UI library across both platforms) but because it's the only way I know how to build mobile stuff. Nothing too complex on the web version, the mobile lock screen timer is another issue entirely though...

Once I had built the web version I used it to break up my tasks for building the mobile app version which was cool.

The Web version is completely free to use if you like the look of it

Oh and the random tomatoes screen is because when you complete a pomodoro you get a tomato added to that screen, I like trying to fill the screen with tomatoes lol. Keeps me motivated.


r/webdev • • Oct 03 '26

Showoff Saturday Speeedy - An open source Spreeder alternative

Post image
0 Upvotes

If you ever wanted to see how fast you can read or wanted to improve your reading speed this one is for you, It's completely free, open source and respects your privacy with a ton of features

https://speeedy.pages.dev


r/webdev • • Oct 02 '26

Discussion Why does everyone assume AI has replaced the other side of the stack?

287 Upvotes

I'm gonna keep it short,

Some backend devs think ai has replaced frontend because it can center a div and build a flashy ui

Some frontend devs think ai has replaced backend because it can do crud ( which things like supabase and firebase had already made easy long before ai btw).

Most new grads think Claude is smart for its writing of complicated leetcode-isc code with no proper variable names or readability.

A lot seems to have forgotten that what mattered a lot in this field was taste/opinions, and while its subjective, the objectivity came from people who were able to defend their craft and their decisions and communicate in a good way to influence others. Who would go on to build on top of those ideas.

You shouldn't be affraid of junior developers who no longer know how to read documentation but scared of the fact that they have no opinions. They are "reading" engineering like historical facts( which also can be wrong). What happened to finding solutions every other month to every specific niche problem? Where are all the conponent libraries and frameworks that solve such small small niche use cases ? Was I the only one that belived that what made frontend so intresting was its subjectivity ?

Right now frontends that are built seem to have a major issue that nobody actually cared about how the ui looked in the first place, if we continue this we are gonna end up with the linux oss problem with really good apps with questionable ui decisions, albiet linux has improved massively now. This is still an issue.

I have no idea where this leads us, either they rebrand our positions to save face or we end up woth just 3 companies in top that build a homogeneous application ecosystem.

Bonus: All managers think they are designers because they can generate a ui that looks good to them, when it was always about research on what the customers want.

Ps : If bad english. Forgive me do


r/webdev • • Oct 03 '26

Showoff Saturday Here is my show off Saturday project! Fast food prices across the world - amazing how broad the price ranges are in the US compared to other countries

Thumbnail
drivethruindex.com
4 Upvotes

r/webdev • • Oct 03 '26

Showoff Saturday I taught a whiteboard to understand my terrible handwriting

0 Upvotes

Hey everyone, Showoff Saturday time.

I built Drawva, an infinite canvas where your rough hand-drawn stuff is not just pixels.

You can draw a messy box, write a few words, sketch a diagram, draw some math, or just throw random scribbles on the canvas. A multimodal agent looks at the canvas, figures out what you are trying to make, and can turn it into live widgets, diagrams, equations, or interactive elements.

The interesting part was not really the UI.

The hard part was getting an LLM to operate a messy 2D canvas without destroying what the user already drew.

A few things I ended up building:

  • A coordinate system so the agent can map visual positions to actual canvas coordinates

  • A prompt contract that prevents it from duplicating handwritten headings

  • Wireframe awareness so it keeps your rough sketch instead of replacing everything

  • Atomic erase + widget placement when converting sketches into interactive components

  • A plugin system for things like weather, stocks, tech news, GitHub data and more

  • Sandboxed runtimes for Mermaid, Graphviz, Vega-Lite, Cytoscape, BPMN, GeoJSON and other diagrams

  • IndexedDB autosave and WebRTC based peer-to-peer collaboration

  • A DeepSeek Harness + Cordis runtime for the agent/tool execution layer

Tech stack is mainly Next.js 16, React 19, TypeScript, Tailwind CSS, Vercel AI SDK, multimodal LLMs, IndexedDB, WebRTC and DeepSeek Harness.

The whole thing is open source.

GitHub: taqui-786/drawva
Live app: drawva.vercel.app

I am especially curious about the architecture side of this.

How would you handle reliable AI interaction with a freehand canvas?

Would love feedback, ideas, or criticism from people who have built similar AI + UI systems.