The day will come when you will laugh at what scares you today. I tell myself this more and more often. 

 Преподобный Сергий Радонежский https://image.nostr.build/be11d452159e40e27baccd35f643543e366d804e6c547c30a738737dac2dcaf3.jpg 

 Here is my [creation](https://chuckis.github.io/flyingpoop/). I dreamed about the game. It was created in a couple of hours using chatgpt. Now I want to make it in more humane-way, with sprites and develop levels etc. If you have any ideas, throw them in the [github] (https://github.com/chuckis/fanex) issue. 

 #til "Mandella effect" from 14 y.o.  

 С Праздником! 
#orthodox https://image.nostr.build/2ec675b522e6e281f1038fe8ae21da40680eef335c4aff8a4b2ae0007fb7cbf9.jpg
 

 Using an unfamiliar #meme ... it's like trying to import a class from an unknown library. You wanted a banana, but ended up with the jungle and a monkey instead 

 #catstr
https://image.nostr.build/caa65860d5b2007d27874eb31d6737c23fac63eb1f0674ca2fc49c4bf5bab736.jpg 

 GM
https://image.nostr.build/f29bc2de10d9e7946d7f3229a21295ffa0f2a76ccd1c6aed9d6090edfb5b8afe.jpg 

 https://itch.io/jam/littlejs-game-jam 

 https://www.inkandswitch.com/local-first/ 

 Прекрасная осень, разыскиваю Михаила Феничева вместо грибов. 

 Programmer's Day, nostr!

#programming 

 #asknostr
Which client can send .txt or .html? 

 Citrine turnes off in background. 

 Citrine 

 I'm watching a wonderful film and I recommend it to everyone, even before I've finished watching the first episode.

https://youtu.be/HVobfdjETew
https://image.nostr.build/2df3da9c341304e1fa9d08ee164cdd431263266d667e7dc2e276b1c535e7157d.jpg 

 https://image.nostr.build/e04504c6ed575261d9ab7de15ca7ab3efbb197baaa678ca49c4f2bd8403d02a1.jpg me terrible in graphic design. Just trying to mash up nostr and logseq icons. What do you think, plebs? 

 test 

 #productivity
#devdiary #logseq

**Not Another Nostr Client – Just Pure, Fast Posting.**
Forget the endless tabs and heavy interfaces. This plugin for logseq is here to give you a faster way to get your thoughts out there. 
Whether it's a few quick lines or a deep-dive post, it's all about hitting send to your followers without the extra noise. This is not a client—this is your direct line to the relay, a tool built for efficiency and simplicity.
Think of it as your personal "publish now" button, ready whenever inspiration strikes. Be part of something streamlined and help me shape a tool that puts your voice first.

[Release](https://github.com/chuckis/screenplay/releases/tag/pre-0.0.1)

DM @chuckis 

 I will tell my descendants that I was on Nostr even before ReplyGuy started 

  https://image.nostr.build/1b3213ee0bb3a4e7e6d6cc828eab09dcca45b854ef9dc73fa7f33780559f3512.jpg 

 #asknostr
An attempt to calculate the total number of users would be a move towards centralization, wouldn't it? 

 после непродолжительных исследований, обнаружена жизнь в simplex, hah 

 
https://image.nostr.build/aac4126642736ce5a0d853e5ec0ce7fc4fc8f60bdab64be2eb99b8776dac712e.jpg 

 https://github.com/chuckis/screenplay/releases/tag/pre-0.0.1

#logseqplugin
#devdiary

This is my first release! Sure, it's a bit rough around the edges. Automation, TypeScript, unfamiliar API territories—yeah, all that jazz. It was just an itch I had to scratch! It's raw and green, but hey, I think it's fitting for Nostr. I’m asking for help and inviting collaboration. Alright, I'm off to grab some coffee! 😊
 

 #grownostr
https://image.nostr.build/f6dab1560167ec8ee82c10ef5d6f756d82c337c2977e0876efb65a655ef34049.jpg 

 https://samdbeckham.gitlab.io/javascript_sticker/ 

 https://fountain.fm/episode/50b6BiZeZHoTYTNnj37u 

 #gamestr 
https://chuckis.github.io/flyingpoop/ 

 https://youtu.be/jX4uL0qJ94A?si=NQ-2qeR-9gKkKx5M 

 [repository](https://github.com/chuckis/my-slider-app)

nostr:nevent1qqs0y7lgdgtzyqq7l56v9p85lk0c2mwv2tpxa9tzp5vnh83mklyusuqzyzahx52vsznezm0agty6m24gjfuft6y5mnmnf0qgdn9r869xaq4xqqcyqqq823cfhuq5w 

 In this tutorial, we'll build a React component using TypeScript that includes sliders for adjusting length, width, height, and volume. You will be able to fix the values of the sliders and automatically recalculate other parameters based on the volume.

### Step 1: Create a New Project

First, let's create a new project using `Create React App` with the TypeScript template.

Open your terminal and run the following command:

```bash
npx create-react-app volume-slider-app --template typescript
```

After the installation is complete, navigate to the project directory:

```bash
cd volume-slider-app
```

Start the project with the following command:

```bash
npm start
```

The project will open in your browser at `http://localhost:3000`.

### Step 2: Basic Slider Component

Let's create a basic component that will contain sliders for length, width, and height.

1. Create a new file `src/SliderComponent.tsx`.
2. Add the following code:

```tsx
import React, { useState } from 'react';

const SliderComponent: React.FC = () => {
  const [length, setLength] = useState<number>(10);
  const [width, setWidth] = useState<number>(10);
  const [height, setHeight] = useState<number>(10);

  return (
    <div>
      <div>
        <label>Length: {length}</label>
        <input
          type="range"
          min="1"
          max="100"
          value={length}
          onChange={(e) => setLength(Number(e.target.value))}
        />
      </div>
      <div>
        <label>Width: {width}</label>
        <input
          type="range"
          min="1"
          max="100"
          value={width}
          onChange={(e) => setWidth(Number(e.target.value))}
        />
      </div>
      <div>
        <label>Height: {height}</label>
        <input
          type="range"
          min="1"
          max="100"
          value={height}
          onChange={(e) => setHeight(Number(e.target.value))}
        />
      </div>
    </div>
  );
};

export default SliderComponent;
```

3. Open the `src/App.tsx` file and replace its content with the following:

```tsx
import React from 'react';
import SliderComponent from './SliderComponent';

const App: React.FC = () => {
  return (
    <div className="App">
      <h1>Volume Calculator</h1>
      <SliderComponent />
    </div>
  );
}

export default App;
```

Now, when you refresh your browser, you'll see three sliders that allow you to adjust the length, width, and height.

### Step 3: Adding Volume Calculation

Next, let's add volume calculation based on the length, width, and height values.

1. Update the code in `SliderComponent.tsx`:

```tsx
const calculateVolume = (length: number, width: number, height: number): number => {
  return length * width * height;
};

const SliderComponent: React.FC = () => {
  const [length, setLength] = useState<number>(10);
  const [width, setWidth] = useState<number>(10);
  const [height, setHeight] = useState<number>(10);
  const [volume, setVolume] = useState<number>(calculateVolume(length, width, height));

  // Update volume when parameters change
  const updateVolume = () => {
    setVolume(calculateVolume(length, width, height));
  };

  return (
    <div>
      <div>
        <label>Length: {length}</label>
        <input
          type="range"
          min="1"
          max="100"
          value={length}
          onChange={(e) => {
            setLength(Number(e.target.value));
            updateVolume();
          }}
        />
      </div>
      <div>
        <label>Width: {width}</label>
        <input
          type="range"
          min="1"
          max="100"
          value={width}
          onChange={(e) => {
            setWidth(Number(e.target.value));
            updateVolume();
          }}
        />
      </div>
      <div>
        <label>Height: {height}</label>
        <input
          type="range"
          min="1"
          max="100"
          value={height}
          onChange={(e) => {
            setHeight(Number(e.target.value));
            updateVolume();
          }}
        />
      </div>
      <div>
        <label>Volume: {volume}</label>
      </div>
    </div>
  );
};
```

Now, the volume will be recalculated whenever any of the parameters (length, width, height) change.

### Step 4: Adding Toggle Switches to Fix Values

Next, let's add the ability to fix the values of length, width, height, and volume using toggle switches.

1. Add toggle switches to the sliders in `SliderComponent.tsx`:

```tsx
const SliderComponent: React.FC = () => {
  const [length, setLength] = useState<number>(10);
  const [width, setWidth] = useState<number>(10);
  const [height, setHeight] = useState<number>(10);
  const [volume, setVolume] = useState<number>(calculateVolume(length, width, height));

  const [isLengthFixed, setIsLengthFixed] = useState<boolean>(false);
  const [isWidthFixed, setIsWidthFixed] = useState<boolean>(false);
  const [isHeightFixed, setIsHeightFixed] = useState<boolean>(false);
  const [isVolumeFixed, setIsVolumeFixed] = useState<boolean>(false);

  const updateVolume = () => {
    if (!isVolumeFixed) {
      setVolume(calculateVolume(length, width, height));
    }
  };

  return (
    <div>
      <div>
        <label>Length: {length}</label>
        <input
          type="range"
          min="1"
          max="100"
          value={length}
          onChange={(e) => {
            if (!isLengthFixed) {
              setLength(Number(e.target.value));
              updateVolume();
            }
          }}
          disabled={isLengthFixed}
        />
        <label>
          <input
            type="checkbox"
            checked={isLengthFixed}
            onChange={() => setIsLengthFixed(!isLengthFixed)}
          /> Fix
        </label>
      </div>

      <div>
        <label>Width: {width}</label>
        <input
          type="range"
          min="1"
          max="100"
          value={width}
          onChange={(e) => {
            if (!isWidthFixed) {
              setWidth(Number(e.target.value));
              updateVolume();
            }
          }}
          disabled={isWidthFixed}
        />
        <label>
          <input
            type="checkbox"
            checked={isWidthFixed}
            onChange={() => setIsWidthFixed(!isWidthFixed)}
          /> Fix
        </label>
      </div>

      <div>
        <label>Height: {height}</label>
        <input
          type="range"
          min="1"
          max="100"
          value={height}
          onChange={(e) => {
            if (!isHeightFixed) {
              setHeight(Number(e.target.value));
              updateVolume();
            }
          }}
          disabled={isHeightFixed}
        />
        <label>
          <input
            type="checkbox"
            checked={isHeightFixed}
            onChange={() => setIsHeightFixed(!isHeightFixed)}
          /> Fix
        </label>
      </div>

      <div>
        <label>Volume: {volume}</label>
        <input
          type="range"
          min="1"
          max="100000"
          value={volume}
          onChange={(e) => {
            if (!isVolumeFixed) {
              setVolume(Number(e.target.value));
            }
          }}
          disabled={isVolumeFixed}
        />
        <label>
          <input
            type="checkbox"
            checked={isVolumeFixed}
            onChange={() => setIsVolumeFixed(!isVolumeFixed)}
          /> Fix
        </label>
      </div>
    </div>
  );
};
```

### Step 5: Implementing Dependency Between Values

Now, let's implement the logic where, when the fixed volume changes, the length, width, or height is recalculated.

1. Update `SliderComponent.tsx`, adding the dependency logic between the parameters:

```tsx
const handleVolumeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const newVolume = Number(event.target.value);
  if (!isVolumeFixed) {
    setVolume(newVolume);

    if (isLengthFixed) {
      setHeight(newVolume / (length * width));
    } else if (isWidthFixed) {
      setHeight(newVolume / (length * width));
    } else if (isHeightFixed) {
      setWidth(newVolume / (length * height));
    } else {
      setHeight(newVolume / (length * width));
    }
  }
};
```

### Conclusion
![app](https://image.nostr.build/ebcf2e8afb35bb7dcbda242b88bc4f878ea137d000daa5209b1455afea2eaa36.jpg)

You've created a component with sliders and dependent values, where each value can be fixed. The component automatically recalculates parameters based on the fixed values and changes in volume. You can expand this component by adding styling, additional logic, or other features as needed.

[App](https://chuckis.github.io/my-slider-app/) 

 
https://image.nostr.build/ebcf2e8afb35bb7dcbda242b88bc4f878ea137d000daa5209b1455afea2eaa36.jpg 

 caturday
https://image.nostr.build/ac34f1650181bc8b30060d602933c7960689f459ca473f8018849a0190c4ae1e.jpg 

 #til #ui #ux 44px 

 
https://image.nostr.build/939e17aea034de2669b363beed1c510bd381183c2240f661b5fc46eb419a8648.jpg 

 #flowerstr
https://image.nostr.build/96ec280dd41596b4591dc7ed5d687bea33118def1977b1b7abf694fa70dd9e98.jpg
https://image.nostr.build/ed3948bcf7097f1e45b174bee96a0a06c84b2d0e547adb0a1836e4782cbe4840.jpg 

 #devdiary omg typescript, especially after python. btw, block send from #logseqplugin 

 #til
ctrl+shift+p restart ts server  

 All of the “city crazy people” suddenly disappeared somewhere. The hysteria around Covid ended, then the war began, and they disappeared. I've seen 4 of them before, all the time. And now, they are gone... 

 Testing chuckis.npub.pro  

 Blur, song2;
Tory Amos, Crucify;
 

 just collect that. music from my youth
https://youtube.com/playlist?list=PLSzr0QPQS-VmeIxscn4x8i04jlPsiGG9Q&si=ajxiGjnR-FwlkOh_ 

 начали отключать электричество по 10+ часов. 
#darkdiary 

 you can make mistakes, but you can’t lie 

 Sometimes social entrepreneurship looks like a scam.  Often like this