Sam Potts

Sam Potts

@sampotts.dev

Design Engineer @ Mux. Dad. Built plyr.io. sampotts.dev

51 followers209 following19 posts

Sam Potts
@sampotts.dev

Has anyone run benchmarks of a front end builds on M1 vs M4? All the YouTube videos seem to be based around video encoding benchmarks which is great for... YouTubers. Single core looks to be almost a 100% improvement so in theory, builds should be quicker?

Sam Potts
@sampotts.dev

I wasn't really famous on Twitter but did ok on GitHub by building a media player (plyr.io) about 10 years ago that gained some traction and is at almost 27k stars. Having kids kinda killed any spare time I had for it so it's been a bit dormant. Hoping to work on Vidstack (vidstack.io) one day.

plyr.ioPlyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo playerA simple HTML5 media player with custom controls and WebVTT captions.
This post is unavailable.
View full thread
Sam Potts
@sampotts.dev

...then use that in your config: ``` const config: Config = { theme: { extend: { backgroundImage: vibrantGradients, } } } export default config; ``` Ideally, Tailwind would use oklch color space throughout but that's coming later as far as I can see.

Sam Potts
@sampotts.dev

First import the default theme to amend the gradients. ``` import defaultTheme from 'tailwindcss/defaultTheme'; const vibrantGradients = Object.fromEntries( Object.entries(defaultTheme.backgroundImage).map(([k, g]) => [k, g.replace('gradient(', 'gradient(in oklch ')]), ); ```

Sam Potts
@sampotts.dev

I needed to monitor for changes to `color-scheme` in an embed and found this super handy little library. It needs `transition-behavior: 'allow-discrete'` which has ~73% support. I wrote a small fallback using polling for the older browsers but luckily support for `CSS.supports` is pretty decent!

Bramus@bram.us

Introducing @​bramus/style-observer, a MutationObserver for CSS. It allows you to attach JavaScript callbacks to changes in computed values of CSS properties. 🔗 bram.us/2024/08/31/i...

Sam Potts
@sampotts.dev

Is there an ideal way to do theming in Next.js? We have two themes which each have entry points that we import based on user settings. We then render via `page.tsx` files in the app directory. The issue we run into is somehow we end up with styles from both themes at once. cc @leerob.com

Sam Potts
@sampotts.dev

Next.js seems to "find" all the other theme files and build them, resulting in a stylesheet with styles from both globals.css files. How can we tell Next to ignore the other theme? The themes are in the same `src` directory in the package. Is that the cause perhaps?

You are up to date.