Фронтенд Гайд

12-летняя девочка запустила ИИ-стартап: она разработала бота-ассистента, который помогает малому бизнесу удерживать клиентов. Мана Джампала написала сервис через Claude. Бот успешно прошел первые тесты. Через два года она планирует выйти на акселераторы Y Combinator или a16z, а следом — на венчурные фонды. Одна проблема — возраст. Сервис Маны нравится онлайн-бизнесу, но на живых питчах ее не воспринимают всерьез.

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

Как сделать адаптивный размер текста без десятков media-запросов В CSS есть функция clamp(), которая позволяет задать минимальный, адаптивный и максимальный размер элемента. Например: .title { font-size: clamp(24px, 4vw, 64px); } Первое значение — минимальный размер текста, второе меняется вместе с шириной экрана, а третье ограничивает максимальный размер. Таким способом можно адаптировать не только шрифты, но и отступы, ширину блоков, расстояние между элементами и размеры кнопок. .section { padding: clamp(20px, 5vw, 80px); } В результате интерфейс плавно подстраивается под экран, а количество отдельных media-запросов заметно уменьшается.

Как адаптировать компонент по ширине контейнера, а не экрана Обычные media-запросы ориентируются на ширину окна браузера. Но один и тот же компонент может находиться в широкой секции, узком сайдбаре или сетке карточек. Для таких случаев в CSS есть контейнерные запросы. Сначала нужно объявить родительский элемент контейнером: .card-wrapper { container-type: inline-size; } После этого стили компонента можно менять в зависимости от ширины именно этого контейнера: .card { display: grid; grid-template-columns: 1fr; } @container (min-width: 560px) { .card { grid-template-columns: 160px 1fr; } } Теперь карточка сама переключит компоновку, когда для неё появится достаточно места — независимо от ширины всего экрана. Контейнерные запросы особенно удобны для карточек, виджетов, сайдбаров и переиспользуемых компонентов в больших интерфейсах.

Как менять родительский элемент с помощью CSS :has() Раньше CSS не позволял выбрать родительский элемент в зависимости от того, что находится внутри него. Для этого приходилось добавлять JavaScript или отдельные классы. Теперь можно использовать псевдокласс :has(). Например, подсветим поле формы, если внутри него есть элемент с ошибкой: .form-field:has(.error) { border-color: #ff4d67; background: #fff3f5; } Или изменим карточку, если внутри находится выбранный чекбокс: .card:has(input:checked) { border-color: #3185ff; transform: translateY(-2px); } Также :has() удобно использовать для проверки соседних элементов: .item:has(+ .item.active) { opacity: 0.6; } Главное преимущество — можно строить интерактивные состояния интерфейса без лишних классов и небольших JavaScript-обработчиков. Используйте :has() для форм, карточек, меню, фильтров и компонентов, состояние которых зависит от вложенного содержимого.

Как сделать перенос заголовков аккуратнее без <br> Длинные заголовки часто переносятся неудачно: первая строка получается слишком длинной, а во второй остаётся одно-два слова. Вместо ручной расстановки <br> можно использовать CSS-свойство text-wrap: balance .hero-title { max-width: 18ch; text-wrap: balance; } Браузер перераспределит слова между строками так, чтобы их длина выглядела более сбалансированной. Для обычного текста можно использовать другое значение: .article-text { text-wrap: pretty; } pretty старается улучшить переносы в абзаце и уменьшить вероятность появления короткого одинокого слова в последней строке. Пример: .card-title { font-size: 32px; line-height: 1.15; text-wrap: balance; } text-wrap: balance особенно полезен для крупных заголовков, карточек, баннеров, модальных окон и блоков с ограниченной шириной. Так текст выглядит аккуратнее на разных экранах, а добавлять ручные переносы и отдельные версии заголовка больше не нужно.

Как ограничить текст несколькими строками без JS Длинные описания в карточках часто ломают сетку: одна карточка получается заметно выше остальных. Обрезать такой текст можно средствами CSS — без JavaScript и ручного сокращения текста. .card-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } В этом примере браузер покажет максимум 3 строки, а всё остальное содержимое будет скрыто. Если нужна всего одна строка, можно использовать более простой вариант: .card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } В результате слишком длинный заголовок аккуратно обрежется и получит многоточие. Удобно для карточек товаров, списков, превью статей и любых интерфейсов, где важно сохранить одинаковую высоту элементов.

