How We Revamped Our Homepage with TypeScript, Webpack, and Accessibility Enhancements

Introduction

Two years, three months and five days have passed since the last homepage overhaul. Building on the 2017 framework, the new redesign focuses on stability, security, visual experience, and accessibility.

Introducing Strong Type Checking

To compensate for JavaScript’s weak typing, the project adopted TypeScript with the strict mode enabled on every commit. This ensures that any type errors block submissions, reinforcing a culture of writing robust, strongly‑typed code.

Examples include defining global variables via interfaces and using generic get / set methods that are type‑checked at development time:

interface MemoryState {
  testa: boolean;
  testb: string;
}

class Controller {
  state: StateType;

  constructor() {
    this.state = { state: {} };
  }

  get<K extends MemoryStateKeys>(key: K) {
    return this.state.memory[key];
  }

  set<K extends MemoryStateKeys>(key: K, value: MemoryState[K]): MemoryState[K] {
    this.state.memory[key] = value;
    return value;
  }
}

When calling new Controller().get("testb"), TypeScript verifies that testb is a string, catching mismatches early.

Upgrading the Resource Build Process

The legacy build tool Athena was inflexible for custom pipelines, so the team reverted to Webpack 4.0 and introduced two key improvements:

Changed module IDs from sequential numbers to hash‑based IDs generated from file paths, isolating the execution environment from the entry file.

Extracted the runtime environment into a separate resource request, allowing diffs to focus only on changed files.

This reduced unnecessary diff noise, lowered cache‑clear overhead, and made deployments more predictable.

Project Architecture Optimization

Previously, inline JavaScript fragments were duplicated in templates, causing high maintenance cost and compatibility issues. The new approach moves all logic into core bundles, leaving templates pure markup. Developers can now use modern JavaScript syntax without worrying about legacy compatibility.

Automated Testing Integration

Manual self‑testing was time‑consuming and error‑prone. The team introduced Nightwatch.js scripts that automatically execute 73 test cases for the new homepage. The entire suite runs in under three minutes, enabling pre‑release and post‑release verification within five minutes.

Monitoring System Enhancements

The old monitoring covered only browser info and page load time. The new system adds:

Code error monitoring via BadJS, reporting detailed error counts and occurrences.

Business availability monitoring that tracks request count, success rate, and performance metrics (TP), with minute‑level alerting.

Speed reporting that de‑duplicates business data and adds interface latency metrics.

These improvements provide faster fault isolation and more accurate impact assessment.

Optimizing Page Load Experience with Skeleton Screens

The previous lazy‑load placeholder used a generic loading animation, which caused visual jank on large modules. The redesign adopts a skeleton‑screen strategy using gray “tofu‑block” placeholders. Two correspondence levels were considered:

Weak correspondence: Only major sections (titles, items) are block‑styled.

Strong correspondence: Detailed block styling for images and text, suitable for complex modules.

The team chose the strong approach, implementing CSS‑based skeleton components that render instantly with the page, reducing layout shifts and improving perceived performance.

Improving Accessibility for Visually Impaired Users

To address the 1 in 110 prevalence of visual impairment, the redesign adds comprehensive accessibility features:

All focusable elements receive meaningful aria-label attributes.

Lazy‑load containers are given positive tabindex values so keyboard navigation triggers loading.

Popup triggers include aria-haspopup and appropriate tabindex to ensure focus management.

Hidden shortcut links at the top of the page provide quick navigation for keyboard users.

These steps form a draft accessibility guideline covering path design, semantic markup, and screen‑reader testing.

Conclusion

The redesign delivers a more stable development experience, lower release risk, richer monitoring, faster page loads, and genuine accessibility support for visually impaired users, moving the homepage closer to a perfect, user‑centric entry point.