Обновить

Фронтенд

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

Как я писал свой первый веб‑чат на React + FastAPI и всё сломал (а потом починил)

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

История о том, как я перешёл от просмотра вакансий к реальному проекту. Сделал простой веб-чат на React + TypeScript и FastAPI, задеплоил на Vercel и Render, и столкнулся со всеми классическими проблемами начинающего разработчика: Git-хаос, CORS-ошибки, забытые коммиты и node_modules в репозитории.

В статье - честный рассказ про мой первый пет-проект: выбор стека, структуру проекта, работу с REST API, настройку деплоя и документацию. Без приукрашиваний, с реальными граблями и ощущением победы, когда всё наконец заработало.

Читать далее

Новости

Чистый код на React: практики, которые делают проект поддерживаемым

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

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

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

Читать далее

Atomic CSS: верстка и легкость бытия

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

Здравствуйте, товарищи! Меня зовут Валентин, и сегодня мы снова поговорим про Atomic CSS! Обсудим имеющиеся проблемы в верстке и посмотрим, как атомарный подход их решает (или не решает). Разберем основные мифы, посмотрим на лучшие практики этого подхода и сделаем выводы.

Эту статью можно отчасти считать продолжением моей предыдущей, по данной теме, хотя напрямую они не связанны. Но если там был хардкор и технические детали, то здесь уже разберем прикладные вопросы: как верстать в Atomic CSS, чтобы получить заявленный эффект.

Такс такс, что тут у нас?

Делаем новогоднюю поздравительную открытку, используя только CSS

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

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

На носу Новый год. Все друг друга поздравляют. Мне это время очень нравится. Для меня Новый год — самый главный праздник.

В общем, мы же фронтендеры. Я подумал: а почему бы не придумать специальную открытку с поздравлением? Использовать я буду только HTML и CSS. Никаких картинок. Да-да, даже векторного SVG.

Единственным «хаком» будет шрифт — мы подберём красивый. Также у нас будет анимация снега. В общем, сделаем всё по красоте!

В ходе реализации я буду использовать все последние фишки CSS. Вдруг вы о них не слышали — заодно и что-то полезное для себя найдёте.

Давайте уже сделаем новогоднюю открытку!

Читать далее

Заменяем JS обычным HTML

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

Уже многие годы JavaScript остаётся «рабочей лошадкой» веба. Если вам нужно сделать то, что невозможно реализовать средствами HTML и CSS, то обычно найти решение помогает JS. И это замечательно! JS помог расширить возможности пользователей, а также стимулировал прогресс HTML и CSS!

Но время идёт, функции HTML и CSS расширяются, поэтому мы должны начать заменять старые и привычные решения на JS новыми, требующими меньше JS.

Я ничего не имею против JS, но у него есть иные задачи, кроме как управление аккордеонами и внеэкранными меню навигации... Кроме того, JS нужно скачивать, распаковывать, обрабатывать, после чего он ещё часто тратит память на мониторинг и поддержку фич. Если мы сможем перенести какую-то функциональность JS в нативный HTML или CSS, тогда пользователям придётся скачивать меньше данных, а оставшийся JS сможет уделить внимание более важным задачам, с которыми (пока) не справляются HTML и CSS.

В этой статье я приведу несколько примеров; сможете придумать свои?

Читать далее

Как я превратил скрипты локализации в npm-библиотеку

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

В прошлой статье я показал как скриптами перевести 10 000 строк на 3 языка. Скрипты оказались полезными - решил оформить в npm-библиотеку.
Теперь вместо копирования 4 файлов: npx i18next-toolkit update - и готово.

Читать далее

Округление как зеркало корпоративной культуры в IT-продуктах

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

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

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

Точные определения и механизмы легко гуглятся.

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

Читать далее

Бэкап файлов без программирования

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

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

Читать далее

Что такое MCP-сервер, и зачем он нужен

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

Привет, Хабр! Меня зовут Андрей Слесаренко — frontend‑разработчик с опытом работы более 8 лет. Прошёл путь от джуна до тимлида, работал над разными высоко‑нагруженными проектами. В начале этого года начал активно использовать LLM‑агентов в повседневной работе — и за это время набил немало шишек.

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

Читать далее

Веб-приложение без фронтенд-фреймворков в эпоху AI-поиска: личный опыт

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

