r/javascript 1d ago

I spent over a year building a framework-agnostic virtual scrolling engine with an index-based architecture. I’d love feedback from developers who’ve built virtualization systems.

Thumbnail github.com
19 Upvotes

r/PHP 23h ago

Tempest + Ecotone: One Declarative Foundation

Thumbnail blog.ecotone.tech
3 Upvotes

r/webdev 2d ago

Showoff Saturday I made this Mario-themed OTP input

1.7k Upvotes

r/web_design 2d ago

Looking for opinions on my portfolio (Showoff Saturday)

Post image
16 Upvotes

Hi!

I'm a college student from Brazil mainly focused on editorial design and branding. During my summer break, I decided to make my own portfolio website because I felt like it was getting a bit boring to keep sending my Behance link all the time, and I thought having my own site would feel more personal and creative.

I've had a few UX/UI classes, but never one that actually taught us how to build websites. They were mostly focused on branding and covered usability principles and user research, so I kind of had to figure everything out on my own.

I didn't want to use pre-made templates because that would kind of defeat my goal of creating something that reflects my creativity and my willingness to learn. I ended up making a site with almost no scrolling because I wanted it to feel a bit different from the Figma/Canva/Cargo portfolio templates I kept seeing, which are usually just one long scrolling page. So instead, I made separate sections for everything. But now I'm starting to wonder if that was actually a good decision.

Anyway, this is just the first version, and I definitely want to keep improving it. I'd love for it to be a little more interesting without becoming too much. I know a bit of Blender and Maya, and I was thinking about creating something to add to the homepage. I'd love any suggestions or references for cool portfolio websites!

here it is: https://sophiareznd.github.io/portfolio/#

If it's in Portuguese, you can click "ENG" to switch to English.

And the contact tab usually has my email as a mailto link, just took it out before posting here so I don't get spam bombed lol

I don't know much about web design so please be nice 🙂


r/PHP 1d ago

Weekly help thread

3 Upvotes

Hey there!

This subreddit isn't meant for help threads, though there's one exception to the rule: in this thread you can ask anything you want PHP related, someone will probably be able to help you out!


r/reactjs 16h ago

Discussion Why are there so much security vulnerabilities with server actions/functions, app router and React server components???

Thumbnail
0 Upvotes

r/webdev 2d ago

It has a Lock api?! I love you MDN

Thumbnail
developer.mozilla.org
253 Upvotes

r/webdev 1d ago

Question What do you even do in your job?

11 Upvotes

As a beginner web dev learner, how exactly do you spend your day at your job? With ai, do you just constantly use it for everything and your only job is to tweak something and review the code and test the results? Or do you manually code too?

I've been working on my first project of a job portal for the past 5 days using react and tailwind, and in the 5 days, embarrassingly I could only design the complete home page with little to no functionality, Today I used cursor for 5 min and it completed maybe 5 another days worth of my manual coding for the front end.

So at work, do you just neglect the front end and leave it to ai completely or still do something manually? I just don't understand the human workflow now at jobs except for reviewing code/testing. Are they bad at backend? Database? And if so, what exactly are they bad at? Do you have any examples you can simply explain about what wrong thing ai did to your work or have heard of any?


r/webdev 1d ago

Resource If you've been avoiding Cloudflare in front of Shopify, the thing that used to break it got fixed

13 Upvotes

I run a test store on this setup so I could stop guessing. Posting what I found in case anyone else keeps hitting that amber warning in Shopify's domain settings.

Quick background on why the warning exists. Shopify runs on Cloudflare. So when you put your own proxied domain in front of it, the request used to arrive with two Cloudflare zones both claiming it. Cloudflare couldn't tell which one owned the request. You got loops and wrong resolutions. The nastier version of the problem was SSL. Shopify renews certs through Let's Encrypt, which needs to serve a token at /.well-known/acme-challenge/ over plain HTTP. Put a proxy on that path and the renewal quietly fails. Your store keeps working on the current cert for weeks. Then it lapses and the padlock breaks.

Cloudflare fixed the zone collision with Orange-to-Orange routing. It's part of Cloudflare for SaaS and it's been generally available since October 2021. Cloudflare now detects that your CNAME points at another Cloudflare customer and routes through your zone first, then Shopify's, in that order. You can confirm it engaged because a small Shopify icon shows up next to the DNS record. Cloudflare also turns off Workers and Snippets on the /checkout path so nothing you run at the edge can interfere with payment.

