I build a PURE CSS color palette using scroll animations, oklch, css relative color, light-dark, scrollbar styling

it was fun to build
codepen.io/finfin/pen/b...

Due to high traffic, the official website is currently unavailable (see attached image). But you can run a local server:

git clone git@github.com:Lissy93/web-check.git
cd web-check
yarn
yarn dev

🌐🔍 Open your browser, go to localhost:4321 , and enter the URL you want to analyze! 🚀

🎄✨ Some effects for Xmas!
Mouse moves, touch clicks, and scrolling trigger fun animations.
Tried two approaches: drawing icons on a canvas vs. using multiple img elements with translate.

Canvas seems to perform better! 🎅❄️
Check it out: www.thingsaboutweb.dev

Merry Christmas, everyone! 🎁🌟✨

Wrap up 2024 with Git Wrapped!
🔗 git-wrapped.com

Enter your username to generate your annual report—or sneak a peek at someone else’s. 😉

ChatGPT now supports a Canvas feature for editing! 🖌️
Ways to trigger Canvas Editing:
1️⃣ Auto-enter when GPT detects content to edit.
2️⃣ Click "Canvas" at the start of a conversation.
3️⃣ Type "open canvas" to switch modes.
4️⃣ Enable Canvas for GPTs in "Edit GPTs" under Capabilities.

🚀 GitHub Skyline: Transform commits into a city skyline!
github.com/github/gh-sk...

1. Install GitHub CLI
2. Run `gh extension install github/gh-skyline`
3. `gh skyline` creates:
- 3D-printable STL model
- ASCII art visualization

Turning your commit into urban art 👩‍🎨

Diving into Advent Coding Challenges with the help of AI

1. Input Challenge / Spec / Test ✅
2. AI code generate (Impressive first-pass success rate (50%+ solve on first try!)) 🤖
3. Check solution 🕵️‍♂️
4. Tweak & optimize 🔧
5. Iterate on given error message or manual guidance until satisfied! 😌

Just found out Can I Use can be customized to show the usage of your own site

- Goto caniuse.com/ciu/import
- Select “Google Analytics (GA4)” (the first one is broken)
- Generate usage CSV based on the instruction
- Use the site as usual
- You’ll see your site’s data

Firefox 135 Nightly now have support for CSS Custom Highlight API, meaning it gets supported in all major browsers.

Only 4 steps is needed:
1. Set ::highlight styles in CSS
2. Define highlight ranges using Range class
3. Create Highlight instance
4. Link Highlight instance with CSS styles