Hi, Javi here.

I'm a software engineer with a passion for great user experiences.


  1. ClearSessionat
    A health app focused on communication
  2. at
    An innovative online school
  3. at
    An online education platform
  4. at
    A web app for remote retrospectives

Open Source (7)

  1. tailwind-material-colors

    A TailwindCSS Plugin to generate dynamic color themes according to the Material Design guidelines.
  2. ☝️ A customizable input-like component with line wrapping and autosizing.
  3. tailwindcss-color-mix

    A TailwindCSS Plugin to mix colors at runtime using the CSS color-mix function.
  4. tailwind-material-surfaces

    A TailwindCSS Plugin that integrates Material Design interaction states into Tailwind.
  5. tailwind-mode-aware-colors

    A TailwindCSS Plugin to style light and dark modes with a single class.
  6. react-selection-manager

    A tiny selection management library with support for keyboard modifiers.
  7. MTGBarato

    I built a simple web app to help my local trading card game community.

Blog posts (9)

  1. Recursion in CSS: The Corner Hit Timer Experiment

    Can we calculate the Greatest Common Divisor of two integers with CSS?

    • CSS
    Read the post
  2. CSS Animated Gradient Button

    The method behind the animated gradient button on this page, with a detailed step-by-step walkthrough.

    • CSS
    Read the post
  3. 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.

    • CSS
    Read the post
  4. 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.

    • Productivity
    Read the post
  5. Material interaction states with Tailwind

    A deep dive into my plugin to style interactive surfaces with Tailwind according to the Material Design guidelines.

  6. Mode-aware colors with Tailwind

    The reasoning behind my tailwind-mode-aware-colors plugin and a quick look into its internals.

  7. 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.

  8. 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.

  9. Harnessing the power of responsive CSS grids

    A fun experiment with a product pricing table that changed drastically between viewport sizes.

Dev notes (18)

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.

Drop me a line at hi@javiermorales.dev ✉️