Помните было видео с задачами? Теперь мы перевели это в текст (https://habr.com/ru/companies/kryptonite/articles/856136/) - и некоторые решения предложил коллега, который не занимается программированием )
Хабр
Зачем искать палиндромы и вращать матрицы в поисках лучшей работы
Привет, Хабр! Меня зовут Василий Беляев. Я руководитель группы разработки фронтенда в «Криптоните». В этой статье мы разберём три задачи из тех, которые можем задать на собеседованиях. Заодно обсудим,...
🔥3
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