Код, который не может не работать

Когда сложные выражения пробрасываются прямо внутрь объекта, код теряет ритм и структуру. Это противоречит принципу ритма и структуры — RSP (cantfailcode.ru). Я стараюсь выносить логику выше — делать небольшую экстракцию, чтобы сам объект оставался чистым и понятным. Так проще поддерживать систему: если в будущем логика усложнится, можно будет менять её в одном месте, не трогая структуру объекта. Это делает код более предсказуемым и гибким к изменениям. #рефакторинг #чистыйкод #архитектуракода #javascript #разработка #нейминг #программирование #bestpractices

Нейминг — это основа всего. Если выбранное название перестало подходить под реальность проекта — не бойтесь делать рефакторинг и переименовывать. Правильные имена должны отражать семантику и природу сущностей. Переменные, токены, компоненты — всё должно называться так, чтобы по названию было понятно, зачем это существует. Например, я переименовываю black-text в black-brand, потому что этот цвет используется не только для текста, а как основной брендовый чёрный во всей системе. Название сразу показывает контекст применения. Хороший нейминг делает код понятнее, поддержку — проще, а систему — логичнее. #нейминг #рефакторинг #чистыйкод #frontend #разработка #дизайнсистема #архитектура #typescript #bestpractices

Из одного базового цвета можно вырастить целую систему: десятки цветовых токенов. В видео разбираем иерархию токенов и зачем нужны группы вроде surface, outline и reactions — чтобы любые UI-элементы автоматически получали согласованные и читаемые цвета. #дизайнсистема #дизайнтокены #цветовыетокены #ui #ux #productdesign #figma #frontend #css #webdev #designops #uidesign #vuejs #components #shorts

Обсуждаем, как генерировать цветовые токены: можно прописать все значения вручную (работает, но почти невозможно поддерживать), можно собирать систему из референсных палитр (надежнее, но трудоемко), а можно рассчитывать автоматически — с допущениями и возможными погрешностями по контрасту. Для практичных задач часто хватает простого подхода: смешивать базовый цвет с белым или черным и получать стабильную, повторяемую палитру. #дизайнсистема #дизайнтокены #цвета #ui #ux #productdesign #frontend #css #colormix #designops #figma #webdev

На примере прототипа UI-компонента показываю, как цветовые токены управляют темой элемента. Фон, обводка, текст остаются сбалансированными и читаемыми даже при смене темы. Дальше двигаемся к подходу, где UI собирается не из div-ов, а из семантических компонентов. Это превращает верстку в «сборку» и делает поддержку и масштабирование дизайн-системы заметно быстрее. #дизайнсистема #дизайнтокены #colortokens #frontend #ui #uidesign #webdev #shorts

Собираем первый прототип компонента на практике: применяем типографические и цветовые токены к блоку с заголовком и подзаголовком и сразу получаем аккуратную, сбалансированную панель без ручной настройки стилей. #дизайнтокены #дизайнсистема #frontend #типографика #ui #webdev #shorts

Смотрим на практике, как применяются только что созданные типографические токены. Категория, грейд и другие настройки. Проверяем, как выглядит вся раскладка типографии. Даже для небольшой системы важно правильно подобрать все параметры, чтобы типографика работала гармонично. #типографика #дизайнсистемы #токены #frontend #разработка #UX #UI #webdev #дизайн #типографическиетокены

Сильные архитектурные решения не берутся из теории. Они появляются через практику: проекты с нуля, ошибки, легаси и переписывание кода. Со временем накапливается опыт, который позволяет закладывать более устойчивые и осознанные основы в проектах. #frontend #архитектура #программирование #разработка #опытразработки #frontenddeveloper #techdebt #designsystem

Хороший старт — это не про идеальную архитектуру, а про точку входа. Когда вы доводите до логического завершения текущую задачу — оставьте то, с чего вы начнете в следующий раз. Это должны быть небольшие простые действия. Так мозгу проще включиться в работу и продолжить с того места, где остановился. Маленькие, понятные шаги снижают порог входа, убирают прокрастинацию и помогают быстрее войти в контекст. Часто достаточно 5–10 минут, чтобы втянуться и спокойно работать дальше — особенно в больших и сложных модулях. #фронтенд #frontend #программирование #архитектуракода #разработка #код #designsystem #uiкомпоненты #вебразработка #разработчик

Вопрос «как правильно разложить файлы и папки» возникает почти в каждом проекте. FSD и другие подходы могут быть полезны, но универсального рецепта не существует. База — это принципы: здравый смысл, ясные правила и понимание задачи проекта. Архитектура должна подстраиваться под контекст, а не наоборот — особенно когда речь идёт о масштабировании и поддержке кода. #фронтенд #frontend #вебразработка #программирование #архитектура #структурапроекта #designsystem #fsd #код #разработчик

Иконки — это не просто SVG из Figma. Размеры, коллекции, толщина линий и правила использования напрямую влияют на качество интерфейса. В дизайн-системе иконки — отдельный примитив со своими особенностями. Разбираем, как и зачем это делать правильно со стороны разработки. #фронтенд #frontend #вебразработка #программирование #разработчик #дизайнсистема #ui #иконки #архитектура #код

Цикл стримов без жёстких сроков: идём от базы к реальным результатам. Разбираем фундаментальные вещи, которые помогают собирать интерфейсы, масштабировать проекты и проще работать с дизайном. Будет полезно и начинающим, и тем, у кого уже есть опыт, но хочется навести порядок в архитектуре. #фронтенд #программирование #вебразработка #frontend #разработчик #архитектура #дизайнсистема #ui #новичкам #код

Как устроены токены в реальном фронтенд-проекте: от простого описания в коде до связки с Figma через гит-репозиторий. Разбираем, откуда берутся токены, как они подключаются к проекту и зачем вообще нужны в дизайн-системе с точки зрения разработчика. #фронтенд #вебразработка #программирование #разработчик #дизайнсистема #токены #ui #интерфейсы #архитектура #frontend

Архитектура дизайн-системы для фронтенда Проектируем дизайн-систему как часть Frontend-архитектуры. Компоненты, API, декларативная сборка интерфейсов и удобство разработки. Практика и живой разбор для Frontend-разработчиков. #frontend #webdev #programming #coding #vuejs #designsystem #frontendarchitecture #разработка #фронтенд

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

Абстракция — это системность, семантика, декларативность.