Frontend Portal

POV: используешь GPT-6 Astra, чтобы поменять цвет кнопки

➡️ @FrontendPortal

Разработка в гибриде

В Yandex Cloud развивают предложения для создания гибридного контура.

Cloud Interconnect помогает безопасно связать on-premises, облачную инфраструктуру и сторонние площадки, а VPC Private Endpoint обеспечивают безопасное соединение ресурсов в облаке без выхода в Интернет.

Дополнительные нагрузки можно переносить на выделенный контур, который представлен BareMetal Extend - это готовая инфраструктура с виртуализацией или Kuberbetes на базе выделенных серверов. Таким образом данные можно хранить и обрабатывать безопасно и изолированно от публичного облака.

Большое обновление представлено в Stackland - платформе, которая развертывается локально в контуре компании. Появились новые PaaS, за счет которых можно создать полноценную платформу данных. Для этого есть все необходимое

В облачном Object Storage появился Intelligent Tiering - автоматически распределяет данные между хранилищами с учетом того, как часто к ним обращаются. Редко используемые данные переносят в более холодный класс и за счет этого оптимизируют расходы.

В итоге вычисления можно гибко распределять под текущие задачи.

@FrontendPortal

CSS + браузеры только что убрали необходимость ещё в одном JavaScript-костыле

Вы читаете страницу. Выше подгружается изображение. Контент резко сдвигается, и вы теряете место, на котором остановились.

В Safari 27 по умолчанию включили scroll anchoring, поэтому теперь все основные браузеры удерживают текущую позицию на странице. Никакого JS для восстановления скролла

Вот что ещё теперь можно спокойно использовать в проде 👆

➡️ @FrontendPortal

Идеальное центрирование, margin: auto у flex-контейнера

➡️ @FrontendPortal | #CSS

Claude Opus 5.5 отрисовал каждый кадр этой анимации на JavaScript

Вот «как работают браузеры» за 40 секунд.

➡️ @FrontendPortal

CSS-совет

contrast-color() позволяет браузеру самому подобрать цвет текста для кнопки.

.button {
  --bg: hsl(55 88% 52%);
  background: var(--bg);
  color: contrast-color(var(--bg));
}

Функция возвращает чёрный или белый цвет – в зависимости от того, какой из них даёт больший контраст с фоном.

➡️ @FrontendPortal

Node.js 26.10 — нативная поддержка throttle/debounce

Вот этого я не ожидал

Покойся с миром, lodash.

Когда уже предложение в TC39?

Релиз:
https://nodejs.org/en/blog/release/v26.10.0

Документация:
https://nodejs.org/docs/latest/api/util.html#utildebouncefn-wait-options

➡️ @FrontendPortal

Некоторые забавные вещи, о которых вы, возможно, не знали, можно делать с помощью тега <a> 😌

➡️ @FrontendPortal | #CSS

Теперь ИИ-агенту можно поставить задачу прямо в обсуждении GitLab

В SourceCraft появилась возможность подключать автономных ИИ-агентов к рабочим процессам команды. Агент работает под отдельной учетной записью: получает задачу в треде, самостоятельно пишет или проверяет код, а результат возвращает разработчику на ревью.

Если по ходу работы не хватает информации или требуется согласование, агент сам обращается к команде.

Можно подключать и собственных агентов, например созданных в Yandex AI Studio.

Chrome 154 — адаптивное изменение размера iframe

Теперь <iframe> сможет менять размер в зависимости от размеров встроенного в него документа.

Разве не об этом авторы виджетов и расширений мечтали годами? 😆

Вместо того чтобы использовать postMessage({resize})
https://bram.us/2026/09/23/responsive-iframes/

➡️ @FrontendPortal

У меня есть приём, который похвалил один сильный CSS-разработчик из-за рубежа: задавать border-radius вот так — border-radius: calc(sign(100lvw - 100%) * 40px).

Когда элемент растягивается на весь экран, скругление углов автоматически убирается.

➡️ @FrontendPortal | #CSS

Обрезка текста для одной единственной строки

Когда мы хотим, чтобы наш текст был на одной линии (на прямой линии). Мы можем добиться этого, установив свойство white-space на значение nowrap. Если текст длинный, а ширина контейнера например 300px, тогда текст будет просто выходить за пределы контейнера, хоть и по прежнему будет в одну строку.

Чтобы его обрезать можно использовать следующие свойства:

.truncated-text {
  width: 300px;
  overflow: hidden; // скрывает все что выходит за зону контейнера
  text-overflow: ellipsis; // заменяет скрытый текст на многоточие 
  white-space: nowrap; // текст в одну строку
}

- Обрезка текста для блока с несколькими строками: пост

➡️ @FrontendPortal | #CSS