/r/Web_Development

Photograph via snooOG

Web Development news, articles, and tools.

Web Development news, articles, and tools.

Smokey says: throw food scraps in your compost heap to fight climate change! [see more tips]

Resources:

Other subreddits you may like:

Does this sidebar need an addition or correction? Tell me here

/r/Web_Development

24,676 Subscribers

1

What are your views on No code SaaS?

Is it possible to make a great SaaS just by using no code tools.

Or Coding it entirely gives the best results?

0 Comments
2024/11/20
15:01 UTC

1

Help Needed: Best Training/Course Recommendations for a PHP/Infrastructure Developer

0 Comments
2024/11/18
23:46 UTC

1

Access secure navigator from https iframe in http page

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

0 Comments
2024/11/18
16:23 UTC

1

I made a small project yesterday. Launching Black friday devs - Curated Deals for developers and indie developers. The site is made with Nuxt 3

0 Comments
2024/11/18
14:57 UTC

1

vueframe a simple Vue 3 component library for embedding video players

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

Installation 📦

# npm
npm install /vueframe

Setup ⚙️

// main.ts / main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueFrame from '@vueframe/vueframe'

createApp(App)
  .use(VueFrame)
  .mount('#app')

Usage 💻

App.vue

YouTube

<YouTube id="dQw4w9WgXcQ" />

Vimeo

<Vimeo id="676247342" />

Dailymotion

This component currently does not support autoplay or muted

<Dailymotion id="x8i1ffw" />

Props 🎛️

PropTypeDefaultDescription
idstringRequiredVideo ID from the platform
autoplaybooleanfalseAuto-start playback
mutedbooleanfalseInitialize video muted
width`stringnumber`"1024px"
height`stringnumber`"576px"

Examples 🎯

With Props

<YouTube id="dQw4w9WgXcQ" autoplay muted width="800px" height="450px" />

License 📄

MIT © vueframe

0 Comments
2024/11/17
17:55 UTC

1

Please, check out if you like to use themes for VSCode. Open source project build with the new Svelte 5

🌟 Introducing VSCode Themes Community: Where Sacred Geometry Meets Modern Development

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.

✨ What Makes It Special?

  • Sacred Geometry Color Generation: Our algorithm uses over 30 sacred patterns including:
    • Golden Ratio (φ) based patterns
    • Fibonacci sequences
    • Sacred symbols (Sri Yantra, Metatron's Cube)
    • And many more!

🎨 Key Features

  • Intelligent Color Harmony: Colors aren't random - they're mathematically derived using sacred geometry principles
  • Advanced Token Coloring: Sophisticated syntax highlighting that maintains sacred proportions
  • Accessibility First: All themes are optimized for readability and meet accessibility standards
  • Multi-Language Support: Specialized token colors for JavaScript/TypeScript, Python, Rust, Go, and more

🤝 Community Features

  • Share your themes with fellow developers
  • Browse the public theme gallery
  • Create personal theme collections
  • Export themes as VSIX files ready for VSCode installation
  • Publish directly to the VSCode marketplace

🚀 Getting Started

Visit VSCode Themes Community to start creating your own harmonious themes or discover themes created by other developers.

💡 Why Sacred Geometry?

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.

🌈 Join Our Community!

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

Open source

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

0 Comments
2024/11/13
11:03 UTC

2

Web development

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

3 Comments
2024/11/10
15:17 UTC

1

Feedback on site CSS and styling

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/

0 Comments
2024/11/07
19:24 UTC

1

Is it possible to integrate C++ code within a Django web application or project?

.....

0 Comments
2024/11/03
16:16 UTC

2

If I build a web application using both Django and PHP, which one would generally perform better in terms of speed and why?

...

2 Comments
2024/11/02
14:26 UTC

1

Question about crime developer tools

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??

2 Comments
2024/10/31
08:26 UTC

1

Looking for a dotNet, ASP dev to help with a project I am working on

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.

2 Comments
2024/10/29
16:17 UTC

7

JetBrains Makes WebStorm Free for Non-Commercial Use – A Game-Changer for Web Devs!

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/

0 Comments
2024/10/24
14:28 UTC

2

I uploaded my first website on hostinger but it is not showing when i open the url

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.

4 Comments
2024/10/21
13:05 UTC

1

website update for GC company

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.

6 Comments
2024/10/17
19:15 UTC

1

Starting out on frontend

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!

3 Comments
2024/10/16
13:10 UTC

1

Need help to setup a wordpress like dashboard

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.

5 Comments
2024/10/15
05:25 UTC

0

VSCode Theme Generator with Sacred Geometry color schemes

🎨✨ 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:

  • Interactive theme creation with real-time preview
  • Sacred geometry-based color generation (Fibonacci, Golden Ratio, Flower of Life, and more!)
  • Syntax highlighting preview with actual code samples
  • Easy sharing and discovering of community-created themes
  • One-click export to install directly in VSCode

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! 🎉

0 Comments
2024/10/13
16:46 UTC

1

Lamp - a curated collection of open-source web assets for developers.

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

0 Comments
2024/10/12
14:32 UTC

4

I made a game in php

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!

0 Comments
2024/10/12
03:35 UTC

1

How to Prevent DoS Attacks on Your Web Application

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.

What is DoS?

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:

  • Triggering unhandled exceptions that crash your application with a single request
  • Exploiting vulnerabilities that cause your application to spawn an excessive number of threads, exhausting your server's CPU
  • Consuming all available memory through memory leaks or carefully crafted requests

Common Misconceptions About DoS Prevention

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

Effective DoS Prevention Strategies

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.

1. Implement Rate Limiting

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);

