DEV Community: Sarmun Bustillo

Card reveal on hover

Sarmun Bustillo — Sun, 27 Nov 2022 06:56:50 +0000

Let's create a hover effect to incrementally reveal the card's content.

This effect is pretty simple, within the card we have 2 things, the content and the 'spotlight' or circle. The trick is to make the spotlight to follow the cursor within the card's bounds and the more it moves the bigger it gets.

Functionality

So for each card we want to listen for any mouse movement. let's create a function for that:

function onHoverCard(card) {
    const cardSpotlight = card.querySelector('.card__spotlight');
    let size = 50;

    card.addEventListener('mousemove', (e) => {
        const { x, y } = card.getBoundingClientRect();
        const mouseX = e.clientX - x;
        const mouseY = e.clientY - y;
        const cardSpotlightX = mouseX - cardSpotlight.offsetWidth / 2;
        const cardSpotlightY = mouseY - cardSpotlight.offsetHeight / 2;

        size += 2.5;
        cardSpotlight.style.setProperty('--_spotlight-size', `${size}px`);

        cardSpotlight.style.transform = `translate(${cardSpotlightX}px, ${cardSpotlightY}px)`;
    });

    card.addEventListener('mouseleave', () => {
        size = 50;
    });
}

To attach the spotlight element to the mouse within the card's bounds, we first need to find the card's x and Y coords in relation to the page. Then we find the current x and y coords from the mouse event being fired. With those we can calculate the spotlight's coords. Well, just to make the spotlight right in the middle of the cursor we need to deduct half of its size from the coords. Finally, we use the CSS transform property to move the element to the correct coords.

To make the spotlight grow we increment its size everytime the mouse moves and we reset it when the mouse leaves the card. We do this by keeping track of its current size with a variable (size).

Aaaand that is pretty much it!

Here is a demo

My Twitter

Checkout my blog

Thank you!

Stacking elements

Sarmun Bustillo — Sat, 17 Sep 2022 12:26:36 +0000

With modern CSS is very easy to stack elements on top of each other, without much code and can easily be extended with more functionality.

CSS Grid

With CSS Grid we can create customizable grids and assign its items to specific rows and columns. We will take advantage of this to stack our elements.

Let's the following cards as an example:

First, we make the card's container a grid container

.cards {
    display: grid;
}

Next, we explicitly set all the cards into the same column and the row.

.card {
    grid-row: 1;
    grid-column: 1;
}

And guess what, that is it!

Buuuuuut! let me show you with something really simple how easy is to add extra styling.

A bit of offset

So the user can see that the cards are stacked up, let's add a bit of offset. In this example we will go the difficult route, we dont know how many elements (cards) are to be stacked up. So we cant just use CSS, we need to add a bit of JavaScript to dynamically add the offset.

Let's update our card's CSS

.card {
    grid-row: 1;
    grid-column: 1;

    // new lines
  position: relative;
  top:  var(--_card-offset);
}

And With JavaScript we will update our CSS var.

const cards = document.querySelectorAll(".card");
const OFFSET_VALUE: 30;

cards.forEach((card, i) => {
  card.style.setProperty(`--_card-offset`, `${OFFSET_VALUE * i}px`);
})

In a nutshell, each card will be 30px lower than the one before.

Now you can for example set the card's z-index to a higher value whenever it gets hovered so it comes to the front.

.card:hover {
    z-index: 2;
}

Following this same pattern it is very easy to exented the styles and functionality of our stacking elements.

Thank you!

Demo

My Twitter

Checkout my blog

Typescript Series -Utility Type ReturnType

Sarmun Bustillo — Thu, 08 Sep 2022 09:52:09 +0000

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

ReturnType<Type>

Constructs a type consisting of the return type of function Type.

Let's see some examples:

type T0 = ReturnType<() => string>; //string

type T1 = ReturnType<(s: string) => void>; // void

type T2 = ReturnType<<T>() => T>; // unknown

type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // numver[]

So what do we know so far?

Our type should:

Receive a function
Infer and return the returning type of that function if there is any

Let's see the type.

type MyReturnType<T> = T extends (...args: any) => infer R ? R : any;

Let's break it down

We accept a type T and we check that type extends a function and if it returns something T extends (...args: any) => ...

Understanding the infer keyword

The infer keyword can be used within a condition in a conditional type to put the inferred type into a variable. That inferred variable can then be used within the conditional branches.

If the function returns something then we infer its type and we return that ... => infer R ? R ... otherwise, it could be anything or nothing, so we return any ... : any

