DEV Community: Uralys

Monitor All Your Git Projects at Once

Uralys — Tue, 25 Nov 2025 20:32:18 +0000

When you work across multiple projects and directories, it's easy to
lose track of which repositories have uncommitted changes, which ones
need to be pushed, or which ones have diverged from remote.

That's why I built check-projects --- a fast CLI tool that gives
you a unified overview of all your git repositories in a single
command.

tldr; https://github.com/uralys/check-projects

The Problem

My work is spread across several directories:

Uralys projects → ~/Projects/uralys
Nomodata projects → ~/Projects/uralys
Alterego projects → ~/Projects/alterego

Running git status or git fetch manually in each folder is slow and error-prone. I
wanted one tool to scan everything and tell me what needs attention.

Quick Start

Install

curl -fsSL https://raw.githubusercontent.com/uralys/check-projects/main/install.sh | sh

This installs a single binary compatible with macOS, Linux, and Windows.

Configure

Create a config file at ~/check-projects.yml:

categories:
  - name: uralys
    root: ~/Projects/uralys

  - name: alterego
    root: ~/Projects/alterego
    ignore:
      - "*-deprecated"

check-projects will automatically scan these directories for git
repositories.

Run

check-projects

Example output:

✔ alterego

x uralys
  * M www
  ⬆ flying-ones
  ✱ ✚ avindi

Understanding the Symbols

✔ --- Clean (in sync with remote)
⬆ --- Ahead of remote (push needed)
⬆⬆ --- Diverged from remote
* M --- Modified files
* D --- Deleted files
✱ ✚ --- Untracked files

Two Modes

1. CLI Mode --- Quick Status Check

check-projects
check-projects -v
check-projects --category uralys
check-projects --fetch

2. TUI Mode --- Interactive Interface

check-projects --tui

From this interface, you can navigate between projects, see detailed
status, and press f to fetch from remote on the selected project.

Thanks for reading, see you around!

As always, feel free to comment on parts you need more explanations for, or share your thoughts on how you would have handled the parts you disagree with.

Full documentation: https://github.com/uralys/check-projects

How to play audio with React

Uralys — Fri, 21 Jun 2024 07:22:35 +0000

How to play audio with React

In this article, I'll show you how I play audio in my React frontends.

Previously in this article I set up a list of Lottie animations displaying a music track being played when the user hovers the area.

I now need to play an audio at the same time.

setting up the audio

I have 4 audio files somewhere on S3, distributed by CloudFront:

const musics = [
  'https://alterego.community/audio/classique.mp4',
  'https://alterego.community/audio/folk.mp4',
  'https://alterego.community/audio/electro.mp4',
  'https://alterego.community/audio/hip-hop.mp4'
];

For each music, I create an audio element and load it on mount:

const [audio, setAudio] = useState<HTMLAudioElement>();

useEffect(() => {
  const _audio = new Audio(musics[props.num - 1]);
  _audio.load();
  _audio.addEventListener('canplaythrough', () => {
    setAudio(_audio);
  });
}, []);

Listening for the user's interaction

I add a React ref on a parent element of the Lottie animation to listen for hover and touch events:

const musicRef = useRef<HTMLDivElement>(null);

<$Music ref={musicRef}>
  <Lottie hover loop={true} src={musicAnimation} />
</$Music>

Now when audio is ready, I can listen for the user's interaction:

useEffect(() => {
  if (!audio) return;
  if (!musicRef) return;

  const play = async () => {
    audio.play();
  };

  const stop = () => {
    audio.pause();
    audio.currentTime = 0;
  };

  const element = musicRef.current;

  if (element) {
    element.addEventListener('mouseenter', play);
    element.addEventListener('mouseleave', stop);
    element.addEventListener('touchstart', play);
    element.addEventListener('touchend', stop);

    return () => {
      element.removeEventListener('mouseenter', play);
      element.removeEventListener('mouseleave', stop);
      element.removeEventListener('touchstart', play);
      element.removeEventListener('touchend', stop);
    };
  }
}, [musicRef, audio]);

Plugging the state

We need to store the selected music in the state.

