Collecting some frontend related notes, thoughts, bookmarks and tips.
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
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