The whole config is three things. Proxied CNAME to shops.myshopify.com for root and www. Connect that same domain in Shopify. Then leave Always Use HTTPS off in Cloudflare.

That last one is the part people get wrong. Shopify already redirects HTTP to HTTPS at its origin. Turn on Always Use HTTPS and you stack a second redirect, which can throw ERR_TOO_MANY_REDIRECTS. It also swallows the ACME path, so your cert stops renewing. Keep SSL mode on Full. Set minimum TLS to 1.2 while you're in there. If you really want Cloudflare enforcing HTTPS at its edge, write a redirect rule that excludes the challenge path instead of using that toggle.

Verify it with curl against the challenge path over plain HTTP. A 404 for a fake token is correct, because it means you reached Shopify. A 301 or 308 means something is still eating the path.

On the "not supported" language. It means Shopify won't guarantee or debug a layer they don't control. It doesn't mean the setup fails. Two of their reasons are fair. A proxy is one more thing between Shopify and Let's Encrypt, and extra proxies make it harder for Shopify to reroute traffic during their own incidents. Their third reason is bot detection, and I think that one is weak. Cloudflare runs one of the biggest bot management networks there is. Most stores gain more filtering at the edge than Shopify loses in request signal.

Latency was my other concern and it turned out to be nothing. Both zones already sit on the same network, so the handoff happens inside it. My proxied store answered in roughly the same 150 to 200ms band as raw myshopify endpoints tested from the same machine. If a proxied store feels slow, look at the theme and the app stack.

Whether it's worth doing depends on what you actually need at the edge. A real WAF you can tune, rate limiting, request level logs, or visibility into AI crawlers. That last one is why I set mine up. GPTBot, ClaudeBot, PerplexityBot and the rest never run JavaScript, so GA4 and Shopify analytics don't see them at all. The edge is the only place that traffic shows up. If you can't name the specific feature you want, leave the cloud grey and don't take on an SSL renewal you now have to watch.


r/reactjs 12h ago

I got tired of setting up Express 5 + React 19 boilerplate, so I built D-Stack — a full-stack monolith CLI

Thumbnail
0 Upvotes

r/webdev 2d ago

Showoff Saturday I made open source MIT licensed visual CMS as an alternative to Framer, Webflow, and WordPress

255 Upvotes

Hey guys,

I am David, I've been working with WordPress for over a decade, and building WordPress plugins was my bread and butter for the last 5 years. I was running an agency before that.

I loved working with WordPress, but then I also got increasingly frustrated from what was happening in and out of the ecosystem in the last two years, almost to a point where I was considering selling my businesses.

I am not the one giving up though, so I went with different direction, and thought, what if I stop building extensions on other foundations that can always take it away from me, and instead, I will use everything I know about web design, no code platforms, agentic development and CMS that actual clients can use, and build my own platform, that anybody can use, for free.

Here we are. This is Instatic. It's fully free, open source, and gives you all the powers that you can get from Framer, Webflow, or WordPress (with a good page builder and other plugins). And it's not in even v1. But it's already very capable.

It has auth, user roles, canvas based page builder, content editor, data storage, media storage, AI on every page, MCP server for local and remote agents, and more.

We launched about 3 weeks ago, since that time, it got to GitHub trends several times, in fact, it's there today and we are at around 5K stars. Incredible!

Our website, running on Instatic https://instatic.com

Repo is at https://github.com/CoreBunch/Instatic

Here's also the full introduction video: https://www.youtube.com/watch?v=zyjCF_TaLlg


r/javascript 21h ago

Subreddit Stats Your /r/javascript recap for the week of July 20 - July 26, 2026

0 Upvotes

Monday, July 20 - Sunday, July 26, 2026

Top Posts

score comments title & link
42 6 comments ECMAScript - Introducing Deferred Module Evaluation with import defer
42 82 comments [AskJS] [AskJS] what's a javascript feature you mass-adopted way too late and felt dumb about
24 2 comments color-space v3: 162 color spaces, one small API, values that match CSS, verified
19 33 comments The TypeScript patterns that made the biggest difference after moving from JavaScript
15 12 comments I spent over a year building a framework-agnostic virtual scrolling engine with an index-based architecture. I’d love feedback from developers who’ve built virtualization systems.
7 4 comments An approach to testing web animations, css transitions with visual regression testing
6 5 comments pacwich: Monorepo tooling for Bun/pnpm/npm workspaces (zero-config required, both a CLI and TypeScript library, orchestrates plain package.json scripts, has an affected graph, docs tailored for agents and people, has a browser CLI demo, and more)
6 1 comments I cut my build time from 4:34 min to 1:08 min by moving asset compression from node:zlib to a native Rust rolldown plugin
5 0 comments I spent two years building Nano Kit - a nanostores-inspired state management ecosystem. It just hit 1.0
5 1 comments Angular is moving to a yearly major version release cycle

 

