- CSS
- Responsive Design
- Component Design
Build Component-Responsive Layouts with CSS Container Queries
Use CSS container queries to switch a component based on its own available width, making reusable cards more responsive than viewport-only rules.
Practical notes for web apps
Make web app decisions reusable.
app-hacks documents practical implementation and design decisions for web applications, centered on Astro, TypeScript, HTML, and CSS.
Latest
Latest articles
- CSS
- Responsive Design
- Typography
Design Responsive Type Sizes with CSS clamp()
Use CSS clamp() to define minimum, fluid, and maximum type sizes without multiplying media queries, while keeping text readable.
- CSS
- Design Systems
- Custom Properties
Manage Theme Values with CSS Custom Properties
Learn how to manage colors, spacing, and typography with CSS custom properties so component values stay consistent.
- CSS
- Gradients
- JavaScript
Design and Implement a CSS Gradient Generator
Design a CSS gradient generator with linear and radial gradients, color stops, CSS output, and copy handling.
- Canvas API
- WebP
- JavaScript
Convert and Compress WebP Images in the Browser with Canvas API
Use file reading, Canvas conversion, quality control, transparency, and Blob downloads to make a browser-only WebP converter.
FAQ
Frequently asked questions
Does the site automatically redirect visitors?
No. Your language is never used to redirect you. The Japanese page may offer an English link, and the language switcher remains available on every page.
Are the articles available in both languages?
Yes. Each published article has separate Japanese and English URLs, with a language switcher linking the corresponding pages.
How can I return to Japanese?
Use the Japanese / English links in the header. They are available regardless of whether you see, dismiss, or accept the language notice.