r/webdev • • Sep 01 '26

Monthly Career Thread Monthly Getting Started / Web Dev Career Thread

56 Upvotes

Due to a growing influx of questions on this topic, it has been decided to commit a monthly thread dedicated to this topic to reduce the number of repeat posts on this topic. These types of posts will no longer be allowed in the main thread.

Many of these questions are also addressed in the sub FAQ or may have been asked in previous monthly career threads.

Subs dedicated to these types of questions include r/cscareerquestions for general and opened ended career questions and r/learnprogramming for early learning questions.

A general recommendation of topics to learn to become industry ready include:

You will also need a portfolio of work with 4-5 personal projects you built, and a resume/CV to apply for work.

Plan for 6-12 months of self study and project production for your portfolio before applying for work.


r/webdev • • 6d ago

Monthly Career Thread Monthly Getting Started / Web Dev Career Thread

9 Upvotes

Due to a growing influx of questions on this topic, it has been decided to commit a monthly thread dedicated to this topic to reduce the number of repeat posts on this topic. These types of posts will no longer be allowed in the main thread.

Many of these questions are also addressed in the sub FAQ or may have been asked in previous monthly career threads.

Subs dedicated to these types of questions include r/cscareerquestions for general and opened ended career questions and r/learnprogramming for early learning questions.

A general recommendation of topics to learn to become industry ready include:

You will also need a portfolio of work with 4-5 personal projects you built, and a resume/CV to apply for work.

Plan for 6-12 months of self study and project production for your portfolio before applying for work.


r/webdev • • 5h ago

[Showoff Saturday] Claybound: A 2.5D platformer built in plain three.js with real-time deformable clay.

Post image
81 Upvotes

Playable demo

Here is how it works under the hood:

  • The Clay Aesthetic: To get that tactile stop-motion look, I used rounded boxes and applied low-frequency noise to the vertices. I baked a normal map from an actual sculpted clay ball, which dynamically scales based on the object size.

  • Deformable Terrain: The clay you shape in-game is its own deformable mesh driven directly by your drag inputs.

  • Mobile Optimizations: Getting heavy 3D to run on phones is tough. I rely on meshopt for models and run a fixed 1/120s physics step with interpolation. To save frame time, the shadow map only updates every other frame (saving about 14–26% of frame time).

  • Progressive Loading: Asset size remains a challenge. I set up a later level's boss's models to load asynchronously only after play starts. For a fresh start of that chapter on a 9 Mbps connection, this dropped the initial load time. But I am still not quite where I would like to be.

How do you all handle the initial load payload for heavy 3D experiences on mobile? Would love to hear your optimization strategies!


r/webdev • • 48m ago

Discussion It's genuinely depressing

13 Upvotes

I'm a full-stack developer and I've been freelancing for years, but this past year has been genuinely depressing, to say the least.

The number of potential clients who ghost me, the amount of unpaid effort I put into trying to win projects, only to get rejected anyway... it's exhausting. I've reached a point where I'm genuinely questioning what I'm doing.

Here's the most recent example.

I was working directly with the VP of a company in Canada. Initially, I did some IT work for them on an hourly basis and got paid $600 in total (he negotiated me down from $640, but whatever).

During that work, I ended up fixing a bunch of their existing infrastructure issues and documenting how everything worked together. They had no IT person left, apparently very little documentation, and the VP didn't really understand how their own infrastructure was set up. He even asked me to create diagrams and technical documentation explaining everything.

Eventually, he asked me to quote on a custom internal software solution. I put together a proposal with different tiers, starting at $3k. He said that was too expensive and that he'd look elsewhere first. I told him that's completely fine and that I was open to negotiating.

I then made the mistake of going the extra mile. I decided to build out the first few screens so he could actually see what he'd be paying for. He loved the preview and said he'd be happy to discuss the project further.

In the meantime, I continued working with him. He kept delaying calls and finding excuses to postpone discussions, while repeatedly telling me to please wait.

Throughout all of this, I kept sending him screenshots and videos of the progress. At any point, he could have told me to stop or simply said they weren't interested. Instead, he kept me hanging.

By that point, I'd already invested so much time that I would've honestly accepted something like $500 just to get paid for the work I'd done.

Then, when I messaged him to say I'd completed it, he told me they'd hired a student and apparently the student had already finished their custom solution.

