https://www.codeslog.com/en/categories/frontend/ Recent content in Frontend on Codeslog https://www.codeslog.com/images/default-cover.png?v=20260114T1436 https://www.codeslog.com/images/default-cover.png?v=20260114T1436 Hugo -- 0.168.0 en-US Sat, 24 Oct 2026 02:02:00 +0900 https://www.codeslog.com/en/posts/modal-dialog-implementation/ Sat, 24 Oct 2026 02:02:00 +0900 https://www.codeslog.com/en/posts/modal-dialog-implementation/ Compare dialog showModal() with a div modal: inert, focus trap, ESC, scroll lock, focus restoration, and why Tab leaves a dialog (measured in Chrome). https://www.codeslog.com/en/posts/form-ux-validation/ Tue, 15 Sep 2026 11:31:00 +0900 https://www.codeslog.com/en/posts/form-ux-validation/ Forms that flash errors on focus, or stay silent until submit, fail users. Get validation timing, aria-invalid, and aria-describedby right for accessible forms. https://www.codeslog.com/en/posts/spa-focus-management/ Tue, 15 Sep 2026 11:26:00 +0900 https://www.codeslog.com/en/posts/spa-focus-management/ Why screen readers stay silent after SPA route changes, and how to fix it in React and Next.js with focus management, aria-live, and focus restoration patterns. https://www.codeslog.com/en/posts/safari-top-level-await-fix/ Thu, 03 Sep 2026 11:25:33 +0900 https://www.codeslog.com/en/posts/safari-top-level-await-fix/ Reran WebKit's top-level await repro on Safari 26.6 and iOS 26.5. Past the ReferenceError, modules declared after a TLA one wait for it — loading doubled. https://www.codeslog.com/en/posts/aria-live-regions/ Wed, 02 Sep 2026 01:14:30 +0900 https://www.codeslog.com/en/posts/aria-live-regions/ You added aria-live correctly, but the screen reader stays silent. Why the container must exist before its content, and when to use focus instead. https://www.codeslog.com/en/posts/scroll-driven-animation/ Wed, 12 Aug 2026 01:34:00 +0900 https://www.codeslog.com/en/posts/scroll-driven-animation/ Scroll-Driven Animation treats scroll not as an event but as the timeline itself. This post compares three implementations — native CSS, IntersectionObserver, and requestAnimationFrame — covering how each works, their tradeoffs, and accessibility. https://www.codeslog.com/en/posts/frontend-testing-wrap/ Sat, 08 Aug 2026 01:12:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-wrap/ Wrapping up the frontend testing series: the five layers stacked on one small app, what testing means for team culture and interviews, how to start on legacy code with no tests, and where to go next. https://www.codeslog.com/en/posts/frontend-testing-ai-pitfalls/ Fri, 07 Aug 2026 14:59:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-ai-pitfalls/ AI-written code is wrong in plausible ways. The accessibility and edge cases AI repeatedly drops, and how the test suite from this series reports each hole automatically — with a real before and after. https://www.codeslog.com/en/posts/frontend-testing-ai-playwright/ Thu, 06 Aug 2026 01:11:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-ai-playwright/ AI now drives the browser itself. A practical map of Playwright codegen and MCP agents: why Playwright MCP reads the accessibility tree rather than screenshots, and why self-healing selectors aren't a Playwright feature. https://www.codeslog.com/en/posts/frontend-testing-ai-generate/ Thu, 06 Aug 2026 00:46:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-ai-generate/ How good is AI at writing tests? Practical ways to generate and extend tests with LLMs, what AI reliably misses, and the checklist for trusting AI-written tests. https://www.codeslog.com/en/posts/browser-features-accessibility-2026/ Wed, 05 Aug 2026 15:07:00 +0900 https://www.codeslog.com/en/posts/browser-features-accessibility-2026/ A green support table doesn't mean everyone can use it. Here's a 2026 accessibility check on popover, anchor positioning, dialog, and view transitions — and what you still have to do yourself for each. https://www.codeslog.com/en/posts/frontend-testing-coverage-metrics/ Tue, 04 Aug 2026 09:08:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-coverage-metrics/ How should you read a coverage report, and how far should you trust it? The difference between line and branch coverage, finding untested forks, and the team-health metrics numbers can't show. https://www.codeslog.com/en/posts/frontend-testing-ci-github-actions/ Mon, 03 Aug 2026 01:59:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-ci-github-actions/ A pipeline where unit tests, E2E, and accessibility checks run on every PR. Set up a merge gate with GitHub Actions in one workflow file — CI beginners welcome, terms explained in three minutes. https://www.codeslog.com/en/posts/frontend-testing-visual-regression/ Wed, 29 Jul 2026 15:01:36 +0900 https://www.codeslog.com/en/posts/frontend-testing-visual-regression/ 'The feature works but the layout broke.' Catch what only eyes used to catch: implement visual regression tests with Playwright screenshot comparison, stable snapshots, and the environment trap to avoid. https://www.codeslog.com/en/posts/frontend-testing-axe-e2e/ Mon, 27 Jul 2026 14:38:51 +0900 https://www.codeslog.com/en/posts/frontend-testing-axe-e2e/ Catch page-wide accessibility violations automatically, in a real browser. What axe-core is and how it works, how to integrate it into Playwright E2E, and what automation catches — and can't. https://www.codeslog.com/en/posts/frontend-testing-playwright-debug/ Wed, 22 Jul 2026 01:30:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-playwright-debug/ What do you look at when a test fails only on CI? Playwright's trace viewer and debugging tools track the real cause — with evidence, not guesswork — and turn retries into a signal instead of a fix. https://www.codeslog.com/en/posts/frontend-testing-playwright-fixtures/ Tue, 21 Jul 2026 01:25:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-playwright-fixtures/ Repeating the same setup in every test? Playwright's custom fixtures (base.extend) and Page Object pattern remove it, storageState logs in once, and fullyParallel keeps the suite fast and isolated. https://www.codeslog.com/en/posts/opacity-contrast-trap/ Tue, 21 Jul 2026 00:30:00 +0900 https://www.codeslog.com/en/posts/opacity-contrast-trap/ You put a dark gray in your CSS, yet the accessibility checker flags it for low contrast. The culprit is opacity. Here's how opacity mixes your text color into the background and quietly kills contrast — with a real case, the math, and the fix. https://www.codeslog.com/en/posts/frontend-testing-playwright-locators/ Sat, 18 Jul 2026 23:06:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-playwright-locators/ Why E2E tests fail only sometimes, and the actual fix. Understand Playwright locators, auto-wait, and strict mode, and cut flakiness at the root with robust selectors. https://www.codeslog.com/en/posts/high-contrast-mode/ Sat, 18 Jul 2026 22:47:00 +0900 https://www.codeslog.com/en/posts/high-contrast-mode/ Dark mode is about choosing colors; high contrast mode is about responding to the colors the OS forces. How to support low-vision users with the forced-colors media query, system color keywords, and prefers-contrast — with practical code. https://www.codeslog.com/en/posts/dark-mode-implementation/ Sat, 18 Jul 2026 02:44:00 +0900 https://www.codeslog.com/en/posts/dark-mode-implementation/ Design dark mode with CSS custom properties, implement prefers-color-scheme with JS toggle, and verify color contrast in both modes. A practical guide to dark mode that works for everyone. https://www.codeslog.com/en/posts/frontend-testing-playwright-intro/ Sat, 18 Jul 2026 02:25:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-playwright-intro/ E2E verifies whole user flows in a real browser. Install Playwright, understand the webServer config, and write and pass your first scenario — with a clear role split against unit and component tests. https://www.codeslog.com/en/posts/frontend-testing-a11y-queries/ Fri, 17 Jul 2026 01:37:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-a11y-queries/ A well-written test is an accessibility check. Use role-based queries and accessible names to catch accessibility regressions with the tests you already write — no new tools required. https://www.codeslog.com/en/posts/javascript-nullish-coalescing/ Tue, 14 Jul 2026 23:52:00 +0900 https://www.codeslog.com/en/posts/javascript-nullish-coalescing/ The decisive difference between the nullish coalescing operator (??) and || — it's why 0 and empty strings get swallowed by defaults. Falsy traps, ??= assignment, optional chaining combos, and why mixing the two throws a SyntaxError. https://www.codeslog.com/en/posts/frontend-testing-msw/ Tue, 14 Jul 2026 01:05:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-msw/ Calling a real API in tests is slow and unstable. Isolate the network layer with MSW (Mock Service Worker) and simulate success and failure responses at will — a real reception desk for your requests. https://www.codeslog.com/en/posts/frontend-testing-user-event/ Mon, 13 Jul 2026 23:39:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-user-event/ Reproduce real user interactions — typing, clicking, selecting — with user-event, and test forms and state changes from render to result, the way a user would actually drive them. https://www.codeslog.com/en/posts/frontend-testing-testing-library/ Fri, 10 Jul 2026 01:27:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-testing-library/ React Testing Library's core philosophy: test like a user. Learn the query priority built around getByRole, and how testing behavior instead of implementation makes tests survive refactoring. https://www.codeslog.com/en/posts/frontend-testing-test-doubles/ Fri, 10 Jul 2026 00:44:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-test-doubles/ mock, stub, spy, fake… the confusing test-double vocabulary, sorted out. Cover all three with a single Vitest vi.fn() (Jest is nearly identical), and learn the one rule for how much to fake. https://www.codeslog.com/en/posts/typescript-7-native-compiler/ Thu, 09 Jul 2026 23:05:00 +0900 https://www.codeslog.com/en/posts/typescript-7-native-compiler/ TypeScript 7 has shipped, reborn in Go. Real benchmarks (VSCode: 125s to 10s), the new strict-by-default config, side-by-side installs with 6.x — everything you need to decide whether to switch today. https://www.codeslog.com/en/posts/frontend-testing-async/ Wed, 08 Jul 2026 00:27:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-async/ Promises, setTimeout, and failure cases. Test async code with Vitest's resolves/rejects matchers and fake timers, building a debounce test — and see why a missing await lets a broken test pass anyway. https://www.codeslog.com/en/posts/frontend-testing-unit-basics/ Mon, 06 Jul 2026 00:20:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-unit-basics/ The sturdiest foundation there is: unit tests. Learn how to test pure functions, hunt edge cases, and structure every test with the AAA (Arrange-Act-Assert) pattern — with real-world examples. https://www.codeslog.com/en/posts/frontend-testing-setup-vitest/ Sun, 05 Jul 2026 00:05:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-setup-vitest/ Install Vitest and Testing Library in a React + Vite + TypeScript demo app and walk all the way to your first passing test — with the common setup pitfalls mapped out. https://www.codeslog.com/en/posts/frontend-testing-strategy-coverage/ Sat, 04 Jul 2026 22:34:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-strategy-coverage/ Are more tests always better? A guide to what deserves tests first, plus three traps that inflate coverage without protecting users: assert-less tests, snapshot piles, and implementation-detail spies. https://www.codeslog.com/en/posts/frontend-testing-glossary/ Sat, 04 Jul 2026 22:30:00 +0900 https://www.codeslog.com/en/posts/frontend-testing-glossary/ From unit tests to flaky, fixtures, and MCP — every term in the Frontend Testing, Done Right series, explained for beginners and ordered the way you'll meet them. Bookmark this page and come back whenever a word looks unfamiliar. https://www.codeslog.com/en/posts/frontend-testing-why-now/ Fri, 03 Jul 2026 16:33:17 +0900 https://www.codeslog.com/en/posts/frontend-testing-why-now/ The faster AI writes code, the more testing matters. In this opener of the Frontend Testing, Done Right series, we cover what tests really give you, pyramid vs. trophy strategy, and the full curriculum ahead. https://www.codeslog.com/en/posts/javascript-promise-methods/ Wed, 08 Apr 2026 01:00:00 +0900 https://www.codeslog.com/en/posts/javascript-promise-methods/ One failing Promise can take down your entire dashboard. Compare Promise.all and Promise.allSettled with real-world examples, and learn when to use which. https://www.codeslog.com/en/posts/javascript-function-hoisting/ Sat, 04 Apr 2026 02:30:00 +0900 https://www.codeslog.com/en/posts/javascript-function-hoisting/ Learn the difference between function declarations and expressions, how hoisting works under the hood, and when to use arrow functions in practice. https://www.codeslog.com/en/posts/code-block-accessibility-improvement/ Fri, 09 Jan 2026 20:00:00 +0900 https://www.codeslog.com/en/posts/code-block-accessibility-improvement/ A record of improving code blocks on a Hugo PaperMod blog. We replaced table-based line numbers with CSS counters so screen reader users can read code without the noise of table markup — a more semantic, accessible approach.