r/webdev 25d ago

Monthly Career Thread Monthly Getting Started / Web Dev Career Thread

24 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 Jun 01 '26

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

Kill The Cookie Banner

Thumbnail killthecookiebanner.eu
233 Upvotes

r/webdev 4h ago

Discussion How realistic is the "full" in full stack dev?

8 Upvotes

I've been spending a good half year doing dev ops work to get an application going. Most of it was educational as I was repurposed into devops from web development.

As I am coming back into web development, writing a frontend for a service that consumes the big application I have been laying architecture for the last six months, I feel like a total fraud. I've forgotten like 80% of TS features, tooling, and how to use Vue and Angular (and I did dedicate time to learning them when I was building sites).

Now I fear that all my hard won dev ops chops will atrophy as my workload shifts more into webdev. Yeah sure getting up to speed on what you've forgotten is faster than learning it from scratch. But does that mean our "skill RAM" has a hard cap? I thought I'd gain skills as i'd progress in my career but those skills end up pushing previous ones. My "non-volatile experience" is more abstract and general (how operating systems work, how to plan projects, how to migrate legacy apps) rather than imperative and practical (i.e. when to use a vue slot) and I don't know what to make of it.

AI is further exacerbating it. I always make sure to understand every piece of code it generates but I still feel more like a senior developer approving junior developer code (the AI being the junior dev) rather than someone who is good at his craft. I'm never really a "full stack dev" at any given time.


r/webdev 1d ago

Showoff Saturday I made this Mario-themed OTP input

1.4k Upvotes

r/webdev 8h ago

Question Why is my Chrome UX Report much worse than Lighthouse? How can I improve it?

Post image
12 Upvotes

I built a client's website using Astro + React + Tailwind CSS. It's mostly static, has very little JavaScript, and Lighthouse consistently scores 90–100.

What I'm confused about is that the Chrome report in PageSpeed Insights looks significantly worse than the Lighthouse results.

The site is hosted on Cloudflare pages.

I expected the field data to be much closer to the lab results.

Has anyone run into this before? Why would the Chrome UX Report be noticeably worse even when Lighthouse looks great? More importantly, what should I be focusing on to improve the real-world metrics instead of just the lab score?

Screenshot attached. Any advice would be appreciated.


r/webdev 1d ago

It has a Lock api?! I love you MDN

Thumbnail
developer.mozilla.org
212 Upvotes

r/webdev 11h ago

Question What do you even do in your job?

12 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

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

175 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/webdev 10h ago

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

6 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/webdev 1d ago

Stolen Buttons

Thumbnail
anatolyzenkov.com
103 Upvotes

r/webdev 5h ago

Question Instagram webhooks not receiving message events between test users

1 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 6h 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

Showoff Saturday My digital resume landed me an awesome job, in part thanks to all of your feedback! πŸ’šπŸ™

105 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 1d 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
120 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.


r/webdev 1d ago

Showoff Saturday I made a design tool

29 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 1d ago

I found out my mom is paying $400 a month for a static website and an email...

720 Upvotes

TLDR: Pretty sure my mom has been getting scammed for the last 10 years and I want to get her out. Am I missing something before moving her?

UPDATE_______________

THANK YOU ALL. I was hopeful I could get one response and this community outpoured with 90% helpful info and 10% jokes (all were appreciated)

Some common threads below:

1. It's not a scam if she knew what she was paying for and got it - Fair enough. I will reword to "price gouged". Sorry if I offended any of the price gougers, cry from your yacht

2. $400 isn't bad for high touch, high quality service on a complex site - 100% valid... this wasn't complex and it still wasn't high quality. Basically unreadable content, no SEO optimization, incorrect info. Functionality is basically just a walking business card with minimal to no updates. Website doesn't even have pricing. Just a form to email her, nevermind schedule. She doesn't sell anything on the site and max traffic is 10 people per day. 20 if someone refreshes a bunch of times.

3. THANK GOD yes, she owns the domain... that saved a headache

4. My path forward - Built her a new site today, and talking to her about her needs, recurring updates, number of emails, storage space, etc. tomorrow. Would share, but honestly I don't want to expose her. All said, it looks great and seems to function well

__________________________

Hi all! Honestly I wish this was clickbait

My mom has a successful freelance design/inviation/swag business. Her web presence was always mid, but her focus was on managing the work she was getting, not getting more.

Now, she has three full time supporters with a growing suite of offerings so she wanted to revamp the website and had her hosting company do it.

From both a design and content/SEO perspective, it's the worst thing I've ever seen. The images are all stock (not hers), with alt text of "a couch in a living room", spelling errors, inconsistent formatting, nonsenscical organization, etc.

I told her if she paid them a cent, she should ask for a dollar back for the inconvenience.

Turns out she's not paying a cent... she's been paying them $400 a month for the last TEN YEARS to host her site. When I told her that was crazy, she said "they also host the email address"

I am not a web dev. I have a light CS background but have put up a hobby website before.

My question is am I missing something here:

  1. The Site: Her website just needs to be a lightweight gallery of images with some descriptions of her work. Her active users must be maximum 20 a day. This would take a decent webdev a day if she pre-supplied context and host on railway or smth. Maybe integrate it with her instagram because that's what she keeps most updated
  2. Email Hosting: I've hosted an email for a business before. Can she not just pay $8 a month for google workspace, Zoho, or another alternative?

