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
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.
Simple quick hit CSS tactic. Lets you create angled color transformations without jagged pixelization. Love it!
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.
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.
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.
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.
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.
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.
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!
Fascinating look through an effort to make truly semantic sidenotes with HTML, that behave properly across various devices including screen readers.
Super useful! A quick hits rundown of the most common accessibility errors, tools for diagnosing them, and recommendations for how to fix. Love it!