bootg.com »
United States »
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только » Telegram Web
Александра Сикора поделилась мыслями о проблемах статей, посвящённых разработке, — "Most tech content is bullshit".
Александра пишет про то, что в большинстве статей есть много проблем, хотя они преподносятся как истина в последней инстанции. Она призывает критически относиться к материалам, даже если они публикуются авторитетными источниками. Проще всего взять готовое решение, не задав вопрос, почему оно именно такое, какое есть, и насколько хорошо оно подходит к текущей ситуации. Но обычно у нас нет времени, чтобы разобраться в вопросе, мы не верим в собственные силы или просто ленимся. Основной посыл статьи — не потребляйте контент слепо, создавайте, задавайте вопросы, будьте любопытны.
Готов подписаться под каждым словом. Очень хорошая статья, рекомендую почитать всем без исключения.
#musings #programming
https://www.aleksandra.codes/tech-content-consumer
Александра пишет про то, что в большинстве статей есть много проблем, хотя они преподносятся как истина в последней инстанции. Она призывает критически относиться к материалам, даже если они публикуются авторитетными источниками. Проще всего взять готовое решение, не задав вопрос, почему оно именно такое, какое есть, и насколько хорошо оно подходит к текущей ситуации. Но обычно у нас нет времени, чтобы разобраться в вопросе, мы не верим в собственные силы или просто ленимся. Основной посыл статьи — не потребляйте контент слепо, создавайте, задавайте вопросы, будьте любопытны.
Готов подписаться под каждым словом. Очень хорошая статья, рекомендую почитать всем без исключения.
#musings #programming
https://www.aleksandra.codes/tech-content-consumer
www.aleksandra.codes
Most tech content is bullshit
“One of the great commandments of science is, "Mistrust arguments from authority." Too many such arguments have proved too painfully wrong. Authorities must prove their contentions like everybody else.” ~ Carl Sagan
Орта Терокс рассказал про изменения в процессе принятия пулл реквестов в репозиторий DefinitelyTyped — "Changes to How We Manage DefinitelyTyped".
DefinitelyTyped — это один из самых крупных репозиториев на GitHub, в котором находятся TypeScript-определения для js-библиотек. Этот проект был создан сообществом, позже к процессу поддержки подключилась команда из Microsoft. Каждую неделю из команды назначается один дежурный, который помогает майнтейнерам DefinitelyTyped с мёржем открытых пулл-реквестов.
Для ускорения принятия изменений в репозиторий недавно был добавлен бот, который помогает владельцам файлов определений сливать изменения без обязательной проверки майнтейнеров. Это стало возможным благодаря покрытию тестами файлов определений. Тесты проверяют на ошибки и на деградацию производительности в IDE. Проверка со стороны майнтейнеров остаётся только для изменений файлов определений самых популярных библиотек (с 5 миллионами загрузок каждый месяц).
#typescript #announcement
https://devblogs.microsoft.com/typescript/changes-to-how-we-manage-definitelytyped/
DefinitelyTyped — это один из самых крупных репозиториев на GitHub, в котором находятся TypeScript-определения для js-библиотек. Этот проект был создан сообществом, позже к процессу поддержки подключилась команда из Microsoft. Каждую неделю из команды назначается один дежурный, который помогает майнтейнерам DefinitelyTyped с мёржем открытых пулл-реквестов.
Для ускорения принятия изменений в репозиторий недавно был добавлен бот, который помогает владельцам файлов определений сливать изменения без обязательной проверки майнтейнеров. Это стало возможным благодаря покрытию тестами файлов определений. Тесты проверяют на ошибки и на деградацию производительности в IDE. Проверка со стороны майнтейнеров остаётся только для изменений файлов определений самых популярных библиотек (с 5 миллионами загрузок каждый месяц).
#typescript #announcement
https://devblogs.microsoft.com/typescript/changes-to-how-we-manage-definitelytyped/
Microsoft News
Changes to How We Manage DefinitelyTyped
Definitely Typed is now allowing contributors to self-merge their pull requests after a reviewer has accepted their changes.
Тут в интернете поднялся кипеш по поводу Яндекс.Маркета. Иван Вахрушев на хабре опубликовал статью "Тёмная сторона работы в Яндекс.Маркете", в ней он рассказал о своём опыте работы.
Хочу поделиться с вами своим опытом, не претендую на объективность, и это всего лишь личное мнение. Да, сразу стоит сказать, что мне никто ничего не платил за этот пост. Этот пост получился очень большим и не влез в лимиты телеграма. Полную версию статьи можно почитать по ссылке ниже.
Я работал разработчиком интерфейсов в Маркете с 2016 по 2019 год, пилил фронт, занимался BFF на ноде, принимал участие в разработке инфраструктурных штук. В общем было весело. В октябре 2019-го позвали поработать над стартапом — зачесались руки сделать что-то абсолютно новое с нуля. Не мог не воспользоваться таким шансом и в итоге ушёл. Ни на кого в Маркете не держу зла, и, в целом, у меня остались хорошие воспоминания, хотя было по-разному. Затрону самые важные на мой взгляд темы.
В статье Ваня пишет про переработки. Это очень больная тема. С одной стороны барикад работники хотят поддерживать work-life balance, не хотят выгореть и чувствовать себя хорошо, а с другой стороны есть бизнес, которому надо, чтобы фичи пеклись как блинчики. Лично я иногда перерабатывал, мог сидеть за фичей до поздней ночи. Зачем? Потому что был дурак, а не потому что меня заставлял бизнес. Тимлид напоминал идти домой, ну а я продолжал работать. Так продолжалось очень долго, пока не стал замечать за собой странные вещи — постоянная усталость, проблемы с вниманием, импульсивность и т.п. Подумал, что это ни к чему хорошему не приведёт и решил прекратить себя мучить. Последний год работалось очень хорошо, стал более продуктивен, хотя по факту тратил меньше времени, чем раньше. Никто не предъявлял претензий за то, что ухожу домой вовремя.
По поводу дохода. это очень мутная тема, так как есть много факторов, которые надо учитывать. В целом, компенсация была достойная для Новосибирска, хотя, наверное, мог бы зарабатывать больше. Рефликсируя на эту тему, сделал вывод, что надо было просто уметь себя продавать, когда устраивался. Но не жалуюсь — за моё время работы меня несколько раз повышали. Вывод — развивайте soft skills.
Качество кода. По Кенту Беку в коде фронта Маркета в целом ок. Нет дублирования, код тестируется, используется минимальное количество необходимых сущностей. С интентом правда была иногда проблема и приходилось чесать репу, разбираясь в кишках какой-нибудь инфраструктурной либы. В целом, код Маркета был предсказуем и довольно приятен в работе.
Всё ли было идеально? Нет. Всё ли было ужасно? Абсолютно нет. Как и у любой другой компании у Яндекс.Маркета есть и преимущества, и недостатки. Имхо, в этом нет ничего удивительного. Жаль, что не у всех людей не такой опыт как у меня. Но (по моим наблюдениям изнутри) Маркет и Яндекс в целом берут на заметку негативный опыт и стараются улучшить ситуацию.
P.S. 500-ый пост в канале (это не специально).
#musings #yandex
https://defront.ru/posts/2020/06-june/09-my-experience-at-yandex-market/
Хочу поделиться с вами своим опытом, не претендую на объективность, и это всего лишь личное мнение. Да, сразу стоит сказать, что мне никто ничего не платил за этот пост. Этот пост получился очень большим и не влез в лимиты телеграма. Полную версию статьи можно почитать по ссылке ниже.
Я работал разработчиком интерфейсов в Маркете с 2016 по 2019 год, пилил фронт, занимался BFF на ноде, принимал участие в разработке инфраструктурных штук. В общем было весело. В октябре 2019-го позвали поработать над стартапом — зачесались руки сделать что-то абсолютно новое с нуля. Не мог не воспользоваться таким шансом и в итоге ушёл. Ни на кого в Маркете не держу зла, и, в целом, у меня остались хорошие воспоминания, хотя было по-разному. Затрону самые важные на мой взгляд темы.
В статье Ваня пишет про переработки. Это очень больная тема. С одной стороны барикад работники хотят поддерживать work-life balance, не хотят выгореть и чувствовать себя хорошо, а с другой стороны есть бизнес, которому надо, чтобы фичи пеклись как блинчики. Лично я иногда перерабатывал, мог сидеть за фичей до поздней ночи. Зачем? Потому что был дурак, а не потому что меня заставлял бизнес. Тимлид напоминал идти домой, ну а я продолжал работать. Так продолжалось очень долго, пока не стал замечать за собой странные вещи — постоянная усталость, проблемы с вниманием, импульсивность и т.п. Подумал, что это ни к чему хорошему не приведёт и решил прекратить себя мучить. Последний год работалось очень хорошо, стал более продуктивен, хотя по факту тратил меньше времени, чем раньше. Никто не предъявлял претензий за то, что ухожу домой вовремя.
По поводу дохода. это очень мутная тема, так как есть много факторов, которые надо учитывать. В целом, компенсация была достойная для Новосибирска, хотя, наверное, мог бы зарабатывать больше. Рефликсируя на эту тему, сделал вывод, что надо было просто уметь себя продавать, когда устраивался. Но не жалуюсь — за моё время работы меня несколько раз повышали. Вывод — развивайте soft skills.
Качество кода. По Кенту Беку в коде фронта Маркета в целом ок. Нет дублирования, код тестируется, используется минимальное количество необходимых сущностей. С интентом правда была иногда проблема и приходилось чесать репу, разбираясь в кишках какой-нибудь инфраструктурной либы. В целом, код Маркета был предсказуем и довольно приятен в работе.
Всё ли было идеально? Нет. Всё ли было ужасно? Абсолютно нет. Как и у любой другой компании у Яндекс.Маркета есть и преимущества, и недостатки. Имхо, в этом нет ничего удивительного. Жаль, что не у всех людей не такой опыт как у меня. Но (по моим наблюдениям изнутри) Маркет и Яндекс в целом берут на заметку негативный опыт и стараются улучшить ситуацию.
P.S. 500-ый пост в канале (это не специально).
#musings #yandex
https://defront.ru/posts/2020/06-june/09-my-experience-at-yandex-market/
Хуссейн Джирде в блоге web.dev рассказал, как можно предотвратить сдвиг контента из-за загрузки web-шрифтов — "Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts".
В черновике спецификации CSS Fonts Module Level 4, есть раздел, который говорит о том, что загрузка опциональных шрифтов (
Так как эта фича ещё не в официальном стандарте, команда Chrome ждёт обратной связи.
#fonts #performance
https://web.dev/preload-optional-fonts/
В черновике спецификации CSS Fonts Module Level 4, есть раздел, который говорит о том, что загрузка опциональных шрифтов (
font-display: optional
) не должна приводить к перерасчёту лайаута. Браузеры в этом случае могут блокировать отрисовку страницы на небольшой промежуток времени, пока загружается необходимый web-шрифт. Чтобы избежать блокировки с версии Chrome 83, можно использовать комбинацию font-display: optional
и <link rel="preload">
для загружаемого шрифта. Браузер с большой вероятностью загрузит шрифт до первой отрисовки, и в результате страница отобразится сразу с необходимым шрифтом без сдвига контента.Так как эта фича ещё не в официальном стандарте, команда Chrome ждёт обратной связи.
#fonts #performance
https://web.dev/preload-optional-fonts/
web.dev
Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts | Articles | web.dev
By optimizing rendering cycles, Chrome 83 eliminates layout shifting when preloading optional fonts. Combining with font-display: optional is the most effective way to guarantee jank-free rendering of custom fonts.
Хочу продолжить вчерашнюю тему. Эдди Османи написал пост про решение проблем сдвига контента — "Optimize Cumulative Layout Shift".
Cumulative Layout Shift (CLS) — это метрика Web Vitals, которая измеряет нестабильность контента, складывая смещение всех элементов, которое происходит независимо от действий пользователя. То есть если на странице происходит сдвиг после пользовательского ввода, например, пользователь открыл список-аккордеон после загрузки страницы, то такое смещение не будет влиять на CLS.
Самые распространённые причины нежелательных смещений:
— изображения без заданных размеров (можно исправить добавлением атрибутов
— реклама, iframe, встраиваемый контент (можно исправить, предварительно выделив необходимое место);
— динамически добавляемые блоки — GDPR-сообщения, похожие товары и т.п. (вместо них можно использовать временные заглушки);
— web-шрифты, вызывающие FOIT/FOUT (такое смещение можно устранить с помощью
В свете последних новостей о том, что Google будет использовать показатели Web Vitals для ранжирования сайтов, очень советую почитать статью.
#performance #metrics
https://web.dev/optimize-cls/
Cumulative Layout Shift (CLS) — это метрика Web Vitals, которая измеряет нестабильность контента, складывая смещение всех элементов, которое происходит независимо от действий пользователя. То есть если на странице происходит сдвиг после пользовательского ввода, например, пользователь открыл список-аккордеон после загрузки страницы, то такое смещение не будет влиять на CLS.
Самые распространённые причины нежелательных смещений:
— изображения без заданных размеров (можно исправить добавлением атрибутов
width
и height
);— реклама, iframe, встраиваемый контент (можно исправить, предварительно выделив необходимое место);
— динамически добавляемые блоки — GDPR-сообщения, похожие товары и т.п. (вместо них можно использовать временные заглушки);
— web-шрифты, вызывающие FOIT/FOUT (такое смещение можно устранить с помощью
font-display: optional
и <link rel="preload">
).В свете последних новостей о том, что Google будет использовать показатели Web Vitals для ранжирования сайтов, очень советую почитать статью.
#performance #metrics
https://web.dev/optimize-cls/
web.dev
Optimize Cumulative Layout Shift | Articles | web.dev
Cumulative Layout Shift (CLS) is a metric that quantifies how often users experience sudden shifts in page content. In this guide, we'll cover optimizing common causes of CLS such as images and iframes without dimensions or dynamic content.
Джек Арчибальд написал статью "Event listeners and garbage collection". В ней рассказывается про способ прерывания любого асинхронного API и объясняется, почему этот способ не приводит к утечкам памяти.
Все современные браузеры поддерживают отмену fetch-запросов с помощью AbortController API. В статье есть код небольшого хелпера, который позволяет использовать AbortController с любым асинхронным API:
В нём используется обработчик события "abort", который вызвал подозрение у читателя Джека. В статье очень подробно объясняется, почему этот обработчик не приводит к утечке — при завершении работы асинхронного кода функция удаляется из стека выполнения, поэтому все объекты, которые были связаны с этой функцией, без проблем удаляются сборщиком мусора.
Очень хорошая статья. Рекомендую посмотреть примеры, особенно если вы раньше не работали с AbortController.
#web #api
https://jakearchibald.com/2020/events-and-gc/
Все современные браузеры поддерживают отмену fetch-запросов с помощью AbortController API. В статье есть код небольшого хелпера, который позволяет использовать AbortController с любым асинхронным API:
async function abortable(signal, promise) {
if (signal.aborted) {
throw new DOMException('AbortError', 'AbortError');
}
return Promise.race([
promise,
new Promise((_, reject) => {
signal.addEventListener('abort', () => {
reject(new DOMException('AbortError', 'AbortError'));
});
}),
]);
}
В нём используется обработчик события "abort", который вызвал подозрение у читателя Джека. В статье очень подробно объясняется, почему этот обработчик не приводит к утечке — при завершении работы асинхронного кода функция удаляется из стека выполнения, поэтому все объекты, которые были связаны с этой функцией, без проблем удаляются сборщиком мусора.
Очень хорошая статья. Рекомендую посмотреть примеры, особенно если вы раньше не работали с AbortController.
#web #api
https://jakearchibald.com/2020/events-and-gc/
Jakearchibald
Event listeners and garbage collection
The browser is pretty smart when it comes to GCing listeners…
Крис Сейнти рассказал про фреймворк от Microsoft для создания SPA-приложений на C# — "What’s behind the hype about Blazor?".
Blazor для C#-разработчиков сейчас очень хайповая тема, потому что благодаря ему можно создавать SPA без использования JavaScript. Его архитектура состоит из двух основных частей: App/Component Model (отвечает за компонентную модель, роутинг и другие невизуальные задачи) и Renderer/Hosting Model (отвечает за обновление и отображение UI).
На данный момент есть два стабильных рендерера: WebAssembly Renderer и Server Renderer. Первый используется для создания привычных SPA-приложений (объявлен стабильным в мае этого года). Второй — для клиентских приложений, которые работают на внешнем сервере, браузер клиента в этом случае отвечает только за обновление DOM. Есть ещё два экспериментальных рендерера: для мобильных приложений (использует нативные UI-элементы) и десктопных приложений (работает поверх Electron/WebWindow).
Если всё взлетит, то Blazor в будущем может стать конкурентом React Native и Flutter.
#webassembly #frameworks
https://stackoverflow.blog/2020/02/26/whats-behind-the-hype-about-blazor/
Blazor для C#-разработчиков сейчас очень хайповая тема, потому что благодаря ему можно создавать SPA без использования JavaScript. Его архитектура состоит из двух основных частей: App/Component Model (отвечает за компонентную модель, роутинг и другие невизуальные задачи) и Renderer/Hosting Model (отвечает за обновление и отображение UI).
На данный момент есть два стабильных рендерера: WebAssembly Renderer и Server Renderer. Первый используется для создания привычных SPA-приложений (объявлен стабильным в мае этого года). Второй — для клиентских приложений, которые работают на внешнем сервере, браузер клиента в этом случае отвечает только за обновление DOM. Есть ещё два экспериментальных рендерера: для мобильных приложений (использует нативные UI-элементы) и десктопных приложений (работает поверх Electron/WebWindow).
Если всё взлетит, то Blazor в будущем может стать конкурентом React Native и Flutter.
#webassembly #frameworks
https://stackoverflow.blog/2020/02/26/whats-behind-the-hype-about-blazor/
Stack Overflow Blog
What’s behind the hype about Blazor?
Blazor is a new client-side UI framework from the ASP.NET team. Its big selling point is the ability to write rich web UI experiences using HTML, CSS, and C# instead of JavaScript—something a lot of developers have been dreaming of.
Новости и благодарности
В этом месяце закончил большую работу — перенёс все статьи из канала на сайт defront.ru. Теперь этот сайт — официальное место обитания проекта в большом интернете. Также у проекта начинают появляться контрибьюторы. Тимур Хазамов два дня назад добавил на сайт поддержку тёмной темы.
Хочу напомнить, что у канала есть чат — @defrontchat. Присоединяйтесь! Подписывайтесь на мой твиттер https://twitter.com/myshov. Там я пишу новости и апдейты, которые иногда не попадают в канал.
Канал существует благодаря вашей поддержке на патреоне. Хочу сказать огромное спасибо моим патронам: Андрею, Артёму, bafonins, brqte, Олегу, Павлу, th1rt3nth, Роману, Сергею, Владу, Денису, Дмитрию и Сергею! Благодарю всех за то, что читаете канал и рассказываете про него своим друзьям и коллегам. Если вам нравится то, что я делаю, и хотите поддержать канал, то это можно сделать тут https://www.patreon.com/myshov.
#спасибо
В этом месяце закончил большую работу — перенёс все статьи из канала на сайт defront.ru. Теперь этот сайт — официальное место обитания проекта в большом интернете. Также у проекта начинают появляться контрибьюторы. Тимур Хазамов два дня назад добавил на сайт поддержку тёмной темы.
Хочу напомнить, что у канала есть чат — @defrontchat. Присоединяйтесь! Подписывайтесь на мой твиттер https://twitter.com/myshov. Там я пишу новости и апдейты, которые иногда не попадают в канал.
Канал существует благодаря вашей поддержке на патреоне. Хочу сказать огромное спасибо моим патронам: Андрею, Артёму, bafonins, brqte, Олегу, Павлу, th1rt3nth, Роману, Сергею, Владу, Денису, Дмитрию и Сергею! Благодарю всех за то, что читаете канал и рассказываете про него своим друзьям и коллегам. Если вам нравится то, что я делаю, и хотите поддержать канал, то это можно сделать тут https://www.patreon.com/myshov.
#спасибо
Twitter
Alexander Myshov (@myshov) | Twitter
The latest Tweets from Alexander Myshov (@myshov). Software engineer from Siberia (ex-Yandex) excited by music, science, yoga and other stuff. Author of project "History of JavaScript" (https://t.co/8jlI4GJao6). Russia
Аксель Раушмайер написал статью про логические операторы присваивания — "ECMAScript proposal: Logical assignment operators".
Пропозал добавляет в стандарт новые составные операторы присваивания:
Логические операторы присваивания находятся на третьем этапе добавления в стандарт. Его поддержка появилась в Firefox 77 Nightly, Safari Technology Preview 107, и в V8 v8.4 (Chrome 85).
#js #proposal
https://2ality.com/2020/06/logical-assignment-operators.html
Пропозал добавляет в стандарт новые составные операторы присваивания:
a ||= b
, a &&= b
и a ??= b
. Благодаря этим операторам можно компактно комбинировать присваивание с коротким циклом вычислений логических операций (short-circuit). Например, запись a ??= b
эквивалентна выражению a ?? (a = b)
. В нём присваивание происходит только в том случае, когда в a
находится null
или undefined
. Пример использования:const books = [{
isbn: '123',
}, {
title: 'ECMAScript Language Specification',
isbn: '456',
}];
// Добавление дефолтного заголовка там, где его нет
for (const book of books) {
book.title ??= '(Untitled)';
}
assert.deepEqual(books, [{
isbn: '123',
title: '(Untitled)',
}, {
title: 'ECMAScript Language Specification',
isbn: '456',
}]);
Логические операторы присваивания находятся на третьем этапе добавления в стандарт. Его поддержка появилась в Firefox 77 Nightly, Safari Technology Preview 107, и в V8 v8.4 (Chrome 85).
#js #proposal
https://2ality.com/2020/06/logical-assignment-operators.html
Для того чтобы бандлер смог безопасно применить tree-shaking, он должен понимать, что можно удалить, а что нужно оставить. Серджио Гомес написал про это статью — "Everything you never wanted to know about side effects".
Во время импорта модули могут вызывать сайд-эффекты: обновлять состояние внутри других модулей, добавлять глобальные переменные, инициализировать полифиллы и т.п. Бандлеры не рискуют и не удаляют код, так как предполагают, что в модулях могут быть сайд-эффекты. Случайное удаление такого кода с большой вероятностью сломает приложение.
Чтобы tree-shaking заработал, авторы библиотек добавляют в package.json поле
Очень рекомендую заглянуть в статью авторам библиотек и всем, кто сталкивался с проблемами tree-shaking.
#performance #bundle
https://sgom.es/posts/2020-06-15-everything-you-never-wanted-to-know-about-side-effects/
Во время импорта модули могут вызывать сайд-эффекты: обновлять состояние внутри других модулей, добавлять глобальные переменные, инициализировать полифиллы и т.п. Бандлеры не рискуют и не удаляют код, так как предполагают, что в модулях могут быть сайд-эффекты. Случайное удаление такого кода с большой вероятностью сломает приложение.
Чтобы tree-shaking заработал, авторы библиотек добавляют в package.json поле
"sideEffects": false
, если в библиотеке нет сайд-эффектов, или явно перечисляют файлы, которые нельзя удалять "sideEffects": ["a.js", "b.js"]
. Также в исходном коде можно использовать хинт /*#__PURE__*/
. Благодаря этому хинту бандлер понимает, что такой код не содержит сайд-эффектов, и его можно безопасно удалить.Очень рекомендую заглянуть в статью авторам библиотек и всем, кто сталкивался с проблемами tree-shaking.
#performance #bundle
https://sgom.es/posts/2020-06-15-everything-you-never-wanted-to-know-about-side-effects/
sgom.es
Everything you never wanted to know about side effects
I’m Sérgio, and I work with Web frontend code. Sometimes I write about it here.
DebugBear проанализировал влияние тысячи популярных расширений Chrome на производительность страниц и поделился результатами исследования — "2020 Chrome Extension Performance Report".
Наибольшую задержку рендеринга страницы (более 300мс) вызывают расширения Clever, Gramarly, Cash Back For Shopping. Наибольшее влияние на TTI оказывают расширения, Evernote Web Clipper, Grammarly, Avira Password Manager — они блокируют основной поток выполнения более чем на 400 мс. Интересен анализ блокировщиков рекламы. DuckDuckGo Privacy Essentials на большом новостном сайте уменьшает использование CPU с 31 секунды до 1.6 секунд. Но есть другие блокировщики, которые очень сильно увеличивают потребление CPU. Advertising Terminator тратит почти 25 секунд времени CPU на анализ страниц.
В конце исследования есть несколько советов для авторов расширений: лучше всего загружать код расширений только при необходимости, очень не рекомендуется загружать скрипты на
Интересное исследование. Очень рекомендую почитать, если разрабатываете расширения для браузеров.
#chrome #research #performance
https://www.debugbear.com/blog/2020-chrome-extension-performance-report
Наибольшую задержку рендеринга страницы (более 300мс) вызывают расширения Clever, Gramarly, Cash Back For Shopping. Наибольшее влияние на TTI оказывают расширения, Evernote Web Clipper, Grammarly, Avira Password Manager — они блокируют основной поток выполнения более чем на 400 мс. Интересен анализ блокировщиков рекламы. DuckDuckGo Privacy Essentials на большом новостном сайте уменьшает использование CPU с 31 секунды до 1.6 секунд. Но есть другие блокировщики, которые очень сильно увеличивают потребление CPU. Advertising Terminator тратит почти 25 секунд времени CPU на анализ страниц.
В конце исследования есть несколько советов для авторов расширений: лучше всего загружать код расширений только при необходимости, очень не рекомендуется загружать скрипты на
document_start
, если во время загрузки страницы обновляется иконка расширения, то эту операцию лучше всего прикрыть с помощью debounce.Интересное исследование. Очень рекомендую почитать, если разрабатываете расширения для браузеров.
#chrome #research #performance
https://www.debugbear.com/blog/2020-chrome-extension-performance-report
Debugbear
2020 Chrome Extension Performance Report | DebugBear
A look at how Chrome extensions affect CPU usage, page rendering, and browser memory consumption.
Гал Шлёзингер написал статью про решение задачи FizzBuzz с помощью системы типов TypeScript без использования рантайм-кода — "Typing the Technical Interview in TypeScript".
Всё решение сводится к изобретательной эксплуатации системы типов. Для представления каждого числа используется свой тип:
Статья очень техническая, но с юмором. Рекомендую почитать и поразбираться с примерами, если хотите углубить знания в TypeScript.
#typescript #fun
https://gal.hagever.com/posts/typing-the-technical-interview-in-typescript/
Всё решение сводится к изобретательной эксплуатации системы типов. Для представления каждого числа используется свой тип:
type _0 = 0;
, type _1 = Increment<_0>;
и т.п. Для сравнения типов между собой используется тип type Eq<A, B extends A> = "passes";
. Для логического оператора "и" — type And<A, B> = A extends true ? (B extends true ? true : false) : false;
и т.д. После добавления всех необходимых типов результат получается с помощью типа type FIZZBUZZ = FizzBuzzUpTo<_16>;
. Результат можно увидеть в подсказке редактора в виде выведенного типа.Статья очень техническая, но с юмором. Рекомендую почитать и поразбираться с примерами, если хотите углубить знания в TypeScript.
#typescript #fun
https://gal.hagever.com/posts/typing-the-technical-interview-in-typescript/
Hagever
Typing the Technical Interview in TypeScript
Solving a technical interview question with no runtime involved
Forwarded from Вебня (Sergey Rubanov)
⚡️Официально: Генеральная Ассамблея Ecma International одобрила спецификации
ECMA262 (ECMAScript® 2020 Language Specification)
ECMA402 (ECMAScript® 2020 Internationalization API Specification)
Новое в ECMA262:
- String.prototype.matchAll
- import()
- BigInt
- Promise.allSettled
- globalThis
- for-in mechanics
- Optional chaining
- Nullish coalescing operator
- import.meta
Новое в ECMA402:
- Intl.RelativeTimeFormat
- Intl.NumberFormat Unified API
- Intl.Locale
С новым джаваскриптом! 😄
ECMA262 (ECMAScript® 2020 Language Specification)
ECMA402 (ECMAScript® 2020 Internationalization API Specification)
Новое в ECMA262:
- String.prototype.matchAll
- import()
- BigInt
- Promise.allSettled
- globalThis
- for-in mechanics
- Optional chaining
- Nullish coalescing operator
- import.meta
Новое в ECMA402:
- Intl.RelativeTimeFormat
- Intl.NumberFormat Unified API
- Intl.Locale
С новым джаваскриптом! 😄
GitHub
GitHub - tc39/proposal-string-matchall: ES Proposal, specs, tests, reference implementation, and polyfill/shim for String.prototype.matchAll
ES Proposal, specs, tests, reference implementation, and polyfill/shim for String.prototype.matchAll - GitHub - tc39/proposal-string-matchall: ES Proposal, specs, tests, reference implementation, a...
В блоге Chromium сегодня появился пост о том, какие проблемы совместимости будут исправлены в 2020 году — "Improving Chromium's browser compatibility in 2020".
В прошлом году MDN провёл опрос среди 28 тысяч разработчиков. Его цель заключалась в выявлении самых распространённых проблем, возникающих при работе с web-платформой. Больше всего голосов было отдано пунктам про поддержку старых браузеров, про устаревшую документацию и про совместимость между браузерами.
Команда Chromium выделила несколько направлений работы для исправлений проблем совместимости. Будет переработана имплементация flexbox, она будет перенесена на новый layout-движок LayoutNG. Это позволит добавить поддержку
#chromium #announcement
https://blog.chromium.org/2020/06/improving-chromiums-browser.html
В прошлом году MDN провёл опрос среди 28 тысяч разработчиков. Его цель заключалась в выявлении самых распространённых проблем, возникающих при работе с web-платформой. Больше всего голосов было отдано пунктам про поддержку старых браузеров, про устаревшую документацию и про совместимость между браузерами.
Команда Chromium выделила несколько направлений работы для исправлений проблем совместимости. Будет переработана имплементация flexbox, она будет перенесена на новый layout-движок LayoutNG. Это позволит добавить поддержку
gap
, row-gap
, column-gap
и исправить проблему с flex и fieldset. Также на новый движок будет перенесены гриды, над этим уже работает команда Edge. В ходе переноса планируют добавить поддержку subgrid. Будут работать над исправлением проблем поведения прокрутки контента. Будут изучать вопрос стилизации стандартных элементов управления форм и исправлять их проблемы совместимости, но пока без конкретных анонсов.#chromium #announcement
https://blog.chromium.org/2020/06/improving-chromiums-browser.html
Chromium Blog
Improving Chromium's browser compatibility in 2020
Last year, MDN ran the 2019 Web Developer Needs Assessment (DNA) survey . The DNA survey drew responses from over 28,000 developers from aro...
Матиас Бус написал статью про исправление проблем производительности в Node.js web-фреймворке Hapi — "Hapi: A Performance deep-dive".
Матиас рассказывает про полный цикл поиска и устранения проблем производительности. В самом начале он подготавливает бенчмарк с помощью библиотеки autocannon. Затем были найдены куски кода, которые инициировали вызовы кода нативных библиотек. На горячих участках кода интероп между JavaScript и нативным кодом вызывает падение производительности. Для решения этой проблемы функции, приводящие к вызову нативного кода, были обернуты в геттеры. Была изменена логика инициализации плагинов, чтобы не выполнялась лишняя работа на каждый запрос к серверу. С помощью инструмента Clinic.js была обнаружена проблема с async-функциями. На данный момент V8 не очень хорошо оптимизирует код с async/await, поэтому не рекомендуется использовать async-функции на горячих участках кода. После внесения всех исправлений производительность Hapi улучшилась на 30%.
Полезная статья. Рекомендую почитать всем, кто работает с Node.js
#nodejs #performance
https://www.nearform.com/blog/hapi-a-performance-deep-dive/
Матиас рассказывает про полный цикл поиска и устранения проблем производительности. В самом начале он подготавливает бенчмарк с помощью библиотеки autocannon. Затем были найдены куски кода, которые инициировали вызовы кода нативных библиотек. На горячих участках кода интероп между JavaScript и нативным кодом вызывает падение производительности. Для решения этой проблемы функции, приводящие к вызову нативного кода, были обернуты в геттеры. Была изменена логика инициализации плагинов, чтобы не выполнялась лишняя работа на каждый запрос к серверу. С помощью инструмента Clinic.js была обнаружена проблема с async-функциями. На данный момент V8 не очень хорошо оптимизирует код с async/await, поэтому не рекомендуется использовать async-функции на горячих участках кода. После внесения всех исправлений производительность Hapi улучшилась на 30%.
Полезная статья. Рекомендую почитать всем, кто работает с Node.js
#nodejs #performance
https://www.nearform.com/blog/hapi-a-performance-deep-dive/
NearForm Enterprise Software Solution Development
Hapi: A Performance deep-dive - NearForm
Performance means a lot of different things, but we wanted to see if we could improve the requests per second that hapi could perform on real-world use cases.
Кроме npm и yarn существует ещё другой малоизвестный пакетный менеджер — pnpm. Эндрю Спрус написал статью "Why we switched from Yarn to pnpm", в которой рассказал, почему они для своего проекта выбрали именно pnpm.
Проект Эндрю состоял из нескольких пакетов, которые обновлялись независимо друг от друга. Это часто приводило к проблемам, поэтому они решили перенести все пакеты в единый монорепозиторий. В целом, стало лучше, но такой подход принёс другие проблемы: фантомные зависимости, сложности при обновлении тулчейна разработки, усложнение проверок в CI-системе.
После оценки возможных решений с помощью yarn 2, lerna и pnpm решили остановиться на последнем варианте. Он позволяет устанавливать пакеты рекурсивно и выполнять работу над подгруппой пакетов с помощью флага
Интересная статья. Кстати, там упоминается, что pnpm используют в Microsoft.
#package #js
https://www.takeshape.io/articles/why-we-switched-from-yarn-to-pnpm/
Проект Эндрю состоял из нескольких пакетов, которые обновлялись независимо друг от друга. Это часто приводило к проблемам, поэтому они решили перенести все пакеты в единый монорепозиторий. В целом, стало лучше, но такой подход принёс другие проблемы: фантомные зависимости, сложности при обновлении тулчейна разработки, усложнение проверок в CI-системе.
После оценки возможных решений с помощью yarn 2, lerna и pnpm решили остановиться на последнем варианте. Он позволяет устанавливать пакеты рекурсивно и выполнять работу над подгруппой пакетов с помощью флага
--filter
.Интересная статья. Кстати, там упоминается, что pnpm используют в Microsoft.
#package #js
https://www.takeshape.io/articles/why-we-switched-from-yarn-to-pnpm/
Data Orchestration for Composable Commerce
Why we switched from Yarn to pnpm - Data Orchestration for Composable Commerce
While refactoring our build process recently, we made a big decision: we were going to leave Yarn behind.
Глеб Бахмутов рассказал про визуальное тестирование с помощью Cypress — "Visual testing for React components using open source tools".
В качестве примера в статье была взята игра судоку, написанная на React. Для тестирования компонентов использовалась библиотека
В статье есть примеры использования Cypress для мока модулей и таймеров. Есть очень подробный пример настройки визуального тестирования. Из-за особенностей рендеринга скриншоты одного и того же компонента будут разными в зависимости от версии браузера и операционной системы. Чтобы обойти эту проблему можно настроить процент, на который разрешено отличаться сравниваемым изображениям. Это хороший подход, но потенциально он может пропускать дефекты. Для надёжной генерации скриншотов в статье разбирается способ с использованием docker. В нём для генерации скриншотов используется точно такой же контейнер, какой работает в CI-системе.
Советую заглянуть в статью, если планируете добавить в свой React-проект визуальное тестирование.
#react #testing
https://glebbahmutov.com/blog/open-source-visual-testing-of-components/
В качестве примера в статье была взята игра судоку, написанная на React. Для тестирования компонентов использовалась библиотека
cypress-react-unit-test
. Для визуального тестирования (сравнения скриншотов компонентов) — cypress-image-snapshot
.В статье есть примеры использования Cypress для мока модулей и таймеров. Есть очень подробный пример настройки визуального тестирования. Из-за особенностей рендеринга скриншоты одного и того же компонента будут разными в зависимости от версии браузера и операционной системы. Чтобы обойти эту проблему можно настроить процент, на который разрешено отличаться сравниваемым изображениям. Это хороший подход, но потенциально он может пропускать дефекты. Для надёжной генерации скриншотов в статье разбирается способ с использованием docker. В нём для генерации скриншотов используется точно такой же контейнер, какой работает в CI-системе.
Советую заглянуть в статью, если планируете добавить в свой React-проект визуальное тестирование.
#react #testing
https://glebbahmutov.com/blog/open-source-visual-testing-of-components/
Better world by better software
Visual testing for React components using open source tools
Let's take a look at a modern React application like this Sudoku game that you can play online at https://sudoku-raravi.now.sh/. Talks Sudoku game Implementation Numbers component cypress-react
Сандрина Перейра опубликовала статью про гибридный подход к кастомизации
В начале статьи есть небольшой экскурс в нейминг компонентов, реализующих поведение
Для создания доступного и кастомизированного
Этот подход был успешно протестирован в Chrome 81, Firefox 76, Safari 13 среди пользователей, использующих технологии доступности.
Рекомендую почитать статью, если занимаетесь разработкой UI.
#css #a11y
https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/
<select>
— "Striking a Balance Between Native and Custom Select Elements".В начале статьи есть небольшой экскурс в нейминг компонентов, реализующих поведение
<select>
: Menu, Navigation, Select. Последний используется для создания выпадающих списков, именно про него рассказывается в статье.Для создания доступного и кастомизированного
<select>
Сандрина предлагает использовать два элемента: визуальный со всеми стилями и нативный, который доступен с клавиатуры и в скринридерах. Переключение между ними происходит с помощью медиа-выражения @media (hover: hover)
:@media (hover: hover) {
.selectCustom {
display: block;
}
.selectNative:focus + .selectCustom {
display: none;
}
}
Этот подход был успешно протестирован в Chrome 81, Firefox 76, Safari 13 среди пользователей, использующих технологии доступности.
Рекомендую почитать статью, если занимаетесь разработкой UI.
#css #a11y
https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/
CSS-Tricks
Striking a Balance Between Native and Custom Select Elements | CSS-Tricks
Here’s the plan! We’re going to build a styled select element. Not just the outside, but the inside too. Total styling control. Plus we’re going to make it
Тим Кадлек разобрался в причинах странного поведения prefetch на Netlify и рассказал про свои находки в статье "Prefetching? At This Age?".
Тим подключил к своему сайту библиотеку Instant.Page. Она помогает подгружать страницы в фоновом режиме с помощью prefetch, отслеживая наведение курсора мыши на ссылки и тапы пользователя. Но при хостинге сайта на Netlify подгруженные страницы при переходе по ссылкам не бралась из кэша, а загружалась повторно.
Оказалось, что Netlify (и любые другие CDN) отправляет заголовок
Очень интересная статья. Рекомендую почитать всем, кто интересуется темой производительности работы сайтов.
#performance #cache
https://timkadlec.com/remembers/2020-06-17-prefetching-at-this-age/
Тим подключил к своему сайту библиотеку Instant.Page. Она помогает подгружать страницы в фоновом режиме с помощью prefetch, отслеживая наведение курсора мыши на ссылки и тапы пользователя. Но при хостинге сайта на Netlify подгруженные страницы при переходе по ссылкам не бралась из кэша, а загружалась повторно.
Оказалось, что Netlify (и любые другие CDN) отправляет заголовок
Age
, когда его значение превышает max-age
браузер начинает повторно загружать ресурс. В Chromium, правда, логика немного сложнее — ресурс, загруженный с помощью prefetch, хранится в кэше пять минут вне зависимости от заголовка Cache-Control
, но по каким-то причинам этот период учитывал Age
. Баг в Chromium уже поправили. В Firefox баг заведён, но пока ещё открыт.Очень интересная статья. Рекомендую почитать всем, кто интересуется темой производительности работы сайтов.
#performance #cache
https://timkadlec.com/remembers/2020-06-17-prefetching-at-this-age/
Timkadlec
Prefetching? At This Age? - Web Performance Consulting | TimKadlec.com
Команда разработки компиляторов из Igalia представила полифилл для пропозала Temporal — "Dates and Times in JavaScript".
Для работы с датами в JavaScript используется объект Date. Он был сделан по образу и подобию Date из Java образца 1995 года. В 1997 году разработчики Java объявили этот API устаревшим. В JS его уже нельзя было поменять, потому что кардинальное изменение API сломало бы web. В результате сообщество создало много библиотек для более удобной работы с датами; Temporal может быть использован вместо них.
Основные особенности Temporal: удобный API для работы с датами и временем, иммутабельность, поддержка разных форматов представления дат, поддержка календарей, отличных от григорианского, полноценная возможность работы с часовыми поясами. В статье есть ссылки на подробное описание API и cookbook с примерами использования Temporal: подсчёт времени перелёта, планирование встречи с участниками в разных часовых поясах и т.п.
Команда Igalia призывает сообщество протестировать полифилл и поделиться критикой и мыслями, пока пропозал находится на Stage 2.
#proposal #polyfill #announcement
https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/
Для работы с датами в JavaScript используется объект Date. Он был сделан по образу и подобию Date из Java образца 1995 года. В 1997 году разработчики Java объявили этот API устаревшим. В JS его уже нельзя было поменять, потому что кардинальное изменение API сломало бы web. В результате сообщество создало много библиотек для более удобной работы с датами; Temporal может быть использован вместо них.
Основные особенности Temporal: удобный API для работы с датами и временем, иммутабельность, поддержка разных форматов представления дат, поддержка календарей, отличных от григорианского, полноценная возможность работы с часовыми поясами. В статье есть ссылки на подробное описание API и cookbook с примерами использования Temporal: подсчёт времени перелёта, планирование встречи с участниками в разных часовых поясах и т.п.
Команда Igalia призывает сообщество протестировать полифилл и поделиться критикой и мыслями, пока пропозал находится на Stage 2.
#proposal #polyfill #announcement
https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/