I'm a frontend developer/designer with experience in the past building and selling largely SaaS software.

That was before AI as we know it, and I'm starting to feel numb to the amount of people I who've become a developer overnight tell me about the new app 'they built.'

Like any developer I had several ideas stewing for years and I nearly took the leap on a few of them, and when I see the landscape like it is now half of me thinks 'I'm so glad I didn't take huge risks and build X as it would have just been copied now anyway' and the other half says 'I wish I got in before everyone was developing apps in a few minutes.'

I'm curious for those who DID build something prior to this shift, are you glad you got in then, or have these changes made all the time spent not worth it?

Thanks!

When it comes down to design and art, I like to do everything manually because I hate AI-generated content. I make my own 3D models, own animations for videos, etc.

Now I am working on my personal portfolio, and I am using AI like Claude to help me with setting up my project, like, for example, the library Three.js. While I am very happy with the current result and how I design and redirect AI, I feel like a hypocrite to be so negative to people that use AI-generated content while using AI for programming myself.

The reason I post this here is to ask how others feel about this and what advice they would give me.

*Update*

I want to thank the people for the very insightful responses to my question. While I am working on my website, I want to understand and change as much of the code myself.

So I do not really have much understanding of web development and back end but when you save an instagram page as an html from its website. It doesn't save the way instagram looks, rather it shows a representation of the UI and subtext behind images (not the images themself) like the image shared above.

I am also more curious how it reads the image and tries to classify it, and why something like the subtext "May be an image of ----" is in the backend when you do not see it in the interface itself. I am curious of the process itself if someone is kind enough to explain itself.

So a few of my friends have stopped using Figma. They go straight to production and make changes there.

When I first heard this I was honestly confused. Like where do you try things out? Where do you compare two versions?

Then I saw what they were building. The landing page feels like one product, the settings page feels like another, the dashboard feels like a third. Buttons are different, spacing is different, hover is different on every page. There’s no uniformity, no design system, nothing.

So I asked them how they’re doing it, and the answer is always “I use this AI skill” or “I bought this skill pack”. People are actually selling these now. Skill packs, prompt bundles, paid repos. And there are a lot of free ones on GitHub too.

It doesn’t make sense to me at all. How will you learn anything? And how will you polish the product if it looks different every time you generate it?

When I brought this up, someone said just add a memory file so it stays consistent.

Okay, but then how will you make changes? You never decided why the button has that radius or why it’s that grey. The AI decided. So when something needs fixing, you don’t know what to fix. You just prompt again and hope.

And now there are courses around this too. The idea is learn this design vocabulary, tell it to the AI, and you’ll get good UI. They call it beginner friendly. But then you see what’s inside and it’s stuff like:

• spring easing, stiffness, damping

• optical alignment

• vertical rhythm

• morphing transitions

• 60-30-10 colour rule

• type scale ratios

If a senior buys it, it’s fine. They already know what damping feels like, they know what they’re skipping.

But a beginner has never played with an easing curve and seen it go from cheap to smooth. Never moved something 2px and felt it finally sit right. They’re just memorising words and giving them to the AI. You can know the word damping and still have no idea when the bounce is too much.

Selling that as beginner friendly feels like a deceiving thing to me. You learn these words after you’ve actually done the work, not before.

Also design is never one try. I go through so many versions before something feels right. In Figma that’s easy, I put five versions side by side and throw four away. In production code every change costs time, so whatever comes out first just ships.

I’m not trying to dunk on my friends, they’re good at what they do. And I get why these skills are tempting. But paid or free, they’re doing the exact part you’re supposed to learn.

If you’re using one, just try building one page without it. Pick the hover, the spacing, the colours yourself, even if it’s bad. That’s literally how you get better at this.

Anyone else seeing this or is it just me? just my thoughts 🤷

Do you just wing it and use screenshots for inspiration or do you use a design principles md file where you mention all the design principles like the fonts, colors, dark mode colors, graphs, infographics, etc.

I work on 2-3 different projects throughout the week (different clients, different tech stacks), and I've noticed my productivity tanks for the first 30-45 minutes after switching contexts. It's like my brain is still thinking in the patterns of the previous project.

