Side-relative values

Не все знают, но позиционировать фоновое изображение в CSS можно относительно любой из сторон элемента

К примеру, следующий код сместит картинку на 10% от левого края и на 20% от верхнего:

background-position: 10% 20%;

Но что, если мы хотим сделать отступ от правого и нижнего, соответственно?

Достаточно указать нужные стороны и всё будет работать:

background-position: right 10% bottom 20%;

Также существуют такие свойства, как background-position-x и background-position-y. Они позволяют делать то же самое, но для отдельных осей.

Side-relative синтаксис в этих свойствах долгое время поддерживался только в Safari и Firefox, но совсем недавно и Chrome решил себе добавить эту фичу

⚙️Поддержка браузерами side-relative: background-position, background-position-x, background-position-y

Новогодний стрим 🎄

Год подходит к концу, а значит время подводить итоги!

Планирую 28 декабря в 17:00 МСК выйти в эфир, пообщаться со всеми

Посмотрим несколько видео, поотвечаю на ваши вопросы

Если есть какие-то конкретные видео или предложения по стриму — welcome, жду в комментариях!

upd. запись https://youtu.be/_303mufIAQc

Переходи на тёмную сторону 😈

Недавно в браузеры завезли новую функцию light-dark(), которая позволяет указать 2 цвета — светлый и тёмный

Один из этих цветов будет применён в зависимости от того, какая тема включена у пользователя на устройстве

Для того, чтобы всё работало, нужно также добавить
color-scheme: light dark

Его чаще всего вешают на :root элемент, чтобы светлая и тёмная темы могли работать во всём документе

:root {
  color-scheme: light dark;
}

.button {
  background: light-dark(#ffffff, #1aff7a);
}

⚙️Поддержка браузерами широкая

Развиваем комьюнити! 🚀

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

Будем вместе решать проблемы, отвечать на вопросы, делиться полезными ссылками и обсуждать нововведения!

Подпишись, если не сложно @fe_notes_chat

Новая easing функция

Ранее, вы, скорее всего, сталкивались с такими функциями как cubic-bezier() или steps(). Относительно недавно их ряды пополнила linear()

Она не привносит чего-то нового, но позволяет работать с линейным easing'ом гораздо легче

easing, если говорить простыми словами, это ускорение или замедление анимации на отдельных этапах её выполнения

Например, мы хотим, чтобы анимация выполнилась на 70%, на 1 секунде из 5, а затем замедлилась, и оставшиеся 30% доигрывала 4 секунды

animation: move 5s linear(0 0%, 0.7 20%, 1 100%) forwards;

В коде выше числа (от 0 до 1) означают прогресс, а проценты (от 0% до 100%) - время. То есть, на 0% (0 секунде) анимация будет выполнена на 0 (на 0%), на 20% (1 секунде) будет выполнена на 0.7 (на 70%), и, наконец, на 100% (5 секунде) будет выполнена на 1 (на 100%).

Если опустить проценты, то они будут подставлены автоматически равномерно

К примеру, следующий код равнозначен:

linear(0, 0.7, 1);

linear(0 0%, 0.7 50%, 1 100%);

⚙️ Поддержка браузерами широкая

Masonry сетка всё ближе 🔥

Safari на днях выпустил Technology Preview 234 по данной фиче, а это значит, что технология уже готова, но пока ещё какое-то время будет тестироваться на наличие возможных проблем

Chrome, начиная со 140 версии, также тестирует эту фичу

Firefox с 2020 года ничего нового не публиковал, но за последнее время можно проследить подвижки и в их коде

Похоже, что Baseline уже близко!

Визуализатор серверных компонентов 🔍

После всех найденных уязвимостей в React, много кто начал погружаться в то, как RSC работает под капотом

19 декабря Ден Абрамов написал статью, в которой обозревает инструмент для визуализации работы серверных компонентов

Он позволяет пошагово увидеть все генерируемые данные (progressive JSON), которые используются внутри этого механизма

Инструмент пока что сыроват (есть 4 разные версии React на выбор и переключатель режима разработки), но для того, чтобы разобраться в сути уязвимости, пойдёт

🔗 Ссылка на github проекта

Cursor выкупил Graphitе

19 декабря на официальном сайте Cursor вышло сообщение о том, что они приобрели Graphite (ИИ-помощник, который помогает в ревью и отладке кода)

Инструментом уже пользуются такие гиганты как Shopify, Figma, X (Twitter), Vercel, Duolingo и многие другие

У стартапа, основанного в 2020 году, есть большая экспертиза и продвинутый ИИ, которые жизненно необходимы Cursor в конкурентной борьбе с другими компаниями

Обещают сделать глубокую интеграцию с Graphite, но продукт и дальше будет развиваться как отдельный

Похоже, в ближайшее время мы увидим переход Cursor от генератора кода в полноценное end-to-end решение

Забытые и неизведанные свойства

Скорее всего, вы знаете о существовании свойства hyphens. Оно позволяет указать, будут ли большие слова при нехватке места переноситься на следующую строку с использованием дефиса.

Оказывается, помимо него существуют также hyphenate-character и hyphenate-limit-chars

Первый вместо дефолтного дефиса задаёт любой другой символ переноса:

hyphenate-character: "=";

А второй — посимвольно управляет каждым словом:

hyphenate-limit-chars: 8 2 3;

Данные числа означают:
1) Запрет на перенос слов длиной короче 8 символов
2) При переносе на первой строке должно остаться не меньше 2 символов
3) На второй — не меньше 3

