Definitely a good share! I have it bookmarked, nice a flip-side to CSS Triggers, should be called "JavaScript Triggers" ha!

I remembered a site a few years back that illustrated which parts of the browser rendering pipeline each CSS property triggered. It was super useful when it came to creating performant animations. I tried to find it recently but, couldn't for the life of me.

It turns out the OG was replaced with a marketing site. I took the open source data from the original and created a brand new design for the site.

I credit the original creators in the opening paragraph of the site.

I hope you all enjoy and learn something new and useful :)

EDIT: grammar

Your newsletter signup form is absolutely terrific. I never thought that I'd say that.

It's inline in the page. Not a popup, not a modal, not a popunder or poparound or popfart. It's almost unique in its field for not being annoying. Almost got me to sign up, but I'm not your target demographic.

Nice job!

Thank you for the kind words.

I don't like popups either, or anything annoying or intrusive. It'd be hypocritical of me to assume that visitors should be subjected to something that I hate myself.

Annoyingly, I've never gotten to use Lit at work, but I use it in every single personal project I've made in the last few years. :(

If you haven't, there's a Discord called Lit & Friends which has a section specifically for open roles that use Lit/Web Components. If you're not on it already, check it out!

This is cool.

Quick question, how are you implementing the Tailwind styles? I'm assuming that the material/web use the shadow DOM to encapsulate styles, and therefore allow customised using CSS variables.

So I'm a little confused why the global tailwind CSS seems to work

This is a WIP I'm trying to figure out.

I want to be able to load those CSS variables as Tailwind directives.

e.g.

`

|_ button

  |_ index.tsx

  |_ tailwind.ext.js // <-- this contains the design tokens of this component as Tailwind directives. Now simply extend your Tailwind config with this file to add the relevant design tokens

`

I would love any ideas or feedback on this mechanism.

Thanks for the comment :)

Back when I developed this, I did take a look at using a a websafe Tahoma, but it didn't quite sit right.

I guess it was a cleaner, more modern take on Tahoma to accommodate better screen resolutions.

There were instances of pixelated text on Windows 2000, but not sure that it was used everywhere

https://static.wikia.nocookie.net/windows/images/8/8e/Win200...

Edit: Added a thank you!

Thanks for leaving a comment. I'm actually the creator of the site and I take no offence!

When planning the design of the site, I wanted something striking and unusual. I'm a big fan of video game aesthetics from games like Jet Set Radio and Persona 5, which heavily inspired the garish and angular design.

Ultimately, I hope you enjoy the content! And I'll be happy to hear any suggestions to improve the content also.

Thanks!