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

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

Агенты научились работать с видео: появился скилл, который позволяет ИИ посмотреть любой ролик — с картинкой и звуком. Поможет анализировать длинные лекции с YouTube, трендовые ролики из TikTok или фильмы. Агент будет «читать» каждый кадр по таймкодам. Работает с Claude Code, Cursor, Codex, Gemini и десятками других агентов. Забираем тут.

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

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

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

👩‍💻 cool hover card — Эффект наведения на карточку с плавным размытием изображения

Сделано на CSS

🔗 Открыть код

👩‍💻 Profile Card UI — Стильная карточка-портфолио с анимированными кнопками.

Сделан на SVG, SCSS и JS

🔗 Открыть код

❓ Shallow vs Deep Copy: как не сломать данные? Когда мы копируем объекты в JS, важно понимать, «зацепят» ли изменения оригинала нашу копию. ⤴️ Shallow Copy (Поверхностная) Копирует только верхний уровень. Если внутри есть вложенные объекты, то копия будет ссылаться на те же участки памяти, что и оригинал. Как сделать: [...arr], {...obj} или Object.assign(). Недостаток: Изменишь вложенный объект в копии — он изменится и в оригинале. ⤵️ Deep Copy (Глубокая) Создает полную независимую копию всех уровней вложенности. Как сделать: structuredClone(obj) — современный стандарт (рекомендуется в 2026!). JSON.parse(JSON.stringify(obj)) — старый костыль (не копирует методы и Date). Библиотеки типа lodash (cloneDeep). const user = { name: "Ivan", skills: ["JS"] }; const copy = { ...user }; // Поверхностная копия copy.skills.push("React"); console.log(user.skills); // ["JS", "React"] — Ой! Оригинал тоже изменился.

Вы видели, что творит ИИ 👇 Нейросети уже умеют генерить такие фото и видео, что их не отличить от настоящей съёмки. Максимум реализма — минимум затрат. Достаточно знать нужные инструменты и уметь писать подходящие запросы. 🔍 Промпт, для этого видео, и топ-10 лучших бесплатных нейросетей для генерации контента — по кнопке ниже. Этот список поможет вам генерировать реалистичные фото и видео за пару минут! Забирай бесплатно ТУТ

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

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

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

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

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

Китай обсуждает закрытие доступа к своим топовым ИИ моделям для пользователей за пределами страны По данным Reuters, Министерство коммерции за последний месяц провело серию встреч с Alibaba, ByteDance и стартапом Z.ai. Речь идёт о самых мощных моделях, включая те, что ещё не выпущены. Ограничения могут коснуться и закрытых моделей, и открытых весов, тех самых, что можно скачать и запустить у себя на компьютере. Под удар попадают Qwen от Alibaba, Doubao от ByteDance и GLM-5.2 от Z.ai. Как именно это будет работать пока неясно, но на майском круглом столе китайские юристы предложили трёхуровневую схему. Базовые открытые инструменты, простое уведомление регулятору. Продвинутые технологии, обязательная проверка на безопасность. Самые сильные фронтир-модели, только внутренний рынок или полный запрет на публикацию.

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

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

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

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

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

🎥 Как внедрить адаптивное видео без YouTube и Vimeo? Вместо <iframe> от видеоплатформ можно встроить <video> с полной адаптивностью и контролем. Что важно: ✅ Преимущества: — Полный контроль над стилями и качеством — Поддержка вертикального и горизонтального видео — Нет рекламы и региональных блокировок — Лучше интеграция с CMS 📦 Сжимаем видео: — Используй Handbrake — Форматы: WebM (в приоритете) + MP4 — Включи Web Optimized — RF 30 для MP4, WebM — примерно на 25% от максимального качества 📱 Адаптация под ориентацию:

<video controls playsinline preload="none">
  <source src="video-vert.webm" media="(max-aspect-ratio: 1/1)">
  <source src="video-horiz.webm">
</video>

📐 Избегай смещений верстки: Используй aspect-ratio через CSS-переменные:

video {
  aspect-ratio: var(--aspect-ratio, 9 / 16);
}
@media (min-aspect-ratio: 1/1) {
  video {
    --aspect-ratio: 16 / 9;
  }
}

🔄 Обновление при fullscreen и resize:

const update = (video) => {
  clearTimeout(debounce);
  debounce = setTimeout(() => {
    const t = video.currentTime;
    video.load();
    video.currentTime = t;
  }, 50);
};