I handle the state the same way I did in the article about La Taverne:

The action + reducing in my barrel:

export const PICK_MUSIC = '@@user/PICK_MUSIC';

type PickMusicPayload = {musicChoice: MusicChoice};

export type PickMusicAction = {
  type: '@@user/PICK_MUSIC';
  payload: PickMusicPayload;
};

const onPickMusic = {
  on: PICK_MUSIC,
  reduce: (state: State, payload: PickMusicPayload) => {
    const {musicChoice} = payload;
    state.preferredMusic = musicChoice;
  }
};

Then the React part:

import {useTaverne} from 'taverne/hooks';

// ... in the component:

const {dispatch, pour} = useTaverne();
const preferredMusic = (pour('user.preferredMusic') || -1) as MusicChoice;

const pickMusic = (musicChoice: MusicChoice) => () => {
  dispatch({
    type: PICK_MUSIC,
    payload: {musicChoice}
  } as PickMusicAction);
};

<Music
  num={musicNum}
  selected={preferredMusic === musicNum}
  onClick={pickMusic(musicNum)}
/>

Mounting it all together

then in the parent component rendering all musics:

type MusicChoice = -1 | 1 | 2 | 3 | 4;
const musicChoices: Array<MusicChoice> = [1, 2, 3, 4];

<$Musics>
  {musicChoices.map(musicNum => (
    <Music
      key={`music-${musicNum}`}
      num={musicNum}
      selected={preferredMusic === musicNum}
      onClick={pickMusic(musicNum)}
    />
  ))}
</$Musics>

Thanks for reading, see you around!

As always, feel free to comment on parts you need more explanations for, or share your thoughts on how you would have handled the parts you disagree with.

How to use a Lottie animation in your React app

Uralys — Thu, 25 Apr 2024 07:21:11 +0000

Lottie is a library that allows you to use animations made in Adobe After Effects in your web projects. It's a great way to add some extra flair to your website or app.

In this article, I'll show you how I use Lottie animations in my React + Styled Components frontends.

Getting started

First I choose an animation from https://app.lottiefiles.com and export the **Lottie JSON** to my assets folder.

ViteJS provides a handy way to import JSON files:

import musicAnimation from '../../assets/lottiefiles/music.json';

(commentary on ViteJS)

Maybe it's time to show my ViteJS config actually:

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: true,
              fileName: false
            }
          ]
        ]
      }
    }),
    svgr()
  ]
});

You can see how I import SVG and set up React + Styled Components.

Back to Lottie!

Using Lottie in React

So nothing complicated, just importing the Lottie Player and the json file:

import {Player as Lottie} from '@lottiefiles/react-lottie-player';
import musicAnimation from '../../assets/lottiefiles/music.json';

You can create a react component to set up the style and other properties:

const MusicComponent = () => (
  <Lottie
    hover
    loop={true}
    src={musicAnimation}
  />
);

And then use it in your app like any other component:

const $Lottie = styled(Lottie)`
  cursor: pointer;
  height: 100px;
`;

const Music = (props: {num: number}) => (
  <$Lottie hover loop={true} src={musicAnimation} />
);

// ... in the component

<$Row>
  {musicChoices.map(musicNum => (
    <Music key={`music-${musicNum}`} num={musicNum} />
  ))}
</$Row>

You'll find Lottie usage documentation here https://docs.lottiefiles.com/lottie-player/components/lottie-player/usage

Visualize the selection

When we click on the music, we want to change the color of the animation.

I created a variation of the Lottie animation with a different color:

import musicAnimation from '../../../assets/lottiefiles/music.json';
import musicSelectedAnimation from '../../../assets/lottiefiles/music-selected.json';

<Lottie
  hover
  loop={true}
  src={selected ? musicSelectedAnimation : musicAnimation}
/>

The issue is that the animation is stopped when we change the source.

So I added a simple isPlaying React local state to the component to start the colored one on switch:

const [isPlaying, setIsPlaying] = useState(false);

// ...

const play = async () => {
  audio.play();
  setIsPlaying(true);
};

const stop = () => {
  audio.pause();
  setIsPlaying(false);
};

