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

Меняем тип каретки в поле ввода 🔥

Что ни день, то революция в вебе!

Chrome в 144 версии выпустил новое свойство — caret-shape, которое позволяет менять тип каретки в редактируемых элементах.

Возможные значения:
auto (по-умолчанию) — стандартное значение зависящее от платформы
bar — вертикальная полоска
block — прямоугольник
underscore — горизонтальная полоска снизу

ℹ️ Напомню, что это не первое свойство из данной серии. Ранее уже были представлены caret-color и caret-animation, которые позволяют менять цвет и анимацию каретки, соответственно.

⚙️ Поддерживается пока что только в Chrome

В Chrome завезли Temporal API 🔥

После Firefox данный API появился и в Chrome, на очереди остаётся лишь Safari.

Если вы не в курсе, то Temporal пришёл на смену стандартному Date для работы с датами, временем и всем связанным с этим. Он решает множество старых проблем, даёт более удобный API, а также открывает новые и недоступные ранее возможности.

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

Возможно вы задумались:
— А может ли Temporal заменить библиотеки для работы с датами, вроде dayjs?

Ответ:
— И да, и нет

В простых кейсах, как и раньше с Date, вполне можно обойтись и браузерными возможностями, но в сложных вам по-прежнему придётся писать в разы кода без использования библиотек.

🛠 Полифил
⚙️ Поддержка браузерами

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

Январь подошёл к концу, по традиции благодарю всех, кто поддержал канал в этом месяце!

Телеграм:
⭐️ @maunsh 4 звёздочки
⭐️ @donaks 4 звёздочки

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

Вышла 25 версия Node.js ⚡️

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

Из интересного:
🐥 Обновили движок V8 до версии 14.1, что, к примеру, дало прирост к скорости выполнения JSON.stringify на 30-50%

🐥 localStorage и sessionStorage теперь доступны "из коробки"

🐥 Добавлен ErrorEvent по аналогии с браузером:

window.addEventListener('error', (event) => {
  // ...
});

🐥 Uint8Array получил браузерные методы декодирования в base64 и hex:

const data = new Uint8Array([72, 101, 108, 108, 111]);

const base64 = data.toBase64();
const hex = data.toHex();

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

ℹ️ Напомню, что в Node.js теперь не нужен build этап для работы TypeScript, он самостоятельно удаляется при запуске скрипта, но для запуска проверок по-прежнему нужен tsc.

🔗 Список всех изменений

Забытые и неизведанные атрибуты формы

Сегодня сделал для себя внезапное открытие.

Оказывается, у кнопки существует атрибут formmethod, который позволяет переопределить используемый метод.

К примеру, в следующем коде первая кнопка заменяет POST на GET запрос, а вторая оставляет всё как есть:

<form method="post" action="/search">
  <button formmethod="get">Отправить форму как GET</button>
  <button>Отправить форму как POST</button>
</form>

ℹ️ Напомню, что в HTML форма поддерживает только POST и GET запросы. Никакие другие методы (DELETE, например) работать не будут.

ℹ️ Также важно понимать, что данный атрибут предназначен только для submit-кнопок. То есть, если в ней будет указано type="button", то работать не будет. Если не указать атрибут type, то он по-умолчанию будет submit.

Также method и formmethod имеют значение dialog, которое вместо отправки формы даёт возможность управлять диалоговым окном:

<dialog id="confirm">
  <form method="dialog">
    <p>Удалить файл?</p>

    <button value="cancel">Отмена</button>
    <button value="confirm">Удалить</button>
  </form>
</dialog>

const dialog = document.getElementById('confirm');

dialog.showModal();

dialog.addEventListener('close', () => {
  console.log(dialog.returnValue); // cancel или confirm
});

Сравнение возможностей AI Coding инструментов

Случайно наткнулся на таблицу, которая наглядно показывает разницу между AI инструментами для генерации кода.

Будет полезна тем, кто ещё не определился с выбором или ищет что-то другое.

🔗 Ссылка

Chrome Dev Tools внутри Chrome Dev Tools 🤯

Возможно вы не знали, но Chrome Dev Tools тоже рендерятся на HTML и CSS и их дерево DOM можно также инспектировать другими Chrome Dev Tools.

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

Windows: Ctrl + Shift + I
MacOS: Cmd + Opt + I

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

Мощный анализатор CSS стилей

Нашёл крутой инструмент для работы с CSS в проекте

Он даёт подробную информацию о:
— Размерах файлов
— Покрытии Atomic свойствами
— Количестве свойств, классов и прочего
— Подсчитывает специфичность селекторов
— Составляет палитру всех цветов
— Кучу всего по шрифтам, отступам, скруглениям, теням и прочему

В Chrome Dev Tools во вкладке CSS Overview есть похожий функционал, но он пока что не настолько масштабный и находится в экспериментальном режиме.

🔗 Ссылка

Вышел новый TypeScript 🔥

На днях опубликовали бета версию TypeScript 6, это переходная версия перед крупным портированием ядра компилятора на Go.

Из нового:
1) Добавлены типы ECMAScript 2025, Temporal API, новых методов Map и WeakMap
2) dom.iterable и dom.asynciterable перенесены в dom
3) Новый флаг --stableTypeOrdering
4) Уменьшена контекстная зависимость в функциях без this
5) Добавлена поддержка subpath imports вида #/
6) Cтала доступна комбинация из --moduleResolution bundler и --module commonjs

Изменились значения tsconfig по-умолчанию:
1) strict: true
2) module: esnext
3) target: самая актуальная ECMAScript версия (на данный момент es2025)
4) noUncheckedSideEffectImports: true
5) libReplacement: false
6) compilerOptions.rootDir: "."
7) compilerOptions.types: []

Устарело:
1) target: es5
2) --downlevelIteration
3) --moduleResolution
4) module: amd, umd, и systemjs
5) --baseUrl
6) --moduleResolution classic
7) --esModuleInterop false и --allowSyntheticDefaultImports false
8) --alwaysStrict false
9) --outFile
10) Старый синтаксис для объявления неймспейсов
11) Ключевое слово asserts в импортах
12) Директива no-default-lib

🔗 Ссылка на подробный обзор

Менторство

Приветствую всех, дорогие друзья!

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

Я так подумал, а ведь у меня есть:
1) Свободное время на выходных
2) Огромный список контактов HR (больше 300 человек), который накопился за всё время работы
3) Огромная база вопросов и задач с собеседований (с ответами), которые я старательно всегда выписывал для собственных нужд

Всем этим я могу поделиться с вами

Чем конкретно могу помочь:
1) Подготовка резюме
2) Моковые собеседования
3) Составление индивидуального плана развития
4) Консультации по вопросам поиска работы, состоянии рынка и любым другим, связанным с Frontend и IT вцелом
5) Помощь в развитии

Данный формат будет полезен как для разработчиков уровня Junior / Middle, так и для опытных — Senior / Lead

Думаю можно было бы сделать это ввиде ежемесячной подписки на Boosty или другой платформе

Хотелось бы понять сколько всего желающих. Поставьте, пожалуйста, эмодзи 🐳 на этот пост, если хотели бы попробовать.