https://www.codeslog.com/en/tags/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 01:07:00 +0900 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/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-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/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/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-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.