Michael Großklaus

Collecting some frontend related notes, thoughts, bookmarks and tips.

• all
• accessibility
• animations
• css
• favicons
• grid
• html
• internationalisation
• javascript
• performance
• print
• svg
• typography
• ux
• yaml

1. Mon Jul 17 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

   • javascript

   TIL: Native browser spinner for asynchronous operations

   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)));

2. Sat Feb 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

   • html
   • css
   • javascript

   Implementing a theme toggle with HTML and CSS only (almost)

   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. […]

3. Tue Dec 20 2022 00:00:00 GMT+0000 (Coordinated Universal Time)

   • javascript

   TIL: change event for media queries

   There is a change event that can be used to listen to media query changes:

   const mediaQuery = window.matchMedia("…");
   
   mediaQuery.addEventListener("change", (e) => {
     …
   });

4. Mon Dec 12 2022 00:00:00 GMT+0000 (Coordinated Universal Time)

   • javascript

   TIL: Detecting capslock with JavaScript

   window.addEventListener("keydown", detectCapsLock);
   window.addEventListener("keyup", detectCapsLock);
   
   function detectCapsLock(e) {
     if (e.getModifierState("CapsLock")) {
       // caps lock is on
     } else {
       // caps lock is off
     }
   }

5. Tue Nov 15 2022 00:00:00 GMT+0000 (Coordinated Universal Time)

   • javascript

   TIL: Web Share API

   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

6. Mon Mar 01 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

   • javascript
   • performance
   • html

   JavaScript loading priorities in Chrome

   Table about loading priorities of render blocking, async, defer, prefetched etc scripts in Chrome: https://addyosmani.com/blog/script-priorities/