/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,213,514 Subscribers

    2

    Vite environment variables at build time

    Hi all, I'm using Turborepo and one of my apps is a React app build using Vite. I'm having a hard time figuring out how to integrate gitlab ci and docker using environment variables.

    I understand the Vite docs, mentioning a test, staging and prod environment (.env local, .env.staging for staging and .env.production for production). For my job however, we do not have 1 production environment or client, we have multiple. For example europe.product.com, africa.product.com etc. so every app on every environment has it's own backend API url.

    What my understandings are so far:

    - I cannot seem to change the environment variable at runtime, only at build time, making it that I have to create separate builds for each client/environment.

    - I tried to add a ENV ARG to docker, appending the value to env (like for example env.europe), so when ENV is provided in docker build, it would create env.europe and then in turborepo config I would have a build pipeline for builing europe prod, by making use of the env.europe file. This means however, that for every possible client, changes are necessary (new turbo pipeline, new env file, ...) I want to have just one build for all my clients.

    - My fix at the moment is to fetch an env.json file, and in (e.g.) my api.ts file it gets the API_URL from it. This env.json file is a volume in my docker container, so I can overwrite it for every docker-compose file for every client. I think it's kind of hacky because for every file that needs the backend url, i do a fetch every time, resulting in a lot of the same fetch call.

    Anyone has any ideas on how to optimize this? Thanks in advance.

    0 Comments
    2024/04/23
    10:46 UTC

    3

    Did Safari just go all weird with CORS?

    I have a client who's embeds (youtube and a podcast one) are throwing CORS errors in Safari, but are fine in other browsers. But this is new, as of yesterday. Is anyone else experiencing this?

    4 Comments
    2024/04/23
    10:37 UTC

    2

    Need a freelancer to build me a portfolio website

    I am a Graphic designer, video editor and motion graphics artist. I have been working under an agency for almost a year now and I believe that I have enough work to build a good portfolio so that I can start approaching clients directly. Been Wanting to create a portfolio website for a while now but with all the work and college stuff I don't get the time to create one.

    Main requirements for the website is that it cannot look like a generic website, it has to have taste, I am willing to help with the design process as much as I can because I want it to be very personalized.

    If anyone is interested in this, I'd like to know your prices and would like to see some of your previous work

    1 Comment
    2024/04/23
    10:05 UTC

    4

    How does Tailwind work in production when installation says to install only as devDependency?

    https://tailwindcss.com/docs/guides/nextjs

    I never really thought about this before until now.

    Tailwind's installation instructions says to install it as a devDependency.

    If so, how does it generate the CSS file without the module existing in the production dependency?

    If I install a fresh app with the --production flag, it doesn't even download the dependencies listed in the devDependency list.

    5 Comments
    2024/04/23
    09:11 UTC

    7

    Web design that makes me 😤

    Am I the only one who gets immediately put off when visiting websites where the developer has clearly faked all testimonials and included a bunch of unecesssry sections and UI elements.

    Regarding the sections, I feel like the hero section should make very clear what your web app does and the problem it solves. Unless you have a complex web app adding a how it works/features/use case section is redundant and just a distraction. Moreover, the usecase section has to be the most annoying, if I can't gather what I am going to use this for from the hero section I'm probably not going to use this.

    6 Comments
    2024/04/23
    08:33 UTC

    1

    Drizzle graphql over hasura?

    Drizzle released a graphql package. I assume that the idea is to not have to learn their ORM dialect which I just read is pretty low level. If I don't care about real time, then I may as well use that over Hasura? I working in CloudFlare workers, and they just released their global sqlite from beta. I don't have a SPA, and would like a graphql endpoint just so as to not learn SQL and joins.

    0 Comments
    2024/04/23
    08:22 UTC

    3

    Developing a Website but Not a Web Dev - Best Practices Help

    I am looking for a bit of help and guidance with a little project I have taken on. I am an IT professional by trade (but not a web developer). I am an experienced VMware / Virtualisation / Windows Infrastructure engineer and I also help look after the IT for a small non-profit organisation. I have taken it upon myself to also revamp their website.

    I have developed a local instance of the new proposed site using Wordpress running locally on my machine (LocalWP). Once the time comes and I migrate it over to the live instance - what best practices should I follow to ensure that not only the site is optimised for speed but also locked down and secure? I appreciate that if I was a Web Dev by trade then I would be familiar with these nuances and tricks however as budgets are tight and I am running this for a charity, I am asking the people of Reddit to help me in this instance :)

    Anything else I should consider?

    0 Comments
    2024/04/23
    08:20 UTC

    6

    How do i put the lines between links like it is in the picture in nav div?

    9 Comments
    2024/04/23
    08:08 UTC

    5

    PLease give me feedback on my palette generator tool

    Hello everyone, i've been working on a palette generator, to be able to create beautiful color ramps for my projects (i am a front end designer).

    With the help of GPT and a good amount of tears, i built the tool:
    https://unoriginal02.github.io/palettes/

    Edit: Please note that i am not a web developer, and have no skill other than basic HTML and CSS. This code was created by doing hundreds of prompts to gpt and failing A LOT. So expect things to not be as polished or optimized as you are used to.

    I would like you to take a look on it and tell me if there is any important missing feature or thing i should take care of.

    Here is a brief explanation on what it does:

    Upon launch, you will be presented with an already created basic ramp.

    From top left, we see:

    • Base color: The color used to construct the ramps
    • Bright steps: The amount of lighter swatches you want
    • Bright target: How bright you want your last swatch to be
    • Hue shift: This is a nice little trick to slightly change the hue of target color. Try it,
    • Saturation shift: More or less the same.
    • The same controllers for the dark swatches.

    The color ramp:

    • Here we see the created swatches.
    • Base swatch is represented with a tiny triangle on top
    • Every swatch gets some information, such as luminosity, hsl values and an approximated label for naming it after.
      • This label is calculated by the overall brightness of the color. It helps to see if a difference in weight of two colors is too heavy or is smooth.
    • If you click on a swatch, you copy its hex value.
    • Below that, you get a gradient from the colors created. This helps see if the progression of the colors is smooth and also doubles as a tool to create beautiful gradients. (IMO)

    Global adjustments

    • Global hue: Changes the hue of all swatches.
    • global saturation: self-explanatory
    • Global light: self-explanatory
    • And... EASING!: I'm pretty proud of this! It changes the progression of the swatches from a linear progression to a more or less eased one.

    Download / Upload

    • There is a crappy but functional system to download the palette and reupload it again later. I use this to save the palette on Figma. And be able to retireve it again in case i need to adjust i t a little. :)

    Please, any feedback will be highly appreciated.

    Excuse my bad english, and thank you for reading.!

    3 Comments
    2024/04/23
    08:06 UTC

    2

    Which tool to use for a personal website blog with medium webdev skills?

    Hi there,

    I would like to create a website featuring data stories in my local community. It is a personal side project and I have a background in data science and also did some web development and database management, but am not a senior level programmer. I would love to be able to build all things related to the content (for example building the database, creating a flask backend pushing the data into and retrieving the data from the database and build the frontend with React and such). However, I am not a pure developer and don't want to build a website from scratch with all the hurdle of security. For instance, I want that people be able to send me an E-Mail for suggestions of topics and I don't want to handle the spam filtering, setting up e-mail server and such. Also I might want that people in my neighborhood be able to contribute data and register on the website. For those things I would like to have plugins or such.

    I worked with Wordpress before and was not 100% satisfied (plus my website got hacked ...). I feel like it is too bloated for my use case (but I would still take it if it is the best candidate). What would you recommend for my use case?

    2 Comments
    2024/04/23
    07:40 UTC

    2

    Looking for Java Coding Task

    Hi everyone,

    when I was applying to a position as Java Dev couple of years ago I had to do a coding task which involved a list of party guests and figuring out who will attend the party ... something in that way

    I know it was a common task that a lot of companies used to give applicants, but I simply cannot find it anywhere anymore.

    I'd be thankful if someone had the task description somewhere and could share it.

    0 Comments
    2024/04/23
    07:27 UTC

    5

    Using SSE vs Web-sockets

    Hello all,

    I'm creating an app where I'll be sharing data from the server, there will not many client requests for data, what I'm thinking to use is SSE, because there's no need client operation required or payload required, only thing is I have to identify which user sending the request(if you have suggestions for identifying users over SSE, please share).

    Using SSE or Web sockets, I'm confused because I've never tested any of one in production neither used much, also there will be about 83-147 MB data will be sent from the server to client every 2 to 3 hour average, and simultaneously almost 500 users will be connected to the server.

    The confusion is which will be more memory efficient, which will have less CPU load and if there are any other solution which can handle more than 500 simultaneous connections which requires not that much memory, and not much CPU load, I'm not looking for a cheap product or like that but the thing is Performance and speed with low memory consumption and low CPU usage is what I'm looking for.

    I know It's all sounds dumb, please comment any solution if you have any idea about this.

    0 Comments
    2024/04/23
    07:15 UTC

    0

    What is your opinion about these?

    I wrote the page mfs.are-sv.de Im not 100% happy about it. What could i do better? Thx

    (The page is only Monday to Thursday online)

    0 Comments
    2024/04/23
    07:11 UTC

    9

    Is there any value in NextJs over ReactJS

    Biggest thing I cared about with NextJS is hydration, but now that React supports server side components, is there any value in pocking NextJS over ReactJS? What features does NextJS offer other than being an opinionated framework?

    16 Comments
    2024/04/23
    07:03 UTC

    1

    Deploy Laravel 8 to NameCheap Hosting

    Why is so difficult to upload a Laravel project to NameCheap???

    I have been using tutorials, blogs, and their official docs, and still, I have not figured out a way to upload it, so far I have only been able to deploy some HTML showing php code as text and without CSS, if I press anything crashes.

    Does anyone have a guide to do this correctly??

    I have been 6 hours straight with this :(

    5 Comments
    2024/04/23
    04:37 UTC

    3

    Subscription payment platform for Saas, recommendations?

    We're looking for a payment provider to handle a B2C subscription service for a web-based SaaS. We're Australian based and have customers world-wide. Users will be charged between AU$5 and AU$9 + sales taxes a month (on month-by-month basis).

    Ideally the payment provider would handle all aspects of the payments, i.e. onboarding and off-boarding, invoicing, tax collection, payments, fraud detection, etc.

    We've narrowing down the list to (but still open to suggestions):

    • Stripe
    • Recurly
    • Zuora
    • Chargebee

    Any real-world experiences with any of these? Stripe would be our first choice but their pricing structure doesn't seem ideal for us as we'll have many small, international payments.

    3 Comments
    2024/04/23
    03:12 UTC

    4

    Chrome Dev tools alternatives for mobile?

    I'm sick of Chromes mobile dev tools, the mobile view is useless. It's never accurate, if I set the viewport dimensions to a specific mobile size it's always off when viewing the website on a mobile device with the same dimensions so I'm having to push to GitHub 100 times in a row, waiting for a new deployment to build and looking at it on my phone. Ridiculous.

    Building media queries right now for different viewport dimensions and I have the dev tools dimensions set to 360x800 yet it's showing styling I have a media query set for "@media (min-width: 380px) and (min-height: 850px)" so I literally can't even see the styling I'm trying to do for the dimensions I have chrome set for. This is so annoying, shouldn't Google products work? Is this just happening to me?

    Are there alternatives? I'm using Galaxy viewport dimensions because that's what I have and what my partner has as well so xcode isn't ideal.

    9 Comments
    2024/04/23
    02:55 UTC

    1

    is this okay?

    Hi guys! first time to post here, i am a web dev aspirant, i just need a guidance if i'm doing it correctly/properly:

    1. is it okay to make my parent container as flex and the direct child as a grid? purpose is that i find it more easier to make it responsive
    2. i am currently creating a static website, the only section i am missing now is the contact form section. I want utilize SMTP for this form - ive seen several forums about email credentials being exposed. is there any way to counter this or encrypt those credentials? but please correct me, i might be wrong.

    Thank you! :)

    8 Comments
    2024/04/23
    01:55 UTC

    3

    What is the best service/platform to help monetize my APIs & cut development time?

    I've developed several APIs with Python’s FastAPI and deployed them on Google App Engine. I aim to monetize these through a website that allows user registration, subscription to paid plans, and API usage. I need functionalities like user accounts, admin dashboard, subscription management, and an API gateway with features like key generation and rate limiting. What tools are available to minimize coding for these standard components?

    3 Comments
    2024/04/23
    01:12 UTC

    1

    How to add classes/ids to Wordpress

    So I bought the additional CSS section in Wordpress. I need to make my site responsive and add media queries. I went in the code of the Wordpress site and I added and ID to an image I want to move. I then targeted the ID in the media query, and it doesn’t work. I played around with it. Moved it to multiple places. Just doesn’t work. What am I doing wrong? Thanks

    0 Comments
    2024/04/22
    23:58 UTC

    2

    Wanting to Create a Browser Based Simulation RPG Game!

    Hi there taking inspiration from these games: Lioden, Wolvden, Xanje, Neopets, Flight Rising, Felvargs
    Hopefully this is the right reddit to post if not let me know

    I want it to be an adventure text base game where the user is able to collect, create, battle their creatures!
    I started out and had a great start website buuuut it costs like 70$ / yr to keep it running and I have very little coding knowledge. I took a few free courses to learn basics and would like to go take an advanced paid for course.

    Additionally I was using chat gpt to help me learn and code the whole website lol and it turned out decent but once I got to the part of having users sign up and enter in emails I was getting swamped with bots so thats something I need to work on too.

    to start off the main issues I was having:

    - would like to know how to set up images that are uploaded with set "designs" that can be randomized similarly to Xanje - the ability to edit and create these creatures.
    I have line art I bought from others that consented to me using it for such.
    - sign in / out and save the users info and such and have it so that the email has to be verified and if the email is not verified within a set time it will be wiped

    any ideas and support is super welcome and appreciated. Any courses you think would be best for me to take im open to, same with if there is any browser builder type thing for me to check out id be willing to.

    1 Comment
    2024/04/22
    22:58 UTC

    0

    As a designer looking for a fullstack web developer, where do I start?

    I have designed a web app for desktop and mobile that I can provide via Figma or similar. Site structure, text, graphics and images are all done. That's where my expertise ends.

    As someone who has barely written a line of code and just used a website-builder here and there, how do I go about finding hopefully one or if necessary multiple developers to turn my design into website that's ready to publish?

    I'm not asking you guys about the logistics of the hiring process but the technical side of it. Do I gather enough knowledge to decide on a language and frontend / backend frameworks and then hire specifically for that, or do I look for web devs in general and let the professionals decide what tools to use?

    About the website: The closest well know comparison to our site is probably Etsy: User A should be able to log in to list products, user B should be able to log in to buy / download products and with that come a bunch of common features like comment sections / reviews, product filters, profile settings, the accompanying backend and so on.

    I'm very much willing to spend my time learning the basics as well as spending my money on someone who knows those basics. If you guys could get me the first step in that direction I'd be very grateful!

    15 Comments
    2024/04/22
    22:34 UTC

    0

    What does a developer want.

    I'm building am app using figma. I need to pass this to a developer so he can hire a graphic designer and they can make it happen. If you were the developer how can I make this an easy painless process.

    Update!!!

    Thanks everyone. At this point I'm just going to hire a team and let them tell me what should happen. I didn't realize there was so much to it. I figured I made a wire frame the graphic designer can make it look good and the dev can put it all together. I don't have experience in this aspect so a developer or a coder, is that not the same job?.

    Even doing the wire frame I'm thinking man it'll just be easier to hire employees to answer the phones for employees and not do an employee portal. Lol

    Thanks again.

    16 Comments
    2024/04/22
    21:07 UTC

    60

    Feeling defeated by shift to low-code/no-code

    I'm struggling with finding my place as a web full stack developer in this new landscape of self-proclaimed "low-code/no-code" SaaS solutions.

    Management seems all too eager to "replace" in-house projects with these kinds of solutions, reducing our in-house dev team to glorified technical SMEs/admins for these various 3rd party platforms. Managing the inevitable Frankenstein abomination of integration points between all the platforms.

    It's not the kind of work I wanted to be doing in this field.

    I understand the appeal. I understand not wanting to reinvent the wheel if another company has already built out a service. I understand not wanting to create a codebase that the company has to maintain indefinitely.

    But it seems like a knee-jerk reaction by management to devalue any kind of in-house development. Is there really nothing to be said for building apps using actual industry-standard technologies instead of some vendor's proprietary system with their own best practices and pseudo-programming language?

    Even the terminology is demoralizing. "Low-code/no-code." But you hired me to write code. Why won't you let me?

    Anyone else in the same boat?

    42 Comments
    2024/04/22
    20:12 UTC

    Back To Top