cherkashin.dev | Программирование

🤝 Как подружить 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

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

⏭️ Соседние селекторы в 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 👋 Только ленивый не написал, что 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

У нас на проекте есть 2 основных правила для написания стилей: - У всех CSS-классов должен быть префикс dp-, выбранный по названию продукта - Мы используем БЭМ — <block>__<element>--<modifier> Однако есть большой пласт легаси стилей, где эти правила не используются. И вот, при добавлении monaco-editor’а (текстовый редактор на котором построен VS Code) в новую фичу, прилетело ишью — у горизонтального и вертикального скролл-баров разная толщина. А вся проблема в том, что наши глобальные стили для класса slider применяются к элементу с таким же классом в monaco-editor. Именно эту проблему и решают префиксы — позволяют избежать коллизии имён с библиотечными классами. #css #bem

source-map-explorer На прошлой неделе анализировал размер главного бандла мобильной версии нашего приложения. В спешке мы накосячили с импортами и бандл раздулся. 🤔 Как анализировать? Для анализа использовал утилиту source-map-explorer. При запуске, утилита генирирует древовидную карту, с помощью которой можно увидеть, какие именно файлы попадают в бандл. К сожалению, почему именно это что-то попало в бандл утилита не говорит. 👉 В чём была проблема? Иногда мы ленимся и в файле компонента кладём какую-нибудь утилитную функцию, enum или константу, а потом где-то в другом месте импортируем их. Так вот, когда мы их импортируем, то в бандл “засасывает” не только импортируемую функцию, но и весь компонент, из-за чего размер бандла и увеличивается. P.S. А какими инструментами пользуетесь вы? #frontend #performance #tools