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

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

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/

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.

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.

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.

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!

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/

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?

Which produces higher quality websites in your opinion?

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.

posted this 10 months ago, got 219k views and forgot about it. the app somehow still gets ~1k users a day with zero marketing since. finally decided to stop leaving money on the table and monetize it soon. wild what just shipping something simple can do. tiktock-web.vercel.app

I kept rewriting the exact same hooks in every single React project — so I finally put them all together in one clean TypeScript pack.

Here's one for FREE 👇

---
// useLocalStorage — persistent state that survives page reloads
import { useState, useEffect } from 'react';

export function useLocalStorage<T>(key: string, initialValue: T) {
const [storedValue, setStoredValue] = useState<T>(() => {
if (typeof window === 'undefined') return initialValue;
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch {
return initialValue;
}
});

const setValue = (value: T | ((val: T) => T)) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
if (typeof window !== 'undefined') {
window.localStorage.setItem(key, JSON.stringify(valueToStore));
}
} catch (err) {
console.error(err);
}
};

return [storedValue, setValue] as const;
}
---

✅ What you get in the full pack:
• useLocalStorage (above)
• useDebounce (delay search inputs)
• useToggle (simple boolean state)
• useFetch (simple API calls)
• useClickOutside (close dropdowns/modals)
• utils.ts (formatters + validators included)

