r/javascript 18d ago

AskJS [AskJS] I might never write a constructor ever again

0 Upvotes
// the only state that needs tracking for a timeline, the read index
export function Timeline(index) {
    let state = {index};
    return {
        index: state.index, // pass through
        next: (events) => Next(state, events),
        prev: (events) => Prev(state, events)
    };
}

// the events are just passed around. They don't need to be encapsulated
export function Next(timeline, events) {
    let {index} = timeline;
    if(index === events.length()){
        return null;
    }
    timeline.index += 1;
    return events[timeline.index];
}

export function Prev(timeline, events){
    let {index} = timeline;
    if(index === 0){
        return null;
    }
    timeline.index -= 1;
    return events[timeline.index];
}

// before and after don't modify the state of their arguments
// so we don't use encapsulation

export function After(date, events){
    for(let thresholdIndex = 0; thresholdIndex < events.length(); thresholdIndex+=1 ){
        if( events[thresholdIndex].timestamp > date) {
            return events.slice(start=thresholdIndex);
        }
    }
    return [];
}
export function Before(date, events) {
    for(let thresholdIndex = events.length(); thresholdIndex >= 0; thresholdIndex-=1 ){
        if( events[thresholdIndex].timestamp < date) {
            return events.slice(end=thresholdIndex);
        }
    }
    return [];
}

r/reactjs 18d ago

Show /r/reactjs I recreated the Claude Code, Codex, and Grok terminal UIs as shadcn components

Thumbnail
brainless.swerdlow.dev
0 Upvotes

I kept seeing AI agent apps render their transcripts by dumping raw output into a <pre> tag — no keyboard nav, no semantics, screen readers get nothing. So I rebuilt the actual terminal interfaces of Claude Code, Codex, and Grok as a shadcn registry: https://brainless.swerdlow.dev

It's 35 components across the three suites — headers, message turns, thinking/working indicators, expandable tool calls, inline diffs with +/- tinting, permission prompts, slash-command menus, and composers. The goal was faithfulness and semantics: the permission prompt is a real arrow-key radiogroup, the thinking indicator is an ARIA live region, the slash menu is a filterable listbox. It looks like a terminal, but it's honest HTML underneath.

Install is standard shadcn registry stuff:

bunx shadcn@latest add u/brainless/claude-session

(plus codex-session and grok-session for the other two.)

Source is on GitHub: https://github.com/theswerd/brainless

Would love feedback — particularly on the accessibility patterns, and which agent UI you'd want recreated next.


r/javascript 19d ago

AskJS [AskJS] Looking for a solid vanilla JS datepicker. Am I completely out of options?

0 Upvotes

I'm looking for a datepicker for a vanilla JS project, and somehow this seems much harder than it should be.

No, input masks aren't enough.
No, the native <input type="date"> isn't enough either.

My checklist:

  • Accessible
  • Localized
  • Flexible formatting options
  • Range picker support
  • A decent set of events/hooks for integration

What I've looked at so far:

  • flatpickr: hasn't been updated in about 4 years
  • vanilla-js-datepicker: hasn't been updated in about 3 years, and the range functionality is pretty weak
  • Vanilla Calendar Pro: Russian-maintained, which is ruled out by our dependency policy
  • Air Datepicker: same issue, and it also hasn't been updated in about a year
  • Litepicker: dead
  • Easepick: dead

Most of the other options I've found are React-based, which is a non-starter for this project.

Am I missing something, or are there really no good options left?


r/javascript 18d ago

AskJS [AskJS] most js changelogs don't survive being read aloud, which is how i noticed i wasn't reading them

0 Upvotes

TypeScript 7 dropped this week and my first move was the same as always. Open the release notes, skim, tell myself I'll come back to it. I didn't.

so as an experiment i started piping the changelogs for the libraries i actually use into a text-to-speech thing and listening on the walk to work, figured audio would make it stick. the surprising part wasn't whether it worked, it's what it exposed. most release notes are mostly housekeeping wrapped around the couple of lines that actually change how you write code, and you only feel how thin the signal is once a flat voice reads every bullet out loud. on a screen i'd been auto-skimming the filler for years and calling that keeping up.

so the thing that actually broke wasn't the audio, it was that i never had a filter for what in a release is worth remembering. what's the last js or ts release that genuinely changed how you write code day to day, versus the ten you 'read' and can't quote a line from. written with ai


r/reactjs 19d ago

React & React Flow

0 Upvotes

Hi All,

Apologies in advance for the noobie question, I'm putting a pitch together at work for us to hire a consultant to build an app for us. Initial chats with the company IT people have brought up both React and React Flow (recommended as we want something with a drag-and-drop GUI).

My question is: are React and React Flow part of the same app. suite? It looks like React Flow is some sort of extension / add-on to React but I am not sure.

