Youtube embeds are not very performant, so here is a web component with focus on performance: https://github.com/paulirish/lite-youtube-embed
Collecting some frontend related notes, thoughts, bookmarks and tips.
Youtube embeds are not very performant, so here is a web component with focus on performance: https://github.com/paulirish/lite-youtube-embed
Quickly analyze landmarks, headings and links of a website: https://xi.github.io/a11y-outline/
My favourite bookmarklet.
@media (forced-colors: active) {
svg {
fill: CanvasText;
}
a svg {
fill: LinkText;
}
}
This to consider for screen readers when implementing dynamic search results: https://www.scottohara.me/blog/2022/02/05/dynamic-results.html
<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)
SVG Crop: https://svgcrop.com
A few questions to help you decide if an image should have an alt
value or not: https://www.w3.org/WAI/tutorials/images/decision-tree/
The inputmode attribute allows to define the type of keyboard which is shown when focusing an input.
Values:
With the following CSS we can make sure that numbers are all rendered using the same width (similar to monospaced fonts):
font-variant-numeric: tabular-nums;
This can be helpful for example for tables or when displaying prices below each other.
Table about loading priorities of render blocking, async, defer, prefetched etc scripts in Chrome: https://addyosmani.com/blog/script-priorities/