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

Различие между Object.freeze() и const const и Object.freeze – две разные фичи JavaScript. const применяется только для неизменяемой ссылки на ячейку памяти со значением, что означает невозможность задать новое значение для переменной. Object.freeze работает со значениями объектов. Делает объект неизменяемым, то есть изменить его свойства невозможно.

OpenAI потеряли $38,5 млрд в 2025 году — это почти втрое больше их выручки. Отчет о финансовом положении компании оказался в сети. Надежность данных подтвердили в Financial Times. Всего за год чистый убыток создателей ChatGPT вырос почти в 8 раз. При этом они активно готовятся к выходу на биржу. Действительно некоммерческая компания.

Claude Cowork теперь в браузере и на телефоне, работа не останавливается когда вы закрываете ноутбук Cowork это режим, где вы даете Claude задачу целиком, а он сам ковыряется в файлах, календаре, почте и вебе, пока не доведет до конца. Раньше он жил только на компьютере, поэтому все замирало как только вы закрывали ноутбук. Теперь задача идет за вами по устройствам, продолжается в фоне даже с выключенным ноутбуком, а когда нужен ваш выбор, вопрос прилетает уведомлением на телефон. Например, ставите подготовку к встрече на 6 утра понедельника, Claude читает переписку, транскрипты созвонов и свежие новости по клиенту, собирает бриф и накидывает черновик письма. Утром просто открываете готовое. По данным самой Anthropic больше 90% задач в Cowork это не код, а офисная рутина, сведение расходов, трекеры договоров, сборка презентаций из транскриптов встреч. Бета раскатывается волнами, первыми получают пользователи тарифа Max. Лимиты Cowork удвоены до 5 августа.

Настраиваем иерархию стилей в проекте! Когда проект растёт, стили начинают перебиваться и путаться. CSS дал решение - каскадные слои. Создайте слои с приоритетом: @lаyer reset, base, components, utilities; Теперь порядок каскада становится управляемым: слои идут строго в указанной последовательности, а внутри слоя продолжают работать обычные правила (специфичность и порядок объявления). Например, базовые стили: @lаyer base { button { font-size: 1rem; }} Компоненты идут выше по приоритету: @lаyer components { .btn-primary { font-size: 1.1rem; }} И утилиты завершают каскад: @lаyer utilities { .fs-lg { font-size: 1.25rem; }} 🔥 Так исчезают конфликты слоёв, приоритеты всегда предсказуемы, проще мигрировать и рефакторить большие проекты.

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

📂 Напоминалка для работы с React.js! Например, useState помогает хранить состояние компонента, а useEffect — работать с побочными эффектами и запросами к API. На картинке — основные темы и приёмы, которые чаще всего используются в React-разработке: хуки, рендеринг, формы, роутинг, стилизация и оптимизация. Сохрани, чтобы не забыть!

CEO Y Combinator выкатил свой сетап для Claude Code Это целая виртуальная команда из 10+ ролей, которая живёт внутри CLI. Теперь мы живем в реальности, где один человек гоняет 5–10 агентов параллельно: они пишут код, тесты, сами находят баги и фиксят их. У самого Гарри получается до 10–20к строк кода в день при работе «параллельно с CEO». По факту это превращает Claude в управляемый софтверный завод с ролями, процессами и гейтами.

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

Растягивай абсолютные элементы в одну строку — через 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-паттернов.

😂👍

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

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

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

Годная 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