NOTE: This is a cross-post from my newsletter. I publish an issue every Monday. Subscribe to never miss an issue.
Working with state and reactivity has been one of the toughest challenges for myself when working in vanilla JS. It can quickly turn into an ugly mess (might just be me). It is great to see how this might be solved as opposed to including a larger framework to manage a few small details within a site.
Have a great week! – Alex
CSS Grid, so hot right now. Ethan shares his new found love for the
fris a near-magical value that lets us quickly address the remaining space in a grid area.
Sara discovered a weird behavior on a CodePen toggle that led to an in depth tutorial on building an accessible CSS driven toggle.
- Style and function are interrelated; so it helps to think about these two simultaneously when designing for accessibility (and designing anything in general, really).
- Always, always start thinking about the markup and accessibility when building components, regardless of how small or simple they seem.
Lazysizes is a full featured JS library to help you lazy load media. Not only can you lazyload inline images, lazysizes offers plugins to lazyload those excessively large background images. Your mobile users will thank you.
- How to lazyload images with lazysizes on YouTube
- How to lazyload background images with lazysizes on YouTube
Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional).
Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.
I've long used WTF, Forms? as a starting point for forms elements in my work but Boilerform looks solid. It also offers a basic validation interface which extends the native HTML validation functionality.
Short clips highlighting all of the features that VS Code can do that nobody bothered to tell you. I have yet to fully make the jump to VS Code, still enjoy the performance Sublime Text offers but there are so many handy features VS Code offers.
Screen reader users often rely on a list of headings to locate information. Most screen readers have easy ways to isolate and scan a list of page headings, an important feature called the rotor.
Rob Dodson gives us a quick look at why headings and landmarks are so important when it comes to building accessible interfaces.
Managing typography on the web is tough and since web design is 95% typography, this is a pretty important topic. Lots of great discourse on the history of typography and where it is heading.