Hi, Javi here.
I'm a software engineer with a passion for great user experiences.
Work
Work
A health app focused on communication
An innovative online school
An online education platform
A web app for remote retrospectives
Open Source (7)
Open Source
tailwind-material-colors
A TailwindCSS Plugin to generate dynamic color themes according to the Material Design guidelines.
☝️ A customizable input-like component with line wrapping and autosizing.
tailwindcss-color-mix
A TailwindCSS Plugin to mix colors at runtime using the CSS color-mix function.
tailwind-material-surfaces
A TailwindCSS Plugin that integrates Material Design interaction states into Tailwind.
tailwind-mode-aware-colors
A TailwindCSS Plugin to style light and dark modes with a single class.
react-selection-manager
A tiny selection management library with support for keyboard modifiers.
MTGBarato
I built a simple web app to help my local trading card game community.
Blog posts (9)
Blog posts
Recursion in CSS: The Corner Hit Timer Experiment
Can we calculate the Greatest Common Divisor of two integers with CSS?
CSS Animated Gradient Button
The method behind the animated gradient button on this page, with a detailed step-by-step walkthrough.
CSS-only DVD Screensaver animation: a visual walkthrough
An in-depth look at how I created a DVD screensaver animation without any Javascript, presented with dynamic examples and code snippets.
Prioritizing High-leverage Activities
An opinion piece about productivity habits and considering automation for repetitive tasks. Inspired by the book The Effective Engineer by Edmond Lau.
Material interaction states with Tailwind
A deep dive into my plugin to style interactive surfaces with Tailwind according to the Material Design guidelines.
Mode-aware colors with Tailwind
The reasoning behind my tailwind-mode-aware-colors plugin and a quick look into its internals.
Optimizing expensive React component mounts
How we fixed a performance problem and improved metrics by 92% in a real-time React application thanks to reverse portals.
Screenshot testing React components with Viteshot
How and why I set up a GitHub action to take screenshots of components in the Prisma UI library.
Harnessing the power of responsive CSS grids
A fun experiment with a product pricing table that changed drastically between viewport sizes.
Dev notes (18)
Dev notes
I had a lot of fun building this website and getting to use a few techniques I've learned through the years, as well as some new browser features.
To see the dev notes, please use a larger screen. I'm sorry for the incovenience.
Toggle the switch to show floating developer notes.