/r/webdev

Photograph via //r/webdev

A community dedicated to all things web development: both front-end and back-end. For more design-related questions, try /r/web_design.

  • Beginner question? Try the FAQ first! or the WebDev Resources Post then post in the Beginner Questions thread
  • Help fill out the wiki
  • Posting Guidelines

    1. No vague product support questions (like "why is this plugin not working" or "how do I set up X"). For vague product support questions, please use communities relevant to that product for best results. Specific issues that follow rule 6 are allowed.

    2. Do not post memes, screenshots of bad design, or jokes. Check out /r/ProgrammerHumor/ for this type of content.

    3. Read and follow reddiquette; no excessive self-promotion. Please refer to the Reddit 9:1 rule when considering posting self promoting materials.

    4. We do not allow any commercial promotion or solicitation. Violations can result in a ban.

    5. Sharing your project, portfolio, or any other content that you want to either show off or request feedback on is limited to Showoff Saturday. If you post such content on any other day, it will be removed.

    6. If you are asking for assistance on a problem, you are required to provide

    • Context of the problem
    • Research you have completed prior to requesting assistance
    • Problem you are attempting to solve with high specificity
  • General open ended career and getting started posts are only allowed in the pinned monthly getting started/careers thread. Specific assistance questions are allowed so long as they follow the required assistance post guidelines.

  • Questions in violation of this rule will be removed or locked.

    Related Subreddits

    Discords

    /r/webdev

    2,777,666 Subscribers

    2

    Hosting Providers recommendations (not for WP)

    I am looking for a hosting provider for my saas Agency, I have got mixed suggestion but not sure which is best, Which provider do use for hosting your coded sites whether its on react or vanilla js Or full stack. And whats the reason for you to choose it over other

    0 Comments
    2024/12/22
    00:24 UTC

    2

    I built a Spotify Wrapped for web analytics

    I launched 1board a few days ago, a tool to compile all your data from Stripe, GA4, and Plausible. I just added a Spotify Wrapped type year in review feature. You can try it out for free here: https://www.1board.dev/ 

    What else should I add to it?

    0 Comments
    2024/12/22
    00:19 UTC

    2

    Am I thinking about OIDC authentication wrong?

    I implemented OIDC for single sign on from an IDP. I have done it bunch of times in Blazor but never in Vue/Nuxt. So it behaves a bit differently this time.

    After logging in, it has access token and refresh token in webserver memory. Token is shipped with every request to a backend API that will make sure the token is good, introspect it and cache. If it’s all good you get the API reponse back. Seems normal to me?

    Sometimes however the frontend loses the access token / refresh token from memory. Either from server restarts or when the user hits different kubernetes replicas.

    Initially I thought the session cookie had all the info but it doesn’t. So when it loses the access token everything stops working and needs to re-auth.

    The solution is to use a store like redis to keep the session and refresh token persistent. It works, but is this a normal thing to do? Instead of adding this extra infrastructure, could I make an encrypted cookie with the refresh token inside? Using the cookie like a store.

    Sorry for a lot of questions. Just wondering what to do.

    1 Comment
    2024/12/22
    00:18 UTC

    2

    I wrote a Chrome extension this morning

    As most people, I tend to watch stuff when eating and I recently caught myself watching useless YouTube slop instead of courses that I had paid for, so I figured out I should remind myself that I have other things to watch besides YouTube. I put the code up on GitHub in case anyone finds himself with a similar problem and would like to give it a shot. (It's not on the web store because I'm not paying $5 for the Google dev account, you have to install the .crx or package it yourself.) Hope you enjoy.

    https://github.com/intercaetera/wouldnt-you-rather

    0 Comments
    2024/12/21
    23:36 UTC

    6

    I've been fired from my junior frontend dev job

    Hello,

    I've been told I would not come to work anymore as the company dismissed me from my front-end job. After 2 years of trying to become better It seems like I've failed to become someone you can trust. From what I've heard and understood, my biggest issue is my failure to perform in-depth testing - that did lead to too many hotfixes in production. It was also an issue in my previous jobs, so maybe I dont have what it takes to have a job like this? I feel a bit like im useless now, with no purpose.

    Maybe I can work on this and try again in another company, but I dont know if its worth if I got to be fired once again.

    20 Comments
    2024/12/21
    23:03 UTC

    1

    Frontend/Backend Security

    Hello Webdevs,
    I recently started developing a website consisting of react in the frontend and node with express, redis, prisma, presql, jwt in the backend.

    Since i'm "fairly new" to web development in general i wanted to ask here for some advice regarding security.

    Users login using oauth (google as an example) those tokens are sent to the backend, verified and stored in the database.
    Later i want to implement a payment processor, allowing users to buy a subscription.

    I've read some stuff about security, but wanted to ask here how some of you would tackle a project like this and make sure its as safe as possible.

    Thank you

    0 Comments
    2024/12/21
    22:41 UTC

    1

    Amazon pay

    Hey guys, does anyone have any experience implementing Amazon pay into react/next web app? Can you give me some good examples/tutorials etc. Thanks !

    0 Comments
    2024/12/21
    22:25 UTC

    1

    "master-detail-page CRUD" using MERN -- know any Gits you'd recommend?

    Back in the old school DreamWeaver days, DW would let you quickly and easily create a CRUD with master-detail pages. The master page would be a list of profiles, and if you clicked on a profile link, you'd reach a detail page containing details of a single profile.

    I've found many MERN-based tutorials and Gits online that do either only the master page, or only the detail page.

    If you have a favorite MERN Git (or tutorial) where they do the following:

    - login / sign up page

    - master page

    - detail page

    Please share it below.

    Thanks!

    4 Comments
    2024/12/21
    22:15 UTC

    0

    What program do I use "cURL" in?

    So Im trying to use some proxy's I purchased. Instead of a dashboard on the website, apparentely the website requires you to use your own tool to manage them? (such as "cURL, Python, PHP, Node.js, GO, Java") However I have no technical knowledge . The website gives me something to type somewhere " curl -x pr.oxylabs.io:7777 -U "customer-USERNAME:PASSWORD", but obviously with my actual login info. I tried command prompt and terminal, but none of those worked. How am I supposed to use this?

    13 Comments
    2024/12/21
    21:49 UTC

    2

    An idea for a local community site

    Hi, I'm a web developer and I've been thinking about an idea for a site intended to help strengthen my local community: specifically, a rural county of about 25000 people. I was hoping to see what you all thought of this idea.

    Some thoughts:

    • It would include an online market component usable both by local businesses and individuals looking to sell uneeded items. Businesses could list their products and services. I'm envisioning an online farmers market of sorts. Similar to Facebook marketplace, but bespoke for our community.

    • It would include some kind of message board. Only people in the county would be allowed to post. I'm worried about the challenge of moderation here.

    • I would like to find a way to help people identify neighbors in need. I'm not sure precisely what that would look like. Food insecurity and healthcare availability are things I'm interested in. There would be a place on the site for local charities.

    • I would want the community to have a role in running the site. This could pertain to moderation or even votes on some things (maybe). I would want the community to feel like the space belongs to them. Everything would be non-profit.

    • I know there are sites that already do some of these things (frequently for profit). But my thinking is that each community has unique needs, so they should have their own tool for addressing them.

    As I said, the goal is to strengthen the local community. To build connections, share knowledge, and build resilience. My hope is this might be something that other communities could emulate if it's successful.

    What does this subreddit think about something like this?

    2 Comments
    2024/12/21
    21:41 UTC

    0

    crypt.fyi - open-source, ephemeral, zero-knowledge secret sharing with end-to-end encryption

    https://crypt.fyi
    https://github.com/osbytes/crypt.fyi

    I built this project as a learning experience to further my knowledge of web security best practices as well as to improve on existing tools that solve for a similar niche. Curious to receive any feedback!

    new secret form

    create secret success

    0 Comments
    2024/12/21
    21:26 UTC

    2

    I created an extension that lets you customize websites

    7 Comments
    2024/12/21
    21:11 UTC

    2

    Identifying Fonts in Web Development: Finding Rendered Fonts from Font Families

    Hello everyone!

    I'm excited to share a project I've been working on. I've recently published an in-depth article^(1) that explores how browsers select and render fonts on webpages. If you're interested in understanding how browsers choose which fonts to render, this article provides a comprehensive overview.

    Alongside the article, I've developed a Chrome extension called FontFinder^(2). With this tool, you can find fonts on a web page by applying the methods described in the article under the hood.

    I'd greatly appreciate your feedback on both the article and the extension. Your insights and suggestions are invaluable as I continue to develop and improve FontFinder.

    Feel free to ask any questions or share your thoughts below!

    ^(1) https://www.reddit.com/r/identifythisfont/comments/1hck9d9/behind_the_scenes_of_font_rendering_how_to/
    ^(2) https://chromewebstore.google.com/detail/fontfinder/idmcghmghllmojgjjncgmnnhgiennpgc

    3 Comments
    2024/12/21
    21:10 UTC

    1

    Introducing Youtube Bulletize - Convert Playlists into List of Video Names Effortlessly

    https://preview.redd.it/p588bpe2d98e1.png?width=1920&format=png&auto=webp&s=95b43620585bb751d6eadcc767d0fde7e58ff2b2

    Demo: https://www.youtube.com/watch?v=E4y0oxfwijA

    Website: https://playlist-bulletize.vercel.app/

    🎥 Ever wish you could turn a YouTube playlist into a clean, organized list? That’s why I made Playlist Bulletize!

    Just grab your playlist link, paste it into the site, and get a list of all the videos. You can:

    • ✅ Quickly copy and format playlists.
    • ✅ Add bullets, numbers, or coding-friendly formats.
    • ✅ Reverse the order, remove private/deleted videos, and filter duplicates.
    • ✅ Include video links, durations, and even use regex for advanced filtering.
    • ✅ Customize your list with prefixes like checkboxes for Notion or Obsidian.

    It’s super simple and saves so much time. ⏳ Check it out and let me know what you think! 😄

    0 Comments
    2024/12/21
    20:03 UTC

    17

    Hi, I created a CLI, that creates a commerce backend with dashboard, that can connect to any database, storage and compute (link in comments)

    1 Comment
    2024/12/21
    19:56 UTC

    0

    How I Launched My SaaS MVP in Just One Week

    I wanted to share a recent experience that really streamlined my workflow and helped me launch a SaaS MVP in just one week next to my fulltime job. To be upfront, I’m the creator of ZapStart, and I want to be transparent about how it made a huge difference for me.

    The Challenge

    Starting a new SaaS project from scratch can be overwhelming. Between setting up authentication, databases, designing the UI, and handling payments, it felt like there was never enough time in the day. I was looking for a way to cut down on the setup time so I could focus more on building features that matter.

    Enter ZapStart

    That’s where ZapStart came in. I developed it to simplify the initial setup process, and honestly, it worked better than I expected. Setting up ZapStart was incredibly quick and easy—within minutes, I had everything configured and ready to go. Here’s how ZapStart helped me get my MVP up and running so swiftly:

    1. Seamless Authentication with Clerk
    Setting up user authentication usually takes a lot of time, but ZapStart integrates effortlessly with Clerk. This made implementing secure sign-ins and social logins (like Google and GitHub) super easy.

    2. Robust Database Integration with Supabase
    Managing the backend was a breeze thanks to the Supabase integration. It provided a real-time, scalable database that worked perfectly with my Next.js app, saving me hours on setup and configuration.

    3. Easy Payment Processing via Stripe
    Incorporating Stripe for payments was straightforward with ZapStart’s pre-configured components. Handling subscriptions and multiple payment methods was hassle-free, letting me focus on the core functionality of my app.

    4. Polished UI with Tailwind CSS
    Designing a professional-looking UI can be time-consuming, but ZapStart comes with customizable components and a ready-to-use landing page built with Tailwind CSS. This not only gave my MVP a sleek appearance but also allowed me to quickly adjust the design to fit my brand.

    5. One-Click Deployment and Built-In SEO
    Deploying the app was as simple as a single click, getting my MVP live within minutes. Plus, ZapStart includes SEO optimizations out of the box, helping my project gain visibility without needing extensive SEO knowledge.

    Saving Time and Effort

    Using ZapStart, I saved over 30 hours on initial setup tasks. This extra time was invaluable for iterating on features, gathering user feedback, and refining the product quickly. It felt amazing to see everything come together so fast!

    Lifetime Access with One-Time Payment

    One thing I love about ZapStart is the lifetime access model. With a single payment, you get unlimited use of ZapStart for all your current and future projects. No recurring fees means it’s a cost-effective solution whether you’re launching one MVP or scaling to multiple SaaS products.

    Why I Created ZapStart

    As a developer, I know how frustrating and time-consuming the setup process can be. I wanted to create a tool that not only speeds up development but also ensures the end product looks professional and is ready for users. Seeing ZapStart help others achieve their goals faster is incredibly rewarding, and I’m always working on improving it based on your feedback.

    Final Thoughts

    Building and launching an MVP in a week is definitely challenging, but with the right tools, it’s achievable. ZapStart was a game-changer for me, making the development process smooth and efficient from start to finish. If you’re a developer or entrepreneur looking to accelerate your SaaS project, I highly recommend giving ZapStart a try.

    Feel free to ask me any questions about my experience or how ZapStart can fit into your workflow. I’d love to hear your thoughts and feedback!

    0 Comments
    2024/12/21
    19:52 UTC

    0

    My AI-Powered resume builder just hit 85K users.

    21 Comments
    2024/12/21
    18:42 UTC

    0

    [feedback wanted] whats your feeling against code snippet tools?

    Hey #webdev 🚀

    I would love to get some feedback from the community

    Time for some idea validation after dinner (at least my local time)
    Are you using code snippet managers/tools in your daily work/off-hours hacking?

    If you are using it:
    * What is your must have feature?
    * What is a big NO-NO
    * What will make you try it out?

    If not:
    * Why are you not using it?
    * What would take to convice you to try it?

    Your input would be invaluable, Thank you!

    Frank

    2 Comments
    2024/12/21
    18:25 UTC

    5

    I created 10 themes (and a component/theme generator) with CSS modules for Shadcn, each with their own CSS tricks (link in comments)

    1 Comment
    2024/12/21
    18:08 UTC

    1

    Domain provders recommmendations

    I was looking for a domain provider for my company,
    After researching i've filtered down these 3
    Cloudfare
    NameCheap
    Porkbun

    I want to know which is better in your opinions and why do u use i
    some peoples are using cloudflare + namecheap

    2 Comments
    2024/12/21
    18:00 UTC

    1

    Wanting to build a website for blogging with no webdev experience

    I want to build a personal website to display my projects and resume. I have no knowledge on HTML or CSS at all

    I know I could use wix Wordpress or goDaddy but I want this to be personal all from nothing. I wanna learn so what’s the best way to learn this other than just doing it!!!

    Where should I start tho?

    Note: I know python and C++

    14 Comments
    2024/12/21
    17:47 UTC

    1

    Were playing web videos without Adobe Flash possible before HTML5?

    I was quite surprised to find out that the <video> element wasn't supported until HTML5, which didn't reach W3C recommended status until 10/2014. I did a bunch of searches for this, including before 2013, 2011 and 2008. The later showed no results. I found the <object> element which can play videos, but that seems to depend on browser support for the video formats (containers + codecs), did browsers have native video playback before HTML5?

    1 Comment
    2024/12/21
    07:31 UTC

    0

    Not Another Shadcn Portfolio Site

    Hey guys, after four long months of developing my personal site (coding with a full-time job is tough lol, plus I kept changing my mind and adding new features), I'm able to say I've finally reached the point that I can consider it "finished." I put a ton of time and effort into designing, researching technologies, reading documentation, prototyping components, learning new libraries/frameworks, and testing functionality to create something that I'm proud of. I tried to keep it minimal, but also unique and display my own creativity through different inspirational sources (mentioned in the overtly-extensive GitHub README).

    It's not just another basic shadcn site; I created almost all UI elements from scratch and tried to focus heavily on responsiveness, accessibility, and attention to detail. I wrote it in TypeScript using Next.js (React) and Tailwind CSS with the help of a few other libraries along the way. I take pride in my work and did not develop this lazily.

    Tldr; please give me your honest feedback.

    Site: kierancanter.dev
    GitHub Repo: github.com/kierancanter/kierancanter.dev

    1 Comment
    2024/12/21
    17:04 UTC

    0

    I want to add transitions when opening and closing modals, but my modals are set to display: none in the JavaScript - preventing CSS transitions (the elements are completely removed from the rendering flow). I can't use properties like opacity or transform. Is there any way around this?

    const modalBtns = document.querySelectorAll(".button")

    modalBtns.forEach(function (btn) {
        btn.onclick = function () {
            const modal = btn.getAttribute('data-modal');
            document.getElementById(modal).style.display = "block";
        }
    });
    
    const closeBtns = document.querySelectorAll(".close");
    
    closeBtns.forEach(function (btn) {
        btn.onclick = function () {
            const modal = btn.closest('.modal');
    
            // Finds all iframes inside the modals
      const iframes = document.querySelectorAll('iframe');
     for (const iframe of iframes) {
         iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":[]}', 'https://www.youtube.com');
      }
            
            
            modal.style.display = "none";
        }
    });
    6 Comments
    2024/12/21
    16:38 UTC

    Back To Top