TypeScript *

После работы с React/Vue/Angular захотелось вернуться к основам, но с современными возможностями. Сделал RWC — библиотеку реактивных веб-компонентов.

Ключевые преимущества:
• Совместимость — компоненты работают в любом проекте
• Производительность (сигналы для реактивности) — точечные обновления DOM
• Простота — минимальный API, легко обучать команду
• TypeScript-first — типизация из коробки без костылей

Компоненты, написанные на RWC, можно встроить в React, Vue, Angular или даже legacy jQuery-проект. Никакого vendor lock-in.

Библиотека весит <10KB, компоненты работают в любом проекте.

В современных веб-приложениях для потокового видео всё чаще требуется не просто воспроизводить контент, но и анализировать аудиодорожку в реальном времени. Например, строить индикаторы уровня громкости (VU/PPM метры), визуализировать спектрограммы или детектировать тишину. В этой статье разберём, как корректно объединить hls.js и Web Audio API для анализа аудио из HLS-потока в браузере, избежав типичных подводных камней.

Во многих проектах на Next.js возможности для SEO остаются неиспользованными: страницы индексируются не полностью, структурированные элементы отсутствуют, а ссылки в соцсетях отображаются неправильно. Чтобы этого избежать, существуют проверенные инструменты и подходы, которые помогают сделать SEO понятным, полным и эффективным.

В данной статье рассмотрены ключевые аспекты настройки SEO в проектах на Next.js: работа с метаданными, генерация sitemap и robots.txt, оптимизация изображений и внедрение структурированных данных. 

Всем привет, с вами Артем Леванов, Front Lead в компании WebRise.

В прошлой статье мы разобрали, как навести порядок в создании форм — выделили примитивы, ячейки и типовые поля.

Следующая проблема, с которой сталкивается любая форма — валидация.

Формы могут быть красивыми и структурными, но без единого подхода к валидации они быстро превращаются в хаос.

В этой статье поговорим о том, почему встроенные и кастомные проверки плохо масштабируются, особенно в динамических формах, и как Zod решает эту проблему, превращая валидацию в декларативную и типобезопасную систему.

Рассказываем, как безобидная строка JavaScript-кода привела к нарушению стабильности тестов продукта, а также о том, как можно избежать подобных ошибок.

Здесь будут рассмотрены не очевидные, редкие и сложные инструменты и парадигмы для работы с типами в TypeScript.

Тип Discriminated Unions (дискриминантное объединение), часто обозначаемое как Tagged Union (размеченное объединение), так же как и тип union (объединение), является множеством типов, перечисленных через прямую черту | . Значение, ограниченное дискриминантным объединением, может принадлежать только к одному типу из множества.

Несмотря на то, что Discriminated Union в большей степени идентичен типу Union , все же существует два отличия.

Первое отличие заключается в том, что типу Discriminated Union могут принадлежать только ссылочные типы данных.

Второе отличие в том, что каждому объектному типу, также называемые варианты, составляющему Discriminated Union , указывается идентификатор варианта который называется дискриминант.

Помните, что вывод типов, без помощи разработчика, способен работать лишь с общими для всех типов признаками?

Рассмотрим пример:

Кто я такой и с какой горы прибыл?

Зовут меня Юра и у меня немногим больше семи лет опыта разработки фронта на vue+typescript. Начал я, что забавно, с Angular 5 в далёком 2018, когда пятёрка ещё была актуальной версией, и работал с ним немногим больше пары месяцев, после чего перекатился во vue2.

Работал я исключительно в B2B и внутренней разработке. Системы документооборота, сервисдески и вот это вот всё. Благодаря этому я повидал разного. От DDD, до "паста-болоньезе-код".

На последних двух проектах я наступил в FSD. Методологию для организации кодовой базы выбирал не я, но я честно пытался в ней разобраться и как-то удобно организовать. К сожалению, оба раза код становился проблемой с высокой связностью, неочевидным размещением сущностей и сложно отслеживаемой системой взаимодействий компонентов кода.

При всём этом я наблюдал активный рост популярности FSD методологии в сообществе. Это натолкнуло меня на мысль о том, что я просто недостаточно разобрался, и тогда я начал копать. Смотреть, как же готовят FSD, сравнивать с известными мне архитектурными подходами. В этой статье я хочу поделиться выводами, к которым пришёл, и предложить решения, которые нашёл.

Устал от однообразных каруселей? В статье показываю, как шаг за шагом собрать 3D-таймлайн-слайдер с перспективной сеткой, плавной прокруткой и переключением категорий на чистом TypeScript и CSS.

Привет, мы продолжаем разбирать полиморфизм в React. В прошлой серии мы разобрали паттерн as — мощный, типобезопасный, но с проблемами в композиции. Сегодня разберем, как решить эту проблему с помощью паттерна asChild. Спойлер: это сделает ваш код чище, композируемее и приятнее для глаз, но придется пожертвовать поддерживаемостью.