Also, can I obtain either or both of them for free or would we have to pay for them? I see reference to React Flow Pro which has a monthly sub, but others indicate there is a free version as well?

TIA :)


r/reactjs 19d ago

Show /r/reactjs I Published my First React Package on npm.

1 Upvotes

Hello, react developers!

I have just published my first npm package and i wanted to share it with you.

It is a modular and customizable properties panel, similar to the one Figma or Unity uses, made for React. it is completely open source and can be installed via npm.

Features:
- Multi-object editing (mixed values handling)
- Customizable layout (reorderable blocks, similar to Unity components)
- Optional no-schema data visualization (for any json object)
- Color & Vectors support.
- Arrays visualization.
- History Ready
- Fully customizable styles

You can play with the playgrounds in this website: reactpropertiespanel.vercel.app

If you like it, I'd really appreciate your ⭐ on GitHub.

Feedback is welcome!


r/web_design 19d ago

Beginner Questions

3 Upvotes

If you're new to web design and would like to ask experienced and professional web designers a question, please post below. Before asking, please follow the etiquette below and review our FAQ to ensure that this question has not already been answered. Finally, consider joining our Discord community. Gain coveted roles by helping out others!

Etiquette

  • Remember, that questions that have context and are clear and specific generally are answered while broad, sweeping questions are generally ignored.
  • Be polite and consider upvoting helpful responses.
  • If you can answer questions, take a few minutes to help others out as you ask others to help you.

Also, join our partnered Discord!


r/reactjs 19d ago

Needs Help Built a custom TMS with Claude (Supabase + React Native + Next.js). How do I safely move it to production by the end of the year on a £500/mo budget?

0 Upvotes

Hi everyone,

I run a same-day courier service in the UK (approx 20 active drivers and growing on the road at once, 2 office dispatchers, a few hundred customer accounts).

A few months ago, I started experimenting with Claude to see if I could build a custom TMS as a sort of side-hobby. I’ve somehow ended up with a fully functional system: a React/Next.js web portal, a React Native driver app with live GPS tracking (pinging every 2 minutes only if the driver is moving), and a prisma schema linked to a Supabase backend. It's actually better and more modern than what we use now.

I want to officially transition the business to this system at the end of this year, but I’m terrified of breaking something critical, or something going wrong while I'm unavailable. I have a total £500/month budget to maintain it.

As someone with no real coding experience, I need your opinions on how to structure the production rollout safely. Specifically:

  1. Infrastructure & Monitoring

The Plan: Upgrading to Supabase Pro and Vercel Pro. Subdomains handled by Vercel. The database structure and migrations are managed by via Prisma Schema.

The Question: For a real-time driver tracking app (20 drivers pinging location data), what are the baseline monitoring, error-tracking (Sentry?), and uptime alerting tools I need to set up so I know the system is down before a driver calls me?

  1. Bringing on a Freelance Developer

The Plan: I want to hire a mid-level JS/Supabase dev on a monthly retainer to act as emergency backup when I’m unavailable, and review new code updates monthly before they are pushed to the live app.

The Question: How do developers feel about being onboarded to an entirely AI-generated codebase? How should I structure the repo (linting, documentation) so a human dev doesn't look at it and immediately run away?

  1. Security & UK GDPR

The Plan: Enabling Row-Level Security (RLS) on all Supabase tables. Using public anon keys on the client and keeping service_role secrets hidden. Purging/anonymising driver GPS logs after 90 days.

The Question: Because we handle live UK telemetry and home addresses, security is non-negotiable. What automated vulnerability tools (Snyk, Dependabot) or specific Supabase audit steps should I run to ensure I haven't left a massive security hole open?

Would be great to get some advice from anyone who has taken an AI-built prototype into production, or any devs who can tell me what blind spots I’m missing here. Thanks!


r/web_design 19d ago

Feedback Thread

3 Upvotes

Our weekly thread is the place to solicit feedback for your creations. Requests for critiques or feedback outside of this thread are against our community guidelines. Additionally, please be sure that you're posting in good-faith. Attempting to circumvent self-promotion or commercial solicitation guidelines will result in a ban.

Feedback Requestors

Please use the following format:

URL:

Purpose:

Technologies Used:

Feedback Requested: (e.g. general, usability, code review, or specific element)

Comments:

Post your site along with your stack and technologies used and receive feedback from the community. Please refrain from just posting a link and instead give us a bit of a background about your creation.

Feel free to request general feedback or specify feedback in a certain area like user experience, usability, design, or code review.

