NOTE: This is a cross-post from my newsletter. I publish an issue every Monday. Subscribe to never miss an issue.
Looking back on last this past week has me excited. There were two really solid articles on state management in vanilla JavaScript projects. One highlighted in this issue below.
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
Read ¬
State-based components with vanilla JS
As someone who has focused this past year on improving my vanilla JS skills, Chris Ferdinandi's daily tips have been invaluable to me. In a sea of Javascript frameworks, it is refreshing to see some writing on building state-based components in vanilla JS.
Fractional
CSS Grid, so hot right now. Ethan shares his new found love for the fr unit.
In short,
fris a near-magical value that lets us quickly address the remaining space in a grid area.
On Designing and Building Toggle Switches
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.
Tools ¬
lazysizes
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
Front-end Performance Checklist
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
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.
Watch ¬
VS Code Can Do That?
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.
Why headings and landmarks are so important
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.
Listen ¬
Flexible Type Setting with Tim Brown
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.
Top comments (1)
Thanks for mentioning the Front-End Performance Checklist!