IMPORTANT: Please use argon for hashing and verifying refresh tokens (https://www.npmjs.com/package/argon2). Bcrypt is only good for short passwords (less than 74 bytes). Since our refresh token is a JWT, it will be longer than 74 bytes, so our bcrypt compare function might return true when it should not

Короткая инструкция как получить подписку на Figma бесплатно

1) Переходите на сайт с включенным VPN и нажимаете GET VERIFIED

Должна открыться форма на сайте для заполнения, если открывается google form значит нужно сменить VPN, ее заполнять смысла нет.

2) Далее указываем, что учимся в университете и в выпадающем поле выбираем меню, что нашего универа нет и вписываем свой вариант на английском.

3) В качестве подтверждающего документа подойдет зачетная книжка (найдите в интернете и наложите свое фото).

4) Остальные поля заполняем как душе угодно. По своему опыту скажу, что толком это все никто не смотрит, потому что мне на аккаунт подписка оформилась с нажатием кнопки отправить форму.

5) Заходим на почту и видим письмо с поздравлениями об успешно оформленной студенческой подписки.

#заметка дня

Не знаю, как вас, но меня очень раздражает то, что в React Router состоянием скролла надо управлять самостоятельно.

Перемещаешься по роутам, а скролл на месте остаётся. Ну типа, што.

К счастью, решение что для v5 React Router, что для v6 одинаковое:

function ScrollToTop() {
    const { pathname } = useLocation();

    useLayoutEffect(() => {
        document.documentElement.scrollTo(0, 0);
    }, [pathname]);

    return null;
}

И потом вставляете его в контекст роутинга:

<BrowserRouter>
    <Routes>
         ...
    </Routes>
    <ScrollToTop/>
</BrowserRouter>

Но вот я это всё по привычке написал и решил всё-таки посмотреть документацию. Ну бывает. И вот что там: https://reactrouter.com/en/main/components/scroll-restoration

Восстановление скролла теперь поставляется из коробки! И умеет гораздо больше, чем просто скроллить наверх. Правда, требует изменения корневого роутера. Благо, это несложно.

Например, можно сгенерировать ключ для маршрута и на этом маршруте скролл будет восстанавливаться в предыдущее состояние по заданным вами правилам.

По-моему, очень круто. И хорошо, что решение официальное.

#react #router

#фишка дня

Поскольку селектор has прилетел во все браузеры, самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://t.me/htmlshit/1873

Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.

Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/

Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.

И, наконец, мы можем это сделать!

Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN

Значащий код:

table:has(td:nth-child(5):hover) {
  td:nth-child(5) {
    background: var(--hover);
  }
} 

Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.

Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.

По-моему, это решение ну в разы приятнее высоких псевдоэлементов.

Как вам, котаны?

#css #has #table #бородач

Когда нужны модули
1. пишешь интеграционные тесты, и чтобы не поднимать все приложение со всеми зависимостями - поднимаешь только часть
2. в рамках проекта несколько команд и нужно ответственность разделить
3. когда хочешь часть проекта выкинуть в нпм регистр
4. когда хочешь часть проекта шарить между разными приложениями

Пилю сейчас проект как полный фуллстак - SaaS для сопровождения постройки частных домов на заказ. У заказчика большие планы на будущее с этим проектом, а у меня появилась возможность сильнее

Почему реакт идёт куда-то не туда pt1

React Server Components(RSC)

Спасибо подкасту "Веб-Стандарты"(https://www.youtube.com/@webstandards_ru), за напоминание что у меня горит от реакта. Всем рекомендую.

RSC - это возможность выполнять код ваших компонентов на сервере и прозрачно приносить результат на клиент. Звучит как очень хорошая фича. Да, звучала, около 4 лет назад.
Давайте глянем что произошло за это время:
а) Была введена новая директива "use server". Что превратило наш код в менее предсказуемую штуку с точки зрения сборки и дебага. А так же развязало руки немного в других местах(об этом в следующих сериях).
б) Если у вас есть серверные компоненты, то у вас не будет работать контекст. А у нас прямо дофига экосистемы построено на том, чтобы использовать контекст. Да, есть createServerContext. Но у него нет Consumer. Т.е. пользоваться нормально вы им не можете
в) Документации у этой штуки нет. У нас есть только референсное решение в Nextjs. И это реальная проблема. RSC состоит из двух частей: сборщика и протокола. И эти штуки закрыты. Вы не можете написать собственную имплементацию RSC. Ну, можете, если зареверc инженерите сборку некста и протокол, по которому некст общается с клиентом. Да пофигу на это. Вы даже документацию к createServerContext на react.dev не найдёте(на сайте некста тоже).

А теперь давайте вспомним почему реакту нужны RSC: потому что реакт тормознутый из-за миллиарда ререндеров на каждый чих и жирный донельзя по сравнению с конкурентами(пруф в комментариях). И наличие RSC совсем сорвало башню реакту, как мне кажется. Потому что React19 теперь на 20% жирнее чем React18(https://x.com/damianstasik_/status/1792144533997703506).

Инфа по Кафке:
https://www.youtube.com/watch?v=-AZOi3kP9Js&t=524s
https://www.youtube.com/watch?v=-AZOi3kP9Js&t=524s

Наткнулся на просторах твиттера

Имхо, лучшая картинка, иллюстрирующая почему я выбираю не легкие решения, а правильные

Даже если это тяжело

Как работать с сущностями перехватчиков в NestJs
Как правило, запрос проходит через промежуточное программное обеспечение к защитникам, затем к перехватчикам, затем к каналам и, наконец, обратно к перехватчикам на обратном пути (по мере генерации ответа).
1. Incoming request
2. Middleware
2.1. Globally bound middleware
2.2. Module bound middleware
3. Guards
3.1. Global guards
3.2. Controller guards
3.3. Route guards
4. Interceptors (pre-controller)
4.1. Global interceptors
4.2. Controller interceptors
4.3. Route interceptors
5. Pipes
5.1. Global pipes
5.2. Controller pipes
5.3. Route pipes
5.4. Route parameter pipes
6. Controller (method handler)
7. Service (if exists)
8. Interceptors (post-request)
8.1. Route interceptor
8.2. Controller interceptor
8.3. Global interceptor
9. Exception filters
9.1. route
9.2. controller
9.3. global
10. Server response

Самый распространенный путь обработки запросов будет такой: Middleware => Guards => Pre-controller Interceptors => Pipes => Handler Controller =>
Источник.

npm i git+git@github.com:Webappmaster-Eugene/mapper.git (https://stackoverflow.com/questions/17509669/how-to-install-an-npm-package-from-github-directly)
В идеале - https://help.sonatype.com/en/node-packaged-modules-and-npm-registries.html
Объяснение (https://timeweb.cloud/tutorials/cloud/ustanovka-i-ispolzovanie-nexus-repository-dlya-hraneniya-artefaktov )

select delete_client()