cherkashin.dev

Поймал себя на мысли, что я очень "долго запрягаю". Помню, был в Белгороде на конференции, где выступал Дорофеев. И он там объяснял на гусеницах, что есть 2 патологии: - если гусеница (то есть мы с вами) много думает, потребляет информацию, но ничего не делает - у неё отрывается голова - если гусеница только делает, но не думает - она сплющивается Чтобы гусеница нормально двигалась, ей нужно чередовать: подумать, что-то сделать, подумать, что-то сделать. Я стараюсь соблюдать этот баланс, но иногда всё-таки впадаю в перфекционизм. Начинаю думать, что прежде чем что-то сделать, нужно сначала изучить ещё кучу всего. И в итоге, если объяснять на примере гусеницы, голова снова отрывается. Как ни крути, в эпоху ИИ это стало ещё заметнее. Ценность информации снизилась, всё теперь доступно почти мгновенно, бери и делай, но я продолжая следовать старому паттерну, хотя по сути двигаться можно гораздо быстрее. К сожалению, оригинальную картинку не нашёл, поэтому сгенерил свою для наглядности в ChatGPT. А видео с объяснением Дорофеева можно глянуть тут. Надо как-то научиться соблюдать баланс между "думать" и "делать". Ставьте: 👍 - если тоже иногда слишком долго запрягаете 🔥 - если вы здоровая гусеница #productivity

Недавно зашел на гитхаб. Открыл 2 вкладки, в одной из них я залогинился, во второй — нет. Когда открыл вторую, там увидел вот такое сообщение.

"You signed in with another tab or window. Reload to refresh your session."

Думаю, а как гитхаб понял, что я залогинился в другой вкладке? Пошел смотреть в дев тулзах — соединения по вебсокетам не нашел. Пошел гуглить, узнал, что существует BroadcastChannel, с помощью которого можно реализовать взаимодействие между вкладками. Не знаю, он ли используется на гитхабе, но фича интересная. Накидал демку — нужно открыть несколько вкладок и просто нажать "+1", значение обновится во всех вкладках, при этом будет указано, в какой именно вкладке произошло изменение. Использовать очень просто, создаёшь канал с именем, а дальше из одной вкладки можно отправлять сообщения, а в другой — слушать их и как-то на это реагировать.

    
        const channel = new BroadcastChannel('broadcast-demo');

button.addEventListener('click', () => {
  channel.postMessage({
    type: 'session:changed'
  });
});

channel.onmessage = (event) => {
  if (event.data.type === 'session:changed') {
    console.log('Получили сообщение из другой вкладки');
  }
};{}
    

👍 — было полезно 👀 — уже знали про BroadcastChannel #browser #javascript

💪 Боремся с ютубом за внимание Вчера я вернулся из отпуска, отдохнул замечательно. Прилетел на отдых и просто ел, спал, лежал и плавал, никакого тебе стресса, единственная забота — что бы такое съесть на шведском столе. Ну если не считать уведомления из налоговой. От каждого их письма я вздрагиваю, после того, как мне пришлось им заплатить 83 000р из-за неправильно оформленного патента 😅. Я не читал и не смотрел новостные видосы, не читал телеграмм каналы, ну почти. Но в те моменты, когда мне нужно было найти что-то на Ютубе, я открывал главную страницу и видел его рекомендации... И тут сразу вижу, что произошло в мире, что я что-то пропускаю, там новость интересная, а там чувак рассказывает, как он продуктивность свою увеличил в 10 раз, а ещё новый трейлер нового Человека Паука вышел. Блин, всё такое интересное, хочется сразу посмотреть, в общем, ютуб полностью захватывает внимание, через 10 минут я закрываю вкладку и только потом вспоминаю, зачем я вообще туда заходил. Пару месяцев я писал про One Sec, а сегодня расскажу про подходы, чтобы отключить навязчивые рекомендации Ютуба. Я нашел два подхода: - браузерные расширения - встроенный способ на ютубе Я пока попробовал первый вариант — расширение Unhook, оно помогает отключить все рекомендации ютуба: - главная страница будет просто пуста — просто чёрный экран (как на скрине) - при просмотре видео никаких панелей с рекомендаций, никаких отвлечений Второй подход — удалить всю историю ютуба, в этом случае главная страница будет также пуста. Этот подход пока не пробовал, но вот здесь наши индийские друзья уже всё объяснили. - ❤️ — если ютуб также захватывает ваше внимание - 👍 — если вы уже пользуетесь описанными подходами - 🔥 — если вы не против, чтобы ютуб вас отвлекал #productivity

