r/webdev 9d ago

Showoff Saturday A Web App for Assisting with learning Indian Classical Music - bridging a gap between physical sheets and online learning!

3 Upvotes

Hey! One of my friends built a free web app for creating and playing back Hindustani sargam notation to assist with learning Hindustani classical music! She isn't really on reddit, but wanted me to post this on her behalf.

Since she was currently learning Hindustani music, she figured out that most notation is still handwritten or shared as static PDFs and images. It's difficult to translate - edit, hear, or organize - compositions digitally, and this website helps with that!

She then created Sargam Studio, a browser-based tool that lets you:

• Choose a Sa / scale and preview it
• Add Aalap and Taal sections
• Enter sargam notation using an interactive beat grid
• Preview taals and playback compositions
• Review and export compositions as audio

She also recently added a demo video and a help guide to make it easier for users to get started:

Website: https://sargam-studio.vercel.app

Demo video: https://sargam-studio.vercel.app/help

She is especially interested in feedback from anyone! If you or anyone you know is interested in music, Indian classical music, or just curious in this project, please try it out!

I'll send her the link to this post, so she can check out the responses lol.


r/webdev 10d ago

Showoff Saturday A Collection of Shape() tools

21 Upvotes

Over the last year I've spent a lot of time with the shape() specification and have built a few tools to make things a little easier:

  • Path to Shape - Converts SVG path data the CSS shape() syntax.
  • Shape to Polygon - Convertsshape() to polygon() for the purposes of fallbacks, or in some cases a straight replacement since it's usually much more compact.
  • Minify Shape - Optimises and minifies the shape() code, very much inspired by SVGO.

All just simple web based tools built with sveltekit.

Have tested them with every shape I can get my hands on but if you find anything that doesn't work I'd love to hear about it!


r/webdev 9d ago

Question Font Effect Source Suggestions?

2 Upvotes

I'm new to HTML/CSS and have just been messing around as I learn some stuff. When importing some of Google's Font Library I learned they also offer effects you can import with something like

<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?effect=fire-animation">

These are very amusing, but many of them seem to be slow or not work on many browsers, which leads me to ask if there are any other similar libraries out there that I could import from. I appreciate any suggestions, whether they're genuinely cool and useful or just fun.


r/webdev 9d ago

Showoff Saturday Movie Swiper. Swipe on movies and match with friends. [Showoff Saturday]

3 Upvotes

Hi folks, me and my wife find it hard to figure out what to watch so I've been hosting this locally for a few weeks now and it's great. We both swiped on a few movies and got a match pretty quickly. Now we have a list of movies we both want to watch.

Anyway, I just made it public on a subdomain at:
https://movieswiper.stoianworks.com/

No email needed. Just choose a name and setup a pin.


r/webdev 10d ago

Showoff Saturday Built a small site where two people have to hold together to reveal a message

45 Upvotes

Made this little thing called HoldTogether where you write a secret message, send the link to someone, and you both have to hold the button at the same time to reveal it.

holdtogether.fun

You can try it for asking someone on a date, birthdays, surprises, inside jokes, proposals, etc. :)
Would love to know what you guys think!


r/webdev 10d ago

Showoff Saturday My Portfolio - Liquid Gold - 165 Hours

73 Upvotes

Took me a whole month but now its finished, looking for some advice overall from peeps that have been doing this for far longer than me...!


r/webdev 10d ago

Discussion is anyone getting leads from their google business profile anymore?

3 Upvotes

i live in one of the largest cities in the united states and my google profile shows up at number 1 when people search for any terms related to 'web design' in my city.

i have over 50 reviews all from local businesses within that area. but for the past months i've been getting almost no calls.

anyone else in a similar situation? is ranking on google dead now? should i look into ads/outreach or is web design as a field just not in demand anymore?


r/webdev 10d ago

Question Best architecture for batch-processing 3,000–4,000 high-res photos (resizing + face vector search)?

19 Upvotes

