Hi everyone,

I'd like to integrate a transparent video of around 20 seconds on my Webflow site, while optimizing the page's performance for a better score on speed tests (especially for SEO). Here's what I've tested so far:

• GIF: Size too large (17 MB), severely impacts performance.
• APNG: Similar size to GIF, so problematic for performance.
• WebM: Small size and good quality, but doesn't handle transparency properly on Safari.
• JSON (Lottie): I have a JSON animation that I currently host via LottieFiles, which points to the 448 images hosted on GitHub. This seems to be the best solution in terms of size and transparency, but I'm having integration difficulties.

Main problem with JSON:

• Webflow supports JSON files in its assets. However, when I try to embed it as a Lottie Animation element or via a <embed> tag, the animation doesn't display properly on my site.
• I'm looking for a solution to integrate my JSON file directly without depending on LottieFiles, in order to reduce external dependencies and improve loading performance.

Do you have any recommendations or ideas for solving this problem? :))

Thanks

Oliver

I'm looking for a payment processor for my website. I'm just going to use the payment links for now as I only have 2 products and I do not understand the backend. Which payment processor would be most recommended? I've been having a look around and seen so many horrible reviews for stripe and paypal saying their accounts were randomly banned and money (in the thousands) stolen. That and their trustpilot star ratings being below 2, I'm quite put off. However I do want one that looks secure and is decently well known but that won't rip me off, it is a small business. Any suggestions?

Also out of curiosity, in the future I would like a proper checkout, as in customers add things to the basket, go to the basket then checkout. How hard would it be to learn how to do that ? Are there any resources I could learn from? And how much would it cost to pay someone to do it for me?

Hi everyone,
So I've been working on a web-application for the past few months. I started developing it on my PC and then made it responsive on laptops, tablets, android phones, and now IOS phones.

In general, I seem to be running into far more issues on IOS devices than I was with android. For one, IOS devices prevent the automatic playing of videos when the device is in battery saving mode. But there are a number of other issues that are making the user experience for IOS users very poor and borderline unusable. Additionally, I don't own an IOS device so I'm relying on tools like LambdaTest which is making it more difficult.

I'm wondering if it's ever ok to not support IOS devices. And how would you prevent IOS users from attempting to use the web application? I know it would significantly cut the userbase but I'd rather that than users having a frustrating time.

It does have quite complex functionality so maybe it makes sense to only support on PCs and laptops?

Has anyone else ever had to do something similar?

https://preview.redd.it/hni19rha4j2e1.png?width=1778&format=png&auto=webp&s=453d6dd4816d67a14a2b162c502ad2bb1eee96b5

Hey guys I officially have released V2 of vueframe its been completely rebuilt from the ground up with major performance improvements, with a brand new mascot.

https://github.com/vueframe/vueframe

a star would be amazing + I would luv your feedback :)

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

https://blackfridaydevs.com/

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 🎛️

Examples 🎯

With Props

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

License 📄

MIT © vueframe

🌟 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

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:

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

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.

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:

• IPsum - Updates daily with known proxy, VPN, and malicious IP addresses
• FireHOL IP Lists - Comprehensive collection of IP lists, including proxies and VPNs
• MaxMind GeoIP2 Anonymous IP Database - Commercial database that identifies proxy, VPN, and TOR exits
• I-BlockList - Maintains various IP lists including proxy and VPN addresses

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

• OWASP DoS Prevention Cheat Sheet
• Express Rate Limit Documentation
• JWT.io - Learn about JSON Web Tokens
• Cloudflare DoS Protection Documentation
• Web Security Academy by PortSwigger

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

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:

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!

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é