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

2021-03-28 22:57:54 Джейк Арчибальд написал вторую часть из серии статей про оптимизацию производительности сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 2".

Во второй части Джейк исследует производительность сайта Alfa Romeo. На сайте подключается скрипт, который скрывает экран загрузки. Он загружается с очень низким приоритетом, из-за чего экран загрузки отображается очень долго. Проблема заключается в том, что скрипт подключается внизу страницы с атрибутом defer. Поэтому браузер сначала начинает загружать изображения и другие ресурсы, а затем сам скрипт. Проблема была решена переносом скрипта в .

Ещё была проблема с основным изображением сайта, которое отображалось после загрузки JS-бандла. Как оказалось, разработчики использовали полифил для создания адаптивных изображений. Этот полифил был заменён на , так как он поддерживается во всех актуальных браузерах.

После всех исправлений время загрузки сайта снизилось с 20 секунд до 3 секунд.

#performance

https://jakearchibald.com/2021/f1-perf-part-2/

2.2K viewsAlexander Myshov, 19:57

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

2021-03-28 06:59:04 Швета Пандитрао и Мустафа Эмре-Асер из команды разработки Chrome рассказали о грядущем использовании HTTPS в качестве дефолтного протокола для навигации по интернету — "A safer default for navigation: HTTPS".

На сегодняшний день HTTPS использует подавляющее число сайтов. Поэтому начиная с Chrome 90 сайты по умолчанию будут открываться по HTTPS при вводе их адреса без указания протокола. Это позволит немного сократить время на установку HTTPS-соединения.

При переходе на сайт без поддержки HTTPS Chrome будет откатываться на использование HTTP. То есть если ваш сайт работает по HTTP, в новых версиях Chrome он будет загружаться немного медленнее из-за первичной попытки установки HTTPS-соединения.

#chrome #performance

https://blog.chromium.org/2021/03/a-safer-default-for-navigation-https.html Открыть/Комментировать

2021-03-26 22:03:07 Никита Прокопов из JetBrains написал статью про внутреннее устройство эмоджи — "Emoji under the hood".

В самом простом случае эмоджи — это одна кодовая позиция (то есть символ) из Unicode-таблицы. Сами изображения эмоджи находятся в шрифтах операционной системы: Apple Color Emoji (macOS/iOS), Segoe UI Emoji (Windows), Noto Color Emoji (Android). Приложения и сайты могут поставлять свой уникальный набор глифов эмоджи.

Большой набор эмоджи создаётся с помощью комбинации нескольких кодовых позиций Unicode — кластера графем. Например, два эмоджи можно объединить в один с помощью кодовой позиции U+200D (ZERO-WIDTH JOINER). Если эмоджи представляют людей, им можно задать оттенок кожи с помощью специальных модификаторов U+1F3FB..U+1F3FF и т.п.

Очень интересная статья. Рекомендую почитать всем.

#programming

https://tonsky.me/blog/emoji/ Открыть/Комментировать

2021-03-26 10:20:38 Бен Фрейн рассказал о новом черновике спецификации вложенности в CSS — "CSS Nesting – the last piece of the puzzle". Недавно Адам Аргайл представил сообществу черновик спецификации, над которым он работает вместе с Табом Аткинсом. В этой спецификации описывается… Открыть/Комментировать

2021-03-26 08:02:56 Джек Арчибальд начал писать серию статей про производительность сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 1".

В первой части он рассказывает про сайт команды Альфа Таури. На медленном соединении и слабом устройстве страница загружается больше минуты. Одна из основных проблем связана с тем, что рендеринг блокируется CSS, который используется для трекинга используемых шрифтов. Также на сайте есть предзагрузка изображений, которые используются в карусели в верху страницы. Изображения загружаются с большим приоритетом и занимают канал, который мог бы быть использован для загрузки критических ресурсов. Также на сайте есть неоптимизированные изображения, на которых можно было бы сэкономить больше 200kb. Джек попробовал оптимизировать сайт — время его полной загрузки снизилось до 7 секунд.

Интересная статья. Очень рекомендую почитать всем, кто занимается производительностью.

