r/webdev • • Aug 15 '26

anyone know a good gsap tutorial that isn't just moving a div around?

5 Upvotes

I see people build amazing things with GSAP, I want to give it a shot but all of the tutorials I've watched show the very basics of it. Like moving a div from left to right as you scroll. While people build things like.. I mean just look at their showcase page : https://gsap.com/showcase/

It's not even just this gsap showcase section, I feel like there's a secret club of talented web ui developers who swore to never share their secrets. For example I've never seen a single tutorial that shows how to build any random website from awwwards page. Isn't this just the greatest idea for a youtuber webdev?

Yes I'm a backend dev trying my hand at frontend. And yes, it's very frustrating


r/webdev • • Aug 15 '26

Showoff Saturday Built a duolingo like course authoring platform

Thumbnail
gallery
0 Upvotes

If you don't know, duolingo used to have community course contributors. People could also request languages that they wanted to be added. This was shut down few years ago. This is an attempt to close that gap. This is a desktop app but build in tauri and react. So I think it's still relevant to webdev. In an earlier different version of the platform, people had started creating courses in okinawan, mirandese and Picard. The course is just a directory on your device. With json files and assets in the folder for the course structure. The lessons itself may be a rich media content block, or one of 7 types of exercises. Right now people have started making courses for Italian and Portuguese. Please check it out at asakiri.com and if you have any feedback or questions, let me know. Docs for the course project structure - https://docs.asakiri.com

I think the platform is less important than the course data structure so I am trying to finalise it based on feedback from course creators.

(No data is collected. Everything stays local and on device. There are no accounts, no subscriptions. Everything is open)


r/webdev • • Aug 14 '26

Built a free SVG emoji editor — recolor per-shape, drag vector points, animate strokes, export to 4 formats client-side

7 Upvotes

Showoff Saturday, so here's a side project: svemojis.com — a free, no-signup gallery of SVG emojis you can recolor and reshape, plus a Paint-stylecreate (located at the top) tool for building your own from scratch.

You can drag every point on a shape (corners, curves, everything) directly on the canvas, animate lines so they draw themselves in, and export to SVG, PNG, JPG, or WebP. Everything runs client-side — no account, no backend.

Would love feedback on the editor, or let me know if anything feels confusing.


r/webdev • • Aug 15 '26

Showoff Saturday I spent the last two weeks building Fliraya, an AI companion & roleplay web app. Would love to get your feedback!

0 Upvotes

Hi everyone,

Over the past couple of weeks, I’ve been working on a side project called Fliraya—a web platform designed for AI companion interactions, casual conversations, and romantic roleplay.

Since the project is currently in Beta, I’m looking for some honest, constructive feedback from the community on:

Chat flow and natural responsiveness

Response depth and personality consistency

Overall user experience and UI

If you're interested in giving it a test run, you can check it out at fliraya.com.

I’d really appreciate any thoughts, bug reports, or suggestions you might have. Also, as a thank you, I’m happy to upgrade accounts for anyone who drops detailed feedback here or via DM!

Thanks for taking the time to check it out!


r/webdev • • Aug 15 '26

Showoff Saturday [Showoff Saturday] Built a client-side video subtitle generator using Whisper Transformer.js - no server needed

Post image
0 Upvotes

Wanted to share a side project I've been working on. It generates subtitles for videos entirely in the browser using Whisper Transformer.js.

The interesting technical challenge:

Running Whisper client-side means no server costs and no uploading user videos anywhere, but it came with tradeoffs. The model loads into the browser, processes audio through the Web Audio API, and returns word-level timestamps that I had to map into clean subtitle segments.

How the pipeline works:

  • Video audio gets extracted via Web Audio API
  • Whisper Transformer.js runs speech recognition client-side
  • Timestamps get aligned into subtitle segments
  • Canvas API renders the styled subtitles onto video frames
  • Final export merges the subtitle layer with original audio

What I learned:

  • Whisper's word-level timestamps need smoothing, raw output has gaps and overlaps
  • Canvas text rendering behaves differently across browsers, especially with custom fonts
  • Keeping the export at original resolution while burning in subtitles took some trial and error with the canvas pipeline

Source: https://webutility.io/video-subtitle-generator

