JavaScript *

Недостаток знаний часто подталкивает людей к чрезмерно сложным решениям, и рано или поздно это отражается на производительности.

Возьмем content-visibility: auto. Он дает тот же эффект, что и React-Window, но без единой строчки JS и без увеличения размера сборки. Аналогичная ситуация с современными единицами высоты окна (dvh, svh, lvh): наконец-то приведена в порядок "мобильная" высота, которую годами пытались компенсировать через window.innerHeight.

Обе технологии в 2024 году получили более 90% поддержки современных браузеров и полностью готовы для продакшна. Однако мы по привычке продолжаем решать такие задачи с помощью JS, просто потому, что CSS незаметно ушел вперед, пока мы спорили о React Server Components.

Мне кажется, я знаю, как должен быть устроен идеальный электродвигатель, но чтобы это доказать, нужен инструмент. Существующий софт убивал все желание: медленно, дорого или неудобно.

За зимние каникулы мы с Gemini (да, почти весь код написал ИИ) создали свой солвер на WebGPU. Весь софт - это один HTML-файл. Он работает в браузере, считает сетки до 16К в реальном времени и умеет то, чего нет у аналогов.

Привет, Хабр! (И тебе, случайный читатель, который думает, что "код - это магия", а процессор - маленький гномик, который внутри ноутбука читает for i in range(10) и послушно бегает кругами.)

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

Как вообще компьютер “читает” Python или 1С или любой другой язык программирования, если он понимает только 0 и 1? И почему ваш идеальный код иногда превращается в "segmentation fault" / "Неопределённая ошибка" / “Пользователь не найден (хотя он сидит напротив)”?

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

Поехали. Будет без хардкора уровня “компилятор за 21 день”, но с понятными аналогиями, для статьи упростил всё до минимума. Реально постарался переварить информацию и выдать её в красивой упаковке. Кстати, в статье будут примеры из двух разных миров Python и 1С, так что будет интересно…

Кратко о том, почему я не использую фреймворки, зачем пишу всё с нуля и к чему это привело.

Я написал полноценный SDK для web-приложений как концепт альтернативной ветви развития, если бы web-индустрия пошла по пути игровых движков.

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

Интро

Это история о том, как «кривой» роутер научил меня смотреть на память браузера иначе. Есть вкладка с ИИ-чатом, есть WebSocket/Streaming, есть обычный i5. И есть момент, когда все это превращается в кирпич: вкладка раздувается до гигабайтов, процессор залипает, страница оживает только на пару минут после перезагрузки.

Лид

Проблема оказалась не в нейросетях и не в JS. Виновник — старый домашний роутер, который не вывозил IPv6 и фрагментацию. Итог — застрявшие пакеты, нарастающий буфер в браузере и тысячи незавершенных async/await-машин в памяти.

TL;DR

- Вкладка с WebSocket раздувается из-за сетевых затыков.
- Роутер ломает MTU/IPv6, пакеты зависают, bufferedAmount растет.
- Асинхронные цепочки не завершаются и копятся в Heap.
- Фикс: MTU 1400 + отключение IPv6.
- В коде: мониторинг bufferedAmount, таймауты и AbortController.

Симптом

- Вкладка с ИИ-чатом пухнет до 1–2.5 ГБ.
- CPU уходит в 100%, интерфейс замирает.
- Перезагрузка помогает на 5 минут, дальше все повторяется.

Если вы когда-нибудь писали фронтенд на TypeScript и получали в проде Cannot read property 'x' of undefined, — добро пожаловать в клуб!

TypeScript спасает нас от сотен ошибок… но только пока код не запущен. Как только он скомпилировался, типы исчезают, и в рантайме вы снова остаетесь один на один с невалидными данными.

И вот тут начинается: меняется API, формы шлют что угодно, аналитика ломает отчёты, а тесты молчат.

В Островке мы попробовали библиотеку Valibot — легковесный runtime-валидатор, который умеет проверять данные на границах контекстов и при этом остаётся дружелюбным к TypeScript.

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

Привет, Хабр! Меня зовут Александр Дудукало, я автор курса по JavaScript. Сегодня мы поговорим о ключевом навыке разработчика. С помощью чего сделать код лаконичнее и выразительнее, при этом заменяя громоздкие циклы простыми конструкциями?

Владение методами массивов — это и есть тот самый ответ. Это база, которая позволяет писать код, понятный человеку, а не только машине, и умение переключиться с вопроса «как сделать» на результат «что получить».

Мы разберем три самых полезных метода: map — для преобразования данных, filter — для отбора элементов и sort — для сортировки. Вы поймете, как они работают внутри, и примените знания на практике, создав свои аналоги этих функций. Подробности, как всегда, внутри.