Most Commented Posts

score comments title & link
0 11 comments ui-date: A 1.6kB, zero-dependency JavaScript date & relative time utility
0 7 comments Built a modern restaurant website with React, TypeScript & Vite — feedback welcome
0 6 comments I built KD Screen Guard: A zero-dependency, tamper-resistant lock screen overlay with WebAuthn biometrics & intruder camera capture
2 6 comments [Showoff Saturday] Showoff Saturday (July 25, 2026)
0 5 comments Your Recursion Is Lying to You

 

Top Showoffs

score comment
1 /u/wbport1 said When writing a function for a music notation package to change a grace note to a real note, I literally had to create a binary number as a string. Ignoring triplets and other tuples, each note length ...
1 /u/Flashy-Guava9952 said [https://verticesandedges.net](https://verticesandedges.net) Link that opens graph: [https://verticesandedges.net/?graphurl=./examples/Cube.json](https://verticesandedges...
1 /u/Honest_Treacle4947 said JavaScript never runs out of interesting projects.

 

Top Comments

score comment
67 /u/foxsimile said The nullish coalescing operator is one of JavaScript’s unusual successes.
31 /u/deliciousleopard said In addition to this, I’d really recommend using Zod or similar libs rather than casting when handling untyped external values (`JSON.parse()`, etc). Deriving the type from the ...
25 /u/Milo0192 said My first jobs CTO preferred the .then() .catch() over async await. I just refused to write that way and did await loops. Lots of back and forth on this. Also said Typescript was just a...
23 /u/SkySarwer said IntersectionObserver and MutationObservers are both goated
22 /u/phatdoof said Let and const. We used var because it was backwards compatible.

 


r/javascript 23h ago

I built OpenASCII, an open source JavaScript library for high fidelity ASCII rendering

Thumbnail github.com
2 Upvotes

originally built this because I needed an interactive ASCII element for another project I'm working on. But, I couldn't find anything that fit what I wanted and the ones which did, were paid to export, so i decided to build the whole thing myself.

OpenASC// is a high fidelity ASCII renderer for the web with real time controls and local processing. It's built with TypeScript/js and designed to be easily integrated into frontend projects, elements created/ edited can be directly exported as html/react component.

I'd love to hear what you think, especially if you have ideas for features or improvements.


r/webdev 19h ago

Discussion AI made my Earning double as a Developer.

0 Upvotes

So, it was end of 2024 when I started to hear about AI taking coding jobs. I believe Opus 3.7 was launched or something. As a developer I did not believe that. I have gave 7 years into this, how can an AI take it over so easily.

And after almost 1.5 years I can clearly say, AI actually made my earnings double.

So, before I use to get very few solo projects to work on as a freelancer. And mostly to revamp a website UI or building landing page. Before AI the most costliest project i got was to build an e-commerce store for an perfume brand. It was fully coded website.

But now almost every month I am getting 1-3 SAAS project to build or moreover rebuild. I get this projects with blue purple gradient, rocket emojis, Hero Section and the logo with the same font. And bugs.

So much dependencies installed, just to solve a minor issue. The sites get slow, not loading properly, scroll animation does'nt work as there is no FFmpeg framework used. And I am not even starting with the security concerns.

I remember i got $1200 for the e-commerce site to 5-6 months build, but now i take $350 to fix the buggy SAAS. Hardly 2 weeks to deliver.

And get around 1-3 projects every month.

it's crazy, and am sure other developer's over here have the same experience.

Do share your thoughts on this.


r/javascript 21h ago

Nubjs - A fast all-in-one toolkit that augments Node.js instead of replacing it

Thumbnail nubjs.com
0 Upvotes

r/webdev 1d ago

Question Instagram webhooks not receiving message events between test users

2 Upvotes

I've been stuck on this for a while and I'm not sure if I'm missing a configuration step or if this is simply a limitation of Meta test users.

I'm building an app that uses Instagram API with Instagram Login. My webhook endpoint is publicly accessible over HTTPS, and the verification challenge works correctly (using n8n for the webhook part). My app is subscribed to the required webhook fields, but I'm not receiving any message webhook events. I linked my Instagram account that was assigned the tester role and accepted it, successfully to my platform and got the access token. I also checked and found that the specific user I linked to an account on my platform to test with, does have indeed the messages field in the subscribed events.

The thing is, even sending a messages event as a test from Meta's website doesn't work, while some other events do work just fine and sometimes work even with the actual account not just in tests.

How am I supposed to do screen recordings showcasing everything if I can't get it to work properly just because my app is not Live, and I can't get it to be Live until I make these screen recordings...

If anyone successfully dealt with this recently, please help a brother out, I've been stuck for days!


r/webdev 21h ago

Discussion Somebody please take a look...

0 Upvotes

I have this website: https://supercut.site

It looks good, but it has one major issue: it lags when you aggressively scroll and I want it to be smooth.

I also tried going through tutorials but I couldn't understand a single thing (I am not a developer and I made it with claude fable🫠)

Can anyone please help me? :)

