Обновить
256K+

JavaScript *

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

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

Как я хотел две странички для SAMBA и NFS, а сделал полноценную панель управления NAS на 20+ страницах

Время на прочтение4 мин
Охват и читатели16K

Как я хотел две странички для SAMBA и NFS, а сделал полноценную панель управления NAS на 20+ страницах

Читать далее

Как уместить DOOM в QR-код

Время на прочтение6 мин
Охват и читатели7.2K

DOOM известен тем, что запускается где угодно – благодаря портам, которые появляются с 1993 года. Мем «It Runs Doom» («Он запускает DOOM») живёт в интернете уже больше десяти лет. Люди запускали DOOM на тостерах, на тачбарах макбуков, на умных холодильниках. И, кажется, я – первый человек, который уместил DOOM в QR-код.

Читать далее

Веб-терминал для COM-порта без установки: подключается за 2 секунды

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

Полностью браузерный терминал для работы с последовательными портами (COM-портами). Приложение не требует установки, работает прямо в Chrome или Edge, и при этом поддерживает все необходимые фичи для отладки микроконтроллеров, общения с сетевым железом или просто мониторинга UART-трафика.

https://github.com/GidroByte/web-serial-terminal-ru

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

Читать далее

Как «спят» вкладки в браузере

Уровень сложностиСредний
Время на прочтение18 мин
Охват и читатели14K

Привет! Меня зовут Костя, я разработчик интерфейсов в ЮMoney. В этой статье разбираю, почему вкладка после возврата из фона начинает вести себя странно: интерфейс подвисает, таймеры съезжают, события приходят пачкой.

Материал особенно пригодится тем, кто делает сложные SPA с realtime‑обновлениями, WebSocket и насыщенным UI — CRM, дашборды, платёжные сценарии.

В статье разберём:

— как устроены Page Visibility API и Page Lifecycle API,
— зачем браузеры ограничивают фоновые процессы,
— что происходит при заморозке вкладок, системном сне и возврате страницы из BFCache,
— чем отличаются Chrome, Safari и Firefox,
— какие API уже устарели,
— а какие подходы помогают делать интерфейсы стабильнее в реальных пользовательских сценариях.

Читать далее

Kwayk: как я сделал Quake на Qt Quick3D и прикрутил физику из Death Stranding 2

Время на прочтение10 мин
Охват и читатели17K

Получится ли сделать полноценную 3D-игру на Qt Quick3D?

Именно такой вопрос у меня возник, когда я начал изучать Quick3D. Казалось бы, рендер и партиклы есть, базовая физика в лице Quick3D Physics тоже присутствует. Пример CharacterController из Qt указывал на то, что проблем быть не должно.

Но хотелось проверить это самому на чём-то реальном.

Поскольку моделлер и художник из меня никакой, да и в геймдеве опыта у меня меньше нуля, я решил переписать Quake — любимую игру своего детства. В ней я провёл сотни (тысячи?) часов, играя в мультиплеер на бесплатных серверах МТУ-Информ через модем US Robotics 33600.

В итоге получился проект Kwayk — попытка переписать Quake на Quick3D.

Читать далее

Как я собрал кубик Рубика в браузере на чистом Canvas

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели16K

Недавно я увидел видео, где маленький мальчик собирает кубик Рубика за 2,76 секунды (вот оно), и мне тоже захотелось научиться его собирать. Конечно, не за такое время, но главное — суметь сложить хотя бы за 10 минут. Главная проблема в том, что кубика у меня нет; можно купить, но это как-то скучно, на троечку. Поэтому я подумал: а почему бы не написать за выходные простой код, чтобы побыстрее посмотреть и покрутить кубик, а потом уже можно и купить. Заодно и разберусь, где что находится у кубика.

Читать далее

Navigation API теперь доступен в Baseline

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

Navigation API предоставляет возможность инициировать (программно запускать), перехватывать и управлять навигацией в браузере. Он также позволяет исследовать (traverse) сущности истории (history entries) приложения. Это улучшенный вариант предыдущих возможностей веб-платформы, связанных с навигацией, таких как History API и window.location, который решает их проблемы и специально предназначен для одностраничных приложений (single-page applications, SPA).

Читать далее

Telegraf.js умер. Как мы оживили фреймворк, переписали ядро на Native Fetch и затащили Bot API 9.6

Уровень сложностиСредний
Время на прочтение3 мин
Охват и читатели7.6K

