TIL: translate attribute
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
Collecting some frontend related notes, thoughts, bookmarks and tips.
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
window.addEventListener("keydown", detectCapsLock);
window.addEventListener("keyup", detectCapsLock);
function detectCapsLock(e) {
if (e.getModifierState("CapsLock")) {
// caps lock is on
} else {
// caps lock is off
}
}There is an API to trigger the native sharing function of the OS: https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API
https://github.com/alphagov/wcag-primer/wiki "outlines some approaches for testing websites and applications against the Web Content Accessibility Guidelines (WCAG) 2.1 AA Level".
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.