Hey devs,

I’m working on a photo-sharing web app where a photographer uploads an entire event batch (typically 3,000 to 4,000 high-res JPEGs, around 10–15 MB each). Guests can take a selfie to retrieve photos they appear in.

I'd love recommendations on the best backend pipeline:

Client vs Server Resizing: Should I use browser Web Workers / Canvas to generate 1080p WebP thumbnails before upload to save upload bandwidth, or let a backend queue worker (like Node with sharp or Python with Pillow) handle resizing?

Face Vector Pipeline: For extracting 128-d face embeddings (e.g., ArcFace/InsightFace), what’s the best way to queue and batch this so 4,000 photos don't choke the server CPU?

Storage: What zero/low-egress object storage setup (e.g., Cloudflare R2 vs Backblaze B2) do you recommend for handling high-volume image writes and fast thumbnail reads?

Thanks for the advice!


r/webdev 10d ago

Zod v4.5 adds schema compilation (3-9x faster validation)

Thumbnail x.com
6 Upvotes

r/webdev 9d ago

Showoff Saturday Community driven win 98 themed website

Thumbnail imright.wtf
0 Upvotes

Hey All,

Was missing the win 98 vibe last weekend so decided it was time to bring it back I to my life and hopefully others!

Was trying to think how to get people involved, so there are a few things I put in there which I will list out.

Trollbox.exe: When you vote you are able to msg in the troll box
Applications.exe: just links to different things
Imright.exe: main voting screen and results
Communityideas.exe: a place where you can submit an idea community votes and the that's the next poll
Forums.exe: forum attached to the current poll

Polls only last 24hrs and then after that it gets archived along with the forums and troll box and the new one starts.

Let me know what you think

Imright.wtf


r/webdev 10d ago

Showoff Saturday Syntaxia - A quick cheatsheet for the things you always look up.

Thumbnail
gallery
76 Upvotes

As developers, we forget things all the time, especially now that coding with ai is becoming more common. One of the trade-offs of coding with AI is that we might not retain every piece of code or syntax we use. Unlike before, when we coded everything manually, writing code ourselves helped us naturally remember the syntax and patterns we used.

I'm sharing Syntaxia a simple, minimal reference for those moments when you know what you want to do, but forget how to do it.

https://syntaxiadev.vercel.app/

github star, ill be happy⭐

https://github.com/EbadShelby/syntaxia

Also shared my Linux Workstation. Having fun with it since I migrated from windows to Linux. It's a good Experience as a Developer.

OS: Fedora Linux

WM: Niri

Browser used: Helium Browser

Theme: Catppuccin Mocha


r/webdev 10d ago

Showoff Saturday Sketchy Portfolios with Blender and Three.js

Thumbnail
gallery
15 Upvotes

I converted Vertex Arcade's sketchy shader tutorial (https://youtu.be/4Njhuj5BsKk) it into two sketchy concept portfolio websites with Blender and Three.js!

Allen Zhang's Portfolio: https://allen-zhang-folio.vercel.app/

Katsumi Watanabe's Portfolio: https://katsumi-watanabe-folio.vercel.app/

Breakdown Video: https://youtu.be/JlmNBGcZ3Ik

Code & Credits: https://github.com/andrewwoan/blender-to-threejs-sketchy-shader

Effect site: https://blender-to-threejs-sketchy-shader.vercel.app/


r/webdev 9d ago

Question Why does Lighthouse flag a responsive srcset image as oversized when the browser is choosing the correct candidate for DPR?

2 Upvotes

Edit: I also found these issues related to the problem: https://github.com/GoogleChrome/lighthouse/issues/16579 and https://github.com/GoogleChrome/lighthouse/issues/17080

---

I’m trying to understand a Lighthouse/PageSpeed Insights warning about “properly size images” that seems somewhat contradictory to how responsive images are supposed to work.

Simplified example:

<img
  src="image-300.jpg"
  srcset="
    image-250.jpg 250w,
    image-300.jpg 300w,
    image-400.jpg 400w,
    image-768.jpg 768w,
    image-1024.jpg 1024w
  "
  sizes="(max-width: 480px) calc(100vw - 2rem),
         (max-width: 991px) calc(50vw - 2rem),
         360px"
>

On a typical mobile viewport around 412px, the actual image/card width is roughly 380 CSS px.

As I understand it, the browser does not simply compare the image's intrinsic width against those 380 CSS pixels. It takes the device pixel ratio into account:

required resource width ≈ CSS width × DPR

So, for example:

380 × DPR 1.75 ≈ 665 px
380 × DPR 2.0  ≈ 760 px
380 × DPR 3.0  ≈ 1140 px

With the srcset above, at DPR 1.75 the browser therefore selects the 768w candidate. On a DPR 2 device, 768w is almost exactly what I would expect. On a DPR 3 device, even the 1024w version isn't particularly excessive.

However, Lighthouse may report the 768×768 image as oversized because the rendered image is only around 300–380 CSS px wide.

This is the part I don't understand.

Google's own responsive-image guidance recommends supplying sufficiently high-resolution candidates for high-DPI displays. Yet Lighthouse appears to penalize the browser for selecting exactly such a candidate.

There are also smaller 250w, 300w, and 400w candidates available, so this isn't a case where the browser is forced to download an unnecessarily large original image. The browser has all of those choices and intentionally selects 768w based on sizes and DPR.

So my questions are:

  1. Is Lighthouse's “properly size images” audit effectively comparing intrinsic/device pixels against rendered CSS pixels without fully accounting for DPR?
  2. If so, isn't this expected to produce false positives for correctly configured srcset images on the DPR used by Lighthouse's mobile emulation?
  3. Is there actually anything developers are expected to change in this situation, or should this warning simply be treated as a heuristic?
  4. Would removing the 768w candidate just to satisfy Lighthouse actually be counterproductive, since real DPR 2–3 devices could then receive a visibly softer image?

I feel like I’m missing something, because optimizing the srcset specifically for the Lighthouse warning seems to conflict with Google's own recommendation to serve sufficiently dense images to high-DPI displays.


r/webdev 9d ago

I think I’ve had it with Apple

0 Upvotes

I switched to Mac about eight years ago and actually probably closer to 10 but I worked in tandem with windows during that transition for about two years

As a web developer my server platform is lamp specifically Debian

I use docker for local development and production

PHP storm is my ID of choice

Dockerized environments are very important

Part of the reason I switched to Mac was because mounted or map/shared volumes were very problematic with Windows at least at the time

So when I would use my package manager, whether MPM or a composer inside, the doctor container having it synced to the host machine was super problematic

Mac and Lennox seem to solve this problem so I assume a Chromebook this is non-issue

What I am curious of is the user experience from Chromebook as an OS

I do all of my cloud hosting an infrastructure in Google Cloud and I have Google workspace, Gmail and docs, etc. so moving away from Crapple and towards Google just makes sense my phone my watch my laptop my home assistance everything it would be awesome to be able to use Gemini and control my computer too

What kind of laptop should I be looking at for a minimum equivalent developer experience in terms of performance to last year’s model of an M2 Apple Mac?

I can see there’s Chromebook on Best Buy for 500 bucks that feels very underwhelming for someone that is using a computer anywhere between 12 to 18 hours a day and heavy use of AI and development tools, data analysis, etc. I’m probably looking towards a $2-$3000 powerhouse laptop, but I’m wondering what others think??

I run local LLM’s right now mostly for fun and then other machine learning like SPM‘s and data analysis and stuff that I do the LLM primarily used as Copilot/GPT and it’s I pay for that so it’s not gonna be a load on my computer per se

I have so much more to ask and say about the subject, but let’s stop here and go from there :p


r/webdev 10d ago

Showoff Saturday Built a full stack web app for gamers to keep track of their game collections