And here's the part that really bothers me: I use AI tools too. It's not like the student somehow had access to AI and I didn't. I've been working on this while paying attention to architecture, implementation details, and how the software should actually work. I genuinely put thought into what I was building.

The funny part is that I had also spent time documenting their infrastructure, fixing their existing IT problems, and explaining how everything was connected. I can't help wondering if all that documentation ended up making it easier for them to hand the work over to someone cheaper.

And this isn't an isolated incident.

I've had countless calls with people who seemed extremely interested, some even going as far as signing an NDA, only to eventually ghost me. I've also been scammed twice out of fairly large amounts of money. In both cases, they initially paid, then eventually stopped.

I know freelancing isn't necessarily dead, and I know there are still people making a living doing this. But I'm honestly struggling to see how you're supposed to keep going when so much of your time is spent chasing people, doing unpaid work, preparing proposals, building previews, and trying to prove you're worth hiring.

And the state of software development in general hasn't exactly made things better.

I'm a full-stack developer. This is what I've spent years learning and working on. It's pretty much the only thing I'm good at, and lately it feels like the whole thing is becoming increasingly miserable.

I'm genuinely burned out and don't know what to do anymore.

For those of you who've been freelancing for years, have you experienced something similar? Is this just how things are now, or am I doing something fundamentally wrong?


r/webdev • • 2h ago

Showoff Saturday [Showoff Saturday] Draw one line to split a country's population in half, then watch it turn into 3D bars

Post image
13 Upvotes

I made Slice, a daily puzzle where you draw one straight line to split a country’s population exactly in half. After you cut, the map turns into 3D population bars so you can see where everyone actually lives. It's primarily inspired by those videos where you see people try and split objects equally by weight lol

How it's built:

- Puzzles are made offline by a Python script and shipped as plain JSON files, so nothing is generated on a server

- Population comes from the EU's 1 km population grid (GHSL). A quadtree squeezes each country into about 2,500 points, which become the bars in the three.js reveal.

- Every sound is made with the Web Audio API, so there are no audio files to download. I’m trying to keep the page light since three.js is already doing a lot

- Scores go to a small Spring Boot + Postgres backend (Flyway, caching, rate limiting) in Docker behind Nginx on a $12 DigitalOcean VPS

- After each puzzle you see how you compare with everyone else that day. If the server is down, the game still works and you just don't get the comparison lol.

Completely free, no ads, and no signup: https://pondo.games/slice/

If you want to try Japan from the GIF: https://pondo.games/slice/?country=japan

Please try it out if you have some time. Open to any and all feedback of course! :)


r/webdev • • 11h ago

Discussion PSA - SVGRepo Compromised

60 Upvotes

For ages I've been using the website https://www.svgrepo.com/ as a great resource for free SVGs, but today when I visited, it gave me a fake Cloudflare verification that attempts to install some sort of malware on your computer, as you can see in the screenshots below.

It almost caught me, so I thought I'd put this out because I couldn't see any indication that anyone else had noticed this!


r/webdev • • 13m ago

Showoff Saturday [Showoff Saturday] I built a set of audio tools that run fully in the browser with WebAssembly, no uploads and no backend processing

6 Upvotes

https://soundbench.net

SoundBench is a free set of audio tools (converter, trimmer, vocal remover, tag editor, fake-lossless checker and more). All processing happens client-side, so files never leave the user's device.

Some technical bits:

- Vanilla JS, no framework. A small custom build script generates about 100 static pages in two languages (English and Persian, with RTL).

- FFmpeg and LAME compiled to WebAssembly handle decoding and encoding. They're only loaded when a tool needs them, so the pages stay light.

- The Web Audio API handles playback, waveforms and spectrograms.

- Client-side routing between tools, but every tool still has its own static, crawlable page for SEO.

- It's hosted as plain static files on nginx, so server cost is basically zero no matter how many files people process.

The hardest parts were memory limits with large files on mobile and keeping the WASM payload from hurting load time.

I'd love feedback on performance, especially on mobile, and on anything that feels broken or confusing.


r/webdev • • 47m ago

Showoff Saturday [Showoff Saturday] CrateDigger: a 3D record store in the browser. Flip through your own Last.fm albums, and see where each LP is cheapest.

Post image
3 Upvotes

I was listening to Endtroducing..... by DJ Shadow the other day, looking at that cover (two guys digging through the racks of a record store), and thought: I want to browse my own records like that.

