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! 🚀

✅ Technical Details: Provides IP information, DNS records, domain details, server location, and tech stack.
✅ Eco-Friendly Insights: Estimates your website's carbon footprint.

GitHub - Lissy93/web-check: 🕵️‍♂️ All-in-one OSINT tool for analysing any website 🕵️‍♂️ All-in-one OSINT tool for analysing any website - Lissy93/web-check

🚦 Website Check Tool: web-check
An open-source website analysis tool that generates reports to help you see website's status.
github.com/Lissy93/web-...

✨ Features
✅ Security Analysis: Checks HTTP headers, firewall status, TLS, and more.
✅ SEO Support: Inspects `robots.txt` and `sitemap.xml`.

Things About Code Review: Balancing Code Quality and Development Speed | Things About Web Development "Things About Web Development" is a personal website documenting the journey of building a web presence, offering insights and experiences in front-end development.

6️⃣ Self-Review First: Catch small errors before submitting to save everyone’s time.

Want to take your reviews to the next level? Dive into this detailed guide: www.thingsaboutweb.dev/en/posts/cod...

What’s your go-to code review tip? Let’s discuss! 💡

(3/3)

3️⃣ Focus on High-Value Area: Review architecture, boundaries, and core logic; delegate trivial checks to automation
4️⃣ Communicate Effectively: Clear, respectful feedback foster collaboration and knowledge sharing
5️⃣ Define Clear Specs: Precise requirements guide reviews and eliminate confusion

(2/3)

Things About Code Review: Balancing Code Quality and Development Speed | Things About Web Development "Things About Web Development" is a personal website documenting the journey of building a web presence, offering insights and experiences in front-end development.

Simplify and supercharge your code reviews with these 6 practices:

1️⃣ Choose the Right Format: Match the review depth to the change's complexity.
2️⃣ Leverage Automation: Let tools handle style and formatting so humans can focus on logic.

Full article:
www.thingsaboutweb.dev/en/posts/cod...
(1/3)

- Cursor: Place a .cursorrules file in the project directory.
- Windsurf: Set rules in cascade settings, specifying workspace or global rules.
- GitHub Copilot: Offers configurable behaviors through its settings.

GitHub - PatrickJS/awesome-cursorrules: 📄 A curated list of awesome .cursorrules files 📄 A curated list of awesome .cursorrules files. Contribute to PatrickJS/awesome-cursorrules development by creating an account on GitHub.

custom instructions for AI code generator:
github.com/PatrickJS/aw...

Main target: Cursor AI
might be used with windsurf, copilot also

🎄✨ 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. 😉

Browser Default Cache Freshness | Things About Web Development "Things About Web Development" is a personal website documenting the journey of building a web presence, offering insights and experiences in front-end development.

Did you know browsers have default settings that affect how fresh your website’s cache is? 🤔 Understanding these defaults is key to adjusting them for the perfect balance. Learn how here 👉 www.thingsaboutweb.dev/en/posts/cac...

🛡️ What is a CSRF Token?
CSRF (Cross-Site Request Forgery) Tokens are unique values embedded in forms to:

✅ Ensure requests are made by the legitimate user.
🚫 Block unauthorized actions initiated by malicious third-party sites.

🔐 What is a Nonce?
Nonce (Number used ONCE) is a unique, single-use value commonly used in APIs and forms to:

🚫 Prevent replay attacks by ensuring requests can’t be resent maliciously.
🔄 Avoid duplicate submissions, like form re-submissions after refresh.

Things About Nonce & CSRF Token: Differences, Use Cases, and How They Work | Things About Web Development "Things About Web Development" is a personal website documenting the journey of building a web presence, offering insights and experiences in front-end development.

Nonce vs. CSRF Token: Do you know the difference?

🛡️ Nonce: Blocks replay attacks & duplicate submissions
✅ CSRF Token: Stops unauthorized actions (CSRF attacks)

Secure your web app with the right tools! Learn more:
www.thingsaboutweb.dev/en/posts/non...