История создания логического симулятора на TypeScript: от «игрушки» на паре до архитектурного движка с DI, event-bus и системой плагинов.

Доброго времени суток, Хабр! Я, как и многие из нас, периодически захожу на тот самый "красный сайт" по поиску работы. В перерывах между задачами скролю ленту вакансий, откликаюсь на интересные и жду отклика. Но с недавних пор всё изменилось.

Если раньше в таком "ленивом" режиме я получал человеческие ответы — иногда даже приглашения на собесы, — то теперь, буквально через секунды после моего отклика, прилетает reject. И не просто "нет", а с шаблонными комплиментами: "Вы отличный специалист, но, к сожалению, не подходите под нашу вакансию". Все как один — сгенерированы роботами.

Раньше было сложно пробиться через HR до технарей, а теперь даже до HR не доберёшься. Добро пожаловать в эпоху нейросетей, где ИИ решает, достоин ли ты собеседования!

Ну что же, очевидно, что для общения с роботом нужен робот, лично я один на один пробиваться через железяк не намерен. Поэтому приступаю к написанию скрипта для автоматизированного поиска работы. Так сказать будем повышать мат. ожидание положительного отклика. На этом я начну свой цикл статей. Не забываю поделиться с работягами ссылкой.

В нашей компании AnyMaint, которая занимается разработкой софта для управления техническим обслуживанием и ремонтом (CMMS) промышленного оборудования, одной из главных задач является нормализация имён тулов (инструментов). Под «тулом» мы подразумеваем любой промышленный актив: машины, станки, приборы, оборудование и т.д.

Ранее мы говорили о том, как улучшить кэширование наших проектов и правильно загружать поставщиков. А в этой статье мы рассмотрим следующее:
- Как мы можем использовать стратегии предварительной загрузки, включая что такое "магические" комментарии Webpack, и что такое спекулятивная/ручная предварительная загрузка;
- Как мы можем запрашивать данные с сервера, не дожидаясь загрузки наших статических файлов;
- А также какие сторонние или наши собственные решения могут быть использованы для этого.

Ранее мы поговорили о том, как сделать дерево зависимостей нашего проекта максимально чистым и почему это важно для ленивой загрузки. А в этой статье мы расскажем о следующем:
- Как мы должны загружать вендор файлы с точки зрения правильной организации ленивой загрузки.
- Что общего между стратегиями оптимизации "ленивой загрузки" и "кэширования", и как использование одной из них влияет на другую.
- Что такое кэшируемость и как сделать наше приложение максимально кэшируемым.
- А также как правильно настраивать группы кэша в Webpack и не испортить кэшируемость.

Ранее мы обсуждали самые основы ленивой загрузки и то, почему она вообще важна. А в этой статье мы рассмотрим следующее:
- Как бандлеры анализируют файлы исходного кода, строят деревья зависимостей и генерируют файлы для сборки.
- Как они генерируют файлы JavaScript из исходного кода.
- Как браузеры решают, какие сгенерированные файлы следует загружать, чтобы отобразить ленивую страницу/компонент.
- И как мы можем уменьшить размер и количество загружаемых файлов, правильно настроив структуру файлов и корректно используя статический импорт.

Ленивая загрузка - это принцип, который должен быть известен большинству frontend разработчиков. Однако, этот механизм обманчиво прост, и его освоение является гораздо более комплексной задачей, чем кажется многим. Если уже используете Lazy Loading, у вас все равно могут быть серьезные пробелы в знаниях. Но даже если вы считаете, что знаете про ленивую загрузку абсолютно все, освежить память не будет лишним.

В этой статье мы рассмотрим основы ленивой загрузки: что это такое и почему это важно;
как мы можем использовать ленивую загрузку в наших проектах; а также какие части кода следует загружать лениво.

Современный фронтенд напоминает перегруженный интерфейс: мощные возможности, но чтобы начать работать, нужно изучить десятки концепций. React, Vue, Angular — у каждого свой сложный путь изучения.

Мы задались вопросом: что действительно нужно знать, чтобы создавать UI?

Оказалось, всего четыре концепции: компоненты, состояние, эффекты и DOM. Все остальное — синтаксический сахар и edge cases.

Так родился наш эксперимент: упаковать эти основы в максимально простую модель. Не изобретать новое, а отшлифовать существующее.

Иногда прогресс — это не добавление возможностей, а смелость убрать лишнее.

Всем привет! Сегодня я возвращаюсь с новой порцией TypeScript- и React-магии. Вместе разберем полиморфизм в React, а именно — паттерн as. Зачем он нужен, как его прикрутить без багов и почему это сделает ваши компоненты в разы круче. Как обычно — всё под катом.

Привет! Меня зовут Алексей Гомелевский, я frontend-разработчик в Garage Eight. Моя команда занимается улучшением взаимодействия пользователей с продуктом, и недавно мы решили реализовать комментарии. В этой статье расскажу, как выбирали между решением из коробки и собственной разработкой, с какими сложностями столкнулись и как на базе комментариев создали чаты.