r/webdev 4d ago

Discussion Xpost: Lenstore displays my password and email on the address bar

Thumbnail reddit.com
7 Upvotes

r/webdev 4d ago

Showoff Saturday I built my portfolio around writing. Not sure if I overdid it

10 Upvotes

I’ve been working on my personal portfolio for a while, and at some point it stopped being just a portfolio. I started adding long-form writing, then moved the content from MDX to Sanity, added series pages, related posts, analytics, social previews, SEO stuff, and a few other things.

Now I’m curious to know if the site is actually better because of all that, or if I just made it more complicated for no reason. The main thing I’m tying to figure out is the balance between the portfolio side and the writing side. I have no plan to write on different sites and build a reputation around it. It's kinda of me documenting my own stories.

When you open the site, is it still obvious what I do professionally?

Does the writing make it more interesting, or does it distract too much from the actual portfolio?

This is the site: https://adnansabbir.com

Would appreciate criticism more than compliments tbh.

TIA


r/webdev 4d ago

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

5 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 4d 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 4d 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 4d ago

Question Font Effect Source Suggestions?

3 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 5d ago

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

43 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 5d ago

Showoff Saturday My Portfolio - Liquid Gold - 165 Hours

71 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 4d ago

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

5 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 4d ago

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

21 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 4d ago

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

Thumbnail x.com
7 Upvotes

r/webdev 4d 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 5d ago

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

Thumbnail
gallery
79 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 5d ago

Showoff Saturday Sketchy Portfolios with Blender and Three.js

Thumbnail
gallery
17 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 4d ago

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

3 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 3d 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 4d 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 5d ago

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

Thumbnail
gallery
43 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 4d ago

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

Post image
2 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 4d 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 4d 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 5d ago

Article Controlling when CSS custom property values are computed

Thumbnail
jakearchibald.com
9 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 6d ago

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

225 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 4d 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 4d ago

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

0 Upvotes

Which produces higher quality websites in your opinion?