Как сделать отступ при скролле к якорю без JS Если на сайте есть фиксированная шапка, переход по якорной ссылке часто выглядит не очень: нужный заголовок прокручивается к самому верху страницы и оказывается прямо под header. Исправить это можно одной CSS-свойством — без JavaScript и дополнительных вычислений. .section { scroll-margin-top: 80px; } Теперь при переходе к элементу: <a href="#contacts">Контакты</a> <section id="contacts" class="section"> ... </section> браузер оставит сверху указанный отступ и заголовок не спрячется за фиксированной шапкой. Если хочется ещё и плавную прокрутку, добавьте: html { scroll-behavior: smooth; } Такой подход особенно удобен для лендингов, документации, FAQ и страниц с навигацией по разделам. Никаких обработчиков click, вычисления координат через getBoundingClientRect() и ручного window.scrollTo()

Как обрезать длинный текст до нескольких строк без JS Если в карточках, списках или превью текст бывает разной длины, блоки быстро начинают выглядеть неровно. Один заголовок занимает одну строку, другой — четыре, и вся сетка «прыгает». Исправить это можно средствами CSS — без JavaScript и ручного обрезания текста. .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } Теперь текст будет отображаться максимум в две строки, а всё лишнее автоматически скроется. Например: <h3 class="title"> Очень длинный заголовок карточки, который обычно занимает несколько строк </h3> Если нужно оставить три строки, достаточно изменить значение: .title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } А если высота блока должна всегда оставаться одинаковой, можно дополнительно задать line-height и min-height: .title { line-height: 24px; min-height: 48px; display: -webkit-box; -webki

Как сделать адаптивную сетку без media queries Обычно для адаптивных карточек начинают писать несколько @media: @media (max-width: 1200px) { ... } @media (max-width: 768px) { ... } @media (max-width: 480px) { ... } Но во многих случаях они вообще не нужны. CSS Grid умеет самостоятельно определять, сколько карточек помещается в строку. Достаточно: .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } Ключевая часть здесь: repeat(auto-fit, minmax(250px, 1fr)) minmax(250px, 1fr) говорит браузеру: карточка не должна становиться уже 250px, но может растягиваться на свободное место. А auto-fit автоматически определяет количество колонок. Например, на широком экране получится: [ Карточка ] [ Карточка ] [ Карточка ] [ Карточка ] На экране поменьше: [ Карточка ] [ Карточка ] [ Карточка ] [ Карточка ] А на телефоне: [ Карточка ] [ Карточка ] [ Карточка ] При этом никаких breakpoint'ов задавать не нужно. HTML остаётся максимальн

Как сделать адаптивный размер текста без media queries Для разных экранов часто задают размер текста вручную: @media (max-width: 1200px) { .title { font-size: 48px; } } @media (max-width: 768px) { .title { font-size: 36px; } } @media (max-width: 480px) { .title { font-size: 28px; } } Работает, но для обычной адаптивной типографики можно обойтись вообще без @media. Используйте clamp(): .title { font-size: clamp(28px, 5vw, 64px); } У clamp() три значения: clamp(минимум, желаемое значение, максимум) В нашем примере: clamp(28px, 5vw, 64px) означает: меньше 28px текст не станет; между этими значениями размер плавно зависит от ширины экрана; больше 64px текст не вырастет. Например: <h1 class="title"> Большой адаптивный заголовок </h1> На телефоне браузер оставит текст примерно возле минимального размера. На среднем экране заголовок начнёт плавно увеличиваться. А на широком мониторе остановится на заданном максимуме. Тот же приём работает не только с текстом.

Как сделать блок на всю высоту экрана без проблем с 100vh Для полноэкранных секций часто пишут: .hero { min-height: 100vh; } На компьютере всё выглядит нормально. Но на мобильных браузерах 100vh может вести себя неожиданно из-за адресной строки и нижней панели браузера. В результате блок иногда оказывается выше видимой области, а часть контента уезжает вниз. Для современных браузеров лучше использовать dvh: .hero { min-height: 100dvh; } dvh означает dynamic viewport height. То есть браузер пересчитывает высоту блока вместе с изменением реально доступной области экрана. Например: <section class="hero"> <h1>Главный экран</h1> <p>Контент всегда помещается в видимую область.</p> </section> .hero { min-height: 100dvh; display: grid; place-items: center; } Теперь при появлении или скрытии панелей мобильного браузера высота секции будет корректироваться автоматически. Есть ещё два похожих значения: 100svh 100lvh 100dvh svh — минимальная высота viewport, когда панели браузера занимают бол