⚙️ Поддержка браузерами: hyphenate-character, hyphenate-limit-chars

Топ донатов месяца

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

Стрим 28 декабря:
💰 1100р. Константин
💰 250р. Денис

30 ноября и 31 декабря в телеграм:
⭐️ @maunsh 2 звёздочки

Огромное всем спасибо!

*Ссылку на профиль donation alerts не отображает, можете написать в личку, я дополню пост

Новый инструмент для работы с AI

Если вы пользуетесь библиотеками Tanstack, то, скорее всего, уже заметили новое название на их главной странице — Tanstack AI

Он упрощает добавление ИИ в ваш продукт и даёт готовый API для общения фронтенда с бекендом

Серверный файл:

import { chat } from "@tanstack/ai";
import { openaiText } from "@tanstack/ai-openai";
import { toServerSentEventsResponse } from "@tanstack/ai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const stream = chat({
    adapter: openaiText(process.env.OPENAI_KEY),
    messages,
    systemPrompts: ["You are a helpful assistant"],
  });

  return toServerSentEventsResponse(stream);
}

Клиентский файл:

import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";

export function Chat() {
  const { messages, sendMessage, isLoading, stop } = useChat({
    connection: fetchServerSentEvents("/api/chat"),
  });

  return (
    <div>
      ...
    </div>
  );
}

Дополнительно вы получаете набор браузерных Dev Tools (можно отслеживать перемещение данных), а также удобную интеграцию с остальными библиотеками экосистемы Tanstack

Разработка данного инструмента началась 8 октября 2025 года, поэтому он пока что сыроват для использования в реальных проектах, но у него ещё всё впереди!

🔗 Видео-обзор Кайла Кука
🔗 Примеры использования из официального репозитория

Новогодний стрим 🌲

Всем привет!

10 января в 17:00 МСК планирую выйти в эфир, жду всех желающих!

Ссылки, как и в прошлый раз, добавлю позже

upd. запись youtube, twitch

Новые единицы измерения 🔥

С приходом контейнерных запросов в CSS были также добавлены новые единицы измерения, которые опираются на размер родительского контейнера.

cqw - 1% ширины контейнера
cqh - 1% высоты контейнера
cqi - 1% inline-размера контейнера
cqb - 1% block-размера контейнера
cqmin - наименьшее значение из cqi и cqb
cqmax - наибольшее значение из cqi и cqb

