Modern horizontal and vertical center

How to Lazy Loading anything

You probably know about loading="lazy" for images and iframes but what if you want to do something similar with a div or any of your components… To the rescue CSS with content-visibility: auto

content-visibility is a CSS property that controls whether and when an element’s content is rendered. It only renders the content of an off-screen component when it becomes on-screen. As an example I use it as sustituted of Svelte Lazy component what it’s great but I prefer as less dependences as possible. Keep in mind that as of the date of this post, this porwerful CSS property is not supported everywhere.

Getting a CSS Variable’s Value

getComputedStyle(document.documentElement)
  .getPropertyValue('--my-variable-name') // hsl(218, 52%, 23%)

You can use this easily in any JavaScript project. As an example, I’m using it with Svelte to switch my Plotly charts between light and dark mode.

Change radio button color and size

Responsive Time Series with JavaScript and Plotly

This is a basic but really useful (less is more) example of how to use Plotly to show a measure varying over time (live). You can resize the window here or on JSFiddle to check how it fits to the render area.