CSS-анимация "картинка-в-картинке" для видео с использованием container queries и position: stick

.container { container-type: scroll-state; }
@​container scroll-state(stuck: top) {
  video {
    translate: calc(50vw - 100%) calc(100vh - 100%);
  }
}

Cтавь лайк если круто ❤️

➡️ @byFrontDeveloper

Ты знал про такой трюк?

Создай редактор CSS в реальном времени всего за несколько строк HTML:

contenteditable — делает <style> редактируемым прямо на странице

style="display: block" — заставляет тег <style> вести себя как блочный элемент, чтобы его было видно и можно было редактировать

Когда ты меняешь текст внутри <style>, браузер тут же применяет новые стили ко всей странице

Можно интерактивно менять стили без JS — крутой хак для обучения или демонстраций 😍

➡️ @byFrontDeveloper

МЕГА-сборник кастомных хуков для React!

Экономь время и не изобретай велосипед заново:

✓ 50 готовых хуков
✓ С примерами кода
✓ Поддержка TypeScript

→ http://usehooks.com

Поддержи пост лайком 💳

➡️ @byFrontDeveloper

Microsoft меняет всё! GitHub Copilot эволюционирует.

Теперь это автономный кодовый агент, который работает за тебя.

✓ Назначь Copilot задачу (issue)
✓ Copilot сам создаст pull request с решением
✓ Доступно прямо из GitHub и Visual Studio Code

Смотри, как это работает 💪

➡️ @byFrontDeveloper

CSS-трюк, чтобы футер всегда был внизу страницы

div {
  display: grid;
  min-height: 100dvh;
  grid-template-rows: auto 1fr auto;
}

> min-height: 100dvh — делает контейнер не меньше высоты экрана
> grid-template-rows: auto 1fr auto — делит его на:

> auto — шапка (занимает столько, сколько нужно)
> 1fr — основная часть (растягивается, чтобы заполнить всё)
> auto — футер (прилипает к низу)

Если на странице мало контента — футер всё равно будет снизу, а если много — всё естественно растянется

Влепи лайк если пост понравился ❤️

➡️ @byFrontDeveloper

Лучшая шпаргалка по CSS Grid

Сохрани, чтобы не гуглить лишний раз ❤️

➡️ @byFrontDeveloper

Шикарная новая библиотека графиков для React

16+ видов графиков для твоего сайта

✓ Компоненты копипастой
✓ Полностью работают на сервере
✓ Поддержка Tailwind

→ http://rosencharts.com 😮

➡️ @byFrontDeveloper

🔥 НОВИНКА в HTML: Закрывай модальные окна без JavaScript.

Появился атрибут closedby — с ним всё делается суперпросто.

Вот как это работает

<button id="openDialog">
  Abrir Modal
</button>

<dialog id="myDialog" closedby="any">
  <h2>Bienvenido</h2>
  <p>Este es un ejemplo de modal en HTML</p>
  <form method="dialog">
    <button>Cerrar</button>
  </form>
</dialog>

— Кнопка "Abrir Modal" предназначена для открытия модалки
— <dialog> элемент с id="myDialog" содержит модальное окно.
— Атрибут closedby="any" указывает, что окно можно закрыть любыми способами:

> по нажатию кнопки с method="dialog"
> по нажатию вне модалки (backdrop)
> по клавише Escape

Без единой строчки JS можно создать модалку, которая закрывается привычными способами — благодаря новому атрибуту closedby="any"

Уже поддерживается Chrome, Edge, Chrome для Android, Android Browser - check

➡️ @byFrontDeveloper

TypeScript теперь работает с Go

Вышла первая бета-версия нового нативного компилятора. Прирост скорости впечатляющий — до 10 раз быстрее.

Чтобы попробовать новую версию, установите её отдельно: npm install -D @typescript/native-preview. После этого используйте tsgo вместо привычного tsc. Когда выйдет полноценный релиз (TypeScript 7), tsc и станет той самой Go-версией. Пока, для удобства тестирования, это отдельный бинарник

Плюс расширение в VS Code: “TypeScript (Native Preview)”. После установки его нужно вручную включить через палитру команд: TypeScript Native Preview: Enable (Experimental)

➡️ @byFrontDeveloper

Вам на выходные:

Игра Horizon Drive, сделанная на JavaScript и Three.js командой из Shopify 😍

Трудно поверить, насколько продвинут стал веб — теперь такие вещи работают прямо в браузере

> https://www.shopify.com/editions/summer2025/drive

➡️ @byFrontDeveloper

Нужно сравнить два изображения на своём сайте? Это официальный компонент Google.

✓ Занимает всего 3 КБ
✓ Имеет встроенные стили
✓ Работает на мобильных устройствах
✓ Совместим с любым фреймворком

Установка → npm install two-up-element

➡️ @byFrontDeveloper

Находка дня: инструмент для анализа производительности всей веб-страницы

Пробегается по всем страницам сайта и эмулирует полную навигацию, как обычный пользователь.

Запуск:

npx unlighthouse --site <твой-сайт>

Идеально для SPA, маркетинговых сайтов и больших проектов 💖

➡️ @byFrontDeveloper

ИНТЕРАКТИВНОЕ и наглядное руководство по CSS Grid

Хочешь легко создавать сетки для своего сайта?

Эта визуальная шпаргалка поможет быстро освоить CSS Grid:

→ https://joshwcomeau.com/css/interactive-guide-to-grid/ 💖

➡️ @byFrontDeveloper

В CSS подъехали обновления

Теперь доступна функция if() — полноценные условные конструкции прямо в стилях. Уже работает в Chrome 137.

А ещё завезли reading-flow и reading-order — можно управлять порядком таб-навигации в flex и grid без костылей

> Подробнее: https://developer.chrome.com/blog/new-in-chrome-137 🍷

➡️ @byFrontDeveloper

Совет по JavaScript

Можно определить операционную систему пользователя с помощью navigator.platform

Полезно для отображения UI под конкретную ОС, запуска платформенно-зависимой логики или предложения разных загрузок 🔥

➡️ @byFrontDeveloper

Minecraft в браузере

Он реально работает только на HTML и CSS — 0 строк JavaScript 😳

> benjaminaster.com/css-minecraft/

➡️ @byFrontDeveloper

Автоматическое изменение размера текстовых полей всего одной строкой CSS:

input, textarea {
  field-sizing: content;
}

Браузерам срочно нужен interop по этому свойству — оно упрощает адаптивность без JS и костылей. Хочется видеть поддержку во всех браузерах. 🌻

➡️ @byFrontDeveloper

Избегай этой ошибки с изображениями на своём сайте

Свойство CSS, чтобы они не отображались растянутыми:

object-fit: contain;

Свойство object-fit управляет тем, как содержимое вписывается в заданную область

Значение contain:

> Сохраняет пропорции содержимого;
> Вписывает его целиком в контейнер;
> Может оставлять пустые области (например, поля сверху/снизу или по бокам), если пропорции изображения и контейнера не совпадают.

В совокупности с:

aspect-ratio: 1/1;

и

width: 100px;

— создаётся квадратная область 100×100 пикселей, в которую изображение вписывается без искажений ❤️

➡️ @byFrontDeveloper

Прощай, Math.random() ❤️

В JavaScript появилась новая предложенная возможность — добавить объект Random в сам язык.

Он включает множество методов для генерации случайных значений

Предложение только что дошло до стадии 1 в ECMAScript, но выглядит многообещающе: https://github.com/tc39/proposal-random-functions

Как ты думаешь, это полезное улучшение для JavaScript? 🤔

➡️ @byFrontDeveloper

Новая фишка в Chrome DevTools — теперь можно аннотировать перформанс-трейсы с помощью Gemini (это ИИ-моделька гугла)

Разрабы из Google прикрутили ИИ прямо в инструменты производительности: кликаешь два раза по ивенту в Main-треке, жмёшь «Generate label», и Gemini на основе стека вызовов и контекста подсказывает, что там вообще происходит

Фича полезная, особенно для глубокого разбора. Стоит попробовать ✌️

Работает с версии Chrome 137

➡️ @byFrontDeveloper

Ещё кстати с помощью Gemini можно править CSS прямо в Elements и сразу сохранять изменения в исходники

Никакого копипаста между браузером и редактором. Внес правку — она тут же в проекте. Плюс — можно тестить на лету 😎

➡️ @byFrontDeveloper