Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reimplements party-time as a CSS filter, with no JS needed. #781

Merged
merged 1 commit into from
May 30, 2023

Conversation

qubyte
Copy link
Owner

@qubyte qubyte commented May 29, 2023

The side-effect of this is that it applies to more than just the background and standout colours (it applies to everything). This was always my intention though! I just didn't know enough about filter effects and animations.

The details:

I'm using a :has() selector paired with a hidden checkbox. When the parrot is clicked/tapped, the checkbox is toggled. When the box is checked an animated hue-rotation animation is applied to the <html> element.

The benefits:

  • All the JS code I'd added to the service-worker bootstrap script is gone now. That script is back to only registering the worker. 1
  • The hue rotation is calculated by the browser in LAB space (I think), which is a perceptually more pleasing hue rotation than I could achieve with HSL.
  • Delegating this to the browser should be far more efficient than updating a custom property from JS.

Footnotes

  1. It is my hope that one day to return the worker entirely. At this time hashed resources are all short-circuited through the worker for the browser to immutably cache (so almost all JS and all CSS). Images and HTML files are still to figure out, but images should probably just be immutably cached too.

@qubyte qubyte merged commit 5e783df into main May 30, 2023
7 checks passed
@qubyte qubyte deleted the zero-js-party branch May 30, 2023 07:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant