Friday Frontend: Imagining the Future Edition
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.
KBall from ZenDev
CSS & SCSS
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.
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!
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.
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.
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!
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.
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.
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!
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.
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.
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.
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.
(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!