Hope you had a great last week of January! I’ve been battling a cold but otherwise enjoying some post-holiday energy and enthusiasm.

This week the article that stood out to me the most is completely impractical, but about imagining what the CSS of the future could look like. It’s both a prompt to look back at how far we’ve come, and a way to keep dreaming bigger.

There’s also a ton of more practical articles. I loved the CSS article on creating slanted images, got excited in the article looking forward to Vue 3, and also enjoyed looking at what may be coming for GraphQL in 2020.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Animating CSS Width and Height Without the Squish Effect

Great, short tutorial on how to animate width and height of objects in a way that is performant (yay!) and works properly with fun things like rounded corners.


Multi-line gradient links

Another great short how-to article, this one on creating gradient text for links, what the challenges are, and how it interacts with underlines. Love it!


Flexible Captioned Slanted Images

Delightful walkthrough of the process from design objective to implementation, using some fun tools like clip-path to create slanted images, blending new tooling and old (negative margins FTW) to create a very cool effect.


CSS Grid Template Areas In Action

I think grid template areas may be my favorite feature within CSS Grid, because they allow you to write such semantically beautiful CSS, naming this in a way that maps to their intended functionality. This is a great step by step introduction to them, the problem they solve, and how to use them.


10 Useful and Hard-To-Remember CSS Selectors

Some super useful tools in here. I love the nth-child pseudoselectors and have used them a ton. Highly recommend. Easy to get yourself in trouble with the sibling selectors, but there are also some cases where they are super helpful. And the :target selector is new to me, but looks very useful!


JavaScript

5 Best Practices to Write Quality Arrow Functions

The phrase ‘best practices’ is a little fraught, because best practices change so often, but I’d say these practices are solid advice for working with arrow functions.


Bundling JavaScript for Performance: Best Practices

Another “best practices” reference (cringe), but the author’s conclusions match my sense of the state of the art at this point in time. This is a quick look through the performance implications of different ways of bundling your JavaScript application with a pointer to the Right Way To Do IT ™ . If you’re starting from an application template builder like create-react-app or the Vue CLI chances are it already does this for you.


Loading React Components Dynamically with Hooks

This is a nice follow-on from the previous article, showing a very powerful pattern for dynamically loading components as they are needed using React hooks. Certainly for top-level components (pages) or other expensive & rarely used components, this type of approach can make a ton of sense.


What React Does (and Doesn't Do)

For folks who are deep in the ecosystem, it can be hard at times to remember how complex and opaque the front-end world seems. Experts may know immediately what tool to use for different types of problems, while a beginner or even intermediate can struggle - is this something for React? For pure JavaScript? A library? CSS? Documentation doesn’t always help, because it often pre-assumes a lot of knowledge. This article does a nice job of breaking down where the line is for React, what it handles and what it does not.


What to get Excited about in Vue 3.0

I was already excited about the composition API, but this article brought up some new pieces that I wasn’t aware of yet that have me even more pumped for Vue 3. Fragments, portals, and multiple v-models per component, I can’t wait!


Other Awesomeness

State of Visual Testing

Interesting summary of data on the use of visual testing. Unclear how they sourced the survey respondents (and their liable to be somewhat biased because it’s published by a visual testing company) but still some interesting insights. They want you to put your email in for the full survey results which is kind of obnoxious, but after you do they give a clean unauthorized link, so I’m going to help you sidestep their marketing list if you want and give the link to you here. 


What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes?

Short and sweet, worth a read-through. Width and height attributes on HTML can be super useful for smooth layout, but you should be aware of their limitations and how they interact with CSS.


Some Imaginary CSS

I’m not including this in the CSS section because it isn’t about something you can do today, but instead dreaming about how we might like to be able to manipulate our pages and applications with CSS in the future. Some very cool ideas in here.


GraphQL in 2020: What’s Next?

Having recently started using GraphQL for real after starting a new job, I have mixed feelings about it. The simplicity it creates on the client where you ask for exactly what you want in a single query comes with quite a bit of complexity on the backend to make sure you load those things in a performant way without over-fetching, and in debugging errant results. That said, it’s clear this paradigm is not going away, and it’s neat to see where folks who are deep in the ecosystem think it is going.


Lesser known things browsers can do in 2020 (audio)

(bias alert - I’m in this show) I linked out to a great resource two weeks ago on cool things browsers can do. Well, we recorded a JSParty episode digging into those things, thinking up some cool ways to use (and abuse) those browser apis. Enjoy!