Collecting some frontend related notes, thoughts, bookmarks and tips.
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 translate attribute telling browsers not to translate the content if using "no": https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate
<meta name=twitter:card content=summary_large_image>
<meta property=og:title content="This is a test title">
<meta property="og:description" name="description" content="This is a test description.">
<meta property="og:image" content="https://hell.meiert.org/core/png/test.png"><meta />
<title>
preconnect
<script async></script>
CSS with @imports
sync JS
sync CSS
preload
<script defer></script>
prefetch / prerender
everything else (SEO, icons, open graph)The inputmode attribute allows to define the type of keyboard which is shown when focusing an input.
Values:
Table about loading priorities of render blocking, async, defer, prefetched etc scripts in Chrome: https://addyosmani.com/blog/script-priorities/
The enterkeyhint content attribute is an attribute that specifies what action label (or icon) to present for the enter key on virtual keyboards.
Values:
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">// manifest.webmanifest
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}