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

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

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

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

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

Как адаптировать компонент по ширине контейнера, а не экрана Обычные 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;
  }
}

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

Как сохранить пропорции блока без 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

Как сделать блок на всю высоту экрана без проблем с 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, когда панели браузера занимают бол

Как сделать адаптивный размер текста без 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>

На телефоне браузер оставит текст примерно возле минимального размера. На среднем экране заголовок начнёт плавно увеличиваться. А на широком мониторе остановится на заданном максимуме. Тот же приём работает не только с текстом.

Как сделать адаптивную сетку без 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 остаётся максимальн

Как обрезать длинный текст до нескольких строк без 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

Как сделать отступ при скролле к якорю без 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 и ручного сокращения текста.

.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;
}

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

Как сделать перенос заголовков аккуратнее без <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 особенно полезен для крупных заголовков, карточек, баннеров, модальных окон и блоков с ограниченной шириной. Так текст выглядит аккуратнее на разных экранах, а добавлять ручные переносы и отдельные версии заголовка больше не нужно.

Как менять родительский элемент с помощью 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() для форм, карточек, меню, фильтров и компонентов, состояние которых зависит от вложенного содержимого.

Как адаптировать компонент по ширине контейнера, а не экрана Обычные 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;
  }
}

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

Как сделать адаптивный размер текста без десятков media-запросов В CSS есть функция clamp(), которая позволяет задать минимальный, адаптивный и максимальный размер элемента. Например:

.title {
  font-size: clamp(24px, 4vw, 64px);
}

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

.section {
  padding: clamp(20px, 5vw, 80px);
}

В результате интерфейс плавно подстраивается под экран, а количество отдельных media-запросов заметно уменьшается.

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

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

Grok 4.5 вышел в открытый доступ и обошел Claude Opus 4.8 xAI выпустила самую сильную свою модель и впервые заточила её не только под код, но и под длинные задачи с инструментами в дата-сайенс, финансах и юридической работе. Внутри mixture-of-experts на новом фундаменте V9 с 1.5 триллиона параметров. Обучали совместно с командой Cursor на триллионах токенов реальных сессий разработчиков. Маск называет её моделью класса Opus, только быстрее и дешевле. На графике при анонсе Grok 4.5 обходит Claude Opus 4.8 на нескольких ключевых бенчмарках. Базовая версия стоит 2 доллара за миллион входных токенов и 6 за миллион выходных, у Opus 4.8 те же цифры 5 и 25. Модель уже работает в Cursor на всех тарифах, в Grok Build и через консоль SpaceXAI. dailyprompts.ru

Как оплачивать ChatGPT, Midjourney и Claude без посредников Еще недавно зарубежные подписки были настоящей проблемой. Нужно было искать посредников, просить кого-то оплатить сервис или использовать сложные схемы. Сейчас всё проще. С помощью @ можно выпустить виртуальную карту и оплачивать популярные сервисы напрямую. Через ZARUB можно оплачивать ChatGPT, Claude, Perplexity, Midjourney, Suno, Wavespeed и множество других нейросетей и сервисов. Почему пользователи выбирают ZARUB? — Карта выпускается за несколько секунд прямо в боте. Не нужно заполнять анкеты и ждать подтверждений. — Нет скрытых комиссий и непонятных переплат. Оплата проходит по официальному курсу. — Поддерживается 3D-Secure. Это позволяет оплачивать сервисы, где требуется дополнительное подтверждение платежа. —Можно создавать несколько карт под разные задачи. Например, одну для рекламы, другую для подписок, третью для покупок. — ZARUB поддерживает регулярные платежи. Подключили подписку один раз и дальше сервис списывает оплату автоматически. — Карты работают с мультивалютными платежами. Оплата в долларах, евро или другой валюте проходит с автоматической конвертацией. Также через ZARUB можно покупать цифровые товары, игровые валюты, подписки и другие онлайн-сервисы. Больше не нужно каждый месяц искать человека, который поможет оплатить подписку. Достаточно открыть @, пополнить баланс через СБП или криптовалюту и выпустить виртуальную карту. Один бот для оплаты всего, что нужно в современном интернете.