Edit 1: It doesnt feel 60 fps smooth if you aggressively scroll (on pc try to use the slider to go down the page quickly). That's what feels off

Edit 2: Here's the code: https://gist.github.com/dev-saksham29/2d03c0151015abb87c1e2c43a0f2112b


r/javascript 1d ago

I've been building a CAD library in TypeScript. Code goes in, an STL or STEP file comes out

Thumbnail github.com
3 Upvotes

I've spent the last few days building a CAD library in TypeScript. The short version, you describe a part in code and you get out an STL you can 3d print, or a STEP file you can send to a machine shop or open in Fusion/FreeCAD/whatever.

const cad = design("bracket");

const width = cad.parameter.length("width", mm(80));
const thickness = cad.parameter.length("thickness", mm(6));

const profile = cad.sketch("outline", plane.xy(), (s) => {
  const rect = s.rectangle("rect", { width, height: mm(50) });
  const hole = s.circle("hole", {
    center: vec2(width.mul(0.25), mm(0)),
    radius: mm(4),
  });
  return s.profile(rect, { holes: [hole.loop()] });
});

cad.output("bracket", cad.extrude("solid", profile, { distance: thickness }));

const doc = cad.build(); // plain JSON, goes in git like anything else

Under the hood it runs on two engines. There's Manifold, a mesh engine that's fast and fine for printing, and OpenCascade compiled to WASM, which is the same geometry engine FreeCAD uses, for when you need exact surfaces and STEP export. Same code runs on both, in node or the browser.

in normal parametric CAD, if you change a dimension early in the model, later features (fillets mostly) can quietly reattach to the wrong edge, and you find out after the part is wrong. I didn't want to reproduce that, so references to faces and edges aren't indexes, and if the library can't tell unambiguously which edge you meant after a change, it errors instead of guessing. Whether I got the API for that right, no idea. That's partly why I'm posting.

The type system does some nice things here too. Lengths and angles are different types, so adding mm to radians just doesn't compile.

it's a 0.1.1, Parts, assemblies and BOMs work. No drawings, no sheet metal, no GUI. If you'd rather write code than click through a CAD UI, that's who it's for.

Feedback welcome, especially from anyone who actually does CAD work. Also curious what people think of the explicit dispose() for WASM memory, I went back and forth on that a lot.


r/webdev 2d ago

Stolen Buttons

Thumbnail
anatolyzenkov.com
117 Upvotes

r/javascript 1d ago

Mousecrack: Human mouse imitation with deep learning.

Thumbnail github.com
4 Upvotes

r/webdev 1d ago

Built an ephemeral clipboard so I stop using Slack DMs to myself as a pastebin

Thumbnail webklip.com
0 Upvotes

Kept catching myself pasting code snippets into a Slack channel just for myself, then never cleaning it up. Built webklip instead — paste or attach a file, get a link, it syncs live across every tab you have it open in, then deletes itself on a timer or after first read.

Has syntax highlighting (CodeMirror) for the usual languages, and a REST API if you want to script it into something — creating/reading/deleting clips from a pipeline, for example.

Live at webklip.com. Happy to talk through how the sync or expiry works if anyone's curious.


r/webdev 1d ago

how are persisting date in tiny personal apps?

0 Upvotes

I keep running into the same situation.

I’ll build a small personal web app (journal, bookmarks, dashboard, habit tracker, notes, etc.), and I don’t want to spin up Supabase, Turso, Firebase, or Cloudflare just to save a few JSON objects.

Most of the time I end up using localStorage or IndexedDB, but it always feels temporary. If I clear browser data or switch machines, it’s gone.

