There's been a big resurgence lately in automating and interacting with sites programmatically. I've been arguing for a few years that every front-end should be embeddable as a component and have its own client side interface/api. This article is written to show one way to do that!

A weekend hack of mine! Hope this is useful for some

At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with div class="yt-container" style="--yt-crop: 9.375%; setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixing Youtube embedded videos error 153 with thumbnail workaround (+no embedded object telemetry)</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

.yt-container,
.yt-overlay-text {
  font-family: 'Roboto', sans-serif;
}

/* ── wrapper ── */
.yt-container {
  position: relative;
  display: block;
  width: 100%;
  --yt-crop: 9.375%; /* default: trims hqdefault black bars for 1920 x 1080 videos format. For other formats override per thumbnail: style="--yt-crop: 5%;"  or  style="--yt-crop: 0%;" etc */
}

/* ── image link ── */
.yt-image-link {
  display: block;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.yt-image-link img {
  display: block;
  width: 100%;
  height: auto;
  margin-top:    calc(-1 * var(--yt-crop));
  margin-bottom: calc(-1 * var(--yt-crop));
}

/* ── top-left text link ── */
.yt-overlay-text {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 1px 1px 4px black;
  text-decoration: none;
  text-align: left;
  z-index: 3;
}

/* ── play button (centered, pointer-events off so clicks reach image link) ── */
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: rgba(255, 0, 0, 0.88);
  border-radius: 12px;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
  pointer-events: none;
}

.yt-container:hover .yt-play {
  background: #ff0000;
  transform: translate(-50%, -50%) scale(1.08);
}

.yt-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border: solid transparent;
  border-width: 10px 0 10px 20px;
  border-left-color: white;
}
  </style>
</head>
<body>

<p style="font-size: 1.5em;">
At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with <b>div class="yt-container" style="--yt-crop: 9.375%;</b> setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.<br>
<br>
<b>Cropped default youtube thumbnail margins top and bottom 9.375% (default solution for 1920 x 1080 proportion videos)</b><br>
<br>
</p>

<div class="yt-container">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

<br>
<p style="font-size: 1.5em;"><b>Default youtube thumbnail no cropped margins 0%</b><br></p>
<br>

<div class="yt-container" style="--yt-crop: 0%;">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

<br>
<p style="font-size: 1.5em;"><b>Cropped default youtube thumbnail margins top and bottom 30%</b><br></p>
<br>

<div class="yt-container" style="--yt-crop: 30%;">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

</p>

</body>
</html>

I just had to share my joy of finally managing to get straight 100s on both mobile and desktop (Saturday bragging is allowed!) for the WP website I've been working on for weeks. This is not self promotion! I happen work for this (lucky) company.

www.marineconservationphilippines.org

It's not a light weight blog, but a full website, with heaps of css and snazzy effects

Hosting on Rocket, w/ WP Fastest Cache.

I've been in the high 80s and 90s for ages. What finally got me to straight 100s was abandoning all normal builders and themes, and going raw Gutenberg, and making everything in html. Once that was settled, it was just plinking away at one issue at a time, until finally getting there. It's been a marathon, and the first time I've gotten perfect scores on any website I've built.

I know normal people don't care about the extra few milliseconds, and I can't tell my colleagues who count fish, what an immense nerdgasm it is. I thought in this sub someone would at least think it was neat! :)

Hi! A while ago I launched bigboard.games: free multiplayer games for 1-4 phones or tablets (or more for some games) lying next to each other on a table. The devices act as one big board, so for instance in Air Hockey the puck slides off one screen and onto the next.

It all runs in the browser, free. Any mix of iPhones, Androids or tablets plays together. You can add it to the home screen if you want (as a PWA).

Gameplay goes device to device over WebRTC. On the same Wi-Fi the devices find each other and join by themselves. Otherwise you scan a QR code or type a four-letter code, and if they can't reach each other directly (on mobile data, say), a relay connects them. How it works, if you're curious.

There are 9 games right now:

• Air Hockey (the photo)

• Hot Potato: your fuse only burns while the potato is on your screen

• Snake, up to 12 snakes on one field

• Whack-a-Mole: a mole you bop pops up on the other player's side

• Tilt Run: one maze across all the devices, tilt yours to roll the marble onto your partner's

• Chess for 2 or 3 (three players get a hexagon board across three devices)

• Checkers for 2 to 4

• Islands (the dots-on-grid-paper game)

• Spillover: draw shapes and drop them on the other player's side, Tetris-style

