DEV Community: Stephan Nijman

Mastering Smooth UI Transitions: The End of the "Height: Auto" Hack

Stephan Nijman — Wed, 25 Feb 2026 14:36:26 +0000

In this article, I want to show you how to finally solve one of the most annoying hurdles in CSS development: animating elements with dynamic heights.

If you’ve been building for the web for a while, you’ve likely felt the frustration of trying to animate an accordion or a dropdown. For years, we’ve had to rely on "hacks" like animating max-height to a massive, arbitrary number or bringing in a JavaScript library just to measure pixels. It works, but it’s never felt like "the right way" to me.

Today, we have two new properties interpolate-size and transition-behavior that handle the math and the logic natively. Let's walk through how to implement them.

What is the "Auto" Problem?

The issue was never the animation itself, but the math. Browsers are great at calculating the distance between 0px and 500px, but they traditionally couldn't calculate the midpoint between 0px and a keyword like auto.

When you toggled a class, the browser would simply "snap" to the final height because it didn't have a numeric path to follow.

1. Animating Intrinsic Sizes with interpolate-size

To fix the math, we use interpolate-size. I like to think of this as giving the browser permission to calculate the "uncalculatable."

The best way to implement this is to set it at the :root level. Since it's an inherited property, you enable it once and it works for every component on your site.

:root {
  /* This tells the engine to allow animations for keywords like auto or fit-content */
  interpolate-size: allow-keywords;
}

.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease-in-out;
}

.accordion-content.is-open {
  /* Thanks to the root property, this now slides smoothly */
  height: auto; 
}

2. Handling Discrete States with transition-behavior

Even with the height solved, we still have to deal with the display property. For a clean DOM and better accessibility, we usually want to use display: none when an element is hidden.

The problem? display is a discrete property—it’s either there or it isn't. Usually, if you toggle it, the element vanishes instantly, which kills your smooth height or opacity transition mid-flight.

transition-behavior: allow-discrete is the solution. It tells the browser to wait until the transition duration finishes before it actually flips the display switch.

.dropdown {
  display: none;
  opacity: 0;
  /* 'allow-discrete' ensures the element stays 'block' until the fade ends */
  transition: 
    display 0.3s allow-discrete, 
    opacity 0.3s;
}

.dropdown.is-open {
  display: block;
  opacity: 1;
}

3. Putting it into Practice: The "Right Way"

When we combine these, we get a component that is performant, accessible, and smooth. Here is how I usually structure a panel that needs to both slide and fade.

I’ll explain these transition values from left to right: first we define the property (like display), then the duration (0.5s), and finally the behavior (allow-discrete).

:root {
  interpolate-size: allow-keywords;
}

.panel {
  display: none;
  height: 0;
  opacity: 0;
  overflow: hidden;
  /* Walkthrough: display waits for the others, height slides, opacity fades */
  transition: 
    display 0.5s allow-discrete, 
    height 0.5s, 
    opacity 0.5s;
}

.panel.is-active {
  display: block;
  height: auto;
  opacity: 1;
}

4. Real-World Application and Support

I'm a big advocate for progressive enhancement. We don't need to wait for 100% support to start using these tools, as long as the fallback is acceptable.

transition-behavior: This is very stable now (about 89% support). It’s ready for prime time in Chrome, Firefox, and Safari.

interpolate-size: This is the newer piece of the puzzle (around 71%). It works beautifully in Chromium browsers, and the other engines are moving quickly to catch up.

If a user is on an older browser, they won't see a broken layout; the panel will just snap open instantly. In my experience, that's a perfectly fine fallback for the sake of writing cleaner, more maintainable CSS.

If you want to be extra careful, you can wrap your root opt-in in a feature query:

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}

This approach allows us to ditch the old 1000px max-height hacks and write code that finally does exactly what we intend. Give it a try on your next project—it’s a much more satisfying way to build.

Css: Scoped variables

Stephan Nijman — Wed, 21 Sep 2022 09:59:51 +0000

Follow me on Youtube

Css scoped variables

In this post/video we will take a look at css scoped variables. I already have a post where we had a look at how we can swap out text colors with Css Custom properties but in this one i want to talk about declaring our variables inline.

___

So let's say we have this basic markup below. A simple unordered list with 8 items.

<ul>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
</ul>

With some basic styling we can turn these items into a 9 by 8 grid.

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0;
  list-style: none;
}

li {
  margin: 0;
  aspect-ratio: 1 / 1;
  padding: 1.5rem;
  background-color: white;
}

But a static grid can be kinda boring, so lets animate them a bit by creating a simple keyframe animation.

@keyframes show {
  0% {
    opacity: 0;
    scale: 0.5;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

With these keyframes we animate from fully transparent to fully visable, and we change the scale from 50% to 100%. We can now add this animation to our items.

li {
  ...
  animation-name: show;
  animation-duration: 0.5s;
}

Here we set the animation name to be equal to that of the keyframes, and make the animation last for half a second.

li {
  ...
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: var(--delay, 0s);
}

If we set a animation delay that will be applied to all our list items. But we want to stagger the animation so instead of giving a hard coded value we set it by using a css custom property or variable with a default value of 0 seconds.

<ul>
  <li style="--delay: 0s;">Lorem</li>
  <li style="--delay: 0.1s;">Lorem</li>
  <li style="--delay: 0.2s;">Lorem</li>
  <li style="--delay: 0.3s;">Lorem</li>
  <li style="--delay: 0.4s;">Lorem</li>
  <li style="--delay: 0.5s;">Lorem</li>
  <li style="--delay: 0.6s;">Lorem</li>
  <li style="--delay: 0.7s;">Lorem</li>
  <li style="--delay: 0.8s;">Lorem</li>
</ul>

With the variable in place we can give it a unique value for each of our list items by placing it inline.

We could do the same with the nth-of-type pseudo selector, but that gets messy real quick, and it will fix the number of items we can have. (If you want to know more about pseudo selectors i have a article about that here)

Next we could use this same technique to change our background colors.

li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: var(--delay, 0s);
  background-color: hsl(var(--hue, 0), 50%, 50%);
}

Here we add a background color to our css, and use the hsl function to create the color. We also set the hue value with a variable called --hue! (Not sure about hsl? Check out my introduction video)

<ul>
  <li style="--delay: 0s; --hue: 100;">Lorem</li>
  <li style="--delay: 0.1s; --hue: 120;">Lorem</li>
  <li style="--delay: 0.2s; --hue: 140;">Lorem</li>
  <li style="--delay: 0.3s; --hue: 160;">Lorem</li>
  <li style="--delay: 0.4s; --hue: 180;">Lorem</li>
  <li style="--delay: 0.5s; --hue: 200;">Lorem</li>
  <li style="--delay: 0.6s; --hue: 220;">Lorem</li>
  <li style="--delay: 0.7s; --hue: 240;">Lorem</li>
  <li style="--delay: 0.8s; --hue: 260;">Lorem</li>
</ul>

We can then also set these variables inline in our html. And that would give us the animation as shown below.

Making it a bit more dynamic

Creating all these inline variable manualy can become a bit tedious. So it would be a bit more usefull if we can create these dynamically.

const listItems = Array(7).fill(null);

export default function App() {
  return (
    <main>
      <ul>
        {listItems.map((_val, i) => {
          return (
            <li key={i} style={{ "--i": i }}>
              List item
            </li>
          );
        })}
      </ul>
    </main>
  );
}

Here we have a very basic React app that creates a array 0f 7 empty items, and then llops over this array to make 7 list items. It also creates a inline variable called --i and sets it value to the current index.

li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: var(--i, 0s);
}

We can now use this variable in our css! Except that the snippet above wont do anything because the value of --i is set to an integer without any usable css unit!

li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: calc(var(--i, 0s) * 0.1s);
}

To give it that unit we can use the calc() function and multiply the value of --i with, in this case, 0.1s! This will make each item have a 0.1s longer delay then the previous one.

