# Giorgiosaud.io

> Web developer notebook with notes on Astro, JavaScript, TypeScript, and modern web development.

## Content access

Every note is available in two formats:
- HTML: `/notebook/{slug}`
- Markdown: `/notebook/{slug}.md` — served with `Content-Type: text/markdown; charset=utf-8`

## Notes
- [CSP Without unsafe-inline in Astro + Vercel](/notebook/csp-without-unsafe-inline-astro-vercel.md): How to remove unsafe-inline from your Content Security Policy in an Astro site deployed to Vercel, using SHA-256 hashes generated automatically at build time — and every pitfall we hit along the way.
- [Venezuela 51: State Refactoring and the Puerto Ordaz Hub](/notebook/venezuela-51-state-refactoring-puerto-ordaz.md): A technical analysis on why US integration and the development of Puerto Ordaz represent the most important system deployment in our history.
- [Upgrading to Astro 6, Svelte 5, and Better Auth 1.6: What Broke and How I Fixed It](/notebook/upgrading-astro-6-svelte-5-dependency-conflicts.md): A full account of the issues I hit upgrading a production Astro site: Svelte TypeScript preprocessing failures, transitive dependency conflicts in better-auth, and Vercel build cache pitfalls.
- [Chrome Built-in AI: The Summarizer API](/notebook/2026-05-03-chrome-built-in-ai-summarizer.md): Chrome ships a native Summarizer API powered by on-device AI. No API keys, no server costs, no privacy concerns — the model runs entirely in your browser.
- [bunx vitest vs vitest in Bun Scripts](/notebook/bunx-vitest-vs-vitest-in-bun-scripts.md): If bun run test fails with 'vitest: command not found', the fix is one word: bunx. Here's why Bun doesn't always put node_modules/.bin on PATH, and when it matters.
- [How to Mock astro:content in Vitest](/notebook/how-to-mock-astro-content-in-vitest.md): Unit testing Astro content collection helpers isn't obvious. Here's the exact pattern to mock getCollection and control import.meta.env.DEV so your tests actually reflect production filtering behavior.
- [Why vi.stubEnv Doesn't Work for import.meta.env.DEV](/notebook/import-meta-env-dev-in-vitest.md): vi.stubEnv('DEV', 'false') sets a string. Vite's DEV is a boolean. The string 'false' is truthy. Your tests lie to you silently. Here's the fix.
- [Building a Claude API Load Indicator for Your Terminal](/notebook/claude-api-load-indicator-terminal.md): How I built a zsh oh-my-zsh plugin that shows Claude API latency directly in my Powerlevel10k prompt — using a background launchd job and a rolling baseline so you always know if it's slow right now or just your network.
- [Venezuela 2026: The 'Clean Install' of a National Hardware](/notebook/clean-install-venezuela.md): Resource orchestration strategy, dollarization, and the new social algorithm for Venezuela's industrial reconstruction.
- [The Planned Digital City: Puerto Ordaz as a Beta Test for Venezuela's Recovery](/notebook/the-planned-city-of-the-future.md): Why the recovery of Venezuela's industrial core requires a digital-first architecture for identity, transparency, and infrastructure responsibility.
- [Re-platforming Venezuela: A Solution Architect's Perspective](/notebook/my-venezuelan-vision.md): Prioritizing automation processes in Venezuela's core industries—Oil, Mining, and Tourism—during the new age of investment.
- [Venezuela: Re-architecting a Nation for Global Investment](/notebook/venezuela-as-a-platform.md): A Solution Architect's perspective on the technical and industrial priorities required for Venezuela's global repositioning in 2026.
- [Browser Native AI: Chrome's Summarizer API](/notebook/browser-native-ai-chrome-summarizer.md): Learn how to use Chrome's built-in Summarizer API to generate AI-powered summaries without API costs, including lazy loading, streaming, and multi-language support.
- [Chrome Summarizer API 2026: Browser AI Goes Mainstream](/notebook/chrome-summarizer-api-2026.md): Chrome's built-in Summarizer API is now available to all users. Learn the latest capabilities, availability detection, and production patterns for on-device AI summarization.
- [Container Queries 2026: Production-Ready Component Design](/notebook/container-queries-2026.md): Container queries are now fully mature with 95%+ browser support. Learn advanced patterns, style queries, and production-ready techniques for truly responsive components.
- [CSS Anchor Positioning: The Future of UI Placement](/notebook/css-anchor-positioning.md): Learn how to use CSS Anchor Positioning to position tooltips, modals, and popovers without JavaScript libraries. Native CSS for precise element placement.
- [CSS Carousels 2026: Native Scroll Markers Finally Here](/notebook/css-carousels-2026.md): Build carousels with pure CSS using scroll-marker, scroll-button, and scroll snap. No JavaScript libraries needed for pagination dots and navigation.
- [CSS Custom Properties 2026: @property Goes Mainstream](/notebook/css-custom-properties-2026.md): CSS custom properties with @property are now universally supported. Learn typed variables, animation capabilities, and inheritance control for bulletproof design systems.
- [CSS Grid & Subgrid 2026: Universal Support Unlocks New Patterns](/notebook/css-grid-subgrid-2026.md): Subgrid is now supported in all major browsers. Learn alignment patterns, card layouts, and form designs that were impossible before universal subgrid support.
- [CSS @layer 2026: Universal Support for Cascade Control](/notebook/css-layers-2026.md): CSS Cascade Layers are now universal with 98% browser support. Learn production patterns for organizing styles, integrating frameworks, and eliminating specificity wars.
- [CSS Scroll Animations 2026: View Timeline Now Stable](/notebook/css-scroll-animations-2026.md): Scroll-driven animations are now production-ready. Learn view timeline, scroll timeline, and animation-range for creating scroll-triggered effects without JavaScript.
- [Islands Architecture: Multi-Framework Components](/notebook/islands-architecture-multi-framework.md): Learn how Astro's Islands Architecture lets you use React, Vue, and Svelte together in one project with selective hydration for optimal performance.
- [Implementing llms.txt: Make Your Site AI-Friendly](/notebook/llms-txt-implementation.md): Learn the llms.txt standard for providing structured content to AI crawlers. Implement llms.txt and per-page .md endpoints for LLM-optimized content access.
- [Self-Healing URLs in Astro 5: Content Collections Update](/notebook/self-healing-urls-astro-5.md): Updated implementation of self-healing URLs for Astro 5's new content collections API. Learn the changes from getCollection to glob loaders and type-safe URL healing.
- [Server Actions in Astro: Forms Done Right](/notebook/server-actions-astro-forms.md): Learn how to build secure, type-safe forms with Astro's server actions, including Zod validation, error handling, and bot protection patterns.
- [Sharing State Between Frameworks with Nanostores](/notebook/sharing-state-nanostores.md): Learn how to share reactive state between React, Vue, and Svelte components in Astro's Islands Architecture using Nanostores - a tiny, framework-agnostic state manager.
- [Type-Safe i18n: Deep Key Extraction in TypeScript](/notebook/type-safe-i18n-typescript.md): Learn how to build a type-safe internationalization system with recursive TypeScript types that provide full autocomplete for nested translation keys.
- [View Transitions API: Smooth Page Navigation](/notebook/view-transitions-api.md): Learn how to add smooth page transitions with a single CSS rule, customize animations for specific elements, and create SPA-like experiences without JavaScript.
- [Modern Custom Properties with Defaults](/notebook/custom-properties-with-defaults.md): Learn how to handle default values in CSS variables using the classic "pseudo-private" technique and the modern @property rule.
- [Introducing the New Summary API in Browsers](/notebook/introducing-summary-api-browsers.md): Learn about the new Summary API, which enables browsers to generate AI-powered summaries of web content.
- [MCP's Role in the near Future of AI Technology](/notebook/mcps-role-in-the-future-of-ai-technology.md): MCP is set to revolutionize AI by enabling secure, personalized interactions with apps, making technology smarter and more useful for everyone.
- [Effortless Grids for Responsive Layouts Made Easy](/notebook/grid-simplified.md): Create stunning responsive layouts effortlessly with a single grid class. Simplify your design process and enhance your site's flexibility!
- [CSS Carousels Without JavaScript: A Guide](/notebook/carousel-scroll-marker.md): How to build interactive carousels using only HTML and CSS, thanks to the new scroll-marker and scroll-marker-group properties.
- [How I Use `@layer` in CSS to Organize Styles in My Project](/notebook/how-i-use-layer-in-css-to-organize-styles-in-my-project.md): Discover how the @layer rule in CSS helps structure and prioritize styles in a modern and maintainable way.
- [Understanding Container Queries in Web Development](/notebook/container-and-container-queries.md): Here I will explain how I used the @container query in my redesign of notebook
- [Using CSS Global Properties: A Practical Guide](/notebook/how-im-using-new-css-global-properties-on-my-website-and-some-examples.md): Discover how to enhance your website with new CSS global properties for theme support and smooth transitions, simplifying web development.
- [Website Migration: A Success Story Unveiled](/notebook/from-legacy-bloat-to-native-brilliance-our-website-migration-journey.md): Discover my journey of migrating to modern web standards, overcoming challenges, and achieving a faster, more accessible website.
- [Mastering CSS Scrolling Animations Easily](/notebook/css-scrolling-animations-simplified.md): Master CSS scrolling animations with our simplified guide, focusing on native solutions using animation-timeline and animation-range.
- [Self-healing URL in Astro](/notebook/self-healing-url-in-astro.md): In this post, I will talk about how to develop a functionality of self-healing URL in Astro project with a simple approach 
- [MDX File in astro as content vs md file](/notebook/mdx-file-in-astro-as-content-vs-md-file.md): Explore the differences between MDX and MD files in Astro, and learn how to leverage JSX for dynamic content integration.
- [The Repository pattern is called Data Layer Architecture](/notebook/repository-pattern-revisited.md): The Repository pattern simplifies API connections, enhancing UI code by separating data handling in a structured Data Layer architecture.
- [Preflight request and Cors](/notebook/prefllight-request-and-cors.md): Understand CORS and Preflight Requests to enhance your web app's security and optimize cross-domain resource sharing.
- [Paginator in astro do it like a pro](/notebook/paginator-in-astro.md): Master pagination in Astro with our pro guide, optimizing your blog for speed and efficiency while enhancing user experience.
- [Repository pattern in frontend](/notebook/repository-pattern.md): Discover how the Repository Pattern enhances frontend development by improving data management, testability, and code maintainability.
- [Simplified Explanation of the Singleton Design Pattern](/notebook/simplified-explanation-of-the-singleton-design-pattern.md): Discover the Singleton Design Pattern with simplified explanations and practical examples for effective application configuration and state management.
- [Mastering the <img> Tag: srcset and sizes Explained](/notebook/efficient-and-effective-use-of-the-img-tag-with-srcset-and-sizes-attributes.md): Learn to optimize images with the <img> tag using srcset and sizes for better performance and responsiveness in web design.
- [Micro Frontend Architecture Explained](/notebook/microfrontend.md): Discover the essentials of Micro Frontend Architecture and how it empowers developers to create efficient, scalable web applications.
- [Top Tag Link Recommendations for Better SEO](/notebook/tag-link.md): Discover effective tag link recommendations to optimize CSS performance and enhance your website's loading speed.
- [Understanding Content Security Policy (CSP) Basics](/notebook/really-common-issues-integrating-from-front-end.md): Learn how to implement Content Security Policy (CSP) to enhance your website's security against XSS attacks and data injection.