That is it, thank you!

you can find me here My Twitter

Typescript Series - Parameters Utility Type

Sarmun Bustillo — Sun, 28 Aug 2022 19:41:48 +0000

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

Parameters

Constructs a tuple type from the types used in the parameters of a function type Type.

Examples:

type T0 = Parameters<() => string> // []
type T1 = Parameters<(s: string) => void> // [s: string]
type T2 = Parameters<<T>(arg: T) => T> // [arg: unknown]

That means our type should look something like

const foo = (arg1: string, arg2: number): void => {}
const bar = (arg1: boolean, arg2: { a: 'A' }): void => {}
const baz = (): void => {}

MyParameters<typeof foo> // [string, number]
MyParameters<typeof bar> // [boolean, { a: 'A' }]
MyParameters<typeof baz> // []

Ok so what do we know so far:

Receives a function
Infer the types of the function parameters passed
Return a tuple of the types of the function parameters, if any (no pun intended) or nothing

type MyParameters<T extends (...args: any[]) => any> = T extends (...args: infer R ) => unknown ? R : never

Let's break it down:

T extends (...args: any[]) => any You could read this as our type extends a function and could return anything or nothing.

Understanding the infer keyword
The infer keyword can be used within a condition in a conditional type to put the inferred type into a variable. That inferred variable can then be used within the conditional branches.

T extends (...args: infer R ) => unknown ? R : never So we infer the types of the function parameters. If it does return something, meaning there were parameters, we return the inferred type, otherwise we return never (nothing, ignored by TS)

Thank you!

you can find me here My Twitter

Typescript Series - Array Unshift Type

Sarmun Bustillo — Fri, 26 Aug 2022 16:46:03 +0000

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

Let's create a type for the JavaScript Array.unshift function. Which takes pushes an element into the array in the last position.

Unshift<[1, 2], 0> // [0, 1, 2,]
Unshift<['1', 2, '3'], boolean> \\ [boolean, '1', 2, '3']

So we know we have an array and our type should return the new value + array.

type Unshift<TArray extends unknown[], U> = [U, ...TArray]

TArray extends readonly unknown[] We first check our TArray is of type array.

Then we pass the value and we spread the array into an array [U, ...TArray]

Thank you!

you can find me here My Twitter

Typescript Series - Array Push Type

Sarmun Bustillo — Thu, 25 Aug 2022 17:23:07 +0000

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

Let's create a type for the JavaScript Array.push function. Which takes pushes an element into the array in the last position.

Push<[1, 2], '3'> // [1, 2, '3']
Push<['1', 2, '3'], boolean> // ['1', 2, '3', boolean]

So we know we have an array and our type should return an array + the new value.

type Push<TArray extends unknown[], U> = [...TArray, U]

TArray extends readonly unknown[] We first check our TArray is of type array.

then we simply spread the array and the new value into an array [...TArray, U]

Thank you!

you can find me here My Twitter

Typescript Series - Array Includes Type

Sarmun Bustillo — Wed, 24 Aug 2022 14:14:01 +0000

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

Let's create a type for the JavaScript Array.includes function in the type system. A type takes the two arguments. The output should be a boolean true or false.

The JavaScript Array.includes function looks like this:

const arr = ["a","b","c"]:
arr.includes("a") // true

And our type should should look something like this:

<Includes<[1, 2, 3, 5, 6, 7], 7> // true
<Includes<[1, 2, 3, 5, 6, 7], 4> // false

So what do we know?

We know that our type should take an array and a value as inputs.
We should take check if the desired value exist in the array
After checking against every element in the array, we return a boolean accordingly.

type Includes<TArray extends readonly unknown[], Value> = 
TArray extends [infer FIRST,... infer REST] ? 
Equal<Value,FIRST> extends true ? true : Includes<REST,Value> : false

For this type we need to the Equal utility type which checks if two inputs are equal.

TArray extends readonly unknown[] We first check our TArray is of type array.

TArray extends [infer FIRST,... infer REST] We infer the first element of the array and then rest of elements.

Equal<Value,FIRST> extends true We check if that first element is equal to our desired value, if so, we got it and therefore we should return true. Otherwise we recursively check again with the rest of the elements : Includes<REST,Value>

Lastly, if the element is not to be found in the array we return false : false

This one was a tough one, but we learned how The includes function works under the hood.

Thank you!

you can find me here My Twitter

Typescript Series - Array Concat Type

Sarmun Bustillo — Tue, 23 Aug 2022 13:43:49 +0000

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