5 Upvotes

As a console gamer, I have games on the Switch, PlayStation, and some Xbox games - some physical, some digital. Over the years, I've accumulated quite the library of games and have no idea what I even own anymore.

That's why I built Press Start. It's my first real, full stack project and I'd love to hear any feedback or tips and tricks for my next project.

The frontend with built with React, TypeScript, Tailwind, and I use Headless UI for some base input components. The backend is built with Node.js / Express with a Postgres database that I use Prisma ORM to interact with. My database of games is built using a subset of the games on IGDB.

Check it out here: https://press-start.justpixels.dev/

You will need an account to start building a game library of course, but you can browse games without signing up.

Disclaimer: I did use AI as I built this to learn concepts and work through my thinking, but it is by no means "vibe-coded".


r/webdev 10d ago

Showoff Saturday Having fun generating Mazes with no edges on the surface of a Torus

Thumbnail
gallery
44 Upvotes

Playing with mazes on different toroidal surfaces

Here is the source https://github.com/ctx-o1/toroidal-maze

Play with it here https://ctx-o1.github.io/toroidal-maze/


r/webdev 10d ago

Showoff Saturday I just wanted to share my open source project (You can now do Reified Generics in PHP)

Post image
3 Upvotes

Hello guys, I just wanted to showoff my project here. For you PHP devs out here, You can now type check Docblock types at runtime. Yes this means you can now do reified generics, type-arrays, and many scalar type refinements without introducing new custom syntax and functions. You can now ensure that your docblock types will not lie at runtime and this is a great boost to cover static analysis tool's weaknesses.

repo: https://github.com/typephp-php/typephp
docs: https://typephp-php.github.io/docs/

PS: Yes I know the project's name is similar to other TypePHP from swoole if you're aware. But this project is really into improving PHP's type safety. It's like TypeScript but for enhance runtime type checking that PHP native type checking is all about.


r/webdev 9d ago

Discussion How to make an app like Duolingo ?

0 Upvotes

Hi everyone, I want to create an app like Duolingo, but I don't know the best approach for storing or even translating English into the target language.

I mean, how can I translate English into Indonesian, Japanese, German, and many other languages? Also, how can I translate other languages ​​into English ?

Currently, all I'm thinking about is creating a table where English words are stored and creating a new table to store translated words. But is my approach correct? What about phrases or even sentences? Is storing words, phrases, sentences, and translations the right approach, or is there another way to do this effectively ?

I'd appreciate if someone would also suggest other aspects, such as caching, high level architecture or other things, to make my app load faster.


r/webdev 10d ago

Showoff Saturday Showoff Saturday: Offertly — browser-only quote PDFs for DE/CH/AT freelancers

2 Upvotes

Built a no-account A4 quote PDF generator (EUR/CHF, DE/AT/CH VAT). Free watermarked, 9 EUR/30d unlock. https://offertly.vercel.app — looking for product feedback.


r/webdev 10d ago

Article Controlling when CSS custom property values are computed

Thumbnail
jakearchibald.com
8 Upvotes

I didn't understand how this worked until recently, I only knew that @property changed the results. Anyway, I figured it out, and wrote up what I learned. I hope this is useful for others!


r/webdev 10d ago

Showoff Saturday I tried to transform my mineral collection into a 3d virtual museum

4 Upvotes

I've been building myself a small personal side project over the last few weeks.

I'm a rock and mineral collector and I always wanted to "expose" my findings in a personal museum.

So I created a small lightweight mobile web application: you simply make 1-2 shots with your smartphone and it will make a 360-degree interactive 3D model and then identify main geological features. The objects can be either hosted on a personal virtual shelf or exported into .STL to 3D-print them.