Каждый, кто пишет Telegram‑ботов на Node.js / TypeScript, знает про библиотеку Telegraf.js. Это был стандарт индустрии. Ключевое слово — «был». Оригинальный репозиторий фактически заброшен майнтейнерами, пулл‑реквесты годами висят без ответа, а сам фреймворк застрял в прошлом.

Пока Telegram один за другим выкатывает масштабные апдейты (Звёзды, Подарки, Бизнес‑аккаунты, Улучшенные медиа), официальный Telegraf не поддерживает ничего из этого.

Мне надоело смотреть на падающие в продакшене боты и городить костыли, поэтому я создал форк — telegraf‑hardened. На прошлой неделе мы выпустили мажорный релиз v6.0.0. Рассказываю, как под капотом устроена обновленная либа.

Читать далее

Build-time микрофронтенды, или делай проще

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели11K

Привет, меня зовут Александр Богданов, я ведущий фронтенд-разработчик стрима «Программы лояльности» в MWS. Наша команда отвечает за развитие и поддержку продуктов МТС Premium и МТС Cashback. 

На 2025 год у нас было три активных пользовательских витрины, которые использовали разный стек, разные дизайн-системы, по-разному взаимодействовали с бэкенд-сервисами и имели еще целый набор мелких отличий. Из-за этого разработке приходилось поддерживать зоопарк решений и технологий, а также многократно повторять одни и те же действия на разных стеках. Высокие time-to-market и стоимость разработки одной фичи закономерно не устраивали бизнес, поэтому перед нами поставили задачу — перейти на архитектуру микрофронтендов.

В посте расскажу, как мы это сделали с помощью npm-пакетов и какие результаты получили.

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

React stack 2026: карта лучших библиотек по категориям

Уровень сложностиСредний
Время на прочтение71 мин
Охват и читатели12K

Открываете очередной React-проект в 2026 году и смотрите на белый экран package.json. Какой роутер? Vite или Next.js? shadcn/ui или Mantine? Zustand или всё-таки Redux Toolkit? React Hook Form или TanStack Form? И как вообще теперь делать таблицы — TanStack Table или AG Grid?

Каждая из этих категорий за последние 2-3 года прошла через смену лидера. То что было стандартом в 2022 (Redux, Material UI, Webpack, styled-components, Formik), в 2026 либо в legacy-режиме, либо проиграло свежим конкурентам. Те кто работают в одной экосистеме годами, могут не заметить как сместились веса в соседних слоях стека — пока не открывают новый проект и не сталкиваются с тем что “стандарт”, которым они пользовались, теперь редко выбирают.

Эта статья — карта актуального React-стека 2026 года, разбитая по 60+ категориям. По каждой — что выбрал бы я для нового проекта в 2026, какие есть альтернативы для специфических случаев, что считается legacy и почему. Плюс — типовые комбинации стека под разные виды проектов (SaaS dashboard, collaborative editor, real-time dashboard, streaming app, consumer landing).

Читать далее

Обновления функциональности GigaIDE за апрель 2026

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

Как и в предыдущие месяцы, по итогам апреля мы решили рассказать про то, как изменилась GigaIDE за прошедший месяц. Ниже краткий обзор обновлений PRO-функциональности GigaIDE, который можно найти на нашем маркетплейсе.

Читать далее

Как я собрал интерактивную карту 13 000 исторических событий и научил её определять архетип любого города

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

HistoryPrint берёт любой город и говорит, какая часть человеческой истории случилась в его радиусе. ~13 000 событий за 5 000 лет, 12 категорий (войны, революции, пандемии, открытия), скоринг по экспоненциальному убыванию расстояния, и в финале — один из 20 архетипов: «Born in Fire», «Plague Walker», «Heir of Enlightenment».

Почитать дальше

Flappy Bird: код веб-клона под микроскопом

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

В январе 2014 года мир сошёл с ума из-за игры, где нужно просто тыкать в экран. Flappy Bird приносила создателю $50 000 в день, пока он не удалил её из-за давления и бессонницы. Игру начали продавать на чёрном рынке вместе со смартфонами.

Я решил собрать свой веб-клон, чтобы понять, в чём же здесь магия. А в конце — откровенный список из 12 проблем, из-за которых мой клон всё ещё не тянет на оригинал.

Читать далее

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

Мы увязли в Feature‑Sliced Design

Уровень сложностиСредний
Время на прочтение17 мин
Охват и читатели11K

Всем привет, меня зовут Сергей Сибара, я фронтенд-разработчик в ИТ-холдинге Т1. Эта статья — продолжение предыдущей: Мой справочник по Feature-Sliced Design. На этот раз я рассмотрю, как по моему субъективному мнению улучшить файловую структуру проекта, нарушая рекомендации FSD — архитектурной методологии для проектирования фронтенд-приложений.

