WXT — кроссбраузерный фреймворк для создания веб-расширений нового поколения 🔥

WXT основан на Nuxt и стремится предоставить такой же отличный DX с TypeScript, автоматическим импортом и продуманной структурой

Есть несколько стартовых шаблонов для наших любимых фреймворков: Vue, React, Svelte, SolidJs

Фреймворк👇
https://wxt.dev/

Zod — библиотека для объявления и проверки схем на TypeScript👍

Цель Zod'а состоит в том, чтобы исключить дублирование объявлений типов. С его помощью ты один раз объявляешь валидатор, и Zod автоматически выводит статический тип TypeScript. Простые типы легко объединить в сложные структуры данных

Например, Zod позволит тебе анализировать переменные окружения, обережёт тебя от ручных проверок, как на скрине

Библиотека👇
https://zod.dev/

Держись, уже почти пятница 🫡

Вот тебе мемасик для повышения настроения 🫶

Крутой эффект при наведении на текст 🔥

Хитрость заключается в использовании :has() для создания эффекта исключения, при котором ты выберешь всех дочерних элементов, кроме того, на который наведен курсор

.details:has(a:hover) *:not(:hover) { opacity: 0.1; }
a:hover { --active: 1; }
.char {
  translate: calc(var(--active) * var(--x) * 1%) ... ;
}
.details:has(a:is(:hover, :focus-visible))
*:not(:hover, :focus-visible) {
  --opacity: 0.1;
}
.details :is(span, a) {
  opacity: var(--opacity, 1);
  transition: opacity 0.2s;
}

Для случайных сдвигов можно использовать JS

Элементы будут выглядить примерно так👇

<span class="char" data-char="A" style="--r: -6; --y: -1; --x: -22;">A</span>

И конечно же трансформация при фокусе

a:is(:hover, :focus-visible) { --active: 1; }
.char {
  transition: transform 0.25s var(--elastic);
  display: inline-block;
  transform:
    rotate(calc((var(--active) * var(--r)) * 1deg))
    translate(
      calc((var(--active) * var(--x)) * 1%),
      calc((var(--active) * var(--y)) * 1%)
    );
}

Пример👇
https://codepen.io/jh3y/pen/NWBdbRP

Бесполезный, но интересный совет: calc(infinity) 🤫

Ты можешь использовать calc(infinity) для того, чтобы получить максимально возможное значение, например, для z-index, width, height и т.д.

Практического применения для этого я пока правда не нашел 😄

Оптимизируем YouTube embed в Next.js и не только 👨‍💻

Чуваки из гугла решили сделать библиотечку для Next.js (@next/third-parties), которая будет оптимизировать встраивание сторонних скриптов на Next.js проекты

Пока что они позаботились об встраивании своих эмбедов: YouTube, Google Maps и Google Analytics и уже флексят достижениями

Статья 👇
https://developer.chrome.com/blog/next-third-parties?hl=ru

Видео доклад 👇
https://www.youtube.com/watch?v=zZPNwx0m07U

Что нового в Chrome 122? 👨‍💻

— Улучшили управление хранилищами с помощью Storage Buckets API
— Небольшие нововведения в девтулзах, в разделе Performance
— Появилась опция unsanitized для Async Clipboard API

Читать 👇
https://developer.chrome.com/blog/new-in-chrome-122

Смотреть 👇
https://www.youtube.com/watch?v=8fWkUNV-eic

С 8 марта вас, девочки 💐💐💐

arcjet — прослойка безопасности для Next.js и Node.js приложений 👨‍💻

Если тебе нужно защитить твоё детище рейт-лимитом, то arcjet с удовольствием сделает это для тебя 🥳

Проектик молодой, аккуратнее на проде ⚠️

https://arcjet.com/

В Angular теперь можно получать ссылки на компоненты и элементы HTML в виде Signals при помощи функций viewChild/viewChildren и contentChild/contentChildren

https://angular.dev/guide/signals/queries

Пока в стадии developer preview ⚠️

ECMAScript 2024 №1: groupBy 👨‍💻

Потихоньку буду писать про пропоузалы ECMAScript, которые с большой вероятностью появятся в стандарте в 2024 году

Начну с метода groupBy, он появится у объекта Map и Object и будет использоваться для того, чтобы разгруппировать массив на объект по ключам

