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

Недавно в браузеры завезли новую функцию 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.

Новый HTML элемент 🔥

В Chrome 144 добавили тег <geolocation>, который представляет собой кнопку, вокруг которой построен API управления местоположением пользователя.

Ранее браузеры блокировали запросы на доступ к таким данным, если они вызывались неявно. Например, в ходе выполнения какой-нибудь сторонней функции или внутри какого-нибудь setTimeout (без явного синхронного клика пользователя по кнопке).

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

Собственно, для этого и придумали новый тег. Кнопку можно стилизовать также, как и обычную, но повлиять на текст внутри неё невозможно. Также не получится её скрыть, сделать прозрачной или как-то по-другому "заставить" пользователя нажать на неё неосознанно. Она просто перестанет работать.

Думается мне, Chrome и другие браузеры подготавливают почву для ужесточений в политиках доступов и это пока что первый шаг.

<geolocation id="geo" autolocate watch></geolocation>

geo.addEventListener('location', () => {
  // Изменились данные о местоположении
});

geo.addEventListener('promptaction', () => {
  // Пользователь принял или отклонил предупреждение
});

geo.addEventListener('promptdismiss', () => {
  // Пользователь закрыл предупреждение
});

geo.addEventListener('validationstatuschange', () => {
  // Данные о разрешении пользователя изменились
});

🔗 Ссылка на спецификацию
⚙️ Поддерживается пока что только в Chrome

Стилизуем найденный текст 🔥

Думаю все знают, что при помощи комбинации клавиш
Ctrl + F можно осуществлять поиск по странице в браузере. Найденный текст выделяется цветом, определённым браузером по-умолчанию. Но что делать, если мы хотим его переопределить?

Chrome в 144 версии добавил такую возможность:

// Все найденные совпадения
::search-text {
  background: blue;
}

// Текущее совпадение
::search-text:current {
  background: red;
  font-weight: bold;
}

Псевдоэлемент ::search-text можно также вешать на другие селекторы, чтобы сузить конечную выборку.

Например:

div::search-text { }

Спецификация помимо :current зарезервировала также :past и :future для будущих доработок, но пока что они нигде не реализованы. Они предполагают стилизацию всех элементов до и после :current, соответственно.

🔗 Ссылка на спецификацию
⚙️ Поддерживается пока что только в Chrome