Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

2021-11-05 20:11:29 Поиск необработанных промисов

Свизек Теллер написал статью про ошибки, приводящие к возникновению необработанных промисов — "Finding unresolved promises in JavaScript".

Необработанные промисы — это большой источник проблем, который может привести к крешу программы. Они возникают при забытом перехвате исключения с помощью catch, при отсутствующем вызове resolve / rejet или при забытом return в цепочке промисов.

Свизек нашёл научную статью "Finding broken promises in asynchronous JavaScript programs", в которой авторы попробовали автоматизировать поиск подобных ошибок и создали утилиту PromiseKeeper. Идея интересная, но похоже, что работу над проектом остановили после публикации статьи.

#async #js #experimental

https://swizec.com/blog/finding-unresolved-promises-in-javascript/ Открыть/Комментировать

2021-11-04 18:08:33 Релиз 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 Открыть/Комментировать

2021-11-03 22:29:32 Подходы использования SVG и их производительность

Тайлер Ситка сравнил производительность разных методов использования SVG на HTML-страницах — "Which SVG technique performs best for way too many icons?".

Самым производительным способом добавления SVG стал элемент c data URI — 72 мс для 1000 иконок. Но при таком подходе невозможно стилизовать SVG с помощью внешних стилей. Наиболее сбалансированным способом для оптимизированных SVG оказался инлайнинг — 87 мс для 1000 иконок. Самым медленным способом стала CSS-маска — 150 мс.

Тайлер также пишет о том, что не нужно сильно задумываться о выборе подходящего метода, если на странице используется менее сотни SVG-изображений. Используйте тот подход, который нравится.

#benchmark #performance #svg

https://cloudfour.com/thinks/svg-icon-stress-test/ Открыть/Комментировать

2021-11-02 18:26:40 Потенциальные проблемы с Firefox 100 и Chrome 100

Близится день, когда Firefox и Chrome дойдут до сотой версии. Это не просто красивая цифра, но и потенциальная причина ошибок.

Немного истории. Opera стала первым браузером, дошедшим до версии 10. В альфа-версии десятки поломались сайты, неправильно парсившие User-Agent. Их логика парсинга предусматривала только одну цифру в версии, поэтому Opera 10 превращалась в Opera 1, ломая отображение сайта.

Подобная ситуация может случиться с Firefox 100 и Chrome 100, если логика парсинга не предусматривает трёхзначные числа. Поэтому разработчики браузеров рекомендуют проверить работу своих проектов с изменением версии браузера в User-Agent. Разработчики Chrome пошли немного дальше и сделали специальный флаг #force-major-version-to-100, который автоматически подымает версию Chrome до 100.

#announcement #web

https://developer.chrome.com/blog/force-major-version-to-100/
https://www.otsukare.info/2021/04/20/ua-three-digits-get-ready Открыть/Комментировать

2021-11-02 10:03:32 За прошедшие три недели в канале для патронов Defront было опубликовано пятнадцать постов:

— Проблема новичков-экспертов
— Проблемы использования видео в вебе
— Как ускорить сборку TypeScript-проекта
— Зачем инженерам пробовать себя в консалтинге
— Руководство по git без использования команд git
— Почему в фреймворках не используются веб-воркеры
— Читабельный HTML в 100 байт CSS
— Таинственный Script Error
— Непростой выбор между SPA и MPA
— Как заручиться поддержкой коллег
— Проблемы критического CSS
— Системные цвета в CSS
— Ванильный JavaScript как замена jQuery
— Оптимизация производительности автодополнения
— WeakMap на практике

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. Все донаты идут на поддержку канала, оплату медицинских услуг, покупку еды, аренду квартиры и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov Открыть/Комментировать

2021-11-01 17:19:49 Числа, которые должны быть известны каждому

Пол МакЛелан рассказал о числах, которые должны знать все программисты — "Numbers Everyone Should Know".

По интернету давно гуляет список Питера Норвига со временем тика CPU, доступа к L1, L2-кешам, доступа к памяти и т.п. В статье Пола этот список обновлён и расширен новыми пунктами: временем доступа к L3-кешу, временем передачи TCP-пакета в пределах датацентра, из Америки в Европу и обратно и т.п.

Обновлённый список:
— Тик CPU: 0.3 нс
— Доступ к L1: 0.5 нс
— Стоимость ошибки предсказания ветвления в CPU: 5 нс
— Доступ к L2: 3 нс
— Доступ к L3: 28 нс
— Доступ к памяти (DRAM): 100 нс
— Передача 2 Kб по 1 Gbps-сети: 20,000 нс
— Последовательное чтение 1 Мб данных из памяти: 250,000 нс
— Передача TCP-пакета в пределах одного датацентра: 500,000 нс
— Обращение к SSD: 100,000 нс
— Обращение к магнитному жёсткому диску: 10,000,000 нс
— Последовательное чтение 1 Мб данных из сети: 10,000,000 нс
— Последовательное чтение 1 Мб данных с жёсткого диска: 30,000,000 нс
— Время передачи TCP-пакета из Калифорнии в Европу и обратно: 150,000,000 нс
— Время на написание одного слова: 1 c
— Время на открытие PowerPoint на macOS: 10 с

Величину разрыва между этими цифрами можно прочувствовать в масштабе. Если бы тик CPU занимал одну секунду, то время передачи TCP-пакета из Калифорнии в Европу и обратно составляло бы десять лет, а PowerPoint открывался бы тысячелетие.

#programming

https://community.cadence.com/cadence_blogs_8/b/breakfast-bytes/posts/numbers-everyone-should-know Открыть/Комментировать

2021-10-29 20:07:33 Релиз 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.

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

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

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

В ломающих изменениях отказ от Webpack 4, деприкейт опции target, использование вместо

в next/image, увеличение минимальной поддерживаемой версии Node.js с 12.0.0 до 12.22.0

#release #jsframeworks #react

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

3.1K viewsAlexander Myshov, edited  17:07

Открыть/Комментировать