На данный момент у нас используются три самых популярных менеджера пакетов (Npm, Yarn и Pnpm). И всё бы ничего, но разные команды начали периодически обращаться с проблемой несоответствия типов Typescript из наших транзитивных зависимостей. Выяснилось что это проблема Npm и Yarn, но как же её решать?выглядит это примерно так, только при реэкспорте enum из library-f@1.0.0 по факту получаем enum из library-f@2.0.0 - library-a/ - package.json - node_modules/ - library-b/ - package.…
Добрый день. Меня зовут Тимофей, я фронт-тимлид в диджитал-продакшене ДАЛЕЕ. В данном цикле статей я поделюсь подходами и инструментами фронтенд-разработки на аутсорсе, которые помогут создать качественный продукт без кошмарного instant-legacy и значительно облегчат жизнь команде разработчиков и не только.Типичные веб-приложения в аутсорс-командах разрабатываются, как правило, год-два. За это время не раз успевают смениться как разработчики, так и менеджеры с заказчиками. Однотипных проектов в…
Если вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui. Вместо того, чтобы распространяться в виде пакета npm, компоненты shadcn/ui добавляются с помощью интерфейса командной строки (command line interface, CLI), который помещает исходный код компонентов непосредственно в ваш проект. Разработчик библиотеки указывает причину такого решения на официальном сайте shadcn/ui. "…
В прошлый раз мы рассматривали внедрение Sentry со стороны эксплуатации: устанавливали на сервер self-hosted, делали его высокодоступным при помощи сети доставки td-agent, настраивали мониторинг. Ожидаются небольшие дополнения.Теперь рассмотрим процесс внедрения Sentry со стороны команды разработки.Релизы и интеграция с gitlabОбщие приемы клиентов Автоматический перехват ошибок и ручная отправкаОбогащение событийBackend КлиентРелизыFrontend Доставка sourcemapsРазмер бандлаБлокировщик рекламыРе…
Валидация форм является важной частью frontend-разработки, которая помогает улучшить пользовательский опыт и предотвратить ошибки при отправке данных на сервер. В этой статье мы рассмотрим, как использовать библиотеку AJV совместно с Vue.js и TypeScript для создания мощной системы валидации формы.Что такое AJV?AJV (Another JSON Schema Validator) - это быстрая библиотека валидации данных в формате JSON с поддержкой JSON Schema. JSON Schema - это язык описания структуры и валидации данных в форм…
Недавно компания Facebook* (aka Meta**) выпустила в опенсорс собственную CSS-in-JS библиотеку под названием StyleX. По заявлениям разработчиков, она отлично подходит для больших проектов и ключевым ее преимуществом является перфоманс.В этой статье мы рассмотрим пример использования, основные функции и особенности данного решения.Начать стоит с того, что StyleX – framework agnostic. Это означает, что библиотеку можно использовать с любым JS фреймворком, будь то React, Preact, Solid, Angular или…
Верней оформил 5 декабря 2023 года для всех то, чем его разработчики пользуются уже давно. Позиционируется данный помощник для js-подобных фреймворков типа React, Preact, Solid, lit-html и Angular, однако оперирующие html шаблонами Vue и Svelte тоже могут задействовать StyleX, но после предварительной специальной её кастомизации.Код в React в итоге выглядит примерно так:import * as stylex from '@stylexjs/stylex'; const colorStyles = stylex.create({ red: { backgroundColor: 'l…
Каждый из нас, хотя бы раз, слышал о сборке мусора. Мы знаем, что где-то там работает сборщик мусора, убирая за нами ненужные объекты. Но сколько из нас знают, как он устроен под капотом?В этой статье мы заглянем под капот этого процесса, поймем, как работает память, и изучим алгоритм сборки мусора.Поехали убираться!Мы будем рассматривать только V8За основу мы возьмем браузерный движок V8(именно на нем мы будем рассматривать как работает алгоритм сборки мусора), сделаем мы это по нескольким пр…
На Reddit прошла интересная дискуссия с 25К+ просмотрами по вопросу предпочтений разработчиков при необходимости управлять глобальным состоянием во Vue 3. Ниже её итоги.Reddit подводит итоги года по частоте посещения /r/vuejs из разных стран мираВопрос автором был поставлен так: Зачем использовать Pinia вместо глобальных ref's?В своих проектах я использую composable функции с глобальным состоянием, как описано в документации Vue.Каждая функция представляет собой объект бизнес-логики - напр…