2 min read
26 views
New year, new website
Don't let the simplicity and minimalism fool you, this build is chock-full of OCD-fueled attention to detail.
Semantic markup, check. Progressively-enhanced search forms, check. High-fidelity dark mode, check. Seamless keyboard-navigation, check. Easter eggs no one will probably ever notice, check.
Go ahead, call my bluff and test it out for yourself.
Semantic sections
Say it with me, any section tag without a heading is an over-glorified div.
Wrong version for 'Semantic sections'
<section>
<p>Pandas have an extra bone just for eating.</p>
<p>Sloth bears use their lips like a vacuum.</p>
<p>Brown bears are the most widespread.</p>
</section>
Correct version for 'Semantic sections'
<section aria-labelledby="heading-420">
<h2 id="heading-420">Useless bear facts</h2>
<p>Pandas have an extra bone just for eating.</p>
<p>Sloth bears use their lips like a vacuum.</p>
<p>Brown bears are the most widespread.</p>
</section>
Styling webkit elements
Styling the built-in cancel button in search inputs to match your brand colors will likely land you on the naughty list, but it's to die for.
[type="search"]::-webkit-search-cancel-button {
filter:
brightness(0) saturate(100%)
invert(26%) sepia(0%)
saturate(1051%) hue-rotate(135deg)
brightness(85%) contrast(89%);
}
@media (prefers-color-scheme: dark) {
[type="search"]::-webkit-search-cancel-button {
filter:
brightness(0) saturate(100%)
invert(94%) sepia(15%)
saturate(0%) hue-rotate(176deg)
brightness(89%) contrast(92%);
}
}
Demo for 'Styling webkit elements'
All names
- The Primeagen
- TJ DeVries
- Yusuke Wada
Dark-mode scrollbars
Never leave your scrollbars out of the fun. Scrollbars need love too. Remember
to target the root element not just body.
:root {
color-scheme: light dark;
}
Demo for 'Dark-mode scrollbars'
Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction.
While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.
Dynamic content which updates without a page reload is generally either a region or a widget. Simple content changes which are not interactive should be marked as live regions. A live region is explicitly denoted using the aria-live attribute.
aria-live: The aria-live=POLITENESS_SETTING is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off, polite or assertive. The default setting is off. This attribute is by far the most important.
Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction.
While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.
Dynamic content which updates without a page reload is generally either a region or a widget. Simple content changes which are not interactive should be marked as live regions. A live region is explicitly denoted using the aria-live attribute.
aria-live: The aria-live=POLITENESS_SETTING is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off, polite or assertive. The default setting is off. This attribute is by far the most important.
Closing notes
I look forward to writing regularly on everything tech and design related. This blog will become a testing ground for everything I learn on my engineering journey. See you soon.