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()
}
})Build and test against WCAG consistently. Understand each success criterion's meaning and how to be accessible: https://thisiswcag.com
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)));There are different indicators to define how multiline strings in YAML files behave.
Block style indicators describe how line breaks behave: With a | (literal style) they are kept as a line break. With a > (folded style) they are converted to a space.
Block chomping indicators describe how line breaks at the end of the string behave: + keeps all of them, - removes them. Without an indicator, one line break will be added to end of the string.
In this post I want to give a short example why there is in my opinion a better way than using a Mobile First approach when writing CSS. Please note that for simplification I will refer to viewports as well as media queries, but the same concept also applies to anything that can be controlled by media and container queries. […]
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. […]
I have a lot of private notes regarding all kinds of topics: web development, my hobbies, finances, things to buy, work-related tasks, and so on. These notes are probably the most important things I have digitally (besides thousands of pictures) and up until recently they were stored in a PostgreSQL database. This had always been a compromise though. What I actually wanted was to store them in Markdown files on my computer. […]
There is a change event that can be used to listen to media query changes:
const mediaQuery = window.matchMedia("…");
mediaQuery.addEventListener("change", (e) => {
…
});There is a translate attribute telling browsers not to translate the content if using "no": https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate