Here is a copilations of some of my posts, demos and thoughts I've done over the past few years.
Sometimes I like to write articles about Demos I've done or deep dives into technical topics.
Card reveal on hover
Incrementally reveal the card's content hover
With modern CSS is very easy to stack elements on top of eachother, let's explore one way.
Custom double range slider
A custom slider we will make use of the native input type range, well, two of them. The idea in a nutshell is to hide the inputs and set / update visually our custom slider based on the values of those inputs.
Detect when an element gets wrapped (Flexbox , Grid)
Let's say we have a parent container (flex or grid) that contains items that will wrap when they don't fit in the same row at different screen sizes.
Reusable Parallax Effect With CSS Variables
Custom animated Counter
A counter that can be easily customized and animated
Utility Type ReturnType
Let's write the ReturnType utility that constructs a type consisting of the return type of function Type.
Array Includes Type
If we have a type which is wrapped type like Promise. How we can get a type which is inside the wrapped type?
Utility Type Pick Explained
Let's break down and explore how the Pick Utility Type works under the hood
Length of a Tuple
Let's write a Type to get the length of a tuple
First and Last of Array
Using array destructuring let's create a type to get the first and last of element of an array
Array Concat Type
Utility Type Parameters
Constructs a tuple type from the types used in the parameters of a function type *Type*.
Tuple to Object
Let's create a custom Type in order to convert a Tuple into Object.
Array Push Type
Array Unshift Type
Utility Type Readonly Explained
The Readonly Utility Type can be very handy, let's see how we would implement it.
Utility Type Exclude
Let's write, break down and explore all arount the Exclude Utility Type
If Type Util
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.
Little demos I've built to learn from and teach others