Я решил собрать для себя приложение, которое объединит несколько 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
Цель руководства — сделать работу с файлами быстрой, стабильной и готовой к продакшну.
Base64 — это схема кодирования двоичных значений в текст, преобразующая произвольные двоичные данные (например, изображения, файлы или любые байтовые последовательности) в безопасную печатную ASCII-строку, состоящую из 64-символьного алфавита (A–Z, a–z, 0–9, +, /). Браузеры применяют эту схему в JavaScript для встраивания двоичных данных непосредственно в код/HTML или для передачи двоичных данных в виде текста.
Недавно в браузерах появились удобные и безопасные функции для обработки Base64: Uint8Array.toBase64() и Uint8Array.fromBase64(). Хоть у них и есть множество параметров, смысл их сводится к кодированию и декодированию.
При кодировании они берут 24 бита из входных данных и разделяют их на четыре сегмента по 6 бит, и каждое 6-битное значение (в интервале от 0 до 63) соотносится с конкретным символом из алфавита Base64: первые 26 символов — это буквы A-Z в верхнем регистре, следующие 26 — a-z в нижнем, затем идут цифры 0-9 и, наконец, символы «+» и «/» в качестве 62-го и 63-го символов. Если длина входных данных не кратна трём байтам, то в качестве заполнителя используется знак «=».
Насколько же быстро могут работать эти функции?
Привет, я Александр Дудукало, фронтенд-разработчик. Сегодня я расскажу об обработчиках событий. Если коротко, вы узнаете о самом удобном способе управлять откликом на действия пользователя или браузера.
Эта статья — часть базового курса, где я простым и доступным языком рассказываю о том, как научиться писать свои первые сайты и веб-приложения на JavaScript. Все детали под катом.
Привет, Хабр! Новый год — хороший повод научиться чему-то новому. Длинные каникулы позволяют выйти из рутины, выспаться и наконец разобраться с тем, на что в обычные дни не хватает времени. В подборке собрали семь полезных курсов, которые помогут освоить нужные навыки. И главное — все бесплатно.
Уже многие годы JavaScript остаётся «рабочей лошадкой» веба. Если вам нужно сделать то, что невозможно реализовать средствами HTML и CSS, то обычно найти решение помогает JS. И это замечательно! JS помог расширить возможности пользователей, а также стимулировал прогресс HTML и CSS!
Но время идёт, функции HTML и CSS расширяются, поэтому мы должны начать заменять старые и привычные решения на JS новыми, требующими меньше JS.
Я ничего не имею против JS, но у него есть иные задачи, кроме как управление аккордеонами и внеэкранными меню навигации... Кроме того, JS нужно скачивать, распаковывать, обрабатывать, после чего он ещё часто тратит память на мониторинг и поддержку фич. Если мы сможем перенести какую-то функциональность JS в нативный HTML или CSS, тогда пользователям придётся скачивать меньше данных, а оставшийся JS сможет уделить внимание более важным задачам, с которыми (пока) не справляются HTML и CSS.
В этой статье я приведу несколько примеров; сможете придумать свои?
Привет, Хабр! Меня зовут Андрей Слесаренко — frontend‑разработчик с опытом работы более 8 лет. Прошёл путь от джуна до тимлида, работал над разными высоко‑нагруженными проектами. В начале этого года начал активно использовать LLM‑агентов в повседневной работе — и за это время набил немало шишек.
В этой статье хочу поделиться своим опытом, где мои ожидания разошлись с результатом, а также рассказать об основных «шишках», которые я набил при работе с агентами.
Опыт одиночной разработки и поддержки долгоживущего веб-приложения: отказ от фронтенд-фреймворков, использование нативных возможностей браузера, работа с Core Web Vitals и влияние AI-поиска на трафик реального проекта.
Хабр, привет!
Меня зовут Стас Федянин, я ведущий инженер-программист в Контуре. Недавно завершился Advent of Code 2025 — в этом году он длился 12 дней вместо 25. Я участвовал, как и пять предыдущих лет. Созрел на эту статью, потому что подумал, что мой опыт и мнение будут интересны сообществу, ведь есть изюминка: каждый год я писал код на новом языке. Считаю, это отличный способ расширить кругозор. В статье делюсь нюансами всех опробованных языков.
🤖 Тысячи копий одного и того же алгоритма от Claude/Grok/ChatGPT торгуют друг против друга. Это создаёт спираль смерти, на которой зарабатывает только биржа через комиссии
