Релиз Next.js 12

Три дня назад была представлена новая мажорная версия Next.js — "Next.js 12".

Next.js 12 по умолчанию использует swc для транспиляции JavaScript- и TypeScript-файлов. Swc — это очень быстрый аналог Babel, написанный на Rust. Благодаря ему время production-сборки стало в пять раз меньше. В три раза уменьшилось время обновления страницы при локальной разработке.

Была добавлена поддержка миддлвар для гибкой модификации HTTP-ответа. В зависимости от входящего запроса можно изменить ответ, добавить новые HTTP-заголовки, сделать редирект и т.п. Миддлвары могут работать на edge-серверах Vercel, улучшая отзывчивость приложения.

Была проведена работа для подготовки к переходу на React 18. В экспериментальном режиме доступны серверные компоненты и новый поточный серверный рендерер с поддержкой Suspense.

Теперь по умолчанию в Next.js используется ESM с поддержкой импорта CommonJS-модулей. Добавлена экспериментальная поддержка импорта модулей по URL.

В компоненте <Image> появилась поддержка формата изображений AVIF. Также компонент автоматически определяет основное изображение страницы, которому нужно передать пропс priority для улучшения метрики LCP.

В рамках нового релиза была опубликована библиотека @vercel/nft (Node File Tracer). Она используются для генерации облегчённых standalone-сборок Next.js-приложений для serverless-окружений и контейнеризации.

В Next.js 12 поисковым ботам будут отдаваться полностью отрендеренные страницы, использующие Incremental Static Regeneration. Обычные пользователи будут видеть интерфейс загрузки страницы.

В ломающих изменениях отказ от Webpack 4, деприкейт опции target, использование <span> вместо <div> в next/image, увеличение минимальной поддерживаемой версии Node.js с 12.0.0 до 12.22.0

#release #jsframeworks #react

https://nextjs.org/blog/next-12

Релиз Angular 13

Сегодня вышла новая мажорная версия Angular. Марк Тексон рассказал о всех нововведениях релиза — "Angular v13 is now Available".

— С этой версии больше недоступен View Engine — движок рендеринга, предшествующий Ivy. Благодаря его удалению открываются возможности сокращения времени компиляции, которые будут реализованы в будущем

— Изменён формат внешних модулей Angular Package Format (APF): добавлена поддержка ES2020, удалена необходимость использования ngcc

— Включена поддержка сохранения кеша сборки для ускорения скорости бандлинга. Прирост составляет 68%. Также в Angular CLI v12.2 была добавлена поддержка esbuild, который ускорил время сборки production-бандлов на 10%

— Упрощено API для динамического создания компонентов

— По умолчанию включена инвалидация окружения при прогоне каждого теста

— Улучшена доступность компонентов Angular Material

— RxJS обновлён до версии 7.4, TypeScript обновлён до версии 4.4

— Прекращена поддержка IE11. Пользователи Internet Explorer могут продолжать использовать Angular 12. Он будет поддерживаться до ноября 2022 года

#angular #release #jsframeworks

https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

Релиз TypeScript 4.5

Сегодня вышел TypeScript 4.5. Дениэл Розенвассер рассказал о всех новинках релиза.

Был добавлен новый утилитарный тип Awaited. Этот тип моделирует разворачивание промисов с помощью await в async-функциях и метода .then() у промисов. Awaited теперь используется для типизации Promise.all, улучшая вывод типов.

С версии 4.5 встроенные типы можно обновлять отдельно от компилятора. Также теперь можно оверрайдить встроенные типы, используя пакеты @typescript/lib-* в node_modules.

Строковые шаблонные типы могут использоваться в качестве дискрименантов в union'ах. Эта фича будет полезна при типизации ответов API.

В условных типах появилась оптимизация хвостовой рекурсии, благодаря которой можно описывать типы, полагающиеся на большое число итераций. Например, с его помощью можно затипизировать полноценный утилитарный тип TrimLeft.

Появилась возможность отключения удаления неиспользуемых импортов. Также в рамках этой фичи был добавлена поддержка модификатора type для импортируемых типов: import {someFunction, type BaseType} from "./module.js";.

Реализованы пропозалы "Ergonomic Brand Checks" и "Import assertions".

Также в этой версии должна была появиться поддержка ESM для Node.js, но она была временно удалена из-за несовместимости с экосистемой и проблем в реализации.

#release #typescript

https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/

Релиз Firefox 95

В Firefox 95 включён RLBox — технология для улучшения безопасности браузера с помощью WebAssembly. Также в этой версии для всех пользователей был включён Site Isolation.

В macOS уменьшено потребление процессора во время обработки событий. А также было уменьшено потребление энергии при программном декодировании видео. Это особенно заметно в режиме полноэкранного просмотра.

В HTML был добавлен глобальный атрибут inputmode для настройки вида виртуальной клавиатуры на смартфонах. Firefox на Android теперь поддерживает CSS-свойство cursor.

В JS-движке значительных изменений не было, но был добавлен Crypto.randomUUID() — API для получения криптографически устойчивых значений UUID. Изменено поведение свойства SpeechSynthesisEvent.elapsedTime; теперь оно возвращает время в секундах.

#firefox #release

https://www.mozilla.org/en-US/firefox/95.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/95

Релиз Safari 15.2

