Friday Frontend: CSS Subgrids Are Here Edition
Happy Friday! Hope you had a great week, and are going to have a great weekend.
KBall from ZenDev
P.S. Special announcement, I’ve just joined the engineering team at a startup called Humu. Don’t worry, it won’t get in the way of this newsletter, but may mean I’m slightly less responsive to email inquiries during the week, and I’ll no longer be offering 1 on 1 coaching. Also, if you’re interested in joining a diverse team that is using science, machine learning, and a little bit of love to make work better for businesses everywhere, we are hiring. ;)
CSS & SCSS
Case Study: lynnandtonic.com 2019 refresh
This is simply delightful! A wonderfully whimsical take on a website landing page that animates and changes as you resize the page (Go play with it! Zoom in and out! It’s fun!), and a coherent and easy-to-follow explanation of the techniques used to achieve it.
Avoiding jagged edges on gradients.
Simple quick hit CSS tactic. Lets you create angled color transformations without jagged pixelization. Love it!
Simplified Fluid Typography
I love this concept of “clamped” fluid typography; to me it fits extremely well with the “fluid” approach to responsiveness that is encouraged by flexbox layouts. We should no longer be thinking of responsiveness as a set of rigid snapshots at different breakpoints, but continuous variation between certain “sanity” clamps.
How to Overlap Images in CSS
Great article on using CSS Grid to overlap images without taking them out of flow - complete with fallback CSS that works on the same markup for those who have to support IE. Bonus: This site has a wonderfully whimsical stylistic touch taking advantage of custom cursor images.
The Power (and Fun) of Scope with CSS Custom Properties
Super fun article exploring what you can do by taking advantage of scope with CSS custom properties. While I wouldn’t recommend getting rid of semantic classes with inline variable setting (as shown in one example), the ability to do programmatic variation of parameters is fascinating, and the improvements of readability & code length even within the semantic classes is phenomenal.
Top ways to learn Vue 3
Excellent roundup of materials to get ready for the Vue 3 release, which is currently scheduled to come out in Q1 of next year. I’m super excited for this! It’s going to be a huge step forward in the Vue ecosystem, and I can’t wait to see the patterns that emerge as folks start to use the new functionality.
The complete guide to building a smart data table in React
I’ve gotten asked about smart data tables pretty regularly. It’s a problem that just seems to arrive a lot, particularly in admin/business dashboards. This is a nice rundown of options available from libraries in React, what some of the tradeoffs are, and how to do an implementation. I’d love to see a similar article for Vue.
Firefox 71: A year-end arrival
This is a HUGE release, with some amazing new stuff, but I’m going to focus on just one massively important feature. CSS Subgrid! Subgrid has been loooooong awaited and I’m super excited to see it finally hitting browsers; this enables some amazing new functionality in terms of nesting components within grid.
There is no “Myths of Color Contrast Accessibility”
This article is a followup/response to another interesting article published a month and a half ago. Neither is perfect - I have agreement and disagreement with both - and there is some rambling, but I found them both fascinating explorations of a very tricky topic: colors. And particularly how you deal with brand colors that don’t create great contrasts when used in buttons with “common sense” text colors.
While we’re talking about color and accessibility, this is a super neat new website that lets you put in color pairs and breaks down not only the contrast ratio, but what types of visual disabilities are going to have trouble seeing it. I also enjoyed the visual display of what a contrast might look like to those folks with particular challenges, e.g. red/green colorblind, etc. Very cool!
Semantic sidenotes for the web
Fascinating look through an effort to make truly semantic sidenotes with HTML, that behave properly across various devices including screen readers.
Checklist to avoid the most common accessibility errors
Super useful! A quick hits rundown of the most common accessibility errors, tools for diagnosing them, and recommendations for how to fix. Love it!