Как сохранить пропорции блока без JS и padding-хаков Раньше для видео, превью и карточек с фиксированным соотношением сторон часто использовали такой трюк: .preview { position: relative; padding-top: 56.25%; } 56.25% соответствует формату 16:9. Работает, но код выглядит неочевидно, а для другого формата приходится снова высчитывать проценты. В современном CSS есть нормальное решение — aspect-ratio. .preview { aspect-ratio: 16 / 9; } Теперь браузер сам рассчитывает высоту блока относительно его ширины. Например: <div class="preview"> <img src="image.jpg" alt=""> </div> .preview { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } Если внутри находится изображение, добавляем: .preview img { width: 100%; height: 100%; object-fit: cover; } В итоге картинка всегда занимает весь блок и сохраняет нужные пропорции. Для квадратной карточки: .avatar { aspect-ratio: 1 / 1; } Для вертикального изображения: .poster { aspect-ratio: 3 / 4; } Для классического видео: .video

Как адаптировать компонент по ширине контейнера, а не экрана Обычные media-запросы ориентируются на ширину окна браузера. Но один и тот же компонент может находиться в широкой секции, узком сайдбаре или сетке карточек. Для таких случаев в CSS есть контейнерные запросы. Сначала нужно объявить родительский элемент контейнером: .card-wrapper { container-type: inline-size; } После этого стили компонента можно менять в зависимости от ширины именно этого контейнера: .card { display: grid; grid-template-columns: 1fr; } @container (min-width: 560px) { .card { grid-template-columns: 160px 1fr; } } Теперь карточка сама переключит компоновку, когда для неё появится достаточно места — независимо от ширины всего экрана. Контейнерные запросы особенно удобны для карточек, виджетов, сайдбаров и переиспользуемых компонентов в больших интерфейсах.

👩‍💻 Хочешь показать кусок кода так, чтобы он выглядел аккуратно? Polacode — делает скриншоты кода прямо из VS Code: с подсветкой синтаксиса, темой редактора и оформлением. Просто выделяешь код и получаешь готовое изображение для поста, документации или презентации.

HTML-совет Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п. Почему? - На десктопе появляется ненужный спиннер. - Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз. Вместо этого — используй inputmode="numeric" + pattern ✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX. ✅ Добавляет валидацию на цифры.

📂 Напоминалка для работы с JavaScript! Например, let и const используются для корректного объявления переменных, map и forEach — для обработки массивов, а includes и split помогают при работе со строками. На картинке — базовые конструкции языка и самые часто используемые методы, которые стоит держать под рукой. Сохрани, чтобы не забыть!

Годная JS-либа для реализации drag-and-drop списков — Sortable Живёт уже не первый год, проверена временем и продом. Поддерживает перетаскивание элементов как внутри одного списка, так и между несколькими. Работает на нативном Drag and Drop API Простой и читаемый API, никаких зависимостей. Поддерживает анимацию при перетаскивании, работает на десктопах и тач-устройствах. Совместима с большинством фреймворков.

👩‍💻 Управляем резиновым ресайзом одной строкой! Пользователь может растянуть <textarea> как угодно, и это часто ломает layout, вылазит за контейнер, разваливает сетку, сдвигает кнопку отправки: textarea { resize: both; } Если ресайз в интерфейсе не предусмотрен, запретим его явно: textarea { resize: none; } Нужен только вертикальный ресайз (самый безопасный для формы)? Тогда так: textarea { resize: vertical; } 🔥 Такая мелкая деталь, позволяет сохранять целостность интерфейса.

Напоминалка для работы с DOM! DOM — это то, через что JavaScript управляет HTML: ищет элементы, создаёт новые узлы, вешает события и реагирует на действия пользователя. На картинке — базовые методы document и node, а также самые часто используемые события мыши, клавиатуры и форм. Сохрани, чтобы не забыть!

Возможно, вы не знали, что можно напрямую получить значение числового input-поля как число с помощью valueAsNumber. Ручное преобразование не требуется Свойство value у HTMLInputElement всегда возвращает строку. Поэтому для числовых полей нам приходится вручную преобразовывать значение в число с помощью parseInt(), parseFloat(), Number() или оператора +. Мы можем упростить это, используя valueAsNumber. Оно напрямую возвращает значение как число.

😂👍

Растягивай абсолютные элементы в одну строку — через inset! Многие задают абсолютным элементам растяжение вручную: .block::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; } Но то же самое можно записать короче — одной строкой: .block { position: relative; } .block::before { position: absolute; inset: 0; content: ""; } inset: 0 означает сразу: top: 0; right: 0; bottom: 0; left: 0; — элемент растянется по родителю. 🔥 Полезно для оверлеев, эффектов, декоративных слоёв и background-паттернов.

Напоминалка для работы с Git. Например, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переключаться между ветками. На картинке — 12 самых нужных команд, которые стоит держать под рукой. Сохрани, чтобы не забыть!