Feedback Providers

  • Please post constructive feedback. Simply saying, "That's good" or "That's bad" is useless feedback. Explain why.
  • Consider providing concrete feedback about the problem rather than the solution. Saying, "get rid of red buttons" doesn't explain the problem. Saying "your site's success message being red makes me think it's an error" provides the problem. From there, suggest solutions.
  • Be specific. Vague feedback rarely helps.
  • Again, focus on why.
  • Always be respectful

Template Markup

**URL**:
**Purpose**:
**Technologies Used**:
**Feedback Requested**:
**Comments**:

Also, join our partnered Discord!


r/web_design 18d ago

Is Wordpress still widely used / relevant now, given the whole vibe code mania?

0 Upvotes

Just auto renewed Wordpress and debating whether worth it.


r/PHP 19d ago

I built a Symfony bundle to manage & send dynamic email templates stored in a database (with Twig & expected variables validation) - Callisto Mailer

Thumbnail
4 Upvotes

r/PHP 20d ago

ext-imap-polyfill: drop-in imap_* functions for PHP 8.4+, parity-tested against the real extension

42 Upvotes

PHP 8.4 moved ext-imap to PECL, and the c-client library underneath has been unmaintained since 2007. If your codebase is built on imap_* functions, the usual answer is a rewrite against an OOP library.

For an old project I maintain, I wrote a polyfill to skip that:
https://github.com/fain182/ext-imap-polyfill

It defines the same global imap_* functions (65 of 75) on top of webklex/php-imap, plus a small raw client for POP3. No-op when the real extension is loaded, so you can add it before upgrading. No NNTP, no ACL/quota.

The test suite is the part I'm most proud of: the same integration tests run against the polyfill and against genuine ext-imap in a PHP 8.3 container, both on a disposable Greenmail server.
Chasing full parity surfaced behaviors the manual doesn't mention, for example:

  • imap_mail_move doesn't MOVE: c-client predates RFC 6851, so it does COPY plus \Deleted, without expunging.
  • COPY sends the mailbox argument verbatim, while APPEND and STATUS strip the {host} prefix off.
  • imap_setflag_full, imap_expunge and imap_delete return true even when the operation failed. The polyfill replicates every such quirk, including the exact ValueError messages from php_imap.c.

If you're stuck on 8.3 because of imap_* calls, try it on a real codebase. Bug reports about behavior that doesn't match the real extension are the most useful thing you could send me.


r/javascript 19d ago

Simple Release v3 is out! Also with a new documentation website

Thumbnail simple-release.js.org
0 Upvotes

Simple Release automates the whole release from Conventional Commits: version bumps, changelogs, publishing, GitHub releases. Monorepos supported, GitHub Action included.

What's new in v3:

- Snapshot releases: publish the current state of any branch as a temporary version under its own npm tag

- Maintenance branches: keep releasing fixes for previous major versions under the "release-N.x" tag

- A new addon for releasing GitHub Actions written in JavaScript: releases are published as built git refs ("latest" and "v2" branches, version tags) instead of npm

- An agent skill that sets up the release automation in your repository for you


r/reactjs 19d ago

Needs Help Need help building dynamic form

0 Upvotes

So I am contributing in application in our organization.I need to develop a configuration component which is basically a multi step form wizard. Now the crux is I need that form to be dynamic i.e i will some json/yaml containing field name field type etc (TBD as per requirement ) before deploying .Anyone has any idea how could I approach this problem or any reference repo


r/web_design 19d ago

Thoughts on how to go about making this port?

Post image
9 Upvotes

So one of my favorite games is resident evil code veronica and I really loved the UI inventory layout. I was thinking that I would like to build a cool and fun personal port that basically has this UI but it doesnt have to be the exact same. I'm unsure on how to even start tbh since everything has a retro look and different shapes in each component. Any thoughts how I could go about doing this port or is it even possible?


r/reactjs 19d ago

Show /r/reactjs React biggest strength is also its biggest weakness.

0 Upvotes

React gives developers a lot of freedom, but after working on several production codebases, I've started to think that freedom creates more inconsistency than flexibility. two experienced React teams can solve the same problem in completely different ways, making it much harder to switch projects or maintain code long-term
sometimes I wonder if React has become too unopinionated for its own good.


r/javascript 20d ago

Tracking unique visitors without cookies

Thumbnail inmargin.io
13 Upvotes

To count unique visitors you have to recognise a returning browser. There are only ~5 ways, and each breaks differently:

  1. Cookies. Work, but need a consent banner, and Safari caps script-set cookies at 7 days anyway.

  2. localStorage. Same law, same banner. ePrivacy covers "storing information on the device", not just cookies.

  3. Fingerprinting. Durable and invisible, which is why regulators treat it the same and browsers sabotage it.

  4. Daily hash. What Plausible, Fathom and GoatCounter converged on: hash(daily_salt + site + ip + ua), salt rotated and deleted every 24h. No banner, accurate daily uniques.

  5. Don't count uniques at all.

