Forwarded from DUMP Spb
«Разработка новой дизайн-системы при условии большого количества команд», Василий Беляев, team lead, Криптонит
Во время разработки часто возникают идеи улучшений, которые хочется сразу реализовать. Но в результате некоторые моменты упускаются. В своем докладе Василий расскажет о методах оптимизации работы с компонентами и интеграции сторонних библиотек. Обсудим рефакторинг через package.json, оптимизацию импортов, сокращение размера бандлов и ускорение сборки. Эти моменты помогут улучшить производительность приложений, скорость сборки проектов и размер бандлов.
📌 14 февраля встречаемся на DUMP Spb 2025 в Санкт-Петербурге: 5 тематических секций и почти 40 докладов!
Во время разработки часто возникают идеи улучшений, которые хочется сразу реализовать. Но в результате некоторые моменты упускаются. В своем докладе Василий расскажет о методах оптимизации работы с компонентами и интеграции сторонних библиотек. Обсудим рефакторинг через package.json, оптимизацию импортов, сокращение размера бандлов и ускорение сборки. Эти моменты помогут улучшить производительность приложений, скорость сборки проектов и размер бандлов.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2🔥2⚡1💯1
Тут в рабочем канале вчера запустили новую рубрику #Накодь! Сегодня уже есть решения!
❤1🔥1🆒1
Forwarded from Криптонит. Разработка, наука, шифрование
А у нас новая рубрика — #Накодь!
Сегодня — код на JavaScript с ошибкой(а может, и нет 😀 ) . Кто увидел, где она и как её можно решить — ждём в комментариях🔥
А завтра поделимся вариантами решения от Василия Беляева, нашего руководителя группы разработки интерфейсов!
Сегодня — код на JavaScript с ошибкой
А завтра поделимся вариантами решения от Василия Беляева, нашего руководителя группы разработки интерфейсов!
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Криптонит. Разработка, наука, шифрование
В карточках оставили решение вчерашней ошибки
Экспертизой поделился Василий Беляев, руководитель группы разработки интерфейсов в «Криптоните».
Если понравилась эта задачка, то обязательно посмотрите вот это видео (смотреть). Там Василий разбирает задачи «Палиндром», «Поворот матрицы» и «Подсчёт элементов в списке» — их часто дают на собеседовании. #javascript
📌 Если понравилась наша новая рубрика #накодь, то обязательно ставьте 🖤 . Мы разберём ошибки других языков программирования.
Uncaught TypeError: this.clearHistory is not a function
Экспертизой поделился Василий Беляев, руководитель группы разработки интерфейсов в «Криптоните».
Если понравилась эта задачка, то обязательно посмотрите вот это видео (смотреть). Там Василий разбирает задачи «Палиндром», «Поворот матрицы» и «Подсчёт элементов в списке» — их часто дают на собеседовании. #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Самое интересное для меня открытие за вчера:
Не тянет за собой peerDependencies:
(документация https://classic.yarnpkg.com/lang/en/docs/dependency-types/#toc-peerdependencies)
Но у npm противоположенное поведение
тянет peerDependencies, даже в prod окружении при настройках из коробки (начиная с v7):
(документация https://docs.npmjs.com/cli/v11/configuring-npm/package-json#peerdependencies)
Я уже очень давно пользуюсь yarn, и даже не задумывался об этом, но оказывается при работе с библиотеками стоит этот момент учитывать, т.к. при одновременном использовании может вызвать локальные баги. На мой взгляд, вариант с npm служит примером того, что могут залетать рандомные библиотеки, которые ты у себя пока не ожидаешь, особенно в prod окружении
Чисто для статистики:
- npm i с флагом production устанавливает 35 зависимостей
- yarn install с флагом prod - 15 зависимостей
Если я пойму, что мне на проекте не хватает пакета в прод окружении, то я лучше его явно укажу, чем искать, из какого пакета тянутся пакеты, и не исключено, что рандомной версией (в идеале максимально допустимой по правилам, но не все пакеты во время переходят на свежие версии популярных библиотек)
Вывод: yarn для меня удобнее
yarn install
Не тянет за собой peerDependencies:
Peer dependencies are a special type of dependency that would only ever come up if you were publishing your own package.
Having a peer dependency means that your package needs a dependency that is the same exact dependency as the person installing your package. This is useful for packages like react that need to have a single copy of react-dom that is also used by the person installing it.
(документация https://classic.yarnpkg.com/lang/en/docs/dependency-types/#toc-peerdependencies)
Но у npm противоположенное поведение
npm i
тянет peerDependencies, даже в prod окружении при настройках из коробки (начиная с v7):
In npm versions 3 through 6, peerDependencies were not automatically installed, and would raise a warning if an invalid version of the peer dependency was found in the tree. As of npm v7, peerDependencies are installed by default.
(документация https://docs.npmjs.com/cli/v11/configuring-npm/package-json#peerdependencies)
Я уже очень давно пользуюсь yarn, и даже не задумывался об этом, но оказывается при работе с библиотеками стоит этот момент учитывать, т.к. при одновременном использовании может вызвать локальные баги. На мой взгляд, вариант с npm служит примером того, что могут залетать рандомные библиотеки, которые ты у себя пока не ожидаешь, особенно в prod окружении
Чисто для статистики:
- npm i с флагом production устанавливает 35 зависимостей
- yarn install с флагом prod - 15 зависимостей
Если я пойму, что мне на проекте не хватает пакета в прод окружении, то я лучше его явно укажу, чем искать, из какого пакета тянутся пакеты, и не исключено, что рандомной версией (в идеале максимально допустимой по правилам, но не все пакеты во время переходят на свежие версии популярных библиотек)
Вывод: yarn для меня удобнее
🤔3🔥1
Forwarded from Криптонит. Разработка, наука, шифрование
Media is too big
VIEW IN TELEGRAM
Как мы посадили на диету наши компоненты и сделали их использование удобнее
Недавно наш руководитель группы разработки интерфейсов Василий Беляев выступал на конференции Dump SPb. Он рассказал о методах оптимизации работы с компонентами и интеграции сторонних библиотек, а также обсудил с участниками рефакторинг через package.json, оптимизацию импортов, сокращение размера бандлов и ускорение сборки.
📣 Делимся записью доклада — для удобства оставили таймкоды.
00:05 — Пара слов о себе и о компании. «Я один из тех людей, кто умеет верстать на таблицах»
01:26 — наш стек для фронтенда. «Мы те ребята, кто не пишет на React'e»
01:55 — проблемы с библиотеками. «Было много тяжёлых компонентов и зависимостей, которые тянулись исторически, вызывали конфликты версий, увеличивали размер проекта и снижали скорость его деплоя»
02:55 — что представляют собой наши продукты и применяемые технологии
04:10 — как выглядит хаос в библиотеках
05:00 — конкретный пример: от тулзов (dev tools) до проекта
05:32 — как всё исправить: убираем импорты, перебираем зависимости, вместо прямых импортов создаём плагины
10:05 — работа с зависимостями
14:25 — рост команды и новые проблемы
15:13 — чиним компонент для одного проекта, но ломаем для другого
15:20 — оптимизируем: меняем workflow и всё делаем через UI-KIT
19:55 — что ещё исправлять?
21:02 — устраняем зоопарк и обеспечиваем совместимость версий
21:45 — собрали все совместимые версии библиотек в Dev-core, чтобы не было таких звонков: «Вася, мы установили компоненты, но у нас сломался datepicker!»
24:47 — «Мы, разработчики, с одной стороны ленивые, а с другой... тоже ленивые! Но мы не могли остановиться и сделали Dev-config!»
27:10 — PROFIT! Время сборки библиотек сократилось на 70%. Размеры бандлов сократились на 95,8%!
28:10 — планы по дальнейшей оптимизации
Также вы можете посмотреть это видео
📺 на Rutube
📺 в VK видео
Недавно наш руководитель группы разработки интерфейсов Василий Беляев выступал на конференции Dump SPb. Он рассказал о методах оптимизации работы с компонентами и интеграции сторонних библиотек, а также обсудил с участниками рефакторинг через package.json, оптимизацию импортов, сокращение размера бандлов и ускорение сборки.
00:05 — Пара слов о себе и о компании. «Я один из тех людей, кто умеет верстать на таблицах»
01:26 — наш стек для фронтенда. «Мы те ребята, кто не пишет на React'e»
01:55 — проблемы с библиотеками. «Было много тяжёлых компонентов и зависимостей, которые тянулись исторически, вызывали конфликты версий, увеличивали размер проекта и снижали скорость его деплоя»
02:55 — что представляют собой наши продукты и применяемые технологии
04:10 — как выглядит хаос в библиотеках
05:00 — конкретный пример: от тулзов (dev tools) до проекта
05:32 — как всё исправить: убираем импорты, перебираем зависимости, вместо прямых импортов создаём плагины
10:05 — работа с зависимостями
14:25 — рост команды и новые проблемы
15:13 — чиним компонент для одного проекта, но ломаем для другого
15:20 — оптимизируем: меняем workflow и всё делаем через UI-KIT
19:55 — что ещё исправлять?
21:02 — устраняем зоопарк и обеспечиваем совместимость версий
21:45 — собрали все совместимые версии библиотек в Dev-core, чтобы не было таких звонков: «Вася, мы установили компоненты, но у нас сломался datepicker!»
24:47 — «Мы, разработчики, с одной стороны ленивые, а с другой... тоже ленивые! Но мы не могли остановиться и сделали Dev-config!»
27:10 — PROFIT! Время сборки библиотек сократилось на 70%. Размеры бандлов сократились на 95,8%!
28:10 — планы по дальнейшей оптимизации
Также вы можете посмотреть это видео
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤2
Forwarded from PiterJS (Ivan Voropaev)
✨ PiterJS #78! Ну наконец-то!
Поговорим про компоненты, послушаем про View Transitions API, поучаствуем в тайной активности - и это всё в 5 метрах от дата-центра Selectel, неплохо, да?) Приходите сами, и берите ваших коллег, друзей и вторых половинок
⏰ Когда: 27 мая (вт), 19:00
📍 Где: Selectel (Цветочная ул., 19, Санкт-Петербург)
📰 Программа
🗣 Николай Шабалин
🎤 Склеиваем экраны: как View Transitions API улучшает пользовательский опыт
🗣 Василий Беляев
🎤 Как мы компоненты оптимизировали, оптимизировали, да выоптимизировали
🎤 Тайная активность
🎫 Регистрация: https://piterjs.org/#meetup=tgc5es_yh9ozv
Поговорим про компоненты, послушаем про View Transitions API, поучаствуем в тайной активности - и это всё в 5 метрах от дата-центра Selectel, неплохо, да?) Приходите сами, и берите ваших коллег, друзей и вторых половинок
⏰ Когда: 27 мая (вт), 19:00
📍 Где: Selectel (Цветочная ул., 19, Санкт-Петербург)
📰 Программа
🗣 Николай Шабалин
🎤 Склеиваем экраны: как View Transitions API улучшает пользовательский опыт
🗣 Василий Беляев
🎤 Как мы компоненты оптимизировали, оптимизировали, да выоптимизировали
🎤 Тайная активность
🎫 Регистрация: https://piterjs.org/#meetup=tgc5es_yh9ozv
PiterJS
Ежемесячный питерский митап о JavaScript, Node.js и всём, что окружает современного фронтендера.
👍1
Forwarded from PiterJS (Дим)
✨ На грядущем PiterJS для вас выступит Василий Беляев с докладом:
📜 Как мы компоненты оптимизировали, оптимизировали, да выоптимизировали
🎫 Регистрируйся, пока есть места: https://piterjs.org/#meetup=tgc5es_yh9ozv
✔️ А если передумал идти — отмени регистрацию там же.
📜 Как мы компоненты оптимизировали, оптимизировали, да выоптимизировали
Во время разработки часто возникают идеи улучшений, которые хочется реализовать сразу, но это может привести к упущению некоторых моментов. В своём докладе я расскажу о методах оптимизации работы с компонентами и интеграции сторонних библиотек. Мы обсудим рефакторинг через package.json, оптимизацию импортов, сокращение размера бандлов и ускорение сборки. Эти моменты помогут улучшить производительность приложений, скорость сборки проектов и размер бандлов.
🎫 Регистрируйся, пока есть места: https://piterjs.org/#meetup=tgc5es_yh9ozv
✔️ А если передумал идти — отмени регистрацию там же.
🔥1
Всем привет! Уже сегодня выступаю с докладом про оптимизацию компонентов на PiterJS.
Кому интересно, ссылка на трансляцию: https://live.vkvideo.ru/piterjs (начало в 19:00)
А ещё, для ранних пташек, кто придёт к 17-30, Селектел готов провести экскурсию по своему дата-центру.
Следите за началом трансляции и подробной информацией в канале PiterJS: https://t.iss.one/piterjs
Кому интересно, ссылка на трансляцию: https://live.vkvideo.ru/piterjs (начало в 19:00)
А ещё, для ранних пташек, кто придёт к 17-30, Селектел готов провести экскурсию по своему дата-центру.
Следите за началом трансляции и подробной информацией в канале PiterJS: https://t.iss.one/piterjs
👍3🔥3
Всем привет! Хотите узнать про современные цвета в web? Сегодня в 19:00 я буду выступать на Engineering Meetups от Health Samurai с темой «Как использовать цвета на полную?
Display P3 и OKLCH в современном фронтенде»
Ссылка на регистрацию: https://health-samurai.ru/page72746755.html
Display P3 и OKLCH в современном фронтенде»
Ссылка на регистрацию: https://health-samurai.ru/page72746755.html
🔥2👍1
Теперь я еще в сетке: https://set.ki/channel/nkUghu8
Сетка
DevLeader - или записки программиста. Канал в Сетке
👍2🔥1
Пора использовать новые цвета в web!
21 августа на Engineering Meetups от Health Samurai я рассказывал о работе с цветами в современном web. Главный вывод: мы теперь можем использовать возможности новых цветовых пространств прямо в CSS и не боятся этого! Главное пользоваться в уместных случаях
Основные моменты:
- OKLCh в CSS — это стандарт (W3C), который уже поддерживается современными браузерами (https://www.w3.org/TR/css-color-4/).
- Мы можем это проверить совместимость! С помощью CSS (@supports) и JavaScript можно точно проверить, поддерживает ли браузер и даже дисплей пользователя Display P3.
- Дизайнеры тоже уже могут переходить на OKLCH! Figma научилась работать с OKLCH, а Photoshop умеет работать с расширенными цветовыми пространствами, но с цветовой моделью Lab.
А вот главная киллер-фича:
Теперь можно на лету создавать производные цвета от основного (primary) с помощью простых математических вычислений. Больше не нужны гигантские статические палитры от дизайнеров!И самое интересное — новые цвета будут перцептивно равномерными (то есть, изменения воспринимаются человеческим глазом плавно и предсказуемо) .
P.S. Выступление прошло в формате дискуссии и было немного воркшопа — было интересно!
#ccs #frontend #ui #meetups
21 августа на Engineering Meetups от Health Samurai я рассказывал о работе с цветами в современном web. Главный вывод: мы теперь можем использовать возможности новых цветовых пространств прямо в CSS и не боятся этого! Главное пользоваться в уместных случаях
Основные моменты:
- OKLCh в CSS — это стандарт (W3C), который уже поддерживается современными браузерами (https://www.w3.org/TR/css-color-4/).
- Мы можем это проверить совместимость! С помощью CSS (@supports) и JavaScript можно точно проверить, поддерживает ли браузер и даже дисплей пользователя Display P3.
- Дизайнеры тоже уже могут переходить на OKLCH! Figma научилась работать с OKLCH, а Photoshop умеет работать с расширенными цветовыми пространствами, но с цветовой моделью Lab.
А вот главная киллер-фича:
Теперь можно на лету создавать производные цвета от основного (primary) с помощью простых математических вычислений. Больше не нужны гигантские статические палитры от дизайнеров!
P.S. Выступление прошло в формате дискуссии и было немного воркшопа — было интересно!
#ccs #frontend #ui #meetups
Из интересного! С выходом iOS26 снова появились возможности оплачивать с помощью iPhone свои покупки. Уже второй банк подтянул это решение. Сегодня опробовал - работает на новых терминалах. На старых - пока не знаю… но там всегда остается QR код.
P.S. Новый способ оплаты не отличается по условиям от использования физических носителей или Apple Pay
P.S. Новый способ оплаты не отличается по условиям от использования физических носителей или Apple Pay
🔥1