Now we can use the autoplay property of the Lottie Player:

<Lottie
  hover
  loop={true}
  autoplay={isPlaying}
  src={selected ? musicSelectedAnimation : musicAnimation}
/>

Thanks for reading, see you around!

As always, feel free to comment on parts you need more explanations for, or share your thoughts on how you would have handled the parts you disagree with.

An animated image picker with React and Styled Components

Uralys — Mon, 11 Mar 2024 08:25:18 +0000

An animated image picker

Today I have to ask the user to select one image among a list of 4.

Let's setup the assets

First I create a simple array with images handfully importable by ViteJS.

import graphic1 from './assets/images/1.webp';
import graphic2 from './assets/images/2.webp';
import graphic3 from './assets/images/3.webp';
import graphic4 from './assets/images/4.webp';

const images = [graphic1, graphic2, graphic3, graphic4];

Types and data

My user will be able to select one of these images, we'll use the value -1 to represent the "nothing selected" option.

export type GraphicGuideline = -1 | 1 | 2 | 3 | 4;
export const graphicGuidelines: Array<GraphicGuideline> = [1, 2, 3, 4];

The component for 1 image

type GraphicDemoProps = {
  num: GraphicGuideline;
};

const $GraphicDemo = styled.div`
  padding: 12px;
  cursor: pointer;

  img {
    height: 300px;
    transition: all 0.2s ease-in-out;

    &:hover {
      scale: 1.2;
    }
  }
`;

const GraphicDemo = (props: GraphicDemoProps) => {
  const {num} = props;

  return (
    <$GraphicDemo>
      <img src={images[num - 1]} alt={`guideline${num}`} />
    </$GraphicDemo>
  );
};

Notes:

on hover I scale the image to give a visual feedback to the user, and transition allows to animate smoothly the changes.
I've been prefixing my styled components with $ to make them easily recognizable from React components with logic, call it a personal taste.

The flexbox container

Now we can map these options to display every image, in a Flexbox container.