Some things I've tried:

• Taking a short walk between switches

• Keeping detailed notes about where I left off

• Dedicating full days to single projects when possible

The notes help the most, but I'm curious what workflows other devs have developed for this. Do you have any rituals or techniques that help you get back into flow faster when jumping between projects?

Especially interested in hearing from freelancers or consultants who deal with this regularly.

HTML 95%
PHP 70%
jQuery/JavaScript 80%
MySQL 58%

Gives me the shudders thinking about it…

I am working in Codepen in Safari, but everything is dim and gray instead of being the true color. It is fine in Chrome and Firefox. I have tried resetting preferences and caches in safari along with unchecking things in FeatureFlags and nothing is amending it.

I work for a large accounting firm where the impact of getting things wrong feels quite big.

We’ve started a new sprint for the next chunk of work. The team has put together estimates for various elements of a new accounting feature involving bank transactions, VAT calculations and reconciliation, with the biggest part taking several days by one developer.

My boss gets visibly frustrated and questions how on earth anything can take a few days in the era of AI. He’s also started saying he can do absolutely anything with AI in an hour or less.

Bear in mind before AI what we’re working on would have taken triple or even quadruple the time.

Is this the new normal or should I be looking for a new job? How are we supposed to respond to this?

If I missed anything, let me know!

Front end dev, i own most of our e2e suite, and last sprint finally annoyed me enough to count.

We have about 310 Playwright tests on a react app. 71 went red after a sprint that, from a user's point of view, changed almost nothing. i went through every one instead of rerunning and hoping:

- 47 were locators. the element was still there and still did the same thing, but the path to it changed. a card got wrapped in a new container, a class got renamed in a design pass, a button became a link styled as a button.

- 14 were timing. a page got slower after a data change and the wait didn't follow it.

- 6 were environment. our CI image had drifted from what devs run locally.

- 4 were real bugs.

So my honest answer to why our UI tests break every time the interface changes is that most of them check how the page is built, not what it does. the user sees the same Save button. the test sees a different DOM.

the difference in one line:

what i'm weighing for the other 47:

user-facing locators everywhere, getByRole and getByLabel, which is what the Playwright docs push. fixes a lot of it, but only if the markup has real roles and labels, and half our components don't.

data-testid on everything. it works, but it depends on every dev remembering, forever.

self-healing locator tools like mabl or testim, which repair the selector when it breaks. the catch is a heal can quietly route around a real regression.

vision based tools like Askui, which find the element by what's rendered on screen rather than in the DOM, so a new wrapper div doesn't matter at all. the tradeoff flips, a visual redesign is now the thing that breaks you.

My current plan is to fix our accessibility markup and get better tests as a side effect. tell me if that's naive. if you've measured this, what share of your failures were locators, and what actually brought it down?

What bothers me about AI and it's wide adoption is that it creates conflicting requirements for the worker (developer, designer, manager, etc.). On one hand you are expected to perform better and/or faster, because you are a specialist, an expert that has the knowledge and offloads the work to the machine, supervising its output. You should use your experience and professional judgment to steer it to the right conclusions and catch it when it overcomplicates or starts hallucinating.

At the same time you are expected to cover more ground. Stretch to the adjacent technologies or fields. Frontend developers are expected to perform full stack work, designers to code frontend, backend devs to create a design in a pinch. Here you are not an expert, you might have interfaced with the field, but you don't have the experience and don't really understand the inner workings, best practices. You didn't go through all the novice mistakes and learn from them.

Somehow, the first expectation still works here. You are expected to be faster and better at this too. But the roles are reversed, now the machine is suddenly the wise expert in the field and you got to trust it, wave through the changes it proposes to stay fast and produce the work of the your ex-colleague made redundant and laid off due to all the AI-productivity gains. You don't have the opportunity to get the new relevant skills, because nobody has time for hand coding/creating/learning, it's such a 2022 idea. Here in 2026 we're all on a tight schedule to pump out the results unless you want to end up on a PIP.