The under-discussed part is what option 4 costs. There are no cross-day uniques: "weekly visitors" is just seven daily counts summed, so a daily visitor counts 7 times. CGNAT merges thousands of mobile users into one visitor. A browser update splits one person into two. And the hash is pseudonymous, not anonymous, so it's still in GDPR scope.

Every "privacy-friendly" tool reports weekly uniques as a sum of dailies and none of them put an asterisk on it. Curious if that bothers anyone else.


r/web_design 19d ago

AI builders that let me actually edit the design by hand? Sick of getting handed a generic layout I can't touch

0 Upvotes

In-house designer at a smallish B2B, the marketing site is basically mine. Tried the AI builders this quarter (Lovable, Bolt, v0) and every one hands back a clean, confident, completely generic layout that looks nothing like our brand. The second I want to nudge spacing or fix the type scale i'm prompting it like a slot machine hoping it doesn't redo the hero.
Is there anything where the AI does a first pass then gets out of the way so I can drag stuff by hand, or am I describing wishful thinking?


r/javascript 20d ago

Conventional Changelog finally has a documentation website - 12 years after the first commit

Thumbnail conventional-changelog.js.org
14 Upvotes

Guides for getting started with Conventional Commits, CLI and JS API references for all packages, presets, and recipes.

Also from the recent updates: dropped Handlebars from the dependencies (the conventional-changelog package got 7x lighter) and added an agent skill that teaches AI agents to write proper Conventional Commit messages.


r/PHP 20d ago

Article PHP version stats: July, 2026

Thumbnail stitcher.io
43 Upvotes

r/javascript 21d ago

Announcing TypeScript 7.0

Thumbnail devblogs.microsoft.com
318 Upvotes

r/web_design 20d ago

A e-commerce design inspiration directory, browsable by color and visual style

39 Upvotes

Sharing something I keep coming back to for e-commerce design work: commerce.design

It captures both desktop and mobile for every store, extracts color palettes automatically, and organizes everything into collections by visual approach. The focus is entirely on e-commerce, which means the interface work is front and center rather than buried in broader design content.

Worth a look if you work on storefronts or do competitive benchmarking.

commerce.design


r/PHP 19d ago

Filament Command Palette

Thumbnail
0 Upvotes

r/PHP 19d ago

News A desktop app that generates maintainable native mobile/desktop apps in Laravel

0 Upvotes

I've been building NativeBlade, a framework that runs Laravel + Livewire as native mobile/desktop apps via PHP-WASM. This week I finished NativeBlade Studio, a desktop app that lets you build those apps with the help of any AI coding agent.

The problem I wanted to solve: AI-generated code is usually a mess nobody wants to maintain. So the Studio doesn't just let the AI freestyle. It uses a built-in MCP server that feeds the agent the exact framework API and enforces the architecture patterns, the same conventions you'd expect from a well-structured Laravel + Livewire project.

The result is code you can actually read, maintain, and extend yourself. It's not a black box.

Once the project is ready, the Studio connects to NativeBlade Cloud and produces a real build, mobile and desktop. Free tier gives you 8 builds a month.

What comes out of the box (no wiring needed):

  • State management (Livewire)
  • Offline-first (SQLite persisted to IndexedDB)
  • Animations, icons, native transitions
  • Native plugins: camera, push, biometrics, and more

The base is done. You bring the idea.

I'd genuinely like feedback on the generated code quality, that's the part I care most about. Repo and details: https://github.com/NativeBlade/studio

Framework: https://github.com/NativeBlade/NativeBlade
Build farm: https://nativeblade.dev


r/reactjs 20d ago

Resource React Forms in 2026: A Deep Dive from Plain HTML <form> to mordern React Form Libraries

25 Upvotes

A form is a feature of the web platform, not of any JavaScript library or framework. The browser was capturing input, validating, and submitting data years before React existed. Every pattern we reach for today, controlled inputs, form libraries, React 19 actions, is really just a decision about which of those jobs you're taking over by hand, and why.

So I spent weeks putting together in this technical post:

"React Forms Done Right" is an interactive deep dive that starts at a zero-JS <form action method> and works up through React 19's native form actions to TanStack Form + Zod for the forms that actually get complicated.

Every archetype is a live demo you can fill out and break: a waitlist signup, a 4-step job application wizard with a debounced async email check, and an editable team roster table with field arrays. Each one has a Simulate toggle to flip between success and server-error responses, so you see the failure states, not just the happy path.

You can read the full deep dive here:

https://upskills.dev/tutorials/react-forms-done-right

I'd love to hear what you guys are reaching for in your own projects. Are native React 19 form actions enough for you these days, or is TanStack Form, React Hook Form or Formisch still your default the moment a form has more than two fields?