В конце статьи есть ссылки на другие подходы к организации файловой структуры фронтенд-приложений.

Читать далее

Проблемы санации SVG

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

Рендерер Scratch имеет долгую историю связанных с SVG уязвимостей. Их источником становится то, что Scratch парсит сгенерированный пользователем (то есть контролируемый нападающими) контент в элемент <svg> и добавляет его в основной документ для выполнения различных операций (например, для измерения ограничивающего прямоугольника SVG более надёжным образом, чем viewbox или width/height).

Даже если SVG остаётся в основном документе очень недолго, это небезопасная по своей природе операция. Для обеспечения защиты Scratch реализовывал всё более сложную инфраструктуру парсинга SVG и находящейся внутри разметки, чтобы устранить опасные части.

Я считаю, что подход Scratch к санации SVG обречён на провал. Чтобы объяснить это, нам нужно совершить путешествие по истории санации SVG в Scratch и посмотреть, насколько хорошо он с этим справлялся.

Читать далее

Рабочее место не-вайбкодера по методу Spec-Driven Development: запускаем Claude Code

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

Привет, Хабр! Меня зовут Даниил Подольский, я программист и архитектор, разрабатываю программное обеспечение и спецификации для создания ПО в YADRO. Вот уже девять месяцев я использую методологию Spec-Driven Development (SDD) в работе и управляю AI-агентами, которые пишут код. При этом я не считаю себя вайбкодером, потому что мой подход к работе более комплексный, чем просто «общение с AI».  

Это первая статья из цикла об оборудовании рабочего места SDD-кодера. Я расскажу о базовой настройке AI-агента Claude Code: что делать, если вы хотите оперативно и без перезагрузки переключать используемые модели и делать это для каждого проекта отдельно.

Читать далее

WebAssembly: обзор технологии, эксперименты с числами и мечты о браузере без JS

Время на прочтение13 мин
Охват и читатели8.2K

WebAssembly находится в разработке уже более 8 лет. Технология прошла долгий путь развития и недавно разработчики из Bytecode Alliance выкатили версию 3.0.

О WebAssembly уже много материалов, но сегодня нам важна сама суть. У нас есть возможность, воспользовавшись любым из доступных языков программирования, написать модуль с необходимой нам логикой и запустить в исполняемой среде браузера. Разработчики обещают: модули будут быстрее и безопаснее, чем JavaScript, а также созданные ранее технологии, наподобие asm.js.

На связи Борис Мещеряков, frontend-разработчик в ПСБ и чаще всего мне приходится работать с javascript-фреймворками - React, Angular и прочими. Узнав о WebAssembly, я какое-то время наблюдал за его развитием. Мне стало интересно, может ли новая технология помочь мне уже сейчас? Какие ее возможности существуют на данный момент и какие реальны в будущем?

Разберёмся вместе?

Читать далее

Пишем быстрые UI-автотесты без флаков, стендов и боли: изоляционный подход в CI/CD

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

Большинство UI-тестов флакают, медленно работают и в итоге отключаются в CI. Показываю альтернативу — изоляционные UI-тесты без стендов, таймингов и боли.

Читать далее

Тренд на деградацию: как я написал прокси-шакализатор на Next.js, чтобы помочь замедлить интернет

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели28K

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

Смотреть на то, как твой вылизанный бандл грузится рывками из-за отваливающихся узлов связи, больше нет сил. Все эти бесконечные битвы за 100/100 в Google PageSpeed, микро-оптимизации LCP и внедрение Edge-кэширования теряют смысл, когда пакеты просто не доходят до адресата.

И в какой-то момент я осознал простую истину: если ты не можешь остановить глобальную деградацию веба — возглавь её.

Раз уж мы летим в прошлое, давайте лететь туда с ветерком. Под скрежет диалап-модема, с вырвиглазными GIF-баннерами, кислотными фонами и ломающейся вёрсткой.

Встречайте: Шакализатор сайтов 3000.

Обшакалиться

Intl: мощный браузерный API, который вы, возможно, не используете

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

Intl API широко доступен (за исключением Intl.DurationFormat, который работает во всех современных браузерах, но существует недостаточно долго, чтобы считаться «широко доступным») и может удовлетворить почти все требования к форматированию непосредственно в браузере, без загрузки кода и без необходимости его парсинга. Он также учитывает языковые предпочтения пользователей, поэтому даты и числа можно форматировать так, как им удобно, без дополнительных усилий.

Читать далее