#performance

https://jakearchibald.com/2021/f1-perf-part-1/ Открыть/Комментировать

2021-03-24 22:01:13 Сегодня вышла новая версия Firefox. Крис Миллс рассказал о всех новинках релиза — "In March, we see Firefox 87".

Из экспериментального статуса вышла поддержка события beforeinput и метода getTargetRanges() для гибкого управления поведением при редактировании текста. С их помощью можно эргономично предотвратить редактирование любой части текста, сделать автоматическую замену вводимых нецензурных слов звёздочками и т.п.

Дефолтное значение Referrer-Policy было заменено на strict-origin-when-cross-origin. Это означает, что по умолчанию браузер не будет включать путь и GET-параметры в Referer.

В DevTools появилась поддержка prefers-color-scheme для эмуляции текущей выбранной темы операционной системы. В инспекторе страницы теперь можно удобно устанавливать псевдокласс :target на выбранном DOM-узле.

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

Отключена поддержка Backspace для навигации по истории, чтобы предотвратить случайные переходы при заполнении форм. Для её включения (не делайте этого) нужно поменять опцию browser.backspace_action в about:config.

В версии для macOS была добавлена поддержка скринридера VoiceOver.

#firefox #release

https://hacks.mozilla.org/2021/03/in-march-we-see-firefox-87/ Открыть/Комментировать

2021-03-24 08:17:13 Google в сотрудничестве с другими вендорами и партнёрами создали инициативу Compat2021

В рамках неё будет проведена работа по улучшению совместимости 5 критических для разработчиков CSS фич:
- Flexbox
- Grid
- position: sticky
- aspect-ratio
- transforms

Эти фичи выбраны на основе опросов разработчиков, статистики с HTTP Archive, анализа багов Chromium, Gecko и WebKit, результатов тестов Web Platform tests и самых популярных запросов Can I Use.

https://web.dev/compat2021/ Открыть/Комментировать

2021-03-23 20:03:54 Джаред Уайт рассказал о своей боли при работе с фронтенд-библиотеками и инструментами — "The Shocking Immaturity of JavaScript".

Джаред пишет, что в современном фронтенде среди авторов инструментов и библиотек есть тенденция уделять больше внимания маркетингу, а не проблемам пользователей. Из-за этого страдает вся экосистема, а новички, работающие с фронтендом, тонут в большом количестве багов, зачастую обвиняя себя в неспособности разобраться с проектом.

Решение проблемы — быть честнее со своими пользователями. Если библиотека находится в экспериментальном режиме, надо об этом рассказать в readme или добавить alpha к номеру версии. Если у инструмента или библиотеки есть ограничения, надо об этом тоже написать и в самом лучшем случае посоветовать подходящие альтернативы.

Не все проекты страдают от подобных проблем. Автор советует брать пример с LitElement, PostCSS, Shoelace и Webpack.

#musings #js #opensource

https://dev.to/jaredcwhite/the-shocking-immaturity-of-javascript-c70 Открыть/Комментировать

2021-03-23 11:53:36 Channel name was changed to «Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только» Открыть/Комментировать

2021-03-22 23:38:43 На прошлой неделе Ингвар Степанян рассказал о новых фичах девятой версии V8 — "V8 release v9.0".

В регулярных выражениях появилась поддержка флага /d, благодаря которому в результате выполнения регулярки (match object) появляется свойство indicies с позициями текущих скобочных групп (capturing group).

На порядки ускорен доступ к полям родительского объекта с помощью super.

Последовательность токенов for ( async of теперь больше не парсится.

В WebAssembly появилась экспериментальная поддержка инлайна враппера JS-to-Wasm для более эффективного преобразования параметров функций при их передаче из JS в Wasm. Эта фича будет особенно полезна в тех случаях, когда вызов Wasm-функции находится на горячем участке JavaScript-кода.

На данный момент V8 v9.0 находится в бете. Стабильная версия выйдет вместе с Chrome 90.

#v8 #release

https://v8.dev/blog/v8-release-90 Открыть/Комментировать