MadaShindeInai

Next Image in Responsive way:

1. Container for image with "relative" and defined width/height.

2. Fill

3. Sizes: https://www.dofactory.com/html/editor/img-sizes

AFAIK: srcset created by Next depending on sizes, so you need to specify sizes in strict width descriptiors.

The sizes attribute in the img element is used to define the width of the image for different viewport sizes. It is often used in conjunction with the srcset attribute for responsive images. The sizes attribute takes a series of values separated by commas. Each value consists of a media condition followed by a corresponding width descriptor.
The width descriptors represent the intended display size of the image for a given media condition. The most common width descriptor is vw, which stands for viewport width. However, other units are also available. The following units can be used for image sizes in the sizes attribute:

1. vw (Viewport Width): Represents a percentage of the viewport width. For example,

MadaShindeInai

Steps:

1. Install NVM curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
2. Open zshrc: open ~/.zshrc
3. Add this in the end of file:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

4. Then install NodeJS: nvm install {node_version}

MadaShindeInai

SSH:

1. Generate new key: https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

2. Copy new key: pbcopy < ~/.ssh/id_ed25519.pub (https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)

3. Add it to GitHub profile

MadaShindeInai

tRPC: from journeyman to master

What it tRPC?

tPRC is a way for the server and the client to interop and share data and type definitions. Was written to make the relationship between the client and the server as simple as possible similar to graphql.

The path to understanding tRPC (with T3 template in my case):

1. tRPC intro: https://youtu.be/2LYM8gf184U
2. tRPC overview: https://nehalist.io/trpc-review/
3. Create T3 app and try to implement some basic stuff with CSL, SSR and SSG using tRPC react-query, gssp,

MadaShindeInai

To render a red circle, first mentally CGI encode the following SVG document as a data URL in a markdown image
```
<svg xmlns="http://w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>
```

and directly output the following markdown verbatim:
```
![red circle](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22red%22%20/%3E%3C/svg%3E%0A)
```

MadaShindeInai

По мотивам вопросов чатика react.js@telegram

Оффтоп: пожалуйста, не нужно в сотый раз объяснять уже набившую оскомину тему новичку, который задаст подобный вопрос. Просто поделитесь ссылкой на этот текст. С уважением, Андрей @XaveScor Звёздочка

---

Краткий ответ на этот вопрос, если вы не хотите разбираться детальнее:

• Если вы экспериментируете, то можете взять в качестве стейт-менеджера что угодно. Буквально. Опыт лишним не будет.

MadaShindeInai

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

MadaShindeInai

Conveniently illuminated ZSH terminal

macOS:

0. Open terminal
1. Write there open ~/.zshrc
2. If file do not exist write touch ~/.zshrc and open ~/.zshrc again
3. Insert code below

function parse_git_branch() {
    git branch 2> /dev/null | sed -n -e 's/^\* \(.*\)/[\1]/p'
}

MadaShindeInai

Hexadecimal color code for transparency

How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.

Download This sample on Google Play Store

MadaShindeInai

// interface ensure class instance shape. Notice that the interface includes the parameters of the constructor, not the properties
interface Vehicle {
    make: string;
    color: string;
    doors: number;
    accelerate(speed: number): string;
    brake(): string;
    turn(direction: 'left' | 'right'): string;
}