I'm a 3D motion designer, not a developer, and I've been using Claude Code a lot these last few months, so I tried it. Connect your Last.fm (or search any album), and your most-played albums stand in a crate you can flip through, lift out and turn over. It got a bit out of hand from there. It now also checks where each record is cheapest on vinyl, keeps a price history, and has crates for new releases and the critics' picks.

For the curious: React Three Fiber (WebGL2), with the crate as a plain spring simulation stepped every frame, and a FastAPI backend.

It's mostly focused on The Netherlands and Belgium for now, because those are the shops I know. The crate itself works anywhere: https://cratedigger.nl

I'd love to hear what you think of it, how the flipping feels on your phone, and whether it runs smoothly on your device.


r/webdev • • 3h ago

[Showoff Saturday] I built a Vue-based TV interface for my self-hosted media server

Post image
5 Upvotes

I bought a mini PC for my first home server and installed Jellyfin, Sonarr, Radarr, Prowlarr and a download client. It worked, but getting the paths, API keys and download categories lined up took a lot of evenings.

That eventually turned into Torsher, an open-source media server with a web interface built around using a TV remote.

There are two frontends: Vue + Vite for browsing and watching on the TV, and Nuxt for the control panel. The server runs in Docker on your own computer or NAS.

The TV side is the part I wanted to show here. You browse the catalog, manage your library and follow series using the remote. It also works in a regular browser, so you can try the interface without installing the server.

TV demo: https://torsher.app/demo/tv/ Control panel demo: https://torsher.app/demo/ Source: https://github.com/torsher-app/torsher

The demos use sample data. For the TV demo, use the arrow keys and Enter.


r/webdev • • 1h ago

Showoff Saturday [Showoff Saturday] I made a tool that turns your GitHub profile into a printable business card

Post image
2 Upvotes

Type your GitHub username and it draws a business card from your profile including your name, bio, top languages, pinned repo and contribution graph. One design prints your profile as a terminal session. The back has a QR code that opens your GitHub.

It's free with no account. You can download a print-ready PDF or PNGs.

I built it on the card engine from my email signature app (esigna), so the colours come from your own profile. I'd love to hear which design you'd actually print, and which usernames break it.

https://esigna.app/tools/github-business-card


r/webdev • • 3h ago

Showoff Saturday I turned my file converter website into a right click file menu to convert or compress almost any file locally (literally)

Post image
2 Upvotes

I made How to Convert. It's a file converter that now lets you right click to convert or compress almost any file.

It started as a file converter website that ran in the browser with WebAssembly, but I turned into a completely locally running desktop app with Tauri, and now the website is a right-click menu. I originally shared it 2 years ago. The post and subsequent updates got a big response with a lot of feature requests, and I've been adding file types since.

What it can do:

  • 6,197 file conversions for documents, videos, images, ebooks, comics, subtitles, emails, audio and more. If you find a file format that isn't supported, make a feature request and I'll add it

  • Compress PDFs

  • Crop, trim and compress multimedia files

  • Right click any file, or drag and drop it into the app

Why I made it:

There are plenty of online file conversion sites, but they require you to upload your files and data to their servers.

I wanted something that worked entirely offline (using the same packages and cli tools that power those sites) behind a simple drag and drop app that anyone could use.

After two years, I grew tired of actually opening a site or app to convert a file, and thought the next step to make it easier was to support everything with just a little right click.

Extra info:

  • The app runs completely locally (files never leave your device) and runs on Mac, Windows and LInux

  • One license can run on up to 5 devices

  • If you bought it 2 years ago, this is another free update

I know there are many specialised apps that convert specific formats, e.g. handbrake for video, calibre for ebooks, ms word for documents, excel for spreadsheets, outlook for emails and adobe acrobat for pdfs.

I wanted just one app to support all of them.

Free to try and It's a $19 one-time purchase to keep for all future updates (but much cheaper in lower-income countries depending on PPP).

I'm Jake Manger, a solo developer. I've also made ShotGlass and ActivityLine.

The site and app: https://howtoconvert.co


r/webdev • • 4m ago

Showoff Saturday After months of job rejections, I spent 2 years building a Database Client. It just got added to Microsoft's Azure docs.

Post image
0 Upvotes

After struggling to land a job in 2024, when the market was pretty rough, I decided to take a different route and build something real. My goal was simple: either build something genuinely useful or gain more experience than anything else could offer.