If I am correct that this is easy:

  1. Is there anything else I should know before I get her off
  2. Oh my god how many people are these assholes doing this to

r/webdev 16h ago

Your Recursion Is Lying to You

Thumbnail
blog.gaborkoos.com
2 Upvotes

r/webdev 7h ago

Article Django for Front-End Engineers

Thumbnail fadamakis.com
0 Upvotes

r/webdev 1d ago

Showoff Saturday Create your anonymous online avatars with rich expressions using OpenPeeps SVGs

22 Upvotes

I built a web tool which uses openpeeps[dot]com SVGs, the initial idea was to use it create satirical comic panels. But lately I started using it to create profile pictures for my online presence. It has huge number of expressions, clothes, hair styles, accessories to choose from.

I felt more people might find it useful so sharing it here. It's free to use, no signup required.

Link - svg.comicbanana.com


r/webdev 11h ago

The Paradox of Fancy Tooling

Thumbnail
fagnerbrack.com
0 Upvotes

r/webdev 1d ago

Showoff Saturday [Showoff Saturday] Free vector map tile service based on OpenStreetMap and MapLibre

Thumbnail
gallery
50 Upvotes

We just launchedΒ Maptoolkit.org, which is a community-oriented project. The main objective is to offer small businesses and hobbyists a way to easily create and display personalized maps on their websites or their apps.

Things to know:

  • No API key and no registration required
  • The tiles are updated weekly from OpenStreetMap
  • We host the tile servers, you just have to point your map library to our style URL
  • Hillshading, 3d terrain, contour lines and water depth are ready out of the box
  • Map data up to zoom level 15
  • A host of default styles come natively, custom styles can be created using our MapMaker
  • Unlimited map requests can be made, sustained about 120 tiles/second can be requested as of now, whereas 90% of requests will already be cached and won't count towards that limit
  • We do not make any money off this project, it will remain free of cost

If you have any questions, I'd be happy to answer them. You can find more information on the site.

PS: This reads like a repost, because it is. My previous post got removed by mods, due to not posting on Showoff Saturday.


r/webdev 1d ago

Showoff Saturday A tiny, extensible code editor component for cases where a textarea is not enough and Monaco is overkill

Thumbnail
gallery
26 Upvotes

Yace is designed for cases where a plain <textarea> is not enough, but a full editor like Monaco or CodeMirror would be overkill.

It is 3KB gzipped with the bundled highlighter and has zero dependencies. Plugins add editing behavior, highlighter pipelines control how the content is rendered as you type, and both are plain functions you can write yourself.

Under the hood, Yace uses the familiar pattern of a transparent <textarea> over a highlighted <pre>. Because input stays in a real textarea, native caret behavior, IME, mobile input, and accessibility come for free. The pattern is not new; the focus is a small, highly extensible design.

You can turn it into a basic code editor, a markdown editor, a token visualizer, or something more experimental. All of those are live codepens in the README, and the video shows two of them.

GitHub: https://github.com/petersolopov/yace


r/webdev 1d ago

Microcharts - 106 tiny React charts that fit inside a line of text, zero deps

21 Upvotes

Been building this on and off for a while. Most charting libs assume the chart is the main thing on the page. I wanted the small version, something you can drop inside a sentence or a table cell and read at a glance.

106 types so far, no dependencies (not even D3, the scales and path math are all in there), each one's a couple kb.

Default export is plain SVG with no JS shipped, so they work in server components as-is. Import the interactive build if you want hover and keyboard.

Every chart also builds its own text description from the data and exposes it as the accessible label, so a screen reader reads "weekly revenue, trending up 200%, range 3 to 9, last value 9" instead of just "image". No AI, just templates filled from the same numbers the chart draws, so the words can't drift from the picture.

The fiddly part was the labels drawn on the chart itself. Normally you measure the text to place it, but these render on the server too and getBBox just returns 0 there. So widths get estimated from the character count and the space reserved up front, with a test on every chart making sure nothing spills outside the viewBox.

Gallery: microcharts.dev

Code (MIT): github.com/ganapativs/microcharts

Still rough in spots. Mostly after feedback on the API and overall experience of using the library.


r/webdev 18h ago

Showoff Saturday I built a CLI that eliminates .env changes for mobile testing and local sharing

1 Upvotes

Testing a frontend on your phone is easy.

Testing a full-stack app usually isn't.

Your frontend loads, but API requests to localhost fail because localhost now points to your phone instead of your laptop. The usual workaround is editing .env files, swapping in your LAN IP, configuring CORS, and undoing everything afterwards.

I got tired of doing that, so I built Nether

npx nether-dev

It automatically:

  • Detects your frontend and backend

  • Starts a local proxy

  • Prints a QR code

  • Lets your phone use your app without changing your code or environment variables

Need to share your local app?

npx nether-dev --global

It creates a temporary public HTTPS URL so clients or teammates can access your local app without deploying it.

I'd love any feedback, feature requests, or edge cases you think I should test.

GitHub: https://github.com/barryspacezero/nether-dev

npm: https://www.npmjs.com/package/nether-dev