Как стать автором
Поиск
Написать публикацию
Обновить
322.02

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

Telegram-бот, который умеет слушать: разработка на grammY

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров5.4K

Представьте: собеседник отправляет голосовое сообщение на пять минут, а вы не можете отвлечься и прослушать все от начала до конца? Что делать? Максим, ведущий канала RED Group, подошел к вопросу творчески и показал, как на базе grammY и SpeechService в NestJS разработать бота, который будет слушать и структурировать по таймкодам голосовые сообщения.

Инструкция будет полезна новичкам, которые только погружаются в работу с Telegram Bot API с помощью JavaScript. Кроме того, в конце материала мы разберем, как задеплоить готового бота на сервер, чтобы он работал вне зависимости от локальной машины. Подробности под катом!
Читать дальше →

Как тестировать хуки в React с @testing-library/react-hooks

Время на прочтение5 мин
Количество просмотров1.2K

Привет, Хабр!

Сегодня рассмотрим, как тестировать React‑хуки с помощью @testing-library/react-hooks.

Читать далее

У меня три календаря и одна жизнь: как я перестал быть курьером между женщинами

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров3.3K

Я разведён и женат, сын живёт поочерёдно: неделя у меня, неделя у своей мамы. Казалось бы, график прост, но реальность вносит коррективы: врач в четверг, поездка к бабушке на выходных - забыть что-то означает испортить планы всем и получить претензии.

Моя схема:

✅ календарь с бывшей женой - только ключевое по сыну - переезды, врачи, собрания.
✅ календарь с моей женой: наша личная жизнь - свидания, поездки, дела. Без сына.
✅ семейный календарь (я + жена + сын): всё, что касается сына в мои недели.

Зачем так сложно? Границы. Приватность новой семьи, уважение к бывшей жене и прозрачность в делах сына.

Ручное управление тремя этими календарями неудобно. Я устал быть курьером между мирами новой семьи и бывшей жены. Автоматизация синхронизации календарей через Google Apps Script (GAS) стала спасением: события из календаря с бывшей автоматически попадают в семейный, но только если касаются сына в моё время.

Жизнь после развода

Как мы построили систему автотестов с 5 000+ проверками в Timeweb Cloud

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров1.7K

Сегодня в нашем CI ежедневно запускается более 5 000 автотестов, которые проверяют всё: от корректности скриншотов панели до скорости отклика API. Это не просто тулза в пайплайне, а часть инженерной культуры команды, которая помогает нам выпускать изменения быстро и с уверенностью.

Привет! Меня зовут Михаил Шпаков, я руковожу разработкой Timeweb Cloud.

Мы вышли на рынок четыре года назад, в условиях, когда уже сформировалась сильная конкуренция, и облачные платформы были далеко не новинкой. Поэтому с самого начала для нас критичной стала скорость доставки изменений — чтобы не отставать, а опережать. Но когда твой продукт — чья-то продовая инфраструктура, нельзя позволить себе нестабильность.

Чтобы не выбирать между скоростью и стабильностью, мы сразу сделали ставку на автоматизацию и автотесты. Это позволило команде быстро выпускать новые фичи, не боясь сломать что-то важное, и при этом держать контроль над качеством на каждом уровне.

В этой статье расскажу, как устроена наша система, какие типы тестов мы используем, как выстроен процесс, и какие уроки мы из этого извлекли.

Читать далее

Code Tutorials — React: рисуем двумерный граф

Уровень сложностиСредний
Время на прочтение24 мин
Количество просмотров1.5K



Привет, друзья!


В этой серии статей я делюсь с вами своим опытом решения различных задач из области веб-разработки и не только.


В этой статье мы изучим библиотеку react-force-graph-2d для рисования двумерных графов.


Демо приложения:



Локальный запуск приложения:


git clone https://github.com/harryheman/react-graph.git
cd react-graph
npm i
npm run dev

Интересно? Тогда прошу под кат.

Читать дальше →

Как я прокачал английский до B2 в США, разработав своё языковое приложение

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров13K

После переезда в США мой английский был на уровне A1. Вместо курсов и приложений я решил создать собственный языковой тренажёр и заодно прокачать себя как fullstack-разработчика. В статье рассказываю как я парсил словари, получил бан, внедрил геймификацию и достиг уровня B2 за год.