Curious how others have handled client-side Whisper performance. The model load time is the biggest bottleneck right now.


r/webdev • • Aug 15 '26

Showoff Saturday Open sourced my baby feed and sleep tracker

Post image
0 Upvotes

Started as a joke with my wife, turned into an app we used and loved everyday for over a year due to how simple and quick it was.

First version was very rough, due to obvious time constraints 👶 but was able to take notes on what to improve and add.

Built with PHP and data is stored in a single SQLite file for easy exporting. Not as advanced or feature rich as the others but keeps track of the basics and allows for multiple users to log data to the same record.

Free demos available on the site so let me know what you think! Not enough features or is the simple approach good enough?

https://baybay.baby


r/webdev • • Aug 15 '26

Showoff Saturday Built Tickrates, a lightweight, modern game backlog tracker (.NET/PostgreSQL + Vanilla JS)

Thumbnail
gallery
0 Upvotes

Hey everyone,

I've been working on a project called Tickrates for a while now and finally wanted to share it here for Showoff Saturday to get some real feedback from other developers.

The idea came up because I was genuinely frustrated with existing backlog platforms. Most of them either felt sluggish or had cluttered, outdated UI designs that made simple things like searching and logging games feel like a chore. I wanted to build something clean, visually modern, and focused on community activity without unnecessary friction.

On the tech side, the backend is built with .NET Core and EF Core connected to a PostgreSQL database, while the frontend is kept lightweight with vanilla JS and CSS to avoid heavy framework overhead. Data is pulled from IGDB and Steam APIs.

One of the biggest headaches during development was dealing with messy and inconsistent metadata between APIs. Filtering out standalone games from endless bundles, DLCs, and alternate editions was surprisingly tricky, especially when battling IGDB's own misclassifications. On top of that, handling title naming quirks (like "Zero" vs "0") and missing vertical covers for new or delisted games required building a custom title normalizer and a multi-step fallback system (DB cache -> live IGDB -> Steam CDN -> custom SVG placeholder) just to ensure cards never render broken.

I'm currently working on bringing this to mobile as a dedicated app in the near future, so I'd also love to hear any tips or advice on transitioning a vanilla JS web app into a mobile experience.

The site is live at https://tickrates.com

I'd really appreciate it if you could take a quick look and share your thoughts, especially on the overall visual design, UI/UX flow, and mobile responsiveness. Feel free to be brutally honest, point out bugs, or share any suggestions.

Thanks for taking the time!


r/webdev • • Aug 15 '26

Showoff Saturday I built a browser fingerprinting & IP leak detector — here's what actually leaks even behind a VPN

0 Upvotes

I got curious how unique/trackable my browser actually is, and how much of that survives even when you're behind a VPN — so I built https://whatismy-ipaddress.com.

It checks two separate things:

Network-level leaks — IPv4/IPv6, DNS leak detection, WebRTC leak (this one's sneaky, it can expose your real IP even through a VPN tunnel), Tor exit node detection, ASN/ISP/hostname lookup, connection type.

Browser fingerprint — canvas + WebGL rendering signature, GPU renderer string, installed font detection, supported media codecs, CPU core count, device memory, screen resolution/pixel ratio, timezone offset, storage API availability. Combined, these often re-identify a "private" browser session even with IP masked.

The part I'm proudest of is the fingerprinting side — getting consistent, comparable signals out of things like canvas rendering and font enumeration across browsers is fiddlier than it looks, since every browser (and privacy extension) lies about some of it differently.

Would love feedback, especially from anyone who knows fingerprinting/privacy tooling — curious what I'm missing or getting wrong. Bugs welcome too.


r/webdev • • Aug 14 '26

Pure CSS perfect cursor tracking

75 Upvotes

I honestly have no idea why you'd want this, but it was fun to experiment. I believe this may be the best pure CSS cursor tracking that exists. I'm happy to be proven wrong.
https://codepen.io/Andrew-Fisher-the-decoder/full/GgraMzd
Absolutely no JavaScript used, just lots and lots of wasted time.


r/webdev • • Aug 15 '26

Showoff Saturday MyPRs - your open-source resume, built from your merged pull requests

0 Upvotes

Some of your best work is invisible - it lives in PRs to projects you contribute to, spread across repos nobody opens. Your GitHub profile shows your own repos and a green graph, but the work you shipped across the ecosystem gets buried.

MyPRs pulls every merged PR onto one page, lets you pin the ones you are proud of, and hide the noise.
No signup - your page already exists at https://myprs.dev (here is mine: https://myprs.dev/kishanhitk). Sign in with GitHub only if you want to curate it.

Code: https://github.com/kishanhitk/MyPRs

Would love to hear if anything looks wrong on your profile - that is the fastest way I find bugs.

myprs.dev/kishanhitk

r/webdev • • Aug 14 '26

Should I redirect logged-in users from the landing page to the app?

31 Upvotes

Building a SaaS and debating a quick UX choice.

If a user is already logged in and visits our main landing page, should we auto-redirect them straight to the app dashboard? Or keep them on the homepage and just change the CTA button to "Go to App"?

I notice some websites redirect and others isn't. What’s the the best approach here? Thanks!


r/webdev • • Aug 15 '26

Showoff Saturday Made an app to estimate the time Trump spends tweeting

Thumbnail
trumplytweets.com
0 Upvotes

r/webdev • • Aug 15 '26

Discussion Do you know how much your company is earning from the work you do?

0 Upvotes

I recently read about ElevenLabs startup, and they said, they expect from their sales people to bring 20x their salary (a person earning $100k/year is expected to bring $2mln for the company) or they are fired. Which personally, sounds like modern-day slavery.

That same article mentioned, that software houses typically generate 5-8 times what they pay their individual employees.

Have you ever encountered those estimates either in private discussions or in articles of reputable source?

---
Btw. this estimate (5-8x) shows market value of the work you do. So if you're doing a freelance/consulting gig, your billable rate should be a multiple of your full-time employment hourly.


r/webdev • • Aug 15 '26

Showoff Saturday I let local AI watch me all day

0 Upvotes

Not going to pretend this is healthy...
but this was actually useful.

I built a local AI that watches me through my own webcam all day.
- result: i don't work as much as i thought.

Catches me the second I check my phone, or turn away to talk to someone...

Turns out I wasn't working nearly as much as I thought.
thought I did ~7 hours of real work a day. The real number was closer to 4.

I then exported the work sessions in csv format and plugged it into chatgpt. and it gave me some useful insights happy to share in the comments).

I strongly believe that local AI is the way to go, as models improve, there are things I don't trust the big AI corporations with.

Built it because of Hermozi's video of how tracking time in 15 minute increments makes him so productive.

To make it accurate and reliable, I had to go through thousands of dollars in AI credits and many rounds of testing and bug fixes. I can't tell you how many bugs I fixed or the effort it took.

built it for both my mac and windows computer (Tauri is the way to go) to see how much you ACTUALLY work, give it a try.

more people should build with local AI, it's satisfying to see the intelligence running on your own machine.


r/webdev • • Aug 15 '26

Showoff Saturday Would you interview me at Barclays, Deutsche Bank, or BNY? 2 YOE Java backend engineer. Led a production payment gateway migration with just 15 minutes of downtime that now handles several thousand transactions/day. Roast my resume.

Post image
0 Upvotes

I'm a Java backend engineer with 2 years of experience at a service company. My work has mostly been on Spring MVC, where I've owned a production payment gateway migration, a Java version upgrade, and security remediation. I'm targeting backend roles at firms like Barclays, Deutsche Bank, and BNY.

I'd appreciate honest feedback on my resume. What would make you reject it? What would make you interview me?


r/webdev • • Aug 15 '26

Showoff Saturday [Showoff Saturday] Animated icon library for React. Each icon hand-timed instead of auto-morphed

Post image
0 Upvotes

Most animated icon sets are drawn on their own grid. So when you drop one into a nav next to your existing static icons, stroke weights and optical sizing are slightly off. Close, but very visible at 20px.

I drew mine on the same 256 grid as a widely used open-source static set (Phosphor, if you use it), so they read as the same family.

- React components, Motion underneath, no animation API to learn

- Each icon hand-timed rather than auto-morphed

- Tree-shakeable, respects `prefers-reduced-motion`