Вот примерчик группировки массива чисел на чётные и нечётные

Object.groupBy(array, (num, index) => {
  return num % 2 === 0 ? 'even': 'odd';
});
// =>  { odd: [1, 3, 5], even: [2, 4] }

https://github.com/tc39/proposal-array-grouping

Что нового в Chrome 123? 🧑‍🎓

— CSS функция light-dark(white, black), которая выберет цвет в зависимости от темы пользователя

— Long Animation Frames API позволяет найти перегрузки/блокировки основного потока влияющие на отзывчивость интерфейса

— Service worker Static Routing API позволит во время установки объявить пути, которые всегда будут обслуживаться из сети

https://developer.chrome.com/blog/new-in-chrome-123?hl=ru

Представляем Firebolt: Продуктивный React фреймворк 🚀

У нас тут снова новичок, обещает, что будет всё просто и быстро 🤤

https://habr.com/ru/articles/803255/

ECMAScript 2024 №2: string.isWellFormed() 👨‍💻

Специфичный и одновременно простой пропоусал вероятно появится в этом году в стандарте

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

В каком случае она может неверно отобразиться?

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

https://github.com/tc39/proposal-is-usv-string

SvelteJS стал самым популярным фреймворком этого года 🤯

Он набрал 254к и 251 млн. скачиваний и звёздочек, из которых более 50% за 2024 год

Для сравнения у React 20млн скачиваний и 221к звёздочек, а у Vue 4млн скачиваний и 44к звёдочек

ScreenMate AI: автоматизированное создание и прохождение UI тест-кейсов для твоих веб-приложений 👨‍💻

Представь, что ты показываешь нейросети успешный путь для конкретного тест-кейса, а она пытается его сломать и выдаёт тебе скоуп непрошедших тестов 🤯

Сервис ещё в процессе разработки, поэтому на данный момент есть только демо-видео и веб-сайт

Чтобы сделать продукт более нужным, команда ScreenMate обращается к опытным фронтендерам, их потенциальным пользователям, для проведения небольшого zoom интервью на 35 минут, а в подарок дают подарочный сертификат на 2000 рублей на Ozon 🎁

Чтобы записаться на интервью, пиши @fitilbam ❤️

Релизнулся ESLint 9.0.0 👨‍💻

Из интересного там появилось новое правило no-useless-assignment предназначенное для выявления ситуаций, когда ты присвоил переменной значение, но оно никогда не используется

let id = 1234;      // 1234 никогда не используется
id = calculateId();

https://eslint.org/blog/2024/04/eslint-v9.0.0-released/

WebAssembly JavaScript Promise Integration (JSPI) можно попробовать в Chrome 🥸

JavaScript Promise Integration (JSPI) - это API, который позволяет синхронному последовательному коду, скомпилированному в WebAssembly, получать доступ к асинхронным веб-интерфейсам. Многие веб-интерфейсы построены на основе обещаний JavaScript: вместо немедленного выполнения запрошенной операции они возвращают обещание сделать это. Когда действие наконец-то выполнено, программа запуска задач браузера вызывает все обратные вызовы с обещанием. JSPI подключается к этой архитектуре, чтобы позволить приложению WebAssembly приостанавливаться при возвращении обещания и возобновлять работу, когда обещание будет выполнено.

Чтобы лучше понять, как использовать эту функцию, рассмотрим следующий отрывок программы на языке C, которая вычисляет последовательность Фибоначчи, передавая сложение функции JavaScript.

// Это код на C.
long promiseFib(long x) {
  if (x == 0)
    return 0;
  if (x == 1)
    return 1;
  // Это где C код вызывает асинхронный JavaScript.
  return promiseAdd(promiseFib(x - 1), promiseFib(x - 2));
}

// Дополнение, искусственно завернутое в Обещание.
EM_ASYNC_JS(long, promiseAdd, (long x, long y), {
  // Это асинхронный JavaScript код.
  return Promise.resolve(x+y);
});

Определить поддержку JSPI в JavaScript можно следующим образом:

if ('Suspender' in WebAssembly) {
  // JSPI поддерживается.
}

Пропоузал 👇
https://github.com/WebAssembly/js-promise-integration/blob/main/proposals/js-promise-integration/Overview.md