201 private links
A great example of what the popover API can achieve
Country flag code to unicode emoji flag
function getFlagEmoji(countryCode) {
const codePoints = countryCode
.toUpperCase()
.split('')
.map(char => 127397 + char.charCodeAt());
return String.fromCodePoint(...codePoints);
}During the development of Bear, one of the constraints I created for myself was to do as much as possible using basic HTML components. This means that the only elements that are able to perform a request are and
A simple snippet works to retrieve and replace content on a page. Few thoughts:
- It has to work with other interactions than the click event to be reliable
- It has to work with screen readers, so the focus should be placed on the inserted content. Maybe an announcement is needed.
export type Result<T, E> = { ok: true, result?: T } | { ok: false, err: E }Advantages: everything.
Disadvantages: it creates an object for it.
It is a quick way to test it before using a small library https://shaarli.lyokolux.space/?NJ9Efg
A simple layout for nav with negative margins
:root {
overscroll-behavior: none;
}A codepen demo https://codepen.io/michellebarker/pen/vYbrpbX
A search input that expands itself on focus. It animates the width, but it uses CSS grid for the main layout.
How an array was built before Ecmascript v1
A button style-reset in CSS:
button {
display: inline-block;
border: none;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1rem;
line-height: 1;
background: transparent;
-webkit-appearance: none;
}and again: link for content and button for actions!
In the meantime:
.visually-hidden:not(:focus):not(:active) {
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}Native alternatives to lodash utils
Native alternative to date-fns
Vérifier la validité des liens d'une page et y ajouter une classe .status comme .status404
@media (prefers-color-scheme: dark) {
html body {filter: invert(1);}
/* the following really should be managed by a cascade layer */
.some-container-items-or-images {
box-shadow: 0.25em 0.25em 0.67em #FFF8;
}
}From Lary Hudson
you should also set “color-scheme: dark” so that scrollbars change to a dark tint as well.
Numbers:
const formatter = Intl.NumberFormat(LOCALE, { notation: 'compact' })
Currency:
Intl.NumberFormat(LOCALE, {
notation: 'compact',
style: 'currency',
currency: 'ZWD'
})Indeed:
<template>
<div
@mouseover="hover = true"
@mouseleave="hover = false"
/>
</template>And now we now when the mouse is hovering.
A warning though: it is not compatible with touch screens !
Using JS to generate a default avatar with one letter:
function genAvatar(name) {
try {
// Match General_Category=Letter
const match = name.match(/\p{L}/u);
return (match && match[0]) || null;
} catch {
return name[0] || null;
}
}