Lazy Loading Images with Vue.js Directives and Intersection Observer

When I think about web performance, the first thing that comes to my mind is how images are generally the last elements that appear on a page. Today, images can be a major issue when it comes to performance, which is unfortunate since the speed a website loads has a direct impact on users successfully doing what they came to the page to do (think conversation rates).
Very recently, Rahul Nanwani wrote up an extensive guide on lazy loading images…
The post Lazy Loading Images with Vue.js Directives and Intersection Observer appeared first on CSS-Tricks.

Link: https://css-tricks.com/lazy-loading-images-with-vue-js-directives-and-intersection-observer/

Styling the Gutenberg Columns Block

WordPress 5.0 is quickly approaching, and the new Gutenberg editor is coming with it. There’s been a lot of discussion in the WordPress community over what exactly that means for users, designers, and developers. And while Gutenberg is sure to improve the writing experience, it can cause a bit of a headache for developers who now need to ensure their plugins and themes are updated and compatible.
One of the clearest ways you can make sure your theme is …
The post Styling the Gutenberg Columns Block appeared first on CSS-Tricks.

Link: https://css-tricks.com/styling-the-gutenberg-columns-block/

What are Durable Functions?

Oh no! Not more jargon! What exactly does the term Durable Functions mean? Durable functions have to do with Serverless architectures. It’s an extension of Azure Functions that allow you to write stateful executions in a serverless environment.
Think of it this way. There are a few big benefits that people tend to focus on when they talk about Serverless Functions:

They’re cheap
They scale with your needs (not necessarily, but that’s the default for many services)
They allow you


The post What are Durable Functions? appeared first on CSS-Tricks.

Link: https://css-tricks.com/what-are-durable-functions/

Using Recompose to Share Functionality Between React Components

Sharing functionality between React components is a pretty common need. The concept is that we can establish the behavior in one place and then extend it across different components. Higher-Order Components are one way to do this. Yet, there is another way using a library called Recompose.

GitHub Repo
What is Recompose?
The documentation helps us answer that:
Recompose is a React utility belt for function components and higher-order components. Think of it like lodash for React.
Basically, it’s a …
The post Using Recompose to Share Functionality Between React Components appeared first on CSS-Tricks.

Link: https://css-tricks.com/using-recompose-to-share-functionality-between-react-components/

Material Design Animation Guides

I’ve seen two guides posted to Medium about animation in the last month that have seriously blown up!

Taras Skytskyi’s The ultimate guide to proper use of animation in UX
Jonas Naimark’s Motion design doesn’t have to be hard

There is a lot to learn in each one! The demonstration animations they use are wonderfully well done and each guide demonstrates an interesting and effective animation technique, often paired next to a less successful technique to drive the point home. …
The post Material Design Animation Guides appeared first on CSS-Tricks.

Link: https://css-tricks.com/material-design-animation-guides/

One Invalid Pseudo Selector Equals an Entire Ignored Selector

Perhaps you know this one: if any part of a selector is invalid, it invalidates the whole selector. For example:
div, span::butt {
background: red;
}
Even though div is a perfectly valid selector, span:butt is not, thus the entire selector is invalidated — neither divs nor span::butt elements on the page will have a red background.

Normally that’s not a terribly huge problem. It may even be even useful, depending on the situation. But there are plenty of situations …
The post One Invalid Pseudo Selector Equals an Entire Ignored Selector appeared first on CSS-Tricks.

Link: https://css-tricks.com/one-invalid-pseudo-selector-equals-an-entire-ignored-selector/