Let's create a type for the JavaScript Array.concat function. A type takes the two arguments. The output should be a new array that includes inputs in ltr order.

Some examples:

Concat<[], []>
// []

Concat<[], [1]>
// [1]

Concat<[1, 2], [3, 4]>,
// [1, 2, 3, 4]

Concat<['1', 2, '3'], [false, boolean, '4']>
// ['1', 2, '3', false, boolean, '4']

So we know that our inputs should be arrays as well as the return type.

type Concat<T extends unknown[], U extends unknown[]> = [...T,... U]

<T extends unknown[], U extends unknown[]> We first check if both of our inputs are arrays. If so, using the spread operator we spread both input values into a new array [...T,... U].

And there you go, our concat type is done.

Thank you!

you can find me here My Twitter

Typescript Series - If Type Util

Sarmun Bustillo — Mon, 22 Aug 2022 16:02:45 +0000

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

A little challange, let's write an util If which accepts condition C, a truthy return type T, and a falsy return type F. C is expected to be either true or false while T and F can be any type.

type A = If<true, 'a', 'b'>  // expected to be 'a'
type B = If<false, 'a', 'b'> // expected to be 'b'

This one is a simple one, but a good practice

type If<C extends boolean, T, F> = C extends true ? T : F

We know C is of type boolean so we make sure it extends it, remember, C is expected to be either true or false, so according with our requirements, if C is true we return our type T otherwise we return our falsy type F.

Thank you!

you can find me here My Twitter

Typescript Series - Awaited Type

Sarmun Bustillo — Sun, 21 Aug 2022 14:44:48 +0000

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

If we have a type which is wrapped type like Promise. How we can get a type which is inside the wrapped type?

Let's see a couple of examples

type Example1 = Promise<string>
type Example2 = Promise<{ field: number }>
type Example3 = Promise<Promise<string | number>>


type Result1 = MyAwaited<Example1> // string
type Result2 = MyAwaited<Example2> // { field: number }
type Result3 = MyAwaited<Example3> // string | number

Worth noticing here, that we should also take nested promises into account.

How would this type would look like?

type MyAwaited<Type> = Type extends Promise<infer K> 
? MyAwaited<K> : Type;

Understanding the infer keyword

The infer keyword can be used within a condition in a conditional type to put the inferred type into a variable. That inferred variable can then be used within the conditional branches.

Let's break it down:

Type extends Promise<infer K> Here we check if Type extends a Promise type and we infer the type that is wrapped inside.

If it does extend it, meaning our Type is of type Promise (ex: Promise>), then we use recursion to check again MyAwaited<K>

if it does not extend it, then we just simply return the Type

Thank you!

you can find me here My Twitter

Typescript Series - Length of a Tuple

Sarmun Bustillo — Sat, 20 Aug 2022 14:51:09 +0000

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

Let's write a Type to get the length of a tuple.

First, what it a tuple, tuple types allow you to express an array with a fixed number of elements whose types are known, but need not be the same.

Lets have a look to our tuple

const tesla = ['tesla', 'model 3', 'model X', 'model Y'] as const

Notice how we define it *as const * so it can't be modified.

Now we need to create a type that expects a tuple, and returns its length.

type Length<Type extends readonly unknown[]> = Type['length']

Let's break it down.

Length<Type extends readonly unknown[]>
You can read this as, Type extends an array of unknown type that its length won't change, remember for tuples we do know it's length, that is why we define the tuple variable as const so we cant modify it.

Type['length'] Lastly, we access the length property from our Type.

This one was an easy one

Thank you!

you can find me here My Twitter

Typescript Series - Exclude Utility Type

Sarmun Bustillo — Fri, 19 Aug 2022 20:07:28 +0000

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

Let's write and see how this utility type works under the hood.

Exclude

Constructs a type by excluding from UnionType all union members that are assignable to ExcludedMembers (docs)

example:

type T0 = Exclude<"a" | "b" | "c", "a">; 

// type T0 = "b" | "c"

type T1 = Exclude<"a" | "b" | "c", "a" | "b">; 

//type T1 = "c"

type T2 = Exclude<string | number | (() => void), Function>; 

// type T2 = string | number

Now that we know how it should behave, let's write the type.

type MyExclude<Type, Exclude> =  Type extends Exclude 
? never : Type

Here we check if Type extends Exclude then we should ignore it, remember we want to exclude that element, otherwise return the non-matching value.

There you go, it was a pretty simple one!

Thank you!

you can find me here My Twitter