/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.
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.
Do not post memes, screenshots of bad design, or jokes. Check out /r/ProgrammerHumor/ for this type of content.
Read and follow reddiquette; no excessive self-promotion. Please refer to the Reddit 9:1 rule when considering posting self promoting materials.
We do not allow any commercial promotion or solicitation. Violations can result in a ban.
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.
If you are asking for assistance on a problem, you are required to provide
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.
/r/webdev
So I am running a Flask webapp on PythonAnywhere and I've had a warning on my Google Adsense page for a few months. It want's to see my ads.txt file but can't find it. I have the file set up to be served and it works but the issue is that Google will only attempt to get the file from mywebsite.com/ads.txt.
I believe the issue is that mywebsite.com/ads.txt redirects to www.mywebsite.com and the path is removed.
In the DNS settings on Google Domains I have a CNAME set up for pythonanywhere like so:
Host name: www
Type: CNAME
TTL: 3600
webapp-*******.pythonanywhere.com.
Regarding this issue PythonAnywhere help pages reference this old stackexchange discussion which suggests using synthetic records which appears to no longer exists.
The only place I find an option to set up path forwarding within Google Domains manager is from the "website" link where you can than choose "set up forwarding". You are given an option to redirect to a URL and in advanced setting you can select path forwarding. If you advance past this it tell you that it will remove the current custom DNS settings for CNAME and replace it with a google hosted url.
There isn't much information on what exactly is going on here but what I did find was one sentence in their documentation that states "You can’t have a Subdomain forward or Dynamic DNS synthetic record in addition to a CNAME record for the same subdomain."
ChatGPT suggested I use CloudFlair to setup a redirect of some kind but I haven't dug any deeper. All I want is my ads.txt file to be available at the naked domain because Adsense apparently can't be bothered to type www.
I don't know if this is an appropriate sub Reddit to post in or not, if know where should i post please tell me.
I've created a simple messenger bot (using node js) to respond to messages in my fb page and now i realised that you need a business account for this and not only that but a verified business account which means you have to upload legal documents like tax statements... I don't understand why creating one yourself requires this but using a third party like manychat doesn't. And Since i don't have a business does that mean i can only have a bot through a third party ?
Any help would be much appreciated 🙏
So I got a part time job (still a student) where me and my boss develop using a deployed database, and right now that is the only way of developing, right now I cannot access from my house to said database because my boss put some IP restriction and you can only access from the workplace.
Is this the norm for you as well? Is this how it is done?
Does anyone know of any free services that allow me to embed a contact form into just a static webpage?
I don't mind if it has adverts or anything
Also it would be ideal if there is a way to link it to a mailing list on Mailchimp or something
I’m thinking of deploying a website to vercel. However it is said that after 3000 requests, you will be rate limited. Which from my understanding, means that you can still make requests but they will be limited per minute right?
Just a bit worried as my website utilises polling get requests every second to get information from Spotify and I don’t want to suddenly spend too much money.
I’m doing a web app using ReactJs and Material ui but my component doesn’t work as expected, I have a state called searchValue and it starts as an empty string, and on form submit it is set as an empty string again, it sets the state but the value on the input doesn’t change to the empty string.
If I set the value as “ “ or “lorem” it works as expected but the empty string doesn’t, anyone has any idea what is going on?
I saw this navigation/sections bar in godly, and it looks really amazing because my site has multiple sections, and it seemed like the best option to go for.
I can't seem to wrap my head around on how to create that type of lines, I do not know if it's pure CSS or if it's just an image. I tried recreating it, but I was going nowhere and created something really different.
this is a progress bar, using framer motion
Would appreciate some help!
using: next js, framer motion, tailwind
Just wanted to share my first website for anyone that might be interested/new to webdev as well! It was my final project for the CS50 program, and it is called “LISTN”.
Link to video demo: here
It’s a pretty simple site where you can rate your favorite music and look at other people’s profiles/ratings.
The front end was made using HTML/CSS/JS, and the backend used Python and Flask. I also used Spotify’s API to get all of the music information. I don’t have any other experience in coding except for what I have learned in CS50, so I’m still quite new.
If anyone has any questions/comments, I’d be more than happy to reply!
I've been out of the static HTML sites for a few years. Was looking up HTML frameworks and many of the tools I used and loved are no longer supported.
Requirements would be:
Any suggestions for a boilerplate? I'd rather use something existing instead of creating my own from scratch.
Is there a way to embed a Spotify playlist in a Html page? I googled and all I found was single podcast episodes and the "official" playlist iframe embed only plays a 20sec preview. All the Youtube videos are like 4 years old, so maybe they shut it down? (I'm a student and I'm not a web dev)
Hey everyone. Last week I built a little web client for a sentiment analysis model I was working on with my friends. I'd like to hear your opinions and know where we can improve on, aside from training the model on a larger dataset. 😅
Thanks!
Here it is: AI sentiment analyzer | source code (UI): GitHub
I am a web dev and joined a crypto company as a frontend dev recently. This has raised my interest in crypto and the more I read about it and interact with the community, the more I feel like about 95% is an overcomplicated way to create a ponzi scheme...
I am pretty sure that the narrative of "everything will run on the blockchain" is not true at all, because smart contracts are just shit. They can only really interact with blockchain data and not with real world stuff and apis, because then the whole concept of trustless applications falls apart --> so no point in going the extra extra mile of implementing business logic on a resource-limited EVM in my opinion.
Anyways, that did not stop me yet. Now I am trying to just get my hands dirty and try to build something to see how it feels like developing on the blockchain. I picked a Super Tic Tac Toe running on Solana (Blockchain) and people actually told me: "just do a rug pull; thats simpler", basically telling me I should just scam people. This also shows me that the community is purely toxic.
There are a few interesting projects like Nosana, Render, etc, which try to run a GPU network on the blockchain to make training AI models cheaper, but that can't be it. Like seriously, there must be something I am not seeing because I don't understand the technology enough, right? I don't want to invest too much into learning this technology just to come back a year later knowing that this is just a complicated scam.
What are your thoughts on blockchain development?
my post man post request is stuck in sending request , basically i have two file with same code base when run one of them i got the json response within a second but when i run the second one its got stuck in post request , my server is at mongodb
I have a paragraph which has certain words that have a description (in glossary table), so in each word that exists in the glossary there should be a plus sign, when i click it, it should show the description in a box over the text. each word that has a description is wrapped in glossary_container class, and each description has a class glossary_description.
everything is working fine until the word is at the end of the line, the decription goes out of container and ruins the style.
I would like a way to solve this, maybe the box can go to left instead of right if the content is too big, or maybe there is a way to keep the element within the width of the paragraph.
here is my html.
<div> <p><span>some text</span>
<span>some text</span>
<span class="glossary\_container"><span>some word</span>
<span class="plus-sign" data-index="0" data-title="the word description">+</span>
<span class="glossary\_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
</span><span>some text</span>
</p></div>here is my css
.glossary_description{
padding: 5px;
position: absolute;
background-color: white;
font-size: 0.8rem;
border: 1px solid #ccc;
padding: 10px;
width: auto;
z-index: 1;
}
.glossary_container{
width:100%;
position: relative;
}
I have a college project and I thought of making a registration website. User need to either signup first or login if it's a returning user. I used PHP file to store the user's credential like username password email .If the user hasn't signed up before and is trying to login then he will get an error message below the either signup button or login button and the same thing should happen if he has already signed in but is trying to sign up again . Problem is the php ain't printing the message and even the chat gpt is showing no error in the code and instead output shows just a blank web page with url of local host 3000. I don't have much interest in web development and I am barely a beginner.
Here is the code:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Game Portal</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="styles.css"> <!-- Custom CSS --> <?php include 'security.php'; ?> </head> <body> <div class="container"> <div class="row justify-content-center"> <div class="col-md-6"> <div class="text-center mb-4"> <h2 class="text-white mb-4">Game Portal</h2> <button id="signupBtn" class="btn btn-primary mr-2">Sign Up</button> <button id="loginBtn" class="btn btn-success ml-2">Log In</button> </div> <form id="signupForm" class="d-none" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"> <div class="form-group"> <input type="email" class="form-control" id="signupEmail" name="email" placeholder="Email" required> </div> <div class="form-group"> <input type="text" class="form-control" id="signupUsername" name="username" placeholder="Username" required> </div> <div class="form-group"> <input type="password" class="form-control" id="signupPassword" name="password" placeholder="Password" required> </div> <div class="form-group"> <input type="password" class="form-control" id="signupConfirmPassword" placeholder="Confirm Password" required> </div> <button type="submit" name="signup" class="btn btn-primary btn-block">Submit</button> </form> <form id="loginForm" class="d-none" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"> <div class="form-group"> <input type="email" class="form-control" id="loginEmail" name="email" placeholder="Email" required> </div> <div class="form-group"> <input type="password" class="form-control" id="loginPassword" name="password" placeholder="Password" required> </div> <small><a href="#" id="forgotPasswordLink">Forgot password?</a></small> <button type="submit" name="login" class="btn btn-success btn-block">Login</button> <?php if(isset($loginError)) echo '<div class="text-danger">' . $loginError . '</div>'; ?> </form> <form id="forgotPasswordForm" class="d-none"> <div class="form-group"> <input type="email" class="form-control" id="forgotPasswordEmail" placeholder="Enter your email" required> </div> <button type="submit" class="btn btn-primary btn-block">Submit</button> </form> </div> </div> </div><!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#signupBtn").click(function() {
$("#forgotPasswordForm").addClass("d-none");
$("#loginForm").addClass("d-none");
$("#signupForm").removeClass("d-none");
});
$("#loginBtn").click(function() {
$("#forgotPasswordForm").addClass("d-none");
$("#signupForm").addClass("d-none");
$("#loginForm").removeClass("d-none");
});
$("#forgotPasswordLink").click(function() {
$("#signupForm").addClass("d-none");
$("#loginForm").addClass("d-none");
$("#forgotPasswordForm").removeClass("d-none");
});
});
</script>
</body>
</html>Here is the styles.css code:
body { background-image: url("Esport.png"); background-size: cover; background-repeat: no-repeat; } .container { margin-top: 100px; }
Here is the security.php code:
<?php session_start(); // Function to sanitize input data function sanitize($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } // Check if the form is submitted for sign up if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['signup'])) { $email = sanitize($_POST['email']); $username = sanitize($_POST['username']); $password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Store user data in a file or database (for simplicity, let's use a file) $userData = "$email,$username,$password\n"; file_put_contents("users.txt", $userData, FILE_APPEND); $_SESSION['email'] = $email; // Set session variable for logged-in user header("Location: https://www.youtube.com/"); exit(); } // Check if the form is submitted for log in if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['login'])) { $email = sanitize($_POST['email']); $password = $_POST['password']; // Check if the user exists in the file $users = file("users.txt", FILE_IGNORE_NEW_LINES); foreach ($users as $user) { list($storedEmail, $storedUsername, $storedPassword) = explode(",", $user); if ($email == $storedEmail && password_verify($password, $storedPassword)) { $_SESSION['email'] = $email; // Set session variable for logged-in user header("Location: https://www.youtube.com/"); exit(); } } // If user is not found, show error message $loginError = "Incorrect email or password. Please try again."; } ?>Looking for a way to host images , from few hundred to a thousand images for a website cheaply , or possibly on a free tier .
It's an Astro site , hopefully hosted on netlify free tier .
I'm thinking if I host the images seperate , then I shouldn't go over the netlify free tier limit ?
Or maybe I have this wrong !
Hello there, I've been thinking about a problem I got at work recently and I wanted to get some external opinions about it to help understand the problem a bit more.
TL;DR : Embedded web widgets sometimes use really generic classes for their CSS or JS code, and end up being incompatible with our websites, who is at "fault" ? How would you manage that ? Who do you think should be making 100% independant code ?
So, for a bit of context I work for a company that builds websites in a domain where a TON of clients want external widgets to be installed on their sites (most of the time a code snippet that we add with a bit of JS that loads a div, something pretty basic). And more often than not, these widgets come with bundled CSS that either overwrite some of our styles, or simply get their styles overwritten by our CSS. This happens because both the widget and our site would contain classes such as "title" or "container", you know, these kind of "generic" class names that are easily reusable...
And I always get frustrated by these widget owners because, imo, they are the ones making a piece of code that should work in ANY website, shouldn't they be using really specific classes and IDs to make their widget completely independant ? At least, that's how I tackle the issue whenever I do need to write some code that'll be embedded somewhere else.
But at the same time, this has happenned A LOT ! Like, maybe 1 out of 3 or 4 widgets that we have to install for a customer, needs to be debugged because a script is attaching to the wrong div or some CSS broke... So, maybe I am in the wrong ? Maybe my websites should use intricate class names to be compatible with every widget on earth just in case ?
I don't really know how to resolve this ? Because widget owners often tell their clients that we are at fault 'cause our website's code overwrites their widget's code, and the customer not being really tech savy, will almost always send us a mail about that, and we end up throwing the stone at each other like that, which is completely stupid and inefficient. So... What do y'all think ? What would be the best way to handle this ? Have you ever faced similar issues ? I'm really looking forward to the discussion, more than to a precise technical solution if it ever exists, this is something I'm just very curious about...
I have decided to create a barber booking app with timeslots the ability to choose a barber, payments and bonus system. (React Native, Mongo, Express)
I am located in Greece and the pure money gain I will receive is roughly 4000. It is more than anything I have personally made. But I am starting to think that the project will be more complicated than I have thought so.
Most answer will be to probably convince them to buy and already established product. But in this way won't I lose the change to build something of my own and use the experience of the final product for my benefit?
Do you have any tips that will make this outside of work side project go smoother?
Any sources to get inspired about creating a solid schema or tips to avoid pitfalls?
Edit:
This is a booking app for a specific barber shop
I will implement a functionality like this https://www.nicol.salon/
This wasn't a throughout post.
I am just now thinking of how to build a suitable database schema.
This is the main flow:
I am encountering an incredibly weird bug at the moment.
const defaultCampaign: CampaignNpoCreate = {
general: {
campaignName: '',
languages: [],
urlName: '',
campaignLogo: '-',
approveP2P: false,
},
mail: {
enableThanksMail: false,
enableFiscalCertificateMail: false,
thanksMail: '',
},
};
This defaultCampaign (it's simplified a bit) serves as the basis for the creation of a campaign. After running this code:
const campaign = defaultCampaign;
console.log(campaign);
console.log(campaign.mail);
the first log shows 'mail' as having the same properties as 'general', but the second log does show the correct information. When using the campaign object in the form, it does not have the correct information either.
I've tried destructuring the defaultCampaign (const campaign = { ...defaultCampaign }
) and setting the defaultCampaign to a function that returns the CampaignNpoCreate object, same result. Anyone know what might be causing this?
For context, this code is used in a Vue app.
Hi all,
I would like to know more about how a website like this is possible being built;
hotukdeals . com
As I want to create a similar website for my region. I excel in frontend but lack some backend skills. But I am just curios how a website like this is structured. And if you have an even better way to set this up, feel free to comment!
Thanks!
TL;DR: Seeking technical advice on integrating an LLM with a web form to generate text only responses for presentation on a website I built.
Project Overview:
I'm a copywriter building a non-profit website using Elementor and Wordpress to help seniors in my parents' community. The easy to read, easy to use website features a form (built with Formidable Forms) that seniors can fill out anonymously, no private info exchanged or requested. I want to submit the form data (text responses only) directly to an LLM, have the LLM generate a text response, and send the response back to my website for display in a window I've built.
Technical advice needed:
How to send collected form data to an LLM upon pressing the 'Submit" button, and how to receive the text responses from the LLM and plug into the window I build for the responses, where the user can read the response, and download it or print it as well.
I'm just looking for the names of recommended tools or Wordpress plugins for this integration (e.g., Webhooks?), and any the names/titles of relevant tutorials or resources for a non-technical person like myself to learn how to do it.
Context: I've already built the full website and form, but I'm not familiar with backend development or API integrations. I've researched chatbots, but this project doesn't involve direct user interaction with the LLM.
Any advice or guidance would be greatly appreciated. Even a simple sentence "Use Tool A to do this, plug-in B to do this, and then finish with Tool C" would help me move forward, and I'll figure it out from there.
I've done a million 'figure it out" projects before, I'm just a little stuck getting out of the gate on this one because there is such a flood of AI nonsense out there right now.
Thanks so much for any advice you might offer!
(Edit: Will prob be using either Claude or Meta. I feel both generally provide better conversational human responses than ChatGPT)
I would describe myself as a junior full-stack web developer. That might sound strange, but it's because I'm the first developer my organization has hired, and the only other developer here has less experience than me. So I take care of any back end programming we need, as well as somewhat more advanced front end stuff. I'm comfortable with HTML, CSS, JS, TS, Node.js, React, Prisma, and simple relational databases.
What do we do?
Among other things, my organization sells webstores. These are basically small online stores that we build for clients, who then use the stores to sell products to their own customers.
When I was hired 6 months ago, the process used for this was quite messy. It still is. All the webstores are built in WooCommerce in a WordPress multisite environment. Everything is hosted on the same server. New webstores are created by duplicating a template. Anytime we've wanted to include some custom functionality in a webstore, we have basically hacked it together by installing lots of plugins and adding PHP snippets we found on Google. Performance has gotten progressively worse as the number of plugins and webstores has increased.
Where are we headed?
We want to continue to scale our webstore offerings to 50, 100, and beyond. We know our current approach is not sustainable, and as the most experienced developer here, I would love to lead the way in overhauling our approach to webstores. I always love a big challenge, and it would look great on my resume.
But I also only have 1.5 years of experience with web development, and no on-site senior engineer to learn from. I don't want to lead my organization down the wrong path with this rebuild, due to my relative lack of experience.
My instinct is to leverage a headless e-commerce and a headless CMS, and also build some kind of lightweight full-stack app with a dashboard where admins can define data for a new webstore in a very streamlined way (no duplicating entire sites, the way we do now). Then, when a user enters a webstore's URL, a distinct store will appear to be served, but in reality it would be just a React front end that dynamically changes styles and enables/disables features based on the webstore's data on the back end.
What am I asking for?
I'm not looking for anyone here to give me all the answers, or to figure everything out for me. I'm just looking for some input and general direction from developers with more experience than me.
If you have a moment, please take a look at our requirements below, and throw out any suggestions you have. You will probably spot some gaps in my knowledge just from reading these, so feel free to point those out, as well.
Thanks for reading all the way to the end, and for any input you choose to give!
I'm genuinely curious about how dark web websites are created. Does it follow a similar process to the surface web? What coding languages are used for Onion sites, and what software is employed for their design and development? I'm eager to understand how complex it is to design and build these websites, as well as the challenges involved. If anyone has insights on this topic, please share—I'm sincerely interested in learning more about it.
In my current mobile app, I've implemented an auth flow for email/password authentication:
Now, I'm exploring the integration of social login using Firebase authentication, although I'm still deciding on the provider such as Supabase. Here's the flow I'm considering:
Do these proposed flows seem correct to you? Any advice would be appreciated. Also, does refresh token with 30d validity make sense? I’ve seen some apps will not ever prompt the user to login again upon the first login, so seems like these refresh token will never expire?
While searching for something I came across https://github.com/datapane/fe-hiring-challenge. I haven't done web frontend work professionally so I don't know if the time they've suggested for this task is reasonable.
Keeping in mind that the task is deliberately open-ended, I feel if I tried to solve this with what I currently know I'd fail taking much too long to build a complete solution. With only 2-4 hours I imagine the key to success is to have built the thing they want previously so that one could do it more or less from memory.
But I'm a noob at web stuff and I know it, so I'm curious about what experienced folks think. Is this a reasonable hiring challenge?
I have tried to make it seem professional, while also looking modern. Any advice on what I could've done better?
k29digital.com
Thanks.