const $Graphics = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 100px;
`;

// ... in the component:
<$Graphics>
  {graphicGuidelines.map(graphicGuideline => (
    <GraphicDemo
      key={`graphic-${graphicGuideline}`}
      num={graphicGuideline}
    />
  ))}
</$Graphics>

The state

The state will be updated the same way I explained in my previous article, you can go there to see how I implement the action and reducing in the barrel;

I'll only show how is the onClick plugged here:

import {useTaverne} from 'taverne/hooks';

// ... in the component:

const {dispatch, pour} = useTaverne();

const preferredGraphicGuideline = pour(
  'user.preferredGraphicGuideline'
) as GraphicGuideline;

const pickGraphicGuideline = (graphicGuideline: GraphicGuideline) => () => {
  dispatch({
    type: PICK_GRAPHIC_GUIDELINE,
    payload: {graphicGuideline}
  } as PickGraphicGuidelineAction);

// ...
<GraphicDemo
  key={`graphic-${graphicGuideline}`}
  num={graphicGuideline}
  onClick={pickGraphicGuideline(graphicGuideline)}
/>

Thinking the animation

So, we have now our list and the state to select one of them.
I also added a button to reset the selection (and somehow dispatch this -1), but let's dig the fun part: the animation.

The idea is to smoothly hide the items not selected and to focus on the selected one.

I want to center the selected item, but everything is positioned with flexbox.

Let's try to use a transform: translateX to move evey elements.

a bit of math

The center of a list of integers is (length + 1) / 2
The x axis goes from left to right, so the distance of an item from the center of the row is center - (index + 1)

Our list starts at 1, which gives:

  distanceFromCenter={
    0.5 * (graphicGuidelines.length + 1) - graphicGuideline
  }

few booleans

The goal is:

to see the row of items when they are all free,
to hide all items but the selected one when an item is selected.

So while we loop on the items, we'll define:

an item isSelected if preferredGraphicGuideline is the one we currently reach in the loop.
an item isFree when no item is selected, so preferredGraphicGuideline === -1

Which gives:

  isSelected={preferredGraphicGuideline === graphicGuideline}
  isFree={preferredGraphicGuideline === -1}

Here I printed the booleans and the distance from the center to illustrate:

Now we just need to translate every items within X, depending on the distance from the center, and to hide the items that are not selected.

Animating with React and Styled Components

React

First we need to get the width of the item.

Let's create update the GraphicDemo with a React ref and a hook to get the offsetWidth of the item:

  const [width, setWidth] = useState(0);
  const imageRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (imageRef.current) {
      setWidth(imageRef.current.offsetWidth);
    }
  }, [imageRef]);

  return (
    <$GraphicDemo ref={imageRef} $width={width} {...props}
      // ...
      />
  );

Note: $with has a $ prefix here: while it's not a strict rule, it can serve as a visual indicator to developers that a prop is specific to the styled component and not a standard HTML or React prop.

Moreover, it avoids warnings such as "Warning: React does not recognize the xxx prop on a DOM element."

Style

The transform to center the selected item is:

  transform: translateX(
    ${props =>
      props.isFree ? '0%' : `${props.distanceFromCenter * props.$width}px`}
  );

The opacity to hide the items is:

  opacity: ${props => (props.isFree || props.isSelected ? '1' : '0')};

The scaling depends on the item being isSelected or hovered while isFree:

  img {
    scale: ${props => (props.isSelected ? 1.5 : 1)};

     ${props =>
      props.isFree &&
      `
      &:hover {
        scale: 1.2;
      }
    `};
  }

(well yes this final part is quite ugly 🤮)

Wrapping up

Now here is a reminder about the Props we handle to better understand the CSS

type GraphicDemoProps = {
  num: GraphicGuideline;
  distanceFromCenter: number;
  onClick: () => void;
  isFree: boolean;
  isSelected: boolean;
};

And here is final styled CSS:

const $GraphicDemo = styled.div<GraphicDemoProps & {$width: number}>`
  transition: all 0.2s ease-in-out;

  transform: translateX(
    ${props =>
      props.isFree ? '0%' : `${props.distanceFromCenter * props.$width}px`}
  );

  opacity: ${props => (props.isFree || props.isSelected ? '1' : '0')};

  img {
    height: 300px;
    scale: ${props => (props.isSelected ? 1.5 : 1)};
    transition: scale 0.2s ease-in-out;

    ${props =>
      props.isFree &&
      `
      &:hover {
        scale: 1.2;
      }
    `};

    ${maxWidth_736} {
      height: 180px;
    }
  }