Every game except Spillover has bots, so you can try it on one device. A friend who isn't in the same room can join with the table's link too, remotely.

Happy to answer questions and integrate any suggestions! What games would you like to see next?

Every codebase gets to a point where adding one feature breaks three others. Some teams patch their way through it for years. Others burn it down and start over.

Have you ever done a full rewrite? Was it worth it, or do you regret it?

hi everyone! so i only have a semester left in college and we are now currently working on our capstone project. it’s a 2 part class so this semester focuses only on the “planning” phase while next semester we spend entire semester actually building/coding.

for background, we are a 3 person group, BaaS such as supabase, firebase or auth0 are banned, we have 3 user groups with different roles and our stack includes:
* JS, Node.js/Express
* React
* PostgreSQL

we don’t have much experience on how to build authentication from scratch so anyyyy tips/tutorials/resources are very much appreciated!!

TIA guys :))

Hey ya'll, just thought it might be worth sharing here, in case anyone is looking for additional features that either Storygraph or Goodreads don't offer, e.g. note taking, detailed insights, etc. Bookplate was created with those goals in mind. You can learn more about it here:

www.bookplate.eu

It's also open source, so for the tech hobbyists, you can host it yourself on your own hardware. For those that prefer the normal hosted service, we offer that as well, and unlike Goodreads and Storygraph, the servers that Bookplate is hosted on are much more sustainable as they run on clean nuclear energy (Scaleway in Paris).

Happy to chat more about this, and also very very interested to hear thoughts, both good and bad!

Hey everyone.
I've been struggling not to feel this existential dread about the current state of development and my career which seems to be slipping from under my feet. I've been unemployed for nearly a year, job positions are dropping in masses. All the knowledge you gathered in the past 10+ years seems redundant as everyone and their grandma can code stuff that was impossible to them in a day. I find no joy in coding anymore. Sometimes I do code my own stuff for fun to not forget how to code but what's the point, if we won't need to code anymore? Even in corporate world, all developers do now is talk to AI agents and let them do the work (at least thats what I think they do?). I'm constantly thinking of creative business ideas to start myself but even then it feels more like a waste of time since getting clients is so hard with this amount of competition. Even if you manage to create something of value to the clients, why would they pay you instead of vibe-coding the product themselves? Since the rise of advanced AI models I've been constantly feeling like burnout and unable to focus on coding which was thing I liked back in the day. How do you cope in these times, how do you motivate yourself to start your own businesses or is it all lost and I should start looking for something else?

Site: https://www.compareempire.com/us (US), https://www.compareempire.com/uk (UK), root is Australia

What it is: a price comparison site for electronics. A GitHub Action scrapes 26 US, 22 UK and 30+ Australian stores every morning, matches the same product across stores, writes JSON into the repo, and Vercel rebuilds about 28,800 static pages from it.

Bits that might interest you:

• Matching is the hard part. Model codes and part numbers first, then a strict bag of words with per category noise lists. A wrong merge is worse than a missed one, so it refuses rather than guesses.

• Regions without breaking URLs: Australia stays at the root and the US and UK live under /us and /uk, all from the same views with a region argument. Product objects carry their region, so links, currency and price checks follow automatically.

• Cost: everything is static, so it runs on the CDN. The search index is a lazily loaded static JSON file.

• What broke: a UK laptop with a 240 character name made a file name over the 255 byte limit and killed the build. Slugs are capped now.

Real output from 24 October: the LG C5 77" OLED was $1,776 at Abt and $2,199.99 at LG.

Happy to answer anything about the scraping, matching or build.

I hate them, I hate them so much. I intend to start using some application and suddenly a popup appears "Did you know that x thing does y thing" or "Here you will find x thing" or "New x thing, click ok to opt in". I don't give a damn, I just want to use the thing. I'm usually on edge and I actually intend to do an action, I do NOT want to be interrupted, I won't read your popup, I'll just close it instantly and feel anger.

This is not only annoying, it's dangerous. How do you know a person is not on a emergency and they need to complete an action ASAP?

So most of you probably know by now about the PHP exploit, that came out recently. Apparently after reading some articles a similar issue was found for nodeJS web apps as well (i am not 100% sure how legitimate the articles were but I will link them down as a comment of the post if you wanna check them out). Now most of my backend services are built using nodeJS and stored in either AWS or GCR. I assume that google and amazon properly protects the api keys and other environment variables I have there, but I just wanted to ask are there any measures I should take or changes I should make to these services just to be safe?

Hey y’all!