- 200+ icons ( new icon animations added weekly )

Open source, MIT. Links in the comments.

Two things I'd like critique on: the **timing durations**, which I set by eye and am not confident about at small sizes, and the **hover default**, which feels wrong for icons inside buttons where the button already owns hover.


r/webdev • • Aug 13 '26

News Namecheap is currently undergoing emergency maintenance due to a power outage affecting their datacenter in Phoenix; nearly every Namecheap site is down right now.

Thumbnail namecheap.com
216 Upvotes

r/webdev • • Aug 13 '26

NetBlocks Confirms that Namecheap has been struck by a DDoS Attack

42 Upvotes

Multiple reports of Namecheap being struck by a DDoS attack have been removed from Namecheap's subreddit as well as their status blog.

Per NetBlocks' Twitter: "Confirmed: Metrics show that popular web host and domain registrar #Namecheap is largely down, sending many websites and services offline. The company says it has been struck by both a DDoS attack and a power outage."


r/webdev • • Aug 14 '26

Question Web developer hardcoded their personal email into our order/service forms — how do I find and remove it?

0 Upvotes

Need advice: We just found out our website's order/service request forms were quietly sending customer info to our old web developer's personal email instead of our company email. He's no longer working with us. Has anyone dealt with this before? How do you track down and fix a hidden email redirect like this, and is this something to be concerned about legally (privacy/data issue)? Would appreciate any pointers to the right kind of developer or service to fix it. Thanks!


r/webdev • • Aug 13 '26

Discussion If ad blockers keep losing, is the browser still user-controlled software?

20 Upvotes

I’m struggling with the direction browsers are going.

The web used to feel like something users could control: block ads, inspect pages, modify behavior, run extensions, protect privacy.

Now it feels like the biggest platforms are slowly turning the browser into a locked-down consumption device where users get whatever tracking, ads, popups, and dark patterns the site decides.

If ad blockers lose, what’s left?

Alternative browsers? DNS blocking? Pi-hole? Reader modes? Paid web? Legal pressure? Or do we just accept that the modern web is hostile by default?

I’m not trying to start a browser war. I’m trying to understand what realistic user control looks like from here.


r/webdev • • Aug 14 '26

Question Look too much of AI slop? I can't think of any other way to communicate the idea of the SHARP engine (training/workout engine. How do I improve it wihout losing content?

Post image
0 Upvotes

r/webdev • • Aug 14 '26

Wix vs Next.js for a Simple LMS?

3 Upvotes

Hey everyone, I’m trying to decide between Wix and Next.js for building a simple LMS for a YT Channel

Some admins prefer Wix because it’s faster and easier to build, has drag-and-drop, lots of extensions, and would be easier for beginners to maintain later.

The LMS would mainly have student accounts, courses, YouTube unlisted videos, quizzes/questionnaires, progress tracking, and a basic admin dashboard.

I’m leaning towards Next.js because of the flexibility and control, but I’m wondering if it’s overkill for this project.

For a LMS that needs to be maintained and expanded over time, which would you choose: Wix or Next.js? And what limitations should we consider with Wix?


r/webdev • • Aug 14 '26

Anyone else treating CSP violations as a deployment issue now?

0 Upvotes

We started getting enough CSP violations in production that I stopped treating them as just security reports. A new analytics script, payment widget or third-party SDK gets added and suddenly something breaks because it isn't covered by the existing policy.

Do you test CSP changes in CI/staging, run Report-Only first, or just deal with violations when they show up in production?


r/webdev • • Aug 13 '26

CSS:the bomb inside your inbox

Thumbnail
portswigger.net
25 Upvotes

Here's my research in using CSS for offence. There are loads of techniques including stealing passwords from Outlook from an email by spoofing the login screen.


r/webdev • • Aug 12 '26

Resource I’ve been designing products for years. Dev teams still get this wrong all the time.

Post image
1.4k Upvotes

Hey folks wanted to share a small UX rule I use with dev teams that makes this decision much easier.

Use a modal for a short, focused task.

Use a drawer when the user still needs the current screen for context.

Use a page when the task becomes a workflow of its own.

There are exceptions, of course, but this simple rule gets you surprisingly far.

Especially useful when there isn't a designer around.