Блог Черкашина Александра | cherkashin.dev

💪 Боремся с ютубом за внимание

Mon, 13 Apr 2026 09:00:10 GMT

💪 Боремся с ютубом за внимание

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

Ну если не считать уведомления из налоговой. От каждого их письма я вздрагиваю, после того, как мне пришлось им заплатить 83 000р из-за неправильно оформленного патента 😅.

Я не читал и не смотрел новостные видосы, не читал телеграмм каналы||, ну почти||. Но в те моменты, когда мне нужно было найти что-то на Ютубе, я открывал главную страницу и видел его рекомендации… И тут сразу вижу, что произошло в мире, что я что-то пропускаю, там новость интересная, а там чувак рассказывает, как он продуктивность свою увеличил в 10 раз, а ещё новый трейлер нового Человека Паука вышел.

Блин, всё такое интересное, хочется сразу посмотреть, в общем, ютуб полностью захватывает внимание, через 10 минут я закрываю вкладку и только потом вспоминаю, зачем я вообще туда заходил.

Пару месяцев я писал про One Sec, а сегодня расскажу про подходы, чтобы отключить навязчивые рекомендации Ютуба.

Я нашел два подхода:

браузерные расширения
встроенный способ на ютубе

Я пока попробовал первый вариант — расширение Unhook, оно помогает отключить все рекомендации ютуба:

главная страница будет просто пуста — просто чёрный экран (как на скрине)
при просмотре видео никаких панелей с рекомендаций, никаких отвлечений

Второй подход — удалить всю историю ютуба, в этом случае главная страница будет также пуста. Этот подход пока не пробовал, но вот здесь наши индийские друзья уже всё объяснили.

❤️ — если ютуб также захватывает ваше внимание
👍 — если вы уже пользуетесь описанными подходами
🔥 — если вы не против, чтобы ютуб вас отвлекал

#productivity

Я собираюсь в свой первый отпуск в этом году, а значит пора всё-таки немного рассказать, как я…

Thu, 02 Apr 2026 08:13:25 GMT

Я собираюсь в свой первый отпуск в этом году, а значит пора всё-таки немного рассказать, как я провел предыдущий отпуск.

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

Наш рейс задержали на пару часов, поэтому когда мы прилетели, то встряли в жёсткую пробку, и до отеля ехали как черепахи. Остановились в Ja Ocean View Hotel, отель выбрали из-за вида на Персидский залив и колесо обозрения, он просто бомбический, особенно ночью, когда всё сияет.

Когда мы заселились было уже темно, поэтому пошли сразу гулять по набережной, и рты у нас приоткрылись, тут и море, и набережная и высотки и это всё сияет в ночи. Мы немного пожалели, что мы приехали именно сюда. Подумали: ну всё, красивее уже, наверное, не будет, можно больше и не путешествовать 😅. Конечно, ко всему этому мы привыкли за пару дней.

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

Потом заглянули в очень красивый Старбакс. Когда я куда-то еду, я всегда захожу в Старбакс с надеждой, что там будет нормальный американо или капучино, но пока удача мне не улыбнулась, вкусный у них только холодный кофе.

Потом мы поехали шопиться, это был, наверно, первый раз, когда мы столько времени за весь отпуск провели слоняясь по торговым центрам 😅.

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

Вообще море в Дубае так себе. Либо это ощущение после Египта, где море прям шикарное, либо дело в искусственных островах, из-за которых, вода застаивается Было ощущение, что мы скорее на речке, чем на море.

Из того, что успели посмотреть в Дубае:

Колесо обозрения
Смотровую на пальме — The View at the Palm
Световое шоу у Бурдж Халифы
Потерялись в Дубай Молле
Покатались на Катере по Персидскому заливу
Нашли “настоящий” и “поддельный” дубайский шоколад
Съездили на экскурсию в Абу-Даби - Пробежались по Лувру - Заехали в Президентский Дворец - Походили с открытым ртом по мечети шейха Зайда

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

Мы ездили в Рамадан, но туристы скорее всего ничего и не заметят. Единственное, старались не пить воду у всех на виду. Март отличный месяц для Дубая, не очень жарко, легкий ветерок, очень комфортно в течении всего дня.

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

Тут невероятно чисто, никакого мусора. Яблоки сложены одно к одному как египетские пирамиды, морковки выложены вряд. Хотя, так, конечно, не везде, мы ездили в старые районы, где есть ещё тот старый Дубай, и там совсём всё не дорого богато.

Мне кажется Курск в этом плане угнетает, нельзя вот так выйти и насладиться красотой. Впитать немного энергии из вне, приходится вывозить на морально волевых, или сваливать в отпуск на подзарядку 😄.

Рассказывайте:

🔥 — тоже уже были в отпуске в этом году 🤨 — ещё не успели отдохнуть ❤️ — желаете мне не заболеть в этот раз

#vacation

Вчера говорю жене: так и не придумал какую шутку написать на 1 апреля

Wed, 01 Apr 2026 07:25:10 GMT

Вчера говорю жене: так и не придумал какую шутку написать на 1 апреля

Жена: какие шутки? время сейчас такое, не до шуток совсем

Я: Отлично, спасибо так и напишу

Надеюсь сегодня обойдётся без дурацких ~~новостей~~ шуток.

Знаете как это бывает, начинаешь делать задачу, посидел, придумал архитектуру, реализовал, и тут…

Mon, 30 Mar 2026 09:03:01 GMT

Знаете как это бывает, начинаешь делать задачу, посидел, придумал архитектуру, реализовал, и тут начинается самое интересное… В одном месте что-то не учёл, в коде соседнего модуля вылез косяк, а время идёт, сроки горят и приходится подставить костыли и надеяться что когда-то можно будет это исправить. Да и переписывать свой код больно, он же ваш, вы потратили на него время.

Я это вот к чему. Астрологи объявили год агентного кодинга, все пишут как они ускоряются в 5-10 раз, но эта проблема никуда на самом деле не уходит.

Вы ставите задачу кодексу, клоду или чем вы там пользуетесь, он реализует задачу, вы проверяете, а он архитектурно сделал что-то не так, какие-то требования не учёл, и вы начинаете просить агента исправить всё что он натворил в том же чате. И он делает примерно то же, что и мы - начинает либо фиксить баги, либо добавлять костыли. В итоге код уже не такой хороший, как если бы он сразу сделал нормально. А под конец агент ещё и начинает путаться, тупить и ходить вокруг да около.

И тут на помощь приходит One Shot Prompting. Про подход я уже слышал, но по-настоящему понял его только на стриме Вани в GuideDAO. В общем, суть простая - вы не просите агента исправить все косяки. Вместо этого берёте исходный промпт и уточняете требования, чтобы избежать проблем, которые всплыли в первой реализации. И, конечно, без угрызений совести выкидываете первую версию.

То есть по сути, теперь мы дешево можем делать почти сразу хорошо, переписать всё стало в разы проще.

🧪 Пример из своего опыта. Я решил начать пилить небольшой пет-проект, который, надеюсь, когда-нибудь увидит свет. В проекте используется MapLibre GL JS - библиотека для отображения векторных карт. После очередной фичи я решил попросить кодекс покрыть её playwright тестами, и тут началось.

Он написал тесты и следующие полчаса пытался понять, почему же карта не отображается. Как джун, искал проблему методом тыка. Вносил изменения - карта не работает. Решил, что проблема в кеше - перезапускает дев-сервер. И так раз десять. В итоге он всё-таки дошёл до причины: WebGL, который используется в MapLibre, не работает, когда playwright запущен в headless режиме.

С горем пополам тесты он написал, но на код, конечно, лучше не смотреть. Естественно, он не убрал все свои неудачные попытки пофиксить проблему.И это именно тот случай, когда нужен One Shot Prompting.

Я просто спросил у кодекса, в чём была проблема, добавил это в исходный промпт, откатил изменения и запустил всё заново. В этот раз реализация прошла быстро, и код получился заметно чище.

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

⚠️ У подхода, конечно, есть и минус. Токенов тратится больше. Поэтому если задача большая, а багов немного, иногда проще пойти на компромисс и просто попросить агента всё пофиксить.

||А вообще теперь же с 1 марта нельзя говорить one shot prompting. Как это будет по-русски, «однократное задание по образцу»? 😆||

А вы используете One Shot Prompting?

👍 — использую one shot prompting
❤️ — правлю всё в одном чате
😢 — почти не использую ИИ

#ai

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

Thu, 26 Mar 2026 08:39:44 GMT

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

Монитор отлично работал с виндовым ноутом, но на маке всё поплыло.
Текст мыльный, глаза уставали довольно быстро.

Я всё откладывал этот вопрос, а глаза продолжали страдать.

Наконец-то, взяв себя в руки, я пошёл в наш курский программистский чатик за советом. Умные люди рассказали про PPI у маков и посоветовали смотреть в одну из таких конфигураций:

4K на 24 дюйма
5K на 27 дюймов
6K на 32 дюйма

Если очень грубо, PPI — это плотность пикселей на дюйм.

Я решил взять 5K монитор и запустил исследование в ChatGPT, и он предложил мне 4 варианта:

27” Монитор DIGMA PRO Art M, 5120x2880 — 54 990
Samsung ViewFinity S9 S90PC S27C902PAI 27” 5120x2880 — 81 999
Монитор Digma Pro DM27SP02 — 84 906
Kuycon G27X SE — от 80 000

Я человек простой: что дешевле, то и беру.
Поэтому остановился на Digma PRO.

После 2К монитора, это просто сказка, смотреть одно удовольствие. Единственное неудобство — ножка не регулируется по высоте. Но сама по себе она более-менее высокая, так что с 14-дюймовым маком можно обойтись и без подставки.

Пока ждал монитор нашел 2 способа улучшить качество на 2K мониторе:

включить 2x масштабирование — тогда качество отличное, но всё огромное
установить BetterDisplay — специальную утилиту для мака для настройки монитора, и изображение становится чуть чётче, но всё ещё достаточно отстойное

Кстати, обзоры этих мониторов можно посмотреть здесь:

А как у вас дела

👍 — обхожусь одним монитором
😢 — тоже страдаю с внешним монитором
🔥 — всё ок: монитор классный или на винде/линуксе таких проблем нет

Если честно, после того как я научился пользоваться гитом и разобрался, что такое git checkout, git…

Mon, 23 Mar 2026 08:35:09 GMT

Если честно, после того как я научился пользоваться гитом и разобрался, что такое git checkout, git branch, git merge, git commit, я не особо копал, какие ещё там есть команды. Конечно, использовал git rebase, reflog, reset, но не более того.

И вот только на прошлой неделе узнал, что такое git worktree. Пока ещё сам не распробовал, но уже собираюсь заменить свой дополнительный клон рабочего репозитория на worktree.

Часто бывает, что нужно параллельно ковырять две ветки: в одной делать задачу, в другой срочно что-то поправить. Или быстро переключиться в ветку для ревью. Или просто посмотреть старую версию, не трогая текущее состояние.

У меня и сейчас для этого два отдельных git clone одного и того же репозитория. Работает, конечно, но clone — это всё-таки отдельный репозиторий со своим .git. То есть папок у тебя будет столько же, сколько и с worktree, но в случае с clone ещё и история с git-объектами дублируется. У меня, например, один .git весит около 4 ГБ…

А git worktree — это по сути несколько рабочих папок для одного репозитория. История и git-объекты при этом общие, а в дополнительной папке .git — это не отдельная директория, а файл-ссылка на служебные данные основного репозитория.

То есть разница такая:

git clone — отдельный репозиторий, отдельный .git, отдельная история на диске. git worktree — ещё одна рабочая папка, но репозиторий под капотом общий.

Создаётся всё буквально одной командой:

git worktree add ../project-review main

Если нужна новая ветка под задачу:

git worktree add -b feature/button-fix ../project-button-fix main

Дальше просто открываешь обе папки в IDE и спокойно работаешь параллельно.

Посмотреть все worktree можно так:

git worktree list

Удалить так:

git worktree remove ../project-review

Подробнее можете почитать в статье.

Узнал я об этой фиче, кстати, из Codex. Там есть специальная функция, чтобы быстро создать дополнительный worktree и работать над несколькими задачами параллельно.

👍 — если уже пользуетесь worktree 🔥 — если, как и я, держите несколько клонов одного репо 🤔 — если вам вообще нет надобности держать несколько копий одного репозитория

#git

Я искренне завидую людям, которые выступают на митапах и записывают курсы по программированию. Для…

Wed, 18 Mar 2026 09:28:01 GMT

Я искренне завидую людям, которые выступают на митапах и записывают курсы по программированию. Для меня это кажется чем-то невероятно сложным, поэтому я не выхожу за пределы ведения каналов 😅

Сегодня хочу порекомендовать канал моего тёзки Саши - Frontend вдохновляет.

У нас с ним есть что-то общее: мы оба фронтендеры и оба используем Obsidian. А у себя в канале Саша делится полезным из практики, заметками про инструменты и просто интересными наблюдениями.

Что у него посмотреть:

Плюс у Саши есть курс на Stepik.

А ещё он делится прочитанной художественной литературой и пройденными играми.

В общем, рекомендую заглянуть в канал

👉 https://t.me/front_everyday

#рекомендую_канал

Недавно фиксил баг у себя в блоге, и заодно нужно было покрыть тестами парсер тегов для…

Mon, 16 Mar 2026 09:51:02 GMT

Недавно фиксил баг у себя в блоге, и заодно нужно было покрыть тестами парсер тегов для телеграм-постов.

В какой-то момент вспомнил, что в Node.js уже есть встроенный тест-раннер. Решил не тащить лишние зависимости и просто проверить, насколько он вообще живой.

В итоге оказалось, что для таких задач — более чем ок.

https://github.com/acherkashin/acherkashin.github.io/blob/main/tests/telegram-tags.util.test.ts

import assert from 'node:assert/strict';
import test from 'node:test';
 
test('extracts multiple hashtags from a single line', () => {
  const tags = extractTelegramTagsFromMarkdown('#frontend #testing #astro');
 
  assert.deepEqual(tags, ['frontend', 'testing', 'astro']);
});

Что ещё приятно — тесты можно писать на чистом TypeScript без установки дополнительных пакетов.

Для утилит, парсеров, серверного кода и прочих небольших юнит-тестов этого раннера вполне хватает.

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

Ещё по теме:

А вы чем гоняете тесты?

🔥 — Vitest
👍 — Jest ❤️ — Что-то другое (напишу в комментариях)

#nodejs #tests

Я занимаюсь фронтенд-разработкой около 9 лет, но, к своему стыду, ни разу не «игрался со шрифтами».…

Fri, 13 Mar 2026 08:57:35 GMT

Я занимаюсь фронтенд-разработкой около 9 лет, но, к своему стыду, ни разу не «игрался со шрифтами». Во всех проектах, над которыми я работал, был либо подключён какой-то шрифт из Google Fonts, либо всё уже было настроено, либо использовался просто какой-то дефолтный шрифт из шаблона.

Но вот шрифты всё-таки меня настигли. Во время редизайна дизайнер решил, что Nunito уже не модно, и предложил перейти на Inter. Когда мы обновили шрифт, наш интерфейс разнесло во все стороны 😅 Inter оказался заметно больше.

Сначала мы решили пойти самым простым путём: поменять значения наших дизайн-токенов и сделать их на 1px меньше, чтобы компенсировать переход на новый шрифт. Но это не сработало: наш конструктор позволяет указывать кастомные шрифты, поэтому такой вариант отпал.

И вот после очередного сеанса ~~гугления~~ промптинга ChatGPT подсказал мне, что есть такое свойство, как size-adjust, которое позволяет уменьшить весь шрифт. Размеры и отступы всё равно, конечно, немного отличаются, но так можно избежать изменения дизайн-токенов.

Для наглядности это выглядит примерно так:

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 93%;
  src: url('https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf') format('truetype');
}

А ещё я собрал небольшую демку, где можно поиграться с этим свойством.

👍 — если знали про size-adjust ❤️ — если узнали что-то новое

#css

Если всё горит — поговори 🔥

Tue, 10 Mar 2026 11:13:02 GMT

Если всё горит — поговори 🔥

Это была уже третья неделя подряд, когда у меня в понедельник выходной. Да-да, на прошлой неделе я вообще прогулял — прям как в школе.

Дел как-то навалилось много: и на работе, и личных. И перед запоздалым началом новой рабочей недели хочется лишний раз напомнить — в первую очередь себе — простую вещь:

если всё горит — поговори.

У меня уже который раз происходит одна и та же фигня. Работы вагон и маленькая тележка: ничего не успеваешь, бежишь изо всех сил, нервничаешь, постоянно раздражаешься. Бесит всё так, что аж пот по спине течёт.

А потом оказывается, что иногда достаточно просто поговорить.

Только за прошлую неделю у меня было две такие ситуации:

Пошёл проводить 1:1 с коллегой. В итоге сам отвлёкся, проговорили разные вещи — и внезапно уже не кажется, что проблемы такие большие.
Обсудил текущую проблему по проекту с коллегой. Он посмотрел на неё со стороны и предложил решение, о котором я вообще не думал. В итоге снова оказалось, что я просто больше загонялся.

Иногда мы настолько погружаемся в проблему, что начинаем вариться в собственных мыслях. А разговор иногда просто помогает немного проветрить голову.

Правда, есть нюанс.
Если кто-то в такой момент захочет поговорить со мной «ни о чём», у меня может полыхнуть ещё сильнее 😅.

В общем, хорошей недели всем 👋 . Ставь ❤️, чтобы эта неделя прошла без происшествий.

Девушки, с 8 марта 🌷

Sun, 08 Mar 2026 08:41:22 GMT

Девушки, с 8 марта 🌷

Пусть в жизни всё получается, планы исполняются, а рядом всегда будут люди, которые поддерживают и вдохновляют.

А от меня небольшой виртуальный букет — тюльпаны, выращенные на чистом CSS:

https://codepen.io/cherkalexander/pen/EagyGZw

Пока ремонт особо не напрягает, появилось время вернуться к рутине. Начал смотреть стримы про…

Thu, 05 Mar 2026 10:00:27 GMT

Пока ремонт особо не напрягает, появилось время вернуться к рутине. Начал смотреть стримы про вайбкодинг в Guide DAO, где сейчас прохожу обучение. Стримы проходят раз в неделю, где ребята продолжают развивать один и тот же проект — шаг за шагом углубляются в архитектуру и работу с агентами.

В этот раз для себя наконец нормально понял тему скиллов. Skills — это по сути «ленивые» инструкции: они загружаются в промпт только тогда, когда действительно нужны.

Рано или поздно агент начинает делать что-то «не по-нашему». Например, пишет e2e-тесты без структуры, игнорирует page object или общие хелперы.

Первая реакция — добавить правила в <CLAUDE.md>: — использовать Playwright — придерживаться page object — выносить повторяющуюся логику — аккуратно работать с асинхронностью

Это работает. Но файл быстро разрастается, если напрямую в нём описывать все правила для тестов, API, миграций, логирования и т.д.. В итоге системный промпт перегружен, хотя для конкретной задачи нужна лишь часть правил. Зачем тянуть всё сразу?

Вот здесь и нужны skills.

Скилл — это заголовок (когда применять) и тело (инструкции). Агент всегда видит только заголовки, а детали подтягивает по необходимости. Задача на e2e — активировался нужный скилл. Пишем что-то другое — скилл не подгружаем, чтобы не засорять контекст ненужными деталями.

К слову, на следующей неделе в Guide DAO стартует живой поток по вайбкодингу: формат стримов, небольшие группы, практика с домашками и обратной связью, длительность около полутора–двух месяцев. После покупки участники получают доступ ко всей платформе Guide DAO — стримам, курсам и комьюнити. Сейчас по промокоду 🏷 CHERKASHIN действует скидка 30% (плюс около 10% на сайте).

Из других полезных вещей, которые разбирали на стримах:

• MCP-серверы — позволяют агенту выходить во внешний мир: сходить в Jira, базу данных или API и собрать данные. • Команды — кастомные slash-команды с заранее заданным сценарием или промптом для повторяющихся действий. • Хуки — точки расширения, которые позволяют выполнить код в определённые моменты работы агента (например, после генерации плана). • spec-kit — spec-kit помогает быстро получить черновик спецификации проекта, который потом можно отревьюить и доработать.

И в конце стрима зацепила одна мысль 💡. Парни обсуждали, что нам, по сути, повезло войти в ИТ ещё до появления ИИ и агентов. Мы успели набить базовые знания и привыкли разбираться в проблемах самостоятельно. Сейчас это объективно сложнее: когда ИИ может написать решение в разы быстрее, нужна большая сила воли, чтобы не просто «попросить агента», а действительно вникнуть, разобраться и чему-то научиться. Заставить себя изучать новое в такой реальности — отдельный навык.

Кстати, ребята выложили в открытый доступ 👉 один из стримов по вайбкодингу, где на практике разбирается как использовать spec-kit.

Ставьте:

🔥 — если чувствуете себя уверенно в вайбкодинге
👍 — если пока наблюдаете со стороны
😱 — если всё сильнее переживаете, что ИИ вас заменит

#ai

Как-то я немного забегался: «Я 💛 Фронтенд» прошёл уже две недели назад, а я только сейчас нашёл…

Mon, 02 Mar 2026 09:05:07 GMT

Как-то я немного забегался: «Я 💛 Фронтенд» прошёл уже две недели назад, а я только сейчас нашёл время сесть и подвести итоги 🙂

Это уже третий раз, когда я был на конференции в офлайне, и — что символично — третья новая локация. В Москве я обычно езжу только на метро, но в этот раз пришлось пересесть на автобус, чтобы добраться до Мосфильма, где и проходила конференция 🎬

В отличие от предыдущих разов, это была первая конференция, на которой я всё-таки поборол интроверта внутри себя и походил по активностям.

Ещё до начала докладов я успел:

🧙‍♂️ побороться с колдуном на платформе Source Craft — это такой аналог GitHub от Яндекса;

👔 побыть CEO в симуляторе и решить, что важнее: устранить технический долг или запилить новую фичу;

🎲 а позже поиграть в Alias для фронтендеров.

Короче, без фирменных носков и шоппера я, конечно, не уехал 😄

На 14 февраля всё-таки удалось попасть в кино — правда, вместо фильма там были доклады. Вот мой топ-3:

По-настоящему адаптивный интерфейс. Рома рассказал, что адаптивность — это уже давно не только брейкпоинты. Сейчас мы мыслим компонентами, а современные браузеры поддерживают кучу новых возможностей, чтобы делать их адаптивными. Посмотрите хотя бы на clamp() и style queries.
Локальные модели: как запустить ИИ в браузере. Очень интересный доклад о том, как голосовой ввод и LLM в браузере могут сделать UX ещё лучше.
Что на самом деле важно в разработке?. Каждый раз убеждаюсь, что самые интересные доклады — не технические. Спасибо Владимиру за напоминание о том, что действительно важно ❤️

Но, как я уже говорил, конференции — это не только про доклады. Это про живое общение с живыми людьми, а не где-то в чатах или онлайне, где мы и так проводим слишком много времени.

Я приехал со списком вопросов, на которые хотел получить ответы. И, проходя в очередной раз мимо столиков, неожиданно увидел Женю Черкасова. Мы разговорились: у кого как выстроены процессы, сколько длится релизный цикл, сколько времени занимает регресс… В какой-то момент я понял, что мы уже пропустили следующий доклад 😅

А ещё на конференции есть секция «Кофе с Talk’ом» ☕️ — там за чашкой кофе можно задать любые вопросы. Мне кажется, ребята меня уже запомнили: я каждый год пристаю к ним с расспросами. Так как я стал тимлидом, в этот раз больше всего интересовался коммуникацией с продактом и релизным циклом.

В общем, конференция, как всегда, была на высоте 🔥. Я уехал с ответами на часть волнующих меня вопросов и с кучей новых идей.

И отдельное спасибо моей любимой жене за то, что отпустила меня, несмотря на то, что это было 14 февраля 💛.

#conference

Мы тут недавно в компании разбирались, как мы используем ИИ и где ещё можно его интегрировать. В…

Fri, 27 Feb 2026 10:08:27 GMT

Мы тут недавно в компании разбирались, как мы используем ИИ и где ещё можно его интегрировать. В процессе разговор зашёл о код-ревью.
Мы используем self-hosted Gitea, а это значит, что никакого встроенного ИИ-код-ревью у нас, увы, нет.

Поэтому вчера утром я открыл Cline, вооружился Claude и, потратив ~~все деньги~~ $4 и примерно час времени, навайбкодил пример сетапа с docker-compose файлом, Gitea и PR Agent.

Claude сам провёл анализ и выбрал PR Agent, а затем написал подробную пошаговую инструкцию по интеграции с Gitea через вебхуки. В итоге уже через час всё было готово, и мне оставалось только попросить ChatGPT написать плохой код — чтобы проверить, как вообще будет выглядеть код-ревью от ИИ.

Вроде выглядит сносно, но нужно проверять, как он будет работать на реальной кодовой базе.

Репозиторий здесь.

Расскажите, а вы используете ИИ для код-ревью?
Ставьте:
👍 — если да и вам зашло
😢 — если пробовали, но не прижилось
😱 — если у вас код-ревью это “заапрувь по братски”

#ai

Самой большой проблемой при миграции с 🇯🇵Notion на 💎 Obsidian были базы данных

Tue, 24 Feb 2026 09:07:01 GMT

Самой большой проблемой при миграции с 🇯🇵Notion на 💎 Obsidian были базы данных

В Obsidian попросту не было их полной альтернативы, поэтому пришлось пере-придумать свой подход к ведению проектов с помощью плагинов dataview и tasks.

Суть обоих плагинов проста — они позволяют писать запросы с помощью специального синтаксиса к заметкам и задачам и выводить результаты на странице.

Я как-то это упустил, но в прошлом году появился новый встроенный плагин Bases, который как раз и представляет собой альтернативу тем самым базам в Notion.

Однако по своей сути он скорее похож на dataview — это просто ещё один язык запросов к заметкам, который использует YAML синтаксис.

Вот, например, так выглядит конфигурация представления с постами для блога, которые сейчас в работе 👇


filters:
  and:
    - file.ext == "md"
    - file.path.startsWith("2.Areas/A.Блог/Посты")
views:
  - type: table
    name: In Progress
    filters:
      or:
        - file.path.startsWith("2.Areas/A.Блог/Посты/2.InProgress")
        - status.contains("➡️ In Progress")
    order:
      - file.name
      - status
      - tags

Именно это и содержится в файлах с расширением .base.

🧩 В Notion и Obsidian, есть одно принципиальное различие, при настройке баз данных.

В Notion мы создаём отдельную базу данных, которая хранит записи определённого типа, а затем с помощью фильтров можем показывать только часть этих записей.

Например, если мы строим трекер задач в Notion, у нас будет две базы:

Задачи
Проекты
- А на странице проекта мы можем добавить представление, где отображаются только задачи этого проекта.

В Obsidian всё иначе.

У нас есть одна «главная база данных» — все наши заметки. Каждая запись — это обычная текстовая заметка. У заметок нет как такового типа.

Поэтому, чтобы отличить задачи от проектов, мы будем фильтровать их либо по пути заметки, либо по тегу.

Я бы сказал, что это всё же преимущество Notion — там можно гибко совмещать содержимое разных баз в одном представлении. Например, легко создать представление «Заметки, созданные на прошлой неделе».

⚙️ Что умеет?

Поддерживается 4 типа представлений:
- таблица
- список
- карточки
- карта (если установить дополнительный плагин)
Поддерживает inline-базы данных — почти как в Notion
Работают формулы и фильтры

❌ Недостатки

Нет представления канбан-доски. Это, пожалуй, самое печальное. Надеюсь, со временем добавят.
Не получится нормально использовать создание новой заметки прямо из базы через кнопку “+ New”, потому что:
- все заметки создаются в дефолтной папке — из-за этого не срабатывает шаблон
- в созданной заметке появляются только те поля, которые сконфигурированы в базе; поля из шаблона не подтягиваются

Подробнее, можно посмотреть тут: • Умные таблицы в Obsidian. Плагины Bases и DataView. Пошаговая инструкция. • Умные таблицы в Obsidian. Дополнения к первой части. Вставка в тело страницы. Настройка и синтаксис.

#obsidian

Выходные закончились, а отдохнуть, как всегда, не получилось. Работать не хочется… но надо 😅.

Mon, 16 Feb 2026 07:53:01 GMT

Выходные закончились, а отдохнуть, как всегда, не получилось. Работать не хочется… но надо 😅.

Принёс вам альбом с музыкой под стать понедельнику — с говорящим названием Заебудни. Тут даже объяснять ничего не нужно. Каждая песня — бриллиант 💎.

Мои любимые: • Зачем тебе отпуск? • Можешь хуже

В общем, хорошей рабочей недели 👍 Пусть она пройдёт легче, чем началась. А вы работаете под музыку? Если да — под какую? 🎧

🔥 — часто работаю под музыку
👍 — включаю музыку, когда делаю задачи, где всё понятно
❤️ — не работаю под музыку

Как научить машину понимать смысл слов

Thu, 12 Feb 2026 08:03:01 GMT

Как научить машину понимать смысл слов

Я думаю все вы слышали про векторные базы данных. В прошлом посте обещал поделиться статьёй про то, как же слова и целые тексты превращаются в вектора.

«Привет! Я [0.44, -0.91, 0.66…]» или как научить машину понимать смысл слов

В машинном обучении есть базовое правило: модель умеет работать только с числами.
Поэтому любой объект — текст, картинку, звук — сначала нужно превратить в числовое представление. Только тогда модель сможет понять, что «груша» связана с «яблоком» куда больше, чем с «теплоходом»

Самый простой вариант для текста — 🔢 one hot encoding.

Мы берём словарь и каждому слову ставим в соответствие вектор, где одна позиция равна 1, а все остальные — 0.

Возьмём предложения:

The movie was good.

The movie was bad.

The movide was awesome.

Кодировка на первой картинке.

Формально задача решена, но есть проблема: такие векторы ничего не говорят о смысле слов. Для модели слова «кот» и «собака» так же не похожи друг на друга, как «кот» и «кирпич».

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

👉 Следующий шаг — мешок слов и N-граммы.
Мы начинаем учитывать не отдельные слова, а их последовательности.

Кодировка на второй картинке.

Но N-граммы смотрят только на ограниченное число слов и строго по порядку. Поэтому они не улавливают более глубокие смысловые связи.

В реальности таких возможных N-грамм — тысячи, и большая часть значений всегда равна 0. То есть, проблема разреженных векторов полностью не уходит.

Чтобы модель работала лучше, ей нужно понимать семантику и контекст.
Здесь и появляются 🔡 word embeddings.

Эмбеддинг — это плотный числовой вектор фиксированной размерности, почти без нулей. Идея в том, что похожие по смыслу слова имеют похожие векторы, а направление в векторном пространстве несёт смысл.

В статье это объясняется на наглядном примере с животными.

Сначала берётся одно измерение — размер. Животные с похожими габаритами находятся рядом.
Затем добавляется второе измерение — хищность. В таком пространстве 🦁 «лев» и 🐯 «тигр» оказываются близко (крупные и опасные), 🐄 «корова» — отдельно (крупная, но безопасная), а 🐹 «хомяк» — совсем в другой области.

Когда слова представлены такими векторами, с ними можно выполнять математические операции:

V(Madrid) + V(Germany) − V(Spain) ≈ V(Berlin)

если мы возьмём слово «Мадрид», добавим «Германия» и вычтем «Испания», ближайшим полученным словом будет «Берлин». Это работает, потому что Мадрид — столица Испании. Когда мы убираем атрибуты, связанные с Испанией, и добавляем атрибуты, связанные с Германией, результирующий вектор тесно совпадает с Берлином, столицей Германии.

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

👍 — если работал с эмбеддингами ❤️ — если интересно, но пока не довелось 👀 — если не твоя тема

#ai #fridayreading

За последние пару месяцев видел пару публикаций у знакомых про отказ от соц сетей или их осознанное…

Mon, 09 Feb 2026 08:01:08 GMT

За последние пару месяцев видел пару публикаций у знакомых про отказ от соц сетей или их осознанное ограничение. Я любитель поскролить ленту и насытиться лёгким дофамином, так что для меня тема более чем актуальная, поэтому я начал пользоваться One Sec.

❓ Что такое One Sec?

Это приложение, которое помогает ограничить необдуманные открытия других приложений.

Ну, знаете, как это бывает: билд запустил, или что-то загружается дольше пары секунд — и ты уже ушёл скролить ленту на несколько минут

Но One Sec не даст вам мгновенно открыть запретграм, телегу или куда там у вас тянутся руки в моменты скуки.

Вместо этого One Sec покажет экран с предложением «Сделайте глубокий вдох…» секунд так на 10 и заодно отобразит, сколько раз за последние 24 часа вы пытались открыть приложение.

Примерно два месяца назад я поставил такое ограничение на запретграм — и теперь счётчик в будние дни редко показывает больше 2 раз за 24 часа, хотя до этого он легко доходил до 50.

Когда знаешь, что приложение не откроется мгновенно, желание зайти туда как-то само пропадает 🤷‍♂️.

⚙️ Настраивается всё довольно быстро, через автоматизации айфона:

Когда открывается определённое приложение
🅰 Активировать one sec

На прошлой неделе поставил ограничения ещё и на телегу и ВК. Тут есть нюанс: в них я часто переписываюсь, особенно сейчас, когда идёт ремонт, а не только листаю ленту или читаю каналы.

Поэтому пришлось настроить «Быстрое переключение» — чтобы экран с ожиданием не показывался, если я вернулся в приложение в течение 5 минут.

📊 Результаты

После того как я стал реже открывать запретграм, быстрый дофамин начал искаться в других местах — и в итоге я стал чаще заходить в ВК, телегу и сетку. Так что one sec пришлось поставить и на них тоже.

В целом штука рабочая 👍.

Она реально сбивает импульсивное желание открыть соцсети, и за счёт этого концентрация на важных вещах становится заметно лучше.

Ставьте:

👍 Если пользуетесь приложениями типа one sec
❤️ Если у вас нет проблем с думскроллингом
🤪 Если любите залипнуть в соц сетях

#burnout #productivity

🎭 Про маски

Wed, 04 Feb 2026 08:56:28 GMT

🎭 Про маски

У нас наметился очередной редизайн, и снова всплыла проблема, с которой мы живём уже очень долго — зоопарк иконок.

Если кратко: мы не можем инлайнить SVG или использовать что-нибудь вроде Font Awesome, потому что у пользователя должна быть возможность кастомизировать любую иконку в продукте. А само решение было реализовано лет так 7 назад.

В итоге все иконки подгружаются через background-image, а это значит, что если нужно изменить цвет иконки по ховеру — придётся подгружать новую иконку (спрайты тоже не можем использовать).

Выглядит это примерно вот так:

 
.icon {
 background-image: url(./icon.svg);
 
 &:hover,
 &:focus-visible {
  background-image: url(./icon-hover.svg);
 }
 
 &--active {
  background-image: url(./icon-active.svg);
 }
}

🫠 В 2026 году подход, конечно, ~~||пиздец||~~ очень грустный.

Из-за этого каждая иконка дублируется в среднем 3 раза. Представляете, сколько времени занимает добавить новую иконку…

Но, как ни крути, идёт 2026 год, и теперь мы можем использовать CSS-маски — mask-image.

По сути, мы просто указываем цвет фона, а в качестве маски выступает иконка. В итоге получается, что мы её просто перекрашиваем:

 
.icon {
 mask-image: url(./icon.svg);
 background-color: var(--icon-color);
 
 &:hover,
 &:focus-visible {
  background-color: var(--icon-color-hover);
 }
 
 &--active {
  background-color: var(--icon-color-active);
 }
}

В итоге, чтобы поменять цвет иконки, достаточно изменить background-color. А если иконка используется в кнопке, можно воспользоваться currentColor — ровно так же, как и для SVG.

Может, выглядит так себе (хотя вроде норм, да и выбора у нас всё равно нет), зато у подхода есть ряд преимуществ:

из коробки работает асинхронная загрузка — не будет проблемы с раздутым бандлом;
HTML-разметка не раздувается из-за инлайна SVG;
частично решает проблему зоопарка иконок, так как не нужно хранить иконку для каждого цвета.

Ещё по теме:

1️⃣ Если у вас иконки инлайнятся и раздувают бандлы, советую посмотреть доклад
SVG в React: как автоматизировать процесс добавления новых иконок с прошлого «Я 💛 Фронтенд».
Там рассказано, как решили проблему жирного бандла в Centra — с помощью динамического импорта иконок.

2️⃣ А если вам интересно как с зоопарком иконок боролись в VK — посмотрите доклад Зоопарк иконок: упрощаем работу с иконками для дизайна и разработки. Оказывается дизайнеров тоже можно научить пользоваться гитом и сбросить всю ответственность за иконки на них 😅.

Давайте сверимся по иконкам:

👍 — не знал про mask-image;
❤️ — использую библиотечные иконки и нет проблем
🔥 — просто инлайню SVG

#frontend #css

Недавно нашу компанию объединили с другой, которая также разрабатывает no-code платформу. И сейчас…

Mon, 26 Jan 2026 10:32:28 GMT

Недавно нашу компанию объединили с другой, которая также разрабатывает no-code платформу. И сейчас мы знакомимся с новой командой разработки и активно обмениваемся знаниями. Так как наши продукты похожи, интересно посмотреть как у них всё реализовано.

На прошлой неделе лид AI-команды рассказывал, как в их продукте устроены ИИ-агенты и как используется RAG. Попробую кратко вам рассказать.

🤖 Чем вообще ИИ агент отличается от обычной программы?

Ключевые отличия заключаются в двух возможностях:

использовании инструментов
динамическом принятии решений

Под инструментами может подразумеваться:

function calling — мы описываем, с какими функциями в нашем коде ИИ может взаимодействовать. Конечно, ИИ не запускает код напрямую: он генерирует имя функции и входные параметры, а сам вызов мы делаем уже со своей стороны.
tools use — более высокоуровневые инструменты: поиск в интернете, работа с файлами, генерация картинок и так далее.

А благодаря тому, что у LLM есть условные «мозги», она сама понимает, какие инструменты и в какой последовательности вызывать и когда остановиться. Это и есть то самое динамическое принятие решений.

📚 Теперь кратко про RAG.

RAG — это генерация ответа, дополненная поиском по вашим данным, о которых сама LLM знать не может. Например, по корпоративной базе знаний.

Пример задачи: «Нам нужно, чтобы LLM отвечала на вопросы с учётом загруженных пользователями PDF-файлов».

Как это реализуется:

преобразуем PDF в текст
разбиваем текст на чанки
каждый чанк превращаем в векторное представление (эмбеддинг) с помощью embedding-модели
сохраняем текст вместе с вектором, например в Postgres с плагином pgvector

Кстати, на прошлой неделе нашёл отличную статью про то, как слова превращаются в векторы и используются в поиске. Скоро поделюсь 🔜.

Дальше, когда пользователь задаёт вопрос:

запрос преобразуется в вектор
находится наиболее подходящая по смыслу запись
в LLM передаётся: вопрос + найденные куски текста
LLM формирует ответ

Часть команды, немного растерялась, когда тимлид из другой платформы рассказывал обо всём этом 😅, так как большинство из нас ещё не сталкивались с разработкой агентов.

Сам я ИИ-агентов ещё не разрабатывал — пока разбираюсь в теме на уровне теории. В Guide DAO успел пройти только теоретическую часть курса по разработке ИИ-агентов, так что как минимум понимаю, о чём вообще идёт речь 😅. Если кто-то пропустил, Guide DAO — это образовательное комьюнити про разработку в web3 и ИИ-агентов.

🏷 До конца января у ребят действует акция — скидка 20%, плюс по промокоду CHERKASHIN можно получить дополнительную скидку 25%. В сумме — 45%.

А в марте запускается живой курс по вайбкодингу на 2 месяца (теория + практика + созвоны со спикером) Алексеем Аметовым в качестве спикера. Каждый будет решать свою задачу и учиться прямо на её примере. А при покупке курса по ИИ-агентам живой курс по вайбкодингу идёт в подарок.

Ставьте:

❤️ — если интересно читать про ИИ-агентов
🔥 — если уже понимаете, как они работают
👀 — если до изучения агентов пока не дошли руки

#ai

🎉 Приглашение получено!

Sun, 25 Jan 2026 07:44:59 GMT

🎉 Приглашение получено!

Это будет уже третий «Я 💛 Фронтенд», на который я отправлюсь.

Я вообще люблю ездить на конференции, организованные Яндексом — будь то «Я 💛 Фронтенд», Субботник или «Ночь в Музее». Там всегда отличная атмосфера, классные доклады и афтепати. А ещё это отличный способ завести новые знакомства и найти ответы на вопросы, которые давно крутятся в голове.

Пару лет назад по приколу подал заявку на Субботник в Питере — и, как ни странно, её одобрили. И вот я уже покупаю билет на поезд «Курск — Санкт-Петербург». Фотки на которых я такой помятый именно из Питера 😅.

В общем:

❤️ — если тоже идёте на «Я 💛 Фронтенд»
👀 — если будете смотреть онлайн
🤔 — если пока не определились

А если вы ещё не подали заявку, то скорее регистрируйтесь, и увидимся 14 февраля 👋.

#conference

jQuery 4️⃣.0️⃣

Mon, 19 Jan 2026 08:50:18 GMT

**jQuery 4️⃣.**0️⃣

Мы всё проспали, вчера вышел JQuery 4.0. Предыдущий релиз был 9 июня 2016 года.

А говорят он умер, может ещё и реакт переживёт 😅. У нас вот, к сожалению, полно легаси на JQuery…

https://blog.jquery.com/2026/01/17/jquery-4-0-0/

Давайте разберёмся, кто здесь весь в легаси:

🤬 — у нас много легаси на JQuery
🥱 — есть, но чуть-чуть
👍 — использую только новые фреймворки

#frontend

📱 Настройка синхронизации Obsidian на iPhone

Thu, 15 Jan 2026 09:02:33 GMT

📱 Настройка синхронизации Obsidian на iPhone

После переезда с Notion на Obsidian главной болью (не считая баз данных) оказалось отсутствие нормальной синхронизации с iPhone.
На праздниках наконец решил это исправить.

Интеграция с Git у меня уже была настроена, оставалось самое сложное — подружить всё это с айфоном.

👉 **Подробная инструкция — **вот здесь
А если кратко, то схема такая:

Настраиваем интеграцию с Git в Obsidian на компьютере
Устанавливаем Obsidian на iPhone и создаём пустой Vault
Затем ставим GitSync - Git-клиент для iPhone, который умеет работать с репозиториями
Логинимся и пуллим свой Obsidian-репозиторий через GitSync
Заходим в Obsidian и выключаем Git-плагин, чтобы не было конфликтов
Включаем автоматическую синхронизацию репозитория в GitSync. Я пока оставил ручную, записал небольшую демку.

Ставьте:
👍 — если используете Obsidian
😐 — если всё ещё на Notion
😱 — если вообще ничего не используете для ведения заметок

#obsidian

Лет 6 назад мы начали мигрировать на React и для быстрого старта взяли CRA. С тех пор много воды…

Mon, 12 Jan 2026 08:27:31 GMT

Лет 6 назад мы начали мигрировать на React и для быстрого старта взяли CRA. С тех пор много воды утекло и этой осенью я и ещё один коллега начали искать альтернативы CRA.

Естественно, времени на это никто не выделял, поэтому нужно было отделаться “малой кровью”.

Попытка 1️⃣

Многие пишут, что буквально за полчаса мигрируют на Vite. Но есть нюанс: у нас не чистый CRA, а форк (подробнее тут).

Большая часть конфигурации оказалась довольно простой:

Vite по умолчанию поддерживает глобальные константы через define и алиасы
Мы поправили импорты SVG-файлов
Нашли, как обойти ограничение для umd и iife форматов, когда указано несколько энтрипоинтов

Но дальше мы упёрлись в неприятный момент.

⚠️ Мы встраиваемся в legacy-проект, где старый код ожидает синхронную загрузку скриптов.
А скрипты, собранные через Vite, нужно подключать с <script type="module">, который всегда асинхронный — сделать его блокирующим не получится. Убрать type="module" не выйдет иначе получите ошибку “Cannot use import statement outside a module”.

В итоге из-за асинхронной загрузки посыпалось довольно много всего.

Возможно, если бы продолжили, мы бы столкнулись и с другими проблемами. Но мы решили поискать альтернативные решения, хотя мигрировать на vite, конечно было возможно, но искать косяки во всём приложении не захотели.

Попытка 2️⃣

Мы продолжили исследование и наткнулись на статью про замену babel-loader на esbuild-loader для ускорения сборки.

Решили попробовать. Вся магия из статьи сводится к простым шагам:

заменяем babel-loader на esbuild-loader
TerserPlugin — на EsbuildPlugin

⏱ Скорость билда выросла примерно на 30% (30 => 21 секунды)— уже приятно.

Но тут вылезла другая проблема: esbuild пока плохо справляется с tree shaking динамических импортов, и итоговый бандл раздулся почти в 2 раза пруф 1, пруф 2.

И тут мы снова вспомнили про Vite.

🎉 Попытка 3️⃣

Вдохновившись подходом Vite, мы решили пойти гибридным путём и комбинировать esbuild и babel для разных сценариев:

esbuild-loader — для разработки
babel-loader — для продакшена

В итоге нам удалось:

ускорить билд
сохранить размер бандла
и, что важно, уехать с CRA

CRA мы просто эджекнули, апгрейднули зависимости и внесли необходимые изменения под esbuild.

Был ещё один очень простой трюк, который позволил ускорить билд, ведь изначальное время билда было — 1 минута, но об этом в другой раз.

Расскажите, чем вы собираете свой фронтенд или ставьте:

😢 — если у вас всё ещё Create React App
👍 — если у вас Vite
🔥 — если у вас нестандартная сборка

#frontend

Это уже третий год подряд, когда я сажусь, навожу кофе и не спеша подвожу итоги уходящего года. В…

Tue, 30 Dec 2025 08:08:58 GMT

Это уже третий год подряд, когда я сажусь, навожу кофе и не спеша подвожу итоги уходящего года. В этот раз, чтобы сделать процесс чуть проще, я подводил небольшие итоги каждый месяц.

Как ни странно, в этом году я реализовал все важные цели, которые ставил в начале года:

🚗 Получил водительские права
🚙 Купил машину. Знали бы вы, как меня колотило, когда я без инструктора сел и поехал ставить её на учёт 🤣
🛠 Начал ремонт в квартире

Это всё — то, что я откладывал очень долго. И почему-то годами думал: «ну не получится, не моё». Но именно в этом году я вдруг понял, что я могу. Во многом — благодаря тому, что наконец-то расставил приоритеты.

💼 О работе

10 месяцев назад меня сделали тимлидом, и я понял, что раньше моя жизнь была сказкой 😅. Поначалу было очень сложно осознать, чем теперь вообще нужно заниматься и какие у меня обязанности. Но, кажется, я справился.

А ещё мы нашли стабильный способ получать свои кровно заработанные зелёные.

✈️ Путешествия

Провёл прошлые новогодние праздники в русской сказке — 🇷🇺 Суздаль и Владимир
Впервые слетал в 🇦🇪 Дубай и офигел от красоты и масштаба, но понял, что во всём этом сильно не хватает души
Получил первый шенген и съездил в:
- 🇫🇷 Париж — надеюсь, дойдут руки разобрать заметки и написать отдельный пост. В целом там невероятно красиво, хотя и есть нюансы…
- 🇮🇹 Рим — честно, после Парижа Рим как-то не зашёл. Кажется, было настолько многолюдно, что мы просто не смогли кайфануть
- 🇻🇦 Ватикан — отправил открытку из Ватикана и получил её в Курске
Ну и завершает цепочку спокойная поездка в 🇷🇺 Питер и Выборг

📚 Обучение

Бывают же совпадения: как только я стал тимлидом, мне предложили пройти курс Стратоплана.

Совмещать обучение с вождением было непросто, но, честно говоря, я кайфанул. Как же круто, когда ты не собираешь знания по крупинкам, а получаешь всё сразу — на блюдечке с голубой каёмочкой.

Также прочитал вступление курса о разработке AI-агентов, разобрался с основами архитектуры агентов, что такое RAG, но решил, что для этого года уже достаточно — продолжу после новогодних.

🎤 Конференции

Успел немного поездить по конференциям:

📢 Про канал

Канал за год немного подрос, но совсем чуть-чуть. В этом году некогда было заниматься его ростом.

Зато давно было интересно, как авторы продают рекламу. В этом году наконец-то разобрался и опубликовал несколько рекламных постов. Но это мелочь. Гораздо важнее, что благодаря каналу попал в Стратоплан, Сетку, AI Boost и guidedao.

То, что канал не только забирает силы, но и даёт новые возможности, конечно, сильно мотивирует.

К счастью, плохого в этом году ничего не было, разве что +3кг на моих щеках)))

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

А ещё начал понимать, что не нужно гнаться за успешным успехом. Очень легко хотеть то, что есть у других, и куда сложнее — заглянуть внутрь себя и понять, что на самом деле нужно именно тебе.

Желаю всем понять это в наступающем новом году. 🎄

Ставьте

👍 — если тоже подводите итоги года
🎉 — какие итоги? я дожил до нового года
🎄 — наряженная ёлка — вот мой главный итог

#newyear #итогигода

😕 Все эти слухи про блокировки не могут не расстраивать. Особенно про Телеграм, когда начинаешь…

Thu, 18 Dec 2025 09:21:42 GMT

😕 Все эти слухи про блокировки не могут не расстраивать. Особенно про Телеграм, когда начинаешь думать о том, что все силы, вложенные в канал, могут в один момент испариться.

Я задумался чем мне нравится телеграмм и понял. В нем нет ленты, ты не зависишь от дурацких алгоритмов, которые сегодня решат, что тебя увидят тысячи людей, а завтра ноль.

Просмотры напрямую коррелируют с числом подписчиков. Если люди на тебя подписались, они сами решают, читать твой пост или нет, а не дурацкие алгоритмы.

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

Надеюсь, слухи о блокировке преувеличены. Хотя айтишная аудитория прекрасно обходит ограничения, всё же хотелось бы понять, как диверсифицировать риски.

Я пробовал:

Пикабу — токсичнее площадки не найти
Дзен — то, что мертво умереть не может, но Дзен смог, активности 0
Хабр — посты мне как-то на Хабре не зашли, или просто формат моих постов не подходит для хабра

Единственная альтернаивная площадка которую я Веду — Сетка.

🎄 Кстати, на прошлой неделе, меня позвали на Новогоднюю Вечеринку Сетки как автора канала тысячника. А ещё прислали мерч в Июле, который я совсем забыл показать.

#telegram #сетка

Пару месяцев назад закончилось моё обучение в Стратоплане, поэтому захотелось подвести небольшие…

Mon, 08 Dec 2025 08:29:11 GMT

Пару месяцев назад закончилось моё обучение в Стратоплане, поэтому захотелось подвести небольшие итоги.

🔥 Самое важное — я почувствовал рост. Но конечно, я не стал мгновенно классным руководителем. Ни один курс не заменит вам реальный опыт и шишки, которые каждый должен набить сам.

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

📚 Материала было много — очень много. Я осилил только основной курс, хотя есть ещё 5 дополнительных, на которые у меня просто не хватило сил:

Проектный менеджмент
Технический продакт-менеджмент
Карьера
Стратегия
Собеседование / найм / увольнение

Доступ к материалам пожизненный, поэтому вернусь к ним уже в следующем году, когда немного восстановлюсь.

Если вам интересен материал модулей, то здесь собраны все описания:

А ещё пару недель назад, в баре, болтал с товарищами и внезапно узнал, что один из них тоже проходил обучение в Стратоплане — но уже на курсе для CTO. И он подтвердил, что курсы там действительно крутые.

Так что, если вдруг решитесь пройти обучение — напишите мне, поделюсь промокодом на скидку в 15%.

🎁 Кстати, сейчас возможность подсмотреть, как проходит обучение в Стратоплане. Если вам хочется получить доступ к модулям Курса стратегия — есть один способ.

Стратоплан совместно с DevCrowd запустил исследование про стратегию, чтобы понять, как у компаний и сотрудников обстоят дела со стратегией, её каскадированием, разработкой и внедрением.

Каждый, кто потратит буквально 10 минут, и пройдет опрос, сможет получить доступ к модулю Стратегия.

Расскажите, а как вы смотрите в сторону менеджерского роста:

🔥 Уже руковожу командой
👍 Планирую стать руководителем в будущем
👨‍💻 Просто хочу быть сильным разработчиком

#стратоплан

Я думаю вы слышали об исследованиях, в которых выясняется, что ИИ на самом деле может не ускорять,…

Thu, 27 Nov 2025 09:01:11 GMT

Я думаю вы слышали об исследованиях, в которых выясняется, что ИИ на самом деле может не ускорять, а замедлять разработку? Но, как обычно, все концентрируются на времени, забывая, что у нас не только времени, но и ума не хватает.

Иногда я работаю и время то у меня есть, но вот силы уже на исходе. И тогда ИИ просто спасает, ведь я могу простым языком объяснить что мне необходимо реализовать, потому что писать самому сил уже нет.

Если подумать о продуктах, которые мы разрабатываем, то здесь аналогичная ситуация. ИИ может помочь как начинающим пользователям, так и пользователям, когда у них нет сил делать работу самим.

У меня достаточно поверхностное представление, как ИИ интегрируется в продукт. На работе я реализовывал не очень сложные фичи с помощью ChatCompletion API, в теории понимаю что такое RAG, но на этом — всё.

Разбираться самому нет ни сил, ни желания, поэтому я пошел по пути наименьшего сопротивления и нашёл для себя — Guide DAO. Это комьюнити по Web3 и AI, где дают нормальную программу и помогают не заблудиться по дороге.

Что понравилось: активный Discord, постоянные стримы, можно в любой момент спросить и получить ответ от людей, которые уже варятся в теме. Плюс пожизненный доступ ко всем курсам.

Но самое полезное — они помогают выйти на работу: хакерхаусы, разбор портфолио, мок-интервью. К концу обучения у тебя есть проекты и новые связи, а конкуренция в Web3 пока меньше, чем на классическом рынке.

Недавно у них вышел курс по AI-агентам — это прям то, что мне нужно 🔥.

С 24 по 30 ноября у них Чёрная пятница. По промокоду CHERKASHIN — 25% + ещё 10% по ссылке на сайте, в сумме 35%. Есть и рассрочка.

Если вам интересны Web3 или AI — можно глянуть подробности и бонусы в телеграм-боте: @GuideDAO_hallo_bot

А вы уже смотрите в сторону Web3 и ИИ?

⚡️ Пробую AI-агентов
🧑‍💻 Изучаю Web3
🙏 Хочу разобраться, но не знаю с чего начать
💤 Пока просто крашу кнопки и перекладываю джейсоны

Конференции это не (только) про доклады

Mon, 24 Nov 2025 09:01:01 GMT

**Конференции это не (только) про доклады ** Раньше я ездил на конференции, чтобы слушать доклады.

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

Когда я был на “Я 💛 Фронтенд”, я проводил огромное количество времени с яндексоидами, расспрашивая, как у них устроены процессы разработки и тестирования.

А в последний раз, когда я был на AI Boost от команды Surf (спасибо Диане за приглашение), мой друг внезапно опоздал на поезд всего на пару минут 😅 — и у меня появилось целых 6 часов, чтобы заранее накидать список вопросов про использование ИИ, которые меня интересовали:

Сколько вы тратите на каждого сотрудника, чтобы он мог пользоваться нейросетями?
Как правильно использовать Мемори Банк?
Какие языковые модели вы используете?

Но доклады на AI Boost тоже были очень интересными. Одна из главных мыслей, которую я вынес:

💡 Я уже сижу полчаса и всё ещё не написал ни строчки кода.

Это страх почему многие избегают использовать ИИ. Мы часто не хотим продумывать решение и сразу бросаемся писать код. Также и с промптом, мы не хотим потратить даже 20 минут на написание хорошего промпта, ведь как так, прошло уже 20 минут, а я ещё ничего не написал 😳. Но эти 20 минут могут экономят часы реализации — ИИ ведь пишет код куда быстрее нас с вами.

Ну и конференции, это конечно личные знакомства.

Я давно подписан на Костю Чуйкова, а тут довелось познакомиться в оффлайне. Поговорили про использование ИИ, работу мою работу в Американской компании, ну и про ведение блога, конечно 😄.

А для чего вы посещаете конференции?

🧑‍💻 Послушать доклады
👍 Пообщаться
❤️ И то, и другое

#conference #about_me

Необычный способ трудоустройства

Mon, 17 Nov 2025 10:01:01 GMT

**Необычный способ трудоустройства ** По-моему я читал о чём-то подобном в книге Сомнеза “Путь программиста”, но сегодня хотел бы рассказать про случай, который произошел совершенно случайно.

Несколько лет назад я написал статью Интегрируем Яндекс Музыку в Visual Studio Code, где описал, как я техническую сторону разработки расширения YandexMusic. Привет всем, кто подписались на меня после этой статьи 👋.

Так вот после этого меня позвали на собеседование в Яндекс именно в команду Яндекс.Музыки 😅, и неожиданно, потому что я использовал Electron в своей реализации. А всё потому, что команда Яндекса начинала разработку кросс-платформенного приложения Яндекс.Музыки на Electron.

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

Потом я начал готовиться ко второму этапу, но тут вмешались санкции, мой банк отрубили от свифта, и вместо подготовки к собеседованию, я начал обзванивать банки, чтобы получить мои честно заработанные зелёные. Банк нашел, ушёл в отпуск и так и не вернулся ко второму этапу.

Так я и упустил шанс попасть в команду Яндекс.Музыки, не знаю хорошо это или плохо, но опыт интересный 😅.

А на фотке это меня пустили поработать в офисе Яндекса, а потому мы поехали на Big Tech Night.

#about_me

Помните, как говорил Матроскин "Средства у нас есть. У нас ума не хватает".

Mon, 10 Nov 2025 10:01:01 GMT

Помните, как говорил Матроскин “Средства у нас есть. У нас ума не хватает”.

Этот год выдался очень тяжелым:

я наконец-то получил права и сел за руль
стал тимлидом и нагрузка резко возросла
5 месяцев учился в стратоплане
начинается подготовка к ремонту

В общем год придётся заканчивать на морально волевых.

Это я к тому, что важно следить не только за временем, но и за своей энергией. Иногда так устаёшь, что у меня нет даже сил прочитать входящие сообщения. Я сразу представляю, что сейчас завяжется диалог и его нужно будет продолжить, а сил у меня на это попросту нет. Поэтому откладываю его прочтение до тех пор пока “когда я буду готов”. Ну, конечно, тут смотря кто пишет.

И уже некоторое время, я использую, как я его называю “путь наименьшего сопротивления”. Или точнее “делай то, от чего тебя не тошнит” 😄

Всегда есть куча каких-то дел, которые делать, естественно, не хочется. Даже при одной мысли, что нужно ими заниматься начинается рвотный рефлекс. Но дел ведь много, так что вместо самого противного можно выбрать хоть что-то чуть более приятное.

1️⃣ Например, вместо того чтобы думать, что мне уже нужно заказывать для ремонта, я занимаюсь демонтажом плинтусов 😄 — потому что это вызывает наименьшее отторжение и даёт ощущение, что процесс хоть как-то двигается.

2️⃣ Или вмест обучения в Стратоплане, я выбираю компрессор для машины.

Мне это помогает продолжать идти вперёд небольшими шагами и не выдохнуться.

Поставьте ❤️ — пусть у меня будет ещё один источник энергии, кроме кофе и дедлайнов.

#отдых

Впереди выходные — отличная возможность вспомнить, что жизнь не только про “саночки возить”, но и…

Mon, 03 Nov 2025 09:11:27 GMT

Впереди выходные — отличная возможность вспомнить, что жизнь не только про “саночки возить”, но и про то, чтобы “покататься”.

Не будьте как утка. Отдохните по-человечески. Насладитесь результатами того, что уже сделали — вы это точно заработали.

Расскажите, как вы отдыхаете? 🙏

Ставь:

👍 — если регулярно отдыхаешь, и не забываешься “кататься на саночках”
😭 — если увидел в утке себя, и только и делаешь, что возишь саночки, а кататься некогда

#отдых

💸 Валютная удалёнка в 2025

Mon, 27 Oct 2025 08:44:33 GMT

**💸 Валютная удалёнка в 2025 ** Думаю, всем понятно, почему многие разработчики, находясь в России, работали на зарубежные компании: платят больше, чем в России, а цены ниже, чем за рубежом.

Всё, что для этого нужно было сделать, — открыть ИП, выбрать банк и ждать, пока на счёт не капнет кругленькая сумма.

В этом плане, конечно, многое изменилось. Раньше перебирали харчами: у этого банка дорогое обслуживание, у этого долго проходит валютный контроль, а тут нет онлайн-бухгалтерии, а здесь интерфейс интернет-банка какой-то стрёмный. Помню, как я открывал новый счёт, сидя в Черногории — красота.

Как это выглядит сейчас:

идёт 2025 год
выходит новый пакет санкций
ты начинаешь смотреть свежий список банков, попавших под санкции
в ужасе находишь там свой банк
следующий месяц обзваниваешь все банки (раньше я и понятия не имел, сколько у нас в стране банков 😅), и у тебя всего три вопроса:
- может ли ваш банк принять входящий перевод из страны Х?
- сколько стоит открытие счёта?
- сколько займёт открытие счёта?
- согласитесь, планка требований резко упала 😄
находишь банк в Ростове-на-Дону, который готов открыть тебе счёт. И тебе уже плевать, сколько стоит обслуживание, какой там курс конвертации и насколько говняный интерфейс. В ближайшие выходные ты уже едешь туда целые сутки, чтобы просто открыть счёт
спустя три месяца всё повторяется
теперь ты находишь региональный банк под Новосибирском. Он не под санкциями, ты «на радостях» уже готов лететь в холодную Сибирь… Но, к сожалению, банк не может принимать входящие платежи в валюте из страны Х
начинаешь разбираться, как открыть счёт за границей, регистрируешься на платных форумах, чтобы поговорить с теми, у кого это получилось
думаешь: «Да пошло оно всё к чёрту, пойду искать новую работу»
но тут находишь альтернативный способ оплаты — без лишних заморочек, с уровнем сервиса, который я описал в начале. Теперь ты снова можешь воротить носом и смотреть на качество интерфейса, поддержки, на стоимость обслуживания и т. д., но к этому добавляется ещё один критерий — комиссия за валютные переводы

Последний такой поиск нового способа входящих платежей занял три месяца. Было, конечно, не очень комфортно. Поэтому если раз в сто лет увидите рекламу в канале — не спешите доставать какашки: возможно, я снова сижу без зарплаты, а за Claude платить как-то надо 😄.

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

Если будут вопросы про валютную удалёнку — обязательно пишите 🙏.
А на фотках — декабрьский Ростов, куда мы действительно ездили из Курска открывать счета в конце прошлого года.

А у вас есть опыт валютной удалёнки?

💸 Было дело 💤 Неа, ещё не довелось 👀 В активном поиске

#about_me

🚀 Лидерство в команде

Wed, 22 Oct 2025 09:01:02 GMT

🚀 Лидерство в команде

В прошлом месяце закончился последний модуль обучения в Стратоплане. После него я наконец смог немного выдохнуть — год выдался насыщенным. Но сегодня не об этом. Этот модуль был посвящён лидерству в команде.

🧭 Теории лидерства

В целом:

Лидер — это тот, кто берёт ответственность за результат команды и выстраивает её работу так, чтобы все шли к общей цели.

Но все лидеры разные, и каждый «затаскивает» свою роль за счёт разных качеств.

Кто-то — благодаря врождённым особенностям: уверенности, энергии, уму и знанию дела.
Кто-то вдохновляет поведением — проводит встречи, делает заметки, ничего не забывает и всегда доводит дела до конца.
А кто-то просто не боится брать на себя ответственность — например, общается с заказчиком, когда остальные предпочитают отмалчиваться.
Есть и такие, кто не самый харизматичный, но зато чётко понимает, как устроена команда и какая у него в ней роль.

Если попробовать соотнести это с теориями, то всё это — личностное, поведенческое, ситуационное и организационно-ролевое лидерство.

А чтобы команда шла туда, куда нужно, лидеру важно правильно расставлять приоритеты.

⚖️ Приоритеты

Все знают пример с банкой, в которую сначала кладут большие камни, потом поменьше, потом песок и заливают водой.

Так вот, для приоритезации этот пример прекрасно подходит:

🪨 Большие камни — глобальные цели, то, ради чего вообще всё.
🪨 Камни поменьше — важные, но не стратегические дела.
🏖️ Песок — рутина, повседневные мелочи.
🍺 И да, место для кружки пива с друзьями тоже должно остаться.

Именно в такой последовательности. Не сыпем песок, а потом пытаемся впихнуть камни — иначе то, что действительно важно, не поместится.

На практике у нас был классный кейс: нужно было приоритизировать задачи руководителя в катастрофичный день —
сотрудники увольняются, зубы болят, ребёнка забрать из сада некому, сгорает бесплатный урок английского от работодателя и куча других дел.

Так вот, то, как приоритизировали мы, совсем не совпало с тем, как это сделала команда из Индии.
Они поставили на первое место английский и объяснили это просто:

«В долгосрочной перспективе то, что ребёнка заберут позже из сада — не беда.
Беда, если через 10 лет не сможешь оплатить ему обучение».

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

🛠️ Инструменты приоритизации

Чтобы не тонуть в потоке задач, полезно структурировать приоритеты.
На курсе мы разбирали несколько инструментов — вот те, которые действительно работают.

🟦 Матрица Эйзенхауэра

Классика. Делим задачи по двум признакам: срочность и важность.

Срочные и важные — делай сразу.
Срочные, но не важные — делегируй.
Важные, но не срочные — планируй.
Ни срочные, ни важные — забудь.

Главное — не попасть в ловушку «всё срочно». Настоящих срочных дел всегда немного — всё остальное просто неорганизованно.

🟨 Метод ABC

Каждой задаче присваивается буква:

A — критически важные (если не сделать — будут серьёзные последствия).
B — важные, но не критичные.
C — мелочи, которые можно делать в свободное время.

Когда всё в списке «A» — это сигнал, что нужно пересмотреть фокус.

📝 Отзыв

Этот модуль меня довольно сильно зацепил. Я привык всё делать на совесть и с полной отдачей, но часто засиживаюсь и не хватает времени на личные дела.

Из модуля вынес один полезный вопрос:

«А что будет, если я не сделаю эту задачу?»
Если ответ — «ничего», то, возможно, эта задача не стоит ваших нервов.

Например:

Вас не уволят, если задача закроется на день позже.
А вот если постоянно пропускать тренировки, мечта о форме останется мечтой.

В общем, у меня было ощущение, будто сходил к психологу — смог выбраться из колеса и задуматься о том, что для меня действительно важно.

Ставь:

😎 — если умеешь расставлять приоритеты
😭 — если пока крутишься как белка в колесе

#стратоплан

Когда работаешь в международной компании — есть один огромный плюс:

Mon, 20 Oct 2025 09:31:18 GMT

Когда работаешь в международной компании — есть один огромный плюс: в каждой стране свои национальные праздники.

Коллеги из Индии всю неделю отмечают Дивали — праздник победы добра над злом. А это значит, что никаких:

давай быстро созвонимся на 5 минут
посмотри мой пул реквест
сколько примерно займёт вот эта задача?
вы опять тесты поломали?

А с Америкой пересечение — всего пара рабочих часов: пока они проснутся и выпьют свой кофе, я уже закончу работать.

В общем, прогноз на неделю:

🌧️ За окном: начало рабочей недели
🏖️ Ощущается: как начало отпуска

#about_me

Мне кажется, за время работы, я достаточно насмотрелся на говнокод (да и сам его написал не мало,…

Mon, 13 Oct 2025 10:03:05 GMT

Мне кажется, за время работы, я достаточно насмотрелся на говнокод ||(да и сам его написал не мало, чего уж там 😅)||. И когда общаешься с авторами такого кода, их позиция такова: “Ну код же рабочий?! Ну да, я пишу вот так, а ты — по-другому. Мы не одинаковы”.

И не поспоришь, правда работает 🤷‍♂️. Руководству тоже пофиг как там код написан, нужно фичи релизить, а не вот это всё. И когда-то давно мне пришла в голову такая аналогия.

Давайте представим, что вы читаете книгу. В одной главе текст идёт мелким шрифтом, в другой — крупным. Где-то абзацы разделены двойным интервалом, а где-то слова слиты без пробелов. В одной главе автор использует подчёркивания для выделения важных мыслей, а в другой — жирный шрифт или вовсе ничего.

Теперь добавим ещё больше хаоса. Представьте, что эта книга вообще не разделена на главы или абзацы — просто сплошной текст на тысячи строк. Или что один и тот же термин в книге обозначается то одним словом, то другим, а иногда и вовсе непонятными сокращениями. Сможете ли вы нормально читать такую книгу? Или просто закроете её от раздражения?

Так вот, говнокод — это именно такая книга. Каждый, кто откроет этот код, будет теряться, и даже вы сами через месяц будете сидеть над ним и думать: «Кто это написал? И что это значит?». Была у меня ситуация, когда коллега воскликнул: “Кто вообще это написал?!”, а потом сделал git blame и вышел сам на себя 😄.

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

А вот кстати интересная статья на хабре, в тему.
Пишите код так, как будто сопровождать его будет склонный к насилию психопат, который знает, где вы живёте.

А вы как относитесь к чистоте кода?

🔥 Читаемый код наше всё
🤷‍♂️ Главное, чтобы работало

Я всё думал, что же мне не нравится в Obsidian. С тех пор как я перешёл из Notion, постоянно было…

Mon, 06 Oct 2025 10:01:01 GMT

Я всё думал, что же мне не нравится в Obsidian. С тех пор как я перешёл из Notion, постоянно было ощущение, что что-то не так.

И я понял, что дело просто во внешнем виде: банально нет иконок, непонятно, где файл, а где папка.

Пока что установил тему Obsidian Border. Там ещё есть куча кастомизаций через плагин obsidian-style-settings.

Собственно вот до и после.

А вы какими темами пользуетесь? 🤔

#obsidian

Когда мы обновили pnpm с 7-й до 10-й версии, оказалось, что формат файла pnpm.lock изменился — и…

Wed, 01 Oct 2025 09:01:00 GMT

Когда мы обновили pnpm с 7-й до 10-й версии, оказалось, что формат файла pnpm.lock изменился — и версии пакетов немного поехали. В итоге на CI начали рандомно падать некоторые асинхронные jest-тесты. Локально же всё работало без проблем.

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

Что попробовали:

Проверили, что в pnpm.lock нет нескольких разных версий jest
Обновили jest до свежей версии

Результат — без изменений.

В итоге, времени копаться глубже уже не было, поэтому к проблемным тестам добавили:

 
jest.retryTimes(3) // повторяет тест до 3 раз, если он упал

Для вас решение 👍 норм или 🤔 стрём?

#jest #testing #frontend

Игрался вчера с AI тулзами для генерации дизайна:

Fri, 26 Sep 2025 10:02:01 GMT

Игрался вчера с AI тулзами для генерации дизайна:

https://uxpilot.ai/ — получаются неплохие дизайны с хорошей детализацией
https://stitch.withgoogle.com/ — так себе

С генерацией лендосов справляются очень неплохо. С UI для no-code плаформ тоже, с UI для карт на троечку. В целом для прототипипрвания — очень даже ничего.

Расскажите, какими AI тулзами вы пользуетесь? 🙏

#ai

Я не менял работу уже 8 лет и недавно решил посмотреть какие сейчас зарплаты предлагают на рынке.…

Mon, 22 Sep 2025 10:12:01 GMT

Я не менял работу уже 8 лет и недавно решил посмотреть какие сейчас зарплаты предлагают на рынке. Поспрашивал знакомых и вот какие ресурсы мне посоветовали:

Может подкините ещё какие-то ресурсы?

Чуть не забыл поделиться шаблоном ведения заметок для 1:1 и примером проведения развивающего 1:1

Fri, 19 Sep 2025 13:13:41 GMT

Чуть не забыл поделиться шаблоном ведения заметок для 1:1 и примером проведения развивающего 1:1

Вспомните свой последний 1:1 с руководителем. Был ли он для вас полезен?

Wed, 17 Sep 2025 09:36:33 GMT

Вспомните свой последний 1:1 с руководителем. Был ли он для вас полезен?

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

Или же, вам не хватает доверия к руководителю, чтобы рассказать всё что у вас накипело? И в итоге вы уходите со встречи с мыслью “только время потратил, лучше бы таску закрыл”.

Как вы могли догадаться, сегодня будет отзыв по 4-му модулю в Стратоплане.

Зачем ❓

Представьте: ваш конь говорит — «слушай, надоело прыгать буквой Г, хочу ходить наискосок. А у Серёги на соседней доске проект поинтереснее, ещё два хода сделаю — и уйду туда».

Чтобы такие разговоры не звучали “как гром среди ясного неба”, руководителю важно понимать проблемы и мотивацию сотрудников. А большинство об этом не расскажут — если не спросить прямо.

🪨 База

1:1 не реже раза в 2 недели, иначе ожидания и реальность сильно разойдутся
Фокусируемся на человеке, а не на задачах
Обсуждаем, что хорошего и плохого произошло с последней встречи. Что сделать чтобы плохое происходило реже
Фиксируем договорённости
Обмениваемся обратной связью

🦻 Метод активного слушания — слушать больше чем говорить

Когда с вами делятся проблемой, вы спешите как можно скорее предложить решение или стараетесь копнуть глубже?

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

Задали вопрос — молчите, кивайте, не перебивайте.
Человек закончил — сделайте паузу.

Зачастую, если поспешить предложить решение проблемы — легко можно что-то упустить и в итоге получится, что вы предлагаете решение даже не по верхушке айсберга, а видя лишь отражение айсберга в зеркале. Если ты задашь ещё 5 вопросов, то скорее всего окажется, что проблема совсем в другом.

🎯 Виды 1:1

Вроде это очевидная мысль, но для меня это была самая главная мысль, которую я вынес из модуля: “Бывают разные виды встреч 1:1, и у каждого — свои цели”.

Не хватит места расписать всё подробно, поэтому коротко пробегусь по каждому типу:

Синхронизация — Обсуждаем, одинаково ли мы понимаем:
- насколько хороши результаты,
- какие цели и зачем, а как они связаны с целями человека,
- что продолжать делать, что начать делать иначе
Мотивационный — здесь нам нужно понять, какие “дыры” забирают силы у сотрудника, и какие есть “опоры”, из которых можно черпать силы. Наша задача — увеличить количество опор, и закрыть “дыры” или научиться с ними жить так, чтобы они не мешали работать.
Развивающий — тут всё понятно, определяем что человек уже умеет, чему нужно научиться и главное, как это применить в работе.
Корректирующий — обсуждаем, что надо перестать делать или делать иначе. Даём обратную связь по методам SBI и BOFF.

У тех, кто ходит в офис может появиться логичный вопрос: Зачем проводить 1:1 если мы итак постоянно видимся? 🤷‍♂️

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

📝 Отзыв

Модуль оказался простым и сложным одновременно. Сначала казалось, что говорим о банальных вещах — теория минимальна, всё вроде понятно. Но на второй день стало ясно, что потребуется много времени, чтобы начать проводить встречи правильно.
Также неожиданно модуль помог понять, что не стоит требовать бурного роста от сотрудников, можно идти и маленькими шагами.
Фишка, которую уже тестирую — создаю документ для каждого сотрудника для 1:1, где фиксирую заметки и договорённости.
Узнал синоним слову “жопоголизм” — “нытинг” 😄

Ставьте

👍 — если вы довольны своим 1:1
😢 — если нет
😱 — если у вас вообще нет 1:1

||P.S. Стратоплану исполнилось 15 лет, и в честь этого до 21 сентября можно урвать скидку 30% на обучение по промокоду 🎟️ Friends30. В общем, если давно думали пройти обучение, есть шанс очень сильно сэкономить.||

#стратоплан

✨ Функция attr() в CSS

Wed, 10 Sep 2025 08:46:48 GMT

✨ Функция attr() в CSS

После предыдущего поста про современный CSS, я вспомнил, что несколько месяцев назад применил CSS-функцию attr() в реализации JsonViewer с виртуальной прокруткой.

attr() позволяет взять значение любого HTML-атрибута и использовать его в стилях. Долгое время attr можно было применять только для свойства content. Сейчас же attr() можно применять для любых свойств, но поддержка пока всего ~67% браузеров.

Чтобы реализовать дерево с виртуальной прокруткой нужно избавиться от вложенности дочерних узлов и отображать всё простым списком. А чтобы JsonViewer выглядел деревом — нужно добавить отступы в зависимости от вложенности свойства nesting-level * padding.

💡 И тут можно применить attr:

 
.json-viewer__node {
  padding-left: calc(attr(data-level type(<number>)) * 20px);
}

 
function Node({ level }) {
  return (
    <div className="json-viewer__node" data-level={level}>
      {/* ... */}
    </div>
  );
}

👉 Тут мы указали, что для свойства padding-left хотим использовать значение атрибута data-level. При этом уточнили, что это не просто строка, а число type(<number>), чтобы CSS мог правильно умножить его на 20px и посчитать итоговый отступ.

Конечно, отступы можно задать и просто через JSX, но мне в любом случае был нужен data-level атрибут, чтобы стилизовать узлы в зависимости от их уровня.

📎 Ещё один пример применения функции attr() нашел в доке. Тут мы отображаем ссылки в печатной версии страницы с помощью псевдоэлемента ::after.

 
<p> Подробнее о скидках и акциях можно узнать <a href="http://best-site.ru/sales">по ссылке</a> </p>

 
@media print {
  a::after {
    content: " [" attr(href) "]";
  }
}

@cherkashindev #css

Надеюсь, все уже перевернули календарь 🗓️, и теперь снова можно поговорить про AI.

Fri, 05 Sep 2025 06:44:25 GMT

Надеюсь, все уже перевернули календарь 🗓️, и теперь снова можно поговорить про AI.

Все вокруг только и говорят о том, как они используют AI для разработки, но как интегрировать AI в продукт?

Ещё недавно для этого использовался JSON Mode. Для этого было достаточно указать:

{ "type": "json_object" }
И в системном промпте указать, что модель должна вернуть JSON.

Но JSON Mode гарантирует лишь то, что модель вернёт валидный JSON, при этом далеко не факт, что он будет соответствовать JSON-схеме, которая нужна вам.

Эту проблему решает более современный подход — Structured Output.

Structured Output позволяет задать схему данных, и модель обязана вернуть результат, который ей соответствует. То есть мы получаем не “похоже на JSON”, а чётко определённую структуру.

 
import OpenAI from "openai";
 
const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
 
const response = await client.chat.completions.create({
  model: "gpt-4.1",
  messages: [
    { role: "system", content: "Ты ассистент, который советует фильмы." },
    { role: "user", content: "Подскажи хороший фильм для пятничного вечера." }
  ],
  response_format: {
    type: "json_schema",
    json_schema: {
      name: "movie_suggestion",
      schema: {
        type: "object",
        properties: {
          title: { type: "string" },
          genre: { type: "string" },
          year: { type: "integer" }
        },
        required: ["title", "genre", "year"]
      }
    }
  }
});
 
console.log(response.choices[0].message.parsed);

Что здесь происходит:

Системный промпт задаёт роль модели: она должна советовать фильмы.
json_schema описывает структуру ответа: объект с тремя обязательными полями — title (строка), genre (строка), year (число).

В итоге при любом запросе на тему фильмов модель вернёт именно такой объект, и его можно использовать в коде — например, выводить в UI или сохранять в базу. Но обработку пограничных случаев в любом случае добавить стоит.

Ещё по теме:

А вы интегрируете AI в свои продукты?

😎 конечно
👀 пока нет, присматриваемся
😈 выпиливаем

@cherkashindev #ai

Я тут понял, что совсем не помню свои маршруты в отпуске: куда мы с женой ходили на завтрак, где…

Sun, 31 Aug 2025 09:02:15 GMT

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

День 1

🌯 Приезжаем и идём перекусить местной ~~шаурмой~~ шавермой в Vлаvaше.

Заселяемся в апартаменты Сердце Петербурга и отдыхаем после 15-часового поезда из Курска. Потом едем на остров Новая Голландия, гуляем по территории и заходим в Kuznyahouse, где берём кебаб из кролика и Пожарскую котлету.

🌅 Чтобы утрясти всё съеденное, гуляем по Галерной улице (||отличное название для офисов ИТ-компаний|| 😄) и затем сворачиваем на Адмиралтейскую набережную.

День 2

🍳 Завтракаем в Joli Grand Bistrot. Заказываем шакшуку, она здесь кстати была такая же вкусная как, когда-то я пробовал в Тель-Авиве.

Теперь едем в Юсуповский дворец и “внимательно” (нет) слушаем самую нудную экскурсию в моей жизни. Хуже была только ночная прогулка по Неве несколько лет назад, где мы с женой просто уснули.

🍲 Теперь идем в Aster. Здесь обязательно берем шикарный хлеб с копченым маслом, эфиопский фильтр кофе или капучино и морковный кекс.

Потом — много гуляем в Летнем саду, фоткаемся на Эрмитажном мосту, уворачиваемся от уличных фотографов на Дворцовой площади, и идём к Спасу на Крови и в Михайловскому парку.

🍷 Нагулявшись, не едем в Trappist потому что мой внутренний алкоголик не готов отдать косарь за 0.5 пива. Лучше заехать в Хоровод и устроить себе Русское застолье: сет настоек (фруктовые — супер, овощные — ни о чём), окрошку, селедочку, грудинку горячего копчения и обязательно Трюфельный Техно Дистиллят. Запах и послевкусие — огонь! 🔥

День 3 — Выборг

🚉 Приезжаем на Финляндский вокзал за полчаса до поезда, берём билеты и стоим на низком старте, чтобы успеть занять места в Ласточке и не стоять до самого Выборга.

🍲 Заходим в Эспиля берём Выборгскую и Финскую уху. Мне повезло — к ухе поднесли рюмку. А я парень простой: наливают — пью.

🚶 Теперь набравшись сил идём гулять в Старый город. Мне он напомнил район Галатской башни в Стамбуле — брусчатка, узкие улочки и постоянные спуски и подъёмы. Чтобы насладиться по полной — берём крендель и запиваем его глёгом.

Далее идём в Выборгский замок и берём билет на Башню святого Олафа с прекрасным видом на город. Остаётся совсем мало времени, едем в парк Монрепо — невероятно ухоженный и живописный музей-заповедник 🌳. Здесь хорошо бы остаться на несколько часов, но у нас уже не было времени.

🥪 Перед отъездом заходим перекусить в Пышечная купца Маркелова. Пышки ничего, но не удивили — теща готовит намного лучше ❤️.

Возвращаемся в Питер и идём во Frank за пивом и рёбрами.

День 4

🥐 На завтрак идем в Zoe берем что-то поесть, но главное — пончики и кофе.

После невероятно калорийного завтрака — идем в Таврический сад. Гуляем, смотрим на уток и завидуем тем, кто может гулять по таким паркам хоть каждый день. Затем, вооружившись зонтами, едем в Ботанический сад и гуляем там под дождем.

🍛 Перед отъездом едем в Балаган, берем рамен, юккедян, роллы и медовуху. Снова сокрушаемся, что подобных мест в Курске нет, дохлёбываем и … отправляемся на вокзал.

Как-то так. Куда ещё бы посоветовали сходить в Питере? Надеюсь, когда-нибудь всё таки разберу свои Дубайские и Парижские заметки и напишу что-то подобное.

😱 — если тоже считаете, что косарь за бокал пива это дорого 😎 — я айтишник, могу себе позволить

@cherkashindev #отпуск

Управление ожиданиями руководства и команды

Fri, 22 Aug 2025 10:01:01 GMT

Управление ожиданиями руководства и команды

В третьем модуле в Стратоплане мы обсуждали интересный момент: руководитель всегда находится в центре трёх разных ожиданий. С одной стороны — бизнес, клиенты и начальство, с другой — вся команда, и с третьей — каждый отдельный сотрудник. И с этими всеми ожиданиями необходимо уметь работать.

🎭 Модель PAEI — Ицхак Адизес

Тут нам может помочь модель Ицхака Адизеса, которая описывает четыре главные роли менеджера.

P (Production) — это про результат здесь и сейчас: сделали, сдали, всё работает.
A (Administration) — про порядок, процессы и правила, чтобы не было хаоса.
E (Entrepreneurship) — это та самая предпринимательская жилка: видеть новые возможности, предлагать идеи и думать о будущем.
I (Integration) — это объединение людей: сплочение команды, налаживание отношений.

На практике у каждого руководителя обычно получается ярко проявлять 1–2 функции, а остальные хромают. В этом случае, нужно либо работать над ними, либо находить людей в команде, которые их компенсируют.

Эти функции тесно связаны с жизненным циклом компании. Например, когда я только пришёл в текущую компанию, она была где-то на стадии Go-Go и оглядываясь назад, я понимаю, что от руководителей требовалось быть P + E: достигать результат и понимать бизнес. Типичный пример, когда заказчику говорят, что в продукте есть нужная ему функция, и в следующие 2 недели в овральном режиме она реализуется.

🛡️ Психологическая безопасность

Ещё одна важная тема модуля — исследование Гугла под названием Аристотель. Оно показало, что фундаментом для создания успешной команды является психологическая безопасность.

Если человек не чувствует себя в безопасности — он не может быть командным игроком. Человек на уровне инстинкта будет заботиться о “выживании”, а не о работе.

Психологическая безопасность — в организационном контексте - это такая рабочая среда, где люди не боятся ошибаться и откровенно высказывать своё мнение. Людей за ошибки не наказывают, а обучают.

Что помогает её повышать:

демонстрация ошибок самим руководителем
умение давать качественный фидбек
ретроспективы без эмоций и обвинений, только факты и варианты решений
чеклисты и протоколы, чтобы снизить хаос

Кстати, можно проверить уровень безопасности в своей команде — есть опросник Эми Эдмондсон:

📉 Пять пороков команды — Модель Патрика Ленсиони

Ещё одна важная тема модуля — работа с пятью пороками команд.

Взаимное недоверие — когда люди не доверяют друг другу, они скрывают ошибки и избегают взаимодействия.
Избегание конфликтов — Если нет доверия, люди боятся спорить и молчат даже когда несогласны. Это главный барьер на пути к построению настоящей команде.
Безответственность — «я сделал свою часть, дальше не моя проблема». Коллеги я-кают, а не мы-кают.
Нетребовательность — поскольку нет ответственности, люди закрывают глаза на чужие косяки.
Безразличие к результату — задачи выполняются, но общая цель никого особо не волнует.

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

📝 Итог

Сначала этот модуль откликнулся мне меньше остальных — думаю, потому что тема корпоративных культур и модель PAEI для меня сейчас не так актуальны.

Но сейчас, когда я пересмотрел материал ещё раз — мне кажется другая часть, посвящённая психологической безопасности и порокам команды — это фундаментальные моменты, без которых невозможно построение полноценной команды.

||P.S. Кстати, если вы давно смотрели в сторону обучения в Стратоплане, то по промокоду 🎟️ FRIENDS можно получить скидку 15%. Нужно только указать, что нашли его у меня в канале.||

#стратоплан

Я как-то упустил насколько быстро сейчас развивается CSS. Кажется, что через несколько лет…

Thu, 21 Aug 2025 08:32:24 GMT

Я как-то упустил насколько быстро сейчас развивается CSS. Кажется, что через несколько лет препроцессоры и другие решения будут не особо то и нужны.

CSS переменные у нас уже есть давным давно
- поддержка 95%
Вместо БЭМА и CSS модулей сможем использовать @scope
- поддержка 82%
Можем сократить количество !important при переопределении стилей, просто помещаем стили внутрь разных каскадных слоёв с помощью @layer.
- поддержка 93%
Смешиваем цвета прямо в CSS
- поддержка 91.5%

 
color-mix(in srgb, var(--c), white var(--pct))

Заменяем медиа выражения на if-ы
- поддержка 64%

 
color: if(style(--theme: dark): white;
 style(--theme: light): black;
 else: black);

Долой миксины, да здравствуют нативные кастомные функции
- поддержка 0.04% — свежачок 🥒

 
/* Функция для смешивания цвета с белым */
@function --tint(--c, --pct) {
  result: color-mix(in srgb, var(--c), white var(--pct));
}

Наверняка ещё что-то упустил, если что — подскажите 🙏. Проверить, что все эти функции действиетльно работают (в хроме) можно 👉 вот в этой демке — просто загляните в исходники.

Подробнее здесь:

#css

🧠 Банк памяти

Wed, 06 Aug 2025 10:41:01 GMT

🧠 Банк памяти

Я чувствую, что еле поспеваю за развитием ИИ, но потихоньку втягиваюсь и разбираюсь, как ускорить разработку. Сейчас разбираюсь с мемори бэнк и понял, что ничего нового в этом подходе нет.

Приведу простой пример.

Допустим, какая-то кнопка в новой версии приложения глючит — то работает, то нет, и только в каких-то странных ситуациях. Что я делаю? Завожу страничку в Obsidian и начинаю расследование.

Я записываю:

когда именно кнопка отказывается работать
поведение в старой версии
копаюсь в запросах во вкладке Network
и так далее, короче записываю, всё, что выяснил.

Потом приходит менеджер и говорит «Сань, сколько времени займет эта задача?». И тут я меняю «контекст» и разбираюсь в другой задаче.

Спустя какое-то время, я возвращаюсь к проблеме с кнопкой и именно этот конспект помогает мне загрузить весь «контекст» задачи назад в мою голову.

Вот так и работает мемори бэнк у ИИ-агентов. Это обычный Markdown-файл, где собрана вся нужная информация о твоём коде — например, требования к фиче. Без него ИИ может забыть какие-то детали, если начнёшь новый чат или контекст переполнится.

В теории всё понятно, но вопрос как внедрить его в огромный существующий проект. Если у вас есть такой опыт, расскажите 🙏.

#Ai

На минувших выходных в Стратоплане обсуждали специфичные фразы и «обычаи», которые употребляются…

Tue, 29 Jul 2025 10:02:01 GMT

На минувших выходных в Стратоплане обсуждали специфичные фразы и «обычаи», которые употребляются только внутри определённой команды.

Решил поделиться некоторыми из них:

Православный релиз — когда тесты не прошли, и релизишь с божьей помощью.
Гипс — когда накостылил в реализации, времени переделывать нет, «загипсовал» и релизишь.

Актуально для офисных работников:

Тебе на стол кладут краба 🦀, если ты положил прод. Краб — такой «символ» упавшего прода.
Последнему человеку, который запушил костыль, ставят на стол статуэтку золотого костыля 🏆.

У нас, например, на одном из созвонов все молчат, пока не подключится американец и не спросит: «Is anyone talking?». Однажды он подключился на созвон, камеры у всех были выключены, он не мог понять, говорит ли кто-то, и спросил: «Is anyone talking?». Так и появился этот «обычай».

А у вас в команде есть похожие фразы или обычаи?

#weekphrase #стратоплан

Постановка задач, фидбек и делегирование

Wed, 23 Jul 2025 10:02:01 GMT

Постановка задач, фидбек и делегирование

Второй месяц в Стратоплане был посвящен постановке задач, фидбеку и делегированию.

🏞️ Постановка задач и причем тут картинки

В постановке задач самая главная проблема заключается в том, что у исполнителя в голове одна картинка, а в голове у руководителя — совсем другая.

Постановка задач — это не создание тикетов в Джире, это работа над тем, чтобы у исполнителя в голове были правильные картинки. Если вы руководитель — вы, по сути, руководите картинками в головах других людей. Какие у людей в головах картинки — такой результат вы и получите.

Например, сравните:

«Хочу, чтобы вы активнее участвовали в планировании спринта.»
«Тестировщики — приносите на планирование список задач по прошлому релизу, чтобы мы выбрали самые важные. Разработчики — делитесь своими оценками по задаче, обсуждайте, где могут быть подводные камни, и что могут затронуть изменения. Это поможет точнее оценить задачи и лучше подготовиться к тестированию.»

Какой вариант рисует в вашей голове более чёткую картинку?

🗣️ Фидбек

Начнём с метафоры «принцип альпинистского крюка»: если ты как альпинист хочешь забраться выше, сначала тебе нужно вбить крепко крюк, зацепиться, прицепить страховку и когда ты чувствуешь себя уверенно — можешь лезть выше.

Это я к чему, есть 2 типа фидбека:

Поддерживающий
Корректирующий

Когда мы даём сотруднику поддерживающий фидбек — забиваем тот самый крюк, чтобы он чувствовал себя уверенно. Мы рассказываем, что у него получается хорошо (на конкретных примерах), чтобы он продолжал это делать. И в итоге он будет это делать чаще и более осознанно. ||Поэтому не забывайте лайкать посты, которые вам нравятся, чтобы я понимал, что всё делаю правильно 😄||

Например:

«На вчерашнем планировании ты указал на риски и предложил решение — это помогло точнее оценить задачу и избежать переработок.»

Корректирующий — мы объясняем, к чему привело определённое поведение, и что следовало бы скорректировать.

«В прошлом месяце на груминге ты не подключился к обсуждению задач по своей зоне ответственности. В итоге мы некорректно оценили задачу и допустили регрессии, потому что не учли влияние на другие модули.“»

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

Жаль, что это никогда не прочитает мой инструктор по вождению, который резко жал на тормоз, вместо того, чтобы объяснить, что я делаю не так 😅.

Ещё одна фраза из курса, которая особенно понравилась: «Похвала без фидбека — сахар без чая».

🤝 Делегирование

Тут основной момент в том, что, если вы руководитель — делегировать можно всё, кроме:

принятия ключевых решений, определения приоритетов команды и переговоров с заказчиками — иначе зачем вы вообще нужны?
ключевые решения по бюджету
найм, увольнения
встречи 1:1

Чтобы понять, что делегировать — выпишите подробно, чем вы занимаетесь ежедневно и оставьте себе те 20% работы, которые приносят 80% пользы компании.

И тут есть неочевидные моменты. Например, если вы ответственны за планирование спринта — это не значит, что вы должны делать всё сами:

можете делегировать кому-то делать заметки
оценку задач делаете совместно с другими разработчиками
а приносить список косяков из прошлого спринта — делегируете тестировщикам

Поэтому после того, как вы составили список — попробуйте раздробить задачи на более мелкие, возможно вы сможете делегировать, если не всю задачу — то какую-то её часть.

И ещё пара моментов:

Если делегируем ответственность — нужно давать необходимые полномочия
Редко бывает, что можно делегировать что-то и забыть об этом. Подбираем уровни контроля в зависимости от опыта исполнителя.

📝 Отзыв

Этот модуль мне понравился больше предыдущего. Тут было меньше теории и гораздо больше практики. Было много полезных аналогий и ролевых игр, где тренер наглядно показывал, как вести диалог с руководителем и давать фидбек.

❤️ — оставляем подкрепляющий фидбек 🔥 — было полезно 😎 — я уже всё это знаю

#стратоплан

🔇 Митинги без шума

Mon, 21 Jul 2025 10:02:01 GMT

**🔇 Митинги без шума ** Пару месяцев назад я созванивался с коллегами из индийского офиса — и каждый раз это было похоже не на рабочую встречу, а на трансляцию политических дебатов. На фоне — шум, гул, кто-то спорит, кто-то смеётся.

Потом стало заметно тише. Я подумал, неужели у них в офисе стало настолько тише, но нет. Мне рассказали, что они просто включили Voice Isolation в Teams.

Как это работает: вы читаете небольшой текст, Teams создаёт ваш голосовой профиль, и с этого момента во время звонков AI приглушает все посторонние звуки — собеседники слышат только ваш голос.

Так что, если пользуетесь Teams — обязательно настройте.

А чем вы пользуетесь на работе?

Telegram
Slack
Teams
WhatsUp
Skype 😳

Месяц назад я баловался с Copilot'ом — хотел собрать карту Курской области с местными…

Fri, 18 Jul 2025 10:02:01 GMT

Месяц назад я баловался с Copilot’ом — хотел собрать карту Курской области с местными достопримечательностями. Конечно, до уровня того же Cline тулинг не дотягивает (а может, я просто не умею им пользоваться, или за последний месяц что-то именилось?), но сейчас не об этом.

В какой-то момент Copilot внезапно открыл Simple Browser — прямо внутри редактора. Он позволяет выбрать элемент в верстке, и он сразу добавит скриншот и селектор этого элемента в чат (третий скрин).

В одном из экспериментов я выбрал элемент карты и написал: “selected element should take the whole available height”.

Результат на втором скрине, не знаю как — но сработало.

А в Cline или других AI-агентах есть что-то такое? 🤔 Вообще расскажите, чем вы пользуетесь, какими нейронками, агентами или всё ещё кодите по старинке❓

||P.S. не знаю так это или нет, но слышал, что некоторых авторов хейтят за использование тире ”–”, мол это означает, что текст написал ИИ.

В общем на маке:

держите Option и жмите минус и получите короткое тире — (⌥) + ”-”,
если хотите тире ещё длиннее, то к Option добавьте ещё Shift — ⌥ + ⇧ + ”-”

Лёгкой пятницы вам ❤️||

Люди которые постоянно что-то делают вообще пробовали лежать?

Mon, 14 Jul 2025 10:02:01 GMT

Люди которые постоянно что-то делают вообще пробовали лежать?

Я вот попробовал, и это прекрасно 😅

В последние пару месяцев дел было вагон и маленькая тележка:

Наконец-то отучился на права
Идёт обучение в Стратоплане
И всё это, конечно, в дополнение к рутине и работе, после которой сил остаётся только лежать на кровати и смотреть в потолок

В последнее время понял: если всё время крутиться как белка в колесе, то совсем не останется сил, чтобы хоть капельку порадоваться результату. Поэтому последние две недели старался ничем кроме работы не заниматься.

Я вообще человек тревожный, но на эти выходные моя тревожность немного отстала от меня. Она немного потеряла бдительность — и вот я лежу в гамаке, а до этого 3 часа проспал прямо посреди дня. Как будто даже отдохнул, силы немного восстановились.

В общем, не забывайте отдыхать.

#about_me

Модуль 1 - Работа с командой - аудит и командообразование (часть 2)

Thu, 03 Jul 2025 11:59:01 GMT

Модуль 1 - Работа с командой - аудит и командообразование (часть 2)

Итак, ненадолго вернёмся к моему обучению в Стратоплане. Я коротко упомяну то, что не вместилось в первую часть.

1️⃣ Модель Такмана

Это одна из моделей, описанных на основе анализа и статистики разных команд, которая описывает стадии, через которые проходит коллектив, прежде чем стать настоящей командой. Это оказалось очень актуально для меня, так как наша команда сформировалась совсем недавно.

Основные стадии по Такману:

😇 Формирование (Forming)
Люди только познакомились. Все вежливы, стараются понравиться, избегают острых углов. Ждут указаний от лидера, работают каждый по своей задаче.

😤 Конфликт (Storming)
Начинают проявляться настоящие характеры. Возникают конфликты, разочарования и спады мотивации. Часто звучит: «Я думал, будет по-другому».

🤝 Нормализация (Norming)
Появляется доверие. Люди договариваются о правилах, открыто просят помощи, привыкают друг к другу. Работать становится легче и спокойнее.

🚀 Продуктивная работа (Performing)
Команда работает как единое целое. Участники инициативны, подстраховывают друг друга, всё идёт чётко и слаженно.

🧳 Расставание (Adjourning)
Проект завершается. Люди делятся воспоминаниями, чуть грустят, постепенно переключаются на новые задачи.

Аналогия:
Пока писал, понял что это напоминает отношения 😅, сперва конфетно-букетный период, затем первые ссоры, а потом или расстаётесь или живёте душа в душу.

2️⃣ Виды организационных структур

Немного про организационные структуры — на примере нашей компании.

Раньше у нас была функциональная модель: отдельные команды разработчиков, тестировщиков, аналитиков. Каждый фокусировался на своей части.

Сейчас переходим к кросс-функциональным командам. В одной команде теперь и разработчики, и QA, и аналитики — вместе делают фичу от начала до конца. Функциональные направления при этом остаются, но больше как «сообщества практики».

Аналогия:

Функциональная структура — это когда все контроллеры, стили, тесты лежат по отдельным папкам (controllers/, styles/, tests/)
Кросс-функциональная — всё, что нужно для одной фичи, в одной папке (feature-login/: контроллер, стили, тесты)

Так проще координироваться и быстрее двигаться.

3️⃣ Короткий итог

Программа хорошо структурирована, поэтому было реально полезно
Можно задать собственные вопросы в чате и получить ответы от преподавателей
Есть практика в группах, но хотелось бы больше разборов собственных кейсов из жизни или более реалистичных примеров
Информации реально много, но не совсем понятно, с чего начать её применять. Очень короткая выжимка со списком шагов по улучшению команды была бы невероятно полезна в нашем быстротекущем мире

#стратоплан

Регулярки в мультиязычных приложениях

Mon, 30 Jun 2025 10:04:01 GMT

Регулярки в мультиязычных приложениях

Сегодня коротко и по делу: в феврале был на «Подлодке», и на докладе про i18n в React-приложениях был хороший пример про валидации форм.

Если вам нужно провалидировать имя регуляркой:

❌ /^[a-zа-я]+$/i — не используйте, иначе, как минимум многие сербы не пройдут вашу форму
✅ Используйте вариации следующих регулярок
- /^\w+$/u — пропустит буквы любой письменности, но вместе с ними ещё цифры и «_», так что проверяйте их отдельно, если нельзя;
- /^\p{L}+$/u — строгий вариант: разрешает только буквы во всех языках, поэтому имена вроде Đorđe, Nguyễn или Łukasz проходят без проблем.

#JavaScript

Модуль 1 - Работа с командой - аудит и командообразование (часть 1)

Wed, 25 Jun 2025 10:33:01 GMT

Модуль 1 - Работа с командой - аудит и командообразование (часть 1)

Три недели назад закончилась первая трёхдневка “Модуль 1. Работа с командой - аудит и командообразование” моего обучения в Стартоплане, но забегался и руки написать пост дошли лишь сейчас.

Сегодня поговорим о том, чем команда отличается от не-команды.

Команда 🆚 Не-команда

Возможно, это не очевидно, но не всегда люди, работающие вместе и решающие общую задачу, являются “настоящей” командой. Тема большая, но меня как начинающего и неопытного руководителя «зацепило» два момента:

Взаимодействие и обратная связь

✅ В команде — все взаимодействуют друг с другом, все дают друг другу конструктивную обратную связь. Если критикуют — то работу, а не человека и его личные качества.
🟥 В не-команде — всё взаимодействие идёт через руководителя или неадресно.

Логика примерно такая: «Ну, с ним (руководителем) я уже привык взаимодействовать, а коллегам писать влом, некомфортно, и вообще вот тот чувак меня раздражает, я тимлиду скажу, а он пусть сам со всем разберётся».

Или вот ещё: как часто вы видите похожие сообщения — «Коллеги, нужно сделать вот это…». То есть коллега пишет сообщение в общий чат «в никуда» и считает, что «я написал, а там как хотите». Отклика на сообщение не ждёт — если ответа нет, ну и ладно. Знакомо такое? Мне да. 😅

Командная цель

✅ В команде — каждый воспринимает командную цель как свою собственную.
🟥 В не-команде — все сконцентрированы только на том, чтобы закрыть свои задачи.

Правда, чтобы этого достичь, руководитель должен поработать с «интернализацией цели», чтобы коллеги действительно воспринимали командную цель как свою.

Например:

Тимлид — разработчику-интроверту: если ты сможешь затащить вот этот проект с метриками, аналитики перестанут постоянно приходить к тебе с вопросами.
Тимлид — разработчику с ипотекой: если ты возьмёшь на себя вот эту дополнительную ответственность, то получишь повышение в зарплате.

Вообще, на курсе обсуждали, что для интернализации цели часто нужна outcome interdependence — взаимозависимость членов команды.

Например:

Если команда в целом работала хорошо — все получают премию.
Если нет — то на нет и суда нет, как говорится.

||Иначе как ты интернализируешь цель «красить кнопочки хорошо, а плохо не красить» для фронтендеров? 😄||

Номинальная команда

Если всё управление происходит выделенным человеком, а все остальные занимаются только своим делом, и остальное их не интересует, то команду можно назвать «номинальной».

И те два пункта, которые я упомянул выше, являются очень важными, чтобы стать полноценной командой:

Без честного и открытого общения между коллегами ни о какой команде не может идти и речи.
Восприятие командной цели как своей собственной и зависимость от её достижения стимулирует всех интересоваться тем, как обстоят дела у коллег, как хорошо они делают свою работу и не нужна ли им помощь.

В один пост всё не влезет, поэтому в следующий раз расскажу про:

Модель Такмана
Виды организационных структур. У нас в компании как раз сейчас меняется орг структура, из-за чего я и стал Тимлидом.
Небольшой отзыв в целом на модуль

#стратоплан

🚧 Почему виртуальный скролл ломается на больших данных

Mon, 23 Jun 2025 09:51:01 GMT

🚧 Почему виртуальный скролл ломается на больших данных

Сегодня хочу рассказать вам вот об этой статье How to Implement Virtual Scrolling Beyond the Browser’s Limit.

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

Обычно он реализуется так:

есть элемент, назовём его viewport,
внутри — контейнер content, в котором находится список всех элементов,
этому контейнеру задаётся высота по формуле: высота одного элемента × общее количество элементов,
при этом рендерятся только те элементы, которые попадают во viewport, а их позиция задаётся через transform: translateY(...).

Но знаете ли вы, что у стандартного virtual scrolling, который использует нативный скроллбар, есть ограничения?

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

Safari: 33,554,428px
Chrome: 16,777,200px
Firefox: после определённого значения значение сбрасывается в 0

Ограничения можете проверить сами. 👉 Здесь накидал небольшую демку.

Из-за этого нельзя доскроллить до самого конца списка — высота просто “обрезается”.

Примеры:

 
<!-- Safari: высота обрежется до 33,554,428px -->
<div style="height: 9999999999999px;"></div>
 
<!-- Даже без прямого указания общей высоты -->
<!-- В сумме 40,000,000px, но всё равно обрежется -->
<div>
  <div style="height: 20000000px"></div>
  <div style="height: 20000000px"></div>
</div>

На работе мне нужно было реализовать JsonViewer, который умеет отображать огромные JSON-файлы.

Я использовал TanStack Virtual для виртуального скроллинга, но столкнулся с описанной выше проблемой — реальная высота контента была в два раза больше, чем поддерживают браузеры. Позже нашел, что в их репозитории есть ишью по этому поводу.

Чтобы обойти это ограничение, нужно отказаться от нативного скролла и реализовать собственную скролл-панель. В этом случае мы не задаём высоту контента, а сами рассчитываем, какие элементы должны рендериться, исходя из позиции скроллбара.

Выглядит это примерно так:

 
const ITEM_HEIGHT = 30;
 
// Генерируем список из 3 миллионов элементов
const items = Array.from({ length: 3000000 }, (_, i) => `Item ${i}`);
 
// 3,000,000 × 30px = 90,000,000px (> лимита браузера)
const totalHeight = ITEM_HEIGHT * items.length;
const viewportSize = 300;
 
export default function App() {
  return (
    <ScrollPane contentSize={totalHeight} viewportSize={viewportSize}>
      {(scrollPosition) => {
        // Вычисляем, какие элементы нужно отрендерить
        const startIndex = Math.floor(scrollPosition / ITEM_HEIGHT);
        const endIndex = Math.min(
          Math.ceil((scrollPosition + viewportSize) / ITEM_HEIGHT) + 1,
          items.length
        );
        const visibleItems = items.slice(startIndex, endIndex);
 
        // Смещение первого видимого элемента
        const startPosition = startIndex * ITEM_HEIGHT;
 
        return (
          <div
            style={{
              position: 'absolute',
              top: startPosition - scrollPosition,
            }}
          >
            {visibleItems.map((item) => (
              <div key={item} style={{ height: ITEM_HEIGHT }}>
                {item}
              </div>
            ))}
          </div>
        );
      }}
    </ScrollPane>
  );
}

Демку, где рендерятся 3 миллиона элементов, можно посмотреть здесь. Подробнее это всё разбирается в статье.

#JavaScript #Performance #Browser

📈 Анимации по скролу — Scroll Progress Timelines

Mon, 16 Jun 2025 10:01:01 GMT

📈 Анимации по скролу — Scroll Progress Timelines

У меня вообще не очень дела с CSS анимациями, но я наконец-то дочитал статью An Introduction To CSS Scroll-Driven Animations и решил рассказать, что такое Scroll Progress Timelines, и показать свою небольшую демку.

Обязательно откройте статью — там крутые примеры! Только посмотрите на эту шикарную демку с сардинами с ~~шпротами~~ сардинами 🐟.

Если вы писали простейшие анимации, вы знаете, что обычно нужно прописать длительность цикла анимации:

 
.element { 
 animation-duration: 2s; 
}

Scroll Progress Timelines позволяют вместо времени использовать позицию скроллбара элемента. То есть, вы скроллите страницу вниз — анимация воспроизводится вперёд, скроллите вверх — прокручивается назад 🔁

Самый очевидный пример — прогресс чтения статьи, который растёт, пока вы пролистываете страницу.

Для этого достаточно указать:

 
animation-timeline: scroll(<scroller> <axis>);

У функции scroll есть два необязательных параметра:

scroller — указывает контейнер прокрутки: nearest, root или self
- если этих значений недостаточно, смотрите в сторону scroll-timeline-name и timeline-scope — они позволяют привязать анимацию к скроллбару любого элемента.
axis — направление прокрутки:
- block — по оси y (вертикально)
- inline — по оси x (горизонтально)

Ещё с помощью animation-range можно управлять, в какой момент начинается и заканчивается анимация.

Возвращаясь к примеру с прогрессбаром чтения — мы явно хотим, чтобы анимация закончилась у секции с футером высотой в 500px:

 
animation-range: 0% calc(100% - 500px);

**👉 **Моя демка

Я решил накидать свою демку и попробовал реализовать анимацию прокрутки к историям в Телеграме. Если кратко:

анимация работает только на первых 100px прокрутки
- тут помог animation-range: 0 100px
список сообщений смещается вниз на 100px по мере прокрутки, чтобы не мешать показу историй

 
@keyframes scrollAnimation {
 from {
  margin-top: 0;
 }
 
 to {
  margin-top: var(--stories-height);
 }
}
 
.contacts-list { 
 /* ... */
    animation: scrollAnimation linear;
 animation-timeline: scroll();
 animation-range: 0 var(--stories-height);
 animation-fill-mode: both;
}

Чтобы анимация не застывала на промежуточном этапе, используется scroll-snap-type: y proximity. Так как секция с историями position: sticky, а список сообщений перемещается по анимации, то их использовать не получится. Но Claude подсказал мне, что можно использовать псевдо-элементы со свойстов scroll-snap-align: start, где они абсолютно позиционированы
- первый — top: 0
- второй — top: 100px
Всё написано на CSS, кроме одного: позиция скролла устанавливается через JS, чтобы истории были свернуты — как в самом Телеграме. Если знаете как это сделать через CSS — расскажите 🙏.

🚨 В общем переходите и поиграйтесь тут

Ещё про анимации на сайте доки:

И вот ещё одна демка с тенями прокрутки

Расскажите, вам часто приходится применять что-то подобное на реальных проектах? Я вот пока ни разу не применял, но знаю, где это могло бы мне помочь лет 6 назад 😅.

#css #animations

🚀 Мама, я тимлид (и это не про книгу)

Wed, 21 May 2025 10:01:01 GMT

🚀 Мама, я тимлид (и это не про книгу)

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

У нас в компании происходят большие изменения, и пару месяцев назад я стал тимлидом .

Команда такая:

тимлид (это я 🎉)
продакт 👩‍💼
2 разработчика 👨‍💻👨‍💻
2 manual QA 🧪🧪
1 automation QA 🤖

И если я примерно понимаю, как руководить разработчиками, то с тестировщиками всё сложнее — я только погружаюсь в их процессы и стараюсь разобраться, как планировать их нагрузку. Такие перемены меня одновременно радуют, мотивируют и пугают 😅, но я думаю — справлюсь.

По счастливой случайности мне очень вовремя сделали предложение, от которого я не смог отказаться. Мне предложили бесплатно пройти курс «Команда. Инструменты управления» от Стратоплана. Я же, в свою очередь, буду писать честные отзывы после каждого блока обучения — примерно раз в месяц.

Так что, ксли вы задумывались о курсе для тимлидов, я смогу приоткрыть завесу и рассказать, как проходит обучение в Стратоплане и какой материал вас ждёт.

🎓 Немного о том, как проходит поступление на курс:

Сначала ты получаешь доступ в личный кабинет.
Там нужно выполнить домашнее задание — оно состоит из двух частей.
В первой части ты описываешь свой запрос: чего именно хочешь от обучения, какие у тебя цели. Тренер оценил мой длинный список с текущими проблемами и ожиданиями от курса 😅
Вторая часть — это кейс. Представь, что ты — руководитель руководителей проектов, и на одном из проектов случился форс-мажор. Нужно принять решение, как действовать в этой ситуации. Тут я, честно говоря, залип на пару часов — много неизвестных, куча нюансов, и в итоге приходится подключать фантазию. Но фишка в том, что правильных ответов там нет — важно, как ты рассуждаешь, как принимаешь решения.
После этого назначается созвон с тренером. Можно задать все интересующие вопросы по обучению и обсудить свой кейс. Тут я понял, что с кейсом более-менее справился, но напридумывал себе коррупционных схем в организации, которые занесли меня немного не туда 🤣.

На самом деле, интересно снова почувствовать себя немного студентом. После смены роли у меня очень много вопросов:

как планировать спринт
как управлять людьми и мотивировать их
как получать фидбек и правильно критиковать

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

Обучение займёт 6 месяцев: раз в месяц, 3 дня подряд: в пятницу, субботу и воскресенье. Хорошо, что первое пятничное занятие выпадает на мой отпуск.

В общем, пожелайте мне удачи 🙏 и расскажите:

Что бы вы посоветовали начинающему тимлиду?
Что бы вы посоветовали самому себе, когда стали тимлидом?
Каким вам хочется видеть своего тимлида?

#стратоплан

📝 Meeting Notes

Mon, 19 May 2025 08:01:01 GMT

📝 Meeting Notes

1️⃣ Ситуация
Вы созвонились с продактом, дизайнером, коллегой по команде — о чём-то договорились. Через какое-то время он вас спрашивает:

«А почему реализовано вот так?»
Вы отвечаете:
«Мы с тобой об этом договорились».
А он в ответ:
«Такого не было, я такого не говорил».

2️⃣** Другая ситуация**
Вы созвонились, о чём-то договорились, не записали, задачу отложили на пару дней — и уже не помните, о чём договорились. Приходится снова созваниваться и вспоминать, о чём же всё-таки говорили.

Знакомо?

✅ Решение: Чтобы не было подобных ситуаций, можно вести протоколы встреч, а затем отправляем тем, кто участвовал в обсуждении.

❓ Зачем вести протоколы?

Чтобы не забыть. По исследованиям:
через 20 минут мы забываем 40%,
через час — 60%,
через день — 70%.
Не исказить информацию с течением времени — ведь наш мозг безбожно врёт 😅
Чтобы обратиться к заметкам в будущем и решить разногласия. Протокол встречи в какой-то степени имеет статус юридического документа.
Чтобы сохранить информацию для отсутствующих на совещании, например, если коллега был на больничном.
Передать информацию присутствующим — особенно актуально, если вы работаете в англоязычной компании, где у всех разный уровень английского.
Люди будут ответственнее относиться, например, к срокам, которые они называют ||(но это не точно 😄)||

✍️ Как писать протокол

Должен быть кратким — меньше времени на написание, меньше времени на чтение.
При этом важно не терять контекст — вы должны взглянуть на него со стороны и понять, о чём речь, через пару недель.
Важно указывать, от кого поступила информация.
Если было принято какое-то решение, нужно описать контекст — почему оно было принято и кем.

🗂 Мой формат

С протоколами у меня была такая же проблема, как была раньше с ведением заметок. Я не отделял в них заметки от задач, и всё смешивалось в одну неподдерживаемую кучу. Поэтому для себя я придерживаюсь следующего очень простого формата:

Agenda
- Зачем встречаемся
- Список вопросов, которые нужно обсудить
Notes
- Важная информация, которую следует зафиксировать
Action Items
- Задачи, которые нужно сделать мне или другим членам команды

🛠 Инструменты

Мы мигрировали на стек Microsoft — Teams, OneNote и т.д.
Поэтому я просто веду заметки на одной странице в OneNote, к которой имеет доступ команда.
Если это встреча 1:1, я использую Obsidian, а затем отправляю свои заметки собеседнику.

🔗 Подробнее

А вы ведёте meeting notes? Поделитесь, как вы это делаете и какими инструментами пользуетесь

#process #management

🎧 Потеря потерь ...

Fri, 16 May 2025 10:01:01 GMT

🎧 Потеря потерь …

Моим наушникам Sennheiser стало совсем плохо. Пару лет назад я перевернулся на электросамокате — сам отделался лёгким испугом, а вот наушники получили множество трещин и переломов. С тех пор держались на честном слове, и вот теперь окончательно сдался микрофон.

Взял на замену их собрата поменьше — EPOS PC 8. Коллеги говорят, звук отличный, и шумодав вполне годный.

Теперь думаю взять ещё одни наушники для офиса — вот не знаю, повторить покупку или попробовать что-то новое.

А вы какими наушниками пользуетесь? Расскажите — может, найду для себя идеальный вариант.

#about_me

🤖 Онбординг ИИ

Mon, 12 May 2025 08:01:01 GMT

🤖** Онбординг ИИ**

Что происходит, когда в команде появляется новый сотрудник? Правильно — он адаптируется и старается писать код в соответствии с гайдлайнами, принятыми в команде. А помогают ему в этом документация, линтеры и ревью коллег.

По сути, ИИ — это ваш коллега, которому вы делегируете задачи, и ему тоже нужно объяснить, как писать код. И здесь как раз пригодится документация, которую никто из ваших коллег не читает 😄, но ИИ — будет.

Многие ИИ-агенты поддерживают формат “правила/инструкции”, где можно описать стандарты и архитектуру проекта. Это, по сути, обычный Markdown-файл, который будет добавляться к системному промпту при каждом запросе.

В Cline — это custom instructions
В Cursor — rules
В Copilot — instructions
В Windsurf — rules

Названия немного отличаются — но суть одна.

Примеры

1️⃣ У меня Copilot упорно пытался использовать pnpm, пока я явно не указал использовать npm.

2️⃣ На работе мы используем BEM и префиксы для всех имён классов, чтобы избежать коллизий. Cline, конечно, этого не понял, пока я явно не задал это в инструкциях.

3️⃣ На выходных решил набросать MVP пет-проекта из бэклога. Сначала написал ТЗ с помощью ИИ, положил его в .github/instructions/<requirements-instruction.md> и попросил Copilot написать проект по ТЗ. Он справился, потребовались лишь небольшие правки. Теперь при любых изменениях он уже знает требования.

4️⃣ Можно попросить ИИ использовать conventional commits при генерации сообщений к коммитам.

Некоторые примеры — на скринах.

#ai #frontend

У меня есть проблема 😐

Sun, 04 May 2025 13:18:07 GMT

У меня есть проблема 😐

И заключается она в том, что я часто не могу насладиться отдыхом в полной мере.

Когда я ничего не делаю, я чувствую тихий голосок внутри. Он шепчет, что я теряю время, а мог бы:

📖 прочитать книгу
🎓 пройти курс
🛠️ начать ремонт
🏋️‍♂️ сходить лишний раз в зал
и т.д. Он не дает полностью расслабиться и насладиться выходными в полную силу.

Но при этом, если я займусь чем-то, то удовольствия тоже не получу, я только сильнее устану. Получается такой замкнутый круг, в котором я постоянно должен что-то делать, чтобы ощутить мимолетное удовольствие от достижения, а затем снова окунуться в работу с головой. Ещё ситуацию усугубляет “культ успешности”, все рассказывают о своих достижениях, и кажется, что на их фоне ты какой-то лузер.

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

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

Обычно помогает выехать куда-нибудь, где можно сменить атмосферу и много гулять, но в этот раз я остался дома — и вот, это со мной и произошло. Я пытался доделать все дела до выходных, засиживался допоздна, а когда наступили выходные появилось опустошение и нервозность. В общем, только к середине второго дня получилось усмирить себя и отпустить ситуацию, а на третий тупо лежать и смотреть сериал.

Так вот, если вы чувствуете что-то такое — знайте, вы не одиноки 👋😄. И если не получилось отдохнуть в этот раз, то обязательно отдохните на следующей неделе. 😉

#about_me

🕸️ Я в Сетке

Thu, 24 Apr 2025 08:02:01 GMT

🕸️ Я в Сетке

Я давно уже думаю, как диверсифицировать телеграмм и вести канал где-то ещё (а то вдруг с Дуровым что случится …).

Я пробовал вести каналы:

В Дзен — трафик нулевой, ни показов, ни просмотров
На Хабре — тут получше, но нет удобного способа делать репосты из телеги
На Пикабу — и просмотры есть и бот для репостов, но на пикабу я не сижу от слова совсем

Теперь решил попробовать Сетку, завел канал и пока вроде всё идет хорошо. Правда с форматирование кода — грусть грустная, надеюсь поправят. Если что Сетка — это рабочая соцсеть от <hh.ru>, что-то вроде LinkedIn.

В Сетке есть отдельный формат постов “Вопросы”, а ещё лента, к которой мы так привыкли. И в результате, можно получить ответы от самых разных людей.

Вот некоторые из моих вопросов:

В общем, если у вас есть сетка — добавляйтесь . А я пойду получу галочку)

🗿 Подводные камни при переходе с ES5 на ES6

Mon, 21 Apr 2025 09:02:01 GMT

🗿 Подводные камни при переходе с ES5 на ES6

Недавно мы с командой, наконец-то перешли с ES5 на ES6.

Всё прошло достаточно плавно, нам пришлось исправить всего несколько ошибок в рантайме. Почти все ошибки были в очень старых файлах, где были отключены проверки typescript с помощью @ts-nocheck.

Ошибка 1️⃣ — Action is not a constructor

Ошибка возникла в нескольких местах, где мы использовали стрелочную функцию в качестве конструктора. Раньше она не возникала, потому что стрелочная функция компилировалась в обычную function.

 
const Action = () => {}; // ES6
const action = new Action(); // Action is not a constructor
 
var Action = function () {} // ES5
var action = new Action(); // Всё ОК

Ошибка 2️⃣ — Функции, объявленные через let, больше не попадают в window

 
let openAction = function () {}
window.openAction() // window.openAction is not a function
 
// Раньше let заменялся на var и всё работало
var openAction = function () {}
window.openAction() // всё ок

Дело в том, что когда переменная объявляется глобально через var, она автоматически становится свойством глобального объекта window. Подробнее тут.

Ошибка 3️⃣ — Cannot access variable before initialization

Одна из ошибок случалась, когда мы пытались получить доступ к переменной promise до её инициализации.

 
class Queue {
  executing;
 
  run(thenable) {
    const promise = new Promise(async (resolve, reject) => {
      // пытаемся получить значние promise
      while (this.executing != promise) {
        // ...
      }
      // ...
    });
  }
}
 
// Cannot access 'promise' before initialization
new Queue().run(Promise.resolve())

Раньше, const превращался в var и ошибки не было. Это связано с понятием временной мертвой зоны TDZ, которая не возникает у переменных, объявленных через var.

Были и другие ошибки, но они по сути вариации или комбинации тех ошибок, что я привел выше.

👉 Кстатии, размер бандлов уменьшился процентов на 20.

#TypeScript #JavaScript

Особенности событий порталов в React ⚛️

Wed, 16 Apr 2025 07:21:01 GMT

Особенности событий порталов в React ⚛️

Сегодня продолжаем внимательно читать документацию React. На прошлой неделе пофиксили небольшой баг, который возник из-за особенности всплытия событий при работе с порталами.

createPortal

Метод createPortal позволяет рендерить компонент вне текущей DOM-иерархии, но при этом он остаётся частью React-дерева.

Теперь читаем документацию

События из порталов распространяются в соответствии с деревом React, а не деревом DOM. Например, если вы нажмёте внутри портала, и портал обёрнут в `
`, сработает этот обработчик `onClick`. Если это вызывает проблемы, либо остановите распространение события (stopPropogation()) внутри портала, либо переместите сам портал выше в дереве React.

Что у нас случилось❓

В проекте мы недавно переписали тулбокс — панель, из которой можно перетаскивать элементы при создании workflow.

Из-за ограничений мы отказались от нативного drag-and-drop и использовали старый кастомный хук на обычных mousedown`/`mousemove.

Что фиксили? 🪲

В общем, всё работал, но пользователь мог начать перестаскивать элемент нажав на всплывающую подсказку (описание на картинке).

Происходило это потому, что при нажатии на подсказку событие всплывало к родительскому компоненту элемента тулбокса, на котором вызывался обработчик mousedown.

Причина в том, что React-ивенты всплывают по React-дереву, а не DOM. Всё как в доке. А пофиксили это простым добавлением stopPropogation() в onMouseDown компонента подсказки.

#react

Если вы этим пасмурным воскресеньем занялись поиском новой работы, загляните вот сюда — мой земляк…

Sun, 13 Apr 2025 13:02:40 GMT

Если вы этим пасмурным воскресеньем занялись поиском новой работы, загляните вот сюда — мой земляк запустил телеграм-канал с подборкой классных вакансий. Всё фильтруется нейросетями, так что в ленте только самое-самое.

Недавно, также появилась подборка МЕГАFront. Если хотите получить список самых лучших вакансий — напишите напрямую Саше.

Я вообще уже не помню, когда последний раз откликался на вакансии, тем более, что последние почти 8 лет, я вовсе не менял работу 😅. Обычно рекрутеры сами стучались в личку, и так я ходил по собесам. Но послдение пол года, никто не пишет, действительно ситуация на рынке изменилась?

Расскажите, как сейчас лучше искать работу? <hh.ru>? LinkedIn? Сетка? Телеграм-каналы с подборками?

⚛️ State is tied to a position in the render tree

Fri, 11 Apr 2025 09:01:01 GMT

⚛️ State is tied to a position in the render tree

Помнится в одном из своих пет проектов у меня был баг — при переходе между страницами у меня не пересоздавался zustand стор из-за чего компонент PersonalStatistic использовал стор компонента CodeReviewCharts 👇

 
children: [
  {
    path: '/charts',
    element: (
      <ChartsStoreProvider createStore={createPersonalPageStore}>
        <CodeReviewCharts />
      </ChartsStoreProvider>
    ),
  },
  {
    path: '/personal',
    element: (
      <ChartsStoreProvider createStore={createCommonChartsStore}>
        <PersonalStatistic />
      </ChartsStoreProvider>
    ),
  },
]

Дело было в том, что контекст был одним и тем же компонентом ChartsStoreProvider. Тогда я просто добавил key для сторов и проблема ушла.

 
children: [
  {
    path: '/charts',
    element: (
      <ChartsStoreProvider key="charts" /*👈*/ createStore={createPersonalPageStore}>
        <CodeReviewCharts />
      </ChartsStoreProvider>
    ),
  },
  {
    path: '/personal',
    element: (
      <ChartsStoreProvider key="personal" /*👈*/ createStore={createCommonChartsStore}>
        <PersonalStatistic />
      </ChartsStoreProvider>
    ),
  },
]

Не помню было ли это в старой документации реакта, но в новой явно сказано:

State is tied to a position in the render tree

Состояние привязано к определённой позиции в дереве рендера.

То, есть проблема была в том, что при переходе на страницу /personal, ChartsStoreProvider оставался на той же позиции в дереве и поэтому использовался “неподходящий” стейт предыдущего провайдера.

Раньше я думал, что стейт живет “внутри компонента” — то, есть связан с инстансом конкретного компонента, как свойста в классе. Но документация явно говорит:

When you give a component state, you might think the state “lives” inside the component. But the state is actually held inside React. React associates each piece of state it’s holding with the correct component by where that component sits in the render tree.

Когда вы добавляете состояние (state) компоненту, может показаться, что это состояние «находится» внутри самого компонента. Однако на самом деле состояние хранится внутри React. React сопоставляет каждую единицу состояния с нужным компонентом, исходя из того, где этот компонент находится в дереве рендера.

Вот тут в демке это наглядно видно.

А ещё key можно использовать чтобы явно перерендерить компонент, если у него есть какой-то внутренний стейт.

#react

ИИ для прототипирования интерфейсов

Mon, 07 Apr 2025 09:01:01 GMT

ИИ для прототипирования интерфейсов

До недавнего времени я использовал ChatGPT исключительно как помощника для генерации кода — вбросить запрос, получить сниппет, внести правки. Но все вокруг только и говорят об AI-агентах, курсоре, v0 и так я наткнулся на сервисы для онлайн генерации прототипов на основе ИИ.

Вот несколько подобных сервисов:

Можно сказать, что это онлайн IDE, где можно сгенерировать проект по запросу, увидеть результат, задеплоить и поделиться ссылкой на прототип.

Сделать полноценный проект с помощью этих сервисов, конечно, трудно, но набросать прототип и проверить гипотезу, например, возможно ли реализовать какую-то фичу с помощью какой-то библиотеки, очень удобно.

А теперь немного про мой опыт 👇.

1️⃣ Первый опыт

Первый раз, когда я наткнулся на v0, я попросил его сгенерировать интерфейс Айфона по скриншоту (тут демка). Когда я увидел результат, то в восторге побежал показывать жене. А потом понял, что шутки про замену фронтендеров на ИИ перестали быть шутками 😅.

2️⃣ Опыт использования в работе

В феврале мне дали большую задачу, где использовалась библиотека, в которой у меня не было ровным счётом 0 опыта, и попросили дать оценку по времени.

У библиотеки, есть большой набор демок, но то, что требовалось мне — отсутствовало. И тут я вспомнил про v0 и решил сам сгенерировать маленькие прототипы на каждую новую фичу.

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

||P.S. итоговую оценку всё же стоило умножить на 2 😅.||

3️⃣ Ещё пример

Также мы рассматривали вариант, сменить GoJS на @xyflow/react и тут мне снова помог V0. Примеры для @xyflow/react v0 генерировал намного лучше. За пару дней я набросал небольшой прототип, который точно писал бы неделю. Я сделал скриншот дизайна в фигме, и попросил v0 сгенерировать его с использованием библиотеки.

🛑 Минусы

Тут конечно, важно сказать, что часто эти сервисы:

генерируют нерабочий код
генерируют не совсем то, что вам нужно
могут сломать весь проект после очередных изменений
имеют ограниченное количество бесплатных запросов в день

Расскажите, пользуетесь ли вы подобными сервисами и какое у вас впечатление?

#Frontend #Ai

Всё достало, увольняюсь …

Tue, 01 Apr 2025 06:05:02 GMT

Всё достало, увольняюсь …

🔄 Обновляем caniuse-lite

Thu, 27 Mar 2025 08:01:01 GMT

🔄 **Обновляем caniuse-lite ** Когда стали использовать реакт, мы взяли стандартный create-react-app, в котором использовался browserslist. Конфиг был стандартный.

 
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Потом мы, конечно, совершенно забыли как работает browserslist, и успешно игнорирывали следующее сообщение при билде.


Browserslist: caniuse-lite is outdated. Please run:

npx update-browserslist-db@latest

Why you should do it regularly: https://github.com/browserslist/update-db#readme

Так в чём проблема? 🤔

caniuse-lite - легковесная версия, той самой базы caniuse.com. Время идёт, появляются новые версии браузеров, а мы используем старую базу, и все наши запросы ">0.2%" работают с браузерами пяти летней давности.

То, есть запрос ">0.2%" выбирал браузеры, у которых доля рынка была больше 0.2% 5 лет назад.

А это значит, что

async/await преобразуется в длинную партянку кода в ES5
стрелочные функции () => {} заменяются на function() {}
никаких let/const, только старокрестьянский var
в код попадают ненужные полифилы

В общем, если давно не обновляли caniuse-lite открываем консоль и запускаем:

 
npx update-browserslist-db@latest

Если у вас pnpm монорепозиторий — используйте команду:

 
pnpm up caniuse-lite

Мы обновились и наши жирные бандлы прилично похудели.


407.31 KB (-100.86 KB) build/bundle-1.js
369.3 kB (-34.64 kB) build/bundle-2.js
220.67 KB (-18.86 kB) build/bundle-3.js

#javascript #tools

🏗️ Как используется паттерн простая фабрика в исходниках хромиума

Mon, 24 Mar 2025 07:29:22 GMT

🏗️ Как используется паттерн простая фабрика в исходниках хромиума

Почти год назад я говорил, что паттерн “простая фабрика” используется в исходниках хромиума, и вот у меня ||появилось желание|| дошли руки написать об этом.

Этот паттерн используется в реализации всем нам знакомого (кроме бэкендеров) метода document.createElement('div').

Вместо длинного списка switch/case у нас тут словарь, где по имени тега выбирается функция-конструктор и сразу вызывается.

Код целиком можно посмотреть вот здесь 🔗.

 
// html_element_factory.cc
 
static void CreateHTMLFunctionMap() {
  DCHECK(!g_html_constructors);
  g_html_constructors = new HTMLFunctionMap;
  
  // таблица соответствий тегов и функций-конструкторов
  static const CreateHTMLFunctionMapData data[] = {
 // тут конструкторы всех тегов div/span/ul/li/button/h1...
    { html_names::kDivTag, HTMLDivConstructor },
    { html_names::kSpanTag, HTMLSpanConstructor },
    { html_names::kMainTag, HTMLMainConstructor },
    { html_names::kUlTag, HTMLUlConstructor },
    { html_names::kLiTag, HTMLLiConstructor },
    { html_names::kButtonTag, HTMLButtonConstructor },
    { html_names::kCanvasTag, HTMLCanvasConstructor },
    { html_names::kH1Tag, HTMLH1Constructor },
    // .... и так далее
  };
 
  for (size_t i = 0; i < std::size(data); i++)
    g_html_constructors->Set(data[i].tag.LocalName(), data[i].func);
}
 
// функция — фабрика элементов
HTMLElement* HTMLElementFactory::Create(
    const AtomicString& local_name,
    Document& document,
    const CreateElementFlags flags) {
  if (!g_html_constructors)
    CreateHTMLFunctionMap();
  
  // находим функцию-конструктор по имени тега
  auto it = g_html_constructors->find(local_name);
  if (it == g_html_constructors->end())
    return nullptr;
  HTMLConstructorFunction function = it->value;
  
  // создаем элемент
  return function(document, flags);
}

Но это не самое интересное 🕵️‍♂️.

Я достаточно долго искал этот код на гитхабе. ||И не потому что мне было плохо, когда я пытался читать C++ код.|| Я видел, что HTMLELementFactory::Create вызывается, но описания самой функции в коде нет.

Дело в том, что файл html_element_factory.cc, часть которого я привел выше — генирируется при билде. Я написал нескольким разработчикам хромиума, и пара из них скинула мне вот эту ссылку, где я смог посмотреть все исходники, включая сгенирированные.

А генирируется html_element_factory.cc на основе:

📜 <HTMLTagNames.in> — списка тегов
🏗️ ElementFactory.cpp.tmpl — шаблон файла фабрики

#patterns #oop

@cherkashindev

Ну знаете ли, это уже не смешно, кто-то точно за мной следит.

Thu, 13 Mar 2025 16:24:37 GMT

Ну знаете ли, это уже не смешно, кто-то точно за мной следит.

Сначала думал, совпадение — ну ладно, один раз могло случиться. Но опять номер в отеле в двоичной системе.

В прошлый раз был 11101 = 29, в этот раз 1001 = 9. Это как-то связано с тем, что мне 29 через пару месяцев? Или кто-то передает мне пароль? Но от чего?

Так много вопросов и мало ответов…

#vacation

И вот несмотря на утреннюю атаку беспилотников и задержку рейса, несмотря на рамаданские пробки,…

Tue, 11 Mar 2025 18:56:54 GMT

И вот несмотря на утреннюю атаку беспилотников и задержку рейса, несмотря на рамаданские пробки, всего каких-то 23 часа путешествия и мы в Дубае 🎉.

Расскажите, куда здесь обязательно стоит сходить, а куда точно нет?

И давайте договоримся, вы мне бустите канал и спокойно работаете, а я не хвастаюсь фотками из отпуска 😄.

||P.S. завидую москвичам, просто взял и поехал в аэропорт и не нужно искать подходящий стыковочный поезд.||

#vacation #dubai #about_me

🗄️ Примеры использования IndexedDB

Mon, 10 Mar 2025 14:30:25 GMT

🗄️ Примеры использования IndexedDB

Я потихоньку начал разбираться как работает IndexedDb и нашел пару хороших примеров использования.

Я давно задумывался, как же excalidraw хранит всё, что я нарисовал, ведь картинки точно не влезут в localStorage. Ожидаемо, что для этого используется IndexedDB.

В отличии от localStorage, в котором доступно всего 5Mb, в indexedDb доступное пространство исчисляется гигабайтами.

VK также активно использует IndexedDb, например, чтобы хранить данные об историях.

Расскажите, а вы как-нибудь используете IndexedDb в своих приложениях?

#frontend #indexedDb

В конце прошлого года ходило много слухов, что халява для программистов закончилась:

Sat, 01 Mar 2025 10:13:33 GMT

В конце прошлого года ходило много слухов, что халява для программистов закончилась: ⁃ сокращения в крупных компаниях ⁃ меньше “вкусных” вакансий

Давайте проверим, пройдите опрос ниже 👇.

P.S. этот опытный кандидат ждёт ваш оффер по адресу: г. Курск, проспект Дериглазова, лавочка №3

Сегодня телеграм-каналу исполнилось 4 года. 🎉

Thu, 27 Feb 2025 16:36:43 GMT

Сегодня телеграм-каналу исполнилось 4 года. 🎉

Ещё с универа я хотел завести блог. На старом ноуте, даже написано несколько статей из далёкого 2017 года, которые никто никогда не увидит (и слава богу 🤣).

Помню, как написал первую статью на Хабр. Потом мы с друзьями пошли смотреть чемпионат мира 2018 в местный бар, и я с трясущимися руками проверял, как мне набрасывают комментарии 😄.

Помню как гуглил, как создать телеграм-канал и настроить @ControllerBot, чтобы не опубликовать ничего лишнего. Помню, как стрёмно было писать посты, хотя в канале было всего 16 человек. Спустя 4 года, конечно, стало полегче. 😅

Я завёл канал, когда почувствовал стагнацию, и с тех пор он подстёгивает меня изучать что-то новое и не стоять на месте 📈. Раньше было сложно придумать о чём бы написать, а теперь у меня есть бэклог с множеством идей.

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

Спасибо всем вам, что читаете — это очень мотивирует не бросать! 🎉

#about_me

Ежегодно у нас в компании каждый сотрудник получает на почту имейл, где указано, что в течение пары…

Mon, 24 Feb 2025 10:50:10 GMT

Ежегодно у нас в компании каждый сотрудник получает на почту имейл, где указано, что в течение пары недель ему нужно пройти очередное обучение по безопасности, в котором в сотый раз расскажут что такое фишинг и тейлгейтинг. Насколько помню, это необходимо для прохождения аудита SOC (но это не точно).

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

Я подумал: что за чушь!? Он в штатах, а я сижу в Российской деревне, прячусь от ковида. Мы никогда не разговариваем по телефону, да и на английском я говорю с трудом 😅. В общем, я проигнорил сообщение, а уже потом узнал, что это был тот самый фишинговый имейл.

Думаю, насколько бы эти тренинги не казались кому-то бесполезными, они нужны, особенно для новых сотрудников.

Сейчас время от времени у нас проводятся “учения”, с рассылкой фишинговых имейлов. И тех, кто кликнет на “вредоносную” ссылку, вешаю на доску позора. Шутка 😄.

#job

Хвастаюсь.

Sun, 23 Feb 2025 13:15:04 GMT

Хвастаюсь.

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

И кабель-канал, чтобы робот-пылесос не нападал на провода.

Похоже пора заморочиться над рабочим столом, чтобы уточке не было грустно.

#about_me

Ключевое слово infer

Fri, 21 Feb 2025 10:52:01 GMT

Ключевое слово infer

На тайпскрипте я пишу давно, но какие-то сложные типы практически не пишу. Про infer я слышал, и много месяцев откладывал пятиминутное прочтение статьи, чтобы разобраться, как он работает 😄.

В итоге разобрался только во время доклада на Я 💛 Фронтенд — Антология полезностей в TypeScript .

Условные типы

infer неотрывно связан с условными типами, поэтому начнём с них. По сути это тернарный оператор, который применяется не к переменным, а к типам.

Простой пример типа ToArray. Если мы передали тип-массив — условие extends any[] выполняется и возвращается тот же тип T, иначе создаём массив типа — T[]

 
type ToArray<T> = T extends any[] ? T : T[];
 
type NumberArray = ToArray<number>; // number[]
type StringArray = ToArray<string[]>; // string[]

infer

Если вы знаете английский, то поняли, что тут пойдёт речь про вывод типов. Вообще, про infer удобно думать как об объявлении переменной, где тип будет выведен автоматически. То есть, TypeScript думает, можно ли что-то подставить в наше условие, чтобы оно выполнялось, если можно — выводит тип и кладёт в переменную.

Теперь попробуем решить задачу обратную ToArray — будем определять тип элемента в массиве.

 
type ArrayItem<T> = T extends (infer Item)[] ? Item : T;
 
type NumberItem = ArrayItem<number[]> // number
type StringItem = ArrayItem<string>; // string

Тут мы просто заменяем any на infer Item, что означает: “выведи тип” и положи его в ~~переменную~~ тип с именем Item. И дальше просто используем Item.

Также infer работает с шаблонно-литеральными типами, вот так, например, можно вывести имя БЭМ-блока по элементу или модификатору

 
type BemBlock<T extends string> = T extends `${infer Block}__${string}` ?
    Block : 
    T extends `${infer Block}__${string}--${string}` ? Block : never
 
type Block1 = BemBlock<"login-page__form"> // login-page
type Block2 = BemBlock<"login-page__user--active">  // login-page

Ещё по теме:

#typescript

🤝 Как подружить React.lazy с дефолтным экспортом

Thu, 13 Feb 2025 10:01:01 GMT

🤝 Как подружить React.lazy с дефолтным экспортом

У нас в проекте используются только именованные экспорты. Почему — писал здесь.

Но React.lazy работает только с дефолтными экспортами, и раньше нам приходилось успокаивать eslint, приговаривая // eslint-disable-next-line import/no-default-export.

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

 
export { MyComponent as default } from "./ManyComponents.js";

Но как по мне — совсем не красиво.

Но что такое дефолтный экспорт? Когда мы используем динамическую загрузку модулей с помощью import, в промисе получим модуль. А дефолтный экспорт будет храниться в поле default, именованные экспорты будут храниться в соответствующих полях модуля.

То есть если мы экспортируем компонент Markdown с помощью именованного экспорта, то мы сможем получить к нему доступ через одноимённое свойство Markdown на загруженном модуле.

 
import React, { lazy, Suspense } from "react";
import { MySpinner } from "@private/design-system";
 
const MarkdownPreview = lazy(async () => {
    const module = await import('./myModule');
 
    // преобразуем именованный экспорт в дефолтный
    return { default: module.Markdown };
});
 
export const LazyMarkdownPreview = () => {
    return (
        <Suspense fallback={MySpinner}>
            <MarkdownPreview />
        </Suspense>
    );
};

#javascript #react

Запоминаем, как правильно оставлять комментарии при код-ревью

Mon, 10 Feb 2025 08:41:03 GMT

Запоминаем, как правильно оставлять комментарии при код-ревью

не 🙅‍♂️ “опять ты накопипастил, ну сколько можно?!?!?!”
а ☝️ “Consider refining the implementation to make better use of reusable code”

С началом продуктивной рабочей недели 👋

#meme #codereview

Иногда бывает, засидишься за работой, пытаясь доделать интересную (или не очень) задачу. Крутишь её…

Wed, 05 Feb 2025 11:30:00 GMT

Иногда бывает, засидишься за работой, пытаясь доделать интересную (или не очень) задачу. Крутишь её так и эдак 🤔, но ничего не выходит.

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

А как же это решить? 🤯 Мысленно перебираешь все возможные варианты решения. А почему же это не сработало? А может быть, вот так сделать? А если тут поле добавить? А есть ли у нас вообще эти данные? А что, если сделать дополнительный запрос на сервер? А потом… а потом…

А потом наступает тревожность, и нормально уснуть уже не получается.

У вас бывает такое? 🤷‍♂️

Но всё же чувство, когда ты всё-таки разобрался и всё получилось - бесценно.

@cherkashindev

#about_me

✨ViewTransitionAPI view-transition-name

Tue, 28 Jan 2025 07:28:08 GMT

✨ViewTransitionAPI view-transition-name

Прочитал статью “Same-document view transitions for single-page applications” и решил запилить свою демку с открытием приложения как на айфоне, используя viewTransitionAPI.

Анимация реализуется с помощью CSS свойства view-transition-name. Так мы указываем, что анимация для этого элемента должна происходить отдельно.

⚠️ Значение view-transition-name должно быть уникальным, если у разных элементов одно и то же значение view-transition-name, анимация скипнется и появится ошибка в консоли.

Но есть нюанс, на время перехода можно указать view-transition-name разным элементам. Так мы скажем браузеру, что один элемент должен анимироваться в другой.

В реакте, пока только появляется экспериментальная поддержка ViewTransition, поэтому придётся использовать flushSync, чтобы запустить рендер синхронно, что не есть гуд для производительности.

Код перехода выглядит так:

 
const handleAppOpened = (e: React.MouseEvent<HTMLButtonElement>, appName: string) => {
    openedApp.current = (e.target as HTMLButtonElement);
    // выставляем иконке такой же viewTransitionName как и для экрана приложения
    openedApp.current.style.viewTransitionName = 'app-content';
 
 // запускаем переход
    document.startViewTransition(() => {
      if (openedApp.current?.style) {
     // сбрасываем viewTransitionName для иконки
        openedApp.current.style.viewTransitionName = '';
      }
 
   // синхронный рендер
      flushSync(() => setApp(appName));
    })
  };

Во время анимации появляется дерево псевдо-элементов.

 
::view-transition
  ::view-transition-group(root)
  ::view-transition-group(app-content)
    ::view-transition-old(app-content)
    ::view-transition-new(app-content)

Так мы можем выставить кастомную анимацию:

 
::view-transition-new(app-content) {
  animation: 300ms ease;
}
 
::view-transition-old(app-content) {
  animation: 300ms ease reverse;
}

Отлаживать анимацию, можно с помощью панели Animations: ⚙️ > More tools > Animations

📂 Исходники здесь 🌐 Демка здесь

Ещё по теме

#frontend@cherkashindev

Как-то редко я стал что-то рекомендовать посмотреть/почитать, но сегодня пришел не с пустыми…

Fri, 24 Jan 2025 11:29:01 GMT

Как-то редко я стал что-то рекомендовать посмотреть/почитать, но сегодня пришел не с пустыми руками, а с докладом “Как умение продавать помогает разработчику / Андрей Кузнецов (РБС)“.

Советую посмотреть доклад целиком, но мне больше всего понравилось про Эффект маятника ⚖️.

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

Это называют эффектом маятника, потому что эмоции сначала сильно качаются в одну сторону (страх), а потом так же сильно летят обратно в другую (радость), делая её ещё ярче.

Пример, который все поймут: засовываешь руку в карман, а телефона нет 🤷‍♂️, и в панике начинаешь везде его искать. Находишь телефон во внутреннем кармане, и радости нет конца, ничего не изменилось — но вы счастливы.

💬 Как это пригодится в переговорах?

На этих “качелях” 🎢 можно сделать “продажу” — “Мол, смотри как всё плохо, но у нас есть волшебная таблетка 💊“. И человек с радостью купит эту таблетку.

Приходите на переговоры и запугиваете начальство:

Вот у нас есть давно написанный код, и из-за него постоянно появляются баги в продукте. Из-за одного такого бага, от нас ушел клиент.

После того, как все напуганы и в панике грызут ногти - предложите им лекарство:

Но если бы мы делили время, покрыли бы этот код тестами и провели рефакторинг — всех этих проблем можно было бы избежать.

📌 И ещё несколько моментов из доклада:

Ключевая часть продаж — переговоры.
Все мы что-то продаём.
Старайтесь не называть срок по задачам первым.
Если кто-то пытается уговорить вас сделать задачу быстрее — не делайте скидку сразу.
Если делаете скидку — обосновывайте. Мы сделаем задачу за 8, а не за 14 дней, но возможно будут проблемы с производительностью. Или мы не успеем сделать вот эту часть функционала.
Не используйте круглые цифры. В “не круглые цифры” люди верят охотнее, ведь им кажется, что это результат какого-то глубокого анализа. Например, говорите, что задача займет не 5 дней, а будет сделана к 12 часам в четверг.
Никогда никого не перебивайте.
Вежливо отказывайте собеседнику. Понимать - не значит соглашаться.

#softskills #fridayreading

Жизнь без Канбан досок в Obisidian 💎

Mon, 20 Jan 2025 11:01:01 GMT

Жизнь без Канбан досок в Obisidian 💎

После перехода с Notion на Obsidian я начал упрощать всё, что только можно. Например, в Obsidian нет нативной поддержки канбан-досок. Я попробовал плагин Projects для управления постами, которые перенёс из Notion.

Но у него есть проблема: статусы у новых записей почему-то слетают. Возможно я что-то настроил не так, но мне приходится выставлять их по несколько раз, что, мягко говоря, раздражает.

И тут я задумался: а ведь канбан — это просто набор папок.


Посты  
├── 0.Backlog  
├── 1.Next  
├── 2.InProgress  
└── 3.Done

Для простых случаев этого более чем достаточно. Иногда самое простое решение оказывается самым удобным.

А ещё мне нравится, что в Obsidian всё — это просто файлы и папки. Это даёт огромную свободу для оптимизаций с помощью скриптов. Например, я попросил ChatGPT написать скрипт, который автоматически переносит готовые посты в папку “3.Done”.

 
#!/bin/bash
 
echo "Moving files with the 'done' tag to the Done folder..."
 
# Paths to the Posts and Done folders
POSTS_FOLDER="$HOME/Documents/Obsidian Vault/Посты"  # Adjust the base path to your Obsidian vault
DONE_FOLDER="$HOME/Documents/Obsidian Vault/Посты/3.Done"
 
# Ensure the Done folder exists
if [ ! -d "$DONE_FOLDER" ]; then
  mkdir -p "$DONE_FOLDER" || {
    echo "Failed to create Done folder: $DONE_FOLDER"
    exit 1
  }
fi
 
# Check if the Posts folder exists
if [ ! -d "$POSTS_FOLDER" ]; then
  echo "Posts folder does not exist: $POSTS_FOLDER"
  exit 1
fi
 
# Process files
echo "Scanning for markdown files with #done tag in $POSTS_FOLDER..."
moved_count=0
for file in "$POSTS_FOLDER"/*.md; do
  # Skip if no markdown files are found
  if [ ! -e "$file" ]; then
    echo "No markdown files found in $POSTS_FOLDER."
    break
  fi
 
  # Check if the file contains the #done tag
  if grep -q "✅ Done" "$file"; then
    mv "$file" "$DONE_FOLDER/" && {
      echo "Moved: $(basename "$file")"
      ((moved_count++))
    } || {
      echo "Failed to move: $(basename "$file")"
    }
  fi
done
 
echo "Finished. Total files moved: $moved_count."

#obsidian

🗂️Папка с Курскими ИТ-каналами

Mon, 13 Jan 2025 10:09:05 GMT

🗂️Папка с Курскими ИТ-каналами

В прошлом году решил, что было бы неплохо собрать все Курские ИТ каналы в одну папку, и вот что получилось

👉 https://t.me/addlist/CcKwwK_1G9AxMjEy

Даже если вы не из Курска — обязательно добавляйте папку, точно найдёте для себя что-то интересное.

Пара слов о каждом:

@cherkashindev — это собственно я, пишу в основном о вебе, GTD и иногда о C#

@polovnyov_journal — Вася - техдир в Бюро Горбунова, пишет о разработке, тестировании и рабочих процессах

@rich_developer — Саша - CEO в HaaS Platform, пишет про найм, поиск работы и публикует вкусные вакансии

@andvink — Андрей пишет про ИИ и автоматизацию разработки. Сменил стек с веба на ML

@likelivinghere — Виталик - QA Lead, пишет о стендапе, релокации и возвращении в Россию

@tony_malyshev — Антон пишет об аналитике, маркетинге и нейросетях

@gameFromTheInside — Кирилл пишет о разработке игр, в прошлом году опубликовал “Танки 3D: Дикая арена” в Яндекс Играх

@kavyrshing — Саша пишет про около-айти, аджайл и коучинг

@dyuminblog — Вадим - дизайнер с 20-летним опытом работы

Если кого-то упустил, то обязательно пишите — добавлю

👉 Папка - ИТ Курск

React приложение без сборщиков

Fri, 10 Jan 2025 07:12:32 GMT

React приложение без сборщиков

Иногда нужно набросать небольшой пример или демку на реакте, но не хочется создавать новый проект, где установится +100500 пакетов. Создавать проект в песочнице типа codesandbox тоже лень. Есть вариант попроще:

1️⃣ Подключаем react и react-dom через CDN

 
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

2️⃣ Подключаем babel через CDN

 
<script src="https://unpkg.com/@babel/standalone/babel.min.js">

3️⃣ Добавляем root

 
<div id="root"></div>

4️⃣ Добавляем script с типом “text/babel”, внутри которого мы можем использовать JSX

 
<script type="text/babel"></sciprt>

Получаем следующий код

 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Without Bundler</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
 
<body>
    <div id="root"></div>
    <script type="text/babel" defer>
        function App() {
            const [count, setCount] = React.useState(0);
 
            return (
                <div style={{ textAlign: "center", marginTop: "50px" }}>
                    <h1>Счётчик: {count}</h1>
                    <button onClick={() => setCount(count - 1)}>-</button>
                    <button onClick={() => setCount(0)} style={{ margin: "0 10px" }}>
                        Сброс
                    </button>
                    <button onClick={() => setCount(count + 1)}>+</button>
                </div>
            );
        };
 
 
        ReactDOM.createRoot(document.getElementById("root")).render(<App />);
    </script>
</body>
 
</html>

5️⃣ Для максимальной простоты — создаём сниппет в VS Code

👉 CMD + SHIFT + P > Configure Snippets > New Global Snippets file и вставляете туда

 
{
    "React Without Bundler HTML": {
        "prefix": "react-html",
  "scope": "html",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"UTF-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "    <title>React Without Bundler</title>",
            "    <script src=\"https://unpkg.com/react@18/umd/react.development.js\"></script>",
            "    <script src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\"></script>",
            "    <script src=\"https://unpkg.com/@babel/standalone/babel.min.js\"></script>",
            "</head>",
            "",
            "<body>",
            "    <div id=\"root\"></div>",
            "    <script type=\"text/babel\" defer>",
            "        const { useState } = React;",
            "",
            "        function App() {",
            "            const [count, setCount] = useState(0);",
            "",
            "            return (",
            "                <div style={{ textAlign: \"center\", marginTop: \"50px\" }}>",
            "                    <h1>Счётчик: {count}</h1>",
            "                    <button onClick={() => setCount(count - 1)}>-</button>",
            "                    <button onClick={() => setCount(0)} style={{ margin: \"0 10px\" }}>",
            "                        Сброс",
            "                    </button>",
            "                    <button onClick={() => setCount(count + 1)}>+</button>",
            "                </div>",
            "            );",
            "        };",
            "",
            "        ReactDOM.createRoot(document.getElementById(\"root\")).render(<App />);",
            "    </script>",
            "</body>",
            "",
            "</html>"
        ],
    }
}

#react #vscode

Выходные пролетели, как обычно! Успели отдохнуть?

Wed, 08 Jan 2025 16:22:20 GMT

Выходные пролетели, как обычно! Успели отдохнуть?

Я первую половину выходных батонился на кровати и смотрел сериалы, а вторую гулял по Владимиру и Суздали.

Во время поездки погода была отличная — на несколько дней ударил мороз, и удалось насладиться зимой, которая в Курск заглядывает всё реже (сегодня +6).

Суздаль — это что-то особенное, словно русская сказка оживает наяву:

Около 50 церквей на небольшой городок — удивительное ощущение духовности.
Старинные дома в центре с резными наличниками и деревянными воротами — будто из прошлого века.
Лошади с санями, неспешно везущие туристов, — атмосфера уюта и зимнего волшебства.

Теперь как-то нужно вырваться туда летом …

#travelling@cherkashindev

Декабрь подходит к концу, поэтому пора подводить итоги года, в котором было немало как хорошего,…

Tue, 31 Dec 2024 11:47:19 GMT

Декабрь подходит к концу, поэтому пора подводить итоги года, в котором было немало как хорошего, так и плохого.

✅ Начнём с хорошего:

🔥 В этом году старался доделать то, что долгое время откладывал:

вычистил небольшой техдолг на работе, который обсуждали несколько лет
написал статью о нашем опыте миграции на Реакт
дописал тулзу для анализа код-ревью и подготовил внутренний доклад
договорился о еженедельных созвонах для фронтендеров, чтобы шарить знания
перевёл блог с Jekyll на Astro

🏡 Съездил с отцом в Москву. Показать ему как она изменилась за последние 20 лет.

🇮🇳 Слетал на недельный тимбилдинг в Индию. В очередной раз понял, что удалёнка — это очень удобно, но когда вы знакомы с людьми лично — ваше общение и взаимопонимание выходит на новый уровень.

✈️ За год этот канал вырос в 4 раза, спасибо, что читаете 🫶

Посетил конференции:

Teamly
Впервые сходил на подлодку и получил бесплатный билет на следующую в феврале 2025
Я 💛 Frontend
Я.Субботник в Москве и Питере

Путешествия:

🇷🇺 Сочи, Москва, Питер, Липецк, Воронеж, Ростов-на-Дону
🇪🇬 Шарм, Каир
🇮🇳 Мумбаи

И ещё немного: 🪚 Наконец-то сделал ремонт на балконе 💪 Начал ходить в зал 🎾 30 тренировок по теннису 🇬🇧 25 уроков английского 🎙️ Дал небольшое интервью 🏃🏼‍♂️ Пробежал ещё один полумарафон 🧑‍🏫 Провел 13 ментор сессий 💻 Чуть не потерять ноут в Каире 🚀 Летел 2 дня из Каира в Мумбаи с 2-мя пересадками 💎 Переехал с Notion на Obsidian 🎭 Сходил на Лебединое Озеро в Москве 🥃 Прошелся по барам в Питере

❌ Не обошлось и без ложки дёгтя:

🕵️‍♂️ Первое написанное заявление в прокуратуру. Оказывается у нас в стране очень просто взять деньги и не возвращать. Достаточно просто не иметь имущества, чтобы с тебя нечего было взять.

🚨 Шокирующие события августа и участившиеся сирены за окном. Нашел фото рабочего места в коридоре.

Самое главное, чему научил 2024 год — ценить то, что у нас есть. То что кажется данностью, очень просто может исчезнуть.

Всех с наступающим новым годом! 🎉 🎄❄️☃️🌨️

#newyear #итогигода

Когда говорят об истории JavaScript часто упоминают, каким незаменимым он был при украшении сайтов…

Mon, 23 Dec 2024 10:02:01 GMT

Когда говорят об истории JavaScript часто упоминают, каким незаменимым он был при украшении сайтов снежинками ❄️ в канун Нового года 🎄.

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

🗣️ Я попросил ChatGPT:

на основе существующего логотипа сгенерировать новогодний
написать код для реализации тех самых снежинок

Я сравнил код ChatGPT с кодом из статьи Доки “Снежинки” от Алёны Батицкой, взял от обоих решений лучшее, и вот что получилось.

✍️ Кратко о реализации:

Берём символы Unicode для снежинок — ❄ ❅ ❆
В разметке создаём нужное количество снежинок — у меня 120
Каждая снежинка состоит из 2-х частей
- контейнер — для анимации падения
- сама снежинка — для анимации поворота
Все снежинки кладём в один контейнер и выставляем ему pointer-events: none, чтобы не мешать взаимодействию со страницей
Контейнеру выставляем flex-direction: row, чтобы равномерно распределить снежинки по экрану
Начальное и конечное положения снежинок находится немного за пределами экрана, чтобы они плавно появлялись и исчезали
Выставляем случайным образом:
- размер снежинок (`font-size`) — от 0.7em до 1.5em
- длительность анимации падения — от 10 до 30 секунд
- задержку анимации — от 1 до 30 секунд
Задержка анимации нужна, чтобы снежинки падали постепенно
Выставляем разные цвета снежинок
Исходники здесь 💾
Демо здесь 🖥️

@cherkashindev

#newyear #blog

Я давно не рекомендовал ничего почитать, но эта короткая статья не оставила меня равнодушным.

Fri, 20 Dec 2024 07:42:01 GMT

Я давно не рекомендовал ничего почитать, но эта короткая статья не оставила меня равнодушным.

“Всего несколько строк CSS для плавных переходов между страницами”

Я много раз слышал, про View Transitions API и о том, что теперь можно настраивать анимации перехода между страницами, но никогда не пробовал.

В статье автор предлагает сделать переходы между страницами плавными с помощью одной строчки кода.

 
@view-transition { navigation: auto; }

Чтобы понять о чём говорит автор просто посмотрите прикреплённое видео:

или откройте оригинал статьи и воспроизведите видео
или же откройте мой блог и попробуйте перейти на одну из последних статей

В SPA приложениях также есть возможность использовать View Transitions API. Можете посмотреть демки в статье: “Введение в View Transitions API”. Анимация реализуется с помощью startViewTransition

 
document.startViewTransition(() => updateTheDOMSomehow());

При использовании View Transitions API происходит следующее:

делается снимок текущего состояния страницы
выполняется обновление DOM (updateTheDOMSomehow)
делается снимок нового состояния страницы
переход между этими состояниями анимируется с помощью дефолтного плавного затухания или с помощью кастомной анимации

Более сложные примеры можно узнать отсюда:

Для блогов на Astro:

Документация View Transitions в доке Astro
Как починить темную и светлую темы после внедрения view transitions — читать тут

#frontend #fridayreading

@cherkashindev

В прошлом году я каким-то образом умудрился написать 6 статей. В этом же с трудом нашел силы на…

Tue, 17 Dec 2024 07:15:34 GMT

В прошлом году я каким-то образом умудрился написать 6 статей. В этом же с трудом нашел силы на одну — Как мы мигрируем с JQuery на React.

Во время миграции мы столкнулись со многими трудностями, поэтому я решил описать наш подход в виде статьи.

Из статьи вы узнаете:

1️⃣ как мы писали код до React 2️⃣ какой подход мы выбрали для миграции 3️⃣ как нам мешали пространства имён тайпскрипта 4️⃣ как конфигурировали webpack 5️⃣ что делать, если нужно использовать легаси код внутри React 6️⃣ как мы писали кастомный генератор типов 7️⃣ почему выбрали Zustand для управления состоянием

Обязательно переходите и читайте. Буду признателен если сделаете репост или проголосуете за статью на Хабре, это поможет её продвижению 🔥. Кто-то поставил минус за обложку статьи, так что спасайте 😄

#article #react #habr

Программа на эти выходные. Попал сразу на оба мероприятия оффлайн 🔥.

Thu, 12 Dec 2024 09:27:28 GMT

Программа на эти выходные. Попал сразу на оба мероприятия оффлайн 🔥.

#conference

Как мы мигрируем с JQuery на React

Tue, 10 Dec 2024 00:00:00 GMT

Вокруг все говорят о серверных компонентах реакта, о серверном рендеринге, и разных новшествах в мире фронтенде. Как будто JQuery в один миг взял и исчез. Несмотря ни на что он всё ещё остаётся самой популярной библиотекой 😅.

В прошлом году мы с женой летали в Стамбул, но запомнил я от силы процентов 10. Фото есть, но…

Thu, 05 Dec 2024 12:57:03 GMT

В прошлом году мы с женой летали в Стамбул, но запомнил я от силы процентов 10. Фото есть, но хочется запомнить и свои ощущения. В этот раз в Египте я стал делать заметки, и вот дошли руки собрать из них что-то читаемое.

Про почти потерянный ноут вы уже читали 😅.

🧳 Подготовка

Отпуск был запланирован на конец сентября. Обычно на море мне становится скучно через пару дней (но не в этот раз!), поэтому я стараюсь выехать на несколько дней в город.

Решили ехать в:

Шарм-эль-Шейх
и Каир

🛩️ План: Москва — Шарм — Каир — Москва

Билеты “Москва — Шарм” на двоих - 100к 😳. Тур туда/обратно — столько же (без отеля). Поэтому мы решили взять тур и отказаться от обратных билетов. Была небольшая надежда, что туроператор вернёт деньги. Этот вариант выгорел пару лет назад в Турции, но тут систему надурить не удалось.

Итог: тур в Шарм, билеты до Каира и Москвы отдельно.

🙏 Ожидания

Я старался не строить завышенных ожиданий от поездки, особенно после того как начитался отзывов интернетных экспертов:

Одни утверждали, что все будут стараться тебя на**ать (и были не далеки от истины)
Вторые говорили, что сервис — отстой, а если не оставлять чаевые — то и “под дверью нагадят”.

🚧 Если кратко

Обслуживание — хорошее, под дверью пусто
Море — пушка, маска для снорклинга — обязательно
Шарм — класс
Манго и еда — шик
Пиво — пойдёт
Вино — ужас
Торговцы — наглые
Для такси — InDrive

🏝️ Шарм

Добрались до отеля мы рано утром. Носильщик донёс чемодан до номера, собрался уходить, но я его остановил и всё-таки дал доллар. Ну на всякий случай.

Немного отдохнув, мы собрали вещи и пошли на пляж. Жена провела мне инструктаж, мол “рыб не трогай, к кораллам не лезь”. Я надел маску и сразу полез в воду.

Открыв глаза под водой, я увидел множество рыб вокруг себя, растерялся и попытался отплыть от них в сторону. Ну и конечно же сразу влупился ногой об коралл. Я вылез на пирс, мне обработали ногу. Через 2 дня она была размером с голову, но об этом в другой раз.

Товарищи говорили мне, что стоит хоть раз съездить на Красное море, и они были правы. Вода — очень солёная, ты совсем не тонешь, просто лежишь на воде, дышишь через трубку и наблюдаешь за подводным миром часами напролёт.

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

В общем, море — лучшее воспоминание, которое у меня осталось.

🚶 Выходим из отеля — такси и продавцы

Вызвали Такси. Цена в приложении — 105 фунтов. По совету интернетных экспертов уточняю цену до поездки, на что таксист говорит, что это копейки и поедет только за 150. Ок, сторговались на 120.

Едем минут 10, и таксист говорит: — Слушай, Мухамед (он) - хороший, машина - хороший, ставь мне 5 звёзд
— Да, конечно, обязательно поставлю (нет) — Ставь, сейчас!

Я немного офигел от наглости, InDrive похоже тоже офигел, заглючил и отрубился.

Доезжаем до Наама Бей. К нам подходит мужчина и говорит, что ещё очень рано и всё закрыто. Мы спросили, где находится аптека и он предложил нас проводить. Слово за слово, и он заводит нас в лавку с маслами. Это — его лавка, он начинает нам показывать сколько у него отзывов, мол купите что-нибудь и идите в аптеку, или хотя бы отзыв оставьте.

Я офигел от наглости 2 раз за 10 минут и игнорил торговцев весь отпуск 😄.

🛬 Вылет в Каир

Мы отлично отдохнули в Шарме и поехали в Аэропорт.

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

Дать на лапу тебя не навязчиво попросят прямо сотрудники аэропорта, которые очень хотят, чтобы ты сэкономил 10 минут фунтов за 300. В остальном — всё как в обычном аэропорте.

На сегодня всё. Шукран, что дочитали 👋. А где вы провели последний отпуск❓

#travelling

@cherkalexander

В прошлом месяце я писал, что постепенно пытаюсь оживить свой блог и переписываю его на Astro.

Mon, 02 Dec 2024 08:01:00 GMT

В прошлом месяце я писал, что постепенно пытаюсь оживить свой блог и переписываю его на Astro.

Обычно я закапываюсь, чтобы довести что-то до конца. Например, если это пост или статья — нужно посмотреть 100500 видео и статей, чтобы во всём разобраться.

В этот раз я подумал, что “Лучшее — враг хорошего.” и решил, что для блога будет достаточно MVP:

Перенёс все статьи
Добавил секцию с проектами
Поправил стили

Далее в планах:

Прикрутить комментарии
Опубликовать CV
Реализовать кнопку Share
Добавить какую-нибудь пасхалку в консоль, куда ж без этого. Есть идеи? 😄

Кстати, если вы переписываете блог, не забудьте убедиться, что ссылки на ваши старые статьи работают. Например, у Jekyll и Astro — разные форматы URL, поэтому чтобы старые ссылки не сломались нужно использовать редиректы:

//astro.config.mjs
 
export default defineConfig({
 redirects: {
  '/old-page': '/new-page'
 }
});

P.S. Если знаете, как прикрутить комментарии и реакции для блога — расскажите в комментариях 👇.

Ссылка на блог

@cherkashindev

#блог #astro

Сейчас темп жизни такой, что на всё не хватает времени. И чтобы сэкономить время на уборке, в…

Thu, 21 Nov 2024 08:39:41 GMT

Сейчас темп жизни такой, что на всё не хватает времени. И чтобы сэкономить время на уборке, в прошлом году я раскошелился и решил заменить свой старый робот-пылесос Xiaomi (который штурмовал каждую неровность) на новый, более современный.

После просмотра кучи обзоров остановился на DreamBot L10s Ultra. Если кратко о его использовании:

чистой воды налил
грязную вылил
мешок для мусора вставил (раз в пол года) а дальше он все сам:
воды наберет
мусор выгрузит
даже тряпки сам помоет и высушит.

В общем, чая навели, пылесос включили и пошли на стендап.

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

О продукте:

Продукт для мониторинга упоминания компаний в соц сетях.
Задача продукта – с помощью AI помочь бизнесу упростить процесс маркетинговых исследований для понимания и управления репутацией своих продуктов.

О позиции:

требуется Senior Frontend разработчик
стек — React, TypeScript, Next.js
опыт разработки интерактивных дашбордов
зарплата ~$5000
удаленка, гибкий график
разные варианты трудоустройства
хороший английский

Полное описание вакансии и как откликнуться — в комментарии к посту, если что-то непонятно пишите в личку @cherkalexander.

#about_me #вакансия

return Promise 🆚 return await Promise

Mon, 18 Nov 2024 07:55:38 GMT

return Promise 🆚 return await Promise

Что будет выведено в консоль?

 
async function test1() {
    console.log('start-1');
    return Promise.resolve();
}
 
async function test2() {
    console.log('start-2');
    return await Promise.resolve();
}
 
test1().then(() => console.log('done-1'));
test2().then(() => console.log('done-2'));
 
console.log('end');

@cherkashindev

#typescript

// @ts-nocheck

Fri, 15 Nov 2024 08:23:01 GMT

// @ts-nocheck

Помню, когда я только начал изучать TypeScript, мне часто попадалась фраза: “TypeScript — это надмножество JavaScript, и любой корректный JavaScript-код является также корректным TypeScript-кодом”. В общем, если надоел JavaScript — меняешь расширение файла с .js на .ts и радуешься жизни (или нет).

Вчера поздним вечером я копался в нашем легаси, некоторому коду лет 10, а то и больше. И я вспомнил, как лет 6 назад менял расширение этих файлов на .ts.

У нас на проекте тогда уже использовался TypeScript, но был и пласт легаси на чистом JavaScript. Я попробовал переименовать их в .ts, и тут весь файл стал огненно красным. Не всё так просто, как говорили эксперты.

Но в версии 3.7 TypeScript появилась директива // @ts-nocheck. Просто добавляешь её в начале файла, и проверка типов отключается, и можно постепенно мигрировать на TS.

Потом переписывать их на TS, конечно же, никто не собирался 😄

#typescript

Я уже года 4 плачу за свой домен cherkashin.dev, где хостится мой мертвый и убогий блог, который я…

Thu, 07 Nov 2024 10:03:01 GMT

Я уже года 4 плачу за свой домен <cherkashin.dev>, где хостится мой мертвый и убогий блог, который я сделал во время ковида, и с тех пор ни разу не трогал. В то время я не слышал про 11ty, а Astro ещё не появился. ChatGPT тоже ещё не было, поэтому — я погуглил, поспрашивал знакомых и взял Jekyll.

GitHub Pages, насколько я помню, неплохо дружат с Jekyll, я взял какой-то простенький шаблон для быстрого старта и опубликовал блог. Но Jekyll написан на Ruby, а это значит, что придётся постоянно сталкиваться с ним для настройки и билда блога, поэтому я быстро забил.

Этим летом я сходил на конфу подлодки и узнал про Astro. Нашёл темплейт и потихоньку мигрирую. На скрине текущее состояние блога.

Кстати, если вы используете Astro и вам нужна аналитика, то @xufostation есть Astro плагин для Яндекс Метрики. У плагина пока мало звезд — поэтому давайте исправим это. Нам не сложно, а автору будет приятно.

https://github.com/ufocoder/astro-yandex-metrika

#блог #astro

@cherkashindev

✉️ Реализация инбокса в Obsidian с помощью Apple Shortcuts

Thu, 31 Oct 2024 09:01:01 GMT

✉️ Реализация инбокса в Obsidian с помощью Apple Shortcuts

Те, кто давно на меня подписан могут помнить, что я рассказывал как настроить Inbox для Notion с помощью Apple Shortcuts (тут и тут).

Если кратко — Apple Shortcuts позволяет делать автоматизации, которые, например, можно запускать нажатием на ярлык. Для Notion автоматизация была простая:

Показывается текстовое поле
Мы вводим свою заметку
Вызывается API Notion и заметка добавляется в базу данных Inbox

Когда я начал мигрировать на Obsidian, всё это конечно перестало работать. Казалось, что придётся делать заметки в Apple Notes а затем ручками переносить всё в Obsidian.

Но после того, как настроил интеграцию Obsidian с GitHub понял, что можно добавлять заметки напрямую в GitHub репозиторий через GitHub API.

И это сработало, пришлось лишь сильно поменять реализацию шортката. Теперь это работает так:

Показывается текстовое поле
Мы вводим текст заметки
Он кодируется в base64, так требует GitHub API
Получаем текущую дату, она будет являться именем заметки
Формируем URL для создания файла в репозитории — https://api.github.com/repos/{owner}/{repo}/contents/{path}
Отправляем запрос, предварительно нужно сгенерировать GitHub Access Token.
При открытии Obsidian сделает pull из репозитория и заметка отобразится в папке Inbox, или можно сделать pull вручную
Готово 🚀

Позже поделюсь ссылкой на готовый шорткат, если кому-то нужно.

#obsidian #nocode #planning

@cherkashindev

Этот самурай незаметно пробрался в квартиру прошлой ночью. К счастью, мы с женой не пострадали,…

Mon, 28 Oct 2024 08:03:01 GMT

Этот самурай незаметно пробрался в квартиру прошлой ночью. К счастью, мы с женой не пострадали, чего нельзя сказать о старом кресле …

#workingplace

@cherkashindev

Выходной в Пятницу

Fri, 18 Oct 2024 16:47:35 GMT

Выходной в Пятницу

Решил приблизить конец недели и взял сегодня выходной, чтобы просто заняться накопившимися бытовыми делами и тупо отдохнуть.

В итоге:

пересмотрел пару серий Игры престолов. Одичалые штурмуют стену, а Тириона Ланнистера хотят казнить.
разобрал (почти) рабочий стол на ноуте
удалил всякого мусора на 40 Гб
съездил на теннис, зная, что мне не нужно мчаться на работу
разобрал чеки и справки, которые лежали пару месяцев в ящике
записался в больницу
выставил ненужный хлам на авито
а ещё нашел #obsidian плагин 🚀, который умеет в мультикурсор, прям как VS Code (CMD/CTRL + D), нужно только настроить горячие клавиши
а теперь пойду ||забью кальян||, пятница же

Жаль, что каждую пятницу так делать не прокатит 😅.

P.S. Ходят слухи, что некоторые компании практикуют 4-х дневную рабочую неделю, вы работали в таких? Или может хотя бы слышали? ||Куда слать резюме? 😄||

UPD: ссылку на плагин добавил

#about_me

@cherkashindev

Отдельная страница для задач в Обсидиан

Wed, 16 Oct 2024 08:00:26 GMT

Отдельная страница для задач в Обсидиан

В 🇯🇵 Notion мне всегда очень нравилось, что каждая запись в базе - это отдельная страница, которая может содержать что угодно - от простых заметок, до вложенных баз или таблиц.

Я использовал Notion, как менеджер задач, и эта возможность была критически важной для меня - работая над сложными задачами, я всегда делаю заметки:

разбиваю на подзадачи
записываю нюансы, на которые я наткнулся
помечаю, какие тесты необходимо написать

Хотя в обсидиан это не поддерживается из коробки, но всё же достаточно легко реализуется:

Для задач использую obsidian-tasks плагин, по сути это просто ToDo лист
Если нужно сделать много записей по задаче или приложить скриншоты - то просто превращаем задачу в ссылку на заметку
Оборачиваем задачу в Wikilink [[]] и нажимаем на неё, заметка с именем задачи создастся автоматически
Заметка создастся в стандартной папке для заметок, папку можно задать в Settings => Files and links => Folder to create new notes in.

#obsidian #notion

@cherkashindev

Пока я Индии поедаю сабудану и досу, мне в Курск пришла книга "Мама, Я тимлид!" от Жени Черкасова.…

Wed, 02 Oct 2024 06:55:46 GMT

Пока я Индии поедаю сабудану и досу, мне в Курск пришла книга “Мама, Я тимлид!” от Жени Черкасова. Я конечно не тимлид, но книжку обязательно прочитаю.

Женя ведёт ламповый и очень уютный канал о личной и командной эффективности. Вот некоторые из моих любимых постов:

А ещё Женя летает на параплане 😱, обязательно посмотрите.

А мне расскажите, читали ли вы книгу и как она вам.

#рекомендую_канал

@cherkashindev

Пока я сижу в Шереметьево и жду свой задерживающийся рейс в Мумбаи, расскажу вам кринжовую историю,…

Thu, 26 Sep 2024 19:08:36 GMT

Пока я сижу в Шереметьево и жду свой задерживающийся рейс в Мумбаи, расскажу вам кринжовую историю, которая произошла со мной сегодня утром в аэропорте Каира.

Я всегда стараюсь приезжать заранее, будь то поезд, автобус или самолёт. На всякий случай, мало ли что может случиться. Всегда всё проходит нормально, а я тупо жду на пол часа-час дольше, чем остальные, но не сегодня …

Обычное утро, заказываем убер и едем в аэропорт, мы жили в районе Гелиополис, поэтому доехали минут за 20. Рассчитываюсь с водителем и идём в аэропорт. Перед металлоискателями говорю жене: “Надеюсь, что мы пройдём всё очень быстро”, и тут ощущаю тревожную лёгкость - рюкзак с ноутом и российским паспортом остался на заднем сидении такси.

Мысленно попрощавшись с ноутом и параллельно убеждая жену, что таксист ещё не успел его кому-то втюхать, пишу в поддержку убера. Чтобы связаться с водителем, я прошу номер телефона сотрудника аэропорта - российский номер не подходит. Спустя 10 минут попыток - связаться с таксистом так и не получилось. А Убер просит сообщить ему, если нам не получится вернуть рюкзак в течение 24 часов. Пока сотрудник аэропорта зовёт полицию - я понимаю, что придётся лететь домой без ноута и прикидываю, где купить новый макбук в Москве перед командировкой.

Спустя 5 минут приходит худощавый египетский полицейский со стволом, который повторяет каждые 10 секунд, чтобы меня успокоить: “Don’t worry, I will help you. It is my job.”. Он мне напомнил брутального копа из американских фильмов. Изучив профиль таксиста, он уходит смотреть по камерам куда скрылся злоумышленник.

Ещё минут через 5 жене приходит в голову шикарная идея - возможно на ноуте работает геолокация. Открываю на айфоне локатор и вижу, что мои наушники и ноут неподалёку от аэропорта, появляется небольшая надежда. Через пару минут, наушники снова оказываются на территории аэропорта - таксист вернулся. Я хочу выбежать на улицу, расцеловать таксиста вручить ему вознаграждение и наконец-то отправиться на регистрацию, но полицейский останавливает меня - нужно соблюсти бюрократические процедуры.

Когда со всем разобрались, завязывается диалог с полицейским (П):

Я: Как вы его нашли? П: Это просто моя работа! “Как твои дела?” - спрашивает он на русском Я: Очень хорошо! “Я бы сказал иначе, но не хочу материться.” - переходим обратно на английский. П: Ты куришь? Может хочешь, что-нибудь выпить? Я: Нет, ещё раз большое спасибо. П: Египтяне хорошие люди, приезжайте к нам снова. Я: Непременно.

Подходим к металлоискателям, где другие “хорошие” египтяне разводят нас на 200 фунтов (400 рублей), но это уже совсем другая история.

P.S. Таксист не говорил по-английски, но он несколько раз повторил “Uber, SMS”. Думаю, убер просто связался с таксистом и тот вернулся назад, а полицейский брутально присвоил всю славу себе. Но мы конечно всё равно ему благодарны.

Расскажите, какие подобные истории происходили с вами? 😅

#about_me #vacation

Кажется, кто-то узнал, что программист приехал на отдых.

Tue, 17 Sep 2024 12:13:05 GMT

Кажется, кто-то узнал, что программист приехал на отдых.

Сначала аэропорт SSH, теперь номер 11101, а дальше что?

Бустани канал, чтобы оставаться в курсе, а то мало ли что …

#vacation

⏭️ Соседние селекторы в CSS

Wed, 11 Sep 2024 08:13:48 GMT

⏭️ Соседние селекторы в CSS

Сегодня утром прилетает баг - у элемента не виден горизонтальный скрол. Случилось это из-за новой фичи - появился новый компонент, из-за чего соседний немного съехал и скрол ушёл за пределы экрана.

Тут я подумал, что в первый раз в жизни смогу использовать “Родственные селекторы” ~, чтобы пофиксить стили если оба элемента отображаются на странице:

 
.new-feature-element ~ .element-with-scroll {
     // тут фиксим стили, они применяются к .element-with-scroll
}

Посмотрел на разметку, понял что .element-with-scroll всегда идёт непосредственно после .new-feature-element поэтому можно поменять на +:

 
.new-feature-element + .element-with-scroll {
     // тут фиксим стили, они применяются к .element-with-scroll
}

Основные различия + и ~:

+ выбирает только один элемент, который непосредственно следует за первым элементом.
~ выбирает все элементы, которые следуют за первым элементом, но не обязательно сразу за ним.

Посмотрел на разметку ещё раз и понял, что элементы видны всегда, а не по условию, поэтому просто пофиксил стили для .element-with-scroll без всяких соседних селекторов, но хоть потренировался.

#css

Notion 👋

Fri, 06 Sep 2024 10:03:55 GMT

Notion 👋

Только ленивый не написал, что 9 сентября Notion прекращает работу для российских пользователей. Пару дней назад и у меня появилась желтая плашка, которая говорит “на выход”. Говорят, пользователи платных подписок точно потеряют доступ. Посмотрим, будет ли работать Notion через VPN для пользователей на бесплатном тарифе или нет.

У меня пока план миграции такой:

Экспортировал все данные из Notion
Импортировал в российские аналоги - Yonote и Teamly, на случай если понадобятся старые заметки в удобно читаемом формате (ну не совсем он удобный)
Обмазываюсь плагинами в Obsidian и пытаюсь разобраться, что лучше “папки или связи”

Теперь кратко про Obsidian:

Настроил интеграцию с гитом, чтобы бэкапить всё на гитхаб
Шаблоны Notion заменил на плагин Templates
Настроил некоторые горячие клавиши, как в VS Code.
Вместо баз данных Notion, установил плагин Projects. Он позволяет отображать данные в виде таблицы или канбан доски, как это было в Notion.
Аналога инлайн баз данных в Obsidian нет, но есть dataview. С помощью SQL подобного языка запросов Dataview Query Language, можно писать запросы ко всем заметкам в базе знаний.
Для миграции заметок из Notion можно использовать плагин Obsidian Importer. Я пока импортировал только, базу с постами для телеграмм. Импортировалось отлично. Нужно делать экспорт в HTML формате, не в Markdown. После импорта, настроил отображение с помощью плагина Projects и получилось примерно как было в Notion. И ощущение, что после этого Obsidian стал иногда подвисать, посмотрим как будет работать дальше.
Создал папку для zero-links - по сути теги в виде страниц имена, которых начинаются с двух нулей, для оптимизации поиска.
Так как инлайн баз данных нет, для ведения задач собираюсь попробовать плагин Obsidian Tasks.

Если вам интересна тема Notion и как с него съехать, то вам на канал Марии. Она активно освещает текущую ситуацию, и альтернативные продукты.

P.S. Расскажите, как вы ведёте базу знаний или список задач. На что мигрируете, если пользовались Notion? Тупит ли Obsidian у вас? 😅

#notion #obsidian

У нас на проекте есть 2 основных правила для написания стилей:

Fri, 23 Aug 2024 10:00:03 GMT

У нас на проекте есть 2 основных правила для написания стилей:

У всех CSS-классов должен быть префикс dp-, выбранный по названию продукта
Мы используем БЭМ — <block>__<element>--<modifier>

Однако есть большой пласт легаси стилей, где эти правила не используются.

И вот, при добавлении monaco-editor’а (текстовый редактор на котором построен VS Code) в новую фичу, прилетело ишью — у горизонтального и вертикального скролл-баров разная толщина.

А вся проблема в том, что наши глобальные стили для класса slider применяются к элементу с таким же классом в monaco-editor.

Именно эту проблему и решают префиксы — позволяют избежать коллизии имён с библиотечными классами.

#css #bem

size-limit

Mon, 19 Aug 2024 10:00:05 GMT

size-limit

Вот здесь я писал про source-map-explorer и о том, как с его помощью анализировать размер бандла. Но, чтобы не приходилось анализировать бандл, лучше предотвратить его раздувание.

Это можно сделать на этапе CI с помощью size-limit.

Как использовать❓

Устанавливаем size-limit и плагин @size-limit/file, необходимый для анализа web-приложений.

npm install --save-dev size-limit @size-limit/file

Добавляем когфиг size-limit в package.json

  "size-limit": [
    {
      "limit": "35 kB",
      "path": "dist/app-*.js",
      "gzip": true
    }
  ],

Добавляем запуск size-limit в скрипт, который вы запускаете на CI

  "scripts": {
    "size": "npm run build && size-limit",
    "test": "vitest && eslint . && npm run size"
  }

Если вы пользуетесь гитхабом, то можете использовать GitHub action, который добавляет в качестве комментария изменение размера бандла.

Также size-limit поддерживает задание временных лимитов на исполнение вашего кода и использует для этого “безголовый хром”.

#frontend #performance #tools #ci

Первый шок от последних событий начал проходить, поэтому вчера я немного разобрал инбокс и нашёл в…

Fri, 16 Aug 2024 09:05:05 GMT

Первый шок от последних событий начал проходить, поэтому вчера я немного разобрал инбокс и нашёл в нём статью, которой решил с вами поделиться “4 тысячи заметок?! Как я веду личную базу знаний в Obsidian”.

Автор рассказывает, как ему надоело забывать важную информацию и он решил завести личную базу знаний в Obsidian, вдохновившись Zettelkasten.

Zettelkasten – это такая система ведения личных заметок, в которой каждая заметка:

Атомарна. То есть независима и содержит одну мысль.
Имеет контекст. Например, размечена по тегам, темам.
Связана с другими знаниями в системе.

Obsidian — это приложение для заметок на максималках. Главное преимущество перед тем же Notion — очень просто добавить новую связь между заметками и легко масштабировать базу (ну и данные все хранятся локально, насколько я помню). Автор использовал видео Виктора Теплова для настройки Obsidian.

Используя подобную систему, достаточно просто писать статьи/тексты, ведь у тебя нет проблемы чистого листа. Ты можешь найти уже сохранённую информацию по одному из тегов, и остаётся лишь сформировать линию повествования.

Также автор описывает, что ведёт дневник в своей базе знаний, это помогает поразмышлять о том, что действительно важно. В жизни человека не происходит то, о чем он не мыслит, поэтому такое ретро очень помогает двигаться в нужном направлении.

Вчера я тоже решил записать, чего полезного я сделал за прошедший день и понял, что кроме работы там ничего нет. Поэтому я соглашусь с автором, порой стоит остановиться и подумать, “туда ли я иду”.

В общем, рекомендую прочитать статью целиком, тем более, что она совсем небольшая.

А расскажите,

чем пользуетесь вы для ведения заметок?
какие подходы и практики используете?

Я пользуюсь Notion. Но вот на днях пришло письмо от Miro, о том, что они “не могут обслуживать клиентов, зарегистрированных в запрещённом регионе” с 12 сентября. И кто сказал, что скоро Notion не пришлёт такое же письмо, возможно стоит начинать искать альтернативы …

#obsidian #fridayreading

Со стороны может показаться, что у нас, у программистов, очень лёгкая работа. Как любит говорить…

Sat, 10 Aug 2024 09:09:54 GMT

Со стороны может показаться, что у нас, у программистов, очень лёгкая работа. Как любит говорить мой тренер по теннису: “мол успешные айтишники сидят где-нибудь в эмиратах, птягивают кофе в кафешках и в ус не дуют”. В чем-то он может и прав, но почему-то не у всех получается “войти в айти”. А те, кто вошел, только и говорят о выгорании.

Года 3 назад я писал, что я делаю, чтобы не перегореть. С тех пор добавилось ещё несколько привычек.

🎾 Я начал играть в большой теннис. Пока бегаешь по корту и чуть ли не выплёвываешь свои лёгкие, совсем забываешь о работе.

🏃‍♂️ С нового года я начал делать зарядку, увидел пост у Евгения Шушкова и тоже решил попробовать. Не уверен, что я чувствую себя намного лучше, но зарядка определённо помогает проснуться. Но что гораздо лучше, она помогает на какие-то 15 минут немного избавиться от тревожности.

Обычно я делаю вот этот комплекс на 15 минут
Или этот на 5 минут, когда лень, но чтобы не потерять привычку

💪 В дополнение к зарядке стараюсь пару раз в неделю подтягиваться или отжиматься. Или же делаю вот этот комплекс на пресс, первые 4 минуты, потом пресс умирает.

📱В мае я отписался от новостных каналов.

К сожалению, очередная попытка перестать читать новости на этой неделе провалилась. Сложно не следить за ними, когда ты живешь в Курске. В теннис тоже не поиграешь из-за постоянной сирены за окном. Поэтому именно сейчас я в полной мере почувствовал пользу зарядки.

P.S.

В такие моменты важно иметь чувство контроля над ситуацией. И оно хоть немного появляется, когда получается помочь тем, кому сейчас тяжело.

Если у вас есть желание помочь людям, кто вынуждено покинул свои дома из-за всей ситуации в Курской области, это можно сделать здесь. Или напишите мне в личку.

Я вообще считаю, программирование это не про “писать код”, это про людей. И мы можем сделать жизнь людей лучше не только написав очередные 1000 строчек кода.

source-map-explorer

Tue, 06 Aug 2024 10:00:04 GMT

source-map-explorer

На прошлой неделе анализировал размер главного бандла мобильной версии нашего приложения.

В спешке мы накосячили с импортами и бандл раздулся.

🤔 Как анализировать?

Для анализа использовал утилиту source-map-explorer.

При запуске, утилита генирирует древовидную карту, с помощью которой можно увидеть, какие именно файлы попадают в бандл.

К сожалению, почему именно это что-то попало в бандл утилита не говорит.

👉 В чём была проблема?

Иногда мы ленимся и в файле компонента кладём какую-нибудь утилитную функцию, enum или константу, а потом где-то в другом месте импортируем их.

Так вот, когда мы их импортируем, то в бандл “засасывает” не только импортируемую функцию, но и весь компонент, из-за чего размер бандла и увеличивается.

P.S. А какими инструментами пользуетесь вы?

#frontend #performance #tools

Как инспектировать разметку попапов

Tue, 30 Jul 2024 10:00:04 GMT

Как инспектировать разметку попапов

Если у вас возникают проблемы с дебагом попапов, которые открываются только по ховеру, то вот несколько простых советов:

Способ 1: Открываете DevTools ⇒ Вкладка Sources ⇒ Далее наводите мышкой на свой элемент ⇒ Нажимаете F8, чтобы приостановить выполнение скрипта

Способ 2: Открываете DevTools ⇒ Находите тег body или тот тег, внутри которого появляется попап и нажимаете на нём правой кнопкой ⇒ Выбираете “Break on ⇒ subtree modification” и дебажите до тех пор пока не появится попап.

Способ 3: Мой любимый. Вставляете скрипт в консоль и у вас есть 3 секунды чтобы показать попап. Именно этим способом пользовался пока не узнал про первый 😄

setTimeout(() => { debugger }, 3000)

#frontend #devtools

Если бы вас спросили, что самое сложное в вашей работе, чтобы вы ответили?

Fri, 26 Jul 2024 10:00:03 GMT

Если бы вас спросили, что самое сложное в вашей работе, чтобы вы ответили? Я думаю одна из самых сложных вещей - читать чужой код, или свой собственный, написанный пару лет назад.

👉 Сегодня статья о том, Как избежать когнитивной перегрузки: способы оптимизации кода для разработчиков.

Вот основные моменты из статьи, если вам лень читать всю статью в пятницу да ещё и летом 😅

Когнитивная нагрузка – это объем умственной работы, необходимый разработчику для выполнения задачи. Нашим приоритетом должно быть максимальное снижение такой нагрузки в проектах.
Типы когнитивной нагрузки:
- Внутренняя — изначальная сложность задачи, её нельзя уменьшить.
- Внешняя — создается способом представления информации. То есть то, как написан код, решающий задачу.
Знакомая и простая вещь — не одно и то же. Они ощущаются одинаково — та же легкость перемещения по пространству без особых умственных усилий, но по совершенно разным причинам. Каждый «умный» и нестандартный прием приведет к трате времени на обучение для остальных разработчиков. После того, как они его освоят, им будет легче работать с кодом. Именно поэтому не так легко понять, как можно упростить уже знакомый код.
Нет никакой «упрощающей силы», влияющей на базу кода, кроме вашего сознательного выбора. Упрощение требует усилий, а люди часто спешат.
Отладка в два раза сложнее написания кода. Следовательно, если вы пишете код максимально хитроумно, вы по определению недостаточно умны, чтобы его отладить.
Лучшие компоненты — это те, которые обеспечивают мощную функциональность при простом интерфейсе.
Лучше большой модуль с простым API, чем много маленьких модулей с раздутым API, которые связаны между собой.
Хорошо продуманный монолит с действительно изолированными модулями часто намного удобнее и гибче, чем набор микросервисов.
DRY (Don’t repeat yourself) — хотя в целом это хорошее и фундаментальное правило, его чрезмерное использование приводит к непосильной когнитивной нагрузке. У DRY есть альтернатива — AHA Programming
- Вы можете слишком рано извлечь общую функциональность, основываясь на предполагаемом сходстве, которого на самом деле в долгосрочной перспективе может не быть. Это может привести к ненужным абстракциям, которые будет непросто модифицировать или расширять.
- «Небольшое копирование лучше, чем небольшая зависимость».

https://habr.com/ru/companies/ncloudtech/articles/818643/

#fridayreading #essential

Как я обычно узнаю о новых фичах в C# ❓

Wed, 17 Jul 2024 10:03:24 GMT

Как я обычно узнаю о новых фичах в C# ❓

О новых фичах в C# я обычно узнаю с помощью подсказок Райдера — IDE для C# от JetBrains.

В общем, обновился, пишу код, и Райдер предлагает что-то исправить там, где раньше все было окей. Думаю — ну ок, давай исправим. Но ощущение, что он перепутал C# c JavaScript.

string[] array = new [] { “a”, “b”, } предлагает заменить на string[] array = ["a", "b"]
Array.Empty<string>() на []
List<string> list = new (vowels) на List<string> list = [.. vowels]

Особенно интересен последний пример, очень уж напоминающий spread оператор из JS. И действительно, в C# его тоже завезли, правда по пути потеряли одну точку и назвали spread element.

 
int[] row0 = [1, 2, 3];
int[] row1 = [4, 5, 6];
int[] row2 = [7, 8, 9];
 
int[] example1 = [..row0, ..row1, ..row2];
List<int> example2 = [..row0, row1[0]];

В общем, в C# 12 поднасыпали синтаксического сахара для работы с коллекциями. А ещё прихватили Primary конструктор из Scala. Это когда конструктор объявляется сразу после имени класса.

 
public class BankAccount(string accountID, string owner)
{
    public string AccountID { get; } = accountID;
    public string Owner { get; } = owner;
 
    public override string ToString() => $"Account ID: {AccountID}, Owner: {Owner}";
}

Подробнее о релизе C# 12 здесь.

А о том, как добавить поддержку спред оператора для кастомных коллекций описывается тут.

#csharp

function(): Promise 🆚 async function(): Promise

Mon, 08 Jul 2024 10:00:03 GMT

function(): Promise 🆚 async function(): Promise

Существует небольшая, но довольно важная разница между функцией, которая просто возвращает промис, и функцией, которая была объявлена с помощью ключевого слова async.

Пример

function fn(obj) {
  const someProp = obj.someProp
  return Promise.resolve(someProp)
}
 
async function asyncFn(obj) {
  const someProp = obj.someProp
  return Promise.resolve(someProp)
}
 
asyncFn().catch(err => console.error('Catched')) // => 'Catched'
fn().catch(err => console.error('Catched')) // => TypeError: Cannot read property 'someProp' of undefined

при объявлении функции с ключевым словом async JavaScript гарантирует, что функция вернёт Promise, даже если в ней произошла ошибка
если функция возвращает Promise, но объявлена без async то catch не поймает ошибку, если в функции произошла ошибка
дело в том, что ошибки произошедшие внутри конструктора new Promise((resolve, reject) => { throw new ... }) промиса ловятся. Когда мы добавляем async, то по сути заворачиваем тело функции в new Promise((resolve, reject) ⇒ { })

То есть, чтобы сделать функции из примера идентичными, нужно завернуть первую функцию в промис.

function fn(obj) {
  return new Promise((resolve, reject) => {
    const someProp = obj.someProp;
    resolve(someProp);
  });
}

https://habr.com/ru/articles/475260/

#javascript #frontend

Сегодня принёс вам одну из лучших статей по код ревью.

Fri, 05 Jul 2024 10:00:05 GMT

Сегодня принёс вам одну из лучших статей по код ревью.

В конце статьи автор упоминает фразу, которая уже давно вертелась у меня на языке, и вот здесь она отлично сформулирована.

💡 “Как это ни парадоксально, наличие постоянно полезных и ценных ревью — это признак того, что вы можете добиться большего на других этапах процесса.”

Исправлять архитектурные проблемы на фазе код ревью — слишком дорого
Люди не должны вручную искать проблемы, которые можно найти автоматически
Одна из целей код ревью — постоянно сужать его рамки, позволяя разработчикам постоянно обнаруживать, что может быть улучшено в других частях процесса разработки
- Документация
- Онбординг
- Линтеры
- Статические анализаторы
- и т.д.

Также ещё одна мысль, которую доносит автор — “код ревью не должно быть одинаковым для всех изменений”.

🐌 Проблемы медленных ревью

Они медленные 🤷‍♂️ — замедляют релиз на несколько часов или дней
Поверхностные — не улучшают качество кода, не происходит обмен знаниями.
Если ревью происходит медленно — разработчики начинают создавать большие пул реквесты, что увеличивает нагрузку на ревьюера и делает код ревью ещё медленнее.

Подходы, которые описываются в статье

Автор долго придерживался принципа Ship / Show / Ask

🚢 Ship. Изменения простые, нет знаний, которыми стоит поделиться — льём в прод без ревью.
🔍 Show. Если изменения простые, но в них есть что-то полезное и ими стоит поделиться (например вы написали новую функцию или компонент), то — сливайте изменения, а потом просите о код ревью. Код ревью — не блокирующий. Я обычно называю это постревью.
❓Ask. Если вы вносите сложные изменения — дождитесь код ревью и только потом сливайте изменения. Тут код ревью блокирующий.

Со временем он его немного перефразировал в Automate / Defer / Pair
🤖 Automate. Если в изменениях нет знаний, которыми стоило бы поделиться, а в коде особо нечего улучшить — пропускаем ревью и полагаемся на линтеры, статические анализаторы и тесты.
↪️ Defer (отложить). В зрелом и проверенном процессе разработки большинство изменений нужно ревьюить, но ревью не должно быть блокирующим. Это особенно хорошо работает, когда новая фича деплоится за фича флагом и можно спокойно получить фидбек после деплоя.
👯 Pair. Если корректность изменений очень важна: их сложно откатить или изменения связаны с оплатой, или же изменения достаточно сложные — то вам нужно работать в паре с ревьюером, созвониться и объяснить ему изменения, чтобы он был в контексте и смог сделать ревью быстрее и качественнее.

#codereview #fridayreading #weekphrase

Generic React-компоненты

Mon, 01 Jul 2024 10:00:03 GMT

Generic React-компоненты

Помню года так 4 назад я писал базовый компонент поиска — стандартное текстовое поле, а когда начинаешь печатать, появляется список найденных элементов.

И тогда я впервые задумался, поддерживает ли React дженерики в связке с TypeScript (а почему бы ему их не поддерживать?).

Каркас компонента выглядит так

export interface SearchBoxProps<T> {
  search: (text: string) => T[] | Promise<T[]>;
  renderItem: (item: T) => React.ReactNode;
  // ...
}
 
export function SearchBox<T>(props: SearchBoxProps<T>) {
  // ...
}

А использование так

<SearchBox
  search={() => [1, 2, 3]}
  renderItem={(item) => <div>{item}</div>}
/>

TypeScript отлично выводит типы, но недавно я узнал, что их можно указать и в JSX. Раньше думал, что будут проблемы из-за угловых скобок < > в дженериках

<SearchBox<number>
  search={() => [1, 2, 3]}
  renderItem={(item) => <div>{item}</div>}
/>

💡 Когда использовать дженерики для реакт-компонентов?

Когда компонент может принимать:

данные разных типов
и рендер-пропсы/слоты, чтобы преобразовать эти данные в UI

Ещё один пример можете посмотреть вот в этом видео

#react #frontend #typescript

Мемоизация селекторов в Zustand

Mon, 17 Jun 2024 10:00:05 GMT

Мемоизация селекторов в Zustand

Если вы используете Zustand, то знаете, что computed значения реализуются с помощью селекторов.

 
const userPrs = useChartsStore((state) => {
    return state.pullRequests.filter(pr => pr.author.id === state.user.id);
});

В примере выше:

при каждом обновлении стейта значение селектора будет вычисляться заново
это приведёт к ре-рендеру компонента, так как каждый раз мы постоянно возвращает новый массив по ссылке, а по-умолчанию используется строгое сравнение (old === new).

Чтобы решить эту проблему в Zustand есть хук useShallow , который сделает “поверхностное” сравнение предыдущего и нового значения. Если они равны — ре-рендер не произойдёт.

 
const userPrs = useChartsStore(useShallow((state) => {
    return state.pullRequests.filter(pr => pr.author.id === state.user.id);
}));

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

Автор Zustand упоминает, что можно нарушить согласованность данных и просто положить вычисляемые данные в стейт (но в этом случае нужно вручную следить за их актуальностью).

Также он отмечает, что для этих целей можно использовать метод memoize из его библиотеки proxy-memoize (для redux есть reselect).

Аналогично immer’у proxy-memoize работает на основе Proxy. memoize запоминает предыдущий параметр функции и свойства к которым обращались в селекторе (для этого и нужен Proxy). При следующем выполнении функции, он проверит изменились ли используемые свойства, если нет — вернёт значение, вычисленное в прошлый раз.

 
const authorSelector = memoize((state) => state.pullRequests.filter(pr => pr.author.id === state.user.id));
 
const userPrs = useChartsStore(authorSelector);

Конечно, нужно помнить, что мемоизировать можно только “чистую” функцию — если она возвращает одни и те же значения в ответ на одни и те же аргументы

Так, обернув пару селекторов в memoize, я ускорил фильтрацию пул-реквестов в более чем 20 раз (900мс ⇒ 40мс).

#react #zustand #statemanagement #frontend

На прошлой неделе проверял почту и наткнулся на рассылку от Я.Практикума “Что нельзя делать…

Fri, 14 Jun 2024 10:02:12 GMT

На прошлой неделе проверял почту и наткнулся на рассылку от Я.Практикума “Что нельзя делать хорошему менеджеру”. Одна из упоминаемых проблем – “Срезание углов” или экономия времени на продумывании ТЗ. Чтобы избежать проблемы понимания требований исполнителем – нужно научиться смотреть на ТЗ глазами новичка. Такое же правило я применяю при написании кода:

Нужно смотреть на код глазами новичка.

Представьте, что вы новый сотрудник и ничего не знаете кроме того, что написано в коде.

Поймёт ли он, что именно происходит в коде?
Почему это реализовано именно так?

peerDependencies

Mon, 10 Jun 2024 10:03:27 GMT

peerDependencies

Недавно делал код ревью и заметил, что в pnpm-lock.yaml (альтернатива yarn.lock в pnpm) добавлена 17-я версия реакта, хотя на проекте мы используем 18-ю. Нам не нужно тянуть в проект 2 версии реакта — поэтому идём разбираться.

Дело в том, что в библиотеке react-cheetah-grid, которую мы используем для рендера длинных таблиц, реакт указан в секции dependencies вместо peerDependencies.

dependencies vs peerDependencies

dependencies: пакеты, которые необходимы для работы вашего приложения и устанавливаются автоматически
peerDependencies: пакеты, которые должны быть уже установлены в среде, где используется ваш пакет, чтобы избежать конфликтов версий

Чтобы быстро исправить проблему — можно переопределить версию реакта для определённого пакета в pnpm с помощью метода readPackage. Также нужно откатить изменения в pnpm-lock.yaml и запустить pnpm install .

 
// .pnpmfile.cjs
 
const package = require('./package.json');
 
function readPackage(pkg, context) {
  if (pkg.name === "react-cheetah-grid") {
    pkg.dependencies['react'] = package.dependencies['react'];
    pkg.dependencies['react-dom'] = package.dependencies['react-dom'];
  }
  
  return pkg;
}
 
module.exports = {
  hooks: {
    readPackage,
  },
};

Но затем лучше создать ишью в репозитории библиотеки или отправить пул реквест.

#react #pnpm

На прошлой неделе на Хабре объявили победителей конкурса «Технотекст 2023». Моя статья, к…

Fri, 07 Jun 2024 09:59:01 GMT

На прошлой неделе на Хабре объявили победителей конкурса «Технотекст 2023». Моя статья, к сожалению, не стала победителем, так что будем пробовать ещё раз в следующем году (или нет).

Если не знаете, что почитать, то здесь можно найти победителей как текущего сезона, так и прошлых лет.

Я пока прочитал только:

VK: Figma to Frontend: как мы автоматически синхронизируем дизайн и код

И планирую прочитать:

#fridayreading #habr

zustand и redux-devtools

Mon, 03 Jun 2024 10:03:46 GMT

zustand и redux-devtools

Я всё ещё пытаюсь доделать свой пет-проект для построения графиков на основе данных из пул реквестов и комментариев.

В качестве стейтменеджера использую zustand. Своих девтулзов у него нет, но разработчики реализовали middleware для отображения данных в redux-devtools.

При использовании zustand’а часто создают много маленьких сторов, поэтому чтобы не оборачивать каждый вызов create в middleware — пишем небольшой утилитный метод createStore:

 
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
 
export const createStore = <T>(fn: Parameters<typeof devtools<T>>[0], name: string) => {
  return create<T>()(devtools(fn, { name, enabled: process.env.NODE_ENV !== 'production' }));
};

Через некоторое время заметил, что при обновлении стейта проседает производительность — показ диалога занимает 2 секунды.

Нашёл 2 проблемы:

1. Стандартная. Весь контент страницы был в одном компоненте, поэтому при обновлении локального стейта перерендеривались все компоненты.

✅ Решение простое — вынес все 20+ графиков в отдельный компонент и обернул его в React.memo.

2. Работает быстрее, но всё ещё есть небольшая задержка. Девтулзы реакта ничего не показывают — запускаю стандартные девтулзы хрома. Вижу, что большую часть времени занимает не обновление стейта, а какой-то левый скрипт. Перехожу в его исходники и вижу там слово “Redux”.

ℹ️ Отключаем redux-devtools и всё работает очень быстро.

❓Всё дело в том, что у меня в сторе хранятся все пулреквесты (4000) и комментарии (5200) за год, из-за такого количества данных redux-devtools подтормаживает.

В общем, проблема не всегда в вашем коде, но это в любом случае — это ваша проблема 😄.

#zustand #react #statemanagement

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

Fri, 31 May 2024 11:53:33 GMT

Уже давно поймал себя на мысли, что стал редко посещать конференции. Поэтому решил всю эту неделю провести на Podlodka React Crew.

👉 Для тех кто ни разу не был — формат следующий:

С понедельника по пятницу: — один доклад утром в 11:00, один вечером в 19:00
Разные форматы: доклады, собесы, круглые столы
Отдельное спасибо организаторам за рандом кофе, это когда вы созваниваетесь со случайны человеком и болтаете о чём вашей душе угодно.

Узнал много нового:

В реакте одни проблемы и лучше переходить на другой фреймвор. Правда но на какой, так никто и не рассказал, так что остаёмся
У Effector’а давние тёрки с Reatom’ом 🔥
При открытии собственного бара — самое сложное договориться с поставщиками
Для создания классных интерактивных презентации можно использовать:
- reveal.js
- shower.js
- sli.dev
- gamma.app
У JQuery вышла бета мажорной 4-ой версии 😅

💡 Ну а если серьёзно, то было много интересных докладов. Вот некоторые заметки, которые сделал за время конференции:

Архитектура программного обеспечения — совокупность важнейших решений об организации программной системы
В стартапе при выборе архитектуры — главное принять поменьше плохих решений.
Если вы что-то не успели отрефакторить — новые разработчики быстро растащат этот код по всему проекту.
Если вы хотите мигрировать на новую технологию, но это не влияет на показатели бизнеса — возможно эта миграция и не нужна.
В императивном подходе мы описываем, откуда что поменять. А в реактивном — откуда что взять.
Function as a child component (FACC) — паттерн схожий с Compound Components.
Astro — движок для блогов.
Скоро в Feature-Sliced Design вот вот появится плагин, для файловой структуры проекта и не только 🔥

Ещё хотел подать заявку на открытый микрофон и рассказать, как мы мигрируем с JQuery на React. Даже накидал 20% доклада, но понял, что подготовиться не успею и вовремя остановился, может в следующий раз 😅.

А вообще атмосфера очень зашла. Я работаю по большей части удалённо, поэтому было приятно почувствовать себя частью сообщества. Организаторам спасибо ♥️

#about_me #conference

Сегодня посоветую одну довольно интересную статью (не зря же она была написана в мой день рождения).

Fri, 24 May 2024 10:03:10 GMT

Сегодня посоветую одну довольно интересную статью (не зря же она была написана в мой день рождения).

Как обхитрить мозг и заставить его полюбить сложные задачи [Дофаминовый детокс]

⛔ Если кратко: перестать баловаться лёгким дофамином.

Наш мозг формирует приоритеты во многом исходя из того, какое количество дофамина он предполагает получить от выполнения какой-либо задачи.Если некая конкретная деятельность высвобождает слишком мало дофамина, у человека будет меньше мотивации заниматься ею.

В современном мире, наполненном цифровыми технологиями, наш мозг ежедневно насыщается неоправданным количеством дофамина, хотя мы об этом даже не подозреваем. Привыкнув к постоянно высокому уровню дофамина, организм будет считать это состояние новой нормой, к которой необходимо стремиться всеми способами (гомеостаз). Сложные задачи приносят меньше дофамина чем покупки на WB, поэтому от них наступает скука и рука так и тянется к телефону.

❓ Напрашивается закономерный вопрос: что делать, если ты уже попал в дофаминовую ловушку?

💡 Ответ прост: проведите дофаминовую детоксикацию.

Выделите день, в течение которого никаких «высокодофаминовых» активностей происходить не будет. Избегайте интернета, любых гаджетов, например, смартфона или компьютера. Ну или постарайтесь лимитировать такие активности.
Вознаграждайте себя «высокодофаминовыми» активностями, после выполнения «скучных» дел. Например, за каждый час работы позвольте себе 10-15 минут «высокодофаминового» отдыха в конце дня.

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

А я пока пробую такие способы:

Отписался от всех новостных каналов (третья попытка за 2 года)
Первый час после пробуждения не беру в руки телефон

Теперь бы ещё пиво пореже пить, но не всё же сразу 🍻)

#fridyareading #burnout

🏗️ Паттерн “Простая фабрика”

Wed, 22 May 2024 10:00:02 GMT

🏗️ Паттерн “Простая фабрика”

Ранее я писал:

Логическое продолжение этой “базы” — паттерн “простая фабрика”. Он является более простой альтернативой для порождающих паттернов:

фабричный метод
абстрактная фабрика

По ощущению, используется гораздо чаще, чем его старшие братья (на нём держится весь полиморфизм 😄).

По сути паттерн представляет собой простой метод, который принимает на вход параметры, и на основе параметров определяет, объект какого типа можно создать.

Выглядит следующим образом:

function createGitService(type: string, host: string, token: string): GitService | null {
  switch (type) {
    case 'Gitlab':
      return new GitlabService(host, token);
    case 'Gitea':
      return new GiteaService(host, token);
    default:
      return null;
  }
}

💡 Что нам это даёт?

Упрощает код, когда нужно избежать прямых зависимостей от конкретных классов;
Позволяет инкапсулировать логику создания объектов, ведь логика может быть сложнее, чем простая передача параметров в конструктор.

Этот же паттерн используется внутри хорошо известного вам document.createElement("div") метода. Мы передаём название тега, а метод создаёт тег нужного нам типа.

Как-нибудь расскажу, как он работает под капотом в Хроме.

#patterns #essential #oop

@cherkashindev

У hitch на хабре вышло небольшое интервью со мной. Рассказал, как я нашёл первую работу и устроился…

Mon, 20 May 2024 10:39:42 GMT

У hitch на хабре вышло небольшое интервью со мной. Рассказал, как я нашёл первую работу и устроился в американскую компанию, без знания английского (Босс, если ты это читаешь — спасибо тебе ❤️).

#about_me #habr

🎉 Шорт-листы "Технотекста 2023" на Хабре

Wed, 15 May 2024 12:47:07 GMT

🎉 Шорт-листы “Технотекста 2023” на Хабре

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

Сегодня хабр опубликовал список финалистов куда попало порядка 300 статей. Если не знаете, что почитать пока гоняются ваши тесты, переходите сюда и выбирайте понравившуюся статью.

В этом году, в финал попала и мою статья Интегрируем Яндекс Музыку в Visual Studio Code, обязательно прочтите, если ещё этого не сделали.

#habr

Сегодня мне 2️⃣8️⃣, примерно как седых волос на моей голове. С недавних пор у нас в компании дают…

Wed, 08 May 2024 11:28:03 GMT

Сегодня мне 2️⃣8️⃣, примерно как седых волос на моей голове. С недавних пор у нас в компании дают выходной на ДР, поэтому сегодня я гуляю по Сочи, пью пока что только кофе, спокойно пишу этот пост и смотрю как работает моя жена 😃.

Можете начинать желать мне счастья, здоровья, а если бустанёте канал или порекомендуете какой-нибудь курс по программированию, то будет вообще замечательно 😉.

Одной из моих целей на год было набрать 1000 подписчиков в этом канале, и вот вчера Виталий Зюзин легким движением руки выполнил мою цель на год. Он создал папку с телеграмм каналами о фронтенде, которая завирусилась и вот нас уже 1300+, обязательно забирайте папку себе и выбирайте каналы, которые вам по душе.

Всем с кем ещё не знакомы — привет, меня зовут Саша 👋, живу в маленьком и уютном Курске. В разработке я примерно 8 лет и почти 7 из них я работаю в американской компании Decisions.

📝 Время от времени пишу на Хабр:

✏️ На канале в основном пишу о своём опыте, а по пятницам рекомендую доклады и статьи #fridayreading. Вот некоторые посты, которые могут быть полезны:

Если у вас будут вопросы или просто хочется поболтать — обязательно пишите 👋.

@cherkashindev

#about_me

🧑‍💻 Giga Code

Mon, 06 May 2024 10:00:02 GMT

🧑‍💻 Giga Code

Месяц назад я отключил Codeium и честно начал тестировал GigaCode (альтернативу Copilot от Сбера). Но похоже придётся переключаться обратно, GigaCode ещё сыроват…

Он, конечно, полезен, и действительно иногда упрощает написание кода, да и вообще круто, что появляются такие отечественные продукты.

Но пока то и дело (ну очень часто) возникает ощущение, что GigaCode путается под ногами, и мешает писать код, а вовсе не помогает (карточка 4):

Он то и дело вставляет ненужные закрывающие скобки и кавычки, которые VS Code уже вставил за меня.
Другая надоедливая ситуация — он не может уследить, что я уже написал часть слова и предлагает вставить её ещё раз.

В общем, пока ждём улучшенной версии …

@cherkashindev

#ai

📖 Cohesion и Coupling: отличия

Fri, 26 Apr 2024 10:00:04 GMT

📖 Cohesion и Coupling: отличия

Сегодня посоветую короткую статью, чтобы наконец-то разобраться что есть что.

🛑 Основные моменты

Нужно стремиться к достижению low coupling (низкой связанности) и high cohesion (высокого сцепления)
Cohesion — степень, в которой часть кодовой базы образует логически единую атомарную единицу — блок.
Coupling — степень взаимосвязи между этими блоками.
Блок здесь необязательно является классом. Это может быть метод, класс, группа классов или даже модуль: понятия cohesion и coupling применимы на разных уровнях.
Высокий cohesion означает хранение связанных друг с другом частей кода в одном месте.
- Например, мы храним код работы с пользователями в одном месте, и это может быть как стандартный MVC контроллер, так и отдельный микросервис.
В то же время низкий coupling заключается в максимально возможном разделении несвязанных частей кодовой базы.
- Например, react и react-dom хранятся в разных пакетах, благодаря чему мы можем использовать react-native вместо react-dom и писать нативные приложения.
В отличие от такого показателя, как цикломатическая сложность, степень cohesion и coupling не может быть измерена напрямую.

ℹ️ Понятие cohesion похоже на Принцип единственной ответственности, который утверждает, что у класса должна быть одна ответственность, что аналогично тому, что делает код с высоким cohesion. Разница здесь в том, что высокий cohesion необязательно означает, что код должен иметь только одну ответственность. Можно сказать, что Принцип единственной ответственности в этом смысле более строгий.

#essential #fridayreading

Несмотря на то, что с балетом у меня натянутые отношения (предыдущие пару раз я еле досидел до…

Wed, 24 Apr 2024 10:00:03 GMT

Несмотря на то, что с балетом у меня натянутые отношения (предыдущие пару раз я еле досидел до конца и грозился, чтобы я ещё раз?!), жена уговорила меня поехать в Москву в Большой театр на Лебединое озеро.

Но я решил, что хорошо должно быть не только ей, но и мне. И я отправился в Москву на день раньше и посетить конференцию Teamly по управлению знаниями.

Если кто-то не знает — Teamly, это 🇷🇺 российский аналог Notion и Confluence. Каждые пол года компания организовывает бесплатную конференцию, где рассказывает о новой версии продукта и о важности управления знаниями в целом. Конференция была на уровне, что в принципе видно по качеству записи трансляции.

ℹ️ Вот некоторые тезисы, из докладов спикеров:

Чем больше компания — тем больше пользы от системы управления знаниями.
Если в вашей компании много департаментов — внедрение можно начать с «департаментов-энтузиастов», которые любят внедрять что-то новое. Так будет легче начать внедрение.
Проект нужно разрабатывать не с конца, а с начала. Например, сначала следует убедиться, что вы можете получить данные для системы, до того как приступить к её разработке. Иначе вы рискуете потратить много времени, денег и сил.
Всем нам сложно делиться своими провалами, поэтому важно в компании выстраивать культуру так, чтобы сотрудники могли безболезненно о них говорить. Тут поможет встреча Fails nights, на которой, например, раз в квартал сотрудники могут рассказать о своих факапах, а остальные бы могли учиться на чужих ошибках. Подробнее в статье Miro.
Если благодаря работе у сотрудников закрываются их потребности, например, они выступают на внутренних митапах или делятся знаниями, то они более лояльны компании и не захотят уходить к конкурентам.
В Teamly можно реализовать поиск сотрудника по компетенциям. У каждого сотрудника есть личная страница, на ней указываются навыки, а система позволяет искать по этим навыкам. Например, если вам нужен эксперт по Google Sheets и MongoDB, то вы можете легко его найти. Основное преимущество в том, что вся информация хранится в одном месте. Буквально на прошлой неделе в нашей компании решили составить подобный список в Google Sheets, и я уверен, со временем он потеряется и никто его не найдёт.

🔥 Отдельного внимания заслуживает Гарретт Джонстон, его выступление рекомендую посмотреть полностью. Оно может показаться своеобразным, но внимания точно заслуживает.

Основной тезис его выступления: чтобы бизнес был более успешным, нужно перейти от клиентоориентированного подхода, к клиентоцентричному.

🔍 Например, рыболовный магазин с продавцами знающими своё дело и качественными удочками и снастями — клиентоориентированный бизнес. А если сюда добавить — индивидуальный подбор снастей, выбор локации для рыбной ловли и обучение рыболовству — то бизнес станет клиентоцентричным. Иными словами такой бизнес будет создавать рыболовов, что будет приносить ему больше денег.

P.S. От балета удовольствия я особо не получил, а обзор новых функций Teamly вы можете посмотреть здесь.

#conference #teamly

Вот вам наглядное представление как выглядит закомментированный код - как этот "закомментированный"…

Fri, 19 Apr 2024 08:19:54 GMT

Вот вам наглядное представление как выглядит закомментированный код - как этот “закомментированный” дорожный знак 😁.

Ну и вдогонку анекдот от ChatGPT в стиле советских анекдотов:

— Товарищи программисты, почему закомментированный код всегда остаётся закомментированным? — Потому что он как легендарная пятилетка - всегда в планах, но никогда не реализуется!

#meme

🗨️ Скорость отдельно взятого разработчика важна, но она не так важна, как скорость всей команды.

Wed, 17 Apr 2024 08:03:23 GMT

🗨️ Скорость отдельно взятого разработчика важна, но она не так важна, как скорость всей команды.

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

https://google.github.io/eng-practices/review/reviewer/speed.html

#codereview #weekphrase

Полиморфизм

Mon, 15 Apr 2024 09:00:07 GMT

Полиморфизм

Полиморфизм в программировании — это способность объектов принимать множество форм. Это означает, что один и тот же код может работать с разными типами данных.

Пример 1️⃣

Допустим, мы пишем графический редактор, и нам нужно добавить возможность экспортировать элементы в svg формате (как в excalidraw.com). Напишем метод, который экспортирует массив выделенных элементов в SVG:

interface ISvgItem {
  toSvg(): string;
}
 
function exportToSvg(items: ISvgItem[]) {
 return `<svg>${items.map(svg => svg.toSvg()).join('')}</svg>`;
}

В данном случае, тот самый объект, который можем принимать множество форм — параметр `items`, так как в этом массиве могут находиться элементы разных типов. Единственное условие — все они должны реализовывать интерфейс ISvgItem.

Реализуем парочку таких типов: круг и квадрат.

class Square implements ISvgItem {
    constructor(public side: number, public x: number, public y: number) {
    }
    toSvg(): string {
     return `<rect 
         x="${this.x}" 
         y="${this.y}" 
         width="${this.side}" 
         height="${this.side}" 
      />`;
    }
}
 
class Circle implements ISvgItem {
    constructor(public radius: number, public x: number, public y: number) { }
 
    toSvg(): string {
        return `<circle x="${this.x}" y="${this.y}" r="${this.radius}" />`;
    }
}

Наш метод exportToSvg может работать с экземплярами обоих классов:

exportToSvg([
 new Square(40, 10, 10),
  new Circle(25, 10, 15),
])

В этом примере, когда код работает с объектами, он не знает точно, какой объект будет передан в качестве параметра. Но он точно знает, что у объекта будет метод toSvg(), это и есть полиморфизм.

Пример 2️⃣

Ваше приложение может работать как с PostgreSQL, так и с MSSQL, всё зависит от конфигурации, которую задал пользователь.

В таком случае мы выделяем абстракцию (абстрактный класс или интерфейс) DataBaseConnection, и всё приложение работает именно с этой абстракцией, а не с конкретной реализацией.

В таком случае создаваться DataBaseConnection скорее всего будет с помощью паттерна “фабрика”, но об этом как-нибудь в другой раз.

📌 Я бы сказал, что полиморфизм — это логическое продолжение абстракции, без которого невозможно было бы реализовать большинство паттернов проектирования.

#essential #oop

Время ожидания — это «процент занятого времени», разделённый на «процент свободного»

Thu, 11 Apr 2024 08:04:05 GMT

Время ожидания — это «процент занятого времени», разделённый на «процент свободного»

Это фраза из книги Проект «Феникс»”

📖 Вот небольшой отрывок:

Время ожидания — это «процент занятого времени», разделённый на «процент свободного».

Другими словами, если ресурс загружен на пятьдесят процентов, то он на пятьдесят процентов свободен. Время ожидания равняется пятидесяти процентам, разделённым на пятьдесят процентов, то есть единица времени. Назовём её, например, один час.

Итак, в среднем наше задание будет стоять в очереди один час, прежде чем будет выполнено. С другой стороны, если какой-то ресурс на девяносто процентов загружен, время ожидания равняется девяноста процентам, разделённым на десять процентов, то есть 9 часам.

Другими словами, наше задание будет ждать в очереди в девять раз дольше чем в том случае, когда ресурс свободен на пятьдесят процентов.

В случае с заданием для «Феникса», у нас есть семь инстанций, в каждой из которых сотрудники заняты на девяносто процентов. В таком случае наше задание будет ждать в очереди перед каждым из семи шагов по девять часов…

🙀 Шестьдесят три часа — только время ожидания в очереди.

👆Из этого графика следует, что всем нужно свободное время, время «холостого хода».

⚠️ Если все в команде заняты высокоприоритетными делами и не имеют ни секунды свободного времени, то общее время разработки увеличивается:

не будет времени помочь коллеге
некогда будет сделать код ревью
на документацию тоже не будет времени

всё это увеличивает время разработки. А помимо этого, всегда возникает «незапланированная работа» в виде багов и хот фиксов.

#weekphrase #planning

XOR — исключающее или

Mon, 08 Apr 2024 10:00:02 GMT

XOR — исключающее или

Пару раз в год в нашем C# коде я встречаю оператор ^ и впадаю в ступор 🤦‍♂️. Через минуту другую я вспоминаю, что оператор называется “исключающее или” или XOR. Потом, проходит ещё пара минут (на самом деле больше) и я вспоминаю, как он работает и для чего применяется. Поэтому сегодня я решил написать пост, чтобы ~~моим преподавателям не было стыдно~~ запомнить этот оператор раз и навсегда.

1️⃣ Как работаете XOR?

Тут всё просто XOR - это сравнение, если A и B равны, то получаем 0, если разные 1


| A | B | A XOR B |
|---|---|---------|
| 0 | 0 |    0    |
| 0 | 1 |    1    |
| 1 | 0 |    1    |
| 1 | 1 |    0    |

2️⃣ Перечисления — Битовые флаги

Каждое значение, представляет собой степень двойки (один бит), что помогает удобно хранить и передавать несколько значений.

 
[Flags]
enum Permissions
{
    None = 0,                    // 000
    Read = 1,                    // 001
    Write = 2,                   // 010
    Execute = 4                  // 100
    All = Read | Write | Execute // 111 
}

3️⃣ Применение XOR с битовыми флагами:

Оператор XOR часто используется для добавления и удаления определенных битовых флагов.

 
Permissions myPermissions = Permissions.Read | Permissions.Execute;
 
// Добавление прав на запись
myPermissions ^= Permissions.Write;   // 101 ^ 010 = 111
 
// Удаление прав на выполнение
myPermissions ^= Permissions.Execute; // 111 ^ 100 = 011

#essential #csharp

@cherkashindev

Сегодня я вам принёс важную статью “Решение, которое нужно принять, чтобы не жалеть о жизни через…

Fri, 05 Apr 2024 10:00:02 GMT

Сегодня я вам принёс важную статью “Решение, которое нужно принять, чтобы не жалеть о жизни через 30 лет”. Важная — потому что она не о программировании, а о нашей с вами жизни в целом. В статье рассказывается как стоит жить сейчас, чтобы на смертном одре не пожалеть о прожитом.

⚠️ Главная проблема, о которой говорит автор, заключается в том, что мы гонимся за краткосрочными успехами, которые дают быстрый результат, что позволяет нам почувствовать собственную значимость. В погоне за этим “лёгким дофамином” мы забываем думать о будущем и строить планы, чтобы добиться того, чего мы действительно хотим. Так мы отдаляемся от того, о чём действительно мечтаем.

ℹ️ За примерами далеко ходить не нужно:

Люди не хотят быть одиноки, но уделяют работе всё своё время, забывая о семье, из-за чего семьи разваливаются
Не хотят умирать “преждевременно” — но выбирают пиво с чипсами, вместо ЗОЖ
Не хотят быть безработными или бедными — но смотрят очередную серию сериала, вместо обучения
Не хотят быть глупыми — но не уделяют времени чтению
Не планируют жить в постоянном нервном напряжении — но игры и отдых кажутся пустой тратой времени

✅ Чтобы перестать думать в краткосрочной перспективе и научиться видеть долгосрочную нужно понять ключевой принцип “перспективных занятий”. Перспективные занятия — занятия, которые окупаются в долгосрочной перспективе, но не всегда в краткосрочной.

🧠 Автор статьи советует уделять 10 часов в неделю “перспективным занятиям”. Однако это не так-то просто, ведь чтобы увидеть результаты, потребуется много времени и возможно даже не один год. Лучший способ найти время для перспективных занятий — сделать выделяемые им часы неприкосновенными и ввести их в привычку.

#fridayreading

@cherkashindev

🗣 Фраза недели — “Да надо”

Mon, 01 Apr 2024 08:00:04 GMT

🗣 Фраза недели — “Да надо”

В честь первого апреля расскажу вам одну историю.

📖 Несколько лет назад во время пандемии скучными вечерами, покуривая кальян, я читал книгу “Программист Прагматик”. Обсуждать всю книгу я конечно же не буду, остановлюсь лишь на одной теме, которая задела меня за живое. Автор описывал, что лишь одна фраза может внести полнейший хаос в работу и взаимопонимание коллектива — фраза “мы должны” также известная как “нам надо”.

Простой пример: на очередном митинге кто-то невзначай произносит “мы должны что-то сделать, чтобы эта страница загружалась за 2 секунды”. После этого митинг продолжается, затем заканчивается, но вам всё ещё непонятно, а кто мы? Кто именно должен это сделать?

ℹ️ Вот чтобы такого не было, нужно использовать более конкретные и четкие формулировки, которые ясно указывают на ответственность за выполнение задачи. Например, вместо того чтобы говорить “мы должны ускорить загрузку страницы”, лучше сказать “Черкашин, тебе нужно ускорить загрузки страницы в следующем спринте”.

👨 Не думаю, что мой батя читал эту книгу тайком, пока я кодил, но он сумел превратить недостатки фразы “нам надо” в достоинства. Родители живут в частном доме, и каждый год моя мама говорит отцу “Ваня, отделай крыльцо плиткой”, а он говорит “Да надо” (что означает, делать этого я конечно же не буду), и так уже года 4. Верх дипломатии, вроде и не отказался, но ответственность размыл, сроки тоже туманные.

Я как истинный сын своего отца, теперь всегда поддерживаю своего тимлида. Если он говорит “Нам нужно …” или “Мы должны”, я отвечаю ему “Да, надо”, в итоге никто этими предложениями не занимается 😄. Это стало своего рода мемом в команде.

👉 В общем, будьте конкретны в своих предложениях. И ставьте лайки для бати — если пост наберёт 20 лайков батя сделает крыльцо в этом году (но это не точно).

#weekphrase #meme

Небольшой список чат ботов, которыми время от времени пользуюсь

Fri, 29 Mar 2024 07:07:03 GMT

Небольшой список чат ботов, которыми время от времени пользуюсь

https://chat.openai.com/ — представления не требует
https://www.phind.com/ — о phind писал здесь
https://gemini.google.com/app - AI чат бот от гугла, работает только через VPN
https://ya.ru/alisa_davay_pridumaem — чат бот от Яндекса
https://300.ya.ru/ — краткий пересказ, статей и видео от Яндекса
https://t.me/gigachat_bot — чат бот от Сбера

В Сбере заморочились и реализовали расширение по типу Codeium (о нём писал здесь) для VS Code и IDE от JetBrains. Скорее всего это связано с запуском ими аналога Github — Gitverse, и альтернативы Copilot — Gigacode. Инструкция по установке здесь.

А какими AI ботами или другими сервисами пользуетесь вы?

#ai

#рекомендую_канал

Thu, 28 Mar 2024 07:28:28 GMT

#рекомендую_канал

Сегодня решил начать делиться каналами, которые читаю сам, возможно когда-нибудь даже опубликую ссылку на папку с каналами 🤔 , но это не сегодня …

Возможно вы уже знаете Даниэля по его сообществу Фронт.ру, он достаточно молод, и уже успел поработать фронтендером в Сбере и Яндекс Поиске. Даниэль пишет интересно и не только о коде, но и о том как работается в самой компании. Возможно, как-нибудь и я решусь написать пару постов о своей работе 😄.

В этих постах можете познакомиться с тем как проходят первые дни в Яндексе:

Кстати, сегодня ровно год блогу Даниэля а завтра, год как он работает в Яндексе, поэтому давайте поздравим его подпиской на его канал 🎂.

@cherkashindev

Максимальная длина строки в V8

Mon, 25 Mar 2024 07:02:31 GMT

Максимальная длина строки в V8

У меня есть небольшой пет проект, для построения различных графиков для пул реквестов, которые показывают кто кому оставляет комментарии, ставит аппрувы и прочее. Бэкенда там нет, фронт ходит в Gitlab или Gitea, выкачивает информацию за указанный период времени и рисует графики.

Чтобы не гонят лишний раз данные, я добавил возможность импорта/экспорта. Вроде всё хорошо, но вчера я решил выгрузить данные за 4 года и при экспорте словил ошибку:


JSON.stringify Uncaught RangeError: Invalid string length

Немного погуглив, нашёл, что длина строки в V8:

268.4 мегабайт на 32-битных платформах
538.8 мегабайт на 64-битных платформах (на М1 похоже такая же)

✅ Решил проблему просто: при экспорте разбиваю мой большой массив, на несколько частей и экспортирую несколько файлов.

Аналогично не получится считать файл как текст, получите просто пустую строку. readAsArrayBuffer работает, но попробуй понять как байты преобразовать в строки меньших размеров, да так, чтобы получить валидные JSON объекты.

 
const reader = new FileReader();
reader.onload = function () {
 console.log(reader.result); // result будет пустой строкой
}
reader.readAsText(file);

В Firefox такой проблемы нет, всё работает.

#browser #frontend

⚛️ React 19 — useOptimistic

Mon, 18 Mar 2024 07:52:03 GMT

⚛️ React 19 — useOptimistic

useOptimistic — новый хук, который позволяет отобразить “оптимистичное” состояние. Оно называется “оптимистичным”, потому что мы “оптимистично” надеемся, что наш запрос не свалится с ошибкой и после выполнения запроса состояние будет выглядеть именно так.

❓Как используется

В useOptimistic передаётся реальное состояние (cart) и функцию-reducer, для обновления оптимистичного состояния
Компонент (Cart) использует “оптимистичное” состояние (optimisticCart) для рендера
Перед выполнением запроса обновляется “оптимистичное” состояние
Когда запрос завершился, нужно обновить реальное состояние
Как только реальное состояние обновилось, оптимистичное состояние обновится автоматически, так как оно передано в useOptimistic первым параметром. ⚠️ Поэтому важно следить, чтобы приходило одно и то же состояние.
Если запрос упал с ошибкой, нужно откатить изменения в оптимистичном состоянии.

ℹ️ Первый вопрос, которым я задался, а в чём отличие от обычного setState, путём экспериментов, вот что удалось найти:

useOptimistic работает с формами. Работать с обычной кнопкой в Single Page Application мне не удалось, обновление происходило только после завершения запроса
useOptimistic работает только внутри асинхронного обработчика, что логично. Если убрать async/await, обновление произойдёт только после завершения запроса
Параметр в useState используется только для инициализации, и игнорируется в последующих рендерах. useOptimistic будет сихронизироваться со значением переданным первым параметром.

🤷‍♂️ Очень мало полезного удалось найти о useOptimistic. Во всех статьях и видео тривиальные примеры, нигде не рассказывается как обрабатывать более сложные ситуации:

Как обновлять оптимистичное состояние, если запустить несколько запросов одновременно?
Как использовать useOptimistic в SPA вне форм?

Поэтому пришлось создать пару ишью: раз и два. В любом случае, пока useOptimistic выглядит каким-то низкоуровневым API. Надеюсь скоро появится больше Best Practices по его применению. Если вам есть что добавить — пишите в комментах.

Ещё по теме:

#react #frontend #new

⚛️ React 19 — use(Promise)

Wed, 13 Mar 2024 07:24:18 GMT

⚛️ React 19 — use(Promise)

use — новый хук, который позволяет считывать данные из промиса и при этом интегрирован с Suspense и ErrorBoundary.

ℹ️ Основные моменты:

На этот хук не распространяются правила хуков — его можно использовать внутри циклов и условных операторов.
Если мы используем хук use(Promise), то где-то в родительском компоненте мы должны положить сам промис (не данные как мы делали раньше) в стейт (useState). Это позволяет избавиться от useEffect’а, который был нужен, чтобы запросить данные при первом рендере.
Хук интегрирован с Suspense, поэтому пока промис не разрезолвится — будет показан fallback объявленный в ближайшем Suspense.
Если промис зареджектился, то будет показан fallback объявленный в ближайшем ErrorBoundary
Песочница тут
Официальная документация тут

#frontend #react #new

⚙️ .editorconfig

Wed, 06 Mar 2024 09:39:43 GMT

⚙️ .editorconfig

Вопрос от менти: У меня проблемы с кодировкой. В гитхабе вижу битые символы вместо русских букв. Почему и как исправить?

Ответ: Скорее всего редактор создаёт файлы в кодировке типа “Cyrillic (Windows 1251)”. Чтобы это исправить, нужно пересохранить существующие файлы в кодировке UTF-8.

А, чтобы новые файлы создавались с правильной кодировкой, в корне проекта нужно создать файл .editorconfig и указать что все файлы ([*]) должны иметь кодировку utf-8 (charset = utf-8).

[*]
charset = utf-8

Этот файл поддерживается большинством популярных редакторов кода, поэтому в дальнейшем, когда ты будешь работать в команде, он поможет поддерживать консистентные стили кода.

В нём же можно настроить отступы, размер табов и прочее. Подробнее здесь.

#mentee_question #essential

👨‍💻 Phind

Mon, 04 Mar 2024 07:56:55 GMT

👨‍💻 Phind

В комментариях к прошлому посту о Codeium мне порекомендовали попробовать Phind.

До расширения для VS Code руки ещё не дошли, а вот онлайн версией пользуюсь достаточно регулярно. Очень удобно учитывая, что он бесплатный, генерирует неплохие ответы и не нужно постоянно включать VPN, если вы находитесь в России.

Вначале не мог запомнить название, но потом понял, что phind — это find через ph и всё стало на свои места.

У Phind есть 2 режима:

1️⃣ Чат — стандартный чат, аналогичный ChatGPT

2️⃣ Поиск — phind сгенерирует ответ и покажет ссылки на использованные источники в интернете.

Также позволяет запустить сгенерированный код в Replit.

#ai

Наконец-то попаду на "Я 💛 Фронтенд" в оффлайне. Трансляция тоже будет.

Sun, 03 Mar 2024 14:42:42 GMT

Наконец-то попаду на “Я 💛 Фронтенд” в оффлайне. Трансляция тоже будет.

https://events.yandex.ru/events/ya-love-frontend-2024

#conference

🆙 Кнопки в базах данных Notion

Tue, 27 Feb 2024 08:01:00 GMT

🆙 Кнопки в базах данных Notion

Когда-то давно я писал, как автоматически заполнять Completed Date поле в Notion.

С тех пор много воды утекло, и кажется об использовании Github Actions для этих целей можно забыть.

В Notion уже давно есть кнопки, наконец-то они появились и в базах данных.

Ещё пример

#notion #automation

☁️ Облако слов

Mon, 26 Feb 2024 10:00:03 GMT

☁️ Облако слов

Ради интереса решил построить облако слов на основе комментариев в пул реквестах.

Нашёл пару подходящих библиотек:

react-tagcloud — нет типов для тайпскрипта, и облако само по себе выглядит не очень красиво
react-wordcloud — типы есть, облако выглядит неплохо, использовать легко

<ReactWordcloud
  size={[1000, 500]}
  words={data}
  maxWords={350}
  options={{ fontSizes: [10, 120] }}
  callbacks={{
    onWordClick: (e) => {
      onClick(e.text);
    },
  }}
/>

#library #react

Уровни абстракции

Mon, 19 Feb 2024 10:00:01 GMT

Уровни абстракции

Уровни абстракции — одна из самых важных и одновременно самых сложных концепций, понимание которой ведёт к написанию качественного кода.

Методы и функции — один из самых простых примеров, на основе которых можно рассмотреть концепцию уровней абстракции.

ℹ️ Когда мы описываем функцию, то все методы, которые мы вызываем внутри должны находиться на один уровень абстракции ниже. В конце концов, функции пишутся прежде всего для разложения более крупной концепции (иначе говоря, имени функции) на последовательность действий на следующем уровне абстракции.

Как понять, что метод написан на разных уровнях абстракции❓

Когда мы смешиваем уровни абстракции, то функция обрастает большим количеством второстепенных подробностей — деталями с более низкого уровня абстракции
Если читать код функции, вы найдёте одновременно действия, которые будут отвечать на вопросы “что?” и “как?”:
- “что?” — более высокий уровень абстракции, тут функция описывает, что мы делаем.
- “как?” — тут будет описано, “как” мы что-то делаем, а чтобы понять что именно, нужно будет напрячь извилины и подумать. И если мы заменим это “как” на функцию, имя которой будет отвечать на вопрос “что”, то всё станет на свои места и будет на одном уровне абстракции.

⚠️ Не окрепшим умам главное понять, что метод написанный на “одном уровне абстракции” это то, к чему нужно стремиться, но главное не переусердствовать, ведь не всегда так просто провести грань между уровнями абстракции.

Но методами это все конечно не ограничивается. Классы тоже могут быть на разных уровнях абстракции, они могут раскладываться по разным библиотекам, и тогда эти библиотеки взаимодействуют между собой только посредством публичного API. Но подробнее об этом как-нибудь в другой раз.

Пример на прикреплённой картинке взял отсюда, возможно не самый лучший, но суть должно быть понятна.

Пример от Дядюшки Боба найдёте в комментариях, из него должно стать понятней, что имелось ввиду при описании “что?” и “как?”

#architecture #cleancode #abstraction

Яндекс.Музыка уже давно поменяла логотип, поэтому пришло время обновить его и в расширении для VS…

Sun, 18 Feb 2024 13:37:48 GMT

Яндекс.Музыка уже давно поменяла логотип, поэтому пришло время обновить его и в расширении для VS Code.

P.S. За иконки спасибо автору Мастерской Программиста 👍

🔮 Абстракция

Fri, 16 Feb 2024 10:00:01 GMT

🔮 Абстракция

Когда говорят про ООП, часто забывают о двух вещах:

Это не только инкапсуляция, наследование и полиморфизм, но ещё и абстракция
Инкапсуляция, наследование и полиморфизм не прибиты гвоздями к ООП, особенно инкапсуляция и полиморфизм. Но об этом не сегодня.

Сегодня советую к просмотру видео: Абстракция, уровни абстракции.

ℹ️ Основные моменты:

Абстракция — отвлечение от несущественных сторон, свойств, связей объекта с целью выделения их существенных, закономерных признаков. Иными словами, мы выделяем существенные свойства для нашей конкретной задачи, и не обращаем на несущественные.
Абстрация = Интерфейс + Инкапсуляция
Интерфейс — выделяет существенное
Инкапсуляция — скрывает несущественное
Абстрагирование нужно для управления сложностью кода, чтобы всё было надёжно, эффективно, расширяемо и поддерживаемо.

💡 Например, у нас есть квадрат, и для разных задач, нам важны его различные свойства.

Если нам важно вычислять его площадь и периметр, то мы говорим, что квадрат — это геометрическая фигура (абстрагируемся). Иначе говоря квадрат реализует интерфейс IGeometricShape.
Если нам важно, чтобы квадрат мог быть сохранён в файл, то мы говорим, что квадрат — сериализуемый, например, в JSON объект, который затем можно записать в файл. Иначе говоря квадрат реализует интерфейс ISerializable.
Аналогично, если нам важно уметь рисовать квадрат на экране, он должен реализовывать интерфейс IDrawable.
Ну и где-то у нас есть методы, которые работают с абстракциями IGeometricShape, ISerializable и IDrawable. Таким образом методы абстрагированы от конкретных реализаций, что увеличивает переиспользуемость кода.

Ну и немного от себя, абстракция — фундаментальное понятие.

Без абстракции не будет полиморфизма
Без полиморфизма не будет Dependency Injection (Внедрение зависимостей)

#fridayreading #essential #oop

🚀 React — Compound Components

Mon, 12 Feb 2024 10:00:04 GMT

🚀 React — Compound Components

Как-то я уже упоминал паттерн Compound Components (Составные компоненты) для React, теперь остановимся на нём немного подробнее.

ℹ️ Compound components — это подход позволяет объединить несколько компонентов в единую сущность, которая неявно имеет общее состояние. Эти компоненты тесно взаимодействуют друг с другом и работают как единое целое, представляя собой полноценный UI компонент.

🔍 Основные характеристики:

Используется React контекст, чтобы управлять состоянием
Должен быть главный компонент, в котором хранится состояние и объявляется React контекст
Все дочерние компоненты используют состояние через React контекст

ℹ️ Он состоит из 2 простых подходов React:

Композиция компонентов
Паттерн “Провайдер” — использование контекста React ** 📝 Вначале рассмотрим подх**оды по отдельности

1️⃣ Что такое композиция?

Вместо вот этого

<Tile count={money} title="Стоимость" icon={<MoneyIcon/>}/>

Мы пишем вот так

<Tile>
  <Title>{title}</Title>
  <Number>{count}</Number>
  <Icon>{icon}</Icon>
</Tile>

Когда это может понадобиться? Например, когда у нас креативный дизайнер и нам нужно угодить ему:

В одном месте, показывать карточку без иконки
В другом, показывать карточку, где цифра то посередине, то слева, то справа, то на луне
В третьем, нам нужно добавить иконку, чтобы при наведении показывалось описание

В итоге, мы можем легко модифицировать любую часть компонента, и по-разному их комбинировать.**

2️⃣ Паттерн “Провайде**р”

Здесь идёт речь об обычном использовании контекста реакта, чтобы передавать какие-то данные на любую глубину дерева компонентов, минуя дочерние компоненты.

🔄 Если объединить два этих подхода, то сможем реализовать паттерн Compound Components. Как пример, можно использовать компонент табов из библиотеки material-ui.

function MyTabs() {
    return (
   <TabContext value={value}>
       <TabList onChange={handleChange}>
         <Tab label="Item One" value="1" />
         <Tab label="Item Two" value="2" />
         <Tab label="Item Three" value="3" />
       </TabList>Ï
     <TabPanel value="1">Item One</TabPanel>
     <TabPanel value="2">Item Two</TabPanel>
     <TabPanel value="3">Item Three</TabPanel>
   </TabContext>
    );
}

TabContext — главный компонент, в котором хранится состояние и объявляется React контекст
Tab и TabPanel получают текущее значение активного таба неявно через React контекст. Явно значение не передаётся в каждый компонент.
onChange объявлен только на компоненте TabList, компоненты Tab неявно получают его из контекста.

Ещё по теме:

#react #frontend #architecture #patterns

Сегодня увидел, что Хабр советует прочитать мою старую статью с советами о выгорании, поэтому я…

Fri, 02 Feb 2024 15:21:23 GMT

Сегодня увидел, что Хабр советует прочитать мою старую статью с советами о выгорании, поэтому я решил напомнить о ней. Как раз подходит, чтобы отвлечься от работы, расслабиться и почитать вечером в пятницу.

https://habr.com/ru/post/598517/

#fridayreading #burnout

Явное управление ресурсами в TypeScript — using

Mon, 29 Jan 2024 10:00:05 GMT

Явное управление ресурсами в TypeScript[** — using**

Недавно,](https://t.me/cherkashindev/160) когда я рассказывал, как мы пишем тесты, я уже упоминал, что в TypeScript’е появилось новое ключевое слово using. Оно позволяет нам сделать код чище и более линейным, избавившись от try/finally.

Но мы можем использовать using не только, когда открываем файл или подключение к базе данных, иначе его использование ограничилось бы исключительно сервером.

Мне нравится рассматривать using, как Undo/Redo только наоборот, сперва мы выполняем какое-то действие, а в конце отменяем его:

создали объект, удалили
показали спиннер и скрыли, когда получили данные

Причем отмена удобно происходит в самом конце функции, даже если мы используем async/await.

Вот простой пример, как можно использовать using, чтобы показывать/скрывать спиннер в React коде.

 
 
// обычный код на React
  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        await Promise.resolve().then(() => console.log("promise.resolve"));
      } finally {
        setIsLoading(false);
      }
    })()
  }, [])

 
 
// такой же код, с использованием using
  useEffect(() => {
    (async () => {
      using manager = new LoadingManager(setIsLoading);
      await Promise.resolve().then(() => console.log("promise.resolve"));
    })();
   }, []);
 
/**
 * Класс, который управляет состоянием спиннера
 */
class LoadingManager {
  constructor(private setIsLoading: (value: boolean) => any) {
    this.setIsLoading(true);
    console.log("constructor");
  }
 
  [Symbol.dispose]() {
    this.setIsLoading(false);
    console.log("disposer")
  }
}
 
// В консоли будет выведено в следующем порядке
// constructor
// promise.resolve
// disposer

Код можно открыть в песочнице.

К сожалению, нельзя опустить переменную manager, но это лучше, чем лепить везде try / finally.

Ещё по теме:

#typescript #frontend

🍎 Ещё раз об интеграции Notion и Apple Shortcuts

Thu, 25 Jan 2024 10:01:59 GMT

🍎 Ещё раз об интеграции Notion и Apple Shortcuts

Пару лет назад я рассказывал, как можно использовать Apple Shortcuts, чтобы настроить быстрое добавление записей в инбокс. А в прошлом году поделился шаблоном, где для использования достаточно вставить токен notion и идентификатор базы. Но вчера я заметил, что теперь даже этого делать не нужно.

Наконец-то, Notion добавил готовые экшины для добавления записей в Inbox, всё настраивается за минуту. Жаль, что новый способ работает только на телефоне, приложение Notion для Mac не поддерживает эти действия.

#notion #automation

Прошлой весной, я наконец-то зарегистрировался на GetMentor, и теперь время от времени мне…

Tue, 23 Jan 2024 10:00:04 GMT

Прошлой весной, я наконец-то зарегистрировался на GetMentor, и теперь время от времени мне поступают различные вопросы. Некоторые из них решил публиковать здесь на кана**ле.

В**опрос: если для параметра указать тип React.DragEvent<HTMLDivElement> ,то в коде e.target.style.background = 'white’ TypeScript ругается, что вполеtarget отсутствует свойство style, почему **так?

**Ответ:

Тут всё дело в том target — элемент, на котором произошло событие (оно могло всплыть к текущему элементу от дочернего). Из-за этого заранее тип target’а не известен, поэтому его нужно привести к нужному типу. Например, вот так:

 
(e.target as HTMLElement).style.background = 'white';

Вместо target можно использовать поле currentTarget, тип этого поля всегда известен, потому что currentTarget всегда ссылается на текущий элемент, к которому прикреплён обработчик событий. В этом случае можно избежать приведения типа.

 
e.currentTarget.style.background = 'white';

Хорошее демо о `target` и `currentTarget` есть в доке.

Ещё по теме

#question #frontend

⏰Напоминания в Notion

Mon, 22 Jan 2024 10:00:03 GMT

⏰Напоминания** в Notion**

Сегодня немного о том, как я облажался, но не сильно. Обычно я оплачиваю подписку иви сразу за год — так дешевле, всего 2000р (≈170 руб / месяц). Но как только подписка заканчивается — списывается оплата за 1 месяц — 399р, что гораздо больше чем 170р.

Что можно сделать, чтобы не забыть оплатить подписку (отключить авто продление!)?

Если вы, как и я, ведёте свои задачи и проекты в Notion, то у вас скорее всего есть таблица, где отображаются задачи, которые вы должны выполнить сегодня. В таком случае вы можете:

Создать задачу в Notion
Указать дату выполнения, немного раньше завершения подписки
В указанную дату задача появится в вашем списке на сегодня

Например, моя подписка заканчивается 8 января 2025 года, поэтому я поставлю дату 27 декабря 2024 года, чтобы позаботиться об это заранее.

Я уже описывал этот способ в статье Система личного планирования в Notion. Эпизод 2 — Управление проектами.

#notion

🧹 Тестирование — подчищаем за собой

Thu, 18 Jan 2024 07:23:33 GMT

**🧹 Тестирование — подчищаем за собой **

Так исторически сложилось, что у нас на проекте нет юнит тестов, только интеграционные и e2e.

Иногда в тестах приходится подчищать за собой — удалять созданные во время выполнения теста объекты в базе, чтобы не влиять на результат других тестов. Это конечно, лишь ухудшает читабельность кода.

Мы прошли некоторую эволюцию подходов для создания и удаления объектов:

Мы использовали try/finally , где все созданные объекты удаляются внутри блока finally. Выглядит сомнительно, когда нужно городить подобную конструкцию во многих тестах.
Перешли к использованию функций с колбэками. Утилитная функция создаёт и удаляет объект, а мы передаём лишь колбэк, в котором описываем логику теста и нужные нам проверки.
Внедрили IDisposable классы, которые мы называем Creator’ами. Они делают то же самое, что и функции с колбэками, но не добавляют ненужную вложенность, что улучшает читаемость кода. Они чем-то напоминают PageObjectModel в e2e тестах.

Использование паттерна с классами IDisposable также подходит для активации определенной настройки только в рамках одного теста и отключения её по завершении теста.

Такой подход не ограничивается только лишь C# — в TypeScript 5.2. уже появилась поддержка using и, возможно, скоро она появится и в JavaScript.

#csharp #javascript #typescript #tests

🗓 Cron теперь Notion Calendar

Tue, 16 Jan 2024 07:29:57 GMT

🗓** Cron теперь Notion Calendar**

Некоторое время назад Notion купил Cron, и вот недавно состоялся релиз, теперь Cron - это Notion календарь, в котором доступна интеграция, как с гугл календарём, так и с базами в Notion.

Базы отображаются в левом нижнем углу, а записи - в верхней части календаря.

https://calendar.notion.so

#notion

Пару месяцев назад я упоминал codeium — бесплатную альтернативу копайлоту. На новогодних праздниках…

Mon, 15 Jan 2024 10:00:08 GMT

Пару месяцев назад я упоминал codeium — бесплатную альтернативу копайлоту. На новогодних праздниках наконец-то попробовал его на своём пет-проекте, и довольно часто он действительно ускоряет разработку. На скриншотах можно увидеть как codeium:

Выводит значение enum’а
Помогает писать тернарники
Генерирует код по запросу в чате
Может сгенерировать JSDoc или объяснить код

В текущих реалиях нужно включать VPN, чтобы работать с ChatGPT из России, здесь же есть встроенный чат, который работает без VPN 👍.

#ai

📖 Михаил Горбачёв: В меняющемся мире

Fri, 12 Jan 2024 10:00:05 GMT

📖 Михаил Горбачёв: В меняющемся мире

На новогодних удалось не только пить, есть, спать и сбить режим, но и немного почитать. Перед новым годом спонтанно зашёл в Читай Город и купил книгу “Михаил Горбачёв: В меняющемся мире”, очень интересная и читается на одном дыхании.

📚 Книга проливает свет на ключевые моменты истории СССР в период перестройки под руководством Михаила Горбачёва. Название отражает содержание, фокусируясь в основном на событиях, формировавших жизнь Горбачёва

💭 Уделяется внимание новому мышлению, которому следовала советская власть в период перестройки

💣 Особое внимание уделяется тому, каким образом останавливалась гонка вооружений и как завершилась холодная война, раскрывая усилия советского руководства, положившие конец этому периоду

🌐 Рассматривается оттепель в отношениях СССР и США при Горбачёве и Рейгане

🔗 В книге Горбачёв рассказывает, почему было важно сохранить СССР, и к каким проблемам мог привести его развал (и в итоге привёл). Естественно описывается как он в итоге распался.

#book #politics

☃️ Итоги 2023 года

Sat, 30 Dec 2023 14:38:45 GMT

☃️** Итоги 2023 года**

2023 год был достаточно насыщенным, и наверно стоит немного оглянуться назад и подвести итоги: что удалось сделать, а над чем ещё нужно поработать. Ведь иначе может показаться, что за год ничего не было сделано.

🏃 Пробежал полумарафон

🎾 Начал играть в большой теннис

🧳 Поездил по России и посетил 5 стран

🇷🇺 Москва, Краснодар, Тюмень, Екатеринбург 
🇧🇾 Минск
🇦🇲 Ереван
🇬🇪 Тбилиси
🇦🇿 Баку
🇹🇷 Стамбул, Каппадокия, Сиде

🌑 Сыграл в пейнтбол

✈️ 74 публикации в телеграмм канале

📝 6 статей на Хабре и VC:

🧑‍💻 Довёл до ума VS Code расширение и Open API документацию для Яндекс Музыки

🧑‍💻 Поконтрибьютил в Storybook Design Token

📚 Прошёл пару курсов:

📖 Читал не много

🧑‍🏫 Зарегистрировался на GetMentor

❌ Конечно, планов было гораздо больше и не всё удалось сделать.

Не успел подготовиться к собеседованию в Яндекс. Поэтому не пошёл на второе этап.
Не успел довести до ума утилиту для анализа Code Review
Не нашёл времени на английский
Осталось множество незаконченных проектов

Надеюсь следующий год будет по крайней мере не хуже.

Всех с наступающим новым годом! 🎉 🎄❄️☃️🌨️

#итогигода

📖 Хабр. Технотекст 2023

Thu, 28 Dec 2023 10:00:06 GMT

**📖 Хабр. Технотекст 2023 ** Ежегодно Хабр проводит конкурс статей Технотекст, где каждый может принять участие, чтобы заслужить почёт и славу (или же нет).

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

В прошлом году я участвовал со статьями о Notion:

А в этом году снова решил поучаствовать со статьёй Интегрируем Яндекс Музыку в Visual Studio Code.

Надеюсь, что в этом году фортуна улыбнётся мне 🤞.

#habr

📖 Скорбь сатаны — Мария Корелли

Fri, 22 Dec 2023 10:00:05 GMT

📖 Скорбь сатаны — Мария Корелли

Сегодня пора отвлечься от кода и дать мозгу небольшой отдых — новый год уже близко! Можно немного отодвинуть ноут в сторону (но не слишком далеко) и расслабиться. На выходных дочитал “Скорбь сатаны” Марии Корелли.

Это одна из тех книг, от которых невозможно оторваться. Завораживающая история, которая рассказывает, что за деньги настоящее счастье не купишь. Очень рекомендую 👍.

Со временем всё забывается, поэтому пока свежи впечатления, решил поделиться некоторыми цитатами из книги:

Как правило - богачи самые несчастные люди на свете.
Я устал от самого себя. И Мне никогда не удается отдохнуть.
Настоящее - самое приемлемое время.
Дни — белые странницы божественной хроники человеческой жизни.
Я смотрю на бесконечное будущее, на которое я обречен, скорее с ужасом, чем с благодарностью, так как я зря растратил свое время и упустил бесценные возможности.
Как странно писать о себе в прошедшем времени, как о том, кто уже не имеет отношения к настоящему.
Никогда ни на что не следует смотреть слишком мрачно.

Буду благодарен, если посоветуете, что можно почитать на новогодних праздниках 📚🙏

#book #fridayreading

Если вы ещё не забыли, в предыдущем посте я упомянул, что прошёл мини-курс по написанию статей на…

Tue, 19 Dec 2023 10:00:06 GMT

Если вы ещё не забыли, в предыдущем посте я упомянул, что прошёл мини-курс по написанию статей на Хабр. А сегодня хочу поделиться статьями, которые написал за время обучения:

1️⃣ Как автоматизировать использование дизайн токенов с помощью Stylelint и PostCSS

2️⃣ Как я документацию для дизайн-токенов в Storybook генерировал

#frontend #design #automation #storybook

Как я документацию для дизайн-токенов в Storybook генерировал

Mon, 18 Dec 2023 00:00:00 GMT

Я думаю ни для кого не секрет, что бизнес процессы в стартапах, мягко сказать, хромают. Я же как оптимист вижу возможность в каждой трудности, поэтому всегда считал, что это отличная возможность проявить инициативу и попробовать что-то автоматизировать или улучшить процессы команды (ну или хотя бы попробовать). Сегодня хочу рассказать, как можно легко реализовать документацию для дизайн-токенов в Storybook, и заодно поделиться тем, как и почему я пытался это сделать, и что из этого вышло. Статья будет полезна для разработчиков, которые уже используют дизайн токены и ищут лёгкий способ их документации.

📺 Дизайн токены

Fri, 15 Dec 2023 10:00:04 GMT

📺 Дизайн токены

Сегодня я порекомендую несколько докладов о дизайн токенах

1️⃣ MoscowJS 49 — Дизайн-система на фронтенде — Сергей Володин

Сергей рассказывает, как первый редизайн почты и других продуктов mail.ru — “где нужно было поменять только цвет” занял неделю и в нём участвовали 10 человек.

В итоге они поняли, что что-то не так с их архитектурой, и что одного компонентного подхода не достаточно. Mail.ru — большая компания, и на разных проектах могут быть разные технологии. Но помимо этого, ещё определённо будут разные платформы — не только веб, но и, например, мобилки. В таком случае у вас физически нет возможности заставить использовать всех одну и туже библиотеку компонентов.

Чтобы ускорить разработку, в проекте должна использоваться дизайн-система. Дизайн-система — язык, на котором описываются интерфейсы. Это не просто UI Kit, дизайн-система описывает как работать со шрифтами, как правильно компоновать компоненты, описывает анимации и прочее. К тому же, дизайн-система должна быть платформо-независимой.

И далее рассматриваются:

Дизайн токены — ядро дизайн системы.
Проектирование API компонентов. Что интересно, они запретили прокидывать в компоненты className и инлайн стили.
Как реализовывать темы.

2️⃣ Токены в дизайн-системах / Юрий Ветров (Mail.Ru Group)

Еще один доклад от Mail.Ru. Здесь подробно рассказывается о том, как происходила унификация различных продуктов в компании, почему библиотека компонентов не решила все проблемы и как помогли дизайн-токены.

3️⃣ Дизайн-система на токенах в Figma, коде и проде – Константин Подрубный, Wrike

Тут можно посмотреть демку, как можно редактировать дизайн-токены прямо из фигмы, и как они сразу же уходили в продакшн.

Ещё по теме:

Дизайн система Paradigm от Mail.ru
КОД — клуб отечественных дизайн систем
Styledictionary — инструмент для генерации дизайн токенов под разные платформы

#fridayreading #design #architecture

Как автоматизировать использование дизайн токенов с помощью Stylelint и PostCSS

Tue, 12 Dec 2023 00:00:00 GMT

Сегодня я хотел бы поделиться своим небольшим успехом в автоматизации. В какой-то момент я понял, что во время код ревью я указываю разработчикам на одни и те же ошибки. Но, что ещё хуже, я сам время от времени допускаю эти ошибки. Сегодня хочу рассказать об одной из таких проблем, которую я решил с помощью PostCSS + Stylelint, и о том, как я это сделал. Статья будет полезна для разработчиков, которые уже используют или собираются использовать дизайн токены.

✍️ Мини-Курс на Хабре

Mon, 11 Dec 2023 08:01:00 GMT

✍️ Мини-Курс на Хабре

В ноябре Хабр запускал мини-курс из 4-х занятий по написанию статей и ведению блогов компаний. Моей компании, корпоративный блог не нужен, но статьи время от времени стараюсь писать. Поэтому курс решил пройти и поделиться здесь некоторыми заметками, так сказать, чтобы всё лучше усвоилось.

👆 Формат статьи

Перед написанием статьи нужно определиться с её форматом, он повлияет на ход всей статьи, от названия до содержания. Вот 4 основных типа статей и примеры заголовков для них:

1️⃣ Кейс — “Как я водил слона по лабиринту” 2️⃣ Туториал/инструкция — “Как водить слонов по лабиринту: не повторяйте наших ошибок, держите за хобот” 3️⃣ Обзор — “Лучшие слоны для лабиринтов или почему мы предпочитаем индийских” 4️⃣ Аналитика — “Самые важные качества у слонов в лабиринтах на нашем опыте”

💡 Кейс

Рассказываете, не что вы делали, а как, и описываете: процессы, ошибки, препятствия. То, как вы что-то делали — менее важно.
Должно быть больше информации о непосредственном опыте именно вашей команды, а не какой-то абстрактной команды. Поэтому нужно больше деталей о работе вашей команды, о каких-то конкретных ситуациях.

📃 Туториал/инструкция

Тут мы описываем конкретные шаги, поэтому конкретизация более важна.
Детали компании/команды менее важны, но нужен минимальный контекст, чтобы было понятно, что вы знаете, о чём говорите.

🎨 Оформление

Когда мы пишем статью на Хабр, то помимо основного содержимого, нам нужно позаботиться о том, как статья будет выглядеть в ленте. Это нужно, чтобы завлечь читателя её прочесть. Здесь важно обратить внимание на:

Заголовок
КДПВ — картинка для привлечения внимания
Лид — вводный абзац

📰 Заголовок

Заголовок не должен вводить в заблуждение, должен отображать суть статьи
Может состоять из 2-х частей: Игровой (креативный) заголовок + рабочий
Рабочий заголовок — заголовок, который мы используем, когда пишем статью.
Если пишем серию статей, то не нужно указывать “Часть 1”, “Часть 2”, …, чтобы не отпугнуть читателей. Лучше сделать каждую статью в серии самодостаточной, чтобы не требовалось читать предыдущие статьи из серии.

📝 Примеры заголовков

Рабочий заголовок: Как написать хорошую статью на Хабр

Игровой + рабочий: Редактируй трезвым: статья о том, как писать хорошие статьи на Хабр

Короткий: Топовая статья — как?

🔝 Вводный абзац (лид)

Тут нужно раскрыть:

О чём вы хотите рассказать и почему
Указать целевую аудиторию
Представиться, так вы будете для них коллегой по цеху, а не каким-то абстрактным чуваком в интернете
Лид не должен раскрывать все идеи статьи, нужно сохранять интригу, чтобы завлечь открыть саму статью

✍️ Основной контент

Больше конкретики. Например, нужно писать не “наш проект очень старый”, а “мы пережили 2 миграции с Flash на JQuery и с JQuery на Angular”
Описывать личный опыт и вполне конкретные ситуации/проблемы/провалы и успешные решения.
Не нужно использовать заумные предложения, мы пишем не для научного издания. Например, можно задать себе вопрос “Сказал бы я так в жизни?”, и если нет, то лучше переформулировать.

#habr

🚮 Трата времени

Thu, 07 Dec 2023 08:01:00 GMT

🚮 Трата времени

Мне кажется больше всего времени мы тратим не на какую то рутину, а на следующие 2 вещи:

начинаем что-то и не доделываем, хотя дело стоящее
продолжаем делать то, что никому не нужно

Прежде чем за что-то браться — стоит подумать, а стоящее ли дело? Если дело стоящее, то получится ли довести его до конца? Возможно, у вас уже куча незаконченных дел и лучше посвятить свободный вечер именно им, а не пополнять этот список ещё одним незаконченным проектом. Лучше просто записать все мысли о новой идее, но не браться за неё прямо сейчас. В противном случае, вы рискуете просто потратить время и получить ещё одно незаконченное дело, которое будет вас преследовать.

Если взялись за дело и в процессе поняли, что оно лишено всякого смысла — лучше не тратить время впустую. Возможно вы хотите внедрить новую технологию в проект — сперва обсудите это с командой, возможно окажется, что это никому не нужно (а возможно наоборот).

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

Если говорить о незаконченных делах, то вот так выглядит мой список проектов в Notion. На многие из них я потратил больше недели, но так и не довёл до конца. В этом году всё-таки смог доделать несколько начатых проектов, посмотрим что будет в следующем.

О том, почему важно доводить проекты до конца, я писал здесь.

#planning #about_me

Именование юнит тестов

Tue, 14 Nov 2023 09:08:40 GMT

Именование юнит тестов

Мне всегда нравятся “информативные” названия тестов вроде “TestLogin”.

Смотришь и из названивая в принципе не понятно, что именно мы тестируем.

В книге “Искусство автономного тестирования (The Art of Unit Testing)” предлагается следующий способ именования тестов:[UnitOfWorkName]_[ScenarioUnderTest]_[ExpectedBehavior]

UnitOfWorkName — имя тестируемого метода либо группы методов или классов
Scenario – условия, при которых тестируется автономная единица
ExpectedBehavior – что должен делать метод при заданных условиях

Например, если мы тестируем вход пользователя с неверным паролем и ожидаем, что произойдёт ошибка, то названия теста может выглядеть так: TestLogin_InvalidPassword_ThrowsException.

#csharp #tests

🎨 Дизайн токены

Mon, 06 Nov 2023 08:01:00 GMT

**🎨 Дизайн токены

**Дизайн-токен — самое маленькое, атомарное правило дизайн системы:

Какого цвета бордер;
Какого размера шрифт заголовка. По сути — переменная.

Демка состоит из 2 частей: 1️⃣ Автозамена цветов, шрифтов на соотвутствующие переменные с помощью stylelint-declaration-strict-value 2️⃣ Отображение всех этих переменных в storybook с помощью storybook-design-token

Позже опишу подробнее, а пока исходники можно посмотреть здесь, а опубликованный сторибук здесь.

Для публикации использовал мою старую инструкцию по github pages, адаптировав её под pnpm:

В pnpm нет **pre **скриптов, поэтому нельзя использовать predeploy
Добавил pnpm/action-setup для установки
В настройках репозитория “Settings > Actions > General > Workflow permissions” нужно разрешить доступ на запись при использовании токенаGITHUB_TOKEN Код github actions полностью можно посмотреть здесь.

#storybook #automation #design #github

Последний год по пятницам я более-менее стабильно рекомендую статьи, которые стоит прочитать. Но на…

Fri, 27 Oct 2023 11:05:05 GMT

Последний год по пятницам я более-менее стабильно рекомендую статьи, которые стоит прочитать. Но на этой неделе у меня отпуск, поэтому рекомендую не статью, а приехать в Екатеринбург и прогуляться по набережной, где есть огромная клавиатура.

Но лучше летом, тут уже во всю зима 🥶

#vacation

💻️️️️️️ Array.prototype.sort

Mon, 23 Oct 2023 08:01:00 GMT

💻️️️️️️ Array.prototype.sort

Как будет отсортирован следующий массив [-1, 0, 1, 2, -1, -4, -2, -3, 3, 0, 4].sort()?

🥱 Предыстория

На выходных я решал литкод, и в задаче 3sum было необходимо отсортировать массив по возрастанию, перед тем как перейти к основной реализации алгоритма.

Я написал решение, подебажил на бумаге — всё работает, отправляю код на проверку — не работает 🤷‍♂️. Перепроверяю всё глазами — ну должно же работать!

Сдаюсь и начинаю дебажить в VS Code и вижу, что сортировка массива работает не так как я ожидал.

ℹ️** Объяснение**

Если перейти на MDN и прочитать документацию Array.prototype.sort(), то станет всё понятно.

Метод sort() в JavaScript преобразует элементы в строки и затем сравнивает их последовательности значений кодов UTF-16. Это означает, что при сортировке числа рассматриваются как строки.

Таким образом, числа в данном случае сортируются на основе их строкового представления. Например, ‘-10’ будет идти перед ‘-2’, потому что строка ‘10’ идет перед строкой ‘2’ в лексикографическом порядке.

Чтобы выполнить числовую сортировку массива, нужно предоставить функцию сравнения методу sort(), как показано здесь:

[-1, 0, 1, 2, -1, -4, -2, -3, 3, 0, 4].sort((a, b) => a - b);

Это даст вам [-4, -3, -2, -1, -1, 0, 0, 1, 2, 3, 4] — числовую сортировку.

#javascript #frontend #algorithms

📖 Обязан ли разработчик развиваться❓

Fri, 20 Oct 2023 10:00:03 GMT

📖 Обязан ли разработчик развиваться❓

Сегодня статья с названием, которое говорит само за себя, очень рекомендую к прочтению.

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

Но, как по мне, разработчику следует развиваться настолько, чтобы он мог качественно выполнять свою работу. Если же к твоей работе есть вопросы — придётся поднапрячься, не нужно быть обузой для своих коллег**.

**К тому же, всё так быстро развивается, что скорее всего иногда придётся изучать что-то новое, чтобы не потерять работу вовсе. **

Основные моменты статьи:

**Если вы джун — статья не для вас, опция доступна для мидлов и выше
Разработчику следует развиваться, но не обязан
Не все обязаны развиваться, можно просто хорошо делать свою работу
Руководителям не стоит заставлять всех развиваться
Не нужно развиваться 24/7. Учиться, развиваться нужно вдумчиво и постепенно — умеренность защитит вашу психику и приведёт к лучшим результатам. Иначе можно и выгореть.

https://habr.com/ru/articles/686742/

#fridayreading #burnout

⚛️ Атомарные обновления в Zustand

Mon, 16 Oct 2023 08:00:07 GMT

⚛️ Атомарные обновления в Zustand

Я уже упоминал атомарные обновления ранее, когда говорил о проблемах контекста реакта.

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

Zustand сравнивает по ссылке предыдущее и текущее значение, возвращаемое из useStore(), и если объект изменился — происходит ре-рендер.

❌ В следующем примере у нас всегда будет возвращаться новый объект, и ре-рендер произойдёт даже если изменился только age, а lastName и firstName не изменились

const {firstName, lastName} = useStore(({firstName, lastName}) => ({firstName, lastName}));

Аналогичное поведение будет и в следующем случае

const {firstName, lastName} = useStore();

✅ Есть три варианта использования значений из стейта, которые поддерживают атомарные обновления:

1️⃣ Одиночные селекторы

const firstName = useStore((state) => state.firstName)
const lastName = useStore((state) => state.lastName)

2️⃣ Селектор, который возвращает объект + shallow - функция сравнения предыдущего и нового стейтов

const {firstName, lastName} = useStore(({firstName, lastName}) => ({
    firstName, 
    lastName
}), shallow);

3️⃣ Автосгенерированных селекторы

const firstName = useStore.use.firstName();
const lastName = useStore.use.lastName();

Накидал небольшую демку в Codesandbox

#frontend #react #statemanagement #zustand

📖️️️️️️ Каррирование и частичное применение

Fri, 13 Oct 2023 10:00:04 GMT

📖️️️️️️ Каррирование и частичное применение

Каррирование и частичное применение — две концепции из функционального программирования, которые очень часто путают из-за их схожести (а я пишу этот пост, чтобы наконец-то запомнить).

И частичное применение, и каррирование, реализуются как функции, принимающие в качестве параметра другую функцию.

Частичное применение — функция partialApply, принимающая первым параметром функцию — fn, а остальные параметры — часть параметров функции fn. Функция partialApply возвращает функцию, которая в качестве параметров принимает недостающие аргументы функции fn.

Каррирование — функция curry, которая принимает единственный параметр — функцию fn, и возвращает каррированную функцию fn. Можно сказать, что каррированная функция fn — функция аккумулятор, которая будет накапливать переданные аргументы до тех пор, пока не будет передано достаточно параметров для вызова исходной функции. Параметры можно передавать в любом количестве.

Подробнее

#fridayreading #frontend #javascript #functionalprogramming

🍂 Проваливание промисов

Mon, 09 Oct 2023 08:00:03 GMT

🍂 Проваливание промисов

Когда вы передаете в then() что-то отличное от функции (например, промис), это интерпретируется как then(null) и в следующий по цепочке промис «проваливается» результат предыдущего.

Подробнее о промисах в статье “У нас проблемы с промисами”.

#interview #frontend #javascript

⚠️ Проблемы React Context

Fri, 06 Oct 2023 10:00:02 GMT

⚠️ Проблемы React Context

Использование контекста реакта и хуков, упрощает управление состоянием приложения. В небольших проектах уж и вовсе позволяет отказаться от использования менеджеров состояний. Но у него есть ряд проблем, о которых необходимо знать.

1️⃣ Дизайн по умолчанию, не совсем безопасен.

Логика хранения стейта и его изменения разбросана между контекстом и использующими его компонентами
Значение value контекста необходимо мемоизировать с помощью useMemo
Если компонент, не нашёл контекст в родительских узлах — он будет молча использовать значения по-умолчанию. Мы не увидим никаких предупреждений или ошибок

Эти проблемы и их решения рассматривается в статье React: How I learned to create optimized contexts

✅ Вместо использования контекста напрямую, нужно:

Указать null в качестве значения по-умолчанию для контекста
Реализовать useSafeContext — кастомный хук, который будет проверять, что значение не null
Реализовать SafeContext — компонент, который содержит логику инициализации значения реакт контекста

2️⃣ Отсутствие атомарных обновлений — компоненты или хуки, которые используют контекст, перерендеривается каждый раз, когда контекст изменяет состояние. Даже если ваш компонент использует лишь одной свойство из контекста, которое никогда не изменяется — компонент будет перерендериваться при изменении любого другого свойства в контексте.

✅ Как решить проблему?

Не класть всё в один большой контекст, а разбить его на несколько маленьких
Использовать библиотеку для управления состоянием, например, zustand
Минимизировать использование контекста. Например, можно использовать контекст в родительском компоненте, а дочерним передать нужные значения через пропсы.

Проблемы и решения описаны в статье The Problem with React’s Context API (тут перевод на русский).

#fridayreading #react #frontend #statemanagement

👨‍💻Где проводить live-coding

Mon, 02 Oct 2023 08:00:06 GMT

👨‍💻**Где проводить live-coding

**Если вы время от времени проводите собеседования — то вы наверняка хотите не только поговорить о жизни с кандидатом, но и проверить насколько он хорош в деле. Для этого вам поможет live-кодинг.

Для live-кодинга, вы можете использовать:

1️⃣ Yandex Code - ✅ Подсветка синтаксиса - ✅ Совместное написание кода - ❌ Нет подсветки ошибок - ❌ Нельзя запускать код

2️⃣ Interview Cups — онлайн редактор от VK - ✅ Подсветка синтаксиса - ✅ Совместное написание кода - ❌ Подсветка ошибок - ✅ Можно запускать код

3️⃣ Visual Studio Live Share. Позволяет кандидату открыть ваш проект прямо в браузере, после чего вы можете совместно писать код.

А что вы используете для live-кодинга?

#interview #vscode #tools

📖 Архитектура фронтенда на основе вертикальных слайсов

Fri, 29 Sep 2023 08:00:03 GMT

📖 Архитектура фронтенда на основе вертикальных слайсов

Сегодня порекомендую статью о структуре фронтенд проектов на основе вертикальных слайсов.

Автор начинает рассказ с описания структур первых проектов, где использовался подход “Разделения по техническим слоям”, в котором мы группируем файлы по функциональности, а не по доменной области:

api/services
components
stores
constants
и т.д.

и затем описывается, как этот подход всё ещё используется внутри “вертикальных слайсов”.

Разделение по техническим слоям

✅ Плюсы подхода

хорошо работает для маленьких проектов
у слоев есть однонаправленный поток использования, и нельзя импортировать файлы из слоев, находящихся на уровне выше (например сторы могут использовать api, а страницы могут использовать базовые компоненты, но не наоборот).

❌ Проблемы подхода

Даже для небольших продуктовых фичей приходится править код по всему проекту, так как он раскидан по разным папкам
Неявные связи в рамках конкретных слоев: бизнес компоненты (ProductCard, UserProfile) смешиваются c UI компонентами (Link, Button) в components, то же самое касается бизнес логики

«Vertical sliced» подход

Подход подразумевает, что архитектура строится не вокруг технических слоев, а поверх конкретных слайсов проекта.

По сути, мы берём структуру “разделения по техническим слоям” и делаем разрез по фичам. То есть, создаём папку для каждой фичи, внутри которой все файлы относятся только к этой фиче и “разделены по техническим слоям”.

ℹ️ Описание папок

shared - тут хранятся всё, что можно переиспользовать и не зависит от определённой бизнес фичи. Например в shared/components будут лежать, обычные кнопки, радио кнопки и прочее
domain - базовый UI для бизнес-сущностей (домена) проекта, например карточка товара. Простая аналогия (но не совсем правильная) - в домене можно хранить все то, что хранится в базе данных на бекенде.
features - самодостаточные компоненты — большие бизнес сущности приложения, например корзина. Для реализации фичи, скорее всего будет использоваться несколько компонентов из доменной области.
pages - страницы приложения.

✅ Плюсы подхода

Когда необходимо внести изменения в фичу — все изменения происходят внутри одного слайса.
На выходе получаем высокое зацепление (high cohesion) внутри слайса и низкую связанность (low coupling) между разными слайсами
Сохраняется правило однонапревленного использвания: pages ⇒ features ⇒ domain ⇒ shared
Фичи не могут напрямую использовать друг друга
На самом нижнем уровне используется “разделение по техническим слоям”

Чтобы обеспечить однонаправленный поток использования можно взять eslint c плагином import/no-restricted-paths.

#frontend #architecture #fridayreading

Как тестировать internal методы и классы в C# — InternalsVisibleToAttribute

Mon, 25 Sep 2023 08:00:03 GMT

Как тестировать internal методы и классы в C# — InternalsVisibleToAttribute

Представьте, что вы разрабатываете библиотеку, которой будут пользоваться тысячи людей 😮. Чтобы убедиться в стабильности — нужно всё хорошенько покрыть тестами. Все мы любим инкапсуляцию, верно (я надеюсь)? Поэтому мы не разрешаем использовать всё подряд из нашей сборки, а с умом используем модификаторы доступа и позволяем использовать только public классы и методы.

В C#, есть 7 модификаторов доступа, основные:

private — доступ только внутри текущего класса
protected — доступ внутри текущего и дочерних классов
public — классы и методы доступны где угодно, также из сборок, использующих текущую
internal — публичный API, внутри текущей сборки. Как public, но нет доступа из сборок использующих текущую
остальные можно посмотреть тут

Но, C# — не JavaScript, и для тестов создаётся отдельная сборка, а internal методы в ней не доступны.

Чтобы тестировать internal функциональность, нужно использовать атрибут InternalsVisibleToAttribute, и в качестве параметра указать имя тестовой сборки. Тогда все internal методы и классы будут доступны для тестирования.

[assembly: InternalsVisibleToAttribute("YourProject.UnitTests")]

#tests #dotnet

Все побежали просить пробустить канал, а я что хуже?

Fri, 22 Sep 2023 16:23:45 GMT

Все побежали просить пробустить канал, а я что хуже?

https://t.me/cherkashindev?boost

Собирайте свои достижения

Fri, 22 Sep 2023 08:00:02 GMT

Собирайте свои достижения

❓Зачем

Поможет наполнить ваше резюме фактами и более убедительно презентовать себя на собеседовании
Поможет понять вам кто вы есть. Если у вас достижения уровня Джуна — то вы врядли Сеньор помидор
Поможет понять двигаетесь ли вы в правильном направлении. Достижения играют роль отметок на вашей внутренней карте — взглянув на них, вы понимаете, откуда, куда и как долго вы шли
Поможет получить визу талантов. Ну а вдруг 🤷‍♂️

❓Как

Записывать достижения в формате:

Дата или период времени, за который достигнут определённый результат
Суть достижения и ваша роль в нём
Количественные метрики этого достижения

ℹ️ Например:

Время: март 2021 года.
Суть: запустил новую монетизацию в блог-платформе Spiritualist.
Метрики: выручка увеличилась на 5%, рейтинг приложения в сторе вырос с 2,5 до 4,2.

Записывать всё это можно в Notion, Google Docs, в обычном текстовом файле, куда хотите. К тому же, нужно завести папку, куда вы будете складывать подтверждения этих метрик:

Публикации об этих достижениях компании/продукта в новостных изданиях.
Скриншоты метрик из Grafana.
Письмо руководителя о том, какой вы классный.
Отчёт c Performance Review.
Зарплатный квиток с указанием премии.
Скрин с презентации, где руководство говорит о вашем достижении.

#fridayreading

https://habr.com/ru/articles/714426/

Почему мы выбрали Zustand❓

Mon, 18 Sep 2023 08:00:02 GMT

Почему мы выбрали Zustand❓

Как я упомянул в предыдущем посте о Zustand, мы начали его использовать в июне 2021 года.

До этого использовали просто useState/useReducer/useContext, поняли что так больше нельзя, и перед разработкой новой большой фичи мы начали искать подходящий менеджер состояний. У нас были следующие требования:

Использование состояния между компонентами, у которых нет общего родительского компонента. Мы мигрируем с JQuery на React, поэтому большинство компонентов рендерятся с помощью createRoot и не имеют общего родителя, что не позволяет использовать контекст реакта и совместно использовать состояние между компонентами
Атомарные обновления, чего нет у контекста реакта
Поддержка асинхронных обновлений стейта вне компонента. Чтобы избегать ошибок типа Can't perform a React state update on an unmounted component, которые происходят, когда обновляется состояние для уже удалённого компонента
Поддержка Computed Properties
Поддержка TypeScript
Тестируемость
Маленький размер бандла
Англоязычное комьюнити, потому что команда англоязычная

И следующий 2 требования я выделю отдельно:

Простота использования. Очень важно, когда у вас разработчики со всех концов света и скилы у всех разные. К тому же, очень просто наговнокодить, когда вы начинаете использовать новый инструмент.
Возможность использовать вне реакта. Как я уже упомянул, мы мигрируем с JQuery на React, поэтому мы хотели использовать стейт менеджер и в легаси коде. Это позволило бы:
- мигрировать глобальный стейт в новую кодовую базу и использовать во всём приложении
- управлять реакт компонентами из JQuery, просто меняя стейт.

1️⃣ В первоначальном списке оказались:

Redux
MobX
Recoil
Zustand
Jotai
Akita
Effector

2️⃣ После анализа, в следующем раунде отбора оказались: MobX, Recoil и Zustand. Recoil попал по блату, его проталкивал один из членов команды, и потому что он разработан в стенах авторитетной “запрещённой” организации.

Мы переписали один и тот же небольшой компонент на MobX, Recoil и Zustand, чтобы проверить их в деле:

❌ MobX. По большей части нам не понравилось, что каждый компонент нужно оборачивать в observer, если он использует observable объект. К тому же, у него не самый простой API.

❌ К Recoil было очень много вопросов. Начиная от того, что он жирный — почти 80Кб без GZip и заканчиваю тем, что нельзя просто взять и вынести из компонента асинхронные обновления стейта. С асинхронным получением данных всё понятно, там есть селекторы, но как асинхронно обновить стейт — хз. К тому же он не production ready.

✅ Zustand нам понравился своей простотой, чтобы понять код – даже не нужно смотреть документацию. Также круто, что он удовлетворял буквально каждому нашему требованию.

Если вы ещё не знакомы с Zustand, то обязательно посмотрите видео из предыдущего поста. А если вам в целом интересна тема стейт менеджеров — то подписывайтесь на Артёма — автора реатома.

P.S. Кстати, Zustand прост не только в использовании, его исходники тоже просты как дважды два — четыре. Лучше понять, как он работает под капотом поможет статья Как работает Zustand.

#frontend #react #statemanagement #zustand

📖 Доводите свои проекты до конца

Fri, 15 Sep 2023 10:00:02 GMT

📖 Доводите свои проекты до конца

Если вы постоянно начинаете новые проекты, не завершив предыдущие — эта статья для вас.

Автор не делится, никакими секретами, как доводить проекты до конца, потому что их просто нет. В любом проекте есть 10% неприятной рутинной работы, которые отнимают больше сил, чем предыдущие 90%. И именно эти 10% процентов стоят между вами и удовлетворённостью от завершённого проекта.

Система, которая работает для автора, очень проста:

Выделите промежуток времени.
Заранее решите, над чем будете работать.
Всеми силами стремитесь сосредоточиться на этом единственном аспекте.

Автор рекомендует использовать любые приёмы, которые помогут вам сосредоточиться на оставшихся 10%.

Ему помогает слушать одну и ту же песню, чтобы сосредоточиться.
Мне немного помогает перетаскивать карточки из левой части в столбец “Done” и видеть, что я не стою на месте — процесс идёт.

После того как вы завершите 10 процентов оставшейся работы, вы столкнётесь с другой проблемой, которая не даёт вам закончить проект — страх подвергнуть свою работу и себя критике.

Но у вас есть обязанность перед прошлым собой выпустить проект. Это способ отдать должное своей работе и жертвам. Ведь, всё потраченное на проект время можно было потратить на что-то другое. За это время вам пришлось чем-то пожертвовать.

А как часто вы не доводите до конца свои проекты?

#gtd #habr #fridayreading

С уходящим днем программиста, народ! 👨‍💻

Wed, 13 Sep 2023 19:48:49 GMT

С уходящим днем программиста, народ! 👨‍💻

git blame —ignore-rev

Mon, 11 Sep 2023 10:02:45 GMT

git blame —ignore-rev

Пару месяцев назад, я читал статью о том, как команда TypeScript мигрировала с пространств имён на модули. Естественно, миграция происходила не вручную, а с помощью их внутренней тулзы (насколько я помню). И одной из проблем после такой массированной миграции (которая несёт лишь синтаксические изменения), является потеря истории `git blame`.

🔍 Наверняка вы сталкивались с подобной проблемой в своих проектах. Когда в следующий раз вы попробуете использовать git blame, то увидите, что множество строк в файле помечены коммитом с вашим рефакторингом. Теперь, чтобы найти реальный коммит, в котором была изменена строка, вам придётся переключиться на коммит до рефакторинга и ещё раз выполнить git blame.

🛡️ Чтобы не страдать, в гит добавили две опции --ignore-rev и --ignore-revs-file, которые скажут git blame , чтобы он вывел историю так, как будто этих коммитов никогда и не было. Строки, которые были изменены или добавлены игнорируемым коммитом, будут связаны с предыдущим коммитом, который изменил эту строку или близлежащие строки. Теперь можете не бояться потерять историю во время рефакторинга!

❗️К сожалению, не получится проигнорировать коммиты, если вы переносили файлы из одной папки в другую.

🔗 Подробнее можете прочитать здесь — Ignoring bulk change commits with git blame.

#git #lifehack

Zustand — очень простая альтернатива Redux и MobX, не сильно сложнее useReducer.

Sat, 09 Sep 2023 08:26:15 GMT

Zustand — очень простая альтернатива Redux и MobX, не сильно сложнее useReducer.

В последние пару лет появилось довольно много русскоязычных видео о Zustand. Мы на работе как раз начали его использовать пару лет назад, и в то время, похоже, он был не так популярен.

Если вы пропустили — то делюсь видео от Елены Литвиновой:

#frontend #react #statemanagement #zustand #fridayreading

Решил устроить себе “телеграммный” отпуск в августе и ничего не публиковать. Понял, что довольно…

Mon, 04 Sep 2023 07:01:50 GMT

Решил устроить себе “телеграммный” отпуск в августе и ничего не публиковать. Понял, что довольно много сил уходит на написание постов, прям как маленькая подработка.

Но я не всё время отдыхал, написал статью на хабр о сборщике мусора в .NET — Бессильный сборщик мусора или неуправляемая память в .NET. В сентябре буду исправляться.

||Кстати, на Хабре обновили донаты, подключил, но не знаю, работают ли, хочет кто-нибудь потестировать? 😄 Листайте в конец статьи и найдёте там кнопку “Задонатить” 😉. ||

#habr #csharp #dotnet #gc

Бессильный сборщик мусора или неуправляемая память в .NET

Tue, 15 Aug 2023 00:00:00 GMT

Если вы готовитесь к собеседованию и гуглите список вопросов для кандидата на C# разработчика, то сто процентов один из вопросов будет о сборщике мусора. На собеседованиях этот вопрос действительно частенько задают, но как только они заканчиваются, магическим образом все знания улетучиваются, прямо как после экзамена. Долгое время я не понимал, зачем мне нужно знать как именно работает сборщик мусора, ну собирает он как-то мусор, ну и пусть собирает дальше. Так я думал пока я не столкнулся с проблемами потребления памяти. Сегодня я хочу рассказать об одной из таких проблем, связанных с неуправляемой памятью.

🗑️ Сборщик мусора в .NET🗑️

Mon, 14 Aug 2023 10:00:04 GMT

🗑️ Сборщик мусора в .NET🗑️

Одним из самых популярных на собеседованиях C# разработчиков является вопрос о работе сборщика мусора в .NET. Мне также приходилось рассказывать о нём интервьюерам на моих собесах. Сегодня я хотел бы кратко рассказать о сборщике мусора, заодно и сам вспомню.

🔍 Зачем нужен сборщик мусора? Сборщик мусора автоматически обеспечивает освобождение памяти, занятой объектами, которые больше не используются. Такой подход предотвращает утечки памяти и снимает с разработчика бремя ручного освобождения памяти (привет С++), что позволяет сосредотачиваться на более важных аспектах программирования.

⏰ Когда вызывается сборщик мусора? Сборщик мусора активируется автоматически, например, когда одно из поколений заполнено (о поколениях позже). Если вам требуется инициировать сборку мусора вручную, используйте GC.Collect().

🔗 Как определяется, какие объекты больше не используются? Сборщик мусора опирается на концепцию “GC Roots” (корни сборки мусора):

Локальные переменные: Объекты, на которые существуют ссылки в локальных переменных.
Статические переменные: Объекты, на которые ссылаются статические переменные классов. Эти корни живут в течение всего времени выполнения приложения.
Активные элементы стека: Если во время выполнения функции происходит сборка мусора, то локальная переменная внутри данной функции не будет удалена сборщиком мусора. Такая переменная считается активным корнем, до тех пор пока кадр стека метода не будет разрушен.

Сборщик мусора создаёт граф (фаза маркировки), который содержит все объекты, достижимые из GC Roots. Объекты, на которые нет ссылок из GC Roots, считаются недостижимыми и готовыми для удаления.

🔄 Как работает сборщик мусора? Сборщик мусора использует концепцию поколений (поколения 0, 1 и 2) для эффективной работы с объектами различной “старости”.

При создании объекты помещаются в поколение 0. Если объект слишком большой (по умолчанию объекты размером больше 85 000 байт), то он будет помещён в Large Object Heap (очищается вместе с поколением 2).
Когда поколение 0 заполнено — запускается сборка мусора. Неиспользуемые объекты удаляются (недостижимые из GC Roots), оставшиеся перемещаются в поколение 1.
Аналогично происходит сборка мусора, когда заполнено поколение 1. Все выжившие объекты перемещаются в поколение 2. Затем происходит сборка мусора в поколении 0.
Когда заполнено поколение 2, происходит полная сборка мусора. Сперва очищается поколение 2, а затем 1 и 0. Если после этого недостаточно места для новых объектов — происходит исключение OutOfMemory.
В самом конце происходит фаза сжатия, в которой сборщик мусора перемещает живые объекты так, чтобы они располагались в памяти непосредственно друг за другом.

🔄 Для чего нужно разделение на несколько поколений?

Сборка мусора поколения 0 выполняется чаще и занимается удалением объектов, которые быстро выходят из области видимости.
С увеличением поколения редкость запуска сборки позволяет более эффективно использовать ресурсы. Поколение 0 очищается чаще всего, поколение 2 очищается реже всего.

🌐 Ещё по теме:

.NET Memory Management Concepts — очень кратко об основных концепциях сборщика мусора
Поколения объектов — одна из очень подробного цикла статей о сборщике мусора

#csharp #dotnet #gc #interview

TypeScript — satisfy или as

Fri, 28 Jul 2023 10:00:03 GMT

**TypeScript — satisfy или as

**Я думаю все знают о ключевом слове `as` в TypeScript. Мы используем его, когда нужно явно указать тип выражения, будь то переменная или функция. Когда мы используем `as`, происходит изменение типа выражения.

В TypeScript 4.9 появился оператор satisfies, который похож на оператор as, но работает немного иначе.

ℹ️ Он также проверяет, что выражение соответствует типу, но не изменяет его (тип).

Разницу легко увидеть на картинке.

При использовании as изменяется тип на Color, и мы теряем информацию об исходном типе объекта. Поэтому у нас появляется ошибка в месте вызова myColor.value.toUpperCase() , потому что компилятор думает, что value может быть также типа RGB, у которого нет метода toUpperCase .

При использовании satisfies ошибки нет, потому что исходная информация о типе сохранена.

Ещё по теме:

#typescript

Бинарная куча и приоритетная очередь

Mon, 24 Jul 2023 10:00:03 GMT

Бинарная куча и приоритетная очередь

Последние пару месяцев я решил попрактиковаться в решении задач на алгоритмы и структуры данных и вспомнить всё, что мы проходили в универе. Там, кстати, ни слова не было не только о сложностях алгоритмов, но и о Приоритетных очередях.

❓ Что это такое “Приоритетная очередь”

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

Приоритетная очередь поддерживает те же операции, что и обычная очередь.

❓ Что это такое “Бинарная (двоичная) куча”

Бинарная куча – структура данных, позволяющая быстро (за логарифмическое время) добавлять элементы и извлекать элемент с максимальным приоритетом.

Куча представляет собой полное бинарное дерево, в котором каждый элемент не меньше своих потомков. Таким образом, максимальный элемент всегда находится в корне, поэтому доступ к нему происходит за O(1).

Можно сказать, что приоритетная очередь — это интерфейс, а бинарная куча — одна из возможных реализаций интерфейса “приоритетной очереди”.

💡 О том, как происходит добавление и удаление элементов из бинарной кучи описано в статье на хабре Структуры данных: двоичная куча (binary heap)

🧑‍💻 Собеседования

Интересный факт, что при прохождении собеседования на вашем языке программирования такая структура данных может отсутствовать.

Например:

В .NET 6 появилась встроенная реализация приоритетной очереди, она так и называется PriorityQueue
А вот в JavaScript из коробки в нет подобной реализации

В таком случае можно быстро реализовать приоритетную очередь с помощью динамического массива:

Описать класс PriorityQueue, у которого под капотом используется динамический массив
Метод Enqueue — добавляет элемент в конец динамического массива
Метод Dequeue — извлекает элемент с наименьшим приоритетом

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

⌨️ Пример задачи с Leetcode

Чтобы понять как и зачем использовать приоритетную очередь можно порешать следующие задачи на Leetcode

Еще по теме:

#algorithms #interview

📖 Примеры использования Chat GPT

Fri, 21 Jul 2023 07:03:04 GMT

📖 **Примеры использования Chat GPT

**Сегодня хочу поделиться статьей с шаблонами для ChatGPT, который поможет понять, как правильно формулировать запросы 10 шаблонов запросов для ChatGPT, которые выдадут качественные ответы в помощь продакт-менеджеру.

Автор делится шаблонами и рассказывает:

Как генерировать вопросы для интервью
Генерировать и валидировать идеи
Составить план-презентации
Писать SQL запросы
Генерировать Excel и Google Sheet формулы

Я сам почти каждый день использую Chat GPT. В прошлом месяце я, наконец-то, прошёл бесплатный курс от Яндекс.Практикума по подготовке к Алгоритмическому собеседованию и также не без помощи Chat GPT. Я использовал его для:

Нахождения задач на Leetcode описанных в курсе, чтобы потренироваться прежде чем читать разбор решения. Chat GPT выдаёт название задачи (иногда даже вместе с ссылкой), которая появится первой в списке поиска гугла.
Для перевода C++ и Python кода на JavaScript, ведь намного приятнее читать примеры кода на языке, который ты знаешь.

Также я использовал Chat GPT для генерации glob паттернов. Хотя в этом он оказался не так уже хорош.

#fridayreading #chatgpt #algorithms #ai

Нужно выстраивать правила игры, добиваться их принятия и играть по ним

Mon, 17 Jul 2023 10:00:01 GMT

Нужно выстраивать правила игры, добиваться их принятия и играть по ним

В последнее время, когда я обсуждаю работу, часто использую фразу “правила игры”. Такие правила есть везде: в вашей команде, компании или политике.

🔄 Ситуация

Представим ситуацию: вам что-то не нравится в вашей работе (ну а вдруг). Например, ваша команда не работает над техническим долгом в проекте, и кодовая база деградирует. К тому же вы не являетесь тимлидом, который может диктовать условия, просто взяв и заставив всех либо “делать хорошо”, либо начать планировать рефакторинг и устранение технического долга в новом спринте.

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

✍️ Как?

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

☄️ Возвращение к договорённостям

Часто бывает, что кто-то не следует правилам и всячески их игнорирует. В таком случае нужно “возвращаться к договорённостям”, напоминая о правилах. “Мол, помнишь, мы всей командой договорились, что будем придерживаться этого подхода? Если ты считаешь, что нам это не нужно, то подготовь аргументы и расскажи всей команде, почему этот подход плох, и мы должны перестать ему следовать”. Вряд ли кто-то захочет напрягаться, и проще будет следовать правилам.

⚠️ Но все это будет работать только если ваша команда играете по правилам.

🎭 Аналогия

Эти правила можно рассматривать как законы в стране, по которым должны играть все граждане. Если тем или иным политическим группам что-то не нравится, они могут продвигать нужные им законы (не всегда хорошие), чтобы изменить правила игры.

❌ Чего делать не стоит

Многие, вместо того чтобы что-то сделать, просто жалуются из раза в раз. Иногда, чтобы привести таких людей в чувства, можно их спросить: “Окей, мы можем это изменить?” Если ничего изменить нельзя, то смысл жаловаться? Это только демотивирует, раздражает и никоим образом не влияет на те самые “правила игры”.

——

Кстати, о планировании технического долга я писал вот тут.

#processes #technicaldebt

Как правильно “придираться” во время код ревью

Wed, 12 Jul 2023 10:00:02 GMT

Как правильно “придираться” во время код ревью

Когда вы проверяете код своего коллеги не нужно требовать от него “идеального” кода.

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

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

ℹ️ В стандартах код ревью гугла, описано, что в таких ситуациях можно использовать префикс NIT, в комментариях к пул реквесту. NIT — сокращение от “nitpick” или “придираться”.

❓В каких ситуациях стоит использовать NIT

Чтобы выразить своё мнение или личное предпочтение. Очень важно отличать такие комментарии, от фактов. Довольно часто ревьюеры выставляют собственное мнение как истину и единственно верное решение
Чтобы указать автору на мелкие замечания, которые не обязательно исправлять
В целях обучения, когда вы менторите начинающего разработчика и ваш комментарий носит чисто образовательный характер

Подробнее об этом можно почитать здесь:

The Standard of Code Review

#codereview #fridayreading

Проверка именования файлов и папок с помощью плагина eslint-plugin-import

Mon, 10 Jul 2023 10:00:02 GMT

Проверка именования файлов и папок с помощью плагина eslint-plugin-import

Во время код ревью, можно заметить, что мы часто оставляем одни и те же комментарии об именованиях или каких-то соглашениях (которые описаны в вики, и которые никто не читает). В такой момент, нужно задуматься можно ли эти проверки как-то оптимизировать. Например недавно я писал пост о том как контролировать импорты в JS с помощью import/no-restricted-path. Сегодня я хочу рассказать о проверке именования файлов и папок.

Наверняка в вашем проекте есть какая-то определённая структура организации папок, например, это могут быть папки:

/models
/services
/stores
/pages

И скорее всего все файлы в этих папках должны иметь определённый суффикс:

Model
Service
Store
Page

И уж точно, в каждом проекте есть утилитные файлы для строк, массивов или ваших внутренних бизнес моделей. И как такие файлы только не именуют:

Helper/Helpers
Util/Utils
Utility/Utilities

Чтобы избежать всей этой путаницы и обеспечить единое именование файлов можно использовать плагин eslint-plugin-import

Плагин содержит несколько плавил:

1️⃣ check-file/filename-blocklist

Синтаксис следующий — вы описываете объект, у которого:

ключи — запрещённые паттерны
значения — тот паттерн, который рекомендуется использовать.

Например, если мы хотим обеспечить единое именование утилитных методов, чтобы все они оканчивались на `Utils`, то нам нужно запретить использование суффиксов: Helper, Util, Utilities. Также, нужно учесть, что:

Первая буква может быть как в верхнем, так и в нижнем регистрах
Все суффиксы могут быть как в единственном, так и во множественном числе

Описание такого правила будет выглядеть так:

plugins: [
  'check-file',
],
rules: {
 "check-file/filename-blocklist": [
      "error",
      {
    "**/*+([Hh]elper?(s|*)|[Uu]til|[Uu]tilitie?(s|*)).ts": "*Utils.ts"
      }
  ]
}

2️⃣ check-file/folder-naming-convention

Это правило позволяет нам задать паттерн именования папок:

ключ — паттерн для папок, которые необходимо валидировать
значение — паттерн, которому папки должны удовлетворять. В нашем случае, паттерну удовлетворяют все папки, которые не называются Helpers, Util, Utilities.

"check-file/folder-naming-convention": [
      "error",
      {
        "src/**/": "!([Hh]elper?(s|*)|[Uu]til|[Uu]tilitie?(s|*))"
      }
    ]

Все правила описываются с помощью glob-паттернов). Протестировать свой паттерн можно тут.

#linters #javascript #archtecture

📖 Why I’ve stopped exporting defaults from my JavaScript modules

Fri, 07 Jul 2023 10:00:04 GMT

📖 Why I’ve stopped exporting defaults from my JavaScript modules

Сегодня на повестке статья из далёкого и спокойного 2019 “Why I’ve stopped exporting defaults from my JavaScript modules”.

В статье автор предлагает отказаться от экспортов по-умолчанию в JavaScript. Я бы выделил 2 причины, которые кажутся для меня наиболее важными:

1️⃣ Дефолтные экспорты не указывают имя функции или класса, которую вы импортируете, что может (и будет) вызывать неконсистентность в именовании.

В одном файле вы можете указать имя LinkedList

import LinkedList from "./linked-list.js";

А в другом файле, другой разработчик может указать имя List

import List from "./linked-list.js";

В случае с именованными экспортами, вы не можете просто присвоить рандомное имя, оно должно совпадать с именем экспортируемой функции/класса/объекта

import { LinkedList } from "./linked-list.js";

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

2️⃣ Когнитивная нагрузка замедляет разработку. Если вы используете дефолтные экспорты, вам придётся самостоятельно, каждый раз указывать название импорта. В случае с именованными экспортами ваша IDE наверняка подскажет вам имя, как только вы начнёте печатать и вам останется лишь нажать Enter.

3️⃣ Если вы всегда используете именованные экспорты, вам больше не нужно выбирать между именованными и дефолтными экспортами. Например, если изначально в файле вы экспортировали только одну функцию и теперь вам нужно экспортировать ещё одну, вам не придётся заменить везде неименованные импорты на именованные.

⚠️** Исключения**

К сожалению, в некоторых ситуациях нельзя использовать именованные экспорты. Одним из примеров может служить React.lazy(() ⇒ import('../path')) используемый для код сплитинга и ленивой загрузки.

🤖** ESlint**

Чтобы убедиться, что все разработчики используют именованные экспорты, вы можете использовать правило import/no-default-export

Когда я добавлял это правило в наш проект, я наткнулся на GitLab issue, где команда Гитлаба планировали перейти с дефолтных экспортов на именованные. Они также ссылаются на эту статью.

#linters #eslint #javascript #architecture #fridayreading

В наше непростое время важно деверсифицировать не только источники доходов, но и социальные сети,…

Mon, 03 Jul 2023 10:00:04 GMT

В наше непростое время важно деверсифицировать не только источники доходов, но и социальные сети, когда заблокировать могут что угодно и когда угодно. Поэтому будет круто, если вы подпишитесь на меня на альтернативных площадках:

||Вам не сложно, а мне приятно 🙂 || #about_me

📖 What developers need to know about Chrome's Memory and Energy Saver modes - Chrome Developers

Fri, 30 Jun 2023 10:00:03 GMT

📖** What developers need to know about Chrome’s Memory and Energy Saver modes - Chrome Developers**

В конце прошлого года в Google Chrome появились 2 новых режима

Memory Saver (Экономия памяти)
Energy Saver (Энергосбережение)

Они позволяют более гибко управлять использованием системных ресурсов браузером.

🔸 Memory Saver: Этот режим автоматически освобождает неиспользуемые фоновые вкладки, чтобы освободить память для активных вкладок и других запущенных приложений. Но для сложных сайтов с интерактивностью это может привести к проблемам восстановления состояния страницы.

🔸 Energy Saver: Режим Energy Saver позволяет браузеру снизить частоту обновления экрана для экономии заряда батареи. Обычно, для большинства сайтов, не требуется внесение изменений, но если вы используете JavaScript-анимации, имейте в виду, что они могут замедлиться.

👉 Важно, чтобы веб-разработчики учитывали эти новые режимы и обеспечивали безупречный опыт для пользователей. Рекомендуется сохранять состояние пользователей при изменении их активности и обрабатывать перезагрузки страницы после удаления вкладок.

В данный момент нет никаких событий, которые будут запущены перед выгрузкой вкладки. Рекомендуются следующие способы сохранения состояния:

Периодически, когда состояние изменяется
Когда вы переходите на другую вкладку, по событию visibilitychange

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    storeState();
  }
});

💡 Не забудьте протестировать свой сайт в этих режимах, чтобы убедиться, что все работает как задумано.

Для этого можно открыть в адресной строке chrome://discards и для нужно вам вкладки использовать кнопку Urgent Discard.
Инструменты автоматического тестирования пока не помогут вам протестировать эти режимы с помощью автотестов. Но вы можете использовать простую перезагрузку страницы, она почти полностью идентична выгрузке вкладки. Разница лишь в том, что при выгрузке вкладки, события beforeunload, pagehideи unload не будут вызваны.

Подробнее можно почитать в статье

#javascript #browser #frontend #fridayreading

📖 О бизнес процессах и авторитаризме

Fri, 23 Jun 2023 10:00:02 GMT

📖 О бизнес процессах и авторитаризме

На майских праздниках я наконец-то дочитал книгу “Авторитарная Россия. Бегство от свободы, или Почему у нас не приживается демократия”.

В ней были достаточно интересные мысли, которые непроизвольно вызывали у меня ассоциации с бизнес-процессами в компаниях.

💡 Мысль

Когда в государстве творится полный хаус, экономика в ужасном состоянии и государственные институты работают, мягко сказать, не оптимально, лишь нанося вред государству, то, вероятно, на время (в лучшем случае) придётся чем-то пожертвовать, чтобы решить часть проблем. Например, демократией.

Как указывает автор, “Авторитаризм может быть подобен швам или гипсовой повязке, которые на время позволяют срастись разорванным тканям и дают тем самым травмированному организму время и шансы на то, чтобы укрепить свой потенциал для “выращивания ” новых правил игры”.

То есть, государство тем или иным образом берёт все рычаги власти в свои руки и наводит порядок “жёсткой рукой”. Таким образом временно (опять же, в лучшем случае) происходит отклонение от демократии в сторону авторитаризма.

💼 Ассоциации с бизнес-процессами в компании

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

Если в компании не настроены процессы, начальство не понимает, чем занимаются сотрудники, как выпускаются новые релизы — то одним из вариантов развития событий может быть “закручивание гаек”, когда руководство берёт максимум полномочий в свои руки и усиливает контроль за сотрудниками и процессами.

👀 Пример

Менеджер думает, что его подчинённые тратят время на что-то не то, и хочет убедиться, что каждая минута их времени приносит пользу. В этом случае, вас могут попросить трекать время или слать ежедневные отчёты.

Также как и в политическом контексте это можно отразиться на настроениях общества/сотрудников и они могут уехать из страны/найти другую работу.

P.S. Главное не слишком сильно закручивать гайки, иначе весь механизм разлетится вдребезги.

#processes #book #politics #fridayreading

❓Как восстановить удалённый коммит в Git?

Mon, 19 Jun 2023 10:00:01 GMT

❓Как восстановить удалённый коммит в Git?

На днях я писал базовый компонент выпадающего меню. Всё как обычно, закончил работу и закоммитил.

Потом понял, что закоммитил в мастер, а не в ветку с фичей. Поэтому сделал git reset --soft, чтобы удалить коммит, сохранив все изменённые файлы, и переключился в фича ветку.

Если ветки сильно отличаются, то иногда приходится делать git clean -fxd, чтобы удалить все ненужные артефакты. И тут я понял, что удалил все свои изменения.

Повезло, что перед этим я закоммитил свои изменения, хотя коммит и был удалён. Ведь git позволяет восстановить удалённые коммиты. Для этого я сделал:

git reflog

Нашёл в списке хэш моего коммита и перенёс из него все изменения в текущую ветку с помощью: git cherry-pick —no-commit <hash>

#git

📖 Неделя после пуска или Cooldown week

Fri, 16 Jun 2023 10:00:01 GMT

📖 Неделя после пуска или Cooldown week

Как часто после очередного спринта вы чувствуете, что

в одном месте не успели отрефакторить
в другом месте не успели дописать документацию
где-то осталось пару багов, которые было бы неплохо пофиксить
нужно рассказать команде о важных (или не очень) архитектурных изменениях или базовых компонентах, которые были добавлены

Кроме того, вам в любом случае нужно время между релизами, чтобы

подвести итог прошлого релиза
запланировать следующий

В этом случае вам подойдёт Cooldown Week подход (Неделя после пуска), который поможет вам закрыть все недоделки (или, по крайней мере, самые важные из них), прежде чем погрузиться с головой в новый спринт.

“Неделя после пуска” — это не какой-то набор обязательных активностей, вы можете применять её в своей компании под ваши собственные нужды.

Такой подход используется в Basecamp и в Бюро Горбунова

#processes #fridayreading #planning

🍎 Хочу поделиться Apple Shortcuts для добавления в инбокс Notion

Mon, 12 Jun 2023 10:00:01 GMT

🍎** Хочу поделиться Apple Shortcuts для добавления в инбокс Notion**

Хочу поделиться с вами отличной находкой, связанной с Apple Shortcuts. Год назад я упоминал, что с помощью Apple Shortcuts можно с легкостью добавлять записи в базу ноутшена, например, я использую её для добавления записей в мой инбокс.

Недавно я помогал настраивать систему управления проектами, похожую на ту, которую я использую сам, и тогда я задался вопросом: можно ли поделиться уже созданным шорткатом, чтобы не настраивать всё по-новой? И оказалось, что это вполне возможно! Просто нужно расшарить ссылку (но предварительно удалить свой токен и идентификатор базы).

Чтобы настроить это, вам нужно сделать всего лишь несколько шагов (скриншот в комментариях):

В блоке “Text” вставьте идентификатор вашей базы вместо "".
В блоке “Get contents of” вставьте ваш секретный токен интеграции вместо "".
Вместо “Name” укажите название вашего поля, если оно отличается.

Я подготовил два шаблона для добавления записей, чтобы вам было проще начать использовать это:

Инструкцию по настройке команды с нуля можно найти здесь.

Если будут вопросы — пишите, будем разбираться.

#notion #nocode #automation

🎬 Backend-Driven UI

Fri, 09 Jun 2023 10:00:01 GMT

🎬 Backend-Driven UI

Сегодня посоветую доклад с HolyJS — Виталий Полещук, Стёпа Михайлюк — Server-driven UI в вебе. Не пиши, а описывай свой фронтeнд

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

Backend Driven UI представляет собой подход, в котором бэкенд говорит клиенту, как должен выглядеть интерфейс. В случае с формами, например, может передаваться массив элементов, где у каждого элемента есть тип:

header
select
checkbox
…

клиент проходится по этому массиву и рендерит соответствующий UI компонент. Таким образом реализация компонентов находится на фронте, а их расположение и взаимодействие на бэке.

👍 Основные преимущества Backend Driven UI

Возможность делегировать создание форм бэкендерам или аналитикам
Мгновенные релизы, достаточно обновить данные на сервере для изменения формы сразу на всех устройствах

Ещё по теме:

Яндекс выпускает DivKit — фреймворк для server-driven UI с открытым кодом

#fridayreading #frontend #architecture

🏃 Пару лет назад в качестве целей на год я добавил «пробежать полумарафон». Теперь наконец-то…

Mon, 05 Jun 2023 07:08:58 GMT

🏃 Пару лет назад в качестве целей на год я добавил «пробежать полумарафон». Теперь наконец-то можно вычеркнуть этот пункт из давно потерянного списка.

🧮 Задача на знание замыканий в JavaScript

Mon, 22 May 2023 10:00:03 GMT

🧮** Задача на знание замыканий в JavaScript**

Если вам приходится собеседовать начинающих фронтендеров, то следующая простая задача поможет вам проверить, понимает ли разработчик принцип работы с замыканиями, и может ли он применять их на деле.

/** 
* Нужно написать функцию, которая принимает число N и возвращает функцию,
* вызов которой первые N раз возвращает 'yes', а потом – 'no'.
*/
function canGetCount(n) {
    // code here
}

const getOne = canGetCount(2);
 
getOne()  === 'yes'
getOne()  === 'yes'
getOne()  === 'no'

#javascript #interview

📖 Выравнивание последнего элемента по правому краю с помощью flexbox

Fri, 19 May 2023 08:00:03 GMT

📖 Выравнивание последнего элемента по правому краю с помощью flexbox

Сегодня хочу порекомендовать короткую, но очень полезную статью о флексбоксах How to Align Last Flex Item to Right.

Довольно часто необходимо сверстать UI, в котором все элементы выровнены слева, и только один необходимо выравнять по правому краю.

Раньше я делал так:

Создавал 2 div’а-обёртки
Всё что должно быть слева клал в левый div
Элемент, который должен быть справа, клал в правый div
К родительскому элементу применял justify-content: space-between

Это решение всегда работает, но можно обойтись и без div’ов-обёрток. Всё, что нужно сделать — применить margin-left: auto к элементу, который должен располагаться справа.

Вот простой пример разметки из трех элементов и соответствующий CSS-код, где последний элемент выравнивается по правому краю.

HTML разметка:

<div class="flex-container">
  <div class="flex-item">Первый элемент</div>
  <div class="flex-item">Второй элемент</div>
  <div class="flex-item align-right">Последний элемент</div>
</div>

CSS код:

.flex-container {
    display: flex;
}
 
.flex-item {
    border: 1px solid black;
}
 
.align-right {
    margin-left: auto;
}

💡 Пояснение Дело в том, что всё свободное пространство будет распределено между auto-маржинами. Подробнее можно почитать в спеке флексбоксов Aligning with auto margins.

#html #css #flexbox #fridayreading

🧮 Задача на знание this в JavaScript

Mon, 24 Apr 2023 10:00:02 GMT

🧮 Задача на знание this в JavaScript

Иногда на собеседованиях дают подобные каверзные задачи, в которых необходимо хорошо понимать, как работают одновременно: стрелочные функции, контекст this и замыкания. Вот одна из задач, которую мне давали на собеседовании пару лет назад.

Что будет выведено в консоль?

function foo() {
  const x = 10;
 
  return {
    x: 20,
    bar: () => console.log(this.x),
    baz() {
      console.log(this.x);
    },
  };
}
 
foo.x = 50;
 
const obj1 = foo();
obj1.bar(); // ?
obj1.baz(); // ?
 
const obj2 = foo.call({ x: 30 });
const x = obj2.bar;
x(); // ?
obj2.bar(); // ?
obj2.baz(); // ?

Необходимая теория для решения задачи

this - контекст вызова функции. Если метод вызывается не на объекте, то this — глобальный объект window, иначе this указывает на объект, на котором был вызван метод.
У стрелочной функции нет собственного this. Если внутри стрелочной функции идёт обращение к this, его значение, как и обычная переменная, берётся из внешнего лексического окружения.
Если метод объекта присвоить переменной, и вызвать такую переменную-функцию, то контекст потеряется и this будет ссылаться на window. Но это не работает в случае стрелочной функции, так как у неё нет собственного this, поэтому и потерять она его не может.

Разбор задачи построчно 6. bar — стрелочная функция, this берётся из лексического окружения 7. baz — обычная функция, поэтому this будет ссылаться на возвращаемый объект 15. Так как функция foo вызывается не на объекте, то this в этом случае равен глобальному объекту — window. 16. Так как стрелочная функция берёт this из лексического окружения, то this = window. В консоль будет выведен undefined, потому что на window не определено свойство x. 17. Функция baz реализована с помощью обычной функции, поэтому в данном случае this ссылается на сам объект. В консоль будет выведено 20. 19. Здесь явно указывается контекст вызова функции — объект { x: 30 } 20-21. Так как метод bar реализован с помощью стрелочной функции, то контекст в данном случае не теряется. Используется контекст из лексического окружения — { x: 30 }. В консоль будет выведено 30. 22. Вызывается тот же метод bar, логика точно такая же. В консоль будет выведено 30. 23. Явное указание контекста при вызову функции foo никак не влияет на функцию baz, так как метод вызывается на объекте, и контекстом будет являться данный объект. В консоль будет выведено 20.

**Ответ **⬇️ undefined 20 30 30 20

Теория по теме

#javascript #interview

📖 Процесс ревью кода структурно порочен. Вот, как его исправить

Fri, 21 Apr 2023 10:00:01 GMT

📖 Процесс ревью кода структурно порочен. Вот, как его исправить

На ревью слишком много времени тратится на переключение контекста и ожидание автора и ревьера:

После создания PR’а, мы ждём, когда ревьюер закончит свои дела и изучит код автора.
Если необходимо внести изменения, то приходится ждать, когда вернется автор и внесет изменения, ведь скорее всего он уже занимается следующей задачей.
И всё повторяется снова до тех пор, пока качество не удовлетворит ревьюера.

Часто ревьюер — более опытный коллега и он знает, какие подходы лучше использовать и как нужно делать. Высока вероятность, что автору будет необходимо внести изменения, так как его видение отличается от видения ревьюера.

Поэтому нужно начинать ревью еще до того как PR готов, чтобы вероятность переделывания задачи была как можно ниже. Чем раньше произойдёт ревью — тем меньше будут отличаться видения, меньше изменений будет необходимо внести, и тем быстрее работа будет завершена.

К тому же, если весь код уже готов и работает, и автор потратил много часов на его реализацию, какова вероятность, что вы попросите его вносить изменения? Слишком жалко потраченного времени.

Как решить?

Обсудить план решения с более опытным коллегой, чтобы в дальнейшем пришлось меньше переделывать
Произвести первое ревью, когда изменения готовы на 30-50%. Скорее всего ваш план не сработал на 100%, поэтому ваши видения с ревьюером снова разошлись, поэтому нужно снова провести ревью. Здесь необходимо смотреть на концепцию решения задачи и не придираться к небольшим ошибкам.
Чтобы сократить время ожидания ревьера можно ввести роль дежурного по ревью. Как только появляется PR, ревьер сразу же приступает к ревью. В свободное время ревьюер занимается низкоприоритетными задачами: техническим долгом или неважными багами.

Конечно, подход с дежурным сработает не в любой команде. Если проект и команда очень большие, то такой подход вряд ли подойдёт, ведь ни один человек в команде не будет полностью разбираться как реализован продукт и просто не сможет провести качественное ревью.

#fridayreading #codereview

📖 Я наконец-то попробовал ChatGPT

Fri, 14 Apr 2023 10:00:01 GMT

📖 Я наконец-то попробовал ChatGPT

Я не особо успеваю за трендами, поэтому попробовать ChatGPT дошли руки только сейчас.

Регистрировался по инструкции из статьи.

Перед регистрацией почистил куки браузера
В качестве VPN использовал VeePN-расширение для хрома
Для регистрации использовал свой google аккаунт
Пользовался сервисом OnlineSim для регистрации иностранного номера чтобы получить SMS код для регистрации
Пополнил счёт на 50 рублей через СБП
Пользовался Нидерландским номером для регистрации, который купил за $0.54
Без VPN не могу зайти на сайт ChatGPT
Переодически нужно перезагружать страницу

Я попросил его написать пост на основе текста, который вы прочитали выше и вот что получилось

#chatgpt #fridayreading

Контроль импортов с помощью import/no-restricted-paths

Tue, 11 Apr 2023 10:00:03 GMT

Контроль импортов с помощью import/no-restricted-paths

Когда мы задумываемся о структуре проекта — то мы подразумеваем некоторое разделение на области/модули, где каждый модуль имеет свою зону ответственности. Помимо этого, зачастую, один модуль не должен ничего знать о другом, иными словами, ему запрещается импортировать что-либо из другого модуля.

Пример 1️⃣ Допустим у нас есть:

ui-kit — папка с базовыми компонентами
rest-api — папка с сервисами для коммуникации с сервером Очевидно, что содержимое rest-api не должно ничего знать о компонентах.

Пример 2️⃣ Теперь представим, что у нас есть 2 папки:

components — базовые компоненты, кнопки, инпуты, …
domains — реализация фичей, например форма логина В этом случае содержимое domains может использовать любые компоненты из components, но не наоборот. Если мы хотим использовать компонент из domains в components, правильнее будет перенести его также в components.

Решение ✅ Eslint предоставляет мощное правило import/no-restricted-paths, которое поможет описать зависимости между папками/модулями и запретить нежелательные импорты, описанные в примерах.

Если вы используете CRA вам достаточно добавить следующий код в package.json в поле eslintConfig. В примере ниже мы запрещаем любые импорты из папки domains в папку components из примера 2.

"rules": {
  "import/no-restricted-paths": [
    "error",
    {
      "zones": [
        {
          "target": "./src/components",
          "from": "./src/domains"
        }
      ]
    }
  ]
},
"settings": {
  "import/resolver": {
    "node": {
      "extensions": [
        ".js",
        ".jsx"
      ]
    }
  }
}

Если вы используете TypeScript, дополнительно нужно установить пакет eslint-import-resolver-typescript и изменить поле settings следующим образом:

"settings": {
    "import/resolver": {
      "typescript": {
        "project": "./tsconfig.json"
      }
    }
  }

Подробнее можено почитать в статье Как правила линтинга влияют на архитектуру приложения

#linters #javascript #typescript #architecture

📖 React 18 — useTransition, useDeferredValue

Fri, 07 Apr 2023 10:00:03 GMT

📖 React 18 — useTransition, useDeferredValue

React 18 вышел уже почти год назад, но только сейчас решил поискать наглядные примеры использования новых хуков useTransition и useDeferredValue и наткнулся на отличное видео “Новые хуки useTransition и useDeferredValue в React 18”. Оба хука работают благодаря конкурентному режиму, который позволяет прерывать рендеринг.

Пример

Допустим у нас есть поле поиска и очень длинный список заказов. При каждом изменении мы ре-рендерим список. Например, вы хотите купить новый айфон и вводите iphone в поле поиска, ре-рендеринг произойдёт 6 раз (для значений i, ip, iph ipho, iphon, iphone) — на каждое изменение. К тому же пока рендеринг не завершён — основной поток приложения заблокирован и пользователь не может взаимодействовать с приложением, из-за чего страдает UX. Однако это очень не оптимально, ведь когда мы вводим каждый новый символ, предыдущие результаты поиска для нас больше неактуальны и было бы логичнее приостановить рендеринг и запустить новый.

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

Вероятно вы не замечаете проблем с производительностью на своём Macbook Pro M2, но далеко не у всех пользователей такие же шустрые устройства. Но вы можете стать ближе к народу и включить эмуляцию медленной производительности в DevTools в Performance ⇒ CPU ⇒ 6x slowdown.

useDeferredValue не содержит конкретного таймаута, для обновления значения. Реакт сам решит, когда значение будет обновлено в зависимости от от того, насколько Реакт в данный момент занят другими вычислениями. Принцип работы хука довольно простой, когда useDeferredValue получает новое значение — под капотом запускается ре-рендер, если этот ре-рендер не прерван — UI обновляется. Но если хук получил ещё одно новое значение — то старое состояние устарело, вычисление виртуального дома прерывается и процесс начинается заново.

Принцип работы работы useTransition аналогичен — если startTransition запускается несколько раз — отрендерится лишь последний результат, а все предыдущие будут прерваны.

Оба хука взаимозаменяемы:

Используйте useTransition, если у вас есть доступ к обновлению состояния
Используйте useDeferredValue, например, если вам необходимо запустить обновление в ответ на изменение пропса.

Подход похож на debounce, но это не одно и то же. Когда мы используем debounce, рендер просто откладывается, но мы не можем его прервать, и UI всё равно может зависнуть через указанный таймаут.

Ещё по теме

#fridayreading #react #javascript #frontend

▶️ Интегрируем Яндекс Музыку в Visual Studio Code

Mon, 03 Apr 2023 09:00:03 GMT

▶️ Интегрируем Яндекс Музыку в Visual Studio Code

3 года назад я начал писать расширение для Яндекс Музыки, за это время пришлось решить много интересных задач:

1️⃣ Создание библиотеки для Яндекс.Музыки 2️⃣ Создание OpenAPI схемы и обход CORS 3️⃣ Воспроизведение музыки с помощью Electron 4️⃣ Ну и собственно интеграция всего этого в VS Code

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

➡️ Интегрируем Яндекс Музыку в Visual Studio Code ⬅️

#yandexmusic #vscode #javascript #openapi

Интегрируем Яндекс Музыку в Visual Studio Code

Sun, 02 Apr 2023 00:00:00 GMT

Представьте, что вы можете слушать свои любимые песни на Яндекс.Музыке, прямо из своего любимого редактора кода, не переключаясь между приложениями. Это уже не мечта, а реальность! В этой статье мы рассмотрим, как интегрировать Яндекс.Музыку в Visual Studio Code и наслаждаться любимой музыкой прямо во время работы.

📖 Avoid These Common Pitfalls Of React useState

Fri, 17 Mar 2023 10:00:10 GMT

📖 Avoid These Common Pitfalls Of React useState

Статья описывает самые популярные ошибки при использовании useState в Реакте:

Избыточное состояние (Redundant State)
Дублирующее состояние (Duplicate State)
Обновление состояния через useEffect (Updating State Via useEffect)
Подписка на изменения состояния через useEffect (Listening To State Changes Via useEffect)
Конфликтующие состояния (Contradicting State)
Состояние с глубокой вложенностью (Deeply Nested State)

Среди описанные проблем нашёл практически кусок своего кода, связанный с асинхронными запросами — пример как не надо делать прикреплён. Чтобы не совершать таких ошибок, нужно вспомнить о некоторых рекомендациях, когда лучше использовать useReducer:

Для управления объектом, лучше использовать useReducer
Для управления состояниями, зависящими друг от друга, лучше использовать useReducer — как раз этот случай и описывается в статье

#react #frontend #fridayreading

📖 Не трогайте разработчиков. Отстаньте. Просто не беспокойте

Fri, 10 Mar 2023 10:00:08 GMT

📖 **Не трогайте разработчиков. Отстаньте. Просто не беспокойте ** Статья описывает настройку процессов таким образом, чтобы по минимуму отвлекать разработчиков. Для этого назначается дежурный, который отдувается за всех. Например, у вас есть команда поддержки, которая постоянно дергает разработчиков, когда не может справиться самостоятельно. Можно назначить дежурного — именно этого человека и будут дергать, а он будет стараться решить проблему самостоятельно, и дергать команду только в крайнем случае, таким образом остальные могут быть сконцентрированы на своих задачах.

Возможные обязанности дежурного:

Защищать команду, чтобы её никто не отвлекал лишними вопросам или созвонами
Менеджер обращается к дежурному, заказчики также ходят с вопросами к дежурному
Следить за метриками
Писать постмортемы
Проверять написанную документацию за разработчиками
Следить, чтобы не было повторяющейся работы. Если вам часто нужно делать одно и тоже, то дежурный это всё запишет и составит задачи на автоматизацию
Выкатывать релизы

Плюсы:

Дежурный погружается в специфику работы команды и продукт более глубоко
Снижается нагрузка на команду и она может спокойно заниматься своими задачами
Дежурства помогают навести порядок там, куда обычно не доходят руки. Зачастую дежурный делает то, что должен разработчик, но ему всегда некогда.
Смена деятельности

Особенности процесса

Кажется что производительность команды снизится, но на самом деле этого не должно произойти — ведь остальные будут сосредоточены на решении задач и будут более продуктивны
Дежурят только желающие, никого не заставляют
Для обучения можно назначать двух дежурных, один — опытный, второй — новичок. Опытный ничего не делает руками, кроме ЧП ситуаций, так происходит обучение новичка.
Может быть несколько дежурных: кто-то отвечает за релизы, кто-то за поддержку
У дежурного не должно быть релизных задач, если у него появляется свободное время:
- Он дописывает документацию
- Работает над техническим долгом
- Автоматизирует бизнес процессы
- Фиксит баги

Как начать вводить

Выписать всё, что может отвлекать
Начать автоматизировать то, что можно
- Создание метрик
- Релизы
На релиз другой уменьшить количество продуктовых задач и заняться автоматизацией и внутренними инструментами, чтобы увеличить продуктивность команды в будущем
Начать вводить дежурства с опытным наставником

https://habr.com/ru/company/gazprombank/blog/678000/

#fridayreading #processes

📖 Мигрируем БД в продакшене без даунтайма

Fri, 03 Mar 2023 10:00:13 GMT

📖 Мигрируем БД в продакшене без даунтайма

Основной совет, который даётся в статье — нужно разбивать деплой новой фичи на 2 и более части, чтобы соблюсти обратную совместимость. Это очень важно, если для выкатки новой фичи необходимо изменить схему базы данных.

Обратная совместимость необходима, потому что во время деплоя в кластере будут одновременно инстансы со старой версий и обновлённой версией приложения, и нам необходимо обеспечить их одновременную бесперебойную работу.

Например, если требуется удалить поле из БД, нужно выполнять деплой в 2 захода:

Удаляем весь код, работающий с этим столбцом — деплоим
Удаляем столбец и снова — деплоим

Если бы мы удаляли одновременно поле и код, взаимодействующий с кодом, то мы бы столкнулись с ситуацией, когда старые версии, всё ещё будут пытаться обращаться к этому полю, но так как поле удалено — это может привести к даунтайму.

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

https://habr.com/ru/post/664028/

#fridayreading #architecture

📄 Офлайн-режим в Google Docs и Notion

Mon, 27 Feb 2023 10:00:10 GMT

📄 Офлайн-режим в Google Docs и Notion

В прошлом году на майских праздниках я ездил в Нижний Новгород, и в дороге мне было необходимо написать документ по работе. Как известно, в поезде интернета нет практически никакого. Поэтому сперва я решил составить документ локально, а потом перенести в гугл документы, чтобы поделиться с коллегами. Но я вспомнил об офлайн-режиме в гугл документах и решил его протестировать.

Честно говоря, я был в восторге. Когда появилась сеть я открыл нужный мне документ и активировал офлайн режим (File ⇒ Make available offline). После этого вы можете просто работать над своим документом, и как только появится интернет все изменения будут сохранены в облаке, а до тех пор все изменения будут храниться локально. Офлайн-режим также доступен в Google Sheets и Google Slides.

Команда Notion также работает над офлайн-режимом. Он работает примерно так же как и в гугл документах - необходимо просто открыть страницу и не закрывать её, после этого вы можете свободно работать над документом, как только появится интернет — все изменения будут сохранены.

#notion #googledocs #documentation

🎨 Первый дизайн в Figma

Thu, 23 Feb 2023 08:48:14 GMT

🎨 Первый дизайн в Figma

Нарисовал небольшую обложку для расширения Я.Музыки. Всё оказалось гораздо проще, чем я думал. Ссылки, которые использовал при создании дизайна:

1️⃣ Gradients in Figma 2️⃣ Guide to components in Figma

#design #figma #yandexmusic #vscode

🎨 Excalidraw — сервис для рисования диаграмм

Mon, 20 Feb 2023 10:00:10 GMT

🎨 Excalidraw — сервис для рисования диаграмм

На днях узнал о классном сервисе для рисования диаграмм

В бесплатной версии можно работать лишь на одном холсте, но его можно сохранить локально и таким образом работать над несколькими диаграммами
Доступные разные стили оформления текста, мне очень нравится рукописный
Можно использовать сторонние библиотеки компонентов, например, чтобы рисовать UML диаграммы

#tools #documentation #digrams

📖 Как платформа управления знаниями упрощает онбординг — TEAMLY

Fri, 17 Feb 2023 13:44:26 GMT

📖 Как платформа управления знаниями упрощает онбординг — TEAMLY

Недавно решил разобраться как правильно проводить онбординг в компании и написал об этом пару постов: 1️⃣ Система онбординга комфорт-класса 2️⃣ Матрица компетенций

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

Раньше я скорее всего выбрал бы Notion, но в текущих обстоятельствам не очень надёжно класть все яйца в одну корзину, особенно если корзина имеет возможность блокировать пользователей из-за санкций. Поэтому решил посмотреть на аналоги на Российском рынке и наткнулся на TEAMLY — отечественную платформу для совместной работы и управления знаниями.

Всё это вылилось в статью Как платформа управления знаниями упрощает онбординг — TEAMLY.

Статья расскажет:

как проходили мои онбординги
зачем нужен качественный онбординг и кому он выгоден
как правильно провести онбординг
как TEAMLY может помочь в проведении онбординга

#fridayreading #processes #onboarding

⚙️ Автоматизация Code Review — DangerJs

Mon, 13 Feb 2023 10:00:12 GMT

⚙️** Автоматизация Code Review — DangerJs**

Некоторое время назад, я осознал, что бОльшую часть времени во время Code Review, я трачу совсем не на то, чтобы проверить, что задача выполнена корректно. БОльшая часть времени уходит, чтобы убедиться, что разработчики следуют правилам, стандартам и договорённостям.

Многие проблемы можно решить с помощью линтеров:

Многие, но к сожалению не все, и в этом случае можно попробовать использовать Danger. Danger — это такой линтер, который позволяет нам описывать наши правила с помощью JS, Ruby, Swift, Python или Kotlin. Я использую DangerJS.

Примеры

Проверка опечаток в *.md файлах
Проверка использования `test.skip`
Проверка npm пакеты на наличие уязвимостей
Генерация размера JS-бандла Больше примеров можно посмотреть здесь, а список уже реализованных правил в виде плагинов можно посмотреть здесь.

Преимущества

Чем быстрее вы получите фидбэк — тем лучше. То как быстро отработает Danger, зависит лишь от конфигурации вашего CI, в отличие от вашего коллеги, его не нужно ждать, пока он доделает свои задачи.
Также применение Danger может положительно сказаться на отношениях в коллективе. Вас не будет раздражать тот умник, который указывает вам, что вы опять что-то сделали не так.

Как понять что автоматизировать? Самый простой пример — понаблюдать за собой во время код ревью, какие комментарии вы обычно оставляете? Какие ошибки допускаете вы и ваши коллеги? Можно составить список повторяющихся проблем и попробовать их автоматизировать с помощью DangerJS.

Ещё по теме:

#codereview #tools

Технотекст 2022: шорт-листы по номинациям

Sat, 11 Feb 2023 14:39:27 GMT

Технотекст 2022: шорт-листы по номинациям

Вчера Хабр опубликовал список лучших статей отправленных на Технотекс. Рекомендую посмотреть — там довольно много интересного. К сожалению, моя статья в список не попала(

https://habr.com/ru/company/habr/blog/715670/

#fridayreading #habr

💭✍️ Мышление письмом

Fri, 03 Feb 2023 08:26:25 GMT

💭✍️ Мышление письмом

Сам того не подозревая в прошлом году я начал практиковать мышление письмом. Я перестал сразу бросаться писать код, вместо этого, в начале я записываю свои мысли и обдумываю задачу. Во время решения сложных задач я выписываю все свои мысли, а при реализации большой фичи стараюсь составить план и описать принцип её работы. Всё это очень упрощает реализацию.

Зачем?

По закону Миллера мы не можем держать в голове более 7-ми элементов
Задача нашего мозга — генерация идей, а не запоминание. Лучше записывать идеи и обдумывать их пока они не ускользнули от вас

Примеры применения:

Если вы описываете свои мысли, то вы сможете проще писать документацию в проектах. Ведь большая часть уже готова — необходимо лишь немного причесать
При решении задачи, просто накидывайте все идеи и начинайте их письменно продумывать. Если всё это делать в голове — вам мозг просто закипит и вы забудете почему те или иные варианты плохи, а какие хороши
В дальнейшем вы сможете обосновать почему вы приняли то или иное решение
Ведение проектов в Notion — мышление письмом, ведь при создании проекта всё записывается в систему. Не нужно запоминать план действий — он зафиксирован, вы его не забудете
Ведение блога — тоже мышление письмом. Ведь при написании поста вы записываете все свои мысли, а в дальнейшем сможете к ним вернуться.

Статья также расскажет, как данный подход:

Может улучшить психологическое состояние
Используется в Amazon
Используется для исследовательских задач

https://habr.com/ru/post/526336/

#fridayreading

Индикаторы прогресса в Notion

Wed, 01 Feb 2023 06:00:09 GMT

Индикаторы прогресса в Notion

Наконец-то дошли руки добавить прогресс бар в свои проекты в Notion. Шаблон тоже обновил. Если хотите так же - вам сюда.

#notion

Проект "Феникс"

Fri, 27 Jan 2023 06:00:05 GMT

**Проект “Феникс” ** На новогодних праздниках я наконец-то прочитал Проект “Феникс”. Рекомендую к прочтению, если в вашей компании всё происходит хаотично, вечные авралы и сотни незавершенных фич, которые переносятся из релиза в релиз. В книге раскрываются следующие моменты:

Для чего необходим таск трекер и какие проблемы он решает — все изменения должны отслеживаться, чтобы можно было понять, какие изменения приводят к сбою.
Не нужно помечать все задачи как “срочные”, иначе не будет понятно над чем именно необходимо работать.
Необходимо увеличивать производительность в узких местах — система работает настолько быстро, насколько работает самое медленное её звено. Если у вас есть сотрудник, на котором многое завязано, необходимо как можно сильнее разгрузить его и обучить других сотрудников.
Если у вас постоянные авралы — возможно вам необходимо поставить часть ваших проектов “на паузу” и сосредоточиться на наиболее критических, которые наиболее важны. Если в вашем продукте слишком много багов — необходимо сосредоточиться на его стабилизации.
Возможно даже стоит запустить новые проекты, которые помогут заранее выявить проблемы, до того как они будет замечена пользователями, например, внедрить систему мониторинга. Это поможет снижать объем “незапланированной работы”.
Необходимо выплачивать свой “технический дол”, иначе в дальнейшем придётся тратить слишком много времени на выплату процентов в виде незапланированной работы.
Не стоит загружать сотрудников на 100% при планировании, ведь по ходу работы будут появляться новые задачи — “незапланированная работа”, и у сотрудника не будет времени их решить. “Время ожидания — это “процент занятого времени”, разделённый на “процент свободного”“.
Если ваша команда перегружена нужно уметь говорить “нет” новой работе.
Если вы человек, который устанавливает правила — вам следует самому играть по этим правилам, иначе никто этого делать не будет.
Как CI/CD может ускорить разработку, почему важно релизиться как можно чаще. Например, чтобы быстро выкатывать баг фиксы.

https://www.litres.ru/book/proekt-feniks-roman-o-tom-kak-devops-menyaet-biznes-k-luchshemu-11083697/

#fridayreading #book

Система онбординга комфорт-класса

Fri, 20 Jan 2023 06:00:03 GMT

Система онбординга комфорт-класса

Цель хорошего онбординга — получить максимум производительности от сотрудника в короткий срок. Это не значит, что из сотрудника нужно выжать всё до последней капли, онбординг должен проходить максимально комфортно с минимумом стресса.

⁉️ Почему онбординг — это очень важный процесс?

Онбординг — это первое с чем сталкивается новый сотрудник, поэтому его оценка компании напрямую зависит от онбординга.
При плохом онбординге сотрудник долго выходит на желаемую производительность. В то время как при хорошем онбординге, сотрудник мог бы принести больше пользы за те же деньги.
При плохом онбординге, старшие разработчики вынуждены постоянно отвлекаться и вкладываться в развитие нового сотрудника, вместо решения задач.
Ну и в конце концов, просто морально сложно, когда тебе приходится разбираться во всём самому, когда тебе ничего не рассказали, не показали, не объяснили. Это очень демотивирует, и компания рискует потерять сотрудника на самом старте.

👍 Хороший онбординг выгоден всем

Сотрудник быстрее приносит реальную пользу компании, тратит меньше времени, сил и нервов
Бизнес тратит меньше денег на выход специалиста на нужную производительность
Работники меньше тратят времени на онбординг и занимаются решением бизнес задач

🏁 Как начать

Вы можете написать базовую документацию, по которой будет происходить онбординг
Можно протестировать инструкцию на товарище по команде
Во время онбординга нового сотрудника, вы протестируете инструкцию, внесёте коррективы и сможете использовать её в будущем постоянно улучшая
Перед увольнением сотрудники могут писать документацию для их зоны ответственности
Необходимо подготавливать вводные задачи для нового сотрудника

🕵️‍♂️ Кто проводит онбординг

Онбординг на уровне компании должен проводиться HR-отделом
Локальный онбординг в команду, необязательно проводится тимлидом, но именно тимлид должен настроить этот процесс. Сам онбординг он может делегировать кому-нибудь из команды.

📖 Что должно быть в онбординге Скорее всего в каждой команде набор инструкций будет разным, например:

Основные процессы в команде
- Когда у вас проходят стендапы, в каком формате
- По каким дням демо, как его проводить
- Код ревью
- Планирование технического долга
Проекты
- Настройка и запуск проекта
- Технологии
- Архитектура
- Гайдлайны
Как общаться с заказчиками
Ожидания от разработчика

https://www.youtube.com/watch?v=7zrRzELnr8U&ab_channel=ManagementChannel

#fridayreading #processes

Задачи на собеседовании JavaScript разработчика

Mon, 16 Jan 2023 06:00:07 GMT

Задачи на собеседовании JavaScript разработчика

Напишите функция вычисления последовательности фибоначи


function fib(n) {
  // TODO: implement
}

fib(5); // [0, 1, 1, 2, 3]
fib(7); // [0, 1, 1, 2, 3, 5, 8]
fib(11);// [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55]

Напишите функцию, которая будет проверять на “глубокое” равенство 2 входящих параметра


function deepEqual(a, b) {
  // TODO: implement
}

const source = {a: 1, b: {c: 1}}

const test1 = {a: 1, b: {c: 1}}
const test2 = {a: 1, b: {c: 2}}
const test3 = {a: 1, c: {b: 1}}
const test4 = {a: 1, c: 2}
const test5 = {c: 2, a: 1}
const test6 = {a: 1, b: {c: {d: 5}}}

console.log(deepEqual(source, test1)) // -> true
console.log(deepEqual(source, test2)) // -> false
console.log(deepEqual(source, test3)) // -> false
console.log(deepEqual(source, test4)) // -> false
console.log(deepEqual(source, test5)) // -> false
console.log(deepEqual(source, test6)) // -> false

Напишите функцию, которая принимает два аргумента:

Массив из ЦЕЛЫХ ПОЛОЖИТЕЛЬНЫХ ЧИСЕЛ и сумму в виде целого числа.
Функция должна вернуть все ПОДПОСЛЕДОВАТЕЛЬНОСТИ чисел массива из аргумента, сумма которых равна числу, которое приходит вторым аргументом.
Если решения нет, вернуть пустой массив.

function findSum(array, targetSum) {
    //TODO: implement
}

array = [1, 5, 4, 1, 11, 1, 10, 9, 1, 9, 6, 4, 10]
targetSum = 10

findSum(array, targetSum)
// [ [ 1, 5, 4 ], [ 5, 4, 1 ], [ 10 ], [ 9, 1 ], [ 1, 9 ], [ 6, 4 ], [ 10 ]]

#interview #coding #interview_questions

Yandex Music Client for JavaScript

Mon, 09 Jan 2023 06:00:13 GMT

Yandex Music Client for JavaScript

За последние пару дней новогодних праздников я, наконец-то, сделал то, что собирался сделать пару лет - сгенерировал JavaScript-клиент для Яндекс.Музыки на основе OpenAPI-схемы. Что это значит? Берётся OpenAPI-схема и скармливается генератору, на основе которой генерируется библиотека на определённом языке программирования, которая может использоваться для отправки запросов на сервер.

👉 Описание OpenAPI-схемы на GitHub 👉 Для генерации клиента используется openapi-typescript-codegen 👉 JavaScript-клиент Яндекс.Музыки на npm - yandex-music-client 👉 Теперь VSCode-плагин для Яндекс.Музыки использует пакет yandex-music-client

Установка npm i yandex-music-client

Пример использования

import { getToken } from 'yandex-music-client/token';
import { YandexMusicClient } from 'yandex-music-client/YandexMusicClient'
 
const token = await getToken('your email', 'your password');
 
const client = new YandexMusicClient({
    BASE: "https://api.music.yandex.net:443",
    HEADERS: {
        'Authorization': `OAuth ${config.token}`
      },
});
 
client.landing.getNewReleases();

#javascript #yandexmusic #openapi

📖 Как браузер рендерит веб-страницу

Fri, 23 Dec 2022 06:00:12 GMT

📖 Как браузер рендерит веб-страницу

Для фронтенд-разработчиков очень важно знать, как происходит отрисовка веб-страницы на всех этапах: от отправки запроса на сервер до отображения картинки, которую мы видим в браузере.

Чтобы быстро разобраться в основах можно почитать следующие 3 статьи:

Затем, чтобы погрузиться в детали — можно прочитать статью:

How the browser renders a web page? — DOM, CSSOM, and Rendering

А какие статьи помогли вам разобраться в теме?

#fridayreading #javascript #browser #css #html #performance #rendering

☠️ Временная Мёртвая Зона

Mon, 19 Dec 2022 07:00:12 GMT

☠️ **Временная Мёртвая Зона

**Временная мёртвая зона (ВМЗ) — участок от начала блока кода, до строки, где переменная объявлена и инициализирована. Понятие ВМЗ применяется только к переменным определённым с помощью let и const.

Строки 2-5 — временная мёртвая зона. Область видимости переменной there началась (из-за “поднятия” переменных в JS), но она всё еще не объявлена, поэтому при доступе к переменной произойдёт ошибка - ReferenceError
Строка 7 — конец временной мёртвой зоны

Смысл временной мёртвой зоны — лёгкость нахождения ошибок доступа к неинициализированным переменным, с которыми мы встречаемся при использовании var.

Подробнее можно почитать на MDN.

#javascript

🚀 Деплой NodeJs приложений

Mon, 12 Dec 2022 07:00:24 GMT

🚀 Деплой NodeJs приложений

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

Ещё по теме:

А каким бесплатным хостингом пользуетесь вы❓

#deploy #nodejs

📖 Матрица компетенций

Fri, 09 Dec 2022 09:02:22 GMT

📖 Матрица компетенций

Сегодня порекомендую пару докладов о составлении матриц компетенций и о том, какие проблемы они решают: 1️⃣ Универсальная карта компетенций 2️⃣ Матрица компетенций как инструмент тимлида

Некоторые основные моменты из докладов.

❓Зачем нужна матрица скиллов? Чтобы понимать

Компетенции текущих членов команды
Каких компетенций не хватает команде, каких людей необходимо нанимать
Ускорить онбординг новичков
Оценить пробелы в знаниях, наметить план обучения, индивидуальные траектории роста
Сделать понятным/прозрачным Performance Review
Где может возникнуть Bus Factor. Вовремя понять где могут возникнуть проблемы при увольнении сотрудника.
Насколько зарплата соответствует набору задач, которые решает разработчик

🏁 Как начать?

Определить задачи, над которыми вы работаете, и какие знания необходимы для их выполнения: подходы, инструменты, навыки
Определить текущие навыки каждого члена команды
- Самооценка с последующей проверкой ведущим разработчиком/тимлидом
- Устроить опрос среди всех сотрудников и оценить каждого сотрудника
- Для каждого навыка определить чёткие критерии оценки
- Создать отдельную страницу/документ по каждому навыку со всеми известными материалами/ссылками, чтобы разработчик мог быстро изучить навык
Один из способов оценки навыков:
- 0 - не знаю, не умею, не понимаю
- 1 - немного знаю/могу делать простейшие задачи
- 2 - достаточно много знаю/ могу делать большинство задач
- 3 - знаю всё, могу сделать любую задачу, учу других

🔄 Knowledge sharing Если разработчик чего-то не знает, это не его проблема, не его вина (ну почти). Это проблема компании и тимлида. Как заниматься распространением знаний в компании?

Написать документацию
Провести внутренние обучающие сессии/доклады (knowledge sharing session)
Купить обучающий курс для команды

#teamlead #skills #knowledgesharing

VS Code Yandex Music Extension ❤️ MacOS и Linux

Sun, 04 Dec 2022 15:44:01 GMT

**VS Code Yandex Music Extension **❤️ MacOS и Linux

Полтора года назад я выпустил первую более-менее стабильную версию расширения Яндекс.Музыки для VsCode. Разрабатывал я его в основном для себя, поэтому особо и не заморачивался, что поддерживается только винда, ведь именно виндой я пользовался. В прошлом феврале я перешёл на мак и с тех пор не пользовался расширением, как и все по старинке включал музыку в браузере. Пару недель назад решил всё-таки довести дело до конца и сделать расширение кроссплатформенным. Так вот, сегодня зарелизил новую версию, которая работает на всех операционках.

🐞 Проблема Для воспроизведения музыки под капотом используется Electron. Проблема в том, что он собирается под каждую платформу отдельно, поэтому раньше поддерживалась лишь та операционная система, на которой происходила сборка расширения.

✅ Решение Теперь Electron устанавливается в рантайме именно для вашей операционной системы при установке плагина YandexMusic с помощью пакета @electron/get.

#vscode #yandexmusic #extension #macos #linux

📖 Пятничное чтиво - Turmoil in Twitter

Fri, 25 Nov 2022 06:29:20 GMT

📖 **Пятничное чтиво - Turmoil in Twitter ** С небольшим опозданием, если кто-то всё ещё не в курсе — Илон Маск купил твиттер, поэтому сегодня предлагаю прочитать именно об этом. Из неё вы во всех красках сможете узнать, как Маск собирается сделать Twitter прибыльной компанией в рекордные сроки.

Несколько моментов из статьи:

Разработчиков Твиттера попросили распечатать их код для ревью с Маском и инженерами из Теслы, а затем без ревью попросили уничтожить все распечатки в шредере
В субботу утром был анонсирован новый проект — те самые верификационные галочки, а демо назначено на понедельник. То есть, Маск косвенно заставил многих работать на выходных
Даже некоторые из тех, кто работал по выходным над новой фичей, вскоре были уволены
Маск никак не общался с работниками Твиттера через официальные каналы, разработчики обо всем узнавали из новостей
Маск может быть самым богатым человеком в мире в настоящее время, но он определенно не идеальный босс для людей, которые ценят выходные для себя и своей семьи

||Статье уже 3 недели. Если вы знаете продолжение истории было бы круто, если бы вы рассказали в комментариях. Ссылки на источники приветствуются 👍.||

#fridayreading

💳 Карта UnionPay в 2022

Tue, 22 Nov 2022 06:00:23 GMT

💳 Карта UnionPay в 2022

Последний отпуск я ездил в Турцию, поэтому, чтобы чувствовать себя белым человеком и платить картой, решил выпустить карту Union Pay Русского Стандарта.

Основные моменты:

Карта не именная, поэтому можно сделать за один день
Обслуживание 3000 в год
Двойная конвертация - Лиры ⇒ Юани ⇒ Рубли. Поэтому курс может быть немного хуже официального. Но гораздо выгоднее чем покупать доллары и рубли в Российских банках. Например, если курс лиры - 3.2, то у вам посчитается примерно по курсу 3.4-3.5 рубля за лиру
Комиссия за снятие в банкоматах - 2%, минимум 100 рублей
Если вы пытаетесь использовать карту за границей и она не работает, проверьте, возможно данный банк не поддерживает карты UnionPay. Так в Черногории нет ни одного банка, который бы работал с данной платёжной системой, а в Азербайджане с UnionPay работает всего один банк.
При снятии наличных в банкомате может отображаться неверная сумма, списанная в рублях. После того как операция будет подтверждена, в приложении отобразится корректная сумма. Это наглядно можно увидеть на картинке.

Турция:

Карта работает буквально везде
Не всегда проходит оплата в долларах, оплата в лирах работает стабильно
Не всегда работает бесконтактная оплата, чип работает стабильно
В банкоматах можно снимать как лиры, так доллары и евро

Сербия:

Всё почти также хорошо, как и в Турции. Большинство банков работает с UnionPay. Но не все, я не смог снять наличку в местном Райффайзен банке.
В магазинах обычно установлено два терминала. Если оплата на первом не проходит — уточняют “UnionPay?” и просят оплатить на втором терминале. Кассир в Заре сказала, что сейчас многие русские используют UnionPay.
Лучше иметь с собой наличные, в некоторых магазинах и кафе не получится оплатить через UnionPay.

Ещё о UnionPay:

📖Пятничное чтиво - Compound Components

Fri, 18 Nov 2022 07:00:08 GMT

📖Пятничное чтиво - Compound Components

Сегодня советы для React разработчиков. Если вы не знаете, что делать со сложными компонентами, пишите сложные рендеры и используете кучу вложенных тернарников, то рекомендую ознакомиться с подходом Compound Components:

👉 Александр Дунай (Альфа-Банк) — Улучшаем качество кода React-приложения с помощью Compound Components 👉 Kent C. Dodds - React Hooks: Compound Components

#fridayreading #react

📖Пятничное чтиво

Fri, 11 Nov 2022 06:02:53 GMT

📖Пятничное чтиво

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

#fridayreading #timemanagement

Система личного планирования в Notion. Эпизод 2 — Управление проектами

Sat, 05 Nov 2022 07:29:55 GMT

Система личного планирования в Notion. Эпизод 2 — Управление проектами

В начале недели вышла первая часть статьи, где я рассказал о Инбоксе и о различных способах его настройки.

Пришло время рассмотреть вторую часть, где мы поговорим:

О том как вести проекты и задачи
Что такое еженедельный обзор
Что такое такое области ответственности
Как настроить автоматические бэкапы
Как скопировать мой шаблон и сразу начать его использовать
Как модифицировать систему под ваши нужды
Для чего лучше не использовать систему планирования

В общем, читаем, ставим лайки, подписываемся на канал 😃.

#notion #gtd #planning #PARA

Система личного планирования в Notion. Эпизод 2 — Управление проектами

Sat, 05 Nov 2022 00:00:00 GMT

Вот уже чуть больше года я активно использую Notion для планирования задач и проектов, поэтому я решил подвести некоторые итоги и систематизировать все приёмы, которые я использую. Как вы уже поняли из названия - это вторая часть, описываемой системы. В первой части я подробно рассмотрел работу с инбоксом, вторая часть будет посвящена непосредственно "Управлению проектами". Обе части полностью независимы и могут читаться по отдельности, но я всё равно рекомендую с ней ознакомиться (ссылка на первую часть о инбоксе) и настроить один их способов наполнения инбокса.

Система личного планирования в Notion. Эпизод 1 — Инбокс

Tue, 01 Nov 2022 06:34:54 GMT

Система личного планирования в Notion. Эпизод 1 — Инбокс

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

Было бы круто, если бы вы поделились, какими программами и методологиями вы пользуетесь для ведения Инбокса и Системы планирования в целом.

#notion #gtd #planning

Система личного планирования в Notion. Эпизод 1 — Инбокс

Tue, 01 Nov 2022 00:00:00 GMT

Вот уже чуть больше года я активно использую Notion для планирования задач и проектов, поэтому я решил подвести некоторые итоги и систематизировать все приёмы, которые я использую. Описание системы будет состоять из двух частей. В первой части, я хотел бы уделить отдельное внимание Инбоксу — одной из самых важных составляющих удобной системы планирования. Вторая часть будет посвящена непосредственно Управлению проектами.

📖Пятничное чтиво - Преемник

Fri, 28 Oct 2022 07:33:11 GMT

📖Пятничное чтиво - Преемник

Наконец-то в отпуске смог дочитать книгу “Преемник”, которую заказал ещё в начале года.

Удивительно, как жизнь одного человека может описать судьбу страны последних 30 лет. Книга проводит нас по всем основным событиям, которые случились после распада СССР, и описывает события, которые произошли уже в современной России:

Путч
Чеченские войны
Дефолт
Норд Ост
События на Болотной площади
и так далее

Прочитав книгу, можно знать:

На какие сделки и компромиссы нужно идти в политической борьбе
Почему решения в нашей стране принимаются именно так, как они сейчас принимаются
Как случилось так, что вся опозиция либо “сидит” либо находится за границей

Все события описываются так, что ощущение что ты сам находишься в эпицентре событий.

#fridayreading #politics #book

📖Пятничное чтиво

Fri, 07 Oct 2022 07:00:05 GMT

📖**Пятничное чтиво ** Я купил книгу Getting Things Done (GTD) около 3 лет назад и только в этом году у меня дошли руки, чтобы прочесть её. Вчера наткнулся на статью GTD за 15 минут: прагматическое руководство. Неплохо подходит, не только чтобы освежить всё это в памяти, но и как краткий экскурс в GTD. Поэтому рекомендую к прочтению.

Основные моменты:

GTD - это методика организации и отслеживания задач и проектов
Цель GTD — сделать так, чтобы человек полностью доверял бы системе сбора задач, идей и проектов
Техника GTD основана на ведении списков:
- Входящие (Инбокс)
- Следующие действия
- Список ожидания
- Проекты
- Когда-нибудь/может быть
Основная цель инбокса — разгрузить мозг. Просто записывайте все мысли, задачи, проекты, которые приходят вам в голову в инбокс.
Инбокс необходимо обрабатывать регулярно.
Определение следующего действия, которое должно быть физическим, видимым действием, приближающим проект к его цели — самое важное «правило» GTD.
Если вы делегировали задачу другому человеку, если вы отправили email и ждёте ответа — внесите это в “Список Ожидания”
Проект — это любая цель, для достижения которой нужно выполнить более одного действия
Контексты действий — это «теги», которыми снабжают элементы в списках Следующие действия. Они представляют собой сведения о том, где может быть выполнено то или иное действие, или о том, что именно нужно для его выполнения.
Еженедельный обзор — актуализация списков следующих действий и проектов. Что-то нужно перенести из списка Когда-нибудь/Может быть в список следующих действий, что-то необходимо удалить совсем, потому что это больше не актуально.

#fridayreading #gtd #planning

Диаграммы - Mermaid

Tue, 27 Sep 2022 07:00:09 GMT

Диаграммы** - Mermaid**

Хорошо нарисованная диаграмма может объяснить концепцию гораздо лучше текста, к тому же диаграмму гораздо легче понять, ведь вам не нужно ничего визуализировать у себя в голове пока вы читаете текст. Особенно часто приходится рисовать диаграммы при написании документации к коду, например, когда необходимо нарисовать архитектуру проекта или его части. Для создания диаграмм очень удобно использовать Mermaid. Синтаксис выглядит следующим образом:

graph TD; A-->B; A-->C; B-->D; C-->D;

К тому же Mermaid поддерживается:

Таким образом, вы можете хранить ваши диаграммы прямо в Markdown разметке. Просто нарисуйте вашу диаграмму в Mermaid Live Editor и скопируйте код в вашу документацию. Больше не нужно хранить диаграммы в виде картинок и искать исходники каждый раз, когда необходимо внести правки! Все ваши диаграммы — просто код.

#notion #documentation #github #gitlab

Реализация Completed Date для задач в Notion

Sun, 18 Sep 2022 08:18:06 GMT

Реализация Completed Date для задач в Notion

Последний год я использую Notion для ведения задач и проектов. Иногда полезно оглянуться и посмотреть, чем я занимался последний месяц или в четверг прошлой недели.

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

К счастью у Notion есть публичный API, который можно использовать для этих целей. Алгоритм следующий:

Получить все задачи изменённые сегодня и с пустым полем Completed At
Среди полученных задач выбрать те, что в списке Done
Выставить значение Modified At в поле Completed At

Скрипт, реализующий этот алгоритм, запускается каждый час с помощью GitHub Actions. Теперь вы можете просто добавить новое представление Done для вашей таблицы задач.

Исходники скрипта, можно найти здесь в репозитории на GitHub.

#notion

🧼 Экранирование и санитайзинг

Mon, 12 Sep 2022 07:00:10 GMT

🧼 Экранирование и санитайзинг

Для предотвращения XSS существует 2 техники:

Экранирование (Escaping) - замена опасных символов, их безопасными аналогами. Например “>” будет заменён на ”>”, “<” — ”<“. Это необходимо, так как символы “<”, “>” в HTML имеют особое значение - они определяют начало и конец html-тэга.

Санитайзинг (Sanitization) - удаление вредоносного текста в строке. Например, удаление тэга script - “Hello ” ⇒ “Hello”.

В каком случае использовать какую технику? Всегда используйте экранирование, санитайзинг должен быть использован лишь тогда, когда вы хотите позволить пользователю вводить отформатированный текст. Иными словами используйте санитайзинг, только для отображения строки, полученной с помощью WYSIWYG редактора.

Почему? Цель санитайзинга - удалить лишь опасный текст — это javascript-код, который может быть выполнен в браузере пользователя. При этом тэги <b>, <img>, <p> не несут в себе никакой опасности и они не всегда должны быть удалены из строки. Но, если мы будем использовать санитайзинг вместо экранирования, данные тэги могут сломать разметку нашего приложения.

Ещё по теме:

#xss #security #frontend

📖 Пятничное чтиво

Sat, 10 Sep 2022 10:51:52 GMT

📖 Пятничное чтиво

Пятничное чтиво с небольшим опазданием. Время от времени пишу о том, как я использую Notion. Сегодня решил порекомендовать статью о появлении любимого сервиса.

История успеха Notion: из конструктора сайтов в универсальную базу знаний

#fridayreading #notion

XSS в React

Wed, 07 Sep 2022 06:58:19 GMT

XSS в React

Одним из самых больших преимуществ реакта является его безопасный дизайн, который предотвращает появление большинства XSS (Cross-Site-Scripting) уязвимостей.

Может показаться что, если вы используете реакт, то вы в безопасности, ведь: ● React по-умолчанию экранирует текст, перед тем как его отрендерить ● dangerouslySetInnerHTML не позволяет рендерить тэг script и просто удаляет его

Однако это не так. В реакт всё ещё существуют способы эксплуатации XSS уязвимостей.

1️⃣ JavaScript URL - href аттрибут В реакте всё ещё возможно использовать javascript: схему вместо http: и https: для эксплуатации XSS. Например, если приложение позволяет вводить URL, то пользователь может ввести следующий адрес javascript:alert('XSS') . В таком случае указанный javascript код будет выполнен, когда пользователь попытается перейти по ссылке. Поэтому очень важно валидировать полученный url.

2️⃣ dangerouslySetInnerHTML В данном случае имя свойства говорит само за себя. Несмотря на то, что оно не позволяет рендерить тэг script, есть множество иных способов эксплуатации XSS с помощью этого поля. Один из самых простых примеров - использование тэга img вместе с onerror. Больше примеров можно найти здесь. Поэтому свойство dangerouslySetInnerHTML должно использоваться в связке с библиотекой DOMPurify для предотвращения XSS.

3️⃣ Native API Если по каким-то причинам, вам необходимо использовать нативный API браузера, то в данном случае важно быть в двойне осторожным, ведь тут реакт уже не поможет: ● Постарайтесь использовать innerText вместо innerHTML ● Вы все также можете использовать библиотеку DOMPurify

Чтобы подробнее ознакомиться с предотвращением XSS уязвимостей в React приложении советую прочитать следующий цикл статей: ● Preventing XSS in React (Part 1): Data binding and URLs ● Preventing XSS in React (Part 2): dangerouslySetInnerHTML ● Preventing XSS in React (Part 3): escape hatches and component parsers

#xss #react #security #frontend

Новое свойство Статус в Notion

Thu, 30 Jun 2022 08:07:22 GMT

Новое свойство Статус в Notion

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

Для своей системы планирования я выделяю 2 главных преимущества:

У статуса, есть значение по-умолчанию. Больше не будет задач, у которых пустой статус 🎉
Можно легко мигрировать с поля Select, которое часто использовалось в качестве поля Status. Достаточно просто изменить тип поля на Status и он автоматически конвертирует все значения. Ни фильтры, ни доски, после конвертации не пострадают.

Пример конвертации селекта в статус в комментариях.

#notion

Интеграция Notion и Алисы 💥

Sun, 19 Jun 2022 12:57:00 GMT

Интеграция Notion и Алисы 💥

В одном из предыдущих постов я писал, как настроить интеграцию между Notion и Apple Shortcuts. Сегодня (дабы поддержать отечественного производителя) расскажу об интеграции Notion и Алисы.

Настраивается всё очень просто — инструкцию можете найти здесь. Если кратко, то процесс интеграции выглядит следующим образом:

Создаёте новую интеграцию тут и копируете токен
Копируете идентификатор страницы или базы данных
Отправляете всё в навык и всё готово

Навык отлично подходит для добавления дел в инбокс. Если вы (как и я) ведёте список дел в базе данных, то при конфигурации укажите её идентификатор, тогда навык будет добавлять новые строки. Если вы укажите идентификатор страницы, то навык будет добавлять новую запись в to-do list.

Если вы хотите поучаствовать в разработке навыка, то вот здесь найдёте исходники навыка. Если у вас есть какие-то предложения по улучшению навыка вступайте вот в этот чат.

#planning #notion #timemanagement #алиса

🎥 Пятничное чтиво

Fri, 10 Jun 2022 06:57:03 GMT

**🎥 Пятничное чтиво

**Сегодня не чтиво, а скорее **смотриво. **Приближаются выходные, самое время для сериалов, но коротких, чтобы успеть досмотреть и не отвлекаться в течении рабочей недели.

Пару месяцев назад посмотрел сериал Выбывшая. Рекомендую посмотреть, чтобы понять, как начинаются стартапы, и на что приходится идти чтобы они не потонули. Правда в этом случае, основатели зашли слишком далеко. Фильм основан на реальных событиях.

#fridayreading

WAI-ARIA Authoring Practices перенесли сюда и обновили дизайн - не теряйте!

Wed, 08 Jun 2022 09:26:47 GMT

WAI-ARIA Authoring Practices перенесли сюда и обновили дизайн - не теряйте!

#frontend #accessibility

📖 Пятничное чтиво

Fri, 03 Jun 2022 07:26:55 GMT

📖 Пятничное чтиво

Как жалобы перенастраивают ваш мозг на негатив

Статья описывает, как мы меняемся при постоянных жалобах, как воздействуем на окружающих, и самое интересное в конце - пара советов для тех, кто любит поныть.

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

Скептически отношусь, к описываемым влияниям на мозг, но в целом статья довольно интересная.

#fridayreading #нытьё

https://telegra.ph/Idealnyj-mir-dizajnerov-05-30

Tue, 31 May 2022 07:00:08 GMT

https://telegra.ph/Idealnyj-mir-dizajnerov-05-30

Автоматизированные бэкапы в Notion

Tue, 24 May 2022 16:23:13 GMT

Автоматизированные бэкапы в Notion

В конце апреля начали появляться сообщения, что некоторые русские аккаунты в Notion были заблокированы. Поддержка сперва подтвердила это, но в итоге сослалась на то, что они тестировали новый алгоритм и случайно заблокировали аккаунты, мол сейчас всё должно быть хорошо - продолжайте пользоваться. Но как тут спокойно пользовать после такого, сразу вспоминается фраза “мыши плакали, кололись, но продолжали жрать кактус”. Поэтому я решил настроить автоматизированные бэкапы.

Для этого можно использовать:

Обе реализации используют один и тот же подход:

Для скачивания архива (тот же самый архив, который мы получаем при ручном экспорте вокспейса) используется внутренний API Notion
Для хранения бэкапов используется GitLab/GitHub репозиторий
Скачанный архив разархивируется и пушится в репозиторий
Для запуска бэкапа используется GitLab Pipeline/GitHub Actions

Я решил использовать GitHub. У меня много страниц с очень длинными названиями поэтому пайплайн валится при разархивировании. Я не стал заморачиваться и просто удалил разархивирование из пайплайна. Для меня это не так важно, ведь в любом случае ссылка на скачивание приходит на почту и хранится в течение 30 дней, поэтому если Notion заблокируют, я в любом случае смогу скачать бэкап.

#notion

Интеграция Notion и Apple Shortcuts

Tue, 10 May 2022 18:26:48 GMT

Интеграция** Notion и Apple Shortcuts**

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

Например, пришла вам какая-то крутая идея — нужно её записать как можно скорее. Если процесс наполнения инбокса не прост как дважды два, вы просто забудете, что хотели записать.

Сегодня настроил интеграцию Apple Shortcuts и Notion. Так как Siri поддерживает шорткаты, то заметки и задачи можно добавлять в ваш инбокс просто диктуя их Siri.

Using Siri to add to a Notion Database - Tutorial - Инструкция на Youtube
Siri → Notion Database Tutorial - Инструкция в Notion

#planning #notion #timemanagement

📖 Пятничное чтиво

Fri, 06 May 2022 07:00:12 GMT

📖 Пятничное чтиво

В статье “Как быть более продуктивным, не заставляя себя” есть следующая фраза

*Есть группа людей, которые работают и получают от своей работы удовольствие. Давайте назовем этих людей *деятелями*. Под этим понятием мы не имеем в виду трудоголиков, которые не живут, а лишь работают целыми днями. У деятелей здоровый баланс работы и отдыха. Что же особенного есть у них, чего нет у тех, кто ненавидит свою работу?

В первую очередь, они по-другому относятся к работе.*

Для них работа — это приятный цикл позитивной обратной связи. Деятели воспринимают работу как источник энергии и удовлетворения. С их точки зрения, работа позволяет им по-настоящему насладиться заслуженным отдыхом. Отдых делает их счастливее и мотивирует затем снова заняться работой.

Похоже именно работа позволяет мне по-настоящему насладиться отдыхом, в конце выходных обычно всегда появляется желание вернуться к работе.

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

#fridayreading

Фраза недели

Wed, 20 Apr 2022 07:00:14 GMT

Фраза недели

Недавно посмотрел видео “Причина грыжи диска. Плавание и позвоночник.”, в котором была сказана очень интересная фраза:

«Однобокая нагрузка всегда будет вызывать перестройку организма в определённых местах, чтобы он, жертвуя чем-то, добивался спортивных результатов.» - фразу можно послушать здесь.

Невероятное сходство можно проследить с процессами в команде или компании. Достаточно заменить, например “нагрузку” на “оценку работы” и “организм” на “процессы” — «Однобокая оценка работы всегда будет вызывать перестройку процессов в определённых местах, чтобы сотрудники, жертвуя чем-то, добивались поставленных целей.».

Если в качестве метрик используется только количество закрытых задач и сделанных фич, то многие процессы в компании подстроятся, чтобы добиться необходимых результатов. Но придётся чем-то жертвовать: ● Будет меньше времени уделяться тестированию и написанию тестов ● На смену CodeReview придёт простое нажатие кнопки Approve или вовсе отмена обязательного ревью ● Будут исправляться симптомы, а не проблемы. Вряд ли кто-то будет докапываться до сути проблем, возникающих в продукте, поэтому будут появляться все новые и новые костыли ● Сотрудники перестанут помогать друг другу, ведь нужно закрыть как можно задач!

Так же, как и со здоровьем, возможно, придется потратить очень много времени, чтобы исправить ситуацию и вылечить «процессы» в компании, ведь сотрудники по инерции будут следовать старым правилам.

#weekphrase #processes

Пятничное чтиво - Interaction tests

Fri, 08 Apr 2022 07:00:27 GMT

Пятничное чтиво - Interaction tests

Недавно команда storybook добавила новую фичу - Interaction tests, поэтому в эту пятницу хочу порекомендовать к прочтению статью Test component interactions with Storybook, которая очень хорошо показывает преимущества по сравнению с jest тестами.

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

Преимущества: ✅ Интерактивные тесты запускаются в реальном браузере и в связи с этим не имеют тех ограничений, которые имеет JSDOM. Поэтому, например, мы можем проверять размеры элементов и их расположение относительно друг друга. ✅ Проще отлаживать тесты компонентов в браузере чем в консоли, ведь мы своими глазами видим причину падения тестов. Особенно это упрощает жизнь, если у вас есть мигающие тесты, падающие время от времени. ✅ Наличие фичи пошаговой отладки, позволяет пошагово отлаживать тесты прямо в браузере без использования dev tools.

Недостатки: ⚠️ Для запуска интерактивных тестов используется playwright. Michael Shilman (член команды storybook) утверждает, что в настоящее время playwright тесты занимают в среднем на 30% больше времени, чем jest тесты. В то же время, команда storybook работает над разработкой своего собственного тест-раннера и считает, что сможет добиться скорости выполнения тестов сравнимой с JSDOM. ⚠️ Тест-раннер работает только с запущенной версией storybook, поэтому помимо запуска тестов необходимо предварительно запустить storybook. Если storybook ещё не включен в ваш CI/CD pipeline — это также увеличит время работы pipeline’а. ⚠️ Storybook позволяет мокать API запросы, но в целом всё ещё в значительной степени уступает jest. Например, вы не сможете замокать код только для выбранных историй, или мокать код индивидуально для каждой выбранной истории. ⚠️ В данный момент интерактивные тесты не поддерживают test coverage.

Напоследок, хотел бы отметить два момента: ⚫️ Интерактивные тесты, не являются полной заменой jest - они предназначены лишь для тестирования компонентов и не подходит, например, для тестирования утилитных функций. ⚫️ Все перечисленные недостатки скорее всего будут со временем решены, так как релиз фичи состоялся не так давно, и команда storybook работает над её улучшением.

#fridayreading #tests #storybook

Пятничное чтиво

Fri, 01 Apr 2022 07:01:12 GMT

Пятничное чтиво

Сегодня порекомендую доклад Алексея Катаева Рефакторинг: договариваемся, планируем, внедряем! Расшифровку можно почитать здесь.

Основные моменты:

Если у вас есть желание переписать всё с нуля, значит вы всё время добавляли новые и новые костыли и не рефакторили
Если в команде отсутствует культура рефакторинга:
- скорость разработки замедляется
- стабильность будет падать
- сложнее набирать новых разработчиков, ведь легаси дофига, а документации нифига
- как результат ⇒ бизнес теряет деньги
Необходимо проводить непрерывный рефакторинг
Чтобы убедить руководство в необходимости рефакторинга, необходимо договариваться, а не жаловаться. Нужны конкретные предложения вместо нытья
Определять фронт работ (список областей для рефакторинга) должны все разработчики, а не только тимлид, ведь он наверняка не в курсе всех проблем в коде.
С чего начать? Наверняка у каждого разработчика есть код, который он ненавидит всей душой, ведь после каждого изменения в этом коде он получает 5 новых багов. Можно начать с рефакторинга этих областей.
Вести “Рефакторинг задачи” можно в вашем привычном таск трекере.
“Рефакторинг задачи” должны описываться по определённому формату:
- Проблема
- Профит
- Возможное решение
- Оценка по срокам
Что с приоритетом? Как уже было сказано, разработчики лучше других знают приоритет, они и должны его выставлять.
Выделить бюджет для рефакторинга, например 15% от времени спринта.
Чтобы уменьшить количество нового технического долга, необходимо:
- Заниматься ростом команды
- Шарить знания по проекту
По прошествии какого-то времени можно будет оценить количество технического долга и его рост.

#fridayreading #technicaldebt #planning #processes

Управление техническим долгом

Tue, 29 Mar 2022 07:01:06 GMT

Управление техническим долгом

На прошлой неделе задал вопрос об управлении техническим долгом Василию Половнёву - Техническому директору в Бюро Горбунова.

Подскажи, как вы управляете техническим долгом и задачами, которые не связаны с разработкой продукта (обновление пакетных менеджеров (yarn 1 => pnpm), написание документации для старого кода, …) в Бюро?

👉 Во-первых, мы на одной волне с бизнесом в этом вопросе: и мы, и ребята договорились о том, что техдолг — это плохо, это не дает нам запускать новые фичи быстрее. Если этот вопрос не решен, лучше начать с него. Иначе бизнесу будет казаться, что вы тратите время на какую-то фигню. 👉 Во-вторых, весь технический долг мы аккуратно записываем и периодически пересматриваем. Часто бывает, что какой-то должок вообще не нужно отдавать. А что-то вдруг начинает гореть прямо сейчас. 👉 В-третьих, мы берем продуктовый налог: 10-20% времени и внимания в итерации тратим на рефакторинг. Получается непрерывный рефакторинг в рамках итерации. 👉 В-четвертых, у нас есть неделя после пуска. Это отдельная неделя сразу после пуска крупной (шестинедельной) фичи, которая тратится только на рефакторинг, доработки и горячие исправления. Эта неделя помогает выдохнуть, трезво оценить обстановку и заняться техдолгом. В Бейскемпе эта же штука занимает две недели между циклами.

А куда вы записываете тех долг, это тот же самый таск трекер, в котором ведутся обычные продуктовые задачи?

👉 Да, это все в github issues.

То есть перед началом нового спринта, вы так же, как и для продуктовых задач планируете какие задачи из технического долга необходимо закрыть?

👉 Да, именно.

Советую подписаться на телеграмм канал Половнёв — Журнал, там есть много информации о разработке, тестировании и культуре работы.

#planning #technicaldebt

Mock-функции в Jest

Mon, 21 Mar 2022 07:00:36 GMT

Mock-функции в Jest

В Jest существует 3 основные функции для подмены (мока) реализации:

jest.fn() - mock function
jest.spyOn().mock<...> - mock/spy function
- mockResolvedValue()
- mockReturnValue()
- mockImplementation()
jest.mock() - mock module

С первого взгляда может показаться не ясно, в каком случае следует применять ту или иную функцию.

jest.fn() - самый простой способ создать mock-функцию. Функция используется в следующих случаях:

Тестируемая функция принимает в качестве аргумента другую функцию, которую мы можем подменить с помощью jest.fn() - Dependency Injection
Нам не важна предыдущая реализация и мы можем просто заменить её следующим образом obj.func = jest.fn().

jest.spyOn() заменяет начальную реализацию шпионом, что позволяет нам отслеживать вызовы функции. При этом, по умолчанию реализация не изменяется, если необходимо изменить реализацию, это можно сделать следующим образом: spyOn(obj, ‘func’).mockImplementation(() => “mocked value”). Функция используется в следующих случаях:

Необходимо отслеживать вызовы функции без подмены реализации
Необходимо подменить зависимость, которая используется внутри тестируемой функции и не передаётся в качестве параметров
Необходимо подменить реализацию для отдельного теста/группы тестов и восстановить оригинальную реализацию для остальных mockedFunc.mockRestore Why use spyon with mock implemenation rather than jest.fn? - хороший пример, описывающий ситуацию, в которой лучше использовать jest.spyOn() вместо jest.fn()

jest.mock(). В отличие от функций jest.fn() и jest.spyOn(), функция jest.mock() - заменяет не отдельную функцию, а весь модуль. Функция используется в следующих случаях:

Необходимо подменить все экспортируемые функции модуля
Необходимо подменить часть экспортируемых функций модуля Недостаток функции jest.mock в том, что она не позволяет восстановить оригинальную реализацию, для таких случаев лучше использовать jest.spyOn

Ещё по теме

Understanding Jest Mocks - подробно описывает каждую рассмотренную функцию с примерами
Mock Functions и ES6 Class Mocks - официальная документация jest

#frontend #tests #jest

Настройка VPN

Thu, 03 Mar 2022 07:00:43 GMT

**Настройка VPN

**В связи с последними событиями, сайты начинают блокировать доступ для российских пользователей. Например <pnpm.io> сейчас не доступен из России. Также было создано ишью на гитхабе для ограничения доступа к сайту для российских пользователей.

Есть вероятность, что и наше правительство начнёт “замедлять” и блокировать сайты/приложения, где может размещаться “нежелательная” на их взгляд информация:

Instagram
Facebook
Twitter
YouTube

Поэтому самое время настроить VPN (напрмер, pshiphon) или установить TorBrowser.

Почему CSS называется каскадными таблицами стилей?

Tue, 15 Feb 2022 07:00:57 GMT

Почему CSS называется каскадными **таблицами стилей?

Каскад** — это алгоритм, который определяет, как вычислить результирующие стили элементов на основе CSS правил, объявленных в различных источниках.

CSS правила могут быть объявлены в следующих источниках:

User-agent stylesheets (Браузерные стили) - дефолтные стили браузера, обычно мы сбрасываем их с помощью CSS Reset
Author stylesheets (Авторские стили) - Стили задаваемые разработчиками, именно эти стили и пишем мы с вами.
User stylesheets (Пользовательские) - стили, которые могут применять к нашему сайту обычные пользователи. Возможно когда-то, вы видели, как кто-то использует их, чтобы задать кастомный вид для ВК.

То есть, для применения стилей, браузеру необходимо знать не только специфичность правила, но и источник этих правил, ведь у них тоже есть свой приоритет:

Авторские/Правила разработчиков - **самый приоритетный **2. Пользовательские
Браузерные стили

При применении !important всё становится с ног на голову и приоритеты меняются следующим образом:

Браузерные стили с !important - **самый приоритетный **2. Пользовательские с !important 3. Авторские/Правила разработчиков `!important

`Таким образом, алгоритм каскада выглядит вот так:

Найти стили из различных ресурсов, которые применимы к данному элементу
Выбрать источник с наибольшим приоритетом (важен именно приоритет источника, специфичность всё ещё не учитывается)
В ход идёт алгоритм специфичности, чтобы выбрать свойство с наибольшим весом
Если специфичность нескольких правил равна, в результате берётся то значение, которое объявлено позже

**Вывод **Для понимания тема кажется полезной, но на практике ваши стили всегда будут перебивать браузерные стили, а пользовательские стили поддерживаются всё меньше:

**Примеры **- CSS Cascading and Inheritance Level 4 - Example 18

Introducing the CSS Cascade - Example

**Ещё по теме **- Дока - принцип каскада

#css #web

Пятничное чтиво

Fri, 04 Feb 2022 07:00:54 GMT

**Пятничное чтиво

**Сегодня порекомендую всего одну статью. Она мне напоминает меня самого, ведь я допускал и возможно всё ещё допускаю те же ошибки. Я довольно часто отчаянно отстаивал свою позицию (даже в не значимых моментах) и считал, что это нормально. Представьте моё удивление, когда я узнал, что мои коллеги считают меня агрессивным 😅.

Как меня чуть не уволили из-за токсичного поведения и что было дальше

После прочтения статьи подумайте, не допускаете ли вы тех же ошибок, что я и автор.

#fridayreading #article

Прокси-серве для Яндекс.Музыки

Mon, 31 Jan 2022 07:00:56 GMT

**Прокси-серве для Яндекс.Музыки

**Прошлой весной начал разбираться с OpenAPI и решил написать схему для Яндекс.Музыки. Проблема была лишь в том, что из-за CORS нормально пользоваться сгенерированной документацией невозможно. Чтобы отключить CORS в хроме приходилось запускать его с флагом -disable-web-security.

Решение скажем честно - не очень 👎. Правильным решением будет написание прокси-сервера, на котором были бы разрешены кросдоменные запросы. Другими словами, вместо того, чтобы напрямую обращаться к серверу Я.Музыки, на котором запрещены крос-доменные запросы, мы обращаемся к прокси-серверу, который перенапрявляет все наши вопросы к Я.Музыке и возвращает нам ответ. Так как CORS, есть только в браузере, то мы свободно отправляем запросы с нашего прокси сервера на сервер Я.Музыки.

Собственно, вчера я и написал такой прокси-сервер на основе библиотеки cors-anywhere и захостить его на хероку (https://yandex-music-cors-proxy.herokuapp.com/).

Теперь все запросы можно проксировать следующим образом: `https://yandex-music-cors-proxy.herokyapp.com/

Например: https://yandex-music-cors-proxy.herokuapp.com/https://api.music.yandex.net:443/users/541320800/playlists/list

`Ресурсы:

Исходники прокси сервера - Исходники OpenAPI-схемы Я.Музыки - [OpenAPI документация Я.Музыки

](https://www.cherkashin.dev/yandex-music-open-api/)Ещё по теме:

cors-anywere - Getting Started on Heroku with Node.js - [GitHub Integration (Heroku GitHub Deploys)

](https://devcenter.heroku.com/articles/github-integration)#yandexmusic

Наращивание специфичности

Thu, 27 Jan 2022 07:01:18 GMT

**Наращивание специфичности

**Вчера на сайте доки читал о специфичности в CSS и наткнулся на интересный трюк. Он кажется достаточно элементарным, но никогда не приходил мне в голову. Чтобы увеличить специфичность, можно использовать один и тот же класс, в рамках одного селектора несколько раз. Вот для наглядности небольшой пример:

.button {
  width: 100px;
}
 
// как я бы сделал раньше
.button.fancy-button {
  width: 200px;
}
 
// трюк
.fancy-button.fancy-button {
  width: 200px;
}
 
 
```Возможно, такие селекторы кажутся странными, поэтому я бы добавил поясняющий комментарий в коде для других разработчиков и пояснил, что именно я здесь делаю.
 
Такой приём может оказаться полезен, когда вы используете библиотеки компонентов вроде [material-ui](https://mui.com/) и не хотите завязываться на CSS классы, предоставляемые библиотекой, для увеличения специфичности. 
 
#css

Пятничное чтиво

Fri, 21 Jan 2022 07:00:53 GMT

**Пятничное чтиво

**Всю эту неделю освежал в памяти как работает Event Loop (Событийный цикл) в JavaScript и всё что с ним связано. Ссылки ниже помогут ответить на вопросы:

❓Что такое микротаски ❓Что такое макротаски/таски ❓Что такое web api ❓В какой момент выполняются макро- и микротаски и по сколько за раз ❓Какая основная задача EventLoop

What the heck is the event loop anyway? | Philip Roberts | JSConf EU - JavaScript Visualizer 9000 - event loop visualizer
JavaScript Visualized: Event Loop - Современный учебник JavaScript: Событийный цикл: микрозадачи и макрозадачи - Что ты такое, Event Loop? Или как устроен цикл событий в браузере Chrome - Иван Тулуп: асинхронщина в JS под капотом / Михаил Башуров (Luxoft) - [Jake Archibald - Tasks, microtasks, queues and schedules

](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)#fridayreading #javascript #eventloop

Очередная история о борьбе с выгоранием

Thu, 30 Dec 2021 07:00:38 GMT

Очередная история о борьбе с выгоранием

Последний месяц я пытался собрать все приёмы, которые использовал, чтобы улучшить своё состояние и зарубить выгорание на корню. Собрал всё, от собственных выводов и наблюдений до советов из “Gettings Things Done” и советов твиттерских. Оформил всё в статью и опубликовал на хабр.

https://habr.com/ru/post/598517/

#burnout

Очередная история о борьбе с выгоранием

Wed, 29 Dec 2021 00:00:00 GMT

Я думаю, не стоит никому объяснять, что такое выгорание, большинство периодически ходят по краю, рискуя упасть и окунуться в это состояние с головой. В двух словах выгорание — это поломка системы восстановления энергии в условиях продолжительного стресса.

Фраза недели - "Когда ты испытываешь гнев, отчаяние и готов заплакать, значит тебе не хватает софт…

Sat, 18 Dec 2021 11:12:17 GMT

Фраза недели - “Когда ты испытываешь гнев, отчаяние и готов заплакать, значит тебе не хватает софт скилов”

Софт скилы также важны как хард скилы. Что такое софт скилы? Все, что помогает вам сделать вашу работу лучше и не связано непосредственно с программированием:

переговоры
планирование
самоорганизация
стрессоустойчивость
и т.д.

Ситуация 1: В вашем проекте творится хаос, каждый пишет так, как он хочет, линтеры отсутствуют. Казалось бы, нужно просто добавить линтер, и это решит большую часть проблем. Но какие правила должен содержать линтер? А может кто-то вообще не понимает зачем он нужен «ведь и так сойдёт»? Поэтому в первую очередь вам придётся донести до команды важность использования линтера и договориться о наборе правил, который бы устраивал всех.

Ситуация 2: Вы руководите командой разработчиков. Вы делегировали одну из задач, проходит месяц, но прогресса по задаче очень мало, а дедлайн близок. Конечно, в этой ситуации вас могут спасти хард скилы, и вы можете вывезти задачу на себе. Но где гарантии, что эта ситуация не повторится снова? Гораздо лучше проанализировать сложившуюся ситуацию, понять почему это произошло и изменить процессы в команде таким образом, чтобы предотвратить подобные проблемы в дальнейшем.

#weekphrase #softskills

Несколько приёмов, которые я использую, чтобы улучшить своё эмоциональное состояние и не выгореть:

Wed, 08 Dec 2021 07:01:08 GMT

Несколько приёмов, которые я использую, чтобы улучшить своё эмоциональное состояние и не выгореть:

🎈 Первое и самое главное. Я создал для себя внешнее хранилище информации, которое содержит, всё, что для меня важно: все мои задачи, планы, проекты, заметки, планы путешествий. Основная задача нашего мозга - генерация различных идей, но он совершенно не предназначен для хранения информации. Важно избавиться от стресса, который вы чувствуете, из-за того, что вам кажется, что вы что-то забыли.

🎈 Спать по 7-8 часов в день. Ваша голова не сможет нормально работать без полноценного отдыха, поэтому нет смысла засиживаться допоздна.

🎈 Не считать проблемы компании своими проблемами. Если вам нужно перерабатывать, скорее всего вы закрываете чью-то некомпетентность в компании. Не наняли новых сотрудников, облажались с дедлайнами, не налажены процессы. Ассоциация проблем компании со своими проблемами - прямой путь к выгоранию, ведь в этом случае стресс ощущается более остро в тяжелых ситуациях.

🎈 Не перерабатывать. На самом деле, в большинстве случаев это просто бессмысленно, давайте будем честны, на работе мы меняем своё время на деньги. Нет ничего плохого, чтобы защищать своё время. Начальство всегда хочет, чтобы вы работали больше.

🎈 Вы не должны ничего заслуживать. Нет ничего зазорного в том, чтобы побездельничать и посмотреть Youtube. Чувствовать себя хорошо — это нормально. В прошлом я был на 100% уверен, что я должен пахать круглые сутки.

🎈 Не взваливать на себя больше, чем можешь сделать. Раньше я пытался каждую минуту проводить с пользой. Едешь в маршрутке - учишь английский, ложишься спать и засыпаешь под подкаст. И раз за разом ты оказываешься на грани выгорания. В один день ты просто перестаёшь делать ВСЁ. Нужно помнить, что наша жизнь — это марафон, а не спринт и нужно правильно распределять силы.

🎈 Уметь говорить “нет”. Это очень заезженная фраза, но она действительно работает. Мы привыкли взваливать на себя всё подряд и соглашаться на любые просьбы. Если кто-то из друзей или знакомых просит вас о чём-нибудь, и у вас действительно нет времени на это, нет ничего плохого в том, чтобы сказать “нет”. Конечно, нужно понимать, что просьбы бывают разные, но не нужно отодвигать свои интересы на второй план, боясь кого-то обидеть.

А какие приёмы используете вы?

Ещё по теме:

Лера Зелёная. Вредные советы, как довести себя до истощения работой на три, два, раз. - Человек из IT. О переработках. - [Человек из IT. Тред заботы о себе.

](https://twitter.com/itunderhood/status/1380897965552898050)#burnout

Сегодня поговорим немного об обучении

Thu, 02 Dec 2021 07:01:08 GMT

**Сегодня поговорим немного об обучении

**У меня часто бомбит, когда друзья рассказывают, как их учат в универе. О том как от них требуют, чтобы все лекции должны быть обязательно написаны, что нужно ходить на все пары без пропусков и … можно приводить ещё кучу примеров. Я думаю, у каждого был такой опыт. Больше всего раздражает, когда в тебя впихивают знания и не объясняют, как они тебе пригодятся, почему я должен это всё учить, а не просто забить на пары?

В общем, к чему я тут распинаюсь. Последние 3 недели я проходил курс “Наставник” от Яндекс.Практикума, где объясняли основные правила коммуникации и взаимодействия со студентами. Я думаю, если бы каждый преподаватель в своё время прошёл такой курс с нашей системой образования всё было бы гораздо лучше. Ну хватит о преподавании и университетах. В целом курс достаточно универсальный и будет полезен любому. Если вы работаете в команде вы наверняка:

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

Ну и давайте кратко опишу курс. Курс состоял из 5 занятий, каждое из которых содержало:

теорию
практику
домашку.

С теорией и домашкой всё более и менее понятно, но самое крутое, что было на курсе - отработки. Не те отработки, на которые вы ходили, если пропустили пару или не сделали домашку 😁. На каждой практике было порядка трёх отработок, на которых мы тренировались отработать реальные ситуации, которые могут произойти во время преподавания в Практикуме.

Подробнее можете почитать на официальном сайте, следующий набор уже в 2022 году.

Фраза недели - "Лучшее - враг хорошего"

Mon, 29 Nov 2021 07:00:53 GMT

Фраза недели - “Лучшее - враг хорошего”

На мой взгляд эта фраза отлично описывает одновременно и “синдром самозванца”, и “перфекционизм” (а соответственно и меня 😀).

▪️Как часто вы брались за что-то, но не доводили до конца, потому что это было “недостаточно хорошо” сделано? ▪️Какое вы вообще имеете право кого-то учить? ▪️Ведь у вас недостаточно опыта! ▪️Вам нужно изучить все ресурсы в интернете, чтобы не дай бог не допустить ни малейшей ошибки!

Я постоянно начинаю писать заметки, статьи и стараюсь сделать это идеально. И знаете, что происходит в итоге? Ничего! Всё это идёт в стол! Вместо того, чтобы сделать что-то “достаточно хорошо”, в погоне за идеалом, я не делаю это никак. Вместо того, чтобы просто написать о своём опыте, я считаю, что мне нужно перерыть весь интернет, проконсультироваться с кем-то из коллег и всё 100 раз перепроверить. В итоге, всё это раздувается настолько, что я просто забиваю ещё в самом начале.

Ну и какой вывод из всего этого. Лучше сделать, что-то “достаточно хорошо”, чем стараться сделать это идеально, иначе вы рискуете не сделать этого совсем никак. Конечно, вы можете облажаться, но все ведь ошибаются, верно? Лучше облажаться, чем всю жизнь думать о чём-то и никогда не сделать. Ну и как говорил Мирон, “Сколько себя помню я дрожал над репутацией, но, чтобы стать свободнее нужно не бояться обосраться.” 😉.

Ещё по теме:

Синдром самозванца у айтишников. Немного логики для тех, кто подумывает писать в блоги - [Барух Садогурский - Как правильно продать себя ради фана и профита - Синдром Самозванца

](https://youtu.be/sEexbEv2iGc?t=1015)#weekphrase #perfectionism #impostorsyndrome

Пятничное чтиво.

Fri, 22 Oct 2021 07:01:22 GMT

**Пятничное чтиво.

**Ссылки о Code Review, которые расскажут:

👉 для чего он необходим 👉 какие проблемы решает 👉 как его необходимо проводить 👉 на что смотреть во время код ревью 👉 как указывать на недостатки в коде и не поссориться с коллегами 👉 и многое другое

Why code reviews matter (and actually save time!) - Four Ways to Leave a Bad Code Review - The Outrageous Cost of Skipping TDD & Code Reviews - [Google Engineering Practices Documentation

](https://google.github.io/eng-practices/)#fridayreading #codereview

Фраза недели - "Результат не достижим, если едет только одно колесо"

Wed, 13 Oct 2021 07:01:28 GMT

Фраза недели - “Результат не достижим, если едет только одно колесо”

Наткнулся на эту фразу в видео Бюро Горбунова, там и пример о работе есть, поэтому всем рекомендую посмотреть.

**Немного от себя **Всегда приятно работать с людьми:

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

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

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

#weekphrase

Наткнулся на крутой доклад для тимлидов "Теперь я - тимлид, но почему мне так плохо?", записал всё,…

Sun, 03 Oct 2021 10:58:58 GMT

Наткнулся на крутой доклад для тимлидов “Теперь я - тимлид, но почему мне так плохо?”, записал всё, что показалось важным. На самом деле он подходит любому, у кого больше обязанностей, чем просто писать код.

👉 Принцип Питера

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

👉 Делегирование - ключ к успешной работе. Но нужно делегировать ответственность, а не задачи. Например, кто-то в команде может отвечать за код ревью, он ответственный за то, чтобы все пул/мерж реквесты получили фидбэк, были заапрувлены и были смержены.

👉 Иногда технический бэкграунд только мешает, тимлиду может быть сложно доверять разработчикам, потому что он считает, что он сделал бы лучше. Чтобы было легче доверять команде, необходимо заниматься их ростом.

👉 У тимлида должен быть асинхронный входящий канал связи. Так как через тимлида проходит всё информация, то естественно, что с вопросами все будут идти к нему. Если вас все время будут отвлекать, то вы просто не сможете нормально работать.

👉 Заведите себе внешнее хранилище информации, где вы будете хранить все напоминания, задачи, чтобы можно было разгрузить свой мозг для более важных вещей. Например: Todoist, notion или Google Calendar.

👉 Компетенции тимлида: - Фокусировать - Вдохновлять - Коммуницировать - Растить

👉 Если ваша команда не растёт - вы плохой тимлид.

👉 Необходимо узнавать у команды мнение о себе. С чем, по их мнению, вы справляетесь, а с чем нет. Какие у них претензии к вам.

👉 Тимлид не болт пинает, если он не закрывает задачи самостоятельно, это не значит, что он ничего не делает. Чтобы команда это понимала, необходима прозрачность, необходимо рассказывать, что творится за пределами команды. Например, если на митингах вы обсуждаете, что-то, что коснётся и всю вашу команду, необходимо доносить эту информацию до команды.

Использование never в TypeScript

Wed, 29 Sep 2021 07:01:03 GMT

**Использование never в TypeScript

**Допустим мы хотим написать компонент диалог. Его размер может задаваться двумя различными способами:

Явно с помощью width и height
Диалог должен принять размер контента, за это отвечает свойство `responsive

`Интерфейс пропсов будет выглядеть как-то так.

interface DialogProps {
  // ... other properties
  width?: number;
  height?: number;
  responsive?: boolean;
}
 
function Dialog({width, height, responsive}: DialogProps) {
  // ...
}
 
```Тут есть несколько проблем:
1. Чтобы передать либо `width` и `height` или только `responsive` , мы пометили все поля как необязательные и теперь мы можем передать неправильный набор полей или не передать ни одного вовсе.
2. Можем передать все параметры одновременно и в таком случае непонятно, должен диалог быть отзывчивым или отобразиться с указанным размером. 
 
Нам нужно реализовать тип, в котором все поля будут обязательными, но который позволит нам передать либо `width` и `height` либо `responsive` , в противном случае мы должны получить ошибку компиляции.
 
Такой интерфейс будет выглядеть вот так:
 
```tsx
type DialogProps = { title: string } & (
  | {
      responsive: boolean;
      width?: never;
      height?: never;
    }
  | {
      responsive?: never;
      width: number;
      height: number;
    }
);
 
```**never** - пустое множество или проще говоря, это тип, которому не может быть присвоено ни одно значение.
 
```tsx
// ✅ correct configuration
const responsive: DialogProps = {
  title: "Responsive Dialog",
  responsive: true
};
 
// ✅ correct 
const withSize: DialogProps = {
  title: "Dialog with Size",
  width: 600,
  height: 500,
  responsive: undefined
};
 
// ❌ incorrect
const incorrect: DialogProps = {
  title: "Incorrect Props Dialog",
  responsive: false,
  width: 600,
  height: 500
};
 
```В третьем примере мы получим ошибку 🎉. На самом деле, мы могли бы использовать `null` или `undefined` вместо `never` , но `never` выглядит более наглядно, потому что `never` по своей сути показывает невозможные сценарии.
 
[Sandbox с примером.](https://codesandbox.io/s/either-or-types-qzxo0?file=/src/short-either-or.ts)
 
**Ещё по теме
**- [Either/Or types in TypeScript](https://maecapozzi.com/either-or-types/)
- [When to use 'never' and 'unknown' in TypeScript](https://blog.logrocket.com/when-to-use-never-and-unknown-in-typescript-5e4d6c5799ad/)
- [TypeScript. Мощь never](https://habr.com/ru/post/471026/)

На прошлой неделе собрались с друзьями и обсудили персональный рост. Было много философских…

Wed, 22 Sep 2021 07:00:44 GMT

На прошлой неделе собрались с друзьями и обсудили персональный рост. Было много философских разговоров, вроде “зачем всё это нужно - и так сойдёт”, но всё же каждый смог вынести что-то для себя.

**Зачем нужно изучать что-то новое?

**Довольно сложный вопрос, на который не существует правильного ответа. Скорее всего каждый объяснит это по-своему, а возможно кто-то и вовсе не сможет объяснить. Я бы выделил следующие причины:

Просто интересно и ты от этого кайфуешь;
Повысить свою квалификацию, должность и соответственно зарплату;
Быть готовым к смене работы, ведь возможно твои навыки уже не очень актуальны для других работодателей;

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

**Как изучать что-то новое?

Что изучать

**Для начала нужно разобраться, что именно необходимо изучать. Возможно вы уже знаете ответ на этот вопрос. И это нормально “не знать, чем ты хочешь заниматься”. Чтобы понять - необходимо пробовать, только так можно осознать, что именно тебе интересно. А чтобы понять, что попробовать можно воспользоваться вот этими советами:

Изучать то, что по-настоящему вас увлекает и приносит вам удовольствие;
Понять на что вы тратите больше всего времени. Если вы тратите час на написание имейла на английском - возможно пора уделить время английскому;
Выписать проблемы, с которыми вы сталкиваетесь в текущем проекте и понять, что вы можете изучить, чтобы решать их быстрее. Это может быть что угодно: множество регрессий, отсутствие процессов в команде, а может вы просто тратите кучу времени на Code Review;
Поговорить с друзьями и узнать, чем они занимаются на работе, какие проблемы решают, какие технологии/инструменты используют;
Походить по собеседованиям и узнать, на что есть спрос в других компаниях.

При этом необходимо понимать, чего именно в итоге вы хотите добиться. Должна быть возможность оценить ваш прогресс, иначе мотивация быстро сойдёт на нет.

**Как изучать

**После того, как стало ясно в каком направлении двигаться, необходим план достижения цели. План состоит из нескольких частей:

Путь достижения цели: материалы, которые необходимо изучить; проекты, которые необходимо выполнить;
То как вы будете идти по этому пути. Будете ли вы идти самостоятельно или с проводником (ментором), который поможет быстрее дойти до конечно точки и не заблудиться.
Очень важно выработать привычку, необходимо превратить обучение в рутину. Например, можно уделять ежедневно час утром.

**Смена работы

**Можно засидеться на одной работе и почувствовать стагнацию в своём развитии:

вы используете одни и те же инструменты;
тратите больше времени на изучение легаси кода и баг фиксы, чем на саморазвитие.

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

Но есть вероятность вернуться на исходную точку, когда вы изучили все технологии и глубже погрузились в проект:

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

Лучше не отдавать на откуп своё развитие внешним факторам, вроде смены работы. Правильнее самому заняться своим развитием.

**Вместо концовки

**Это то, что я смог вынесли из нашего разговора. А ещё можете почитать заметки друга, который участвовал в обсуждении.

Как избавиться от прерываний

Wed, 15 Sep 2021 06:14:35 GMT

**Как избавиться от прерываний

**Сегодня я хочу вам рассказать о самой большой причине моей раздражительности и усталости - прерываниях и многозадачности.

Проблему легко описать на примере следующей ситуации.

Обычный рабочий день:

вы заняты решением какой-то проблемы - вы полностью сосредоточены
ваш коллега задаёт вам какой-то вопрос
вы стараетесь продолжать работать и ответить коллеге (💡 многозадачность)
вы вынуждены прерваться и переспросить вопрос ⏳
вникаете в вопрос, чтобы ответить на него
отвечаете на вопрос
возвращаетесь к работе и пытаетесь вспомнить на чём же вы остановились ⏳.

Мозг не способен эффективно делать две вещи одновременно, поэтому, в данной ситуации, мы тратим кучу времени, чтобы переключиться с решения своей задачи, а потом вернуться к ней. С помощью ⏳, я отметил где мы тратим время и “мыслетопливо”.

Ситуации, когда мы вынуждены прервать работу из-за коллеги, телефонного звонка или чего угодно ещё называются пассивными прерываниями. Мы не можем полностью от них избавиться, но мы можем свести их к минимуму. Есть пара простых советов:

Митинги. Запланируйте встречи с людьми, с которыми вы чаще всего коммуницируете. Записывайте все накопившиеся вопросы (попросите о том же остальных) и обсудите всё за раз. Чем чаще вы взаимодействуете с человеком, тем чаще нужно проводить встречи. Например: ежедневные стендапы с командой, еженедельные митинги с дизайнером.
Почта вместо мессенджеров. Корпоративные чаты зачастую убивают нашу продуктивность, сам формат чатов предполагает, что вы должны сразу ответить на сообщение, что ничем не отличается от ситуации описанной выше. Если вопрос не требует немедленного внимания, попросите ваших коллег отправлять email’ы, чтобы вы могли на них ответить в удобное для вас время.

Напоследок приведу цитату Дэвида Аллена:

Нежелательно, чтобы вы и человек, которому вы хотите делегировать свой вопрос, прерывались и оставляли текущие дела, чтобы обсудить вашу задачу. Это будет быстро, но нарушит и ваш, и его рабочий процесс. К тому же у этого варианта такой же недостаток, как и у голосовой почты: разговор не фиксируется письменно.

Ещё по теме: Миф о многозадачности. К чему приводит стремление всё успеть.

Самый простой способ хостинга ваших пэт проектов

Thu, 09 Sep 2021 06:32:02 GMT

**Самый простой способ хостинга ваших пэт проектов

** Нужно сделать всего 5 простых шагов:

Устанавливаете пакет gh-pages следующим образом `yarn add —dev gh-pages

2. Добавляете скрипты в package.json

"predeploy": "yarn run build",
"deploy": "gh-pages -d build"

```3. Добавляете `homepage` в package.json в следующем формате

`http://<github-username>.github.io/<project-name>

`4. Деплоите `yarn deploy

`5. Меняете ветку в настройках github pages на gh-pages и не забудьте нажать кнопочку Save 

Открываете свой сайт по адресу `http://<github-username>.github.io/<project-name>` - например <https://acherkashin.github.io/yandex-music-open-api/> и хвастаетесь своим друзьям.

Подробнее можно [почитать здесь](https://medium.com/mobile-web-dev/how-to-build-and-deploy-a-react-app-to-github-pages-in-less-than-5-minutes-d6c4ffd30f14) и в [официальной документации](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages).

Небольшой отчёт за прошедший отпуск

Sun, 22 Aug 2021 11:48:01 GMT

**Небольшой отчёт за прошедший отпуск

**✅ 2 недели без ноута

✅ Убедился, что на Дериглазова не такие уж и большие пробки по сравнению с Сочи

✅ Прочитал пару книг. Особенно приятно. Обычно не удаётся найти времени на чтение.

Загадочная история Билли Миллигана
Цветы для Элджернона

✅ Отдохнул и снова захотел работать.

❌ Не смотреть политические видео.

В последние дни постоянно лил дождь, стало скучно и сорвался.

❌ Не читать рабочие переписки.

Открыв рабочий чат в первый раз, увидел, что мы вероятно что-то сломали некоторое время назад.
Во второй раз - Коллега уволился.

Рабочие чаты это отдельная тема. Никак не могу перестать читать их во вне рабочее время, на выходных и во время отпуска. Это нездоровая штука, которая лишь заставляет нервничать и не приносит никакой пользы. В своё оправдание могу сказать, что сорвался лишь пару раз.

Не будьте как я - не читайте рабочие чаты.

Accessibility Course

Sat, 03 Jul 2021 08:00:38 GMT

**Accessibility Course

**В прошлом году услышал о курсе про Accessibility, и появилось желание рассеять “туман войны” вокруг данной тематики. Спустя полтора месяца лекций, есть полное понимание, как и главное для чего делать интерфейсы доступными.

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

Все преподаватели невероятно любят то, чем занимаются и читают лекции с удовольствием, зная о чём говорят. Было невероятно круто. Теперь нужно ещё разок пересмотреть лекции и нарабатывать практику.

PS: Даже сертификат свёрстан доступно 😉

Проапгрейдил рабочее место 👨‍💻

Sun, 06 Jun 2021 18:59:21 GMT

Проапгрейдил рабочее место 👨‍💻

Yandex Music OpenAPI

Sat, 05 Jun 2021 18:32:48 GMT

Yandex Music OpenAPI

Уже некоторое время пилю OpenAPI схему для Яндекс Музыки. Сейчас существует только одна полноценная библиотека для взаимодействия с сервисом, написанная на питоне, поэтому я решил что было бы неплохо написать схему, с помощью которой можно будет генерировать библиотеку для каждого языка. Как обычно любой фидбек, пулреквесты и звёздочки на гитхабе категорически приветствуются.

https://github.com/acherkashin/yandex-music-open-api

Ресурсы для успешного прохождения собеседования

Sun, 25 Apr 2021 19:42:03 GMT

**Ресурсы для успешного прохождения собеседования

**Прежде чем проходить собеседование, не плохо было бы подготовиться: 1) Освежи в памяти свои технические знания. 2) Чтобы не быть застигнутым врасплох, узнай базовый список вопросов, которые задают при прохождении собеседования. Например, “Почему вы решили сменить текущее место работы?”, “Что вас не устраивает на текущем месте работы?” или “Какие ваши зарплатные ожидания?“. 3) Подготовь список вопросов для работодателя, чтобы не терять время во время интервью.

Вам нет необходимости проводить много времени в интернете собирая необходимую для собеседования информацию, для этого есть готовые ресурсы. Вот лишь некоторые из них:

FrontEnd developer interview questions FrontEnd interview handbook - ответы на FrontEnd developer interview questions Tech Interview Handbook Reverse interview - вопросы кандидата к работодателю 150+ Вопросов по .Net для junior, middle и senior

Code Review

Sat, 20 Mar 2021 17:00:46 GMT

Code** Review**

Обычно говоря о код ревью, мы подразумеваем процесс, когда код отправляется от автора фичи к другому разработчику для проверки его правильности. Однако помимо этого, код ревью выполняет ещё одну важную функцию - распространение знаний о коде. Если у вас в команде код проходит стадию Code Review, то по крайней мере несколько человек знают о внесённых изменениях.

Код ревью - определенно хорошая практика, которая может предотвратить попадание ошибок в прод и улучшить кодовую базу. Но в то же время плохо настроенный процесс код ревью может значительно замедлить разработку. Ваш Pull Request, может ожидать несколько дней, а то и недель, пока ваш коллега найдёт время, чтобы взглянуть на него. Через неделю, ваш дружелюбный коллега оставит несколько комментариев, после чего вам потребуется ещё пара дней на исправления. Но в то же время, ваш менеджер сообщит вам, что релиз придётся перенести, потому что ваша задача не выполнена?!?!?!

И это ещё не всё! Бывают случаи, когда код ревью является сильнейшим демотиватором. Это особенно заметно, когда ревьюер, придираясь к каждой строчке, показывает своё превосходство, после чего ваши отношения начинают портиться, и вы старательно его избегаете.

Поэтому очень важно не только проводить код ревью, но и проводить его правильно.

Как правильно проводить код ревью:

Ещё по теме:

Небольшой совет для ревьюеров - Код ревью лучше делать, когда ты не находишься в контексте другой задачи, так как переключение контекста является довольно время и энерго затратной операцией. Иными словами лучше делать код ревью:

после завершения задачи
утром
после обеда
после завершения дейли-митинга.

Отладка фокуса в браузере

Tue, 09 Mar 2021 18:00:47 GMT

**Отладка фокуса в браузере

**В последние несколько месяцев у меня было несколько задач связанных с отладкой фокуса, в одних случаях он пропадал неизвестно куда, в других появлялся неизвестно откуда.

Получить текущий активный элемент, или проще говоря — элемент в фокусе, достаточно просто — document.activeElement. С помощью следующей нехитрой конструкции мы сможем логировать элемент, который получает фокус:

document.addEventListener('focusin', () => { console.log('focused: ', document.activeElement); }, true);*

*Другим способом является использование фичи Developer Tools - Live Expressions.

Мне больше нравится первый вариант, так как в консоли остаётся вся цепочка элементов, которые были в фокусе.

**Ещё по теме: **1. Console logging the focused element as it changes 2. Track Which Element Has Focus 3. Псевдо-класс :focus

Наконец-то дошли руки завести LinkedIn.

Sat, 27 Feb 2021 09:24:28 GMT

Наконец-то дошли руки завести LinkedIn.

Установите расширение “Доступ к LinkedIn” для Chrome и забудьте, что он заблокирован в России 😉.

C# Interactive - REPL

Sat, 27 Feb 2021 09:10:07 GMT

**C# Interactive - REPL

**REPL или “read-eval-print loop” - это интерактивная среда разработки (в командной строке), в которой пользователь вводит выражение на языке программирования, а REPL, в свою очередь, считывает Read его, выполняет Eval и отображает результат Print, а затем этот процесс снова повторяется Loop.

Visual Studio Code ❤️ Яндекс.Музыка

Sat, 27 Feb 2021 08:51:41 GMT

**Visual Studio Code ❤️ Яндекс.Музыка

**Последние несколько месяцев разрабатываю расширение Яндекс.Музыки для Visual Studio Code. Сейчас оно находится в достаточно стабильном состоянии (не без багов, конечно).

Если вы устали постоянно держать открытой вкладку с Яндекс.Музыкой, то вам просто необходимо его попробовать. Или можете просто поддержать звездочкой на GitHub. Критика, рекомендации по улучшению и Issue на GitHub категорически приветствуются.

#vscode #yandexmusic #extension

Навигация с клавиатуры

Sat, 27 Feb 2021 08:31:07 GMT

[Навигация с клавиатуры

](https://www.cherkashin.dev/accessibility/html/css/2020/06/05/keyboard-navigation.html)В большинстве статей по Accessibility вы прочтете, что доступность помогает людям с ограниченными возможностями. Но зачастую, мы не задумываемся об этом совсем или задумываемся в последнюю очередь (сроки то горят), лишая многих людей возможности пользоваться нашим приложением. Но сегодня я хочу поговорить именно о нас с вами, и о том, как мы можем упростить свою жизнь. Как вы уже поняли из названия, речь пойдет не об Accessibility в целом, а только об одном её аспекте - навигации с клавиатуры.

#keyboard #keyboardnavigation #accessibility

Пишем Visual Studio Code extension для VirtualBox

Sat, 27 Feb 2021 08:23:06 GMT

[Пишем Visual Studio Code extension для VirtualBox

](https://www.cherkashin.dev/vscode/typescript/extension/2020/04/14/virtualbox-vscode-extension.html)VS Code достаточно мощный текстовый редактор, куда с помощью различных расширений интегрирована куча всевозможных инструментов. Мне всегда невероятно больно, когда нужно покидать его, потому что я сразу начинаю путаться в окнах и забываю, что я вообще хотел сделать. Я думаю, каждый хоть раз терялся во всех открытых им окнах, поэтому предположу, что вам это знакомо. У меня установлено несколько виртуальных машин, и меня невероятно раздражает, что для их запуска нужно открыть VirtualBox просто чтобы нажать кнопку Run. Собственно говоря, сегодня я расскажу, как избавился от своей боли.

Это статья проведет вас через весь путь создания VirtualBox extension - от генерации базового шаблона, до управления виртуалками из VS Code.

C# Interactive - REPL

Sat, 26 Sep 2020 00:00:00 GMT

Несколько лет назад, я заметил, что в Visual Studio появилась новая окошко "C# Interactive". Eщё тогда я стал догадываться, что это REPL, однако только недавно решил разобраться, что оно из себя представляет и в каких случаях может быть полезно. Прежде чем мы перейдём, к "С# Interactive" давайте кратко обсудим, что же такое REPL.

Навигация с клавиатуры

Fri, 05 Jun 2020 00:00:00 GMT

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

Пишем Visual Studio Code extension для VirtualBox

Tue, 14 Apr 2020 00:00:00 GMT

VS Code достаточно мощный текстовый редактор, куда с помощью различных расширений интегрирована куча всевозможных инструментов. Мне всегда невероятно больно, когда нужно покидать его, потому что я сразу начинаю путаться в окнах и забываю, что я вообще хотел сделать. Я думаю, каждый хоть раз терялся ~~в трех соснах~~ во всех открытых им окнах, поэтому предположу, что вам это знакомо. У меня установлено несколько виртуальных машин, и меня невероятно раздражает, что для их запуска нужно открыть VirtualBox просто чтобы нажать кнопку **Run**. Собственно говоря, сегодня я расскажу, как избавился от своей боли.

Сравнение C# и JavaScript. Основы

Tue, 19 Jun 2018 00:00:00 GMT

В данной статье я бы хотел систематизировать свои базовые знания об этих языках и рассмотреть их сходства и различия. Данная статья может служить руководством для C# разработчиков, которые хотят изучить JavaScript и наоборот. Также хочу заметить, что в данной статье описываются возможности клиентского JS, так как опыта разработки на Node.js у меня нет. Итак, если вы все ещё не потеряли интерес — приступим.