li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: calc(var(--i, 0s) * 0.1s);
  background-color: hsl(calc(var(--i, 0) * 40), 50%, 50%);
}

And again we can do the same for our background. Except in this case we multiply --i by 40 since the hue value is a number between 0 and 360 degrees, and this will give a nice rainbow effect like in the example below.

All done! I'm pretty sure you can come up with more creative use cases then making rainbows, but at least now you have this technique in your tool belt!

Subscribe to my Youtube channel
Buy me a coffee
Come chat on Twitter
And follow me here for more articles

Thanks for your precious time, and have an awesome day!

Css: Fluid youtube embed

Stephan Nijman — Wed, 14 Sep 2022 10:01:57 +0000

Follow me on Youtube

Fluid youtube embed

Earlier this week i read a tweet about fluid youtube embeds. In his example he used TailwindCss and since i'm not a very big css framework fan i thought it would be a good idea to make a post/video on how we can create this with plain vanilla css. So here we are! :)

Iframe embed

Youtube embeds are nothing more then a simple iframe, so lets add that as our markup.

<div class="fluid-yt">
  <iframe
    src="https://www.youtube.com/embed/IuhcUosPHMI"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
  ></iframe>
</div>

You can grab these iframe embeds straight of the youtube website and all we have to do here is remove the widht and height properties because those fixed values don't help us making things responsive.

We also wrap the iframe in a container div with a fluid-yt class. And then we can create this class in our css.

.fluid-yt {
    aspect-ratio: 16 / 9;
}

Here we create our fluid-yt class and give it an aspect-ratio of 16 / 9. Most videos will have that 16:9 ratio and this makes sure that our container adjusts it's height to fit.

Now we have to make our iframe follow the same size as our container.

.fluid-yt > iframe {
    width: 100%;
    height: 100%;
}

So we simply make the iframe take up 100% of the containers width and height, making it take up the same amount of space.

But if you are coding along you will notice that the video/iframe doesn't scale up. The default behavior of a div is to be as large as it can horizontally and be as small as it can vertically. In this case the height is leading and the div becomes just as high as the video and because of the 16 / 9 aspect ratio it has to shrink its width.

Lets fix that.

.fluid-yt {
    width: 100%;
    aspect-ratio: 16 / 9;
}

Here we force the container div to be 100% wide, and adjust it's height accordingly to adhere to the 16 / 9 rule.

We now have a fully responsive youtube video embed.

fixing the weird space.

While we are at it there is a small thing we have to fix to make things perfect. You might not see it right now, but there is actually a tiny bit of white space below our video. In most cases that wont matter, but if you need to align things this might trip you up.

.fluid-yt {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: pink;
}

So lets give our container a pink background so we can see this.

I'm not totally sure what the technical reason for this is, but the problem is caused by the fact that the iframe is an inline element, and thus, just like text, it gets that bit of space at the bottom. (The same is true for images, if you ever encounter the problem there)

.fluid-yt > iframe {
    display: block;
    width: 100%;
    height: 100%;
}

So to fix this issue we just have to turn our iframe into a block element by giving it a display of block.

There, now its ready to be reused in any future projects.

fallback for older browsers

The browser support for all of this is pretty good, but if you must support legacy browsers there is a dirty fallback you can add to your css. I borrowed this snippet from this github repo by Jaydan Urwin.

@supports not (aspect-ratio: 16 / 9) {
  .fluid-yt { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
  }
  .fluid-yt > iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
  }
}

All done! You can also check out this codepen for a working example.

Subscribe to my Youtube channel
Buy me a coffee
Come chat on Twitter
And follow me here for more articles

Thanks for your precious time, and have an awesome day!

Css Grid: Stacking elements

Stephan Nijman — Wed, 07 Sep 2022 10:10:44 +0000

Follow me on Youtube

Stacked elements

What do you mean by "stacked elements"!? Well, as you can see in the image below i use this term for elements that are stacked in z space! Like Photoshop layers as you will! In this case the layers are the image, the gradient and then the text.

In this article/video i want to show you an elegant way of stacking these elements! But instead of using floats or position absolute we are going to use the power of css grid.

Lets have a look at this html snippet.



<div class="card stack">
    <div class="img"></div>
    <div class="gradient"></div>
    <div class="title">
        <h2>Lorem ipsum dolor sit amet.</h2>
    </div>
</div>

Here we have a card "component" that has three (div) children. One to hold an image, on for a gradient and one for the text that should be placed over the image.

Also notice that the card element has an extra class of "stack". We are going to use this class to create a small reusable utility.

So lets add the css for that.



.stack {
    display: grid;
}

This turns our stack element into an actual grid that is one row high and one column wide. An important concept here is that even though our grid now has only one "cell" it has 4 grid lines like shown in the image below.

Here you can see that our grid has a grid line for the left, top, right and bottom side. We can place grid items in between these grid lines by giving them a css grid-area property.



.stack > * {
  grid-area: <left> / <top> / <right> / <bottom>;
}

To place our "layers" we have to tell the grid item between which grid lines it should place itself by giving it a grid-area property and giving it the four grid line numbers. The example above shows you what the order of these values should be.



.stack > * {
  grid-area: 1 / 1 / 2 / 2;
}

With the code above we tell all the child elements to place them self between the first en second horizontal grid lines, and between the first en second vertical grid lines.

Because we place them at the same location in the grid, they will be placed perfectly on top on one another.

We can shorten the grid-area value by only giving it the starting grid lines. Grid will assume that we only want to cover the adjacent grid cell.



.stack > * {
  grid-area: 1 / 1;
}

Pushing the text to the bottom.

In the example layout the text is positioned at the bottom of the image. for this task we can use grid's align-self



.card .title {
    align-self: end;
}

Here we added the align-self property with a value of end to the title div, which will push anything inside this element to the bottom.

Subscribe to my Youtube channel
Buy me a coffee
Come chat on Twitter
And follow me here for more articles

Thanks for your precious time, and have an awesome day!

Things we can learn from "cheating" the 100devs BBC homepage assignment.

Stephan Nijman — Mon, 14 Feb 2022 10:39:17 +0000

It's not really cheating

If you have spend any time on tech twitter lately you have probably noticed the 100devs hashtag, and people being a bit "loud" about having to build the BBC homepage using floats only. Now i'm not part of the 100devs cohort but i got curious and it turns out it's actually a pretty interesting layout. So i build the thing anyway.

Since i didn't have to keep to the assignment i could throw all kinds of modern css magic at it, and in this article i want to share with you some of the more interesting things i used.

To be clear. I'm not saying these are the best ways of doing this, they are just the ways i did it.

Enough talk... let's write some code...

Placing the text over the images

One of those interesting things that i got asked about after i shared my results on twitter is how i placed the text on top of the images. Instead of using floats or position absolute i used the power of css grid.

<div class="grid">
  <div class="grid__image">
    <img src="https://unsplash.it/500/300" alt="">
  </div>
  <div class="grid__content">
    Content goes here
  </div>
</div>

With this html we create a container div with a class of grid, and two inner div's called grid_image and grid_content. These inner divs are the elements we will place on top of eachother

.grid {
  display: grid;
  grid-template: 1 / 1;
}

By attaching the css above to the .grid div we create our actual grid that is one row high and one column wide. An important concept here is that even though our grid now has only one "cell" it has 4 grid lines like shown in the image below.

Here you can see that our grid has a grid line for the left, top, right and bottom side. We can place grid items in between these grid lines by giving them a css grid-area property.

.grid__image {
  grid-area: <left> / <top> / <right> / <bottom>;
}

To place the items we have to tell the grid item between which grid lines it should place itself by giving it a grid-area property and giving it the four grid line numbers. The example above shows you what the order of these values should be.

.grid__image {
  grid-area: 1 / 1 / 2 / 2;
}

.grid__content {
  grid-area: 1 / 1 / 2 / 2;
}

With the code above we tell both the .grid_image and the .grid_content div's to place them self between the first en second horizontal grid lines, and between the first en second vertical grid lines.