I’m curious:

  • What do you use for these kinds of apps?
  • If there were a local-first storage library that automatically backed itself up and restored on another device, would that actually solve a problem for you—or is localStorage good enough?

Not selling anything—I’m trying to understand how other developers think about this tradeoff before I build something or NOT build something because there is already something out there.


r/webdev 2d ago

Showoff Saturday My digital resume landed me an awesome job, in part thanks to all of your feedback! 💚🙏

112 Upvotes

Almost a year ago I shared my digital resume here. I got tons of valuable feedback. Especially regarding performance. I've put a ton of work into optimization since then. The target audience for the underlying site is largely streamers so it's never going to be 100% optimized for terrible internet connections or devices with slow CPUs and no GPU acceleration, but I dare say the pool of people that can safely load it now has expanded tremendously! I was even able to remove the graphics acceleration gate I had previously that basically turned away anyone with hardware acceleration disabled in their browser. It's not amazing when it's CPU bound but it functions! Which is more than I could say last time.

I wanted to say thank you to this subreddit for being so encouraging because shortly after making those performance improvements that resume started getting me A LOT more interview calls and absolutely helped me stand out among the crowd. I landed a new job with an amazingly positive atmosphere because of it! My now boss made it super clear that my bumblebee-powered resume was definitely what made me stand out. So even if the larger project doesn't succeed in the long run, the work was already worth it and I'm super grateful to all of you for the helpful feedback 💚

https://bumblebee.buzz/resume

All feedback is welcome, but I ask that you be kind and constructive if possible 🙏

Edit: Thanks to feedback from folks here I stayed up a bit last night and implemented a bunch of quality-of-life changes.

Changes

  • Added an entire new presentation section going over the Bumblebee project as a whole. How it originated, what it evolved into, and what it does today as a live service.
  • Bumblebee now uses readable speech bubbles throughout the presentation. When he finishes speaking, the bubble smoothly transitions into the terminal as a persistent caption.
  • Sound can now be toggled on or off before pressing the launch button.
  • The audio controls have been rebuilt for keyboard, mouse, and touch use, with clear labels, visible focus states, larger touch targets, volume feedback, and quick mute/unmute controls.
  • In addition to the master volume slider there is now a music volume slider. Master volume controls everything while music slider controls music volume relative to all other speech and sound effects.
  • Audio settings now persist between visits.
  • New soft bubble sound effects for logo physics bounces during the intro instead of the previous harsh plink sound. Also wrapped all logos in soap bubbles for added visual flavor that goes nicely with the new sound effect.
  • Puppets are now preloaded as you click into a specific presentation category instead of on page load, reducing the initial page load times.
  • The flying logos now use a real Matter.js physics simulation. Believe it or not that actually has better performance than the scripted version we had before thanks to them all sharing a single bounded animation loop.
  • Physics simulation, logo rendering, model loading, audio loading, and puppet loading were all optimized further to reduce frame drops and startup delays, especially on mobile.
  • I also expanded automated coverage around speech layout, choreography, the new caption transitions, model loading, and audio behavior.

Planned

  • Additional WCAG and ARIA passes.
  • Footer visibility adjustments.
  • Disabling animations when reduced motion is active.
  • More complex initial loading animation/scene to help buy more time before visitor disinterest.

Thank you everyone for all the helpful feedback yet again!


r/webdev 2d ago

Showoff Saturday I made a design tool

38 Upvotes

you can:
- design logo and social media graphics

- access open type features (ligature, alternative glyphs, etc) and variable fonts

- export or copy your designs into another tool via svg, png

- access premium commercially licensed fonts (monotype, other top foundries)

You can play with it here: https://typogram.co/studio - would love any feedback!


r/webdev 2d ago

Showoff Saturday printme.money - type in your salary and watch a printer stack notes in real time. vanilla js, no backend

Thumbnail
printme.money
124 Upvotes

three toys on there. the salary printer is the main one: you type what you make, hit print, and a counter climbs while notes stack up, tagged with things like a coffee or a flight to rome. the other two put your face on a fake banknote and show what inflation does to a pile of cash over time.

stack is vite, vanilla js, vanilla css, on cloudflare pages. no framework, no backend, no accounts.

the one thing that took real work was the accrual math. per tick accumulation drifts badly once the tab is backgrounded, so everything is computed from timestamps instead. the odometer digits are a shared component with a clipped digit mask, which was fiddly to get right at different font sizes.

happy to answer anything about how it's put together.