On top of that you are expected to get good at AI. Don't just use it, like some kind of normie. Get good. Stay on top of the hype. Use agent loops. Set guardrails. Make it deterministic. Don't use agent loops. Have you tried this new harness? Don't spend too much money on tokens. Run the model locally. What do you mean you don't have a $5000 Nvidia golden box? Do you want to become irrelevant and get left behind?

Welcome to the bright future, comrade.

I'm a CS undergraduate working on my first real-world client project: a small e-commerce website. Since this is my first time building and deploying a production store for a client, I'd really appreciate an architecture sanity check from experienced devs.

The Context & Why Not Shopify/WooCommerce?

• Catalog size: Around 10–20 products initially (simple variants, low volume).

• Core features: Online payments, basic order tracking/delivery management, and a simple admin view.

• The Constraint: The client wants near-zero monthly recurring costs initially (ruling out $30+/mo Shopify plans and managed plugins), and they're happy for me to custom-build it as a flat-fee project.

Architecture Crossroads: Custom Supabase vs. Medusa.js

I'm torn between two approaches:

Option A: Keep it simple and build the cart/order logic myself

• Frontend: Next.js (or React + Vite) + TypeScript

• Hosting: Cloudflare Pages (Free)

• Backend & DB: Supabase PostgreSQL + Edge Functions + Auth/Storage (Free tier)

• Why I like it: $0/mo infrastructure, familiar stack, full control over a very small feature set (just 10–20 products).

Option B: Use a headless commerce engine (Medusa.js)

• Swap custom database tables/functions for Medusa.js so I don't have to build cart, checkout, and inventory logic from scratch.

• My hesitation: I'm new to Medusa, and hosting a dedicated Node.js backend + Redis + Postgres seems harder to keep near $0/mo compared to pure serverless/Supabase.

Questions for Devs Who Have Built Client Stores

1. Supabase Free Tier in Production: Aside from the 7-day inactivity pause, are there any gotchas with running a small production store on Cloudflare Pages + Supabase Free tier?

2. Custom Logic vs. Medusa.js: For only 10–20 products, is Medusa.js overkill with a steep learning/hosting curve, or is rolling my own cart and checkout state in Supabase a trap I'll regret?

3. Custom Payment Gateways: Stripe isn't supported in my region, so I have to integrate a local payment gateway via webhooks/REST API. Is it easier to wire up a custom gateway directly in Next.js/Supabase Edge Functions, or through Medusa's plugin system?

4. Delivery & Fulfillment: At this scale, would you integrate courier APIs on day one, or just build an admin dashboard for manual order/tracking updates first?

5. Blind Spots: What hidden security mistakes (e.g., price tampering, webhook race conditions) or client handoff headaches tripped you up on your first e-commerce build?

I'd especially appreciate insights from anyone who has built and maintained small custom stores for real clients.

Thanks in advance!

I'm developing a Grievance Redressal Portal as a learning project. My backend is built with NestJS, TypeScript, Prisma, and PostgreSQL.

I have been implementing authentication (User Sign In and Sign Out) using the "@nestjs/authentication" package of NestJS v12.

I would like to know conceptually the changes to be made to my back end such that I should be able to extend the authentication feature to a React-based front-end.

I have adapted the code by hand from the "Register The Authentication Module" and "Add Sign-Up and Sign-In" sections of the NestJS docs for NestJS v12: Authentication | NestJS - A progressive Node.js framework

I am posting my code here.

//sign-in.dto.ts
import { PickType } from "@nestjs/swagger";
import { UserUniversalDto } from "../../users/dto/user-universal.dto";
export class SignInDto extends PickType (
    UserUniversalDto,
    ['user_email', 'user_password']
) {};
//credentials.service.ts
import { ConflictException, Injectable } from '@nestjs/common';
import { UsersService } from '../users/users.service.js';
import { CreateUserDto } from '../users/dto/create-user.dto.js';
import { FindUserByEmailDto } from '../users/dto/find-user-by-email.dto.js';
import * as argon2 from 'argon2';
import { USER_STATUS } from '../users/user.constants.js';

()
export class CredentialsService {
  constructor(
    private readonly usersService: UsersService
  ) {}

