ESLint 9.0 Beta что появится нового? 🤔

Команда ЕСЛинта выкатила 9.0 бета, не такое мажорное обновление как у старичка, но всё же добавили несколько новых фич и фикc бага

TLDR:
— Новые значения по умолчанию для правил no-unused-vars и no-useless-computed-key
— Новые проверки в RuleTester
— Новое API loadESLint() (позволит интегрировать текущий flat конфиг и старый eslintrc конфиг)

Новость👇
https://eslint.org/blog/2024/02/eslint-v9.0.0-beta.0-released/

Codeium Ai: бесплатный autocomplete кода 🔥

Нейронка, которая поможет тебе в кодинге 👨‍💻

Поддерживает все популярные IDE, можно её юзать бесплатно, но вот за подсказки относительно кодовой базы придется выложить 15💵

Нейронка👇
https://codeium.com/

Эволюция Vercel Functions 🧑‍🎓

Команда Vercel поделилась мажорной версией Vercel Functions

Vercel Functions — позволяет выполнять вычисления не используя свою инфраструктуру

Улучшили автоматическое масштабирование, теперь до 30.000 для Pro и до 100.000 Enterprise версии одновременно работающих функций или процессов

Поддержка стандартных веб-интерфейсов API, позволит использовать MDN, ChatGPT или других LLM для легкого создания API на основе общего стандарта

— Улучшенный параллелизм
— Подпись веб-стандартного API
— Потоковая передача без конфигурации
— Долго выполняющиеся функции
— Более быстрый холодный запуск
— Автоматически переключение на другой регион

Статья👇
https://vercel.com/blog/evolving-vercel-functions

Вышел Vitest 1.3.0 👨‍💻

Vitest — это среда тестирования на базе Vite

Вышла версия 1.3, в которой добавили новый хук onTestFinished, он вызывается после завершения теста, будет полезен при многократно используемой логики, сохранение размера разделенных панелей в локальном хранилище для удобства при перезагрузке между сеансами тестирования

TLDR:
— Новый хук onTestFinished
— Улучшенная обработка параметров CLI
— Оптимизатор отключен по умолчанию из-за проблем со стабильностью
— Улучшенная поддержка режима браузера
— Сохраняет размер разделенных панелей в UI
— Фикс багов

Обновление👇
https://github.com/vitest-dev/vitest/releases/tag/v1.3.0

Vitest👇
https://vitest.dev/

Вышел Astro 4.4 🔥

Разработчики Astra выкатили новую версию, го выясним что там нового🤔

TLDR:
— Аудит производительности
Теперь тебе будут приходить подсказки как сделать вещи производительнее

— Список аудитов
Подъехал UI список аудитов

— Улучшена производительность потока
Обнаружили, что ReadableStreams работают медленнее, чем ожидалось, на Node.js, и перенесли Astro на использование AsyncIterable вместо этого при работе на Node.js.

— Автоматическое определение размеров изображений со сторонных ресурсов
Появился атрибут inferSize как замена обязательных width и height

Новость👇
https://astro.build/blog/astro-440/

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/