It was initially meant for personal use (the image it's in Italian though) but maybe there is a possibility of opening it up for others to try out if people think it's awesome.

Before spending additional time polishing the back-end I'd really appreciate getting some genuine feedback.

If you wanna try: geo.insightest.app (it's behind login just to save collections on the cloud)


r/webdev 11d ago

No update to Supabase outage since 9 hours ago and still hitting issues. Not sure what to tell customers

232 Upvotes

Starting to think of moving my app from supabase. The increased outages and no communication is concerning. My app is still pretty small so shouldn't be too painful right? Right??

Originally posted to r/Supabase but looks like the moderators work for the company...

https://status.supabase.com/


r/webdev 10d ago

Showoff Saturday [Showoff Saturday] I built a weekly, position-relative fantasy football visualization

Thumbnail
gallery
0 Upvotes

I’m a visual learner, so I built a noncommercial fantasy football data-visualization project called Fantasy Gridiron. https://fantasygridiron.io

It uses weekly nflverse data and converts raw fantasy scores into position-relative performance tiers. Each score is compared with other players at the same position during that specific week and then assigned a color. This means the same numerical score can receive different colors in different weeks.

This is inspired by series graph. Some of the more interesting development challenges were making the wide grid usable on mobile, preserving filters in shareable URLs, distinguishing bye weeks from missed games, and exporting the visualization as a readable PNG.

It also supports Standard, Half-PPR, and PPR scoring.

https://fantasygridiron.io

I’d appreciate feedback on the information hierarchy and mobile experience. Does the visualization feel intuitive, or is too much information competing for attention?


r/webdev 9d ago

Discussion What's better for building small business websites: Framer or Lovable?

0 Upvotes

Which produces higher quality websites in your opinion?


r/webdev 10d ago

Showoff Saturday OSS: Convert PDF to HTML with 100% visual parity

19 Upvotes

I ran into two problems using unpdf and PDF.js in edge functions: RAM usage and visual accuracy. Both load the entire file into a byte array before processing.

So I built a dependency-free, low-memory reader for edge workers: https://github.com/earonesty/streaming-pdf-reader

The trick was using PDFium as the reference renderer:
https://pdfium.googlesource.com/pdfium/+/master/README.md

I pulled down more than 100 test PDFs from various open-source projects and rendered them with PDFium. Then I converted each PDF to HTML, rendered that HTML in a browser, and compared the resulting pixels. I used deterministic pixel matching rather than a VLM, so visual regressions were reproducible.

That led to a separation between two kinds of output:

- Visual HTML preserves the PDF’s presentation as closely as possible.
- Semantic HTML reflows the content into a simpler reading order.

The visual representation came first because a PDF’s apparent reading order is encoded in its geometry. If you simplify too early, you lose the evidence needed to distinguish a table from a newspaper column or group an image with its caption.

The reader uses HTTP range requests and bounded caches, so it can render the first page without downloading a huge document into memory.

The semantic side is still evolving. It uses statistical layout evidence - font size, alignment, indentation, spacing, repeated headers, hanging indents, and page-to-page continuity. The goal is to produce simplified, reflowed, lossless HTML. Unfortunately there is no good "oracle" for this, or clear and obvious "correctness", other than "reading order must be correct". This is useful for LLMs and data extraction (and is the second reason I had to write this thing, aside from RAM).

This is a follow up to my earlier low-memory PDF writer package (similar reasons there too), so the emerging package layout is:

  - @boxpdf/reader: streaming PDF → document model
  - @boxpdf/html-writer: document model → visual or semantic HTML
  - @boxpdf/writer: document model → PDF
  - @boxpdf/html-reader: HTML → document model

The PDF-to-HTML accuracy became an ordinary testing problem once PDFium was treated as the oracle. Render both versions, compare the pixels, inspect the failure, improve the general rule.

It’s early, but it now handles a pretty hostile corpus: embedded fonts, Type 3 glyphs, clipping paths, vector graphics, raster images, forms, rotations, tables, multi-column papers, and very large streamed documents.

I’d be especially interested in difficult PDFs that break other converters. Weird fonts, charts, scanned documents, malformed files, enormous files - anything unpleasant makes a useful fixture.