Мы тут недавно в компании разбирались, как мы используем ИИ и где ещё можно его интегрировать. В процессе разговор зашёл о код-ревью. Мы используем self-hosted Gitea, а это значит, что никакого встроенного ИИ-код-ревью у нас, увы, нет. Поэтому вчера утром я открыл Cline, вооружился Claude и, потратив все деньги $4 и примерно час времени, навайбкодил пример сетапа с docker-compose файлом, Gitea и PR Agent. Claude сам провёл анализ и выбрал PR Agent, а затем написал подробную пошаговую инструкцию по интеграции с Gitea через вебхуки. В итоге уже через час всё было готово, и мне оставалось только попросить ChatGPT написать плохой код — чтобы проверить, как вообще будет выглядеть код-ревью от ИИ. Вроде выглядит сносно, но нужно проверять, как он будет работать на реальной кодовой базе. Репозиторий здесь. Расскажите, а вы используете ИИ для код-ревью? Ставьте: 👍 — если да и вам зашло 😢 — если пробовали, но не прижилось 😱 — если у вас код-ревью и это "заапрувь по братски" #ai

Самой большой проблемой при миграции с 🇯🇵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

Выходные закончились, а отдохнуть, как всегда, не получилось. Работать не хочется… но надо 😅. Принёс вам альбом с музыкой под стать понедельнику — с говорящим названием Заебудни. Тут даже объяснять ничего не нужно. Каждая песня — бриллиант 💎. Мои любимые: • Зачем тебе отпуск? • Можешь хуже В общем, хорошей рабочей недели 👍 Пусть она пройдёт легче, чем началась. А вы работаете под музыку? Если да — под какую? 🎧 - 🔥 — часто работаю под музыку - 👍 — включаю музыку, когда делаю задачи, где всё понятно - ❤️ — не работаю под музыку

Как научить машину понимать смысл слов Я думаю все вы слышали про векторные базы данных. В прошлом посте обещал поделиться статьёй про то, как же слова и целые тексты превращаются в вектора. «Привет! Я [0.44, -0.91, 0.66...]» или как научить машину понимать смысл слов В машинном обучении есть базовое правило: модель умеет работать только с числами. Поэтому любой объект — текст, картинку, звук — сначала нужно превратить в числовое представление. Только тогда модель сможет понять, что «груша» связана с «яблоком» куда больше, чем с «теплоходом» Самый простой вариант для текста — 🔢 one hot encoding. Мы берём словарь и каждому слову ставим в соответствие вектор, где одна позиция равна 1, а все остальные — 0. Возьмём предложения:

1. The movie was good. 2. The movie was bad. 3. The movide was awesome.

Кодировка на первой картинке. Формально задача решена, но есть проблема: такие векторы ничего не говорят о смысле слов. Для модели слова «кот» и «собака» так же не похожи друг на друга, как «кот» и «кирпич». Плюс векторы получаются «разреженными» — огромными и почти полностью заполненными нулями. Ну и, конечно, это потребует большого количества ресурсов для обработки. 👉 Следующий шаг — мешок слов и N-граммы. Мы начинаем учитывать не отдельные слова, а их последовательности. Кодировка на второй картинке. Но N-граммы смотрят только на ограниченное число слов и строго по порядку. Поэтому они не улавливают более глубокие смысловые связи. В реальности таких возможных N-грамм — тысячи, и большая часть значений всегда равна 0. То есть, проблема разреженных векторов полностью не уходит. Чтобы модель работала лучше, ей нужно понимать семантику и контекст. Здесь и появляются 🔡 word embeddings. Эмбеддинг — это плотный числовой вектор фиксированной размерности, почти без нулей. Идея в том, что похожие по смыслу слова имеют похожие векторы, а направление в векторном пространстве несёт смысл. В статье это объясняется на наглядном примере с животными. - Сначала берётся одно измерение — размер. Животные с похожими габаритами находятся рядом. - Затем добавляется второе измерение — хищность. В таком пространстве 🦁 «лев» и 🐯 «тигр» оказываются близко (крупные и опасные), 🐄 «корова» — отдельно (крупная, но безопасная), а 🐹 «хомяк» — совсем в другой области. Когда слова представлены такими векторами, с ними можно выполнять математические операции:

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