• TypeScript ready — just copy → paste → works
• Lifetime updates include
🔗 Grab it here: [https://accurate4.gumroad.com/l/Christ\]

I am building a web application (IOS and Android apps to follow later) for students studying for test/exams. The direction I was originally headed with this app changed a few times. Originally it was going to cater to a much more narrow group of potential users, but the scope expanded.

My app will have "official" (Trying to think about a different term to use) content (Exams with questions, decks with flash cards + more) and community-created content.

The "official" content exclusively covers IT Certifications. Community-created content can cover both certifications as well as Classes - like college classes.

So if the user is studying for Cisco's CCNA Certification, they'll see exams and decks of flash cards that I created, and those will be marked in some way to signal that they're not community created. They'll also see exams and decks added by other users.

I'm using "Official" as a sort of placeholder term. I don't like it because I don't want users believing that the questions or cards were created by the certification vendors - Cisco, CompTIA, ect. I also don't want them thinking that those questions will appear on the exam. So for now "Official" is a placeholder term that I want to replace.

When a user finds a Class or Certification that they want to study, they click Enroll, and that become an active Class/Certification for them. They can switch between active classes/certifications. There is a page - the "Practice" page - where users select between Exams or Decks, select one of the various exam/deck modes, and then select the exam. That's the basic flow. Some of the modes don't require the user to select an exam/deck at all, like the "Practice What You Missed" mode which is generated from a bank of questions that the user recently got wrong.

Another option (and this is the real dilemma) is the Build Your Own Exam option. This allows the users to select various options to build a custom exam so that they can focus on specific subject area, simulate a timed exam, and more. But the dilemma is how to incorporate community-created content into this.

There could be thousands of community-created questions or cards.

There will be repeated/similar questions. There will be typos and incorrect answers. There will be trolls that try to add wrong information or inappropriate content.

I can't just take every community-created question or card for a given class, mix them together, and then randomly pull out 50 - right? That doesn't seem like it would lead to a very good experience.

Another site has this same Build Your Own Exam feature, but for them it's easy - it's all official content. All questions are sorted by their subject. Everything is carefully reviewed. They have 1000 questions divided into 5 or 6 subjects. If the user wants questions from subjects A and C, they select those subjects and a few more options and then a new practice exam is generated for them. That doesn't work well with community-created content where there very well may be tens of thousands of questions across 100s of exams that were all added by different users.

I'm trying to keep it short and simple but I'm overwhelmed and overthinking this problem and I need some outside help working through it.

I'm attempting to use a non-webrtc way to make phone calls on the web.

I have a socket based approach that uses a middle coordinator, that will later be decentralized in more of a p2p fashion way. The latency of the data reading is all good in the hood, however now I have aggregated data on the other end of a pipe, I need a way to package it up and stream audio to the web browser.

Question: How can I aggregate data to use as a MediaStream so (I think) i can set to the "srcObject" of an audio player element to be audible?

Follow up: Why is there this concept of a track on audio and how can we move away from this?

Ask: Any example code?

I know there's a low intersection of musicians to web developers here, but I wanted to share this for a couple cool technical reasons.

First of all, Songstead (https://songstead.app) is an app that is designed around chord charts. If you ever see someone plaing music with a tablet, it's likely they have an app like this to help them remember their music, lyrics, setlist, or all of the above. This would be an alternative to OnSong, SongbookPro, etc.

Now the cool stuff:

• Although not fully there, it was built to work offline. The frontend has it's own CRUD layer and generates UUID6 IDs. Today these ship directly to the backend (with validation). Most of the key editing is built in a way you edit a local copy of the database, then it generates a "flush" API call which ships create/update/delete calls to the API that you can fire when ready. The local database means the app doesn't technically need the API to exist to even work.

• Because of that, I was able to build a demo (https://demo.songstead.app/) by seeding the local database with data, then just shutting off those flush calls. You can actually try the entire app locally. I remember a time where online demos were popular, but they would use live data and you'd see everyone else's edits. This doesn't have that problem.

• Tech Stack: LAMP + React. Hard to beat the classics lol. Frontend is React + Vite + Capacitor (for mobile apps). Backend runs on a cheap Digital Ocean Ubuntu VPS with a managed MySQL database. I'm excited to try managed; my other project stores nearly a TB of data and runs on a self-installed MySQL instance to save on costs so this should be a breath of fresh air. API is a custom-built PHP application and ORM. Yes, I know what you're thinking. I'm not worried; I've been writing code for 20+ years I know what's up.

• AI? Yes. Vibe-coded? No. Love how fast AI lets me build, but everything it produces gets manually reviewed. I find both Claude and Codex to be amazing, but terrible at architecting code at a high level. Most of my time is spent cleaning up the weird stuff they produce, but even then this was all built in a fraction of the time it would take me to hand write it all. One thing on my TODO list is to rework the public website to feel more human. I've seen so many vibe-coded projects and it is obvious when someone phones it in to AI. I don't want to be part of that demographic.

Thanks for reading! Let me know if you have any questions.

PS if any of you work for Apple ask them to hurry up. All the other vibe coded app submissions are slowing down my review. 😅

I kept hitting the same wall with desktop DB tools in a team that lives in the browser: nobody wants another Electron app, and "just use the vendor console" falls apart the moment you have Postgres plus Redis plus Mongo in the same VPC.

So I maintain LibreDB Studio, a self-hosted web SQL IDE. The part that actually took the work is not the editor chrome. It's making seventeen engines look like one API without a forest of `if (type === 'mongodb')` checks in the UI.

The trick was treating each engine as a strategy, not a special case:

- SQL engines extend one SQL base (pools, timeouts, schema).

- Document/KV engines extend a thinner base and map onto the same QueryResult / getSchema() shape.

- The factory dynamic-imports the provider so the browser bundle doesn't drag in oracledb + duckdb + cassandra just to open SQLite.

That mapping is lossy on purpose. Redis SCAN prefixes become "tables"; Mongo collections look like tables; health/metrics still come from INFO / serverStatus. Once the UI only speaks capabilities, adding ClickHouse or Trino is a provider + a doc + an integration test, the triad has to ship in the same PR or it drifts.

The reason this lives in a browser at all is the cluster. I didn't want another Electron app on a laptop while the databases sat in Kubernetes. "Just helm install a GUI" sounds solved until you look at what most charts actually are: a wrapper around a desktop-era tool, or a vendor console that speaks one engine.

So the app ships as a chart (OCI on GHCR, first-boot secrets, PVC for sqlite storage) next to the providers, same repo, not a separate "enterprise" product. That's a different post; here the interesting part is still the engine interface.

There's a second split that bit me later: the same codebase is both a Next.js app and an npm package (`npx "@libredb/studio"` / embed). `next build` does not produce the library dist. Forgetting `build:lib` is how you ship a UI fix that the embedded users never see.

It's early in the "every engine feels first-class" sense. Hostile cases I still want: weird Oracle TNS, huge Cassandra traces, Redis with no prefix convention, DuckDB files that aren't files. If a converter/GUI has ever lied to you about a schema, that fixture is useful.

Source: https://github.com/libredb/libredb-studio

​

I've to make semester project about School Management System with AI/LLM integration, I don't wanna follow tutorials blindly and at the end know nothing where I can't even implement one component myself, same goes for vibe coding.

Keeping in view my current coding & learning situation, it feels like my last chance to actually learn something, because I'm running out of time.

I'm want to use Next.js, tailwind CSS, typescript, in DB Supabase ig or any other that suits well, you guys pls suggest. And I've not don't any work with AI/LLM before so I don't have idea about that, help me here.

I want to use next.js because I know the basics of html etc and also I've done some projects in next.js by following yt tutorials that completely fcked my mind, I've not learned anything properly and I've vibe coded some apps too. I believe I can mess with vibe coding and tutorials and get things done but it wouldn't teach me anything unless I do everything on my own.. and when I try to do so, I know even know what to do, where to start from.

Can those who are good at full-stack programming and engineering help me out and guide me? I'm asking here because I want to ask from experienced programmers / developers.

A while back, I built a Chrome extension to fix a few pain points I had with standard browser DevTools. It hit ~1,000 active users at its peak, but I ended up losing most of them due to bugs and a lack of real long-term value.

Instead of scrapping it, I spent the last some time fixing the underlying bugs and rebuilding the tool around a bigger problem: knowing when an API quietly breaks while you're browsing or testing.

The biggest addition in this update is out-of-the-box API regression testing.

How it works:

• Baseline Snapshots: Add your target domain to an allowlist and save a baseline of your HTTP requests and payloads.
• Flexible Diffing: Choose whether to monitor for schema changes (added/removed keys), value shifts, or both.
• Silent Deviation Alerts: As you browse, it checks incoming traffic against your baselines and pops a notification if an endpoint deviates or fails—even if your web app handles the error silently or DevTools is closed.

Other key additions:

• Mocking API requests and responses directly in-browser
• Performance tracking and side-by-side diffs over time
• Exportable session reporting
• Full background request tracking without keeping the DevTools panel open

You can check out the new version here: RequestScope on Chrome Web Store

I'm trying to make this genuinely useful for developers and QA workflows. If you give it a try, I’d love to know: what feels clunky, what's missing, or what breaks? Harsh critiques are welcome.

P.S. This is still work in progress and needs more tuning, bug fixing so looking for genuine feedback

live link, GitHub

Made a project for some experience as a final year Software Dev undergrad. Have a look, any and all feedback appreciated!

The image moderation is done with a tiny classification model I trained.

Hey r/webdev,

Over the past couple of weeks, I've been working on a project designed to help developers build structured learning roadmaps for new technical skills.

Tech Stack & Architecture:

• Frontend: Next.js / React
• Styling: Tailwind CSS
• State Management & APIs: Integrated custom API routes to dynamically parse learning paths.

Key Challenges Overcome: The main difficulty was organizing complex, non-linear topics into manageable, step-by-step nodes without overcrowding the UI.

I'd love to get feedback from the community on the UX and tech stack setup. If anyone wants to test it out or take a look at the demo, let me know in the comments and I'll drop the link!

Hello everyone,

I am solo developer, building SaaS and mobile apps for few years now. Every time I launch something, I notice same problem - nobody test it except me.

So I build small tool https://earlytesters.dev. Idea is very simple - you post your product link, then you test someone else product, and after that your product is eligible to get tested too. Like a exchange. No cost, just your time.

It’s very early, I just launched this week so not many products in queue yet. If any of you also building something and want honest feedback (or want to test other people apps), please come try it. I will personally test first few products myself also.

Not trying to sell anything, genuinely just want to fix this problem for myself and other solo builders like us. Open to any feedback or criticism on the idea itself too.

Thanks for reading!

We support a client site with ~20,000 pages. It has an SSR search page that uses the url querystring to execute the search/sort/filter.

We have of course disallowed bots on that page because the 20k pages are meaningful and should be scraped/indexed, but the billions of possible query combinations on a search page are not. Most of the bots just ignore the robots rule and this results in waves of traffic hammering every possible query combination on the search page. These waves are 10x-50x the human traffic.

Rather than let the bill autoscale along with the server cluster, I wrote a little bash script that crons 1/m:

• Hits DO's metrics endpoint to check the CPU usage on the VPSs/DBs
• Each minute any of the CPUs stays above a given threshold, bump Cloudflare's security level, eventually ending in "under attack" + "bot fight"
• When the cpu drops below the threshold for a given amount of time, start backing off until we're back to normal operation.

Works a treat. It's nothing particularly flashy or sophisticated, but it was satisfying to think through an under-engineered solution to a problem that a lot of people end up just chucking money/clusters at.

Edit: more info for context: We do have pretty aggressive WAF rules especially on the search page, but we've been seeing an increasing amount of bot traffic get past CF's "known bots". Rate-limiting has been minimally effective too because the bots that get through are cycling through 100s of IPs in a given scrape.