/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,704,356 Subscribers

    1

    Good Agile

    I've seen quite a few posts and comments about how so many processes and projects these days are just waterfall bring called Agile. What are some good examples you have of projects, processes, or teams that were actually Agile and lead to a success?

    2 Comments
    2024/11/20
    06:36 UTC

    1

    How should I structure this in laravel?

    I'm building a site where speaker designers can upload and share their designs, with a focus on technical data management. Looking for suggestions on how to structure this within Laravel, particularly the relationships between designs and components and suggestions on file management and version control systems.

    Speaker Designs
    Users will be able to create Designs and attach Drivers to them. Each design needs to store:

    • Basic info (title, descriptions, specs)
    • Technical arrays (specifications, bill of materials)
    • Multiple file types (docs, measurements, drawings)
    • Images and rich text content with embedded images

    Drivers (Speaker Components) There will be a database of drivers with factory information that users can browse that will also aggregate which designs the driver is used in. Each driver stores:

    • Basic specs (brand, model, type, diameter)
    • Technical specs array
    • Documentation and datasheets
    • Images and rich text content

    Design-Driver Relationship When a driver is used in a design, I need to store:

    • Implementation data (quantity, frequency range)
    • Technical specs specific to this usage
    • Multiple measurement files (frequency response, impedance)
    • Design-specific documentation

    Current approach and progress: I've moved onto using the DevDojo Wave starter that came out recently after building on breeze for all authentication and stuff for future payment functionality.

    I've created models for both Design and Drivers and a pivot table between the two that also stores an array of specifications, and some other data like descriptions, frequency responses. I have created filament forms which all submit properly to the sqllite database I have using repeaters for the pivot tables. I am working on the browse pages soon but want this system completed beforehand.

    I have mad a rudimentary file management system that automatically organizes all the documents in a design but it's full of issues. I want to add the ability to store snapshots as well in a basic version control system for each design.

    How would you structure this if any differently? I'm not sure where to really start with the file management system or version control. Sorry if this seems like a very open ended question.

    0 Comments
    2024/11/20
    04:13 UTC

    7

    How do you add a coupon code to the Chrome address bar like this?

    5 Comments
    2024/11/20
    03:27 UTC

    0

    easiest way to create a recaptcha?

    silly question, but im an artist and my knowledge is limited to very very basic html stuff.

    basically, I want to make something that >looks< like your usual image captcha, except its impossible to solve - every action should give you a "try again" or "are you sure?" or similar. it has to be functional as in you can click everything and stuff happens.

    ik i can quickly do it on figma, but Id like to actually host this somewhere online for a bit, how should I go about that?

    1 Comment
    2024/11/20
    03:02 UTC

    1

    WordPress Website Developing Cost

    Hello Fellow Devs!!

    I'm a Full Stack Software Developer new to freelancing, and I've recently been approached by a client who needs a WordPress-based e-commerce website for their printing business. The site would allow customers to order custom prints of papers, banners, flyers, and similar items. As someone with experience in web development but new to WordPress and freelancing, I'm seeking advice on:

    1. What would be a reasonable price range for this kind of project?
    2. How should I structure my pricing (project-based)?
    3. What key factors should I consider when making my pitch to the client?

    Any insights from those who have worked on similar projects would be greatly appreciated. Thanks in advance for your help!

    6 Comments
    2024/11/20
    03:01 UTC

    0

    American football games free API that doesn't require card details

    Hello!

    Does anyone know of any free APIs with information about American football games (NFL, NCAAF) that doesn't require you to input credit card details before getting an API key? Thank you!

    2 Comments
    2024/11/20
    01:11 UTC

    5

    Dumb question re:Bluesky

    Ok so I’m familiar with the basics of Bluesky and I’m interested in creating a new domain to be my username credentials. The domain would be only for this purpose although I could throw up a landing/home page if needed.

    What would you recommend as a cheap as heck domain host where all of my needs are: access to DNS to create 2 subdomains. There won’t be any web traffic and I’m not selling anything or hosting a blog; I just want a custom domain for my social account.

    Nearly Free Speech seems like it’s maybe a decent option — are there any NFS users here who can advise? I know the usual suspects make it easy but I don’t want to pay $15/mo for hosting just to get a silly username/handle.

    29 Comments
    2024/11/20
    00:48 UTC

    1

    Question about safetly utlizing API key

    Hello, I am new to web development. I am currently working on a project using shared hosting that simply uses the NASA Open API for the "Astronomy Picture of the Day". What is the best way to store this API Key so that it is hidden yet accessible to the client? It is currently hardcoded into the JavaScript file which I understand is not good practice.

    6 Comments
    2024/11/19
    23:34 UTC

    1

    Has anyone found AI agents that are actually useful?

    Like the title says - I often find myself in need of a "browsing" agent to answer questions or fetch information.

    Example use cases:

    - Look up ESPN scores

    - Fetch test airline prices for a trip

    - summarize open issues on a GitHub repo, etc..

    Must haves: be accessible via an API and support structured (JSON) responses.

    0 Comments
    2024/11/19
    23:27 UTC

    2

    Different roles based on UUIDs in URL?

    I am building a wishlist project. You go on, create a wishlist, geht a unique URL and add your items. Bookmark it to save it.

    Wondering if UUIDs v7 is a good fit for that. (Using sqlite, so no native UUIDs support)

    I do not want to have accounts, passwords, users and that shenanigans.

    I am even thinking if having a admin URL and a seperate URL you share with friends and family, so they can check of items when they bought.

    I took some inspiration regarding the UUIDs URL from Kitty split: https://www.kittysplit.com/

    Is it a bad idea to distinguish rights/ possible actions based on the URL?

    Anything better out there without needing accounts with emails and all that?

    4 Comments
    2024/11/19
    23:13 UTC

    4

    (Begginer, CSS) How do I force this image into this grid?

    Heres a screenshot:

    https://preview.redd.it/vpfw18azmx1e1.png?width=1691&format=png&auto=webp&s=84aedecb710adc41b74a107dbf1952fb7bd2626a

    I want theimage that is currently in the bottom left to get into the grid box directly above it. Just like the other 2 images. Instead it somehow makes it's own grid row. I'd also like for the 3 boxes and images to be the same height, with the width 1fr 1fr 1fr. Been tearing out my hair because the CSS is literally the exact same for each image.

    EDIT: OMFG while rereading this post, it's a spelling error, 8 hours for that. FML.

    The CSS:

    .Page {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 135px auto auto;
      background: rgb(21, 66, 234);
      max-height: 100%;
      max-width: 100%;
    }
    
    .Page .Banner {
      object-fit: fill;
      width: 100%;
      max-height: 100%;
    }
    
    .Page .ImageArea {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr;
      min-width: 0;
      min-height: 0;
    
    }
    
    .Page .ImageArea .HarwareImage {
      grid-column: 1;
      grid-row: 1;
      object-fit: fill;
      max-width: 100%;
      max-height: 100%;
      min-width: 0;
      min-height: 0;
      width: 100%;
      height: 100%;
    }
    
    /*
    .Page .ImageArea .HardwareImage>img {
      object-fit: fill;
      max-width: 100%;
      max-height: 100%;
      grid-column: 1;
      grid-row: 1;
    }
    */
    
    .Page .ImageArea .HardwareText {
      grid-column: 1;
      grid-row: 1;
      background: rgb(17, 190, 238);
      min-width: 0;
      min-height: 0;
      width: 100%;
      height: 100%;
    
    }
    
    .Page .ImageArea .NetworkImage {
      grid-column: 2;
      grid-row: 1;
      object-fit: fill;
      max-width: 100%;
      max-height: 100%;
      min-width: 0;
      min-height: 0;
      width: 100%;
      height: 100%;
    
    }
    
    /*
    .Page .ImageArea .NetworkImage>img {
      object-fit: fill;
      max-width: 100%;
      max-height: 100%;
      grid-column: 1;
      grid-row: 1;
    }
    */
    
    .Page .ImageArea .NetworkText {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      min-height: 0;
    
    }
    
    .Page .ImageArea .CloudImage {
      grid-column: 3;
      grid-row: 1;
      object-fit: fill;
      max-width: 100%;
      max-height: 100%;
      min-width: 0;
      min-height: 0;
      width: 100%;
      height: 100%;
    
    }
    
    /*
    .Page .ImageArea .CloudImage>img {
      object-fit: fill;
      max-width: 100%;
      max-height: 100%;
      grid-column: 1;
      grid-row: 1;
    
    }
    */
    
    .Page .ImageArea .CloudText {
      grid-column: 3;
      grid-row: 1;
      min-width: 0;
      min-height: 0;
    
    }

    The HTML:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Home</title>
      <link href="css/Services.css" rel="stylesheet">
    </head>
    
    <body>
      <div class="Page">
        <div class="banner">
          <img src="images/banner.jpg" alt="The Essence of Technology" class="Banner"><br>
        </div>
        <p class="Paragraph">
          TechSolutionHub is dedicated to customer satisfaction, delivering the
          highest level of customer service, and providing cutting edge solutions
          to people all around the globe. We offer services in many areas of the
          IT industry including in: Hardware and Software support, Network
          infrastructure management, and Cloud services. <br>
        </p>
        <div class="ImageArea">
          <img src="images/softwareandhardwaresupport.jpg" alt="Software and Hardware" class="HardwareImage">
          <div class="HardwareText">
            Our world class Hardware
            and Software support
            will mean your home or
            business will never be
            alone in tackling the
            issues common in the
            modern IT ecosystem.
            We gurantee that you
            will never be alone during
            times of crisis, and will
            always be at the forefront
            of hardware and software
            solutions!
          </div>
          <img src="images/networkinfrastructuremanagement.jpg" alt="Network" class="NetworkImage">
          <div class="NetworkText">
            Our expert network
            administrators will manage
            your businesses network and
            ensure that it runs securely,
            reliably and fast, day and night.
            We will ensure that your
            business will never suffer from
            any pesky network outages
            that will cost you thousands,
            again.
          </div>
          <img src="images/cloudservices.jpg" alt="Cloud" class="CloudImage">
          <div class="CloudText">
            Our wide-reaching and
            scalable cloud infrastructure
            will keep your business costs
            and downtime to the minimum
            while offloading the need for
            much of your local
            network infrastructure, and at
            the same time giving access
            to lots of computing power,
            storage, and networking on
            demand, so you only pay for
            what you use, and none of
            what you don't.
          </div>
        </div>
      </div>
    
    </body>
    
    </html>
    4 Comments
    2024/11/19
    22:18 UTC

    43

    Client asked me to sign an NDA

    I talked to a new client today. He was excited about his business idea but wouldn't tell me anything until I sign an NDA.

    Some people are telling me that this is normal others are telling me it's a red flag if someone doesn't share without signing an NDA.

    I know this is common with first time founders because their idea is everything to them and they want to protect it (which is normal).

    Should I sign it?

    67 Comments
    2024/11/19
    22:15 UTC

    2

    A little bit of experimentation

    1 Comment
    2024/11/19
    21:41 UTC

    0

    The browser caching my .js files just saved the day.

    I didn't backup my 40kb .js file since sometime the week prior. I was committing my changes directly into dev not using any version control for this project. Things were working fine.

    I went on a coding binge and hadn't been testing until about now. Then I go into my usual thought process of 'Well, here we go again, better refresh the cache...' and then I realized that was my only backup. Ctrl+U -> Ctrl+A -> Ctrl+C and was able to save myself from a bunch of rework.

    I haven't tested my binge code yet. Time to find out. Oh, one last thing, I started my journey as a lamp stack/Mozilla web developer around 1998 with notepad and Netscape Navigator. I'm new to this sub. smh

    2 Comments
    2024/11/19
    21:02 UTC

    1

    Building My First Free Web Tool - Looking for Ideas!

    I’m diving into my first real web development project, and I’m turning a spreadsheet I use into a free web app. The tool helps track visa requirements, specifically things like absences from a country to make sure you’re meeting certain rules (e.g., for residency or citizenship).

    Here’s what it does so far:

    1. Tracks entry and exit dates.
    2. Calculates days spent outside the UK.
    3. Shows rolling 12-month totals of absences.
    4. Highlights if you’ve exceeded a limit, like staying outside a country too long.

    I’m building this for a personal need, but I think it could help others too. It’ll be completely free (I’m using this as a way to learn how to build and eventually monetize SaaS tools).

    Since this is my first project, I’d love to hear your thoughts:

    1. What are some features you’d want in a tool like this?
    2. What other types of tracking or calculations would make it more useful?
    3. What are some things I should make sure to add to a site like this for an absolute beginner (literally no experience)

    Would love any feedback, feature ideas, or general advice! Thanks in advance! 😊

    0 Comments
    2024/11/19
    20:54 UTC

    0

    LF Lightweight CSS Framework - printable structure friendly

    Hej!

    I'm looking to rewrite from scratch my, let's call it portfolio, however I aim for more CV / Resume approach, mainly interested in lightweight, with grid system incorporated, and also still maintained framework, I feel bootstrap is quite bloated for a simple page I want to develop, and most of other options are kinda outdated or not updated anymore.

    My current page runs under Materialize, but I've found some bugs with components that will not be addressed anymore. Also looking at Skeleton, but it was not updated for 10 years.

    Would appreciate any kind of recomendation, even out of the mainstream options.

    Thanks!

    2 Comments
    2024/11/19
    20:49 UTC

    7

    Building your own super simple analytics. Dumb?

    I really want to log just a few things when someone visits my site:

    1. The value of a specific search param
    2. Whether or not they're logged in
    3. One other server-calculated thing that happens anyway as a server component for the main page

    Is this a dumb thing to just log in my postgres db that's already getting hit to check whether or not they're logged in? Just a row for each visit? Do you all still use services for visit log type things?

    I've used Google Analytics for other projects but I'm not really trying to do that for this one at the moment. Plus without some customization it still wouldn't even give me what I want. Also want to keep it clean and don't feel like having a consent prompt just for analytics.

    Thanks!

    8 Comments
    2024/11/19
    20:23 UTC

    2

    Help Me To Get Out Of Tutorial Hell

    Im not sure if im in TUTORIAL HELL i can only develop projects that i watch/read, i can develop it without looking to the tutorial, but when i try to develop my own project my brain go blank.

    4 Comments
    2024/11/19
    20:12 UTC

    2

    Downloading data from an faulty page

    Hey all, I'm trying to download some data for my research from an government webpage, as an Excel file. I have manage to download it few times out of 50 tries.

    Whenever I click on the download button, it either refreshes the page or gives an checksum error. In edge browser I have managed to download as I said, but in chrome or mozilla it just directly gives an checksum erro.

    Any tips on how to download the data?

    1 Comment
    2024/11/19
    19:45 UTC

    0

    Is it Golang thing to allow one command via SSH session?

    hey I'm trying to run multi linux commands via ssh But golang native library only allow one command per session 😅

    5 Comments
    2024/11/19
    19:19 UTC

    75

    Be vigilant - USE WORD WRAP

    I'll be brief, I got reached out by someone that they found me via github and are wondering if I would want to interview for the position? I said why not because it was well written, didn't give away any red flags (other than the fact their figma design was public, and about 10 other people were looking into it), the responded right away to my email with a bitbucket repo, which was PUBLIC, I cloned it but I knew it was some kind of scam and started going through the code in restricted view and did not install any dependencies or try to run it, and see what I found, fortunately my word wrap was already on otherwise I would've skipped it, because it was way out of the view!!

    Malicious code out of view of the normal screen width

    Also I didn't give it much thought before but I don't think testing-library/jest-dom is there in the tailwind's config file

    26 Comments
    2024/11/19
    19:02 UTC

    3

    New language to learn?

    I am a web dev with almost 4 years of experience. My title changed from Web Dev to Full Stack Dev on year 3 and hopefully will be changing from Junior to Intermediate next quarter. While I am good with my current companies, I have been casually browsing new opportunities and applying for openings. It seems like Golang and Ruby on Rails is becoming a more common requirements for intermediate full stack developer positions.

    What do you recommend me learning? My current stack is a mixture because I work in an agency, I have experience leading projects using React, Next, Node, SQL, GraphQL, working with GCP and AWS.

    6 Comments
    2024/11/19
    18:54 UTC

    112

    GoDaddy Stole my Domain... harassed them, getting it back.

    Not sure if anybody has experienced this before but basically I got zero communication from them that my domains didn't get renewed and I log in to see all my domains gone and my first name last name domain has been taken by somebody else. I looked up the WHOIS data and all I could see was "Repossessed by Godaddy" but they were also trying to force me to buy it + broker fee... my name is very uncommon and it's even more unlikely somebody would use it as a domain!

    I sadly had to be a Karen asshole to the customer support people, sent them links of similar issues and told them I have been a customer for over a decade and that I "need" this issue resolved.

    got this message from the customer service person and a corresponding email.
    "I have checked with our concern team and we have raised the special request to get back the domain and here is the ticket id:###### they mentioned that the domain will be in your GoDaddy account within 72 hours for sure."

    edit: they have it back! :D

    37 Comments
    2024/11/19
    18:44 UTC

    36

    Updated: Scratch Position NSFW website.

    I want to thank you each and everyone who have comment and give useful suggestion from my previous post.
    I have implemented all of your suggestions and have improve the website. Also add one feature, where you can create your own custom daily poster. Check Out
    you people are awesome!
    Thank you.
    edit: Please leave your suggestions if any

    Website: scratch position

    10 Comments
    2024/11/19
    18:18 UTC

    0

    Creating Issues or Jira Tickets is often boring , try Talez create issues on github with just a click

    Often Product Managers and Product Engineers doesn't wanna loose bandwidth for development of new features and hence creating jira or github issues is not on the top list , but what if we create it for them , just add the brainstorming or vague idea of the feature, bugs or whatever you wanna build and with a click you can connect repository and create automated github issue

    Try it on https://app.talez.xyz or visit us at www.talez.xyz

    0 Comments
    2024/11/19
    17:18 UTC

    4

    Difference between Full Stack Web Developer and Software Engineer? Who am I?

    I'm currently in third year of my bachelor's degree in IT, I know full stack development using nodejs, I know python and solved like 120+ problems of dsa and still learning it, as I mentioned full stack earlier so I also know about databases. So now am I a web developer or a software engineer? If I'm a web developer now, then what skills can I learn to become a software engineer?

    58 Comments
    2024/11/19
    16:45 UTC

    1

    Webpage Community notes

    Hello sorry if this is the wrong area. I am looking to create a pretty basic webpage but I wanted to add one feature. I am looking to have an open chat box. Where visitors can type in the chat box and anyone can see and or reply or type there own thing. It would just be a never ending scroll of visitor comments.

    I am having trouble finding anything likes this as a plug in or code I can add to the site.

    Any thoughts or direction would be appreciated.

    Thank you

    0 Comments
    2024/11/19
    16:44 UTC

    1

    RTK Query Auth

    Hi all, I'm looking for some opinions on how best to implement authentication using RTK Query.

    I've seen it done in a few different way but mainly fall into two camps.

    The first one feels more old school redux-y using Slices, Actions and Reducers. The second one feels more similar to a Tanstack React Query approach using baseApi and build.mutation

    Is there a reason you would use one over another? What are the pro's and con's of each?

    Thanks in advance.

    0 Comments
    2024/11/19
    16:20 UTC

    1

    Should I attempt these animations with CSS or are there better alternatives?

    There are quite a few moving SVGs, shapes, and images: https://imgur.com/a/Be2iU7T

    The effects themselves are quite straightforward but I don't want to end up writing lots of code that is hard to manage just for the animations.

    8 Comments
    2024/11/19
    16:19 UTC

    1

    Space in cookie name, RFC-6265 compliance, and firewall blocking.

    One of my clients utilizes SAML 2.0 for their SSO. On our side, my security team has an F5 firewall implementation. Admittedly I'm not 100% familiar with the full implementation start to finish here, but I do know that the client setting a cookie on a domain they own and then passing it to us. ex. their site is "client.org" and our site is "customsite.client.org".

    The cookie the client is passing to us frequently contains a space (and a slash, but I think that's allowed) in the key of one of the key/value pairs. ex:

    orgId=1; Bad Key/Problem=2

    The F5 doesn't like this:

    Cookie not RFC-compliant [1]
    userId=1;[0x20]Bad***[0x20]***Key/Problem=2

    The space in "Bad Key/Problem" doesn't adhere to RFC-6265 standards. That's a given. But - the client is unwilling to budge on fixing the cookie; apparently it is used by multiple vendors. The spaces seem to be widely supported by most browsers, but... I'm not a fan of doing something "just because it works" or "just because it's common." I'm sure it's low risk to add an exception for those spaces, but am I wrong in pushing the client to update their side? Should we just roll over and add the exception? Doesn't give me warm fuzzies.

    EDIT: Why in the actual frak is this getting downvoted?

    0 Comments
    2024/11/19
    15:52 UTC

    Back To Top