tags, SEO title tags, marketing hero headlines, report and document titles, and brand- or product-level headings. Some design systems also use title case for top-level navigation or section headings — that is a legitimate choice, but it should be an explicit system rule, not a per-screen improvisation."},{"question":"Should buttons use sentence case or title case?","answer":"Sentence case is the dominant modern choice for buttons across most design systems, including Material and current Microsoft guidance. It reads as an action phrase rather than a headline, scales across languages more predictably, and sidesteps the rule debates of title case. The important rule is consistency: pick one and apply it to every button in the product."},{"question":"Is camelCase appropriate in visible UI labels?","answer":"Generally no. camelCase belongs to code — JavaScript variables, JSON keys, prop names, internal identifiers. When camelCase leaks into visible UI labels (customerID, invoiceStatus, apiKey) it signals that the product is exposing raw technical identifiers instead of human-facing copy. The fix is to separate internal keys from presentation strings: the key in code stays camelCase, but the label shown to users becomes ‘Customer ID’, ‘Invoice status’, or ‘API key’."},{"question":"Why is ALL CAPS bad for accessibility?","answer":"ALL CAPS removes letter-shape cues that many readers rely on for scanning, reduces readability for users with dyslexia and low vision, and can be interpreted as shouting. Some screen readers or text-to-speech pipelines may also spell out short all-caps strings letter by letter instead of reading them as words — behaviour varies across engines. Use ALL CAPS sparingly, typically for short styled labels, not for running UI copy."},{"question":"What is the difference between camelCase and kebab-case?","answer":"camelCase joins words with no separator and capitalises every word after the first (userAccountId). kebab-case joins words with hyphens and is all lowercase (user-account-id). camelCase is used in code identifiers (JavaScript variables, JSON keys, React props). kebab-case is used in URL slugs, CSS class names, HTML attributes, and command-line flags. They are not interchangeable — mixing them across layers is one of the most common sources of bugs at API and routing boundaries."},{"question":"Should SEO title tags follow the same rules as UI labels?","answer":"No. SEO title tags are editorial titles that appear on search-result listings and in the browser tab — title case is a perfectly valid and common choice, even for products whose UI uses sentence case. The rule your design system should codify is: UI labels follow the UI standard, and <title>, Open Graph title, and Twitter card title follow the editorial standard. They can be different, and they frequently are."},{"question":"How do design systems standardize capitalization?","answer":"The mature approach is: pick an explicit default for UI copy (usually sentence case), list the exceptions where title case applies (page titles, SEO metadata, marketing hero headlines, specific platform-native components), keep technical casing (camelCase, kebab-case, snake_case) out of visible labels, document exceptions for brand and product names, and normalise imported or migrated strings before they reach the UI. The system rule lives in the design-system documentation, and content QA or linting enforces it where possible."}],"relatedSlugs":["hyphens-vs-underscores-urls-seo","google-rewrites-title-meta-description","accessible-custom-select-date-picker-autocomplete"]},{"slug":"cls-issues-fonts-ads-hydration","title":"CLS Issues Caused by Fonts, Ads, and Hydration","seoTitle":"CLS Issues Caused by Fonts, Ads, and Hydration | CodeAva","excerpt":"Is your layout jumping unexpectedly? Learn how to fix Cumulative Layout Shift caused by web fonts, unreserved ad slots, and hydration mismatches in modern frontends.","date":"2026-04-22","readTime":"15 min read","category":"Web Performance","tags":["CLS","core-web-vitals","cumulative-layout-shift","web-fonts","ads","hydration","visual-stability","performance","react","nextjs","frontend-debugging"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.62 0.18 40)","to":"oklch(0.52 0.20 310)"},"coverImage":"/blog/cls-issues.jpg","faqs":[{"question":"What causes CLS on modern websites?","answer":"On modern sites, the three most common causes of Cumulative Layout Shift are web fonts that reflow text when the fallback is swapped for the final font, ads or embeds injected into containers without reserved space, and hydration or post-render UI changes that move content already visible to the user. Images without width and height still contribute, but they are no longer the only culprit worth auditing."},{"question":"Can fonts cause CLS?","answer":"Yes. When a fallback system font has different metrics from the final web font, text reflows the moment the web font loads, pushing surrounding content. font-display: swap keeps text visible but does not prevent the shift. The reliable fix is to align fallback and final font metrics using size-adjust, ascent-override, descent-override, and line-gap-override on a tuned @font-face fallback, so the swap does not change the rendered size of text blocks."},{"question":"Why do ads and embeds create layout shift?","answer":"Ads, iframes, and third-party widgets arrive asynchronously and are often injected into containers whose height is decided only after the response returns. If the surrounding layout does not reserve space in advance, visible content is pushed down as soon as the slot fills. Reserving space with fixed dimensions, aspect-ratio, or a min-height equal to the expected size eliminates the shift regardless of when the ad arrives."},{"question":"Can hydration cause CLS in React or Next.js apps?","answer":"Yes. The server-rendered HTML may look stable, but once the client hydrates, app state, auth-dependent UI, cookie banners, personalized blocks, or client-only measurements can alter layout after the user has already seen the page. Those shifts count as unexpected and contribute to CLS. The fix is to keep layout consistent between server and client output and to reserve space for any UI that mounts only after hydration."},{"question":"What is the best way to reserve space for ads?","answer":"Wrap the ad or embed in a container that has a committed size before the ad loads. Use fixed width and height attributes, aspect-ratio on the container, or a min-height equal to the tallest likely creative for that slot. Render a placeholder or skeleton while the ad is pending so the space is visually committed, and avoid collapsing the container if no ad arrives."},{"question":"How do I debug layout shifts in Chrome DevTools?","answer":"Open DevTools, enable Layout Shift Regions in the Rendering panel to see shifts highlighted on the page as they happen, then record a Performance trace on a cold reload. In the trace, look for the Experience track for layout-shift entries, expand each one to see the affected node, and check the Network or Main track to identify the resource or script that triggered the shift. The Performance Insights panel also groups layout shifts with a direct link to the element and its cause."},{"question":"Why does CLS look worse in field data than locally?","answer":"Lab runs usually use a single device profile, a warm cache, and a controlled network, so delayed fonts, ads, and late scripts often resolve before they can produce a visible shift. Real users see slower networks, cold caches, variable ad fill timing, and post-load interactions that trigger client-only UI changes. Field CLS captures the full session window, including shifts that happen after the initial load where most real-world instability lives."},{"question":"What is a good CLS score?","answer":"Google considers a CLS of 0.1 or less to be good and anything above 0.25 to be poor at the 75th percentile of page views. CLS is calculated from the largest burst of unexpected shifts within a session window, so a single bad moment, such as a late font swap or a cookie banner insertion, can push an otherwise stable page into the poor range."}],"relatedSlugs":["lcp-debugging-checklist-modern-frontends","finding-inp-bottlenecks-production","core-web-vitals"]},{"slug":"post-migration-crawlability-audit-checklist","title":"How to Audit Crawlability After a Site Migration","seoTitle":"How to Audit Crawlability After a Site Migration | CodeAva","excerpt":"Just moved to a new domain or architecture? Learn how to audit crawlability, fix redirect chains, align canonicals, and help search engines discover your new site structure safely.","date":"2026-04-22","updatedDate":"2026-04-22","readTime":"17 min read","category":"Technical SEO","tags":["site-migration","crawlability","technical-seo","redirects","sitemap","robots-txt","canonical-tags","search-console","indexing","soft-404","post-launch-audit"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.48 0.18 160)","to":"oklch(0.42 0.20 225)"},"coverImage":"/blog/website-audit-dashboard.jpg","faqs":[{"question":"How do you audit crawlability after a site migration?","answer":"Treat it as four pillars plus monitoring. Verify that every old URL returns a permanent server-side redirect to its best new equivalent, confirm the new XML sitemap contains only canonical 200-status URLs, check that robots.txt actually allows the new structure to be crawled, and confirm that canonicals, internal links, sitemaps, and redirects all point to the same preferred URLs. Then watch Search Console for not-found spikes, soft 404s, duplicate-without-user-selected-canonical entries, and sitemap submission issues in the weeks after launch."},{"question":"Should I use 301 or 302 redirects after a migration?","answer":"Use 301 (or 308) for permanent moves. A 302 or 307 tells search engines the move is temporary and can delay consolidation of ranking signals onto the new URL. If the old URL will never come back, the redirect must be permanent. The only legitimate reasons to use a temporary redirect during a migration are short-term rollback plans or A/B tests — neither of which describes the steady-state post-launch configuration."},{"question":"Why are homepage redirects a bad migration strategy?","answer":"Redirecting large numbers of old URLs to the homepage looks convenient but is one of the most damaging post-migration patterns. The homepage is almost never a meaningful replacement for a product page, article, or category. Google can treat irrelevant redirects like soft 404s, which weakens consolidation of ranking signals and slows recovery. If a retired URL has no meaningful replacement, a real 404 or 410 is usually a cleaner answer than a misleading redirect."},{"question":"What should be in the sitemap after a migration?","answer":"Only canonical, indexable URLs that return a 200 status. Remove anything that redirects, 404s, is blocked by robots.txt, has noindex set, or is a duplicate of another canonical URL. The new sitemap should be a clean list of the destinations you want search engines to index. A dirty sitemap full of redirected or non-canonical URLs slows discovery and adds noise to Search Console coverage reports."},{"question":"Can robots.txt break crawlability after launch?","answer":"Yes, and it is one of the most common post-migration incidents. Teams ship with staging rules still active (Disallow: /), add overly broad Disallow patterns for new faceted paths that also match important templates, forget to update the Sitemap directive, or move the file and break the path. Always validate the live production robots.txt against the intended crawl policy immediately after launch and whenever infrastructure changes."},{"question":"Why are old-domain canonicals dangerous after a migration?","answer":"If the new URLs canonicalize to the old domain or old URL format, you are telling search engines that the old URLs are the preferred ones. That conflicts with the redirects from old to new and creates mixed signals that delay consolidation. On the new site, canonicals should usually self-reference the preferred new URL, reinforcing the same destination declared by redirects, internal links, and the sitemap."},{"question":"What is a soft 404 in a migration context?","answer":"A soft 404 is a URL that returns a 200 (or redirects to a 200) but does not meaningfully satisfy the request — typically an old, removed product redirected to the homepage or a generic category. Google classifies these as effectively not-found because the response is not a real replacement for the original intent. Soft 404s are a common side effect of lazy 'redirect everything to the homepage' migration plans."},{"question":"What should I monitor in Search Console after a migration?","answer":"Verify both old and new properties where relevant. Watch the Page Indexing report for spikes in not-found (404), soft 404, server errors, redirect errors, and 'duplicate without user-selected canonical'. Check sitemap submission status and the number of submitted vs indexed URLs. Use URL Inspection to live-test representative templates. Watch the Crawl Stats report for unusual response-time patterns during the transition. Keep this monitoring active for several weeks — consolidation is not instant."}],"relatedSlugs":["robots-txt-mistakes-blocking-seo","xml-sitemap-best-practices","canonical-tags-javascript-headless-seo"]},{"slug":"accessible-custom-select-date-picker-autocomplete","title":"Accessibility Mistakes in Custom Selects, Date Pickers, and Autocomplete Fields","seoTitle":"Accessibility Mistakes in Custom Selects, Date Pickers, and Autocomplete Fields | CodeAva","excerpt":"Are your custom form controls a keyboard trap? Learn the accessibility mistakes that break custom selects, date pickers, and autocomplete fields in modern web apps.","date":"2026-04-22","updatedDate":"2026-04-22","readTime":"18 min read","category":"Accessibility","tags":["accessibility","a11y","aria","combobox","listbox","custom-select","date-picker","autocomplete","keyboard-navigation","focus-management","wcag","design-systems"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.45 0.22 290)","to":"oklch(0.58 0.18 195)"},"coverImage":"/blog/accessibility-design-guide.jpg","faqs":[{"question":"Are custom selects less accessible than native selects?","answer":"They usually start that way. Native <select> ships with full keyboard support, focus behavior, platform-native popup UI, and screen-reader semantics for free. Any custom replacement has to rebuild all of that behavior deliberately. A well-engineered custom select can reach parity, but it raises the engineering bar significantly — and most shipped custom selects are missing at least one of: focus management, active-option exposure, predictable keyboard model, or assistive-tech announcements."},{"question":"What is the difference between a select, listbox, and combobox?","answer":"A native <select> is a form control that pops up a list of options. A listbox is the ARIA role for a non-editable list of selectable options. A combobox is an input (or button) that controls a popup — the popup can be a listbox, grid, tree, or dialog, and the input may be editable (autocomplete) or read-only (a select replacement that uses the combobox pattern). They are not interchangeable. Putting role=\"menu\" on any of these is wrong — menus are for application commands, not form values."},{"question":"Should a custom date picker allow manual typing?","answer":"Almost always yes. Many users can type a date faster and more reliably than navigating a calendar with a mouse, including screen-reader users, keyboard users, and users with motor impairments. Disabling manual entry to force the calendar UI is one of the most common and most damaging accessibility mistakes in date pickers. Parse and validate typed input instead; the calendar popup should be a complementary affordance, not the only path."},{"question":"What is aria-activedescendant used for in autocomplete?","answer":"aria-activedescendant lets DOM focus stay in the input while the component indicates which option in the popup is 'active' by referencing its id. This is the standard pattern for editable comboboxes and autocomplete fields, because moving DOM focus into the listbox would break typing. The active option must have a visible indicator, and the aria-activedescendant value must always point at an element that actually exists in the open popup."},{"question":"Do autocomplete fields need to announce result counts?","answer":"They need to expose result availability in some accessible way. A polite live region that announces 'N results available' or 'No results' when the list updates is a common, robust solution. It is not the only one — the combobox itself carries aria-expanded, and the listbox exposes options to assistive tech — but for dynamic, typing-driven results, a status message prevents users from typing into silence when suggestions change or disappear."},{"question":"Should focus move into the popup list for a combobox?","answer":"It depends on the pattern. For an editable combobox (autocomplete), DOM focus stays in the input and the active option is tracked with aria-activedescendant so the user can keep typing. For a select-only combobox that uses a listbox popup, focus may move into the listbox. Either is valid when implemented consistently with a recognised ARIA pattern — what breaks accessibility is mixing the two, or moving focus in ways the user cannot predict or recover from."},{"question":"When should I use a native control instead of a custom one?","answer":"Whenever native satisfies the product requirement. Native <select>, <input type=\"date\">, and <input type=\"text\"> with a datalist come with accessibility, keyboard, and platform UX for free, and they update automatically as browsers improve. Build a custom control only when the product genuinely needs behavior the native element cannot provide — rich option rendering, async search, multi-select with tags, or custom validation flows — and commit to maintaining the keyboard, focus, and announcement logic for the lifetime of the component."},{"question":"How do I test a custom form control for keyboard accessibility?","answer":"Unplug the mouse. Reach the control with Tab, open it with Enter or Space or the arrow key the pattern expects, navigate options with arrow keys, commit a selection with Enter, and dismiss with Escape. Confirm focus is always visible, confirm focus returns somewhere logical after the popup closes, and confirm the active option is exposed (visually and to a screen reader). Then run the same checks with a screen reader in a real user flow, not just an isolated component demo."}],"relatedSlugs":["accessible-tabs-accordions-menus-aria-guide","accessible-react-modal-focus-management","keyboard-navigation-testing-checklist-web-apps"]},{"slug":"canonical-tags-javascript-headless-seo","title":"Canonical Tags for JavaScript & Headless Websites","seoTitle":"Canonical Tags for JavaScript & Headless Websites | CodeAva","excerpt":"Are your React, Vue, or headless pages creating duplicate-content issues? Learn how canonical tags should work in SSR and JavaScript environments, and how to avoid conflicting signals.","date":"2026-04-18","readTime":"15 min read","category":"Technical SEO","tags":["canonical-tags","javascript-seo","headless","react","nextjs","ssr","csr","duplicate-content","hreflang","indexing"],"authorId":"gareth-whitbey","coverGradient":{"from":"oklch(0.38 0.14 220)","to":"oklch(0.55 0.16 190)"},"coverImage":"/blog/js-cannonical-tags.jpg","faqs":[{"question":"Can canonical tags be set with JavaScript?","answer":"Yes, but with important caveats. Google can process JavaScript-set canonicals, but the safest and most predictable approach is to emit the canonical in the initial HTML response. If you must set it with JavaScript, make sure it does not conflict with a different canonical already in the server-rendered HTML. Conflicting canonicals weaken the signal."},{"question":"Should canonical URLs be absolute or relative?","answer":"Google supports both, but absolute URLs are strongly recommended, especially for headless and multi-environment architectures. Absolute URLs eliminate ambiguity about scheme, host, and path, and they avoid accidental leakage of preview, staging, or CDN origins into the canonical signal."},{"question":"What happens if the server HTML canonical and the client-side canonical disagree?","answer":"Google treats conflicting canonical signals as unclear and may choose a different canonical than either value. This commonly produces \"Duplicate, Google chose different canonical than user\" or similar messages in Search Console. The fix is to ensure the final canonical is consistent: emit the correct one in HTML, or omit it in HTML and set one clean value on the client."},{"question":"Do canonical tags guarantee that a URL will be indexed?","answer":"No. Canonical tags are a strong hint, not a command. Google combines canonical signals with redirects, internal linking, sitemap entries, hreflang groupings, and page similarity to decide which URL to index. A canonical tag can be ignored if other signals contradict it or if the target URL is blocked, redirected, or considered low quality."},{"question":"How do canonical tags interact with hreflang?","answer":"Canonical and hreflang must agree. Each localised URL in an hreflang cluster should be self-canonical — the canonical for the English page points to the English URL, the canonical for the German page points to the German URL, and so on. Pointing every language variant to a single canonical breaks the hreflang relationship and can drop alternate-language pages from search."},{"question":"Why does my headless site have so many duplicate-canonical issues?","answer":"Headless architectures produce more URL variants than traditional sites: trailing-slash inconsistencies, query parameters, preview domains, CDN origins, locale paths, faceted navigation, and staging environments often all resolve to similar content. Without careful routing and canonical discipline, these variants are easy to create and hard to collapse."},{"question":"Is checking the rendered DOM enough to confirm the canonical?","answer":"No. The rendered DOM shows what the browser sees after JavaScript runs. Search engines, crawlers, and shared-link previewers may read the raw HTML response first. Always verify the canonical in View Source (the raw response) in addition to checking the rendered DOM in Inspect Element."},{"question":"Should I rely on canonicals to solve duplicate-content problems?","answer":"Canonicals should be part of the strategy, not the whole strategy. Redirects, consistent internal linking, disciplined URL design, proper query-parameter handling, and clean sitemaps all reinforce the canonical signal. A canonical tag layered on top of messy URL architecture is much weaker than a canonical tag that agrees with every other signal on the site."}],"relatedSlugs":["crawled-currently-not-indexed-fixes","discovered-currently-not-indexed-fix","xml-sitemap-best-practices"]},{"slug":"cors-errors-preflight-credentials-misconfigurations","title":"CORS Errors Explained: Preflight Requests, Credentials, and Common Misconfigurations","seoTitle":"CORS Errors Explained: Preflight Requests, Credentials, and Common Misconfigurations | CodeAva","excerpt":"Trapped by the dreaded CORS error? Learn how preflight requests work, why credentials break wildcard policies, and how to fix common cross-origin misconfigurations.","date":"2026-04-18","readTime":"17 min read","category":"Web Development","tags":["CORS","preflight","cross-origin","browser-security","http-headers","fetch","credentials","api-debugging","same-origin-policy"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.36 0.18 30)","to":"oklch(0.55 0.18 60)"},"coverImage":"/blog/cors-errors-explained.jpg","faqs":[{"question":"What is CORS actually protecting?","answer":"CORS protects users, not servers. It is a browser-enforced mechanism that limits what scripts on one origin are allowed to read from another origin in the user's authenticated browser context. It does not stop curl, Postman, backend jobs, or direct server-to-server calls. Your API still needs authentication, authorisation, and CSRF protection — CORS does not replace any of them."},{"question":"What counts as a different origin?","answer":"Origin is the combination of scheme, host, and port. https://app.example.com and https://api.example.com are different origins, http://example.com and https://example.com are different origins, and https://example.com and https://example.com:8443 are different origins. Any difference in any of the three parts makes the request cross-origin."},{"question":"When does the browser send a preflight OPTIONS request?","answer":"The browser preflights a cross-origin request when it is not a \"simple\" request — for example, when the method is PUT, PATCH, or DELETE, when the request includes non-safelisted headers like Authorization or custom X- headers, or when the Content-Type is something like application/json. The browser sends an OPTIONS request first to check whether the server allows the intended method and headers."},{"question":"Why does Access-Control-Allow-Origin: * stop working with credentials?","answer":"When a request is made with credentials (cookies or HTTP auth via the browser's credential mechanism), the server cannot respond with a wildcard origin. The browser will reject the response. With credentials, Access-Control-Allow-Origin must be a specific origin, and Access-Control-Allow-Credentials must be true. The same restriction applies to Access-Control-Allow-Methods and Access-Control-Allow-Headers — wildcards are not honoured for credentialed requests."},{"question":"Is an Authorization header treated as credentials by the browser?","answer":"Not automatically. A bearer token manually set in an Authorization header is a custom header, not browser-managed credentials. It does not require credentials: 'include' on fetch, and it does not force the credentialed-origin rules on its own. However, Authorization is not safelisted, so including it will typically trigger a preflight that must allow the Authorization header in Access-Control-Allow-Headers."},{"question":"Why does my CORS config work locally but fail in production?","answer":"A reverse proxy, CDN, API gateway, or WAF between your application and the browser is almost certainly mutating or stripping headers. Your app may be setting Access-Control-* headers correctly, but an upstream layer can remove them, duplicate them, or override them. Inspect the response headers the browser actually receives from the live URL, not the ones your application code intends to send."},{"question":"Can I fix a CORS error by calling the API from the backend instead?","answer":"Yes. CORS only applies to browser-initiated cross-origin requests from script contexts. If your frontend calls your own backend, and your backend calls the third-party API server-side, there is no CORS involved. This is a legitimate architecture for APIs that cannot or will not enable browser-side cross-origin access."},{"question":"Why does the browser say \"blocked by CORS\" even when the API returns a 200?","answer":"The response may arrive successfully at the network layer, but if the required Access-Control-* headers are missing or incorrect, the browser will not expose the response body to the script. The actual fetch will reject and the console logs a CORS error. This is expected behaviour — the data may exist, but the browser treats it as unreadable by the script without explicit cross-origin permission."}],"relatedSlugs":["http-security-headers-production-checklist","unhandled-promises-typescript-production-bugs"]},{"slug":"keyboard-navigation-testing-checklist-web-apps","title":"Keyboard Navigation Testing Checklist for Web Apps","seoTitle":"Keyboard Navigation Testing Checklist for Web Apps | CodeAva","excerpt":"Throw away your mouse. Learn how to test web apps for keyboard accessibility, focus order, visible focus states, skip links, and modal containment.","date":"2026-04-18","readTime":"15 min read","category":"Accessibility","tags":["accessibility","keyboard-navigation","focus-management","WCAG","QA","manual-testing","a11y","modal","tablist","skip-link"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.36 0.16 260)","to":"oklch(0.55 0.14 220)"},"coverImage":"/blog/keyboard-navigation-bug.jpg","faqs":[{"question":"How do you test keyboard navigation on a website?","answer":"Stop using the mouse. Starting from the top of the page, press Tab repeatedly and observe whether every interactive element is reachable and has a clearly visible focus indicator. Activate controls with Enter and Space where appropriate, use arrow keys inside composite widgets like tabs and menus, and open overlays to confirm focus is trapped inside them and returned on close. Repeat on your most important pages and flows."},{"question":"What is the first thing to check in keyboard accessibility?","answer":"Focus visibility. If you cannot see which element currently has focus while tabbing through the page, keyboard navigation is effectively broken regardless of how well-labelled or semantic the rest of the markup is. The browser default focus ring is a reasonable baseline, and any custom focus style must be obviously visible against every background on the page."},{"question":"Why is visible focus so important?","answer":"Keyboard users rely on the focus indicator to know where they are on the page. Hiding the outline with outline: none and not replacing it with an accessible equivalent makes the app unusable without a mouse. WCAG requires a visible focus indicator specifically because users cannot operate what they cannot see."},{"question":"What is a skip link and how do I test it?","answer":"A skip link lets keyboard users bypass repetitive navigation and jump directly to the main content. To test it, load the page fresh and press Tab once. A \"Skip to main content\" link should appear (often visually hidden until focused), and activating it with Enter should move focus into the main content region so the next Tab lands on the first interactive element in the page's main body."},{"question":"How should focus behave in a modal?","answer":"When a modal opens, focus should move into the modal — typically to the close button, the first interactive element, or a labelled region. While the modal is open, Tab and Shift + Tab must cycle only among elements inside the modal, not escape to the page behind. Pressing Esc should dismiss the modal where that convention applies, and on close, focus should return to the element that opened it or a logical next target."},{"question":"What is roving tabindex?","answer":"Roving tabindex is a pattern for composite widgets where only one child element is tab-focusable at a time. A user tabs once into the widget (such as a tablist, toolbar, or menu), then uses arrow keys to move between its items, and tabs out to the next region of the page. It prevents long widgets from forcing keyboard users to tab through every child and matches the keyboard conventions of those widget patterns."},{"question":"Can automated tools fully test keyboard accessibility?","answer":"No. Automated checks catch structural issues like missing labels, non-semantic interactive elements, and some focus-order problems, but they cannot fully decide whether the focus order of a specific page makes sense for a human task. Manual keyboard testing on real templates and flows remains essential. Treat automated tooling as the first pass and manual QA as the final one."},{"question":"Why does DOM order matter for keyboard users?","answer":"Tab order follows DOM order, not visual position. If CSS has rearranged elements visually (for example with flexbox or grid ordering) without changing the underlying DOM, keyboard users will experience a focus sequence that does not match what they see. The right fix is almost always adjusting the DOM to match the intended reading and task order, not patching with tabindex values."}],"relatedSlugs":["accessible-tabs-accordions-menus-aria-guide","accessible-react-modal-focus-management","form-validation-accessibility-aria-live-regions"]},{"slug":"schema-org-vs-google-rich-results-json-ld","title":"Schema.org vs. Google Rich Results: Why Valid JSON-LD Doesn’t Guarantee Display","seoTitle":"Schema.org vs. Google Rich Results: Why Valid JSON-LD Doesn’t Guarantee Display | CodeAva","excerpt":"Your JSON-LD validates, but Google still is not showing stars, FAQs, or rich snippets. Learn the difference between Schema.org syntax, Google eligibility, and actual rich-result display.","date":"2026-04-17","readTime":"15 min read","category":"Technical SEO","tags":["structured-data","schema.org","json-ld","rich-results","google-search","seo-debugging","faqpage","product-schema","rich-results-test"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.38 0.18 260)","to":"oklch(0.55 0.15 300)"},"coverImage":"/blog/schema-org-google-rich-results.jpg","faqs":[{"question":"Why does valid JSON-LD not guarantee rich results?","answer":"Validity only proves that your structured data parses correctly and follows Schema.org conventions. Rich results in Google Search are a separate product decision layered on top of validity. Google chooses whether to show a feature based on supported types, feature-specific guidelines, content visibility, indexing status, quality signals, and query context. Valid markup is the floor, not the finish line."},{"question":"What is the difference between Schema.org and Google rich results?","answer":"Schema.org is an open, collaborative vocabulary for describing entities and relationships on the web. Google Search is a private search product that supports a defined subset of those types and decides when to render them as visible rich results. A type existing in Schema.org does not automatically mean Google will show it as a rich result."},{"question":"Does passing the Rich Results Test guarantee a rich snippet?","answer":"No. The Rich Results Test confirms that your markup is parsable and eligible for a supported feature. Eligibility is necessary but not sufficient. Google may still withhold display because of visibility mismatches, spam signals, manual actions, indexing problems, feature-specific restrictions, or query-level presentation choices."},{"question":"Can hidden content in JSON-LD stop rich results from showing?","answer":"Yes. Google expects structured data to describe content that users can actually find on the page. If your FAQPage JSON-LD references questions and answers that do not appear in the visible content, the markup may pass validators but fail to earn rich-result display. This is a guideline issue, not a syntax issue."},{"question":"Why are my FAQ rich results not appearing anymore?","answer":"Google narrowed the circumstances in which FAQ rich results are shown. The feature is now displayed in far more limited contexts than it used to be. If your FAQ snippet disappeared, the cause is usually a change in which sites and queries qualify for display, not broken JSON-LD. Validate the markup, then check the feature-specific guidance."},{"question":"Can Google ignore valid structured data?","answer":"Yes. Google can choose not to use or display valid structured data if the page violates feature guidelines, if the marked-up content is not visible, if the site has a manual action, if the page is not indexed or has been canonicalized elsewhere, or if Google simply determines that a rich result is not the best presentation for the query."},{"question":"What should I check after my structured data validates?","answer":"After syntax validation, confirm the page is indexable and indexed, that the canonical is the URL you expect, that the marked-up content is visible on the page, that the feature is supported by Google for your content type, and that there are no manual actions or spam signals affecting the site. Then monitor Search Console enhancement reports over time."},{"question":"Does unsupported schema still help SEO?","answer":"It can. Structured data that does not map to a visible rich result can still help search engines understand entities, relationships, and context on the page. Not every useful property triggers a SERP feature, but clear structured data can support disambiguation and entity understanding regardless of visible rich-result display."}],"relatedSlugs":["discovered-currently-not-indexed-fix","crawled-currently-not-indexed-fixes"]},{"slug":"lcp-debugging-checklist-modern-frontends","title":"LCP Debugging Checklist for Modern Frontends","seoTitle":"LCP Debugging Checklist for Modern Frontends | CodeAva","excerpt":"Failing Largest Contentful Paint? Use this practical checklist to debug TTFB, resource discovery, fetch priority, render delay, and heavyweight hero assets in modern frontends.","date":"2026-04-17","readTime":"16 min read","category":"Web Performance","tags":["LCP","core-web-vitals","largest-contentful-paint","performance","react","nextjs","fetchpriority","preload","rendering","frontend-debugging"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.40 0.18 200)","to":"oklch(0.58 0.14 240)"},"coverImage":"/blog/lcp-debugging.jpg","faqs":[{"question":"What are the four phases of LCP?","answer":"LCP breaks down into Time to First Byte (when the response starts), Resource Load Delay (how long before the LCP resource starts loading after the HTML arrives), Resource Load Duration (how long the resource takes to download), and Element Render Delay (time between the resource finishing and the element becoming visible). Every LCP optimisation effort should target one of these four phases, not guess at images generally."},{"question":"Why is my LCP slow even though my image is small?","answer":"File size is only one of four LCP phases. If the browser discovers the image late, loads it at low priority, waits for client-side JavaScript to insert it, or cannot render it until fonts and CSS have loaded, the image can be tiny and LCP can still be slow. Identify the dominant delay phase before optimising asset size."},{"question":"Should I preload the LCP image?","answer":"Preload the LCP resource only when the browser cannot discover it from the initial HTML — for example, when it is inserted by client-side JavaScript or referenced through a CSS background image. If the image is already in a direct <img> tag in the server-rendered HTML, modern browsers will discover it and fetchpriority=\"high\" is usually a better, cheaper signal than a preload."},{"question":"Does loading=\"lazy\" hurt LCP?","answer":"Yes, if it is applied to the LCP element. loading=\"lazy\" defers the image until it is near the viewport, which defeats the entire point of prioritising the LCP resource. Never lazy-load above-the-fold hero images or any element likely to be the LCP candidate. Use loading=\"lazy\" only for content safely below the fold."},{"question":"Does fetchpriority=\"high\" actually help LCP?","answer":"It can, significantly. fetchpriority=\"high\" tells the browser to boost the image's priority during the initial load, moving it ahead of lower-priority resources. It is especially effective when the browser would otherwise treat the image as lower priority because it is not in the immediate viewport computation or is competing with many other resources."},{"question":"Can client-side rendering make LCP worse?","answer":"Yes. If the LCP element is only rendered after a JavaScript bundle executes and hydration completes, the resource cannot be discovered or fetched in parallel with the HTML. Server-side rendering, static generation, or including the LCP markup in the initial HTML gives the browser a head start the preload scanner can act on."},{"question":"How do I find the actual LCP element on my page?","answer":"Open Chrome DevTools, run a Performance recording on a page load, and look for the LCP marker in the timeline or use the Performance Insights panel which labels the LCP element directly. The Web Vitals browser extension also surfaces the live LCP candidate. Confirm the element before optimising — it is often not the one developers assume."},{"question":"Is lab testing enough to fix LCP?","answer":"Lab testing helps you reproduce issues and iterate on fixes quickly, but real-user field data is the source of truth. Use Chrome DevTools and Lighthouse to diagnose, then monitor Search Console Core Web Vitals and CrUX or your own RUM data to confirm the fix landed for actual users across devices and network conditions."}],"relatedSlugs":["finding-inp-bottlenecks-production","webp-vs-avif-vs-png-vs-jpeg","core-web-vitals"]},{"slug":"accessible-tabs-accordions-menus-aria-guide","title":"How to Build Accessible Tabs, Accordions, and Menus (The ARIA Guide)","seoTitle":"How to Build Accessible Tabs, Accordions, and Menus (The ARIA Guide) | CodeAva","excerpt":"Stop building interactive UI with div onClick. Learn the exact ARIA roles, states, and keyboard patterns needed for accessible tabs, accordions, and menus.","date":"2026-04-14","readTime":"15 min read","category":"Accessibility","tags":["accessibility","wai-aria","keyboard-navigation","focus-management","semantic-html","wcag","interactive-components","tabs","accordion","menu"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.38 0.16 280)","to":"oklch(0.55 0.14 230)"},"coverImage":"/blog/accordion-tabs-menu.jpg","faqs":[{"question":"Should an accordion use a button or a div?","answer":"Always use a real HTML button element as the accordion trigger. A button is natively keyboard-operable (responds to Enter and Space), is focusable by default, and is announced as interactive by assistive technologies. A div with an onClick handler has none of these behaviors natively and requires manual keyboard handling, tabindex, and role patching to approximate what a button provides for free."},{"question":"What ARIA attributes do accessible tabs need?","answer":"An accessible tab widget requires: a container with role=\"tablist\", each trigger with role=\"tab\", each content panel with role=\"tabpanel\", aria-selected on each tab to indicate the active state, aria-controls on each tab pointing to its panel's id, and aria-labelledby on each panel pointing back to its tab. Additionally, roving tabindex is needed so that only the active tab has tabindex=\"0\" and inactive tabs have tabindex=\"-1\"."},{"question":"Should every tab be tabbable?","answer":"No. Only the currently active tab should have tabindex=\"0\". Inactive tabs should have tabindex=\"-1\". This is the roving tabindex pattern. When a user presses Tab, focus lands on the active tab. Arrow keys then move between tabs within the tablist. Pressing Tab again moves focus out of the tablist into the associated panel or the next focusable element on the page. Making every tab tabbable forces keyboard users to step through each tab individually, which is slow and does not match the expected widget behavior."},{"question":"What is the difference between a menu and a navigation dropdown?","answer":"A navigation dropdown is a disclosure pattern: a button toggles the visibility of a list of links. Users navigate the links with Tab and Shift+Tab as normal. A true ARIA menu (role=\"menu\") is an application-style command widget where arrow keys control focus movement within the menu, Tab exits the widget entirely, and Escape closes it and returns focus to the trigger. Site header dropdowns with links are almost always navigation disclosure, not ARIA menus."},{"question":"Should I use role=\"menu\" in a website header nav?","answer":"Almost certainly not. The role=\"menu\" and role=\"menuitem\" pattern is designed for application-style command menus — think right-click context menus, toolbar action dropdowns, or editor menus. A website header with links to other pages is navigation. Use a nav element, a real button to toggle visibility with aria-expanded, and a list of links. Let Tab and Shift+Tab handle focus movement through the links as normal."},{"question":"Why does keyboard focus matter so much for accessibility?","answer":"Keyboard focus is the primary interaction mechanism for users who cannot use a mouse or trackpad — including screen reader users, people with motor impairments, and power users who prefer keyboard navigation. If focus is lost after an interaction, lands on hidden content, gets trapped in a loop, or skips a visible control, the component is broken for these users regardless of how it looks visually."},{"question":"When should I use aria-controls and aria-expanded?","answer":"Use aria-expanded on any button or trigger that toggles the visibility of another element — accordion headers, disclosure buttons, navigation toggles, and menu buttons. Use aria-controls on the same trigger, pointing to the id of the element it controls. Together, these attributes tell assistive technologies which element is being toggled and whether it is currently expanded or collapsed. Both should update in sync with the visual state."},{"question":"How can I test tabs, accordions, and menus without a mouse?","answer":"Unplug or stop using your mouse. Tab through the component and confirm that focus is visible at every step. Use the keyboard shortcuts required by the pattern: Enter or Space for accordion toggles, arrow keys for tab switching, Escape for menu closing. Verify that ARIA states like aria-expanded and aria-selected update when state changes. Confirm that hidden content is not reachable by Tab. Optionally run a screen reader like VoiceOver or NVDA to confirm announcements match visual state."}],"relatedSlugs":["form-validation-accessibility-aria-live-regions","accessible-react-modal-focus-management"]},{"slug":"read-qr-code-screenshot-laptop-desktop","title":"How to Read a QR Code From a Screenshot on Your Laptop Without Using Your Phone","seoTitle":"How to Read a QR Code From a Screenshot on Your Laptop Without Using Your Phone | CodeAva","excerpt":"Someone sent you a QR code on Slack or email, but you are on your laptop. Learn how to decode QR code screenshots securely on Mac or Windows without needing your phone.","date":"2026-04-14","readTime":"10 min read","category":"Security","tags":["qr-code","desktop-workflow","screenshot-decoding","privacy","browser-tools","phishing-inspection","mfa-security"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.32 0.14 300)","to":"oklch(0.50 0.18 260)"},"coverImage":"/blog/read-qr-code-from-a-screenshot.jpg","faqs":[{"question":"Can I scan a QR code from a screenshot on my laptop?","answer":"Yes. Take a screenshot of the QR code, then paste it (Ctrl+V or Cmd+V) or drag it into a browser-based QR decoder. The CodeAva QR Code Decoder processes the image locally in your browser using the jsQR library — no image is uploaded to a server. This works on any laptop running a modern browser, regardless of operating system."},{"question":"How do I read a QR code without using my phone?","answer":"Capture a screenshot of the QR code on your desktop (Cmd+Shift+4 on Mac, Win+Shift+S on Windows), then open a browser-based QR decoder and paste or drag the image in. The decoder extracts the URL, text, Wi-Fi credentials, or other payload directly on your computer. This is faster than pointing a phone camera at your monitor."},{"question":"Is it safe to upload a QR screenshot to an online decoder?","answer":"It depends on how the decoder processes the image. If decoding happens server-side, the image and its payload are transmitted to a third party. This is a concern when the QR code contains sensitive data like MFA setup keys, login sessions, payment links, or Wi-Fi passwords. Prefer decoders that process images locally in the browser, like the CodeAva QR Code Decoder, which runs the jsQR library entirely client-side with no uploads."},{"question":"Can a QR code contain something other than a website link?","answer":"Yes. QR codes can encode plain text, Wi-Fi network credentials (SSID and password), vCard or MeCard contact information, email addresses with subject and body, SMS messages, geographic coordinates, cryptocurrency wallet addresses, calendar events, and arbitrary binary data. Always inspect the decoded payload before acting on it — especially if the QR code arrived from an untrusted source."},{"question":"How do I inspect a QR code before opening it?","answer":"Decode the QR code using a tool that shows the raw payload without automatically opening it. Check the full URL, look for misspelled domains, raw IP addresses, URL shorteners, unusual URI schemes (tel:, sms:, data:), and heavy percent-encoding. The CodeAva QR Code Decoder shows the raw payload and flags common URL risk signals like IP addresses, HTTP links, shorteners, and punycode hostnames."},{"question":"Can I decode a QR code from a screenshot on Mac?","answer":"Yes. Press Cmd+Shift+4 to capture a screenshot of the QR code, then open the CodeAva QR Code Decoder in your browser and paste the screenshot with Cmd+V. The image is decoded locally and the payload is shown immediately. You can also drag and drop the saved screenshot file into the tool."},{"question":"Can I decode a QR code from a screenshot on Windows?","answer":"Yes. Press Win+Shift+S to open the Snipping Tool and select the area around the QR code. The screenshot is copied to your clipboard. Then open the CodeAva QR Code Decoder in your browser and paste with Ctrl+V. The tool decodes the image locally and displays the payload without uploading anything."},{"question":"Why use a desktop QR decoder instead of a phone camera?","answer":"A desktop decoder keeps you in your laptop workflow — no device switching, no awkward phone-to-monitor scanning. The decoded text or URL is immediately copyable and inspectable on the same device where you need it. It is also more practical for QR codes that appear in emails, documents, Slack messages, or browser tabs that are already on your screen."}],"relatedSlugs":["what-is-quishing-qr-code-security","remove-hidden-exif-metadata-photos"]},{"slug":"http-security-headers-production-checklist","title":"Security Headers Every Production Website Should Send","seoTitle":"Security Headers Every Production Website Should Send | CodeAva","excerpt":"Stop failing penetration tests. Use this practical production checklist for HTTP security headers, including HSTS, CSP, nosniff, Referrer-Policy, and what old headers you should remove.","date":"2026-04-14","readTime":"16 min read","category":"Application Security","tags":["security-headers","HSTS","CSP","X-Content-Type-Options","Referrer-Policy","X-Frame-Options","Permissions-Policy","production-hardening","penetration-testing","HTTP","appsec"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.32 0.16 20)","to":"oklch(0.50 0.14 50)"},"coverImage":"/blog/security-headers-for-websites.jpg","faqs":[{"question":"Which HTTP security headers should every production website send?","answer":"A sensible modern baseline includes Strict-Transport-Security (HSTS) to enforce HTTPS, X-Content-Type-Options: nosniff to prevent MIME sniffing, Referrer-Policy to limit URL leakage, X-Frame-Options or Content-Security-Policy frame-ancestors to block clickjacking, and a Content-Security-Policy to restrict script and resource loading. The exact values depend on your application, but these five cover the most commonly flagged issues in penetration tests and security audits."},{"question":"Should I still send X-XSS-Protection?","answer":"No. X-XSS-Protection enabled the browser's built-in XSS auditor, which has been removed from all major browsers. Chrome removed it in version 78 (2019), and other engines followed. Sending it today provides no protection. Worse, certain values historically introduced new attack vectors. The correct modern replacement is a strict Content Security Policy."},{"question":"What is the difference between X-Frame-Options and CSP frame-ancestors?","answer":"Both prevent clickjacking by controlling whether your page can be embedded in frames. X-Frame-Options is the legacy header with limited values: DENY or SAMEORIGIN. CSP frame-ancestors is the modern replacement — it supports specific origins, wildcards, and scheme restrictions. If both are present, browsers that support CSP frame-ancestors will use it and ignore X-Frame-Options. Sending both provides backward compatibility with very old browsers."},{"question":"Why do my security headers work locally but not in production?","answer":"Reverse proxies, CDNs, WAFs, load balancers, and platform middleware can strip, duplicate, or override response headers. A header your application sets correctly in code may never reach the browser if an upstream layer removes or replaces it. This is why production verification — checking headers from the outside, as the browser receives them — is essential."},{"question":"What does Strict-Transport-Security preload mean?","answer":"The preload directive asks browser vendors to include your domain in a hardcoded list of HSTS sites shipped with the browser. This means even the very first visit uses HTTPS, before the browser ever sees your HSTS header. It is a strong commitment: once your domain is in the preload list, it is difficult and slow to remove. Enable preload only after you are confident that HTTPS works correctly for all subdomains."},{"question":"Is Content-Security-Policy required for every website?","answer":"CSP is not technically required, but it is the single most effective header for mitigating cross-site scripting. Without CSP, any injected script can execute freely. A strict nonce-based or hash-based CSP dramatically reduces the impact of XSS vulnerabilities. It is strongly recommended for any site handling user input, authentication, or sensitive data."},{"question":"What does X-Content-Type-Options: nosniff actually do?","answer":"It tells the browser to trust the Content-Type header sent by the server and not attempt to guess (sniff) the MIME type of the response. Without it, a browser might interpret a non-HTML file as HTML if it contains HTML-like content, potentially enabling certain injection attacks. The only valid value is nosniff."},{"question":"How do I verify my production security headers?","answer":"Use a tool that fetches your live URL from the outside and inspects the response headers as a real browser would receive them. This catches issues caused by proxies and CDNs stripping or overriding headers. The CodeAva HTTP Headers Checker does exactly this — enter your URL and see every response header your users actually receive, with security header analysis included."}],"relatedSlugs":["csp-nextjs-react-modern-apps","dmarc-spf-dkim-alignment-explained"]},{"slug":"hyphens-vs-underscores-urls-seo","title":"Hyphens vs. Underscores in URLs: What Actually Matters for SEO?","seoTitle":"Hyphens vs. Underscores in URLs: What Actually Matters for SEO? | CodeAva","excerpt":"Still debating hyphens vs underscores in URLs? Learn what Google actually recommends, what really matters for SEO, and how to standardize slugs without creating migration headaches.","date":"2026-04-13","readTime":"11 min read","category":"Technical SEO","tags":["url-structure","slug-formatting","technical-seo","crawlability","url-hygiene","information-architecture","kebab-case","url-best-practices"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.40 0.15 260)","to":"oklch(0.58 0.18 220)"},"coverImage":"/blog/hyphens-vs-underscores-in-urls.jpg","faqs":[{"question":"Are hyphens or underscores better for SEO?","answer":"Hyphens are the standard recommendation for word separation in URLs. Google has explicitly stated that hyphens help it identify individual words in a URL path. Underscores historically kept terms joined rather than separated. In practice, a single underscore URL is unlikely to be catastrophic, but hyphens are the safer, more consistent, and more widely supported convention for web-facing slugs."},{"question":"Does Google recommend hyphens in URLs?","answer":"Yes. Google has recommended using hyphens to separate words in URLs as part of its general URL structure guidance. The reasoning is that hyphens help both users and search engines identify the individual words or concepts in a URL path, making URLs more readable and easier to parse."},{"question":"Will underscores hurt my rankings?","answer":"Not necessarily and not dramatically on their own. A single underscore-separated slug on an otherwise well-structured, quality page is unlikely to tank rankings by itself. The more common risk is operational: underscore URLs can be harder to read, and if your team mixes separators across a site, you end up with inconsistency that is expensive to clean up later."},{"question":"Should I change old underscore URLs to hyphens?","answer":"Only if you can implement proper 301 redirects from every old URL to its new equivalent, update all internal links, canonical tags, sitemap entries, and tracking parameters, and accept that some link equity loss during the transition is possible. For established pages with backlinks and stable rankings, the migration risk often outweighs the marginal gain from changing separators alone. Standardize on hyphens going forward and only migrate legacy URLs as part of a broader planned cleanup with a redirect strategy in place."},{"question":"Do uppercase letters in URLs matter for SEO?","answer":"Yes, in a practical sense. On case-sensitive servers (most Linux-based hosts), /My-Page and /my-page are two different URLs. This creates duplicate content risk if both respond with 200 status. Lowercase-only slugs prevent this problem entirely. They are also more predictable to type, share, and reference across systems. Always normalize slugs to lowercase as a standard rule."},{"question":"Can localized URLs use non-English words?","answer":"Yes. Descriptive URLs in the language your audience uses are valid and encouraged. Google supports Unicode in URLs, and percent-encoding handles characters outside ASCII automatically in modern browsers. What matters is that your slug sanitization pipeline handles transliteration and encoding consistently across all locales, and that you do not mix unencoded non-ASCII slugs with encoded variants of the same URL."},{"question":"How long should a URL slug be?","answer":"Long enough to be descriptive, short enough to be readable. There is no hard character limit for rankings, but very long slugs are harder to share, read in logs, and fit on screen. A practical approach: use the fewest words that still convey the page topic clearly. Avoid stuffing the full title into the slug. If you are removing stop words to shorten slugs, check that the result still reads like a real phrase."},{"question":"What matters more than hyphens vs underscores for SEO?","answer":"Several things: URL stability over time (changing URLs requires redirects and loses link equity), lowercase consistency (prevents duplicate content on case-sensitive servers), descriptive and readable paths (helps both users and crawlers), clean architecture (avoids unnecessary nesting or parameter bloat), and not changing slug conventions across a site after launch. Consistency and stability are where the larger SEO and maintenance wins usually live."}],"relatedSlugs":["xml-sitemap-best-practices","robots-txt-mistakes-blocking-seo"]},{"slug":"finding-inp-bottlenecks-production","title":"A Practical Guide to Finding Real INP Bottlenecks in Production","seoTitle":"A Practical Guide to Finding Real INP Bottlenecks in Production | CodeAva","excerpt":"Stop guessing why your INP is high. Learn a practical workflow for finding real interaction bottlenecks in production using CrUX, RUM, web-vitals attribution, and DevTools.","date":"2026-04-13","readTime":"14 min read","category":"Performance","tags":["inp","core-web-vitals","real-user-monitoring","production-debugging","interaction-latency","long-tasks","field-performance","web-vitals"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.35 0.18 265)","to":"oklch(0.52 0.20 230)"},"coverImage":"/blog/inp-delay-waveform.jpg","faqs":[{"question":"Why is my INP poor in Search Console but fine locally?","answer":"Search Console and CrUX report INP from real users on real devices, networks, and page states. Local testing uses a fast machine with no extensions, no background tabs, and usually no active JavaScript from third-party tags. Real users interact while the page is still loading, on lower-power hardware, and with more competing processes. Those conditions create long tasks and rendering delays that your local environment simply does not reproduce without explicit throttling and realistic interaction timing."},{"question":"What is the best way to debug INP in production?","answer":"Start by confirming which page types have poor INP in Search Console or CrUX. Then add the web-vitals attribution build to your RUM pipeline to capture interaction target, interaction type, input delay, processing duration, and presentation delay for real sessions. Once you know the specific interaction and phase breakdown, reproduce that exact flow locally in Chrome DevTools with CPU throttling and mobile emulation, profile the trace, and find the long task or rendering bottleneck."},{"question":"Can Lighthouse diagnose real INP bottlenecks?","answer":"No. Lighthouse does not measure INP directly. It runs synthetic load-phase checks and reports Interaction to Next Paint only as an experimental audit in some versions, not as a field-matched diagnosis. Lighthouse is useful for identifying obvious long tasks during load, but it cannot tell you which interaction is slow for your actual users or what phase of that interaction is the bottleneck. Use field data to identify the problem, then use DevTools to investigate the specifics."},{"question":"What does web-vitals/attribution add for INP debugging?","answer":"The attribution build of the web-vitals library extends the basic INP metric with structured breakdown data: the interaction target element, interaction type (click, keyboard, or pointer), and a timing breakdown into input delay, processing duration, and presentation delay. Where supported, it also surfaces longAnimationFrameEntries that overlap with the slow interaction. This context is what transforms an aggregate score into an actionable diagnosis."},{"question":"What causes high input delay vs high processing duration vs high presentation delay?","answer":"High input delay means the main thread was busy when the interaction arrived — typically caused by a long task running during or just after page load, such as JavaScript evaluation, timer callbacks, or third-party tag execution. High processing duration means the event handlers themselves took too long — often heavy state updates, expensive synchronous computation, or large DOM mutations triggered by the interaction. High presentation delay means the browser struggled to commit the resulting frame — typically caused by large layout or style recalculation scope, or an unusually complex paint."},{"question":"How do long tasks affect INP?","answer":"Long tasks block the main thread. If a long task is running when a user clicks or taps, the browser cannot begin processing that interaction until the task finishes. This wait time is the input delay component of INP. Once the event handlers run, any additional long tasks they trigger contribute to processing duration. Long tasks during or after the interaction that delay frame presentation contribute to presentation delay. Any of these phases can make INP high independently."},{"question":"Should I use scheduler.yield() to fix INP?","answer":"scheduler.yield() is a useful tool for yielding control back to the browser mid-task, which can reduce input delay by giving the browser a chance to process pending interactions. However, it is not universally supported across all browsers and environments as of early 2026. Always feature-detect before using it and provide a fallback — typically a Promise-wrapped setTimeout — for environments that do not support it. Do not assume it is available everywhere."},{"question":"What is the fastest path from poor INP to a real fix?","answer":"Confirm the affected page type in Search Console. Capture interaction-level field data with web-vitals/attribution. Identify which interaction is slow and which phase dominates. Reproduce that exact interaction locally with CPU throttling. Profile the trace to find the long task or rendering bottleneck. Patch it, validate locally, and watch field data trend after release. The key shortcut is capturing the interaction target from RUM — without it, you are guessing which button or flow to investigate."}],"relatedSlugs":["third-party-scripts-inp-optimization","core-web-vitals"]},{"slug":"dmarc-spf-dkim-alignment-explained","title":"DMARC Pass vs. SPF Pass vs. DKIM Pass: Why They Aren’t the Same Thing","seoTitle":"DMARC Pass vs. SPF Pass vs. DKIM Pass: Why They Aren’t the Same Thing | CodeAva","excerpt":"Passing SPF or DKIM does not mean your emails are secure. Learn the critical difference between email authentication and DMARC alignment, and why your emails still land in spam.","date":"2026-04-12","readTime":"14 min read","category":"Email & DNS Security","tags":["DMARC","SPF","DKIM","email authentication","DMARC alignment","DNS","deliverability","spoofing","email security","DMARC aggregate report"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.35 0.16 240)","to":"oklch(0.52 0.14 280)"},"coverImage":"/blog/dmarc-spf-dkim.jpg","faqs":[{"question":"What is the difference between SPF, DKIM, and DMARC?","answer":"SPF checks whether the sending IP is authorized for the envelope sender domain. DKIM verifies that the signed message content has not been altered, using a public key in DNS. DMARC adds an alignment layer: it requires that the domain validated by SPF or DKIM matches the visible From address. Without DMARC, SPF and DKIM can pass for domains unrelated to the sender the recipient sees."},{"question":"Can SPF pass while DMARC fails?","answer":"Yes. SPF validates the Return-Path (envelope sender) domain, not the visible From header. If the Return-Path domain passes SPF but does not align with the From domain, DMARC will fail. This is common when a third-party service sends on your behalf using its own envelope domain."},{"question":"Can DKIM pass while DMARC fails?","answer":"Yes. DKIM validates that the message signature matches the signing domain’s DNS key, but the signing domain (d= value) may not match the visible From domain. If the DKIM signing domain does not align with the From header, DMARC will fail even though the DKIM signature is cryptographically valid."},{"question":"What does DMARC alignment mean?","answer":"DMARC alignment means the domain authenticated by SPF (the Return-Path domain) or DKIM (the d= signing domain) matches the domain in the visible From header. In relaxed mode, the organizational domains must match (e.g. mail.example.com aligns with example.com). In strict mode, an exact domain match is required."},{"question":"Why does my email pass authentication but still go to spam?","answer":"Several factors can cause this. DMARC may fail on alignment even if SPF or DKIM individually pass. The DMARC policy may be set to none (monitor only), offering no enforcement. Email forwarding can break SPF. Additionally, sender reputation, content quality, and list hygiene affect spam filtering independently of authentication."},{"question":"What is the Return-Path vs the From header?","answer":"The Return-Path (also called the envelope sender or MAIL FROM) is the address used during the SMTP transaction to handle bounces. The From header is the address displayed to the recipient in their email client. SPF checks the Return-Path domain. DMARC compares the authenticated domain against the visible From domain. These two addresses can be completely different."},{"question":"What does a DMARC aggregate report actually show?","answer":"A DMARC aggregate report is an XML file sent by mail receivers to the address specified in your DMARC record’s rua tag. It lists each source IP that sent mail using your domain, the volume of messages, SPF and DKIM authentication results, DMARC alignment outcomes, and the policy action applied. These reports help domain owners identify unauthorized senders and misconfigured legitimate sources."},{"question":"When should I move from p=none to p=reject?","answer":"Move to p=reject only after you have collected and reviewed aggregate reports for a sustained period, identified and fixed all legitimate senders that are failing alignment, and tested with p=quarantine first. Premature enforcement can cause legitimate email from marketing platforms, CRMs, support tools, and transactional services to be rejected. Most teams need several weeks to months of report analysis before safe enforcement."}],"relatedSlugs":["csp-nextjs-react-modern-apps","robots-txt-mistakes-blocking-seo"]},{"slug":"google-rewrites-title-meta-description","title":"Why Google Rewrites Your Title Tags and Meta Descriptions (And How to Stop It)","seoTitle":"Why Google Rewrites Your Title Tags and Meta Descriptions (And How to Stop It) | CodeAva","excerpt":"Frustrated that your perfect meta tags are not appearing in search? Learn why Google rewrites titles and snippets, and how to improve your chances of keeping the message you intended.","date":"2026-04-12","readTime":"13 min read","category":"Technical SEO","tags":["title tags","meta descriptions","SERP snippets","Google title rewrite","on-page SEO","search intent","metadata","technical SEO"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.38 0.14 200)","to":"oklch(0.55 0.16 250)"},"coverImage":"/blog/title-tag-meta-description-rewrites.jpg","faqs":[{"question":"Why does Google rewrite my title tag?","answer":"Google rewrites title tags when it believes the supplied title does not accurately or clearly represent the page for the user’s query. Common triggers include titles that are too long, keyword-stuffed, duplicated across pages, mismatched with the actual page content, or structurally messy. Google may use the page’s H1, anchor text from inbound links, or other on-page signals as an alternative."},{"question":"Does Google always use the meta description I write?","answer":"No. Google treats the meta description as a suggestion, not a directive. If Google determines that another passage from the page better answers the specific query, it will generate a snippet from that passage instead. One page can show different snippets for different queries."},{"question":"Can one page show different snippets for different searches?","answer":"Yes. Google selects the snippet dynamically based on the query. A page about email authentication might show the meta description for a broad query, but pull a specific paragraph when someone searches for a narrow troubleshooting question. This is expected behavior, not an error."},{"question":"How do I stop Google from changing my title?","answer":"You cannot force Google to use your exact title in every context. However, you can significantly reduce rewrite likelihood by writing concise, accurate titles that clearly reflect the page’s primary purpose, keeping titles within a practical length range, avoiding keyword stuffing, ensuring the title aligns with the H1 and visible content, and making each title unique across the site."},{"question":"Does title length matter in Google search results?","answer":"Yes, but Google evaluates pixel width rather than a strict character count. Titles that are too long are more likely to be truncated or rewritten. A practical guideline is to keep titles under roughly 60 characters, but the actual display depends on the characters used and the device. Previewing in a SERP simulator before publishing helps catch truncation issues."},{"question":"Why is Google using a sentence from my page instead of my meta description?","answer":"Google selects the snippet it believes best matches the searcher’s query. If your meta description is generic, too broad, or does not address the specific angle of the query, Google may pull a more relevant sentence from the page body. Writing a meta description that directly addresses the page’s primary intent improves the chances of it being used."},{"question":"What is the difference between a title rewrite and a snippet rewrite?","answer":"A title rewrite changes the clickable blue headline shown in search results. A snippet rewrite (or substitution) changes the descriptive text below the headline. They are separate decisions: Google may rewrite one, both, or neither. Title rewrites are driven by clarity and accuracy signals. Snippet substitution is driven by query-relevance signals."},{"question":"How can I preview how my metadata may look in search?","answer":"Use a SERP preview tool before publishing. The CodeAva Meta Tag and SERP Previewer lets you enter your title and meta description, see an estimated Google desktop and mobile preview, check character-count and truncation guidance, and iterate before the page goes live. This catches length issues, awkward truncation, and messaging problems before they reach search results."}],"relatedSlugs":["crawled-currently-not-indexed-fixes","xml-sitemap-best-practices"]},{"slug":"what-is-quishing-qr-code-security","title":"What Is Quishing? How to Inspect QR Codes Safely Before You Scan","seoTitle":"What Is Quishing? How to Inspect QR Codes Safely Before You Scan | CodeAva","excerpt":"Quishing (QR phishing) hides malicious links inside QR codes. Learn how the attack works, what payloads to watch for, and how to decode QR codes safely before executing them.","date":"2026-04-09","readTime":"14 min read","category":"Application Security","tags":["quishing","qr-phishing","qr-code-security","social-engineering","appsec","payload-inspection","anti-phishing","security-awareness"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.30 0.18 280)","to":"oklch(0.50 0.22 240)"},"coverImage":"/blog/hidden-dangers-qr-code.jpg","faqs":[{"question":"What is quishing?","answer":"Quishing is QR code phishing. An attacker encodes a malicious URL, or another harmful payload, inside a QR code. Because the destination is hidden inside the visual pattern, victims cannot inspect the link before scanning. They are then redirected to a credential-harvesting page, malware download, or another harmful destination."},{"question":"Is a QR code itself dangerous?","answer":"No. A QR code is a machine-readable encoding format. It is not inherently malicious any more than a hyperlink is inherently malicious. The risk comes from the hidden payload inside the code and the low-scrutiny workflow that causes people to act on it before inspecting what it contains."},{"question":"Can I inspect a QR code without opening the link?","answer":"Yes. Decode the QR code from an image file or screenshot using a local browser-based decoder. The raw payload — the URL, Wi-Fi credentials, contact string, or text — is displayed immediately, without opening any link, dialing any number, or triggering any action. Review the payload first, then decide whether to act."},{"question":"What kinds of payloads can a QR code contain?","answer":"A QR code can encode any text string up to a few kilobytes. Common payload types include HTTPS URLs, Wi-Fi setup strings (WIFI:T:WPA;S:NetworkName;P:Password;;), vCard and MeCard contact records, tel: phone links, mailto: email links, smsto: SMS messages, geo: GPS coordinates, and cryptocurrency payment URIs. The payload type changes what action a scanner app may offer to execute."},{"question":"Why are QR codes used in phishing?","answer":"QR codes hide the destination URL inside a visual image that humans cannot read. They are scanned in contexts that feel routine and low-risk — restaurant tables, event posters, payment terminals, emails, office sign-in flows. The combination of visual opacity and routine context is what makes them effective as a phishing delivery mechanism."},{"question":"Can a QR code hide a malicious URL?","answer":"Yes. A QR code can encode any URL string — including links to phishing pages, malware downloads, credential-harvesting forms, and fake payment portals. The URL is completely hidden inside the QR pattern and only becomes readable after the image is decoded."},{"question":"Is it safer to decode a QR code from an image on my computer?","answer":"Yes, significantly. Decoding a QR code from an image on a desktop browser gives you the raw payload as a text string before any action is taken. On a smartphone, the camera app may immediately offer to open a URL, place a call, or connect to Wi-Fi, compressing the gap between scan and action. A desktop inspection tool removes that automation and puts the decision back in the user's hands."},{"question":"What should I look for before opening a decoded QR link?","answer":"Check the protocol: HTTP instead of HTTPS is a strong warning signal for any sensitive page. Check the hostname: raw IP addresses, URL shorteners, and punycode domains are common in phishing. Check the path and query string: unexpected redirect parameters, token values, or heavily encoded strings deserve scrutiny. If anything looks unfamiliar, do not open the link on a device you care about."}],"relatedSlugs":["remove-hidden-exif-metadata-photos","csp-nextjs-react-modern-apps","password-vs-passphrase-security"]},{"slug":"webp-vs-avif-vs-png-vs-jpeg","title":"WebP vs. AVIF vs. PNG vs. JPEG: The {year} Developer's Guide","seoTitle":"WebP vs. AVIF vs. PNG vs. JPEG: The {year} Developer's Guide | CodeAva","excerpt":"Stop hurting your Core Web Vitals with oversized images. Learn the technical differences between AVIF, WebP, PNG, and JPEG, when to use each, and how to optimize for LCP.","date":"2026-04-08","readTime":"14 min read","category":"Performance","tags":["performance","core-web-vitals","lcp","image-optimization","webp","avif","jpeg","png","frontend","web-performance"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.45 0.20 260)","to":"oklch(0.62 0.18 200)"},"coverImage":"/blog/webp-avif-png-jpeg.jpg","faqs":[{"question":"Is AVIF better than WebP?","answer":"AVIF generally achieves better compression than WebP at equivalent visual quality, which means smaller files for the same image. However, AVIF support is not universal across all browsers and encoding environments. WebP is more broadly supported and is often the more practical default for teams that cannot guarantee AVIF support everywhere. In production, the recommended approach is to serve AVIF first, WebP second, and a JPEG or PNG fallback — using the HTML picture element."},{"question":"When should I use PNG instead of WebP or AVIF?","answer":"PNG is the right choice when you need lossless quality — screenshots with sharp text, UI elements requiring pixel-perfect rendering, or graphics where exact colour fidelity matters. WebP and AVIF both support transparency and can replace PNG for most web use cases, but if your workflow requires a lossless format or a specific transparency baseline, PNG remains the correct choice."},{"question":"Is JPEG still useful on the modern web?","answer":"JPEG is still relevant as a fallback format in the HTML picture element and in environments where modern codec support cannot be guaranteed. For new image production with full format control, WebP or AVIF will typically deliver smaller files. JPEG's main practical value today is legacy compatibility and as the final fallback in multi-source delivery strategies."},{"question":"What is the best image format for SEO and Core Web Vitals?","answer":"There is no single best format for every image, but the highest-impact approach for Core Web Vitals is to serve images in the smallest format that preserves adequate quality. For most photographic web images that is AVIF (with WebP fallback) or WebP. Smaller images reduce the bytes that need to load before the Largest Contentful Paint element renders, which directly improves LCP scores."},{"question":"Do I need fallback images when serving AVIF?","answer":"Yes. While AVIF support is broad among modern browsers, not all environments handle it equally — particularly older mobile browsers, some embedded views, and certain image processing pipelines. The safe production pattern is to use the HTML picture element: AVIF source first, then WebP, then a JPEG or PNG fallback img tag. Browsers pick the first format they support."},{"question":"Can I convert PNG to AVIF or WebP safely?","answer":"Yes. Converting a PNG to WebP or AVIF is safe for most web use cases. If the PNG is photographic content, a lossy WebP or AVIF encode will typically yield a much smaller file. If the PNG is a logo, screenshot, or graphic with sharp edges, a lossless WebP encode is a better choice than a lossy one, and you should check the output quality carefully. The CodeAva Image Optimizer can perform these conversions locally in your browser without uploading your files."},{"question":"Is my image uploaded when I use the CodeAva Image Optimizer?","answer":"No. The CodeAva Image Optimizer processes all images locally in your browser using the Canvas API. Nothing is uploaded to a server, stored, or transmitted. This makes it safe for unreleased product photography, internal assets, and any images you cannot share with a third-party compression service."},{"question":"What format should I use for hero images?","answer":"For a hero image — which is often the Largest Contentful Paint element — AVIF with a WebP fallback is the highest-impact choice. Serve the AVIF version to browsers that support it and a WebP or JPEG as fallback. Also ensure the image is sized appropriately for the viewport and preloaded if it is the likely LCP element. Avoid serving a full-resolution PNG as a hero image on a photographic background."}],"relatedSlugs":["core-web-vitals","third-party-scripts-inp-optimization"]},{"slug":"remove-hidden-exif-metadata-photos","title":"What Hidden Metadata Your Photos Reveal — and How to Remove It Safely","seoTitle":"What Hidden Metadata Your Photos Reveal — and How to Remove It Safely | CodeAva","excerpt":"Every photo you take can contain hidden EXIF metadata, including GPS coordinates, timestamps, and device details. Learn how to inspect and strip image metadata safely in your browser.","date":"2026-04-08","readTime":"12 min read","category":"Application Security","tags":["exif","metadata","privacy","gps","osint","image-security","appsec","privacy-by-design","data-sanitization"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.45 0.20 30)","to":"oklch(0.62 0.18 60)"},"coverImage":"/blog/image-metadata.jpg","faqs":[{"question":"What is EXIF data and is it dangerous to share?","answer":"EXIF data is metadata embedded in image files by cameras and smartphones. It can include GPS coordinates, capture timestamps, device make and model, lens settings, and editing software history. Sharing images with intact EXIF data is not inherently dangerous, but it can expose sensitive information like location data, creation times, and device fingerprints. Inspecting metadata before sharing publicly is essential for privacy-conscious workflows."},{"question":"Can photos reveal my location?","answer":"Yes. If your camera or phone had location services enabled when taking a photo, GPS coordinates are stored in the EXIF metadata. This includes latitude, longitude, and sometimes altitude. Anyone with access to the original image file can extract these coordinates using standard EXIF readers. Many social platforms strip EXIF on upload, but direct file sharing via email, messaging apps, or file hosting often preserves metadata intact."},{"question":"What is the difference between EXIF, IPTC, and XMP?","answer":"EXIF is a camera-originated technical metadata standard storing capture data, GPS, and device information. IPTC is an editorial metadata standard used in professional photography for copyright, captions, and credits. XMP is Adobe's extensible metadata format, commonly added by Lightroom, Photoshop, and similar editing tools. A single JPEG can contain all three simultaneously. Removing only EXIF while leaving IPTC or XMP intact is an incomplete sanitization."},{"question":"Can I remove only GPS metadata?","answer":"Selective field removal is technically possible with dedicated tools like ExifTool, but browser-based approaches using Canvas re-encode typically remove all embedded metadata. The CodeAva EXIF Metadata Viewer & Stripper offers a 'GPS only' mode, but because it re-encodes via Canvas for the strongest privacy guarantee, all metadata families are removed in practice. If you need surgical field preservation, a server-side tool with byte-level metadata editing is more appropriate."},{"question":"Are my images uploaded to a server when I use CodeAva?","answer":"No. The CodeAva EXIF Metadata Viewer & Stripper processes everything locally in your browser. ExifReader parses the file bytes locally. The Canvas API re-encodes the image locally. Nothing is uploaded to CodeAva servers, transmitted to any third party, or stored between sessions. The only network request is the optional GPS map preview, which requires explicit user opt-in before loading external OpenStreetMap tiles."},{"question":"Will stripping metadata reduce image quality?","answer":"The Canvas re-encode used for metadata stripping runs at quality 0.92 for JPEG output, which is visually indistinguishable from the original for most use cases. PNG output is lossless. If you need maximum quality control, inspect the cleaned output carefully or use a dedicated metadata editing tool that preserves the original pixel data while only modifying metadata fields."},{"question":"Why should map previews be opt-in?","answer":"Auto-loading a map based on embedded GPS coordinates creates a new privacy leak. The map tile request contacts a third-party service (typically a mapping provider) and may log the IP address, user agent, and requested coordinates. An ethical privacy tool should never make external requests without explicit user consent. The CodeAva tool requires two clicks: one to reveal the consent dialog, another to actually load the map tiles."},{"question":"What is the safest way to sanitize a photo before posting it publicly?","answer":"1) Inspect the image locally using a browser-based tool before any upload. 2) Check for GPS coordinates, timestamps, and device/software details. 3) Export a clean copy via re-encode or dedicated metadata stripping. 4) Re-check the cleaned file to confirm metadata removal. 5) Only then upload or publish. 6) For web delivery, optimize the privacy-safe file for size and format. Never assume the original file is safe to share."}],"relatedSlugs":["what-is-quishing-qr-code-security","csp-nextjs-react-modern-apps","robots-txt-mistakes-blocking-seo"]},{"slug":"password-vs-passphrase-security","title":"Password vs. Passphrase: Which Is Better for Real-World Security?","seoTitle":"Password vs. Passphrase: Which Is Better for Real-World Security? | CodeAva","excerpt":"Still using short, complex passwords with special characters? Learn why modern password guidance favors length, when passphrases make sense, and how to generate strong credentials safely.","date":"2026-04-07","readTime":"12 min read","category":"Application Security","tags":["password-vs-passphrase","passphrase-security","authentication-security","nist-password-guidelines","password-managers","credential-usability","mfa","local-password-generator"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.42 0.16 250)","to":"oklch(0.60 0.14 200)"},"coverImage":"/blog/passphrase-vs-password.jpg","faqs":[{"question":"Is a passphrase more secure than a password?","answer":"Not automatically. A long random passphrase can be stronger and easier to use than a short complex-looking password, but a long random password stored in a password manager is often the better choice when memorability does not matter. The real issue is length, randomness, and how the credential will be used."},{"question":"What makes a passphrase strong?","answer":"A strong passphrase uses enough randomly chosen words from a large word list, rather than a memorable quote or phrase you invented yourself. Length, randomness, and uniqueness matter much more than whether it looks clever."},{"question":"Are symbols required for a secure password?","answer":"No. Symbols can help meet site rules, but they are not a universal requirement for strong security. In practice, more length and true randomness usually matter more than adding one symbol to a short password."},{"question":"Should I use a passphrase for my password manager master password?","answer":"Often yes, because a password manager master password is one of the cases where a human usually has to type and remember the secret. A long random passphrase is often a practical choice, but it still needs to be unique and paired with strong MFA where the product supports it."},{"question":"Is a long password better than a short complex one?","answer":"Usually yes. A longer random password generally offers more search space than a short password that merely satisfies composition rules. Short complex passwords also tend to follow predictable human patterns."},{"question":"Should websites force password resets every 90 days?","answer":"Not as a default policy. Modern guidance recommends password changes when compromise is suspected or confirmed, not on an arbitrary schedule that encourages predictable variations and user fatigue."},{"question":"Are online password generators safe?","answer":"They can be, but you should prefer generators that make the method clear and keep generation local. A trustworthy generator should explain whether it uses secure browser randomness, whether generation happens in the browser, and whether the secret ever leaves your device."},{"question":"What is the safest way to generate a password locally?","answer":"Use a local browser-based generator that relies on the Web Crypto API or an equivalent cryptographically secure random source, and save the result immediately in a password manager or the target system. Avoid generators that depend on Math.random() or require you to send the secret to a server."}]},{"slug":"cron-timezones-explained-utc-offset","title":"Cron Timezones Explained: Why Your Job Runs at the Wrong Hour","seoTitle":"Cron Timezones Explained: Why Your Job Runs at the Wrong Hour | CodeAva","excerpt":"Are your automated jobs running at 2 AM instead of midnight? Learn how cron handles timezones, why DST causes missed or double runs, and how to schedule jobs reliably.","date":"2026-04-07","readTime":"11 min read","category":"Infrastructure","tags":["cron-timezone","cron-utc-vs-local-time","cron-tz-explained","cron-daylight-saving-time","job-scheduling","devops","sre","backend-automation"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.42 0.14 230)","to":"oklch(0.60 0.12 200)"},"coverImage":"/blog/timezones-in-motion.jpg","faqs":[{"question":"Why does my cron job run at the wrong hour?","answer":"Because the cron schedule is being evaluated in a different timezone context than the one you assumed. The expression may be correct, but if the server or cron daemon is using UTC while you were thinking in local time, the job will run with an offset."},{"question":"Does cron use UTC or local time?","answer":"Cron uses the active timezone context of the cron implementation and runtime environment. In many production setups that ends up being UTC, but not always. Some implementations also support CRON_TZ to apply a timezone within a crontab. You must verify the actual environment rather than assuming."},{"question":"What is CRON_TZ?","answer":"CRON_TZ is a timezone setting supported by some cron implementations that lets a crontab interpret entries in a specified IANA timezone such as Europe/London or Africa/Johannesburg. Support is implementation-dependent, so it should be tested in the real environment before relying on it."},{"question":"Can daylight saving time make a cron job skip or run twice?","answer":"Yes. In DST-observing timezones, some local times do not exist during spring-forward transitions, while other local times occur twice during fall-back transitions. A cron job scheduled on those times may be skipped or may run twice depending on the implementation and scheduling context."},{"question":"Should I change my server timezone away from UTC?","answer":"Usually no. UTC is the safest infrastructure baseline because it removes ambiguity from logs, monitoring, and cross-region operations. It is usually better to keep infrastructure on UTC and handle local business-time scheduling explicitly instead of changing the whole server timezone to fix one job."},{"question":"When should I use application-level scheduling instead of cron?","answer":"Use application-level scheduling when timezone logic is part of the product behavior, such as region-specific report delivery, billing cutoffs, or user-facing local-time events. In those cases you often need explicit IANA timezone handling and better control over DST behavior than a basic OS-level cron setup provides."},{"question":"How can I preview the next cron run times?","answer":"Use a parser and builder that can translate the expression, apply the intended cron profile, and calculate the next scheduled executions in both server time and local time. Previewing the next five runs catches many timezone and field mistakes before deployment."},{"question":"What is the safest way to schedule jobs for a local business timezone?","answer":"Decide explicitly whether the schedule is infrastructure-based UTC time or business-local time. If it must follow a real local timezone with DST rules, use a verified timezone-aware approach such as a supported CRON_TZ implementation or an application scheduler with IANA timezone support, then preview DST-sensitive dates before release."}],"relatedSlugs":["unix-timestamp-javascript-python-go-php-sql","seconds-vs-milliseconds-timestamp-bug"]},{"slug":"form-validation-accessibility-aria-live-regions","title":"Form Validation Accessibility: The Developer's Guide to ARIA and Error States","excerpt":"Stop relying on red text for form errors. Learn the exact ARIA choreography to build accessible forms, manage focus on submission, and correctly use aria-live regions for dynamic validation.","date":"2026-04-06","readTime":"12 min read","category":"Accessibility","tags":["accessible forms","form validation accessibility","aria-live","aria-invalid","aria-describedby","aria-errormessage","wcag","react accessibility"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.58 0.16 220)","to":"oklch(0.72 0.12 175)"},"coverImage":"/blog/form-validation-accessibility.jpg","faqs":[{"question":"What makes a form validation flow accessible?","answer":"An accessible validation flow exposes required fields programmatically, marks invalid fields only when they are actually invalid, links each error to the relevant control, and gives users a clear recovery path through focus management or announced updates after submission."},{"question":"Should I use aria-describedby or aria-errormessage for form errors?","answer":"Use aria-describedby for persistent help text and supplemental instructions. Use aria-errormessage for the field's specific error when the field is invalid. In practice, many teams keep the error id in aria-describedby as well while invalid for broader assistive technology compatibility."},{"question":"When should I use aria-live for validation?","answer":"Use aria-live when validation feedback appears dynamically after page load and the user might otherwise miss the update. Polite announcements are the default. Reserve assertive announcements or role=\"alert\" for higher-priority submit failures or summary-level errors."},{"question":"Is aria-required necessary if I already use required?","answer":"Usually no for native HTML controls. The native required attribute already exposes the required state. aria-required is most useful for custom widgets or for design system components that do not map directly to native form controls."},{"question":"Should focus move to the first invalid field or an error summary?","answer":"Either can be correct. Focus the summary for longer or multi-section forms where users need an overview. Focus the first invalid field for short forms where immediate correction is faster. The important part is choosing one pattern intentionally and implementing it consistently."},{"question":"Is native HTML validation enough for accessibility?","answer":"Native validation provides useful baseline behavior, including automatic focus on the first invalid field in many browsers. It becomes limiting when teams need custom wording, localization, design consistency, or controlled validation timing. If you replace it, you must replicate the important accessibility behavior yourself."},{"question":"Can automated tools fully test form validation accessibility?","answer":"No. Automated tools can catch missing labels, broken ARIA references, and some structural issues, but they cannot fully verify whether focus lands in the right place, whether announcements are understandable, or whether the recovery flow feels usable in a real screen reader session."},{"question":"What is the safest pattern for React form errors?","answer":"Use native labels and input types, validate on a clear trigger such as blur or submit, toggle aria-invalid only while a field is invalid, connect visible help and error text with stable ids, and move focus deliberately after failed submit. A stack like React Hook Form with Zod can help, but the accessibility contract still depends on your rendered markup and focus behavior."}],"relatedSlugs":["automated-accessibility-testing","accessible-react-modal-focus-management"]},{"slug":"discovered-currently-not-indexed-fix","title":"Why “Discovered – Currently Not Indexed” Happens and How to Fix It","excerpt":"Are your new URLs stuck in Google Search Console purgatory? Learn the technical difference between “Discovered” and “Crawled,” and how to fix server bottlenecks, crawl traps, and architecture flaws.","date":"2026-04-06","readTime":"11 min read","category":"Technical SEO","tags":["discovered currently not indexed","technical-seo","crawl-budget","internal-linking","sitemap-indexing-issues","indexing","server-responsiveness","crawl-efficiency"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.58 0.15 210)","to":"oklch(0.72 0.12 250)"},"coverImage":"/blog/crawled-not-indexed-concept.jpg","faqs":[{"question":"What does “Discovered – currently not indexed” mean?","answer":"It means Google knows the URL exists but has not crawled it yet. This is usually a crawl scheduling or crawl efficiency issue, not a final judgment about the page’s content quality."},{"question":"What is the difference between “Discovered” and “Crawled – currently not indexed”?","answer":"Discovered means Google found the URL but has not fetched it. Crawled means Google fetched the URL but has not selected it for indexing yet. The first is mainly a crawl scheduling problem; the second is a post-fetch indexing decision."},{"question":"Does this status mean Google thinks my content is low quality?","answer":"Not by itself. “Discovered – currently not indexed” usually points to crawl demand, crawl capacity, internal link priority, or sitemap quality. It should not be treated as a pure content-quality verdict."},{"question":"Can a slow server cause “Discovered – currently not indexed”?","answer":"Yes. High TTFB, intermittent 5xx errors, unstable infrastructure, or expensive uncached HTML can cause Google to back off crawling and leave more URLs in the discovered queue for longer."},{"question":"Should I request indexing for every affected URL?","answer":"No. Manual reindex requests are fine for a handful of high-priority pages after fixes are in place, but they are not a scalable solution for sitewide crawl scheduling problems."},{"question":"Can bad sitemaps cause this issue?","answer":"Yes. Sitemaps that contain redirects, broken URLs, parameter junk, duplicates, or noindex pages weaken the quality signal and waste crawl attention that should be going to canonical, indexable pages."},{"question":"Do orphan pages get stuck in this state more often?","answer":"Often, yes. A URL that appears only in a sitemap and has weak or no meaningful internal links usually looks lower-priority than a page that is reachable through normal site architecture."},{"question":"Can robots.txt or parameter crawl traps make this worse?","answer":"Yes. Endless filter combinations, internal search URLs, and poorly controlled parameter spaces can consume crawl effort. Over-broad robots.txt rules can also block useful crawl paths or create conflicting signals if used carelessly."}],"relatedSlugs":["xml-sitemap-best-practices","robots-txt-mistakes-blocking-seo"]},{"slug":"crawled-currently-not-indexed-fixes","title":"“Crawled – Currently Not Indexed”: When Google Visited Your Page but Still Said No","excerpt":"Googlebot crawled your page, but refused to index it. Discover the technical reasons why—from JavaScript rendering failures and soft 404s to canonical conflicts and thin content—and how to fix them.","date":"2026-04-06","readTime":"13 min read","category":"Technical SEO","tags":["crawled currently not indexed","technical-seo","rendering","soft-404","duplicate-content","canonical","hreflang","indexing"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.57 0.17 22)","to":"oklch(0.68 0.14 320)"},"coverImage":"/blog/crawled-not-indexed-google-rejected.jpg","faqs":[{"question":"What does “Crawled – currently not indexed” mean?","answer":"It means Google successfully fetched the page but did not choose it for the index yet. Unlike “Discovered,” the decision usually happens after crawl and is tied to rendered output, duplication, soft 404 behavior, or page value."},{"question":"What is the difference between “Discovered” and “Crawled – currently not indexed”?","answer":"Discovered means Google found the URL but has not fetched it yet. Crawled means Google fetched, parsed, and evaluated the page but did not add it to the index. They are different technical problems and should not be solved the same way."},{"question":"Can JavaScript rendering problems cause this status?","answer":"Yes. If the important content appears only after slow, fragile, or failed client-side rendering, Google may see a thin shell, incomplete DOM, or placeholder state and decide the page is not worth indexing."},{"question":"What is a soft 404?","answer":"A soft 404 is a page that returns 200 OK but behaves like a missing or empty page in practice, such as a dead product URL, an empty search page, or a placeholder with almost no useful content. Google may decline to index it."},{"question":"Can duplicate content or canonical mistakes cause Google not to index a crawled page?","answer":"Yes. If Google decides the page is too similar to another URL, or if canonical signals are conflicting or incorrect, it may select a different canonical and leave this URL out of the index."},{"question":"Does hreflang fix duplicate regional pages by itself?","answer":"No. hreflang helps Google understand language and regional alternatives, but it does not replace clean canonical logic or genuine differentiation between regional pages."},{"question":"Should I resubmit the page for indexing immediately?","answer":"Only after the root issue is fixed. Reindex requests are useful for a few priority URLs, but repeated manual submissions are not a strategy for pages that still render poorly, behave like soft 404s, or conflict with another canonical."},{"question":"How do I know whether Google saw the real content?","answer":"Use Search Console URL Inspection and the live test, then compare the rendered HTML, screenshot, and selected canonical with what you see in a normal browser session. The answer is in the crawl-facing output, not in your local hydrated app alone."}],"relatedSlugs":["discovered-currently-not-indexed-fix","xml-sitemap-best-practices"]},{"slug":"unhandled-promises-typescript-production-bugs","title":"Unhandled Promises in TypeScript: Why They Cause Real Production Bugs","excerpt":"TypeScript catches type errors, but it will not save you from unhandled promise rejections. Learn how floating promises cause crashes, silent UI failures, and skipped cleanup—and how to fix them.","date":"2026-03-31","readTime":"14 min read","category":"TypeScript","tags":["typescript","promises","async-await","node-js","floating-promises","eslint","production-bugs","reliability"],"authorId":"gareth-whitbey","coverGradient":{"from":"oklch(0.45 0.18 270)","to":"oklch(0.60 0.16 320)"},"coverImage":"/blog/unhandled-promises-typescript.jpg","faqs":[{"question":"What is a floating promise in TypeScript?","answer":"A floating promise is a Promise that is created but never awaited, returned, or explicitly handled with .catch() or void. Because no code observes the outcome, a rejection from that Promise escapes the intended error-handling flow. TypeScript compiles floating promises without error because they are type-safe. The ESLint rule @typescript-eslint/no-floating-promises catches them by requiring every Promise-valued expression to be handled."},{"question":"Why does TypeScript allow unhandled promises?","answer":"TypeScript is a static type checker. It verifies that values match their declared types, but it does not enforce runtime behavior like whether a Promise rejection is observed. A function that returns Promise<void> can be called without await and still type-check correctly. Catching unhandled promises requires lint rules or runtime detection, not just the type system."},{"question":"Can an unhandled rejection crash Node.js?","answer":"Yes. In modern Node.js versions, unhandled promise rejections are treated with increasing strictness. Depending on the Node version and configuration, an unhandled rejection can emit a warning, throw an uncaught exception, or terminate the process. The --unhandled-rejections=throw flag (default in Node 15+) causes the process to exit on any unhandled rejection."},{"question":"Why does try/catch not catch my async error?","answer":"If you return a Promise from inside a try block without awaiting it, the rejection happens after the try/catch block has already exited. The catch clause only catches synchronous throws and rejections from awaited Promises within its scope. Adding await before the return ensures the rejection is thrown inside the try block where catch can observe it."},{"question":"When should I use Promise.allSettled instead of Promise.all?","answer":"Use Promise.allSettled when you need every operation to run to completion and want to inspect individual results afterward, even if some fail. Use Promise.all when all operations must succeed for the workflow to be valid, and a single failure should abort the batch. Promise.all rejects on the first failure; Promise.allSettled always resolves with the status of every operation."},{"question":"What does void do with a Promise?","answer":"Prefixing a Promise expression with the void operator tells the TypeScript compiler and lint rules that the Promise is intentionally not awaited. This satisfies the no-floating-promises rule by making the intent explicit. However, void alone does not handle rejections. You must still attach .catch() or equivalent error handling to prevent unhandled rejections at runtime."},{"question":"Should I use process.on('unhandledRejection') in production?","answer":"Yes, as a safety net for logging, metrics, and alerting. It should not be your primary error-handling strategy. Use it to detect rejections that escape local handling, log diagnostic information, and coordinate a clean shutdown if needed. Do not use it to silently swallow errors and continue normal operation, because the process state after an unhandled rejection may be compromised."},{"question":"Can browsers detect unhandled Promise rejections?","answer":"Yes. Modern browsers fire an unhandledrejection event on the window object when a Promise rejects without a handler. You can listen to this event for telemetry and last-resort error reporting. There is also a rejectionhandled event that fires when a previously unhandled rejection is caught later. These are useful for observability but are not substitutes for explicit local error handling."}],"relatedSlugs":["static-analysis-for-typescript","why-code-audits-matter"]},{"slug":"return-await-typescript-when-it-matters","title":"return await in TypeScript: When It Actually Matters","excerpt":"`return await` is not always redundant. Learn when it matters in TypeScript, why it changes try/catch behavior, and how it improves async debugging and stack traces.","date":"2026-03-31","readTime":"11 min read","category":"TypeScript","tags":["typescript","async-await","promises","error-handling","eslint","stack-traces","node-js","debugging"],"authorId":"gareth-whitbey","coverGradient":{"from":"oklch(0.42 0.16 250)","to":"oklch(0.58 0.14 300)"},"coverImage":"/blog/return-await-typescript.jpg","faqs":[{"question":"Is return await always redundant?","answer":"No. Inside a try/catch block, return await is essential because it lets the current function observe the rejection before the function exits. Without await, the rejection happens after the try block has already completed, so the catch clause never fires. Outside try/catch and cleanup boundaries, return await is often neutral but can still improve stack traces."},{"question":"Why does return await matter in try/catch?","answer":"When you write return somePromise() inside a try block, the function returns the pending Promise immediately. If that Promise later rejects, the rejection happens outside the try/catch scope, so the catch block never sees it. Adding await forces the settlement to occur inside the try block, where catch can observe and handle the rejection."},{"question":"Does return await improve stack traces?","answer":"In many runtimes, yes. When a Promise is returned directly, the current function may not appear in the async stack trace if the Promise rejects later. Awaiting inside the function keeps the function on the call stack at the point of rejection, which can make error traces more useful for debugging. The exact improvement depends on the runtime and its async stack trace implementation."},{"question":"Is return await slower?","answer":"In modern JavaScript engines, the performance difference is negligible for virtually all real-world code. Older advice warned about an extra microtick, but engine optimizations have largely eliminated this concern. The decision should be based on correctness, error handling, and debugging value, not micro-performance."},{"question":"Should I enable @typescript-eslint/return-await?","answer":"Yes. The @typescript-eslint/return-await rule helps enforce consistent and correct use of return await. The in-try-catch configuration is especially useful: it requires return await inside try/catch blocks (where it affects correctness) and allows direct return elsewhere. This matches the practical guidance for most TypeScript teams."},{"question":"When is direct return promise fine?","answer":"Direct return is fine in simple pass-through async functions that have no local try/catch, no cleanup logic, and no need for improved local stack context. If the function is just forwarding a Promise without observing its outcome locally, return await adds little value. The key test is whether the current function needs to see the rejection."},{"question":"Does this matter in Node.js and browsers?","answer":"Yes, it matters in both environments. In Node.js, a missed rejection inside try/catch can cause unhandled rejection events or process termination. In browsers, it can cause silent UI failures where error states never trigger. The try/catch control-flow issue is identical regardless of runtime. Stack trace improvements vary by engine but are relevant in both."},{"question":"Is this just a style preference?","answer":"No. Inside try/catch, the difference between return and return await changes whether the catch block executes. That is a control-flow difference, not a style choice. It can determine whether errors are logged, metrics are recorded, cleanup runs, or the user sees an error message. Outside try/catch, the choice is closer to a style preference, but even there stack trace quality can be a practical factor."}],"relatedSlugs":["unhandled-promises-typescript-production-bugs","static-analysis-for-typescript"]},{"slug":"csp-nextjs-react-modern-apps","title":"Content Security Policy (CSP) for React and Next.js: The 2026 Implementation Guide","excerpt":"Whitelisting is dead. Learn how to implement a strict nonce-based Content Security Policy in Next.js and React without breaking hydration or third-party scripts.","date":"2026-03-31","readTime":"15 min read","category":"Application Security","tags":["csp","security-headers","nextjs","react","xss","nonce","strict-dynamic","appsec"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.40 0.18 30)","to":"oklch(0.56 0.16 60)"},"coverImage":"/blog/csp-for-react-next-modern-apps.jpg","faqs":[{"question":"What is a strict CSP?","answer":"A strict CSP is a Content Security Policy that relies on cryptographic nonces or hashes to authorize individual scripts, rather than listing trusted hostnames. It typically includes script-src 'nonce-<value>' 'strict-dynamic', object-src 'none', and base-uri 'none'. This approach is harder to bypass than host-based allowlists because an attacker cannot inject a script that carries the correct nonce."},{"question":"Why is nonce-based CSP better than host allowlisting?","answer":"Host allowlists trust entire domains. If any resource on that domain can be manipulated or serves user-controlled content, the allowlist can be bypassed. Nonce-based CSP trusts specific script executions: only scripts carrying the correct per-request nonce are allowed to run. This makes exploitation significantly harder even if an attacker finds an injection point."},{"question":"Does strict-dynamic replace allowlists?","answer":"In browsers that support it, yes. When a policy includes a valid nonce or hash plus strict-dynamic, source expressions like 'self' and host allowlists are ignored for script execution. Scripts loaded by a nonced root script inherit trust automatically. You may still include host-based fallbacks for older browsers, but they do not contribute to security in modern browsers once strict-dynamic is active."},{"question":"Can I use CSP with Next.js static pages?","answer":"Not with a true per-request nonce. Nonce-based CSP requires dynamic rendering because the nonce must be generated and embedded during each server-side render. Statically generated pages receive the same HTML for every request, so there is no opportunity to inject a unique nonce. For static pages, you can use hash-based CSP (precomputing hashes of known inline scripts) or accept a less strict policy for those routes."},{"question":"What is the safest way to roll out CSP in production?","answer":"Start with Content-Security-Policy-Report-Only. This sends the policy to the browser but does not block anything. Collect violation reports, fix expected breakages, verify critical user flows, and then switch to enforcement mode. Never ship a strict CSP directly to production enforcement without a Report-Only observation period."},{"question":"How do I handle third-party scripts with a strict CSP?","answer":"Give the trusted root script (such as a tag manager loader) the request nonce. With strict-dynamic in the policy, scripts loaded by that nonced root script inherit execution trust. This avoids broad host allowlists. However, every third-party should still be reviewed for necessity and trust. An overly broad third-party allowance can quietly undo the value of a strict policy."},{"question":"What is the difference between Report-Only and enforced CSP?","answer":"Content-Security-Policy-Report-Only tells the browser to evaluate the policy and report violations but not block anything. Content-Security-Policy enforces the policy and blocks violations. Report-Only is used during rollout to discover breakages safely. Enforcement is the production target once violations are resolved."},{"question":"Do I still need secure coding practices if I have CSP?","answer":"Yes. CSP is a defense-in-depth layer, not a substitute for fixing XSS vulnerabilities in application code. If your code uses dangerouslySetInnerHTML with unsanitized input, CSP may limit exploitation but does not remove the underlying vulnerability. Secure coding practices eliminate the bug. CSP limits the blast radius if a bug slips through."}],"relatedSlugs":["automated-accessibility-testing","robots-txt-mistakes-blocking-seo"]},{"slug":"seconds-vs-milliseconds-timestamp-bug","title":"Seconds vs Milliseconds: The Timestamp Bug That Breaks APIs and JWTs","excerpt":"Debugging a timestamp bug? Learn the difference between seconds and milliseconds, why JavaScript and JWTs often disagree, and how to avoid time-handling bugs in APIs and auth flows.","date":"2026-03-29","readTime":"10 min read","category":"Engineering","tags":["unix-timestamp","milliseconds","seconds","jwt","api-debugging","javascript","date-handling"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.50 0.20 30)","to":"oklch(0.62 0.16 60)"},"coverImage":"/blog/seconds-vs-milliseconds.jpg","faqs":[{"question":"What is the difference between seconds and milliseconds in Unix time?","answer":"Both represent time elapsed since January 1, 1970 UTC, but in different units. Unix seconds is a 10-digit integer (e.g. 1700000000). Unix milliseconds is a 13-digit integer (e.g. 1700000000000) — the same moment multiplied by 1000. Treating one as the other produces dates thousands of years in the past or future."},{"question":"How can I tell if a timestamp is in seconds or milliseconds?","answer":"Count the digits. A 10-digit number is almost always seconds. A 13-digit number is almost always milliseconds. If you interpret a 13-digit millisecond value as seconds, the resulting date will be around the year 55000. If you interpret a 10-digit second value as milliseconds, the date will be in January 1970."},{"question":"Does JavaScript Date.now() return seconds or milliseconds?","answer":"Milliseconds. Date.now() returns the number of milliseconds since the Unix epoch. The Date constructor also expects milliseconds. To get Unix seconds in JavaScript, use Math.floor(Date.now() / 1000). This is the single most common source of off-by-1000x bugs when JavaScript interacts with backend systems."},{"question":"Are JWT exp and iat values in seconds or milliseconds?","answer":"Seconds. JWT time claims (exp, iat, nbf) use NumericDate values as defined in RFC 7519, which are the number of seconds since the Unix epoch. Comparing them directly to JavaScript’s Date.now() without dividing by 1000 will produce incorrect expiry logic."},{"question":"Why does my timestamp convert to the year 54000?","answer":"You are treating a millisecond value as seconds. A 13-digit millisecond timestamp like 1700000000000, when multiplied by 1000 again (as if it were seconds), produces a date tens of thousands of years in the future. Pass milliseconds directly to Date constructors, or divide by 1000 first if your target expects seconds."},{"question":"Should my API return seconds or milliseconds?","answer":"Either is fine as long as the unit is explicit and consistent. Use field names like expiresAtSec or createdAtMs, and document the unit in your API contract. The most dangerous choice is a vague field name like “timestamp” with no unit specified, because consumers will guess — and guess wrong."},{"question":"What is the safest way to compare JWT expiry in JavaScript?","answer":"Convert Date.now() to seconds before comparing: Math.floor(Date.now() / 1000) > decoded.exp. Alternatively, convert the JWT exp to milliseconds: Date.now() > decoded.exp * 1000. Either approach works as long as both sides of the comparison use the same unit."},{"question":"Is Unix time always UTC?","answer":"Yes. A Unix timestamp always represents a UTC moment. It does not carry timezone information. When you convert it to a local date string, your system applies the local timezone offset at that point. The underlying integer is timezone-agnostic by design."}],"relatedSlugs":["unix-timestamp-javascript-python-go-php-sql","why-code-audits-matter"]},{"slug":"jwt-expiry-debugging-token-looks-valid-logs-users-out","title":"JWT Expiry Debugging: Why Your Token Looks Valid But Your App Logs Users Out","excerpt":"Debugging JWT expiry issues? Learn why valid-looking tokens still fail, how exp, iat, and nbf really work, and how to fix seconds-vs-milliseconds and clock-skew bugs.","date":"2026-03-29","readTime":"11 min read","category":"Engineering","tags":["jwt","auth-debugging","token-expiry","clock-skew","javascript","unix-timestamp","frontend-auth"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.45 0.22 280)","to":"oklch(0.60 0.16 320)"},"coverImage":"/blog/jwt-expiry-debugging.jpg","faqs":[{"question":"Are JWT exp and iat in seconds or milliseconds?","answer":"Seconds. JWT time claims (exp, iat, nbf) use NumericDate values as defined in RFC 7519, which represent the number of seconds since the Unix epoch (January 1, 1970 UTC). They are not milliseconds. Comparing them directly to JavaScript’s Date.now() without dividing by 1000 produces incorrect expiry logic."},{"question":"Why does my token look valid in a decoder but still fail in my app?","answer":"A decoder shows the raw claim values but does not replicate your app’s comparison logic. The most common causes are: your code compares milliseconds to seconds, the client clock is slightly ahead or behind the server, refresh logic fires too late, or nbf blocks immediate use. Decoding confirms the payload; it does not confirm your code handles the values correctly."},{"question":"What is clock skew in JWT validation?","answer":"Clock skew is the difference between the clocks on two systems — typically the token issuer and the token consumer. Even a few seconds of drift can cause a freshly issued token to appear expired (if the consumer’s clock is ahead) or not-yet-valid (if the consumer’s clock is behind). Many validation libraries accept a leeway parameter to tolerate small skew."},{"question":"Should I compare JWT exp directly to Date.now()?","answer":"No. Date.now() returns milliseconds, but JWT exp is in seconds. Either divide Date.now() by 1000 first (Math.floor(Date.now() / 1000) > decoded.exp) or multiply exp by 1000 (Date.now() > decoded.exp * 1000). Both sides of the comparison must use the same unit."},{"question":"What does nbf mean and why can it reject a fresh token?","answer":"nbf (not before) specifies the earliest Unix second at which a token should be accepted. If the consuming system’s clock is even slightly behind the issuing server’s clock, a freshly issued token can be rejected because the consumer thinks the nbf time has not arrived yet. Adding a small leeway (typically 5–30 seconds) in your validation logic accounts for this."},{"question":"How early should I refresh an access token?","answer":"Refresh before the token expires, not at the exact exp boundary. A common pattern is to refresh when 60–300 seconds of remaining lifetime remain, depending on network latency and app tolerance. Refreshing too close to expiry risks the token expiring mid-request. Refreshing too early wastes refresh tokens and increases auth server load."},{"question":"Can local timezone differences make a token expire early?","answer":"Not directly. Unix timestamps and JWT claims are UTC-based and timezone-agnostic. However, if your code converts exp to a local-time string and then compares it to a UTC-based current time, or if a developer visually inspects a local-time display and misreads it as UTC, the token can appear expired when it is not. Always compare raw numeric values in the same unit, not formatted strings."},{"question":"What is the safest way to debug JWT expiry?","answer":"Decode the token and read exp, iat, and nbf as raw numbers. Convert them to UTC dates using a tool or Math. Compare against the current UTC time in the same unit (seconds). Check whether the client and server clocks are aligned. Verify that refresh logic fires before exp, not after. Check whether nbf blocks immediate use. Do not rely on visual local-time inspection alone."}],"relatedSlugs":["seconds-vs-milliseconds-timestamp-bug","unix-timestamp-javascript-python-go-php-sql"]},{"slug":"third-party-scripts-inp-optimization","title":"How Third-Party Scripts Kill Your INP and How to Fix It","excerpt":"Are marketing tags and chat widgets ruining your Core Web Vitals? Learn how third-party scripts block the main thread and how to fix INP using Web Workers, lazy loading, facades, and smarter execution.","date":"2026-03-29","readTime":"14 min read","category":"Web Performance","tags":["inp","core-web-vitals","third-party-scripts","long-tasks","performance","web-workers","partytown","gtm"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.50 0.18 145)","to":"oklch(0.64 0.14 190)"},"coverImage":"/blog/third-party-scripts-optimization.jpg","faqs":[{"question":"What is INP and why do third-party scripts affect it?","answer":"Interaction to Next Paint (INP) measures how quickly the browser visually responds to user interactions such as clicks, taps, and key presses. Third-party scripts affect INP when they create long tasks on the main thread. If a user interacts while the browser is busy evaluating or executing a third-party script, the interaction is delayed because the main thread cannot process it until the current task finishes."},{"question":"What is a long task?","answer":"A long task is any single piece of JavaScript execution that occupies the main thread for more than 50 milliseconds. During a long task, the browser cannot respond to user input or paint visual updates. Third-party scripts frequently create long tasks during parsing, evaluation, or callback execution, especially on lower-powered mobile devices."},{"question":"Does async or defer fix INP problems?","answer":"Not fully. Async and defer prevent a script from blocking HTML parsing, which helps initial load. But once the script executes, it can still create long tasks on the main thread that block interactions. A script loaded with async or defer that runs expensive logic during a user interaction will still hurt INP."},{"question":"Can a chat widget hurt Core Web Vitals?","answer":"Yes. Chat widgets often load multiple scripts, stylesheets, and iframe resources on page start. Their initialisation creates main-thread work that competes with user interactions. Loading the chat widget on user intent (such as a click on a placeholder button) instead of on page load can significantly reduce its impact on INP."},{"question":"What is Partytown and when should I use it?","answer":"Partytown is an open-source library that moves third-party scripts off the main thread and into a Web Worker. It is most effective for analytics and tracking scripts that mostly listen to events and send data. It is not a universal solution: scripts that need heavy DOM access or synchronous main-thread APIs may not work correctly in a worker context. Test carefully before deploying."},{"question":"Do lazy-loaded iframes help INP?","answer":"Yes. Adding loading=\"lazy\" to iframe elements defers their load until they are near the viewport. This reduces the amount of third-party JavaScript, CSS, and network activity that competes with the main thread during initial page interactions. Combining lazy loading with a facade (a lightweight preview image or placeholder) is even more effective."},{"question":"How do I know which third-party script is causing the delay?","answer":"Use Chrome DevTools Performance recordings. Record a session that includes user interactions, then inspect the Main thread flame chart for long tasks. Use the Bottom-Up tab or enable third-party grouping to see which domains consume the most execution time. The Interactions track (if available) shows which interactions were delayed and what was running on the main thread at that moment."},{"question":"Should I block all marketing tags to improve performance?","answer":"No. The goal is governance, not elimination. Remove dead or redundant tags, defer non-essential ones, set trigger discipline so tags only fire on relevant pages and events, and use performance budgets to keep total third-party cost within acceptable limits. Many marketing tags can coexist with good INP if they are loaded and executed thoughtfully."}],"relatedSlugs":["core-web-vitals","why-code-audits-matter"]},{"slug":"uuid-v4-v7-vs-ulid","title":"UUID v4 vs UUID v7 vs ULID: Which ID Format Should You Use?","excerpt":"Choosing between UUID v4, UUID v7, ULID, and Nano ID? Learn the trade-offs around sortability, database performance, URL safety, and implementation so you can pick the right ID format.","date":"2026-03-29","readTime":"13 min read","category":"Backend Engineering","tags":["uuid","uuid-v7","ulid","nano-id","databases","distributed-systems","backend","api-design"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.48 0.16 260)","to":"oklch(0.62 0.14 310)"},"coverImage":"/blog/uuidv4-vs-v7-vs-ulid.jpg","faqs":[{"question":"What is the difference between UUID v4 and UUID v7?","answer":"UUID v4 is fully random — every bit (aside from version and variant markers) comes from a cryptographic random source. UUID v7 encodes a Unix millisecond timestamp in the first 48 bits and fills the remaining bits with random data. This makes UUID v7 naturally time-ordered, which improves database index locality and allows sorting by creation time without a separate column. UUID v4 is better when ordering is irrelevant and maximum randomness is preferred."},{"question":"Is UUID v7 better for databases?","answer":"In many cases, yes. Databases that use B-tree indexes (PostgreSQL, MySQL InnoDB) benefit from time-ordered keys because new rows are appended near the end of the index rather than scattered randomly. This reduces page splits and improves write throughput. UUID v7 provides this ordering while keeping the standard UUID format. If your workload is write-heavy and benefits from insertion-order locality, UUID v7 is usually a better choice than UUID v4."},{"question":"When should I use ULID instead of UUID?","answer":"Use ULID when you want lexicographically sortable identifiers in a compact 26-character string format. ULIDs are popular for event logs, time-series data, filenames, and systems where human-readable sort order matters. The trade-off is that ULID is not an IETF UUID standard, so if downstream tools or APIs require canonical UUID formatting, ULID may cause friction."},{"question":"Is Nano ID better than UUID?","answer":"Nano ID solves a different problem. It produces short, URL-friendly, customizable-length identifiers using a configurable alphabet. It is ideal for public-facing IDs, invite codes, short links, and compact object references. UUID is better when you need a standardised 128-bit format that is universally recognised across databases, APIs, and programming languages. For database primary keys, UUID v7 or ULID are usually better choices than Nano ID."},{"question":"Which format is best for URL-safe identifiers?","answer":"Nano ID is the most URL-friendly option because it uses a safe alphabet by default (A-Z, a-z, 0-9, underscore, hyphen) and supports custom lengths, making it very compact. ULID is also URL-safe at 26 characters with no special characters. Standard UUIDs work in URLs but are 36 characters with hyphens, which makes them verbose."},{"question":"Are ULIDs and UUID v7 sortable?","answer":"Yes. Both embed a timestamp component that enables sorting by creation time at millisecond granularity. UUID v7 sorts correctly when compared as standard UUID strings. ULID sorts correctly as plain strings because Crockford Base32 preserves lexicographic order. IDs generated within the same millisecond may not have guaranteed sub-millisecond ordering unless a monotonic counter is used."},{"question":"Should I replace all UUID v4 values with UUID v7?","answer":"Not necessarily. If your existing UUID v4 identifiers are working well and your workload does not suffer from index fragmentation or ordering issues, there is no urgent reason to migrate. UUID v7 is most valuable for new tables, new services, or workloads where insertion order and index locality matter. Migrating existing primary keys has its own cost and risk."},{"question":"Which ID type is best for general-purpose APIs?","answer":"UUID v4 remains a strong default for general-purpose API resource identifiers because it is universally supported, widely understood, and does not leak timing information. If your API also serves as the write path into a database where index locality matters, UUID v7 gives you both API compatibility and better storage behaviour. Choose based on whether ordering is a requirement downstream."}],"relatedSlugs":["unix-timestamp-javascript-python-go-php-sql","seconds-vs-milliseconds-timestamp-bug"]},{"slug":"accessible-react-modal-focus-management","title":"Accessible Modal Dialogs in React: Focus Management Done Right","excerpt":"Building custom modals in React? Learn how to trap focus, restore active elements, use WAI-ARIA attributes correctly, and avoid the most common WCAG compliance failures.","date":"2026-03-28","readTime":"14 min read","category":"Accessibility","tags":["accessibility","react","focus-management","wai-aria","wcag","modal-dialog","typescript"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.45 0.22 280)","to":"oklch(0.60 0.18 320)"},"coverImage":"/blog/accessible-model-dialogs.jpg","faqs":[{"question":"What makes a modal accessible?","answer":"An accessible modal moves focus into the dialog when it opens, traps keyboard focus inside so Tab and Shift+Tab cycle only through interactive elements within the modal, supports Escape to close (where appropriate), and returns focus to the exact triggering element when it closes. It also requires correct WAI-ARIA semantics: role=\"dialog\" or role=\"alertdialog\", aria-modal=\"true\", and an accessible name via aria-labelledby."},{"question":"Should focus move into a modal automatically?","answer":"Yes. When a modal opens, focus must move into the dialog. Typically focus goes to the first interactive element, but for modals with important context or destructive actions, focusing the dialog container or heading (with tabIndex={-1}) may be more appropriate so the user hears the context before interacting."},{"question":"Do I need a focus trap if I use React portals?","answer":"Yes. React portals move the modal out of the parent DOM tree for rendering purposes, but they do not change keyboard behavior. Without an explicit focus trap, pressing Tab will still move focus to elements behind the modal in the main document. Portals solve z-index and overflow clipping issues, not focus management."},{"question":"Is native <dialog> enough for accessibility?","answer":"The native HTML dialog element with showModal() provides useful baseline behavior including top-layer rendering and background inertness. However, it does not automatically place focus on the right element, does not always trap focus consistently across all browser and screen reader combinations, and does not handle focus restoration on close. You still need to manage focus placement, verify trap behavior, and restore focus to the trigger."},{"question":"When should I use role=\"alertdialog\" instead of role=\"dialog\"?","answer":"Use role=\"alertdialog\" when the modal requires an immediate response to a critical or potentially destructive action, such as confirming a deletion or acknowledging an important warning. Alert dialogs signal higher urgency to assistive technology. For standard modals like forms, settings panels, or informational overlays, use role=\"dialog\"."},{"question":"Why does my modal still fail keyboard testing even with ARIA attributes?","answer":"ARIA attributes describe semantics to assistive technology but do not change browser behavior. Adding role=\"dialog\" and aria-modal=\"true\" does not create a focus trap, move focus, or handle Escape key events. You must implement those behaviors in JavaScript. ARIA tells screen readers what the element is; your code must make it behave correctly."},{"question":"Should focus return to the trigger button after close?","answer":"Yes. Returning focus to the element that triggered the modal is a WCAG requirement for predictable navigation. It preserves the user’s place in the page and avoids disorientation. Capture document.activeElement before opening the modal and call .focus() on that element when the modal unmounts or closes."},{"question":"Can automated accessibility tools fully validate modals?","answer":"No. Automated tools like axe-core can detect missing ARIA labels, incorrect roles, and some semantic issues, but they cannot verify that focus moves correctly on open, stays trapped during interaction, or returns to the trigger on close. Focus flow and keyboard behavior require manual testing or dedicated interaction tests."}],"relatedSlugs":["automated-accessibility-testing","why-code-audits-matter"]},{"slug":"unix-timestamp-javascript-python-go-php-sql","title":"The Developer’s Cheat Sheet: Unix Timestamps in JS, Python, Go, PHP, and SQL","excerpt":"Stop fighting timezones. Here is the ultimate cheat sheet for getting, converting, and formatting Unix timestamps across JavaScript, Python, Go, PHP, and SQL databases.","date":"2026-03-28","readTime":"12 min read","category":"Engineering","tags":["unix-timestamp","javascript","python","go","php","sql","epoch-time","date-handling","cheat-sheet"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.48 0.18 200)","to":"oklch(0.62 0.14 260)"},"coverImage":"/blog/unix-timestamp-concept.jpg","faqs":[{"question":"What is a Unix timestamp?","answer":"A Unix timestamp (also called Epoch time or POSIX time) is the number of seconds that have elapsed since January 1, 1970, at 00:00:00 UTC, excluding leap seconds. It represents a specific moment in time as a single integer, making it useful for machine-readable time transfer across systems, APIs, databases, and logs."},{"question":"What is the difference between Unix time and Epoch time?","answer":"They are the same concept. Unix time, Epoch time, and POSIX time all refer to the count of seconds since January 1, 1970 UTC. The terms are used interchangeably across documentation and codebases."},{"question":"Is a Unix timestamp always UTC?","answer":"Yes. A Unix timestamp always represents a UTC moment. It does not carry timezone information because it does not need to — the integer value corresponds to a single, unambiguous instant. When you convert it to a local date string, your system applies the local timezone offset at that point."},{"question":"How do I know if a timestamp is in seconds or milliseconds?","answer":"Count the digits. A 10-digit value (e.g. 1700000000) is almost always seconds. A 13-digit value (e.g. 1700000000000) is milliseconds. Treating a millisecond value as seconds produces a date tens of thousands of years in the future. JavaScript’s Date.now() returns milliseconds; most other languages and JWT claims use seconds."},{"question":"Should I store dates as Unix timestamps in my database?","answer":"It depends on the use case. Unix timestamps are excellent for transport layers, logs, JWT claims, and cross-system interoperability. But for relational queries, date arithmetic, indexing, and reporting, native database timestamp types (like PostgreSQL’s timestamptz or MySQL’s DATETIME) are usually more practical and efficient. Use the format that fits the layer."},{"question":"What is the difference between Unix timestamps and ISO 8601?","answer":"A Unix timestamp is a numeric value (seconds since epoch) optimized for machine processing. ISO 8601 is a human-readable string format like 2024-11-14T22:13:20Z that includes explicit timezone information. Unix timestamps are compact and fast to compare numerically; ISO 8601 is clearer for API consumers and log readers. Many systems use both at different layers."},{"question":"How do I convert a Unix timestamp back to a date?","answer":"In JavaScript: new Date(timestamp * 1000). In Python: datetime.fromtimestamp(timestamp, tz=timezone.utc). In Go: time.Unix(timestamp, 0). In PHP: (new DateTimeImmutable())->setTimestamp(timestamp). In PostgreSQL: to_timestamp(value). In MySQL: FROM_UNIXTIME(value). Remember to multiply by 1000 in JavaScript since Date expects milliseconds."},{"question":"Does JavaScript use seconds or milliseconds by default?","answer":"Milliseconds. Date.now() returns the current time in milliseconds since epoch. The Date constructor also expects milliseconds. To get Unix seconds, divide by 1000 and floor: Math.floor(Date.now() / 1000). This is the single most common source of off-by-1000x bugs when JavaScript interacts with backend systems that use seconds."}],"relatedSlugs":["why-code-audits-matter","core-web-vitals"]},{"slug":"robots-txt-vs-meta-robots-vs-x-robots-tag","title":"robots.txt vs Meta Robots vs X-Robots-Tag: The Developer’s Guide to Crawl Control","excerpt":"Stop guessing how to block search engines. Learn the exact technical differences between robots.txt, meta robots, and the X-Robots-Tag — and when to use each in your stack.","date":"2026-03-24","readTime":"12 min read","category":"Technical SEO","tags":["technical-seo","robots-txt","meta-robots","x-robots-tag","crawl-control","indexing","search-directives"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.48 0.18 270)","to":"oklch(0.62 0.16 230)"},"coverImage":"/blog/robots-meta-robots-x-robots.jpg","faqs":[{"question":"What is the difference between crawling and indexing?","answer":"Crawling is the process where a search engine bot fetches and reads a URL. Indexing is the decision to include that URL in search results. A page can be crawled without being indexed, and a URL can appear in search results without ever being crawled — for example, if other pages link to it. Blocking crawling does not prevent indexing."},{"question":"Can robots.txt remove a page from Google or Bing?","answer":"No. robots.txt controls crawl access, not index status. Blocking a URL in robots.txt prevents compliant crawlers from fetching it, but search engines may still index the URL as a bare listing if other pages link to it. To remove a page from results, allow crawling and use a noindex meta tag or X-Robots-Tag header."},{"question":"When should I use meta robots instead of robots.txt?","answer":"Use meta robots when you want a specific HTML page to remain accessible to users and crawlers but excluded from search results. Common examples include thank-you pages, internal search result pages, and thin utility pages. The crawler must be able to fetch the page to read the meta robots tag, so do not also block the page in robots.txt."},{"question":"When should I use X-Robots-Tag?","answer":"Use X-Robots-Tag when you need to control indexing for non-HTML resources such as PDFs, images, or JSON responses, or when you want to apply indexing directives at the server or CDN level without editing individual HTML files. It is sent as an HTTP response header and supports the same directive values as the meta robots tag."},{"question":"Can I noindex a PDF or JSON file?","answer":"Yes, but only through the X-Robots-Tag HTTP response header. PDFs and JSON files do not have an HTML head element, so a meta robots tag cannot be added. Configure your web server, reverse proxy, or CDN to return the header X-Robots-Tag: noindex for the relevant file paths."},{"question":"Why is my page still showing in search after I blocked it in robots.txt?","answer":"Because robots.txt blocks crawling, not indexing. If other pages link to the blocked URL, search engines can still discover and index it as a bare listing without a snippet. To prevent a page from appearing in results, allow crawling and add a noindex directive via meta robots or X-Robots-Tag."},{"question":"Does Bing support meta robots and X-Robots-Tag?","answer":"Yes. Bing supports both the meta robots HTML tag and the X-Robots-Tag HTTP response header. Bing processes standard directive values including noindex, nofollow, noarchive, and nosnippet. Always verify behavior in Bing Webmaster Tools after making changes."},{"question":"Is robots.txt a security feature?","answer":"No. robots.txt is a publicly readable plain-text file. It only affects compliant crawlers — humans and non-compliant bots can ignore it entirely. Never use robots.txt to protect sensitive content. Use server-side authentication, access control, or environment-specific routing instead."}],"relatedSlugs":["robots-txt-mistakes-blocking-seo","xml-sitemap-best-practices"]},{"slug":"xml-sitemap-best-practices","title":"XML Sitemap Best Practices for Modern, Dynamic Websites","excerpt":"Still using a static sitemap export? Learn the best practices for dynamic XML sitemaps — clean URL selection, sitemap indexes at scale, accurate lastmod, hreflang for international sites, and a validation workflow that catches problems before Google does.","date":"2026-03-23","readTime":"10 min read","category":"Technical SEO","tags":["technical-seo","xml-sitemap","crawl-budget","hreflang","sitemap-index","dynamic-sites","web-quality"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.57 0.17 52)","to":"oklch(0.66 0.14 28)"},"coverImage":"/blog/xml-sitemap-concept.jpg","faqs":[{"question":"Do I need a sitemap if my site is a Single Page Application?","answer":"Yes, and for SPAs it matters more than average. Googlebot can render JavaScript, but the rendering queue introduces delays — it is not instantaneous. A well-structured XML sitemap gives crawlers a direct list of URLs to discover without depending on JavaScript execution or link-following. For SPAs with dynamic routing or client-side navigation, a programmatically generated sitemap is one of the most reliable ways to ensure all important URLs are discovered and queued for crawling."},{"question":"Can I submit multiple sitemaps to Google and Bing?","answer":"Yes. You can submit multiple sitemaps or a single sitemap index file in both Google Search Console and Bing Webmaster Tools. A sitemap index is the preferred approach for sites with many URLs — it references child sitemaps segmented by content type or section. Both Google and Bing support the sitemap index format. You can also reference sitemap files via the Sitemap directive in your robots.txt, which any compliant crawler will follow without requiring manual submission."},{"question":"What is the difference between a sitemap and a sitemap index?","answer":"A sitemap is an XML file listing individual URLs for a site, with optional metadata like lastmod and priority. A sitemap index is an XML file that lists multiple child sitemap files — used when a single sitemap file would exceed the 50,000 URL or 50 MB limit, or when you want to segment content types for operational clarity. Search engines process sitemap index files the same way they process individual sitemaps, just with an extra level of indirection."},{"question":"Should every URL in a sitemap return a 200 status code?","answer":"Yes. Every URL listed in a sitemap should return an HTTP 200 response, be canonically self-referencing, be crawlable by search engines, and not carry a noindex directive. URLs returning 3xx redirects should be updated to their final destination. URLs returning 4xx or 5xx should be removed. Including broken or redirected URLs wastes crawl budget and reduces the signal quality of the sitemap over time."},{"question":"Should noindex pages appear in a sitemap?","answer":"No. A noindex page in a sitemap sends contradictory signals: the sitemap says 'please index this,' while the noindex directive says 'do not index this.' Search engines will generally respect the noindex, but the conflicting signal can confuse crawl prioritization and waste budget. Only include URLs in your sitemap that you actively want discovered and indexed."},{"question":"How should I handle lastmod for dynamically generated pages?","answer":"Use the actual last-modified timestamp of the underlying data, not the current deployment date. For a blog post, that is the post's last-edited date. For a product page, it is the last time the product data changed. For programmatically generated landing pages, use the most recent relevant entity update. Avoid updating lastmod on every deploy unless content actually changed — doing so trains crawlers to distrust your timestamps, reducing the effectiveness of freshness signals."},{"question":"Can I include hreflang in an XML sitemap?","answer":"Yes. The sitemap-based hreflang approach uses xhtml:link elements inside each URL entry to declare alternate language and region versions. Each alternate page must list all other alternates, including itself. This approach is operationally cleaner than managing hreflang in every HTML head tag — especially for large international catalogs with many language-region combinations. Both Google and Bing support sitemap-based hreflang."},{"question":"Do both Google and Bing use XML sitemaps?","answer":"Yes. Both Googlebot and Bingbot support the XML Sitemap Protocol and process sitemap index files. Both can be fed sitemaps via their respective webmaster tools (Google Search Console and Bing Webmaster Tools) and via the Sitemap directive in robots.txt. Bing also pays attention to lastmod freshness signals and sitemap quality when prioritizing crawl. Maintaining a clean, accurate sitemap benefits discovery across all major crawlers, not just Google."}],"relatedSlugs":["robots-txt-mistakes-blocking-seo","core-web-vitals"]},{"slug":"robots-txt-mistakes-blocking-seo","title":"7 Critical robots.txt Mistakes That Are Silently Killing Your SEO","excerpt":"A misconfigured robots.txt file can block important pages or resources from crawlers without any visible error. Discover the 7 most damaging mistakes, why they happen, and how to fix them before they cost you rankings.","date":"2026-03-20","readTime":"9 min read","category":"Technical SEO","tags":["technical-seo","robots-txt","crawl-budget","indexing","seo-errors","web-quality"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.52 0.16 145)","to":"oklch(0.68 0.14 200)"},"coverImage":"/blog/critical-robots-txt-mistakes.jpg","faqs":[{"question":"Can robots.txt remove a page from search results?","answer":"No. robots.txt controls crawling access, not indexing status. Blocking a URL in robots.txt prevents crawlers from fetching it, but search engines may still index it if it is linked from other pages they can crawl. To reliably prevent a page from appearing in search results, use a noindex meta tag or an X-Robots-Tag HTTP header — and make sure the page is not blocked by robots.txt, otherwise the noindex instruction cannot be read."},{"question":"Is robots.txt case-sensitive?","answer":"The directive names (User-agent, Allow, Disallow) are case-insensitive. The path values are case-sensitive on most web servers, because URL paths are case-sensitive on Linux-based systems. A rule for /Admin/ will not match /admin/ on a case-sensitive server. Always use the exact casing that appears in your URLs."},{"question":"How long does it take Google to notice a robots.txt change?","answer":"Googlebot typically re-fetches robots.txt within 24 hours of a change, though it can take longer. Changes that unblock previously blocked pages may take days or weeks to reflect in search results, because Googlebot still needs to crawl those pages after the block is removed. Use Google Search Console's URL Inspection tool to request a recrawl of important pages after you make changes."},{"question":"Should I put my sitemap URL in robots.txt?","answer":"Yes. Adding a Sitemap directive to robots.txt is a best-practice convenience signal: 'Sitemap: https://yourdomain.com/sitemap.xml'. This is separate from submitting the sitemap in Google Search Console — both are useful. The Sitemap directive helps any compliant crawler discover your content, not just Googlebot."},{"question":"Can robots.txt protect sensitive content?","answer":"No. robots.txt is a publicly readable file — anyone can view it by visiting /robots.txt on your domain. It only prevents compliant crawlers from fetching blocked paths; it does not restrict direct access by humans or non-compliant bots. Sensitive content must be protected by authentication, access control, or server-level restrictions. Never rely on robots.txt as a security mechanism."},{"question":"What is the difference between robots.txt and noindex?","answer":"robots.txt controls whether a crawler can fetch a page (crawl access). noindex, set via a meta tag or HTTP header, controls whether a fetched page should appear in search results (index status). A page blocked by robots.txt cannot be crawled, so any noindex on it cannot be read — Google may still index the URL from links. A page with noindex can be crawled freely but will not appear in results. Use both together deliberately, and never block a noindex page in robots.txt."}],"relatedSlugs":["core-web-vitals","why-code-audits-matter"]},{"slug":"why-code-audits-matter","title":"Why Code Audits Matter More Than You Think","excerpt":"Shipping fast is important. But without periodic code audits, small problems compound into costly outages, security breaches, and engineer burnout. Here is what a good audit actually catches — and why you cannot afford to skip it.","date":"2026-03-15","readTime":"6 min read","category":"Code Quality","tags":["code-audit","technical-debt","engineering-practices","security"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.50 0.20 265)","to":"oklch(0.65 0.18 290)"},"coverImage":"/blog/deep-inspecting-code.jpg","faqs":[{"question":"How often should we run code audits?","answer":"For most teams, a lightweight automated audit on every pull request is the baseline. A deeper manual audit is worth scheduling quarterly, before major releases, or whenever the team size doubles — because team growth almost always introduces new patterns and inconsistencies that only become visible at a distance."},{"question":"What is the difference between a code review and a code audit?","answer":"A code review examines a specific change in context — it is reactive and scoped. A code audit examines the codebase as a whole, looking for systemic patterns: security risks, architectural drift, dependency health, and accumulated technical debt. Reviews catch local issues; audits catch structural ones."},{"question":"Can automated tools replace manual code reviews?","answer":"No. Automated static analysis is excellent at catching well-defined pattern violations — hardcoded secrets, eval() usage, unreachable code, and dependency vulnerabilities. But it cannot reason about business logic correctness, architectural intent, or the subtle security implications of a design decision. The two are complementary, not interchangeable."},{"question":"How do I prioritise findings from a code audit?","answer":"Start with critical security and data-integrity issues — these carry the highest blast radius and must be addressed before anything else. Next, target warnings that affect production reliability. Lower-priority style and maintainability issues can be addressed iteratively through your normal PR workflow. Never let the perfect be the enemy of the good: shipping security fixes fast beats a perfect backlog."}],"relatedSlugs":["static-analysis-for-typescript"]},{"slug":"core-web-vitals","title":"Core Web Vitals in {year}: What’s Changed","excerpt":"Google’s performance thresholds keep evolving. INP has replaced FID, LCP scoring has tightened, and CLS expectations are stricter than ever. Here is what developers need to know right now.","date":"2026-03-10","readTime":"7 min read","category":"Performance","tags":["performance","core-web-vitals","seo","lcp","cls","inp"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.55 0.18 200)","to":"oklch(0.68 0.14 170)"},"coverImage":"/blog/core-web-vitals-changes.jpg","faqs":[{"question":"What are the Core Web Vitals thresholds in 2026?","answer":"Good thresholds: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1. Needs Improvement: LCP 2.5–4 s, INP 200–500 ms, CLS 0.1–0.25. Poor: LCP > 4 s, INP > 500 ms, CLS > 0.25. These thresholds are measured at the 75th percentile of real-user sessions, not lab averages."},{"question":"Has INP completely replaced FID?","answer":"Yes. Interaction to Next Paint (INP) officially replaced First Input Delay (FID) in March 2024 and is now a core ranking signal. FID only measured the delay before the browser started processing an interaction. INP measures the full duration of every interaction on the page — a far more complete picture of responsiveness."},{"question":"Does Core Web Vitals performance affect my search rankings?","answer":"Yes, but as a tiebreaker rather than a primary signal. Google uses CWV as part of the Page Experience ranking system. For two pages with equivalent relevance and authority, the one with better CWV will rank higher. For high-traffic, competitive queries this can make a measurable difference — but content quality and relevance still dominate."},{"question":"How do I measure my site’s Core Web Vitals accurately?","answer":"Field data (real users) is authoritative — check the Chrome User Experience Report (CrUX) in Google Search Console under Core Web Vitals. For lab data, use Lighthouse (Chrome DevTools or PageSpeed Insights), which gives you reproducible scores for debugging. Remember: lab scores inform diagnosis, but field data determines your ranking signal."}],"relatedSlugs":["why-code-audits-matter","automated-accessibility-testing"]},{"slug":"automated-accessibility-testing","title":"A Practical Guide to Automated Accessibility Testing","excerpt":"Automated tools catch roughly 30–40% of accessibility issues. The rest require human judgement. Here is how to build a testing stack that makes the most of both — and integrate it without slowing your team down.","date":"2026-03-05","readTime":"7 min read","category":"Accessibility","tags":["accessibility","wcag","a11y","testing","axe","playwright"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.58 0.18 320)","to":"oklch(0.72 0.12 350)"},"coverImage":"/blog/automated-accessibility-testing.jpg","faqs":[{"question":"Can automated accessibility tools replace manual testing?","answer":"No. Automated tools reliably catch missing alt text, form labels, colour contrast failures (to a degree), and ARIA misuse — but they cannot assess whether content is understandable, whether the logical reading order makes sense, or whether a user relying on a screen reader can complete your key user journeys. Manual testing with keyboard navigation and at least one screen reader (NVDA on Windows, VoiceOver on macOS/iOS) is essential."},{"question":"Which WCAG level should I target?","answer":"WCAG 2.1 AA is the accepted minimum for most web applications and is the level required by law in the EU, UK, and increasingly US federal and state procurement. WCAG 2.2 AA has been the official W3C recommendation since October 2023 and adds a small number of new success criteria, most notably around focus visibility and target size. If you are starting from scratch, target WCAG 2.2 AA."},{"question":"What does axe-core check for?","answer":"axe-core is an open-source accessibility testing engine that checks for approximately 80 rule types including: images without alt text, form inputs without labels, insufficient colour contrast, invalid ARIA attributes, keyboard focus management issues, and missing document structure. It is the engine behind Deque’s axe DevTools, the axe browser extension, and dozens of testing integrations. It aims for zero false positives — every violation it reports is a genuine issue."},{"question":"How do I add automated accessibility tests to a Next.js project?","answer":"The fastest path is to add @axe-core/playwright to your existing Playwright test suite. Install the package, inject the axe analyser into each page test, and call axe().analyze() to get a structured violation report. For a zero-configuration starting point, add the axe-core browser extension to Chrome and manually test key pages while building. For CI, the jest-axe package works well with component-level testing in Vitest or Jest."}],"relatedSlugs":["why-code-audits-matter","core-web-vitals"]},{"slug":"static-analysis-for-typescript","title":"Beyond TSC: Advanced Static Analysis for TypeScript","excerpt":"TypeScript’s compiler catches type errors. But a mature static analysis pipeline catches the bugs that types miss entirely — unused exports, cyclomatic complexity, dead code, and security anti-patterns. Here is how to build one.","date":"2026-02-28","readTime":"8 min read","category":"TypeScript","tags":["typescript","static-analysis","eslint","code-quality","type-safety"],"authorId":"gareth-whitbey","coverGradient":{"from":"oklch(0.60 0.16 190)","to":"oklch(0.72 0.12 220)"},"coverImage":"/blog/advanced-static-analysis.jpg","faqs":[{"question":"What is the difference between tsc and ESLint for TypeScript?","answer":"tsc (the TypeScript compiler) performs type checking — it verifies that values are used in ways that are consistent with their declared types. ESLint with @typescript-eslint performs linting — it checks for code patterns that are legal TypeScript but represent poor practices, potential bugs, or security risks. They operate at different levels and are complementary: tsc catches type errors, ESLint catches pattern violations. You need both."},{"question":"Which @typescript-eslint rules provide the most value?","answer":"The highest-value rules are: @typescript-eslint/no-explicit-any (prevents type erasure), @typescript-eslint/no-floating-promises (catches unawaited async calls that swallow errors), @typescript-eslint/no-unsafe-assignment and related no-unsafe-* rules (catches unsound type assertions), @typescript-eslint/strict-boolean-expressions (catches truthy checks on non-boolean types), and @typescript-eslint/prefer-nullish-coalescing (prevents incorrect falsy-coalescing of 0 and empty strings). Start with the recommended ruleset and add strict rules incrementally."},{"question":"How do I enforce cyclomatic complexity limits in TypeScript?","answer":"Use the ESLint complexity rule: set it to a maximum of 10 for most codebases (complexity: ['error', 10]). For cognitive complexity, which better reflects how hard code is to understand, use @typescript-eslint/cognitive-complexity. A good starting limit is 15 — anything above that is a strong signal the function needs to be broken up. Both rules report per-function, so violations are easy to locate and fix."},{"question":"What tool catches unused exports in TypeScript projects?","answer":"ts-prune is the most focused tool for this: it cross-references every export in your project against all import sites and reports exports that are never consumed. ts-unused-exports provides similar functionality with slightly different output. For monorepos, you need to configure the tool to understand package boundaries. Note: tsc itself does not report unused exports — only unused locals within a file (with noUnusedLocals: true). Unused exports require a whole-project analysis."}],"relatedSlugs":["why-code-audits-matter"]}]}]}],["$L1a"],"$L1b"]}] </article></body></html>

d:["$","$1","c",{"children":[["$","$18",null,{"children":["$","$L19",null,{"posts":[{"slug":"cdn-caching-mistakes-edge-performance","title":"CDN Caching Mistakes That Make Fast Sites Feel Slow","seoTitle":"CDN Caching Mistakes That Make Fast Sites Feel Slow | CodeAva","excerpt":"Is your CDN actually caching your content? Learn why cache MISS responses happen, how query strings and Vary headers fragment cache keys, and how to verify edge performance.","date":"2026-04-30","updatedDate":"2026-04-30","readTime":"15 min read","category":"Web Performance","tags":["CDN caching","edge performance","Cache-Control","cache keys","Vary","query strings","cache hit ratio","HTTP headers","s-maxage","CF-Cache-Status","X-Vercel-Cache","Age header"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.38 0.15 210)","to":"oklch(0.62 0.12 155)"},"coverImage":"/blog/cdn-caching-mistakes.jpg","faqs":[{"question":"Why is my CDN returning MISS instead of HIT?","answer":"A MISS usually means the edge could not reuse a stored response for that request. Common causes include a cold cache, uncacheable Cache-Control rules, cookies, request methods or status codes the CDN will not cache, query-string variants, Vary headers, or CDN override rules. Provider labels differ, so verify the platform documentation and inspect several representative URLs."},{"question":"Do query strings affect CDN caching?","answer":"Yes. Many CDNs include query strings in the cache key by default or through configuration. If /style.css, /style.css?utm_source=linkedin, and /style.css?campaign=spring return the same bytes but are cached separately, the cache hit ratio drops. Ignore irrelevant parameters only for paths where they truly do not change the response."},{"question":"What does s-maxage do?","answer":"s-maxage sets freshness for shared caches such as CDNs and reverse proxies and overrides max-age there. Browsers ignore s-maxage. It is useful when you want a short browser TTL but a longer edge TTL, for example Cache-Control: public, max-age=60, s-maxage=3600."},{"question":"Why can Vary: User-Agent hurt cache hit ratio?","answer":"Vary tells caches which request headers affected the response. User-Agent has many possible values, so Vary: User-Agent can create a large number of cached variants for the same URL. That fragmentation often makes the edge behave cold even when the content is technically cacheable."},{"question":"What does the Age header mean?","answer":"Age is the number of seconds a response has been stored in a cache before being served. A growing Age value is evidence that a cached response is being reused. If Age is absent or always zero on a response you expect to be cached, investigate cacheability, provider behavior, and whether the response is bypassing the shared cache."},{"question":"What is the difference between browser cache and CDN cache?","answer":"The browser cache is private to one user and one device. A CDN cache is a shared cache that can serve the same stored response to many users from an edge location. Browser policy and CDN policy can differ, especially when s-maxage or platform-specific CDN cache headers are used."},{"question":"Should I purge my whole CDN cache after every deploy?","answer":"Usually no. Purge-all workflows make every edge cold at once and can send the next traffic wave back to origin. Prefer versioned static assets, path-based invalidation, cache tags or surrogate keys where supported, and targeted purges for content that actually changed."},{"question":"How do I verify whether my CDN is actually caching?","answer":"Inspect live response headers for representative URLs and repeat the request. Check Cache-Control, Age, Cache-Status if present, and vendor headers such as CF-Cache-Status or X-Vercel-Cache when the platform sends them. Then compare those observations with CDN dashboard metrics such as cache hit ratio over time."}],"relatedSlugs":["http-caching-headers-performance-optimization","lcp-debugging-checklist-modern-frontends","http-security-headers-production-checklist"]},{"slug":"aws-eventbridge-cron-vs-linux-cron-differences","title":"AWS Cron vs Linux Cron: Why the Same Expression Fails in EventBridge","seoTitle":"AWS Cron vs Linux Cron: Why the Same Expression Fails in EventBridge | CodeAva","excerpt":"Moving Linux cron jobs to AWS? Learn why valid crontab expressions fail in EventBridge, how AWS cron fields work, and when to use EventBridge Scheduler for time zones.","date":"2026-04-30","updatedDate":"2026-04-30","readTime":"14 min read","category":"Infrastructure","tags":["AWS cron vs Linux cron","EventBridge cron expression invalid","AWS EventBridge cron 6 fields","EventBridge Scheduler cron timezone","AWS cron question mark wildcard","Linux cron to EventBridge cron","Parameter ScheduleExpression is not valid","EventBridge cron day-of-month day-of-week","Lambda scheduling","DevOps automation"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.38 0.15 230)","to":"oklch(0.58 0.13 160)"},"coverImage":"/blog/linux-cron-vs-eventbridge.jpg","faqs":[{"question":"Why does my Linux cron expression fail in EventBridge?","answer":"A Linux cron expression usually has five fields. AWS EventBridge cron expressions commonly use cron(...) with six fields, including year, and AWS has stricter day-of-month and day-of-week rules. A valid Linux crontab line can fail AWS validation without conversion."},{"question":"How many fields does AWS cron use?","answer":"AWS EventBridge cron expressions use six fields in cron(...): minutes, hours, day-of-month, month, day-of-week, and year. Linux cron commonly uses five fields and does not include the year field."},{"question":"What does ? mean in AWS cron?","answer":"In AWS cron, ? means no specific value for either the day-of-month or day-of-week field. Use it in one day field when the other day field uses * or a specific value, so the expression does not define conflicting day logic."},{"question":"Can I use * in both day-of-month and day-of-week in AWS cron?","answer":"No. AWS cron does not allow * in both the day-of-month and day-of-week fields. If one of those fields uses * or a specific value, use ? in the other field."},{"question":"Does EventBridge run cron schedules in UTC?","answer":"Legacy EventBridge scheduled rules evaluate schedule expressions in UTC. EventBridge Scheduler can evaluate cron-based and one-time schedules in UTC or in an explicit IANA time zone that you configure on the schedule."},{"question":"What is the difference between EventBridge rules and EventBridge Scheduler?","answer":"EventBridge scheduled rules are the older EventBridge scheduling feature. EventBridge Scheduler is the newer scheduling service with support for cron, rate, and one-time schedules, flexible time windows, broader targeting, and explicit schedule time zones."},{"question":"Can EventBridge Scheduler use local time zones?","answer":"Yes. EventBridge Scheduler supports IANA time zones through schedule_expression_timezone or the equivalent AWS Console and API settings. That lets a cron schedule run at a local business time instead of forcing UTC conversion into the expression."},{"question":"How do I convert Linux cron to AWS cron?","answer":"Write the Linux schedule intent in plain English, add the AWS year field, wrap the expression as cron(...), replace one of day-of-month or day-of-week with ?, check AWS-specific wildcards, then preview the next runs in the correct UTC or Scheduler time-zone context."}],"relatedSlugs":["cron-timezones-explained-utc-offset","unix-timestamp-javascript-python-go-php-sql","seconds-vs-milliseconds-timestamp-bug"]},{"slug":"common-canonical-mistakes-nextjs-cms","title":"Common Canonicalisation Mistakes in CMS and Next.js Sites","seoTitle":"Common Canonicalisation Mistakes in CMS and Next.js Sites | CodeAva","excerpt":"Learn the most common canonicalisation mistakes in CMS and Next.js sites, from relative canonicals and query-parameter bloat to redirect conflicts and stale template logic.","date":"2026-04-24","updatedDate":"2026-04-24","readTime":"16 min read","category":"Technical SEO","tags":["canonical","canonicalization","technical-seo","next-js","cms","duplicate-content","metadata","redirect","sitemap","indexing","signal-alignment","headless"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.52 0.20 160)","to":"oklch(0.62 0.16 225)"},"coverImage":"/blog/common-canonicalisation-mistakes.jpg","faqs":[{"question":"What does a canonical tag actually do?","answer":"A canonical tag () tells search engines which URL should be treated as the preferred version when the same or very similar content is accessible at multiple addresses. It is a strong consolidation hint, not a directive — search engines may choose a different canonical if the tag conflicts with other signals such as redirects, internal links, or sitemap entries. The practical goal is to make every major signal agree on the same preferred URL."},{"question":"Should canonical URLs be absolute or relative?","answer":"Absolute. Google technically supports relative canonical URLs but explicitly recommends absolute URLs to prevent ambiguity. Relative canonicals create real risk in staging environments, CMS preview modes, mirrored hosts, and sites served behind reverse proxies where the base URL can change. Always use the full canonical URL including protocol and domain."},{"question":"Can a canonical tag and a redirect conflict?","answer":"Yes, and it is one of the most common canonicalisation mistakes. If page A 301-redirects to page B, but page B’s canonical tag points back to page A, search engines receive contradictory signals about which URL is preferred. The redirect says B is the destination; the canonical says A is preferred. Fix by ensuring the redirect target’s canonical points to itself (or to the same URL the redirect chain resolves to)."},{"question":"Why does Google ignore my canonical tag?","answer":"Google treats canonicals as hints, not commands. Common reasons for overriding a canonical include: the canonical URL is not indexable (noindex, robots.txt-blocked, 4xx/5xx), the content at the canonical URL is significantly different from the page declaring it, other signals (redirects, sitemaps, internal links) contradict the canonical, or the canonical URL itself has a different canonical. Google will pick the URL it considers the true preferred version based on all available signals."},{"question":"How do I set a canonical URL in Next.js App Router?","answer":"In the App Router, set metadataBase in your root layout to define the site’s base URL (e.g. new URL('https://www.example.com')). Then in each page’s generateMetadata or static metadata export, set alternates: { canonical: '/your-path' }. Next.js will resolve the relative path against metadataBase to produce a full absolute canonical URL in the rendered HTML. If metadataBase is missing or wrong, every canonical on the site will be wrong."},{"question":"What is the difference between canonical and redirect?","answer":"A redirect (301 or 308) physically sends the browser and crawlers from URL A to URL B — the user ends up at URL B. A canonical tag on URL A says ‘please index URL B instead of this page’ but the user stays on URL A and the page renders normally. Use redirects when the old URL should no longer exist. Use canonicals when both URLs serve valid content but one is the preferred version for indexing (for example, a filtered view and the unfiltered original)."},{"question":"Do query parameters cause canonical problems?","answer":"Frequently. Tracking parameters (?utm_source, ?ref, ?fbclid), session IDs, sort/filter parameters, and pagination parameters all generate unique URLs that search engines may treat as separate pages. If the canonical tag does not strip those parameters and point to the clean base URL, the site ends up with hundreds or thousands of near-duplicate URLs competing for consolidation. The fix is to canonicalise every parameterised variant back to the parameter-free preferred URL."},{"question":"Should my sitemap URLs match my canonical URLs?","answer":"Yes. Including a URL in the sitemap is a signal that the site considers that URL indexable and preferred. If the sitemap lists URL A but page A’s canonical points to URL B, the signals conflict. The sitemap should list only the canonical (preferred) version of each URL, and the canonical tag on each page should point to itself if it is the preferred version."}],"relatedSlugs":["canonical-tags-javascript-headless-seo","xml-sitemap-best-practices","post-migration-crawlability-audit-checklist"]},{"slug":"http-caching-headers-performance-optimization","title":"How to Use HTTP Caching Headers to Improve Real-World Performance","seoTitle":"How to Use HTTP Caching Headers to Improve Real-World Performance | CodeAva","excerpt":"Learn how to use Cache-Control, ETag, Last-Modified, stale-while-revalidate, and shared-cache directives to improve real-world performance without breaking freshness.","date":"2026-04-24","updatedDate":"2026-04-24","readTime":"18 min read","category":"Web Performance","tags":["http-caching","cache-control","performance","cdn","browser-cache","etag","last-modified","stale-while-revalidate","immutable","s-maxage","static-assets","web-performance"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.56 0.18 30)","to":"oklch(0.64 0.14 70)"},"coverImage":"/blog/web-performance-caching.jpg","faqs":[{"question":"What is the difference between no-cache and no-store?","answer":"no-cache allows the browser (or any cache) to store a copy of the response, but it must revalidate with the origin server before reusing it. The stored copy is never served directly without a round trip. no-store tells caches not to store any copy of the response at all — every request goes to the origin. Use no-cache for content that may change and needs freshness checks; use no-store for sensitive or highly personalised responses that must never be retained."},{"question":"Does Cache-Control: max-age=0 mean the same thing as no-cache?","answer":"Functionally they are very similar: both allow the response to be stored but require revalidation before reuse. The difference is subtle. max-age=0 means the response is immediately stale, so the cache must revalidate. no-cache explicitly requires revalidation regardless of freshness. In practice most implementations treat them the same way, but no-cache is the clearer signal if revalidation is what you want."},{"question":"When should I use immutable?","answer":"Use immutable on responses whose content will never change at a given URL. The most common case is fingerprinted static assets: JS bundles, CSS files, fonts, and images whose filenames include a content hash (e.g. app.3f8a2c.js). Since the filename changes whenever the content changes, the old URL is never requested again, making it safe to cache indefinitely. Do not use immutable on URLs whose content can change without a URL change, such as HTML pages or unversioned API endpoints."},{"question":"What does stale-while-revalidate actually do?","answer":"After a cached response becomes stale (past its max-age), stale-while-revalidate allows the cache to serve the stale copy to the current request immediately while simultaneously fetching a fresh copy from the origin in the background. The next request after the background revalidation completes will receive the fresh response. This improves perceived performance because the user never waits for the revalidation round trip, but it means the user may occasionally see slightly stale content."},{"question":"What is the difference between max-age and s-maxage?","answer":"max-age sets the freshness lifetime for all caches, including the browser’s private cache. s-maxage overrides max-age specifically for shared caches (CDNs, reverse proxies). This lets you set a short max-age for the browser (so users revalidate often) and a longer s-maxage for the CDN (so the CDN absorbs most origin traffic). For example, Cache-Control: max-age=60, s-maxage=3600 means browsers revalidate after 60 seconds but the CDN serves its cached copy for up to an hour."},{"question":"Should I use ETag or Last-Modified?","answer":"Use ETag when you need byte-level precision or when the resource does not have a meaningful modification timestamp. Use Last-Modified when the server reliably tracks file modification times. Many servers send both. If only one is available, ETag is generally more reliable because Last-Modified has only second-level granularity and can be inaccurate for dynamically generated responses. Both enable conditional requests (If-None-Match for ETag, If-Modified-Since for Last-Modified) that reduce transfer size when the content has not changed."},{"question":"Can I cache HTML pages aggressively?","answer":"Usually not. HTML documents often contain personalised content, CSRF tokens, dynamic state, or references to the latest versioned assets. Caching HTML aggressively risks serving stale content, outdated asset references, or leaked personalisation. A common pattern is Cache-Control: no-cache (or max-age=0, must-revalidate) with an ETag or Last-Modified header, so the browser always revalidates but can receive a fast 304 if nothing changed."},{"question":"How do I verify what cache headers my server is sending?","answer":"Use browser DevTools (Network tab → select request → Headers panel), curl -I , or an online tool like the CodeAva HTTP Headers Checker. Check both the Cache-Control header and any validator headers (ETag, Last-Modified). Also check whether a CDN is adding or overriding headers by comparing origin responses with edge responses."}],"relatedSlugs":["lcp-debugging-checklist-modern-frontends","http-security-headers-production-checklist","cors-errors-preflight-credentials-misconfigurations"]},{"slug":"no-floating-promises-vs-no-misused-promises","title":"no-floating-promises vs no-misused-promises: When to Use Each","seoTitle":"no-floating-promises vs no-misused-promises: When to Use Each | CodeAva","excerpt":"TypeScript types do not protect your async lifecycle. Learn the difference between floating promises and misused promises, and when each ESLint rule should catch them.","date":"2026-04-24","readTime":"16 min read","category":"TypeScript","tags":["typescript","eslint","no-floating-promises","no-misused-promises","async-await","promises","static-analysis","node-js","checksVoidReturn","ignoreVoid"],"authorId":"gareth-whitbey","coverGradient":{"from":"oklch(0.42 0.18 280)","to":"oklch(0.58 0.14 330)"},"coverImage":"/blog/linting-comparison-ui-flowchart-design.jpg","faqs":[{"question":"What is the difference between no-floating-promises and no-misused-promises?","answer":"no-floating-promises catches Promise-valued statements that are created and then left unhandled — no await, no return, no .catch(), no void. no-misused-promises catches Promises that are passed into positions where they cannot be properly handled, such as conditionals, forEach callbacks, or slots expecting void-returning functions. One rule is about ignored Promises; the other is about Promises in the wrong place. They are complementary."},{"question":"Should I enable both rules?","answer":"Yes. The two rules cover different classes of async bugs with almost no overlap. no-floating-promises catches statements like save() without await. no-misused-promises catches patterns like items.forEach(async item => ...) where the callback contract cannot observe the Promise. Enabling both gives you the broadest async safety coverage."},{"question":"Is void someAsyncCall() actually safe?","answer":"void satisfies the no-floating-promises rule by marking the fire-and-forget intent as explicit. But void itself does not catch or log errors. If the async call rejects, that rejection is still unhandled at runtime. Teams should reserve void for paths where failure is genuinely acceptable and where error handling exists elsewhere, such as a global unhandledrejection listener or background-job retry logic."},{"question":"Why is forEach(async ...) a problem?","answer":"Array.prototype.forEach expects a callback that returns void. If you pass an async function, forEach receives a Promise from each invocation but ignores it. The loop does not await the callbacks, errors are silently lost, and all iterations run concurrently rather than sequentially. Use for...of with await for sequential execution, or Promise.all(items.map(async ...)) for controlled concurrency."},{"question":"What does checksVoidReturn do?","answer":"checksVoidReturn is an option on no-misused-promises that controls whether the rule reports async functions passed into callback positions that expect a void return. When enabled (the default), it catches patterns like element.addEventListener('click', async () => ...) and array.forEach(async ...). You can disable it or fine-tune it per-context (arguments, attributes, properties, variables) if specific patterns are acceptable in your codebase."},{"question":"What does ignoreVoid do?","answer":"ignoreVoid is an option on no-floating-promises that controls whether the void operator suppresses the lint error. When enabled (the default), writing void trackEvent() tells the linter the fire-and-forget is intentional. When disabled, every floating Promise must be handled with await, return, or .catch(). Most teams keep ignoreVoid enabled and reserve void for documented fire-and-forget paths."},{"question":"Can TypeScript catch floating promises without ESLint?","answer":"No. The TypeScript compiler checks types, not async lifecycle correctness. A function that returns Promise can be called without await and still type-check. Floating promises are type-safe but operationally unsafe. You need ESLint with @typescript-eslint and type-aware linting to detect them."},{"question":"When should I use Promise.all instead of for...of?","answer":"Use Promise.all(items.map(async ...)) when the operations are independent and you want maximum concurrency. Use for...of with await when operations must run sequentially, such as ordered database migrations or rate-limited API calls. Both patterns make the async intent explicit and prevent the lost-Promise problem that forEach(async ...) creates."}],"relatedSlugs":["unhandled-promises-typescript-production-bugs","static-analysis-for-typescript","return-await-typescript-when-it-matters"]},{"slug":"why-open-graph-image-not-updating","title":"Why Your Open Graph Image Still Isn’t Updating on LinkedIn, Slack, and Facebook","seoTitle":"Why Your Open Graph Image Still Isn’t Updating on LinkedIn, Slack, and Facebook | CodeAva","excerpt":"Updated your social preview image but still seeing the old one? Learn how platform caches, CDN caching, and OG image URLs affect LinkedIn, Slack, and Facebook previews.","date":"2026-04-23","updatedDate":"2026-04-23","readTime":"16 min read","category":"Technical SEO","tags":["open-graph","social-sharing","og-image","metadata","caching","cdn","linkedin","slack","facebook","twitter","debugging","technical-seo"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.60 0.22 340)","to":"oklch(0.52 0.18 260)"},"coverImage":"/blog/og-image-caching-issue.jpg","faqs":[{"question":"Why is my Open Graph image not updating on LinkedIn?","answer":"LinkedIn scrapes and caches metadata at the URL level. If you have updated the og:image without changing its URL, LinkedIn may continue to serve the previously cached preview. LinkedIn provides the Post Inspector, which re-fetches the page metadata and updates the preview used for new shares of that URL. LinkedIn has documented that refreshed previews apply to future posts, not to posts that already used an older preview. For deterministic updates, change the og:image URL or append a version parameter."},{"question":"How long does Slack cache a link preview?","answer":"Slack caches link-expansion metadata at the workspace network level for roughly 30 minutes. After that window elapses, the next time someone shares the link Slack will re-fetch the page and update the preview. To force an earlier refresh in your own message, edit the message so the unfurl is re-processed, delete and re-paste the link, or change the URL (for example by appending a cache-busting query parameter) so Slack treats it as a new link."},{"question":"How do I refresh a Facebook link preview?","answer":"Use the Meta (Facebook) Sharing Debugger. Paste the URL, click Debug to see the currently cached Open Graph data, and click ‘Scrape Again’ to ask Facebook to re-fetch the page and update its cached preview. Subsequent shares of that exact URL should reflect the refreshed metadata. Existing posts that already used an older preview will not update retroactively — the cache refresh applies to new shares of the URL."},{"question":"Does changing og:image tag alone update social previews?","answer":"Not always. If the HTML tag now points at a new image URL, platforms will pick it up the next time they re-scrape. If the HTML tag still points at the same URL but the underlying image file has changed, platforms relying on their cached copy may continue to serve the old image until they re-scrape or the cache expires. The two reliable strategies are: change the og:image URL (rename the file or append a version parameter), or trigger a re-scrape through each platform’s debugger where available."},{"question":"Should I use a version parameter on my og:image URL?","answer":"It is one of the most reliable fixes for stale social previews. Appending a query parameter such as ?v=2 or including a content hash in the filename produces a new URL, which social scrapers generally treat as a new resource. Combine that with a platform re-scrape where possible (LinkedIn Post Inspector, Facebook Sharing Debugger) and the update is close to deterministic. Keep the version parameter stable once published so you do not churn previews on every deploy."},{"question":"What Open Graph image size works on most platforms?","answer":"A 1200×630 pixel image (1.91:1 aspect ratio) is the broadly recommended dimension that works well across Facebook, LinkedIn, Twitter/X summary_large_image cards, and Slack. Keep the file under a few megabytes, use JPEG or PNG for maximum compatibility, serve it over HTTPS at an absolute URL, and make sure the image is publicly reachable without authentication or redirects. Exotic formats, very small images, and relative URLs are common sources of broken or fallback previews."},{"question":"Why does my og:image load in the browser but not show on social?","answer":"Social scrapers are not browsers. They fetch without your cookies, without your CDN session, sometimes from specific IP ranges, and often with strict timeouts. Common causes: the image URL is relative rather than absolute, the image requires authentication, the CDN or origin returns different responses based on user-agent or IP, the response is slow or intermittently 5xx, or the image is blocked by a WAF or bot-management rule. Inspect what a live server-side fetch actually returns, not what renders in your browser."},{"question":"Does clearing my browser cache fix a stale social preview?","answer":"No. Social previews are controlled by the platform’s own scraper cache — LinkedIn, Slack, Facebook, Twitter/X each maintain their own — not by your browser. Clearing your browser cache has zero effect on what those platforms show other users. Fix the cache that actually matters: the platform’s scraper cache, the CDN cache in front of your page, and, if the image URL did not change, the URL itself."}],"relatedSlugs":["google-rewrites-title-meta-description","canonical-tags-javascript-headless-seo","schema-org-vs-google-rich-results-json-ld"]},{"slug":"sentence-case-vs-title-case-ui-standards","title":"Title Case vs Sentence case vs camelCase: When Each Format Is Actually Correct","seoTitle":"Title Case vs Sentence case vs camelCase: When Each Format Is Actually Correct | CodeAva","excerpt":"Stop mixing casing in your UI. Learn when sentence case, title case, and camelCase are actually appropriate in design systems, content, code, and URLs.","date":"2026-04-23","updatedDate":"2026-04-23","readTime":"15 min read","category":"Design Systems","tags":["design-systems","ui-writing","capitalization","text-case","sentence-case","title-case","camel-case","kebab-case","accessibility","readability","content-design","frontend"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.65 0.18 70)","to":"oklch(0.48 0.20 300)"},"coverImage":"/blog/typography-uistyle-comparison.jpg","faqs":[{"question":"Is sentence case better than title case for UI?","answer":"Sentence case is the safer default for most UI copy in modern design systems — buttons, labels, menu items, dialogs, toasts, helper text, and short navigation labels. It reads more conversationally, localises more predictably, and avoids the complexity of per-word capitalisation rules. Title case is still valid in editorial contexts, page titles, SEO metadata, marketing headlines, and some platform-specific components. The right answer is whichever your design system explicitly codifies — what hurts users is inconsistency across surfaces, not the choice itself."},{"question":"When should I use title case?","answer":"Use title case when a string is genuinely a title or heading: article and blog post H1s, HTML tags, SEO title tags, marketing hero headlines, report and document titles, and brand- or product-level headings. Some design systems also use title case for top-level navigation or section headings — that is a legitimate choice, but it should be an explicit system rule, not a per-screen improvisation."},{"question":"Should buttons use sentence case or title case?","answer":"Sentence case is the dominant modern choice for buttons across most design systems, including Material and current Microsoft guidance. It reads as an action phrase rather than a headline, scales across languages more predictably, and sidesteps the rule debates of title case. The important rule is consistency: pick one and apply it to every button in the product."},{"question":"Is camelCase appropriate in visible UI labels?","answer":"Generally no. camelCase belongs to code — JavaScript variables, JSON keys, prop names, internal identifiers. When camelCase leaks into visible UI labels (customerID, invoiceStatus, apiKey) it signals that the product is exposing raw technical identifiers instead of human-facing copy. The fix is to separate internal keys from presentation strings: the key in code stays camelCase, but the label shown to users becomes ‘Customer ID’, ‘Invoice status’, or ‘API key’."},{"question":"Why is ALL CAPS bad for accessibility?","answer":"ALL CAPS removes letter-shape cues that many readers rely on for scanning, reduces readability for users with dyslexia and low vision, and can be interpreted as shouting. Some screen readers or text-to-speech pipelines may also spell out short all-caps strings letter by letter instead of reading them as words — behaviour varies across engines. Use ALL CAPS sparingly, typically for short styled labels, not for running UI copy."},{"question":"What is the difference between camelCase and kebab-case?","answer":"camelCase joins words with no separator and capitalises every word after the first (userAccountId). kebab-case joins words with hyphens and is all lowercase (user-account-id). camelCase is used in code identifiers (JavaScript variables, JSON keys, React props). kebab-case is used in URL slugs, CSS class names, HTML attributes, and command-line flags. They are not interchangeable — mixing them across layers is one of the most common sources of bugs at API and routing boundaries."},{"question":"Should SEO title tags follow the same rules as UI labels?","answer":"No. SEO title tags are editorial titles that appear on search-result listings and in the browser tab — title case is a perfectly valid and common choice, even for products whose UI uses sentence case. The rule your design system should codify is: UI labels follow the UI standard, and <title>, Open Graph title, and Twitter card title follow the editorial standard. They can be different, and they frequently are."},{"question":"How do design systems standardize capitalization?","answer":"The mature approach is: pick an explicit default for UI copy (usually sentence case), list the exceptions where title case applies (page titles, SEO metadata, marketing hero headlines, specific platform-native components), keep technical casing (camelCase, kebab-case, snake_case) out of visible labels, document exceptions for brand and product names, and normalise imported or migrated strings before they reach the UI. The system rule lives in the design-system documentation, and content QA or linting enforces it where possible."}],"relatedSlugs":["hyphens-vs-underscores-urls-seo","google-rewrites-title-meta-description","accessible-custom-select-date-picker-autocomplete"]},{"slug":"cls-issues-fonts-ads-hydration","title":"CLS Issues Caused by Fonts, Ads, and Hydration","seoTitle":"CLS Issues Caused by Fonts, Ads, and Hydration | CodeAva","excerpt":"Is your layout jumping unexpectedly? Learn how to fix Cumulative Layout Shift caused by web fonts, unreserved ad slots, and hydration mismatches in modern frontends.","date":"2026-04-22","readTime":"15 min read","category":"Web Performance","tags":["CLS","core-web-vitals","cumulative-layout-shift","web-fonts","ads","hydration","visual-stability","performance","react","nextjs","frontend-debugging"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.62 0.18 40)","to":"oklch(0.52 0.20 310)"},"coverImage":"/blog/cls-issues.jpg","faqs":[{"question":"What causes CLS on modern websites?","answer":"On modern sites, the three most common causes of Cumulative Layout Shift are web fonts that reflow text when the fallback is swapped for the final font, ads or embeds injected into containers without reserved space, and hydration or post-render UI changes that move content already visible to the user. Images without width and height still contribute, but they are no longer the only culprit worth auditing."},{"question":"Can fonts cause CLS?","answer":"Yes. When a fallback system font has different metrics from the final web font, text reflows the moment the web font loads, pushing surrounding content. font-display: swap keeps text visible but does not prevent the shift. The reliable fix is to align fallback and final font metrics using size-adjust, ascent-override, descent-override, and line-gap-override on a tuned @font-face fallback, so the swap does not change the rendered size of text blocks."},{"question":"Why do ads and embeds create layout shift?","answer":"Ads, iframes, and third-party widgets arrive asynchronously and are often injected into containers whose height is decided only after the response returns. If the surrounding layout does not reserve space in advance, visible content is pushed down as soon as the slot fills. Reserving space with fixed dimensions, aspect-ratio, or a min-height equal to the expected size eliminates the shift regardless of when the ad arrives."},{"question":"Can hydration cause CLS in React or Next.js apps?","answer":"Yes. The server-rendered HTML may look stable, but once the client hydrates, app state, auth-dependent UI, cookie banners, personalized blocks, or client-only measurements can alter layout after the user has already seen the page. Those shifts count as unexpected and contribute to CLS. The fix is to keep layout consistent between server and client output and to reserve space for any UI that mounts only after hydration."},{"question":"What is the best way to reserve space for ads?","answer":"Wrap the ad or embed in a container that has a committed size before the ad loads. Use fixed width and height attributes, aspect-ratio on the container, or a min-height equal to the tallest likely creative for that slot. Render a placeholder or skeleton while the ad is pending so the space is visually committed, and avoid collapsing the container if no ad arrives."},{"question":"How do I debug layout shifts in Chrome DevTools?","answer":"Open DevTools, enable Layout Shift Regions in the Rendering panel to see shifts highlighted on the page as they happen, then record a Performance trace on a cold reload. In the trace, look for the Experience track for layout-shift entries, expand each one to see the affected node, and check the Network or Main track to identify the resource or script that triggered the shift. The Performance Insights panel also groups layout shifts with a direct link to the element and its cause."},{"question":"Why does CLS look worse in field data than locally?","answer":"Lab runs usually use a single device profile, a warm cache, and a controlled network, so delayed fonts, ads, and late scripts often resolve before they can produce a visible shift. Real users see slower networks, cold caches, variable ad fill timing, and post-load interactions that trigger client-only UI changes. Field CLS captures the full session window, including shifts that happen after the initial load where most real-world instability lives."},{"question":"What is a good CLS score?","answer":"Google considers a CLS of 0.1 or less to be good and anything above 0.25 to be poor at the 75th percentile of page views. CLS is calculated from the largest burst of unexpected shifts within a session window, so a single bad moment, such as a late font swap or a cookie banner insertion, can push an otherwise stable page into the poor range."}],"relatedSlugs":["lcp-debugging-checklist-modern-frontends","finding-inp-bottlenecks-production","core-web-vitals"]},{"slug":"post-migration-crawlability-audit-checklist","title":"How to Audit Crawlability After a Site Migration","seoTitle":"How to Audit Crawlability After a Site Migration | CodeAva","excerpt":"Just moved to a new domain or architecture? Learn how to audit crawlability, fix redirect chains, align canonicals, and help search engines discover your new site structure safely.","date":"2026-04-22","updatedDate":"2026-04-22","readTime":"17 min read","category":"Technical SEO","tags":["site-migration","crawlability","technical-seo","redirects","sitemap","robots-txt","canonical-tags","search-console","indexing","soft-404","post-launch-audit"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.48 0.18 160)","to":"oklch(0.42 0.20 225)"},"coverImage":"/blog/website-audit-dashboard.jpg","faqs":[{"question":"How do you audit crawlability after a site migration?","answer":"Treat it as four pillars plus monitoring. Verify that every old URL returns a permanent server-side redirect to its best new equivalent, confirm the new XML sitemap contains only canonical 200-status URLs, check that robots.txt actually allows the new structure to be crawled, and confirm that canonicals, internal links, sitemaps, and redirects all point to the same preferred URLs. Then watch Search Console for not-found spikes, soft 404s, duplicate-without-user-selected-canonical entries, and sitemap submission issues in the weeks after launch."},{"question":"Should I use 301 or 302 redirects after a migration?","answer":"Use 301 (or 308) for permanent moves. A 302 or 307 tells search engines the move is temporary and can delay consolidation of ranking signals onto the new URL. If the old URL will never come back, the redirect must be permanent. The only legitimate reasons to use a temporary redirect during a migration are short-term rollback plans or A/B tests — neither of which describes the steady-state post-launch configuration."},{"question":"Why are homepage redirects a bad migration strategy?","answer":"Redirecting large numbers of old URLs to the homepage looks convenient but is one of the most damaging post-migration patterns. The homepage is almost never a meaningful replacement for a product page, article, or category. Google can treat irrelevant redirects like soft 404s, which weakens consolidation of ranking signals and slows recovery. If a retired URL has no meaningful replacement, a real 404 or 410 is usually a cleaner answer than a misleading redirect."},{"question":"What should be in the sitemap after a migration?","answer":"Only canonical, indexable URLs that return a 200 status. Remove anything that redirects, 404s, is blocked by robots.txt, has noindex set, or is a duplicate of another canonical URL. The new sitemap should be a clean list of the destinations you want search engines to index. A dirty sitemap full of redirected or non-canonical URLs slows discovery and adds noise to Search Console coverage reports."},{"question":"Can robots.txt break crawlability after launch?","answer":"Yes, and it is one of the most common post-migration incidents. Teams ship with staging rules still active (Disallow: /), add overly broad Disallow patterns for new faceted paths that also match important templates, forget to update the Sitemap directive, or move the file and break the path. Always validate the live production robots.txt against the intended crawl policy immediately after launch and whenever infrastructure changes."},{"question":"Why are old-domain canonicals dangerous after a migration?","answer":"If the new URLs canonicalize to the old domain or old URL format, you are telling search engines that the old URLs are the preferred ones. That conflicts with the redirects from old to new and creates mixed signals that delay consolidation. On the new site, canonicals should usually self-reference the preferred new URL, reinforcing the same destination declared by redirects, internal links, and the sitemap."},{"question":"What is a soft 404 in a migration context?","answer":"A soft 404 is a URL that returns a 200 (or redirects to a 200) but does not meaningfully satisfy the request — typically an old, removed product redirected to the homepage or a generic category. Google classifies these as effectively not-found because the response is not a real replacement for the original intent. Soft 404s are a common side effect of lazy 'redirect everything to the homepage' migration plans."},{"question":"What should I monitor in Search Console after a migration?","answer":"Verify both old and new properties where relevant. Watch the Page Indexing report for spikes in not-found (404), soft 404, server errors, redirect errors, and 'duplicate without user-selected canonical'. Check sitemap submission status and the number of submitted vs indexed URLs. Use URL Inspection to live-test representative templates. Watch the Crawl Stats report for unusual response-time patterns during the transition. Keep this monitoring active for several weeks — consolidation is not instant."}],"relatedSlugs":["robots-txt-mistakes-blocking-seo","xml-sitemap-best-practices","canonical-tags-javascript-headless-seo"]},{"slug":"accessible-custom-select-date-picker-autocomplete","title":"Accessibility Mistakes in Custom Selects, Date Pickers, and Autocomplete Fields","seoTitle":"Accessibility Mistakes in Custom Selects, Date Pickers, and Autocomplete Fields | CodeAva","excerpt":"Are your custom form controls a keyboard trap? Learn the accessibility mistakes that break custom selects, date pickers, and autocomplete fields in modern web apps.","date":"2026-04-22","updatedDate":"2026-04-22","readTime":"18 min read","category":"Accessibility","tags":["accessibility","a11y","aria","combobox","listbox","custom-select","date-picker","autocomplete","keyboard-navigation","focus-management","wcag","design-systems"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.45 0.22 290)","to":"oklch(0.58 0.18 195)"},"coverImage":"/blog/accessibility-design-guide.jpg","faqs":[{"question":"Are custom selects less accessible than native selects?","answer":"They usually start that way. Native <select> ships with full keyboard support, focus behavior, platform-native popup UI, and screen-reader semantics for free. Any custom replacement has to rebuild all of that behavior deliberately. A well-engineered custom select can reach parity, but it raises the engineering bar significantly — and most shipped custom selects are missing at least one of: focus management, active-option exposure, predictable keyboard model, or assistive-tech announcements."},{"question":"What is the difference between a select, listbox, and combobox?","answer":"A native <select> is a form control that pops up a list of options. A listbox is the ARIA role for a non-editable list of selectable options. A combobox is an input (or button) that controls a popup — the popup can be a listbox, grid, tree, or dialog, and the input may be editable (autocomplete) or read-only (a select replacement that uses the combobox pattern). They are not interchangeable. Putting role=\"menu\" on any of these is wrong — menus are for application commands, not form values."},{"question":"Should a custom date picker allow manual typing?","answer":"Almost always yes. Many users can type a date faster and more reliably than navigating a calendar with a mouse, including screen-reader users, keyboard users, and users with motor impairments. Disabling manual entry to force the calendar UI is one of the most common and most damaging accessibility mistakes in date pickers. Parse and validate typed input instead; the calendar popup should be a complementary affordance, not the only path."},{"question":"What is aria-activedescendant used for in autocomplete?","answer":"aria-activedescendant lets DOM focus stay in the input while the component indicates which option in the popup is 'active' by referencing its id. This is the standard pattern for editable comboboxes and autocomplete fields, because moving DOM focus into the listbox would break typing. The active option must have a visible indicator, and the aria-activedescendant value must always point at an element that actually exists in the open popup."},{"question":"Do autocomplete fields need to announce result counts?","answer":"They need to expose result availability in some accessible way. A polite live region that announces 'N results available' or 'No results' when the list updates is a common, robust solution. It is not the only one — the combobox itself carries aria-expanded, and the listbox exposes options to assistive tech — but for dynamic, typing-driven results, a status message prevents users from typing into silence when suggestions change or disappear."},{"question":"Should focus move into the popup list for a combobox?","answer":"It depends on the pattern. For an editable combobox (autocomplete), DOM focus stays in the input and the active option is tracked with aria-activedescendant so the user can keep typing. For a select-only combobox that uses a listbox popup, focus may move into the listbox. Either is valid when implemented consistently with a recognised ARIA pattern — what breaks accessibility is mixing the two, or moving focus in ways the user cannot predict or recover from."},{"question":"When should I use a native control instead of a custom one?","answer":"Whenever native satisfies the product requirement. Native <select>, <input type=\"date\">, and <input type=\"text\"> with a datalist come with accessibility, keyboard, and platform UX for free, and they update automatically as browsers improve. Build a custom control only when the product genuinely needs behavior the native element cannot provide — rich option rendering, async search, multi-select with tags, or custom validation flows — and commit to maintaining the keyboard, focus, and announcement logic for the lifetime of the component."},{"question":"How do I test a custom form control for keyboard accessibility?","answer":"Unplug the mouse. Reach the control with Tab, open it with Enter or Space or the arrow key the pattern expects, navigate options with arrow keys, commit a selection with Enter, and dismiss with Escape. Confirm focus is always visible, confirm focus returns somewhere logical after the popup closes, and confirm the active option is exposed (visually and to a screen reader). Then run the same checks with a screen reader in a real user flow, not just an isolated component demo."}],"relatedSlugs":["accessible-tabs-accordions-menus-aria-guide","accessible-react-modal-focus-management","keyboard-navigation-testing-checklist-web-apps"]},{"slug":"canonical-tags-javascript-headless-seo","title":"Canonical Tags for JavaScript & Headless Websites","seoTitle":"Canonical Tags for JavaScript & Headless Websites | CodeAva","excerpt":"Are your React, Vue, or headless pages creating duplicate-content issues? Learn how canonical tags should work in SSR and JavaScript environments, and how to avoid conflicting signals.","date":"2026-04-18","readTime":"15 min read","category":"Technical SEO","tags":["canonical-tags","javascript-seo","headless","react","nextjs","ssr","csr","duplicate-content","hreflang","indexing"],"authorId":"gareth-whitbey","coverGradient":{"from":"oklch(0.38 0.14 220)","to":"oklch(0.55 0.16 190)"},"coverImage":"/blog/js-cannonical-tags.jpg","faqs":[{"question":"Can canonical tags be set with JavaScript?","answer":"Yes, but with important caveats. Google can process JavaScript-set canonicals, but the safest and most predictable approach is to emit the canonical in the initial HTML response. If you must set it with JavaScript, make sure it does not conflict with a different canonical already in the server-rendered HTML. Conflicting canonicals weaken the signal."},{"question":"Should canonical URLs be absolute or relative?","answer":"Google supports both, but absolute URLs are strongly recommended, especially for headless and multi-environment architectures. Absolute URLs eliminate ambiguity about scheme, host, and path, and they avoid accidental leakage of preview, staging, or CDN origins into the canonical signal."},{"question":"What happens if the server HTML canonical and the client-side canonical disagree?","answer":"Google treats conflicting canonical signals as unclear and may choose a different canonical than either value. This commonly produces \"Duplicate, Google chose different canonical than user\" or similar messages in Search Console. The fix is to ensure the final canonical is consistent: emit the correct one in HTML, or omit it in HTML and set one clean value on the client."},{"question":"Do canonical tags guarantee that a URL will be indexed?","answer":"No. Canonical tags are a strong hint, not a command. Google combines canonical signals with redirects, internal linking, sitemap entries, hreflang groupings, and page similarity to decide which URL to index. A canonical tag can be ignored if other signals contradict it or if the target URL is blocked, redirected, or considered low quality."},{"question":"How do canonical tags interact with hreflang?","answer":"Canonical and hreflang must agree. Each localised URL in an hreflang cluster should be self-canonical — the canonical for the English page points to the English URL, the canonical for the German page points to the German URL, and so on. Pointing every language variant to a single canonical breaks the hreflang relationship and can drop alternate-language pages from search."},{"question":"Why does my headless site have so many duplicate-canonical issues?","answer":"Headless architectures produce more URL variants than traditional sites: trailing-slash inconsistencies, query parameters, preview domains, CDN origins, locale paths, faceted navigation, and staging environments often all resolve to similar content. Without careful routing and canonical discipline, these variants are easy to create and hard to collapse."},{"question":"Is checking the rendered DOM enough to confirm the canonical?","answer":"No. The rendered DOM shows what the browser sees after JavaScript runs. Search engines, crawlers, and shared-link previewers may read the raw HTML response first. Always verify the canonical in View Source (the raw response) in addition to checking the rendered DOM in Inspect Element."},{"question":"Should I rely on canonicals to solve duplicate-content problems?","answer":"Canonicals should be part of the strategy, not the whole strategy. Redirects, consistent internal linking, disciplined URL design, proper query-parameter handling, and clean sitemaps all reinforce the canonical signal. A canonical tag layered on top of messy URL architecture is much weaker than a canonical tag that agrees with every other signal on the site."}],"relatedSlugs":["crawled-currently-not-indexed-fixes","discovered-currently-not-indexed-fix","xml-sitemap-best-practices"]},{"slug":"cors-errors-preflight-credentials-misconfigurations","title":"CORS Errors Explained: Preflight Requests, Credentials, and Common Misconfigurations","seoTitle":"CORS Errors Explained: Preflight Requests, Credentials, and Common Misconfigurations | CodeAva","excerpt":"Trapped by the dreaded CORS error? Learn how preflight requests work, why credentials break wildcard policies, and how to fix common cross-origin misconfigurations.","date":"2026-04-18","readTime":"17 min read","category":"Web Development","tags":["CORS","preflight","cross-origin","browser-security","http-headers","fetch","credentials","api-debugging","same-origin-policy"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.36 0.18 30)","to":"oklch(0.55 0.18 60)"},"coverImage":"/blog/cors-errors-explained.jpg","faqs":[{"question":"What is CORS actually protecting?","answer":"CORS protects users, not servers. It is a browser-enforced mechanism that limits what scripts on one origin are allowed to read from another origin in the user's authenticated browser context. It does not stop curl, Postman, backend jobs, or direct server-to-server calls. Your API still needs authentication, authorisation, and CSRF protection — CORS does not replace any of them."},{"question":"What counts as a different origin?","answer":"Origin is the combination of scheme, host, and port. https://app.example.com and https://api.example.com are different origins, http://example.com and https://example.com are different origins, and https://example.com and https://example.com:8443 are different origins. Any difference in any of the three parts makes the request cross-origin."},{"question":"When does the browser send a preflight OPTIONS request?","answer":"The browser preflights a cross-origin request when it is not a \"simple\" request — for example, when the method is PUT, PATCH, or DELETE, when the request includes non-safelisted headers like Authorization or custom X- headers, or when the Content-Type is something like application/json. The browser sends an OPTIONS request first to check whether the server allows the intended method and headers."},{"question":"Why does Access-Control-Allow-Origin: * stop working with credentials?","answer":"When a request is made with credentials (cookies or HTTP auth via the browser's credential mechanism), the server cannot respond with a wildcard origin. The browser will reject the response. With credentials, Access-Control-Allow-Origin must be a specific origin, and Access-Control-Allow-Credentials must be true. The same restriction applies to Access-Control-Allow-Methods and Access-Control-Allow-Headers — wildcards are not honoured for credentialed requests."},{"question":"Is an Authorization header treated as credentials by the browser?","answer":"Not automatically. A bearer token manually set in an Authorization header is a custom header, not browser-managed credentials. It does not require credentials: 'include' on fetch, and it does not force the credentialed-origin rules on its own. However, Authorization is not safelisted, so including it will typically trigger a preflight that must allow the Authorization header in Access-Control-Allow-Headers."},{"question":"Why does my CORS config work locally but fail in production?","answer":"A reverse proxy, CDN, API gateway, or WAF between your application and the browser is almost certainly mutating or stripping headers. Your app may be setting Access-Control-* headers correctly, but an upstream layer can remove them, duplicate them, or override them. Inspect the response headers the browser actually receives from the live URL, not the ones your application code intends to send."},{"question":"Can I fix a CORS error by calling the API from the backend instead?","answer":"Yes. CORS only applies to browser-initiated cross-origin requests from script contexts. If your frontend calls your own backend, and your backend calls the third-party API server-side, there is no CORS involved. This is a legitimate architecture for APIs that cannot or will not enable browser-side cross-origin access."},{"question":"Why does the browser say \"blocked by CORS\" even when the API returns a 200?","answer":"The response may arrive successfully at the network layer, but if the required Access-Control-* headers are missing or incorrect, the browser will not expose the response body to the script. The actual fetch will reject and the console logs a CORS error. This is expected behaviour — the data may exist, but the browser treats it as unreadable by the script without explicit cross-origin permission."}],"relatedSlugs":["http-security-headers-production-checklist","unhandled-promises-typescript-production-bugs"]},{"slug":"keyboard-navigation-testing-checklist-web-apps","title":"Keyboard Navigation Testing Checklist for Web Apps","seoTitle":"Keyboard Navigation Testing Checklist for Web Apps | CodeAva","excerpt":"Throw away your mouse. Learn how to test web apps for keyboard accessibility, focus order, visible focus states, skip links, and modal containment.","date":"2026-04-18","readTime":"15 min read","category":"Accessibility","tags":["accessibility","keyboard-navigation","focus-management","WCAG","QA","manual-testing","a11y","modal","tablist","skip-link"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.36 0.16 260)","to":"oklch(0.55 0.14 220)"},"coverImage":"/blog/keyboard-navigation-bug.jpg","faqs":[{"question":"How do you test keyboard navigation on a website?","answer":"Stop using the mouse. Starting from the top of the page, press Tab repeatedly and observe whether every interactive element is reachable and has a clearly visible focus indicator. Activate controls with Enter and Space where appropriate, use arrow keys inside composite widgets like tabs and menus, and open overlays to confirm focus is trapped inside them and returned on close. Repeat on your most important pages and flows."},{"question":"What is the first thing to check in keyboard accessibility?","answer":"Focus visibility. If you cannot see which element currently has focus while tabbing through the page, keyboard navigation is effectively broken regardless of how well-labelled or semantic the rest of the markup is. The browser default focus ring is a reasonable baseline, and any custom focus style must be obviously visible against every background on the page."},{"question":"Why is visible focus so important?","answer":"Keyboard users rely on the focus indicator to know where they are on the page. Hiding the outline with outline: none and not replacing it with an accessible equivalent makes the app unusable without a mouse. WCAG requires a visible focus indicator specifically because users cannot operate what they cannot see."},{"question":"What is a skip link and how do I test it?","answer":"A skip link lets keyboard users bypass repetitive navigation and jump directly to the main content. To test it, load the page fresh and press Tab once. A \"Skip to main content\" link should appear (often visually hidden until focused), and activating it with Enter should move focus into the main content region so the next Tab lands on the first interactive element in the page's main body."},{"question":"How should focus behave in a modal?","answer":"When a modal opens, focus should move into the modal — typically to the close button, the first interactive element, or a labelled region. While the modal is open, Tab and Shift + Tab must cycle only among elements inside the modal, not escape to the page behind. Pressing Esc should dismiss the modal where that convention applies, and on close, focus should return to the element that opened it or a logical next target."},{"question":"What is roving tabindex?","answer":"Roving tabindex is a pattern for composite widgets where only one child element is tab-focusable at a time. A user tabs once into the widget (such as a tablist, toolbar, or menu), then uses arrow keys to move between its items, and tabs out to the next region of the page. It prevents long widgets from forcing keyboard users to tab through every child and matches the keyboard conventions of those widget patterns."},{"question":"Can automated tools fully test keyboard accessibility?","answer":"No. Automated checks catch structural issues like missing labels, non-semantic interactive elements, and some focus-order problems, but they cannot fully decide whether the focus order of a specific page makes sense for a human task. Manual keyboard testing on real templates and flows remains essential. Treat automated tooling as the first pass and manual QA as the final one."},{"question":"Why does DOM order matter for keyboard users?","answer":"Tab order follows DOM order, not visual position. If CSS has rearranged elements visually (for example with flexbox or grid ordering) without changing the underlying DOM, keyboard users will experience a focus sequence that does not match what they see. The right fix is almost always adjusting the DOM to match the intended reading and task order, not patching with tabindex values."}],"relatedSlugs":["accessible-tabs-accordions-menus-aria-guide","accessible-react-modal-focus-management","form-validation-accessibility-aria-live-regions"]},{"slug":"schema-org-vs-google-rich-results-json-ld","title":"Schema.org vs. Google Rich Results: Why Valid JSON-LD Doesn’t Guarantee Display","seoTitle":"Schema.org vs. Google Rich Results: Why Valid JSON-LD Doesn’t Guarantee Display | CodeAva","excerpt":"Your JSON-LD validates, but Google still is not showing stars, FAQs, or rich snippets. Learn the difference between Schema.org syntax, Google eligibility, and actual rich-result display.","date":"2026-04-17","readTime":"15 min read","category":"Technical SEO","tags":["structured-data","schema.org","json-ld","rich-results","google-search","seo-debugging","faqpage","product-schema","rich-results-test"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.38 0.18 260)","to":"oklch(0.55 0.15 300)"},"coverImage":"/blog/schema-org-google-rich-results.jpg","faqs":[{"question":"Why does valid JSON-LD not guarantee rich results?","answer":"Validity only proves that your structured data parses correctly and follows Schema.org conventions. Rich results in Google Search are a separate product decision layered on top of validity. Google chooses whether to show a feature based on supported types, feature-specific guidelines, content visibility, indexing status, quality signals, and query context. Valid markup is the floor, not the finish line."},{"question":"What is the difference between Schema.org and Google rich results?","answer":"Schema.org is an open, collaborative vocabulary for describing entities and relationships on the web. Google Search is a private search product that supports a defined subset of those types and decides when to render them as visible rich results. A type existing in Schema.org does not automatically mean Google will show it as a rich result."},{"question":"Does passing the Rich Results Test guarantee a rich snippet?","answer":"No. The Rich Results Test confirms that your markup is parsable and eligible for a supported feature. Eligibility is necessary but not sufficient. Google may still withhold display because of visibility mismatches, spam signals, manual actions, indexing problems, feature-specific restrictions, or query-level presentation choices."},{"question":"Can hidden content in JSON-LD stop rich results from showing?","answer":"Yes. Google expects structured data to describe content that users can actually find on the page. If your FAQPage JSON-LD references questions and answers that do not appear in the visible content, the markup may pass validators but fail to earn rich-result display. This is a guideline issue, not a syntax issue."},{"question":"Why are my FAQ rich results not appearing anymore?","answer":"Google narrowed the circumstances in which FAQ rich results are shown. The feature is now displayed in far more limited contexts than it used to be. If your FAQ snippet disappeared, the cause is usually a change in which sites and queries qualify for display, not broken JSON-LD. Validate the markup, then check the feature-specific guidance."},{"question":"Can Google ignore valid structured data?","answer":"Yes. Google can choose not to use or display valid structured data if the page violates feature guidelines, if the marked-up content is not visible, if the site has a manual action, if the page is not indexed or has been canonicalized elsewhere, or if Google simply determines that a rich result is not the best presentation for the query."},{"question":"What should I check after my structured data validates?","answer":"After syntax validation, confirm the page is indexable and indexed, that the canonical is the URL you expect, that the marked-up content is visible on the page, that the feature is supported by Google for your content type, and that there are no manual actions or spam signals affecting the site. Then monitor Search Console enhancement reports over time."},{"question":"Does unsupported schema still help SEO?","answer":"It can. Structured data that does not map to a visible rich result can still help search engines understand entities, relationships, and context on the page. Not every useful property triggers a SERP feature, but clear structured data can support disambiguation and entity understanding regardless of visible rich-result display."}],"relatedSlugs":["discovered-currently-not-indexed-fix","crawled-currently-not-indexed-fixes"]},{"slug":"lcp-debugging-checklist-modern-frontends","title":"LCP Debugging Checklist for Modern Frontends","seoTitle":"LCP Debugging Checklist for Modern Frontends | CodeAva","excerpt":"Failing Largest Contentful Paint? Use this practical checklist to debug TTFB, resource discovery, fetch priority, render delay, and heavyweight hero assets in modern frontends.","date":"2026-04-17","readTime":"16 min read","category":"Web Performance","tags":["LCP","core-web-vitals","largest-contentful-paint","performance","react","nextjs","fetchpriority","preload","rendering","frontend-debugging"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.40 0.18 200)","to":"oklch(0.58 0.14 240)"},"coverImage":"/blog/lcp-debugging.jpg","faqs":[{"question":"What are the four phases of LCP?","answer":"LCP breaks down into Time to First Byte (when the response starts), Resource Load Delay (how long before the LCP resource starts loading after the HTML arrives), Resource Load Duration (how long the resource takes to download), and Element Render Delay (time between the resource finishing and the element becoming visible). Every LCP optimisation effort should target one of these four phases, not guess at images generally."},{"question":"Why is my LCP slow even though my image is small?","answer":"File size is only one of four LCP phases. If the browser discovers the image late, loads it at low priority, waits for client-side JavaScript to insert it, or cannot render it until fonts and CSS have loaded, the image can be tiny and LCP can still be slow. Identify the dominant delay phase before optimising asset size."},{"question":"Should I preload the LCP image?","answer":"Preload the LCP resource only when the browser cannot discover it from the initial HTML — for example, when it is inserted by client-side JavaScript or referenced through a CSS background image. If the image is already in a direct <img> tag in the server-rendered HTML, modern browsers will discover it and fetchpriority=\"high\" is usually a better, cheaper signal than a preload."},{"question":"Does loading=\"lazy\" hurt LCP?","answer":"Yes, if it is applied to the LCP element. loading=\"lazy\" defers the image until it is near the viewport, which defeats the entire point of prioritising the LCP resource. Never lazy-load above-the-fold hero images or any element likely to be the LCP candidate. Use loading=\"lazy\" only for content safely below the fold."},{"question":"Does fetchpriority=\"high\" actually help LCP?","answer":"It can, significantly. fetchpriority=\"high\" tells the browser to boost the image's priority during the initial load, moving it ahead of lower-priority resources. It is especially effective when the browser would otherwise treat the image as lower priority because it is not in the immediate viewport computation or is competing with many other resources."},{"question":"Can client-side rendering make LCP worse?","answer":"Yes. If the LCP element is only rendered after a JavaScript bundle executes and hydration completes, the resource cannot be discovered or fetched in parallel with the HTML. Server-side rendering, static generation, or including the LCP markup in the initial HTML gives the browser a head start the preload scanner can act on."},{"question":"How do I find the actual LCP element on my page?","answer":"Open Chrome DevTools, run a Performance recording on a page load, and look for the LCP marker in the timeline or use the Performance Insights panel which labels the LCP element directly. The Web Vitals browser extension also surfaces the live LCP candidate. Confirm the element before optimising — it is often not the one developers assume."},{"question":"Is lab testing enough to fix LCP?","answer":"Lab testing helps you reproduce issues and iterate on fixes quickly, but real-user field data is the source of truth. Use Chrome DevTools and Lighthouse to diagnose, then monitor Search Console Core Web Vitals and CrUX or your own RUM data to confirm the fix landed for actual users across devices and network conditions."}],"relatedSlugs":["finding-inp-bottlenecks-production","webp-vs-avif-vs-png-vs-jpeg","core-web-vitals"]},{"slug":"accessible-tabs-accordions-menus-aria-guide","title":"How to Build Accessible Tabs, Accordions, and Menus (The ARIA Guide)","seoTitle":"How to Build Accessible Tabs, Accordions, and Menus (The ARIA Guide) | CodeAva","excerpt":"Stop building interactive UI with div onClick. Learn the exact ARIA roles, states, and keyboard patterns needed for accessible tabs, accordions, and menus.","date":"2026-04-14","readTime":"15 min read","category":"Accessibility","tags":["accessibility","wai-aria","keyboard-navigation","focus-management","semantic-html","wcag","interactive-components","tabs","accordion","menu"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.38 0.16 280)","to":"oklch(0.55 0.14 230)"},"coverImage":"/blog/accordion-tabs-menu.jpg","faqs":[{"question":"Should an accordion use a button or a div?","answer":"Always use a real HTML button element as the accordion trigger. A button is natively keyboard-operable (responds to Enter and Space), is focusable by default, and is announced as interactive by assistive technologies. A div with an onClick handler has none of these behaviors natively and requires manual keyboard handling, tabindex, and role patching to approximate what a button provides for free."},{"question":"What ARIA attributes do accessible tabs need?","answer":"An accessible tab widget requires: a container with role=\"tablist\", each trigger with role=\"tab\", each content panel with role=\"tabpanel\", aria-selected on each tab to indicate the active state, aria-controls on each tab pointing to its panel's id, and aria-labelledby on each panel pointing back to its tab. Additionally, roving tabindex is needed so that only the active tab has tabindex=\"0\" and inactive tabs have tabindex=\"-1\"."},{"question":"Should every tab be tabbable?","answer":"No. Only the currently active tab should have tabindex=\"0\". Inactive tabs should have tabindex=\"-1\". This is the roving tabindex pattern. When a user presses Tab, focus lands on the active tab. Arrow keys then move between tabs within the tablist. Pressing Tab again moves focus out of the tablist into the associated panel or the next focusable element on the page. Making every tab tabbable forces keyboard users to step through each tab individually, which is slow and does not match the expected widget behavior."},{"question":"What is the difference between a menu and a navigation dropdown?","answer":"A navigation dropdown is a disclosure pattern: a button toggles the visibility of a list of links. Users navigate the links with Tab and Shift+Tab as normal. A true ARIA menu (role=\"menu\") is an application-style command widget where arrow keys control focus movement within the menu, Tab exits the widget entirely, and Escape closes it and returns focus to the trigger. Site header dropdowns with links are almost always navigation disclosure, not ARIA menus."},{"question":"Should I use role=\"menu\" in a website header nav?","answer":"Almost certainly not. The role=\"menu\" and role=\"menuitem\" pattern is designed for application-style command menus — think right-click context menus, toolbar action dropdowns, or editor menus. A website header with links to other pages is navigation. Use a nav element, a real button to toggle visibility with aria-expanded, and a list of links. Let Tab and Shift+Tab handle focus movement through the links as normal."},{"question":"Why does keyboard focus matter so much for accessibility?","answer":"Keyboard focus is the primary interaction mechanism for users who cannot use a mouse or trackpad — including screen reader users, people with motor impairments, and power users who prefer keyboard navigation. If focus is lost after an interaction, lands on hidden content, gets trapped in a loop, or skips a visible control, the component is broken for these users regardless of how it looks visually."},{"question":"When should I use aria-controls and aria-expanded?","answer":"Use aria-expanded on any button or trigger that toggles the visibility of another element — accordion headers, disclosure buttons, navigation toggles, and menu buttons. Use aria-controls on the same trigger, pointing to the id of the element it controls. Together, these attributes tell assistive technologies which element is being toggled and whether it is currently expanded or collapsed. Both should update in sync with the visual state."},{"question":"How can I test tabs, accordions, and menus without a mouse?","answer":"Unplug or stop using your mouse. Tab through the component and confirm that focus is visible at every step. Use the keyboard shortcuts required by the pattern: Enter or Space for accordion toggles, arrow keys for tab switching, Escape for menu closing. Verify that ARIA states like aria-expanded and aria-selected update when state changes. Confirm that hidden content is not reachable by Tab. Optionally run a screen reader like VoiceOver or NVDA to confirm announcements match visual state."}],"relatedSlugs":["form-validation-accessibility-aria-live-regions","accessible-react-modal-focus-management"]},{"slug":"read-qr-code-screenshot-laptop-desktop","title":"How to Read a QR Code From a Screenshot on Your Laptop Without Using Your Phone","seoTitle":"How to Read a QR Code From a Screenshot on Your Laptop Without Using Your Phone | CodeAva","excerpt":"Someone sent you a QR code on Slack or email, but you are on your laptop. Learn how to decode QR code screenshots securely on Mac or Windows without needing your phone.","date":"2026-04-14","readTime":"10 min read","category":"Security","tags":["qr-code","desktop-workflow","screenshot-decoding","privacy","browser-tools","phishing-inspection","mfa-security"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.32 0.14 300)","to":"oklch(0.50 0.18 260)"},"coverImage":"/blog/read-qr-code-from-a-screenshot.jpg","faqs":[{"question":"Can I scan a QR code from a screenshot on my laptop?","answer":"Yes. Take a screenshot of the QR code, then paste it (Ctrl+V or Cmd+V) or drag it into a browser-based QR decoder. The CodeAva QR Code Decoder processes the image locally in your browser using the jsQR library — no image is uploaded to a server. This works on any laptop running a modern browser, regardless of operating system."},{"question":"How do I read a QR code without using my phone?","answer":"Capture a screenshot of the QR code on your desktop (Cmd+Shift+4 on Mac, Win+Shift+S on Windows), then open a browser-based QR decoder and paste or drag the image in. The decoder extracts the URL, text, Wi-Fi credentials, or other payload directly on your computer. This is faster than pointing a phone camera at your monitor."},{"question":"Is it safe to upload a QR screenshot to an online decoder?","answer":"It depends on how the decoder processes the image. If decoding happens server-side, the image and its payload are transmitted to a third party. This is a concern when the QR code contains sensitive data like MFA setup keys, login sessions, payment links, or Wi-Fi passwords. Prefer decoders that process images locally in the browser, like the CodeAva QR Code Decoder, which runs the jsQR library entirely client-side with no uploads."},{"question":"Can a QR code contain something other than a website link?","answer":"Yes. QR codes can encode plain text, Wi-Fi network credentials (SSID and password), vCard or MeCard contact information, email addresses with subject and body, SMS messages, geographic coordinates, cryptocurrency wallet addresses, calendar events, and arbitrary binary data. Always inspect the decoded payload before acting on it — especially if the QR code arrived from an untrusted source."},{"question":"How do I inspect a QR code before opening it?","answer":"Decode the QR code using a tool that shows the raw payload without automatically opening it. Check the full URL, look for misspelled domains, raw IP addresses, URL shorteners, unusual URI schemes (tel:, sms:, data:), and heavy percent-encoding. The CodeAva QR Code Decoder shows the raw payload and flags common URL risk signals like IP addresses, HTTP links, shorteners, and punycode hostnames."},{"question":"Can I decode a QR code from a screenshot on Mac?","answer":"Yes. Press Cmd+Shift+4 to capture a screenshot of the QR code, then open the CodeAva QR Code Decoder in your browser and paste the screenshot with Cmd+V. The image is decoded locally and the payload is shown immediately. You can also drag and drop the saved screenshot file into the tool."},{"question":"Can I decode a QR code from a screenshot on Windows?","answer":"Yes. Press Win+Shift+S to open the Snipping Tool and select the area around the QR code. The screenshot is copied to your clipboard. Then open the CodeAva QR Code Decoder in your browser and paste with Ctrl+V. The tool decodes the image locally and displays the payload without uploading anything."},{"question":"Why use a desktop QR decoder instead of a phone camera?","answer":"A desktop decoder keeps you in your laptop workflow — no device switching, no awkward phone-to-monitor scanning. The decoded text or URL is immediately copyable and inspectable on the same device where you need it. It is also more practical for QR codes that appear in emails, documents, Slack messages, or browser tabs that are already on your screen."}],"relatedSlugs":["what-is-quishing-qr-code-security","remove-hidden-exif-metadata-photos"]},{"slug":"http-security-headers-production-checklist","title":"Security Headers Every Production Website Should Send","seoTitle":"Security Headers Every Production Website Should Send | CodeAva","excerpt":"Stop failing penetration tests. Use this practical production checklist for HTTP security headers, including HSTS, CSP, nosniff, Referrer-Policy, and what old headers you should remove.","date":"2026-04-14","readTime":"16 min read","category":"Application Security","tags":["security-headers","HSTS","CSP","X-Content-Type-Options","Referrer-Policy","X-Frame-Options","Permissions-Policy","production-hardening","penetration-testing","HTTP","appsec"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.32 0.16 20)","to":"oklch(0.50 0.14 50)"},"coverImage":"/blog/security-headers-for-websites.jpg","faqs":[{"question":"Which HTTP security headers should every production website send?","answer":"A sensible modern baseline includes Strict-Transport-Security (HSTS) to enforce HTTPS, X-Content-Type-Options: nosniff to prevent MIME sniffing, Referrer-Policy to limit URL leakage, X-Frame-Options or Content-Security-Policy frame-ancestors to block clickjacking, and a Content-Security-Policy to restrict script and resource loading. The exact values depend on your application, but these five cover the most commonly flagged issues in penetration tests and security audits."},{"question":"Should I still send X-XSS-Protection?","answer":"No. X-XSS-Protection enabled the browser's built-in XSS auditor, which has been removed from all major browsers. Chrome removed it in version 78 (2019), and other engines followed. Sending it today provides no protection. Worse, certain values historically introduced new attack vectors. The correct modern replacement is a strict Content Security Policy."},{"question":"What is the difference between X-Frame-Options and CSP frame-ancestors?","answer":"Both prevent clickjacking by controlling whether your page can be embedded in frames. X-Frame-Options is the legacy header with limited values: DENY or SAMEORIGIN. CSP frame-ancestors is the modern replacement — it supports specific origins, wildcards, and scheme restrictions. If both are present, browsers that support CSP frame-ancestors will use it and ignore X-Frame-Options. Sending both provides backward compatibility with very old browsers."},{"question":"Why do my security headers work locally but not in production?","answer":"Reverse proxies, CDNs, WAFs, load balancers, and platform middleware can strip, duplicate, or override response headers. A header your application sets correctly in code may never reach the browser if an upstream layer removes or replaces it. This is why production verification — checking headers from the outside, as the browser receives them — is essential."},{"question":"What does Strict-Transport-Security preload mean?","answer":"The preload directive asks browser vendors to include your domain in a hardcoded list of HSTS sites shipped with the browser. This means even the very first visit uses HTTPS, before the browser ever sees your HSTS header. It is a strong commitment: once your domain is in the preload list, it is difficult and slow to remove. Enable preload only after you are confident that HTTPS works correctly for all subdomains."},{"question":"Is Content-Security-Policy required for every website?","answer":"CSP is not technically required, but it is the single most effective header for mitigating cross-site scripting. Without CSP, any injected script can execute freely. A strict nonce-based or hash-based CSP dramatically reduces the impact of XSS vulnerabilities. It is strongly recommended for any site handling user input, authentication, or sensitive data."},{"question":"What does X-Content-Type-Options: nosniff actually do?","answer":"It tells the browser to trust the Content-Type header sent by the server and not attempt to guess (sniff) the MIME type of the response. Without it, a browser might interpret a non-HTML file as HTML if it contains HTML-like content, potentially enabling certain injection attacks. The only valid value is nosniff."},{"question":"How do I verify my production security headers?","answer":"Use a tool that fetches your live URL from the outside and inspects the response headers as a real browser would receive them. This catches issues caused by proxies and CDNs stripping or overriding headers. The CodeAva HTTP Headers Checker does exactly this — enter your URL and see every response header your users actually receive, with security header analysis included."}],"relatedSlugs":["csp-nextjs-react-modern-apps","dmarc-spf-dkim-alignment-explained"]},{"slug":"hyphens-vs-underscores-urls-seo","title":"Hyphens vs. Underscores in URLs: What Actually Matters for SEO?","seoTitle":"Hyphens vs. Underscores in URLs: What Actually Matters for SEO? | CodeAva","excerpt":"Still debating hyphens vs underscores in URLs? Learn what Google actually recommends, what really matters for SEO, and how to standardize slugs without creating migration headaches.","date":"2026-04-13","readTime":"11 min read","category":"Technical SEO","tags":["url-structure","slug-formatting","technical-seo","crawlability","url-hygiene","information-architecture","kebab-case","url-best-practices"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.40 0.15 260)","to":"oklch(0.58 0.18 220)"},"coverImage":"/blog/hyphens-vs-underscores-in-urls.jpg","faqs":[{"question":"Are hyphens or underscores better for SEO?","answer":"Hyphens are the standard recommendation for word separation in URLs. Google has explicitly stated that hyphens help it identify individual words in a URL path. Underscores historically kept terms joined rather than separated. In practice, a single underscore URL is unlikely to be catastrophic, but hyphens are the safer, more consistent, and more widely supported convention for web-facing slugs."},{"question":"Does Google recommend hyphens in URLs?","answer":"Yes. Google has recommended using hyphens to separate words in URLs as part of its general URL structure guidance. The reasoning is that hyphens help both users and search engines identify the individual words or concepts in a URL path, making URLs more readable and easier to parse."},{"question":"Will underscores hurt my rankings?","answer":"Not necessarily and not dramatically on their own. A single underscore-separated slug on an otherwise well-structured, quality page is unlikely to tank rankings by itself. The more common risk is operational: underscore URLs can be harder to read, and if your team mixes separators across a site, you end up with inconsistency that is expensive to clean up later."},{"question":"Should I change old underscore URLs to hyphens?","answer":"Only if you can implement proper 301 redirects from every old URL to its new equivalent, update all internal links, canonical tags, sitemap entries, and tracking parameters, and accept that some link equity loss during the transition is possible. For established pages with backlinks and stable rankings, the migration risk often outweighs the marginal gain from changing separators alone. Standardize on hyphens going forward and only migrate legacy URLs as part of a broader planned cleanup with a redirect strategy in place."},{"question":"Do uppercase letters in URLs matter for SEO?","answer":"Yes, in a practical sense. On case-sensitive servers (most Linux-based hosts), /My-Page and /my-page are two different URLs. This creates duplicate content risk if both respond with 200 status. Lowercase-only slugs prevent this problem entirely. They are also more predictable to type, share, and reference across systems. Always normalize slugs to lowercase as a standard rule."},{"question":"Can localized URLs use non-English words?","answer":"Yes. Descriptive URLs in the language your audience uses are valid and encouraged. Google supports Unicode in URLs, and percent-encoding handles characters outside ASCII automatically in modern browsers. What matters is that your slug sanitization pipeline handles transliteration and encoding consistently across all locales, and that you do not mix unencoded non-ASCII slugs with encoded variants of the same URL."},{"question":"How long should a URL slug be?","answer":"Long enough to be descriptive, short enough to be readable. There is no hard character limit for rankings, but very long slugs are harder to share, read in logs, and fit on screen. A practical approach: use the fewest words that still convey the page topic clearly. Avoid stuffing the full title into the slug. If you are removing stop words to shorten slugs, check that the result still reads like a real phrase."},{"question":"What matters more than hyphens vs underscores for SEO?","answer":"Several things: URL stability over time (changing URLs requires redirects and loses link equity), lowercase consistency (prevents duplicate content on case-sensitive servers), descriptive and readable paths (helps both users and crawlers), clean architecture (avoids unnecessary nesting or parameter bloat), and not changing slug conventions across a site after launch. Consistency and stability are where the larger SEO and maintenance wins usually live."}],"relatedSlugs":["xml-sitemap-best-practices","robots-txt-mistakes-blocking-seo"]},{"slug":"finding-inp-bottlenecks-production","title":"A Practical Guide to Finding Real INP Bottlenecks in Production","seoTitle":"A Practical Guide to Finding Real INP Bottlenecks in Production | CodeAva","excerpt":"Stop guessing why your INP is high. Learn a practical workflow for finding real interaction bottlenecks in production using CrUX, RUM, web-vitals attribution, and DevTools.","date":"2026-04-13","readTime":"14 min read","category":"Performance","tags":["inp","core-web-vitals","real-user-monitoring","production-debugging","interaction-latency","long-tasks","field-performance","web-vitals"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.35 0.18 265)","to":"oklch(0.52 0.20 230)"},"coverImage":"/blog/inp-delay-waveform.jpg","faqs":[{"question":"Why is my INP poor in Search Console but fine locally?","answer":"Search Console and CrUX report INP from real users on real devices, networks, and page states. Local testing uses a fast machine with no extensions, no background tabs, and usually no active JavaScript from third-party tags. Real users interact while the page is still loading, on lower-power hardware, and with more competing processes. Those conditions create long tasks and rendering delays that your local environment simply does not reproduce without explicit throttling and realistic interaction timing."},{"question":"What is the best way to debug INP in production?","answer":"Start by confirming which page types have poor INP in Search Console or CrUX. Then add the web-vitals attribution build to your RUM pipeline to capture interaction target, interaction type, input delay, processing duration, and presentation delay for real sessions. Once you know the specific interaction and phase breakdown, reproduce that exact flow locally in Chrome DevTools with CPU throttling and mobile emulation, profile the trace, and find the long task or rendering bottleneck."},{"question":"Can Lighthouse diagnose real INP bottlenecks?","answer":"No. Lighthouse does not measure INP directly. It runs synthetic load-phase checks and reports Interaction to Next Paint only as an experimental audit in some versions, not as a field-matched diagnosis. Lighthouse is useful for identifying obvious long tasks during load, but it cannot tell you which interaction is slow for your actual users or what phase of that interaction is the bottleneck. Use field data to identify the problem, then use DevTools to investigate the specifics."},{"question":"What does web-vitals/attribution add for INP debugging?","answer":"The attribution build of the web-vitals library extends the basic INP metric with structured breakdown data: the interaction target element, interaction type (click, keyboard, or pointer), and a timing breakdown into input delay, processing duration, and presentation delay. Where supported, it also surfaces longAnimationFrameEntries that overlap with the slow interaction. This context is what transforms an aggregate score into an actionable diagnosis."},{"question":"What causes high input delay vs high processing duration vs high presentation delay?","answer":"High input delay means the main thread was busy when the interaction arrived — typically caused by a long task running during or just after page load, such as JavaScript evaluation, timer callbacks, or third-party tag execution. High processing duration means the event handlers themselves took too long — often heavy state updates, expensive synchronous computation, or large DOM mutations triggered by the interaction. High presentation delay means the browser struggled to commit the resulting frame — typically caused by large layout or style recalculation scope, or an unusually complex paint."},{"question":"How do long tasks affect INP?","answer":"Long tasks block the main thread. If a long task is running when a user clicks or taps, the browser cannot begin processing that interaction until the task finishes. This wait time is the input delay component of INP. Once the event handlers run, any additional long tasks they trigger contribute to processing duration. Long tasks during or after the interaction that delay frame presentation contribute to presentation delay. Any of these phases can make INP high independently."},{"question":"Should I use scheduler.yield() to fix INP?","answer":"scheduler.yield() is a useful tool for yielding control back to the browser mid-task, which can reduce input delay by giving the browser a chance to process pending interactions. However, it is not universally supported across all browsers and environments as of early 2026. Always feature-detect before using it and provide a fallback — typically a Promise-wrapped setTimeout — for environments that do not support it. Do not assume it is available everywhere."},{"question":"What is the fastest path from poor INP to a real fix?","answer":"Confirm the affected page type in Search Console. Capture interaction-level field data with web-vitals/attribution. Identify which interaction is slow and which phase dominates. Reproduce that exact interaction locally with CPU throttling. Profile the trace to find the long task or rendering bottleneck. Patch it, validate locally, and watch field data trend after release. The key shortcut is capturing the interaction target from RUM — without it, you are guessing which button or flow to investigate."}],"relatedSlugs":["third-party-scripts-inp-optimization","core-web-vitals"]},{"slug":"dmarc-spf-dkim-alignment-explained","title":"DMARC Pass vs. SPF Pass vs. DKIM Pass: Why They Aren’t the Same Thing","seoTitle":"DMARC Pass vs. SPF Pass vs. DKIM Pass: Why They Aren’t the Same Thing | CodeAva","excerpt":"Passing SPF or DKIM does not mean your emails are secure. Learn the critical difference between email authentication and DMARC alignment, and why your emails still land in spam.","date":"2026-04-12","readTime":"14 min read","category":"Email & DNS Security","tags":["DMARC","SPF","DKIM","email authentication","DMARC alignment","DNS","deliverability","spoofing","email security","DMARC aggregate report"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.35 0.16 240)","to":"oklch(0.52 0.14 280)"},"coverImage":"/blog/dmarc-spf-dkim.jpg","faqs":[{"question":"What is the difference between SPF, DKIM, and DMARC?","answer":"SPF checks whether the sending IP is authorized for the envelope sender domain. DKIM verifies that the signed message content has not been altered, using a public key in DNS. DMARC adds an alignment layer: it requires that the domain validated by SPF or DKIM matches the visible From address. Without DMARC, SPF and DKIM can pass for domains unrelated to the sender the recipient sees."},{"question":"Can SPF pass while DMARC fails?","answer":"Yes. SPF validates the Return-Path (envelope sender) domain, not the visible From header. If the Return-Path domain passes SPF but does not align with the From domain, DMARC will fail. This is common when a third-party service sends on your behalf using its own envelope domain."},{"question":"Can DKIM pass while DMARC fails?","answer":"Yes. DKIM validates that the message signature matches the signing domain’s DNS key, but the signing domain (d= value) may not match the visible From domain. If the DKIM signing domain does not align with the From header, DMARC will fail even though the DKIM signature is cryptographically valid."},{"question":"What does DMARC alignment mean?","answer":"DMARC alignment means the domain authenticated by SPF (the Return-Path domain) or DKIM (the d= signing domain) matches the domain in the visible From header. In relaxed mode, the organizational domains must match (e.g. mail.example.com aligns with example.com). In strict mode, an exact domain match is required."},{"question":"Why does my email pass authentication but still go to spam?","answer":"Several factors can cause this. DMARC may fail on alignment even if SPF or DKIM individually pass. The DMARC policy may be set to none (monitor only), offering no enforcement. Email forwarding can break SPF. Additionally, sender reputation, content quality, and list hygiene affect spam filtering independently of authentication."},{"question":"What is the Return-Path vs the From header?","answer":"The Return-Path (also called the envelope sender or MAIL FROM) is the address used during the SMTP transaction to handle bounces. The From header is the address displayed to the recipient in their email client. SPF checks the Return-Path domain. DMARC compares the authenticated domain against the visible From domain. These two addresses can be completely different."},{"question":"What does a DMARC aggregate report actually show?","answer":"A DMARC aggregate report is an XML file sent by mail receivers to the address specified in your DMARC record’s rua tag. It lists each source IP that sent mail using your domain, the volume of messages, SPF and DKIM authentication results, DMARC alignment outcomes, and the policy action applied. These reports help domain owners identify unauthorized senders and misconfigured legitimate sources."},{"question":"When should I move from p=none to p=reject?","answer":"Move to p=reject only after you have collected and reviewed aggregate reports for a sustained period, identified and fixed all legitimate senders that are failing alignment, and tested with p=quarantine first. Premature enforcement can cause legitimate email from marketing platforms, CRMs, support tools, and transactional services to be rejected. Most teams need several weeks to months of report analysis before safe enforcement."}],"relatedSlugs":["csp-nextjs-react-modern-apps","robots-txt-mistakes-blocking-seo"]},{"slug":"google-rewrites-title-meta-description","title":"Why Google Rewrites Your Title Tags and Meta Descriptions (And How to Stop It)","seoTitle":"Why Google Rewrites Your Title Tags and Meta Descriptions (And How to Stop It) | CodeAva","excerpt":"Frustrated that your perfect meta tags are not appearing in search? Learn why Google rewrites titles and snippets, and how to improve your chances of keeping the message you intended.","date":"2026-04-12","readTime":"13 min read","category":"Technical SEO","tags":["title tags","meta descriptions","SERP snippets","Google title rewrite","on-page SEO","search intent","metadata","technical SEO"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.38 0.14 200)","to":"oklch(0.55 0.16 250)"},"coverImage":"/blog/title-tag-meta-description-rewrites.jpg","faqs":[{"question":"Why does Google rewrite my title tag?","answer":"Google rewrites title tags when it believes the supplied title does not accurately or clearly represent the page for the user’s query. Common triggers include titles that are too long, keyword-stuffed, duplicated across pages, mismatched with the actual page content, or structurally messy. Google may use the page’s H1, anchor text from inbound links, or other on-page signals as an alternative."},{"question":"Does Google always use the meta description I write?","answer":"No. Google treats the meta description as a suggestion, not a directive. If Google determines that another passage from the page better answers the specific query, it will generate a snippet from that passage instead. One page can show different snippets for different queries."},{"question":"Can one page show different snippets for different searches?","answer":"Yes. Google selects the snippet dynamically based on the query. A page about email authentication might show the meta description for a broad query, but pull a specific paragraph when someone searches for a narrow troubleshooting question. This is expected behavior, not an error."},{"question":"How do I stop Google from changing my title?","answer":"You cannot force Google to use your exact title in every context. However, you can significantly reduce rewrite likelihood by writing concise, accurate titles that clearly reflect the page’s primary purpose, keeping titles within a practical length range, avoiding keyword stuffing, ensuring the title aligns with the H1 and visible content, and making each title unique across the site."},{"question":"Does title length matter in Google search results?","answer":"Yes, but Google evaluates pixel width rather than a strict character count. Titles that are too long are more likely to be truncated or rewritten. A practical guideline is to keep titles under roughly 60 characters, but the actual display depends on the characters used and the device. Previewing in a SERP simulator before publishing helps catch truncation issues."},{"question":"Why is Google using a sentence from my page instead of my meta description?","answer":"Google selects the snippet it believes best matches the searcher’s query. If your meta description is generic, too broad, or does not address the specific angle of the query, Google may pull a more relevant sentence from the page body. Writing a meta description that directly addresses the page’s primary intent improves the chances of it being used."},{"question":"What is the difference between a title rewrite and a snippet rewrite?","answer":"A title rewrite changes the clickable blue headline shown in search results. A snippet rewrite (or substitution) changes the descriptive text below the headline. They are separate decisions: Google may rewrite one, both, or neither. Title rewrites are driven by clarity and accuracy signals. Snippet substitution is driven by query-relevance signals."},{"question":"How can I preview how my metadata may look in search?","answer":"Use a SERP preview tool before publishing. The CodeAva Meta Tag and SERP Previewer lets you enter your title and meta description, see an estimated Google desktop and mobile preview, check character-count and truncation guidance, and iterate before the page goes live. This catches length issues, awkward truncation, and messaging problems before they reach search results."}],"relatedSlugs":["crawled-currently-not-indexed-fixes","xml-sitemap-best-practices"]},{"slug":"what-is-quishing-qr-code-security","title":"What Is Quishing? How to Inspect QR Codes Safely Before You Scan","seoTitle":"What Is Quishing? How to Inspect QR Codes Safely Before You Scan | CodeAva","excerpt":"Quishing (QR phishing) hides malicious links inside QR codes. Learn how the attack works, what payloads to watch for, and how to decode QR codes safely before executing them.","date":"2026-04-09","readTime":"14 min read","category":"Application Security","tags":["quishing","qr-phishing","qr-code-security","social-engineering","appsec","payload-inspection","anti-phishing","security-awareness"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.30 0.18 280)","to":"oklch(0.50 0.22 240)"},"coverImage":"/blog/hidden-dangers-qr-code.jpg","faqs":[{"question":"What is quishing?","answer":"Quishing is QR code phishing. An attacker encodes a malicious URL, or another harmful payload, inside a QR code. Because the destination is hidden inside the visual pattern, victims cannot inspect the link before scanning. They are then redirected to a credential-harvesting page, malware download, or another harmful destination."},{"question":"Is a QR code itself dangerous?","answer":"No. A QR code is a machine-readable encoding format. It is not inherently malicious any more than a hyperlink is inherently malicious. The risk comes from the hidden payload inside the code and the low-scrutiny workflow that causes people to act on it before inspecting what it contains."},{"question":"Can I inspect a QR code without opening the link?","answer":"Yes. Decode the QR code from an image file or screenshot using a local browser-based decoder. The raw payload — the URL, Wi-Fi credentials, contact string, or text — is displayed immediately, without opening any link, dialing any number, or triggering any action. Review the payload first, then decide whether to act."},{"question":"What kinds of payloads can a QR code contain?","answer":"A QR code can encode any text string up to a few kilobytes. Common payload types include HTTPS URLs, Wi-Fi setup strings (WIFI:T:WPA;S:NetworkName;P:Password;;), vCard and MeCard contact records, tel: phone links, mailto: email links, smsto: SMS messages, geo: GPS coordinates, and cryptocurrency payment URIs. The payload type changes what action a scanner app may offer to execute."},{"question":"Why are QR codes used in phishing?","answer":"QR codes hide the destination URL inside a visual image that humans cannot read. They are scanned in contexts that feel routine and low-risk — restaurant tables, event posters, payment terminals, emails, office sign-in flows. The combination of visual opacity and routine context is what makes them effective as a phishing delivery mechanism."},{"question":"Can a QR code hide a malicious URL?","answer":"Yes. A QR code can encode any URL string — including links to phishing pages, malware downloads, credential-harvesting forms, and fake payment portals. The URL is completely hidden inside the QR pattern and only becomes readable after the image is decoded."},{"question":"Is it safer to decode a QR code from an image on my computer?","answer":"Yes, significantly. Decoding a QR code from an image on a desktop browser gives you the raw payload as a text string before any action is taken. On a smartphone, the camera app may immediately offer to open a URL, place a call, or connect to Wi-Fi, compressing the gap between scan and action. A desktop inspection tool removes that automation and puts the decision back in the user's hands."},{"question":"What should I look for before opening a decoded QR link?","answer":"Check the protocol: HTTP instead of HTTPS is a strong warning signal for any sensitive page. Check the hostname: raw IP addresses, URL shorteners, and punycode domains are common in phishing. Check the path and query string: unexpected redirect parameters, token values, or heavily encoded strings deserve scrutiny. If anything looks unfamiliar, do not open the link on a device you care about."}],"relatedSlugs":["remove-hidden-exif-metadata-photos","csp-nextjs-react-modern-apps","password-vs-passphrase-security"]},{"slug":"webp-vs-avif-vs-png-vs-jpeg","title":"WebP vs. AVIF vs. PNG vs. JPEG: The {year} Developer's Guide","seoTitle":"WebP vs. AVIF vs. PNG vs. JPEG: The {year} Developer's Guide | CodeAva","excerpt":"Stop hurting your Core Web Vitals with oversized images. Learn the technical differences between AVIF, WebP, PNG, and JPEG, when to use each, and how to optimize for LCP.","date":"2026-04-08","readTime":"14 min read","category":"Performance","tags":["performance","core-web-vitals","lcp","image-optimization","webp","avif","jpeg","png","frontend","web-performance"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.45 0.20 260)","to":"oklch(0.62 0.18 200)"},"coverImage":"/blog/webp-avif-png-jpeg.jpg","faqs":[{"question":"Is AVIF better than WebP?","answer":"AVIF generally achieves better compression than WebP at equivalent visual quality, which means smaller files for the same image. However, AVIF support is not universal across all browsers and encoding environments. WebP is more broadly supported and is often the more practical default for teams that cannot guarantee AVIF support everywhere. In production, the recommended approach is to serve AVIF first, WebP second, and a JPEG or PNG fallback — using the HTML picture element."},{"question":"When should I use PNG instead of WebP or AVIF?","answer":"PNG is the right choice when you need lossless quality — screenshots with sharp text, UI elements requiring pixel-perfect rendering, or graphics where exact colour fidelity matters. WebP and AVIF both support transparency and can replace PNG for most web use cases, but if your workflow requires a lossless format or a specific transparency baseline, PNG remains the correct choice."},{"question":"Is JPEG still useful on the modern web?","answer":"JPEG is still relevant as a fallback format in the HTML picture element and in environments where modern codec support cannot be guaranteed. For new image production with full format control, WebP or AVIF will typically deliver smaller files. JPEG's main practical value today is legacy compatibility and as the final fallback in multi-source delivery strategies."},{"question":"What is the best image format for SEO and Core Web Vitals?","answer":"There is no single best format for every image, but the highest-impact approach for Core Web Vitals is to serve images in the smallest format that preserves adequate quality. For most photographic web images that is AVIF (with WebP fallback) or WebP. Smaller images reduce the bytes that need to load before the Largest Contentful Paint element renders, which directly improves LCP scores."},{"question":"Do I need fallback images when serving AVIF?","answer":"Yes. While AVIF support is broad among modern browsers, not all environments handle it equally — particularly older mobile browsers, some embedded views, and certain image processing pipelines. The safe production pattern is to use the HTML picture element: AVIF source first, then WebP, then a JPEG or PNG fallback img tag. Browsers pick the first format they support."},{"question":"Can I convert PNG to AVIF or WebP safely?","answer":"Yes. Converting a PNG to WebP or AVIF is safe for most web use cases. If the PNG is photographic content, a lossy WebP or AVIF encode will typically yield a much smaller file. If the PNG is a logo, screenshot, or graphic with sharp edges, a lossless WebP encode is a better choice than a lossy one, and you should check the output quality carefully. The CodeAva Image Optimizer can perform these conversions locally in your browser without uploading your files."},{"question":"Is my image uploaded when I use the CodeAva Image Optimizer?","answer":"No. The CodeAva Image Optimizer processes all images locally in your browser using the Canvas API. Nothing is uploaded to a server, stored, or transmitted. This makes it safe for unreleased product photography, internal assets, and any images you cannot share with a third-party compression service."},{"question":"What format should I use for hero images?","answer":"For a hero image — which is often the Largest Contentful Paint element — AVIF with a WebP fallback is the highest-impact choice. Serve the AVIF version to browsers that support it and a WebP or JPEG as fallback. Also ensure the image is sized appropriately for the viewport and preloaded if it is the likely LCP element. Avoid serving a full-resolution PNG as a hero image on a photographic background."}],"relatedSlugs":["core-web-vitals","third-party-scripts-inp-optimization"]},{"slug":"remove-hidden-exif-metadata-photos","title":"What Hidden Metadata Your Photos Reveal — and How to Remove It Safely","seoTitle":"What Hidden Metadata Your Photos Reveal — and How to Remove It Safely | CodeAva","excerpt":"Every photo you take can contain hidden EXIF metadata, including GPS coordinates, timestamps, and device details. Learn how to inspect and strip image metadata safely in your browser.","date":"2026-04-08","readTime":"12 min read","category":"Application Security","tags":["exif","metadata","privacy","gps","osint","image-security","appsec","privacy-by-design","data-sanitization"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.45 0.20 30)","to":"oklch(0.62 0.18 60)"},"coverImage":"/blog/image-metadata.jpg","faqs":[{"question":"What is EXIF data and is it dangerous to share?","answer":"EXIF data is metadata embedded in image files by cameras and smartphones. It can include GPS coordinates, capture timestamps, device make and model, lens settings, and editing software history. Sharing images with intact EXIF data is not inherently dangerous, but it can expose sensitive information like location data, creation times, and device fingerprints. Inspecting metadata before sharing publicly is essential for privacy-conscious workflows."},{"question":"Can photos reveal my location?","answer":"Yes. If your camera or phone had location services enabled when taking a photo, GPS coordinates are stored in the EXIF metadata. This includes latitude, longitude, and sometimes altitude. Anyone with access to the original image file can extract these coordinates using standard EXIF readers. Many social platforms strip EXIF on upload, but direct file sharing via email, messaging apps, or file hosting often preserves metadata intact."},{"question":"What is the difference between EXIF, IPTC, and XMP?","answer":"EXIF is a camera-originated technical metadata standard storing capture data, GPS, and device information. IPTC is an editorial metadata standard used in professional photography for copyright, captions, and credits. XMP is Adobe's extensible metadata format, commonly added by Lightroom, Photoshop, and similar editing tools. A single JPEG can contain all three simultaneously. Removing only EXIF while leaving IPTC or XMP intact is an incomplete sanitization."},{"question":"Can I remove only GPS metadata?","answer":"Selective field removal is technically possible with dedicated tools like ExifTool, but browser-based approaches using Canvas re-encode typically remove all embedded metadata. The CodeAva EXIF Metadata Viewer & Stripper offers a 'GPS only' mode, but because it re-encodes via Canvas for the strongest privacy guarantee, all metadata families are removed in practice. If you need surgical field preservation, a server-side tool with byte-level metadata editing is more appropriate."},{"question":"Are my images uploaded to a server when I use CodeAva?","answer":"No. The CodeAva EXIF Metadata Viewer & Stripper processes everything locally in your browser. ExifReader parses the file bytes locally. The Canvas API re-encodes the image locally. Nothing is uploaded to CodeAva servers, transmitted to any third party, or stored between sessions. The only network request is the optional GPS map preview, which requires explicit user opt-in before loading external OpenStreetMap tiles."},{"question":"Will stripping metadata reduce image quality?","answer":"The Canvas re-encode used for metadata stripping runs at quality 0.92 for JPEG output, which is visually indistinguishable from the original for most use cases. PNG output is lossless. If you need maximum quality control, inspect the cleaned output carefully or use a dedicated metadata editing tool that preserves the original pixel data while only modifying metadata fields."},{"question":"Why should map previews be opt-in?","answer":"Auto-loading a map based on embedded GPS coordinates creates a new privacy leak. The map tile request contacts a third-party service (typically a mapping provider) and may log the IP address, user agent, and requested coordinates. An ethical privacy tool should never make external requests without explicit user consent. The CodeAva tool requires two clicks: one to reveal the consent dialog, another to actually load the map tiles."},{"question":"What is the safest way to sanitize a photo before posting it publicly?","answer":"1) Inspect the image locally using a browser-based tool before any upload. 2) Check for GPS coordinates, timestamps, and device/software details. 3) Export a clean copy via re-encode or dedicated metadata stripping. 4) Re-check the cleaned file to confirm metadata removal. 5) Only then upload or publish. 6) For web delivery, optimize the privacy-safe file for size and format. Never assume the original file is safe to share."}],"relatedSlugs":["what-is-quishing-qr-code-security","csp-nextjs-react-modern-apps","robots-txt-mistakes-blocking-seo"]},{"slug":"password-vs-passphrase-security","title":"Password vs. Passphrase: Which Is Better for Real-World Security?","seoTitle":"Password vs. Passphrase: Which Is Better for Real-World Security? | CodeAva","excerpt":"Still using short, complex passwords with special characters? Learn why modern password guidance favors length, when passphrases make sense, and how to generate strong credentials safely.","date":"2026-04-07","readTime":"12 min read","category":"Application Security","tags":["password-vs-passphrase","passphrase-security","authentication-security","nist-password-guidelines","password-managers","credential-usability","mfa","local-password-generator"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.42 0.16 250)","to":"oklch(0.60 0.14 200)"},"coverImage":"/blog/passphrase-vs-password.jpg","faqs":[{"question":"Is a passphrase more secure than a password?","answer":"Not automatically. A long random passphrase can be stronger and easier to use than a short complex-looking password, but a long random password stored in a password manager is often the better choice when memorability does not matter. The real issue is length, randomness, and how the credential will be used."},{"question":"What makes a passphrase strong?","answer":"A strong passphrase uses enough randomly chosen words from a large word list, rather than a memorable quote or phrase you invented yourself. Length, randomness, and uniqueness matter much more than whether it looks clever."},{"question":"Are symbols required for a secure password?","answer":"No. Symbols can help meet site rules, but they are not a universal requirement for strong security. In practice, more length and true randomness usually matter more than adding one symbol to a short password."},{"question":"Should I use a passphrase for my password manager master password?","answer":"Often yes, because a password manager master password is one of the cases where a human usually has to type and remember the secret. A long random passphrase is often a practical choice, but it still needs to be unique and paired with strong MFA where the product supports it."},{"question":"Is a long password better than a short complex one?","answer":"Usually yes. A longer random password generally offers more search space than a short password that merely satisfies composition rules. Short complex passwords also tend to follow predictable human patterns."},{"question":"Should websites force password resets every 90 days?","answer":"Not as a default policy. Modern guidance recommends password changes when compromise is suspected or confirmed, not on an arbitrary schedule that encourages predictable variations and user fatigue."},{"question":"Are online password generators safe?","answer":"They can be, but you should prefer generators that make the method clear and keep generation local. A trustworthy generator should explain whether it uses secure browser randomness, whether generation happens in the browser, and whether the secret ever leaves your device."},{"question":"What is the safest way to generate a password locally?","answer":"Use a local browser-based generator that relies on the Web Crypto API or an equivalent cryptographically secure random source, and save the result immediately in a password manager or the target system. Avoid generators that depend on Math.random() or require you to send the secret to a server."}]},{"slug":"cron-timezones-explained-utc-offset","title":"Cron Timezones Explained: Why Your Job Runs at the Wrong Hour","seoTitle":"Cron Timezones Explained: Why Your Job Runs at the Wrong Hour | CodeAva","excerpt":"Are your automated jobs running at 2 AM instead of midnight? Learn how cron handles timezones, why DST causes missed or double runs, and how to schedule jobs reliably.","date":"2026-04-07","readTime":"11 min read","category":"Infrastructure","tags":["cron-timezone","cron-utc-vs-local-time","cron-tz-explained","cron-daylight-saving-time","job-scheduling","devops","sre","backend-automation"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.42 0.14 230)","to":"oklch(0.60 0.12 200)"},"coverImage":"/blog/timezones-in-motion.jpg","faqs":[{"question":"Why does my cron job run at the wrong hour?","answer":"Because the cron schedule is being evaluated in a different timezone context than the one you assumed. The expression may be correct, but if the server or cron daemon is using UTC while you were thinking in local time, the job will run with an offset."},{"question":"Does cron use UTC or local time?","answer":"Cron uses the active timezone context of the cron implementation and runtime environment. In many production setups that ends up being UTC, but not always. Some implementations also support CRON_TZ to apply a timezone within a crontab. You must verify the actual environment rather than assuming."},{"question":"What is CRON_TZ?","answer":"CRON_TZ is a timezone setting supported by some cron implementations that lets a crontab interpret entries in a specified IANA timezone such as Europe/London or Africa/Johannesburg. Support is implementation-dependent, so it should be tested in the real environment before relying on it."},{"question":"Can daylight saving time make a cron job skip or run twice?","answer":"Yes. In DST-observing timezones, some local times do not exist during spring-forward transitions, while other local times occur twice during fall-back transitions. A cron job scheduled on those times may be skipped or may run twice depending on the implementation and scheduling context."},{"question":"Should I change my server timezone away from UTC?","answer":"Usually no. UTC is the safest infrastructure baseline because it removes ambiguity from logs, monitoring, and cross-region operations. It is usually better to keep infrastructure on UTC and handle local business-time scheduling explicitly instead of changing the whole server timezone to fix one job."},{"question":"When should I use application-level scheduling instead of cron?","answer":"Use application-level scheduling when timezone logic is part of the product behavior, such as region-specific report delivery, billing cutoffs, or user-facing local-time events. In those cases you often need explicit IANA timezone handling and better control over DST behavior than a basic OS-level cron setup provides."},{"question":"How can I preview the next cron run times?","answer":"Use a parser and builder that can translate the expression, apply the intended cron profile, and calculate the next scheduled executions in both server time and local time. Previewing the next five runs catches many timezone and field mistakes before deployment."},{"question":"What is the safest way to schedule jobs for a local business timezone?","answer":"Decide explicitly whether the schedule is infrastructure-based UTC time or business-local time. If it must follow a real local timezone with DST rules, use a verified timezone-aware approach such as a supported CRON_TZ implementation or an application scheduler with IANA timezone support, then preview DST-sensitive dates before release."}],"relatedSlugs":["unix-timestamp-javascript-python-go-php-sql","seconds-vs-milliseconds-timestamp-bug"]},{"slug":"form-validation-accessibility-aria-live-regions","title":"Form Validation Accessibility: The Developer's Guide to ARIA and Error States","excerpt":"Stop relying on red text for form errors. Learn the exact ARIA choreography to build accessible forms, manage focus on submission, and correctly use aria-live regions for dynamic validation.","date":"2026-04-06","readTime":"12 min read","category":"Accessibility","tags":["accessible forms","form validation accessibility","aria-live","aria-invalid","aria-describedby","aria-errormessage","wcag","react accessibility"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.58 0.16 220)","to":"oklch(0.72 0.12 175)"},"coverImage":"/blog/form-validation-accessibility.jpg","faqs":[{"question":"What makes a form validation flow accessible?","answer":"An accessible validation flow exposes required fields programmatically, marks invalid fields only when they are actually invalid, links each error to the relevant control, and gives users a clear recovery path through focus management or announced updates after submission."},{"question":"Should I use aria-describedby or aria-errormessage for form errors?","answer":"Use aria-describedby for persistent help text and supplemental instructions. Use aria-errormessage for the field's specific error when the field is invalid. In practice, many teams keep the error id in aria-describedby as well while invalid for broader assistive technology compatibility."},{"question":"When should I use aria-live for validation?","answer":"Use aria-live when validation feedback appears dynamically after page load and the user might otherwise miss the update. Polite announcements are the default. Reserve assertive announcements or role=\"alert\" for higher-priority submit failures or summary-level errors."},{"question":"Is aria-required necessary if I already use required?","answer":"Usually no for native HTML controls. The native required attribute already exposes the required state. aria-required is most useful for custom widgets or for design system components that do not map directly to native form controls."},{"question":"Should focus move to the first invalid field or an error summary?","answer":"Either can be correct. Focus the summary for longer or multi-section forms where users need an overview. Focus the first invalid field for short forms where immediate correction is faster. The important part is choosing one pattern intentionally and implementing it consistently."},{"question":"Is native HTML validation enough for accessibility?","answer":"Native validation provides useful baseline behavior, including automatic focus on the first invalid field in many browsers. It becomes limiting when teams need custom wording, localization, design consistency, or controlled validation timing. If you replace it, you must replicate the important accessibility behavior yourself."},{"question":"Can automated tools fully test form validation accessibility?","answer":"No. Automated tools can catch missing labels, broken ARIA references, and some structural issues, but they cannot fully verify whether focus lands in the right place, whether announcements are understandable, or whether the recovery flow feels usable in a real screen reader session."},{"question":"What is the safest pattern for React form errors?","answer":"Use native labels and input types, validate on a clear trigger such as blur or submit, toggle aria-invalid only while a field is invalid, connect visible help and error text with stable ids, and move focus deliberately after failed submit. A stack like React Hook Form with Zod can help, but the accessibility contract still depends on your rendered markup and focus behavior."}],"relatedSlugs":["automated-accessibility-testing","accessible-react-modal-focus-management"]},{"slug":"discovered-currently-not-indexed-fix","title":"Why “Discovered – Currently Not Indexed” Happens and How to Fix It","excerpt":"Are your new URLs stuck in Google Search Console purgatory? Learn the technical difference between “Discovered” and “Crawled,” and how to fix server bottlenecks, crawl traps, and architecture flaws.","date":"2026-04-06","readTime":"11 min read","category":"Technical SEO","tags":["discovered currently not indexed","technical-seo","crawl-budget","internal-linking","sitemap-indexing-issues","indexing","server-responsiveness","crawl-efficiency"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.58 0.15 210)","to":"oklch(0.72 0.12 250)"},"coverImage":"/blog/crawled-not-indexed-concept.jpg","faqs":[{"question":"What does “Discovered – currently not indexed” mean?","answer":"It means Google knows the URL exists but has not crawled it yet. This is usually a crawl scheduling or crawl efficiency issue, not a final judgment about the page’s content quality."},{"question":"What is the difference between “Discovered” and “Crawled – currently not indexed”?","answer":"Discovered means Google found the URL but has not fetched it. Crawled means Google fetched the URL but has not selected it for indexing yet. The first is mainly a crawl scheduling problem; the second is a post-fetch indexing decision."},{"question":"Does this status mean Google thinks my content is low quality?","answer":"Not by itself. “Discovered – currently not indexed” usually points to crawl demand, crawl capacity, internal link priority, or sitemap quality. It should not be treated as a pure content-quality verdict."},{"question":"Can a slow server cause “Discovered – currently not indexed”?","answer":"Yes. High TTFB, intermittent 5xx errors, unstable infrastructure, or expensive uncached HTML can cause Google to back off crawling and leave more URLs in the discovered queue for longer."},{"question":"Should I request indexing for every affected URL?","answer":"No. Manual reindex requests are fine for a handful of high-priority pages after fixes are in place, but they are not a scalable solution for sitewide crawl scheduling problems."},{"question":"Can bad sitemaps cause this issue?","answer":"Yes. Sitemaps that contain redirects, broken URLs, parameter junk, duplicates, or noindex pages weaken the quality signal and waste crawl attention that should be going to canonical, indexable pages."},{"question":"Do orphan pages get stuck in this state more often?","answer":"Often, yes. A URL that appears only in a sitemap and has weak or no meaningful internal links usually looks lower-priority than a page that is reachable through normal site architecture."},{"question":"Can robots.txt or parameter crawl traps make this worse?","answer":"Yes. Endless filter combinations, internal search URLs, and poorly controlled parameter spaces can consume crawl effort. Over-broad robots.txt rules can also block useful crawl paths or create conflicting signals if used carelessly."}],"relatedSlugs":["xml-sitemap-best-practices","robots-txt-mistakes-blocking-seo"]},{"slug":"crawled-currently-not-indexed-fixes","title":"“Crawled – Currently Not Indexed”: When Google Visited Your Page but Still Said No","excerpt":"Googlebot crawled your page, but refused to index it. Discover the technical reasons why—from JavaScript rendering failures and soft 404s to canonical conflicts and thin content—and how to fix them.","date":"2026-04-06","readTime":"13 min read","category":"Technical SEO","tags":["crawled currently not indexed","technical-seo","rendering","soft-404","duplicate-content","canonical","hreflang","indexing"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.57 0.17 22)","to":"oklch(0.68 0.14 320)"},"coverImage":"/blog/crawled-not-indexed-google-rejected.jpg","faqs":[{"question":"What does “Crawled – currently not indexed” mean?","answer":"It means Google successfully fetched the page but did not choose it for the index yet. Unlike “Discovered,” the decision usually happens after crawl and is tied to rendered output, duplication, soft 404 behavior, or page value."},{"question":"What is the difference between “Discovered” and “Crawled – currently not indexed”?","answer":"Discovered means Google found the URL but has not fetched it yet. Crawled means Google fetched, parsed, and evaluated the page but did not add it to the index. They are different technical problems and should not be solved the same way."},{"question":"Can JavaScript rendering problems cause this status?","answer":"Yes. If the important content appears only after slow, fragile, or failed client-side rendering, Google may see a thin shell, incomplete DOM, or placeholder state and decide the page is not worth indexing."},{"question":"What is a soft 404?","answer":"A soft 404 is a page that returns 200 OK but behaves like a missing or empty page in practice, such as a dead product URL, an empty search page, or a placeholder with almost no useful content. Google may decline to index it."},{"question":"Can duplicate content or canonical mistakes cause Google not to index a crawled page?","answer":"Yes. If Google decides the page is too similar to another URL, or if canonical signals are conflicting or incorrect, it may select a different canonical and leave this URL out of the index."},{"question":"Does hreflang fix duplicate regional pages by itself?","answer":"No. hreflang helps Google understand language and regional alternatives, but it does not replace clean canonical logic or genuine differentiation between regional pages."},{"question":"Should I resubmit the page for indexing immediately?","answer":"Only after the root issue is fixed. Reindex requests are useful for a few priority URLs, but repeated manual submissions are not a strategy for pages that still render poorly, behave like soft 404s, or conflict with another canonical."},{"question":"How do I know whether Google saw the real content?","answer":"Use Search Console URL Inspection and the live test, then compare the rendered HTML, screenshot, and selected canonical with what you see in a normal browser session. The answer is in the crawl-facing output, not in your local hydrated app alone."}],"relatedSlugs":["discovered-currently-not-indexed-fix","xml-sitemap-best-practices"]},{"slug":"unhandled-promises-typescript-production-bugs","title":"Unhandled Promises in TypeScript: Why They Cause Real Production Bugs","excerpt":"TypeScript catches type errors, but it will not save you from unhandled promise rejections. Learn how floating promises cause crashes, silent UI failures, and skipped cleanup—and how to fix them.","date":"2026-03-31","readTime":"14 min read","category":"TypeScript","tags":["typescript","promises","async-await","node-js","floating-promises","eslint","production-bugs","reliability"],"authorId":"gareth-whitbey","coverGradient":{"from":"oklch(0.45 0.18 270)","to":"oklch(0.60 0.16 320)"},"coverImage":"/blog/unhandled-promises-typescript.jpg","faqs":[{"question":"What is a floating promise in TypeScript?","answer":"A floating promise is a Promise that is created but never awaited, returned, or explicitly handled with .catch() or void. Because no code observes the outcome, a rejection from that Promise escapes the intended error-handling flow. TypeScript compiles floating promises without error because they are type-safe. The ESLint rule @typescript-eslint/no-floating-promises catches them by requiring every Promise-valued expression to be handled."},{"question":"Why does TypeScript allow unhandled promises?","answer":"TypeScript is a static type checker. It verifies that values match their declared types, but it does not enforce runtime behavior like whether a Promise rejection is observed. A function that returns Promise<void> can be called without await and still type-check correctly. Catching unhandled promises requires lint rules or runtime detection, not just the type system."},{"question":"Can an unhandled rejection crash Node.js?","answer":"Yes. In modern Node.js versions, unhandled promise rejections are treated with increasing strictness. Depending on the Node version and configuration, an unhandled rejection can emit a warning, throw an uncaught exception, or terminate the process. The --unhandled-rejections=throw flag (default in Node 15+) causes the process to exit on any unhandled rejection."},{"question":"Why does try/catch not catch my async error?","answer":"If you return a Promise from inside a try block without awaiting it, the rejection happens after the try/catch block has already exited. The catch clause only catches synchronous throws and rejections from awaited Promises within its scope. Adding await before the return ensures the rejection is thrown inside the try block where catch can observe it."},{"question":"When should I use Promise.allSettled instead of Promise.all?","answer":"Use Promise.allSettled when you need every operation to run to completion and want to inspect individual results afterward, even if some fail. Use Promise.all when all operations must succeed for the workflow to be valid, and a single failure should abort the batch. Promise.all rejects on the first failure; Promise.allSettled always resolves with the status of every operation."},{"question":"What does void do with a Promise?","answer":"Prefixing a Promise expression with the void operator tells the TypeScript compiler and lint rules that the Promise is intentionally not awaited. This satisfies the no-floating-promises rule by making the intent explicit. However, void alone does not handle rejections. You must still attach .catch() or equivalent error handling to prevent unhandled rejections at runtime."},{"question":"Should I use process.on('unhandledRejection') in production?","answer":"Yes, as a safety net for logging, metrics, and alerting. It should not be your primary error-handling strategy. Use it to detect rejections that escape local handling, log diagnostic information, and coordinate a clean shutdown if needed. Do not use it to silently swallow errors and continue normal operation, because the process state after an unhandled rejection may be compromised."},{"question":"Can browsers detect unhandled Promise rejections?","answer":"Yes. Modern browsers fire an unhandledrejection event on the window object when a Promise rejects without a handler. You can listen to this event for telemetry and last-resort error reporting. There is also a rejectionhandled event that fires when a previously unhandled rejection is caught later. These are useful for observability but are not substitutes for explicit local error handling."}],"relatedSlugs":["static-analysis-for-typescript","why-code-audits-matter"]},{"slug":"return-await-typescript-when-it-matters","title":"return await in TypeScript: When It Actually Matters","excerpt":"`return await` is not always redundant. Learn when it matters in TypeScript, why it changes try/catch behavior, and how it improves async debugging and stack traces.","date":"2026-03-31","readTime":"11 min read","category":"TypeScript","tags":["typescript","async-await","promises","error-handling","eslint","stack-traces","node-js","debugging"],"authorId":"gareth-whitbey","coverGradient":{"from":"oklch(0.42 0.16 250)","to":"oklch(0.58 0.14 300)"},"coverImage":"/blog/return-await-typescript.jpg","faqs":[{"question":"Is return await always redundant?","answer":"No. Inside a try/catch block, return await is essential because it lets the current function observe the rejection before the function exits. Without await, the rejection happens after the try block has already completed, so the catch clause never fires. Outside try/catch and cleanup boundaries, return await is often neutral but can still improve stack traces."},{"question":"Why does return await matter in try/catch?","answer":"When you write return somePromise() inside a try block, the function returns the pending Promise immediately. If that Promise later rejects, the rejection happens outside the try/catch scope, so the catch block never sees it. Adding await forces the settlement to occur inside the try block, where catch can observe and handle the rejection."},{"question":"Does return await improve stack traces?","answer":"In many runtimes, yes. When a Promise is returned directly, the current function may not appear in the async stack trace if the Promise rejects later. Awaiting inside the function keeps the function on the call stack at the point of rejection, which can make error traces more useful for debugging. The exact improvement depends on the runtime and its async stack trace implementation."},{"question":"Is return await slower?","answer":"In modern JavaScript engines, the performance difference is negligible for virtually all real-world code. Older advice warned about an extra microtick, but engine optimizations have largely eliminated this concern. The decision should be based on correctness, error handling, and debugging value, not micro-performance."},{"question":"Should I enable @typescript-eslint/return-await?","answer":"Yes. The @typescript-eslint/return-await rule helps enforce consistent and correct use of return await. The in-try-catch configuration is especially useful: it requires return await inside try/catch blocks (where it affects correctness) and allows direct return elsewhere. This matches the practical guidance for most TypeScript teams."},{"question":"When is direct return promise fine?","answer":"Direct return is fine in simple pass-through async functions that have no local try/catch, no cleanup logic, and no need for improved local stack context. If the function is just forwarding a Promise without observing its outcome locally, return await adds little value. The key test is whether the current function needs to see the rejection."},{"question":"Does this matter in Node.js and browsers?","answer":"Yes, it matters in both environments. In Node.js, a missed rejection inside try/catch can cause unhandled rejection events or process termination. In browsers, it can cause silent UI failures where error states never trigger. The try/catch control-flow issue is identical regardless of runtime. Stack trace improvements vary by engine but are relevant in both."},{"question":"Is this just a style preference?","answer":"No. Inside try/catch, the difference between return and return await changes whether the catch block executes. That is a control-flow difference, not a style choice. It can determine whether errors are logged, metrics are recorded, cleanup runs, or the user sees an error message. Outside try/catch, the choice is closer to a style preference, but even there stack trace quality can be a practical factor."}],"relatedSlugs":["unhandled-promises-typescript-production-bugs","static-analysis-for-typescript"]},{"slug":"csp-nextjs-react-modern-apps","title":"Content Security Policy (CSP) for React and Next.js: The 2026 Implementation Guide","excerpt":"Whitelisting is dead. Learn how to implement a strict nonce-based Content Security Policy in Next.js and React without breaking hydration or third-party scripts.","date":"2026-03-31","readTime":"15 min read","category":"Application Security","tags":["csp","security-headers","nextjs","react","xss","nonce","strict-dynamic","appsec"],"authorId":"gloria-garcia","coverGradient":{"from":"oklch(0.40 0.18 30)","to":"oklch(0.56 0.16 60)"},"coverImage":"/blog/csp-for-react-next-modern-apps.jpg","faqs":[{"question":"What is a strict CSP?","answer":"A strict CSP is a Content Security Policy that relies on cryptographic nonces or hashes to authorize individual scripts, rather than listing trusted hostnames. It typically includes script-src 'nonce-<value>' 'strict-dynamic', object-src 'none', and base-uri 'none'. This approach is harder to bypass than host-based allowlists because an attacker cannot inject a script that carries the correct nonce."},{"question":"Why is nonce-based CSP better than host allowlisting?","answer":"Host allowlists trust entire domains. If any resource on that domain can be manipulated or serves user-controlled content, the allowlist can be bypassed. Nonce-based CSP trusts specific script executions: only scripts carrying the correct per-request nonce are allowed to run. This makes exploitation significantly harder even if an attacker finds an injection point."},{"question":"Does strict-dynamic replace allowlists?","answer":"In browsers that support it, yes. When a policy includes a valid nonce or hash plus strict-dynamic, source expressions like 'self' and host allowlists are ignored for script execution. Scripts loaded by a nonced root script inherit trust automatically. You may still include host-based fallbacks for older browsers, but they do not contribute to security in modern browsers once strict-dynamic is active."},{"question":"Can I use CSP with Next.js static pages?","answer":"Not with a true per-request nonce. Nonce-based CSP requires dynamic rendering because the nonce must be generated and embedded during each server-side render. Statically generated pages receive the same HTML for every request, so there is no opportunity to inject a unique nonce. For static pages, you can use hash-based CSP (precomputing hashes of known inline scripts) or accept a less strict policy for those routes."},{"question":"What is the safest way to roll out CSP in production?","answer":"Start with Content-Security-Policy-Report-Only. This sends the policy to the browser but does not block anything. Collect violation reports, fix expected breakages, verify critical user flows, and then switch to enforcement mode. Never ship a strict CSP directly to production enforcement without a Report-Only observation period."},{"question":"How do I handle third-party scripts with a strict CSP?","answer":"Give the trusted root script (such as a tag manager loader) the request nonce. With strict-dynamic in the policy, scripts loaded by that nonced root script inherit execution trust. This avoids broad host allowlists. However, every third-party should still be reviewed for necessity and trust. An overly broad third-party allowance can quietly undo the value of a strict policy."},{"question":"What is the difference between Report-Only and enforced CSP?","answer":"Content-Security-Policy-Report-Only tells the browser to evaluate the policy and report violations but not block anything. Content-Security-Policy enforces the policy and blocks violations. Report-Only is used during rollout to discover breakages safely. Enforcement is the production target once violations are resolved."},{"question":"Do I still need secure coding practices if I have CSP?","answer":"Yes. CSP is a defense-in-depth layer, not a substitute for fixing XSS vulnerabilities in application code. If your code uses dangerouslySetInnerHTML with unsanitized input, CSP may limit exploitation but does not remove the underlying vulnerability. Secure coding practices eliminate the bug. CSP limits the blast radius if a bug slips through."}],"relatedSlugs":["automated-accessibility-testing","robots-txt-mistakes-blocking-seo"]},{"slug":"seconds-vs-milliseconds-timestamp-bug","title":"Seconds vs Milliseconds: The Timestamp Bug That Breaks APIs and JWTs","excerpt":"Debugging a timestamp bug? Learn the difference between seconds and milliseconds, why JavaScript and JWTs often disagree, and how to avoid time-handling bugs in APIs and auth flows.","date":"2026-03-29","readTime":"10 min read","category":"Engineering","tags":["unix-timestamp","milliseconds","seconds","jwt","api-debugging","javascript","date-handling"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.50 0.20 30)","to":"oklch(0.62 0.16 60)"},"coverImage":"/blog/seconds-vs-milliseconds.jpg","faqs":[{"question":"What is the difference between seconds and milliseconds in Unix time?","answer":"Both represent time elapsed since January 1, 1970 UTC, but in different units. Unix seconds is a 10-digit integer (e.g. 1700000000). Unix milliseconds is a 13-digit integer (e.g. 1700000000000) — the same moment multiplied by 1000. Treating one as the other produces dates thousands of years in the past or future."},{"question":"How can I tell if a timestamp is in seconds or milliseconds?","answer":"Count the digits. A 10-digit number is almost always seconds. A 13-digit number is almost always milliseconds. If you interpret a 13-digit millisecond value as seconds, the resulting date will be around the year 55000. If you interpret a 10-digit second value as milliseconds, the date will be in January 1970."},{"question":"Does JavaScript Date.now() return seconds or milliseconds?","answer":"Milliseconds. Date.now() returns the number of milliseconds since the Unix epoch. The Date constructor also expects milliseconds. To get Unix seconds in JavaScript, use Math.floor(Date.now() / 1000). This is the single most common source of off-by-1000x bugs when JavaScript interacts with backend systems."},{"question":"Are JWT exp and iat values in seconds or milliseconds?","answer":"Seconds. JWT time claims (exp, iat, nbf) use NumericDate values as defined in RFC 7519, which are the number of seconds since the Unix epoch. Comparing them directly to JavaScript’s Date.now() without dividing by 1000 will produce incorrect expiry logic."},{"question":"Why does my timestamp convert to the year 54000?","answer":"You are treating a millisecond value as seconds. A 13-digit millisecond timestamp like 1700000000000, when multiplied by 1000 again (as if it were seconds), produces a date tens of thousands of years in the future. Pass milliseconds directly to Date constructors, or divide by 1000 first if your target expects seconds."},{"question":"Should my API return seconds or milliseconds?","answer":"Either is fine as long as the unit is explicit and consistent. Use field names like expiresAtSec or createdAtMs, and document the unit in your API contract. The most dangerous choice is a vague field name like “timestamp” with no unit specified, because consumers will guess — and guess wrong."},{"question":"What is the safest way to compare JWT expiry in JavaScript?","answer":"Convert Date.now() to seconds before comparing: Math.floor(Date.now() / 1000) > decoded.exp. Alternatively, convert the JWT exp to milliseconds: Date.now() > decoded.exp * 1000. Either approach works as long as both sides of the comparison use the same unit."},{"question":"Is Unix time always UTC?","answer":"Yes. A Unix timestamp always represents a UTC moment. It does not carry timezone information. When you convert it to a local date string, your system applies the local timezone offset at that point. The underlying integer is timezone-agnostic by design."}],"relatedSlugs":["unix-timestamp-javascript-python-go-php-sql","why-code-audits-matter"]},{"slug":"jwt-expiry-debugging-token-looks-valid-logs-users-out","title":"JWT Expiry Debugging: Why Your Token Looks Valid But Your App Logs Users Out","excerpt":"Debugging JWT expiry issues? Learn why valid-looking tokens still fail, how exp, iat, and nbf really work, and how to fix seconds-vs-milliseconds and clock-skew bugs.","date":"2026-03-29","readTime":"11 min read","category":"Engineering","tags":["jwt","auth-debugging","token-expiry","clock-skew","javascript","unix-timestamp","frontend-auth"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.45 0.22 280)","to":"oklch(0.60 0.16 320)"},"coverImage":"/blog/jwt-expiry-debugging.jpg","faqs":[{"question":"Are JWT exp and iat in seconds or milliseconds?","answer":"Seconds. JWT time claims (exp, iat, nbf) use NumericDate values as defined in RFC 7519, which represent the number of seconds since the Unix epoch (January 1, 1970 UTC). They are not milliseconds. Comparing them directly to JavaScript’s Date.now() without dividing by 1000 produces incorrect expiry logic."},{"question":"Why does my token look valid in a decoder but still fail in my app?","answer":"A decoder shows the raw claim values but does not replicate your app’s comparison logic. The most common causes are: your code compares milliseconds to seconds, the client clock is slightly ahead or behind the server, refresh logic fires too late, or nbf blocks immediate use. Decoding confirms the payload; it does not confirm your code handles the values correctly."},{"question":"What is clock skew in JWT validation?","answer":"Clock skew is the difference between the clocks on two systems — typically the token issuer and the token consumer. Even a few seconds of drift can cause a freshly issued token to appear expired (if the consumer’s clock is ahead) or not-yet-valid (if the consumer’s clock is behind). Many validation libraries accept a leeway parameter to tolerate small skew."},{"question":"Should I compare JWT exp directly to Date.now()?","answer":"No. Date.now() returns milliseconds, but JWT exp is in seconds. Either divide Date.now() by 1000 first (Math.floor(Date.now() / 1000) > decoded.exp) or multiply exp by 1000 (Date.now() > decoded.exp * 1000). Both sides of the comparison must use the same unit."},{"question":"What does nbf mean and why can it reject a fresh token?","answer":"nbf (not before) specifies the earliest Unix second at which a token should be accepted. If the consuming system’s clock is even slightly behind the issuing server’s clock, a freshly issued token can be rejected because the consumer thinks the nbf time has not arrived yet. Adding a small leeway (typically 5–30 seconds) in your validation logic accounts for this."},{"question":"How early should I refresh an access token?","answer":"Refresh before the token expires, not at the exact exp boundary. A common pattern is to refresh when 60–300 seconds of remaining lifetime remain, depending on network latency and app tolerance. Refreshing too close to expiry risks the token expiring mid-request. Refreshing too early wastes refresh tokens and increases auth server load."},{"question":"Can local timezone differences make a token expire early?","answer":"Not directly. Unix timestamps and JWT claims are UTC-based and timezone-agnostic. However, if your code converts exp to a local-time string and then compares it to a UTC-based current time, or if a developer visually inspects a local-time display and misreads it as UTC, the token can appear expired when it is not. Always compare raw numeric values in the same unit, not formatted strings."},{"question":"What is the safest way to debug JWT expiry?","answer":"Decode the token and read exp, iat, and nbf as raw numbers. Convert them to UTC dates using a tool or Math. Compare against the current UTC time in the same unit (seconds). Check whether the client and server clocks are aligned. Verify that refresh logic fires before exp, not after. Check whether nbf blocks immediate use. Do not rely on visual local-time inspection alone."}],"relatedSlugs":["seconds-vs-milliseconds-timestamp-bug","unix-timestamp-javascript-python-go-php-sql"]},{"slug":"third-party-scripts-inp-optimization","title":"How Third-Party Scripts Kill Your INP and How to Fix It","excerpt":"Are marketing tags and chat widgets ruining your Core Web Vitals? Learn how third-party scripts block the main thread and how to fix INP using Web Workers, lazy loading, facades, and smarter execution.","date":"2026-03-29","readTime":"14 min read","category":"Web Performance","tags":["inp","core-web-vitals","third-party-scripts","long-tasks","performance","web-workers","partytown","gtm"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.50 0.18 145)","to":"oklch(0.64 0.14 190)"},"coverImage":"/blog/third-party-scripts-optimization.jpg","faqs":[{"question":"What is INP and why do third-party scripts affect it?","answer":"Interaction to Next Paint (INP) measures how quickly the browser visually responds to user interactions such as clicks, taps, and key presses. Third-party scripts affect INP when they create long tasks on the main thread. If a user interacts while the browser is busy evaluating or executing a third-party script, the interaction is delayed because the main thread cannot process it until the current task finishes."},{"question":"What is a long task?","answer":"A long task is any single piece of JavaScript execution that occupies the main thread for more than 50 milliseconds. During a long task, the browser cannot respond to user input or paint visual updates. Third-party scripts frequently create long tasks during parsing, evaluation, or callback execution, especially on lower-powered mobile devices."},{"question":"Does async or defer fix INP problems?","answer":"Not fully. Async and defer prevent a script from blocking HTML parsing, which helps initial load. But once the script executes, it can still create long tasks on the main thread that block interactions. A script loaded with async or defer that runs expensive logic during a user interaction will still hurt INP."},{"question":"Can a chat widget hurt Core Web Vitals?","answer":"Yes. Chat widgets often load multiple scripts, stylesheets, and iframe resources on page start. Their initialisation creates main-thread work that competes with user interactions. Loading the chat widget on user intent (such as a click on a placeholder button) instead of on page load can significantly reduce its impact on INP."},{"question":"What is Partytown and when should I use it?","answer":"Partytown is an open-source library that moves third-party scripts off the main thread and into a Web Worker. It is most effective for analytics and tracking scripts that mostly listen to events and send data. It is not a universal solution: scripts that need heavy DOM access or synchronous main-thread APIs may not work correctly in a worker context. Test carefully before deploying."},{"question":"Do lazy-loaded iframes help INP?","answer":"Yes. Adding loading=\"lazy\" to iframe elements defers their load until they are near the viewport. This reduces the amount of third-party JavaScript, CSS, and network activity that competes with the main thread during initial page interactions. Combining lazy loading with a facade (a lightweight preview image or placeholder) is even more effective."},{"question":"How do I know which third-party script is causing the delay?","answer":"Use Chrome DevTools Performance recordings. Record a session that includes user interactions, then inspect the Main thread flame chart for long tasks. Use the Bottom-Up tab or enable third-party grouping to see which domains consume the most execution time. The Interactions track (if available) shows which interactions were delayed and what was running on the main thread at that moment."},{"question":"Should I block all marketing tags to improve performance?","answer":"No. The goal is governance, not elimination. Remove dead or redundant tags, defer non-essential ones, set trigger discipline so tags only fire on relevant pages and events, and use performance budgets to keep total third-party cost within acceptable limits. Many marketing tags can coexist with good INP if they are loaded and executed thoughtfully."}],"relatedSlugs":["core-web-vitals","why-code-audits-matter"]},{"slug":"uuid-v4-v7-vs-ulid","title":"UUID v4 vs UUID v7 vs ULID: Which ID Format Should You Use?","excerpt":"Choosing between UUID v4, UUID v7, ULID, and Nano ID? Learn the trade-offs around sortability, database performance, URL safety, and implementation so you can pick the right ID format.","date":"2026-03-29","readTime":"13 min read","category":"Backend Engineering","tags":["uuid","uuid-v7","ulid","nano-id","databases","distributed-systems","backend","api-design"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.48 0.16 260)","to":"oklch(0.62 0.14 310)"},"coverImage":"/blog/uuidv4-vs-v7-vs-ulid.jpg","faqs":[{"question":"What is the difference between UUID v4 and UUID v7?","answer":"UUID v4 is fully random — every bit (aside from version and variant markers) comes from a cryptographic random source. UUID v7 encodes a Unix millisecond timestamp in the first 48 bits and fills the remaining bits with random data. This makes UUID v7 naturally time-ordered, which improves database index locality and allows sorting by creation time without a separate column. UUID v4 is better when ordering is irrelevant and maximum randomness is preferred."},{"question":"Is UUID v7 better for databases?","answer":"In many cases, yes. Databases that use B-tree indexes (PostgreSQL, MySQL InnoDB) benefit from time-ordered keys because new rows are appended near the end of the index rather than scattered randomly. This reduces page splits and improves write throughput. UUID v7 provides this ordering while keeping the standard UUID format. If your workload is write-heavy and benefits from insertion-order locality, UUID v7 is usually a better choice than UUID v4."},{"question":"When should I use ULID instead of UUID?","answer":"Use ULID when you want lexicographically sortable identifiers in a compact 26-character string format. ULIDs are popular for event logs, time-series data, filenames, and systems where human-readable sort order matters. The trade-off is that ULID is not an IETF UUID standard, so if downstream tools or APIs require canonical UUID formatting, ULID may cause friction."},{"question":"Is Nano ID better than UUID?","answer":"Nano ID solves a different problem. It produces short, URL-friendly, customizable-length identifiers using a configurable alphabet. It is ideal for public-facing IDs, invite codes, short links, and compact object references. UUID is better when you need a standardised 128-bit format that is universally recognised across databases, APIs, and programming languages. For database primary keys, UUID v7 or ULID are usually better choices than Nano ID."},{"question":"Which format is best for URL-safe identifiers?","answer":"Nano ID is the most URL-friendly option because it uses a safe alphabet by default (A-Z, a-z, 0-9, underscore, hyphen) and supports custom lengths, making it very compact. ULID is also URL-safe at 26 characters with no special characters. Standard UUIDs work in URLs but are 36 characters with hyphens, which makes them verbose."},{"question":"Are ULIDs and UUID v7 sortable?","answer":"Yes. Both embed a timestamp component that enables sorting by creation time at millisecond granularity. UUID v7 sorts correctly when compared as standard UUID strings. ULID sorts correctly as plain strings because Crockford Base32 preserves lexicographic order. IDs generated within the same millisecond may not have guaranteed sub-millisecond ordering unless a monotonic counter is used."},{"question":"Should I replace all UUID v4 values with UUID v7?","answer":"Not necessarily. If your existing UUID v4 identifiers are working well and your workload does not suffer from index fragmentation or ordering issues, there is no urgent reason to migrate. UUID v7 is most valuable for new tables, new services, or workloads where insertion order and index locality matter. Migrating existing primary keys has its own cost and risk."},{"question":"Which ID type is best for general-purpose APIs?","answer":"UUID v4 remains a strong default for general-purpose API resource identifiers because it is universally supported, widely understood, and does not leak timing information. If your API also serves as the write path into a database where index locality matters, UUID v7 gives you both API compatibility and better storage behaviour. Choose based on whether ordering is a requirement downstream."}],"relatedSlugs":["unix-timestamp-javascript-python-go-php-sql","seconds-vs-milliseconds-timestamp-bug"]},{"slug":"accessible-react-modal-focus-management","title":"Accessible Modal Dialogs in React: Focus Management Done Right","excerpt":"Building custom modals in React? Learn how to trap focus, restore active elements, use WAI-ARIA attributes correctly, and avoid the most common WCAG compliance failures.","date":"2026-03-28","readTime":"14 min read","category":"Accessibility","tags":["accessibility","react","focus-management","wai-aria","wcag","modal-dialog","typescript"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.45 0.22 280)","to":"oklch(0.60 0.18 320)"},"coverImage":"/blog/accessible-model-dialogs.jpg","faqs":[{"question":"What makes a modal accessible?","answer":"An accessible modal moves focus into the dialog when it opens, traps keyboard focus inside so Tab and Shift+Tab cycle only through interactive elements within the modal, supports Escape to close (where appropriate), and returns focus to the exact triggering element when it closes. It also requires correct WAI-ARIA semantics: role=\"dialog\" or role=\"alertdialog\", aria-modal=\"true\", and an accessible name via aria-labelledby."},{"question":"Should focus move into a modal automatically?","answer":"Yes. When a modal opens, focus must move into the dialog. Typically focus goes to the first interactive element, but for modals with important context or destructive actions, focusing the dialog container or heading (with tabIndex={-1}) may be more appropriate so the user hears the context before interacting."},{"question":"Do I need a focus trap if I use React portals?","answer":"Yes. React portals move the modal out of the parent DOM tree for rendering purposes, but they do not change keyboard behavior. Without an explicit focus trap, pressing Tab will still move focus to elements behind the modal in the main document. Portals solve z-index and overflow clipping issues, not focus management."},{"question":"Is native <dialog> enough for accessibility?","answer":"The native HTML dialog element with showModal() provides useful baseline behavior including top-layer rendering and background inertness. However, it does not automatically place focus on the right element, does not always trap focus consistently across all browser and screen reader combinations, and does not handle focus restoration on close. You still need to manage focus placement, verify trap behavior, and restore focus to the trigger."},{"question":"When should I use role=\"alertdialog\" instead of role=\"dialog\"?","answer":"Use role=\"alertdialog\" when the modal requires an immediate response to a critical or potentially destructive action, such as confirming a deletion or acknowledging an important warning. Alert dialogs signal higher urgency to assistive technology. For standard modals like forms, settings panels, or informational overlays, use role=\"dialog\"."},{"question":"Why does my modal still fail keyboard testing even with ARIA attributes?","answer":"ARIA attributes describe semantics to assistive technology but do not change browser behavior. Adding role=\"dialog\" and aria-modal=\"true\" does not create a focus trap, move focus, or handle Escape key events. You must implement those behaviors in JavaScript. ARIA tells screen readers what the element is; your code must make it behave correctly."},{"question":"Should focus return to the trigger button after close?","answer":"Yes. Returning focus to the element that triggered the modal is a WCAG requirement for predictable navigation. It preserves the user’s place in the page and avoids disorientation. Capture document.activeElement before opening the modal and call .focus() on that element when the modal unmounts or closes."},{"question":"Can automated accessibility tools fully validate modals?","answer":"No. Automated tools like axe-core can detect missing ARIA labels, incorrect roles, and some semantic issues, but they cannot verify that focus moves correctly on open, stays trapped during interaction, or returns to the trigger on close. Focus flow and keyboard behavior require manual testing or dedicated interaction tests."}],"relatedSlugs":["automated-accessibility-testing","why-code-audits-matter"]},{"slug":"unix-timestamp-javascript-python-go-php-sql","title":"The Developer’s Cheat Sheet: Unix Timestamps in JS, Python, Go, PHP, and SQL","excerpt":"Stop fighting timezones. Here is the ultimate cheat sheet for getting, converting, and formatting Unix timestamps across JavaScript, Python, Go, PHP, and SQL databases.","date":"2026-03-28","readTime":"12 min read","category":"Engineering","tags":["unix-timestamp","javascript","python","go","php","sql","epoch-time","date-handling","cheat-sheet"],"authorId":"jerome-james","coverGradient":{"from":"oklch(0.48 0.18 200)","to":"oklch(0.62 0.14 260)"},"coverImage":"/blog/unix-timestamp-concept.jpg","faqs":[{"question":"What is a Unix timestamp?","answer":"A Unix timestamp (also called Epoch time or POSIX time) is the number of seconds that have elapsed since January 1, 1970, at 00:00:00 UTC, excluding leap seconds. It represents a specific moment in time as a single integer, making it useful for machine-readable time transfer across systems, APIs, databases, and logs."},{"question":"What is the difference between Unix time and Epoch time?","answer":"They are the same concept. Unix time, Epoch time, and POSIX time all refer to the count of seconds since January 1, 1970 UTC. The terms are used interchangeably across documentation and codebases."},{"question":"Is a Unix timestamp always UTC?","answer":"Yes. A Unix timestamp always represents a UTC moment. It does not carry timezone information because it does not need to — the integer value corresponds to a single, unambiguous instant. When you convert it to a local date string, your system applies the local timezone offset at that point."},{"question":"How do I know if a timestamp is in seconds or milliseconds?","answer":"Count the digits. A 10-digit value (e.g. 1700000000) is almost always seconds. A 13-digit value (e.g. 1700000000000) is milliseconds. Treating a millisecond value as seconds produces a date tens of thousands of years in the future. JavaScript’s Date.now() returns milliseconds; most other languages and JWT claims use seconds."},{"question":"Should I store dates as Unix timestamps in my database?","answer":"It depends on the use case. Unix timestamps are excellent for transport layers, logs, JWT claims, and cross-system interoperability. But for relational queries, date arithmetic, indexing, and reporting, native database timestamp types (like PostgreSQL’s timestamptz or MySQL’s DATETIME) are usually more practical and efficient. Use the format that fits the layer."},{"question":"What is the difference between Unix timestamps and ISO 8601?","answer":"A Unix timestamp is a numeric value (seconds since epoch) optimized for machine processing. ISO 8601 is a human-readable string format like 2024-11-14T22:13:20Z that includes explicit timezone information. Unix timestamps are compact and fast to compare numerically; ISO 8601 is clearer for API consumers and log readers. Many systems use both at different layers."},{"question":"How do I convert a Unix timestamp back to a date?","answer":"In JavaScript: new Date(timestamp * 1000). In Python: datetime.fromtimestamp(timestamp, tz=timezone.utc). In Go: time.Unix(timestamp, 0). In PHP: (new DateTimeImmutable())->setTimestamp(timestamp). In PostgreSQL: to_timestamp(value). In MySQL: FROM_UNIXTIME(value). Remember to multiply by 1000 in JavaScript since Date expects milliseconds."},{"question":"Does JavaScript use seconds or milliseconds by default?","answer":"Milliseconds. Date.now() returns the current time in milliseconds since epoch. The Date constructor also expects milliseconds. To get Unix seconds, divide by 1000 and floor: Math.floor(Date.now() / 1000). This is the single most common source of off-by-1000x bugs when JavaScript interacts with backend systems that use seconds."}],"relatedSlugs":["why-code-audits-matter","core-web-vitals"]},{"slug":"robots-txt-vs-meta-robots-vs-x-robots-tag","title":"robots.txt vs Meta Robots vs X-Robots-Tag: The Developer’s Guide to Crawl Control","excerpt":"Stop guessing how to block search engines. Learn the exact technical differences between robots.txt, meta robots, and the X-Robots-Tag — and when to use each in your stack.","date":"2026-03-24","readTime":"12 min read","category":"Technical SEO","tags":["technical-seo","robots-txt","meta-robots","x-robots-tag","crawl-control","indexing","search-directives"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.48 0.18 270)","to":"oklch(0.62 0.16 230)"},"coverImage":"/blog/robots-meta-robots-x-robots.jpg","faqs":[{"question":"What is the difference between crawling and indexing?","answer":"Crawling is the process where a search engine bot fetches and reads a URL. Indexing is the decision to include that URL in search results. A page can be crawled without being indexed, and a URL can appear in search results without ever being crawled — for example, if other pages link to it. Blocking crawling does not prevent indexing."},{"question":"Can robots.txt remove a page from Google or Bing?","answer":"No. robots.txt controls crawl access, not index status. Blocking a URL in robots.txt prevents compliant crawlers from fetching it, but search engines may still index the URL as a bare listing if other pages link to it. To remove a page from results, allow crawling and use a noindex meta tag or X-Robots-Tag header."},{"question":"When should I use meta robots instead of robots.txt?","answer":"Use meta robots when you want a specific HTML page to remain accessible to users and crawlers but excluded from search results. Common examples include thank-you pages, internal search result pages, and thin utility pages. The crawler must be able to fetch the page to read the meta robots tag, so do not also block the page in robots.txt."},{"question":"When should I use X-Robots-Tag?","answer":"Use X-Robots-Tag when you need to control indexing for non-HTML resources such as PDFs, images, or JSON responses, or when you want to apply indexing directives at the server or CDN level without editing individual HTML files. It is sent as an HTTP response header and supports the same directive values as the meta robots tag."},{"question":"Can I noindex a PDF or JSON file?","answer":"Yes, but only through the X-Robots-Tag HTTP response header. PDFs and JSON files do not have an HTML head element, so a meta robots tag cannot be added. Configure your web server, reverse proxy, or CDN to return the header X-Robots-Tag: noindex for the relevant file paths."},{"question":"Why is my page still showing in search after I blocked it in robots.txt?","answer":"Because robots.txt blocks crawling, not indexing. If other pages link to the blocked URL, search engines can still discover and index it as a bare listing without a snippet. To prevent a page from appearing in results, allow crawling and add a noindex directive via meta robots or X-Robots-Tag."},{"question":"Does Bing support meta robots and X-Robots-Tag?","answer":"Yes. Bing supports both the meta robots HTML tag and the X-Robots-Tag HTTP response header. Bing processes standard directive values including noindex, nofollow, noarchive, and nosnippet. Always verify behavior in Bing Webmaster Tools after making changes."},{"question":"Is robots.txt a security feature?","answer":"No. robots.txt is a publicly readable plain-text file. It only affects compliant crawlers — humans and non-compliant bots can ignore it entirely. Never use robots.txt to protect sensitive content. Use server-side authentication, access control, or environment-specific routing instead."}],"relatedSlugs":["robots-txt-mistakes-blocking-seo","xml-sitemap-best-practices"]},{"slug":"xml-sitemap-best-practices","title":"XML Sitemap Best Practices for Modern, Dynamic Websites","excerpt":"Still using a static sitemap export? Learn the best practices for dynamic XML sitemaps — clean URL selection, sitemap indexes at scale, accurate lastmod, hreflang for international sites, and a validation workflow that catches problems before Google does.","date":"2026-03-23","readTime":"10 min read","category":"Technical SEO","tags":["technical-seo","xml-sitemap","crawl-budget","hreflang","sitemap-index","dynamic-sites","web-quality"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.57 0.17 52)","to":"oklch(0.66 0.14 28)"},"coverImage":"/blog/xml-sitemap-concept.jpg","faqs":[{"question":"Do I need a sitemap if my site is a Single Page Application?","answer":"Yes, and for SPAs it matters more than average. Googlebot can render JavaScript, but the rendering queue introduces delays — it is not instantaneous. A well-structured XML sitemap gives crawlers a direct list of URLs to discover without depending on JavaScript execution or link-following. For SPAs with dynamic routing or client-side navigation, a programmatically generated sitemap is one of the most reliable ways to ensure all important URLs are discovered and queued for crawling."},{"question":"Can I submit multiple sitemaps to Google and Bing?","answer":"Yes. You can submit multiple sitemaps or a single sitemap index file in both Google Search Console and Bing Webmaster Tools. A sitemap index is the preferred approach for sites with many URLs — it references child sitemaps segmented by content type or section. Both Google and Bing support the sitemap index format. You can also reference sitemap files via the Sitemap directive in your robots.txt, which any compliant crawler will follow without requiring manual submission."},{"question":"What is the difference between a sitemap and a sitemap index?","answer":"A sitemap is an XML file listing individual URLs for a site, with optional metadata like lastmod and priority. A sitemap index is an XML file that lists multiple child sitemap files — used when a single sitemap file would exceed the 50,000 URL or 50 MB limit, or when you want to segment content types for operational clarity. Search engines process sitemap index files the same way they process individual sitemaps, just with an extra level of indirection."},{"question":"Should every URL in a sitemap return a 200 status code?","answer":"Yes. Every URL listed in a sitemap should return an HTTP 200 response, be canonically self-referencing, be crawlable by search engines, and not carry a noindex directive. URLs returning 3xx redirects should be updated to their final destination. URLs returning 4xx or 5xx should be removed. Including broken or redirected URLs wastes crawl budget and reduces the signal quality of the sitemap over time."},{"question":"Should noindex pages appear in a sitemap?","answer":"No. A noindex page in a sitemap sends contradictory signals: the sitemap says 'please index this,' while the noindex directive says 'do not index this.' Search engines will generally respect the noindex, but the conflicting signal can confuse crawl prioritization and waste budget. Only include URLs in your sitemap that you actively want discovered and indexed."},{"question":"How should I handle lastmod for dynamically generated pages?","answer":"Use the actual last-modified timestamp of the underlying data, not the current deployment date. For a blog post, that is the post's last-edited date. For a product page, it is the last time the product data changed. For programmatically generated landing pages, use the most recent relevant entity update. Avoid updating lastmod on every deploy unless content actually changed — doing so trains crawlers to distrust your timestamps, reducing the effectiveness of freshness signals."},{"question":"Can I include hreflang in an XML sitemap?","answer":"Yes. The sitemap-based hreflang approach uses xhtml:link elements inside each URL entry to declare alternate language and region versions. Each alternate page must list all other alternates, including itself. This approach is operationally cleaner than managing hreflang in every HTML head tag — especially for large international catalogs with many language-region combinations. Both Google and Bing support sitemap-based hreflang."},{"question":"Do both Google and Bing use XML sitemaps?","answer":"Yes. Both Googlebot and Bingbot support the XML Sitemap Protocol and process sitemap index files. Both can be fed sitemaps via their respective webmaster tools (Google Search Console and Bing Webmaster Tools) and via the Sitemap directive in robots.txt. Bing also pays attention to lastmod freshness signals and sitemap quality when prioritizing crawl. Maintaining a clean, accurate sitemap benefits discovery across all major crawlers, not just Google."}],"relatedSlugs":["robots-txt-mistakes-blocking-seo","core-web-vitals"]},{"slug":"robots-txt-mistakes-blocking-seo","title":"7 Critical robots.txt Mistakes That Are Silently Killing Your SEO","excerpt":"A misconfigured robots.txt file can block important pages or resources from crawlers without any visible error. Discover the 7 most damaging mistakes, why they happen, and how to fix them before they cost you rankings.","date":"2026-03-20","readTime":"9 min read","category":"Technical SEO","tags":["technical-seo","robots-txt","crawl-budget","indexing","seo-errors","web-quality"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.52 0.16 145)","to":"oklch(0.68 0.14 200)"},"coverImage":"/blog/critical-robots-txt-mistakes.jpg","faqs":[{"question":"Can robots.txt remove a page from search results?","answer":"No. robots.txt controls crawling access, not indexing status. Blocking a URL in robots.txt prevents crawlers from fetching it, but search engines may still index it if it is linked from other pages they can crawl. To reliably prevent a page from appearing in search results, use a noindex meta tag or an X-Robots-Tag HTTP header — and make sure the page is not blocked by robots.txt, otherwise the noindex instruction cannot be read."},{"question":"Is robots.txt case-sensitive?","answer":"The directive names (User-agent, Allow, Disallow) are case-insensitive. The path values are case-sensitive on most web servers, because URL paths are case-sensitive on Linux-based systems. A rule for /Admin/ will not match /admin/ on a case-sensitive server. Always use the exact casing that appears in your URLs."},{"question":"How long does it take Google to notice a robots.txt change?","answer":"Googlebot typically re-fetches robots.txt within 24 hours of a change, though it can take longer. Changes that unblock previously blocked pages may take days or weeks to reflect in search results, because Googlebot still needs to crawl those pages after the block is removed. Use Google Search Console's URL Inspection tool to request a recrawl of important pages after you make changes."},{"question":"Should I put my sitemap URL in robots.txt?","answer":"Yes. Adding a Sitemap directive to robots.txt is a best-practice convenience signal: 'Sitemap: https://yourdomain.com/sitemap.xml'. This is separate from submitting the sitemap in Google Search Console — both are useful. The Sitemap directive helps any compliant crawler discover your content, not just Googlebot."},{"question":"Can robots.txt protect sensitive content?","answer":"No. robots.txt is a publicly readable file — anyone can view it by visiting /robots.txt on your domain. It only prevents compliant crawlers from fetching blocked paths; it does not restrict direct access by humans or non-compliant bots. Sensitive content must be protected by authentication, access control, or server-level restrictions. Never rely on robots.txt as a security mechanism."},{"question":"What is the difference between robots.txt and noindex?","answer":"robots.txt controls whether a crawler can fetch a page (crawl access). noindex, set via a meta tag or HTTP header, controls whether a fetched page should appear in search results (index status). A page blocked by robots.txt cannot be crawled, so any noindex on it cannot be read — Google may still index the URL from links. A page with noindex can be crawled freely but will not appear in results. Use both together deliberately, and never block a noindex page in robots.txt."}],"relatedSlugs":["core-web-vitals","why-code-audits-matter"]},{"slug":"why-code-audits-matter","title":"Why Code Audits Matter More Than You Think","excerpt":"Shipping fast is important. But without periodic code audits, small problems compound into costly outages, security breaches, and engineer burnout. Here is what a good audit actually catches — and why you cannot afford to skip it.","date":"2026-03-15","readTime":"6 min read","category":"Code Quality","tags":["code-audit","technical-debt","engineering-practices","security"],"authorId":"rohit-trivedi","coverGradient":{"from":"oklch(0.50 0.20 265)","to":"oklch(0.65 0.18 290)"},"coverImage":"/blog/deep-inspecting-code.jpg","faqs":[{"question":"How often should we run code audits?","answer":"For most teams, a lightweight automated audit on every pull request is the baseline. A deeper manual audit is worth scheduling quarterly, before major releases, or whenever the team size doubles — because team growth almost always introduces new patterns and inconsistencies that only become visible at a distance."},{"question":"What is the difference between a code review and a code audit?","answer":"A code review examines a specific change in context — it is reactive and scoped. A code audit examines the codebase as a whole, looking for systemic patterns: security risks, architectural drift, dependency health, and accumulated technical debt. Reviews catch local issues; audits catch structural ones."},{"question":"Can automated tools replace manual code reviews?","answer":"No. Automated static analysis is excellent at catching well-defined pattern violations — hardcoded secrets, eval() usage, unreachable code, and dependency vulnerabilities. But it cannot reason about business logic correctness, architectural intent, or the subtle security implications of a design decision. The two are complementary, not interchangeable."},{"question":"How do I prioritise findings from a code audit?","answer":"Start with critical security and data-integrity issues — these carry the highest blast radius and must be addressed before anything else. Next, target warnings that affect production reliability. Lower-priority style and maintainability issues can be addressed iteratively through your normal PR workflow. Never let the perfect be the enemy of the good: shipping security fixes fast beats a perfect backlog."}],"relatedSlugs":["static-analysis-for-typescript"]},{"slug":"core-web-vitals","title":"Core Web Vitals in {year}: What’s Changed","excerpt":"Google’s performance thresholds keep evolving. INP has replaced FID, LCP scoring has tightened, and CLS expectations are stricter than ever. Here is what developers need to know right now.","date":"2026-03-10","readTime":"7 min read","category":"Performance","tags":["performance","core-web-vitals","seo","lcp","cls","inp"],"authorId":"sophia-dutoit","coverGradient":{"from":"oklch(0.55 0.18 200)","to":"oklch(0.68 0.14 170)"},"coverImage":"/blog/core-web-vitals-changes.jpg","faqs":[{"question":"What are the Core Web Vitals thresholds in 2026?","answer":"Good thresholds: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1. Needs Improvement: LCP 2.5–4 s, INP 200–500 ms, CLS 0.1–0.25. Poor: LCP > 4 s, INP > 500 ms, CLS > 0.25. These thresholds are measured at the 75th percentile of real-user sessions, not lab averages."},{"question":"Has INP completely replaced FID?","answer":"Yes. Interaction to Next Paint (INP) officially replaced First Input Delay (FID) in March 2024 and is now a core ranking signal. FID only measured the delay before the browser started processing an interaction. INP measures the full duration of every interaction on the page — a far more complete picture of responsiveness."},{"question":"Does Core Web Vitals performance affect my search rankings?","answer":"Yes, but as a tiebreaker rather than a primary signal. Google uses CWV as part of the Page Experience ranking system. For two pages with equivalent relevance and authority, the one with better CWV will rank higher. For high-traffic, competitive queries this can make a measurable difference — but content quality and relevance still dominate."},{"question":"How do I measure my site’s Core Web Vitals accurately?","answer":"Field data (real users) is authoritative — check the Chrome User Experience Report (CrUX) in Google Search Console under Core Web Vitals. For lab data, use Lighthouse (Chrome DevTools or PageSpeed Insights), which gives you reproducible scores for debugging. Remember: lab scores inform diagnosis, but field data determines your ranking signal."}],"relatedSlugs":["why-code-audits-matter","automated-accessibility-testing"]},{"slug":"automated-accessibility-testing","title":"A Practical Guide to Automated Accessibility Testing","excerpt":"Automated tools catch roughly 30–40% of accessibility issues. The rest require human judgement. Here is how to build a testing stack that makes the most of both — and integrate it without slowing your team down.","date":"2026-03-05","readTime":"7 min read","category":"Accessibility","tags":["accessibility","wcag","a11y","testing","axe","playwright"],"authorId":"kuda-zafevere","coverGradient":{"from":"oklch(0.58 0.18 320)","to":"oklch(0.72 0.12 350)"},"coverImage":"/blog/automated-accessibility-testing.jpg","faqs":[{"question":"Can automated accessibility tools replace manual testing?","answer":"No. Automated tools reliably catch missing alt text, form labels, colour contrast failures (to a degree), and ARIA misuse — but they cannot assess whether content is understandable, whether the logical reading order makes sense, or whether a user relying on a screen reader can complete your key user journeys. Manual testing with keyboard navigation and at least one screen reader (NVDA on Windows, VoiceOver on macOS/iOS) is essential."},{"question":"Which WCAG level should I target?","answer":"WCAG 2.1 AA is the accepted minimum for most web applications and is the level required by law in the EU, UK, and increasingly US federal and state procurement. WCAG 2.2 AA has been the official W3C recommendation since October 2023 and adds a small number of new success criteria, most notably around focus visibility and target size. If you are starting from scratch, target WCAG 2.2 AA."},{"question":"What does axe-core check for?","answer":"axe-core is an open-source accessibility testing engine that checks for approximately 80 rule types including: images without alt text, form inputs without labels, insufficient colour contrast, invalid ARIA attributes, keyboard focus management issues, and missing document structure. It is the engine behind Deque’s axe DevTools, the axe browser extension, and dozens of testing integrations. It aims for zero false positives — every violation it reports is a genuine issue."},{"question":"How do I add automated accessibility tests to a Next.js project?","answer":"The fastest path is to add @axe-core/playwright to your existing Playwright test suite. Install the package, inject the axe analyser into each page test, and call axe().analyze() to get a structured violation report. For a zero-configuration starting point, add the axe-core browser extension to Chrome and manually test key pages while building. For CI, the jest-axe package works well with component-level testing in Vitest or Jest."}],"relatedSlugs":["why-code-audits-matter","core-web-vitals"]},{"slug":"static-analysis-for-typescript","title":"Beyond TSC: Advanced Static Analysis for TypeScript","excerpt":"TypeScript’s compiler catches type errors. But a mature static analysis pipeline catches the bugs that types miss entirely — unused exports, cyclomatic complexity, dead code, and security anti-patterns. Here is how to build one.","date":"2026-02-28","readTime":"8 min read","category":"TypeScript","tags":["typescript","static-analysis","eslint","code-quality","type-safety"],"authorId":"gareth-whitbey","coverGradient":{"from":"oklch(0.60 0.16 190)","to":"oklch(0.72 0.12 220)"},"coverImage":"/blog/advanced-static-analysis.jpg","faqs":[{"question":"What is the difference between tsc and ESLint for TypeScript?","answer":"tsc (the TypeScript compiler) performs type checking — it verifies that values are used in ways that are consistent with their declared types. ESLint with @typescript-eslint performs linting — it checks for code patterns that are legal TypeScript but represent poor practices, potential bugs, or security risks. They operate at different levels and are complementary: tsc catches type errors, ESLint catches pattern violations. You need both."},{"question":"Which @typescript-eslint rules provide the most value?","answer":"The highest-value rules are: @typescript-eslint/no-explicit-any (prevents type erasure), @typescript-eslint/no-floating-promises (catches unawaited async calls that swallow errors), @typescript-eslint/no-unsafe-assignment and related no-unsafe-* rules (catches unsound type assertions), @typescript-eslint/strict-boolean-expressions (catches truthy checks on non-boolean types), and @typescript-eslint/prefer-nullish-coalescing (prevents incorrect falsy-coalescing of 0 and empty strings). Start with the recommended ruleset and add strict rules incrementally."},{"question":"How do I enforce cyclomatic complexity limits in TypeScript?","answer":"Use the ESLint complexity rule: set it to a maximum of 10 for most codebases (complexity: ['error', 10]). For cognitive complexity, which better reflects how hard code is to understand, use @typescript-eslint/cognitive-complexity. A good starting limit is 15 — anything above that is a strong signal the function needs to be broken up. Both rules report per-function, so violations are easy to locate and fix."},{"question":"What tool catches unused exports in TypeScript projects?","answer":"ts-prune is the most focused tool for this: it cross-references every export in your project against all import sites and reports exports that are never consumed. ts-unused-exports provides similar functionality with slightly different output. For monorepos, you need to configure the tool to understand package boundaries. Note: tsc itself does not report unused exports — only unused locals within a file (with noUnusedLocals: true). Unused exports require a whole-project analysis."}],"relatedSlugs":["why-code-audits-matter"]}]}]}],["$L1a"],"$L1b"]}] </article></body></html>