На прошлой неделе вышла новая версия Safari. Джен Симмонс рассказала про основные новинки релиза — "New WebKit Features in Safari 15.2".

— Объём доступной памяти для WebAssembly увеличен до 4Гб. Была оптимизирована обработка исключений.

— Добавлена поддержка HTTP-заголовков Cross-Origin-Opener-Policy и Cross-Origin-Embedder-Policy для включения SharedArrayBuffer

— Добавлена поддержка цветового пространства P3 в canvas

— Добавлена поддержка File Access API для упрощённой работы с файлами в веб-приложениях

По набору новых фич видно, что разработчики WebKit активно работают над добавлением поддержки веб-версии Photoshop.

Safari 15.2 доступен в macOS Monterey, Big Sur, Catalina и в iOS/iPadOS 15.2.

#safari #release

https://webkit.org/blog/12140/new-webkit-features-in-safari-15-2/

Релиз Chrome 97

На прошлой неделе вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали про новинки релиза — "New in Chrome 97".

В Chrome 97 по умолчанию включён WebTransport API. С его помощью обеспечивается быстрый обмен данными между клиентом и сервером в сетях с высокими задержками. Поддерживается передача данных без гарантии доставки пакетов с помощью Datagram API и с гарантиями доставки пакетов с помощью Streams API. WebTransport API работает только с HTTP/3.

Добавлена поддержка экспериментального метода HTMLScriptElement.supports(). Благодаря ему можно определить, какой вид скриптов поддерживается браузером.

В JavaScript-движке у массивов появились методы findLast(), findLastIndex() для поиска элементов с конца.

В Chrome DevTools добавлена вкладка "Recorder". С её помощью можно записывать и повторно воспроизводить действия на странице (user flows). Обновлён список эмулируемых устройств. На вкладке "Elements" появилось автодополнение при редактировании HTML. Настройки DevTools теперь можно синхронизировать между разными устройствами.

#chrome #release

https://developer.chrome.com/en/blog/new-in-chrome-97/
https://developer.chrome.com/blog/new-in-devtools-97/

Релиз Firefox 96

Несколько дней назад вышла новая версия Firefox. Самое интересное — изменение поведения кук, добавление Web Locks API, добавление поддержки CSS-свойства color-scheme.

Теперь по умолчанию у всех кук устанавливается атрибут SameSite=lax. Это изменение выравнивает поведение Firefox c Chrome и помогает в защите от атак Cross-Site Request Forgery (CSRF).

Добавлен Web Locks API. Это экспериментальное API для управления доступом к разделяемым ресурсам между разными сервис-воркерами или табами приложения.

Добавлена поддержка CSS-свойства color-scheme. С его помощью реализация тёмной темы для страницы делается в пару строк:

:root {
  color-scheme: light dark;
}

В этом примере свойство color-scheme сообщает браузеру о том, что вся страница поддерживает светлую и тёмную тему, и браузер начинает управлять цветами страницы автоматически.

В энкодере изображений появилась поддержка WebP. Благодаря этому изменению теперь можно программно экспортировать WebP-изображения из canvas с помощью методов HTMLCanvasElement.toDataURL(), HTMLCanvasElement.toBlob() и OffscreenCanvas.toBlob().

#firefox #release

https://www.mozilla.org/en-US/firefox/96.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96

Сегодня лава затекла на продуктхант. Течёт к сожалению не очень хорошо, пока на пятом месте. Но ты же не оставишь это просто так? 🥺

https://www.producthunt.com/

#producthunt #release

🌠 UI_UX inspiration

Исправляемся и в этот раз постараемся не подвести. Штуки! 20 немного по-детски наивных, но безупречных технически, историй про всякое. Как всегда вектор, Фигма, Скетч, Иллюстратор. Enjoy.

https://craftwork.design/knick-knack-illustrations/

#release #illustrations #vector

🌠 UI_UX inspiration

Grainy! От автора Nature, Sliky и Dance стильные градиентные иллюстрации с векторным шумом. Их сложно кастомизировать, но зато легко совместить с Nature, практически единый стиль.

🌿 https://craftwork.design/grainy-illustrations/

✨ https://storytale.io/packages/grainy/

#release #illustrations #gradient

🌠 UI_UX inspiration

Сидел грустил без наших релизов? Их есть у меня мешок!

Nuts — cет из 60 мелких иллюстраций в двух стилях, чб оутлайн и цветной солид про интерфейсы, веб и коммуникацию. Классно подходят для небольших попапов и приложений, я уже успел заюзать их в редизайне Storytale.

🌿 https://craftwork.design/nuts-illustrations/

https://storytale.io/packages/nuts/

#release #illustrations #pieces

🌠 UI_UX inspiration

Совсем скоро пора возвращаться в школу, а это значит Back to School идет в релиз! Контрастные, рубленные, в дуо палитре. 20 сюжетов и легкая кастомизация ->

🌿 https://craftwork.design/back-to-school-illustrations/

✨ https://storytale.io/packages/back-to-school/

#release #illustrations #duotone

🌠 UI_UX inspiration

Совсем скоро пора возвращаться в школу, а это значит Back to School идет в релиз! Контрастные, рубленные, в дуо палитре. 20 сюжетов и легкая кастомизация ->

🌿 https://craftwork.design/back-to-school-illustrations/

✨ https://storytale.io/packages/back-to-school/

#release #illustrations #duotone

🌠 UI_UX inspiration