Because we place them at the same location in the grid, they will be placed perfectly on top on one another.

Pushing the text to the bottom.

In the BBC layout the text is positioned at the bottom of the image. In my demo i used flex for this, but later on i realized that i could have used grid's align-self for this task.

.grid__content {
  grid-area: 1 / 1 / 2 / 2;
  align-self: end;
  padding: 1rem;
}

Here we added the align-self property with a value of end, which will push anything inside the .grid__content to the bottom of the div. We also give it a padding of 1rem so the text has a little breathing room.

Change the stacking order.

The order of the html determines the stacking order of your items. If you ever run into a situation where you cant change the html but want to change the stacking order, you can use z-index natively within a grid. (No need to set a position value).

.grid__content {
  grid-area: 1 / 1 / 2 / 2;
  align-self: end;
  padding: 1rem;
  z-index: 10
}

Creating the responsive hero grid

The thing that made me want to build this layout was the 5 image grid/hero header at the top of the page. Since it was an exercise i tried a view different approaches and ended up with a grid system as described below.

<div class="hero">
  <div class="hero__item"></div>
  <div class="hero__item"></div>
  <div class="hero__item"></div>
  <div class="hero__item"></div>
  <div class="hero__item"></div>
</div>

Although simplified here the html is pretty straightforward. Its just a .hero container with 5 .hero__item divs, To get the grid on desktop i used a grid-template.

.hero {
  display: grid;
  grid-template:
     "large large small-one small-two" auto
     "large large small-three small-four" auto / 1fr 1fr 1fr 1fr;
  gap: 0.5rem 1rem;
}

Here we first make the .hero div a grid container by setting the display mode to grid.

We then define the grid-template. This might be a bit confusing at first but basically what happens here is that the template is constructed of two lines. Each line creates a couple of named grid-areas going from left to right. Each line can end with a height for that row (Set to auto in this case) and the last line can have a height, and it can define the sizes for each column. In this example we set each column to have a width of 1fr.

This grid-template creates a "virtual" grid like shown in the image below.

Note that it has four areas with the name large! To place our .grid__items onto the grid, we have to give all five of them a grid-area to be placed in.

.hero__item:nth-of-type(1) {
  grid-area: large;
}

.hero__item:nth-of-type(2) {
  grid-area: small-one;
}

.hero__item:nth-of-type(3) {
  grid-area: small-two;
}

.hero__item:nth-of-type(4) {
  grid-area: small-three;
}

.hero__item:nth-of-type(5) {
  grid-area: small-four;
}

Here we use the :nth-of-type(n) pseudo selector to select each item seperatly without the need to give them a specific class. We then set the grid-area properties to align with the names we defined earlier in our grid template.

Note that the first .grid__item gets a grid-area "large". And since that name maps to four grid-areas in out grid-tempalte it will cover all four of them, resulting in a layout like shown in the image below.

And to make it responsive we just need some media queries to move the grid area's around.

.hero {
  display: block;
  width: 100%;
}

@media screen and ( min-width: 568px ) {
  .hero {
    display: grid;
    grid-template:
      "large large" auto
      "small-one small-two" auto
      "small-three small-four" auto / 1fr 1fr;
    gap: 0.5rem;
  }
}

@media screen and ( min-width: 1000px ) {
  .hero {
    grid-template:
      "large large small-one small-two" auto
      "large large small-three small-four" auto / 1fr 1fr 1fr 1fr;
    gap: 0.5rem 1rem;
  }
}

Here we take a mobile first approach and set the whole thing to display block by default.

We then use a media query that kicks in at a screen width of 568px and sets the container to display grid, and defines the grid areas for tablet users like shown in the image below.

And finally we use another media query for screens bigger than 1000px and change the grid-template to the one we created earlier.

All this combined creates a nice grid that changes according to the width of our screen.

Tip: If you want to learn more about css grid, or need a more visual explanation, i can highly recommend you check out this and other videos by Kevin Powell

Hiding the images on mobile

Another aspect of the layout that required a creative solution is the fact that most of the images disappear on mobile devices.

Hiding images in itself isn't all that hard. We can just set a display: none; and call it a day! But our mobile users wont be very happy with us since the browser is still gonna load the images regardless.

So i reached for the html picture element. This picture element lets us define image sources for different screen sizes. Like shown below.

<picture>
  <source srcset="https://unsplash.it/id/101/300/169" media="(min-width: 1000px)">
  <source srcset="https://unsplash.it/id/101/500/350" media="(min-width: 568px)">
  <source srcset="/bbc/hidden.gif" media="(min-width: 1px)">
  <img src="https://unsplash.it/id/101/500/350" alt="…" loading="lazy">
</picture>

The magic here is that we define images for desktop, tablet and mobile screen sizes, but for the mobile view we give it a tiny 1px by 1px transparent gif image. This image will not only be invisible in our layout, but since we use the same file in every instance the browser only has to download this tiny 43 byte image once. Saving our user a large amount of bandwidth and speeding up our webpage.

Tip: Mike Masey has a article describing a similar technique more in depth!

Hiding parts of the navigation

As you can see in the little video at the top of this article i tooks some creative liberty with the navigation by adding an overlay menu and hiding parts of the horizontal nav when the screen size gets smaller.

To do this i had to hide a range of menu list items. To do so i used this funky looking css selector.

.header__list li:nth-child(n+5):nth-child(-n+9) {
  display: none;
}

Here we select all li's inside the .header__list that meet the requirements of the two nth-of-type pseudo selectors. The first nth-of-type selects all li's starting from the fifth, and the second selects all li's ending at the ninth. So everything in between these numbers will be selected.

We then set them to display: none; by default.

.header__list li:nth-child(n+5):nth-child(-n+9) {
  display: none;
}

@media screen and ( min-width: 568px ) {
  .header__list li:nth-child(n+5):nth-child(-n+7) {
    display: inline-flex;
  }
}

@media screen and ( min-width: 1000px ) {
  .header__list li:nth-child(n+8):nth-child(-n+9) {
    display: inline-flex;
  }
}

To show more items on tablet we add a media query for screen sizes bigger then 568px. Inside this media query we select li number 5 till 7 and set there display mode to inline-flex to make them visible again.

We also do the same at 1000px with another media query and select li numbers 8 till 9 and set their display mode to inline-flex as well.

This will make more items show up on bigger screens then on small/mobile devices.

Tip: if you want to know more about css pseudo-selectors i have a video on youtube that explains the basics. And
Jhey Tompkins has a great video about more advanced use cases.

Changing the text color for the navigation

In this layout, like with most sites there is a lot of switching between black and white text colors. The page text is black but the text in the navigation and over the iamges is all in white.

Back in the day we would have to set these colors for every element, but with the arrival of css custom properties we can do all this with one line of code per section.

:root {
  --text-color: #111111;
}

Here we declare a custom property called --text-color on the root element and set its value to a dark grey color.

h1,
h2,
h3,
p,
a {
  color: var(--text-color);
}

Next we use this variable to set the color for our text elements using the css var() function.

This will make all the text on our page that dark grey color. But in the navigation/header of our page we need our text to be white.

.header {
  --text-color: #ffffff;
}

Since we have all our text colors set up using the custom property we can re declare it with a new color for that section alone. This will make every element inside the header use that white color instead of the dark grey one.

Tip: I have a youtube video explaining this technique in more detail!

Thats it...

Even though this wasn't my actual homework i had a lot of fun with this one. Since i wasn't on the clock i could experiment with different approaches and other things then usual. If nothing else i hope this article has inspired you to try this yourself.

