Skip to main content

About Chrome Status

What's Chrome Status and my project goals 🤔​

ChromeStatus.com is a website that allows web developers to track all the features in the Chrome browser, including the deprecated, current, and upcoming features. It also provides editing pages and guidelines for feature developers from Google, Microsoft, Meta, IBM, ... and many other major vendors to enter and view the process of their features.

Upcoming, developing, and deprecated features for each Chrome version​

landing

Stats of all the Chrome features​

stats

Prior to my work​

ChromeStatus.com followed a traditional multi-page web design where each page corresponds to a HTML document. However, a lot of modern web applications are built with a single-page application (SPA) design. An SPA is a web app implementation that loads only a single web document. It updates the body content of that single document via JavaScript and fetches different content to be shown. This therefore allows users to use websites without loading whole new pages from the server, which can result in performance gains and a more dynamic experience.

My goals​

To achieve an SPA design, I planned to use Lit and web components for the frontend. Previously, the site is mainly built with Django HTML templates with some uses of Lit elements. Django is a Python web framework that provides a convenient way to generate HTML dynamically based on HTML templates. The generated HTML documents are based on the template data determined on the server side. On the other hand, Lit is a boilerplate-killing component based library that provides reactive state and scoped styles. Every Lit component is a standard web component that contains the Shadow DOM technology and can be used together to create versatile custom elements with encapsulated functionality that can be reused anywhere. Using Lit reusable components over Django-based HTML templates is advantageous because of a more maintainable codebase and improved code scalability. More importantly, an SPA design can be implemented based on these web components

Before vs After my work​

landing