Writings
Here is a copilations of some of my posts, demos and thoughts I've done over the past few years.
Posts
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
Stacking elements
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
CSS variables offers us a very neat way to share information between CSS and JavaScript. The perk of connecting these two with CSS variables is that we can access them and modify them in CSS and in JS at any time.
Custom animated Counter
A counter that can be easily customized and animated
Typescript series
Utility Type ReturnType
Let's write the ReturnType utility that constructs a type consisting of the return type of function Type.
Array Includes Type
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.
Awaited 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
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.
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
Let's create a type for the JavaScript Array.push function. Which takes pushes an element into the array in the last position.
Array Unshift Type
Let's create a type for the JavaScript Array.unshift function. Which takes pushes an element into the array in the last position.
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.
Demos
Little demos I've built to learn from and teach others