Напомню, что контейнером в этом контексте может быть любой родительский элемент выше по дереву, который имеет свойство container-type или container в своём наборе свойств. Если таких элементов несколько, то выбирается именно ближайший.

⚙️ Поддержка браузерами широкая

AI tooling от Vercel 🔧

Тем временем команда Vercel не спит и уже давно работает над собственным инструментом для работы с ИИ

Синтаксис прям сильно похож на Tanstack AI 😄

Серверный файл:

import { generateText } from "ai";

export async function POST(req: Request) {
  const { prompt } = await req.json();
  const { text } = await generateText({
    model: "openai/gpt-4o",
    prompt,
  });

  return new Response(JSON.stringify({ text }), {
    headers: { "Content-Type": "application/json" },
  });
}

Клиентский файл:

'use client';
import React, { useState } from "react";
import { useChat } from "@ai-sdk/react";

export default function Chat() {
  const { messages, sendMessage, status } = useChat();

  return (
    <div>
      ...
    </div>
  );
}

SDK уже 6 версии, а значит может использоваться в проде. Важно, что он не привязан к Next.js и подходит для любых проектов. Инструмент имеет огромный функционал и подробнейшую документацию.

🔗 Видео-обзор от Мэтта Покока
🔗 Примеры из официального репозитория

Anchored container queries

Ранее, если вы пользовались новым Anchor Positioning API, то несмотря на всю его мощь, у вас не было возможности стилизовать тултип в зависимости от его расположения

Chrome 143 версии это исправил:
1) Свойству container-type добавили значение anchored
2) А директиве @container новый синтаксис — @container anchored(fallback: ...)

.tooltip {
  position-area: bottom;
  position-try-fallbacks: flip-block;
  container-type: anchored;

  &::before {
    content: '▲';
    position: absolute;
    bottom: 100%;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip::before {
    content: '▼';
    bottom: auto;
    top: 100%;
  }
}

В этом коде, наш тултип изначально находится снизу, но если он не умещается, то срабатывает position-try-fallbacks: flip-block; и элемент по блочной оси прыгает вверх. @container это замечает (т.к. там указан fallback: flip-block) и применяет любые внутренние стили.

🔗 Моя статья на habr по Anchor Positioning
⚙️ Поддержка браузерами пока что небольшая

Формируем ссылки для ИИ

Не все знают, что существует возможность формировать ссылку на ИИ-помощник с заранее подготовленным промптом

Это прикольная фича, которая делает ваш сайт ещё удобнее:

window.open(
  'https://chat.openai.com/?q=' + encodeURIComponent('Что такое инкапсуляция?'),
  '_blank'
);

Gemini

https://aistudio.google.com/prompts/new_chat?prompt=ПРОМПТ

Perplexity

https://www.perplexity.ai/search?q=ПРОМПТ

Claude

https://claude.ai/new?q=ПРОМПТ

Grok

https://x.com/i/grok?text=ПРОМПТ

💭 Вообще можно много чего придумать. К примеру, добавить кнопку "Спросить у ChatGPT" и приложить ссылку на вашу статью в этот URL

JavaScript Rising Stars 2025

bestofjs составил очередной ежегодный рейтинг инструментов, набравших в этом году наибольшее количество звёзд среди конкурентов.

К моему удивлению, Playwright впервые за многие годы потерял первое место и теперь его занимает Stagehand — тоже e2e фреймворк для тестирования, но основанный на ИИ.

В desktop разработке уже 5 год подряд лидирует tauri. Неплохой аргумент при сравнении с классическим electron.

В разделе генерации статики крепко утвердился Next.js, как ни странно. Gatsby вообще вылетел из гонки.

Среди дополнительных инструментов третий год подряд в топе держатся Bun, Biome и Oxc. На мой взгляд, очень интересные кандидаты к использованию.

Также интересными показались react-scan, который визуализирует перерендеры компонента, onlook, который генерирует макеты по запросу и puck, который представляет собой ИИшную версию CMS.