Читать далее

Тайная жизнь домашних V8: как движок JavaScript оптимизирует твой код

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров4.5K

Всем привет. Меня зовут Виктор Степанов, я frontend chapter lead на платформе СберТеха GitVerse. Хочу рассказать про внутреннюю «механику» V8 и показать, как писать более быстрый код. Поехали!

Читать далее

Большие данные для карт в реальном времени. Inception

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров1K

Возникла необходимость зафиксировать опыт с последнего проекта по прокачке производительности картографического сервиса. Так сказать, чтобы 2 раза не вставать при передаче опыта. И начнём с постановки, чтобы сразу определиться с аудиторией, кому мимо, а кому больше узнать как "прожевывать" и отображать на UI от 100К объектов в секунду и не лагать. Ну а кто-то вообще не в танке про картографические сервисы и хочет "на борт".

Что вас ждёт по катом.

1. MapTiler/Maplibre - картографический провайдер и UI фрэймворк для работы с ним.

2. Создание своих слоёв данных на карте.

3. Рендеринг большого объёма данных на WebGL/WebGPU. Начнём от 100К.

4. Оптимизация рендеринга с ручной подготовкой буферов для GPU.

5. Обновление данных слоя в realtime. Начнём молотить от 1M объектов.

6. Сериализация данных в ArrayBuffer для передачи напрямую в GPU.

Прокачать перформанс

HTML Builder: визуальный конструктор HTML-структур на Vue 3

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров9.5K

HTML Builder — визуальный конструктор HTML-структур с drag-and-drop интерфейсом для библиотеки @vue-dnd-kit/components!

🔹 HTML Builder позволяет создавать HTML-структуры без написания кода
🔹 Включает рабочую область, палитру компонентов, дерево элементов и панель настроек
🔹 Сейчас это ранняя бета с минимальным функционалом, но уже можно оценить концепцию
Идеально подходит для создания прототипов и визуальных редакторов CMS.

🔗 Демо: https://zizigy.github.io/html-builder/
🔗 GitHub: https://github.com/ZiZIGY/html-builder

Ищу обратную связь по UI/UX и функциональности. Какие фичи хотели бы видеть? Что можно улучшить в интерфейсе? И тд тп.

Читать далее

Темная магия JavaScript: Укрощаем неявное приведение типов

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров4.6K

Привет, Хабр! У каждого JS-разработчика есть своя история. История о том, как он впервые встретился с этим. Сидишь, пишешь код, всё логично, всё под контролем. И тут, чтобы проверить одну мелочь, открываешь консоль и из чистого любопытства пишешь:

[] + {} // Получаешь: "[object Object]"
// Хм, ладно, массив привел себя к строке, а объект стал... объектом. Логично.

{} + [] // Получаешь... 0 ???
// ЧТО?!

Стоп. Как это вообще возможно? Мы только что поменяли местами два операнда и получили совершенно другой тип данных. Кажется, будто язык издевается над нами.

Разобраться с этим!

Telegram Web съел 30% моего 16-ядерного процессора. Расследование странного поведения, или Призрак майнера в браузере

Время на прочтение9 мин
Количество просмотров22K

Всем привет! Сегодня я хочу поделиться историей одного странного и затянувшегося расследования, главным героем которого стал мой компьютер, а антагонистом — веб-версия Telegram. Эта история не только о поиске прожорливого процесса, но и о глубоких аномалиях в поведении современных веб-приложений, которые вызывают серьезные вопросы.

О, нука че там

Наводим порядок в загрузке данных Angular с помощью резолверов

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров829

Всем привет! Сегодня хочу разобрать кейс, с которым сталкивается почти каждый Angular-разработчик на существующем проекте.

Часто в компонентах можно встретить такой код:

Читать далее

Настройка Jest и React Testing Library: пошаговое руководство для React и Next.js проектов

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров1.6K

В данной статье мы подробно рассмотрим процесс настройки среды unit-тестирования веб-приложений на базе React и Next.js с использованием Jest и React Testing Library. Мы расскажем об установке необходимых зависимостей, создании конфигурационных файлов, настройке Babel и TypeScript, подключении SCSS и SVG, а также организации структуры проекта. Особое внимание уделено специфике настройки Jest в среде Next.js. Материал будет полезен для frontend-разработчиков и команд разработки, которые работают с React или Next.js проектами и хотят внедрить качественное unit-тестирование. 