It can be hard to find interesting things to make so you could always check out what the 100Devs people are doing (don't forget to show them some support), or you can check out the Frontend Mentor website. They have a lot interesting projects with ready made assets.

You can view a live version of my BBC homepage recreation here, and all the source code for this little project is available on my
GitHub

If you liked this article don't forget to follow me on Twitter or here on Dev.to @Vanaf1979 for more things to come.

Thanks for reading, stay safe and stay the right kind of positive!

Lets add a third dimension to our website. Getting started with Three(Js).

Stephan Nijman — Mon, 07 Feb 2022 10:39:22 +0000

Create a 3D scene right on you webpage.

If you don't know what Threejs is i've created a example of a playable 3d Chess board that runs in the browser and could live on your webpage. And if that isn't enough to get you excited the ThreeJS homepage has a ton of amazing examples.

Now if you have never worked with 3D software, or ThreeJs, it can all seem very daunting at first because there are a lot of moving parts. We will need a scene were our objects will live, then we need a camera, 3D objects, Controls, Lights and a Renderer that turns our 3D into 2D that our monitor can display. I know it made my head spin for a bit.

So in this article i want to ease you through the moving parts of ThreeJs. And by the end of this article you will have a nice skeleton app that you can start messing with. The final result will look something like this.

This article is not meant as a tutorial, but as a low level getting started, so you can go and explore on your own.

But enough talk. Let s get started.

Dependency imports

Like with any project we are gonna need some libraries to work with. In this case we need ThreeJs itself and Three-Controls. So lets install them with this npm command.

npm install three three-controls

And then we have to import these into our project like shown below.

import * as THREE from "three";
import * as ThreeControls from "three-controls";

Basic good stuff :).

Skeleton app

To give our app some organization we are gonna split things up a bit into three functions. So lets paste the code below into our project.

let scene, camera, renderer, controls;

const init = () => {};

const animate = () => {
  render();
};

const render = () => {};

init();
animate();

First we declare some variables for scene, camera, renderer and controls. We do this outside of our functions so that each function can have access to them.

The init function will be responsible for creating our 3D scene and objects. The animate function will run as a recursive function so that we can animate things and finaly the render function we be responsible for rendering things to the screen.

And of course we have to call these functions at the end.

Create a scene

Before we can display any 3D objects, we first need a Scene for our objects to live inside. If you ever used any 3D software you can think of this as your viewport. The scene is basically a container the lets us add and position 3D objects inside of.

const init = () => {
  /*
   * 01 - Create the scene.
   * Docs: ttps://threejs.org/docs/#api/en/scenes/Scene
   */
  scene = new THREE.Scene();
};

Here we simply create a new instance of THREE.Scene and assign it to the scene variable we declared at the top of our project.

Create a camera

Next we need a camera in our scene that the renderer will use to determine what it should display to the screen.

const init = () => {
  /*
   * 02 - Create Camera.
   * Docs: https://threejs.org/docs/#api/en/cameras/PerspectiveCamera
   * Camera: https://threejs.org/docs/#api/en/cameras/Camera
   */
  camera = new THREE.PerspectiveCamera(
    43,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.lookAt(0, 0, 0);
  camera.position.set(20, 20, 20);
};

So we create a new instance of THREE.PerspectiveCamera and assign it to the camera variable, and we pass it a config object that determines the frustum. Frustum culling is a entire topic of its own, but basicaly it determines what the camera is able to seen as far as height, width and depth.

We then call the lookAt method and pass it 0,0,0 for the x,y and z coordinates. This makes sure that the camera will always point to the center of our scene.

And lastly we call the set method on it's position. This moves our camera away from the center. So that it can actualy see the center instead of sitting on it.

Create a renderer

Next we need a renderer. A renderer's job is to turn our 3D scene into a 2D image that our monitors can display. So lets add one.

const init = () => {
  /*
   * 03 - Create renderer.
   * Docs: https://threejs.org/docs/#api/en/renderers/WebGLRenderer
   */
  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
};

With this snippet we create a new instance of THREE.WebGLRenderer, and pass it a config object. The alpha setting makes sure that our canvas will have a transparent background, so we can set the background color ourselfs using css. And we set antialias to true. This will make sure that we dont have any ugly sharp edges on our objects.

We then call setSize on the renderer so that it knows what size image we want to render. In this case we just pass it the width and height of our viewport. But if you are rendering to an element of your webpage you will have to change these to the desired dimensions.

Add render to document

Now that we have a renderer we have to add it to the document so we can see it..

const init = () => {
  /*
   * 04 - Append to document.
   */
  document.body.appendChild(renderer.domElement);
};

The renderer provides a convenient domElement that we can use. And in this example we append that to the body of the document. Again if you are rendering to a specific element you will have to append the renderer.domElement to that element.

Update on window resize

There is nothing we can do to prevent users from resizing their window, so we have to make sure we update our renderer and camera when this happens.

const init = () => {
  /*
   * 05 - Update renderer on window resize.
   */
  window.addEventListener("resize", () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  });
};

To do that we add an event listener to the window, and when this fires we update our renderer's size, the camera's aspect ratio and we update the camera's ProjectionMatrix.

Add controls

3D is no fun if we cant move around our scene, so lets add some controls to make that possible.

const init = () => {
  /*
   * 06 - Create OrbitControls.
   * Docs: https://threejs.org/docs/#examples/en/controls/OrbitControls
   */
  controls = new ThreeControls.OrbitControls(camera, renderer.domElement);
};

To enable these controls we have to create a new instance of ThreeControls.OrbitControls and pass it our camera and renderer.domElement so that it knows what to control.

These controls will allow us to zoom and pan around our scene by dragging our mouse or using our mouse wheel.

Create a (cube) geometry

Now lets create something that we can look at. First we are gonna have to create a geometry. A geometry object contains the mathematical representation of an object. in this case we will create a simple cube.

const init = () => {
  /*
   * 07 - Create a geometry.
   * Docs: https://threejs.org/docs/#api/en/geometries/BoxGeometry
   * BufferGeometry: https://threejs.org/docs/#api/en/core/BufferGeometry
   */
  const cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
};

This line of code create a new instance of the THREE.BoxGeometry and passes it 5 for the x, y and z dimensions. This will result in a cube with a size of 5 units.

Create a material

To see our new cube we have to give it a material. A material determines what the colors on the outside of the cube will look like.

const init = () => {
  /*
   * 08 - Create a material.
   * Docs: https://threejs.org/docs/#api/en/materials/MeshLambertMaterial
   * Materials: https://threejs.org/docs/#api/en/materials/Material
   */
  const whiteMaterial = new THREE.MeshLambertMaterial(0x7f7f7f);
};

Here we create a pure white material by creating a new THREE.MeshLambertMaterial instance, and passing it a white color code.

Combine Geometry and Material into a Mesh

Next we have to combine our cube geometry with our white material into a mesh object that we can place into our scene.

In general all visible objects in our scene will be a combination of a geometry and a material combined into a mesh. So this is a repeating process for most of our objects. Keep in mind that we can reuse our geometries and materials to make other combinations.

const init = () => {
  /*
   * 09 - Create a mesh.
   * Docs: https://threejs.org/docs/#api/en/objects/Mesh
   */
  const cubeMesh = new THREE.Mesh(cubeGeometry, whiteMaterial);
  cubeMesh.position.set(0, 0, 0);
  scene.add(cubeMesh);
};

Here we create a new THREE.Mesh instance and pass it our cubeGeometry and whiteMaterial to create a cubeMesh.

Then we set its position to 0,0,0 (center of scene) and add it to the scene with the scene.add() method.

Add ambient lighting

Our scene now has a cube but in order to see it we are going to need some lights as well. So lets add some.

const init = () => {
  /*
   * 10 - Add ambient light to the scene
   * Docs: https://threejs.org/docs/#api/en/lights/AmbientLight
   * Light: https://threejs.org/docs/#api/en/lights/Light
   */
  const ambient_light = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambient_light);
};

Here we create a THREE.AmbientLight instance, and pass it the color and intensity of the light. And we add that to the scene.

Add a point-light

AmbientLight creates an even lighting throughout our scene meaning every side of our cube will have the same amount of light. To get a sence of 3D we will also need a bit of directional light. The easiest way to do that is by adding an extra point-light.

