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
Это было здорово!) Доволен докладом, и мероприятием!) Надо будет повторить
🔥2❤1
Forwarded from Криптонит. Разработка, наука, шифрование
This media is not supported in your browser
VIEW IN TELEGRAM
❤1🔥1
Media is too big
VIEW IN TELEGRAM
Всем привет! В субботу выступал на конференции #ITGorky Dev Conf!. Рассказал про компоненты, чуть обновив доклад. И уже появилось видео ). Спасибо за организаторам за приглашение и коллегам за помощь в подготовке и поддержку).
❤5⚡1👍1
Media is too big
VIEW IN TELEGRAM
Всем привет! Еще 21 августа выступал на Engineering Meetups от Health Samurai c докладом про современные цветовые модели в web, и в целом немного в digital.
Про что рассказывал:
- Как реально меняется картинка на новых экранах — показал на свои пример с адаптацией под sRGB экраны
- Почему нужно знать про OKLCH, Display P3 — и как это может спасти проект (или подпортить, если подходить вслепую).
- Какие CSS-фишки появились — что уже поддерживается в браузерах, где работает, а где нет.
- Когда новая цветовая модель делает страничку сочнее, а когда — лучше не лезть туда.
- Как сделать иллюстрации, чтобы они выглядели ярко на современных устройствах.
- Что делать с поддержкой старых браузеров, и как вообще не превратить свой сайт в баг-репорт.
Формат оказался интересным и новым для меня. Получилось живое обсуждение вместо доклада и сессии вопросов и ответов. Если занимаешься дизайном или фронтендом - рекомендую посмотреть!
#OKLCh #CSS #Frontend #design
Про что рассказывал:
- Как реально меняется картинка на новых экранах — показал на свои пример с адаптацией под sRGB экраны
- Почему нужно знать про OKLCH, Display P3 — и как это может спасти проект (или подпортить, если подходить вслепую).
- Какие CSS-фишки появились — что уже поддерживается в браузерах, где работает, а где нет.
- Когда новая цветовая модель делает страничку сочнее, а когда — лучше не лезть туда.
- Как сделать иллюстрации, чтобы они выглядели ярко на современных устройствах.
- Что делать с поддержкой старых браузеров, и как вообще не превратить свой сайт в баг-репорт.
Формат оказался интересным и новым для меня. Получилось живое обсуждение вместо доклада и сессии вопросов и ответов. Если занимаешься дизайном или фронтендом - рекомендую посмотреть!
#OKLCh #CSS #Frontend #design
👍4🔥4
Всем привет! Сегодня вышел подкаст от Криптонита, в котором я принимал участие! )
👍2❤1
Forwarded from Криптонит. Разработка, наука, шифрование
Media is too big
VIEW IN TELEGRAM
Джуны больше не нужны? (Спойлер: нет, «за ИИ стоит следить ещё похлеще, чем за джуном» )
В новом подкасте «Криптонит говорит» мы обсудили:
🔹 как быстро и эффективно расти внутри компании;
🔹 правда ли, что ИИ скоро заменит джунов;
🔹 какие тренды во frontend-разработке стоит ожидать в ближайшее время;
🔹 какой стек нужен фронтендерам и многое другое.
Смотрите и слушайте выпуск на платформах (везде есть таймкоды)
📺 VK Видео
📺 YouTube
📺 Rutube
💬 Подкаст в телеграме
🎵 Яндекс.Музыка
В выпуске приняли участие:
🟦 Василий Беляев, frontend team lead в «Криптоните»;
🟦 Артём Поморцев, middle frontend разработчик в «Криптоните»;
🟦 Семён Клюев, junior frontend разработчик в «Криптоните». #Криптонит_говорит
📌 В первом закреплённом комментарии под видео есть полезные материалы для изучения frontend-разработки от экспертов «Криптонита».
В новом подкасте «Криптонит говорит» мы обсудили:
Смотрите и слушайте выпуск на платформах (везде есть таймкоды)
В выпуске приняли участие:
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4😍2
Google опубликовал те изменения в CSS, которые завез в Chrome за 2025 год: https://chrome.dev/css-wrapped-2025/
CSS Wrapped 2025
Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new CSS features that landed in Chrome this year.
👍1
Все знают сайт roadmap.sh. Они относительно недавно запустили новый раздел для реализации и проверки pet-проектов: https://roadmap.sh/projects
Полезно, если хотите прикрутить к резюме ссылку на GitHub с pet-проектами
Полезно, если хотите прикрутить к резюме ссылку на GitHub с pet-проектами
🔥2❤1
Вчера рассказал про то, как выкрутить цвета в web на полную - на самом деле легко и просто (когда-нибудь обновлю свой сайт и применю oklch)
Если интересно, то вот ссылка на презентацию
не все пошло по плану, но было здорово! Всем спасибо и до встречи на dump в следующем году)
Надеюсь лет через 5 вернусь с дополнением про rec2020 на наших устройствах
Если интересно, то вот ссылка на презентацию
не все пошло по плану, но было здорово! Всем спасибо и до встречи на dump в следующем году)
Надеюсь лет через 5 вернусь с дополнением про rec2020 на наших устройствах
❤2🔥1