Опыт одиночной разработки и поддержки долгоживущего веб-приложения: отказ от фронтенд-фреймворков, использование нативных возможностей браузера, работа с Core Web Vitals и влияние AI-поиска на трафик реального проекта.

Читать далее

Инженерия UX и производительности: от ядра к периферии

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

Очень краткий рассказ про семь проектов, построенных одним инженером на унаследованной платформе.

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

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

Читать далее

MDUI: как отдать UI backend-разработчикам

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

Как сократить Time-to-Market в 7 раз и научить бэкенд-разработчиков собирать страницы за 15 минут? В этой статье я делюсь опытом внедрения Meta-Driven UI в ERP-системе. Расскажу, как я «душила» легаси с помощью Strangler Fig Pattern, внедрила FSD-архитектуру на Vue 3 и почему Render-функции оказались эффективнее обычных шаблонов.

Читать далее

RSC Explorer: что на самом деле летит по сети в React Server Components

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

Команда JavaScript for Devs подготовила перевод статьи о том, как на самом деле работают React Server Components. Автор разбирает RSC на уровне протокола: что именно стримится с сервера, как JSX путешествует по сети, почему состояние не ломается при обновлениях и зачем React вообще понадобился такой странный формат.

Читать далее

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

Утечка, которой не было: как Next.js раздувает RAM в Kubernetes

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

Привет, Хабр! Меня зовут Вадим Королёв. Я руководитель команды разработки в X5 Tech. Очень люблю Next.js и решать проблемы, которые он приносит. С ним всегда происходит что-то интересное. Расскажу о причине утечки памяти в Node.js, которая оказалась глубже, чем можно было подумать.

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

В этот момент я занимался архитектурой и оптимизацией Node.js в музыкальном стриминге. Открыл графики и увидел явный рост памяти, который уходил в пик и приводил к перезапуску подов. Так началась «классическая предновогодняя история». Next.js в Kubernetes внезапно начал есть память так, будто у него внутри чёрная дыра.

Читать далее

JSDocs в VSCode

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

Меня зовут Алекс Гусев. В этой публикации я очень кратко раскрываю, почему переход с IntelliJ IDEA (PhpStorm) на VSCode ломает привычную работу с JSDoc в JavaScript-проектах.

Читать далее

Практическая оптимизация React: ререндеры, Context, списки, INP и code splitting

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


Оптимизация в React почти всегда сводится к двум факторам: объёму работы, которую выполняет JavaScript, и частоте (а также «стоимости») перерисовок компонентов. Сам React работает достаточно быстро, но в крупных интерфейсах даже небольшие архитектурные промахи и на первый взгляд безобидные ререндеры начинают заметно бить по производительности.

В данной статье мы расскажем про ключевые подходы к оптимизации React-приложений: как уменьшить количество лишних ререндеров, сократить объём вычислений при вводе и скролле и снизить нагрузку стартового JavaScript.

Читать далее

Тренды в ИТ: 2026

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

Тренды в ИТ — это не про красивые слова и не про вечные «угрозы» о том, что нас вот-вот заменит ИИ и пора срочно выбирать другую профессию.

Тренды — это про то, как изменится работа с архитектурой и безопасностью в ближайшие годы, как трансформируются подходы к разработке и само мышление инженеров.тМы попросили экспертов ГК «Юзтех» поделиться своим взглядом на ИТ-тренды 2026 года.

3… 2… 1 — поехали. Ждём горячее обсуждение в комментариях.

Читать далее

От сеньора к наставнику: что я поняла о менторстве в разработке

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

Рано или поздно, если вы стали сеньором, наступает момент, когда вас просят помочь с адаптацией нового сотрудника. Сначала это выглядит как разовая просьба: показать проект, объяснить пару технических нюансов, ответить на вопросы. Потом в команде появляется ещё один новичок. Потом ещё. И в какой-то момент вы вдруг ловите себя на мысли, что ваша роль в проекте незаметно изменилась — вы больше не просто «тот, кто хорошо разбирается в коде», вы стали ментором.

Читать далее

Мультиплексирование: от основ до сложных сценариев

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

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

Читать далее

Вы больше не новичок в Git. Повышаем квалификацию с помощью 7 команд

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

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

Читать далее
1
23 ...