2. Handle VPN and Proxy Traffic

Attackers often use VPNs and proxies to bypass IP-based rate limiting. Consider these strategies:

  • Use IP reputation databases to identify and potentially block known proxy/VPN IPs
  • Consider implementing progressive rate limiting: start with higher limits and reduce them if suspicious patterns are detected

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);

3. Implement Browser-Based Bot Prevention

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;

Open Source Solutions

  1. FingerprintJS - Browser fingerprinting library to identify and track browsers
  2. hCaptcha - Privacy-focused CAPTCHA alternative
  3. Cloudflare Turnstile - Non-interactive challenge solution
  4. CryptoLoot - Proof-of-work challenge implementation

Commercial Solutions

  1. Akamai Bot Manager - Enterprise-grade bot detection and mitigation
  2. PerimeterX Bot Defender - Advanced bot protection platform
  3. DataDome - Real-time bot protection
  4. Kasada - Modern bot mitigation platform

4. Implement Strong Authentication

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);

5. Never Trust User Input

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
	}
);

Actionable Steps Summary

  1. Enable Cloudflare DoS protection for your frontend application
  2. Implement rate limiting on your APIs, accounting for VPN/proxy usage
  3. Use authentication tokens whenever possible
  4. Validate all user input, including body parameters and HTTP headers
  5. Regularly perform penetration testing and security training for developers

Additional Resources

Remember: Security is an ongoing process. Stay informed about new attack vectors and regularly update your protection mechanisms.

0 Comments
2024/10/11
10:14 UTC

1

Struggled with MongoDB Replication, but This Guide Saved Me!

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!

0 Comments
2024/10/08
12:45 UTC

1

Built this tool after struggling with hard to navigate and overly technical docs

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! 🙌

0 Comments
2024/10/03
19:48 UTC

2

Requesting help with two interactions

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:

  1. Load the homepage on desktop and navigate to the services section.
  2. Hover over one of the service boxes to trigger the animation.
  3. Scroll to the top of the page, and switch to dark mode by toggling the toggle next to the nav menu.
  4. Scroll back down to the services section.
  5. Observe the primary text being invisible and the background staying on the previous mode's color.
  6. This can also be observed in reverse, i.e. starting in dark mode and switching to light mode.

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!

1 Comment
2024/10/03
19:44 UTC

2

Rising technologies for websites?

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?

1 Comment
2024/10/02
10:36 UTC

1

Why do we minify and obfuscate our code? No, really

0 Comments
2024/09/29
15:55 UTC

4

Learn front end or back end ?

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é

5 Comments
2024/09/29
18:35 UTC

5

Free tools for website traffic and demographics

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?

0 Comments
2024/09/29
08:50 UTC

4

Google IDX

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?

3 Comments
2024/09/27
00:45 UTC

5

Should I choose frontend or ASP.NET?

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 😃

0 Comments
2024/09/21
19:28 UTC

Back To Top