Happy Friday! Hope you had a great week, and are going to have a great weekend.
There are a lot of great articles in this week’s edition, but there are 2 in particular I want to draw your attention to. First, the Firefox announcement with the latest version of Firefox means that CSS Subgrid is now LIVE in a browser. This is another huge step forward for the CSS world. The second is the article about CSS Architecture in modern JavaScript Applications. It is a tremendously deep and thoughtful piece - if you’re using any form of CSS-in-JS solution, or even working in a component-based JS application and trying to figure out your CSS strategy, I highly recommend it.
Enjoy!
Best,
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.
JavaScript
CSS Architecture for Modern JavaScript Applications
Putting this in the JavaScript section because it’s only really relevant for folks who are using CSS-in-JS and other modern JavaScript, but really I recommend it to everyone. A tour de force on how to think about UI components and UI states in modern component-oriented systems.
The 2019 State of JavaScript Survey
This link is for taking the survey - results will be out later. This survey has been getting better and better each year, but still has some representation problems due to the concentration of their audience within the React community. Particularly if you’re in another part of the JavaScript/frontend ecosystem, make sure you take time to make your voice heard! (Also, there’s a neat blog post about what’s new in the survey this year)
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.
Other Awesomeness
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.
WhoCanUse
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!
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)