Обновить
215.83

JavaScript *

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

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

Замыкание в JavaScript — зачем функциям личное пространство

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

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

Чтобы не городить глобальные переменные и не писать громоздкие конструкции (что почти всегда ведет к багам), мы посмотрим на еще одну фишку JS.

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

Читать далее

DOM-дерево — как не запутаться в ветвях объектной модели документа

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

Бывало такое: смотрите вы на красивую страницу интернет-магазина, открываете консоль разработчика (ту самую, по F12 или через правый клик), а там — лес из тегов, который вообще не похож на то, что вы видите глазами?

Привет, Хабр! Меня зовут Александр Дудукало, я автор курса по JavaScript. В этой статье мы продолжаем знакомиться с элементами страницы, а именно с DOM. Эти знания вам точно понадобятся в работе с любым проектом. Давайте же больше узнаем, что это за дерево и как с ним работать. Поехали.

Читать далее

Главные изменения JavaScript в 2026 году

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

В 2026 году обновят JavaScript. Окончательный список изменений сформируется из проектов ECMAScript, достигших 4 этапа к марту. Но многие из них уже на заключительной стадии, а другие готовы и доступны в некоторых браузерах и средах. Под катом — что ждёт разработчиков и какие проблемы будут решены в этом апдейте.  

Читать далее

Запилил кросс-фреймворк Markdown/MDX парсер, чтобы не мучаться с контентом

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

Всем привет!

Долго я возился с маркдауном в своих проектах и, честно говоря, знатно подгорел. Первая проблема — это вечный выбор библиотеки.

С одной стороны, есть «конструкторы» типа unified, remark и rehype. Штуки мощные, но настраивать весь этот AST-конвейер и систему плагинов — это какой-то оверхед и лишняя сложность, имхо.

С другой стороны, есть @next/mdx, который вроде и ок, но слишком завязан на страницах и вообще не умеет работать на клиенте.

Раньше я обычно выбирал что-то вроде markdown-to-jsx или react-markdown.

DX у них приятнее, работают и на клиенте, и на сервере, весят мало.

Но вот беда: они «из коробки» не переваривают HTML или MDX, и ты снова вязнешь в настройке плагинов. А если добавить туда i18n (типа i18next или next-intl), начинается настоящий ад. Куча if/else в коде, чтобы отрендерить нужный язык, и бандл раздувается до небес. Плюс вечные косяки с front-matter. Ну и до недавнего времени всё это было только для React.

В общем, решил я написать свое решение для intlayer. Чтобы просто работало.

> К слову, за основу я взял форк markdown-to-jsx v7.7.14 (от quantizor), который базируется на simple-markdown v0.2.2 (от Khan Academy).

Когда пилил этот парсер, ставил перед собой такие цели:

- Максимально легкий вес

- Кросс-фреймворковость (React, Vue, Svelte, Angular, Solid, Preact)

- Простая настройка: никаких бесконечных цепочек плагинов

- Поддержка SSR и клиентского рендеринга

- Настройка на уровне провайдера: можно легко прокинуть свои компоненты из дизайн-системы

- Компонентный подход: полный контроль над рендерингом каждой части приложения

Читать далее

Хватит использовать JavaScript для решения задач CSS

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

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

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

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

Читать далее

Magneto Solver: Пишем симулятор магнитных полей на WebGPU и боремся с тензором Максвелла

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

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

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

Читать далее

Как компьютер понимает Языки программирования: история о том, как ваш код превращается в нули и единицы

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

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

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

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

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

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

Читать далее

Cryanide как альтернативная ветвь развития web-технологий

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

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

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

Почему и зачем?

От пустоты к идее: как я создал свою первую доску вдохновения

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

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

Читать далее

Как старый роутер съел 2.5 ГБ ОЗУ в моей вкладке, или cетевой инфаркт асинхронного кода

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

Интро

Это история о том, как «кривой» роутер научил меня смотреть на память браузера иначе. Есть вкладка с ИИ-чатом, есть 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 минут, дальше все повторяется.

Читать далее

Хроники Valibot: как мы искали безупречные данные в мире JavaScript

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

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

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

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

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

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

Читать далее

Методы массивов. Часть 2

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

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

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

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

Читать далее

16 часов и 8600 строк: как Claude Code помог собрать персональный супер-апп

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

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

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

Читать далее

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

Claude Code в 2026: гайд для тех, кто еще пишет код руками

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

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

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

Не потерять работу

Frontend Status: свежий дайджест фронтенда и AI

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

Привет!

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

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

Читать

Экипировка Бонда: полезные инструменты DevTools

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

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

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

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

Читать далее

Синтаксический сахар или технический деготь: классы в JavaScript

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

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

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

Читать далее

Умный рабочий стол, который живёт по солнцу

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

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

Зачем смотреть в окно?

Функции-конструкторы и оператор new в JavaScript

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

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

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

Читать далее

Baseline: декабрь 2025

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

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

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

Узнать, что можно применять в проде