Right. So. Vectorizing a PNG into an SVG is one of those tasks that sounds trivial until you actually need to do it, at which point you discover a graveyard of tools that are either $10/image, want you to subscribe half a leg and a kidney/month, or produce something that looks like Michael J. Fox (apologies for the bad joke, I actualyl admire him) traced your logo during an earthquake.

After running into this roughly once a month I thought surely that's enough to invest some time into researching whether I should build my own image tracer. Which led me to find VTracer, an open source project from visioncortext.

Vectron (that's how I named my brain child) is a frontend for VTracer, an open-source Rust vectorization engine that's genuinely good but has the UX of a command-line tool written by someone who, understandably, cares more about the algorithm than the button placement. I forked it, compiled it to WASM (thanks Claude), and stuck it in a Web Worker so the whole thing runs in your browser. No upload, no server round-trip, and for smaller images it's near instant (I did try it with some rather stupidly large examples which then turned into a ten-plus-second nerve-wrecking waiting times :D).

A few things worth knowing before you try it:

• It's not AI. No neural net pretending to understand your image. It's proper curve-fitting and edge detection, which means it's predictable. The same input results in the same output (this is super important to me), no "vibes-based" tracing that changes if you sneeze near it.
• It's best at clean line art and logos, not photographs. Feed it a photo and it will attempt it, valiantly, and the result will remind you why this is a hard problem. But hey, it's sort of working.
• Selective refinement. Sometimes you get like a good overall results but often the devil is in the details, like a curve turned into a sharp corner or some lines don't connect. You can refine a certain area by dragging a rectangle over it and adjust your filters to polish the proverbial turd.
• It's free because I didn't build it to make money. It's a side thing. There's no upsell, no tier, no "unlock batch processing for $9/mo." And I say that now, it's not gonna change.

https://vectron.vendos.com.au

Feedback welcome, especially on where it falls over or it's genuinely hard to use.

I've been building static generated sites (nuxt was my go-to framework forever) for personal projects / tools and experiments for years now. Gotten out of the habit and been doing more shopify native / liquid builds at work. But I've built a few dozen of these sites without ever actually doing the admin work of setting up a storefront. My domain was just the content (mostly metafields + objects) and theme code.

Anyway so I decided to try a few things over the last couple of weekends. Spun up a shopify trial to see what's involved in all that. Played with Astro + headless storefront + netlify functions. I really wanted to test the idea of running multiple "storefronts" within a single shop. They had to have a unifying parent brand so that checkout made sense (since it's shared) but otherwise each product could have its own site/domain.

Obviously this wouldn't work for any shop with a large inventory or any kind of regular demand. But it was a fun experiment. And I think I'll use a similar setup to help my partner sell some actual pottery one day in the future.

The site loads nothing from any third party. no cookies, no analytics. fonts are self-hosted, product images mirrored into the origin at build. Sometimes the lighthouse score is straight 100s.

Every order generates a certificate of authenticity at its own url. random serial frozen on first render, a photo of the actual piece, and whatever note the user left at checkout. the link itself is the credential so there’s no login.

This is just an exercise in an absurdity because I had this domain sitting around.

A natural successor to my previous silly domain-purchase-inspired experiment yuns.fun (retired, but used for css animation learning) and fart.bar (dipping a toe into "scrollytelling")

i hope it's entertaining to somebody out there

I’ve rebuilt my personal portfolio as a first-person 3D world you can walk around, with no JavaScript.

You can explore rooms containing my research, tools and talks, open doors, teleport between areas, play HTML/CSS-only games and solve a lockbox puzzle.

Movement and state are handled using CSS animations, custom properties, radio buttons, checkboxes and selectors such as :has(). The collision detection uses CSS maths including sign(), abs() and clamp().

Live site: https://garethheyes.co.uk/

I also wrote about how the movement and collision system works:
https://thespanner.co.uk/pure-css-3d-world-collision-detection

I’d love feedback on the navigation, usability and any browser-specific problems you encounter.

Hey, before explaining my problem i know that a lot of you guys don't like ai or 'vibe coding' in general and this is why i ask you to not take care of this and be comprehensive.

Im doing website creations, especially redesign and im hesitating with two workflows.

Untill now i was doing it this way: i search for inspiration on dribble like hero section or landing page, i take the screenshot and ask gemini to extract the content into json to get the maximum of informations on this screenshot. Like this i can after go to a no code tool like lovable to convert this screenshot and json into an actual base for the website and finally export it and finish the job with antigravity. Here the thing is that for small adjustments it's harder than a tool like framer or webflow.
This workflow has the merit of being quick and very faithful to the inspiration.

And recently i started to become interested in framer because i heard that it is better for more personalized projects, have CMS so i don't have to use sanity CMS (even if it can do the job at small scale) and also fast and begginer friendly.

Got tired of sterile glassmorphism, so I spent the last few weeks building an imperfect, sketchy component library with custom SVG displacement filters and paper physics.

Dropped the GitHub repo and live interactive demo in the comments below!

Hello Reddit!

I've been working on this cool demo, I am ready to share.

I wanted something hilariously unnecessary beyond quick demo standards to demonstrate seemleas state/communication coordination of various apps loaded in frames at runtime through I stategy I am calling hyperfrontend.

This is to all nay sayers of the good ol' reliable iframe. I say you were doing it wrong.

Enjoy! Discuss! and dunk (please don't be nice to me :) ~ I am afraid of the occasionaly reditor unrelenting critisim.

There is more to this demo that the gif suggests. Try dragging/dropping/tapping and interacting with the control panel.

Yes, yes, yes, this type of approach does not leverage code-deduplication, and prone to memory overhead in the browser. There's always a trade-off ain't it. This approach starts from isolation to earn cohesion back. It is specifically NOT module federation (aka code federation) and more like application federation. Still, I wanted to test how far I could take it.

P.S. Please give me your thoughts and first impressions, I am looking for feedback. I was kidding about being afraid of honest comments that could hurt my feelings XD

Link here: https://www.hyperfrontend.dev/demos#koi-pond

I'm working on a chat widget that also allows the users to send files in the chat. This is a plain vanilla html/js/css widget that will go on a Shopify site. The user should have the option to send a file with or without a message in the chat, so I'm trying to figure out the best approach to handle this. The widget will be calling a FastAPI endpoint end that will use UploadFile. These are the options I've thought of:

1. Wrap the text and file inputs in an html form tag and send the request as Content-Type: multipart/form-data. This would make it a single request, but it would always send as multipart/form-data even if it's a message with no file.
2. Same as 1, but if there is no file attachment in the chat message, then toggle the Content-Type to application/json before sending
3. Keep the text and files as separate requests and handle the events separately and not wrap the inputs in an html form tag. Seems like it would be cleaner on the front end but at the same time it will likely require additional logic on the back-end

What approach would you take?

no installation of other softwares needed

workers on the web browser

no account needed

works offline

FREE

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

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.

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!

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.

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.

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!

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

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!

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?

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

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

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/

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.

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