<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Web on Kaisekukun</title><link>https://netguide.jp/en/categories/web/</link><description>Recent content in Web on Kaisekukun</description><generator>Hugo -- gohugo.io</generator><language>en</language><copyright>Kaisekukun</copyright><lastBuildDate>Sat, 13 Jun 2026 13:00:00 +0900</lastBuildDate><atom:link href="https://netguide.jp/en/categories/web/index.xml" rel="self" type="application/rss+xml"/><item><title>[Important] Urgent Claude Fable 5 and Mythos 5 Decommissioning due to U.S. Export Restrictions</title><link>https://netguide.jp/en/web/claude-fable-deprecation-announcement/</link><pubDate>Sat, 13 Jun 2026 13:00:00 +0900</pubDate><guid>https://netguide.jp/en/web/claude-fable-deprecation-announcement/</guid><description>&lt;img src="https://netguide.jp/img/thumbnail/claude-fable-deprecation-announcement-en.png" alt="Featured image of post [Important] Urgent Claude Fable 5 and Mythos 5 Decommissioning due to U.S. Export Restrictions" /&gt;&lt;p&gt;On June 13, 2026 (JST), Anthropic announced the &lt;strong&gt;global decommissioning and disabling of its newly released models, Claude Fable 5 and Mythos 5&lt;/strong&gt;, effective immediately.&lt;/p&gt;
&lt;p&gt;This drastic decision comes after the United States government (under the Trump administration) issued a sudden export restriction order on the afternoon of June 12, citing national security concerns. As a result, all active API endpoints for both models have been shut down. This article reviews the geopolitical context surrounding the shutdown and outlines the immediate steps developers must take to restore service.&lt;/p&gt;</description></item><item><title>Goodbye WordPress: Why and How We Migrated to Hugo Static Site Generator</title><link>https://netguide.jp/en/web/wordpress-to-hugo-migration-story/</link><pubDate>Fri, 12 Jun 2026 12:00:00 +0900</pubDate><guid>https://netguide.jp/en/web/wordpress-to-hugo-migration-story/</guid><description>&lt;img src="https://netguide.jp/img/thumbnail/wordpress-to-hugo-migration-story-en.png" alt="Featured image of post Goodbye WordPress: Why and How We Migrated to Hugo Static Site Generator" /&gt;&lt;p&gt;We have officially completed the transition of &lt;strong&gt;netguide.jp&lt;/strong&gt; from WordPress to &lt;strong&gt;Hugo&lt;/strong&gt;, a modern static site generator (SSG).&lt;/p&gt;
&lt;p&gt;Operating a dynamic CMS like WordPress had become increasingly bottlenecked by page load delays, security updates, and hosting costs. Migrating to a static workflow resolved all of these issues. In this case study, we share our motivation, migration strategy, and the post-migration performance gains.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id="1-three-reasons-we-left-wordpress"&gt;1. Three Reasons We Left WordPress
&lt;/h3&gt;&lt;p&gt;While WordPress remains a highly versatile CMS, its dynamic, database-driven architecture presented critical challenges as our content grew:&lt;/p&gt;</description></item><item><title>Unleashing Creativity: Features and Creative Use Cases of Claude Fable</title><link>https://netguide.jp/en/web/claude-fable-creative-writing/</link><pubDate>Tue, 09 Jun 2026 12:00:00 +0900</pubDate><guid>https://netguide.jp/en/web/claude-fable-creative-writing/</guid><description>&lt;img src="https://netguide.jp/img/thumbnail/claude-fable-creative-writing-en.png" alt="Featured image of post Unleashing Creativity: Features and Creative Use Cases of Claude Fable" /&gt;&lt;p&gt;While AI has revolutionized code generation and structured business writing, capturing the nuance, subtext, and flow of creative literature has remained a challenge. To solve this, Anthropic engineered &lt;strong&gt;Claude Fable&lt;/strong&gt;, a model fine-tuned specifically for creative writing, fiction development, and world-building.&lt;/p&gt;
&lt;p&gt;In this article, we explore how Claude Fable helps novelists, screenwriters, and copywriters push the boundaries of creative expression.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id="1-what-makes-claude-fable-different"&gt;1. What makes Claude Fable Different?
&lt;/h3&gt;&lt;p&gt;Standard large language models (like Claude Sonnet or GPT-4) are trained to be concise, helpful, and literal. When asked to write a story, they often rely on clichés and formulaic prose that feels distinctly &amp;ldquo;AI-generated.&amp;rdquo;&lt;/p&gt;</description></item><item><title>Introducing Claude Mythos: The Next-Gen AI Model and How to Use It</title><link>https://netguide.jp/en/web/claude-mythos-ai-model/</link><pubDate>Mon, 01 Jun 2026 12:00:00 +0900</pubDate><guid>https://netguide.jp/en/web/claude-mythos-ai-model/</guid><description>&lt;img src="https://netguide.jp/img/thumbnail/claude-mythos-ai-model-en.png" alt="Featured image of post Introducing Claude Mythos: The Next-Gen AI Model and How to Use It" /&gt;&lt;p&gt;Anthropic has officially announced its next-generation flagship AI model: &lt;strong&gt;Claude Mythos&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Surpassing the capabilities of Claude 3.5 Sonnet and Claude 3 Opus, Claude Mythos introduces a powerful reasoning architecture that transforms how we write code, analyze data, and solve logical problems. In this article, we dive deep into the key features, benchmarks, and real-world use cases of Claude Mythos.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id="1-what-is-claude-mythos-key-features-and-innovations"&gt;1. What is Claude Mythos? Key Features and Innovations
&lt;/h3&gt;&lt;p&gt;Claude Mythos isn&amp;rsquo;t just about scaling up parameters; it integrates an embedded &lt;strong&gt;Reasoning Chain&lt;/strong&gt; directly into its inference architecture. Before answering, the model maps out logical steps internally, reducing hallucinations and maximizing accuracy.&lt;/p&gt;</description></item><item><title>Modern Web Scraping: Ethics, Legality, and Best Practices in 2026</title><link>https://netguide.jp/en/web/web-scraping-best-practices/</link><pubDate>Wed, 20 May 2026 12:00:00 +0900</pubDate><guid>https://netguide.jp/en/web/web-scraping-best-practices/</guid><description>&lt;img src="https://netguide.jp/img/thumbnail/web-scraping-best-practices-en.png" alt="Featured image of post Modern Web Scraping: Ethics, Legality, and Best Practices in 2026" /&gt;&lt;p&gt;Design web scraping systems responsibly without overloading web servers, respecting robot files and API terms.&lt;/p&gt;
&lt;p&gt;As AI development fuels a massive demand for raw data, web scraping has become an essential software development skill. However, extracting web layouts without permission introduces serious technical, ethical, and legal concerns. This article covers the legal boundaries of crawling, ethical pipeline design rules, and a Python example featuring retry behaviors and rate-limiting structures.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="1-legal-and-ethical-boundaries-of-scraping"&gt;1. Legal and Ethical Boundaries of Scraping
&lt;/h2&gt;&lt;p&gt;Auto-extracting data from websites falls into a legal gray area. Consider these vital concepts:&lt;/p&gt;</description></item><item><title>SEO and Core Web Vitals: Demystifying and Improving INP</title><link>https://netguide.jp/en/web/seo-core-web-vitals-inp/</link><pubDate>Tue, 05 May 2026 12:00:00 +0900</pubDate><guid>https://netguide.jp/en/web/seo-core-web-vitals-inp/</guid><description>&lt;img src="https://netguide.jp/img/thumbnail/seo-core-web-vitals-inp-en.png" alt="Featured image of post SEO and Core Web Vitals: Demystifying and Improving INP" /&gt;&lt;p&gt;INP (Interaction to Next Paint) measures a web page&amp;rsquo;s responsiveness to user interactions. This article demystifies Google&amp;rsquo;s Core Web Vitals metric, explores how it differs from the deprecated FID metric, and outlines how to optimize your JavaScript execution pathways to achieve &amp;ldquo;Good&amp;rdquo; scores.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="1-what-is-interaction-to-next-paint-inp"&gt;1. What is Interaction to Next Paint (INP)?
&lt;/h2&gt;&lt;p&gt;&lt;strong&gt;INP&lt;/strong&gt; tracks the latency of all user interactions (clicks, taps, and keyboard inputs) during a user&amp;rsquo;s visit to a page. It measures the duration between when a user initiates an action and when the browser paints the next frame showing the visual update.&lt;/p&gt;</description></item><item><title>Building Blazing Fast APIs with Hono and Cloudflare Workers</title><link>https://netguide.jp/en/web/hono-framework-cloudflare-workers/</link><pubDate>Fri, 01 May 2026 12:00:00 +0900</pubDate><guid>https://netguide.jp/en/web/hono-framework-cloudflare-workers/</guid><description>&lt;img src="https://netguide.jp/img/thumbnail/hono-framework-cloudflare-workers-en.png" alt="Featured image of post Building Blazing Fast APIs with Hono and Cloudflare Workers" /&gt;&lt;p&gt;Combine the micro-framework Hono and Cloudflare Workers to deliver lightning-fast responses on the global edge.&lt;/p&gt;
&lt;p&gt;In 2026, building edge-native serverless backends has become the modern standard. This guide dives into why &amp;ldquo;Hono + Cloudflare Workers&amp;rdquo; is a powerful stack, how to initialize a project, and includes a TypeScript API example.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="1-why-choose-hono-and-cloudflare-workers"&gt;1. Why Choose Hono and Cloudflare Workers?
&lt;/h2&gt;&lt;p&gt;Traditional web frameworks (like Express or NestJS) were designed before modern Web Standard APIs emerged. Consequently, they bundle node-specific polyfills and runtime code, making them too heavy for lightweight serverless nodes.&lt;/p&gt;</description></item><item><title>Tailwind CSS v4 Features and Migration Guide</title><link>https://netguide.jp/en/web/tailwind-css-v4-update/</link><pubDate>Wed, 01 Apr 2026 12:00:00 +0900</pubDate><guid>https://netguide.jp/en/web/tailwind-css-v4-update/</guid><description>&lt;img src="https://netguide.jp/img/thumbnail/tailwind-css-v4-update-en.png" alt="Featured image of post Tailwind CSS v4 Features and Migration Guide" /&gt;&lt;p&gt;Tailwind CSS v4.0 introduces a brand-new compilation engine written completely in Rust, accelerating build loops by up to 10x. Additionally, it transitions from a JavaScript-based configuration file (&lt;code&gt;tailwind.config.js&lt;/code&gt;) to a CSS-first approach, where customizations are defined inside your primary stylesheet using standard CSS variables.&lt;/p&gt;
&lt;p&gt;This article reviews the major changes in Tailwind CSS v4 and provides a practical migration walkthrough to help you upgrade your projects.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="1-key-changes-in-tailwind-css-v4"&gt;1. Key Changes in Tailwind CSS v4
&lt;/h2&gt;&lt;h3 id="1-rust-powered-oxide-engine"&gt;1) Rust-Powered &amp;ldquo;Oxide&amp;rdquo; Engine
&lt;/h3&gt;&lt;p&gt;The defining feature of v4 is its compiler. Rewritten in Rust, the Oxide engine processes stylesheet files significantly faster than the old PostCSS-based engine. This translates to near-instantaneous dev server startups and hot module replacement (HMR), keeping developers in their flow.&lt;/p&gt;</description></item><item><title>The Benefits of Adopting PWA (Progressive Web Apps) in 2026</title><link>https://netguide.jp/en/web/pwa-advantages-2026/</link><pubDate>Fri, 20 Mar 2026 12:00:00 +0900</pubDate><guid>https://netguide.jp/en/web/pwa-advantages-2026/</guid><description>&lt;img src="https://netguide.jp/img/thumbnail/pwa-advantages-2026-en.png" alt="Featured image of post The Benefits of Adopting PWA (Progressive Web Apps) in 2026" /&gt;&lt;p&gt;PWAs (Progressive Web Apps) allow web applications to be installed on user devices, offering features like push notifications and offline support.&lt;/p&gt;
&lt;p&gt;In 2026, the mobile web ecosystem has matured significantly, with enhanced support for Web Push on both iOS and Android. Choosing PWA architecture is now more compelling than ever for cross-platform app development. This article explores the technical advantages and strategic business benefits of PWAs in 2026.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="1-technical-context-of-pwas-in-2026"&gt;1. Technical Context of PWAs in 2026
&lt;/h2&gt;&lt;p&gt;Historically, PWAs faced adoption hurdles due to limited capability support on iOS Safari. Today, the landscape has completely changed:&lt;/p&gt;</description></item><item><title>Understanding CSS Subgrid Layout for Modern Design</title><link>https://netguide.jp/en/web/css-subgrid-layout-guide/</link><pubDate>Sun, 15 Mar 2026 12:00:00 +0900</pubDate><guid>https://netguide.jp/en/web/css-subgrid-layout-guide/</guid><description>&lt;img src="https://netguide.jp/img/thumbnail/css-subgrid-layout-guide-en.png" alt="Featured image of post Understanding CSS Subgrid Layout for Modern Design" /&gt;&lt;p&gt;CSS Grid revolutionized how web layouts are structured. However, a common challenge remained: aligning nested items (grandchild elements) inside parent Grid Items to the main grid lines.&lt;/p&gt;
&lt;p&gt;This was resolved with the introduction of &lt;strong&gt;CSS Subgrid&lt;/strong&gt;, a specification update for CSS Grid Layout. This article explains the fundamentals of CSS Subgrid and how to apply it to common layout problems like card lists.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="1-what-is-css-subgrid"&gt;1. What is CSS Subgrid?
&lt;/h2&gt;&lt;p&gt;Traditionally, only direct children of a Grid container can be positioned along the defined grid tracks. When you declare another grid inside a Grid Item, that nested grid is completely isolated from the outer parent grid.&lt;/p&gt;</description></item><item><title>Essential Web Accessibility (WCAG) Knowledge in 2026</title><link>https://netguide.jp/en/web/web-accessibility-wcag-2026/</link><pubDate>Sun, 01 Mar 2026 12:00:00 +0900</pubDate><guid>https://netguide.jp/en/web/web-accessibility-wcag-2026/</guid><description>&lt;img src="https://netguide.jp/img/thumbnail/web-accessibility-wcag-2026-en.png" alt="Featured image of post Essential Web Accessibility (WCAG) Knowledge in 2026" /&gt;&lt;p&gt;Legislation enforcing digital accessibility is tightening globally. In 2026, targeting compliance with &lt;strong&gt;WCAG 2.2 (Web Content Accessibility Guidelines)&lt;/strong&gt; at Level &amp;ldquo;AA&amp;rdquo; is no longer optional—it has become a standard engineering requirement for web platforms.&lt;/p&gt;
&lt;p&gt;To build barrier-free web experiences, developers must understand semantic structures, user inputs, and visual design requirements.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id="1-key-guidelines-introduced-in-wcag-22"&gt;1. Key Guidelines Introduced in WCAG 2.2
&lt;/h3&gt;&lt;p&gt;WCAG 2.2 focuses on improving accessibility for mobile users, people with cognitive disabilities, and low-vision individuals.&lt;/p&gt;</description></item></channel></rss>