<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)Collecting some frontend related notes, thoughts, bookmarks and tips.
<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/
The enterkeyhint content attribute is an attribute that specifies what action label (or icon) to present for the enter key on virtual keyboards.
Values:
The following principles are valid for all kinds of animations:
When fading in list items, that means multiple items:
blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}@media print {
@page {
size: landscape;
}
}At the time of the tweet, it worked in blink only.