🖼 Постеры (заставки): — Один poster для всех разрешений — Лучше: сжато, но в высоком разрешении — Альтернатива: responsive background image + скрытое видео 🔇 Субтитры:

<track src="subs.vtt" kind="subtitles" srclang="ru" label="Русский">

📉 Оптимизация загрузки: — preload="none" — loading="lazy" пока не работает для <video> 💡 Даже 2 файла (горизонтальный + вертикальный) с WebM дадут большой прирост UX и скорости ⚡️

Держите полезную CLI-утилиту — npkill, предназначенную для удаления всех папок node_modules в проектах. Позволяет освободить значительное количество места на диске Запускаешь команду: npx npkill Дальше, просто нажимаешь [Пробел], чтобы удалить те папки, которые больше не используешь Удобно ещё и то, что она показывает, сколько дней назад была последняя модификация

VPN, который можно включить один раз — и больше о нём не думать. Надоело постоянно переключать VPN туда-сюда? Включил ради одного сервиса — перестал нормально работать банк. Выключил — снова не открывается нужный сайт. В Архангел VPN это решили автоматически добавив белые списки! И всё это одновременно. Ничего вручную переключать не нужно. Плюс внутри уже есть: — встроенный AdBlock — меньше рекламы и трекеров — быстрые серверы — подключение за несколько минут — удобное управление прямо из Telegram — оплата картой, СБП, Криптовалютой или Telegram Stars — пробный доступ перед покупкой И главное — без дорогих подписок по 300–500 ₽ в месяц. Тарифы Архангел VPN — от 49 ₽ А по промокоду FORNT5 · скидка 5% То есть полноценный VPN можно получить дешевле чашки кофе, без сложных настроек и скрытых условий. Оплатили → нажали «Подключить» → готово. Попробуйте Архангел VPN и почувствуйте разницу сами. 👉 @arhangel29bot Архангел VPN — включил и забыл!

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

Совет по CSS: Единица измерения turn Иногда проще задать вращение с помощью единицы turn вместо deg, особенно когда нужно указать значение больше 360 градусов (1 turn = 360 deg)

😍 QuickRef — компактная шпаргалка по JavaScript! Это удобный справочник, где собраны ключевые конструкции, методы и синтаксис JS на одной странице. Здесь есть всё необходимое: переменные, функции, операторы, строки, массивы и базовые примеры кода для быстрого ориентирования. Формат максимально сжатый и практичный. 📌 Оставляю ссылочку: quickref.me

Sakana AI выпустила Fugu, модель, которая внутри сама собирает команду из других ИИ под вашу задачу Снаружи это один API, как у любого чат-бота. Внутри Fugu сама решает, справится в одиночку или позвать сильных специалистов из своего пула, распределяет задачи, проверяет ответы и собирает итог. Версий две. Обычная Fugu для повседневной работы и Fugu Ultra для сложных многошаговых задач. Обе подключаются через один OpenAI совместимый API. По бенчмаркам Fugu Ultra идет вровень с Anthropic Fable 5 и Mythos Preview на инженерных, научных и рассуждающих тестах. На практических задачах обходит Gemini 3.1 Pro, Opus 4.8 и GPT 5.5. На код ревью Fugu Ultra находит десятки проблем там, где другие модели видят три или четыре. Хорошо держит роль агента в долгих сессиях, не сбивается со своей задачи. По одному короткому заданию способна провести полный аудит безопасности с отчетом и не выйти за рамки. Главная фишка не только в качестве. Fugu не зависит от одного поставщика.

Опыт в своей области важнее умения программировать Anthropic опубликовала исследование по 400 тысячам сессий Claude Code от 235 тысяч пользователей. Главный вывод. В типичной сессии человек принимает 70% решений о том, что делать, а Claude принимает 80% решений о том, как это делать. Человек ставит задачу, ИИ её реализует. Эксперты в своей области получают от инструмента значительно больше. У новичка каждый промпт запускает примерно 5 действий Claude и 600 слов вывода. У эксперта те же метрики равны 12 действиям и 3200 словам. Разница в 5 раз, при этом речь не про знание кода, а про понимание своей предметной области. По успешности сессий картина схожая. Новички добиваются подтверждённого результата в 15% случаев, пользователи среднего уровня и выше в 28-33%. Но самый большой скачок происходит при переходе от новичка к среднему уровню, а не от среднего к эксперту.