What is the canvas feature in ChatGPT and how do I use it? | OpenAI Help Center Common questions about using the Canvas feature in ChatGPT.

What can you do in Canvas?
💬 Chat with GPT directly.
🖍️ Add comments to specific paragraphs.
✏️ Edit documents inline.

For more details, check this guide:
👉 help.openai.com/en/articles/...

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.

Adding custom instructions for GitHub Copilot - GitHub Docs You can create a file that automatically adds information to all questions you ask Copilot Chat.

Copilot now supports **custom instructions**, even in the free version. You can learn more about how to set up custom instructions here:
👉 docs.github.com/en/copilot/c...

My most wanted feature: Code Review, is in preview state, join the waitlist here:
👉 github.com/github-copil...

5️⃣ Client-Side Rendering (CSR): still the problem child
CSR tends to struggle the most—especially if your site’s structure gets too complex. More complexity = higher risk of loading or crawling failures. Keep it simple! A cleaner structure means fewer headaches (and better indexing).

4️⃣ Show it, don’t hide it
Googlebot doesn’t click. No dropdowns, no tabs, no fancy interactions. What does this mean? Make sure all critical content is visible immediately when the page loads.

3️⃣ Using lots of JavaScript?
Research shows that JS-heavy sites are just as discoverable as static ones. Focus on building quality content and good performance instead of trimming down JS just for SEO.

2️⃣ HTML First—
Think your JavaScript can clean up messy noindex tags? Think again. If your initial HTML has noindex, Google won’t even look at it. Play it safe: set noindex correctly on the server-side.

1️⃣ Yes, Googlebot can handle JavaScript
Modern dynamic websites? No problem. Googlebot can render and index content loaded via JavaScript. But here’s the catch: slow-loading resources still hurt. Want better crawling and happy users? Prioritize loading speed—it’s a win-win.

How Google handles JavaScript throughout the indexing process - Vercel Over the years, Google's treatment of JavaScript has changed, leaving us with misconceptions of how it's indexed. Here, we debunk the myths.

This one dives into how Googlebot works. Based on website traffic data and JavaScript rendering behavior, it sheds light on Google’s processing mechanism. By understanding this, we can better optimize websites to solve indexing and crawling issues. 🔗

vercel.com/blog/how-goo...

Some insights:

The rise of the AI crawler - Vercel New research reveals how ChatGPT, Claude, and other AI crawlers process web content, including JavaScript rendering, assets, and other behavior and patterns—with recommendations for site owners, devs,...

reference: vercel.com/blog/the-ris...

3/ How to adapt to the AI web 🌐
AI crawlers are growing fast, but they don’t render JavaScript. To stay visible:

- Use server-side rendering (SSR)
- Pre-generate pages with static site generation (SSG)
- Keep key content in plain HTML.

2/ Why does this matter? 🚀
AI bots crawl the web to train models like GPT and Claude, focusing on text content.

The catch? They don’t render JavaScript. Content hidden in JS won’t be seen, meaning you’ll miss out on AI-driven tools, search, and visibility.

Make your content accessible.

AI bots are rising fast 🌐
AI crawlers now make up 28% of Googlebot's activity, showing their growing importance. (see reference)

The web development landscape is changing – is your site ready for the AI web? Let’s break it down 👇

React Query API Design - Lessons Learned In this talk, React Query maintainer Dominik will walk us through some of the API design choices that were made in React Query to get to that DX. You'll hear stories about things that went well, but a...

5. 😣 You’ll likely screw up an API
Even experienced designers make mistakes. The key is to learn from them. Listen to feedback, iterate quickly, and let your API evolve. Missteps often lead to better, more thoughtful designs.

👉 Read the full post here:
tkdodo.eu/blog/react-q...

4. 🔄 Inversion of Control is great
APIs succeed when they offer flexibility. Inversion of control gives users the freedom to adapt features to their needs, empowering developers and ensuring your API fits various use cases.