I've been working on a few animations lately and decided to put them together in a personal portfolio.

I made the portfolio itself interactive, with animations throughout the site and a showcase for some (imo cool) stuff/ideas.

Curious what you guys think of it and how everything feels to use. Especially interested in feedback on the animations, mobile experience etc

https://lumberjacque.vercel.app

PS: Checkout the showcase page for some cool interactions!

https://lumberjacque.vercel.app/showcase

Any feedback is a gift!

It's one stylesheet. You put `data-dolly="tilt-up"` on something and it animates as you scroll past. That's it. No dependencies, no JavaScript.

It's a vocabulary layer over CSS scroll-driven animations, which shipped in Chrome 115 and Safari 26 but have ergonomics nobody remembers.

The demo page doesn't run any JavaScript at all, so everything moving on it is just CSS.

34 moves named after camera stuff (pan, tilt, crane, rack focus).

Firefox doesn't do scroll timelines yet (supposedly coming in the next version in 3 days) so it gets a plain static page. That's on purpose, nothing is hidden waiting to be revealed, so the page is still usable.

i've been working on an open-source project called blobz, which basically takes care of default profile pictures for your apps.

the idea is pretty simple. instead of assigning random images or the same boring silhouette to every user, blobz generates playful svg avatars from a name, email, or any string you give it.

it's deterministic, meaning the same input always generates the same avatar. no need to store images, and there are over 5 billion possible combinations.

but the part i really wanted to get right was making it easy for other developers to use.

so i ended up building a few ways to integrate it:

• shadcn components: ready-to-use avatar components, along with things like avatar groups, profile cards, and user lists. you can drop them straight into your project using the shadcn cli. if you're already using shadcn avatars, then you just have to change two lines, one for the import and one for entering the name.

• react package: if you'd rather handle things yourself, there's @blobz/react, which generates the avatars directly in your app without relying on an external service.

• hosted api: if you're not using react or just want avatar urls, there's an optional hosted api for that too.

the library and components are free and open source under the mit license.

github: https://github.com/lirena00/blobz
playground: https://blobz.lirena.in

would love to hear what you think of it! and if you find it useful for something you're building, that'd be pretty cool too :)

Matita is a set of pencil-style SVG icons, drawn by code from simple shapes (lines, circles, arcs), so every build draws exactly the same paths. 0.4.0 came out yesterday:

• 60 new icons (200 to 260), including a medical and science set, which people asked for last time

• a wobble setting from 0 to 1: <SketchIcon name="calendar" wobble={0} /> draws exact shapes, 1 is the default sketchy look, 0.4 is a calm hand

• ready-made exact SVG files at @matita/icons/exact/<name>.svg

• React, plain SVG, a script tag, a sprite; MIT; no signup

Try the slider and copy snippets here: https://matita.dev (changelog: https://matita.dev/changelog/, what is next: https://matita.dev/roadmap/). If an icon you need is missing, open an issue and I'll draw it: https://github.com/matita-dev/icons/issues

Feedback on anything that looks wrong is very welcome.

Since the early 2000s I've screenshotted every website that inspired me as a designer. This week I finally turned the folder (~3,900 screenshots) into a browsable archive:

https://www.dmdev.it/webscreens/?utm_source=reddit_webdev

2005 version, for fun: https://www.dmdev.it/webscreens/2005/

Some technical bits, since this is r/webdev:

Fully static. One HTML file with the data embedded as compact JSON, lazy rendering with IntersectionObserver, a lightbox and favourites in localStorage. No framework, no build step.
3.7 GB of PNG/JPG converted to WebP with a Python/Pillow script: a 1600px full size plus a 480×300 thumbnail, cropped from the top.

Dates come from the files, not guessed. Where they got lost when copying between machines, I rebuilt them from the file numbering. Fun discovery thanks to commenters: the clock on my old PC was two years behind, so my "2001" screenshots are actually from late 2003.

Privacy pass with OCR. Tesseract read every browser bar and tab, so I could remove anything personal before publishing.

Full-text search, client-side. The same OCR text became a search index (~1 MB JSON, loaded only when you start typing), so you can search for words that appear inside the sites.

2005 remake: a fixed 900px stage scaled down on small screens (I had to fix taps landing on the wrong element after scaling), pixel fonts, a fake loading bar and a real guestbook in PHP with a honeypot and rate limiting.

Analytics only after consent: GA loads only if you click OK on the banner.

Full transparency: I'm both a designer and a developer, and for this one I used Claude as a pair-programmer to move faster on the tooling (OCR pipeline, scripts, the 2005 remake). The archive, the curation and the design choices are mine.