`;

Notes:

I should explain someday my media queries and breakpoints system you see here with ${maxWidth_736}
I simplified the rules to focus on what matters here, but I tweaked some borders and shadows to make it look shiny.

And finally the loop itself, rendering the row:

<$Graphics>
  <>
    {graphicGuidelines.map(graphicGuideline => (
      <GraphicDemo
        isSelected={preferredGraphicGuideline === graphicGuideline}
        isFree={preferredGraphicGuideline === -1}
        key={`graphic-${graphicGuideline}`}
        num={graphicGuideline}
        distanceFromCenter={
          0.5 * (graphicGuidelines.length + 1) - graphicGuideline
        }
        onClick={pickGraphicGuideline(graphicGuideline)}
      />
    ))}
    {preferredGraphicGuideline > 0 ? (
      <UnselectButton onClick={pickGraphicGuideline(-1)} />
    ) : null}
  </>
</$Graphics>

Caveats

This method works only if the items :

are positioned in a row,
have the same width.

There may be issues calculating the offsetWidth,

Also, the offsetWidth is not updated immediately, when the image is loaded, so I need to wait for the image to be loaded before updating the offsetWidth.

const [imageLoaded, setImageLoaded] = useState(false);

const handleImageLoad = () => {
  setImageLoaded(true);
};

<img onLoad={handleImageLoad}>

But it also can be an issue if the window is resized, as the offsetWidth will not be updated.

I overcame this issue by adding a resize event listener to the window, and by updating the offsetWidth of the items when the window is resized.

Here is the hook I use to listen to the window dimensions:

import {useEffect, useState} from 'react';

export const useWindowDimensions = () => {
  const [width, setWidth] = useState(window.innerWidth);
  const [height, setHeight] = useState(window.innerHeight);

  const updateDimensions = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  };

  useEffect(() => {
    window.addEventListener('resize', updateDimensions);
    return () => window.removeEventListener('resize', updateDimensions);
  }, []);

  return {width, height};
};

Now our GraphicDemo component can be defined entirely:

const GraphicDemo = (props: GraphicDemoProps) => {
  const {num} = props;
  const [width, setWidth] = useState(0);
  const {width: windowWidth} = useWindowDimensions();
  const itemRef = useRef<HTMLDivElement>(null);

  const [imageLoaded, setImageLoaded] = useState(false);

  const handleImageLoad = () => {
    setImageLoaded(true);
  };

  useEffect(() => {
    if (itemRef.current) {
      setWidth(itemRef.current.offsetWidth);
    }
  }, [itemRef, imageLoaded, windowWidth]);

  return (
    <$GraphicDemo ref={itemRef} $width={width} {...props}>
      <img
        onLoad={handleImageLoad}
        src={images[num - 1]}
        alt={`guideline${num}`}
      />
    </$GraphicDemo>
  );
};

Thanks for reading, see you around!

Feel free to comment on parts you need more explanations for, or share your thoughts on how you would have handled the parts you disagree with.

My quick implementing of a React screen with La Taverne

Uralys — Mon, 12 Feb 2024 10:02:07 +0000

Introduction

Previously in AI I explained how I got a JSON from a Google Doc, and how I used AI to accelerate defining my typings.

Today I have to display a Carousel of choices, from this typescript data:

0 - Goal

To have in mind what I'll explain with code, let's see the final result immediately:

Now, let's see how I implemented this screen with React and La Taverne.

1 - Mapping the choices with React

We need to ask the user to pick between choices for every adjective and trait.

Let's start by listing every keys:.

const keysForAdjectives: Array<keyof ProjectAdjectives> = Object.keys(
  projectAdjectives
) as Array<keyof ProjectAdjectives>;

const keysForPernaliltyTraits: Array<keyof PersonalityTraits> = Object.keys(
  personalityTraits
) as Array<keyof PersonalityTraits>;

Now, we can map over the keys to display both choices:

<>
  {keysForAdjectives.map((key: keyof ProjectAdjectives) => (
    <>
      {projectAdjectives[key].map(adjective => (
        <p
          key={adjective}
          label={adjective}
        />
      ))}
    </>
  ))}
</>

(Same goes for keysForPernaliltyTraits)

2 - Preparing the state with La Taverne

Before to add the onClick to select the choice, let's prepare the state where to store the selected choices.

La Taverne is a Redux + RTK alternative, based on ImmerJS: the idea is the same: dispatching actions and reducing a global app state.

With La Taverne, the application state is split into feature sub states, called a barrel.

So I go to my user.barrel.ts and add a new action, the one we'll dispatch when the user will select a choice.

Copilot as not learned much about La Taverne so I created a snippet to set actions and reducing quickly:

Thanks to 2 placehoders, I just need to choose a namespace and a PascalCase action name,

Then 2 shortcuts later I have my action almost ready to use:

Let's type and use the payload in the reducer.

Here I realised I also needed to add these types:

export type ProjectAdjective =
  | AvantGardeOrClassic[number]
  | CreativeOrConventional[number]
  | ModernOrTraditional[number]
  | InnovativeOrProven[number]
  | MinimalisticOrElaborate[number]
  | FunOrSerious[number]
  | ElegantOrCasual[number]
  | BohemianOrUrban[number];

export type PersonalityTrait =
  | AdaptableOrStructured[number]
  | CollaborativeOrIndependent[number]
  | ProactiveOrReactive[number]
  | PerseveringOrFlexible[number]
  | ReservedOrExtraverted[number]
  | PassionateOrObjective[number]
  | PerfectionistOrEfficient[number]
  | PositiveOrRealistic[number];

Just a reminder to help you following the types:

And now I can type the payload:

export const PICK_AB_CHOICE = '@@user/PICK_AB_CHOICE';

type PickABChoicePayload = {
  key: keyof ProjectAdjectives | keyof PersonalityTraits;
  choice: ProjectAdjective | PersonalityTrait;
};

export type PickABChoiceAction = {
  type: '@@user/PICK_AB_CHOICE';
  payload: PickABChoicePayload;
};

const onPickABChoice = {
  on: PICK_AB_CHOICE,
  reduce: (state: State, payload: PickABChoicePayload) => {
    const {key, choice} = payload;
    state.choices[key] = choice;
  }
};

So let's go up to my State to define choices properly:

type ABChoices = SelectedProjectAdjectives & SelectedPersonalityTraits;

type State = {
  choices: ABChoices;
}

const initialState: State = {
  choices: {}
}

Finally we add the reaction onPickABChoice to the list on my barrel's reactions:

export default {
  initialState,
  reactions: [
    onPickABChoice
  ]
}

Our app state is ready to handle the user's choices.

3 - Dispatching the action

Back to our React component, we can now add the onClick to dispatch the action.

First we need the dispatch function and the pour hook to read the state:

import {useTaverne} from 'taverne/hooks';

// ...
// in the Component:

const {dispatch, pour} = useTaverne();
const choices = pour('user.choices');

Let's write the onClick handler:

const selectAdjective =
  (key: keyof ProjectAdjectives, adjective: ProjectAdjective) => () => {
    dispatch({
      type: PICK_AB_CHOICE,
      payload: {key, choice: adjective}
    } as PickABChoiceAction);
  };

And finally the view can be completed:

<Carousel>
  {keysForAdjectives.map((key: keyof ProjectAdjectives) => (
    <React.Fragment key={key}>
      {projectAdjectives[key].map(adjective => (
        <CheckboxWithLabel
          key={adjective}
          selected={get(key, choices) === adjective}
          onClick={selectAdjectives(key, adjective)}
          label={t(`adjectives.${adjective}`)}
        />
      ))}
    </React.Fragment>
  ))}
</Carousel>

4 - Testing the app

Using Redux devtools, we can see the action triggered when we click on a choice:

The state is updated when we click on a choice:

Here is the result again:

Conclusion

That's my React workflow with La Taverne, starting from google doc.

For next articles I plan to explain La Taverne in simpler terms and examples,

Also I may explain how I created this Carousel with React and Styled Components, or just let me know what you'd want me to cover ?

Thanks for reading, see you around!

Should I use AI? short story from a document to typed code

Uralys — Mon, 29 Jan 2024 10:27:27 +0000

Introduction

I'm currently building the AlterEgo platform, and here's a concrete example of using AI to accelerate my coding:

My PO comes with that french Google Doc, and a beautiful list of choices defining work methods and personality traits.

Our UI designer has crafted a magnificent design on Canva.

Not so long ago, formatting and translating a text document into typed code would have taken a substantial, uninteresting, and repetitive amount of time.

Today, I can do it in a few minutes and dedicate my time to the project's structure, a real pleasure.

Let me show you how.

0 - Starting Point

So, I started with this document:

1 - ChatGPT

As I code on VSCode, I integrated the GenieAI extension, allowing me to generate questions directly from GPT-4 within the editor.

The first step is to ask ChatGPT to generate a JSON translated into English from the Google document:

I insert the json into my TypeScript file, and Copilot comes into play.

2 - Copilot

Just by defining a variable whose name is part of my new object, Copilot directly suggests a complete object in camelCase:

The same goes for types; I simply type t, and Copilot directly suggests the type:

Then, a simple Enter, and I see the next type, just a tab away:

30 seconds later, my typing is ready for the attribute selection screen and their storage in my state:

Now I am ready to build Elisa's screens without being frustrated by the time spent on translation and formatting.

Thanks for reading, see you around!

Well that was a fun introduction about how AI takes care of boring tasks for me.

I'll go further in the code in my next articles #DEVResolutions2024.

For example, I want to share with you how I built and optimized my React environment to quickly build screens.

Feel free to comment on parts you need more explanations for, or share your thoughts on how you would have handled the parts you disagree with.