Skip to content
academia.sh
tr
Log in

Course Advanced

Frontend Quality

By the end of this course

Start course

01

Performance

Defining user-centric metrics, shortening the critical rendering path, image and font loading strategies, tuning the network layer with headers, long tasks at runtime, and tying it all to a budget that catches regressions.

  1. 01 User-Centric Metrics Measuring a published interface's speed by the events the user perceives; the definitions of loading, interactivity, and visual stability metrics, computing a layout shift's score, and summarizing a distribution with percentiles.
  2. 02 Critical Rendering Path The resources first paint has to wait for; the distinction between render-blocking CSS and parser-blocking scripts, computing the round-trip count, and the markup patterns that remove blocking.
  3. 03 Image and Font Optimization Separating an image's transfer, decode, and paint costs; computing the correct file selection from a candidate set, deciding by format class, and the timeline of a font-loading strategy.
  4. 04 Network Performance Separating freshness from validation, measuring cache headers on a local server, the immutability promise of content-hashed names, and what connection hints actually earn.
  5. 05 Runtime Performance Measuring long tasks on the main thread with total blocking time, the measured effect of chunking work, layout thrashing scaling with row count, and ways to avoid painting what is not visible.
  6. 06 Performance Budget Tying performance decisions to a written limit; budget types, where the limit gets derived from, a program that checks build output against the budget, and catching regressions by comparing two builds.

02

Accessibility

The structure of accessibility criteria and conformance levels; how native elements map onto the accessibility tree, accessible name computation, correct and incorrect use of ARIA, keyboard access, live regions, contrast thresholds, and the limits of automated auditing.

  1. 01 Accessibility Standards The four principles that make accessibility measurable, the structure of criterion numbers, the conjunction rule for conformance levels, and conformance being defined at the scale of a process rather than a page.
  2. 02 The Role of Semantic Markup How the accessibility tree is derived from the document tree, the implicit roles native elements produce, the order in which the accessible name is computed, and an accounting of the cost paid for a meaningless container.
  3. 03 ARIA Usage The role, state, and property declarations written into the accessibility tree; the accessible name computation in full, the rationale for the first rule, and the concrete breakages misuse produces.
  4. 04 Keyboard Access The requirements for keyboard operability, comparing tab order with visual order, the boundary where focus containment turns into a trap, and the condition on single-character shortcuts.
  5. 05 Screen Reader Experience A document's navigation planes and auditing plane defects, what an announcement carries, the polite and assertive priority of live regions, and the behavior of the announcement queue.
  6. 06 Color and Contrast A batch audit of component states against contrast thresholds, the focus ring's test against two neighbors at once, why color cannot be a single channel, and the thresholds that text scaling introduces.
  7. 07 Accessibility Testing The rule classes an automated checker can decide, the automatability distribution of criteria, the rate that is missed on real findings, and the cost-ordered sequence of manual verification.

03

Client-Side Security

The layers that protect the user from the interface itself; output escaping, the content security policy, cross-origin resource sharing rules, tokens and cookie attributes against request forgery, security headers, third-party script risk, and the client-side projection of common vulnerability classes.

  1. 01 Cross-Site Scripting The problem of text entering a page and running as code; how the reflected, stored, and DOM-based types arise, context-sensitive output escaping, and a scheme allowlist for link targets.
  2. 02 Content Security Policy Writing the policy that tells the browser which origins it may load from; directives and source expressions, nonce and hash-based allowance, report-only mode and violation reports, and the areas the policy does not cover.
  3. 03 Cross-Origin Resource Sharing What the same-origin policy blocks, the distinction between simple requests and preflight, what the sharing headers mean, the rules for credentialed requests, and common misconfigurations.
  4. 04 Request Forgery The attack class born from cookies being attached automatically; the decision table of the SameSite and Secure attributes, a session-bound request token, origin header checks, and method discipline.
  5. 05 Security Headers Enforcing transport security, restricting framing, narrowing referrer information, turning off MIME sniffing, and cross-origin isolation; a configuration checker that finds what is missing.
  6. 06 Third-Party Script Risk Code that was not written in-house running with the page's own origin authority; the links of the supply chain, generating and validating a subresource integrity hash, what the integrity check does not cover, and runtime isolation.
  7. 07 Common Web Risks The client-side counterparts of common vulnerability classes; authorization decisions made in the interface, open redirect, trust in data reaching the client, and secrets leaking into the bundle.

04

Testing and Monitoring

Behavior-focused component testing, selecting elements by accessible role, end-to-end flow verification, visual regression comparison, the causes of flaky tests, and reading error records alongside field data returning from production.

  1. 01 Unit and Component Tests The boundary that separates a component test from a unit test, the split between behavior contract and implementation detail, and how the two test forms behave differently under the same refactor.
  2. 02 User-Centric Queries Turning the accessible role and accessible name into a query criterion, querying the same document by role and by class selector, and how the two criteria behave under refactoring and an accessibility regression.
  3. 03 End-to-End Tests The risk covered by tests that run in a real browser, modeling and verifying the flow as a state machine, decisions about waiting and test data isolation, and why these tests are kept few in number.
  4. 04 Visual Regression Testing Pixel-level comparison of the baseline image against the candidate image, the separate roles of pixel tolerance and ratio threshold, the masking decision, and the determinism conditions that make the comparison meaningful.
  5. 05 Test Stability The definition and cost of a flaky test, counting timing, order dependence, and shared state with a deterministic simulation, the fix for each cause, and the place of retries and quarantine.
  6. 06 Real User Monitoring The different questions answered by lab measurement and field data, how metrics are collected and sent in the field, reading a distribution with percentile computation, and the effect of segmentation and sample size.
  7. 07 Error Tracking The points where client errors are caught, making the stack trace readable with a source map, grouping by generating a fingerprint, measuring a group's impact, and decisions about noise and privacy.

Start typing to search.

↑↓ ↵ Esc navigate · open · close