Tips for writing high quality web applications

On this page

Best practices to create a web app your users will love
TypeScript or JavaScript import
Caution: Chromium does not play video on any device

Best practices to create a web app your users will love

Avoid layout shifts	Problem: Custom web fonts and `@font-face`. Solution: Use `font-display: optional;` to avoid layout shifting when using custom web fonts (`@font-face`). Read also about Fixing layout shifting brought on by custom fonts. Problem: Images without specified size. Solution: When possible, specify the size of the image by defining its `width` and `height`. This will allow the browser to preserve the space and render the image when it’s ready without recalculating the layout and position of elements on the page (reflow).

TypeScript or JavaScript import

When working with TypeScript or JavaScript code, verify if some of your imports are unused or unneeded. For example, when you only need the Bootstrap Dropdown feature, instead of importing the whole Bootstrap using import 'bootstrap'; you could use import 'bootstrap/js/dist/dropdown';

Caution: Chromium does not play video on any device

Chromium does not include non-free codecs (H.264, which is common in non-Google videos) by default. YouTube uses VP8 or VP9, and they are free codecs, so they are supported in Chromium out of the box. Same about audio codecs, like AAC.

Widevine is not included with Chromium by default because it is a digital rights management (DRM) library used to prevent media piracy. Chromium’s goal is to provide a baseline browser that is open-source and free, and including Widevine would potentially limit the ability of users to access certain content. Instead, Widevine is typically included in proprietary browsers like Google Chrome, which is a separate product from Chromium.