Добрый день!
Хочу привести пример небольшой оптимизации интерфейса (frontend) мобильного приложения, сделанного на 1С.
Разницу вы сами можете проверить, скачав приложение и переключив флаг в настройках «Оформление HTML».
Вкладки браузера разрастались до 5 ГБ. Причина — эффекты в реактивной системе, которые продолжали жить после удаления компонентов из DOM: подписки на сигналы не очищались, замыкания удерживали ссылки на мёртвые узлы, а каждый переход по SPA множил «призрачные» обновления. Разбираем, как иерархия parent-child эффектов, привязка к disconnectedCallback через effectSet и WeakRef полностью решили проблему — без ручного управления подписками
Привет, Хабр!
Вопросы по HTML и CSS всё реже встречаются на собеседованиях для фронтендеров. Но в основном это касается позиций middle и выше. А вот для начинающих специалистов они всё ещё есть.
Поскольку новичкам всегда сложнее проходить собеседования, я захотел помочь. Я поискал вопросы с собеседований, которые были в 2025 году, и составил список наиболее часто встречающихся вопросов.
А главное, отвечать на них будет ChatGPT. Я же буду его дополнять, если потребуется. Многие же используют его для подготовки. Вот и посмотрим, как он справится.
Сразу скажу, что буду душнить. Так что вы сами рассудите, кто из нас лучше отвечает.
Давайте начнём!
Когда я прихожу в новый проект и провожу аудит, почти всегда вижу одну и ту же картину. Код аккуратный, линтеры строгие, CI настроен. Но стоит открыть разметку или конфиги — и начинается творческий беспорядок. Кто-то форматирует по одному, кто-то по другому, кто-то копирует куски из StackOverflow, не особо понимая синтаксис.
Получается парадокс: мы защищаем самую очевидную часть системы и игнорируем инфраструктуру, документацию и шаблоны. Хотя по факту это такие же контракты проекта, просто записанные не на языке программирования, а на языках разметки.
Со временем я перестал разделять «код» и «не код». Если файл участвует в работе продукта — он должен быть проверяемым. Автоматически. Без надежды на внимательность разработчика.
В данной статье я покажу, как именно это выглядит на практике и какие инструменты я использую каждый день.
В современном мире веб-разработки выбор стратегии рендеринга сайта является одним из ключевых решений, определяющих его производительность, оптимизацию для поисковых систем (SEO) и пользовательский опыт. От того, как и где генерируется HTML-код вашего приложения, зависит скорость загрузки, интерактивность и даже стоимость инфраструктуры. В этой статье мы подробно рассмотрим основные типы рендеринга — Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR) и набирающие популярность React Server Components (RSC) — их преимущества, недостатки, влияние на SEO и производительность, а также приведем примеры технологических стеков для каждого подхода.
Статья будет полезна для всех кто занимается разработкой сайта(вайбкодеры, веб-разработчки итп.)
Привет, Хабр!
Мне нравится смотреть, как верстают современные фронтендеры. Забавно наблюдать, как меняется вёрстка с годами. И сразу скажу, что не всё «плохо». Но ошибки, конечно же, есть. Раньше были свои примеры «плохого» кода, сейчас другие. О них хочу поговорить в этой статье.
Я составил список распространённых примеров кода «с душком». Старался быть объективным, но судить только вам, насколько это у меня получилось.
Давайте посмотрим, что я вам подготовил.
Мне 16 лет. Последние 8 месяцев я учусь на Frontend-разработчика. Я решил проверить свои силы и создать инструмент, которым буду пользоваться сам. Но мой путь начался не с мощного ПК и гигабайтов интернета, а с мечты и обычного смартфона.
Мой путь в программировании начался 26 декабря 2024 года. Это была мечта, к которой я шел 5 лет. На тот момент я был «полным нулем»: у меня не было стабильного интернета и я почти ничего не знал о Frontend. Я записался на курсы, даже не до конца понимая, что это такое.
Первые две недели у меня не было ноутбука, и я писал свой первый код прямо на телефоне. Только спустя время у меня появился ноутбук и нормальный доступ к сети, чтобы узнать: что такое Frontend и какие задачи он решает?
Да, всех уже достала тема нейросетей, но для себя решил сделать некоторые тесты и поскольку разным людям они были довольно интересны, решил написать статью, суть простая, хочу сравнить на одном промпте (не самом простом) разные модели, у меня был доступ только к этим:
Gemini 3 Pro
Sonnet 4.5 Thinking
GPT 5.2 Thinking
GLM 5
Qwen 3 Coder Next 80b (IQ4_XS квантование) (локальный запуск через llama.cpp)
Промпт был для всех такой:
Тест LLM‑модели qwen3‑coder‑next:q8_0: модель успешно построила карту большого форума, собрала все сообщения в JSON и преобразовала их в готовый SQL‑дайджест, показав высокое качество генерации кода, но «залипла» при решении чисто логической задачи.
Я до сих пор бомблю от редизайна Duolingo.
Чтобы тренироваться без отвлечения на геймификацию, написал небольшой тренажер грамматики английского языка. Супер простой (vanilla JS + HTML), но со своими особенностями.
Особенности решения — под катом.
Бьюсь об заклад вы привыкли к инструментам разработчика в Chrome. Ежедневная проверка вёрстки, просмотр логов или анализ загрузку страницы делается на автопилоте. Но что если есть альтернатива, которая в некоторых моментах работает иначе и часто даже лучше?
Инструменты разработчика в Firefox создавались отдельно и имеют свою историю. Их команда не ставила задачу сделать копию Chrome. Вместо этого они сфокусировались на своих идеях о том, как сделать отладку более наглядной. В результате некоторые вещи там реализованы более прямолинейно и понятно. Конечно, не всё идеально, и у Chrome есть свои преимущества. Об этом сегодня и поговорим.
В этой статье мы посмотрим на Firefox DevTools в деталях. Отойдем от банальных соревнований в стиле «у кого DevTools длиннее». Вместо этого разберем, в каких ситуациях панель Firefox может сэкономить вам время, а в каких всё же удобнее остаться в Chrome. Откроем для себя несколько приёмов, которые можно добавить в свою ежедневную работу, независимо от браузера.
Зачем изобретать свой Street View?
Все мы привыкли к Google Street View, но что, если нужно показать пространство, куда машина со 360-камерой не заедет? Интерьер офиса, музей, университетский холл. Коммерческие решения для виртуальных туров часто дороги или ограничены в кастомизации.
Всем привет, на связи снова я — Дмитрий, React-разработчик. Сегодня хочу рассказать об интересном баге, который был замечен в большой и сложной таблице.
Проблема заключается в том, что в таблице на React с колонками, у которых есть свойство position: sticky, иногда пропадала граница между соседними ячейками по вертикали. Причём проявлялась она не всегда и носит случайный характер. Забавно, что изменение масштаба страницы (Ctrl + колесико мыши) мгновенно возвращает исчезнувший бордер. При этом в CSS все прописано и никуда не исчезает — это чисто визуальный баг рендера.
Привет, Хабр!
Во фронтенде изменения происходят постоянно. Только разобрался с одним инструментом, он уже считается устаревшим. Плюс на смену ему появляются новые. В JavaScript регулярно добавляются новые методы и API, а HTML и CSS, разумеется, не отстают.
Неудивительно, что в этом постоянном круговороте часть возможностей проходит мимо или просто забывается. В этой статье я собрал несколько таких фич, о которых, по моему опыту, разработчики забыли.
Давайте посмотрим, что я вам подготовил.
В самой библиотеке часто используется TuiControl, это обертка позволяющая удобно работать с кастомными контролами, однако разработчики в своих проектах продолжают использовать ControlValueAccessor, хотя можно воспользоваться готовым решением из библиотеки.
Всем здравствуйте, дорогие читатели!
Меня зовут Рамазан, я Frontend-разработчик, энтузиаст и я люблю исследовать грани возможностей современных Web-технологий.
В этой статье мы поговорим о том, нормально ли применять в рамках Atomic CSS подхода рукописный CSS. Бытуют разные мнения по этому поводу. Кто-то считает, что в атомарном подходе нужно использовать только утилиты, а кто-то допускает и произвольные сочетания рукописных CSS классов с ними. Я постараюсь разобраться в этом, аргументируя свою позицию.
Safari — новый Internet Explorer для фронтенд-разработчиков! Поведение вёрстки в нём отличается от спецификаций, а иногда бывает и непредсказуемым.
Но если Microsoft свой браузер похоронила, то Apple регулярно обновляет Safari, создавая новые проблемы для фронтендеров. Релиз Safari 26.0 не стал исключением, а усложнил ситуацию новый дизайн Liquid Glass, изменивший интерфейс браузера.
Я — Дима Фукс, Head of Frontend в Додо. Сегодня расскажу о старых и новых проблемах Safari на iOS на примере простой задачки: реализации фуллскрин-модалки с текстовым полем — то есть чата поддержки или окна комментария, встроенного в сайт.
Привет, Хабр.
Каждый год я смотрю, какие новые фишки в HTML и CSS стали поддерживаться современными браузерами. Таким образом понимаю, что уже можно использовать. Так как я люблю делиться всем с вами, то я подумал: «А почему бы не рассказать о новинках на Хабре?». Вот я и пришёл.
Сразу скажу, что эта статья — краткий обзор появившихся возможностей. Моя цель — уведомить вас. Я не буду закапываться в принцип работы и другие нюансы. По этой причине, пожалуйста, воспринимайте эту статью как список того, что можно изучить в 2026 году.
Моё главное правило для отбора фич заключается в том, чтобы она стала «зелёной» в 2025 году на сайте «Can I Use». Смотрю последние версии браузеров Chrome, FireFox, Opera, Edge, Safari, iOS Safari, Samsung Internet и Android Chrome.
Не буду больше тянуть. Давайте посмотрим, что я вам подготовил.
После Приорбанка я думал, кого взять следующим для небольшого публичного аудита. Недавно минула пора праздников, и что-то мне подсказывает, что многие делали покупки в онлайн-маркетах, чтобы приобрести подарки близким. Этот период — высокий сезон для таких приложений. Они зарабатывают много денег в это время, но и нагрузка на инфраструктуру идёт колоссальная.
Мой личный топ из всех популярных онлайн-маркетов — это Wildberries. Я люблю этот сервис и активно им пользуюсь. Мне кажется, это уже хороший повод посмотреть, насколько он доступен людям с различными ограничениями. Безусловно, это очень популярная платформа в странах СНГ, но это, конечно же, не значит, что она одновременно и доступна на 100%.
Сразу хочу оговориться: я не пытаюсь подчеркнуть какой-то изъян платформы. В конце концов, у каждого продукта свои бизнес-приоритеты, и доступность (если она не обязательна с точки зрения законодательства) — это личное дело каждого бизнеса. К примеру, мой продукт тоже не удовлетворяет всем критериям доступности, да и многие другие, на которых я работал. При том что моя личная аналитика прошлого года показала, что 20% моей пользовательской базы меняют размер шрифта для лучшего восприятия, но не факт, что есть хотя бы один (я бы сказал, его и нет) кто использует продукт, будучи полностью незрячим, со скринридером.
Часто интерес к этой теме больше у юридических фирм. Понимая лазейки в законах, они сами находят «жертву» — компанию, не удовлетворяющую требованиям. Затем находят людей с ограничениями, от имени которых подают многомиллионный иск и зарабатывают себе деньги. При том что сами люди с ограничениями этими продуктами могли вовсе и не пользоваться.
Почти все элементы мира хайтека, от самых современных ИИ-систем крупнейших компаний до обычных кусков кода, написанных студентами, аннотируются и описываются в одном простом текстовом формате. Когда вы пытаетесь дать сложные инструкции ChatGPT, хотите поделиться списком покупок в Apple Notes или скопировать чью-то домашнюю работу в Google Документах, вы пользуетесь одним и тем же форматом. Самое безумное заключается в том, что этот формат придумал не конгломерат технологических корпораций, а ворчун с добрым сердцем, который сейчас, вероятно, пересматривает фильм Кубрика или болеет за любимую спортивную команду. Но нам стоит разобраться, как родились столь простые текстовые файлы; не только для того, чтобы я мог похвастаться щедростью и умом моих друзей, но и чтобы напомнить вам, как работает Интернет на самом деле: умные люди придумывают хорошие вещи, а затем отдают их бесплатно, снова и снова, пока их технология не захватит мир и не сделает его лучше для всех.
