This article is a deep dive into my experimentations with Volumetric rendering and how to leverage it to render beautiful raymarched cloudscapes in React Three Fiber and WebGL. In it, I walk you through everything from the basics of Volumetric Raymarching to the techniques used in video games to render physically accurate clouds.

A compilation of my Raymarching and Signed Distance Field learnings and work. In it, I teach you how to leverage those techniques along with lighting models, smoothmin, soft shadows, and some math to create beautiful 3D raymarched scenes ranging from abstract shapes to infinite realistic-looking landscapes.

An end-to-end walkthrough on how to build a semantic search from your own MDX or Markdown based content using Postgres vector similarity search and OpenAI's text embeddings and chat completion APIs.

A deep dive into WebGL Render Targets and how to leverage their capabilities in combination with the render loop to create scenes with post-processing effects, transition, and many types of optical illusions to trick the viewer's eyes.

A guide on how to reproduce a chromatic dispersion effect for your React Three Fiber and shader projects with FBO, refraction, chromatic aberration, specular, and other tricks through 9 interactive code playgrounds.

An interactive introduction to Particles with React Three Fiber and Shaders where you'll learn anything going from attributes, buffer geometries, and more advanced techniques like Frame Buffer Object through 8 unique 3D scenes.

A complete guide on how to use shaders with React Three Fiber, work with uniforms and varyings, and build dynamic, interactive and composable materials with them through 8 unique 3D scenes.

A deep dive into my experience building my own design system that documents my process of defining tokens, creating efficient components, and shipping them as a package.

A complete guide to Framer Motion layout animations showcasing every concept, from the layout prop, shared layout animations and LayoutGroup, to complex drag-to-reorder interactions.

A step-by-step tutorial documenting my attempt at reverse-engineering the vaporwave WebGL scene from the Linear 2021 release page using solely fundamental concepts of Three.js like textures, lights, animations, and post-processing effects.

A deep dive into the math behind Bézier curves, from simple linear interpolations to Cubic Bézier and how they are used to describe motion. This article introduces the concepts underneath cubic-bezier and easing timing functions that are used in CSS and Framer Motion transitions through easy-to-understand interactive examples.

A beginners guide to OpenAI's API that eases frontend developers into the world of GPT-3 and gives all the tools needed to start building AI-powered Next.js apps.

A guide with some of the best Github CI tips I could find to the power best CI pipeline for your frontend team's needs.

Some thoughts on my experience using Gatsby for my blog and migrating it to Next.js, and why this was the right call for me going forward.

A solution to remove sluggish Twitter embed iframes and load the tweets in your blog posts at the speed of light.

A deep dive into Framer Motion's propagation, exit transitions and layout animation patterns through curated examples and interactive playgrounds.

A deep dive into how the inner workings of a Scrollspy, Intersection Observers, and how to integrate it with Markdown-based static sites without the need of third party libraries.

How leveraging CSS variable composition and HSLA colors helped me build a more efficient way to theme my apps and rely less on CSS-in-JS.

A reflection on my experience building my first SwiftUI app, what I learned, the challenges I faced, and the reasons that made me not release it.

An interactive guide introducing everything I've learned about Framer Motion through fun examples and little case studies of animations I built.

Take ownership of your Apple Watch health data with a only few lines of code.

A look back at what I learned fixing my terrible SEO mistakes on my Gatsby websites

Approaching native iOS development with a React developer mindset

Do you want to increase your team's development velocity and collaboration? Preview Deployments are one of the key pieces for that, and this post details how to implement your own serverless deployment service based on Google Cloud Run.

How to ship your app faster, more reliably and make your team unstoppable with good testing practices and automation.

US immigration explained for American citizens by an immigrant.

A deep dive into the inner workings of spring animations in Framer Motion.

Programmatic Carbon images generation from a simple API

Framer Motion x Emotion → animated styled-components

GetServerSideProps vs GetStaticProps vs GetStaticPaths.

Here's an up to date list of what I'm currently learning and what I plan to learn.

Bringing a proper solution to dark mode flashing without an ugly hack.

Dealing with dependencies when developing a package and using it through npm link.

Github actions + Cypress + cross-browser testing = 🚀

A guide to get started with AST (Abstract Syntax Tree) and custom built ESLint plugins

How to add preloading to your route based code split apps

Make sure your UI projects follow accessibility standards before deploying to production

From REST calls to powerful queries

In this post, I’m going to share with you how I built dark mode support for a sample React app with Emotion themes.

A step by step guide to get Typescript, tslint and Prettier working on any existing Gatsby project.

A simple global state management package based on React constructs

How the new React Suspense API might reshape the way we build components

How Flow generics help typing complex multi-purpose components

Adding Flow on top of styled components to avoid misusages before they hit production, and make developers’ and designers’ life easier.

How I deployed, published, scaled and setup SSL certificates for my personal projects

Adding more control to the sub-component pattern with Flow types

Further simplifying the sub-component pattern using contexts to make flexible, easily testable and reusable React components

Making flexible, easily testable and reusable views in React without ending in “markup hell”

How to use the Jest platform to run Golang test