/r/Web_Development
Web Development news, articles, and tools.
Web Development news, articles, and tools.
Resources:
Other subreddits you may like:
Does this sidebar need an addition or correction? Tell me here
/r/Web_Development
Is it possible to make a great SaaS just by using no code tools.
Or Coding it entirely gives the best results?
Hey guys - I had a question. I would like to access navigator.userAgentData in an https iframe that I have within an http page for a test that I am setting up - how do I allow for this property to be defined within the https iframe? I need this data to be sent, and I was wondering if there was a way to ignore the secure context wrapper that is probably preventing me from doing this check - any help with this would be greatly appreciated. Thanks
Just wanted to share a project I've been working on called vueframe, offering a simple way to embed players such a YouTube and Vimeo easily with a universal API.
Its also the first time I've built a component library with VueJS so I would love feedback on this project so i can improve it and make it better.
here's the GitHub repo if your interested.
also a star would be Awesome :)
EDIT:
I'm also working on a documentation website
# npm
npm install /vueframe
// main.ts / main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueFrame from '@vueframe/vueframe'
createApp(App)
.use(VueFrame)
.mount('#app')
App.vue
<YouTube id="dQw4w9WgXcQ" />
<Vimeo id="676247342" />
This component currently does not support autoplay
or muted
<Dailymotion id="x8i1ffw" />
Prop | Type | Default | Description |
---|---|---|---|
id | string | Required | Video ID from the platform |
autoplay | boolean | false | Auto-start playback |
muted | boolean | false | Initialize video muted |
width | `string | number` | "1024px" |
height | `string | number` | "576px" |
<YouTube id="dQw4w9WgXcQ" autoplay muted width="800px" height="450px" />
MIT © vueframe
Hey developers! Want to experience something truly unique in theme creation? We've built a groundbreaking VSCode theme generator that combines ancient wisdom with modern technology.
Visit VSCode Themes Community to start creating your own harmonious themes or discover themes created by other developers.
Our unique approach combines ancient wisdom with modern development tools, creating color schemes that are not just visually appealing but mathematically harmonious. Each theme is generated using principles found in nature and sacred architecture, resulting in color combinations that are pleasing to the eye and reduce visual fatigue during long coding sessions.
Whether you're a theme enthusiast, a developer looking for the perfect coding environment, or someone interested in the intersection of ancient wisdom and modern technology, we'd love to have you join our growing community!
Check it out: https://www.rlabs.art/vscode-themes-community
Check the source code out at the repository RLabs - VSCode Themes Community - Contributions and issues are more than welcome.
#VSCode #Themes #Development #OpenSource #SacredGeometry #CodingCommunity #DeveloperTools
Adding a pop up advert on my react website I have added a pop up state effect to my main.tsx file I need a pop up function to appear on my menu . Help
Hello, I am looking for feedback on my site. Right now, there is an inconsistency with styles across pages as I've been feeling out different types. In general if people could recommend certain styles they like and formats that would be of huge help.
All data is mock data and you cannot purchase anything for reference, but I will see if you try to if you do :P
Providing examples of other design styles would be of great use as-well, so if you have any styles that you think would fit the website, please include that as-well.
Site: https://autovitus.com/
.....
Hello, I'm two months into my web development journey and I've pretty much gotten down html, css, and im about to be starting to learn JavaScript and bootstrap. I've been messing around with Crome developer tools to kind of just look at websites code to see what they look like professionally. I'm looking at the code and I feel like I'm barley seeing any html or css elements. Are these sites just heavily manipulated with Javascript and such or am I missing something??
Looking for a mid-level - Senior dotNet dev to help with an ongoing project. Stack is ASP Core, WebApi, Razor Pages, EF Core, SQL Server, Azure, HTML, CSS, JS, JQuery. Person can be 100% remote but must speak fluent english! Looking to get started ASAP! 30-40 hrs / week for approximately 3 months.
This project is related to pet care so a passion for pets and animal welfare is a huge plus! DM me if you are interested.
JetBrains just announced a big shift for WebStorm, making both free for non-commercial use starting October 24. Whether you're a student learning, a developer creating open-source projects, or a hobbyist tinkering with web development, you can now use the full version of WebStorm without a subscription. This is a significant move, especially for those of us who code outside of work on side projects or are diving into web dev for fun.
This isn't a watered-down version of WebStorm, either. You get the full set of features, including the powerful DataGrip functionality for databases and a free trial of AI services that can take your projects to the next level.
If you've been on the fence about trying WebStorm, why not try them?
https://blog.jetbrains.com/blog/2024/10/24/webstorm-and-rider-are-now-free-for-non-commercial-use/
Hi everyone, good day. This is my first time writing on reddit and first time hosting a website.
for the past week I have been following youtube tutorials and trying to upload my custom website to hostinger. I have bought their premium hosting plan. I also created a free domain (that came with the plan) with hostinger and connected it to my website. Now I have followed the steps to upload the files from my pc to the file( hp panel) section of hostinger . To my understanding i thought the website will be ON after that but when i open the url it shows me the default php hostinger site. what should i do ?
please from those with experience what my be the problem? i am thinking i may have probably uploaded my website files wrongly or used a wrong format. I am open to all rectifications. please help me.
looking to hire someone to bring my companies website to a more modern design with neccesary information not sure if this is the right subreddit but we are a small ish General Contractor construction company that specializes in DOT work if anyone has the experience or ability please send me a message.
Hi everyone! I recently decide to start self teaching myself on how to code and I'm determined to give what it takes. I have taken a c++ class in the past but I don't really know where to start exactly I don't have to understand for the whole developer idea and I don't have the money to go to bootcamps and also I don't have to right materials to start on my own. I have consumed a lot of YouTube video and now I'm lost to where to even start. So if you could can you please recommend any resources I can get (could be anything like YouTube channels, free bignner friendly courses I could get). I appreciate yall!
I want to shift my e-magzine website from wordpress to html css js website but want to create a system for the content writing team such that if any article we need to publish the team will just put the content in the system (dashboard kind of thing like WP) and make it publish, for publishing access will be given to the team only, so suggest me some idea how I should approach this.
🎨✨ Introducing VSCode Themes Community: Create Themes with Sacred Geometry! 🔯
Hey fellow developers! 👋
Are you tired of the same old color schemes for your VSCode editor? Looking for something truly unique and harmonious? Check out our new project: VSCode Themes Community!
🌟 What makes it special? We've developed an innovative algorithm that uses sacred geometry patterns to generate color schemes. This means you get themes that are not just visually appealing, but also based on harmonious ratios found in nature and ancient architecture!
🛠️ Key Features:
Try it out: VSCode Themes Community GitHub Repo: RLabs-Inc/vscode-themes-community
We'd love to hear your feedback and see the amazing themes you create! Feel free to star the repo if you find it interesting.
Happy theming! 🎉
Introducing Lamp a curated collection of open-source web assets for developers.
Also check out the GitHub repo a star would be AWESOME :)
If u have any projects u would like me to add to Lamp let me know
I'm working on a game that's still in early access an RNG-based game loosely based on a Roblox style game called Sol's RNG. The game is live now, and I am looking to build a community around it! I will be actively supporting it with updates and improvements.
I'd appreciate any feedback if you wanted to give it a shot. It works on any device with a browser, so here's the site, check it out:
https://stickman-rng.glitch.me/
Thanks, and let me know what you think!
Preventing DoS (Denial of Service) attacks is a challenging task that doesn't have a single, straightforward solution. It's an ongoing process that evolves over time. However, there are effective countermeasures you can apply to reduce your risk of being DoS'ed by more than 90%. In this guide, I'll explain these countermeasures based on my 5 years of experience as a web application security consultant, during which I performed over 100 penetration tests and source code reviews.
DoS stands for Denial of Service - an attack that makes your application unusable for legitimate users. While the most common form involves sending a huge amount of HTTP requests in a short period, DoS can also be caused by other attack vectors:
You might think that using Cloudflare's DoS prevention system is sufficient to secure your web application. This protection service implements CAPTCHA challenges for users visiting your web app. However, this only protects your frontend - it doesn't secure your backend APIs.
Here's a simple example of how an attacker can bypass frontend protection:
# Using curl to directly call your API, bypassing frontend protection
curl -X POST \
-H "Content-Type: application/json" \
-d '{"username": "test", "email": "test@example.com"}'https://api.yourapp.com/users
DISCLAIMER: the following examples are simplified for the sake of clarity. In a real-world scenario, you should always use a well-established and tested library to implement rate limiting, authentication, and other security mechanisms. Don't use the following code in production.
Rate limiting is crucial for protecting your backend APIs. Here's a basic example using Express.js and the express-rate-limit
middleware:
const rateLimit = require("express-rate-limit");
const limiter = rateLimit({
windowMs: 60 * 1000, // 1 minute
max: 100, // Limit each IP to 100 requests per minute
message: "Too many requests from this IP, please try again later",
});
app.use("/api/", limiter);
Attackers often use VPNs and proxies to bypass IP-based rate limiting. Consider these strategies:
You can find lists of proxy and VPN IP addresses from these sources:
Here's an example of how to implement IP blocking using Express.js:
const axios = require("axios");
// Function to fetch and parse proxy IPs (example using a public list)
async function fetchProxyList() {
try {
const response = await axios.get("https://example.com/proxy-list.txt");
return new Set(response.data.split("\n").map((ip) => ip.trim()));
} catch (error) {
console.error("Error fetching proxy list:", error);
return new Set();
}
}
// Middleware to check if IP is a known proxy
let proxyIPs = new Set();
setInterval(async () => {
proxyIPs = await fetchProxyList();
}, 24 * 60 * 60 * 1000); // Update daily
const proxyBlocker = (req, res, next) => {
const clientIP = req.ip;
if (proxyIPs.has(clientIP)) {
return res.status(403).json({ error: "Access through proxy not allowed" });
}
next();
};
// Apply the middleware to your routes
app.use("/api/", proxyBlocker);
Use JavaScript-based challenge-response mechanisms. Here's a simplified example:
// Frontend code
async function generateChallengeToken() {
const timestamp = Date.now();
const randomValue = Math.random().toString(36);
const solution = await solveChallenge(timestamp, randomValue);
return btoa(JSON.stringify({ timestamp, randomValue, solution }));
}
// Include this token in your API requests
const token = await generateChallengeToken();
headers["X-Challenge-Token"] = token;
Always use authentication tokens when possible. Here's an example of validating a JWT token:
const jwt = require("jsonwebtoken");
function validateToken(req, res, next) {
const token = req.headers["authorization"];
if (!token) return res.status(401).json({ error: "No token provided" });
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET);
req.user = decoded;
next();
} catch (err) {
return res.status(401).json({ error: "Invalid token" });
}
}
app.use("/api/protected", validateToken);
Always validate all input, including headers. Here's a simple validation example:
const { body, validationResult } = require("express-validator");
app.post(
"/api/users",
body("email").isEmail(),
body("username").isLength({ min: 4 }),
(req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
// Process valid request
}
);
Remember: Security is an ongoing process. Stay informed about new attack vectors and regularly update your protection mechanisms.
Hey everyone! 👋
Recently, I faced difficulties in setting up replication in MongoDB for a project. It became imperative to have our data consistently available, but all the technical details were left out there. After browsing through the net, I found this very helpful guide on MongoDB replication, which really broke down everything at the very elementary level and elaborated it step by step on how to set it up.
If you are having trouble replicating, or if you want to see a high availability setup for your MongoDB, then this is definitely worth checking out! It goes from primary and secondary nodes to best practices on getting your data redundant.
Link here if you're interested: MongoDB Replication Guide
I hope it helps someone else, too!
Picture this: you’re halfway through coding a feature when you hit a wall. Naturally, you turn to the documentation for help. But instead of a quick solution, you’re met with a doc site that feels like it hasn't been updated since the age of dial-up. There’s no search bar and what should’ve taken five minutes ends up burning half your day (or a good hour of going back and forth).
Meanwhile, I’ve tried using LLMs to speed up the process, but even they don’t always have the latest updates. So there I am, shuffling through doc pages like a madman trying to piece together a solution.
After dealing with this mess for way too long, I did what any of us would do—complained about it first, then built something to fix it. That’s how DocTao was born. It scrapes the most up-to-date docs from the source, keeps them all in one place, and has an AI chat feature that helps you interact with the docs more efficiently and integrate what you've found into your code(with Claude 3.5 Sonnet under the hood). No more guessing games, no more outdated responses—just the info you need, when you need it.
The best part? It’s free. You can try it out at demo.doctao.io and see if it makes your life a bit easier. And because I built this for developers like you, I’m looking for feedback. What works? What’s missing? What would make this tool better?
Now, here’s where I need your help. DocTao is live, free, and ready for you to try at demo.doctao.io. I'm not here to just push another tool—I really want your feedback. What's working? What’s frustrating? What feature would you love to see next? Trust me, every opinion counts. You guys are the reason I even built this thing, so it only makes sense that you help shape its future.
Let me know what you think! 🙌
Hi there! I have been working on developing a new web dev portfolio in Webflow, which I found about six months ago and absolutely love. I went through the webflow tutorial, which has you create a portfolio site, and I'm getting close to finishing it up, but I have this nagging issue with two of my interactions. On the homepage, I have a services section which has a hover animation. Actually, four containers with the same hover interaction. It changes the color, makes one set of text invisible, and makes another set of text visible. That all works fine, but that's Interaction One. Interaction Two is a "theme changer", that allows you to switch between dark and light modes, there's plenty of examples of that to be found. That works great as well, except when you follow these steps:
I've tried solving this by changing the variables for the theme change, and I just can't figure out what's causing this. The read-only link for this project is: https://preview.webflow.com/preview/pmdevs?utm_medium=preview_link&utm_source=designer&utm_content=pmdevs&preview=2db35e35779a77cd02aa41ba7476a3c1&workflow=preview. Thanks in advance for any help!
Hello! I work as a backend developer and I'm looking around to figure out what technology to use to restyle a website (it's currently built with WordPress and WP Bakery, nasty stuff).
The intent is to break away from WordPress, and a friend of mine suggested using a headless CMS (which I'm not so convinced about mainly because of the typical target audience for a headless CMS which are usually huge ecommerces or multi-platform stuff etc., nothing that this website is) or Drupal, which remains in the CMS realm anyway so I don't know.
There is to be said that possible future growth scenarios also need to be considered, so thinking about something that is future proof. I have recently developed a password vault web app using Vue for the client side and PHP with MVC on the server side, so that option could also be explored if there is any such suitable solution.
The requirements are that it needs to be very fast and relatively easy to mantain, other than that I can come up with whatever I want, which is also why I am having a hard time looking around.
Do you have any advice or tips regarding some interesting technology that might be right for this?
Hi web devs, I want to start learning web development with no IT background.
I'm not sure whether to choose front-end or back-end development.
Should I learn front-end before back-end or the opposite?
Thx
Désolé, cette publication a été
Suggestions for tools that will help me check my website's traffic and demographics. I have tried some like similadweb, semrush or the likes but they always want to pay a crazy fee of like $400+ to get more details. Any recommendations?
Has anyone tried Google IDX? If so, what do you think about it?
Looking for pros and cons, thinking about switching to IDX instead of using PHP-storm.
Does anyone know if the code you write in IDX is shared to google in any way?
Hi there, I have been studying web development for a year and now I'm doing work practices. At the moment they are given us three weeks of training about frontend, Java, spring, sql, .net, etc and at the end they will ask us in which field we want to do the internship. On one hand I know about frontend and I like it but I see that there are a lot of people for that and a lot of competition and saturated. On the other hand, I saw that ASP.NET can work with a lot of things like front, back, mobile, videogames, etc and it isn't something as saturated like frontend and maybe has more opportunities. So what do you guys think?
Thanks in advance and sorry if I didn't express myself correctly in English 😃