Читать далее

Ближайшие события

От хаоса к порядку: Как Peakline превратился в профессиональный инструмент за неделю

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров1.9K

Неделя назад мой проект был "швейцарским ножом в картонной коробке". Сегодня это настоящая платформа с PWA, AI-анализом по зонам, системой защиты от ботов, отслеживанием износа снаряжения, прогнозом погоды для маршрутов и детальной аналитикой клубов. Рассказываю, что изменилось под капотом и почему это важно.

Читать далее

Сам ты вайб-кодер

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров17K

Кажется, мы окончательно запутались в терминах.

За последнюю неделю меня назвали вайб-кодером раз 20. Не то, чтобы меня это как-то оскорбляло, каюсь, пишу код в Cursor, но просто... Это ведь не так - просто по определению. Похожие чувства я испытывал, когда хакатонами стали называть любые мероприятия с кодингом, а их участников - хакерами. Но язык - штука живая, и писать душную статью о том, как мы все неправильно юзаем термины - точно не то, на что я хочу убить вечер воскресенья.

В этой статье я хочу рассказать кто такие вайб-кодеры, и не вайб-кодеры (а просто программисты, которые используют в работе ИИ-инструменты), и с какими проблемами сталкиваются и те и другие.

Читать далее

Кликджекинг по двойному щелчку. Новый приём обманного UI

Время на прочтение4 мин
Количество просмотров2.9K


Кликджекинг (подделка UI) — известный приём обмана пользователей интернета, когда поверх видимой страницы располагается невидимый слой, куда загружается фальшивка. То есть пользователю кажется, что он вводит пароль на доверенной странице, но на самом деле вводит его в стороннюю форму, которая принадлежит злоумышленнику.

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

Однако несколько месяцев назад в Сети впервые замечены случаи кликджекинга по двойному щелчку. Вредоносные действия выполняются в промежутке между первым и вторым кликами незаметно для жертвы. Более продвинутая версия атаки работает практически на всех сайтах и в любых браузерах.
Читать дальше →

Представляю @vue-dnd-kit/components: Готовые компоненты для быстрой разработки интерфейсов с перетаскиванием

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров6.9K

Представляю vue-dnd-kit/components — готовые компоненты для быстрой разработки drag & drop интерфейсов в Vue 3!

📋 Сортируемые таблицы
📊 Канбан-доски
🌳 Древовидные структуры
🧩 Интерактивные дашборды

CLI работает как shadcn/ui — компоненты клонируются в ваш проект, давая полный контроль над кодом. Проект в активной разработке, но уже готов к использованию!

Готовые компоненты: Table, Kanban, Tree, Dashboard.

Статус: бета, API может изменяться. Подходит для прототипов и активной разработки.

Читать далее

Как создать простое API? Express + Prisma

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров2.1K

Эта статья поможет вам быстро написать API, используя Express и Prisma). Для этого вам понадобятся базовые знания работы с Node.js и понимания разработки реляционных баз данных

Читать далее

Разработка LLM моделей для обновления кода приложений на более высокие версии фреймворков или языков программирования

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров2.7K

В этой статье я планирую исследовать, как можно использовать большие языковые модели (LLM) для миграции проектов между различными фреймворками. Применение LLM в задачах на уровне репозитория — это развивающаяся и всё более популярная область. Миграция кода со старых, устаревших фреймворков на новые является одной из ключевых задач в крупных корпоративных проектах.

Читать далее

Мой первый боевой проект: FSD, TanStack и как мы это дружили

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров3.8K

Тут я расскажу о том, как я впервые с нуля поднимал проект на React, используя связку FSD, TanStack Router, TanStack Query и Effector — и как мы всё это далее подружили подружили или нет 🙂.

Сразу оговорюсь:
Проектом занимается команда, но архитектурный старт, выбор технологий и базовая структура — легли на меня. Это был мой первый опыт в такой роли: отвечать не просто за компоненты или страницы, а за фундамент проекта.
А так же, это моя первая статья. Не претендую на истину в последней инстанции, но надеюсь, кому‑то мой опыт будет полезен и палками бить сильно не будете.

Читать далее

Вклад авторов