если мы возьмём слово «Мадрид», добавим «Германия» и вычтем «Испания», ближайшим полученным словом будет «Берлин». Это работает, потому что Мадрид — столица Испании. Когда мы убираем атрибуты, связанные с Испанией, и добавляем атрибуты, связанные с Германией, результирующий вектор тесно совпадает с Берлином, столицей Германии. Сами эмбеддинги генерируются с помощью специально обученных моделей. Ну а про сам подход генерации лучше почитать непосредственно в стать. А на гифке можете посмотреть, как с помощью метода главных компонент визуализировать эмбеддинги. 👍 — если работал с эмбеддингами ❤️ — если интересно, но пока не довелось 👀 — если не твоя тема #ai #fridayreading

🧩 </Frontend>: папка для тех, кто любит фронтенд Я давно не участвовал в подборках, но сегодня собралась отличная компания, на большинство каналов я подписан уже несколько лет, поэтому не могу не поделиться. 👨‍💻 Что внутри:

◻️ JS, TS, React, Next, Node – с разбором задачек, собесов, архитектуры и почему определенное решение потом аукнется в проде ◻️ Авторские блоги людей с опытом, которые уже наломали дров, пережили рефакторинг рефакторинга и могут спокойно объяснить что и как ◻️ Fullstack-мысли: от фронта до базы, от API до тёмной темы в админке ◻️ Пишут ребята с 5+ лет боевого опыта – делятся тем, о чём не расскажут на курсах ◻️ Мемы, кейсы, паттерны и фронт с человеческим лицом

Если вы сталкивались с бесконечными перерисовками в React или чинили баг в проде глубокой ночью — то эта подборка для вас. 📂 Забирайте папку с подборкой каналов. P.S. Я беру подборки крайне редко, но они помогают продвижению канала — за счёт этого сюда приходит новая аудитория, а у меня появляется больше мотивации продолжать писать технические разборы и делиться тем, что реально применяю в работе. 🙏 А вы как обычно находите новые каналы? 👍 — через подборки 🔥 — по рекомендациям 🤷‍♂️ — почти не подписываюсь, читаю точечно

За последние пару месяцев видел пару публикаций у знакомых про отказ от соц сетей или их осознанное ограничение. Я любитель поскролить ленту и насытиться лёгким дофамином, так что для меня тема более чем актуальная, поэтому я начал пользоваться One Sec. ❓ Что такое One Sec? Это приложение, которое помогает ограничить необдуманные открытия других приложений. Ну, знаете, как это бывает: билд запустил, или что-то загружается дольше пары секунд — и ты уже ушёл скролить ленту на несколько минут Но One Sec не даст вам мгновенно открыть запретграм, телегу или куда там у вас тянутся руки в моменты скуки. Вместо этого One Sec покажет экран с предложением «Сделайте глубокий вдох…» секунд так на 10 и заодно отобразит, сколько раз за последние 24 часа вы пытались открыть приложение. Примерно два месяца назад я поставил такое ограничение на запретграм — и теперь счётчик в будние дни редко показывает больше 2 раз за 24 часа, хотя до этого он легко доходил до 50. Когда знаешь, что приложение не откроется мгновенно, желание зайти туда как-то само пропадает 🤷‍♂️. ⚙️ Настраивается всё довольно быстро, через автоматизации айфона: - Когда открывается определённое приложение - 🅰 Активировать one sec На прошлой неделе поставил ограничения ещё и на телегу и ВК. Тут есть нюанс: в них я часто переписываюсь, особенно сейчас, когда идёт ремонт, а не только листаю ленту или читаю каналы. Поэтому пришлось настроить «Быстрое переключение» — чтобы экран с ожиданием не показывался, если я вернулся в приложение в течение 5 минут. 📊 Результаты После того как я стал реже открывать запретграм, быстрый дофамин начал искаться в других местах — и в итоге я стал чаще заходить в ВК, телегу и сетку. Так что one sec пришлось поставить и на них тоже. В целом штука рабочая 👍. Она реально сбивает импульсивное желание открыть соцсети, и за счёт этого концентрация на важных вещах становится заметно лучше. Ставьте: - 👍 Если пользуетесь приложениями типа one sec - ❤️ Если у вас нет проблем с думскроллингом - 🤪 Если любите залипнуть в соц сетях #burnout #productivity

🎭 Про маски У нас наметился очередной редизайн, и снова всплыла проблема, с которой мы живём уже очень долго — зоопарк иконок. Если кратко: мы не можем инлайнить 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