Category : javascript

javascript
Reactive Web Components: реактивность без фреймворка

Ссылка на github Пару лет назад я столкнулся с проблемой, которая наверняка знакома многим: нужно было сделать компонентную систему, но React, Vue и, тем более, Angular казались избыточными, а чистый JavaScript уже начинал превращаться в нечитаемую кашу из addEventListener и innerHTML.В итоге я написал свою библиотеку — Reactive Web Components (RWC). Не потому, что хотел изобрести велосипед, а потому, что нужен был инструмент, который даёт реактивность без лишнего оверхеда и при этом работает с…

  • пятница, 21 ноября 2025 г. в 00:00:02
javascript
Числовой тип данных с плавающей точкой double IEEE 754

Данная статья является продолжением предыдущей статьи на тему детального разбора числового типа данных float и посвящена детальному разбору числового типа данных double.Что такое тип данных в программировании?Тип данных это метод хранения блока битов в определённом порядке и по определённым алгоритмам (правилам), чтобы при декодировании битов можно было получить достоверные данные.Существует две группы типов данных:ПримитивныеСтруктурированныеПримитивные типы данных делятся на целочисленные, ве…

  • четверг, 20 ноября 2025 г. в 00:00:03
javascript
Анализ аудио потока HLS с помощью Web Audio API и hls.js

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

  • четверг, 20 ноября 2025 г. в 00:00:02
javascript
Как я с нуля культивировал свою open-source платформу для изучения японского до 10 000 ежемесячных …

Когда я только начал создавать KanaDojo, я не планировал строить серьёзную образовательную платформу или что-то в этом роде. Мне просто нужен был простой, красивый и бесплатный способ практиковаться и учить японскую кану (по сути японский «алфавит», хотя точнее его описать как слоговую азбуку - не совсем так, как у нас в русском). Хотелось создать что-то такое же минималистичное и затягивающее, как Monkeytype (загуглите! Очень классный проект), но для изучающих японский язык.В то время я был пр…

  • среда, 19 ноября 2025 г. в 00:00:06
javascript
Как скопировать дерево, но не точь-в-точь

На собеседованиях и литкоде любят вращать бинарные деревья. Но что насчёт трансформации обычного дерева в другое? Как решить эту задачу, и какие могут быть подходы? Рассмотрим на опыте трансляции одного синтаксического в другое, чтобы разобраться.Как мы к этому пришлиПричины трансформировать одно дерево в другое придумать не очень сложно:Конвертация между разными форматами, например XML в HTML.Алгоритмические задачи, включая пресловутое вращение бинарных деревьев.Преобразования внутри компилято…

  • среда, 19 ноября 2025 г. в 00:00:05
javascript
Структура против хаоса — практическая валидация форм с помощью Zod

Всем привет, с вами Артем Леванов, Front Lead в компании WebRise. В прошлой статье мы разобрали, как навести порядок в создании форм — выделили примитивы, ячейки и типовые поля.Следующая проблема, с которой сталкивается любая форма — валидация.Формы могут быть красивыми и структурными, но без единого подхода к валидации они быстро превращаются в хаос.В этой статье поговорим о том, почему встроенные и кастомные проверки плохо масштабируются, особенно в динамических формах, и как Zod решает эту п…

  • среда, 19 ноября 2025 г. в 00:00:04
javascript
Как настроить SEO в Next.js так, чтобы проект реально индексировался

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

  • среда, 19 ноября 2025 г. в 00:00:03
javascript
Идеально размещённые тултипы: все четыре стороны

Эта статья — перевод оригинальной статьи «Perfectly Pointed Tooltips: All Four Sides». Это вторая часть, первая часть уже есть на Хабре (Идеально размещённые тултипы: база), будет ещё перевод 3-ей части.Также я веду телеграм канал «Frontend по‑флотски», где рассказываю про интересные вещи из мира разработки интерфейсов.ВступлениеПора перейти ко второй части! У нас уже есть очень хорошие функциональные тултипы с позиционированием, но они в основном «смотрели» вверх или вниз и смещались у краёв, …

  • вторник, 18 ноября 2025 г. в 00:00:08
javascript
Руководство по архитектуре браузерных песочниц: как работает изоляция JavaScript-кода

Всем привет! Меня зовут Александр Григоренко, я фронтенд-разработчик. Последние несколько месяцев я работаю над пет-проектом — интерактивной образовательной платформой для изучения Web Audio API и принципов обработки и синтеза цифрового звука. На платформе пользователи смогут решать задачи, программируя на JavaScript прямо в браузере. Эти программы выполняются в изолированной среде — песочнице, где пользовательский код не может повлиять на работу самой платформы.Когда я начал реализовывать песо…

  • вторник, 18 ноября 2025 г. в 00:00:07