Я решил собрать для себя приложение, которое объединит несколько AI-модулей в одном месте: фитнес-трекер с AI-тренером, новостной дайджест по AI/ML, дашборды для других проектов. Не SaaS для всех, а инструмент для себя. PWA, чтобы работало как нативное приложение на телефоне.

В итоге: 4 дня по 4 часа, 8600 строк кода, работающий продукт в production. Расскажу как это получилось.

AI агенты в 2026: гайд для тех, кто всё еще пишет код руками.

Как устроены агенты типа Claude Code, ChatGPT Codex и др. Как правильно с ними работать. Как управлять контекстом. Как прогать голосовухами из тг.

Привет!

Это Frontend Status — ваш регулярный дайджест по веб-разработке. Мы собираем самое актуальное и полезное: от свежих фич в браузерах и фреймворках до того, как ИИ меняет сами фронтенд-приложения: от генерации динамического UI до встроенных AI-фич до AI-агентов.

В этом выпуске — 25 материалов: видео с конференций, новости о фреймворках, обновления Chrome, AI-инструменты и многое другое. Навигация по разделам поможет быстро найти интересное.

Привет, Хабр! С вами Карлен, Lead Fullstack разработчик в ITFB Group.

Для любого специалиста в веб-разработке DevTools — это незаменимый инструмент диагностики. Однако его истинная мощь часто остаётся «в тени»: многие используют лишь базовый функционал, упуская из виду целый арсенал возможностей для тонкой настройки и глубокого анализа.

В этой статье я хочу сосредоточиться на практических приёмах, которые ежедневно использую сам. Мы пройдём путь от эффективной работы с консолью до анализа производительности и эмуляции реальных условий. Готовы выйти за рамки console.log? 😊

Привет, меня зовут Саша, и я продолжаю рассказывать о JavaScript тем, кто только взялся за освоение этого языка. В прошлой статье мы разобрали функции-конструкторы и оператор new, научившись создавать шаблоны для множества однотипных объектов.

Сегодня мы сделаем следующий шаг к современному JavaScript. Я покажу вам классы — более чистый и понятный способ делать ровно то же самое. Хоть классы и называют «синтаксическим сахаром», но это не отменяет популярность и удобство их использования. Поехали!

Идея «умного» рабочего стола у меня появилась давно. Под "умным" я понимал не виджеты, прогнозы погоды и не очередную анимацию, а максимально простую идею: фон рабочего стола должен соответствовать тому времени суток, которое сейчас у меня за окном. Без условностей. Только солнце.

Привет, меня зовут Саша, и я разрабатываю на JavaScript. В прошлый раз мы разбирались с методами объектов и идентификатором this, научившись делать объекты по-настоящему живыми и независимыми.

Сегодня двинемся дальше. Покажу, как создавать множество однотипных объектов, не копируя код раз за разом. Мы разберемся с функциями-конструкторами и оператором new — тем самым фундаментом, на котором строятся современные классы в JavaScript. Как всегда, расскажу все доступно и просто, поехали!

Обзор на браузерные API, которые стали Widely available в декабре 2025. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.

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

Мне нравится, когда можно увидеть обратную сторону; какой бы формальной и железобетонной ни казалась спецификация ES-262, мы всё равно замечаем (если знать, куда смотреть) в ней все хорошие и плохие решения, принятые сотнями людей, разрабатывавших язык. У JavaScript есть характер. Да, он не всегда делает всё в точности так, как можно ожидать, но на мой взгляд, JavaScript обладает настоящим очарованием, которое можно оценить, если глубоко его изучить.

Впрочем, существует одна часть языка, которая мне кажется совершенно нелогичной: это конструктор Date.

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

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

Именно о них предлагаю поговорить сегодня.

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

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

В этой небольшой статье мы вместе с вами немного пощупаем новый Web API - Anchor Positioning.

Anchor Positioning API предоставляет новые возможности для связывания элементов между собой. Одни элементы являются якорями (якорными, anchor elements), другие - позиционируемыми относительно якорей (закрепленными, anchor-positioned elements). Размер и положение позиционируемого элемента может определяться размером и положением якорного элемента.

Кроме того, с помощью CSS можно:

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

определять условия видимости закрепленного элемента, например, скрывать такой элемент при выходе за пределы экрана

На сегодняшний день этот API поддерживается всеми основными браузерами (в Safari пока только в качестве экспериментальной возможности).

В современных фронтенд-приложениях работа с файлами встречается постоянно: загрузка изображений, экспорт CSV, превью и интерактивные редакторы. Но когда файлы увеличиваются в размере или их количество растет, начинаются проблемы: интерфейс подвисает, расход памяти увеличивается, а браузер иногда просто падает.

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

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

разбивка больших файлов на части (chunks)

сжатие и конвертация изображений

реализация надежных превью файлов

экспорт данных в виде загружаемых файлов

управление памятью во избежание утечек Blob URL

Цель руководства — сделать работу с файлами быстрой, стабильной и готовой к продакшну.