Найти в Дзене
🚀 Мама, я тимлид (и это не про книгу
🚀 Мама, я тимлид (и это не про книгу) Последние пару лет я стараюсь подводить итоги года, а в этом году решил ещё и поставить цели на текущий год. Планы большие, и надеюсь, что хоть часть из задуманного получится реализовать. Но есть и кое-что, чего я не планировал. У нас в компании происходят большие изменения, и пару месяцев назад я стал тимлидом . Команда такая: - тимлид (это я 🎉) - продакт 👩‍💼 - 2 разработчика 👨‍💻👨‍💻 - 2 manual QA 🧪🧪 - 1 automation QA 🤖 И если я примерно понимаю,...
8 месяцев назад
📝 Meeting Notes
📝 Meeting Notes 1️⃣ Ситуация Вы созвонились с продактом, дизайнером, коллегой по команде — о чём-то договорились. Через какое-то время он вас спрашивает: «А почему реализовано вот так?» Вы отвечаете: «Мы с тобой об этом договорились». А он в ответ: «Такого не было, я такого не говорил». 2️⃣ Другая ситуация Вы созвонились, о чём-то договорились, не записали, задачу отложили на пару дней — и уже не помните, о чём договорились. Приходится снова созваниваться и вспоминать, о чём же всё-таки говорили...
9 месяцев назад
🎧 Потеря потерь
🎧 Потеря потерь ... Моим наушникам Sennheiser стало совсем плохо. Пару лет назад я перевернулся на электросамокате — сам отделался лёгким испугом, а вот наушники получили множество трещин и переломов. С тех пор держались на честном слове, и вот теперь окончательно сдался микрофон. Взял на замену их собрата поменьше — EPOS PC 8...
9 месяцев назад
🤖 Онбординг ИИ
🤖 Онбординг ИИ Что происходит, когда в команде появляется новый сотрудник? Правильно — он адаптируется и старается писать код в соответствии с гайдлайнами, принятыми в команде. А помогают ему в этом документация, линтеры и ревью коллег. По сути, ИИ — это ваш коллега, которому вы делегируете задачи, и ему тоже нужно объяснить, как писать код. И здесь как раз пригодится документация, которую никто из ваших коллег не читает 😄, но ИИ — будет. Многие ИИ-агенты поддерживают формат "правила/инструкции", где можно описать стандарты и архитектуру проекта...
9 месяцев назад
У меня есть проблема
У меня есть проблема 😐 И заключается она в том, что я часто не могу насладиться отдыхом в полной мере. Когда я ничего не делаю, я чувствую тихий голосок внутри. Он шепчет, что я теряю время, а мог бы: - 📖 прочитать книгу - 🎓 пройти курс - 🛠️ начать ремонт - 🏋️‍♂️ сходить лишний раз в зал - и т.д. Он не дает полностью расслабиться и насладиться выходными в полную силу. Но при этом, если я займусь чем-то, то удовольствия тоже не получу, я только сильнее устану. Получается такой замкнутый круг,...
9 месяцев назад
🗿 Подводные камни при переходе с ES5 на ES6
🗿 Подводные камни при переходе с ES5 на ES6 Недавно мы с командой, наконец-то перешли с ES5 на ES6. Всё прошло достаточно плавно, нам пришлось исправить всего несколько ошибок в рантайме. Почти все ошибки были в очень старых файлах, где были отключены проверки typescript с помощью @ts-nocheck. Ошибка 1️⃣ — Action is not a constructor Ошибка возникла в нескольких местах, где мы использовали стрелочную функцию в качестве конструктора. Раньше она не возникала, потому что стрелочная функция компилировалась в обычную function...
9 месяцев назад
🤝 Как подружить 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
1 год назад
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
1 год назад
⏭️ Соседние селекторы в 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
1 год назад
Notion 👋 Только ленивый не написал, что 9 сентября Notion прекращает работу для российских пользователей. Пару дней назад и у меня появилась желтая плашка, которая говорит “на выход”. Говорят, пользователи платных подписок точно потеряют доступ. Посмотрим, будет ли работать Notion через VPN для пользователей на бесплатном тарифе или нет. У меня пока план миграции такой: 1. Экспортировал все данные из Notion 2. Импортировал в российские аналоги - Yonote и Teamly, на случай если понадобятся старые заметки в удобно читаемом формате (ну не совсем он удобный) 3. Обмазываюсь плагинами в 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
1 год назад
У нас на проекте есть 2 основных правила для написания стилей: - У всех CSS-классов должен быть префикс dp-, выбранный по названию продукта - Мы используем БЭМ — <block>__<element>--<modifier> Однако есть большой пласт легаси стилей, где эти правила не используются. И вот, при добавлении monaco-editor’а (текстовый редактор на котором построен VS Code) в новую фичу, прилетело ишью — у горизонтального и вертикального скролл-баров разная толщина. А вся проблема в том, что наши глобальные стили для класса slider применяются к элементу с таким же классом в monaco-editor. Именно эту проблему и решают префиксы — позволяют избежать коллизии имён с библиотечными классами. #css #bem
1 год назад
source-map-explorer На прошлой неделе анализировал размер главного бандла мобильной версии нашего приложения. В спешке мы накосячили с импортами и бандл раздулся. 🤔 Как анализировать? Для анализа использовал утилиту source-map-explorer. При запуске, утилита генирирует древовидную карту, с помощью которой можно увидеть, какие именно файлы попадают в бандл. К сожалению, почему именно это что-то попало в бандл утилита не говорит. 👉 В чём была проблема? Иногда мы ленимся и в файле компонента кладём какую-нибудь утилитную функцию, enum или константу, а потом где-то в другом месте импортируем их. Так вот, когда мы их импортируем, то в бандл “засасывает” не только импортируемую функцию, но и весь компонент, из-за чего размер бандла и увеличивается. P.S. А какими инструментами пользуетесь вы? #frontend #performance #tools
1 год назад