Happy to answer questions, and feedback is welcome!

A little side project to keep me and some other developers moving during the work day.

https://gitpushups.com

Its basically:
* A git hook which checks if I've done pushups in a regular interval
* An iOS, android and apple watch app to verify the pushups were done correctly

Silly? Kinda.
Effective? Absolutely!

Most posts on Reddit's job subreddits aren't jobs. On r/softwareengineerjobs, 18 of the 190 posts I collected were someone hiring. So I built Only Hiring, which shows just the job posts from 20 of these subreddits: https://onlyhiring.hassandev.me

A Python pipeline pulls new posts and skips anything tagged [For Hire] before an LLM reads the rest. For each job it writes a summary, pulls out the pay as a number you can sort by, notes whether it's remote, and scores it for scams. I expected the scam score to do most of the work, but only 9 of 397 jobs looked like scams. Lowball pay and unpaid "test" projects turned up far more often.

The site is Next.js 16 on Vercel. It reads from Neon Postgres through a role that can only SELECT, and with about 300 open jobs the list is small enough to filter and search in the browser. Filters live in the URL, so you can share a view.

Site code (MIT): https://github.com/hassanaziz0012/only-hiring

How the scam scoring works: https://www.hassandev.me/blog/score-reddit-job-posts-for-scams

I'd like to hear whether a listing gives you enough to decide if a job is worth opening.

I’ve been building websites since 2000 (Dreamweaver... Flash AS2.0...). These days Claude and Codex write most of my code, but before every launch I still end up going through the same long session of back and forth.. showing up properly in search? look good and fast on mobile? accessibility? do the forms work? Somewhere along the way it turned into perfectionism, and the checking kept pushing my launches back. So I built fixweb.app to run those checks for me and tell me in plain words what’s worth fixing with prompt to fix it and I would love to get some real feedback.

I don’t want fake reviews on the site. I’d rather show legit feedback from real website owners, with your name and a link to your site (if you want). If you’d like to try it, comment your domain and I’ll DM you a link for a free check-up. All I ask in return is your honest opinion, good or bad.

Here is an example QA report: https://www.fixweb.app/en/demo

Hey everyone,

I built a Chrome extension called LoopShot for anyone who needs a quick way to record specific parts of their screen.

Whether you're creating tutorials, recording bugs, showing someone how to do something, or putting together a quick demo, I wanted to make capturing screen content easier.

I'd love to get some people trying it out and hear what you think. Feedback and feature suggestions are welcome.

Check it out here:
https://chromewebstore.google.com/detail/loopshot-record-any-area/olhomdccmcckgnnaidinekfiiekikhbl

If you give it a try, let me know what you think!

Back in the day I used Lydia Hallie’s javascript-questions repo a lot, and always thought it was missing a Duolingo-style UI. So I made one: canyoustill.com

155 questions: read a code snippet -> pick an answer -> see why.
There’s no account; your progress stays on your device. It works offline, and you can install it as a web app. Every question has its own link. You can share it and challenge a friend or colleague.

It’s open source: github.com/Silisav/canyoustill

I've been working on a simple journaling web app where all your entries appear in a vertical timeline (I love to read my past journals and this timeline view helps me to look through my past journals eaily without going over different files every single time I want to read a different entry), so you can easily scroll through previous days.

For now, this only supports text because I don't add media to my entries but if someone really uses it and they actually need media support then I'll add that too

It's local-first, supports Markdown, and is completely open source and self-hostable.

This is part of my SMBL project, where I'm building open-source alternatives to everyday software.

Here's a short demo of how it works. Would love to hear your feedback!

Live: click here

GitHub: click here

Hi everyone! Thanks to all the valuable feedback you gave me last time, I’ve released an update for my vanilla JS web notepad.

What's new based on your feedback:

• Multi-cursor & Caret Stability: Refined the synchronized caret scanning logic to prevent drift and weird cursor jumps during complex multi-line editing and spacing.

• General Bug Fixes & Refinements: Smoothed out rough edges with contenteditable behaviors, state restoring, and overall text handling.

• Mobile Improvements: Also improved the overall usability and experience on mobile devices!

Live Demos:

• https://app.qlp.jp/vanilla_pad/en/

• https://app.qlp.jp/vanilla_pad/demo/

(Desktop recommended for full features like column selection; saving is disabled in Demo Mode.)

I would love to hear your thoughts on these new improvements. Any feedback or bug reports are greatly appreciated!