const init = () => {
  /*
   * 11 - Add point-light to the scene
   * Docs: https://threejs.org/docs/#api/en/lights/PointLight
   * Light: https://threejs.org/docs/#api/en/lights/Light
   */
  const light = new THREE.PointLight(0x00baff, 1, 100);
  light.position.set(15, 15, 15);
  scene.add(light);
};

So lets create a new THREE.PointLight instance passing it a color, intensity and distance. The distance is the maximum range the light can shine.

And we move it 15 units from the center of the scene.

Animate the things

In order to have things moving we have to make it so that ThreeJs can render subsequent frames. To make that happen we add an animate function to our project.

const animate = () => {
  requestAnimationFrame(animate);
  render();
};

In this function we call the requestAnimationFrame function and pass it our animate function, basicaly creating a recursive loop. And in the animate function we also call the our render function making ThreeJs render output on every frame.

Rendering

Now all that's left is to do the actual rendering. For this we add a render function (The one thats called from our animate function).

const render = () => {
  renderer.render(scene, camera);
};

Within this function we call the rendor method from our renderer and pass it the scene we created and our camera.

Running the code

Finaly we can call our init and animate functions to get things going.

init();
animate();

And now we have a completed skeleton ThreeJs app.

Completed code.

To safe you the trouble of piecing together all the code i made it available below for you to grab. Or if you want to be super lazy, scroll down for a starter project! :p

import * as THREE from "three";
import * as ThreeControls from "three-controls";

let scene, camera, renderer, controls;

const init = () => {
  /*
   * 01 - Create the scene.
   * Docs: ttps://threejs.org/docs/#api/en/scenes/Scene
   */
  scene = new THREE.Scene();

  /*
   * 02 - Create Camera.
   * Docs: https://threejs.org/docs/#api/en/cameras/PerspectiveCamera
   * Camera: https://threejs.org/docs/#api/en/cameras/Camera
   */
  camera = new THREE.PerspectiveCamera(
    43,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.lookAt(0, 0, 0);
  camera.position.set(20, 20, 20);

  /*
   * 03 - Create renderer.
   * Docs: https://threejs.org/docs/#api/en/renderers/WebGLRenderer
   */
  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);

  /*
   * 04 - Append to document.
   */
  document.body.appendChild(renderer.domElement);

  /*
   * 05 - Update renderer on window resize.
   */
  window.addEventListener("resize", () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  });

  /*
   * 06 - Create OrbitControls.
   * Docs: https://threejs.org/docs/#examples/en/controls/OrbitControls
   */
  controls = new ThreeControls.OrbitControls(camera, renderer.domElement);

  /*
   * 07 - Create a geometry.
   * Docs: https://threejs.org/docs/#api/en/geometries/BoxGeometry
   * BufferGeometry: https://threejs.org/docs/#api/en/core/BufferGeometry
   */
  const cubeGeometry = new THREE.BoxGeometry(5, 5, 5);

  /*
   * 08 - Create a material.
   * Docs: https://threejs.org/docs/#api/en/materials/MeshLambertMaterial
   * Materials: https://threejs.org/docs/#api/en/materials/Material
   */
  const whiteMaterial = new THREE.MeshLambertMaterial(0x7f7f7f);

  /*
   * 09 - Create a mesh.
   * Docs: https://threejs.org/docs/#api/en/objects/Mesh
   */
  const cubeMesh = new THREE.Mesh(cubeGeometry, whiteMaterial);
  cubeMesh.position.set(0, 0, 0);
  scene.add(cubeMesh);

  /*
   * 10 - Add ambient light to the scene
   * Docs: https://threejs.org/docs/#api/en/lights/AmbientLight
   * Light: https://threejs.org/docs/#api/en/lights/Light
   */
  const ambient_light = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambient_light);

  /*
   * 11 - Add point-light to the scene
   * Docs: https://threejs.org/docs/#api/en/lights/PointLight
   * Light: https://threejs.org/docs/#api/en/lights/Light
   */
  const light = new THREE.PointLight(0x00baff, 1, 100);
  light.position.set(15, 15, 15);
  scene.add(light);
};

const animate = () => {
  requestAnimationFrame(animate);
  render();
};

const render = () => {
  renderer.render(scene, camera);
};

init();
animate();

Starter project.

To make your live even easier i have whipped up a ThreeJs starter project. It contains all the code from this article plus a bit of Vite magic to get you up and running fast.

Simply Clone. Install and run.

vanaf1979 / three-vite-skeleton

A threeJs and Vite skeleton project

ThreeJs Vite Skeleton project

This hre is a small skeleton starter project from my tutorial over at dev.to.

It includes Three, Three-Controls and Vite.

You can clone this repo, run 'npm install' and the 'npm run dev'.

View on GitHub

Your welcome! :p

Thats it...

Now that you came this far go play around with it, Check out the examples on the ThreeJs homepage, dive into the docs, and explore your own ideas. I would love to see what you come up with so leave a comment if you made something cool!

If you all like this article i might write up some more about ThreeJs goodies. I'm already thinking about a follow up on how you can bring Blender3D objects directly into the browser. So don't forget to follow me on Twitter or here on Dev.to @Vanaf1979 for more things to come.

Thanks for reading, stay safe and stay the right kind of positive!

Tried Zustand yet? Lets use it to build yet another React todo app!

Stephan Nijman — Mon, 31 Jan 2022 11:23:57 +0000

If you spend any time on twitter or reddit you will have noticed that there are a lot of people out there that want to tell you what react state solution you should use. I'm not gonna do that here! I just want to show you my favorite solution, and hopefully you will like it and learn a thing or two.

If we step away from the "classic setup" for a second. Instead of pushing everything to a giant Redux store, consider handling navigational state with a router (Or NextJs/RemixJs), Api date with ReactQuery and small things with local state! In that case we are often left with a minimal amount of global state that we have to deal with our self. And Zustand is a perfect library for that.

But enough talk... lets write some code.

A simple todo app.

For this example we are going to build yet another todo app. I'm sorry, it's not very creative but it is a pretty good usecase.

Below we have a very basic skeleton todo app.