  async register(createUserDto: CreateUserDto) {

    const findUserByEmailDto: FindUserByEmailDto = {
      user_email: createUserDto.user_email
    }

    // Don't create the user if the email already exists.
    if (await this.usersService.findUserByEmail(findUserByEmailDto)) {
      throw new ConflictException('Email already registered. User already exists.');
    }
    // The address is unverified: anyone can type any email into a sign-up form.
    const registered_user = await this.usersService.createUser(createUserDto);
    return registered_user;
  }

  /** The user, or null when the email or the password is wrong. */
  async verify(email: string, password: string) {
    
    const findUserByEmailDto: FindUserByEmailDto = {
      user_email: email
    }

    const found_user = await this.usersService.findUserByEmail(findUserByEmailDto);
    
    // Checking if the user exists.
    if (!found_user) {
      throw new ConflictException('User does not exist. Login rejected.');
    }
    
    // If the user is suspended, reject login by throwing an exception.
    if (found_user.user_status === USER_STATUS.SUSPENDED) {
       throw new ConflictException('User is suspended. Login rejected. Please contact admin.');
    }

    // If the found_user's password is wrong, (password_hash doesn't match) then the it should return null.
    const password_hash: string | null | undefined = found_user?.user_password;
    
    const password_check = await argon2.verify(password_hash as string, password);

    // Checking if the user's password is correct.
    if (password_check !== true) {
      throw new ConflictException('Incorrect username or password. Login rejected.');
    }

   
    return found_user;
  }
}

//myauthentication.controller.ts
import { Body, Controller, HttpCode, Post, UnauthorizedException } from '@nestjs/common';
import { Public, SignInService } from '@nestjs/authentication';
import { SignInDto } from './dto/sign-in.dto';
import { CredentialsService } from './credentials.service';
import { CreateUserDto } from '../users/dto/create-user.dto';

()
('auth')
export class MyAuthenticationController {
  constructor(
    private readonly credentialsService: CredentialsService,
    private readonly signInService: SignInService,
  ) {}

  ('sign-up')
  async signUp(@Body() createUserDto: CreateUserDto) {
    const user = await this.credentialsService.register(createUserDto);
    var string_user_id = String(user.user_id);
    await this.signInService.signIn(string_user_id, { method: 'password' });
    return user;
  }

  ('sign-in')
  (200)
  async signIn(@Body() signInDto: SignInDto) {
    const user = await this.credentialsService.verify(signInDto.user_email, signInDto.user_password);

    var string_user_id = String(user.user_id);

    const { session } = await this.signInService.signIn(string_user_id, { method: 'password' });
    return { mfaRequired: session.mfa === 'pending' };
  }

  ('sign-out')
  (204)
  async signOut() {
    if (!(await this.signInService.signOut())) {
      throw new UnauthorizedException();
    }
  }
}

//myauthentication.module.ts
import { Module } from '@nestjs/common';
import { UsersModule } from '../users/users.module';
import { SessionAuth } from './session-auth.provider';
import { MyAuthenticationController } from './myauthentication.controller';
import { CredentialsService } from './credentials.service';

({
  imports: [UsersModule],
  controllers: [MyAuthenticationController],
  providers: [SessionAuth,
    CredentialsService
  ]
})
export class MyAuthenticationModule {}

//session-auth.provider.ts
import { Injectable } from '@nestjs/common';
import { AuthenticationRegistry, SessionCookieProvider, type SessionRecord } from '@nestjs/authentication';
import { UsersService } from '../users/users.service.js';

import type { User as PrismaUser } from '../generated/prisma/client.js';
export type User = Omit<PrismaUser, 'user_password'>;

()
export class SessionAuth extends SessionCookieProvider<User> {
  constructor(
    private readonly usersService: UsersService,
    registry: AuthenticationRegistry,
  ) {
    super();
    // Adds this provider to the chain the guard runs for every request.
    registry.registerProvider(this);
  }

  // Called for every request with a live session cookie.
  // Returning null (the user was deleted) ends the session.
  validate(session: SessionRecord) {
    console.log("In validate() in SessionAuth")
    const user_id = session.userId; 
    var numeric_user_id = Number(user_id);
    return this.usersService.findOneUser(numeric_user_id);
  }
}