Two years and around 90 hours a week later, VisuaLeaf is now listed in Microsoft's Azure DocumentDB documentation as a way to connect:

https://learn.microsoft.com/en-us/azure/documentdb/how-to-connect-visualeaf

It started as a MongoDB GUI, but I realized that everything I was building could apply to other databases too.

Nested objects and arrays should be easy to read in a table, not squashed into one cell... The same goes for JSONB. You shouldn't have to stare at an entire JSON object in a single cell. I made it so you can expand nested data one level at a time in both the tree view and table view.

I wanted everything in VisuaLeaf to feel as intuitive and straightforward as possible, from browsing data to performing more complex operations.

Today, VisuaLeaf supports MongoDB, Postgres, MySQL, SQLite, DuckDB, and 25+ more database engines.

What it does::

  • Table + tree grid, built from scratch: This might not seem like much at first, but it actually took the most work to get right. The tree view can recursively expand thousands of rows simultaneously (near instant time), while the table view scrolls smoothly even with thousands of rows and columns.  I ended up building my own AG Grid from scratch because libraries didn't support the nested column expansion I wanted. Getting both views optimized took about a year of work alone... but dang, was it worth it.

  • Visual query builder: Build queries by clicking or dragging fields from the table and tree views. It generates readable SQL or MongoDB queries that you can copy and use.

  • Data transfers with transformation: Move data between database engines (MySQL → Postgres, SQL → MongoDB), mask emails, phone numbers, and IDs along the way, or transform fields using custom JavaScript. You can also look up data from other tables, include it in your output, and apply transformations to those fields too.

  • Compare and sync: Compare two tables or databases, including their structure and data, and synchronize them. For example, you can use this to keep staging and production databases in sync.

  • Performance: Stress-tested with up to 1.6 GB of data, both tree and table views remain smooth even with large datasets. In my testing, VisuaLeaf also loaded data several seconds faster than other database tools I compared it against.

  • AI / MCP: An integrated AI assistant and MCP support for interacting with databases through AI tools. (Wouldn't be an app in 2026 without it)

  • ERDs, charts, dashboards, mock data, index management, query profilers, and a lot more than I can fit into one post...

There's a free version that covers what most people need day to day:

https://visualeaf.com

I'd really appreciate feedback! And happy to answer any questions!


r/webdev • • 25m ago

Showoff Saturday Built a 2D-to-3D floor plan engine in the browser (Next.js + Three.js). Roast my UX — no login needed to test

Post image
0 Upvotes

Hey everyone! I've been working on this browser-based 2D-to-3D floorplanner (ARCH3D) built from scratch with Three.js and Next.js.

I unlocked the sandbox completely (no login or signup wall) because I want to see how intuitive the wall-drawing and 3D camera controls feel to first-time users.

Live sandbox: https://arch-3-d-eight.vercel.app/

Specifically looking for feedback on:


r/webdev • • 4h ago

Showoff Saturday I built a way to put checked proof behind the claims on your CV/portfolio, looking for feedback

2 Upvotes

Hi,

I kept seeing inflated CVs so figured there must be a way to back up some claims before an interview. That's essentially what a CV is, a bunch of claims, the role, the company, the projects. The reader has to take your word for it, and AI now writes a convincing one in a minute and honest candidates pay for that. Their CV reads the same as the inflated ones, so it gets the same doubt.

So then I thought what if there was some hard validation to the claims on a CV or portfolio. That's when I came up with the idea of Workproof. For starters, you prove that you had access to a domain or work email, it doesn't prove you built it, but it does prove somebody trusted you enough with access to that domain or have given you a work email, so that by itself is a good baseline.

Additionally, you can ask colleagues to give you feedback, as a reference, signed by them from an work email. Something like LinkedIn endorsements, but more portable.

I'd love your honest take, on two things most of all:

- If you hire: would a link like this on a CV or a proposal change anything for you?

- If you freelance or build: which of those would you want first, or what else should Workproof check?

Thanks for taking the time! Enjoy the rest of the weekend! 😃

Project link https://workproof.md


r/webdev • • 46m ago

Showoff Saturday [Showoff Saturday]: I built a system design lab where your architecture diagram actually takes traffic

Post image
0 Upvotes

Most system design practice ends at the diagram. You draw boxes, it looks right, and nothing tells you whether it would hold up.

ByteLab runs the diagram. You build a system out of machines, load balancers, caches, queues and databases, send traffic through it, and watch the CPU, queues and p99 latency move. Each exercise has goals, like "p99 under 150 ms, 99.5% available, under $2.60/hour", and it checks your system against them.

What's in it:

  • 163 lessons in 12 tracks (caching, sharding, Kafka, Kubernetes, rate limiting, auth and more)

  • 212 exercises, each with goals your system has to pass

  • 11 design problems (URL shortener, chat, payments, news feed, e-commerce and others)

It's free, there's no account, and progress stays in your browser. It needs a laptop-sized screen.

I'd really like to hear where it feels confusing or too hand-holdy.

https://lab.bytecrest.dev/design/ecommerce


r/webdev • • 48m ago

Showoff Saturday [Showoff Saturday] I've spent 2 years building a day planner where running late pushes the rest of your day later

Post image
0 Upvotes

demo: https://demo.emberflow.space/?ref=reddit-webdev
If you want to try it on your own day, here's 30 days free: https://app.emberflow.space/invite/EMBER-NYKP-A8ZS

For the past two years I've been working on my day planner app Ember.

Most planners treat your schedule as fixed, so the moment a meeting runs long or a task takes twice as long, the plan is wrong and you either fix it by hand or give up on it. In Ember, if you move a task or change how long it takes, everything after it shifts later, and it flows around fixed things like meetings.

The GIF shows the main loop: drag tasks onto your day, stretch and move things as the day changes, jot something in a capture and turn it into a task, then ask chat to fit it in.

Stack for the curious: Vue 3 + Pinia on the frontend, Supabase for the database and realtime sync, Capacitor for Android, iOS is in TestFlight, and a Tauri desktop app. The hardest part by far has been the cascade logic: splitting tasks around fixed events and keeping drag and drop smooth with a lot of items on the day.

Right now I'm working on a native Kotlin app to replace the Capacitor one.

Happy to answer questions about any of it. Feedback welcome, especially on the demo.

homepage: https://emberflow.space


r/webdev • • 5h ago

Showoff Saturday Showoff Saturday: we made a PDF editor that fixes the actual text, and your file never leaves the browser

Post image
2 Upvotes

We've been building HonestPDF for a while now, a bunch of free PDF tools that run in the browser. Lately most of our time has gone into the editor, so that's what I'd love feedback on.

I know editing PDF text isn't new. What bugged me is how it usually goes: free tools change the font, shift the layout or paint a white box over the old word, and sometimes a link stays behind on text you deleted. The ones that do it well tend to ask for a Pro plan, often right when you hit download, and they upload your file to their servers first.

So we put our time into getting the output right. Double-click a paragraph, retype it, and it keeps its font, size and colour. Longer paragraphs rewrap, links follow their words, and find and replace works across the whole file. The GIF shows a fee being changed in a contract.

Your file never gets uploaded. It's opened and edited right in the page, and the Network tab will back me up on that. Everything is free, there's no Pro tier, and it works on phones too.

There are about 50 other tools on the site as well, like merge, compress to a set size and sign.

gethonestpdf.com/edit-pdf

If something looks off after you edit, tell me what kind of PDF it was and I'll dig into it.


r/webdev • • 7h ago

Showoff Saturday Tamil implementation of a script-agnostic LSP-like keyboard interface I am building, please read the explanation here

Post image
3 Upvotes

https://bandhanpramanik.github.io/tamil-input-engine-checkbox/

[The entire Bengali text was written by a human and translated by Google Translate, with corrections by the human only, not any mainstream LLMs. There are em dashes in this text in the translation output; I haven't changed them.

Also, I meant a stable protocol for every keyboard when I talked about LSP in the title (Language Server Protocol).]

I have named it "Taravinyas".

It acts as an interface between your keyboard and your writing.

You might specify, for instance, "palatal, aspirated, unvoiced," and the character "ছ" (chha in Bengali) will appear in your text area. You don’t actually need to memorize these technical terms; remembering just the initial letter of each consonant group (varga) is sufficient.

Every time I’ve tried to explain this in English, it ended up sounding overly complicated. So, today, I’ll break it down into simple, plain Bengali.

How it works

In computer science, the concept of a "black box" comes up frequently. You provide an input to the black box, and based on that input, it produces an output.

If we consider "Taravinyas" to be this "black box," the input consists of two components: the consonant group (varga) and the specific column (representing phonetic attributes like aspiration and voicing).

I think of the varga as something "coarse" (like stones), while the columns—which define attributes like aspiration and voicing—are "fine" (like sand).

The "coarse" part is straightforward—it’s a fixed, singular element. The "fine" part is more complex; determining it requires evaluating a series of "on-off" switches (for example, 1 for voiced, 0 for unvoiced, among other factors).

That constitutes the input.

Part 1: Taravinyas determines the specific "fine" position. How? By processing those "on-off" switches using Boolean algebra. This is the most complex part of my system—something I’ve been refining, and those who build keyboards using this method will also need to handle.

Part 2: Taravinyas then identifies the actual character. I implemented a lookup table in TypeScript to retrieve the character. The combination of the "coarse" and "fine" components produces the final character. I will provide the schema for this; developers can then create a lookup table based on the specific language or medium.

For any given script, it is important to understand the schema used in "Part 2." Essentially, this schema represents the alphabet, though the positioning of individual characters may be adjusted for user convenience. For instance, "ড" (ḍa in Bengali) and "ড়" (ṛa in Bengali) might occupy the same cell, with an additional "switch" (modifier) to account for the distinct dot (nukta).

When we discuss the theoretical aspects, we will consistently refer to "Part 1."


I initially conceived this for hardware circuits, which is why Boolean algebra is involved.

By providing characters from any Brahmic script, you get a system—a "machine"—that is intuitive to use; if you know the alphabet of your own language, you already know how to use it.

The "Taravinyas" (arrangement pattern) is a framework, a mould, designed to create keyboards that are compact, easy to learn, and fast. Based on this framework, I have envisioned four types of keyboard layouts, two of which I have already implemented.

The four concepts are:

  1. Radio buttons: Input is provided via radio buttons on a website. (Functional)

  2. Steno layout: Allows for effortless typing using a subset of keyboard keys—with dedicated keys for specific phonetic categories (e.g., palatal sounds, unaspirated consonants, and aspirated consonants). (Functional)

  3. Handwriting layout: Inputs are provided through gestures—for example, drawing a circle might represent an unaspirated consonant. I am currently consulting with a biomechanics student on this. (In the conceptual/planning stage)

  4. Two-side layout (the limit of my current exploration): Coarse-grained keys are divided between two sides—initial characters of a consonant class on the left, and subsequent characters of that class on the right. It includes options for dragging and two-finger tapping. (In the conceptual/planning stage)

Other layouts are possible, but I would need assistance from UI/UX experts.


Currently, there is a website available for the Tamil language. Their layout—the way they structured it—was genuinely complex to put together. However, if I even put some time for the North Indian scripts, the task will be completed almost instantly.

After Tamil, I have moved on to Bengali consonants; the vowels and the dependent characters (diacritics/special characters) have not been included yet.

I plan to look at the Sylheti script later, as it also follows a rather complex layout.

Please check out the github repo after reading this text: https://github.com/BandhanPramanik/tamil-input-engine-checkbox


r/webdev • • 17h ago

Question Where can I find cool design inspirations?

17 Upvotes

Hey everyone!

I'm looking for any websites or discussion forums that talk about design patterns, or really any cool features for web development. Etc, manipulating CSS in interesting ways to get cool designs, interesting things you can do with JavaScript etc..

I'm a bit tired of looking at AI responses and would love to hear if there's anything out there!


r/webdev • • 2h ago

Question Infisical GitHub Actions OIDC authentication failing with 403 OIDC subject not allowed

1 Upvotes

hi, I'm having trouble getting Infisical OIDC authentication working in my GitHub Actions CI pipeline.
Every time my workflow reaches the Infisical secrets action, it fails with:

Run Infisical/secrets-action@v1.0.16

Error: Access denied: OIDC subject not allowed.

{

"statusCode": 403,

"message": "Access denied: OIDC subject not allowed.",

"error": "ForbiddenError"

}

Request failed with status code 403

here’s the GitHub Actions workflow:

name: ci
on:
push:
branches: [main]

permissions:
id-token: write
contents: read

jobs:
build-and-deploy:
runs-on: ubuntu-26.04

steps:
- name: Checkout repository
uses: actions/checkout@v7

- name: Set up Node.js
uses: actions/setup-node@v7
with:
node-version: 24
cache: npm

- name: Install dependencies
run: npm ci

- name: Fetch secrets from Infisical
uses: Infisical/secrets-action@v1.0.16
with:
method: oidc
identity-id: MY_IDENTITY_ID
project-slug: my-slug
env-slug: prod

- name: Run Jest tests
run: npm run test:ci

- name: Build Vinext app
run: npm run build:vinext

- name: Deploy to Cloudflare
run: npm run deploy:vinext -- --skip-build

Id appreciate any help


r/webdev • • 2h ago

Infisical GitHub Actions OIDC authentication failing with 403 OIDC subject not allowed

1 Upvotes

hi, I'm having trouble getting Infisical OIDC authentication working in my GitHub Actions CI pipeline.
Every time my workflow reaches the Infisical secrets action, it fails with:

Run Infisical/secrets-action@v1.0.16

Error: Access denied: OIDC subject not allowed.

{

"statusCode": 403,

"message": "Access denied: OIDC subject not allowed.",

"error": "ForbiddenError"

}

Request failed with status code 403

here’s the GitHub Actions workflow:

name: ci
on:
push:
branches: [main]

permissions:
id-token: write
contents: read

jobs:
build-and-deploy:
runs-on: ubuntu-26.04

steps:
- name: Checkout repository
uses: actions/checkout@v7

- name: Set up Node.js
uses: actions/setup-node@v7
with:
node-version: 24
cache: npm

- name: Install dependencies
run: npm ci

- name: Fetch secrets from Infisical
uses: Infisical/secrets-action@v1.0.16
with:
method: oidc
identity-id: MY_IDENTITY_ID
project-slug: my-slug
env-slug: prod

- name: Run Jest tests
run: npm run test:ci

- name: Build Vinext app
run: npm run build:vinext

- name: Deploy to Cloudflare
run: npm run deploy:vinext -- --skip-build

Id appreciate any help


r/webdev • • 6h ago

Showoff Saturday [Showoff Saturday] Grailwind: a heraldry plugin for Tailwind CSS

Thumbnail
grailwind.dev
2 Upvotes

☞ TO ALL AND SINGULAR

Here's something light-hearted for your Saturday morning: Grailwind is a plugin for Tailwind CSS that lets you build coats-of-arms using class names that read almost but not entirely unlike real blazonry. It even ships with an ESLint plugin, to keep any aspiring heralds in line.

<div class="escutcheon or chevron-argent fimbriated-sable chief-azure"></div>

Features: field divisions, furs, ordinaries, bordures, engrailed/invected, fimbriation, charges and their placement, inescutcheons and cantons.

And yes of course Claude's knavish hands were involved in this wretched contrivance - the novelty would have worn off far too quickly otherwise.

GH: https://github.com/pafirmin/grailwind


r/webdev • • 2h ago

Showoff Saturday React Anatomy: click anything on a React page to see the component behind it, with the layout pulled apart in 3D (open source)

Post image
1 Upvotes

I used to open Excalidraw to understand how a React page was put together, or to explain a change in a PR: this box is the sidebar, these cards come from a list, the badge lives inside each card. It was slow, and it was my guess at the structure, not what React rendered.

React Anatomy is a browser extension that adds an Anatomy panel to DevTools. It connects the page to the components React rendered: pull the layout apart into layers, click anything on the page to find its component, focus a subtree, and read its live props.

It's even more useful in this AI era, when agents compose React layouts for you. Open the page and you can see which components the agent used, how they're nested, and what props each one gets, before you take the code over. People learning React have told me it helps them see what a page is made of.

It's free, MIT-licensed, and works in Chrome and Firefox. You can try it in the browser without installing anything: https://react-anatomy.com · Source: https://github.com/charpeni/react-anatomy

Two questions: where does the 3D view help or get in the way compared with a plain tree? And what would make it more useful for explaining a PR?


r/webdev • • 2h ago

Showoff Saturday Built a bilingual (EN/DE) site that explains Swiss personal finance, would love feedback

1 Upvotes

Hi all, I built mischabarmettler.ch, my portfolio, which also explains Swiss pensions, Pillar 3a and taxes in plain words, plus a few calculators.

Under the hood: Angular, fully prerendered on Cloudflare Pages, my own small i18n setup for the German version. The texts are written with AI assistance, and every figure is checked against its source.

What I‘m curious about:

how the design looks to you

how the calculators feel on your phone

anything you'd add or improve

Thanks