export default function App() {
  const todos = [
    { id: 0, title: "Clean desk" },
    { id: 0, title: "Make todo app" }
  ]

  return (
    <div className="App">
      <h1>Todos</h1>

      <form>
        <input type="text" name="newtodo" />
        <input type="submit" value="add todo" />
      </form>

      <ul>
        {todos.map((todo) => {
          return (
            <li key={todo.id}>
              <span>{todo.title}</span>
              <button>Done</button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

It's just a little form for adding todos, and a Array.map() that loops over the todos constant to list out the todo's.

Since this article is about Zustand and not css styles, i'm gonna skip over those. But you can grab mine here if you like.

Adding Zustand to our project

Installing Zustand into our project is as simple as running one of the following commands on our command line.

# cd path/to/your/project

npm install zustand

# or

yarn add zustand

Create the store

Now for the fun part. Let's create our Zustand store. To do so we create a new file called todoStore.js and add the code below.

import create from "zustand";

const useTodoStore = create((set) => ({
    todos: [
      { id: 0, title: "Clean desk" },
      { id: 0, title: "Make todo app" }
    ],
  })
);

export default useTodoStore;

In this snippet we first import a function called create() from the Zustand library. Next we declare a constant "useTodoStore" and assign the create function to it.

The create function accepts a callback function that has to return a object containing our store. In this case we only add a todos array to this object, and this array contains two object being a single todo each. You can consider this our default state. In a real world app this array would probably be empty.

And let's not forget to export useTodoStore so we can use it in the rest of our app.

Add todos

Next we need a function in our store that will be responsible for adding todos.

import create from "zustand";
import { v4 as uuidv4 } from "uuid";

const useTodoStore = create((set) => ({
    todos: [
      { id: 0, title: "Clean desk" },
      { id: 0, title: "Make todo app" }
    ],
    addTodo: (title) =>
      set((state) => ({
        todos: [...state.todos, { id: uuidv4(), title }]
      })),
  })
);

export default useTodoStore;

Here we add another entry to our store object called addTodo and we make it equal to an arrow function. This arrow function accepts a function called set() that we recieve from the create function.

Inside our new arrow function we call the set function and pass that yet another arrow function that in turn recieves the current state, and it has to return a new section of the state we want to change. So in this case we return a new object that has a todo entry and we spread the current todo state and tag on a new todo object.

For the id of the new todo we use a function called uuidv4() (That we added as a new import at the top) (npm install uuid) to generate a unique id, and for the title we use the title that got passed to our addTodo function.

State/Store functions can sometime get a bit messy, but i hope my explenation got you through this one. At least i tried to keep it as simple as possible.

Remove todos

We also need the option to remove todos from the list, so lets add another function to our store to do just that.

import create from "zustand";
import { v4 as uuidv4 } from "uuid";

const useTodoStore = create((set) => ({
    todos: [
      { id: 0, title: "Clean desk" },
      { id: 0, title: "Make todo app" }
    ],
    addTodo: (title) =>
      set((state) => ({
        todos: [...state.todos, { id: uuidv4(), title }]
      })),
    removeTodo: (id) =>
      set((state) => ({
        todos: state.todos.filter((todo) => todo.id !== id)
      }))
  })
);

export default useTodoStore;

This new removeTodo function has the same structure as the addTodo function, but in this case we use the Array.filter method to remove the todo by checking if the id is the same as the id passed to this removeTodo function.

Tip: If you want to know more about the javascript Array.filter() method, i have a youtube video covering this and other array methods in the context of api response data: "Useful javascript array methods for dealing with api data"

Import useTodoStore

Now that we have our store in place lets use it inside our app, by first importing it in our app.js file.

import useTodoStore from "./todoStore.js";

Render todo's from the store

Next we want to grab our todos state from our store and use it to list out the todo's

import useTodoStore from "./todoStore.js";

export default function App() {
  const todos = useTodoStore((state) => state.todos);

  return (
    <div className="App">
      <h1>Todos</h1>

      ...form...

      <ul>
        {todos.map((todo) => {
          return (
            <li key={todo.id}>
              <span>{todo.title}</span>
              <button>Done</button>
            </li>
          );
        })}
      </ul>

    </div>
  );
}

Se here we create a new constant called todos and we set it equal to our imported useTodoStore function. The useTodoStore accepts an arrow function that accepts the current state and has to return the part of the state we want to use. So in this case our arrow function should return state.todos.

Since we already had the logic for mapping the todos we dont have to change anything and our state todo items should be listed!

Wire up the add todo form

To be able to add todos we have to wire up our form to the store. For this we have to grab our addTodos function from the store.

import useTodoStore from "./todoStore.js";

export default function App() {
  const todos = useTodoStore((state) => state.todos);
  const { addTodo } = useTodoStore((state) => ({
    addTodo: state.addTodo
  }));

  const addtodoHandler = (e) => {
    e.preventDefault();
    const input = e.target["newtodo"];
    if (input.value.trim() > "") {
      addTodo(input.value);
      input.value = "";
      input.focus();
    }
  };

  return (
    <div className="App">
      <h1>Todos</h1>

      <form onSubmit={addtodoHandler}>
        <input type="text" name="newtodo" />
        <input type="submit" value="add todo" />
      </form>

      ...List...

    </div>
  );
}

In this case we create another call to useTodoStore, and have it return a object that contains our addTodo function from the store. We then use object de-structuring to grab this function from the returned object.

We return a object here, because later on we also want to grab our removeTodo function from the store, and this way we can do that in one go.

We also create a new function called addTodoHandler that grabs the entered todo title from the event, checks if the title isn't an empty string, and finally we call the addTodo function to push our new todo to the store.

To keep things tidy we also clear out the form field and focus it again so we can continue adding todos.

To call this new function we add it on to onSubmit attribute of our form.

Because the addTodo function updates the state in our store, our list should update immediately like shown in the example below.

Remove todo button

Ofcourse we also want to remove todos when they are done, so lets wire up our done buttons to remove them.

import useTodoStore from "./todoStore.js";

export default function App() {
  const todos = useTodoStore((state) => state.todos);
  const { addTodo, removeTodo } = useTodoStore((state) => ({
    addTodo: state.addTodo,
    removeTodo: state.removeTodo
  }));

  ...addtodoHandler...

  return (
    <div className="App">
      <h1>Todos</h1>

      ...Form...

      <ul>
        {todos.map((todo) => {
          return (
            <li key={todo.id}>
              <span>{todo.title}</span>
              <button
                onClick={() => {
                  removeTodo(todo.id);
                }}
              >
                Done
              </button>
            </li>
          );
        })}
      </ul>

    </div>
  );
}

Here we make it so that our useTodoStore function also returns the state.removeTodo function, and we grab it by adding it to our object de-structuring.

To use it we add an onClick attribute to our done button and add a arrow function to it that calls our removeTodo function passing it the todo.id.

Now when we click our button the removeTodo function gets called and it will remove the todo with that id from the store, and thus from our view.

Somewhat persist our data

The downside of using in memory state is that it disappears when we reload the page. This means we have to either push our state to a database, or in this case we can get away with adding a bit of localStorage.

One of the nice things about Zustand is that it has this functionality sort of build in. So lets add that.

Tip: If you want to learn how to use localstorage yourself my buddy Chris has written up this amazing article: "Vanilla JavaScript localStorage"

import create from "zustand";
import { persist } from "zustand/middleware";
import { v4 as uuidv4 } from "uuid";

const useTodoStore = create(
  persist((set) => ({
    todos: [
      { id: 0, title: "Clean desk" },
      { id: 0, title: "Make todo app" }
    ],
    addTodo: (title) =>
      set((state) => ({
        todos: [...state.todos, { id: uuidv4(), title }]
      })),
    removeTodo: (id) =>
      set((state) => ({
        todos: state.todos.filter((todo) => todo.id !== id)
      }))
  }))
);

export default useTodoStore;

In this snippet we grab another function called persist from "zustand/middleware". And all we have to do is inside our create function wrap our callback function with this persist function.

Now when we add todos the current state gets pushed to the browsers localStorage and when we refresh that page Zustand auto populates with the date that got stored.

If you want you could pretty easily create your own Zustand middleware and use that to persist your data to a remote database.

I might create an article on that as well so don't forget to follow me!

Completed todo app

You can check out this CodeSandBox for a finished version of this little todo app.

Thats it...

That's how easy it is to add some global state to your React app with Zustand! I hope you like it, and that you learned something from this article!

Follow me on Youtube, Twitter or here on Dev.to @Vanaf1979 for more things to come.

Thanks for reading, stay safe and stay the right kind of positive!

Create a Spotlight effect with Css and Javascript or Gsap.

Stephan Nijman — Wed, 26 Jan 2022 10:09:11 +0000

Combinig Css mask, Radial-gradients and a smitten of Javascript

Earlier this week i created a little codepen (check here if you cant wait) that combines css masks with linear-gradients to create a spotlight effect, and i added a little Javascript to make the light follow the mouse cursor.

People seem to like the demo, so in this article i will explain the concepts behind it for anyone that wants to know how it works.

Let's get started!

The background image

First we have to set a background image for the body element. You could also do this on a div, or whatever element has your fancy, if you want to use it in a section of your site.



body {
  margin: 0;
  height: 100vh;
  background-image: url(https://unsplash.it/1920/1080);
  background-position: center center;
  background-size: cover;
}

In this snippet we first remove the margins of the body so we wont have any white space surrounding our mask later on. We also make the body the same height as the viewport by setting its height to 100vh (Viewport Height)

And lastly we grab a random 1920 x 1080 image from the unsplash library, set its position to the center and give it a size of cover so that it covers the entire element/viewport.

The mask element

For our actual mask we are gonna create a div that also covers the entire viewport.



<div class="mask"></div>

To make it the same size as the viewport we set its width to 100vw (Viewport Width) and just like the body we set its height to 100vh.



.mask {
  width: 100vw;
  height: 100vh;
  background-color: hsla(0,0%,0%, 0.9);
}

To create the darkened effect we set the background color to black and give it a opacity of 0.9 using the hsla function

if your not familiar with the hsl and hsla functions i have a video that you can check out here: Css Hsl colors introduction

Css mask and radial-gradient

The first piece of the magic is the combination of css mask and radial gradient.

As the name implies the css mask property alows us to create masks for our elements in a similar way we create masks in photoshop. But imstead of black and white in this case we use black and transparent.



.mask {
  mask: radial-gradient(
    circle at 50% 50%,
    transparent 40px,
    black 150px
  );
}

So here we set the mask property on the .mask div and set its value to a radial-gradient function.

The first line "circle at 50% 50%," sets the center of the gradient to the center of the screen.

Next we set a transparent color up to 40px from the center, and then we add black that starts at 150px and everything in between will be a transition from transparent to black. Resulting in a transparent circle that fades out to black.

Custom properties

Because we want our mask to move we have to make the position of our gradient "hole" variable. So lets replace those values with some css custom properties.

First we have to define these properties to give them a starting value. In this case i define them on the :root but you can also do this on the .mask element itself.



:root {
  --mouse-x: 50%;
  --mouse-y: 50%;
}

And now we can use them inside out radial-gradient function.



.mask {
  mask: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 40px,
    black 150px
  );
}

Make all browsers behave well

Browser support for mask goes pretty much across the board

But we do have to add a -webkit-mask to make sure all browsers do what we want.



.mask {
  ...
  -webkit-mask: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 40px,
    black 150px
  );
}

So our completed css should look like this



:root {
  --mouse-x: 50%;
  --mouse-y: 50%;
}

body {
  margin: 0;
  height: 100vh;
  background-image: url(https://unsplash.it/1920/1080);
  background-position: center center;
  background-size: cover;
}

.mask {
  width: 100vw;
  height: 100vh;
  background-color: hsla(0,0%,0%, 0.9);
  mask: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 40px,
    black 150px
  );
  -webkit-mask: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 40px,
    black 150px
  );
}

Move things with javascript

To move our gradient to match our mouse cursor position we need just a little bit of javascript.

So lets start by adding an eventlistener to get the position of the mouse.



document.addEventListener('pointermove', (pos) => {

}

Inside our event listener we recieve a pos variable that holds the pos.clientX and pos.clientY properties that represent the x and y position of the cursor respectively!

The radial-gradient sets its position based on % values, so we have to convert our mouse position to a 0 to 100% value.



document.addEventListener('pointermove', (pos) => {
    let x = parseInt(pos.clientX / window.innerWidth * 100);
    let y = parseInt(pos.clientY / window.innerHeight * 100);
});

I'm not much of a math person so please don't ask me to tell you how this works exactly. The only thing i know is that it works and that it gives us 0-100% values for the x and y positions! :p

The parseInt is there to make sure we get an actual number. It doesn't matter much in this case though.

Now that we have the correct values we can update our custom properties.



const mask = document.querySelector('.mask');

document.addEventListener('pointermove', (pos) => {
    let x = parseInt(pos.clientX / window.innerWidth * 100);
    let y = parseInt(pos.clientY / window.innerHeight * 100);

    mask.style.setProperty('--mouse-x', x + '%');
    mask.style.setProperty('--mouse-y', y + '%'); 
});

The first line here gets us a reference to our mask element so we can manipulate its properties.

We then call mask.style.setProperty twice to update the values of said properties. The first argument passed is the name of the property we want to update, and the second is the value we want to set. In our case we tag on a percent symbol to make it the correct unit.

The completed js code should be like this now.



const mask = document.querySelector('.mask');

document.addEventListener('pointermove', (pos) => {
    let x = parseInt(pos.clientX / window.innerWidth * 100);
    let y = parseInt(pos.clientY / window.innerHeight * 10);

    mask.style.setProperty('--mouse-x', x + '%');
    mask.style.setProperty('--mouse-y', y + '%'); 
});

We should now have a functional spotlight effect as shown in the code pen below. Wiggle your mouse over the pen!

Going a bit more advanced with Gsap, you know... just because we can.

Although its complete overkill for this use case i'm a massive not affiliated Gsap fan boy, so if you'll let met i'm gonna take this opportunity to show you a very tiny bit of it.

Gsap is "Professional-grade JavaScript animation for the modern web". In normal terms its just an amazing library for animating things in javascript. Or react if that's your thing!

I guess its almost everybody's thing! :p

But don't worry... in this case we are just going to use two Gsap functions.

I am working on some other content that goes a bit deeper into the css/javascript combination and it will also cover some more of the Gsap library. So make sure to give me a follow here on Dev or on twitter if you're curious about that!

Now lets get Gsap into the project.



<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

Nice and simple! Now lets grab a helper function called mapRange from gsap.utils.



const {mapRange} = gsap.utils;

Again im not very good at math, but mapRange is something i can explain. or at least im gonna give it a go.

Like the name implies mapRange maps one range to another range. So lets say we have a 0 to 1000 range, and we have another 0 to 100 range. If in the first range our value is 100, then it would map to 10 in the second range.

0-1000: 100
0-100: 10

I hope that makes some sense!? Anyway, our mouse's x position is somewhere between 0 and the width of the viewport (window.innerWidth) and we have to map that to a value between 0 and 100%. We can do that by using the mapRange function like shown below.



document.addEventListener('pointermove', (pos) => {
    let x = mapRange(
      0, window.innerWidth,
      0, 100, 
      pos.clientX
    );
});

Like i said we are mapping a value between 0 and window.innerWidth to a value between 0 and 100, and we pass it the actual value pos.clientX being the cursor x position.

We can then repeat this to get the y value by swapping innerWidth with innerHeight.



document.addEventListener('pointermove', (pos) => {
    let x = mapRange(
      0, window.innerWidth,
      0, 100, 
      pos.clientX
    );
    let y = mapRange(
      0, window.innerHeight,
      0, 100,
      pos.clientY
    );
});

Now that we got our values again we can use the gsap.set function to update our custom properties.



document.addEventListener('pointermove', (pos) => {
    ...
    gsap.set(mask,{
      '--mouse-x': x + '%'
    })
    gsap.set(mask,{
      '--mouse-y': y + '%'
    })
});

Gsap.set takes two parameters. The first is the element we want to set the values for. In our case we pass the mask reference but you can also pass a string being the css selector for the element. So we could have used ".mask" and it wuold do the same thing.

The second paramater should be an object holding key value pairs for the properties we want to set and their respective values. In this case we use the custom property names for the key and the x and y values we created plus an % symbol.

Al this combined we should result in the code below.



const mask = document.querySelector('.mask');
const {mapRange} = gsap.utils;

document.addEventListener('pointermove', (pos) => {
    let x = mapRange(
      0, window.innerWidth,
      0, 100, 
      pos.clientX
    );

    let y = mapRange(
      0, window.innerHeight,
      0, 100,
      pos.clientY
    );

    gsap.set(mask,{
      '--mouse-x': x + '%'
    })

    gsap.set(mask,{
      '--mouse-y': y + '%'
    })
});

We really had no need to use Gsap here, but this is just a tiny bit of what it can do, and i hope it got you curious to explore some more of it.

Here's a codepen with the updated code.

Follow?

Follow me on Youtube, Twitter or here on Dev.to @Vanaf1979 for more things to come.

Oh... The image i used in the codepens was kindly provided for free by Todd Quackenbush on Unsplash.

Thanks for reading, stay safe and stay the right kind of positive!

Uselful array methods for dealing with api data.

Stephan Nijman — Thu, 13 Jan 2022 18:46:53 +0000

Follow me on Youtube

Using JavaScript array methods with Api data

In this video/article I want to share with you how I use some of the JavaScript Array methods to deal with Api data. There are many many more things you can do with these methods, but these are just some examples from my own use cases. There are also a lot more Array methods for you to explore in the MDN documentation..

Array.prototype.find()

The find array method can be used to find a single entry in an Api response based on a certain criteria.

// MDN Docs: https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/find

const friends = [
  { id: 0, name: "joey", quote: "How you doin?" },
  { id: 1, name: "ross", quote: "We were on a break" },
  { id: 2, name: "phoebe", quote: "She’s your lobster" }
];

const findFriendById = id => {
  return friends.find(friend => friend.id === id);
};

console.log(findFriendById(0)); // Object {id: 0, name: "joey", quote: "How you doin?"}

Live example in CodeSandBox

In this example we have a fake Api response array with characters from my all time favourite Sit-Com Friends. To find a single character by it's id we create a new function called findFriendById that excepts the Id integer of the character we are looking for.

Inside this new function we call the find method on our friends array, again passing it a callback function that excepts a single friend at a time. This callback function has to return a true value when we hit the friend we are looking for. So we simply compare the current friend's id with the id passed in to the findFriendById function.

In the example we call the findFriendById with 0 as the id giving us the object for Joey.

Array.prototype.filter()

The Filter method allows us to easily find Api entries from the response data based on a certain criteria like shown below.

// MDN Docs: https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const trekkies = [
  { id: 0, name: "Piccard", planet: "Earth" },
  { id: 1, name: "Spock", planet: "Vulcan" },
  { id: 2, name: "Kirk", planet: "Earth" },
  { id: 3, name: "Worf", planet: "Gault" }
];

const findTrekkiesByPlanet = planet => {
  return trekkies.filter(trekkie => trekkie.planet === planet);
};

console.log(findTrekkiesByPlanet("Earth"));
// [0: Object {id: 0 name: "Piccard" planet: "Earth"}
// 1: Object {id: 2 name: "Kirk" planet: "Earth"}]

Live example in CodeSandBox

In this example we have a basic Api response array with StarTrek characters. To find all the character from a certain planet we create a new function called findTrekkiesByPlanet that excepts a single parameter being the name of the planet we want the entries for.

Within the findTrekkiesByPlanet function we call the filter method on the trekkies array and we pass it a callback function that excepts a single trakkie as a parameter. This callback function has to return a true value if this trekkie meets our criteria or false if it doesn't. So we do a check if the current trekkie.planet value is equal to the planet value passed into the findTrekkiesByPlanet function.

As you can see in the example, if we pass "Earth" as the planet we get a new array containing just Piccard and Kirk.

Array.from()

The from array method's function is to create a new array from some arbitrary data. Here we are going to use it to conform Api response data to something we can pass to a React component.

// MDN Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

const apiCategories = [
  { id: 0, title: "javascript", description: "...", other: "..." },
  { id: 1, title: "React", description: "...", other: "..." }
];

const transformApiCategories = () => {
  return Array.from(apiCategories, category => {
    return {label: category.title, value: category.id};
  });
};

console.log(transformApiCategories());
// [0: Object {label: "javascript" value: 0}
// 1: Object {label: "React" value: 1}]

// Example use in a react select component.
return (<SelectControl options={ transformApiCategories() }/>)

Live example in CodeSandBox

In this last example we have some random Api data containing programming languages along with some information about them. We want to use this data inside a select element/component that expects an array of objects containing a label and a value. Here is an example of such a component from the Gutenberg project.

For this we create a function called transformApiCategories. Inside this new function we use Array.find and we pass it our apiCategories array and a callback function that excepts a single category on each iteration.

Our callback function returns a new object from each category containing only the data we need in the correct format, making the from method return an array of objects that we can safely pass to our select component.

Conclusion

As you can see these array methods can be very powerful and I would encourage you to check out their documentation. Inside each example there is a comment with a link to that specific method's doc page. And you can check out all the array methods in the MDN documentation.

Follow?

Follow me on Youtube Twitter or here on Dev.to @Vanaf1979 so i can notify you about new videos/articles.

Thanks for reading, stay safe and stay the right kind of positive!

Some small Css tips #016

Stephan Nijman — Mon, 26 Apr 2021 07:59:26 +0000

To continue on my previous post here are some more tweets with little Css tips that might help you in your projects.

Prevent textarea resize.

Stephan Nijman

@vanaf1979

Small #css tip: You can prevent a textarea from being resized (Or limit it to one axis) by setting the css resize property. #100DaysOfCode #DEVCommunity

Check out the CodePen below

13:54 PM - 25 Mar 2021

Css resize docs: https://developer.mozilla.org/en-US/docs/Web/CSS/resize

Text-indent.

Stephan Nijman

@vanaf1979

Small #css tip: You can indent the first line of a paragraph by using the css text-indent property. #100DaysOfCode #DEVCommunity

Check out the CodePen below

10:36 AM - 23 Apr 2021

Css text-indent docs: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

:where.

Stephan Nijman

@vanaf1979

Small #css tip; If you want to select multiple elements inside a parent element, you can use :where() to do exactly that. 😀 #100DaysOfCode #DEVCommunity

👇 Check out the CodePen below

10:38 AM - 24 Apr 2021

Css :where() docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:where

Only-child.

Stephan Nijman

@vanaf1979

Small #css tip: If you need to select an element that is the only element inside of it’s parent you can use the css :only-child pseado-selector. #100DaysOfCode #DEVCommunity

👇Check out the CodePen below.

11:13 AM - 25 Apr 2021

Css only-child docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child

Subscribe and Follow

Subscribe to my Youtube channel.

Follow me on Twitter

Thanks for reading/watching and stay safe

Some small Css tips #015

Stephan Nijman — Mon, 19 Apr 2021 09:56:56 +0000

To continue on my previous post here are some more tweets with little Css tips that might help you in your projects.

Unit less custom properties.

Stephan Nijman

@vanaf1979

Small #css tip: You can keep your css variables unit less so you can use them with any unit later by combining the var() and calc() functions. #100DaysOfCode #DEVCommunity

12:48 PM - 18 Mar 2021

Position sticky for more then just navigations.

Stephan Nijman

@vanaf1979

Small #css tip: Position sticky is not limited to top navigation's. You can also (among other things) use it to create some nice headings that stick alongside your text. #100DaysOfCode #DEVCommunity

👇Check out the CodePen below

12:21 PM - 22 Mar 2021

Css position docs: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Css background-clip.

Stephan Nijman

@vanaf1979

Small #css tip: If you don’t want your background image to show underneath your padding space, you can use background-clip to prevent this. #100DaysOfCode #DEVCommunity

👇Check out the CodePen below

12:46 PM - 23 Mar 2021

Background-clip docs: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

Limit number of text lines.

Stephan Nijman

@vanaf1979

Small #css tip: If you need to limit a piece of text to a set number of lines you can do that with this code snippet. Even though it uses the -webkit prefix, it will work in most modern browsers. #100DaysOfCode #DEVCommunity

👇Check out the CodePen below

12:15 PM - 24 Mar 2021

Css-tricks almanac: https://css-tricks.com/almanac/properties/l/line-clamp/

Subscribe and Follow

Subscribe to my Youtube channel.

Follow me on Twitter

Thanks for reading/watching and stay safe

Some small Css tips #014

Stephan Nijman — Mon, 12 Apr 2021 08:12:31 +0000

To continue on my previous post here are some more tweets with little Css tips that might help you in your projects.

Prevent users from selecting text.

// Detect dark theme var iframe = document.getElementById('tweet-1369988287285387271-29'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1369988287285387271&theme=dark" }

User-select docs: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

Css :is()

// Detect dark theme var iframe = document.getElementById('tweet-1370342555490131968-7'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1370342555490131968&theme=dark" }

:is() docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:is

Css viewport units.

// Detect dark theme var iframe = document.getElementById('tweet-1371805648938266626-514'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1371805648938266626&theme=dark" }

Css logical properties.

// Detect dark theme var iframe = document.getElementById('tweet-1372166615731740677-427'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1372166615731740677&theme=dark" }

Css logical properties docs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

Subscribe and Follow

Subscribe to my Youtube channel.

Follow me on Twitter

Thanks for reading/watching and stay safe