Hope your week was amazing! This week’s newsletter is a little short because I’m traveling for my Grandmother’s 102nd (!!!) birthday and didn’t have time to pull together a full set of links. There’s still some good stuff though! I was especially fascinated by the Reactivity post down in the JavaScript section.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Centering a div That Maintains Aspect-Ratio When There’s Body Margin

Chris Coyier doing one of the things he does better than almost anyone - collecting a set of expert opinions on a topic and putting them together. In this case it’s highlighting the many ways to skin a cat style a div to be centered and maintain aspect ratio.


CSS Variables

Fundamentals of CSS Variables. How they work, how to set up fallbacks, use them in JavaScript, and more. Doesn’t go super deep but a great primer if you haven’t used CSS variables yet.


Let’s Define CSS 4 

Fascinating discussion around whether it make sense to lump together a set of newer CSS features under the name ‘CSS 4’. From my perspective, it definitely feels like things in the CSS side of the world are more fragmented than in JS where you have a single annual spec revision. 


While You Weren’t Looking, CSS Gradients Got Better

Neat look at what is possible with CSS Gradients today. After last week’s article about using them to recreate images and this one looking at generating all sorts of interesting background designs I definitely want to make some more time to play around with them.


JavaScript

Setting Up API Mocking With Mirage JS And Vue.js

Simple, quick, easy API mocking is a huge enabler for writing front-end tests that go beyond simple unit tests, as well as facilitating development on a frontend while the backend is still being built. This is a great walkthrough of how to set this up.


Understanding Map and Set in JavaScript

Solid in-depth look at two lesser-used but extremely powerful data structures in JavaScript. The ordered property of maps, not to mention their ability to use non-string values as keys, definitely make them an interesting alternative to objects.


What Makes a Good Reactive System?

Fascinating look at different ways of implementing reactivity, and how different frameworks such as Angular, Vue, React, and Ember implement reactivity. 


Other Awesomeness

A Complete Guide to Data Attributes

Data attributes are something that I’ve used a lot less since moving to work almost entirely in fully featured front-end frameworks like Vue and React, but they are *incredibly* useful if you’re using more vanilla JavaScript as a way to annotate values on HTML that JavaScript can use. I haven’t used them as much for styling, but this post highlights some interesting approaches there as well. If you’re not embedding all of your functionality & styling in your JavaScript with a full-featured framework, do yourself a favor and take a look through this guide.


CSS Can Influence Screenreaders

Fascinating look at the various ways that CSS ends up influencing screen readers. It’s easy to think of CSS as purely display, but there are a variety of properties that influence content, and that influence plays out in how the screen reader parses the page.