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
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!
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.
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)
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!
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!