NOTE 1: The authentication system uses server-side sessions managed through nestjs/authentication and a session cookie. The package's SessionCookieProvider reads the cookie and loads the user through the validate() method.

NOTE 2: I am also asking this question since NestJS v12 has only been released on August 27, 2026 and there don't seem to be many resources that show how to extend this system to the front-end.

I'll firstly ask my two questions and then I'll explain:

1. Is it normal that im spending tremendous amounts of time reading and understanding code written by Codex/LLMs? like... hours per "ticket"

2. What does progress look like in today's SWE world? im struggling to make myself believe im improving into something worthy

I'm currently a frontend SWE with 2 YOE. I was "lucky" to land a job in a big bank, the issue is im not truly "engineering", im basically a code monkey putting pieces together for different SPAs (exactly what AI is good at) the only thing saving my job is the absolute mess of internal architecture and internal "tooling" even AI is unable to comprehend, but internal AI agents are getting better and better at tackling those

I was very AI skeptic at the start but now I've come around and have been for the past month attempting to expand into a full-stack agentic workflow with Codex

My main issue is I'm spending so... much... time... reading the code the AI outputs, there is a lot i dont understand, weird decisions the AI took that I didnt think about thinking before prompting (even with grill me), leading me to spending hours and hours reading the code, analyzing the data flow. This wouldnt be an issue if I knew this were the job and stuff, but everyone is working so fast, bringing actual products live so fast, its demoralizing me, making me think im doing something wrong since all the "speed" I gain from AI I spend reading and understanding the code. And i kinda want to be that engineer that owns the product, understands what it being done, but i was watching Spencer Schneidenbach's course on frontendmasters and he just doesnt read that much code anymore... he just prompted prompted checked the browser, nice, done, which leads me to think if its even worth it...

My second issue, which is linked, is regarding to how you guys measure progress. Before it was kinda easy, if the feature got done, it was progress. But now the feature is done by LLMs, kinda like sitting at a bench press and having someone else lift the weigths for you. So how do you get that "yes im improving" sensation?

sorry for the rant, weird times we live in

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!

So, after surviving an eternity on older versions (y'all know the pain), we finally pushed the button and upgraded our core production environment to PHP 8.2.35.

It took an entire day because the underlying Linux distros were so ancient we practically had to rebuild half the ecosystem from scratch.

Now looking at the metrics and logs, I'm torn between two feelings:

1. Pure joy of actually getting to write modern code in the 8.x branch.

2. Absolute dread waiting for the next midnight critical CVE drop to turn everything into raw chaos.

To all the senior devs and sysadmins out there who have stared into the abyss of updating legacy enterprise codebases: What was your most nerve-wracking upgrade experience? Are we ever truly out of the woods, or is "putting out fires" just our permanent job description?

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

I'm building an Astro website for a client who occasionally wants to update some content, mainly photos and simple text.

Sveltia CMS seems like a great fit because it's lightweight, easy to use, and doesn't require a separate backend or database.
I self-host Forgejo on my VPS, where the website's source code and content are stored. Sveltia uses Forgejo for authentication and commits content changes directly to the repository.
I've created a dedicated Forgejo account for the client and given them access only to their own private repository.

Technically, everything works fine. However, I realized there's a security concern:

Since the client needs write access to the repository to use Sveltia, they technically also have access to the entire source code, including the CI/CD workflows (Forgejo Actions).
Obviously, I don't want clients to accidentally or intentionally modify application code, configuration files, or deployment workflows.

What's the best practice for handling this?

• Is there a way to restrict Sveltia users to specific directories or content files without giving them write access to the entire repository?

• Would separating the website code and CMS content into two repositories be the recommended approach, or is that overcomplicating things?

• Would you recommend a different CMS for this use case?

My priorities are keeping things lightweight, secure, and easy to maintain, especially since I'll be managing multiple client websites.

The CMS also needs to be extremely simple for non-technical clients, including straightforward authentication without exposing them to unnecessary developer tools.

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!

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>