Collecting some frontend related notes, thoughts, bookmarks and tips.
Modals are not another noun for dialogs, but an adjective describing certain types of dialogs:
Basically, when a modal component is open, it is the only thing that is not inert. Only the modal content can be interacted rest with, the rest of the page or application is made inert. Inert content is content that users cannot interact with. It is only really there visually, but you cannot Tab to it, click it, scroll it or access the content via assistive technologies.
— Hidde de Vries
If an element is hidden via visibility: hidden, its subtree can be made visible by using visibility: visible:
parent {
visibility: hidden;
}
child {
visibility: visible;
}Without rounded corners:
border: solid 0.25rem;
border-image: linear-gradient(to bottom right, darkmagenta, aquamarine);With rounded corners:
border: solid 0.25rem transparent;
background:
linear-gradient(white, white) padding-box,
linear-gradient(to bottom right, darkmagenta, aquamarine) border-box;Drawback: You need to set a solid color as background, so it cannot be transparent.
https://randoma11y.com creates random accessible color combinations.
<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">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