@thingaboutwebdev.bsky.social
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...
it was fun to build
codepen.io/finfin/pen/b...
February 8, 2025 at 12:05 AM
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...
it was fun to build
codepen.io/finfin/pen/b...
🚦 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`.
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`.
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
github.com
January 3, 2025 at 1:08 PM
🚦 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`.
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`.
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)
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)
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.
www.thingsaboutweb.dev
January 1, 2025 at 12:46 PM
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)
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)
custom instructions for AI code generator:
github.com/PatrickJS/aw...
Main target: Cursor AI
might be used with windsurf, copilot also
github.com/PatrickJS/aw...
Main target: Cursor AI
might be used with windsurf, copilot also
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.
github.com
December 25, 2024 at 3:09 AM
custom instructions for AI code generator:
github.com/PatrickJS/aw...
Main target: Cursor AI
might be used with windsurf, copilot also
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! 🎁🌟✨
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! 🎁🌟✨
December 24, 2024 at 12:57 PM
🎄✨ 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! 🎁🌟✨
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. 😉
🔗 git-wrapped.com
Enter your username to generate your annual report—or sneak a peek at someone else’s. 😉
December 23, 2024 at 1:18 AM
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. 😉
🔗 git-wrapped.com
Enter your username to generate your annual report—or sneak a peek at someone else’s. 😉
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...
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.
www.thingsaboutweb.dev
December 22, 2024 at 1:13 AM
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...
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...
🛡️ 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...
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.
www.thingsaboutweb.dev
December 21, 2024 at 3:00 AM
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...
🛡️ 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...
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.
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.
December 20, 2024 at 9:55 AM
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.
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.
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...
Adding custom instructions for GitHub Copilot - GitHub Docs
You can create a file that automatically adds information to all questions you ask Copilot Chat.
docs.github.com
December 20, 2024 at 3:08 AM
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...
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:
vercel.com/blog/how-goo...
Some insights:
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.
vercel.com
December 19, 2024 at 1:59 AM
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:
vercel.com/blog/how-goo...
Some insights:
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 👇
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 👇
December 18, 2024 at 12:21 AM
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 👇
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✨
Designing an intuitive and flexible API is challenging. It requires balancing simplicity for beginners and power for advanced users. React Query's journey provides lessons on iteration and thoughtful planning to create APIs that meet diverse user needs.
Designing an intuitive and flexible API is challenging. It requires balancing simplicity for beginners and power for advanced users. React Query's journey provides lessons on iteration and thoughtful planning to create APIs that meet diverse user needs.
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...
tkdodo.eu
December 16, 2024 at 2:44 AM
✨React Query API Design - Lessons Learned✨
Designing an intuitive and flexible API is challenging. It requires balancing simplicity for beginners and power for advanced users. React Query's journey provides lessons on iteration and thoughtful planning to create APIs that meet diverse user needs.
Designing an intuitive and flexible API is challenging. It requires balancing simplicity for beginners and power for advanced users. React Query's journey provides lessons on iteration and thoughtful planning to create APIs that meet diverse user needs.
Microsoft dropped a Python Markdown converter:
- Converts PPTX, DOCX, XLSX → Markdown
- Image → Markdown (via LLM-generated descriptions, example in comments)
- Speech-to-text for audio files
- Supports PDF, HTML, text...
Readme’s basic, but code’s easy to follow.
github.com/microsoft/ma...
- Converts PPTX, DOCX, XLSX → Markdown
- Image → Markdown (via LLM-generated descriptions, example in comments)
- Speech-to-text for audio files
- Supports PDF, HTML, text...
Readme’s basic, but code’s easy to follow.
github.com/microsoft/ma...
Add example of using MarkItDown with OpenAI to README by gagb · Pull Request #16 · microsoft/markitdown
Add an example of using MarkItDown with OpenAI integration to the README.md.
Add a new section "Example with OpenAI Integration".
Include code to import MarkItDown and OpenAI.
Show initi...
github.com
December 15, 2024 at 2:15 AM
Microsoft dropped a Python Markdown converter:
- Converts PPTX, DOCX, XLSX → Markdown
- Image → Markdown (via LLM-generated descriptions, example in comments)
- Speech-to-text for audio files
- Supports PDF, HTML, text...
Readme’s basic, but code’s easy to follow.
github.com/microsoft/ma...
- Converts PPTX, DOCX, XLSX → Markdown
- Image → Markdown (via LLM-generated descriptions, example in comments)
- Speech-to-text for audio files
- Supports PDF, HTML, text...
Readme’s basic, but code’s easy to follow.
github.com/microsoft/ma...
Reposted
Vercel Observability—now generally available and free on all plans.
Observability delivers framework-aware insights, helping you optimize cost, usage, and performance.
Also available: Observability Plus. Extended retention, advanced metrics, and Monitoring.
vercel.com/changelog/ve...
Observability delivers framework-aware insights, helping you optimize cost, usage, and performance.
Also available: Observability Plus. Extended retention, advanced metrics, and Monitoring.
vercel.com/changelog/ve...
Vercel Observability is now generally available - Vercel
Observability is now available to all Vercel customers, delivering insights to optimize infrastructure and application performance.
vercel.com
December 12, 2024 at 8:07 PM
Vercel Observability—now generally available and free on all plans.
Observability delivers framework-aware insights, helping you optimize cost, usage, and performance.
Also available: Observability Plus. Extended retention, advanced metrics, and Monitoring.
vercel.com/changelog/ve...
Observability delivers framework-aware insights, helping you optimize cost, usage, and performance.
Also available: Observability Plus. Extended retention, advanced metrics, and Monitoring.
vercel.com/changelog/ve...
The challenges of naming, especially dealing acronyms. How will you name "xml http request", "new customer id", "supports IPv6 on iOS", "YouTube importer" in PascalCase / camelCase?
dev.to/finfin/namin...
dev.to/finfin/namin...
Naming with Acronyms in PascalCase and camelCase
Naming is hard, really. There is a famous browser API XMLHttpRequest, it’s famous in part for its...
dev.to
December 10, 2024 at 6:47 AM
The challenges of naming, especially dealing acronyms. How will you name "xml http request", "new customer id", "supports IPv6 on iOS", "YouTube importer" in PascalCase / camelCase?
dev.to/finfin/namin...
dev.to/finfin/namin...
🚀 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 👩🎨
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 👩🎨
December 10, 2024 at 1:14 AM
🚀 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 👩🎨
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! 😌
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! 😌
December 7, 2024 at 1:40 AM
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! 😌
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! 😌
React 19 stable is coming
react.dev/blog/2024/12...
1. Actions: New hooks like useOptimistic, useActionState, and useFormStatus to provide more comprehensive asynchronous form handling.
2. use API: A new API that can handle Promises and Context, and can be used in conditionals and loops.
react.dev/blog/2024/12...
1. Actions: New hooks like useOptimistic, useActionState, and useFormStatus to provide more comprehensive asynchronous form handling.
2. use API: A new API that can handle Promises and Context, and can be used in conditionals and loops.
React v19 – React
The library for web and native user interfaces
react.dev
December 6, 2024 at 1:19 PM
React 19 stable is coming
react.dev/blog/2024/12...
1. Actions: New hooks like useOptimistic, useActionState, and useFormStatus to provide more comprehensive asynchronous form handling.
2. use API: A new API that can handle Promises and Context, and can be used in conditionals and loops.
react.dev/blog/2024/12...
1. Actions: New hooks like useOptimistic, useActionState, and useFormStatus to provide more comprehensive asynchronous form handling.
2. use API: A new API that can handle Promises and Context, and can be used in conditionals and loops.
Playing with anchor positioning through anchoreum.com
Really makes creating tooltips much easier.
Once Safari and Firefox add support, we won’t need to write a ton of code to handle positioning or rely on libraries anymore!
Really makes creating tooltips much easier.
Once Safari and Firefox add support, we won’t need to write a ton of code to handle positioning or rely on libraries anymore!
Anchoreum
A game for learning CSS anchor positioning
anchoreum.com
December 5, 2024 at 2:59 AM
Playing with anchor positioning through anchoreum.com
Really makes creating tooltips much easier.
Once Safari and Firefox add support, we won’t need to write a ton of code to handle positioning or rely on libraries anymore!
Really makes creating tooltips much easier.
Once Safari and Firefox add support, we won’t need to write a ton of code to handle positioning or rely on libraries anymore!
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
- 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
December 3, 2024 at 12:55 AM
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
- 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
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
December 2, 2024 at 1:23 PM
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
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
Implemented dark mode and theme switching using Tailwind CSS v4 beta and Next.js. The article walks through building a theme system from basic dark mode support to handling user preferences and system theme detection.
dev.to/wearethreebe...
dev.to/wearethreebe...
Exploring Typesafe design tokens in Tailwind 4
Tailwind 4 has been on the horizon for a while, with the team first open-sourcing their progress in...
dev.to
December 1, 2024 at 1:33 AM
Implemented dark mode and theme switching using Tailwind CSS v4 beta and Next.js. The article walks through building a theme system from basic dark mode support to handling user preferences and system theme detection.
dev.to/wearethreebe...
dev.to/wearethreebe...