Collecting some frontend related notes, thoughts, bookmarks and tips.
There is a storage event that gets fired when the local storage for a site is updated:
// Listen for local storage changes on our theme key. This lets
// one tab to be notified if the theme is changed in another,
// and update itself accordingly.
window.addEventListener("storage", (e) => {
if (e.key == LOCAL_STORAGE_KEY_THEME) {
setThemeFromLocalStorageOrMediaPreference()
}
})function showLoading(promise) {
navigation.addEventListener("navigate", (event) => {
event.intercept({
scroll: 'manual',
handler: () => promise,
})
}, { once: true });
return navigation.navigate(location.href).finished
}
// show browser loading UI
showLoading(new Promise((r) => setTimeout(r, 1500)));Implementing a light and dark theme based on the user's OS settings has become quite popular. But often users just want their OS to be dark, while they prefer reading a website with a light background, for example. It is therefore considered good practice to offer a theme toggle, that allows the user to change the theme of the website regardless of their OS theme. […]
There is a change event that can be used to listen to media query changes:
const mediaQuery = window.matchMedia("…");
mediaQuery.addEventListener("change", (e) => {
…
});window.addEventListener("keydown", detectCapsLock);
window.addEventListener("keyup", detectCapsLock);
function detectCapsLock(e) {
if (e.getModifierState("CapsLock")) {
// caps lock is on
} else {
// caps lock is off
}
}There is an API to trigger the native sharing function of the OS: https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API
Table about loading priorities of render blocking, async, defer, prefetched etc scripts in Chrome: https://addyosmani.com/blog/script-priorities/