Практический смысл простой: то, что раньше делали через --i в инлайн-стиле каждого элемента или через JavaScript, теперь считает сам браузер. Ступенчатые задержки анимации в списке, ширина колонок по числу карточек, позиционирование по индексу без нумерации в разметке. По данным Web Platform DX, функции получили статус «newly available» с 18 августа 2026 года; статус «widely available» по правилам Baseline ожидается 18 февраля 2029 года, то есть старые браузеры ещё долго будут требовать запасного варианта.

• sibling-index() возвращает позицию элемента среди соседей, начиная с 1; sibling-count() возвращает число прямых детей родителя, включая текущий.
• Поддержка: Chrome и Edge 138 (июнь 2025), Safari 26.2 (декабрь 2025), Firefox 154 (18 августа 2026).
• Функции считают по дереву DOM, а не по flat tree; при попытке пересечь границу Shadow DOM результат может быть 0.
• Типичные применения: transition-delay и animation-delay по номеру, размер элемента в зависимости от числа соседей, раскладка без JavaScript.
• CSSWG допускает будущую форму с фильтром of, чтобы считать только соседей по селектору.

Как это выглядит в коде

Классический пример из обсуждения: список, где каждый следующий пункт появляется чуть позже предыдущего. Раньше для этого либо писали style="--i: 3" в каждом li, либо перечисляли :nth-child() вручную. Теперь достаточно одного правила:

Обе функции возвращают целое число без единиц, поэтому умножение на 80ms или на 100px внутри calc() работает как с обычной переменной. В спецификации CSS Values and Units Level 5 их называют tree-counting functions, функциями подсчёта по дереву.

Где функции ведут себя не так, как ожидается

• Считается дерево DOM, а не flat tree: слоты и элементы внутри Shadow DOM учитываются иначе, чем при рендеринге; на границе теневого дерева функция может вернуть 0, чтобы не раскрывать его содержимое.
• Учитываются все элементы-соседи, а не только подходящие под селектор. Если в списке есть скрытый li, он всё равно попадёт в счёт; форма с фильтром of пока только обсуждается в CSSWG.
• Индексация начинается с 1, как у :nth-child(), а не с 0.

Можно ли использовать в проде

Для декоративных эффектов вроде задержек анимации можно уже сейчас: в браузере без поддержки calc(sibling-index() * 80ms) будет невалидным значением, и правило просто не применится, элементы появятся одновременно. Для раскладки, от которой зависит читаемость, стоит завернуть правило в @supports:

Кому это ничего не даст: проектам, которые обязаны поддерживать браузеры старше Chrome 138 и Safari 26.2, а также тем, кто уже генерирует индексы на сервере. По данным Web Platform DX, Chrome и Chrome Android получили функции в версии 138 от 24 июня 2025 года, Edge 138 от 26 июня 2025 года, Safari и iOS Safari в 26.2 от 12 декабря 2025 года, Firefox и Firefox Android в 154 от 18 августа 2026 года.

Из соседних CSS-новостей на сайте: Firefox 155 добавил функцию progress(), а в Chrome 154 beta появились режимы links и tabs у scroll-marker-group. Черновик спецификации с формальным описанием функций лежит на сайте CSSWG.

Источники: Обсуждение в r/css, Web Platform DX: sibling-count и sibling-index, CSS Values and Units Module Level 5

Бета обычно доживает до стабильного релиза без крупных изменений, поэтому всё перечисленное стоит проверять уже сейчас: часть новинок меняет поведение существующего кода. Background Fetch начинает применять CORS, а AbortController теперь передаёт причину отмены в Response и ReadableStream. Автор поста в блоге Chrome for Developers Рэйчел Эндрю; отдельных региональных ограничений на бету в источнике нет.

• Web Crypto получил ML-KEM 768 и 1024, ML-DSA 44, 65 и 87, ChaCha20-Poly1305 и гибридную схему X-Wing.
• WebSocket принимает options bag: new WebSocket(url, { protocols: "soap" }); новое поле targetAddressSpace позволяет подключаться к локальным адресам при secure context и разрешении Local Network Access.
• scroll-marker-group получил режимы links и tabs; в режиме tabs активный маркер остаётся единственным tab-stop, а неактивный контент скрывается из дерева доступности.
• CSSStyleValue и связанные конструкторы доступны в воркерах; text-decoration-inset принимает auto, длину, процент и одно-/двухзначную запись; FontFace.width стал алиасом stretch.
• Background Fetch теперь соблюдает CORS; WebGPU получил модификаторы frag_depth less и greater, которые позволяют не терять ранний Z-тест.

Что даёт постквантовая криптография в браузерном API

До сих пор постквантовые алгоритмы в Chrome работали только на уровне TLS, незаметно для страницы. В 154 они выходят в JavaScript: через crypto.subtle можно генерировать ключи и выполнять инкапсуляцию ML-KEM (стандарт NIST для обмена ключами) и подписи ML-DSA. Добавлены также ChaCha20-Poly1305 и X-Wing, гибрид классического X25519 и ML-KEM. На практике это нужно тем, кто делает сквозное шифрование в веб-приложениях: мессенджерам, хранилищам паролей, локальным подписям документов. Проверить у себя просто: вызвать crypto.subtle.generateKey с новым именем алгоритма в бете и убедиться, что он не бросает NotSupportedError.

Зачем WebSocket объект настроек и локальная сеть

Конструктор WebSocket много лет принимал только URL и строку или массив протоколов. Теперь второй аргумент может быть объектом: new WebSocket(url, { protocols: "soap" }). Это задел под будущие опции без ломки сигнатуры. Второе поле, targetAddressSpace, решает конкретную боль: страница с публичного HTTPS-сайта не могла открыть сокет к устройству в локальной сети. В 154 это возможно, но при трёх условиях: secure context, разрешение пользователя по механизму Local Network Access и имя хоста, которое резолвится в локальный IP. Сценарий типичный для панелей управления IoT и локальных серверов разработки.

Что меняется в CSS

Свойство scroll-marker-group, которое вместе с псевдоэлементами ::scroll-marker позволяет делать карусели и табы без JavaScript, получило два режима. links ведёт себя как набор ссылок, tabs как настоящий tablist: активный маркер единственный останавливается по Tab, а контент неактивных вкладок исключается из accessibility tree. Это закрывает главную претензию к CSS-каруселям: раньше скринридер видел все панели сразу.

Из остального: text-decoration-inset позволяет отступать подчёркивание от краёв текста и принимает auto, длину, процент и запись из одного или двух значений; FontFace.width и дескриптор font-width в @font-face стали алиасами stretch и font-stretch; типизированная объектная модель CSS (CSSStyleValue и конструкторы) теперь доступна в воркерах, что упрощает расчёты стилей вне главного потока.

Что может сломаться после обновления

• Background Fetch теперь применяет CORS: фоновые загрузки с чужих доменов без правильных заголовков начнут падать.
• AbortController прокидывает reason в Response и ReadableStream: код, который сравнивал ошибку отмены с конкретным AbortError, может получить другой объект.
• По заметкам к релизу, браузер в ряде сценариев использует события click вместо пары pointerdown/pointerup; обработчики, завязанные на порядок этих событий, стоит перепроверить.
• В WebGPU появились модификаторы frag_depth less и greater: шейдеры, которые пишут глубину, могут вернуть себе ранний Z-тест, но это требует правки WGSL.

Как попробовать

Бета ставится параллельно со стабильным Chrome со страницы загрузки Chrome Beta; анонс сборки опубликован в Chrome Releases; на Android доступна через бета-программу в магазине. Стабильный релиз 154 по обычному графику Chrome выходит примерно через четыре недели после беты, точную дату Google в посте не называет. До этого времени полезно прогнать сайт с включёнными фоновыми загрузками и WebSocket-подключениями к локальным устройствам.

Что происходит в других движках, можно сравнить с недавними релизами: WebKit переписал загрузчик модулей для Safari 27, а Firefox 155 добавил CSS-функцию progress(). Полный список изменений Chrome 154 с примерами кода лежит в блоге Chrome for Developers.

Источники: Chrome for Developers: Chrome 154 beta, Chrome Releases: Chrome Beta for Desktop Update

Изображение на обложке: Google, логотип Chrome

В тот же день вышел Firefox 155 для десктопа, и для верстальщиков в нём есть чем заняться: CSS-функции progress() и alpha(), свойство font-width, attr() в любом свойстве, а в JavaScript Promise.allKeyed(). Обновиться стоит и без новинок: бюллетень безопасности MFSA 2026-82 закрывает несколько уязвимостей высокого уровня.

• Блокировщик в Firefox для iOS включается в Settings, затем Browsing, затем Ad Blocker; по умолчанию выключен, расширение ставить не нужно.
• Работает на технологии Apple WebKit Content Blocker и списке EasyList; рекламу в поисковой выдаче и рекламу самих сайтов может пропускать.
• Firefox 155: CSS progress(), alpha(), font-width, attr() везде; Promise.allKeyed() и allSettledKeyed(); согласование QUIC v2 для HTTP/3; NDJSON в JSON Viewer.
• MFSA 2026-82 закрывает уязвимости высокого уровня, среди них CVE-2026-84119, 84143 и 84144, и повышение привилегий в Firefox для Android.
• Минимальную версию iOS для блокировщика Mozilla не назвала; доступность функции по регионам анонс не описывает.

Почему блокировщик пришлось встраивать

Apple разрешает сторонним браузерам блокировать контент только через свой механизм Content Blocker: приложение отдаёт WebKit готовый список правил, а сам движок решает, какие запросы не выполнять. Расширение не может «посмотреть» на страницу и вмешаться в её код, как это делает uBlock Origin на десктопе. Mozilla взяла список EasyList, самый распространённый набор правил для рекламы, и упаковала его в такой блок правил внутри приложения.

Ad Blocker uses Apple's WebKit Content Blocker technology and the EasyList filter list.

Из этой архитектуры следуют ограничения, которые Mozilla перечисляет сама. Реклама, которую сайт отдаёт с собственного домена, может остаться, потому что её не отличить от контента по URL. Реклама в результатах поиска не блокируется. Рекламные ярлыки на стартовой странице самого Firefox к блокировщику не относятся. Включается всё в три касания: Settings, Browsing, Ad Blocker; там же выключается, если сайт перестал работать.

Что Firefox 155 даёт верстальщику

По заметкам для разработчиков на MDN, самое полезное в CSS — функция progress(): она возвращает долю от 0 до 1, показывающую, где значение находится между двумя границами. Раньше такой расчёт делали руками через calc(), теперь адаптивные размеры шрифта и отступов записываются короче. Функция alpha() меняет прозрачность цвета без переписывания его в rgb(), а attr() отныне работает в любом свойстве, а не только в content.

В JavaScript добавились Promise.allKeyed() и Promise.allSettledKeyed(): они принимают объект с промисами и возвращают объект с теми же ключами, так что не нужно сопоставлять результаты по индексам массива. Свойство font-width заменило font-stretch, старое имя оставлено как псевдоним. Если импорт модуля упал из-за временной ошибки сервера, повторный импорт теперь может выполниться успешно; это касается JS, JSON, CSS и текстовых модулей. В сетевом стеке появилось согласование QUIC version 2 для HTTP/3, а JSON Viewer в DevTools научился читать NDJSON построчно.

Для автотестов: в WebDriver BiDi исправлены перезагрузка фреймов, подписки и конфликт с DevTools, в WebRTC добавлена поддержка двухбайтовых RTP-заголовков с идентификаторами от 15 и новые поля статистики. Перед использованием progress() и alpha() в проде стоит сверить поддержку в Chrome и Safari на caniuse: MDN описывает только Firefox.

Почему обновиться сегодня

Бюллетень MFSA 2026-82 сопровождает релиз набором исправлений. CVE-2026-84119 (выход из песочницы через use-after-free в навигации DOM), CVE-2026-84143 и CVE-2026-84144 помечены как уязвимости высокого уровня, CVE-2026-84142 объединяет внутренне найденные ошибки памяти умеренного уровня. Отдельно для Firefox на Android бюллетень называет повышение привилегий (CVE-2026-84117, высокий уровень) и раскрытие информации через WebExtensions (CVE-2026-84127, умеренный уровень). Обновление на 155 закрывает всё это разом; на десктопе и Android оно важнее новых функций.

Что дальше

Mozilla объясняет встроенный блокировщик ограничениями расширений на iOS и формулирует их как «недоступны таким же образом», а не «невозможны навсегда»: в ЕС и Японии Apple уже допускает альтернативные движки, и если Firefox на iOS когда-нибудь перейдёт на Gecko, вопрос с расширениями встанет заново. Пока же блокировщик работает ровно в тех пределах, которые задаёт Content Blocker API.

Источники: Introducing Ad Blocker for Firefox on iOS (Mozilla), Firefox 155 for developers (MDN), Mozilla Foundation Security Advisory 2026-82

Изображение на обложке: Mozilla

На первый взгляд кнопка «наверх» — задача на пять минут. Добавил position: fixed, обработчик window.scrollTo() — готово.

Но стоит этой кнопке появиться в живом проекте, как выясняется, что она пересекается с cookie-баннером, мешает чату поддержки, выглядит иначе в мобильной версии, не дружит со строгим CSP или пропадает из Django Admin.

В итоге маленькая UI-деталь начинает обрастать условиями. Я решил собрать их в отдельный Django-пакет — django-scroll-to-top

Когда трёх строк JavaScript достаточно

Для небольшого сайта, где нет сложной верстки, админки, CSP и требований к повторному использованию, самый простой вариант действительно выглядит примерно так:

Это нормальное решение. Не всегда стоит тянуть пакет ради одной кнопки.

Но в реальном Django-проекте быстро появляются дополнительные вопросы:

• когда именно показывать кнопку: после 300 пикселей, одного экрана или только при прокрутке вверх;
• что делать на коротких страницах;
• как не перекрыть cookie-баннер, чат, toast-уведомления или нижнюю мобильную навигацию;
• как дать пользователю закрыть кнопку;
• как не сломать клавиатурную навигацию и режим reduced motion;
• как сделать отдельное оформление для сайта и Django Admin;
• как не заставлять проект добавлять unsafe-inline в Content Security Policy;
• как позволить редактору или администратору изменить цвет, положение и иконку без нового деплоя.

Именно в этот момент «три строки JavaScript» превращаются в отдельный компонент.

Что я хотел получить

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

1. Подключение сайта одной template-тегом.
2. Отдельная поддержка обычных страниц и стандартного Django Admin.
3. Настройка внешнего вида через админку, а не через постоянную правку CSS.
4. Без jQuery, CDN, фронтенд-фреймворка и обязательной сборки.
5. Безопасная работа при строгой CSP.
6. Прогрессивное улучшение: без JavaScript остаётся обычная ссылка в начало страницы.
7. Возможность жить рядом с другими фиксированными элементами интерфейса.

Пакет в итоге хранит обычные настройки установки в settings.py, а визуальное поведение — в базе данных. Это позволяет менять кнопку через Django Admin, публиковать новую версию настроек и при необходимости откатываться на предыдущую. В проекте есть отдельные профили для публичного сайта и Django Admin, а ревизии могут быть черновыми, опубликованными или архивными.

Быстрое подключение

Базовый сценарий начинается с установки:

В settings.py добавляем приложение. Если нужна поддержка стандартной админки, пакет должен идти раньше django.contrib.admin:

Включаем области, где должна работать кнопка:

Для публичной части добавляем URLConf пакета:

А в общий шаблон сайта — один тег:

На стандартном Django Admin ничего дополнительно вставлять не нужно: пакет использует обычный механизм разрешения шаблонов Django. Если же в проекте переопределён admin/base_site.html тег можно добавить вручную в блок footer

Настройка без превращения админки в редактор CSS

Мне не хотелось хранить в базе шаблоны, произвольный CSS или JavaScript. Это неудобно для сопровождения и создаёт лишнюю поверхность для ошибок.

Поэтому визуальная часть собрана из контролируемых вариантов:

• круг, квадрат, скруглённый квадрат или pill;
• заливка solid, outline, soft, ghost, glass или gradient;
• положение в любом углу экрана;
• отдельные размеры для desktop и mobile;
• светлая и тёмная тема;
• встроенные иконки, иконки от разработчика или загружаемые SVG;
• настройки тени, границы, opacity и focus ring.

Что происходит, когда рядом есть cookie-баннер или чат

Нижний правый угол страницы редко бывает свободен. Там часто живут:

• cookie-баннер;
• компактная кнопка после закрытия баннера;
• чат поддержки;
• кнопка обратного звонка;
• мобильная навигация;
• toast-уведомления.

Пакет умеет рассматривать такие элементы как препятствия. Для этого можно пометить элемент атрибутом:

Дальше для кнопки можно выбрать поведение: игнорировать препятствия, сдвинуться вдоль края, попробовать другой угол или скрыться, если безопасного места не осталось.

Для сложных виджетов есть отдельный адаптер: он может отслеживать появление и исчезновение элементов, например компактного launcher после закрытия cookie-баннера. При этом ни cookie-пакет, ни чат не становятся зависимостями django-scroll-to-top

Доступность — не отдельная галочка в конце

У кнопки есть понятное имя для screen reader, поддержка клавиатуры, видимый focus-visible, минимальный размер области нажатия и режим prefers-reduced-motion.

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

Полный независимый аудит WCAG 2.2 AA и тестирование масштабирования 200% и 400% пока находятся в roadmap, поэтому называть компонент полностью сертифицированным по WCAG было бы неправильно. Но структурные требования — клавиатурная доступность, фокус, reduced motion, forced-colors и безопасная работа без JavaScript — уже заложены в компонент и покрываются тестами.

CSP и загружаемые SVG

В корпоративных проектах часто нельзя просто добавить inline-скрипт и включить unsafe-inline ради одной кнопки.

По умолчанию компонент использует same-origin CSS и JavaScript. Для него подходит политика такого вида:

Настраиваемые цвета и размеры отдаются не через inline-стили, а через версионированный stylesheet endpoint. Это позволяет сохранить простой контракт с одним template-тегом и не ослаблять CSP.

Отдельно пришлось подумать о загружаемых SVG. Админ не рендерит исходный файл как есть: SVG проходит санитарную обработку. Скрипты, обработчики событий, внешние ресурсы, встроенные документы и небезопасные namespace отклоняются. Для загружаемых иконок также хранится информация об авторе, источнике и лицензии.

Ревизии, публикация и откат

Одна из самых полезных вещей в пакете — не сама кнопка, а жизненный цикл её настроек.

Можно создать черновик, посмотреть результат в live preview, опубликовать изменения или вернуться к предыдущей версии. Это особенно удобно, когда кнопку настраивает не разработчик, а контент-менеджер или дизайнер.

У ревизий есть три состояния:

• draft — редактируемый черновик;
• published — текущая активная конфигурация;
• archived — сохранённая версия для отката.

Где пакет уместен, а где нет

django-scroll-to-top имеет смысл, когда кнопка нужна в нескольких проектах, должна работать в Django Admin, настраиваться без деплоя или жить в окружении со строгими требованиями к CSP и интерфейсу.

Для лендинга на одну страницу проще и правильнее написать несколько строк самостоятельно. Это будет быстрее, понятнее и дешевле в сопровождении.

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

Сейчас пакет выпущен как beta-версия 0.2.0, требует Python 3.10+ и поддерживает Django 4.2 LTS, 5.x и 6.0. Лицензия — MIT.

Исходный код, документация и примеры использования доступны в GitHub-репозитории проекта.

Пакет опубликован в PyPI под именем django-scroll-to-top.

Обратная связь, баг-репорты и предложения по интеграции с кастомными Django Admin-темами приветствуются в Issues.

В начале июня команда Codrops опубликовала небольшую, но наглядную демонстрацию: галерея фотографий проезжает через вьюпорт, пока каждая картинка медленно кувыркается в трёхмерном пространстве. Идея позаимствована у аниматора Jason Booth, а код выложен на GitHub вместе с пятью готовыми вариациями.

В этой статье разберёмся, как устроен эффект, из чего состоит математика и как быстро повторить его у себя — без WebGL, Canvas и тяжёлых библиотек.

Эффект строится на CSS-свойствах perspective и transform-style: preserve-3d, а анимация крутит rotationX/Y/Z и translateZ по прогрессу скролла.

Для синхронизации с прокруткой используется GSAP ScrollTrigger с параметром scrub: true; плавность даёт библиотека Lenis.

Codrops предлагает пять вариаций: от мягкого волнообразного движения до агрессивного разворота с blur и изменением яркости.

Всего нужно три ингредиента: разметка с фоновыми изображениями, CSS для 3D-контекста и 30—40 строк JS, которые связывают скролл с трансформациями.

Как устроен базовый эффект

В основе лежит простая мысль: каждая картинка — это не плоский прямоугольник, а объект в 3D-пространстве. Пока пользователь скроллит страницу, объект проходит перед «камерой» и меняет ориентацию. Входная точка анимации начинается, когда элемент появляется снизу экрана, а заканчивается, когда уходит вверх.

Для реализации используется связка GSAP + ScrollTrigger. Параметр scrub: true привязывает анимацию напрямую к позиции скролла: чем дальше прокручено, тем сильнее трансформация. Библиотека Lenis отвечает за плавность: без неё колёсико мыши на Windows или трекпад на macOS могут давать рваное движение, и вся магия растворится.

Разметка и CSS

HTML минимален: контейнер .gallery и набор .gallery__item с фоновыми картинками. Главное — обернуть каждый item дополнительным .gallery__item-wrap и задать ему perspective. Именно обёртка создаёт 3D-контекст, внутри которого вращается сама картинка.

Плавный скролл и триггеры

Перед запуском анимации инициализируем Lenis и связываем её с GSAP. Это стандартный «боеприпас» для большинства современных сайтов с анимацией по скроллу.

Математика вращения

Каждой картинке случайно задаётся начальная ориентация по трём осям. Затем GSAP анимирует от этих значений до противоположных, создавая эффект «переворота» на 180°. В обработчике onUpdate вычисляется смещение по оси Z: чем ближе элемент к центру экрана, тем глубже он «погружается» в пространство.

Совет: если вы убираете плавный скролл, протестируйте эффект на мобильном устройстве. Нативный скролл на iOS и Android может дать менее плавную картинку, и тогда имеет смысл оставить Lenis или добавить @media (prefers-reduced-motion) для доступности.

Пять вариаций одной идеи

Codrops не ограничивается одной анимацией: в репозитории пять HTML-файлов, каждый из которых демонстрирует, как одно и то же ядро превращается в разное настроение. Вот краткая карта отличий.

• Вариант 1. Мягкое волнообразное расположение картинок по горизонтали, случайные углы rotationX 70—120° и небольшой зазор по Z (−50 px). Универсальная, спокойная подача.
• Вариант 2. Больший размах по rotationX (240—290°) и усиленная глубина до −300 px. Картинки буквально переворачиваются перед глазами.
• Вариант 3. Триггер вычисляет поворот через cos(progress * π), добавляет сдвиг по Y (yPercent) и фильтры saturate/brightness. Получается «подводное» движение.
• Вариант 4. Акцент на скорости: в обработчике Lenis отслеживается velocity, и чем быстрее скролл, тем сильнее blur и ниже насыщенность. Динамично и спортивно.
• Вариант 5. Агрессивное искажение масштаба: scaleX и scaleY меняются в противофазе, картинки растягиваются и сжимаются, проходя через центр экрана.

Мини-руководство: повторяем у себя

Чтобы не копировать всю демку целиком, можно взять только схему и адаптировать под свой проект. Ниже — самый короткий путь от макета до рабочей анимации.

FAQ

Выводы

3D-анимации по скроллу — это способ сделать обычную галерею запоминающейся без тяжёлых WebGL-сцен. Хватает CSS-свойств perspective и transform-style, пары строк GSAP и библиотеки Lenis для плавности.

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

Пользователь не запоминает интерфейс, который просто красив. Он запоминает тот, который отзывается на его действия.

Источники: оригинальная статья Codrops, демо Rotating On-Scroll Animations и исходный код на GitHub.

• Базовые знания HTML и CSS
• Базовое понимание веб-компонентов
• Установленные Node.js и npm
• Умение работать в терминале на уровне, достаточном для установки пакетов
• Базовые знания конфигурационных файлов и JSON
• Понимание революционной идеи о том, что <button> — это не <div>

Наконец, это довольно длинный пост. Считайте каждый h2 приглашением сделать перерыв на чай и подышать свежим воздухом.

Okayyyyylet’sgo.

Фреймворк-независимые компоненты

Из всех недавних хайпов/пузырей/назовите их как хотите в мире технологий тот, что одновременно волновал и ставил в тупик меня в равной степени, — это бум дизайн-систем. Общая концепция определённо фантастическая, и почти любая команда или проект могут извлечь пользу из какой-либо формы централизованного хранилища дизайнерских решений. Но, как и любой другой бум, он породил много странностей. Люди сошлись на определённых способах восприятия дизайна в «эпоху дизайн-систем», слайды Atomic Design в каждой конференц-презентации стали мемом, а дизайн-токены стали целой личностью для некоторых.

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

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

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

На самом деле, я бы даже сказал, что на момент написания этого поста веб-компоненты — единственно лучший подход к созданию библиотеки компонентов. Они переносимы, используют веб-стандарты, и любой фреймворк, который не является полным бардаком (и многие, которые являются, смотрю на тебя, React), будет поддерживать их либо напрямую, либо с минимальной конфигурацией.

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

Принципы

Сначала рассмотрим несколько принципов. Если они вам близки — читайте дальше; если нет — можете закрыть вкладку, заварить чай и заняться своими делами.

Минимально возможный уровень

Хотя существует масса инструментов, которые превращают компоненты для конкретного фреймворка (давайте будем честны — почти всегда это React) в веб-компоненты, я не думаю, что такой подход соответствует тому, что мы говорим, что хотим от наших библиотек компонентов и паттернов по духу.

Когда мы создаём компоненты и проектируем API компонентов, мы разрабатываем некоторые из самых атомарных элементов дизайн-системы. В таком сценарии, на мой взгляд, есть явная, ощутимая польза от работы максимально близко к платформе доставки. Для веб-продуктов это означает работу непосредственно с веб-стандартами.

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

Максимально простые компоненты

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

Я бы даже сказал, что многие реактивные компоненты — это антипаттерн. Реактивность обычно означает логику, и очень часто это приводит нас в область «бизнес-логики» и общего состояния на уровне контейнера или приложения. Простая реактивность на уровне компонента часто необходима — представьте кнопку, которая показывает спиннер загрузки, пока что-то обрабатывается, и возвращается в исходное состояние, когда всё готово, — но добавление тонн состояний и реактивности в изолированном коде компонента всегда кажется мне красным флагом.

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

Максимально устойчиво к будущему

Устоявшиеся фреймворки со временем становятся устаревшими технологиями. Учитывая всю работу по «переписыванию Angular-проектов на React», на которой некоторые из нас спокойно прожили целых два года, мы должны это понимать. Сам React становится (можно спорить, уже стал) устаревшей технологией, а «переписывание нашего React-приложения на Solid/Svelte» — теперь обычное дело. Я вполне ожидаю, что это будет повторяться до тошноты.

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

Фреймворки тоже по-настоящему замечательны, когда используются правильно. Говоря по опыту, попытка написать состоятельные, реактивные приложения на ванильном HTML, CSS и JS — закаляющая, но в конечном счёте неразумная задача. Однако примитивные компоненты — это не сложные, состоятельные, реактивные веб-приложения. Это маленькие куски атомарного веб-кода, и создавать их со всеми накладными расходами и своеобразиями полноценного фреймворка — это просто приглашение к будущему устареванию.

Создавая непосредственно с помощью веб-стандартов, мы получаем более низкоуровневое понимание того, как работают наши компоненты, встроенную защиту от будущего, избегая модного фреймворка, и по сути более прогрессивную, доступную (или, по крайней мере, более легко делаемую доступной) и нативную для веба библиотеку компонентов.

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

Таким образом, когда вам действительно понадобится переписать приложение на Solid/Svelte, вам хотя бы не придётся переписывать всю библиотеку компонентов вместе с ним.

Принимать решения в коде

Я абсолютно готов стоять насмерт на этой позиции. Инструменты для дизайна — ужасные места для принятия решений по дизайн-системе. Это отчасти потому, насколько оторваны такие инструменты, как Figma, от того, как на самом деле работают дизайн-системы, вплоть до откровенно катастрофического несоответствия словаря и концепций.

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

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

Так же и браузер, но я рискую укрепиться на том самом холме.

Окончательные системные дизайнерские решения должны приниматься в браузере. Токены цвета могут использовать современные цветовые пространства. Токены размеров и отступов должны выражаться в относительных единицах, где это возможно. Почти каждый тип токена может выиграть от какой-либо математики, включая логарифмические шкалы для типографики или программные сдвиги оттенка и светлоты для цветов. API компонентов также следует строить с помощью надёжных, хорошо типизированных определений. Инструменты дизайна могут предложить лишь подобие этих концепций.

Если вы начинаете с Figma — это вполне нормально, но это ужасный источник истины. Воспринимайте свой инструмент дизайна как точный инструмент прототипирования, а не как конечную цель для дизайнерских решений.

Документировать по ходу разработки

Опираясь на последний принцип, если лучшее место для принятия решений — код, то лучшее время для документирования этих решений — фаза сборки, пока они свежи в вашей голове. Разрабатываете props? Ну посмотрите-ка, у вас уже есть прекрасный набор определений типов для этих props, неплохо было бы добавить туда маленький комментарий JSDoc и заняться своими делами.

Мне нравится идти дальше и разворачивать библиотеку компонентов прямо в документирующем фреймворке вроде VitePress, активно создавая человекочитаемую документацию параллельно с разработкой самих компонентов. Это не только в итоге станет «официальной» документацией дизайн-системы, но и позволит проверить, насколько переносимы ваши компоненты.

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

Давайте создадим (и задокументируем)

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

Вот что у нас будет в конце этой статьи:

• Основа для нашей гибридной библиотеки компонентов/документации «всё-в-одном» дизайн-системы
• Стильная, хорошо задокументированная кнопка как веб-компонент
• Развёртываемый сайт документации, который показывает, как замечательна наша кнопка
• Готовая к продакшену библиотека компонентов, которую можно опубликовать в вашем любимом пакетном менеджере

Нам действительно нужно беспокоиться только о двух инструментах: Elena для сборки и распространения нашей библиотеки компонентов и VitePress для создания нашей документации.

Elena

Клей для всего этого проекта — Elena. Фантастическая библиотека от непобедимого Ariel Salminen для создания прогрессивных веб-компонентов. Я не буду углубляться в философию того, что означает «прогрессивный» в этом контексте, потому что это уже исключительно хорошо задокументировано самим Ariel.

Elena — это крошечная библиотека, которая делает Just Enough Abstraction™ поверх стандартных веб-компонентов. Мы получаем такие вещи, как props (отражаемые как пользовательские атрибуты), изолированную реактивность, методы жизненного цикла и даже классные штуки вроде миксинов для компонуемости. Мы не будем углубляться слишком сильно в Elena, но следите за ходом мысли и, если вам понравятся основы, я очень рекомендую погрузиться во всё, что она предлагает. Это круто.

Цитата из документации Elena:

[Elena] берёт на себя межфреймворковую сложность (синхронизация prop/атрибута, делегирование событий, совместимость с фреймворками), чтобы вы могли сосредоточиться на создании компонентов, а не на инфраструктуре.

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

VitePress

Я не буду тратить много времени на VitePress, потому что, честно говоря, это просто самое удобное готовое решение для документации, которое не называется Storybook. Пара npm install — и у нас есть надёжное, основанное на Markdown решение для документации, готовое к работе.

Позже мы сделаем несколько классных штук с VitePress, JSDoc и нашим сгенерированным Elena манифестом пользовательских элементов, что поможет ускорить процесс документирования, но, честно говоря, иметь где-то документировать гораздо важнее, чем то, во что мы документируем.

Структура проекта

Здесь всё может изначально показаться немного странным. Хотя нам нужно собирать и распространять наши компоненты как отдельную библиотеку, нам также нужно их видеть и тестировать. Самый простой способ — это слепить статический сайт и просто свалить все компоненты на одну страницу. Это вполне нормально, и, по сути, я бы поощрил это, если вы просто экспериментируете с Elena, но по причинам, изложенным выше, я считаю, что имеет большой смысл создавать внутри нашей документации.

У нас по сути будет что-то вроде монорепозитория: Elena будет делать своё дело на уровне компонентов, а сам сайт документации будет статически генерироваться с помощью VitePress.

Создание каркаса проекта

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

Для начала создадим папку проекта:

Замените my-ds на любое название, которое хотите дать своему проекту.

Затем инициализируем npm:

Команда npm init -y создаст файл package.json в корне проекта. Эта корневая папка напрямую ничего не будет делать — она просто склеивает наши компоненты и документацию вместе в монорепозитории.

Приведём в порядок наш package.json:

Здесь происходит кое-что, что пока не имеет особого смысла (и даже не будет работать) — это станет понятно чуть позже. Настройка workspaces позволит нам обращаться со сборкой библиотеки компонентов как с пакетом, не публикуя его, а скрипты dev, а также различные watch и build позволят нам отслеживать и собирать либо документацию, либо компоненты (либо оба варианта одновременно с помощью команды dev).

Кстати, давайте установим пару штук:

Это установит concurrently, который позволит нам запускать команду watch Elena и команду dev VitePress одновременно. Мы будем держать её запущенной, пока работаем. Также установится VitePress и его тема по умолчанию. Если хотите заморочиться — можете использовать другую тему.

Настройка VitePress

Настроим документацию. Для начала создадим папку docs:

Затем создайте docs/.vitepress/config.mjs:

Проверьте расширение!Обратите внимание: мы используем .mjs, а не .js — это заставляет Node трактовать файл как ESM. Это необходимо, потому что мы импортируем из vitepress. Вам не обязательно знать, что это значит. Честно говоря, я не уверен, что сам это понимаю. Просто убедитесь, что используете .mjs. Ладно, спасибо.

Здесь мы используем postIsolateStyles, чтобы ограничить область действия встроенных стилей .vp-doc VitePress и не дать им просочиться в наши примеры компонентов. Без этого встроенные стили VitePress могут переопределять стили ваших компонентов (включая инкапсулированные сбросы) из-за того, как Vite внедряет таблицы стилей во время выполнения.

Далее создайте минимальный docs/index.md, чтобы у VitePress была домашняя страница:

Сейчас хороший момент, чтобы проверить, всё ли работает:

Вы должны увидеть очень простой локальный сайт на VitePress! По умолчанию он будет доступен по адресу http://localhost:5173/.

Настройка Elena

Теперь, для MVP нашей дизайн-системы, давайте установим Elena. Мы будем использовать Elena для создания компонентов и в конечном итоге распространять их в виде пакета. Именно здесь некоторые вещи из корневого package.json начинают обретать смысл.

Начнём с создания папки компонентов и инициализации npm для нашего пакета компонентов:

Далее отредактируйте packages/components/package.json:

Затем установите Elena:

Это установит Elena, её бандлер и CLI-инструмент.

Мы будем использовать CLI-инструмент Elena для создания каркаса наших компонентов. По сути, он проведёт нас через создание компонента, позволяя запустить команду, которая генерирует нужную папку и создаёт js- и css-файлы для любого компонента, который мы захотим создать. Подробнее об этом позже!

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

Создайте конфиг Elena по пути packages/components/elena.config.mjs:

Это говорит Elena, где искать наши компоненты (src), куда выводить собранные компоненты (dist) и где искать точку входа нашей библиотеки (src/index.js). Обратите внимание: все эти пути относительны директории packages/components, а не корня проекта. Наши инструменты Elena и библиотека компонентов самодостаточны.

Эта точка входа важна, если мы хотим импортировать все наши веб-компоненты через bundle.js, который генерирует Elena. Пока что создадим пустую.

Создайте packages/components/src/index.js. Пока что он может быть просто пустым или содержать комментарий-заглушку:

По мере создания компонентов мы сможем добавлять соответствующие export в этот файл, чтобы они попадали в наш production-бандл.

Убедитесь, что Elena работает: перейдите в корень проекта и выполните:

К сведениюЕсли вы запускаете это на Mac с Apple Silicon, то, скорее всего, столкнётесь с ошибкой. По моему опыту, это из-за зависимости Elena (lightningcss), которая немного кривая (простите за такую техническую терминологию). Если при попытке сборки вы получаете ошибку 'MODULE_NOT_FOUND', выполните следующее из корня проекта: Code languagebashCopy to clipboard rm -rf node_modules packages/components/node_modules package-lock.json && npm install Это уничтожит папку node_modules и переустановит зависимости, разложив всё по своим местам. Если эта ошибка случилась однажды, то, скорее всего, придётся запускать это каждый раз при установке новой зависимости. Мне жаль. Управление пакетами — как всегда, Очень Приятное Занятие.

И выдохнем…

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

Наша корневая папка по сути просто контейнер, так что особо беспокоиться о ней не стоит.

Наша папка docs — это место, где будет жить всё, связанное с VitePress. В конечном итоге это станет полноценной документацией дизайн-системы, и мы будем использовать её для предпросмотра и документирования наших компонентов по мере их создания.

Наша папка packages/components — это место, где мы будем работать со всем, связанным с компонентами. Папка packages/components/src — это место, где мы будем создавать компоненты, а index.js в ней — точка входа нашей библиотеки, где мы просто будем export'ировать любые компоненты, которые хотим включить в бандл.

Наша папка dist в packages/components — это место, где будут храниться собранная библиотека компонентов и манифест кастомных элементов. Затем мы сможем импортировать отсюда в наш проект VitePress так, будто это установленный пакет.

Однако чтобы дойти до этого, нам нужны какие-то реальные компоненты для распространения.

Создаём наш первый компонент

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

По невероятному стечению обстоятельств ваш собственный веб-мастер Piccalilli, Andy Bell, уже написал великолепную статью о создании компонентов кнопок на стандартном HTML и CSS. Мы будем опираться на эти принципы здесь, с небольшими изменениями, чтобы получить максимум от нашей настройки веб-компонентов.

Статья Andy отлично объясняет почему стоят за многими семантическими и структурными решениями, касающимися самих кнопок, поэтому я не буду углубляться в это слишком сильно. Andy прошёл путь, чтобы мы могли бежать. Какой человек.

Композитные, примитивные и декларативные компоненты

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

Я позволю документации Elena сделать основную работу с этими определениями, но вот основные моменты:

• Композитные компоненты оборачивают и расширяют свой внутренний HTML. Они отлично подходят для таких вещей, как слайдеры, аккордеоны, карточки и многослойные макеты — там, где вы чаще всего позволяете HTML и CSS делать основную работу и расширяете возможности с помощью JS в нужной области. Композитные компоненты также отлично подходят для паттернов, где мы можем захотеть объединить примитивные компоненты и HTML в переиспользуемые «макро» компоненты с определённым поведением. Подумайте о таких вещах, как диалоги, fieldsets и баннеры уведомлений — там, где структура и поведение фиксированы, но содержимое внутри остаётся гибким и определяется потребителем.
• Примитивные компоненты объявляют и рендерят свой собственный HTML и поставляются с собственной функцией render(). Это, вероятно, самые распространённые компоненты, которые мы будем использовать в дизайн-системе — подумайте о таких вещах, как кнопки, поля ввода, индикаторы загрузки, бейджи и т.д.
• Декларативные компоненты — это комбинация обоих типов и могут объединять Light DOM и декларативный Shadow DOM. Если мы не знаем, что нам действительно нужна инкапсуляция с Shadow DOM, мы можем практически игнорировать его для библиотек компонентов. Я не углублялся слишком сильно в это, но мои первые мысли таковы, что декларативные компоненты были бы отличны для полностью инкапсулированных компонентов, таких как веб-редакторы контента или блоки кода с подсветкой синтаксиса/редакторы, где инкапсуляция и изоляция часто критичны.

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

Создаём каркас компонента

Мы будем использовать CLI-помощник Elena для генерации папки и файлов, которые нам нужны для нашего компонента.

Пространства имён компонентов и пользовательские элементыМы используем сугубо учебный префикс my- для нашей кнопки, но зачем вообще нужен префикс? Это возвращает нас к тому, как пользовательские элементы требуют наличия - в имени тега, чтобы избежать конфликтов с нативными HTML-элементами. Если бы у нас был полный контроль, и мы создали компонент <button>, мы бы конфликтовали с настоящим HTML-элементом <button>, и у нас было бы Очень Плохое Время. Поэтому мы просто не можем этого делать — все наши пользовательские элементы должны быть в формате <{prefix}-{component}>.Жёсткого требования, чтобы наши файлы тоже были с дефисом, нет, но лично мне нравится аккуратность, когда имена файлов и папок совпадают с нашим фактическим элементом. Так что выберите префикс и придерживайтесь его. Для моей дизайн-системы Mindful Design я использую префикс md- — так что все мои пользовательские элементы выглядят примерно как <md-button>, <md-card> и т.д. Web Awesome использует wa-. Вы можете использовать всё, что пожелает ваше сердце. Главное — будьте последовательны.

Из папки packages/components выполните:

Затем вам будет предложено выбрать, какие функции и язык вы хотите. Для нашей кнопки нужно выбрать:

• Props
• CSS-переменные
• CSS-инкапсуляция
• Комментарии в коде

Нажмите Enter, затем выберите JavaScript в качестве языка.

Установите выходную директорию в src/. По умолчанию Elena использует src/components/, но нам не нужен такой уровень вложенности.

Это создаст каркас наших файлов с несколькими примерными значениями и комментариями, так что мы не будем смотреть на пустые файлы. Нажмите Enter после выбора функций, языка и директории, и Elena сгенерирует папку my-button с соответствующими JS и CSS файлами. О стилизации мы позаботимся позже, сейчас мы хотим спроектировать API нашего компонента.

Откройте следующий файл:

Здесь происходит много всего для простого boilerplate, но мы разберём каждый раздел по мере продвижения!

Добавление props

Компонентные props позволят нам управлять стилизацией и поведением компонента декларативным образом. Затем мы можем использовать эти props для создания вариантов наших компонентов. Для нашей кнопки давайте упростим и используем следующие props:

• variant: стилевой вариант нашей кнопки, например «primary», «danger»
• disabled: отключена ли кнопка или нет
• href: куда должна вести кнопка, также определяет, будет ли кнопка рендериться как ссылка или как кнопка

Это небольшое подмножество props, которые потребуются кнопке в продакшене, но этого достаточно, чтобы двигаться дальше. Если после этого вы почувствуете себя уверенно, можете вернуться и добавить больше props — size или icon prop были бы отличной отправной точкой!

Давайте добавим эти props в наш компонент кнопки:

Объявление static props позволяет нам определить конечный массив props, которые будет принимать наш компонент. По умолчанию все эти props будут отражаться на нашем отрендеренном компоненте как HTML-атрибуты. Вам почти всегда нужно, чтобы это было так, особенно если вы используете нестандартные атрибуты вроде disabled, download и т.д.

Прямо под этим массивом вы найдёте заготовленные значения props по умолчанию, каждое с небольшим комментарием сверху. Давайте последуем примеру Elena и установим значения по умолчанию для добавленных нами props:

Комментарии над каждым определением — это JSDoc-комментарии. Они могут выглядеть немного непривычно, но позволяют документировать наши компоненты и props и могут служить источником истины для документирования API наших компонентов. Это также даёт нам немного «мягкой типизации» без необходимости использовать TypeScript. Большинство IDE будут подсвечивать или предупреждать вас, если вы установите prop в значение/тип, не указанный в синтаксисе JSDoc.

В приведённом выше примере мы определяем наш prop variant, задаём ему значение по умолчанию «default» и мягко типизируем его с помощью определения @type. В данном случае мы принимаем только одно из четырёх перечисленных значений.

На этом этапе это может показаться немного бессмысленным, но следите за своими JSDoc-комментариями по мере создания компонентов. Мы будем использовать их позже. Пока мы на этом, мы могли бы также задать более точное описание для нашего компонента.

Измените верхний комментарий в следующем файле:

Мы также удалили определения @cssprop из этого комментария. Они были сгенерированы, потому что мы выбрали «CSS Variables» при создании нашего компонента, и позволяют нам раскрыть кастомные свойства, используемые для стилизации наших компонентов. Если вы работаете над темизируемой или headless библиотекой компонентов, вы, возможно, захотите оставить их, в противном случае я предпочитаю пропускать определение этих свойств и не раскрывать их в своей документации.

Давайте взглянем на нашу функцию render():

Если у вас нет тяжёлого случая React Brain, вы, возможно, заметите хотя бы одну из пары проблем: во-первых, button — это не div. Дико, правда? Это не вина Elena, мы просто создали базовый компонент, и div — это, безусловно, самый распространённый HTML-элемент. Нам нужно самим отрендерить правильную, семантическую, доступную разметку.

Во-вторых, мы только что добавили href как prop, а это атрибут a, а не button. Нам нужно условно рендерить либо a, либо button в зависимости от того, установлен ли href.

Условный рендеринг

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

Так что вы будете делать это, нравится нам это или нет, и вам лучше делать это правильно.

Самый чистый подход к этому — абстрагировать наш рендеринг, добавив две новые функции:

Затем мы можем заменить функцию render() нашего компонента:

Супер просто: если href присутствует, это ссылка, если нет — это кнопка. Нам не нужно добавлять новые props, просто используем тот, что у нас уже есть.

Мы используем nothing в этой функции, и если вы попробуете собрать/запустить watch прямо сейчас, вы получите ошибку. Это потому, что nothing — это помощник Elena для безопасного рендеринга, ну, ничего.

Давайте импортируем его в начало нашей кнопки. Отредактируйте первую строку следующего файла:

Теперь давайте соберём нашу библиотеку компонентов, чтобы включить нашу новую кнопку в продакшенный bundle.js. Отредактируйте packages/components/src/index.js:

Затем из корня проекта выполните:

Если повезёт, сборка пройдёт без проблем, и мы наконец-то сможем встроить нашу кнопку в документацию.

Предпросмотр нашей кнопки

На данный момент у нас есть всё необходимое, чтобы отрендерить нашу кнопку и увидеть её на странице. Потребовалось немного настроек, чтобы дойти до этого, но мы сделали это!

Благодаря тому, как наш проект настроен, мы теперь можем подключать наши собранные компоненты так, как будто они являются отдельным пакетом. Нам просто нужно настроить VitePress для импорта бандла, который генерирует Elena, и сказать ему обрабатывать наши импортированные компоненты как веб-компоненты (по умолчанию VitePress ожидает Vue-компоненты).

Создайте docs/.vitepress/theme/index.js:

Это говорит нашей теме VitePress импортировать файлы бандла, которые сгенерировала Elena. @my-ds/components загружается асинхронно, так как это клиентская часть, а VitePress по умолчанию использует серверный рендеринг. @my-ds/components/dist/bundle.css импортируется напрямую в начале нашего файла, потому что это просто старый добрый CSS.

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

Далее обновите docs/.vitepress/config.mjs:

Это немного хакерский способ, но по сути он говорит VitePress рассматривать любой тег с - как пользовательский элемент вместо Vue-компонента. Учитывая, что пользовательские элементы требуют -, чтобы избежать конфликтов с нативными HTML-элементами, этого достаточно для наших целей.

Теперь давайте соберём нашу фактическую документацию по кнопке. Создайте docs/components/button.md:

Это должно дать нам всё необходимое для предпросмотра нашей кнопки! Запустите процесс разработки, если вы ещё этого не сделали:

Это запустит документацию VitePress в режиме разработки и одновременно запустит скрипт watch Elena, давая нам довольно удобный опыт live-reload. Перейдите на http://localhost:5173/components/button.html, и вы должны увидеть свою прекрасную кнопку!

Держите сервер разработки запущеннымКоманда npm run dev запустит ваш dev-сервер документации и будет держать Elena в фоне, отслеживая изменения компонентов. Вы будете получать live reloads всякий раз, когда вносите изменения, и теперь вы можете плавно вносить и тестировать изменения компонентов и документации.

Если вы откроете инспектор браузера и посмотрите на отрендеренную кнопку, вы увидите что-то вроде этого:

Наш хост-элемент <my-button> оборачивает разметку из своей функции render(), и мы имеем наш первый веб-компонент, отрендеренный в браузере! Я знаю, я знаю. Это выглядит совсем не круто, но оно там есть! Давайте придадим ему стиль.

Стилизация нашей кнопки

Если вы дошли до этого места, то, возможно, заметили явное отсутствие дискуссий о дизайн-токенах. Не потому, что они неважны, а потому что управление токенами и их распространение — это крайне объёмная тема, а эта статья и без того получается очень уж длинной. Скорее всего, мы разберём рабочие процессы с токенами в отдельном посте!

Пока что мы будем придерживаться простого подхода и использовать стили с ограниченной областью видимости Elena. Это позволяет нам частично нейтрализовать каскад в CSS и гарантировать, что стили не выйдут за пределы оформления отдельного компонента.

Мы также сделаем кое-что, чего я не рекомендую для production-компонентов, особенно если вы хотите строить темизируемые дизайн-системы, наследующие разумные глобальные стили (спойлер: вы хотите), — а именно, сбросим стили компонента перед применением собственных. В итоге мы получаем компонент, который не пропускает стили наружу (благодаря ограниченной области видимости) и не позволяет глобальным стилям проникать внутрь (благодаря сбросу на уровне компонента).

Стили с ограниченной областью видимости

Откройте следующий файл:

По умолчанию Elena генерирует at-правило @scope для любого создаваемого компонента. Вы не обязаны использовать стили с ограниченной областью видимости. Важно помнить: это всё обычный CSS. Мы не делаем ничего дикого или хрупкого вроде CSS-in-JS, мы просто используем конкретную стандартную возможность CSS. Вы с таким же успехом можете писать неограниченный CSS с пространствами имён и получить в целом те же результаты.

Более того, если вам нужно поддерживать браузеры, которые не поддерживают @scope, то использование пространств имён может быть тем самым подходом, который вам нужен. Для этого примера (и для моей собственной production-работы) меня вполне устраивает @scope — я считаю его гораздо более чистым способом стилизации компонентов.

Поскольку при создании компонента мы выбрали «CSS Encapsulation», вы видите, что Elena сгенерировала следующее:

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

Примечание об инкапсулированном сбросеИспользование all: unset и display: revert сбросит любые стили, определённые до тех пор, пока эти правила не встретятся. Это не предотвратит применение дальнейших неограниченных стилей в файлах или тегах

Что такое поля форм

Поля форм — это интерактивные элементы HTML, через которые пользователь взаимодействует с веб-страницей. Браузер отображает их по-разному в зависимости от типа: для email показывает клавиатуру с символом @, для даты — календарь, для файла — диалог выбора документа.

Главное правило: под каждую задачу существует своё поле. Использовать универсальный <input type="text"> везде — значит лишать пользователя встроенных удобств браузера.

{'id': 'a94adbf9d2', 'data': {'text': 'Правильный тип input — залог удобства: браузер сам подставит нужную клавиатуру и проверит формат.'}, 'type': 'paragraph'}

{'id': 'd3748dda0e', 'data': {'text': 'Label обязателен для каждого поля: связывайте его через атрибут for с id поля.'}, 'type': 'paragraph'}

{'id': 'c924682827', 'data': {'text': 'Группируйте связанные поля в <fieldset> с <legend> — это помогает средствам чтения с экрана и структурирует форму.'}, 'type': 'paragraph'}

{'id': '49afc5a27c', 'data': {'text': 'Не забывайте name: без него данные не попадут в запрос при отправке формы.'}, 'type': 'paragraph'}

{'id': 'ab33c8052b', 'data': {'text': 'Используйте <button type="submit"> вместо устаревшего <input type="submit"> — это гибче и семантичнее.'}, 'type': 'paragraph'}

Основные элементы форм

input — универсальный инструмент ввода

Элемент <input> — самый распространённый в формах. Его внешний вид и поведение полностью зависят от атрибута type. Браузер поддерживает свыше 20 типов: от классического text до специализированных date, tel, range и даже color.

Когда вы выбираете конкретный тип, браузер берёт на себя три задачи: отображает подходящий интерфейс, показывает оптимальную экранную клавиатуру на мобильных устройствах и применяет встроенную проверку. Например, type="email" проверит наличие символа @ до отправки на сервер.

Вот типы input, которые стоит знать каждому фронтенд-разработчику:

• text — текстовая строка, базовый тип.
• email — проверяет наличие @ и домена, показывает email-клавиатуру.
• tel — цифровая клавиатура на мобильных устройствах.
• number — ограничивает ввод числами, добавляет стрелки.
• date — нативный календарь браузера.
• checkbox и radio — выбор одного или нескольких вариантов.
• file — загрузка файлов с нативным диалогом выбора.
• range — ползунок для выбора значения из диапазона.
• color — нативный выбор цвета.
• search — поле поиска с кнопкой очистки.

Атрибут required делает поле обязательным для заполнения, а pattern позволяет задать регулярное выражение для проверки введённых данных без JavaScript.

label — связываем текст с полем

Без подписи поле ввода теряет смысл. Элемент <label> решает эту задачу и одновременно делает форму доступной для пользователей с ограничениями зрения.

Есть два способа связать label с полем. Первый — явный: атрибут for на label должен совпадать с id на input. Второй — вложенный: input размещается внутри label. Оба варианта работают, но явная связь через for гибче: позволяет располагать label и input в разных частях разметки.

Важно:
Клик по label автоматически переводит фокус в связанное поле. Это удобно на десктопе и критично на мобильных устройствах, где площадь касания имеет значение.

textarea — когда одной строки мало

Для длинных текстов — комментариев, отзывов, описаний — используйте <textarea>. В отличие от <input>, он поддерживает переносы строк и растягивается по содержимому. Атрибуты rows и cols задают начальные размеры, а CSS — финальное оформление.

select и datalist — выбор из вариантов

Когда нужно предложить пользователю готовый список вариантов, на помощь приходит <select>. Он отображает выпадающий список, в котором можно выбрать один или несколько пунктов. По умолчанию выбран первый элемент, но через атрибут selected можно задать другой.

Альтернатива — <datalist>. Он работает как автодополнение: пользователь может как выбрать вариант из списка, так и ввести свой собственный текст. Это удобно для полей вроде «профессия» или «название компании», где невозможно предусмотреть все варианты.

fieldset и legend — группируем поля

Формы с десятком полей выглядят как стена текста. Чтобы структурировать их, используйте <fieldset> с обязательным дочерним элементом <legend>. Такая группировка помогает пользователям ориентироваться и критична для средств чтения с экрана: они объявляют legend перед каждым полем в группе.

ARIA-атрибуты для сложных форм

Для скринридеров и пользователей с ограничениями зрения важно не только правильное использование label, но и дополнительные ARIA-атрибуты. Например, aria-required="true" сообщает о необходимости заполнения, а aria-describedby связывает поле с текстом подсказки или сообщения об ошибке.

Атрибут aria-live="polite" на контейнере с ошибками позволяет скринридеру озвучить сообщение без прерывания текущего действия пользователя. Это особенно важно для динамических форм, где ошибки появляются после асинхронной проверки на сервере.

Как отправить форму

Для отправки данных используйте <button type="submit">. Это семантично, стилизуется гибче, чем <input type="submit">, и поддерживает вложенный HTML-контент — например, иконку рядом с текстом.

Важно:
Если у кнопки не указан атрибут type, браузер считает её кнопкой отправки по умолчанию. Чтобы избежать случайной отправки, всегда явно указывайте type="button" для кнопок, которые не должны отправлять форму.

Помимо клика по кнопке, форма отправляется при нажатии клавиши Enter в однострочных полях ввода. В многострочном <textarea> Enter добавляет перенос строки. Это стандартное поведение браузера, которое стоит учитывать при проектировании многошаговых форм: случайная отправка на середине заполнения раздражает пользователей.

Чек-лист: правильная форма за 5 минут

• Каждое поле имеет связанный <label> через for и id.
• Выбран подходящий type для <input> — не везде text.
• У всех полей есть атрибут name, иначе данные не уйдут на сервер.
• Связанные поля объединены в <fieldset> с <legend>.
• Для длинных текстов используется <textarea>, а не многострочный input.
• Кнопка отправки — <button type="submit">, а не устаревший input.
• Форма работает без JavaScript: базовая проверка и отправка происходят на уровне HTML.

Выводы

Поля HTML-форм — это не просто визуальные элементы, а полноценный интерфейс взаимодействия пользователя с вашим приложением. Правильный выбор типов input, связь через label, группировка в fieldset, ARIA-атрибуты и семантичная кнопка отправки — всё это влияет на удобство, доступность и конверсию.

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

Если хотите углубиться в тему — изучите полный курс по формам от Google. Там разбираются проверка данных, оформление, доступность и даже usability-тестирование поведения пользователей при заполнении форм.

Источник: web.dev — Help users enter data in forms

Tailwind обучает системам: reset, цветовая палитра, шкала размеров — всё это переносится в CSS custom properties без зависимостей.

Компонентный подход (один класс — один CSS-файл) резко снижает когнитивную нагрузку: 100 строк компонента — это только 100 строк.

CSS Grid с auto-fit и minmax() создаёт гибкие сетки без единого media query.

В dev-режиме сборщик не нужен: браузер понимает нативные @import и вложенные селекторы. Для production — одна команда esbuild.

Tailwind v2 без сборщика весит 2,8 МБ (270 КБ gzip) в каждом проекте — и это один из аргументов для миграции.

Зачем уходить с Tailwind

Прежде чем разбирать систему, — почему вообще стоит её строить, если Tailwind под рукой.

• Build-система стала обязательной. Tailwind v3+ требует JIT-компилятора. Без сборщика вы застряли на v2 — а это 2,8 МБ CSS (270 КБ gzip) в каждом проекте.
• Смесь стилей неудобна. Когда в одном проекте живут и ванильный CSS, и Tailwind — сопровождение становится болезненным.
• Tailwind ограничивает. grid-template-areas технически работает через arbitrary values, но синтаксис настолько громоздкий, что на практике им никто не пользуется. Container queries, @layer, @scope — туда же.
• Накопленный опыт. После нескольких лет работы ванильный CSS уже не пугает.
• Ценность CSS-экспертизы. Джулия упоминает эссе «Tailwind and the Femininity of CSS»: Tailwind косвенно транслирует идею, что CSS — не настоящее программирование. Она больше не хочет поддерживать этот нарратив.

При этом Tailwind честно обучал хорошим системам. Миграция — не отказ от этих систем, а их присвоение в виде нативного CSS.

Что Tailwind успел дать

Приступая к миграции, Джулия поняла: у неё уже есть многое из нужного. Любая CSS-кодовая база состоит из нескольких слоёв — раскладка, шрифты, цвета, переиспользуемые компоненты. Для каждого нужна система, иначе хаос. Tailwind эти системы давал: reset-стили, цветовую палитру, шкалу размеров шрифтов. Переход — это не изобретение колеса заново, а перенос уже понятых систем в нативный CSS.

Девять аспектов структуры CSS

Как Джулия организует свою CSS-кодовую базу сегодня.

1. Reset-стили

Простейшее решение — скопировать первые ~200 строк Tailwind Preflight из tailwind.css. За годы работы привыкаешь к box-sizing: border-box и line-height: 1.5 как к умолчаниям. Перенос preflight сохраняет привычное поведение без npm-зависимости.

2. Компоненты

Это ядро подхода. Идея та же, что в Vue или React-компонентах — но без JavaScript. Три правила:

• У каждого компонента — уникальный CSS-класс.
• CSS одного компонента никогда не перекрывает стили другого.
• Каждый компонент живёт в собственном CSS-файле.

При редактировании ста строк компонента нужно думать только о ста строках. Нативные вложенные CSS-селекторы (поддерживаются всеми браузерами с 2023 года) делают код компактным:

3. Цвета

Одно правило: все цвета сайта объявляются в colours.css через CSS custom properties — никакого хардкода в компонентах.

4. Размеры шрифтов

Вместо классов text-lg — переменные, взятые из Tailwind. Не нужно помнить, в каких единицах задавать размер (em, px или rem):

5. Утилитарные классы

Небольшой файл для вещей, которые встречаются в разных компонентах — кнопки, .sr-only для скринридеров и т.п. Держится маленьким намеренно.

6. Базовые стили

Стили, применяемые ко всему сайту. Джулия намеренно ограничивает этот файл двумя правилами — и планирует пополнять его снизу вверх, когда паттерн из компонентов повторяется несколько раз:

7. Отступы

Наименее завершённая часть системы. Основной принцип: за внешние отступы отвечает родительский контейнер, а не сами компоненты. Паттерн «owl selector» (или «lobotomized owl» — селектор вида * + *) даёт отступ между любыми соседними дочерними элементами, не трогая первый:

Дополняет это принцип «no outer margin»: компоненты не задают собственные внешние отступы — ими управляет исключительно родитель. Это предотвращает коллизии при вставке компонента в разные контексты.

8. Адаптивный дизайн: больше Grid

Вместо Tailwind-классов вида md:text-xl — гибкие сетки CSS Grid, которые сами адаптируются без брейкпоинтов. auto-fit — директива Grid, которая создаёт столько колонок, сколько умещается в контейнер (может быть 4, 3, 2 или 1 — в зависимости от ширины):

Ещё одна возможность, неудобная в Tailwind, — grid-template-areas (именованные зоны сетки): в Tailwind её можно задать через arbitrary values, но синтаксис настолько громоздкий, что в реальных проектах это нечитаемо. В ванильном CSS это просто:

9. Система сборки: esbuild

В dev-режиме сборщик не нужен совсем: современный CSS поддерживает нативные @import и вложенные селекторы в браузере без препроцессоров.

Для production-бандла Джулия использует esbuild — сборщик на Go, распространяемый как нативный бинарник (без Node.js в runtime), который работает в десятки раз быстрее webpack:

Возможности CSS, которые стоит изучить

В процессе миграции Джулия наткнулась на несколько возможностей CSS, которые пока не использовала:

• @layer — каскадные слои для управления приоритетом стилей без повышения специфичности.
• @scope — ограничение области действия CSS-правил конкретным поддеревом DOM.
• Container queries — медиазапросы относительно размера родительского контейнера, а не viewport.
• Subgrid — вложенные сетки, наследующие треки родительской Grid.

Итог

Главный вывод: Tailwind — это не магия, а набор систем. Reset-стили, цветовая палитра, шкала размеров шрифтов — всё это существует в нативном CSS как custom properties. Компонентный подход решает те же задачи изоляции. CSS Grid делает большинство media queries ненужными. А esbuild заменяет тяжёлый toolchain одним бинарником.

Начать можно с трёх шагов: скопировать Preflight → добавить custom properties для цветов и размеров → разбить стили по файлам-компонентам. Оригинальная статья Джулии Эванс доступна на jvns.ca.

Меня зовут Рамазан, я Frontend-разработчик и энтузиаст, который любит искать свежий взгляд на привычные вещи в Web-разработке.

Думаю, что вы слышали когда-либо про функциональное программирование (далее - ФП). Это парадигма для которой характерно применение чистых функций и сохранение иммутабельности данных. Существует ряд языков, в которых принципы ФП преобладают: Haskell, OCaml и Elixir. Однако и другие языки вроде JavaScript, Python, C++ поддерживают этот подход, хотя только им не ограничиваются.

Но внимательный читатель посмотрит на название и спросит: "Функциональное программирование - это хорошо. А причём здесь Atomic CSS?". Сейчас отвечу! Всё дело в том, что ещё на заре появления атомарного подхода у него существовало и другое название - Functional CSS. Кто-то довольно часто использует его и сейчас, чтобы не путать с одноимёнными терминами. Но почему этот подход к CSS-стилизации называют функциональным?

Именно на этот вопрос я постараюсь ответить в данной статье! Сначала я опишу вам базовые принципы ФП, а затем расскажу про основы Atomic CSS (далее - ACSS), проводя аналогии с функциональным программированием. Кроме того, я постараюсь на простых примерах показать, какие проблемы решаются, если применять Atomic CSS при стилизации. Когда я готовил материалы для этой статьи, я много опирался на этот и на этот доклады. Наконец, хотел заметить, что это перевод моей оригинальной статьи на английском языке — так что можете глянуть и её.

Ну что, держитесь крепче - мы начинаем!

Что нужно знать

Чтобы разобраться в этой статье, все, что вам нужно, - это базовое понимание HTML, CSS и JavaScript. Также в статье имеется несколько примеров, в которых мы будем использовать Atomic CSS фреймворк [mlut](https://mlut.style/), но вам не обязательно знать его синтаксис, потому что я привёл расшифроку его утилит в рукописном CSS.

Базовые принципы ФП

Функциональное программирование - это большая область, в которой написано немало сложных статей и которой посвящен целый научный журнал. Поэтому я в своей статье сосредоточусь на том, чтобы изучить только базовые принципы ФП и провести аналогию с ними в Atomic CSS.

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

Давайте я приведу основные понятия, через которые попытаюсь раскрыть суть данного подхода:

1) Чистые функции;

2) Иммутабельность;

3) Композиция функций.

Чистые функции

Функция называется чистой, если она:

- при одних и тех же входных параметрах возвращает одно и то же значение;

- не имеет побочных эффектов (изменений внешних значений или сущностей).

Приведу для наглядности пару примеров.

Первая функция чистая, ведь, если мы будем вводить одни и те же аргументы, то будем получать один и тот же результат. Кроме того, никакие глобальные переменные эта функция не меняет, а объекты не мутирует.

Вторая функция не попала в понятие чистоты по обоим пунктам. Она меняет внешнюю переменную `s` и использует для вычислений другую внешнюю переменную `c`, которая может меняться.

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

Иммутабельность

Иммутабельность - это принцип, в соответствии с которым объекты данных не должны меняться после создания. Чтобы произвести изменения над данными, необходимо создать новый их экземпляр и работать с ним.

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

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

Здесь мы увидим, что нажатие на кнопку приведёт к изменению состояния задачи и вызовет повторную прорисовку компонента. Однако мы могли бы определить функцию `toggleDone()` иным способом, используя мутации объекта:

При использовании такого обработчика событий эффект не будет достигнут, поскольку ссылка на объект остаётся прежней, несмотря на то что сам объект был изменён.

Композиция функций

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

Здесь мы определили функцию `compose(f1, f2)`, которая возвращает композицию функций, переданных ей в аргументах. Дальше мы используем эту функцию для создания функции `capitalize()`, которая будет как раз делать только первые буквы слов заглавными посредством композиции функций `lower()` и `upperEveryFirst()`. Сначала выполняется первая из них, и она возвращает строку со всеми строчными буквами в аргумент второй функции. Вторая же функция делает первую букву каждого слова заглавной.

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

Как принципы ФП находят отражение в Atomic CSS

Теперь, когда мы узнали немного про функциональное программирование, попробуем ответить на вопрос: "А причём здесь Atomic CSS?". Проведём аналогию между этими подходами на уровне описанных выше принципов.

О том, что такое Atomic CSS

Но сначала уделим немного времени тому, что такое Atomic CSS. Это методология вёрстки, в которой мы используем маленькие атомарные CSS-правила, каждое из которых делает одно действие. Эти классы называют утилитами. Обычно они применяют одно CSS-свойство, но не обязательно одно. Например, во фреймворке [mlut](https://mlut.style/) утилите `Bgc-red` соответствует свойство `background-color: red`, а утилите `-Sz50p` - сразу два свойства `width: 50%` и `height: 50%`.

Современные Atomic CSS фреймворки, типа mlut и Tailwind, внутри используют так называемый JIT-движок. Это компонент, который генерирует CSS на основе только тех утилит, которые вы использовали в разметке.

Чистота

Чистота в CSS определяется тем, какими селекторами, а если конкретнее - классами, задаётся стилизация элементов. В чистом CSS поведение элемента должно определяться исключительно теми классами, которые привязаны к нему в атрибуте `class`. То есть в файле со стилями в идеале не должно быть селекторов вроде `section`, `div > ul`.

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

Во-вторых, нарушается чистота CSS для каждого конкретного элемента. Допустим, мы имеем следующую разметку:

А CSS будет таким:

В итоге мы получим, что первая кнопка окрашивается в красный цвет, а вложенная - в зелёный. На таком примере это кажется довольно безобидным, но это будет приносить неудобства, когда структура проекта сильно разрастётся. И здесь мы видим, что результат работы собственных стилей класса `.greeting` зависит от того, где соответствующий элемент находится. Это аналогично тому, что функция при одних и тех же вводных данных даёт разные результаты в зависимости от того, где вызывается.

Atomic CSS позволяет такого эффекта избежать. В этом подходе в большинстве случаев стили применяются только к тем элементам, для которых прописаны соответствующие классы. Если же необходимо сделать несколько одинаковых элементов, то одна и та же утилита прописывается в атрибут `class` каждого такого элемента.

Аналогичный пример можно переписать на mlut вот так:

Где JIT-движок mlut сгенерирует такие стили:

Здесь мы уже видим, что стили элементов в таком подходе будут зависеть только от классов, которые им приписаны.

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

Иммутабельность

Под иммутабельностью CSS я буду подразумевать то, что стили элементов не переписываются. Иммутабельность в ACSS означает, что утилиты, как правило, не мутируют друг друга. Например, в BEM основные стили задаёт блок или элемент, а модификатор эти стили мутирует. А в других подходах, где используются комбинированные селекторы, это мутирование происходит чаще и менее явно.

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

В этом примере мы видим, что класс `product-card` задаёт красный цвет фона карточки по умолчанию. И, чтобы как-то обозначить выбранную карточку посредством другого цвета фона, нам приходится добавлять класс-модификатор, который изменяет цвет с красного на зелёный. И делает он это посредством переписывания свойства `background-color`, то есть с помощью мутирования стилей блока.

В подходе Atomic CSS эта проблема решается, так как утилиты позволяют задавать CSS-свойства независимо друг от друга и задавать модификации, не прибегая к мутации. Вот так будет выглядеть данный пример, если использовать mlut:

Композиция

В функциональном программировании повсеместно используются композиции функций. В атомарном CSS аналогом композиции функций служит композиция утилит при стилизации элементов. Как в ФП мы посредством последовательного применения множества простых функций получаем сложное поведение, так и в ACSS посредством множества простых утилит мы можем получить нетривиальную стилизацию.

Для примера покажу простой смайлик, который сделан посредством только лишь Atomic CSS:

Так будет выглядеть наш результат:

Таким образом, применяя утилиты одну за другой, мы получили даже небольшой CSS-арт.

Заключение

Подводя итоги, скажу, что Atomic CSS действительно воплощает в себе базовые принципы функционального программирования. Конечно, не буквально, но в том смысле, который актуален для Frontend-разработчиков и верстальщиков. Я был бы рад услышать ваши дополнения и возражения в комментариях - будет интересно их почитать и над ними подумать!

Напоследок скажу: смотрите на привычные вещи свежим взглядом!

И, как обычно, успехов вам в увлекательном пути Frontend-разработки!

• CSS Studio — визуальный WYSIWYG-редактор, который встраивается в ваш dev-сайт через npm-пакет.
• Вы двигаете padding, шрифты, отступы, анимации руками; изменения через MCP-сервер уходят в Claude Code, Cursor или любой другой агент с MCP-поддержкой.
• Агент правит код по месту: классы в Tailwind-проектах, объект стилей в CSS-in-JS, селектор в стайлшитах. Специальной поддержки Tailwind-токенов пока нет — token-режим в планах.
• Цена: $99 за одно место.

Что это и зачем

Сейчас типичный ИИ-воркфлоу для фронтенда выглядит так: вы открываете сайт в браузере, замечаете кривой отступ, идёте в чат агента и пишете «сделай padding у кнопки-подписки на два пикселя меньше и выровняй по базовой линии». Агент угадывает, какой компонент вы имели в виду, промахивается, вы поправляете. Через десять сообщений нужный padding наконец встал куда надо.

CSS Studio заменяет эту итерацию прямым редактированием. Вы добавляете npm-пакет в dev-сборку, запускаете её, в углу страницы появляется панель редактора. Кликаете на элемент, двигаете ползунки или тянете за точки — padding меняется в реальном времени в браузере. Когда результат нравится, нажимаете «Apply» (или включаете auto-apply). В этот момент подключённый ИИ-агент через MCP получает JSON-патч с описанием изменений и дописывает реальные файлы.

То есть вы получаете WYSIWYG-редактор, но результат приземляется в ваш настоящий код. Что с Tailwind — отдельный вопрос. Специальной интеграции с ним пока нет: визуальная панель показывает вычисленные CSS-значения, а агент уже сам догадывается, как их вернуть в исходник, — вслепую, без понимания Tailwind-токенов. Перри пообещал token/strict-режим с распознаванием Tailwind-классов и CSS-переменных, но это пока план. С CSS-in-JS и обычными стайлшитами проще: агент дотягивается до объекта стилей в компоненте или до нужного селектора в файле.

Как это работает технически

Всё завязано на Model Context Protocol — стандарт от Anthropic, который позволяет агентам подключаться к локальным инструментам (файлы, БД, сервисы) как к плагинам, без кастомной интеграции под каждый. CSS Studio поднимает локальный MCP-сервер рядом с вашим dev-сервером (подружиться с Vite получилось сразу, судя по отзыву разработчика mpeg на HN).

В Claude Code или Cursor вы запускаете команду /studio — и агент начинает слушать MCP-сервер. Когда вы в браузере двигаете слайдер padding, CSS Studio стримит агенту JSON вида «компонент такой-то, свойство такое-то, новое значение — вот такое, плюс информация о viewport и URL». Агент видит текущий контекст проекта, находит нужный файл и вносит правку по правилам кодовой базы.

Перри также упоминает, что для низкой задержки MCP-сервер может использовать Claude Channels — малоизвестную фичу Claude Code для стриминга. В обычном режиме агент периодически опрашивает MCP-сервер; Claude Channels снимают эту задержку.

Что умеет

• Стили — padding, margin, цвета, шрифты, тени, бордеры, flex/grid-настройки через визуальные контролы.
• Текст и контент — прямое редактирование содержимого элементов без захода в файлы.
• Лейаут — добавление и удаление элементов, перестановка.
• Анимации — таймлайн-редактор для motion-эффектов (что логично от автора Motion).
• Breakpoints — редактор понимает, в каком брейкпоинте вы сейчас правите; canvas-режим для параллельного просмотра нескольких вьюпортов Перри дорабатывает прямо сейчас.
• Рисование — инструмент для набросков новых блоков на странице, потом отдаёте агенту на реализацию.

Кому полезно

Первый очевидный сценарий — фронтендеры, которые уже сидят на ИИ-агентах для написания кода и устали от словесных описаний CSS-правок. Второй — дизайнеры и продакт-менеджеры, у которых нет доступа к репозиторию, но им нужно быстро подкрутить что-то на лендинге. Раньше они писали тикет, теперь — двигают слайдеры сами, агент пишет изменения в файлы.

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

Что не так

Цена — $99 за одно место, и комьюнити на HN это обсуждает активно. Сравнивают с Figma (около $160 за место) и с Cursor (те же $20 в месяц). Для команды из пяти человек выходит $495 в год. Перри в комментариях пообещал подумать над ценообразованием, а пока рассчитывает на ранних энтузиастов.

Второе — лендинг. Несколько комментаторов заметили, что сайт продукта для дизайна выглядит «как сгенерированный LLM» — слишком много фиолетового, шаблонная композиция, анимации fade-in. Для инструмента, который продаёт дизайн, это, мягко говоря, неловко. Перри признал и пообещал переделать.

Третье — зависимость от ИИ-агента с MCP. Если вы не сидите на Claude Code / Cursor / Windsurf и не планируете, CSS Studio для вас пока бесполезен: он не генерирует код самостоятельно, а только командует вашим агентом. Отдельная боль для российских разработчиков — оплата: Stripe из РФ не работает, нужна зарубежная карта или сервис-посредник. Зато живое демо на сайте cssstudio.ai доступно без регистрации, попробовать можно.

Что это значит

CSS Studio — один из первых публичных примеров того, как MCP превращается в инструмент «человек рисует, агент кодирует». До этого WYSIWYG-редакторы либо жили в отдельной вселенной (как Figma и Webflow), либо редактировали код напрямую, но теряли контекст проекта. MCP даёт третий путь: визуальный фронтенд + реальный агент с доступом к вашей кодовой базе.

Если такой подход взлетит, ждите аналогичных инструментов для других доменов: визуальный редактор схемы базы данных → агент правит миграции, визуальный редактор API → агент правит OpenAPI и генерирует клиент, визуальный редактор Grafana-дашбордов → агент правит Terraform. Базовая механика одна и та же.

Источники: cssstudio.ai, обсуждение на Hacker News.

Поиграть прямо в браузере: cssdoom.wtf — полноценный первый уровень DOOM, целиком на CSS. Chrome или Safari, WASD + мышь.

Ленхер — автор нескольких экспериментальных проектов, включая DOOM на осциллографе 1980-х годов. Новый проект использует координаты из оригинального WAD-файла (формат хранения данных карт DOOM) 1993 года и современные CSS-функции: @property, shape() и clip-path (свойство CSS для обрезки элемента по произвольному контуру) с правилом evenodd (правило заливки SVG-путей: закрашиваются области, ограниченные нечётным числом линий). Исходная статья набрала 306 очков и 67 комментариев на Hacker News, а код опубликован на GitHub.

— CSS умеет считать тригонометрию: ширина стены через hypot(), угол через atan2()

— Камеры в CSS нет — двигается весь мир вокруг игрока через translate3d с инвертированными координатами

— Двери, лифты и снаряды анимируются через CSS transitions и CSS animations без JS animation loop

— Освещение секторов работает через filter: brightness(), наследуемый по каскаду

— @property регистрирует custom properties как числа, что позволяет анимировать их плавно

Как это работает — CSS как 3D-движок

Сцена строится из нескольких тысяч <div>-элементов. Каждый получает сырые координаты из оригинального WAD-файла DOOM в виде CSS custom properties: две пары x/y-координат, высоту пола и потолка. CSS сам вычисляет всё остальное.

Тригонометрия в CSS

Ширина стены — это расстояние между двумя точками, которое вычисляется по теореме Пифагора через функцию hypot(). Угол поворота — это арктангенс, вычисляемый через atan2(). Обе функции добавлены в CSS специально для подобных расчётов.

JavaScript передаёт сырые данные DOOM. CSS считает тригонометрию. Это разделение — ключевой архитектурный принцип проекта.

Движение мира вместо камеры

В CSS нет понятия камеры. Вместо этого используется классический трюк: перемещается весь мир в направлении, противоположном движению игрока. JavaScript задаёт всего четыре custom property — --player-x, --player-y, --player-z и --player-angle. CSS делает остальное:

Обратите внимание на инвертированные знаки: если игрок шагает вперёд — мир сдвигается назад. Если игрок поднимается по лестнице — лестница опускается вниз.

Полы, текстуры и клипы

DOM-элементы по умолчанию вертикальны — существуют в плоскости x/y. Чтобы превратить <div> в пол, достаточно rotateX(90deg) — элемент «ложится» горизонтально.

Сложные формы через clip-path

Секторы DOOM — это произвольные многоугольники: L-образные комнаты, неправильные формы, закруглённые коридоры. Для них используется clip-path с polygon(). Для секторов с отверстиями (колонны, платформы, окна) — clip-path с path() и правилом заливки evenodd.

Однако polygon() работает с процентами, а path() требует координат в пространстве CSS — что нарушает чистоту разделения. Решение нашлось в новой функции shape(), которая поддерживает проценты и evenodd одновременно.

Выравнивание текстур

Два соседних сектора с одинаковой текстурой пола должны бесшовно стыковаться. Поскольку background-image повторяется бесконечно, достаточно выровнять начало паттерна по мировым координатам:

Каждый сектор ссылается на одну и ту же текстурную сетку — независимо от того, где расположен его <div>. В результате переход между секторами выглядит бесшовным.

Анимации — двери, снаряды, спрайты

Прежде чем перейти к деталям — важный термин: billboarding. Это техника, при которой 2D-спрайт всегда повёрнут лицом к камере, независимо от положения игрока. В DOOM все враги, бочки и снаряды — billboarded-элементы.

Двери и лифты на CSS transitions

Открытие двери в DOOM — это поднятие потолка сектора. В CSS все элементы двери группируются в контейнер, а анимация запускается переключением атрибута data-state:

Никакого JS animation loop — достаточно установить атрибут состояния на элементе. CSS transitions берут анимацию на себя.

С лифтами всё сложнее: игрок едет вместе с платформой, поэтому --player-z должен обновляться синхронно с CSS transition. Но --player-z управляется из JavaScript. Поэтому для лифтов JS вынужден использовать функцию cubic ease-in-out (t² * (3 - 2t)), чтобы оставаться в синхронизации с CSS-анимацией — это признанное ограничение текущей архитектуры.

Снаряды на CSS animations

Ракеты и файерболы импов — это billboarded <div>. При создании снаряда JavaScript вычисляет конечную точку и длительность полёта, а CSS анимирует перемещение от точки A к точке B:

Благодаря разделению translate и rotate как отдельных CSS-свойств анимация управляет только позицией, а rotate реагирует на --player-angle — файербол продолжает смотреть на камеру при движении игрока.

Параллельно с CSS-анимацией игровой цикл на JavaScript рассчитывает позицию снаряда тем же линейным методом — для обнаружения столкновений (collision detection). Когда снаряд попадает в стену, пол, игрока или врага, JS удаляет элемент посреди полёта и порождает взрыв.

Спрайты с billboarding и mirroring

Враги в DOOM — 2D-спрайты, которые всегда повёрнуты к камере (billboarding). Оригинальная игра хранит 5 уникальных наборов кадров из 8 ракурсов — ракурсы 6-8 это зеркальные отражения 2-4. CSS воспроизводит это через scaleX(-1):

Анимация ходьбы — это spritesheet (набор кадров анимации в одном изображении) со сдвигом background-position-x через steps(). При атаке или смерти JavaScript меняет data-state, и CSS переключается на другой фрагмент spritesheet.

Одна из проблем: изначально все враги маршировали идеально в ногу — левая нога каждого зомби касалась земли в один и тот же момент. Решение — случайный animation-delay, задаваемый из JavaScript. Когда в браузерах появится CSS-функция random(), этот параметр можно будет перенести целиком в CSS.

Освещение и @property

DOOM хранит уровень освещённости для каждого сектора. В CSS это реализовано через custom property --light на контейнере сектора:

Каскад CSS идеально подходит для этого: все стены, полы и спрайты в тёмном секторе автоматически затемняются — без необходимости устанавливать яркость на каждом элементе отдельно. Мерцающие лампы — это @keyframes-анимации переменной --light.

Но анимировать custom properties можно только если они зарегистрированы через @property. Без этого браузер воспринимает их как строки:

Эта регистрация позволяет плавно анимировать --player-z — например, при падении игрока с уступа CSS сам создаёт плавный переход.

Что делает JavaScript, а что CSS

Автор чётко разделил ответственности:

• JavaScript — игровой цикл, состояние игры, коллизии, порождение и удаление DOM-элементов, установка custom properties и data-атрибутов
• CSS — все 3D-трансформации, вычисление геометрии (тригонометрия), анимации дверей и снарядов, освещение, CSS рендеринг спрайтов

По словам Ленхера, game loop на JavaScript — наименее интересная часть проекта. Исходный код DOOM на C доступен публично уже много лет, поэтому для портирования он использовал Claude, чтобы сосредоточиться на CSS-рендеринге.

Выводы

Я хотел найти границы того, на что способен браузер. Увидеть, насколько мощным стал современный CSS. И потому что это DOOM. На CSS. Вам правда нужна ещё какая-то причина?

Проект демонстрирует, как далеко продвинулся CSS за 30 лет. Функции вроде hypot(), atan2() и @property превращают каскадные таблицы стилей в полноценный инструмент для 3D-вычислений. Разделение на JS game loop и CSS-рендеринг оказалось не только возможным, но и элегантным.

Исходный код: GitHub. Подробный разбор: CSS is DOOMed.

Как это работает

Эмулятор исполняет реальный машинный код для процессоров Intel 8086. Тактовый генератор построен на CSS-анимациях в сочетании со style container queries, поэтому система работает автономно и не требует от пользователя никакого взаимодействия — программа крутится сама.

Логика реализована благодаря новым возможностям CSS, которые пока доступны только в экспериментальном виде:

• условные операторы if()
• style queries (стилевые запросы контейнера)
• кастомные @function

На странице проекта есть скрипт-тег, но он лишь ускоряет работу тактового генератора. Если отключить JavaScript, эмулятор продолжит работать — просто чуть медленнее и менее стабильно.

Запуск собственных программ

В эмуляторе можно запускать собственные программы. Достаточно написать код на C и скомпилировать его через gcc-ia16 с помощью скрипта из репозитория автора. На выходе — готовый HTML-файл со стилями, внутри которого исполняется ваш бинарник.

По умолчанию эмулятору доступно 1,5 КБ памяти, но этот лимит можно увеличить в конфигурации. Программа загружается по адресу 0x100, предусмотрены специальные адреса ввода-вывода для взаимодействия с «железом» — экранным выводом и клавиатурой.

Ограничения и совместимость

Практического применения у проекта нет — производительность крайне низкая. Зато это отличная демонстрация того, что современный CSS действительно стал тьюринг-полным.

Из-за использования экспериментальных CSS-функций запустить демку пока можно только в браузерах на базе Chromium (Chrome, Edge, Opera и т.д.). Firefox и Safari пока не поддерживают нужные спецификации, хотя все используемые фичи входят в официальный стандарт CSS.

Отдельно автор подчёркивает: проект создан полностью вручную, без использования ИИ. CSS написан в Sublime Text, а для генерации повторяющихся частей кода использовался Python-скрипт.

Попробовать эмулятор можно на сайте проекта, исходный код доступен на GitHub под лицензией GPL-3.0.

Зачем это нужно?

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

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

Руководство построено на небольших примерах, чтобы понять технические детали и сформировать интуитивное понимание работы браузеров.

Чтобы материал оставался кратким и по существу, автор намеренно опустил многие критические детали: разные версии HTTP-протокола, SSL, TLS, нюансы работы DNS и многое другое.

Браузеры работают с URL

Вы можете ввести в адресную строку буквально что угодно. Но под капотом браузеры работают с URL:

• Случайный текст вроде «pizza» будет преобразован в поисковый URL типа https://google.com/search?q=pizza
• Доменное имя вроде example.com будет нормализовано в полный URL: https://example.com

Чтобы увидеть, как это работает на практике, попробуйте ввести «pizza» или «example.com» в адресную строку браузера.

Превращение URL в HTTP-запрос

Когда браузер знает точный URL, который нужно посетить, он может отправить запрос на сервер, чтобы получить ресурс и отобразить его. Браузеры общаются с серверами по протоколу HTTP.

Чтобы понять, как URL переводится в формат HTTP-запроса, рассмотрим пример с полным URL вроде example.com.

HTTP-запросы содержат заголовки в таком формате:

Один из заголовков — это заголовок Host. Он используется для идентификации сервера, на который отправляется запрос: example.com.

Определение адреса сервера

Браузеры не могут отправлять запросы на имена вроде example.com.

Компьютеры общаются с IP-адресами, поэтому браузер сначала обращается к системе DNS, чтобы преобразовать доменное имя в IP-адрес, прежде чем подключиться к серверу и отправить HTTP-запрос.

Например, если вы введёте в терминале команду для разрешения домена, DNS вернёт соответствующий IP-адрес:

Установка TCP-соединения

После того как DNS предоставил браузеру IP-адрес, всё ещё требуется надёжное соединение с сервером. TCP — это протокол, который устанавливает такое соединение до того, как будут отправлены любые HTTP-данные.

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

1. SYN: клиент отправляет свой порядковый номер (seq=1000), чтобы открыть соединение
2. SYN-ACK: сервер подтверждает пакет, добавляя свой порядковый номер (seq=5000) и подтверждая номер клиента, увеличивая его на 1 (ack=1001)
3. ACK: клиент подтверждает номер сервера, увеличивая его на 1 (ack=5001), и соединение готово

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

Когда вы начинаете отправлять пакеты и пытаетесь нарушить работу сети, вы можете увидеть, как TCP справляется с потерями данных и восстанавливает передачу.

HTTP-запросы и ответы

После установки TCP-соединения браузер может отправить HTTP-запрос на сервер.

Представьте, что вы наблюдаете за тем, как HTTP-запрос путешествует к серверу, а HTTP-ответ возвращается в браузер:

БРАУЗЕР (КЛИЕНТ)

СЕРВЕР

Когда приходит HTTP-ответ, браузер читает сырой HTTP-ответ и начинает рендеринг HTML-контента.

Парсинг HTML для построения DOM-дерева

После того как приходит HTTP-ответ, браузер отделяет заголовки от тела и направляет HTML-байты в парсер. Парсер превращает теги вроде <h1> в токены и строит DOM-дерево.

Посмотрите, как HTML-поток парсится в DOM-дерево:

DOM-дерево:

Парсинг происходит потоково и устойчив к ошибкам: браузер начинает строить узлы ещё до того, как документ полностью загружен, и вставляет недостающие теги, чтобы дерево оставалось валидным. Когда появляется тег <script>, парсинг может приостановиться, чтобы выполнить скрипт.

DOM-дерево затем объединяется с CSS, чтобы создать render tree (дерево рендеринга), которое используется для расчёта layout и отрисовки пикселей.

О важности DOM

DOM — это внутренняя модель документа в памяти браузера. Это общий контракт между HTML-парсером, движком CSS-селекторов и средой выполнения JavaScript. Изменения в DOM немедленно влияют на layout, стили и то, с чем пользователи могут взаимодействовать.

DOM обеспечивает всё: от выборки элементов до динамической стилизации и обработки событий. Попробуйте отредактировать JavaScript-код и посмотрите, как меняется DOM:

Редактируемый JavaScript:

Живой DOM:

Layout, Paint и Composite

После того как DOM и CSS готовы, браузер запускает конвейер рендеринга: Layout (reflow) для расчёта размеров и позиций, Paint для заполнения пикселей, затем Composite для сшивки слоёв на GPU.

Не каждое изменение запускает все этапы заново. Изменение цвета обычно требует только перерисовки (repaint), тогда как изменение размеров заставляет пересчитывать layout и paint.

Этапы рендеринга:

1. Layout — пересчёт размеров и позиций
2. Paint — заполнение пикселей в слои
3. Composite — сшивка слоёв на GPU

Пример DOM:

Composite всегда смешивает слои в финальный кадр.

Именно поэтому страницы с большим количеством layout-операций ощущаются медленнее: больше работы нужно выполнить, прежде чем можно будет показать следующий кадр.

Вот и всё! Если вы разобрались со всеми примерами, у вас должна сформироваться чёткая ментальная модель работы браузеров.

Теперь вы понимаете путь от ввода URL в адресную строку до отображения пикселей на экране: разрешение DNS, установку TCP-соединения, отправку HTTP-запросов, парсинг HTML, построение DOM и конвейер рендеринга с этапами Layout, Paint и Composite.

В первой статье про CSS counters мы с вами разобрались, как с ними работать на базовом уровне. Мы изучили основные CSS свойства и функции для работы с ними, а также привели базовые примеры с помощью фреймворка mlut.

В этой статье мы углубим наши познания в области кастомных CSS счётчиков, опираясь на спеки и обзор в MDN. Если конкретнее, то мы изучим принципы наследования счётчиков и их значений, а также разберём парочку примеров. А бонусом мы посмотрим на небольшое расхождение в том, как ведут себя кастомные счётчики в разных браузерах.

Ну что, поехали!

Базово про вложенность

Наивный путь

Думаю, вы хотя бы раз в жизни сталкивались с ситуациями, когда вам приходилось верстать многоуровневые списки. CSS counters позволяют создавать такие списки – давайте научимся этому.

На базовом уровне для этого можно создать новый счётчик с новым именем внутри элемента, где уже задан “родительский счётчик”. Например, если на родительском <ol> мы зададим счётчик parent-counter, то на дочернем `<ol>` можем задать счётчик `child-counter`. Выглядеть это будет так:

А вот такие стили сгенерирует mlut:

А так будет выглядеть результат – в принципе, как мы и ожидали:

Продвинутый путь

Но возможности кастомных счётчиков позволяют уменьшить количество утилит почти вдвое.

Существует такое правило:

Если мы создаём счётчик с каким-то именем (далее – дочерний счётчик или вложенный) на данном элементе, а он наследует счётчик с точно таким же именем от родителя (далее – родительский счётчик), то новый счётчик будет вложен в родительский. Тогда функция counter() будет возвращать значение последнего вложенного счётчика с данным именем, а counters() значения всех вложенных счётчиков с таким именем в области видимости элемента.

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

А результат мы получим абсолютно такой же! Благодаря тому, что мы возпользовались возможностью создавать вложенные счётчики, мы значительно сократили количество атомарных классов. Кроме того, мы уменьшили количество сущностей (счётчиков), которые нам нужно держать в голове при разработке.

Кроме того, мы можем обратить внимание на несколько тонкостей:

– функция counters() действительно отображает значения всех уровней счётчика nested с указанным разделителем;

– свойство `counter-increment` инкрементирует значение наиболее глубоко вложенного счётчика с данным именем, который может видеть наш элемент.

Вложенность и наследование

В этом разделе мы подробно разберём процесс наследования кастомных счётчиков и посмотрим на примерах, как это работает.

Область видимости

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

– все потомки того элемента, в котором этот счётчик был создан;

– все последующие соседи того элемента, в котором счётчик был создан, а также все потомки этих соседей;

– наследование счётчика прерывается на первом элементе-соседе, на котором создаётся счётчик с таким же именем с помощью counter-reset.

Давайте проиллюстрируем эти правила следующим примером:

CSS:

А результат получится такой:

Мы видим, что счётчик inherited был создан на первом элементе <div>, а его дочерние элементы <p> унаследовали его. Также его унаследовали следующие два соседа нашего <div>, но на последнем из них счётчик inherited был переопределён на новый, так что последний <div> из области видимости первого счётчика выпал. Итого, в область видимости счётчика, созданного на первом <div> входят:

– первый и второй элементы <div>;

– дочерние параграфы <p> первого элемента <div>;

– дочерние параграфы второго элемента <div>.

Правила наследования счётчиков

В прошлом пункте мы с вами узнали, что у каждого счётчика есть область видимости – набор элементов, которые видят наш счётчик и могут обращаться к его значению. Оказывается, и у каждого HTML-элемента есть множество счётчиков, к которым этот он может обращаться.

Счётчики могут попасть в это множество двумя путями:

– через механизм наследования;

– посредством создания прямо в этом элементе.

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

1. Текущий элемент наследует любой счётчик, который определён ранее на любом родительском элементе.
2. Предположим, что на предыдущем элементе-соседе есть счётчик. Прежде, чем текущий элемент унаследует этот счётчик от соседа, произойдёт проверка: нет ли уже в текущем элементе счётчика с таким именем? Если такого нет, то копия счётчика из предыдущего элемента унаследуется текущим. Если же есть такой, то этого не произойдёт.

А как же наследуется значение? Здесь немного всё интереснее. Значение счётчика наследуется от самого ближайшего предшествующего элемента в DOM-дереве. А именно, если сами счётчики наследуются только от родителя или соседа, то их значения могут передаваться ещё и от самого последнего дочернего элемента, находящегося внутри предыдущего соседа.

Всё это мы видим на приведённом выше примере. Давайте я ещё раз покажу его:

Здесь:

1. Div 1 не наследует никакие счётчики.
2. Все <p> внутри Div 1 получили в наследство от своего родителя счётчик, который затем на них инкрементируется и отображается;
3. Div 2 унаследовал счётчик как сосед Div 1, а параграфы <p> внутри Div 2 – как дочерние элементы Div 2;
4. Мы также видим, как наследуется значение счётчика на всех этапах. В частности, из интересного стоит отметить, как Div 1 передаёт значение первому вложенному параграфу <p>, тот передаёт следующему, а вот последний параграф <p> внутри Div 1 передаёт значение уже Div 2. И это всё идеально соответствует правилу, которое гласит, что значение счётчика передаётся от последнего предшествующего соседа в DOM-дереве.

Вот и всё, казалось бы: мы разобрали правила наследования и вложения счётчиков, изучили примеры – что же ещё можно здесь рассказать? Но, оказывается, у описанного поведения есть тонкости, которые мы рассмотрим выше.

Тонкости поведения браузеров

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

CSS:

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

1. создаём в первом элементе <div> счётчик curious с начальным значением 1 и с помощью counters() отображаем значения всех счётчиков c этим именем, которые присутствуют в этом элементе (он только один в данном случае);
2. этот же счётчик наследуется дочерними <p> и следующим соседом <div>.
3. на первом вложенном <p> в каждой из <div> создаётся вложенный счётчик с тем же именем curious.

Теперь вопрос, что здесь будет?

Вариант А: получится правильный вложенный список, где нумерация будет идти следующим образом (1 1.1 1.2 2 2.1 2.2). То есть созданный на первом <p> вложенный счётчик будет наследоваться следующим его соседом, как на картинке ниже:

Вариант Б: получится некорректный вложенный список, где нумерация будет такой (1 1.1 2 3 3.1 4). То есть созданный в первом <p> вложенный счётчик не наследуется его соседями. Здесь можно сослаться на то, что счётчик наследуется от предыдущего соседа только тогда, когда на текущем элементе счётчика с таким именем нет. А на втором <p> уже может быть унаследованный от родителя счётчик curious. Тогда результат должен быть таким:

Вариант В: получится вообще не понятно, что. Ну, например такая нумерация (1 1.1 2 3 3.1 3.2). То есть в первой `` вложенный счётчик из первого `` не унаследуется его соседом, а во второй `` – унаследуется. Совершенно маловероятный вариант, но пусть будет.

Ну что, каков ваш ответ?

А ответ таков: вариант А будет работать в браузерах Firefox и Safari, а вариант Б ни в каких браузерах не реализуется! И что же получается, что для Chromium браузеров остаётся самый удивительный вариант В? Да, так и есть, по крайней мере в версии 143 (в версии 144 это уже исправлено). Можете проверить аналогичную иллюстрацию.

Вот такая вот тонкость имеется в поведении CSS Counters в разных браузерах.

Как это можно объяснить?

Safari и Firefox в данном случае идут вразрез со спецификациями, хотя их поведение более интуитивно понятно для пользователей. На самом деле реализоваться должен вариант Б. Дело в том, что от родительского элемента счётчик наследуют все дочерние, а счётчик, созданный на первом дочернем элементе, наследуется соседями только тогда, когда у них нет счётчика с таким именем.

А вот команда Chromium стремилась реализовать вариант Б, но допустила небольшой баг, который уже исправлен в версии 144.

Заключение

Ну вот мы и разобрались в основных концепциях кастомных CSS счётчиков. Надеюсь, эта статья была для вас познавательной и интересной. К счастью, веб-технологии активно развиваются и нам всегда будет, чему учиться. А я постараюсь делать это вместе с вами в будущих статьях!

Успехов вам в увлекательном пути Frontend-разработки!

Меня зовут Рамазан, и в этой статье мы поговорим о применении CSS counters в подходе Atomic CSS. Статей про сами CSS счётчики довольно много в сети, и на MDN есть очень хороший обзор этого функционала, а также существуют спецификации, на которые я буду опираться. Но мало кто рассказывал про использование кастомных счётчиков в Atomic CSS подходе, поэтому в данной серии статей мы поговорим именно об этом. Работать мы будем на фреймворке mlut - одном из немногих, поддерживающих CSS counters и многие другие возможности прямо из коробки.

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

К слову, этот пост является переводом моей оригинальной статьи на Medium — вы можете почитать и её.

Основы

Зачем вообще нужны кастомные CSS счётчики, если у нас есть <ol>? Именно этот вопрос возник у меня, когда я впервые узнал об этом функционале. А применений у него много: вложенные списки, гибкость без потери индексации сайта и даже игры на CSS! Поэтому нам определённо стоит присмотреться к кастомным счётчикам внимательнее.

Работать с кастомными счётчиками мы можем посредством:

- CSS свойств counter-*;

- функций counter() и counters();

- at-правила counter-style.

Жизненный цикл счётчика

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

Так вот:

1) Сначала элемент наследует счётчики от элементов предшественников (это может быть родитель или предшествующий сосед элемента);

2) Потом срабатывает counter-reset и создаётся новый либо вложенный счётчик;

3) Затем работает counter-increment, позволяющий менять значения счётчиков элемента;

4) Потом наступает очередь counter-set, который позволяет вручную задать значение счётчиков элемента;

5) А затем уже вызываются функции counter() и counters().

Далее подробнее поговорим про то, как работают все эти свойства и функции.

counter-reset

Это свойство позволяет создать новый счётчик с указанным именем и начальным значением. А если во множестве счётчиков нашего элемента уже будет счётчик с тем же именем, то будет создан вложенный счётчик. Такое может быть при наследовании счётчиков, но об этом мы поговорим подробно в следующей статье.

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

- элемент, в котором был создан этот счётчик;

- строку с именем счётчика;

- целое число.

Именно с этим набором свойств счётчик затем передаётся потомкам и последующим соседям в процессе наследования.

Давайте инициализируем новый счётчик с помощью утилиты Сor, которой mlut сопоставляет свойство counter-reset:

CSS, сгенерированный движком mlut, будет таким:

Здесь мы задали счётчик с указанием имени paragraphs и начального значения 5. Вообще говоря, мы можем инициализировать сразу несколько счётчиков. Для этого свойство counter-reset может принимать множество аргументов: строки и целые числа. Числа указывать не обязательно - тогда для соответствующего счётчика будет установлено значение по умолчанию 0. А вот так это делается:

Тут будет создано два счётчика: first с начальным значением 0 и second со значением 2. А вот указывать утилиту Cor несколько раз подряд (или в CSS несколько раз использовать counter-reset в одном элементе) для создания нескольких счётчиков нельзя. Тогда сработают каскады CSS и из всех счётчиков выживет только последний указанный.

Функции counter() и counters()

Отлично, мы создали наш первый кастомный счётчик, а его значение теперь можно использовать в дочерних <p>. Но как нам его отобразить в разметке? Как раз для этого и нужны функции counter() и counters(). Чтобы отобразить значения имеющихся у элемента счётчиков, нам достаточно создать псевдо-элемент ::before и передать в его содержимое данную функцию.

У counter() и counters() разное количество возможных аргументов. У первого их всего два: имя счётчика и стиль, который можно взять из значений list-style-type или задать самостоятельно с помощью @counter-style. У counters() их три: имя счётчика, разделитель между вложенными счётчиками (о них в следующей статье) и стиль.

Попробуем применить первую функцию в простейшем примере:

CSS:

Выглядеть это будет примерно вот так:

Здесь мы использовали утилиту Ct-counter(paragraphs,lower-roman);'.';';'_b, чтобы задать содержимое псевдо-элемента. Часть утилиты ;';' здесь нужна для отображения пробела после точки - тут дело в том, как работает движок mlut. Поставить пробел ' ' прямо в утилиту мы не можем, так как пробелами в CSS разделяются классы, и движок воспримет этот символ как конец текущей утилиты. Поэтому для обозначения пробела в этом случае используется символ ;.

В качестве альтернативы мы можем воспользоваться атрибутом data-ml-ct вот так:

CSS:

Тогда mlut возьмёт значение, указанное в атрибуте data-ml-ct и вставит на место mAtt в утилите. Это тоже хорошее решение, но оно лучше подойдёт для более сложных ситуаций. В данном же случае оно будет избыточным, поэтому в дальнейшем мы будем пользоваться первым способом.

counter-increment

Теперь настало время пронумеровать параграфы разными числами! И для этого нам нужно воспользоваться свойством `counter-increment` посредством утилиты `Coi`. Если же счётчика с указанным в аргументе именем нет, то он будет создан автоматически. Конечно, это кажется удобным, но лучше явно задавать создаваемые счётчики.

Синтаксис у этого свойства точно такой же, как у свойства counter-reset. В простейшем случае оно принимает два аргумента: имя счётчика и целое число (и отрицательное тоже), на которое следует изменить значение счётчика. А множественные аргументы могут включать чередующиеся имена счётчиков и числа, на которые эти счётчики нужно изменить. Причём указывать числа необязательно - если число после имени счётчика отсутствует, то его значение изменится на единицу по умолчанию. Применим это к нашему списку:

CSS:

Результат будет выглядеть вот так:

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

CSS:

В итоге на таком элементе наш счётчик увеличится сначала на 2, а затем на единицу прежде, чем значение отобразится на экране.

counter-set

Далее рассмотрим свойство counter-set - для него в mlut есть утилита Cos. Это свойство позволяет нам самим задать, какое будет значение у уже существующих счётчиков в обход нормального хода их инкрементирования. Это CSS свойство умеет вызывать создание нового счётчика, если счётчика с нужным именем нет. Но всегда лучше явно задавать новый счётчик, чтобы избежать неожиданных сайд-эффектов.

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

Давайте применим эту утилиту к последнему параграфу:

CSS:

И вот такой вот кастомный список у нас получится в итоге:

Итоги

Спасибо, что дочитали эту статью до конца! В ней мы разобрали основные и наиболее важные моменты в работе с CSS counters в подходе Atomic CSS. Мы проиллюстрировали работу кастомных счётчиков на простом примере и теперь можем пользоваться ими в своих проектах!

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

Успехов вам в увлекательном пути Frontend-разработки!

Меня зовут Рамазан, и я люблю создавать всякие интересности в вебе.

В этой статье мы посмотрим на тест "Man or boy", который покажет уровень скилла Frontend-разработчика в вёрстке. К слову, название этого теста - отсылка к "Man or boy test", который однажды предложил Дональд Кнут в сфере разработки компиляторов.

В нашей же статье мы покажем три уровня скилла в вёрстке: Man, Boy и промежуточный Teen на всем известном примере. И сейчас это будет вёрстка бургерного меню. Да, то, как сделан этот популярный элемент в интерфейсе, может многое сказать об уровне разработчика!

Думаю, вы много раз уже видели вёрстку бургерного меню в рукописном CSS. Поэтому для разнообразия здесь мы будем пользоваться подходом Atomic CSS, который мне самому очень нравится. А работать мы в нём будем, используя фреймворк mlut. На мой взгляд, это один из самых недооценённых CSS-фреймворков.

Ну что, поехали!

Начальные настройки

Представим, что мы создаём мобильное меню и хотим сделать классическую кнопку для его открытия и закрытия. Обычно роль такой кнопки играет "бургерное меню" (далее также - бургер, меню), состоящее из трёх горизонтальных толстых линий. Примерно вот такого результата мы хотим в итоге добиться:

Но давайте сначала оформим холст, на котором будем создавать наше бургерное меню. Я сделал так, что оно будет находиться в самом центре, чтобы всё было наглядно и красиво. А вы можете настроить всё так, как удобнее вам.

Вот CSS, который будет сгенерирован из этой разметки:

Дальше добавим саму кнопку, в которой и будет находиться наш бургер.

CSS, который добавится:

В принципе на этом базовые настройки можем закончить - этого будет вполне достаточно для дальшейшей работы. Ну а следующие шаги уже определяют, каков уровень скиллов разработчика: Man, Teen или Boy в мире CSS!

Boy

Если разработчик только начинает свой увлекательный путь в мире CSS, то он наверняка не захочет сильно напрягаться над каким-то бургерным меню. Поэтому, чтобы сэкономить время, он просто найдёт Unicode-символ бургерного меню и вставит его прямо в кнопку. Может быть он ещё добавит какие-нибудь стили, чтобы всё выглядело хорошо (по возможности):

CSS:

Простейшее бургерное меню готово! Но этот путь не самый лучший: у нас нет большой свободы в выборе пропорций линий, а также в выборе расстояний между ними. Кроме того, мы и анимировать эти линии не сможем, поэтому вряд ли требовательный заказчик будет удовлетворён этим решением полностью.

Teen

Но если перед нами разработчик, который уже набил кое-какие шишки в вёрстке, ему не захочется иметь дело с неудобствами Unicode-символа. Он поймёт, что в бургерном меню по сути нет ничего сложного. Ведь можно просто сделать три прямоугольника с помощью `div`-ов, нужным образом их расположить, и вуаля - в его руках уже кастомный бургер! К тому же мы можем настроить всё, как только заказчик этого пожелает. Вот, как это делается:

CSS:

То есть мы просто делаем нашу кнопку `flex`-контейнером, а `div`-ы внутри неё равномерно распределяем по пространству. Вот, в принципе, и всё основное об этом способе. Стоит ещё раз подчеркнуть, что он уже позволяет сделать наше меню анимированным - в этом у нас полная свобода.

Man

Но, если перед нами настоящий профессионал, познавший многие тонкости вёрстки, его уже могут не устроить три одинаковых `div`-а в разметке. Они занимают место, а большого смысла не несут. И тогда он может вспомнить, что существуют такие элементы, которые задаются исключительно CSS-стилями - псевдоэлементы `::after` и `::before`. А ему здесь хватит даже одного!

Здесь мы изменили значение `justify-content` для кнопки, а также добавили стили для псевдоэлемента `::after`. Такими будут сгенерированные CSS-стили:

Это работает примерно так:

- мы задаём один псевдоэлемент у нашей кнопки, располагаем его нужным образом;

- у этого псевдоэлемента создаём две тени, расположенные с необходимым интервалом;

- мы задали скрытую подпись у кнопки, потому что настоящий профессионал должен заботиться и о доступности контента.

Вот и всё - не так уж сложно было, не правда ли? Но зато как элегантно! При желании здесь можно делать и хорошие анимации, по-разному двигая тени и окрашивая их.

Итоги

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

Успехов в этом увлекательном пути разработки!

Почему скорость сайта так важна

В мире, где внимание пользователей рассеивается за восемь секунд, быстрая загрузка сайта становится критически важной. Статистика подтверждает: 53% мобильных пользователей покидают сайт, если он грузится дольше 3 секунд, а 70% потребителей отмечают, что скорость влияет на их решение о покупке. Walmart, например, зафиксировал рост конверсий на 2% за каждую секунду сокращения времени загрузки.

Быстрые сайты обеспечивают:

• Долгое пребывание пользователей на сайте;
• Больше просмотров страниц благодаря быстрой навигации;
• Меньше отказов из-за медленных загрузок;
• Выше конверсии и доходов, так как скорость напрямую влияет на покупки;
• Лучшую удовлетворенность и удержание пользователей;
• Рост органического трафика, так как Google учитывает Core Web Vitals в SEO-ранжировании;
• Экономию на CDN и трафике, ведь оптимизированные сайты потребляют меньше данных;
• Повышение качества рекламы в Google Ads, так как быстрые страницы снижают стоимость кликов.

Оптимизация фронтенда — это не просто техническая задача, а способ повысить лояльность пользователей и бизнес-показатели.

Как измерить производительность сайта

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

• Google PageSpeed Insights: быстрый аудит Core Web Vitals с рекомендациями.
• Chrome Lighthouse: встроенный в DevTools инструмент для анализа производительности, SEO и лучших практик.
• WebPageTest: детализированные метрики, визуализация загрузки и советы по оптимизации.
• GTmetrix: анализ скорости загрузки с рекомендациями.
• CrUX в Google Search Console: реальные данные пользовательского опыта (Core Web Vitals) для SEO.

Лабораторные инструменты дают контролируемые метрики, а мониторинг реальных пользователей (через Web Vitals JS, SpeedCurve или Calibre) показывает, как сайт работает в реальных условиях. Это поможет определить приоритеты для оптимизации.

Чек-лист оптимизации фронтенда 2025

Производительность — это командная работа. Бэкенд должен быть масштабируемым, UX-дизайнеры — балансировать визуал и скорость, а фронтенд-разработчики — реализовывать оптимизированный код. Этот чек-лист подходит для любой платформы: от Next.js и Astro до WordPress и PHP. Адаптируйте его под ваш проект, уделяя внимание ключевым метрикам, таким как LCP, CLS и INP (новый показатель, заменивший FID в 2024 году).

HTML

HTML — основа страницы, и его оптимизация ускоряет загрузку и улучшает пользовательский опыт.

• Приоритизируйте критический HTML: доставляйте HTML для верхней части страницы первым, чтобы браузер начал рендеринг. Фреймворки вроде Next.js или Astro с SSR/SSG рендерят HTML на сервере, улучшая First Contentful Paint.
• Удаляйте лишний код: уберите ненужные теги, комментарии и пробелы. Компактный HTML загружается быстрее, особенно в мобильных сетях.
• Включите сжатие: используйте GZIP или Brotli, чтобы уменьшить размер HTML. Большинство серверов и CDN это поддерживают.
• Оптимизируйте загрузку ресурсов: размещайте CSS в <head> для быстрого рендера, а скрипты — перед </body> или с атрибутами async/defer, чтобы не блокировать разбор HTML.
• Минимизируйте iframe: они загружают дополнительные страницы, замедляя сайт. Используйте loading="lazy" для iframe ниже линии сгиба или загружайте их по клику.

Совет: держите DOM компактным. Например, Astro разбивает страницы на «островки», минимизируя гидратацию JavaScript, что ускоряет рендеринг.

CSS

CSS может блокировать рендеринг, если не оптимизирован. Вот как сделать стили быстрее:

• Удаляйте неиспользуемый CSS: используйте PurgeCSS или Chrome DevTools, чтобы убрать мертвый код, особенно в проектах с Tailwind.
• Модуляризуйте стили: разделяйте CSS по страницам или функциям, загружая только необходимое. Критические стили встраивайте в <head>, остальное загружайте асинхронно.
• Избегайте @import: он создает дополнительные запросы и блокирует рендеринг. Используйте <link rel="stylesheet"> или объединяйте CSS при сборке.
• Используйте критический CSS: встраивайте стили для верхней части страницы в HTML, а остальное загружайте позже (например, через media="print"). Инструменты вроде Critical помогут это автоматизировать.
• Минимизируйте CSS: убирайте пробелы и комментарии с помощью Clean-CSS или cssnano.
• Предварительно загружайте ключевые стили: используйте <link rel="preload" as="style"> для важных CSS-файлов.
• Упрощайте селекторы: избегайте сложных вложенных цепочек, чтобы ускорить вычисления стилей. Например, .headline лучше, чем body div#main article h1.
• Применяйте современный CSS: используйте content-visibility: auto для отложенного рендера контента за пределами экрана. Это ускоряет начальную загрузку и снижает потребление памяти.

JavaScript

JavaScript часто замедляет страницы из-за объема и времени выполнения. Оптимизируйте его так:

• Заменяйте JS на HTML/CSS: используйте CSS-анимации, <details> или валидацию форм вместо JS, где возможно.

• Минимизируйте фреймворки: избегайте тяжелых библиотек для простых задач. Проверяйте сторонние скрипты (аналитика, реклама) и удаляйте ненужные.
• Разделяйте код: используйте динамический import() или возможности фреймворков для загрузки JS по необходимости.
• Предварительно загружайте важные скрипты: используйте <link rel="preload" as="script"> для ключевых JS-файлов.
• Применяйте async/defer: добавляйте эти атрибуты к <script>, чтобы не блокировать рендеринг. Defer сохраняет порядок выполнения, async подходит для независимых скриптов.
• Минимизируйте JS: используйте UglifyJS или tree shaking для удаления неиспользуемого кода. Настраивайте сборку для ES-модулей.
• Обновляйте зависимости: новые версии фреймворков (esbuild, SWC) часто быстрее. Используйте Renovate или Dependabot для автоматизации.
• Выбирайте подходящий фреймворк: Next.js с React Server Components или Astro с «островковой» архитектурой сокращают объем JS на клиенте, ускоряя загрузку.

Изображения

Изображения — один из главных факторов загрузки страниц. Оптимизируйте их так:

• Используйте правильный размер: не загружайте изображения больше, чем нужно для отображения. Инструменты вроде ImageMagick или Sharp помогут автоматизировать ресайз.
• Применяйте адаптивные изображения: используйте <img srcset> или <picture> для доставки изображений в зависимости от устройства.
• Сжимайте изображения: используйте ImageOptim, mozJPEG для JPEG, PNGQuant для PNG или SVGO для SVG.
• Предварительно загружайте ключевые изображения: используйте <link rel="preload" as="image"> или fetchpriority="high" для баннеров, влияющих на LCP.
• Откладывайте загрузку: добавляйте loading="lazy" для изображений ниже линии сгиба.
• Используйте WebP/AVIF: эти форматы обеспечивают лучшее сжатие, чем JPEG/PNG. CDN и фреймворки вроде Next.js автоматизируют конвертацию.
• Указывайте размеры: добавляйте width и height или CSS aspect-ratio, чтобы избежать сдвигов макета (CLS).
• Автоматизируйте оптимизацию: используйте Next.js <Image>, Astro или CDN (Cloudinary, Imgix) для автоматической обработки изображений.

Видео

Видео могут быть тяжелее изображений, поэтому требуют особого внимания:

• Сжимайте видео: используйте Handbrake для MP4/WebM, снижая битрейт или разрешение (например, 720p вместо 1080p).
• Используйте современные кодеки: WebM (VP9) или AV1 обеспечивают лучшее сжатие, чем MP4 (H.264).
• Настройте предварительную загрузку: используйте preload="metadata" или none для видео, чтобы не загружать лишние данные.
• Откладывайте загрузку: применяйте loading="lazy" для iframe или загружайте видео по клику/прокрутке.
• Удаляйте ненужное аудио: уберите звуковую дорожку из фоновых видео с помощью FFmpeg.
• Используйте потоковую передачу: для длинных видео применяйте HLS или DASH для адаптивной загрузки.
• Оптимизируйте сторонние видео: используйте облегченные встраивания (например, lite-youtube-embed) для YouTube/Vimeo.

Шрифты

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

• Ограничьте количество шрифтов: используйте минимум семейств и начертаний, чтобы сократить запросы.
• Применяйте WOFF2: этот формат компактнее TTF или WOFF и поддерживается всеми браузерами.
• Предварительно подключайтесь к источникам: используйте <link rel="preconnect"> для Google Fonts или других хостов.
• Используйте font-display: swap: это предотвращает FOIT (невидимый текст) и улучшает пользовательский опыт.
• Избегайте сдвигов макета: подбирайте резервные шрифты с похожими метриками или используйте font-size-adjust.
• Рассмотрите переменные шрифты: один файл заменяет несколько начертаний, снижая объем данных.
• Используйте системные шрифты: они не требуют загрузки и работают мгновенно.

Хостинг и сервер

Конфигурация сервера напрямую влияет на скорость загрузки:

• Используйте HTTPS: это не только безопасно, но и быстрее, благодаря HTTP/2+. Google учитывает HTTPS для SEO.
• Сократите HTTP-запросы: удаляйте ненужные ресурсы и минимизируйте сторонние скрипты.
• Перейдите на HTTP/2 или HTTP/3: HTTP/2 поддерживает мультиплексирование, HTTP/3 (QUIC) ускоряет соединение, особенно на мобильных сетях.
• Используйте CDN: кэшируйте ресурсы на серверах по всему миру для снижения задержек.
• Настройте кэширование: используйте Cache-Control для статических ресурсов и кэширование на уровне приложения.
• Оптимизируйте сервер: держите TTFB ниже 200 мс, оптимизируя запросы к базе данных и вычисления.
• Применяйте статическую генерацию: используйте SSG или ISR (Next.js) для доставки готовых HTML-страниц через CDN.

Быстрые улучшения

Эти небольшие оптимизации дают заметный эффект:

• Избегайте сдвигов макета: резервируйте место для изображений, iframe и динамического контента, чтобы минимизировать CLS.
• Используйте приоритеты: применяйте fetchpriority="high" для ключевых ресурсов и low для некритических.
• Сократите сторонние запросы: откладывайте загрузку аналитики или рекламы до взаимодействия пользователя.
• Используйте один протокол: избегайте смешанного контента (HTTP/HTTPS).
• Настройте кэширование: используйте длительный max-age для статических ресурсов с хэшами в именах файлов.
• Предварительно загружайте страницы: используйте <link rel="prefetch"> для вероятных переходов.
• Применяйте Service Workers: кэшируйте ресурсы для мгновенной загрузки и оффлайн-доступа.

Оптимизация фронтенда — это непрерывный процесс, который требует внимания всей команды. Скорость сайта напрямую влияет на пользовательский опыт, SEO и бизнес-показатели. Используйте этот чек-лист, чтобы выявить слабые места и сократить миллисекунды загрузки. Комбинируйте лабораторные тесты и мониторинг реальных пользователей, чтобы отслеживать прогресс. Сделайте скорость приоритетом — ваши пользователи и бизнес скажут спасибо!

1. TabNine

Если вам важна скорость — TabNine стоит попробовать хотя бы ради этого. Расширение — лёгкий AI-ассистент, который работает как умный автодополнитель кода, непохожий на аналоги вроде Codeium или Copilot.

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

Кому подойдёт: тем, кто хочет ускорить набор кода, но не готов передавать весь проект в облако или открывать чат с Copilot. Поддерживает офлайн-режим и локальное обучение модели.

Плюсы:

• Работает из коробки, не требует тонкой настройки;
• Есть локальная версия — удобно для закрытых проектов;
• Поддерживает большинство языков и фреймворков.

Чем полезен: экономит время на повседневной разработке — особенно когда вы не хотите отвлекаться на документацию или поиск нужной переменной в другом файле.

2. GitLens

GitLens встраивает историю изменений прямо в VSCode — и делает это максимально удобно. Показывает, кто и когда изменил строку, коммит-месседж, хэш, ветку и другие детали. Можно не уходить в консоль или отдельный Git-клиент для поиска информации.

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

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

Плюсы:

• Информация о коммитах отображается прямо в редакторе под строкой;
• Есть таймлайн изменений файла;
• Удобный diff по коммитам, авторам, веткам и даже фрагментам кода.

Чем полезен: помогает быстрее разбираться в чужом коде, искать причины бага или откатывать ошибки. Особенно ценится за то, что делает Git прозрачным и доступным прямо в процессе разработки.

3. Error Lens

Error Lens выводит диагностику ошибок и предупреждений прямо в строке кода. Это расширение превращает сообщения линтеров и компиляторов в наглядные подсказки, позволяя сразу видеть, что пошло не так.

Можно настроить отображение: выделять ошибки цветом, добавлять иконки или даже показывать краткие подсказки с предложениями по исправлению. Поддерживает большинство языков и линтеров, включая ESLint, TypeScript и других.

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

Плюсы:

• Ошибки и предупреждения отображаются прямо в редакторе, рядом со строкой кода;
• Гибкая настройка стилей и уровня детализации сообщений;
• Ускоряет процесс отладки, особенно при работе с большими файлами.

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

4. Path Intellisense

Path Intellisense — одно из тех расширений, которое просто работает и экономит кучу времени. Оно автоматически подсказывает пути к файлам, папкам и модулям в вашем проекте, как только вы начинаете их набирать. Поддерживает абсолютные и относительные пути, учитывает структуру проекта и форматирует предложения так, как это принято в выбранном языке.

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

Кому подойдёт: всем, кто устал вручную прописывать длинные relative-пути или путаться в структуре проекта. Особенно выручает на фронтенде, где модулей десятки и легко ошибиться в названии.

Плюсы:

• Подсказки появляются автоматически при наборе пути;
• Поддерживает большинство языков и фреймворков;
• Учитывает jsconfig.json и tsconfig.json при работе с alias-ами.

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

5. TODO Highlight

TODO Highlight подсвечивает комментарии с задачами (например, TODO, FIXME, NOTE) прямо в коде, делая их заметными и удобными для отслеживания. Расширение помогает не терять важные заметки, которые вы оставляете в коде, и быстро находить места, требующие доработки.

Можно настроить ключевые слова, цвета подсветки и даже добавить свои собственные метки. Работает с любыми языками программирования и интегрируется с панелью задач VSCode для удобного обзора всех TODO в проекте.

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

Плюсы:

• Яркая подсветка TODO-комментариев прямо в редакторе;
• Гибкая настройка ключевых слов и стилей;
• Интеграция с панелью задач для быстрого обзора.

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

6. Prettier – Code formatter

Prettier — расширение, которое автоматически приводит ваш код к единому стилю, избавляет от ручной правки отступов, кавычек и переносов. Оно поддерживает множество языков (JavaScript, TypeScript, CSS, HTML и другие) и интегрируется с линтерами, чтобы ваш код был не только красивым, но и консистентным.

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

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

Плюсы:

• Автоматическое форматирование при сохранении или по хоткеям;
• Поддержка множества языков и кастомных настроек;
• Интеграция с ESLint и другими инструментами для проверки кода.

Чем полезен: убирает рутину ручного форматирования, снижает количество ошибок в стиле кода и помогает сосредоточиться на логике, а не на внешнем виде. Идеально, чтобы ускорить работу и поддерживать чистоту в больших проектах.

7. Live Server

Live Server запускает локальный сервер прямо из VSCode, позволяя просматривать изменения в HTML, CSS и JavaScript в браузере в реальном времени. После сохранения файла страница автоматически обновляется, что исключает необходимость ручного перезапуска или обновления браузера.

Поддерживает кастомные порты, HTTPS, и работает с любыми фронтенд-проектами, от простых HTML-страниц до сложных приложений на React или Vue. Можно настроить, чтобы сервер открывался автоматически при запуске проекта.

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

Плюсы:

• Автоматическое обновление страницы при изменении кода;
• Простая настройка и поддержка HTTPS для безопасного тестирования;
• Лёгкий запуск сервера прямо из редактора.

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

8. Project Manager

Если работаете над несколькими проектами одновременно — это расширение сэкономит вам часы. Project Manager позволяет создавать список избранных проектов и открывать их в один клик, без ручного поиска папок и недавних вкладок.

Можно задать свои алиасы, группировать по папкам, запускать с хоткеев — особенно удобно, если у вас десятки репозиториев на локалке или вы фрилансите на несколько команд.

Кому подойдёт: разработчикам, которые ведут сразу несколько проектов, часто переключаются между ними и устали искать нужный путь через File > Open Folder.

Плюсы:

• Быстрое переключение между проектами через интерфейс или хоткеи;
• Поддержка избранного и тэгов;
• Можно автоматически подтягивать все папки из заданной директории.

Чем полезен: избавляет от рутинных действий при переходе между проектами — особенно когда важно не терять фокус и не сбиваться с рабочего темпа.

9. Code Spell Checker

Code Spell Checker выявляет орфографические ошибки в комментариях, строках и именах переменных прямо в редакторе VSCode. Расширение подчёркивает опечатки волнистой линией и предлагает варианты исправления через Ctrl+. или Cmd+., что позволяет быстро исправить ошибки.

Поддерживает множество ЯП и словари для разных языков (английский, русский, немецкий — с дополнительными расширениями). Можно добавлять свои слова в пользовательский словарь или игнорировать определённые термины, чтобы адаптировать проверку под проект. Работает с camelCase и snake_case, не помечая их как ошибки.

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

Плюсы:

• Мгновенное обнаружение ошибок с подсказками для исправления;
• Гибкая настройка словарей и игнорируемых слов;
• Поддержка технических терминов и различных стилей написания кода.

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

10. REST Client

REST Client позволяет отправлять HTTP-запросы и просматривать ответы непосредственно в VSCode. Достаточно создать файл с расширением .http или .rest, написать запрос в простом текстовом формате, и вы увидите кнопку Send Request для моментального выполнения.

Поддерживает все типы запросов (GET, POST, PUT, DELETE и другие), авторизацию (Basic, OAuth, JWT), переменные окружения и даже генерацию кода на разных языках. Запросы можно сохранять в репозиторий, что удобно для командной работы. Расширение также позволяет использовать динамические переменные по типу {{$timestamp}} или {{$guid}}, всё для гибкой настройки запросов.

Кому подойдёт: тем, кто работает с REST API и хочет тестировать эндпоинты прямо в VSCode, сохранять запросы в проекте и почти не переключаться между инструментами.

Плюсы:

• Простая отправка запросов через .http или .rest файлы с кнопкой Send Request;
• Поддержка переменных окружения и авторизации для сложных API;
• Возможность сохранять запросы в репозитории для совместной работы.

Чем полезен: ускоряет тестирование API, устраняет необходимость в сторонних приложениях. Запросы хранятся рядом с кодом, что упрощает документирование и повторное использование, особенно в проектах, где API-вызовы нужно часто проверять или делиться ими с командой.

А какими расширениями пользуетесь вы? Пишите в комментариях!

Если вы фронтенд-разработчик или только планируете им стать, эта публикация поможет вам сориентироваться в текущей ситуации:

• Узнаете, какие крупные изменения произошли в React, Vue и Angular за последние 5-10 лет.
• Поймёте, стоит ли учить новые фреймворки без виртуального DOM или лучше углубиться в проверенные решения.
• Разберётесь, почему компании продолжают требовать знание React, хотя Solid.js работает быстрее.

Тимлид и разработчики рассказали, как они видят будущее профессии. Объяснили, почему джуну недостаточно знать только JS, какие навыки помогут вам зарабатывать больше и оставаться востребованным специалистом.

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

Как изменились React, Vue и Angular за последние 5-10 лет?

React

До 2019 года разработчики писали объёмные классы с методами жизненного цикла. Они управляли состоянием через setState и передавали данные через пропсы. Потом появились хуки — с тех пор логику помещают в функции, состоянием управляют через useState и useReducer, побочные эффекты контролируют через useEffect.

Серверные компоненты решили проблему первой загрузки. Тяжёлые части приложения обрабатывает сервер и отправляет клиенту уже готовыми. Конкурентный режим разбивает отрисовку на части и расставляет приоритеты для обновлений — интерфейс не виснет, когда нагрузка возрастает.

Vue

Composition API сделал организацию кода более гибкой. Логику теперь группируют по функциональности, а не по типам опций. Ещё реактивность переписали с нуля на прокси-объектах, что ускорило отслеживание изменений.

Компилятор научился оптимизировать шаблоны на этапе сборки. Телепорты решили проблему с модальными окнами и всплывающими подсказками — компоненты отрисовываются в нужном месте DOM-дерева независимо от родителя.

В какую сторону развивается Vue и есть ли ему современные альтернативы

Angular

Каждый компонент сам определяет свои зависимости, поэтому пропала необходимость в модулях. Сигналы заменили зонную детекцию изменений. Теперь Angular точно знает, какие части интерфейса нужно обновлять.

Строгая типизация и декораторы сделали код более предсказуемым. Встроенные инструменты покрывают все потребности крупных проектов: формы с валидацией, маршрутизация с ленивой загрузкой, HTTP-клиент с перехватчиками.

Фреймворки уходят от сложных решений к более простым. Тренд последних лет — делать приложения быстрее для пользователей и удобнее для разработчиков.

Пока большая троица занималась «работой над ошибками», появился запрос на что-то более лёгкое и быстрое.

Фронтенд-фреймворки кажутся избыточными — возвращаемся к ванильному JS?

Тот, кто попробовал фреймворки, никогда не вернется к чистому ванильному JS 🙂 Меняются и развиваются сами фреймворки, но тренда на отказ от них точно нет.

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

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

Фреймворки — это ещё и способ стандартизации разработки в командах.

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

Из-за критики традиционных фреймворков появился новый класс решений. Больше всего ругают VDOM и гидратацию, хотя они считались неотъемлемой частью современных SPA.

Стоит ли переходить на фреймворки без VDOM и гидратации?

Solid.js и Svelte уже несколько лет развивают концепцию тонкой реактивности. В 2021 году появился Qwik, который вообще отказался от гидратации.

SolidJS хорош для аналогов десктопных приложений в браузере — Figma, Miro. Здесь приложение загружается один раз, а потом работает долго и должно быть максимально отзывчивым. Qwik отлично подойдёт, если вы создаёте сайт, куда пользователь приходит за контентом, и важно показать ему этот контент мгновенно.

При этом массового перехода на новые фреймворки пока не происходит. Компании продолжают искать React и Vue разработчиков — проекты на Solid.js и Qwik остаются экспериментальными.

Сами по себе фреймворки мало значат для коммерческой разработки без сторонних библиотек вокруг них. Вот когда критическая масса разработчиков популярных библиотек мигрирует на Qwik, а вместе с ними и сообщество, что-то сдвигается.

Проблема новых фреймворков — это отсутствие экосистемы. React и Vue окружены тысячами готовых библиотек для любых задач. На Solid.js и Qwik большинство решений придётся писать самостоятельно.

Без поддержки сообщества пользователей ни один инструмент не сможет стать массовым. Даже если работаешь в заказной разработке и есть возможность расширить кругозор команды, сомнительно брать на тест инструмент, под который придётся писать до 30% базового функционала.

Команды, которые захотят перейти на новые фреймворки, столкнутся с дополнительными сложностями. Разработчикам придётся учить новые концепции и подходы, а компаниям — тратить время и деньги на переобучение.

У новых фреймворков высокий порог входа: вас ждёт переобучение команды и сложности ручной оптимизации.

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

Во времена DDR/DDR2 было сложно выполнять клиентский рендеринг, а вот серверам ресурсов хватало. Разработчики как могли воплощали подход, который сейчас называется SSR, и возвращали на клиент готовую разметку для компонентов. И никакого тебе VDOM.

Пока новые фреймворки остаются нишевыми инструментами. React, Vue, Angular продолжат доминировать в коммерческой разработке за счёт экосистемы и сообщества.

Как изменится роль фронтенд-разработчика в 2026 году?

В 2020 году джуниор находил работу, если знал HTML, CSS и основы JS. Сегодня работодатели требуют от новичков React или Vue, TypeScript, системы сборки — и это не конец списка. Ещё и вакансий на всех начинающих не хватает, компании сразу ищут мидлов.

Инструменты с искусственным интеллектом — Copilot, ChatGPT, Cursor — ускоряют работу. Они же повышают планку: если джун с помощью ИИ работает как мидл, то мидл должен демонстрировать более глубокие знания. Работодатели стали больше ценить тех, кто понимает принципы работы кода, а не просто копирует готовые решения.

Зная JavaScript и любой инструмент даже не из большой тройки, с использованием AI можно быстро погрузиться в другой нужный инструмент.

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

Какие навыки развивать разработчику, чтобы оставаться востребованным?

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

Учитесь быстро разбираться в новых инструментах вместо того, чтобы зацикливаться на одном фреймворке.

По мне так лучше быть фреймворк-агностиком, нежели фанатом одного, которого легко чем-то обидеть.

Архитектурное мышление отличает «сильного» разработчика:

• Как организовать код, чтобы его легко поддерживать?
• Как спроектировать API, чтобы оно не ломалось при изменениях?
• Как построить систему, которая выдержит рост нагрузки?

Те, кто решают эти вопросы, получают офферы с космическими зарплатами.

Софт-скиллы тоже влияют на карьерный рост:

• Объясните техническую проблему менеджеру простыми словами.
• Проводите код-ревью так, чтобы не обидеть коллегу, но улучшить код.
• Оценивайте сроки и управляйте ожиданиями.
• Аргументируйте выбор технологии.

Когда вы понимаете бизнес, вы становитесь партнёром. Почему мы делаем эту фичу? Как она повлияет на метрики? Какие есть альтернативы? Разработчик, который мыслит категориями бизнеса, становится незаменимым.

Рынок вынуждает постоянно учиться, потому что индустрия меняется каждый год. Кто застревает в зоне комфорта — отстаёт.

Как ChatGPT повлиял на ценность вашего труда? Успеваете подстраиваться под требования рынка, параллельно работать и пробовать новые технологии? Делитесь в комментариях.

Последний рубеж React и Vue

Согласны, что VDOM превратился в бюрократическую прослойку? Изменили состояние в одном месте — получите полный пересчёт дерева компонентов. Фреймворки заставляют загружать всё сразу, тащат багаж служебного кода. И пока этот код не загрузится, пользователь смотрит на белый экран.

SSR ускоряет загрузку страницы: сервер рендерит HTML, пользователь видит контент и пытается с ним взаимодействовать. Но пока JavaScript не загрузится, ничего не заработает.

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

Системные проблемы не исправить очередным хуком или новой версией фреймворка, поэтому появление SolidJS и Qwik — было вопросом времени.

Поиск новых решений — здоровый признак развития фронтенда. В конце концов, и Vue был создан потому, что Эвану Ю не хватало облегченной альтернативы AngularJS. Большая тройка фреймворков решает огромный спектр задач, имеет колоссальную поддержку сообщества, но их нельзя назвать идеальным инструментом на все случаи жизни.

Обзор SolidJS

SolidJS во многом похож на React. Самое интересное — его подход к обновлению интерфейса:

• Отсутствие виртуального DOM — Solid напрямую обновляет только те DOM-узлы, которые действительно изменились.
• Компоненты как функции инициализации — каждый компонент вызывается только один раз для настройки реактивности.
• Сигналы вместо хуков — состояние управляется через createSignal(), который возвращает геттер/сеттер пару.

Например, когда срабатывает счётчик, Solid не перерисовывает весь компонент. Он точечно обновляет только текст внутри <p>, где используется count():

Преимущества SolidJS

👍 Производительность и размер бандла

Благодаря отсутствию виртуального DOM и мелкозернистым обновлениям, приложения работают быстрее аналогов на React.

👍 Простота освоения

Синтаксис SolidJS похож на React. Функциональные компоненты, JSX, концепции вроде Suspense и Error Boundaries — всё это есть в Solid. Изучение основ займёт 1-2 дня, если есть опыт с MobX/effector/RxJS.

👍 Стабильность

Фреймворк находится на стабильной версии 1.x. Это означает отсутствие кардинальных изменений API, в отличие, например, от ситуации со Svelte, где сосуществуют версии 4 и 5 с разными подходами.

👍 Совместимость с React

SolidJS совместим с экосистемой React. Можно переиспользовать дизайн-системы и компоненты в legacy-приложениях.

👍 Удобное управление состоянием

Функционал сигналов и сторов покрывают 90% потребностей в управлении состоянием без необходимости подключать внешние библиотеки.

Минусы SolidJS

👎 Ограниченная экосистема

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

👎 Кривая обучения

Несмотря на знакомый синтаксис, модель реактивности SolidJS отличается от React. Разработчики должны усвоить следующие принципы:

• Избегать условных конструкций непосредственно в компонентах.
• Не деструктурировать пропсы и сторы, чтобы сохранить реактивность.
• Не использовать асинхронный код внутри createEffect.

👎 Проблемы с инструментарием

Возникают сложности с настройкой компилятора в нестандартных окружениях — монорепозиториях, при запуске тестов или интеграции с другими инструментами. DevTools не дотягивает до аналога у React.

👎 SolidStart всё ещё развивается

SSR-решение SolidStart пока не достигло зрелости Next.js или Nuxt. Разработчики сообщают о проблемах с гидратацией и других сложностях при работе с серверным рендерингом.

Обзор Qwik

Qwik — это проект Мишко Хевери (создателя Angular). Идея фреймворка заключается в возможности возобновить работу приложения на клиенте без повторного выполнения кода, который уже был выполнен на сервере.

В Qwik радикально решили проблему гидратации — полностью отказались от неё. Время до интерактивности (TTI) падает в разы. Пользователь может кликать на кнопки сразу после загрузки HTML, без ожидания разогрева всего приложения.

Qwik автоматически разбивает код на мелкие чанки и загружает их только при необходимости. Символ $ в коде указывает на границы ленивой загрузки.

Плюсы Qwik

👍 Мгновенная загрузка

Практически нулевой JavaScript при первоначальной загрузке, следовательно отличные показатели Core Web Vitals.

👍 Автоматическая оптимизация

Оптимизация на уровне компилятора, умная предзагрузка критических ресурсов. Не нужно думать о разделении кода — Qwik делает это автоматически.

👍 Знакомый синтаксис

👍 Спасибо за SEO

Быстрая загрузка улучшает ранжирование за счёт полноценного SSR из коробки.

Минусы Qwik

👎 Молодая экосистема

Ограниченное количество библиотек, мало готовых решений и компонентов. Небольшое сообщество разработчиков (если сравнивать с React/Vue).

👎 Кривая обучения

Придётся изучать новые концепции. Из-за ленивой загрузки усложняется отладка.

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

👎 Сложность интеграции

Трудно интегрировать существующие React/Vue компоненты и ограниченная поддержка сторонних библиотек. Скорее всего, придётся с нуля переписывать код существующего проекта.

Экосистема и готовность к продакшену

Если сравнивать с React, то экосистема — самое слабое место обоих фреймворков.

SolidJS имеет SolidStart — метафреймворк с роутингом, SSR и серверными функциями. Документация качественная, сообщество активное. Большинство React-библиотек можно адаптировать без особых проблем, для популярных UI-китов есть готовые порты.

Qwik развивается в связке с Qwik City, который покрывает типовые задачи веб-разработки. Builder.io активно инвестирует в экосистему, регулярно выходят обновления и новые интеграции.

Риски есть, но они управляемые. Меньший размер сообщества означает меньше готовых решений и ответов на Stack Overflow. Если не боитесь изучать новое, то выигрыш в производительности перевесит неудобства.

Сравнение SolidJS и Qwik

SolidJS повышает производительность обновлений. Если данные меняются часто и непредсказуемо — графики, мониторинги, редакторы — Solid даст максимальную отзывчивость.

Qwik повышает производительность загрузки. Если бизнес зависит от первого впечатления, Qwik обеспечит мгновенный старт.

Медиа, блоги с жёсткими требованиями к TTFB/TTI/INP будут лучше работать на Qwik. Пользователи смогут читать и скроллить без задержки. Интерактив добавляется дозированно — это лучшая стартовая стоимость.

E-commerce, каталоги с SEO и карточками рекомендуется разрабатывать на Qwik. Особенно если на главной тяжёлые модули, а клиенты приходят с поисковиков. Вы выигрываете у конкурентов буквально на первом взаимодействии.

Сложный SPA или дашборд с живыми виджетами и апдейтами будет лучше работать на SolidJS. Точечная реактивность упростит жизнь и снизит цену апдейтов. Solid сияет в проектах, где происходят сотни мелких изменений в секунду.

Solid хорош для аналогов десктопных приложений в браузере — Figma, Miro. Здесь приложение загружается один раз, а потом работает долго и должно быть максимально отзывчивым. Также Solid будет хорош там, где важна плавность анимаций.

Лэндинги, мобильные приложения, визитки — здесь Solid даст сверхбыструю реактивность и облегчит сборку.

Оба фреймворка умеют SSR/SSG и стриминг. Solid снижает стоимость обновлений, Qwik — стоимость старта. Для LCP/TTI/INP в контентных сценариях выигрывает Qwik. Для интенсивных интерактивных сценариев Solid удерживает FPS и снижает CPU.

Оба дружат с серверными платформами. SolidStart имеет адаптеры для Vercel/Netlify, Qwik City — тоже.

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

Немного выводов:

• Solidjs быстрее Qwik при рендеринге. Qwik быстрее Solidjs при загрузке страниц.
• У Solidjs документация лучше, чем у Qwik.
• С нуля код на Qwik писать проще и быстрее, чем на SolidJS.
• Typescript в SolidJS может быть головной болью, в Qwik об этом можно не беспокоиться.

Практические рекомендации по переходу на SolidJS и Qwik

1. Начните с аудита текущих проблем. Посмотрите метрики сайта: сколько времени занимает гидратация? Тормозят ли обновления интерфейса? Где именно проблема — на старте или в процессе работы?
2. Выберите изолированную часть проекта. Возьмите один виджет, одну страницу, один компонент и реализуйте его на новом фреймворке. Измерьте разницу в производительности и удобстве разработки.
3. Если проблема в медленной загрузке — попробуйте Qwik. Соберите прототип лендинга или каталога, включите SSG с resumability и протестируйте на медленном соединении.
4. Если проблема в тормозах интерфейса — попробуйте Solid. Перепишите самый страдальный компонент с частыми обновлениями, уберите мемоизации и посмотрите на результат.

Оба фреймворка собираются через Vite, имеют TypeScript из коробки и хорошую интеграцию с популярными инструментами. Стоимость эксперимента низкая, а потенциальная выгода высокая.

Тенденция отказа от React/Vue

Компании и разработчики не столько отказываются от популярных решений, сколько перестают использовать их для всех задач подряд. Раньше выбора практически не было, и эти фреймворки были молотком, для которого любая задача — гвоздь.

А вы что думаете? Готовы попробовать модные фреймворки SolidJS и Qwik в следующем проекте?

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

Михаил сделал клон страницы Яндекс Поиска, чтобы испробовать все нововведения (Baseline), поддерживаемые в браузерах на 2025 год. У каждой фичи есть веб-платформенные тесты от сообщества — набор кейсов, который проверяет функциональность. Многие из фичей, несмотря на то, что находятся в Baseline 2025 года, не имеют 100% покрытия тестов.

Гриды и сабгриды

За основу Layout страницы взяли гриды, которые находятся в продакшене уже более 8 лет.

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

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

Это позволяет за счёт изменения одного свойства родителя полностью изменить внешний вид элемента — например, сделать иконки разного размера.

Но это ещё не всё. Если мы сверстали карточку в ленте фида, она получилась классной, но тестирование указало нам на проблемы с доступностью. У нас не оказалось тега <article> и тега anchor element <a> для ссылки. Но при добавлении этих тегов вёрстка может поплыть.

Если вы используете сабгриды, всё нормально — будет унаследована сетка родителя, и элемент останется красивым. Это позволяет верстать блок без использования position легко и удобно.

CSS сабгриды появились в 2023 году, но пока их рано использовать, так как в случае, если бразуер пользователя их не поддерживает, у вас может сломаться вся вёрстка. Но пройдёт несколько лет и их можно будет использовать.

Масштабирование

Если у нас страница обладает свойством резиновости: на больших экранах элементы увеличиваются, на маленьких — уменьшаются.

Достигается это за счёт того, что страница свёрстана в em — это величина, которая меняет размер шрифта. А меняя его, мы меняем размер элементов. Раньше это писалось с помощью медиа-выражений, который зависит от min-width, то сейчас есть возможность упростить визуальный синтаксис, добавив интервальный. Он позволяет дописать больше или равно/ меньше или равно — то, что человеку понятнее. Есть post css плагин, который позволяет завезти это поведение для старых браузеров, чтобы всё работало хорошо.

А можно ещё сильнее упростить код, за счёт использования css Nesting из baseline 2023. Поэтому в браузерах новее 2023 года это работает из коробки, а в более старых можно с помощью post css плагина затрансперировать поведение, чтобы всё корректно работало. Тем самым, мы сэкономим немного строк кода.

Но можно пойти ещё дальше в будущее к @function, и в 139 Chrome уже пообещали запустить эту функциональность, но пока доступна только в Chrome Canary браузере (для опытных разработчиков). Позволяет заменить mix in в CSS, SASS для препроцессинга.

Но можно пойти в @property. Поддерживается почти во всех браузерах и позволяет задать кастомное свойство, задать значение по умолчанию и узнать, наследуется ли оно. Здесь мы задаём стандартное значение размера шрифта в em, потому что оно зависит от контекста. По спецификации initial value должно быть постоянным значением, которое не изменяется нигде.

Отказ от SASS — не всё так просто

Если у нас есть полоска сервисов, которые в зависимости от размеров экрана меняют свой размер, то за счёт селектора nth-child мы можем указать: возьми все элементы, начиная с n, кроме all, и примени к нему display: none. А внутри медиа-выражение в зависимости от размера экрана срабатывает по-разному. У медиа-выражений есть явная проблема: если у нас меняется продуктовое поведение, например, размер блока или расположение компонента, то все стили устаревают и медиа-выражения приходится заново переписывать.

Но у нас появились container queries, которые позволяют мэтчиться не на размер страницы, а на размер конкретного элемента — ширину или высоту. Работает с 2023 года, но в продакшен тащить рано — в старых браузерах вёрстка поедет.

Код в примере очень репетативен — мы повторяем одно и тоже много раз.

Можно ли написать вот так?

Но в таком коде есть много проблем, он не работает и никогда не будет работать.

В container queries у нас есть константы, можно использовать calc, чтобы сложить em и пиксели. Но мы не можем там использовать CSS-переменные, браузер их просто проигнорирует. А в nth-child всё ещё хуже: можно использовать только целочисленные значения.

Postcss-Preset-Env

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

Попап сервисов (dialog)

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

В будущем это должно будет работать так:

Но спецификация до сих пор не стабилизирована. Всё, кроме закрытия по парандже работает без JS. Есть полифил (polyfill), но для его работы нужно писать дополнительные селекторы и он не работает без JavaScript, нет понятия Top Layer.

Меню в фиде

В любой элемент страницы, будь то div, span или dialog, нужно добавить интерактивности, чтобы он открывался по клику. В сочетании с micro position меню позиционируется рядом с кодом без единой строчки JS и работает с 2025 года, то есть через пять лет можно будет затащить решение в продакшене.

Прогрессивные улучшения

Пользователи старых браузеров эти улучшения не получают, но их опыт не ухудшается, а это важно.

Сюда входят дискретные анимации для бинарных свойств с помощью allow-discrete. Так значение свойств изменится только к концу анимации.

В сочетании с элементом @starting-style легко добиться красивых анимаций — например, показ и скрытие попапа.

Но оказалось, что прогрессивные улучшения могут навредить пользователям. В 120 и 121 Chrome есть баг, который крашит браузер. Совет — экспериментировать, проверять и замерять.

Scrollbars

Из коробки они могут вылезать за пределы или оказаться неправильного цвета. Но с помощью color-scheme можно задать конкретный цвет блока. Станет лучше, но Scrollbar всё равно может вылезать за пределы элемента.

Появился Scrollbar Styling первого уровня, который позволяет делать красивые скроллбары. Есть набор констант от none до thin, и можно задавать цвет как самого трекера, так и подложки.

Но Scrollbar может всё равно вылезать за пределы страницы, а ещё сложно управлять цветом и расположением элемента.

Чтобы это исправить, можно использовать другое свойство без стабильной спецификации, поддерживаемое во всех браузерах — это webkit-scrollbar.

Правда с его помощью не получится добиться красивого скругления. Но сочетать webkit-scrollbar и scrollbar-styling не выйдет. Либо одно, либо другое.

Можно использовать scrollbar-gutter, чтоб зарезервировать пространство с двух сторон скролла. Но если есть элемент с динамичной высотой, когда элементов может быть то меньше, то больше, то можно избежать прыжка контента.

Рекомендация — всегда добавлять на html-тег это свойство, чтоб проблем не было и интерфейс не оказался сдвинут.

Анимации

Также сейчас можно сдвигать элемент на чистом CSS без использования JS — с помощью animation timeline scroll или animation timeline view.

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

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

Например, в этом случае два элемента будут наплывать друг на друга или произойдёт мерцание.

View Transition API

API крайне мощный, но пока не очень поддерживается.

Итоги

• Переменные уже заменены и их можно использовать $name->var(-name).
• Миксины через 5 лет можно будет заменить mixin->@function.
• Нативный нестинг — хорош!
• Даже функция if() уже доступна в Chrome136.
• Не скоро ещё можно будет отказаться от языков препроцессинга, например, от SASS.
• Область использования var() и env() ограничена.
• CSS не умеет в циклы.
• @function пока слишком рано использовать.
• Но мы можем перейти на CSS + Post CSS. И в Яндекс Поиске пошли по этому пути. При этом во всей кодовой базе mix in использовались всего несколько раз. Поэтому оказалось что функции препроцессора особо не используется. От нестига пришлось мигрировать — но это было не сложно.
• Popover и полифилл есть в baseline 2025, но не все wpt проходят.
• Полифилл имеет ограниченную поддержку.
• Полифилл не работает в браузерах с частичной поддержкой popover.
• Anchor-positioning есть в Inerop 2025 и у него есть полифилл, но спецификация ещё меняется.
• Полифилл не поддерживает множество кейсов — практически никакие, кроме базовых.
• Даже прогрессивные улучшения могут навредить.

Давно пора исползовать:

• Dialog — упрощает написание кода и работает даже в старых браузерах с полифоллом.
• CSS Nesting и CSS — Variables упрощают написание стилей и хорошо работает в связке с PostCSS.
• Grid Layout — упрощает вёрстку сложных сайтов и работает в браузерах 8-летней давности.

Через пять лет вёрстка сильно изменится за счёт новых фичей, которые появляются уже сейчас! А какую из фичей вы желаете больше всего затащить в продакшен?

P.s. Это перевод англоязычного материала, но примеры и принципы легко применимы в ваших проектах.

Введем в курс дела

Когда автор оригинала переделывал сайт, ему понадобилось, чтобы feature image (картинка + подпись) адекватно вела себя в разных контейнерах и при разных размерах экрана.

Что было нужно:

• На маленьких размерах показывать подпись в классическом виде;
• Если контейнер достаточно большой, поворачивать изображение и показывать подпись по кругу в правом нижнем углу.

В демо без container queries это выглядело так:

В реальности, даже если контент уже вмещался в одну строку, фигура оставалась в классическом виде. Можно ли сделать лучше? Спойлер — да!

Сила container queries

Container queries позволяют переключать стили не в зависимости от вьюпорта, а от размера контейнера, в котором находится компонент.

В демо автор выделил четыре разных состояния размеров, чтобы показать, как с помощью container queries плавно поменять вид с «stacked» (вертикальная компоновка) на «circular» (круговая подпись) и обратно.

С media queries это превратилось бы в лес условий:

И всё это легко ломается, если вдруг меняется контент или макет.

Container queries же дают возможность адаптировать вид компонента в зависимости от реальной доступной ширины, без лишних хаков и постоянных правок брейкпоинтов при каждом изменении дизайна.

Как это собрать на практике

1. Оборачиваем компонент в контейнер

Чтобы container queries работали корректно, компонент нужно обернуть в отдельный контейнер и уже относительно него делать запросы. Иначе CSS будет «зацикливаться» и ломаться.

Определяем figure-wrapper как контейнер:

Простой тест: если ширина контейнера больше 240px, добавляем outline к figure.

Ресайзим окно браузера — и видим, как рамка появляется при ширине 240px+:

Условные стили — :has()

По умолчанию компонент в stacked-версии. Если ширины достаточно, переключаемся на circular.

Важно проверить, есть ли у figure — figcaption. Если есть — поворачиваем изображение. Для этого используем селектор :has().

Базовая структура готова, переходим к верстке.

2. Собираем лейаут

Хотя задача простая, есть несколько рабочих подходов.

Опция 1: Полный position:absolute

Здесь и изображение, и подпись выносятся из потока:

Но у такого решения контейнер почти не имеет высоты, так как внутри нет элементов в потоке.

Исправляем, задавая aspect-ratio и ширину контейнеру:

Работает, но автор оригинала не в восторге:

• много position: absolute;
• приходится задавать размеры картинкам через проценты, это ломает масштабирование.

Опция 2: CSS Grid с наложением

Здесь используем CSS Grid, чтобы накладывать изображение и подпись, размещая их в одной ячейке:

Результат:

Далее подгоняем размер изображения, уменьшая его на часть размера подписи:

Перед нами — аккуратный и гибкий лейаут, который хорошо работает и не требует хакинга.

Опция 3: Паддинги вместо абсолютов

В этом варианте position: absolute используется только для подписи, а для картинки задаются паддинги, чтобы она не накладывалась на подпись:

Автор оригинала выбрал этот вариант для своего блога, но отмечает, что и Grid ничуть не хуже — обе опции удобны и управляемы.

Шаг 3. Делаем компонент «жидким»

Чтобы компонент уверенно работал при любой ширине контейнера и экрана, можно добавить fluid CSS. Настраиваем «жидкость» у следующих параметров:

• скругления углов;
• размер шрифта;
• размер подписи;
• паддинги.

Благодаря единицам container query, можно адаптировать размеры под ширину контейнера. В данном случае используется cqw (container query width).

При изменении ширины контейнера меняются скругления, шрифт, паддинги и размер подписи. Так компонент становится адаптивным

Шаг 4. Тестируем в разных контекстах

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

• секция с двумя колонками;
• компонент на всю ширину;
• сетка с тремя колонками;
• сетка с двумя колонками, где первый элемент занимает 66% пространства;
• мобильный размер.

При изменении сеток и ширины компонент продолжает уверенно адаптироваться, не ломая макет.

Вывод

На первый взгляд компонент может показаться простым, но при использовании в разных контекстах появляются дополнительные вызовы. Современный CSS (container queries, :has(), cqw) позволяет элегантно решать такие задачи, избавляясь от хакинга и лишнего JS.

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

Сколько в мире людей с имплантами?

Импланты и протезы становятся всё более привычной частью жизни во всём мире.

Протезы конечностей. По оценке ВОЗ, в протезах и ортезах нуждаются от 35 до 40 миллионов человек по всему миру, но только один из десяти реально получает нужное устройство. В России, по данным Минтруда, протезы конечностей стоят у 200 тысяч человек. Мировой рынок биопротезов уже перевалил за $1,5 млрд и, по прогнозам, вырастет почти вдвое к 2030 году.

Кардиостимуляторы. Более 3 миллионов людей в мире живут с кардиостимуляторами. Каждый год медики устанавливают ещё от 600 тыс. до миллиона новых устройств, и эта цифра стабильно растёт.

Кохлеарные импланты. Более 1 млн человек по всему миру получили кохлеарные импланты — устройства, которые возвращают слух даже тем, кто не слышал с рождения.

Нейроинтерфейсы. Это пока самая «экспериментальная» ниша: в мире насчитывается менее сотни человек с вживленными в мозг чипами, которые считывают сигналы и возвращают некоторые утраченные способности. Среди них — пациенты Neuralink, Synchron, Precision Neuroscience и других лабораторий.

Добровольно чипированные. По оценкам Government Technology, от 50 000 человек на планете добровольно вживили себе микрочипы — чаще всего для замены пропуска, банковской карты или электронного ключа. К примеру, американская компания Three Square Market (32M) в 2017 году вживила 50 сотрудникам NFC-чипы для замены пропуска и кредитки. Аналогично поступила шведская компания BioHax International в отношении 150 сотрудников.

В 2015 году менеджер российской компании Ericsson тоже вживил себе NFC-чип и использует его как визитную карточку. Энтузиаст отмечает, что более современные чипы можно использовать для оплаты в магазине.

Как мы видим, импланты и протезы постепенно перестают быть диковинкой, набирают число носителей и выходят в массы, причем не только в сфере здравохранения, но и для бытовых задач.

Что уже умеют современные импланты?

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

Нолан Арбо: парализованный, который играет в Civilization VI

В 2016 году Нолан Арбо получил тяжёлую травму позвоночника, он оказался парализован.

В январе 2024 года Нолану вживили чип Neuralink, компании Илона Маска. Специальный робот-хирург вскрыл небольшой участок черепа и установил там нейроимплант. Сам чип — это миниатюрный диск чуть меньше монеты, к нему подходят полторы тысячи тонких электродов, которые вводятся прямо в кору мозга. Такой подход даёт максимальную пропускную способность: электроды фиксируют мельчайшие импульсы нейронов и более точно конвертируют их в команды.

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

Чип Neuralink связывает мозг и внешние устройства. Электроды фиксируют сигналы мозга, чип распознаёт их, отправляет по Bluetooth на внешний модуль. Далее алгоритм интерпретирует эти сигналы для каждой команды и выполняет действие: сдвинуть курсор, выбрать приложение, напечатать текст.

Из недостатков: чип нужно заряжать каждый день, зарядка происходит беспроводным способом.

Филип О’Киф: пациент с БАС, который снова в сети

Филип О’Киф — бывший банковский работник, отец семейства. В 2015 году он начал замечать слабость в руках и ногах, ему стало сложно выполнять привычные действия — писать, одеваться, работать за компьютером. Постепенно болезнь прогрессировала: Филип стал терять подвижность, речь — менее чёткая. Врачи поставили диагноз — боковой амиотрофический склероз (БАС), при котором постепенно отмирают моторные нейроны, и человек теряет возможность двигаться и говорить. Через несколько лет Филип оказался почти полностью парализованным.

Вместо сложной нейрохирургии врачи использовали чип Stentrode от американской компании Synchron. Его ввели через вену на шее: чип сам «дошёл» до нужной зоны мозга и раскрылся там в виде сеточки с 16 контактами. Второй модуль вживили под кожу на груди — он передаёт сигналы наружу. Оба устройства связали тонким проводом.

Через несколько дней пациент начал заново писать сообщения, сидеть в соцсетях, отвечать на письма. Недавно другой пользователь с тем же чипом смог работать с гарнитурой Apple Vision Pro. Это стало возможно благодаря интеграции в чип системы управления зрением.

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

Андрей Марсаков — программист с механическим протезом руки

Андрей Марсаков — 26-летний программист из Екатеринбурга. Он родился без правой кисти (врождённая аплазия) и с детства привык делать всё одной рукой. Однажды решил попробовать «другую жизнь» с протезом — чтобы упростить повседневные задачи и получить новый опыт.

В конце 2023 года Андрей получил активный механический протез кисти от компании «Моторика». Ожидание устройства заняло почти полгода, стоимость составила примерно 200 тыс. рублей. Кстати, есть госпрограмма, которая позволяет получить такие протезы.

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

Сначала было сложно разобраться, как с ним работать, но через какое-то время Андрей смог пользоваться протезом. К примеру, он использует шейкер и разливает по бокалам коктейли. Писать код второй рукой тоже можно, но слишком медленно, поэтому работает он по-прежнему одной.

Устройство от Cortical Labs: компьютер из схем и клеток человеческого мозга

В 2025 году австралийский стартап Cortical Labs представил первый коммерческий биокомпьютер CL1. Учёные вырастили в лаборатории 800 тысяч человеческих нейронов и соединили их с обычной микросхемой. Получился гибрид: нейроны могут учиться и адаптироваться как живой мозг, а микросхема передаёт сигналы в цифровом виде.

CL1 используют для тестирования лекарств, исследований искусственного интеллекта и даже создания новых типов нейроинтерфейсов. Живые нейроны быстрее обучаются, а сама система потребляет в десятки раз меньше энергии, чем классический ИИ на кремнии.

Нейроны располагаются на специальном субстрате, к ним подключены сенсоры, которые фиксируют активность и передают в компьютер. Учёные могут отправлять сигналы напрямую в нейронную сеть, а биокомпьютер — отвечать в реальном времени. CL1 уже продаётся лабораториям по всему миру, а доступ к устройству можно получить даже удалённо, через облако.

Авторы проекта открыто заявляют: в будущем такие биокомпьютеры станут основой для продвинутых нейроинтерфейсов и гибридных ИИ — на стыке биологии и математики.

Животные киборги: чипированные свиньи, обезьяна-телепат и мыши на радиоуправлении

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

Свиньи Neuralink. В 2020 году Илон Маск показал миру свиней с нейрочипами Neuralink. После операции животные быстро восстановились и вернулись к обычной жизни. Один из чипов даже успешно извлекли — и никаких побочных эффектов не было. Эти эксперименты доказали, что мозговой имплант можно не только внедрить, но и безопасно достать. Это важно с точки зрения обслуживания и возможных обновлений.

Обезьяна, играющая в Pong. В 2021 году Neuralink внедрили свой чип обезьяне по кличке Pager. После короткого курса обучения она смогла сыграть в аркадную видеоигру Pong: не джойстиком, а мысленным управлением. Чип фиксировал всплески нейронной активности, ИИ-алгоритмы расшифровывали их и передавали команды на экран.

Мыши и крысы в BCI-лабораториях. Одна из самых известных работ — эксперименты исследователей из медицинского центра Downstate в Нью-Йорке. Учёные в начале 2000-х вживили крысам три электрода: один стимулировал «лево», другой «право», а третий — зону удовольствия. Управляя этими сигналами с компьютера по радиоканалу, исследователи заставляли крыс проходить по сложному лабиринту строго по заданной траектории — получились радиоуправляемые животные.

Как ИИ помогает людям с имплантами и протезами?

Узкоспециализированные ИИ

ИИ для протезов ноги

ИИ — отличное дополнение для протезов. У разных компаний есть свои узкоспециализированные разработки в этой области. К примеру, в системах Ottobock и Össur есть ИИ, который до 100 раз в секунду сравнивает движения, оценивает положение тела и заранее регулирует сопротивление в коленном суставе. Как итог, человеку комфортнее ходить даже по неровным поверхностям.

ИИ для улучшения моторики рук

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

LLM в теле человека

Neuralink от Илона Маска использует Grok для работы чипа. С помощью нейроинтерфейса человек мысленно набирает текст, а модель Grok в связке с ElevenLabs воспроизводит речь. Причем ИИ обучен на старых записях разговоров пациента. Человек «думает» фразу, а Grok озвучивает.

Компания Synchron, конкурент Neuralink, встроила в свой нейроинтерфейс чат-бота на базе ChatGPT. Система предлагает парализованному пользователю варианты фраз и слов, позволяя силой мысли быстро создавать осмысленные предложения для общения.

Основные проблемы нейроинтерфейсов, протезов и имплантов

Стоимость и поддержка

Самая очевидная проблема индустрии — сложные и дорогие операции. Здесь нужны хирурги, а любые сбои устройств могут навредить здоровью. Не все чипы работают стабильно: были случаи, когда пациенты теряли связь с имплантом или не могли его обслужить из-за банкротства производителя.

Например, в 2019 году компания Second Sight заявила о поэтапном прекращении работы и в итоге обанкротилась. Компания предлагала свою продукцию слепым и слабовидящим. Стоимость одного импланта составляла $150 тыс. Пациенты после операции начинали лучше видеть, самостоятельно ходили в магазин, катались на лыжах. Однако, оказалось, что компания неправильно оценила затраты и работала в убыток, даже при таком высоком чеке. В результате она закрылась, а 350 пациентов с имплантами остались без поддержки.

Риск утечки конфиденциальных данных из «мозга»

Другая проблема — безопасность данных. Нейроинтерфейс может теоретически стать «точкой входа» для утечки личной информации.

В 2012 году группа ученых из Оксфордского и Калифорнийского университетов в Беркли провела эксперимент, продемонстрировавший уязвимость коммерческих нейроинтерфейсов. Добровольцам, на головы которых были надеты простые ЭЭГ-гарнитуры, показывали на экране ряд изображений: цифры, логотипы банков, карты местности. Сами участники не совершали никаких действий, просто смотрели.

Ученые анализировали P300-волны, которые возникают, когда человек видит что-то значимое или узнаваемое. Исследователи смогли определить личную информацию испытуемых. Точность угадывания первого знака в PIN-коде составила 20%; до 30% увеличилась точность определения банка и города испытуемого. Это, конечно, не 50% и даже не 100%, но всё равно высокий показатель.

Пока что это только эксперимент и реальных случаев таких взломов не было, но теоретически — возможно. Что, если злоумышленник сможет перехватывать сигналы от нейрочипа к внешнему компьютеру или подменить их?

Медицинские риски

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

К примеру, DBS-импланты используют для борьбы с болезнью Паркинсона. Операции по их внедрению могут длиться несколько часов. Это сложная и болезненная процедура, которую, в случае неудачи, придётся повторять.

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

ИИ уже среди нас, и надо быть в курсе событий. Поэтому скорее подписывайтесь на наш Нейроканал!

Выбрали путь программиста? Значит навсегда запомните, когда опубликовали первый самописный сайт. Откосить не получится: мы сразу перейдём к практике — к концу статьи у вас будет ссылка на сайт-визитку.

Мало времени? Выделите 10 минут — мы используем только HTML и CSS.

Вы узнаете:

• как подключать стили,
• как верстать блоки,
• как опубликовать сайт.

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

Шаг 1. Подготовим инструменты и папку проекта

Сайт можно писать и в блокноте. Это как забивать гвозди камнем – работает, но зачем мучиться? Редактор кода подсвечивает синтаксис, подсказывает команды и сразу указывает на ошибки.

Новичкам рекомендуем ставить Visual Studio Code (VS Code). Он бесплатный, не тормозит и понимает любой код. Плюс у него огромное сообщество — если нужно установить плагин или увеличить шрифт, ответ на вопрос уже есть в интернете.

Скачайте VS Code с официального сайта.

Как устроен веб-проект

Сайт — это папка с файлами для браузера.

HTML-файл содержит текст и разметку страницы, CSS-файл — правила оформления. Браузер берёт эти два файла и показывает веб-страницу.

Основной файл сайта обычно называют index.html. Стили хранятся в style.css.

Кроме файлов HTML и CSS, в нашем проекте будут папки:

• img — для картинок.
• fonts — для шрифтов.

Создайте на рабочем столе папку с названием сайта, например first-site, и соберите начальную структуру — это займёт 1 минуту.

Шаг 2. Создадим базовую HTML-страницу

В VS Code есть удобная фишка: наберите символ «!» и нажмите Tab. Редактор автоматически создаст базовую структуру HTML-документа.

Как читать структуру:

• <!DOCTYPE html> — сообщает браузеру, что это HTML-документ.
• <html> — корневой элемент, внутри которого живёт страница.
• <head> — служебная информация, которую не видно на странице.
• <body> — то, что увидят пользователи на странице.

Измените Document на название вашего сайта — это текст, который появится во вкладке браузера.

Добавим контент в <body>:

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

Сохраните HTML-файл и откройте его в браузере. Поздравляем, ваша первая веб-страница готова! Она недоступна другим пользователям, но мы это исправим.

Шаг 3. Подключим стили CSS

Сейчас сайт выглядит странно — чёрный текст на белом фоне. Так не пойдёт, добавим стилей в файле style.css.

CSS можно писать внутри HTML или в отдельном файле. Мы выберем второй вариант, потому что это удобнее.

Подключим CSS к HTML. В секции вашего index.html добавьте строчку:

Тег говорит браузеру: «Возьми файл style.css из той же папки и примени все стили к этой странице».

Добавьте в style.css первое правило:

Сохраните оба файла — HTML и CSS. Обновите страницу в браузере.

Фон поменял цвет? Значит, CSS подключён правильно. Можете вернуть белый фон или оставить голубой — далее мы добавим более интересные стили.

Шаг 4. Подключим шрифты

Есть три способа избавиться от дефолтного Times New Roman:

• Google Fonts — бесплатная библиотека шрифтов от Google.
• Локальные файлы — загружаете шрифт на свой сервер.
• Системные шрифты — используете то, что уже есть на компьютере пользователя.

Для первого сайта на HTML и CSS рекомендуем Google Fonts — это просто, быстро и надёжно.

Перейдите на fonts.google.com и выберите шрифт. Популярные варианты: Roboto, Open Sans, Lato, Montserrat. Нажмите на понравившийся шрифт, выберите начертания (тонкий, обычный или жирный), скопируйте код подключения и вставьте в head.

На Google Font собраны популярные шрифты. Если этого мало, нужно скачать шрифт (.woff, .woff2, .ttf) и поместить в папку fonts.

Путь к файлу указывается относительно CSS-файла. Подключаем начертания через @font-face:

Теперь используйте шрифт в CSS:

Для каждого начертания (обычный, жирный, курсив) нужно отдельное правило @font-face.

Шаг 5. Сверстаем блоки

Замените содержимое вашего style.css на этот код:

Что мы делаем:

• Убираем стандартные отступы браузера и задаём голубой фон.
• Центрируем карточку по всей странице с помощью flexbox.
• Создаём белую карточку с тенью и скруглёнными углами.
• Делаем круглый аватар с рамкой.
• Стилизуем текст и кнопку.
• Добавляем эффект при наведении на кнопку.

Шаг 6. Загрузим сайт на хостинг

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

Заходим на сайт хостинга (Beget, Hostiman, InfinityFree) и регистрируемся. После подтверждения email вы попадёте в панель управления. Система предложит выбрать домен — берите бесплатный типа название.fwh.is.

Загружаем файлы на сервер

После создания аккаунта появится доступ к файловому менеджеру. Через веб-интерфейс можно управлять файлами на сервере прямо из браузера. Перейдите в папку htdocs — это корневая директория вашего сайта, куда нужно загружать структуру.

Удалите лишние файлы по типу default.php и загрузите ваши файлы: index.html, style.css, папки img и fonts. Основной index.html должен лежать прямо в htdocs, а не во вложенной папке — иначе сайт не откроется.

Более продвинутый способ — использовать FTP-клиент FileZilla. В панели хостинга найдите FTP-данные и подключитесь через программу. Это удобнее для больших проектов, но для первого сайта веб-менеджера будет достаточно.

Проверяем результат

Через несколько минут после загрузки ваш сайт будет доступен по адресу. Откройте его в браузере — если всё сделано правильно, увидите свою страницу. Если что-то не работает, проверьте, что index.html лежит в корне htdocs, а style.css загружен в ту же папку.

Реальность бесплатного хостинга

Для изучения основ и создания первых проектов на HTML и CSS это отличный вариант. Регистрация занимает 1 минуту, никаких настроек, можно сразу экспериментировать и видеть результат.

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

Самая большая проблема — нестабильность бизнеса. Бесплатные хостинги закрываются без предупреждения. Сегодня ваш сайт работает, а завтра компания решила, что бесплатные услуги больше не окупаются.

Скрытые ограничения:

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

Когда стоит переходить на платный хостинг

Бесплатный хостинг — это тренировочная площадка, а не постоянное решение. Если планируете заниматься веб-разработкой, создавать портфолио или коммерческие проекты, лучше сразу инвестировать в качественный хостинг и собственный домен.

Самый простой домен стоит 200-1000 рублей/год, а базовый хостинг — 100-300 рублей/месяц. Плюс получите доступ к технологиям (PHP, MySQL), более стабильную работу и нормальную техподдержку. Начните с минимального тарифа — его хватит на тренировочные проекты, а потом можно масштабироваться.

Куда двигаться дальше?

Мы создали первый сайт и опубликовали его в интернете. Если повторяли за нами то поздравляем — многие останавливаются на теории, а вы дошли до результата. Теперь у вас есть понимание основ:

• как работает HTML,
• зачем нужен CSS,
• что такое хостинг и домен.

Следующий шаг — подробнее изучить CSS. Сайт-визитка из примера нормально отображается только на больших экранах. Однако 60% пользователей заходит с телефонов. Изучите медиазапросы, они применяются только на определённых размерах дисплея.

Подробнее про адаптив рассказал старший фронтенд-разработчик Никита Кушнарёв: Если вы умеете покрасить кнопочку, но хотите узнать больше о вёрстке веб-приложений.

Попробуйте переделать карточку так, чтобы она нормально выглядела на телефоне. Уменьшите размеры, измените отступы, сделайте кнопку на всю ширину. Потом изучите Flexbox и CSS Grid — современные способы вёрстки макетов.

Когда почувствуете уверенность в CSS, пора знакомиться с JavaScript. Это язык программирования, который делает сайты интерактивными. Сложные анимации, всплывающие окна, динамическое изменение контента — это JS. Предупреждаем, он сложнее HTML и CSS. В нём есть функции, условия, циклы — всё то, что пугает новичков.

Подробнее про JavaScript: Разработка на JavaScript с нуля: дорожная карта.

Изучайте инструменты разработчика в браузере. Нажмите F12 на любом сайте — откроется интерфейс для просмотра структуры сайта, отладки JS, тестирования адаптива. Смотрите, как устроены другие сайты, изучайте чужой код.

Самое время узнать о большем количестве инструментов программиста. Читайте в нашем тг-канале!

Решение проблемы с помощью JavaScript

Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.

Разбор кода по частям

1. Инициализация скрипта

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

2. Поиск текстовых элементов

Скрипт находит все основные текстовые элементы на странице: параграфы, заголовки, элементы списков и другие. Вы можете расширить этот список, добавив другие селекторы.

3. Список коротких слов

Массив содержит наиболее распространённые предлоги, союзы и другие служебные слова русского языка, после которых нежелательны переносы.

4. Обход текстовых узлов

TreeWalker позволяет пройти по всем текстовым узлам внутри элемента, включая вложенные теги. Это важно, так как текст может содержать форматирование («,» и т.д.).

5. Регулярное выражение для замены

Регулярное выражение ищет:

· (^|\s) — начало строки или пробел (группа 1);
· ([а-яё]{1,2}) — слово из 1-2 русских букв (группа 2);
· \s — пробел после слова;
· Флаги gi означают глобальный поиск без учёта регистра.

6. Условная замена

Если найденное короткое слово есть в списке предлогов, обычный пробел заменяется на неразрывный пробел (\u00A0). Это предотвращает разрыв строки между предлогом и следующим словом.

Результат работы

После выполнения скрипта текст «Я иду в магазин» не будет разорван на строки как «Я иду в» и «магазин». Предлог «в» всегда останется на одной строке со следующим словом благодаря неразрывному пробелу.

Настройка скрипта

Вы можете легко адаптировать скрипт под свои нужды:
· Добавить новые селекторы в querySelectorAll() для обработки других элементов;
· Расширить список слов в массиве prepositions;
· Изменить длину слов в регулярном выражении с {1,2} на другое значение;
· Добавить обработку других языков, изменив диапазон символов в регулярном; выражении.

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

P.S.: это JS решение иногда не во всех случаях срабатывает + бывают сложности с адаптивностью: на смартфонах может переносить совсем не так, как хотелось бы, текст может «уехать» за пределы контейнера, нужно будет «фиксить» эти моменты в CSS.

Подписывайся на мой телеграм-канал, чтобы узнать ещё больше полезных фишек верстки и дизайна

Мы в Smart Engines занимаемся разработкой софта для распознавания самых разных документов — начиная от паспорта РФ, свидетельства о рождении и заканчивая первичкой вроде УПД или ТОРГ-12, а также банковских карт, номеров телефона и баркодов. Наши библиотеки написаны полностью с нуля (на плюсах), мы уделяем огромное внимание скорости алгоритмов, нейросетям (новым архитектурам, размеру и правильному применению) и оптимизации, за счет чего наш софт портируется на любые архитектуры и может быть использован на любой платформе.

Сегодня продолжим знакомиться через рассказ о нашем софте, на очереди вторая библиотека — Smart Document Engine и ее возможности работы с жесткими и гибкими формами.

Гибкие и жесткие формы

Вначале про сами формы: они могут быть «жесткими» и «гибкими». Жёсткие формы подразумевают, что положение всех объектов на форме может быть задано прямо в виде координат на шаблоне. Самое простое определение для жестких форм — они совпадают «на просвет». Возьмите пару листов А4 с распечатанной жёсткой формой, наложите друг на друга, и места расположения полей точно совпадут. Гибкие формы устроены гораздо сложнее, но все равно имеют свою характерную структуру и топологию.

Распознавание жестких форм можно свести к детекции формы на изображении и распознавании определенных областей, где должны быть искомые поля. Гибкие формы требуют гораздо более сложных систем поиска (к тому же, завязанных на результате предыдущих действий, например, OCR, что только увеличивает возможность ошибки).

Кстати, иногда вместо распознавания текста целиком достаточно просто ответить на вопрос «есть ли текст в выбранной области, и, если есть, то где»

Но не надо думать, что жёсткие формы совсем просты — большие белые поля без каких-либо символов (или одинаковый узор по краям, как это бывает с бланками гособразца), малый объём статического текста и некоторая вариативность бланков тоже заставляют потрудиться над детекцией и классификацией шаблонов.

Также существуют общие для подобных форм проблемы. Правильно интерпретировать галочки в чекбоксах, найти штрихкоды, правильно разметить табличные данные — есть куча проблем, каждая из которых имеет своё state-of-the-art решение и набор алгоритмов, над которыми нужно ломать голову.

Почему не LLM, хотя казалось бы

Сейчас мы переживаем бум развития нейросетей — генеративные и классифицирующие сети появляются как грибы после дождя. Количество задач, которые они могут решить, тоже кажется неисчислимым: казалось бы — дайте обучающую выборку побольше, и всё получится! Тем более, что примеры использования нейросетей для автоматизации рутины уже можно встретить на каждом шагу: об этом пишут заметки и обзорные статьи на научно-популярных ресурсах, а интеграторы и стартапы предлагают решения по созданию чат-ботов и помощников на основе ИИ, обученного на внутренней документации больших компаний.

Однако чем сложнее нейросеть, чем глубже степень обучения — тем выше шанс, что она начнёт бредить. Мы все какое-то время назад смеялись над шести-семипалыми героями очередных сгенерированных изображений, сейчас посмеиваемся над сгенерированными сетями текстами с описанием несуществующих фильмов и книг, но смешно ли будет нам (а особенно бухгалтерии), если нейросеть начнет галлюцинировать при распознавании платёжных реквизитов или суммы НДС? И чем выше степень развития сетей — тем менее заметными будут становиться такие ошибки.

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

Вернёмся к библиотеке Smart Document Engine. Как уже говорилось выше, гибкие формы на то и гибкие, что исключительно геометрией на них не обойдёшься — вопрос местонахождения полей решается «на лету». На процесс взаимодействия с библиотекой это влияет в самом конце, на моменте работы с результатом. Перейдем к знакомству с интерфейсом на примере всё того же встраивания в андроид.

Встраивание

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

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

Как правило, результат распознавания представляют в виде json-объекта, но для наглядности лучше всего пользоваться html — особенно в случае, когда логические и физические поля имеют больше одного соответствия. Вот простенький генератор html на основе документа:

В результате получается удобная для взаимодействия html-страничка. Если добавить немного фантазии, то можно сразу сделать форму, в которой можно будет проверять и дополнять неуверенно распознанные поля — очень удобно в случае, если качество изображения плохое или документ плохо пропечатан.

Конечно, помимо андроида встроить распознавание и организовать удобные представление документа (при необходимости) можно и на любой другой платформе, однако с трендом на создание банковских офисов нового поколения и развития курьерской сети автоматизация ввода документов с помощью средненьких мобильных устройств на Андроиде становятся актуальной задачей.

На этом мы не заканчиваем, ждите новых статей!

Все началось, когда 38-летний Эрик сломал лодыжку во время пробежки. Лежа дома, он увидел в соцсетях истории о том, как люди запускали SaaS-проекты за выходные с помощью ИИ. Это вдохновило его на третью попытку освоить программирование.

Учеба без бюджета — только ИИ и бесплатные курсы

Эрик решил не тратить ни копейки на курсы. Он выбрал Python как основной язык и прошел CS50 от Гарварда — сначала курс по Python, потом по веб-разработке.

С ИИ он работал как с личным наставником: писал псевдокод, просил ChatGPT раскритиковать его, затем вручную набирал код. Синтаксис — по запросу. Такой подход позволил быстрее понять концепции, а не просто запомнить команды.

Свой первый проект он сделал по мотивам Wordle — игру на угадывание слов он реализовал на Python под названием PyWordle.

Затем собрал полноценное веб-приложение Make My Meal Plan: генерация рецептов, списки покупок, TailwindCSS, Django, PostgreSQL, CI/CD и даже тестирование через Playwright — все своими руками за 150 часов. Проект включал 25 000 строк кода.

Работа после 100 дней

Через 3 месяца обучения он получил оффер. Без Leetcode, без алгоритмических задач — только благодаря портфолио. Его взяли на испытательный срок в консалтинговую компанию в Лондоне, чтобы он заменил Excel и устаревшие тулзы на автоматизированные пайплайны.

Эрик честно рассказал, что научился программировать за пару месяцев и активно использовал ИИ — и все равно его приняли.

По его словам, весь путь стоил $120 — подписки на Claude Pro и Cursor. Все остальное — бесплатные курсы и открытые материалы. Недавно он прошел испытательный срок, получил повышение и теперь работает с геоданными и статистикой, используя pandas и ArcGIS. Параллельно пишет Django-приложение для анализа населения и доходов в Великобритании.

«Точно вовремя» вместо «на всякий случай»

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

Если научиться работать с ИИ-моделями, даже начинающий разработчик сможет перепрыгнуть с уровня «кодер кнопок» до «архитектор интерфейсов».

AI — не замена разработчику, а новый хард-скилл. Те, кто осваивает нейросети, в 10 раз продуктивнее коллег, все еще верстающих каждый элемент вручную.

Pixel perfect по запросу: как фронтендеры генерируют интерфейс в 2025 году

*Дизайнер прислал макет в 23:45. Дедлайн — завтра в 10:00*

Знакомо? Раньше это означало ночь без сна. Но что делают ваши коллеги — просто скармливают макет нейронке и идут спать. Утром правят готовый код и укладываются даже в безумный дедлайн без вреда для здоровья.

Что изменилось?

AI-генерация интерфейсов становится рабочим инструментом. Можно конвертировать текст и даже рисунок от руки в готовый HTML/CSS/JS код. Без выравнивания пикселей и утомительной верстки однотипных элементов.

Вы вводите «Создай карточку товара с изображением, названием, ценой и кнопкой “В корзину”» — и получаете код компонента. То, что раньше занимало до 30 минут, теперь можно делать за секунды.

3 причины делегировать рутинную работу на ИИ

AI-генерация компонентов

Помните, как в 100-й раз писали карусель или модалку? Есть инструменты, которым достаточно описания результата — нейросеть сгенерирует компонент с нуля.

GitHub Copilot, Anthropic Claude и AI-плагины для VSCode превращают текстовый запрос в рабочий интерфейс. Причем не просто работающий, а соблюдающий ваши стандарты оформления кода.

Адаптив на автопилоте

Дебаг мобильной верстки не доставляет удовольствие?

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

Дизайнер с «Глазом Бога»

«Кажется, кнопка должна быть правее» — нет, ИИ выдает конкретные рекомендации.

Например:

«При ширине экрана 375px карточки товаров перекрывают друг друга на 12px. Причина: отрицательный margin в классе .product-card, который не учитывает падение грида на мобильных устройствах».

ИИ анализирует верстку и сравнивает ее с лучшими практиками UI/UX. Еще нейронка «видит» проблемы, которые не заметны до первых жалоб на баг.

Популярные модели и технологии

GPT, Claude и Gemini

Нейросети последних версий при четкой постановке задачи сразу пишут хороший код. В 2025 году это относится ко всем популярным моделям.

О том, как правильно составлять запросы для ИИ, рассказывали в статье «Продвинутый промтинг в ChatGPT».

На качество кода влияет выбор между «тяжелыми» и «легкими» версиями.

Например, GPT-4o генерирует код лучше, чем Claude 3, но обходится значительно дороже.

Релизы свежих версий ИИ сопровождаются отчетами с бенчмарками. На 100% доверять этой информации не стоит — если в тестах нейросеть показала хороший результат, не факт, что она эффективна в реальных условиях.

Если нужно сравнить несколько моделей, но времени на самостоятельные тесты нет, обратите внимание на Arena Leaderboard. Этот рейтинг имеет хорошую репутацию в профессиональных кругах. Люди делают одинаковые запросы двум нейросетям и сравнивают ответы. Рейтинг формируется на основе оценок от реальных пользователей.

GPT-Engineer, Smol Developer

Если ChatGPT действует как советчик, то GPT-Engineer и Smol Developer участвуют как полноценные члены команды.

GPT-Engineer трансформирует текстовое описание в готовый проект. Разработчику достаточно сформулировать задачу — AI создаст структуру проекта с файлами, настроит окружение и сгенерирует код.

Smol Developer предлагает иной подход — персонального AI-разработчика. С аудиторией более 10,000 пользователей на GitHub, этот инструмент отличается интуитивным интерфейсом и поддержкой E2B SDK.

No-code/Low-code платформы

Uizard превращает идею в интерактивный прототип быстрее, чем команда дизайнеров набрасывает первые эскизы. За 7 лет инструмент эволюционировал в no-code платформу для создания UI/UX без дизайнерского бэкграунда.

Ключевые функции:

• Автодизайнер 2.0 — генерирует многоэкранные интерфейсы по текстовому описанию.
• Дизайн по эскизу — сфотографируйте рисунок с салфетки, и Uizard трансформирует его в редактируемый прототип.
• Клонирование интерфейсов — загрузите скриншот существующего сайта, и AI превратит его в настраиваемый макет, сохранив структуру и компоновку.
• Экспорт в PNG, PDF и генерация AI базового React-кода (требует доработки).

Locofy пригодится на следующем шаге после создания дизайна — превращении макетов в рабочий код.

Преимущества:

• Генерация кода для React, Angular, Vue.js и других фреймворков.
• Распознавание кнопки, поля ввода, слайдеры для создания динамического элемента.
• Платформа анализирует дизайн и автоматически добавляет медиа-запросы.

Связка Uizard + Locofy формирует конвейер от идеи до кода:

1. Создание прототипа в Uizard по текстовому описанию или наброску.
2. Экспорт в Figma для детальной проработки.
3. Преобразование в код через Locofy.
4. Доработка и интеграция с бэкендом.

Бесплатные тарифы позволяют оценить возможности платформ, но для полноценного использования в работе потребуется платная подписка — от 12$ в месяц.

AI-плагины в Figma

Фигма преобразилась с появлением AI-плагинов. В коллекции десятки дополнений на базе нейросетей.

AI Design by Figma — официальный ИИ-помощник для генерации интерфейсов, встроенный прямо в редактор.

Функционал:

• Создание элементов по текстовому описанию.
• Генерация нескольких вариаций компонентов.
• Трансформация простых фигур в иллюстрации.
• Предложение альтернативных цветовых решений.

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

Режим AutoLayout автоматизирует верстку элементов. Функция анализирует расположение объектов и предлагает наиболее логичную систему компоновки.

Еще в Фигме есть интеллектуальное определение отступов между элементами, создание адаптивных сеток на основе расположения компонентов, оптимизация приложения для различных разрешений экрана и автоматическое выравнивание элементов интерфейса.

Путь от запроса к интерфейсу: этапы работы с AI

Шаг 1: Формулировка промпта

Качество сгенерированного интерфейса зависит от точности запроса. ИИ-модели считывают структурированные инструкции лучше, чем набор общих фраз.

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

Шаг 2: Генерация кода

ИИ превращает текст в код, анализируя миллиарды строк из репозиториев и документации. Процесс включает:

• Разбор запроса на технические требования.
• Определение структуры компонента/интерфейса.
• Генерацию HTML/JSX элементов.
• Формирование стилей и интерактивных элементов.
• Оптимизацию согласно паттернам.

Стандартный запрос для генерации компонента пользовательского интерфейса занимает 3-15 секунд.

Шаг 3: Визуализация и проверка

AI-инструменты позволяют мгновенно увидеть результат без настройки окружения. Ваш запрос трансформируется в код, который тут же визуализируется.

Варианты визуализации:

• Встроенные рендереры в IDE (VS Code + GitHub Copilot).
• AI-платформы с предпросмотром (V0, Figma Dev Mode).
• Локальные песочницы (CodeSandbox, StackBlitz).

Шаг 4: Человеческая доработка — финальный штрих

Современный AI генерирует лишь скелет приложения. Оживлять его приходится разработчику.

Типичные улучшения:

• Добавление проверок на доступность (ARIA-атрибуты).
• Оптимизация производительности (lazy loading).
• Интеграция с реальными данными и API.

Стоит отметить, что ИИ успешно генерирует компоненты для React-приложения, включая:

• Функциональные компоненты с хуками.
• Context API для хранения состояния.
• Мемоизацию через useMemo/useCallback.

Генерация для Vue отлично работает с Composition API. ИИ автоматически применяет ref и reactive для состояния, computed для производных значений и методы для обработчиков.

В процессе создания UI с помощью ИИ не обойтись без проверки качества полученного результата. Тестировать сгенерированное веб-приложение приходится в несколько подходов:

• Визуальный просмотр — проверка соответствия дизайна требованиям и ожиданиям пользователя.
• Кросс-браузерная совместимость — тестирование работы интерфейса в различных браузерах и устройствах.
• Проверка доступности — оценка соответствия стандартам WCAG для обеспечения доступности для всех пользователей.
• Валидация HTML/CSS/JS — использование линтеров и валидаторов для проверки качества кода.
• Юзабилити-тестирование (E2E) — оценка удобства использования интерфейса реальными пользователями.

Плюсы и минусы AI для генерации пользовательского интерфейса

Подводные камни

— Непонимание бизнес-контекста. ИИ не проводит интервью с пользователями и не знает специфику бизнеса. Результат: функционально корректный интерфейс приложения, но бесполезный для конкретного случая.

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

— Усредненный UX вместо продуманного. ИИ ориентируется на паттерны, которыми был обучен. Результат часто напоминает интерфейс из 2021 года без учета новейших трендов в UX.

— Зависимость от контекста. Чем сложнее и нестандартнее требование, тем выше шанс, что ИИ не справится с задачей.

— Переоптимизм. Когда люди обращаются к ИИ, то ожидают идеальный результат с первой попытки. К сожалению, так не бывает.

— Слабая интерактивность. ИИ отлично генерирует статические интерфейсы, но с созданием динамических структур справляется на троечку.

Преимущества AI frontend

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

— Улучшения на ходу. ИИ вносит изменения мгновенно. Разработчик лишь направляет процесс.

— Поддержка компонентного подхода. ИИ генерирует компоненты, соответствующие архитектурным паттернам.

— Дизайн-варианты с A/B-тестированием. Тестирование гипотез ускоряется в несколько раз. Запрашивайте несколько вариантов UI без дополнительных затрат.

Кейсы и примеры: что реальные разработчики говорят про ИИ

Согласно исследованию Cloud.ru, 62% российских IT-специалистов доверяют AI как коллеге. Российские разработчики активно интегрируют ИИ в рабочие процессы — 73% используют его для работы с кодом, а 39% применяют ежедневно.

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

Рассмотрим три популярных сценария применения ИИ во frontend-разработке.

1. Создание панели администратора за 5 минут

AI-ассистенты значительно ускоряют разработку типовых интерфейсов. Опишите требуемые функции админ-панели (управление пользователями, статистика, редактирование контента), и нейросеть сгенерирует базовую структуру, HTML-разметку и CSS-стили.

2. Быстрое создание дизайна лендинга по описанию продукта

ИИ трансформирует текстовое описание продукта в макеты лендингов. Разработчику нужно лишь загрузить информацию о продукте, целевой аудитории и желаемом стиле.

3. Адаптация UI под разные разрешения и аудитории

Нейросеть упрощает создание адаптивных интерфейсов и персонализацию UX для различных пользовательских сегментов.

Интересно, что 46% разработчиков отдают предпочтение именно российским AI-сервисам, что говорит о росте доверия к отечественным ИИ-решениям. Еще исследование Cloud.ru выявило, что в 70% вакансий работодатели упоминают навык владения AI-инструментами.

Будущее AI во frontend-разработке

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

Финальная стадия эволюции — создание интерфейсов без интерфейса проектирования.

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

Вопрос не в том, заменит ли ИИ фронтендеров, а в том, заменят ли фронтендеры с ИИ тех, кто продолжает работать по старинке.

Кстати, забрать все самые топовые нейронки для айтишников можно в нашем большом гайде с 70+ ИИ-инструментами.

Это лишь один из многих довольно общих примеров. Но есть уникальные кейсы, как разработчики с крайне простой идеей выпустили приложение и проснулись миллионерами — рассказываем о них в статье.

Flappy Bird (олдскулы свело)

Кто-то еще помнит эту безумную птичку? В 2013 году она появилась на iOS, а в 2014 — на Android. А разработал ее вьетнамский кодер Донг Нгуен всего за несколько дней. Сам программист заявлял, что всего его игры проходимы, и главное их отличие от сложных западных игрушек — простота, хард-левел и истинное веселье. В общем, те самые ретро-игры.

Суть, кажется, объяснять не стоит — все и так помнят, что есть пиксельная птичка, которой нельзя упасть или удариться об трубу. Самое же интересное — как в 2013 году к этой в какой-то степени дурацкой игре пришла такая популярность. На самом деле, до сих пор загадка: одни связывают это с роликом PewDiePie (на тот момент у него было уже более 20 млн подписчиков на YouTube, другие — с вирусным эффектом в соцсетях.

В январе 2014 птичка возглавила топ бесплатных приложений в американском и китайском App Store, а потом — в британском. Игрушку скачали более 50 млн раз, а разработчики зарабатывали с рекламы $50 000 долларов в сутки!

10 февраля 2014 года Нгуен неожиданно удалил Flappy Bird из App Store и Google Play. В интервью Forbes он объяснил это чувством вины: игра, задуманная как легкое развлечение на пару минут, стала для многих «наркотиком». Нгуен говорил, что не мог спать из-за давления популярности и хотел вернуть себе спокойствие. После удаления начался ажиотаж: телефоны с установленной игрой продавались на eBay за тысячи долларов, а рынок заполонили десятки клонов.

Однако в этом году должно было произойти чудо: в сентябре 2024 компания Gametech Holdings объявила, что готовит перезапуск игры в 2025 — она банально украла права у Нгуена, когда те истекли. Правда, твиттерские было выяснили, что это скам: Gametech связана с другой компанией — 1208 Productions, которая делает игры для Web 3 с NFT. А еще Gametech подписаны на кучу инфоцыганских аккаунтов в Твиттере. Вишня на торте — на официальном сайте перезапуска птички лежала демка, один из юзеров ее скачал, и в конце его попросили завести криптокошелек. В общем, птичку не тапаем, на NFT-развод не попадаем.

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

BeReal

Та самая антисоциальная сеть, которая завирусилась в ТикТоке в 2022 году. Суть и реализация очень простая: приложение раз в день отправляет уведомление, и вы должны быстро сделать селфи — всего за две минуты. Неважно, где вы и что делаете — гуляете с собакой или поете в душе, главное — запостить фотографию в приложение. Никаких фильтров, масок и всего остального. Кстати, просто последить за друзьями нельзя: приложение не даст вам доступ к ленте, пока вы не выложите пост.

Сейчас у приложения нет монетизации, поэтому все цифры основываются на оценках и капитализации. Последняя сделка по BeReal прошла в июне 2024 года — привлекли более $580 млн.

Как мы помним, красота и гениальность — в простых вещах. А простые вещи — те, которые происходят с нами каждый день. Считайте, что разработчики сделали миллионное состояние просто на том, что нас окружает.

Wordle

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

Эту игру придумал программист Джош Уордл в 2021 году как подарок для своей девушки, которая любила словесные головоломки. Он выложил её в интернет просто «для друзей», но очень быстро Wordle стала вирусной. В январе 2022 года игрушку купила The New York Times за небольшую семизначную сумму, то есть где-то за $1-3 млн.

Технология тоже очень простая: обычная веб-страница, написанная на HTML, CSS и JavaScript. Загружается список слов, одно из них выбирается как «слово дня», и дальше работает простейшая логика — сравнение букв и подсветка.

Популярность тоже вполне объяснима. Во-первых, игра ужасно простая. Там нет рекламы, регистрации, внутриигровых покупок — просто заходишь и играешь. Во-вторых, можно сыграть только один раз в день, и это ограничение превратилось в фишку — у многих игроков это стало ритуалом. Кстати, в 2022 году wordle был самым частым запросом в Google среди американцев.

Автор этой статьи тоже обожает Вордл! Это еще и отличный шанс подтянуть свой английский. Если еще не пробовали — оцениваем здесь.

Locket Widget

Еще одна до жути простая идея: делаете фото в приложении, и оно появится у ваших друзей на главном экране в виде виджета.

Мэтт Мосс запустил Locket Widget в 2022 году — он разработал приложение всего за несколько недель для своей девушки, с которой у них были отношения на расстоянии (опять романтическая история). Сейчас им пользуются десятки миллионов людей по всему миру, а в 2022 году в него загрузили более 2 млрд фотографий.

На пике популярности Мосс с командой привлекли $12,5 млрд инвестиций. Кстати, завирусилось приложение опять благодаря ТикТоку — видео в аккаунте Мосса набирали миллионы просмотров.

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

Calm

Calm — одно из самых известных приложений для медитации и сна. Его разработали два предпринимателя — Алекс Тью и Майкл Эктон Смит — в 2012 году. Идея была очень простой: помочь людям справляться со стрессом и тревогой с помощью коротких медитаций, приятной музыки. Интерфейс — тоже максимально минималистичный.

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

В 2016 году Calm начал активно развиваться и добавлять новые функции, которые сделали его намного популярнее и полезнее для пользователей. Тогда появилась одна из главных фишек — Sleep Stories. Считайте, что это сказки на ночь, только для взрослых работящих людей. А сейчас самая популярная функция в приложении — 10-минутная медитация, которая доступна пользователям всего лишь 24 часа.

Конечно, сейчас приложение разрослось и стало сложнее, но на старте это был очень простой интерфейс с небольшим количеством функций (хотя, наверное, в приложении для медитации именно так и должно быть).

Уже в 2019 году Calm стал первым «единорогом» в сфере ментального здоровья — его оценили в $1 млрд, а позже — и в $2 млрд. Плюс компания зарабатывает на ежемесячных и пожизненных подписках.

Как говорится, think different, а все гениальное — просто. Приложение на миллион долларов можно сделать даже за несколько дней, главное — немного удачи, крутая идея и промо.

Кстати! Забрать все самые топовые нейронки для айтишников можно в нашем большом гайде с 70+ ИИ-инструментами

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

Шаг 1. Готовимся к миграции

Посмотрите структуру проекта, чтобы выявить слабые места.

Архитектура далека от идеала, если проект вырос на хаотичных добавлениях новых функций.

Проанализируйте:

• Вид проекта. Ваша разработка — это монолит, модульная система, API, микросервис?
• Зависимости. Определите, какие библиотеки использует проект. Совместимы ли они с Laravel?
• Базу данных. Если в БД встречаются дубли, отсутствуют ограничения, это нужно исправить заранее.

В качестве теста на совместимость перепишите небольшую часть на Laravel. Возьмите один простой модуль и посмотрите, насколько это жизнеспособно.

Стратегии перехода

Выберем стратегию перехода:

• Big Bang,
• Поэтапный перенос.

Стратегия Big Bang — это полная остановка текущего проекта и создание новой версии на Ларавел с нуля.

Подход идеален для устаревших и запутанных систем.

Из минусов — высокие риски. Во время разработки текущая версия может растерять пользователей. К тому же сроки реализации могут затянуться.

Стратегия с постепенным переходом выглядит надежнее.

Система продолжает работать, а вы поэтапно меняете ее «под капотом».

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

Выбор подхода зависит от проекта

Если систему легко поддерживать, то более безопасен постепенный переход.

Проект напоминает спагетти-код? Плохие новости — Big Bang неизбежен.

Шаг 2. Разворачиваем новое окружение на Laravel

Чтобы установить фреймворк, выполните команду:

Прежде чем работать с кодом, настроим окружение.

В корне проекта для этого есть файл конфигурации .env:

• APP_NAME: имя приложения, чтобы оно отображалось в логах и заголовках.
• APP_URL: адрес, на котором приложение будет доступно (например, http://localhost).

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

Подключение БД

Laravel использует Eloquent ORM для взаимодействия с базой.

Настройка БД выполняется в том же разделе .env:

Для тестирования подключения запустите команду:

Настройка маршрутов

Маршруты изначально хранятся в файлах routes/web.php (для страниц) или routes/api.php (для REST API).

В качестве примера добавим базовый маршрут приветствия:

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

Шаг 3. Переносим модели данных и бизнес-логики

Eloquent ORM работает с классами, представляющими таблицы в базе данных.

Чтобы перенести существующую таблицу, нужно создать модель:

Этот класс автоматически подключается к таблице с именем products.

Когда название таблицы не соответствует модели, это можно указать явно:

Если в таблице есть нестандартные поля (например, столбцы с именами вроде created_time вместо created_at), их тоже можно легко обработать:

Переносим схему БД

Laravel использует механизм миграций для управления таблицами в базе и сиды для внесения данных.

Перенос структуры БД выполняется командой:

Миграция создается в папке database/migrations.

Переносим данные

Если текущая БД уже содержит данные, их можно перенести через сиды: файлы, которые заполняют таблицы данными.

Создаем сид:

Внутри метода run описываем данные:

Переводим бизнес-логику в сервисы и фасады

Старый проект состоит из функционала, размазанного по контроллерам? Улучшим структуру и сделаем код независимым. С этим помогут сервисы и фасады.

Сервисы — это классы, которые объединяют бизнес-логику в одном месте.

Например, если проект выполняет расчеты цен и скидок, можно создать класс:

В этом классе описана бизнес-логика:

Теперь сервис можно вызывать в контроллерах и моделях.

Фасады — это статический интерфейс к сервисам, который делает вызовы более читаемыми.

Например:

С фасадом вызов становится простым:

Шаг 4. Перенос маршрутов и контроллеров

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

Если в старом проекте использовались API-запросы для работы с внешними сервисами или мобильными приложениями, перенесем их в api.php и добавим префикс api для маршрутов:

Теперь про контроллеры. Они отвечают за логику обработки запросов и взаимодействие с моделями. В Laravel контроллеры работают по правилам MVC (Model-View-Controller).

Пример обычного метода контроллера:

Laravel определяет маршруты групповыми методами — по префиксам, middleware или зонам авторизации.

Middleware — это посредники, которые обрабатывают запросы до их поступления в приложение.

Навесим middleware на маршруты, требующие авторизации пользователя:

Политики контролируют доступ к определенным ресурсам, например, правку или удаление записей.

Пример метода политики:

Политики можно подключать к маршрутам или напрямую вызывать в контроллерах.

Шаг 5. Перенос фронтенда и представлений

Если ваш старый проект использует обычные HTML-файлы, они легко преобразуются в Blade.

Blade — это встроенный механизм шаблонов. С его помощью создают пользовательские интерфейсы.

Например, перенесем главную страницу сайта:

Blade-версия:

Теперь можно динамически передавать данные из контроллера:

Blade поддерживает механизм наследования, который упрощает работу с повторяющимися частями интерфейса.

Интегрируем Vue.js или React

Vue.js/React подключают, когда нужен динамичный и интерактивный интерфейс. Например, для SPA, реалтайм-функционала, сложных форм или фильтров.

Blade и JavaScript можно комбинировать: используйте Blade для рендеринга начального интерфейса и Vue.js/React для обработки интерактива.

Динамический интерфейс без JS

Livewire — это инструмент для создания интерфейсов без необходимости обращаться к внешним библиотекам JavaScript. Преимущество в том, что весь код пишется на PHP.

Livewire пригодится для динамических форм, фильтрации таблиц, уведомлений. Он упрощает код, сохраняя гибкость.

Шаг 6. Оптимизируем и тестируем проект

Отправная точка улучшения производительности — работа с Blade-шаблонами. Laravel сам их оптимизирует, но есть практики по дополнительному ускорению:

• Минимизация логики в представлении. Злоупотребление PHP внутри Blade замедляет рендеринг страниц. Вместо описания сложной логики в шаблонах ее лучше перенести в контроллер.
• Кэширование шаблонов. Работу приложения можно ускорить за счет запуска кэширования всех шаблонов, сокращая время компиляции — «php artisan view:cache».
• Переиспользование. Если фронтенд состоит из повторяющихся фрагментов, рекомендуется использовать Blade-компоненты.

В приложениях SPA оптимизируем фрагменты JavaScript.

Laravel Mix генерирует минифицированные CSS и JS. Проверьте размер этих файлов в папке public/js. Если их вес больше 1 МБ:

• Удалите лишние пакеты.
• Используйте динамическую загрузку маршрутов или компонентов.

Для Vue можно использовать динамическую загрузку, чтобы не грузить весь фронтенд сразу:

Тестирование

Убедимся, что приложение работает корректно.

Проверим, например, что страница приветствия открывается и показывает нужный текст:

Если используете Vue.js или React, для проверки компонентов применяйте Jest или Mocha.

Тест, который проверяет, что компонент отобразил нужный текст:

Если приложение работает с API:

Для проверки приложения под нагрузкой можно использовать Artillery или JMeter.

Шаг 7. Разворачиваем и запускаем проект

Перенесли данные, создали маршруты и контроллеры, внедрили представления, оптимизировали приложение и протестировали его. Остался последний шаг — развернуть проект на сервере и запустить его.

Выбор сервера зависит от предпочтений и нагрузок:

• Если важна скорость и масштабируемость, выбирайте Nginx. Он быстрее работает под высокой нагрузкой.
• Если важен простой подход, используйте Apache. Он интегрируется с большинством систем.

Фоновые задачи можно связать с Supervisor. Инструмент автоматически запускает воркеров при сбоях, обеспечивая бесперебойную обработку задач.

Автоматизация развертывания

Чтобы релиз прошел безболезненно, нужен рабочий процесс CI/CD. Например, в GitHub Actions можно настроить сценарий, который:

1. Проверит качество кода.
2. Установит зависимости.
3. Выполнит миграции.
4. Зальет проект на сервер.

Предусмотрите откат, например, через Spatie Laravel Backup. Если что-то пойдет не так, у вас должна быть возможность вернуть предыдущую версию.

Инструмент Sentry поможет отслеживать ошибки, а New Relic — оценивать производительность.

Заключение

Устаревшие проекты уникальны, к каждому нужно искать индивидуальный подход. Надеемся, что пошаговое руководство станет основой для миграции вашего legacy-приложения на Laravel без переписывания кода с нуля.

На типичные вопросы Junior-разработчик должен легко ответить. Вместе с Альбертом Халимовым, TeamLead Frontend Developer в Группе М.Видео-Эльдорадо и ментором Эйч Навыки, разбираемся в тех же вопросах, но смотрим на них под другим углом и узнаем самое главное — готовы ли быть мидлом.

1. Что такое оператор typeof?

Вызов typeof x возвращает строку с именем типа:

2. Что вернет typeof null, typeof new Date, typeof alert?

Date — это встроенный объект, который содержит дату и время, а также предоставляет методы управления ими.

Результатом вызова typeof null является "object". Это официально признанная ошибка в typeof, берущая начало еще со времен создания JavaScript и сохраненная для совместимости. Конечно, null — не объект. Это специальное значение с отдельным типом.

Вызов typeof alert возвращает "function", потому что alert — функция. Функции относятся к объектному типу. Но typeof обрабатывает их особым образом, возвращая "function". Так тоже повелось с момента создания JavaScript. Формально это неверно, но может быть удобным на практике.

Интересный факт: информация об операторе typeof — это последний пункт главы «Типы данных» на https://learn.javascript.ru/.

3. Что такое NaN? Какого типа это значение? Как можно узнать, равно ли значение переменной NaN?

NaN расшифровывается как "Not A Number", это "false" (ложное) значение. Будьте аккуратны: выражение typeof NaN возвращает тип Number. Чтобы проверить значение переменной на соответствие NaN, нужно воспользоваться встроенным методом isNaN() или оператором тройного равенства ===.

4. Какие есть способы объявления функций? В чем их отличия? Что такое стрелочная функция?

Ниже рассмотрим ключевые отличия Function Declaration от Function Expression.

Во-первых, синтаксис: Function Declaration — функция объявляется отдельной конструкцией function… в основном потоке кода.

Function Expression — функция, созданная внутри другого выражения или синтаксической конструкции. В данном случае функция создается в правой части «выражения присваивания» =:

Более тонкое отличие появляется тогда, когда функция создаётся движком JavaScript. Так, Function Expression появляется в то время, как выполнение доходит до него, и затем уже может использоваться.

После того, как поток выполнения достигнет правой части выражения присваивания let sum = function…, функция считается созданной и может быть использована (присвоена переменной, вызвана и т.д. ).

С Function Declaration всё иначе. Она может быть вызвана раньше, чем объявлена. Другими словами, когда движок JavaScript готовится выполнять скрипт или блок кода, прежде всего, он ищет в нём Function Declaration и создаёт все такие функции. Можно считать этот процесс «стадией инициализации».

Только после того, как все объявления Function Declaration будут обработаны, продолжится выполнение. В результате функции, созданные как Function Declaration, могут быть вызваны раньше своих определений.

Например, будет работать так:

Функция sayHi была создана, когда движок JavaScript подготавливал скрипт к выполнению, и такая функция видна повсюду в этом скрипте.

Если бы это было Function Expression, то такой код вызвал бы ошибку:

Функции, объявленные при помощи Function Expression, создаются тогда, когда выполнение доходит до них. Это случится только на строке, помеченной звёздочкой (*). Слишком поздно.

Ещё одна важная особенность Function Declaration заключается в её блочной области видимости.

В строгом режиме, когда Function Declaration находится в блоке {...}, функция доступна везде внутри блока, но не снаружи.

Для примера давайте представим, что нам нужно объявить функцию welcome() в зависимости от значения переменной age, которое мы получим во время выполнения кода. И затем запланируем использовать её когда-нибудь в будущем.

Если мы попробуем использовать Function Declaration, это не заработает так, как задумывалось:

Это произошло, так как объявление Function Declaration видно только внутри блока кода, в котором располагается.

Вот ещё один пример:

Что можно сделать, чтобы welcome была видна снаружи if? Верным подходом будет воспользоваться функцией, объявленной при помощи Function Expression, и присвоить значение welcome переменной, объявленной снаружи if, что обеспечит нам нужную видимость.

Такой код заработает, как ожидалось:

Или мы могли бы упростить это ещё сильнее, используя условный оператор:

Так когда использовать Function Declaration, а когда Function Expression?

Как правило, если нам понадобилась функция, нужно рассматривать синтаксис Function Declaration, который мы использовали до этого. Он даёт больше свободы в том, как мы можем организовывать код. Функции, объявленные таким образом, можно вызывать до их объявления.

Также функции вида function f(…) {…} чуть более заметны в коде, чем let f = function(…) {…}. Function Declaration легче «ловятся глазами».

…Но если Function Declaration нам не подходит по какой-то причине или нам нужно условное объявление (мы рассмотрели это в примере выше), то следует использовать Function Expression.

5. Что такое функции высшего порядка? Приведите примеры.

Функции высшего порядка — это функции, которые могут:

1. Принимать функции в качестве аргументов.
2. Возвращать функции как результат своей работы.

Вот встроенные функции высшего порядка в JavaScript:

• map() — применяет функцию ко всем элементам массива.
• filter() — фильтрует элементы массива на основе условия.
• reduce() — сводит массив к одному значению, применяя функцию.

6. Что такое Promise и какие бывают состояния?

Promise — объект в JavaScript, который представляет результат асинхронной операции. Промис позволяет обрабатывать результат операции, когда он станет доступным, вместо того, чтобы блокировать выполнение кода и ожидать завершения операции.

Промис может находиться в одном из трех состояний:

• Pending — исходное состояние промиса. Он находится в ожидании выполнения или отклонения операции.
• Fulfilled — промис переходит в это состояние, когда операция успешно завершается.
• Rejected — промис переходит в это состояние, когда операция завершается с ошибкой. Здесь промис возвращает причину ошибки.

Пример:

7. Как сравнивать в JS? Как сравнить два массива?

Когда вы сравниваете примитивные типы (числа, строки, булевы значения и т.д.), используются операторы == (нестрогое сравнение) и === (строгое сравнение).

== проверяет равенство значений после приведения типов.

=== проверяет как равенство значений, так и типов (без приведения типов).

При сравнении массивов в JavaScript важно помнить, что массивы — это объекты, и сравнение происходит по ссылке. То есть два массива будут равны только в том случае, если они указывают на одну и ту же ссылку в памяти.

Можно преобразовать массивы в строки JSON и сравнить их. Это удобный способ, но он имеет несколько ограничений (например, порядок элементов в массиве имеет значение).

Для более точного сравнения массивов (в том числе с вложенными структурами) можно пройтись по каждому элементу массива с помощью цикла for или методов every/some.

8. Чем отличаются any, unknown и never?

Основные различия:

• any: можно присваивать любые значения, без проверки типа.
• unknown: можно присваивать любые значения, но необходимо проверять тип перед использованием.
• never: тип для значений, которые не могут существовать, например, функции, которые не возвращают ничего.

9. Что такое CORS и как его можно решить на фронтенде?

CORS — механизм безопасности, который предотвращает доступ к данным с других источников. Чтобы решить проблемы с CORS:

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

10. Что такое Progressive Web Apps (PWA)? Зачем нужно?

Progressive Web Apps (PWA) — тип веб-приложений, который использует современные веб-технологии для предоставления пользователям опыта, схожего с нативными мобильными приложениями, но через обычный веб-браузер. PWA можно использовать в любом браузере, который поддерживает стандарты веба. Такие приложения могут работать оффлайн, присылать пуши, быстро загружаться и подстраиваться под любой браузер, который поддерживает эти фичи. Из примеров — банковские веб-приложения, которые можно установить на экран.

Вот главные особенности PWA:

• Работа в оффлайн-режиме (Offline-first). PWA используют Service Workers, которые позволяют веб-приложению работать даже без интернета. Это значит, что приложение может кешировать данные и ресурсы, обеспечивая доступность контента в оффлайн-режиме или при плохом интернет-соединении.
• Установка на устройство (Installable). PWA можно устанавливать на устройства как нативные приложения. При этом скачивать их из магазина пользователю не нужно.
• Push-уведомления. PWA могут отправлять push-уведомления — так пользователь может получать информацию, даже если приложение закрыто.
• Обновления. Приложения могут автоматически обновляться в фоновом режиме.
• Мгновенная загрузка. PWA загружаются быстрее, так как они используют кэширование ресурсов и данных через Service Workers — это улучшает производительность даже при медленном интернете.
• Универсальность. PWA работают на всех платформах (мобильные устройства, десктопы, планшеты) и в любых браузерах, которые поддерживают современные веб-стандарты (например, Chrome, Firefox, Safari, Edge и т.д.).

11. Lifecycle во Vue: когда использовать хуки жизненного цикла?

В Vue 2 жизненный цикл выглядит следующим образом:

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → Destroyed

В Vue 3 жизненный цикл был немного изменен и улучшен. Некоторые хуки переименованы:

beforeDestroy → beforeUnmount

destroyed → unmounted

Кроме того, в Vue 3 появилась возможность использовать Composition API, который предоставляет более гибкий способ организации жизненного цикла компонентов. Теперь можно создавать компоненты с помощью функции setup().

Когда использовать хуки жизненного цикла?

• beforeCreate и created используются для настройки данных, свойств или методов компонента до и после его создания.
• beforeMount и mounted полезны для операций, которые необходимо выполнить при рендере компонента (например, вызов API, настройка сторонних библиотек, или выполнение начальной логики).
• beforeUpdate и updated можно использовать для наблюдения за изменениями данных или для манипуляций с DOM до или после его обновления.
• beforeDestroy и destroyed (или beforeUnmount и unmounted в Vue 3) полезны для очистки ресурсов перед уничтожением компонента.

12. В каком компоненте отработает mounted вначале — дочернем или родительском?

В Vue.js хук mounted вызывается для компонента, как только его DOM вставляется в дерево DOM. Когда компонент — часть иерархии (например, родительский и дочерний компоненты), хуки жизненного цикла выполняются в определенном порядке.

Хук mounted будет вызван для дочернего компонента перед родительским.

Объяснение: родительский компонент инициирует рендеринг и монтирование дочернего компонента. Когда Vue монтирует компоненты, он сначала монтирует все дочерние компоненты, а потом родительский компонент. Это связано с тем, что родительский компонент ждет завершения монтирования дочерних компонентов, чтобы их правильно вставить в DOM.

13. Как изменить commit message

1. Изменить последний коммит

Если нужно изменить сообщение только последнего коммита, используйте команду:

git commit --amend

После этого Git откроет редактор, где вы сможете изменить сообщение коммита. Сохраните изменения и выйдите из редактора.

2. Изменить старый коммит

Если нужно изменить сообщение не последнего коммита, а более старого, можно воспользоваться rebase:

git rebase -i <commit_id>

Здесь <commit_id> — идентификатор коммита, сообщение которого вы хотите изменить. Можно использовать git log для получения ID нужного коммита. В открывшемся файле замените слово pick на reword напротив коммита, который хотите изменить, и сохраните файл. Git откроет редактор для изменения сообщения этого коммита. После редактирования сохраните и выйдите.

Завершите процесс rebase:

git rebase --continue

3. Изменить сообщение в уже отправленном коммите (Push)

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

Измените коммит с помощью git commit --amend или git rebase -i.

После изменения выполните принудительный пуш:

git push --force

Пожалуйста, перед собеседованием повторите CSS. Многие разработчики усиленно готовятся к технической сессии по JS, TS, своему фреймворку, но забывают о верстке. Если вам повезет работать над новым продуктом, то верстка будет занимать больше половины времени.

14. Что такое псевдоклассы в CSS? Как обратиться к псевдоклассу в JS?

Псевдоклассы в CSS — стили, которые применяются к элементам в зависимости от их состояния или структуры в документе.

В JavaScript нельзя напрямую изменить псевдоклассы, но можно использовать селекторы CSS для выбора элементов с псевдоклассами. Это делается с помощью методов по типу querySelector и querySelectorAll.

15. Что такое dvh, lvh, em и rem в CSS? Когда и почему лучше использовать каждую из этих единиц измерения?

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

• dvh (dynamic viewport height) — единица измерения, которая учитывает динамические изменения в размерах окна, например, высота при открытии клавиатуры на мобильных устройствах.
• lvh (large viewport height) — единица измерения, которая использует максимальную высоту вьюпорта, независимо от динамических изменений (например, не учитывает изменения, связанные с клавиатурой на мобильных устройствах).

Когда использовать:

• dvh полезен, когда нужно учитывать изменения размера окна при взаимодействии с мобильными устройствами (например, при открытии клавиатуры).
• lvh полезен для работы с мобильными устройствами, когда нужно обеспечить стабильный дизайн, не зависящий от изменения высоты вьюпорта из-за динамических изменений.
• em — это единица измерения, которая зависит от размера шрифта родительского элемента. 1em равен текущему размеру шрифта родительского элемента. Если в родительском элементе установлен шрифт размером 16px, то 1em будет равен 16px.
• rem — это единица измерения, которая зависит от размера шрифта корневого элемента (<html>). 1rem равен размеру шрифта, установленному на корневом элементе (по умолчанию в большинстве браузеров это 16px).

Когда и зачем использовать каждую из этих единиц?

• dvh/lvh: Используйте, если вам нужно учитывать динамическое изменение высоты вьюпорта (например, на мобильных устройствах при открытии клавиатуры) или если вам нужно работать с максимальной высотой вьюпорта, независимо от динамических изменений.
• em: Используйте, когда размеры элементов должны зависеть от размера шрифта родительского элемента. Это полезно для создания гибких и адаптивных макетов, которые изменяются с размером шрифта.
• rem: Используйте, когда нужно, чтобы размеры были относительно размера шрифта корневого элемента. Так проще поддерживать единообразие и легко масштабировать весь интерфейс.

Если вы знали ответы на все вопросы, поздравляем — можете гордо считать себя мидлом и смело ходить на собеседования. Если в каких-то вопросах плаваете, то подучите теорию и порешайте побольше задачек/почитайте код других разработчиков — тогда все получится.

По отзывам, Grok хорошо генерирует текст и даже может создавать изображения, используя образы известных личностей. Но есть нюанс: с цензурой у него как-то не задалось. Спустя пару дней после релиза пользователь X* @LinusEkenstam рассказал, что нейросеть выдала ему инструкцию по созданию химического оружия. Такую подробную, что даже в Breaking Bad бы позавидовали. Grok 3 не только составил пошаговый гайд и список для шопинга, но и с трогательной заботой напомнил про респиратор — дескать, безопасность превыше всего. Это в очередной раз вызвало шквал вопросов по поводу мер безопасности в компаниях техномагната.

Но какие возможности предоставляет Grok и так ли он хорош? Разберемся далее.

*Запрещен на территории РФ

Возможности Grok 3: код

В официальном блогпосте xAI говорится, что Grok 3 хорошо проявил себя в генерации кода. На тесте LiveCodeBench Grok 3 (Think) достиг 79,4% успеха, а Grok 3 mini показал ещё более лучший результат, набрав 80,4%. Grok 3 оснащен режимами размышлений и глубокого исследования, а также встроенным интерпретатором для исполнения кода.

На Reddit обсуждают его слабые и сильные стороны в кодинге: некоторые хвалят работу с нишевыми библиотеками на Rust, но многие критикуют модель за не самые выдающиеся результаты. Один пользователь отметил, что хоть Grok 3 и не дотягивает до Claude Sonnet 3.5, для некоторых задач он всё-таки лучше.

«Пока, судя по всему, не очень хорошо»

«Ерунда»

«Пользуюсь им уже 7 дней, и он УЖАСЕН!»

Возможности Grok 3: доступ

20 февраля доступ к Grok 3 стал бесплатным на неопределенное время («пока наши серверы не расплавятся»). Нейросеть доступна на grok.com.

После бесплатного тестирования придётся выложить $30/месяц или $300/год за SuperGrok. Для платных юзеров — плюшки в виде голосового режима и дополнительных запросов к «думающей» модели.

С доступом и базовыми возможностями разобрались. Перейдем к самому сладкому. Попробуем сгенерировать простые виджеты с помощью модели и сравнить их с результатами ChatGPT и DeepSeek.

Генерируем простые виджеты

Pomodoro-таймер

Cоздадим простой Pomodoro-таймер с классическим циклом: 25 минут работы и 5 минут отдыха. Логику и дизайн зададим в промпте:

Создай минималистичный виджет Pomodoro-таймера, который можно было бы вставить в Notion через embed (iframe). Таймер должен иметь классический режим (25 минут работы и 5 минут отдыха).

Используй градиенты с фиолетовыми, розовыми и голубыми оттенками на белом фоне, с закругленными углами и полупрозрачными элементами.

Виджет должен показывать, сколько времени пользователь проработал за день (например, 'Вы сегодня фокусировались 2 часа 15 минут'). Если таймер не запускался, то надпись не показывать. Таймер должен сбрасываться каждый день.

Интерфейсу необходимо иметь кнопки управления (старт и сброс).
Добавь также 10 мотивирующих надписей на русском языке, которые будут меняться каждые 5 минут после нажатия кнопки старт.

Grok сгенерировал код для виджета, используя HTML, CSS и JavaScript:

Также можно протестировать таймер прямо внутри интерфейса языковой модели:

Код был сопровожден инструкцией, как задеплоить виджет:

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

Однако код не был сопровождён комментариями. Но можно попросить добавить следующей итерацией:

Сравниваем виджеты с ChatGPT и DeepSeek

Сравним Grok со стабильным ветераном ChatGPT и дерзким новичком DeepSeek. Сначала протестируем ChatGPT-4o mini, используя тот же запрос:

Затем попросим DeepSeek сгенерировать свою версию:

Как справились с кодом

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

Grok 3:

• Самый сбалансированный вариант. Минимум избыточного кода, но не переключается на режим отдыха автоматически. Придется запускать вручную.
• Умная смена мотивации. Фразы переключаются последовательным перебором и не повторяются в рамках сессии, в отличие от случайного подбора, как в DeepSeek.
• Дополнительный плюс в карму за подробную инструкцию по вставке и внимание к тому, что при перезагрузке страницы таймер обнуляется. Так мы сразу сможем предусмотреть необходимые изменения, даже если не разбираемся в коде.

ChatGPT:

• Использует одну переменную для перехода между режимами и переключает их автоматически.
• Не сопроводил инструкцией и комментариями.
• Видимо, решил, что пользователи слишком избалованы мотивацией и пора приучать их к суровой реальности: мотивашки есть в коде, но с запуском таймера они не появляются. Оказалось, они срабатывают раз в 5 сессий, а не минут: if (sessionCount % 5 === 0 && sessionCount !== 0) {
• Ошибка сброса: нет логики проверки смены дня, а счётчик накапливается бесконечно.
• После остановки через сброс таймер не запускается заново, потому что startButton остаётся disabled. ИИ, который действительно заботится о нашем отдыхе!

DeepSeek:

• Немного перегружен логикой — два отдельных таймера для работы/отдыха, сложная система ежедневного сброса.
• Есть мотивашки, но они могут повторяться внутри сессии.
• Есть инструкция, но менее подробная, чем у Grok.
• Современный дизайн с полупрозрачными элементами, но белый текст на кнопках может быть плохо виден.
• При завершении сессии появляется всплывающее окно, что может раздражать.

Визуальный стиль

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

В идеале нейросеть могла бы сама предусмотреть что-то из этого, чтобы нам не пришлось думать:

• Прогресс при обновлении страницы — чтобы при перезагрузке или закрытии данные не терялись.
• Длина сессий — возможность менять длительность работы и отдыха.
• Паузы и возобновления — чтобы не приходилось сбрасывать таймер, если нужно прерваться.
• Таймаут обновлений общего времени — в некоторых случаях обновляется каждую секунду, но логичнее делать это после завершения сессии, чтобы минимизировать нагрузку.
• Всплывающие уведомления — напоминания о начале/конце сессии, если мы переключились на другую вкладку.
• Возможность звуковых уведомлений — сигналов о начале и конце сессии, с возможностью отключения, чтобы не мешали.
• Отслеживание продуктивности и графики прогресса — подсчёт и визуализация завершённых сессий за день, неделю, месяц.

Трекер кофе

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

Создай код для минималистичного, стильного и современного виджета на русском языке для отслеживания выпитого кофе, который можно будет встроить в Notion через embed (iframe).
Добавь графический индикатор с числом чашек кофе, который меняет цвет в зависимости от количества потребленного кофе:
- Светло-коричневый — для оптимального потребления (до 3 чашек).
- Темно-коричневый (ближе к красному) — для злоупотребления (больше 3 чашек).
- Красный — для значительного превышения нормы (больше 5 чашек).
Кнопки: кнопка «+» добавляет одну чашку кофе, кнопка «-» удаляет одну чашку кофе. Также добавь кнопку для сброса данных в конце дня.

Отображение текущего потребления кофе в количестве чашек должно обновляться в реальном времени и отображаться рядом с графическим индикатором.

Если потребление превышает 2 чашки, появляется мягкое предупреждение: «Похоже, ты уже выпил достаточно кофе на сегодня. Постарайся немного снизить потребление!», «Ты превысил норму кофе, давай попробуем уменьшить количество, чтобы избежать перегрузки!», «Осторожно! Ты уже немного переборщил с кофе. Лучше сделать перерыв!»

Если потребление превышает 3 чашки, предупреждения становятся более жесткими, а надпись и кнопки становятся красными: «Ты уже на грани, не переборщи с кофе, чтобы не повредить здоровью», «Кажется, ты выпил немного больше кофе, чем нужно. Пора остановиться!», «Ты уже достиг максимума кофе на сегодня. Помни, всё хорошо в меру!», «Прекрасно, что ты так любишь кофе, но сегодня лучше сделать паузу!», «Ты уже близок к пределу. Лучше ограничить кофе и попробовать что-то лёгкое!».

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

Grok 3

• Средняя оптимальность — много кода, но структурирован;
• Есть приятная анимация при нажатии кнопки;
• Хорошо следует инструкциям в запросе.

ChatGPT

• Другое расположение кнопок — прибавление справа выглядит логичнее;
• Самый компактный код, но предупреждения менее вариативны;
• Черный текст на индикаторе плохо читается, когда фон становится красным.

DeepSeek

• Нет цветового индикатора;
• Кнопка сброса оранжевая вопреки инструкции;
• Потерялась часть предупреждений при добавлении чашек выше нормы.

Вайб-кодинг откладывается?

Grok — свежий игрок, но со своими тараканами:

• UI-элементы выглядят лучше, чем у коллег — стилёвый дизайн, плюс автоматически добавляются анимации.
• Иногда бывают проблемы с отображением результата: нужно перезагрузить страницу, чтобы увидеть результат генерации.
• Хотели вайб-кодить? Придется потерпеть. В бесплатной версии есть лимит запросов и всего несколько попыток для «рассуждающего» режима. Если хотите большего — нужно оформить подписку, иначе вам предложат подождать.

ChatGPT — стабильный инструмент, но без магии: инструкции выполняет, но теряет нюансы и не блещет креативом.

DeepSeek ведет себя странно: то срабатывает идеально, то игнорирует детали задачи.

Все ИИ-помощники очень придирчивы к промптам:

• Не уточнили всё до мельчайших подробностей? Ждите сюрприз: кнопки разного размера и цвета, потерянные элементы. Попросили «закругленные кнопки»? Получайте круглые на 100%.
• Нужно нянчить и доучивать — лучше расписать ТЗ по пунктам или заранее выяснить у LLM, какая информация нужна.
• Сложный проект не создастся за 5 минут. В кейсах с виджетами ИИ зачастую не учитывал важные детали, например, сохранение данных при перезагрузке страницы. Нужно тщательно продумывать все пользовательские сценарии, учитывать возможные ошибки и вручную прописывать логику хранения данных и возможных взаимодействий в промпте.
• На десятой итерации всё может пойти не так — исправляешь одно (дорабатывая промпт), а ломается другое (модель путается в старых инструкциях). И это еще на фоне других ИИ-нюансов, типа нестабильной работы или галлюцинаций.
• Хорошо, что у всех трёх моделей есть интерпретатор, и можно сразу протестировать результат. Для новичков и тех, кто не слишком хорошо разбирается в коде, это вполне сойдёт.

А если вы опытный разработчик, стоит присмотреться к Cursor и Claude Sonnet 3.7 с его Claude Code — они больше заточены под копайлотинг и предлагают более продвинутые возможности.

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

Фреймворки и библиотеки для разработки интерфейсов

Создание фронтенда, то есть клиентской части программного продукта — неотъемлемый этап разработки сайтов и приложений. Фронтендеры работают с с HTML, CSS, JavaScript, а также используют многочисленные библиотеки с готовыми решениями. Даже новички в курсе, что без фреймворков проекты сегодня не пишутся — это долго, тяжело и непродуктивно. Ниже — наиболее эффективные фреймворки для разработки UI.

React.js

Созданная Джорданом Валке, ведущим программистом самой известной в мире соцсети, библиотека React остается лидером в сфере разработки инфраструктуры на JavaScript UI. На React.js написаны такие проекты, как Skype, PayPal, Airbnb, Dropbox и многие другие.

Популярность библиотеки объясняется вполне объективными причинами:

• Обширное комьюнити. Только на GitHub вы найдете больше 110 тыс. публикаций с тегом «react». Библиотекой пользуются во всем мире, а тысячи профессиональных программистов постоянно обновляют инструменты и актуализируют данные. Если у разработчика появится вопрос, он обязательно найдет на него ответ в сообществе.
• Технологический бэкграунд. Библиотеку создали профи из FB для себя — такие проекты делаются максимально качественно и надежно. Тот факт, что технологии доверяют крупнейшие мировые корпорации, говорит сам за себя.
• Активное взаимодействие с TypeScript. Этот инструмент представляет собой продвинутую версию JS, который со временем стал слишком тяжелым в плане кода. TypeScript лишен многих недостатков Java, поэтому активно применяется в React.js. В общем, в 2025 году фреймворк точно не умрет.
• Версионность. В React, в отличие от Angular или Vue, код, написанный даже несколько лет назад, без проблем запустится на новейшей версии. А если там есть неактуальный элемент, программа сама подскажет, как его исправить.

В React 19 появились новые, еще более мощные компоненты, повышающие производительность и пользовательский опыт:

• Улучшенная поддержка Server Components, с которой более удобно работать с серверным рендерингом и загружать контент в больших проектах;
• Новый API — Actions, который делает более простой и продуктивной работу с формами и интерактивными элементами;
• Директивы preload и preinit обеспечивают предварительную загрузку важных ресурсов, что ускоряет работу приложений;
• Новый канал релизов React Canaries позволяет протестировать некоторые опции React еще до их официального выпуска.

Улучшения произошли и в экосистеме React. Упрощается работа с Redux — библиотекой, которую все чаще используют в связке с React. Инструменты для работы с таблицами и интерфейсами React Table 8 более доступны и производительные.

Vue.js

Еще один мощный, но при этом простой и гибкий в применении инструмент для фронтенд-разработчиков — Vue.js. Согласно экспертным прогнозам, он сохранит свои позиции в топе-3 фреймворков для JavaScript в 2025 году.

Относительно недавно создатели Vue радикально обновили движок и архитектуру. При этом доля TypeScript кода в репозитории приближается к 99%, что расценивается профессиональными прогерами крайне позитивно.

Команда разработчиков Vue.js, возглавляемая Эваном Ю, в свое время заявила, что фреймворк станет самым простым и удобным инструментом из всех существующих. По мнению экспертов, их слова полностью подтвердились.

В числе главных преимуществ фреймворка:

• Подходит для новичков. Для освоения достаточно знания HTML, CSS, JavaScript;
• Небольшой вес. Размер новой заархивированной библиотеки runtime меньше 10 kb;
• В пакет входит виртуальный DOM — объектная модель документа;
• Активное крутое сообщество. Профессионалы помогут, если у разработчика возникнут проблемы.

Количество полноценных приложений, сделанных на Vue.js, превышает 36 тысяч. Это число постоянно растет, и в 2025 году тренд обязательно продлится. В экосистему внедряются новые технологии, например, Vapor Mode, — инструмент, открывающий новые горизонты для разработки высокопроизводительного софта.

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

Появление высокоуровнего фреймворка Nuxt 4 принесет важные улучшения в плане производительности и гибкости разработки. Поддержка Vue 3.3+ в Nuxt 4 улучшает работу с анимацией и межкомпонентные переходы. Пользовательский интерфейс становится более динамичным и плавным.

На фреймворке Vue созданы сайты Ozon, Zoom, Chess (сайт для шахматистов с посещаемостью 20 млн пользователей в месяц), Livestorm — платформа для запуска вебинаров, и многие другие ресурсы.

Angular

Этому мощному фреймворку доверяет Google, что уже говорит само за себя. Множество десктопных и мобильных приложений создано на AngularJS — это крутой инструмент с минимальным риском критических ошибок. На сайте фреймворка создатели призывают разработчиков сосредоточиться на приложениях, а код Angular берет на себя.

И хотя профи считают этот фреймворк более сложным в освоении, чем Vue и React, его функциональность оправдывает все трудности учебного процесса. В 2025 году эволюция Angular продолжится: его последние версии показывают существенные изменения в подходах к реактивности ПО и управлению состоянием.

Новые решения, на которые стоит обратить внимание:

• К числу ключевых нововведений фреймворка относится технология Signals, которая делает взаимодействие с реактивными данными более простым. «Сигналы» актуальны в том случае, когда требуется синхронное обновление UI и оптимизация производительности приложения.
• В Angular 19 компоненты Standalone стали новым стандартом. Теперь они могут использоваться без добавления в модуль. Такое решение упрощает архитектуру приложений и делает подход к коду более прямолинейным.
• Внедрение зависимостей (DI, Dependency Injection) дополнено новой функцией inject() — она заменяет стандартный конструктор, что также упрощает код и делает его более гибким.
• Автоматическая миграция продуктов к новому API — еще один шаг к упрощению и сокращению кода. Это напрямую отражается на производительности современных приложений, в первую очередь, на больших и логически сложных.

Прежние плюсы Angular остались неизменными — расширяемость, взаимодействие с другими фреймворками и инструментами, множество надстроек и дополнений — Auto Validate, Complete, Grid и т.д.

На фреймворке написан сайт британской газеты The Guardian, интерактивные элементы PayPal, самый посещаемый сайт мониторинга погоды Weather.com, фронтенд музыкального ресурса VEVO и многие другие продукты.

Svelte

В свое время фреймворк предложил принципиально новый подход к разработке пользовательских интерфейсов. Концепция создателей Svelte — делать больше с минимальными затратами. Некоторые разработчики считают Svelte больше компилятором, чем фреймворком, что по сути соответствует действительности.

В чем основные фишки Svelte:

• При меньшем весе проекты более производительны — им не требуется виртуальный DOM;
• Фреймворк прост в освоении, поэтому подходит начинающим разработчикам;
• Опытные прогеры обращают внимание на быстроту и стабильность инструмента;
• Анимации в Svelte доступны прямо из коробки — сторонние библиотеки не требуются.

На текущем этапе этот фреймворк рано ставить на одну ступень с React и Vue, но его рейтинг на GitHub постоянно повышается, и в 2025 году растущий тренд точно сохранится.

Фронтенд-разработкой с фреймворком Svetle пользовались такие компании, как Spotify, Ikea, Finance.yahoo, Music.apple и многие другие.

Solid.js

Минималистичный фреймворк, который по производительности и быстроте превосходит все остальные фреймворки из топа. Solid напоминает React, но вместо виртуального DOM использует компиляцию. Проект без проблем компилируется в JavaScript-код, что обеспечивает быстрый рендеринг страницы (трансформацию кода в картинку для пользователя).

В чем плюсы:

• Тонкая реактивность обеспечивает оптимизацию рендеринга в реальном времени;
• Есть бесшовная интеграция со всеми актуальными библиотеками на JS;
• Компоненты фреймворка — стандартные JavaScript-функции: они выполняются однократно для настройки представления, после чего автоматически обновляют интерфейс.

Solid.js, по состоянию на 2025, — идеальный инструмент для одностраничных приложений и продуктов с максимальной интерактивностью (чат-ботов, мессенджеров, панелей управления).

Фреймворк используют такие ресурсы, как 1c.ru, криптовалютная биржа Ape.pro, маркетплейс Майнкрафт Waypoint Studios и другие.

Инструменты для сборки и разработки

По мнению большинства экспертов, в 2025 году ведущим трендом в сборке и разработке на JavaScript будет работа с универсальными мета-инструментами, совместимыми с любыми фреймворками.

Топ наиболее эффективных инструментов этого направления:

• Vite. Локальный сервер разработки от Эвана Ю. В новой версии Vita 6 возможности существенно расширились, в том числе в плане поддержки других фреймворков, помимо Vue. Благодаря модульной архитектуре и новой системе плагинов, улучшилась кастомизация сборки (процесс внесения изменений). С Vite можно использовать несколько фреймворков в одном проекте — для сложных приложений это актуальная опция. Обновления в реальном времени происходят быстро и стабильно.
• Webpack. Сборщик модулей, который компилирует части кода в единый файл. Работает с JavaScript и TypeScript. Несмотря на появление новых инструментов сборки, в 2025 году Webpack останется обязательным инструментом, особенно для работы с масштабными проектами. Он оптимизирует размер и скорость загрузки ресурсов, эффективно выстраивает процессы разработки, в том числе HMR — горячую замену модулей. Плюс обеспечивает совместимость продуктов с различными версиями браузеров.
• Parcel. Главная фишка этого инструмента в том, что его не нужно настраивать и конфигурировать — это делается автоматически. Parcel применяет воркеры — скрипты для многоядерной компиляции, и содержит кэш файловых систем для ускоренной сборки. Есть поддержка из коробки JS, CSS, HTML, поэтому соответствующие плагины не требуются. Модули, которые меняются в процессе разработки, обновляются автоматически.

Тестирование и отладка

В 2025 году в тестировании и отладке продуктов наиболее востребованы следующие инструменты:

• Jest. Самый популярный фреймворк для тестирования кода на JavaScript. Работает с синхронным и асинхронным кодом, интегрируется с React и Vue. В числе основных плюсов — простая настройка и удобное применение. Подходит для проверки и отладки сложных приложений.
• Cypress. Инструмент для автоматизации тестирования, который подходит новичкам. Использует тест end-to-end, покрывая весь путь пользователя, и внедряется в CI/CD — процессы непрерывной доставки и развертывания. Благодаря подробной документации подходит для новичков.
• React Testing Library. Библиотека эффективных инструментов для тестирования пользовательских интерфейсов UI. RTL позволяет абстрагироваться от внутренней логики компонентов и проверяет состояние реального DOM, то есть имитирует действия пользователей, руководствуясь только данными браузера.
• Storybook. Позиционируется как максимально простое средство тестирования и разработки. Создает изолированную программную среду для ускоренного и эффективного процесса.

Инструменты для контроля версий

Актуальные в 2025 средства для контроля созданных разработчиками версий:

• Git. Распределенная VCS (система управления версиями) отслеживает изменения в исходном коде и файлах в совместных проектах. Позволяет править и контролировать версии в процессе разработки. Обладает расширенными возможностями работы с репозиториями.
• GitHub/GitLab. Службы управления репозиториями, которые используются и для управления изменениями в опенсорс-проектах. Оба репозитория обладают полным набором инструментов для контроля и интеграций, обеспечивая эффективную совместную разработку и неограниченное сотрудничество. Обладают встроенными опциями безопасности, которые разработчики могут в любой момент активировать.
• Bitbucket. Аналог GitHub с бесплатным доступом к контролю команды до пяти разработчиков. Подходит для написания частных проектов, обладает гибкостью, совместим со множеством других инструментов, в том числе с Jira, — средой для управления проектами. Интеллектуальный семантический поиск JQL сканирует код по запросу пользователя.

CSS-процессоры и CSS-фреймворки

Инструменты для первичной трансляции кода, актуальные в 2025 году:

• Sass. Препроцессор упрощает написание кода, исключая одинаковые участки или заменяя ключевые элементы синтаксиса одним знаком. Sass считается самым надежным языком расширений CSS, содержит средства импорта и множество других функций.
• Less. Этот препроцессор поддерживает CSS и позволяет разработчикам применять его методы для улучшения и дополнения веб-приложений. В Less встроены логические, строковые, математические функции, а также функции списков.
• Bootstrap. Классический фреймворк для ускоренной верстки со множеством встроенных компонентов. Более 20% всех сайтов в мире создано с его помощью. Автоматически выстраивает адаптивную сетку на базе Flex-модели, создает изображения, поставляется с панелями навигации и другими компонентами.
• Tailwind CSS. Фреймворк, который пользователи называют прогрессивной версией Bootstrap. Содержит обширный каталог утилитарных классов и инструментов для прототипирования, стилизации сайтов и приложений. Легко настраивается, работает с собственными служебными шаблонами, создает сложные адаптивные макеты, в том числе с ориентацией под мобильные устройства.

Инструменты для работы с API и серверной логикой

Эффективная работа с API обеспечивает надежность при обработке информации в приложениях.

В 2025 году топ таких инструментов выглядит следующим образом:

• GraphQL. Язык, описывающий взаимодействие клиента с сервером. Рассматривается как альтернатива стандартного инструмента REST. В сравнении с последним, более удобен в применении, содержит обширный инструментарий.
• Apollo Client. Язык запросов, созданный разработчиками FB. Интегрируется с GraphQL и React для управления состоянием приложения. Предоставляет эффективные инструменты в виде поддержки кэширования, управления состоянием и исправления ошибок. Интегрируется с библиотекой Redux и другими фреймворками.
• Axios. JS-библиотека для работы с HTTP-запросами, а по сути — клиент для работы в браузере и с платформой Node.js. Помогает настроить взаимодействие между frontend и backend.

UI и UX-дизайн

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

Эти инструменты сохраняют свою актуальность в 2025 году:

• Figma. Графический редактор, который остается самым популярным инструментом для проектирования интерфейсов, прототипирования и тестирования. Также это среда взаимодействия команды разработчиков, доступная непосредственно в браузере. Содержит удобные инструменты, может работать в режиме многозадачности.
• Adobe XD. ПО для работы с интерфейсами, анимированием, прототипами сайтов, сервисов и приложений от лидера индустрии. Основной инструмент UX-дизайнеров, желающих создавать юзабельные и современные макеты и делиться результатами работы с командой. Содержит многочисленные инструменты для рисования, создания 3D-эффектов, добавления интерактивных функций и анимации.
• Sketch. Выбор многих профессионалов индустрии UI/UX дизайна. Упрощает разработку интерфейсов благодаря множеству встроенных полезных функций — артбордов, редакторов, поддержкой командной работы в режиме онлайн. Работает только с macOS.

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

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

Рассказывайте в комментариях, какими фреймворками и библиотеками пользуетесь вы. А если хотите найти большей полезной информации про фронтенд — вам сюда.

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

Ключевые особенности

Виртуальная файловая система и команды

Term-Website поддерживает базовые команды, такие как:

• ls — просмотр содержимого папки;
• cd — переход между папками;
• help — список доступных команд и т.д..

Данные о файловой системе хранятся на стороне клиента в виде объектов JavaScript, что делает проект быстрым и удобным.

Темы и кастомизация

Пользователи могут менять оформление терминала, включая цветовые схемы, шрифты и стили. Это легко настроить через файл config.json, где можно:

• выбрать тему;
• задать имя пользователя;
• изменить доступные команды и их поведение.

Горячие клавиши

Проект поддерживает популярные сочетания клавиш:

• Ctrl + L — очистка экрана;
• Ctrl + C — отмена команды;
• Стрелки вверх/вниз — история команд.

Эти функции усиливают сходство с реальным терминалом.

Техническая реализация

Проект написан на TypeScript, а для создания интерфейса терминала используется библиотека xterm.js. Стилизация реализована с помощью HTML и CSS.

Term-Website полностью работает на стороне клиента, поэтому серверная часть не требуется. Это делает проект лёгким для развертывания и быстрой работы.

Примеры использования

1. Портфолио разработчика. Term-Website можно превратить в оригинальное портфолио. Например, интерактивный терминал может представить информацию о ваших навыках, проектах и достижениях.
2. Обучение и демонстрации. Подходит для обучения основам командной строки или демонстрации алгоритмов и программного кода.
3. Игры и развлечения. Добавив интерактивные задачи, проект можно превратить в игру или симулятор программирования.

Как начать?

Чтобы использовать Term-Website:

1. Склонируйте репозиторий:

2. Установите зависимости, если требуется

3. Откройте index.html в браузере, чтобы начать работу.

Совместно с экспертами агрегатора курсов Kursfinder я рассмотрела более 100 программ подготовки и собрала для вас подборку из 35 лучших курсов, доступных бесплатно и платно. Еще больше курсов по HTML/CSS вы найдете в каталоге нашего сервиса.

ТОП-11 лучших курсов по HTML и CSS: онлайн-обучение верстке в 2026 году

1. Курс «HTML и CSS» с нуля от Skypro – базовый курс с большим набором бонусов.
2. Курс «Фронтенд-разработчик» от Яндекс Практикум – углубленная программа обучения с возможностью выполнить работу от реального заказчика.
3. Профессия Frontend-разработчик PRO от Skillbox – большой курс, представленный в трех различных тарифах
4. Курс «Профессиональная вёрстка на HTML и CSS» от Яндекс Практикума – экспресс-курс для расширения набора навыков действующих специалистов.
5. Курсы по HTML от Skillfactory – большая подборка курсов от школы, из которой вы можете выбрать подходящий для себя образовательный трек.
6. HTML и CSS. Позиционирование от Хекслета – практический трек для самостоятельного обучения на тренажерах.
7. Профессия Frontend-разработчик от GeekBrains – расширенный курс с большими объемами практики и возможностью пообщаться с действующими разработчиками.
8. Онлайн-курс Вёрстка на HTML и CSS от Брунояма – экспресс-курс для дизайнеров и менеджеров проектов.
9. HTML/CSS от Otus – хороший базовый курс для трудоустройства и повышения своей профессиональной ценности.
10. Онлайн-курсы HTML и CSS для начинающих от Международной Школы Профессий – экспресс-курс для новичков, который позволит освоить базы.
11. Разработка сайтов (HTML, CSS, JS) от Фоксфорда – видеокурс для детей, на котором ребята смогут создать свои первые сайты и оформить портфолио.

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

Онлайн-курсы по HTML и CSS

1. Курс «HTML и CSS» с нуля | Skypro

Онлайн-курс по CSS/HTML, позволяющий с нуля освоить эти языки, научиться создавать сайты под любые устройства. Для обучения доступен только один тариф – «Индивидуальный». Он предполагает наличие встреч тет-а-тет с экспертом, на которых вы можете освоить что-то новое и получить ответы на возникшие в ходе обучения вопросы. Вместе с курсом вы сможете получить дополнительные уроки по английскому языку, а также возможность участвовать в разговорной практике в течение года бесплатно. В процессе и после окончания курса вам помогут с поиском работы специалисты из центра карьеры.

• Стоимость: от 7 558 руб./мес. в рассрочку на 3 года.
• Длительность: от 5 месяцев.
• Формат обучения: вебинары с экспертом, домашние задания, дополнительные материалы.
• Сертификат: диплом о переподготовке

Кому подойдет: новичкам без опыта в разработке.

Преимущества:

• доступ к разговорной практике в Skyeng год бесплатно;
• бонусный курс по нейросетям;
• быстрая проверка домашних работ;
• 10 индивидуальных встреч с наставником;
• учеба в малых группах;
• подготовка портфолио и резюме, карьерные консультации;
• неограниченный доступ к материалам курса;
• 4 урока по английскому для IT в подарок;
• регулярные групповые встречи с экспертами.

Недостатки:

• только дорогой индивидуальный тариф обучения;
• нет информации по дате начала обучения.

Программа обучения:

• HTML и CSS.
• Адаптивный дизайн.
• Переменные JavaScript.
• Командная разработка.
• Тестирование и отладка.

Ознакомиться с полной программой >>>

2. Курс «Фронтенд-разработчик» | Яндекс Практикум

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

• Стоимость: от 17 000 руб./мес. в рассрочку на 10 месяцев.
• Длительность: 10 или 13 месяцев.
• Формат обучения: теория в форматах текстов и видео, практика, проекты.
• Сертификат: диплом о переподготовке.

Кому подойдет: новичкам без опыта, которые хотят с нуля получить необходимые навыки и знания.

Преимущества:

• поддержка карьерного центра 7 месяцев после окончания курса;
• бесплатный курс по нейросетям;
• 2 тарифа на выбор: базовый и расширенный;
• 11-13 проектных работы для добавления в портфолио;
• возможность пройти стажировку, принять участие в оплачиваемом проекте;
• оперативная поддержка;
• практическое задание от компании в ходе обучение.

Недостатки:

• размер платежей по рассрочке достаточно высокий, но есть возможность оформить кредит;
• поддержка по трудоустройству носит преимущественно консультационный характер, предоставляется без каких-либо гарантий.

Программа обучения:

• HTML и CSS.
• Адаптивный дизайн.
• JavaScript.
• TypeSript и ООП.
• React.
• Роутинг и авторизация.
• Тестирование.

Ознакомиться с полной программой >>>

3. Профессия Frontend-разработчик PRO | Skillbox

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

• Стоимость: от 4 738 руб./мес. в рассрочку на 9 месяцев.
• Длительность: 9 месяцев.
• Формат обучения: теория в формате видео, вебинары, отработка практики на домашних заданиях, проектах, в тренажерах.
• Сертификат: есть.

Кому подойдет: новичкам в IT и тем, кто хочет освоить профессию разработчика с нуля.

Преимущества:

• программа регулярно обновляется в соответствии с требованиями работодателей;
• 56+ работ для портфолио;
• карьерная помощь;
• персональная проверка работ с обратной связью;
• обучение приближено к реальной работе;
• работа над коммерческими проектами;
• командная работа;
• доступ поиску заказчиков в Скил Маркете;
• 3 тарифа обучения на выбор.

Недостатки:

• индивидуальные консультации доступны только в «Оптимальном» и «Продвинутом» тарифах;
• высокая стоимость обучения по «Продвинутому тарифу».

Программа обучения:

• Погружение в веб-разработку.
• Веб-верстка.
• JavaScript.
• Продвинутые курсы на выбор.

Ознакомиться с полной программой >>>

4. Курс «Профессиональная вёрстка на HTML и CSS» | Яндекс Практикума

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

• Стоимость: от 19 500 руб./мес. в рассрочку на 3 месяца.
• Длительность: 3 месяца.
• Формат обучения: теория в форматах текстов и видео, практика, проекты.
• Сертификат: есть.

Кому подойдет: дизайнерам, бэкенд-разработчикам, менеджерам.

Преимущества:

• тренажер для отработки навыков с 250+ задачами;
• первые 15 часов программы можно изучить бесплатно;
• дополнительные материалы по каждой теме;
• скидка 20% при единовременной оплате;
• 7 проектов для портфолио;
• написание кода с первых уроков;
• вебинары с наставниками с ответами на вопросы;
• развернутая обратная связь по проектам;
• доступна оплата за счет работодателя.

Недостатки:

• редкий набор групп;
• размер платежей при покупке курса в рассрочку или необходимость оформить кредит.

Программа обучения:

• Семантика и лэйаут.
• Доступность и интерактив.
• Дизайн и адаптивность.
• Красотища.

Ознакомиться с полной программой >>>

5. Курсы по HTML | Skillfactory

Подборка из курсов обучения HTML с нуля, в которой вы сможете найти программы под разные задачи: стать Fullstack- или Frontend-разработчиком, пантестером или попробовать сразу 9 востребованных IT-профессий. Программы отличаются по длительности, форматам обучения. Примечательно, что доступны курсы интенсивного обучения, которые в 4 раза быстрее стандартных. С ними получить новую профессию можно всего за 3 месяца.

• Стоимость: от 2 650 руб./мес. в рассрочку на 3 года.
• Длительность: зависит от выбранного курса.
• Формат обучения: зависит от выбранного курса.
• Сертификат: есть.

Кому подойдет: новичкам без опыта в разработке, которые хотят обучиться программированию.

Преимущества:

• большой выбор образовательных программ под разные цели;
• есть интенсивные курсы, которые можно пройти в сжатые сроки;
• скидка до 60% и 4 курса в подарок;
• есть возможность пройти курс по профориентации;
• разные дополнительные языки программирования для разработки в комплекте.

Недостатки:

• часть программ отличается достаточно высокой ценой, в том числе, из-за сокращенного срока рассрочки;
• не все курсы в подборке посвящены HTML.

Программа обучения:

• Зависит от выбранного курса.

Ознакомиться с полной программой >>>

6. HTML и CSS. Позиционирование| Хекслет

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

• Стоимость: 3 900 рублей в месяц по подписке.
• Длительность: 5-8 недель, в зависимости от скорости освоения материалов.
• Формат обучения: уроки в формате видео и текстов, упражнения и проверочные тесты.
• Сертификат: нет.

Кому подойдет: тем, кому нужно повысить свои навыки работы с HTML и CSS.

Преимущества:

• недорогой курс, который доступен по подписке вместе с другими курсами Хекслет;
• нет ограничений по времени прохождения программы (кроме времени действия подписки);
• даже после отмены подписки сохраняется доступ к теории;
• работа над собственным проектом;
• обратная связь от поддержки по урокам;
• большое разнообразие форматов обучения.

Недостатки:

• курс для самостоятельного освоения;
• достаточно простая практика, без разбора сложных задач.

Программа обучения:

• Позиционирование элементов.
• Flex и Grid.
• Адаптивный сайт.
• Проектная работа.

Ознакомиться с полной программой >>>

7. Профессия Frontend-разработчик | GeekBrains

Программа обучения HTML с нуля, в которой содержится более 100 практических работ и 9 проектов для портфолио. Она доступна в одном из трех форматов обучения, которые отличаются объемами консультаций с кураторами, а также дополнительными подарками. Например, в максимальном тарифе, вы сможете получить дополнительную профессию в подарок, пообщаться с действующими тимлидами. Независимо от выбранного тарифа, школа гарантирует трудоустройство или возврат денег.

• Стоимость: от 3 285 руб./мес. в рассрочку на 3 года.
• Длительность: 9 месяцев.
• Формат обучения: теория в формате видео, вебинары, практические задания и работа над проектами для портфолио.
• Сертификат: есть.

Кому подойдет: тем, кто хочет освоить профессию разработчика с нуля.

Преимущества:

• можно обратиться за бесплатной консультацией со специалистом по выбору профессии;
• живое общение с экспертом;
• 115 практических работ и 9-11 проектов для портфолио;
• задания от Хабр Фриланс и компаний-партнеров для практики;
• возврат денег, если не смогли найти работу с помощью Карьерного центра;
• 3 тарифа обучения на выбор;
• большой выбор бонусов, который зависит от выбранного тарифа.

Недостатки:

• «Базовый» тариф практически без поддержки;
• время проведения вебинаров может быть не всегда удобным.

Программа обучения:

• Верстка.
• JavaScript.
• TypeScript.
• Курсы на выбор.

Ознакомиться с полной программой >>>

8. Онлайн-курс Вёрстка на HTML и CSS | Бруноям

Экспресс-курс, который позволит вам пройти обучение верстке на HTML и CSS, расширить свои профессиональные навыки. Программа доступна в трех тарифах обучения, которые отличаются по объемам взаимодействия с наставником. Если вы хотите учиться самостоятельно, то можно хорошо сэкономить на стоимости курса. Независимо от выбранного тарифа обучения, вы можете проходить уроки в удобное для вас время. Для всех студентов предусмотрена поддержка карьерного центра и помощь с трудоустройством.

• Стоимость: от 1 491 руб./мес. в рассрочку на 1 год.
• Длительность: 3 месяца.
• Формат обучения: уроки в формате видео, практические задания и поддержка наставника.
• Сертификат: есть.

Кому подойдет: менеджерам проектов, UX/UI-дизайнерам.

Преимущества:

• обучение в любое время;
• поддержка наставника в течение года;
• хорошая скидка за раннюю оплату;
• помощь Центра карьеры;
• практика на большом проекте;
• вечный доступ к программе обучения;
• 3 тарифа на выбор.

Недостатки:

• помощь наставника не предусмотрена в тарифе «База»;
• непонятно, почему группы набирают к определенной дате, если обучение по видео.

Программа обучения:

• Введение в веб.
• Git.
• HTML.
• CSS.
• Многоколоночные макеты.
• Figma.
• Позиционирование.
• Формы обратной связи.
• Адаптивность и кроссбраузерность.
• Анимации.

Ознакомиться с полной программой >>>

9. HTML/CSS | Otus

Онлайн-курс, который отличается большими объемами взаимодействие с экспертами. Каждый урок – это «живое» общение с преподавателями, после которого вас ждет домашнее задание. Проверка практических задач проводится с индивидуальным разбором от экспертов. Для студентов доступно размещение резюме в закрытой базе OTUS, а также посещение карьерных мероприятий.

• Стоимость: от 5 040 руб./мес. в рассрочку на 10 месяцев.
• Длительность: 4 месяца.
• Формат обучения: прямые эфиры с экспертами, практические задания, работа над проектом.
• Сертификат: есть.

Кому подойдет: базовый курс для желающих получить новую профессию. Подойдет веб-дизайнерам, желающим самостоятельно воплощать свои макеты в жизнь, владельцам бизнеса, которые хотят научиться формировать ТЗ на разработку правильно.

Преимущества:

• постоянное взаимодействие с экспертами;
• работа над выпускным проектом;
• карьерные мероприятия и закрытая база резюме от OTUS;
• преподаватели – эксперты с многолетним опытом;
• можно посетить бесплатные вебинары и оценить качество обучения;
• доступно корпоративные программы.

Недостатки:

• старт нового потока проводится не очень часто;
• вебинары проходят по понедельникам, средам в 19:00 по Мск, что может быть неудобно для жителей Востока России.

Программа обучения:

• Введение в веб.
• Макеты.
• Адаптивный дизайн.
• Верстка.
• Библиотеки.
• Работа над проектами.

Ознакомиться с полной программой >>>

10. Онлайн-курсы HTML и CSS для начинающих | Международная школа профессий

Интенсивный курс, который поможет вам освоить основы HTML и CSS. Каждый урок – это занятия с экспертом-практиком. У вас всегда будет возможность задавать вопросы преподавателю. В программе уделяется большое внимание практической составляющей, чтобы вы могли быстро научиться применять на практике все то, чему вас научили. За счет гибкого графика, вы сможете посещать занятия в удобное для вас время. Дополнительно возможно смотреть уроки в записи.

• Стоимость: 8 500 рублей.
• Длительность: 3 недели.
• Формат обучения: онлайн-вебинары, домашние задания.
• Сертификат: есть.

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

Преимущества:

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

Недостатки:

• диплом специалиста выдают только на продвинутом тарифе;
• ограниченное количество мест.

Программа обучения:

• HTML.
• CSS.
• Макеты.
• Адаптивная верстка.
• Анимации.

Ознакомиться с полной программой >>>

11. Разработка сайтов (HTML, CSS, JS) | Фоксфорд

Онлайн-курс для детей, который поможет освоить азы профессии разработчика сайтов. Программа доступна в формате видеоуроков, поэтому ребенок сможет заниматься в удобное для него время. Ребенок сможет собрать свое первое портфолио, состоящее из 5 проектов. Большая часть обучения – практические задания, которые позволят не только лучше усвоить полученные знания, но и закрепить материалы, самостоятельно применить их в жизни.

• Стоимость: от 7 950 рублей.
• Длительность: 48 ак. часов.
• Формат обучения: видео в записи и практика.
• Сертификат: нет.

Кому подойдет: детям от 10 лет.

Преимущества:

• недорогой курс;
• можно получить пробный доступ бесплатно;
• бесплатные материалы и тренажеры;
• хорошая скидка при оплате всего курса;
• ребенок разработает 5 проектов для портфолио;
• развитое сообщество единомышленников;
• много практики.

Недостатки:

• поддержка работает не круглосуточно;
• нет связи с преподавателями.

Программа обучения:

• Знакомство с профессией.
• HTML.
• CSS.
• JavaScript.

Ознакомиться с полной программой >>>

Еще 18 курсов по HTML и CSS: онлайн-обучение верстке

Навыки HTML и CSS актуальны в различных сферах. В этой подборке представлены дополнительные курсы для изучения этих инструментов.

• Основы HTML и CSS от Контур.Школы — онлайн-курс, сочетающий теорию и тестирования для более плавного погружения в тему. В программу входят не только видеоуроки, но и лонгриды для самостоятельного изучения в комфортном темпе. Вариант подойдет для тех, кто хочет освоить инструменты с нуля или только систематизировать уже имеющиеся знания. Обучаясь на платформе, слушатели узнают, как учитывать особенности страниц в процессе разработки, использовать все возможности CSS для создания дизайна страниц и др.
• Буткемп: Разработай сайт на HTML, CSS, JS от Фоксфорда — программа для детей, включающая в себя 4 занятия. Юные слушатели, под руководством преподавателя, смогут разобраться в основах верстки на HTML и CSS.
• Создание сайтов на языках HTML, CSS, JavaScript для детей от Pixel — программа подготовлена для слушателей в возрасте от 12 лет. Курс структурирован, он разбит на модули, каждый из которых включает в себя 12 занятий. Обучение ведется в небольших группах, отбираемых по возрасту слушателей. Это делает образовательный процесс более плавным и комфортным. Преподаватели дадут навыки веб-разработки с такими инструментами, как JavaScript, а также HTML и CSS.
• CSS Flexbox - полный курс и практика его использования от PurpleSchool — курс, в основу которого легли актуальные данные и изменения. Изучая видеоуроки и выполняя практические задания, слушатели смогут получить навыки верстки на CSS Flexbox, создания сложных сеток при работе с веб-сайтами. Также преподаватели углубятся в темы дизайна и позиционирования элементов. Для обучения доступно три разных тарифа.
• HTML и CSS - полный курс по вёрстке с нуля от PurpleSchool — онлайн-курс, ориентированный на новичков. В рамках обучения слушатели смогут узнать больше о верстке сайтов. Также эксперты-практики дадут навыки работы с Figma, верстки на CSS Grid, CSS Flexbox и др. Программа доступна в трех тарифах.
• Next.js 14 - с нуля, React TypeScript, Hooks, SSR и CSS Grid от PurpleSchool — программа обучения, основанная на актуальных данных и требованиях от работодателей. Обучаясь на платформе, слушатели получат навыки разработки приложений на Next.js 14 и React. Кроме того, студенты смогут лучше понимать особенности работы SSR и создания веб-сайтов, ориентированных на СЕО. Для слушателей подготовлены сотни уроков с конспектами, а также практические упражнения, позволяющие отработать полученные знания и навыки. Тестирования, также включенные в программу, позволяют оценить уровень знаний по каждой из тем. Курс доступен в трех тарифах.
• Основы веб разработки CSS от Знанио — онлайн-курс, позволяющий получить знания и навыки, необходимые для создания сайтов с применением CSS. Преподаватель расскажет об особенностях инструмента CSS в среде веб-разработки. Также эксперт углубится и в более сложные понятия: анимация, адаптивная верстка и др.
• Основы веб разработки HTML от Знанио — авторская программа, подготовленная экспертом-практиком. Обучаясь на платформе, слушатели получат навыки, необходимые для создания сайтов на HTML. Также студенты разберутся в особенностях языка HTML и стилизации различных элементов с помощью CSS. Программа включает в себя несколько тематических модулей, изучив их, выпускники получают сертификат.
• Frontend-разработчик: сайты на HTML/CSS/JavaScript от Coddy School — программа, подготовленная для слушателей в возрасте от 11 до 14 лет. На платформе доступно как индивидуальное обучение, так и работа в небольших группах. Такой формат обеспечивает плавное погружение и эффективность. Преподаватели познакомят юных слушателей с HTML и CSS. А также углубятся в базы данных, CMS и даже Adobe Photoshop. Пройти курс можно как в онлайн, так и оффлайн формате. Для слушателей доступно бесплатное пробное занятие, оно поможет определиться, подходит ли программа для дальнейшего изучения.
• Frontend-разработчик от Eduson Academy — программа, направленная на профпереподготовку слушателей. Обучаясь на платформе, студенты получают поддержку персонального куратора на всех этапах. Эксперты-практики помогут в освоении навыков адаптивной и кроссбраузерной верстки на HTML и CSS. Также преподаватели научат программировать на JavaScript, применять систему Git, использовать фреймворки и др. На платформе используется интерактивный формат обучения: лекции, тренажеры, тестирование и скринкасты. Программа доступна в трех разных тарифах.
• Курс «Frontend-разработчик» от Kata Academy — курс, рассчитанный на 9 месяцев изучения. Преподаватели помогут освоить стек, который будет востребован в различных компаниях. Изучив материалы, студенты смогут работать с типами данных в JavaScript, выполнять работу с компилятором tsc, реализовать функции и др. В обучении делается большой упор на практику. Кроме того, у студентов есть возможность поработать над проектами для пополнения портфолио.
• Профессия: Frontend разработчик от ProductStar — курс, разработанный на основе актуальных данных. Программа подготовлена специально на новичков, людей без без опыта, а также представителей смежных профессий. Преподаватели расскажут, как применять возможности HTML, CSS и Figma во фронтенд-разработке. Дополнительно студенты узнают, как работать с JavaScript, выполнять тестирование сайтов и приложений, работать над сложными проектами и др. В программе делается большой упор на практику, приближенную к реальным задачам. Также курс включает в себя онлайн-воркшопы и работу над проектами, которыми можно пополнить портфолио.
• Профессия Frontend-разработчик PRO от Skillfactory — универсальная программа, подходящая как для новичков, так и для практикующих IT-специалистов. В качестве основных инструментов фронтенд-разработки преподаватели рассмотрят HTML, CSS, а также JavaScript. Дополнительно, для оптимизации рабочих процессов, преподаватели научат работать с фреймворками Next.js и др. Большая часть программы – полезная практика.
• Специализация Frontend-разработчик от Skillfactory — курс, рассчитанный на получение необходимых навыков с нуля. В рамках освоения творческой IT-профессии, студенты изучат такие инструменты, как HTML, CSS, JavaScript, а также API, Git и др. Эксперты расскажут, как создавать страницы с адаптивным дизайном, применять фреймворки для работы с самыми сложными проектами и др. Студентам предоставляется возможность поработать над разноплановыми проектами для отработки навыков и пополнения портфолио.
• Frontend-разработчик от Нетологии — программа, в которой делается большой упор на практический формат обучения. Преподаватели-практики дадут навыки по проектированию интерфейсов веб-сайтов, приложений с применением функциональных возможностей HTML, CSS и JavaScript. Одним из преимуществ обучения на платформе является возможность поработать над совместными проектами с дизайнерами, это обеспечивает плавное погружение в рабочую сферу.
• Фронтенд- разработчик с нуля от Merion — курс, рассчитанный на изучение новичками. В рамках программы слушатели смогут в полной мере погрузиться в профессию фронтенд разработчика, освоив такие инструменты, как HTML, CSS и JavaScript. Кроме того, преподаватели расскажут, как работать с макетами, делать адаптивные сайты и др. Курс включает в себя не только теоретические материалы, но и разнообразные лабораторные работы и практические задания. Кроме того, у слушателей есть возможность поработать над проектами для пополнения своего портфолио. Асинхронный формат обучения позволяет получать новые знания в комфортном темпе.
• Онлайн‑курс HTML и CSS. Профессиональная вёрстка сайтов от HTML Academy — онлайн-курс для новичков, желающих быстро освоить профессиональную верстку сайтов. Для слушателей подготовлена не только актуальная и структурированная теоретическая составляющая, но и насыщенная практика, ревью кода от ведущих экспертов. В рамках обучения студенты откроют для себя такие инструменты, как HTML, CSS, JavaScript, а также React и др. Кроме того, студенты смогут поработать над проектами для отработки полученных знаний и навыков.
• Онлайн‑курс HTML и CSS. Адаптивная вёрстка и автоматизация от HTML Academy — программа, позволяющая в сжатые сроки получить навыки востребованного специалиста. Преподаватели-практики дадут понимание основ с помощью углубленной теории. Кроме того, в программу включена практика и ревью кода. В рамках занятий вы сможете освоить все нужные для работы инструменты.

Бесплатные курсы по HTML и CSS: онлайн-обучение верстке

HTML и CSS – языки веб-программирования, применяемые верстки страниц сайтов. Данная связка открывает широкие функциональные возможности для разработки. В этой подборке представлены бесплатные курсы по HTML и CSS.

1. Бесплатный курс CSS: онлайн обучение с нуля — Code Basics

Бесплатный курс по CSS, подготовленный для новичков в сфере разработки. Обучаясь на платформе, слушатели откроют для себя возможности каскадных таблиц стилей. Начиная с введения, студенты изучат такие темы, как применение HTML и CSS, наследование стилей, классы и др. Курс включает в себя несколько модулей, посвященных стилю текста, блочным элементам, расположению элементов и др. Для получения доступа ко всем материалам и отслеживания прогресса в обучении необходимо зарегистрироваться на платформе, однако попробовать силы можно и без регистрации.

Главное о курсе:

• для изучения подготовлены структурированные текстовые материалы;
• программа включает в себя отработку практики в браузере.

2. Бесплатный курс по HTML и CSS: обучение для начинающих во frontend — Result University

Программа создана для новичков, а также специалистов, желающих открыть для себя основы фронтенд-разработки. Знакомство с такими инструментами, как HTML и CSS позволяет сделать первый шаг к профессии фронтенд-разработчика. В рамках курса слушатели узнают, как устроен HTML, как работать с текстом, различными элементами. Дополнительно слушатели смогут попробовать свои силы в написании кода для создания структуры страницы. Также студенты откроют для себя функциональные возможности CSS: синтаксис, селекторы, работа с цветом, оформлением текста и др. Для изучения материалов потребуется в среднем 2 недели.

Главное о курсе:

• программа включает в себя работу над итоговым проектом;
• студенты получают навыки необходимые для трудоустройства.

3. Frontend-разработка: основы HTML, CSS и JavaScript — Нетология

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

Главное о курсе:

• в программу включена работа над итоговым проектом для закрепления навыков;
• есть домашние задания.

4. Веб-разработка для начинающих: HTML и CSS — Stepik

Курс, подготовленный командой экспертов-практиков. Обучение направлено на новичков без опыта. В рамках изучения программы, студенты познакомятся аспектами создания веб-страниц с применением HTML и CSS. Преподаватели познакомят с тегами, атрибутами HTML, углубятся в вопросы структуры документа, работы с медиа элементами. Также слушатели смогут узнать о синтаксисе CSS, особенности работы со шрифтами, цветом, фоном и др.

Главное о курсе:

• в программе предусмотрены практические задания и работа над выпускным проектом;
• включает в себя выдачу сертификата.

5. Бесплатный курс по HTML: обучение html верстке для начинающих — Code Basics

Программа познакомит слушателей с ключевыми основами верстки HTML. Студенты смогут погрузиться в темы оформления текстовых материалов, работе с типографикой. Курс включает в себя несколько модулей, посвященных изучению основ разметки, работе с текстом, медиа элементами и др. Для изучения всего материала потребуется в среднем 10 часов. Программа включает в себя структурированные лекции в текстовом формате, приступать к их изучению можно в любое комфортное время. Для изучения всех материалов и отслеживания прогресса необходима регистрация на платформе, однако начать можно и без нее.

Главное о курсе:

• предусмотрена практика в браузере;
• прохождения обучения необходимо пройти регистрацию на платформе.

6. Основы современной верстки — Хекслет

Программа, созданная на основе актуальных материалов. В рамках изучения слушатели познакомятся с основами верстки веб-сайтов с применением HTML. Преподаватели расскажут о разметке, а также углубятся в функциональные возможности стандарта HTML5. В качестве дополнения эксперты дадут базовые навыки стилизации и работы с текстом с применением CSS. Данная программа может быть полезна для веб-разработчиков. За счет асинхронного формата изучения, получать новые знания и отрабатывать практические навыки можно в комфортном темпе.

Главное о курсе:

• структурированные лекции в текстовом формате;
• предусмотрен тренажер для отработки практических навыков.

F.A.Q

Сколько времени требуется, чтобы стать разработчиком HTML и CSS?

HTML и CSS являются достаточно простыми, интуитивно понятными языками, особенно если вы неплохо владеете английским. Освоить особенности верстки с помощью этих языков можно с нуля в достаточно сжатые сроки. Для этого может потребоваться 2-3 месяца. Если же вы хотите не только понять, как верстать сайты, заниматься их оформлением, но и добавлять интерактивные элементы с помощью JavaScript и стать полноценным Frontend-разработчиком, то на обучение необходимому минимуму потребуется около года.

Трудно ли стать разработчиком HTML и CSS?

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

Стоит ли учиться на курсе разработчика HTML и CSS?

Определенно да. Навыки, полученные на курсе можно не только монетизировать в сети, но и использовать для улучшения собственных проектов. Умение верстать сайты может пригодиться не только профильным специалистам, например, разработчикам и дизайнерам. Любой эксперт, который предлагает свои услуги (репетитор, дизайнер, бьюти-мастер и т.д.), может создать для себя интересный и уникальный сайт с помощью этих языков. Мы уже не говорим и о том, что с помощью HTML/CSS вы сможете создать собственный e-commerce сайт, сделать его привлекательным и интересным для потенциальных и постоянных покупателей.

Смогу ли я совмещать работу и обучение?

Большинство программ обучения HTML/CSS и даже полные профессиональные курсы Frontend/Web-разработки построены таким образом, что от вас не потребуется уделять учебе по 6-8 часов ежедневно. Вы сможете заниматься в комфортном темпе, поэтому проблем с обучением не возникает. Более того, многие школы предлагают удобные мобильные приложения для обучения, что позволит вам учиться в любом месте, например, по дороге на работу/учебу.

Кто будет помогать на платформе во время обучения?

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

Хватит ли проектов в портфолио по окончании обучения?

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

Действуют ли программы рассрочки?

Практически все школы предоставляют программы рассрочки. Не все они бывают комфортные, например, короткий срок рассрочки потребует вносить высокие платежи ежемесячно. Большая часть школ дает рассрочку через партнерские банки, но есть и такие, которые работают без банков. Например, Яндекс Практикум предлагает рассрочку от себя. Однако ее нужно выплатить за время обучения, поэтому платежи часто доходят до 20 тысяч рублей ежемесячно.

Какой документ я получу после окончания курса?

Зависит от формата, длительности и особенностей обучения, а также от имеющегося у вас образования. Если вы решите освоить полноценную профессию, то вам могут предоставить диплом о профессиональной переподготовке. Если вы хотите расширить свои компетенции, то вы сможете получить удостоверение о повышении квалификации. Такие бумаги выдаются только на основе имеющегося впо или спо. Если же у вас нет диплом вуза или ссуза, то вам выдадут свидетельство или сертификат о прохождении курса.

Смогу ли я найти работу после обучения?

Большинство сервисов не только предлагает обучение и практику, работу над собственным проектом, но и помощь в трудоустройстве/выходе на фриланс. Более того, некоторые школы дают гарантию трудоустройства или возвращают деньги. В среднем, школы заявляют, что 69-80% студентов находят работу как в течение курса, так и в первые 3 месяца после его окончания.

Заключение

Специалисты, которые владеют HTML/CSS могут работать как на фрилансе, так и работать на конкретную компанию или веб-студию. Уровень их зарплат во многом зависит от стека технологий, которыми они владеют. Например, верстальщики, которые работают только с HTML/CSS после курсов могут получать зарплату в диапазоне 40-130 тысяч рублей (по данным hh.ru). Если же доучиться на фронтенд-разработчика, то нижняя планка зарплаты установится на уровне 100 тысяч рублей в месяц, а верхняя – поднимется до 490 тысяч рублей.

Нашли неточности или ошибки в нашем рейтинге? – Расскажите, пожалуйста, об этом в комментариях. Так же дайте знать, если учились на каких-то курсах, которые не попали в подборку, я проверю и добавлю их в наш топ.

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

Почему это важно?

Долгие годы веб-разработчики сталкивались с тем, что вертикальное центрирование было настоящей головной болью.

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

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

Меньше кода — больше результата

Теперь с align-content ситуация коренным образом изменилась.

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

Уязвимость связана с функцией «First Contact Safety Tip», которая предупреждает получателей в Outlook при получении письма с неизвестного адреса.

Обход предупреждений безопасности

Аналитики Certitude, обнаружившие эту уязвимость, сообщили о своем открытии Microsoft, но компания пока не приняла мер по устранению проблемы.

Функция «First Contact Safety Tip» предназначена для оповещения пользователей Outlook при получении писем от новых контактов. Она выводит сообщение: «Вы не часто получаете письма от xyz@example.com. Узнайте, почему это важно».

Скрытие предупреждения

Главная особенность этой функции заключается в том, что предупреждение добавляется к основному тексту HTML-письма, что открывает возможность для манипуляций с использованием CSS, встроенного в письмо.

Certitude обнаружила, что можно скрыть это сообщение безопасности, изменив CSS, как показано ниже:

Подобные изменения делают предупреждение невидимым для получателя письма.

Certitude также нашла способ добавить HTML-код, который подделывает иконки, добавляемые Outlook к зашифрованным/подписанным письмам, чтобы они выглядели более безопасными.

Реакция Microsoft

Certitude отправила Microsoft доказательство концепции этих техник и подробный отчет через Microsoft Researcher Portal (MSRC). Однако, Microsoft ответила:

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

На момент публикации Microsoft не дала дополнительных комментариев по поводу своего решения не устранять риск немедленно.

Кстати, вы можете проверить свои знания: попробуйте угадать, для чего нужна та или иная Python-библиотека.

Гайд написан владелицей Django-сайта. Если вам интересно, как пересесть с nocode-CMS вроде WordPress на самописную админку, посмотрите эту статью.

Универсально для всех фреймворков

Даже если не все инструменты понятны и нужны сразу, сохраните этот листинг в закладки: тогда тулы вроде gunicorn станут «на вырост».

• pillow: библиотека для работы с изображениями.
• psycopg: один из лучших адаптеров PostgreSQL для Python.
• python-dateutil: расширение для стандартного py-модуля datetime.
• boostrap-icons: npm-пакет с иконками, прикручиваемый к HTML-темплейту.

• tzdata: утилита с информацией о временных зонах.
• urllib3: для выполнения запросов к веб-серверам.
• requests: одна из самых популярных библиотек для HTTP-запросов на Python.
• sqlparse: форматирование и парсинг SQL-запросов.
• text-unidecode: транслитерация из Unicode в ASCII.

• pandas: библиотека для работы с табличными данными.
• certbot: бесплатные SSL-сертификаты.

• plotly: дизайнерские графики с тонкой настройкой почти любого аспекта.

• FastAPI: современный, быстрый веб-фреймворк для создания API.
• pytest: быстрее способа писать тесты для ваших функций просто нет.
• gunicorn: сервер для запуска Python веб-приложений.

• six: библиотека для совместимости кода между Python 2 и 3.

• PyYAML: человекочитаемый формат конфигов.

Для подобных файлов Python нужен отдельный коннектор

• wheel: ускоряет установку библиотек и модулей.
• charset-normalizer: управляет кодировкой текста.

Помимо прочего, обеспечивает совместимость с разными браузерами и спасает от вредоносного кода, отправляемого через формы.

• idna: обработка доменных имен с интернациональными символами.

• typing-extensions: аннотация типов для разных версий Python.

Инструмент позволяет, например, на Python 2, использовать аннотацию типов крайней версии языкового пакета.

• cryptography: шифрование, хэширование — защита ваших данных от третьих лиц.

Прочитать зашифрованное сообщение без «ключа» у хакера не получится.

• fsspec: унифицирует обращение с файлами вне зависимости от ОС.
• MarkupSafe: безопасное отображение HTML/XML-текста.
• python-slugify: создание коротких дружелюбных URL.

Django-мастхэв

• django-tailwind: интеграция CSS-фреймворка Tailwind с Django.
• django-tinymce: интеграция WYSIWYG-редактора TinyMCE.

• django_mathjax: пакет для встраивания MathJax.

Вжух! И читатель увидит следующее:

• django-orm: переключение между SQLite и PostgreSQL.
• django-js-asset: управление зависимыми от JavaScript файлами.

Заключение

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

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

Мне не хочется обманывать новоприбывших, что переписывать под новую библиотеку весь код — нормально. Это ресурсоемко и больно. Тем более, если это ваш пет-проект, и на него приходится разыскивать время.

Если вас как веб-разработчика порадовал какой-то новый питонический инструмент, способный потеснить укоренившиеся решения, поделитесь в комментариях.

В этом выпуске мы поговорим с Сергеем Совой — пишет о фронтенд-разработке на effector в своём тг-канале «Сова пишет...», записывает подкасты и запустил образовательную программу frontend.vision.

Как прошла неделя? Над чем работаешь в последнее время?

На этой неделе я работаю над screenstory.io и ещё одним крупным проектом с той же командой. Мы готовим большую фичу, и для её реализации выбрали SSR на Cloudflare Serverless, так как у него самый вменяемые инструменты. Но условный Fastify не поддерживает инфраструктуру Cloudflare, выбрал itty-router, чтобы сохранить роутинг между serverless и локальным fastify сервером.

Какая из последних IT новостей запомнилась больше всего? Почему?

Do you still need Framer Motion? - Motion One Blog

Меня радует, что современные стандарты CSS развиваются в сторону большей мощности. Недавно появились Container Queries, а уже сейчас более 70% браузеров их поддерживают.

С какой сложной задачей ты столкнулся в последнее время и как её решил?

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

Что из музыки или подкастов слушал на неделе?

Мои вкусы очень специфичны, на этой неделе переслушивал Tove Lo, Nelly Furtado, Eminem, Lady Gaga.

Что почитать? Поделиcь своей рабочей литературой или для досуга

Я не перестану советовать Питера Уоттса, его роман «Ложная слепота» отзывается во мне последнее время. Вы вообще видели новости AI и какие оптимизации когнитивных моделей появляются в статьях у исследователей?

Топ-3 инструмента для работы

С 2021 года я пользуюсь Linear.app для рабочих и личных проектов, отличный инструмент планироания и декомпозиции.

Активно использую Morgen.so вместо стандартного календаря, так как есть возможность перетащить задачи из Linear прям на календарь, в виде Time Blocking.

И недавнее открытиее — Finch, где отслеживаю дневную рутину. Это такое Self Care приложение с приятной геймификацией.

Какие планы на выходные или что можешь посоветовать из досуга?

Обычно не строю планов на выходные, но на неделе сыграл с друзьями в легендарную партию DnD. Занятие не для каждого, но именно эта партия заставила меня пережить довольно широкий спектр эмоций!

Как итог — любимый IT-мем недели!

Это была новая рубрика на Tproger, где мы рассказываем об интересных нам людях, которые развивают IT-сообщество. Если у вас есть идеи, кого бы вы хотели видеть в следующем выпуске, дайте нам знать!

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

В качестве примеров я буду использовать свой сайт на Django.

Если вы хотите перейти с nocode-сайта на самописный, изучите пошаговый гайд по миграции на Python Django.

Что такое margin и padding

Как я уже сказала, в CSS для управления пространством между элементами используются два ключевых свойства:

Большая разница между ними в том, что margin автоматически сворачивается, а padding — нет.

Margin

Чтобы задать внешние отступы со всех сторон, указываем их размер в пикселях (или в других юнитах):

Кстати, вот основные единицы измерения в CSS для повторения:

• px (пиксели): 1px соответствует одному экранному пикселю;
• cm / mm / in: санти- / миллиметры, дюймы;
• em: относительно шрифта родительского элемента. Например, если шрифт родителя 16px, то 2em будет равно 32px;
• rem: относительно шрифта корневого элемента. Если размер корневого шрифта 16px, то 2rem будет равно 32px;
• % (проценты): относительно родительского элемента. Например, если ширина родителя 1000px, то 50% будет 500px;
• vh / vw (viewport height / width): 1vh равен 1% от высоты области просмотра (viewport);
• vmin / vmax: 1vmin / 1vmax равен 1% от меньшего / большего из двух измерений (ширины или высоты) области просмотра.

Отдельные значения для каждой стороны задаются постфиксами top / right / bottom / left:

Центрирование

Чтобы разместить посередине блоковый элемент горизонтально, можно использовать постфиксы left / right:

Перекрытие соседей

Иногда требуется сдвинуть элемент ближе к соседу:

↑ Как меняется положение текстовых блоков, если margin = 0 или < 0.

Padding

Вот основной способ задания внутренних отступов:

Отдельные значения для каждой стороны задаются аналогично: постфиксами top, bottom, right, left. В целом синтаксис почти одинаковый.

Значение padding можно задавать также в процентах относительно ширины родительского элемента, что полезно для адаптивного дизайна.

Почему не работает margin

Убедитесь, что элемент является блочным, поскольку margin «дружит» только с блоками (div, p, h1-6, ul, ol. li, table, header, footer, section, article, nav).

Margin добавляет пространство вне родительского элемента

Решение: дописываем свойство overflow:auto к div’у страницы.

Как увеличить пространство между колонками в таблице?

Внедряем padding-right:

margin дочернего элемента двигает родителя

Обновляем свойства второго:

Заключение

Эти свойства CSS создателям удалось сделать прозрачными и без подводных камней: по статистике, треды на Stack Overflow на эти темы закрываются быстрее других топиков.

На последок: с визуализатором блоков в Chrome Dev Tools вёрстка стилей значительно проще.

Чем занимаются фронтенд-разработчики

Фронтенд-разработчик пишет интерфейс — ту часть сайта или приложения, с которой взаимодействуют пользователи. Задача специалиста — сделать его максимально понятным и комфортным для них.

Фронтендер отвечает за то, чтобы все элементы интерфейса были на своих местах и работали как надо: меню, кнопки и формы обратной связи, корзины, карточки товаров (и это далеко не весь список).

Какие навыки нужны специалистам

Самый распространенный список хард скиллов выглядит так:

• HTML — формирование структуры страницы;
• CSS — добавление цветов, позиционирование элементов, анимации и прочее.
• JavaScript и TypeScript — добавление «интерактивности», элементов, которые решают задачи пользователя прямо в браузере.
• фреймворки, например, React или Vue — разработка полноценных веб-приложений.

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

Важнейшие навыки — умения общаться и вставать на место пользователя

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

И только когда эти потребности четко сформулированы, можно переходить к коду.

Чтобы создать максимально комфортное приложение, потребуется работать вместе с дизайнерами, аналитиками, бэкенд-разработчиками, тестировщиками и другими участниками команды. Можно поискать хорошие решения у коллег по цеху. Фронтенд — достаточно открытая сфера, и многие разработчики с радостью делятся своими решениями в статьях и докладах. Или даже выкладывают исходный код проектов на GitHub.

Еще нужно постоянно быть в курсе изменений

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

Например, когда-то сайты были простыми, легковесными страницами. Для их разработки использовали HTML, CSS и немного JavaScript-кода. Но требования к интерфейсам росли, больше логики переносилось на клиентскую часть — доля JS начала расти и появились фреймворки, которые помогали делать самостоятельные веб-приложения.

В процессе выросло время загрузки сайта, поскольку загрузка и выполнение JavaScript-кода гораздо дороже для браузера, чем работа со статическим HTML. Чтобы вернуть время до показа пользователю контента к прежним показателям, возникла техника SSR (Server Side Rendering), которая позволяет выполнить большую часть логики формирования интерфейса на сервере. Она оказалась особенно актуальна для сайтов, на которых пользователь в первую очередь получает какую-либо информацию, а не взаимодействует с интерфейсом: сайты со статьями и новостями, лендинги и так далее. И появились метафреймворки (например, Next.js). Они позволили структурировать код так, чтобы в браузер отправлялось минимальное количество JavaScript при той же функциональности.

В противовес появилась технология PWA (Progressive Web Application), которая оказалась полезна сложным интерактивным приложениям (приложения банков, графические редакторы или интернет-магазины). Она позволила устанавливать веб-приложения на смартфоны или планшеты и пользоваться ими вне браузера, порой даже без интернета.

Сколько зарабатывают фронтендеры

По данным «Хабр Карьеры» зарплаты фронтенд-разработчиков составили в среднем 150 тысяч. Джуниоры в России в среднем получают 60 тысяч, специалисты уровня мидл — 150+ тыс. руб. в месяц, а сеньоры — 280+ тыс. руб.

Стажеры получают около 40 тысяч.

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

Куда можно расти

Из фронтенда можно вырасти в другие специальности — не особо меняя стек технологий. Например, если перейти с React DOM на React Native, можно перейти с фронтенда в мобильную разработку. И не нужно учить новый язык и кардинально менять навыки.

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

Подробнее о пути развития фронтенд-разработчика вы можете узнать в статье «Что должен уметь Frontend разработчик (+Roadmap)».

Фронтенд-разработка тесно связана с DevOps. Если вы хотите расширить свои навыки и работать в динамичной среде, обратите внимание на вакансию Devops-инженера в Островок — travel-tech компанию. Этот опыт поможет вам лучше понять взаимодействие между разработкой и эксплуатацией.

И пара советов напоследок

1. Слушайте тематические подкасты, например:

• «Веб-стандарты» — здесь обсуждают тренды, актуальные технологии. Это мастхэв для фронтенд-разработчика.
• «Подлодка» — про IT целом. Очень полезен, чтобы расширить кругозор.

2. Посещайте профильные конференции и митапы: HolyJS; Frontend Conf; Я 💛 Фронтенд.

3. Читайте тематические ресурсы:

• Популярный в русскоязычном сегменте Habr.
• dev.to — похожий на Хабр англоязычный ресурс.
• Дока — русскоязычная энциклопедия про веб-технологии. Весь контент и исходный код есть в открытом доступе на GitHub и поддерживаются сообществом. Так что любой может внести свой вклад в ее развитие.
• MDN — справочник преимущественно на английском языке. Русскоязычная версия обновляется с задержкой, поэтому советуем прокачать язык.

4. Проходите профессиональное обучение. Могу посоветовать курс «Профессия Фронтенд-разработчик», который мы делали вместе со Skillbox.

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

В этой статье мы рассмотрим стилизацию участков текста с помощью CSS Custom Highlight API, а также изучим практическую сторону создания диапазонов выделения.

Обозначение орфографических и грамматических ошибок красивой волнистой линией в текстовых редакторах, таких как Google Docs, Word или Dropbox Paper — яркий пример стилизации отдельно взятых частей текста. Однако стилизовать отдельные участки нужно не только для того, чтобы указать пользователю на ошибки в текстах. Это полезно и во многих других случаях: например, в визуализации специфических данных в отчётах, обозначении частей кода и даже в образовательных целях, когда нужно выделить информацию на странице.

Еще одна распространенная задача — создание функции поиска и выделения текста, когда пользователь ввёл текст в поле поиска. Нажмите Ctrl/⌘+ F в веб-браузере прямо сейчас и введите что-нибудь и вы увидите, как текст из этой статьи будет подсвечиваться.

Недавно я наткнулся на статьи, в которых рассказывалось, как решить эту задачу. Я захотел разобраться в этой теме и адаптировал статьи на русский язык. Подробно я остановился на вещах, которые мне показались наиболее сложными и важными.

CSS Custom Highlight API расширяет концепцию других псевдо-элементов выделения, таких как ::selection, ::spelling-error, ::grammar-error, и ::target-text. Он предоставляет способ создания и стилизации произвольных Range-объектов, не ограничиваясь диапазонами, определяемыми браузером.

Используя CSS Custom Highlight API, вы можете создавать текстовые диапазоны и выделять их, не влияя на структуру DOM на странице. Я считаю, что в этом главный плюс этого инструмента.

Кстати, Kata Academy набирает студентов на обучение JavaScript. Это отличная возможность, так как вы не платите за обучение, пока не устроитесь Javascript-разработчиком! Подробности здесь → Курс по JavaScript-разработке от Kata Academy.

Оформление

Чтобы оформить диапазоны текста на веб-странице с помощью CSS Custom Highlight API, нужно выполнить четыре шага:

1. Создать Range-объекты.

2. Создать Highlight-объекты для этих диапазонов.

3. Зарегистрировать выделения с помощью HighlightRegistry.

4. Стилизовать текст с помощью псевдоэлемента ::highlight().

Дальше я подробно остановлюсь на каждом из этих процессов.

Создание Range диапазонов

Первый шаг — указание текстовых диапазонов, которые нужно стилизовать. Для этого мы создаём объекты Range в JavaScript. Взгляните на пример ниже:

Создание Highlight-объектов для диапазонов

Следующий этап — организация инстанций Highlight-объектов для ваших текстовых диапазонов. Highlight — это программа, применяемая для создания набора диапазонов, которые будут стилизованы на веб-странице.

Несколько диапазонов могут быть связаны с одним выделением. Если вы хотите выделить несколько фрагментов текста одним и тем же способом, вам нужно создать одно выделение и инициализировать его соответствующими диапазонами, как показано в примере.

Регистрация выделений с помощью HighlightRegistry

После создания выделений, их надо зарегистрировать с помощью HighlightRegistry, которая доступна как CSS.highlights. CSS.highlights — это объект, напоминающий структуру класса Map, он позволяет регистрировать выделения с уникальными идентификаторами.

В приведённом выше фрагменте кода строки "user-1-highlight" и "user-2-highlight" — это пользовательские идентификаторы, которые можно использовать в CSS для применения стилей к зарегистрированным выделениям.

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

Стилизация с помощью псевдоэлемента ::highlight()

Последний шаг — стилизация зарегистрированных выделений. Это делается с помощью ::highlight() псевдоэлемента.

Например, для стилизации user-1-highlight, зарегистрированного на предыдущем шаге, код будет таким:

Результат

Как и ::selection, подмножество свойств CSS может использоваться только с ::highlight() псевдоэлементом:

• background-color
• caret-color
• color
• cursor
• fill
• stroke
• stroke-width
• text-decoration (который, вероятно, будет поддерживаться только во второй версии спецификации)
• text-shadow

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

Пример с выделением результатов поиска

В этом примере показано, как использовать CSS Custom Highlight API для выделения результатов поиска.

Давайте рассмотрим, как этот механизм может использоваться на практике.

Сделаем текст с выделением результатов поиска.

Приведённый ниже фрагмент HTML-кода определяет поле поиска и статью с несколькими абзацами текста:

Для прослушивания input-события в поле поиска используется JavaScript. При запуске события код находит совпадения для введённого текста. Затем он создает диапазоны для совпадений и использует CSS Custom Highlight API для создания и регистрации search-results объекта highlight:

Наконец, ::highlight() псевдоэлемент используется в CSS для оформления выделений:

Результат:

Заключение

Итак, действительно ли CSS Custom Highlight API лучший инструмент для стилизации отдельных диапазонов текста? Да, конечно.

Во-первых, даже если CSS Custom Highlight API поначалу может показаться немного сложным (необходимость создавать диапазоны, выделять и затем регистрировать их и, наконец, стилизовать), это всё равно намного проще, чем делать это без CSS Custom Highlight API. Чтобы выполнить эту задачу без этого инструмента, разработчику нужно выделять отдельные участки текста, создавать новые элементы DOM и вставлять их в нужные места. Такой способ требует больше времени у разработчика.

Что ещё более важно, браузерные движки могут стилизовать эти диапазоны очень и очень быстро. Причина, по которой с псевдоэлементом ::highlight() разрешено использовать только подмножество свойств CSS, заключается в том, что это подмножество содержит только те свойства, которые могут быть применены браузером эффективно и без необходимости воссоздавать макет страницы. Выделение диапазонов текста путём вставки новых элементов DOM на страницу вокруг них требует от движка гораздо большей работы.

Несмотря на возможности CSS Custom Highlight API, стоит обсудить и потенциальные проблемы. Одна из них — различная поддержка браузерами, что может вызвать конфликты в разработке. Кроме того, некоторые более сложные стилистические приёмы могут быть недоступны или требуют сложных решений.

Надеюсь, эта статья была полезной для вас. Спасибо за внимание.

Источники

CI/CD-инструменты

CI/CD-инструменты позволят автоматизировать сборку исходного кода и процессы поставки. Разработчики теперь могут воспользоваться уже написанными скриптами сборки, в один клик перенося свои проекты с Git-репозиториев. Технология оповещения о новых событиях на сервере (вебхуки) позволяет реализовать еще больше сценариев автоматизации. По событиям в GitVerse можно вызвать через API сторонние сервисы. Например, при определенных событиях в репозитории можно запустить сторонний сборочный конвейер или отправить уведомление в мессенджер.

Новые функции персонального AI-ассистента разработчика GigaCode

Теперь AI-ассистент поможет разработчику решать задачи, связанные с кодом, в окне чата непосредственно в среде разработки. Сервис чата также доступен и в GitVerse, где при просмотре репозитория можно получить объяснение, что делает та или иная часть кода, а также советы по его улучшению. Список языков программирования, которые поддерживает GigaCode, пополнил Ruby, а также стала доступна генерация текстовых данных в формате JSON. На сегодняшний день AI-ассистент поддерживает уже более 15 популярных языков программирования и устанавливается как плагин в привычные среды разработки, включая IDEA, PyCharm, VSCode, Jupyter.

Функциональность для организаций

Теперь разработка на GitVerse доступна не только индивидуальным разработчикам, но и малым и средним предприятиям. Компании могут организовать совместную работу команды и управлять доступами к своим репозиториям.

При разработке новой функциональности мы учитываем пожелания пользователей, добавляем необходимые инструменты, чтобы они могли вести разработку еще проще и быстрее. С каждым релизом платформа будет становиться все более удобной и пополняться новыми популярными репозиториями, open source-версиями продуктов и инструментами для эффективной разработки. Будущее разработки мы видим в создании удобной среды по принципу единого окна, в которой все члены команды могут работать на своем этапе производственного процесса, заказывать облачную инфраструктуру и общаться. На всех этапах разработки партнерскую роль будет занимать AI: помогать писать код, советовать, как сконфигурировать стенд, готовить документацию, подсказывать шаги по CI/CD-конвейеру

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

• новые инструменты для управления проектами, позволяющие удобно организовывать рабочие процессы;
• интегрированная среда разработки позволит разворачивать полностью настроенные инструменты разработки в облаке. Функциональность будет доступна прямо из браузера: разработчик сможет легко и быстро открыть любой репозиторий GitVerse в среде разработки;
• новые функции GigaCode: генерация тестов, автоматическое создание документации и умный рефакторинг. Число языков, которые поддерживает GigaCode, пополнят PHP, HTML, CSS, Markdown и Rust;
• инструменты для безопасной разработки (оркестрация CI/CD, статический анализатор, управление секретами и безопасность зависимостей);
• удобный и безопасный вход через популярные сервисы идентификации личности, а также мобильная версия платформы.

Реклама Реклама АО “Сбертех” ИНН 7736632467, LjN8KXJG3

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

Если вы хотите присоединиться к числу экспертов и прислать ответ от вашей компании или лично от вас, то пишите на experts@tproger.ru, мы расскажем, как это сделать.

В Интернете можно найти множество платных онлайн курсов от разных школ, которые за 1-6 месяцев сделают из вас frontend-разработчика, однако HTML и CSS вполне можно выучить бесплатно. Раньше для этого были нужны бумажные книги (по ним как раз я училась), но сейчас кроме книг вся необходимая информация есть в Интернете. Однако надо понимать, что ознакомительные курсы предоставляются бесплатно, а вот продвинутую часть придется собирать по кусочкам из разных источников.

С чего начать

Большинство онлайн-школ предоставляют базовый курс изучения HTML и СSS бесплатно, такие курсы можно найти у htmlacademy.ru, ru.hexlet.io, wayup.in, itproger.com, stepik.org. Рекомендую выбрать несколько школ и пройти их бесплатные курсы, чтобы получить общее представление о верстке.

После того, как база пройдена – можно ознакомиться с более сложными курсами и полезными статьями на тему CSS, HTML.

• У htmlacademy есть блог https://htmlacademy.ru/blog, где рассматриваются разные моменты создания сайтов как простые, так и сложные.
• А у Хекслет есть сайт https://code-basics.com/ru с бесплатными базовыми курсами не только по CSS&HTML, но и по разным языкам программирования.
• https://webref.ru, https://html5book.ru, https://doka.guide – это сайты- справочники, на которых также есть бесплатные учебные курсы по HTML, CSS и JS.
• Если вы хорошо владеете английским, то вам пригодится сайт https://www.w3schools.com/ - где есть много информации с примерами и видео.

Что насчет видео

Если вам проще воспринимать информацию из видео, то вам подойдут youtube-каналы:

• https://www.youtube.com/@WebCademy
• https://www.youtube.com/@LectorWeb
• https://www.youtube.com/@Glo_Academy

Но даже если просто вбить в поиск YouTube фразу «изучение html css с нуля» - вам предложат более 20 плейлистов по самообучению верстке.

А что дальше

После изучения основ HTML и CSS, стоит также изучить язык программирования JavaScript и jQuery, потому что без анимации полноценно создавать сайты не получится.

Обязательно ознакомьтесь с популярными системами управления сайтами (CMS) – Wordpress, Joomla, Битрикс, Tilda, так как именно эти системы вам с большой вероятностью встретятся при поиске работы или фриланса.

Дальнейшее обучение будет более специализированное – фреймворки, препроцессоры, программирование, продвижение (СЕО), дизайн и т.д.

Главное в обучении – интересовать этим и не бросать на половине пути. И тогда у вас всё получится! Удачи!

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

Если вы хотите присоединиться к числу экспертов и прислать ответ от вашей компании или лично от вас, то пишите на experts@tproger.ru, мы расскажем, как это сделать.

Вот, о чём идёт речь в видео:

1. В CSS существует два способа создания анимаций: переходы (transitions) и анимации (animations).
2. Переходы используются для плавного изменения свойств при взаимодействии пользователя, например, при наведении курсора.
   
3. Анимации позволяют контролировать анимацию по кадрам с помощью ключевых кадров (keyframes) для создания сложных анимаций.
   
4. Для создания перехода необходимо указать свойства transition: transition-property, transition-duration, transition-timing-function и transition-delay.
   
5. Можно использовать сокращенную запись свойства transition, объединяя все параметры перехода.
   
6. При изменении нескольких свойств можно использовать ключевое слово 'all' в свойстве transition для применения анимации ко всем свойствам.
   
7. Для создания анимации необходимо определить ключевые кадры с помощью синтаксиса @keyframes и задать параметры анимации: animation-name, animation-duration и другие.
   
8. Свойство animation-fill-mode определяет, как стили из ключевых кадров применяются до и после выполнения анимации.
   
9. Можно использовать сокращенную запись свойства animation, объединяя все параметры анимации.
   
10. Для повышения удобства использования и избежания жесткой привязки анимации к элементам можно создавать утилитарные классы с анимацией.
    
11. Создание утилитарных классов позволяет создать свою мини-библиотеку анимаций и использовать их в различных элементах HTML.
    
12. Примеры анимаций включают движение влево (slideInLeft), вправо (slideInRight), вращение (rotate) и отскок (bounce).
    
13. Свойство transform-origin позволяет изменять точку, относительно которой происходит трансформация (например, вращение).
    
14. Использование процентов в @keyframes дает больший контроль над промежуточными состояниями анимации.
    

Ниже — транскрибированный перевод ролика на русском языке.

Существует два способа создания анимаций в CSS: переходы и анимации. Переходы ждут изменения свойства и затем позволяют этим изменениям происходить со временем.

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

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

Переходы в CSS

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

Я также использовал немного JavaScript, чтобы отслеживать положение мыши и перемещать кольца к мыши, создавая эффект туннеля. Этот пример едва затрагивает то, что возможно с анимациями, и в этом видео я расскажу вам обо всех основных концепциях анимации в CSS, которые вам нужно знать, чтобы начать творчески подходить к созданию красивых анимаций CSS для ваших собственных проектов. Чтобы создать переход, сначала нам нужен компонент, который имеет изменение свойства. В моем HTML у меня есть кнопка с классом button. В моем CSS у меня есть стили для кнопки, и у меня также есть состояние наведения. Все, что это делает, перемещает нашу кнопку на 10 пикселей вверх, когда мы наводим на нее курсор. Мы видим, что именно происходит, но это происходит немедленно.

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

В нашем состоянии наведения мы используем только свойство transform, поэтому здесь мы можем сказать transform. Длительность перехода определяет, сколько времени займет эффект перехода. Я установлю его на 0,3 секунды. Функция времени перехода определяет кривую ускорения для перехода.

Общие возможные значения, которые можно использовать здесь, - это ease in, easeOut, EaseInOut, Linear и Ease, который является значением по умолчанию. Задержка перехода определяет задержку перед тем, как должен начаться переход. Я хочу, чтобы мой переход начался в тот момент, когда элемент наведен, поэтому я устанавливаю этот параметр на 0 секунд. Когда мы наводим на нашу кнопку, мы видим, что кнопка перемещается на 10 пикселей вверх со временем, и это намного лучше, чем раньше, но в нашем коде мы можем вместо использования этих четырех свойств использовать сокращенное свойство перехода. В свойстве перехода мы можем установить те же значения, которые мы передали в наши четыре свойства, а также в том же порядке. Так что transform, 0,3 секунды, ease и задержка 0 секунд. Наведя на нашу кнопку, мы видим, что это отлично работает, но мы можем еще больше сократить наш код. Если у нас задержка 0 секунд, то мы можем ее полностью удалить. Кроме того, ease - это функция времени по умолчанию, поэтому мы также можем ее удалить.

Теперь, когда мы наводим на нашу кнопку, мы видим, что она все еще отлично работает. Иногда у вас может быть более одного изменяемого свойства. Например, возможно, при наведении я хочу, чтобы цвет фона совпадал с цветом рамки.

И также, возможно, я хочу, чтобы цвет текста был белым. Когда я навожу на свою кнопку, единственное свойство, которое имеет эффект перехода, - это transform. Поэтому я могу внутри свойства перехода через запятую перечислить различные свойства, которые я хочу анимировать. Свойство цвета фона с длительностью 0,3 секунды и свойство цвета с длительностью 0,3 секунды также. Теперь, когда я навожу на свою кнопку, все анимируется, но вернемся к нашему коду: если бы у меня было более трех свойств в нашем состоянии наведения, перечисление каждого свойства через запятую заняло бы много времени, особенно если они имели бы одинаковую длительность, функцию времени и задержку.

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

Анимация в CSS

В моем HTML у меня есть элемент с классом Heading1. Чтобы анимировать этот заголовок, я могу перейти к моему файлу CSS и добавить ключевой кадр. Синтаксис для этого - at keyframes и фигурные скобки.

Между ключевыми кадрами и фигурными скобками идет название нашей анимации. Я назову ее slide in left. Внутри фигурных скобок идет сама анимация.

Я хочу, чтобы мой заголовок находился слева на экране, а затем скользил в свое исходное положение. Для этого мне нужно определить правила от начала до конца анимации. Внутри фигурных скобок я могу добавить значения from и to. From представляет начало анимации или 0% завершено, и 2 представляет конец анимации, или 100% завершено.

У обоих есть фигурные скобки. Я хочу, чтобы анимация началась на 300 пикселей влево, поэтому внутри фигурных скобок from я могу добавить трансформацию translateX минус 300 пикселей. Затем внутри фигурных скобок two я могу добавить трансформацию translateX и установить ее в ноль. Я устанавливаю эту в ноль, потому что translateX ноль вернет элемент в его исходное положение.

Посмотрев на наш заголовок, мы видим, что ничего не происходит. Это потому, что мы не сказали нашему заголовку анимироваться. Я могу выбрать наш заголовок по его классу и здесь добавить семь свойств анимации. Имя анимации, длительность анимации, функция времени анимации, задержка анимации, количество итераций анимации, направление анимации и режим заполнения анимации. Свойство имени анимации предназначено для выбора ключевого кадра, который вы хотите использовать для анимации элемента. Мы создали ключевой кадр под названием SlideInLeft, поэтому в свойстве имени анимации в качестве значения я передам SlideInLeft.

После установки свойства имени анимации мы видим, что наш заголовок все еще не анимируется. Это потому, что нам нужно установить длительность анимации. Свойство длительности анимации устанавливает время, необходимое для завершения одного круга анимации. Когда вы создаете анимацию ключевого кадра, вы определяете правила анимации от 0% до 100%. Это свойство определяет, сколько времени требуется для анимации от 0% до 100%. По умолчанию это 0 секунд, но если я оставлю его на 0 секунд, наша анимация никогда не запустится. Поэтому я установлю его на 1 секунду.

Теперь мы видим, что наш заголовок анимируется. Свойство функции времени анимации определяет кривую ускорения для анимации. По умолчанию это ease, но у нас есть те же варианты, что и раньше.

Ease, ease in, ease out, ease in out и linear. Я установлю свое на ease in. Свойство задержки анимации устанавливает задержку перед запуском анимации. По умолчанию это 0 секунд, что означает, что анимация будет запущена сразу после загрузки страницы.

Я оставлю его на значение по умолчанию 0 секунд пока. Свойство количества итераций анимации определяет, сколько раз вы хотите запустить анимацию. По умолчанию это 1, что означает, что анимация завершит один круг и затем перестанет анимироваться. Если я установлю его на 2 или более, то анимация будет запущена 2 или более раз.

Я также могу установить его на бесконечность, и это заставит анимацию работать бесконечно. Я оставлю его на значение по умолчанию 1. Свойство направления анимации определяет, будет ли анимация запускаться нормально или в обратном порядке. По умолчанию это normal, но если я установлю его на reverse, это просто запустит анимацию с последнего ключевого кадра и завершит ее на первом ключевом кадре. Я оставлю его на значение по умолчанию normal.

И, наконец, свойство режима заполнения анимации определяет, как анимация будет применять стили из нашего ключевого кадра до и после его выполнения. Это трудно понять без некоторых визуальных подсказок, поэтому я установлю значение по умолчанию none. Я добавлю трансформацию к нашему заголовку translate X минус 150 пикселей. И я добавлю задержку анимации в одну секунду. Начальное положение нашей анимации все еще находится на 200 пикселей влево, а конечное положение нашей анимации все еще посередине страницы. Однако у нашего заголовка теперь есть трансформация x минус 150 пикселей. Это не изменило исходное положение нашего заголовка. Наше исходное положение все еще находится посередине страницы. Однако трансформация, которую мы добавили в заголовок, сдвинет заголовок на 150 пикселей влево перед началом анимации и после завершения анимации.

Мы видим это, когда смотрим на наш заголовок. Он находится на 150 пикселей влево, и через секунду задержки начинается анимация, а когда анимация заканчивается, заголовок снова сдвигается на 150 пикселей влево. Мы можем использовать свойство режима заполнения анимации, чтобы изменить это поведение. Если я установлю его на forwards, хотя заголовок начинается на 150 пикселей влево, когда анимация заканчивается, вместо того чтобы отталкивать заголовок обратно на 150 пикселей влево, как раньше, мы видим, что заголовок остается посередине. И это потому, что forwards применит стили из последнего ключевого кадра к нашему заголовку, когда анимация заканчивается. Если я установлю его на backwards, заголовок начнется со стилей, определенных в первом ключевом кадре, но когда анимация заканчивается, backwards ничего не делает, и заголовок снова сдвигается на 150 пикселей влево. Наконец, если я установлю его на both, теперь заголовок начинается со стилей из первого ключевого кадра и заканчивается со стилями из последнего ключевого кадра.

С установленным режимом заполнения анимации на both, элемент никогда не сдвигается на 150 пикселей влево, потому что он говорит, что элемент должен начинаться со стилей из первого ключевого кадра и заканчиваться со стилями из последнего ключевого кадра. Это свойство анимации определенно самое сложное для понимания, но, надеюсь, теперь это имеет смысл. Написание этих 7 свойств каждый раз, когда вы хотите анимировать элемент, - это слишком много работы. Мы можем использовать сокращенное свойство анимации. Оно принимает те же 7 значений свойств: имя, длительность, функцию времени, задержку, количество итераций, направление и режим заполнения. Я просто скопирую и вставлю значения, которые у нас были в отдельных свойствах в сокращенную анимацию.

Имя - slideInLeft, длительность - 1 секунда, функция времени - easeIn, задержка - 1 секунда, количество итераций - 1, направление - нормальное, и режим заполнения - both. Теперь я могу удалить отдельные свойства анимации, и мы видим, что наш заголовок все еще анимируется, как и раньше, но теперь мы используем только одно свойство вместо семи. Мы можем сделать его еще короче, удалив все значения по умолчанию. Наше количество итераций и длительность установлены на свои значения по умолчанию, поэтому я могу просто удалить их полностью, и наша анимация все равно будет работать так же. В настоящее время у нас задержка одна секунда, я предпочел бы, чтобы не было задержки, поэтому вместо того, чтобы говорить ноль секунд, я могу просто удалить это полностью, потому что ноль секунд - это значение задержки по умолчанию. Я могу удалить трансформацию, которую я добавил ранее, и теперь, когда ее нет, мне действительно не нужно, чтобы режим заполнения был установлен на both.

Он может быть установлен на свое значение по умолчанию - none, поэтому я просто удаляю его полностью. Наша анимация все еще ведет себя так, как мы задумали, но теперь посмотрите, насколько чист наш код. В настоящее время наша анимация размещена на самом элементе. Это плохо для использования. Вместо того чтобы выбирать элемент заголовка по его классу и давать ему анимацию, я создам утилитарный класс специально для анимации slide in left и дам ему свойство анимации со всеми теми же значениями.

Наш заголовок больше не анимируется. Это потому, что нам нужно перейти к нашему HTML и дать нашему заголовку утилитарный класс slide in left. Это лучше, потому что теперь, если у меня были бы другие элементы, которые также хотели бы иметь ту же анимацию, вместо того чтобы выбирать их в CSS и давать им свойство анимации, мне просто нужно дать им утилитарный класс, и они будут анимироваться так же. Но таким образом мы экономим код, повторно используя утилитарный класс slide in left. Фактически, мы можем уйти еще дальше с этой архитектурой утилитарных классов. В самом верху нашего файла CSS я добавлю комментарий, говорящий о утилитарных классах, я также добавлю комментарий прямо над нашим ключевым кадром, говорящий о анимациях.

Под нашим первым комментарием я собираюсь иметь пять утилитарных классов. Первый будет называться animate с свойством длительности анимации, установленным на одну секунду, и режимом заполнения анимации, установленным на both. Второй утилитарный класс будет называться animate-dash-dash-infinite с свойством количества итераций анимации, установленным на бесконечность. Третий утилитарный класс будет называться animate-dash-dash-delay-dash-one-second с свойством задержки анимации, установленным на одну секунду. Четвертый утилитарный класс будет называться animate-dash-dash-fast с свойством длительности анимации, установленным на 0.6 секунды. Пятый утилитарный класс будет называться animate-dash-dash-slow с свойством длительности анимации, установленным на 3 секунды. И, наконец, последнее, что нам нужно сделать, это перейти к нашему классу slide in left и заменить сокращенную анимацию свойством имени анимации, установленным на имя нашего ключевого кадра, и свойством функции времени анимации, установленным на любую кривую ускорения, которую мы хотим.

Я установлю ее на ease in. Теперь с этой архитектурой работает так, что в HTML каждому элементу, который я хочу анимировать, я даю класс animate. Я хочу, чтобы все они анимировались, поэтому я дам им всем класс animate.

Затем я могу выбрать анимацию, которую хочу. В нашем случае у нас есть только одна анимация, анимация скольжения влево. В классах каждого элемента я дам slideInLeft. Мы видим, что все наши элементы анимированы. Теперь мы можем использовать различные утилитарные классы там, где хотим. Например, возможно, я хочу, чтобы первый заголовок был быстрым. Я могу дать ему утилитарный класс animate-dash-dash-fast. И теперь мы видим, что наш заголовок движется быстрее, чем другие. Возможно, я хочу, чтобы второй заголовок был медленным. Я могу дать ему утилитарный класс animate-dash-dash-slow. И теперь он анимируется медленнее, чем другие. И, наконец, возможно, я хочу, чтобы у третьего заголовка была задержка в 1 секунду и постоянное повторение его анимации бесконечно по какой-то причине. Для этого я могу дать ему утилитарные классы animate-dash-dash-delay-1-seconds и animate-dash-dash-infinite. Мы можем улучшить эту архитектуру, используя двойные классы. В нашем CSS я могу добавить префикс animate к каждому из этих четырех утилитарных классов. И это позволяет утилитарным классам работать только в том случае, если класс animate существует в том же элементе. Это может помочь нам избежать возможных несчастных случаев, которые могут возникнуть при именовании наших классов. Работая с анимациями таким образом, мы фактически можем создать свою собственную мини-библиотеку анимаций. И причина, по которой это работает так хорошо, заключается в том, что мы разъединили отношение между анимацией и элементом, превратив каждую анимацию в повторно используемый утилитарный класс.

Ну, у нас есть только одна анимация, так что давайте добавим еще несколько. Мы можем дать нашему slideInLeft брата по имени slideInRight. Поскольку эта анимация будет такой же, но появляться справа, я просто скопирую код из нашего slideInLeft и вставлю его вниз. Мы можем переименовать ключевой кадр из slideInLeft в slideInRight. Мы можем сделать то же самое с именем класса и свойством имени анимации. Затем в нашем transform translateX-200 я просто уберу отрицательное значение, и теперь элемент будет появляться справа. В нашем HTML я дам второму заголовку класс slideInRight вместо slideInLeft. И теперь мы видим, что наш заголовок появляется справа. Вернувшись к нашему CSS, внизу файла, я добавлю новый ключевой кадр под названием rotate. Он начнется с transform: rotate, установленным на 0, и закончится с transform: rotate, установленным на 360 градусов. Под нашим ключевым кадром я могу добавить класс rotate и дать ему имя анимации rotate, а также установить функцию времени анимации на linear. Затем в нашем HTML, в нашем последнем заголовке, я заменю slide in left на rotate. Я оставлю утилитарный класс animate-dash-dash-infinite, но заменю утилитарный класс animate-dash-dash-delay на одну секунду на animate-dash-dash-slow. И теперь мы видим, что наш последний заголовок вращается бесконечно от своей центральной точки. Это то, что я хочу, но, например, если я хочу, чтобы заголовок вращался не от своего центра, а от одного из его углов, то я могу в классе rotate дать ему свойство transform-origin, которое по умолчанию имеет центр, и установить его на верхний левый угол.

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

Мне не нужно устанавливать функцию времени анимации, потому что я хочу, чтобы кривая ускорения была ease, и ease является значением по умолчанию. В моем HTML, на первом заголовке, я заменю slide in left на bounce и уберу утилитарный класс animate-dash-dash-fast. Что я хочу сделать с этой анимацией, это заставить элемент подпрыгивать почти как упругий мяч. Это можно сделать полностью с помощью transform translateY, потому что наша анимация будет вертикальной. Анимация подпрыгивания начинается на земле, поэтому я установлю начало анимации с transform: translateY. Конец анимации также должен быть на земле, поэтому я установлю его на 0.

Теперь нам нужны некоторые промежуточные анимации. Для этого мы можем заменить наши from и to на 0% и 100%. Используя проценты, мы получаем больше контроля над ключевыми кадрами, потому что теперь я могу установить некоторые промежуточные значения, например 40%, которые я установлю в translateY минус 30 пикселей.

Наш заголовок поднимается и опускается, но не отскакивает. Я добавлю 50% с трансформацией translateY, установленной на 0. И добавлю 60% с трансформацией translateY, установленной на минус 15 пикселей.

Это выглядит довольно хорошо, но мы все еще можем сделать это лучше. В настоящее время мы переходим от translateY 0 к translateY минус 30 пикселей от 0% до 40%. Чтобы сделать это более динамичным, я добавлю 20% с трансформацией translateY, установленной на 0. Теперь происходит следующее: с 0% до 20% мы остаемся на 0. Но начиная с 20%, мы можем ускориться к минус 30 пикселям, и это сделает нашу анимацию лучше.

Это незаметно, но все же лучше. Мы можем сделать то же самое между 60% и 100%, я добавлю 80% с трансформацией translateY, установленной на 0. Наш заголовок определенно выглядит так, будто он отскакивает, и анимация точно такая, как мне нужно. Однако внутри нашего ключевого кадра мы многократно повторяем себя с теми translateY, установленными на 0. В программировании действительно хочется избегать повторений, поэтому чтобы очистить все, мне нужно просто удалить все проценты, где я повторяю translateY 0. И затем на моем 0% я могу через запятую перечислить все проценты, которые имели translateY 0. Такие как 0%, 20%, 50%, 80% и 100%. Причина, по которой это работает, заключается в том, что проценты ключевых кадров не обязательно должны быть упорядочены. Я мог бы иметь 60% наверху всего, и анимация все равно бы работала идеально. Я вернусь к этому, потому что я считаю, что это более чисто и читаемо.

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

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

Если вы хотите присоединиться к числу экспертов и прислать ответ от вашей компании или лично от вас, то пишите на experts@tproger.ru, мы расскажем, как это сделать.

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

Что же необходимо изучить из того, что уже закрепилось в CSS и используется повсеместно?

• Двумерная сетка грид (grid layout) и модуль гибкого контейнера флекс (flex).
• Препроцессоры (например, Sass, tLess). Они сильно упрощают жизнь при написании кода.
• Фреймворки (для начинающих подойдут Bootstrap, Bulma и Materialize).
• Анимация (animation).
• Адаптивность / responsive – правильное отображение сайта на разных устройствах.
• БЭМ (Блок Элемент Модификатор) – компонентный подход к веб-разработке, который стал популярен в последние годы. Он затрагивает написание css (убирается каскадность) и принципы именования классов элементов.

15 основных новинок CSS за 2022 и 2023 года:

1. Контейнерные запросы (@container) вместо медиа запросов. Поддержка tбраузерами – 87.42%.
2. Новые псевдоклассы-функции :where(), :has(). У :has() поддержка – 87.43%.
3. Использование математических операторов в медиа-запросах. Поддержка браузерами 70%.
4. Использование of в псевдоклассах :nth. Поддержка – 85.72%
5. Свойство accent-color для основного цвета сайта на формах или по всему сайту. Уже поддерживается во всех современных браузерах.
6. Сбалансированный tперенос текста с помощью text-wrap: balance; Поддержка – 37.71%
7. Новые динамические единицы измерения: svh, svw, lvh, lvw, dvh, dvw. Поддержка – 87.99%
8. Каскадные слои. Поддержка – 90.58%
9. Вложенность стилей друг в друга, как в Sass. Поддержка – 63.74%
10. Плавная прокрутка скроллбара свойством scroll-behavior: smooth; Поддерживается браузерами.
11. Стилизация сайта по пользовательским предпочтением операционной системы (prefers-reduced-motion, prefers-contrast, prefers-reduced-transparency, inverted-colors и другие).
12. Адаптивность к форм-фактору, т.е. учет складных и гибких экранов при создании сайтов. Пока не получила большого распространения.
13. Псевдокласс t:focus-visible. Поддерживается всеми браузерами.
14. Индивидуальные свойства трансформации. Поддержка – 91.19%
15. color-mix(): и color-contrast(). Поддерживается не всеми браузерами. Стоит изучить, но пока не использовать.

На мой взгляд стоит изучить те новинки, которые хотя бы на 70% поддерживаются браузерами.

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

Рекомендую сконцентрироваться на освоении основ, таких как display: grid (хотя его применение может быть ограничено в старых версиях браузеров) и flexbox, transitions и animations (для создания плавных и креативных анимаций), backdrop-filter (эффекты размытия фона, полезные для создания стилизованных элементов интерфейса), variables и calc (использование переменных и вычислений может значительно улучшить поддерживаемость и гибкость кода).

Для новичков важно освоить SCSS, включая использование миксинов и функций, изучив примеры в крупных библиотеках, например, Bootstrap, чтобы расширить свои навыки и избежать избыточного изобретения.

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

Если вы хотите присоединиться к числу экспертов и прислать ответ от вашей компании или лично от вас, то пишите на experts@tproger.ru, мы расскажем, как это сделать.

Вот, о чём идёт речь в видео:

1. Вопрос о том, сколько нужно знать HTML, CSS и JavaScript для того, чтобы устроиться на работу в 2023 году, часто задают.
2. HTML и CSS не являются сложной частью, важно понимать основы структуры HTML-документа и основные элементы, такие как div.
   
3. Большинство компаний имеют дизайнера, который предоставляет дизайн в виде изображения или файла в Figma или Sketch, задача разработчика - перевести это в код.
   
4. Необходимо знать CSS, но не требуется глубоко владеть дизайном, так как существуют инструменты, например, Tailwind CSS, которые упрощают работу.
   
5. Основное внимание при обучении следует уделять JavaScript и фреймворкам, так как это займет более 75% времени обучения.
   
6. HTML и CSS можно быстро изучить, достаточно понимать, как работает DOM и основные теги, а также использовать CSS для улучшения внешнего вида сайта.
   
7. Важно уметь использовать поисковые системы для решения задач по HTML и CSS, а также использовать библиотеки и фреймворки для ускорения разработки.
   
8. JavaScript является более сложной частью, так как часто это первый язык программирования, который изучают разработчики, и включает в себя работу с различными фреймворками и инструментами, такими как ReactJS, Next.js и TypeScript.
   
9. Необходимо изучить терминологию JavaScript, основы работы с массивами, объектами, понимание объектно-ориентированного программирования и манипуляции с DOM.
   
10. Важно не только изучать JavaScript, но и практиковаться в создании веб-сайтов, чтобы закрепить знания и построить крепкий фундамент для трудоустройства.
    

Ниже — транскрибированный перевод ролика на русском языке.

Сколько знаний HTML, CSS и JavaScript вам нужно знать сегодня, чтобы быть нанятым? Давайте разберемся в этом прямо сейчас. Это вопрос, который я получил много, много, много, много раз, верно? И это ответ, который я дал много, много раз в комментариях. Но я поднимаю этот вопрос сейчас, потому что это фактически вопрос, который я задал генеральному директору boot.dev в одном из последних эпизодов моего подкаста, если вы хотите посмотреть, ссылка в описании ниже. Но давайте услышим его ответ на вопрос, сколько HTML, CSS и JavaScript должен знать веб-разработчик, фронтенд-инженер. Давайте посмотрим прямо сейчас.

Сколько HTML и CSS разработчики вообще должны знать

Вам это понадобится, но HTML и CSS не являются сложной частью. HTML - это язык разметки, верно? Вы изучаете основные строительные блоки, такие как divs и прочее. Это действительно не занимает много времени, чтобы ознакомиться со структурой HTML-документа. А CSS, вы можете потратить столько времени на его освоение. Но в конечном итоге, в большинстве компаний, где вы будете работать, вы не будете дизайнером. И вот здесь я изначально столкнулся с проблемой, я думал, что, чтобы быть фронтенд-разработчиком, мне нужно быть очень хорошим в дизайне.

Это не обязательно так. В большинстве компаний, где вы будете работать, будет дизайнер, который предоставит вам дизайн, либо изображение, либо файл Figma или что-то в Sketch. Ваша задача - просто перевести это в код. Так что, я имею в виду, вам нужно знать CSS.

Я просто хочу упомянуть один из моих любимых инструментов. Я использую Tailwind CSS на фронтенде, в основном на boot dev, потому что дело в том, что CSS не так уж сложно понять, как он работает. У вас есть границы, у вас есть тени, у вас есть эти вещи, вы можете гуглить, когда застряли. Но что сложно, это написать чистый CSS, потому что, я убежден, это почти невозможно. Так что ответ таков: вам нужно изучить HTML и CSS, но вам придется потратить гораздо больше времени на JavaScript. Мой прогноз составляет 75% и более вашего обучения до того, как вы получите первую работу на фронтенде, будет связано с JavaScript в каком-то фреймворке.

Я думаю, одна из самых больших ошибок, которую совершает начинающий разработчик, когда учится программировать, заключается в том, что он тратит слишком много времени на изучение определенных языков, тратит слишком много времени, которого ему не нужно, или, снова, добавлю к этому, изучает неправильные технические языки. И как сказал Лейн, что люди склонны делать, это тратить слишком много времени на HTML, CSS.

Почему? Он сказал, что когда вы работаете фронтенд-разработчиком, многие начинающие разработчики думают, что им нужно быть лучшими дизайнерами. Многие начинающие разработчики думают, что им нужно иметь хорошие навыки дизайна. Нет, это не работа фронтенд-инженера, фронтенд-разработчика, веб-разработчика, как бы вы его ни называли. Наша задача - взять дизайн, который дизайнер UI/UX дает нам, и превратить этот дизайн в реальность, не с помощью ручки и бумаги, а с использованием фактического цвета. И мне нравится то, что он сказал, потому что Лейн сказал, что люди тратят слишком много времени на HTML CSS. Люди тратят слишком много времени на это, думая, что им нужно придумывать креативные дизайны.

Но дело в том, что это совсем не наша работа. Наша задача - превратить то, что люди создали с помощью Photoshop, Adobe XD, я не знаю, назовите это как угодно, они создают эти красивые дизайны, и наша задача - превратить это в реальное изображение в коде.

Так что сколько HTML и CSS разработчик вообще должен знать, чтобы быть нанятым

То, что вам нужно знать, в основном, это что? Что такое DOM?

Каковы основные структуры при создании веб-сайта с использованием HTML? Я имею в виду, посмотрите на Craigslist. Они имеют все основы на craigslist.com. Не самый лучший пример, но это буквально HTML. Может быть немного CSS, чтобы сделать веб-сайт более удобным для мобильных устройств, но в основном это и есть, просто и понятно.

Я думаю, что вам нужно просто знать, что такое теги, что такое метки, верно? Что такое заголовок? Что такое тело? Какие есть теги HTML? Что такое тег якоря? Вам нужно понять, как работает DOM. Что представляют собой все эти различные элементы в HTML?

Почему это так важно? Потому что вам нужно хотя бы иметь базовое представление. Я бы сказал, крепкое представление о HTML, что занимает, возможно, месяц, если не меньше, чтобы понять, не полностью понять, но хотя бы понять основы. И теперь, когда вы понимаете, как работает HTML, какова структура тела, заголовка? Вам нужно знать просто достаточно, чтобы использовать CSS. В чем смысл использования CSS? Вы используете CSS, чтобы сделать вещи красивыми как ад.

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

Хорошо, некоторые компании, к сожалению, делают. Но мы используем библиотеки, которые позволяют нам создавать эти веб-сайты быстрее, чем когда-либо, и делать их максимально чистыми, используя CSS или JavaScript или фронтенд-библиотеку, такую как Tailwind, верно? Как Tailwind CSS. Теперь есть одна вещь, с которой я хочу поспорить с Лейном по одному вопросу, а именно. Он сказал, что HTML. NTSS не является сложной частью.

Я согласен, но я также не согласен. Я думаю, что люди склонны недооценивать, прежде всего Лейн, будучи в основном разработчиком бэкэнда, я могу честно понять, почему он сказал эти слова. Потому что как разработчик бэкэнда, и сейчас я работаю в бэкэнде, это очень сложно, верно? То, что я делаю в бэкэнде, намного сложнее, чем то, что я когда-либо делал как фронтенд-разработчик. Возможно, потому что как фронтенд-разработчик, я перешел на должность среднего уровня. Я никогда не стал старшим фронтенд-разработчиком, и сразу после этого перешел в бэкэнд.

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

Что вы можете сделать? Гуглить. Как создать меню гамбургеров с использованием Tailwind CSS? Просто введите это в Google, скопируйте код, который вы найдете в интернете, и вставьте его в свой текстовый редактор. Бум, у вас есть меню гамбургеров.

Как создать нижний колонтитул с использованием Tailwind CSS, или что угодно, или Bootstrap, назовите это, и возможно, вы все еще используете Materialize, который существует уже некоторое время. Гуглить, гуглить, гуглить. Суть того, что мы пытаемся сказать, заключается в том, что количество HTML и CSS, которое вам нужно знать, достаточно, чтобы теперь вы знаете, как гуглить, и исследовать, чтобы интернет помог вам создать то, чего вы не знаете, как можно быстрее, верно?

Сколько нужно учить JavaScript

Вот и все. И затем он говорит следующее. Он говорит, что JavaScript - это сложная часть. Я с ним на миллион процентов согласен в этом. JavaScript будет очень сложным для всех, кто пытается научиться программированию.

Почему? Потому что JavaScript в большинстве случаев будет первым языком программирования, который вы когда-либо изучите. Когда речь идет о JavaScript, это уже не только JavaScript. Есть ванильный JavaScript. Некоторые компании все еще используют jQuery, верно?

Компании в наши дни либо используют SvelteJS, не так много используют AngularJS, но он все еще существует. И многие другие компании сейчас используют ReactJS. И даже когда вы изучаете ReactJS, этого уже недостаточно. Когда вы изучаете ReactJS, в чем суть? Теперь вы переходите к использованию NextJS. Next.js делает использование React.js еще лучше. И это еще не все, потому что зная JavaScript, теперь вам нужно использовать другой инструмент, такой как TypeScript, чтобы помочь вам писать ваш JavaScript, чтобы уменьшить количество ошибок. Итак, есть еще много разных вещей, которые вам нужно изучить. Итак, вопрос заключается в том, сколько JavaScript мне нужно знать, Крис? Об этом я расскажу в следующем видео.

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

Почему? Потому что, когда вы общаетесь с другими разработчиками, особенно в JavaScript, многие разработчики будут использовать терминологию, которую вы, возможно, даже никогда не слышали. Например, что такое map? Как вы мапите массив? Что такое массив вообще?

Что такое объект? Что такое JSON? Это даже не JavaScript, но вы часто используете JSON, когда дело доходит до JavaScript, по крайней мере, я использовал. Понимание этих различных терминов, функций, циклов и т. д., просто понимание терминологии по различным вещам чрезвычайно важно, когда вы начинаете изучать JavaScript. Не пропускайте вещи при изучении JavaScript, понимайте терминологию. Теперь, в описании ниже, я размещу список различной терминологии, которую вы можете изучить, когда дело доходит до JavaScript. Надеюсь, это поможет, но давайте перейдем к следующей части.

Хорошо, я быстро пройдусь по этому списку на своем телефоне, хорошо? Так вот, во-первых, когда дело доходит до JavaScript, вам нужно изучить такие вещи, как булев тип, число, строки и т. д., различные операторы при работе с JavaScript, верно? Вам нужно даже изучить TypeScript, чтобы помочь вам избежать ошибок. TypeScript спасет вас, когда вы изучаете это. Далее, что вам нужно изучить, это вещи, как работать с массивами, как работать с различными объектами, что такое объектно-ориентированное программирование. Основы - это то, что вам нужно изучить, когда дело доходит до этого.

И даже сверх того, вам нужно изучить, как манипулировать DOM. Как писать функции клика, когда дело доходит до JavaScript? Что такое map? Что такое функция? Что такое оператор IF? Как писать оператор IF?

Как использовать операторы, такие как двойное равно или тройное равно? Когда использовать обратные кавычки? Когда вам даже не нужно использовать точки с запятой в JavaScript, но практически все основы, когда дело доходит до JavaScript, достаточно, чтобы позволить вам манипулировать DOM. Кроме того, вам нужно изучить события.

Слушатели, когда ждать клика, и вместо вас, вы назовете это, это будет особенно полезно, когда вы начнете работать с API. Но прежде всего, сколько JavaScript вам нужно знать? Вы не знаете достаточно JavaScript, если даже не создали два или три веб-сайта, используя JavaScript. Многие люди просто учатся, учатся, учатся. Это ошибка, которую люди часто делают, это то, что они продолжают учиться без остановки, когда дело доходит до JavaScript, но не строят ничего. Ваша цель, когда вы изучаете что-то в JavaScript, - построить как можно больше вещей, чтобы применить то, что вы узнали. Убедитесь, что вы не забудете это. Вы построите крепкое основание и найдете работу оттуда. В любом случае, надеюсь, это поможет.

Пройдите тест и узнайте, насколько хорошо вы понимаете концепции и свойства Flexbox, которые делают его таким мощным инструментом.

Узнайте, профессионал вы или полный профан. >:-)

Вот, о чём рассказывают в видео:

1. Для изменения цвета акцента радиокнопки, которая является частью элемента input, используется псевдокласс :checked в традиционном CSS.
2. Изменение стиля родительского элемента в зависимости от дочернего или потомка традиционно требовало JavaScript, но с latest.css можно использовать псевдоселектор :has.
3. С помощью :has можно определить условия, при которых стили применяются к родительскому элементу, например, сделать границы розовыми, если внутри есть выбранный input.
4. Поддержка псевдоселектора :has в браузерах очень хорошая.
5. Контейнерные запросы (container queries) позволяют адаптировать макет повторно используемого компонента в зависимости от доступного пространства для конкретного компонента на веб-сайте.
6. Используя контейнерные запросы, можно создавать компоненты, которые изменяют свой макет в зависимости от размера контейнера, в котором они находятся, без повторения CSS-кода.
7. Контейнерные запросы полностью поддерживаются всеми современными браузерами.
8. Вложенность селекторов теперь поддерживается в чистом CSS без использования препроцессоров, что упрощает поддержку и чтение кода.
9. Свойство text-wrap с новым значением balance позволяет балансировать количество символов на каждой строке, улучшая визуальное восприятие текста.
10. Поддержка свойства text-wrap со значением balance в браузерах очень хорошая.
11. Стилизация элементов при фокусировке важна для доступности и пользовательского опыта, а новый псевдокласс :focus-visible позволяет различать элементы, выбранные с помощью клавиатуры или мыши.
12. Совместимость псевдокласса :focus-visible с браузерами очень хорошая, что позволяет использовать его в проектах.

Ниже представлена транскрибация ролика на русском языке.

Применение селектора has

Кнопка радио и граница розовые для выбранного элемента списка. Здесь установлено стандартное оформление: синяя кнопка и серая граница.

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

При использовании традиционного CSS изменение стиля родительского элемента в зависимости от потомка или дочернего элемента требовало JavaScript. Используя latest.css, мы можем применить hasSelector к нашему родителю, элементу списка в нашем случае. При пустых скобках ничего не изменится, у нас все еще нет изменения цвета для нашей границы здесь. Но внутри нашего hasSelector мы теперь можем определить условие, которое должно быть выполнено, чтобы применить стиль внутри наших фигурных скобок к нашему родителю. Добавление элемента ввода сделает все наши границы розовыми.

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

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

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

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

Таким образом, каждый компонент должен быть отображен рядом друг с другом горизонтально.

Контейнерные запросы

Контейнерные запросы затем включаются путем добавления свойства типа контейнера на наш класс курса. Таким образом, оболочка для наших отдельных компонентов курсов. Используя значение inline size, достаточно определить только ширину нашего контейнера здесь.

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

Без использования этих контейнерных запросов макет всех компонентов был бы одинаковым, и, следовательно, дополнительное пространство, которое у нас есть для раздела с избранным курсом, …не использовалось бы должным образом.

С помощью контейнерных запросов многоразовые компоненты, настраивая их макет в зависимости от доступного пространства для отдельного компонента, могут быть созданы легко.

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

Вложенные селекторы

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

Поддержка браузера очень хорошая для последних версий наиболее популярных браузеров.

Свойство text wrap в CSS

Свойство text wrap управляет тем, как текст переносится внутри элемента.

Со вновь введенным значением balance для свойства text wrap CSS балансирует количество символов в каждой строке, чтобы избежать ситуаций, когда у нас есть одно слово в нашем подзаголовке здесь, вместо того чтобы иметь два слова здесь, что балансирует общий вид нашего подзаголовка.

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

Псевдокласс focus-visible

С помощью псевдокласса focus мы смогли применить наши собственные индивидуальные стили к элементам нашего выбора.

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

Со вновь введенным классом focus visible эта проблема теперь исправлена. Focus visible выделяет элементы при навигации с помощью клавиши Tab на клавиатуре, но может различать между элементами, которые не должны быть выделены при выборе с помощью щелчка мыши или клавиши Tab. Таким образом, кнопки не выделяются, а здесь выделяется поле ввода.

Совместимость браузера с focus visible очень хорошая, поэтому вы можете использовать его в ваших проектах.

Кто такой фронтенд-разработчик

Фронтенд-разработчик — это специалист, который занимается созданием и разработкой пользовательского интерфейса веб-сайта или веб-приложения. Он работает с языками HTML, CSS и JavaScript, а также с различными фреймворками и библиотеками, такими как React, Angular или Vue.js.

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

Фронтенд-разработчик также может называться веб-разработчиком, UI/UX разработчиком или фронтенд-дизайнером. Все эти термины относятся к специалисту, который занимается созданием и разработкой пользовательского интерфейса веб-сайта или веб-приложения.

Что должен уметь фронтенд-разработчик

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

• Знание языков HTML, CSS и JavaScript: фронтенд-разработчик должен владеть HTML для создания структуры веб-страницы, CSS для оформления и стилизации элементов и JavaScript для добавления интерактивности и динамического поведения.

• Работа с фреймворками и библиотеками: фронтенд-разработчик должен быть знаком с популярными фреймворками и библиотеками, такими как React, Angular, Vue.js, jQuery и другими. Он должен уметь использовать их для создания компонентов, обработки событий и взаимодействия с серверной частью приложения.

• Верстка и макетирование: фронтенд-разработчик должен уметь верстать веб-страницы с использованием HTML и CSS. Он должен иметь понимание принципов адаптивной верстки, чтобы обеспечить корректное отображение сайта на различных устройствах. Кроме того, важно владеть навыками работы с CSS-препроцессорами, такими как SASS или LESS, для повышения эффективности и удобства кодирования.

• Интерактивные элементы и анимация: фронтенд-разработчик должен уметь создавать интерактивные элементы: кнопки, формы, слайдеры. Он должен быть знаком с различными методами создания анимации и эффектов, чтобы улучшить пользовательский опыт.

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

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

• Тестирование и отладка: фронтенд-разработчик должен уметь тестировать и отлаживать пользовательский интерфейс, чтобы обнаружить и исправить ошибки и проблемы, связанные с функциональностью и отображением элементов.

• Поддержка и обновление: фронтенд-разработчик должен быть готов поддерживать и обновлять пользовательский интерфейс веб-приложения. Он должен следить за новыми технологиями и трендами в веб-разработке и вносить соответствующие изменения в приложение.

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

Какие задачи выполняет фронтенд-разработчик

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

• Верстка веб-страниц: фронтенд-разработчик создает HTML-структуру и применяет CSS для оформления и стилизации веб-страниц. Он заботится о том, чтобы страницы были отзывчивыми и хорошо отображались на различных устройствах и экранах.

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

• Адаптивная верстка: фронтенд-разработчик обеспечивает адаптивность веб-сайта, чтобы он корректно отображался на различных устройствах и экранах. Он использует медиа-запросы CSS и другие техники для создания отзывчивого дизайна.

• Разработка анимации и эффектов: фронтенд-разработчик может создавать анимацию и эффекты, чтобы улучшить пользовательский опыт и визуальное восприятие веб-сайта. Он может использовать CSS анимацию, JavaScript библиотеки или другие инструменты для создания динамических эффектов.

• Интеграция с серверной частью: фронтенд-разработчик интегрирует пользовательский интерфейс с серверной частью приложения. Он обеспечивает передачу данных и синхронизацию между клиентской и серверной частями, используя API и протоколы взаимодействия.

• Тестирование и отладка: фронтенд-разработчик тестирует и отлаживает пользовательский интерфейс, чтобы обнаружить и исправить ошибки и проблемы, связанные с функциональностью и отображением элементов. Он может использовать инструменты разработчика браузера, консоль JavaScript и другие средства для выявления и устранения проблем.

• Поддержка и обновление: фронтенд-разработчик поддерживает и обновляет пользовательский интерфейс веб-приложения. Он следит за новыми технологиями и трендами в веб-разработке и вносит соответствующие изменения в приложение.

Какая зарплата у фронтенд-разработчика

Зарплата фронтенд-разработчика может значительно варьироваться в зависимости от опыта работы, уровня квалификации, региона и размера компании. В среднем, начинающий фронтенд-разработчик может рассчитывать на зарплату от 50 000 до 80 000 рублей в месяц. С опытом работы и профессиональным ростом зарплата может достигать от 100 000 до 200 000 рублей в месяц и выше.

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

Где обучиться профессии фронтенд-разработчика

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

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

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

Яндекс Практикум предлагает курс фронтенд-разработчика, на котором вы изучите HTML, CSS, языки программирования JavaScript, TypeScript, библиотеку React.

На курсе будут сеансы парного программирования, лайвкодинг и хакатон. Создадите 10+ проектов для портфолио и получите обратную связь от экспертов Яндекса.

Курс подойдет вам, если:

• у вас нет опыта в IT или технического образования;
• вы уже пробовали учиться самостоятельно, но вам нужна помощь и обратная связь от опытного специалиста;

• вы хотите обучаться системно. Чтобы вся информация была в одном месте;

• вы уже работаете в IT на смежной роли, но хотите сменить направление или освоить новые навыки.

Вас поддержат практикующие специалисты, которые сами прошли этот трудный путь:

• наставники научат искать ответы. В дальнейшем вы сможете решить любой вопрос самостоятельно;

• код-ревьюеры проверят ваш код и проекты. Все код-ревьюеры — действующие веб-разработчики;

• кураторы сделают обучение комфортным. Ответят на вопросы, напомнят о сроках, пришлют ссылки на записи вебинаром, поддержат и выслушают;

• техническая поддержка работает 24/7.

Вы будете учиться не одни.

Рядом будут другие студенты и студентки. Можно обсудить проект, дать совет, попросить помощи, обрести интересные знакомства и полезные связи.

Что вы получите после курса

• Диплом — он не даёт гарантий сам по себе, но выделит вас на фоне других кандидатов при поиске работы.
• Портфолио из 5 проектов.
• Возможность познакомиться и учиться вместе с единомышленниками.
• Помощь с поиском работы — для этого у Яндекс Практикума есть карьерный центр. Там расскажут про рынок труда и компании, которые нанимают junior-разработчиков. Помогут собрать портфолио и составить резюме. Подготовят к собеседованиям и научат вести разговор.

10 000+ выпускников Практикума уже нашли новую работу.

Какие плюсы и минусы в профессии фронтенд-разработчика

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

Плюсы

• Востребованность: веб-разработка является неотъемлемой частью современного мира, на рынке много вакансий в этом направлении.

• Карьерный рост: можно профессионально рости и развиваться. Они могут стать лидерами команды разработки или специалистами в определенных областях, таких как UX/UI дизайн или разработка мобильных приложений.

• Творческая работа: фронтенд-разработчики имеют возможность проявить свою творческую натуру при создании пользовательского интерфейса и взаимодействия с пользователями.

• Гибкость: фронтенд-разработчики могут работать в различных отраслях и компаниях, от стартапов до крупных корпораций. Они также имеют возможность работать удаленно или по гибкому графику.

Минусы

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

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

• Совместная работа: фронтенд-разработчики часто работают в команде с бэкенд-разработчиками, дизайнерами и другими участниками проекта. Это требует хорошей коммуникации и умения работать в коллективе.

• Стресс: фронтенд-разработчики могут столкнуться со стрессом, связанным с сроками, ошибками в коде или сложными требованиями проекта. Умение управлять стрессом и работать под давлением является важной навыком для этой профессии.

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

Какими инструментами пользуются фронтенд-разработчики

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

• Текстовые редакторы и интегрированные среды разработки (IDE): фронтенд-разработчики используют текстовые редакторы или IDE для написания и редактирования кода. Некоторые популярные редакторы включают Visual Studio Code, Sublime Text и Atom.

• Браузеры: фронтенд-разработчики используют браузеры для проверки и тестирования своего кода. Они могут использовать различные браузеры, такие как Google Chrome, Firefox, Safari и другие, чтобы убедиться, что их веб-страницы и интерфейсы отображаются корректно на разных платформах и устройствах.

• HTML и CSS: HTML (HyperText Markup Language) и CSS (Cascading Style Sheets) являются основными языками для создания структуры и внешнего вида веб-страниц. Фронтенд-разработчики используют эти языки для создания разметки и стилизации веб-страниц.

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

• Библиотеки и фреймворки: фронтенд-разработчики могут использовать различные библиотеки и фреймворки, такие как React, Angular и Vue.js, для ускорения разработки и улучшения производительности. Эти инструменты предоставляют готовые компоненты и функциональность, которые упрощают создание сложных интерфейсов.

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

• Инструменты тестирования: фронтенд-разработчики могут использовать различные инструменты тестирования, такие как Jest, Mocha и Jasmine, для проверки и подтверждения правильности работы своего кода.

Какое будущее у профессии фронтенд-разработчик

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

• Рост веб-технологий: веб-технологии постоянно развиваются, и фронтенд-разработчики играют ключевую роль в их развитии. С появлением новых технологий, таких как веб-компоненты, Progressive Web Apps (PWA) и WebAssembly, фронтенд-разработчики имеют больше возможностей для создания инновационных и мощных веб-приложений.

• Увеличение числа веб-пользователей: количество людей, использующих интернет, продолжает расти. Это означает, что веб-сайты и веб-приложения становятся все более популярными. Увеличение числа веб-пользователей создает больший спрос на квалифицированных фронтенд-разработчиков, способных создавать удобные и привлекательные пользовательские интерфейсы.

• Развитие мобильных устройств: с увеличением числа людей, использующих мобильные устройства для доступа в интернет, фронтенд-разработчики должны учитывать мобильную адаптивность и оптимизацию своих веб-приложений. Это создает дополнительные возможности для развития и специализации в области мобильной фронтенд-разработки.

• Увеличение автоматизации: с развитием автоматизации и инструментов разработки, фронтенд-разработчики могут ускорить и упростить процесс разработки. Это позволяет им сосредоточиться на более сложных и творческих задачах, таких как создание интерактивных элементов и анимации.

• Рост удаленной работы: с развитием удаленной работы, фронтенд-разработчики имеют возможность работать из любой точки мира. Это расширяет их возможности для трудоустройства и позволяет работать с международными клиентами и проектами.

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

Заключение

Фронтенд-разработка является важной и востребованной областью веб-разработки. Профессия фронтенд-разработчика требует знания и навыков в области HTML, CSS и JavaScript, а также способности создавать привлекательный и функциональный пользовательский интерфейс. Благодаря постоянному развитию и изменениям в веб-технологиях, фронтенд-разработчики всегда имеют возможность обновлять свои навыки и быть в курсе последних тенденций. Если вы интересуетесь технологиями веб-разработки и обладаете творческим мышлением, то фронтенд-разработка может быть стать любимым делом.

Реклама ООО «Стратеджик Инсайтс», LjN8KQpUX