За прошедшие две недели в канале для патронов Defront было опубликовано одиннадцать постов:
— Сандбоксинг кода с помощью QuickJS в Figma
— Неожиданное поведение custom properties с !important
— Отключённый JavaScript не спасает от фингерпринтинга
— Улучшение производительности Node.js-приложений
— Проблемы оверинжиниринга
— Оптимизация фреймворков с помощью инлайнинга ресурсов
— Идеальная ссылка
— Миграция проектов BBC на HTTPS
— TypeScript-конфиги для разных проектов
— CSS — это интерфейс
— Миграция кодовой базы Etsy на TypeScript
Становитесь патроном канала на Patreon, чтобы получить доступ в канал Defront Plus (300 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.
Спасибо всем, кто читает и поддерживает Defront!
https://www.patreon.com/myshov
— Сандбоксинг кода с помощью QuickJS в Figma
— Неожиданное поведение custom properties с !important
— Отключённый JavaScript не спасает от фингерпринтинга
— Улучшение производительности Node.js-приложений
— Проблемы оверинжиниринга
— Оптимизация фреймворков с помощью инлайнинга ресурсов
— Идеальная ссылка
— Миграция проектов BBC на HTTPS
— TypeScript-конфиги для разных проектов
— CSS — это интерфейс
— Миграция кодовой базы Etsy на TypeScript
Становитесь патроном канала на Patreon, чтобы получить доступ в канал Defront Plus (300 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.
Спасибо всем, кто читает и поддерживает Defront!
https://www.patreon.com/myshov
Изоляция сайтов в Firefox 94
Анна Гахокидзе из команды разработчиков Firefox рассказала про улучшение безопасности браузера с помощью изоляции сайтов — "Introducing Firefox’s new Site Isolation Security Architecture".
Старая архитектура Firefox для рендеринга контента сайтов использовала непривелигированные процессы. Эти процессы ограничены в выполнении операций, например, им запрещено записывать файлы на диск. Однако несколько сайтов могли быть соседями в рамках одного процесса, и зловредный сайт потенциально мог прочитать память другого сайта.
После обнаружения атак Meltdown и Spectre, которые эксплуатируют CPU для доступа к памяти сайтов-соседей, разработчики Firefox приступили к работе над новой архитектурой (проект Fission). В этой архитектуре все сайты находятся в независимых процессах. Изоляция сайтов позволяет решить проблему утечки данных через разделяемую память на системном уровне. Также изоляция улучшает стабильность браузера — критические ошибки не выходят за рамки выделенного процесса и не затрагивает сайты в соседних вкладках.
Переход на новую архитектуру с полноценной изоляцией сайтов был завершён в Firefox 94.
#firefox #security
https://hacks.mozilla.org/2021/05/introducing-firefox-new-site-isolation-security-architecture/
Анна Гахокидзе из команды разработчиков Firefox рассказала про улучшение безопасности браузера с помощью изоляции сайтов — "Introducing Firefox’s new Site Isolation Security Architecture".
Старая архитектура Firefox для рендеринга контента сайтов использовала непривелигированные процессы. Эти процессы ограничены в выполнении операций, например, им запрещено записывать файлы на диск. Однако несколько сайтов могли быть соседями в рамках одного процесса, и зловредный сайт потенциально мог прочитать память другого сайта.
После обнаружения атак Meltdown и Spectre, которые эксплуатируют CPU для доступа к памяти сайтов-соседей, разработчики Firefox приступили к работе над новой архитектурой (проект Fission). В этой архитектуре все сайты находятся в независимых процессах. Изоляция сайтов позволяет решить проблему утечки данных через разделяемую память на системном уровне. Также изоляция улучшает стабильность браузера — критические ошибки не выходят за рамки выделенного процесса и не затрагивает сайты в соседних вкладках.
Переход на новую архитектуру с полноценной изоляцией сайтов был завершён в Firefox 94.
#firefox #security
https://hacks.mozilla.org/2021/05/introducing-firefox-new-site-isolation-security-architecture/
Mozilla Hacks – the Web developer blog
Introducing Firefox’s new Site Isolation Security Architecture
With Site Isolation enabled on Firefox for Desktop, Mozilla takes its security guarantees to the next level.
Создание паттернов с помощью CSS Painting API
Джордж Франсис написал туториал по созданию генеративных паттернов с помощью CSS Painting API — "Creating Generative Patterns with The CSS Paint API".
Разработчики браузеров уже несколько лет работают над проектом Гудини (Houdini) — набором API для предоставления низкоуровневого доступа к CSS-движку. В этот набор входят CSS Painting API, CSS Layout API, CSS Properties and Values API и другие API.
CSS Painting API предоставляет низкоуровневый доступ к средствам рендеринга CSS. С его помощью разработчики могут создавать JavaScript-ворклеты для рендеринга изображений. Эти ворклеты могут быть использованы везде, где можно использовать изображения, например, в
Поддержка CSS Painting API на данный момент есть только в Chrome и других браузерах на базе Chromium.
#css #tutorial
https://css-tricks.com/creating-generative-patterns-with-the-css-paint-api/
Джордж Франсис написал туториал по созданию генеративных паттернов с помощью CSS Painting API — "Creating Generative Patterns with The CSS Paint API".
Разработчики браузеров уже несколько лет работают над проектом Гудини (Houdini) — набором API для предоставления низкоуровневого доступа к CSS-движку. В этот набор входят CSS Painting API, CSS Layout API, CSS Properties and Values API и другие API.
CSS Painting API предоставляет низкоуровневый доступ к средствам рендеринга CSS. С его помощью разработчики могут создавать JavaScript-ворклеты для рендеринга изображений. Эти ворклеты могут быть использованы везде, где можно использовать изображения, например, в
background-image и border-image. В туториале рассказывается об использовании CSS Painting API для создания генеративного арта.Поддержка CSS Painting API на данный момент есть только в Chrome и других браузерах на базе Chromium.
#css #tutorial
https://css-tricks.com/creating-generative-patterns-with-the-css-paint-api/
CSS-Tricks
Creating Generative Patterns with The CSS Paint API | CSS-Tricks
The browser has long been a medium for art and design. From Lynn Fisher's joyful A Single Div creations to Diana Smith's staggeringly detailed CSS paintings,
Браузер. Рендеринг. Производительность
Второй год я помогаю с поиском спикеров на CodeFest — крупнейшая конференция за Уралом. В прошлом году у нас выступал Сергей Ufocoder — автор канала @ufostation — с докладом "Браузер. Рендеринг. Производительность".
В докладе рассказывается о производительности рендеринга в Chromium с точки зрения архитектуры браузера. Подробно объясняется работа пайплайна рендеринга на примере
Доклад немного хардкорный, но полезный. Рекомендую посмотреть.
#performance #chromium #internals #talks
https://www.youtube.com/watch?v=tbDxm1hiEI4
Второй год я помогаю с поиском спикеров на CodeFest — крупнейшая конференция за Уралом. В прошлом году у нас выступал Сергей Ufocoder — автор канала @ufostation — с докладом "Браузер. Рендеринг. Производительность".
В докладе рассказывается о производительности рендеринга в Chromium с точки зрения архитектуры браузера. Подробно объясняется работа пайплайна рендеринга на примере
about://tracing и профилировки страниц с помощью вкладки Performance в DevTools. Рассматриваются несколько случаев оптимизации производительности с объяснением, почему это работает именно так. При подготовке доклада Сергей консультировался с официальной документацией Chromium и с разработчиками браузера.Доклад немного хардкорный, но полезный. Рекомендую посмотреть.
#performance #chromium #internals #talks
https://www.youtube.com/watch?v=tbDxm1hiEI4
YouTube
Сергей Ufocoder Иванов. Браузер. Рендеринг. Производительность
При погружении в тему производительности разработчик может ступить на ложный путь, который, возможно, и позволит решить некоторые проблемы, связанные со скоростью отрисовки, но будет бесполезен при решении других проблем.
В данном докладе мы пройдём с вами…
В данном докладе мы пройдём с вами…
Ускорение отрисовки комментарии Хабра
Станислав Лашманов поделился опытом ускорения отрисовки комментариев в web-версии Хабра — "Как мы ускоряли комментарии Хабра".
Фронтенд Хабра — это SPA-приложение, написанное на Vue.js. Самой большой проблемой после переписывания фронта Хабра стала производительность комментариев. Страницы с большим количеством комментариев рендерились медленно, а на слабых устройствах им не хватало памяти.
Для решения этой проблемы ребята реализовали стриминг. Благодаря ему комментарии рендерятся на сервере и по мере готовности передаются на клиент. Клиенту больше не приходится ждать загрузки всех комментариев. Однако с добавлением стриминга возникли другие проблемы: перестали работать якорные ссылки, надо было реализовывать восстановление скролла после перезагрузки страницы, были проблемы с переходами по истории. Все проблемы удалось решить.
Респект ребятам за то, что смогли дотащить эту фичу, но работы у них ещё осталось много. Хабр сейчас работает гораздо медленнее по сравнению со старой версией — оценка производительности в Lighthouse 25 баллов из 100. С точки зрения обычного пользователя кажется, что переход на SPA был не самой хорошей идеей.
#performance #spa #vue
https://habr.com/ru/company/habr/blog/590111/
Станислав Лашманов поделился опытом ускорения отрисовки комментариев в web-версии Хабра — "Как мы ускоряли комментарии Хабра".
Фронтенд Хабра — это SPA-приложение, написанное на Vue.js. Самой большой проблемой после переписывания фронта Хабра стала производительность комментариев. Страницы с большим количеством комментариев рендерились медленно, а на слабых устройствах им не хватало памяти.
Для решения этой проблемы ребята реализовали стриминг. Благодаря ему комментарии рендерятся на сервере и по мере готовности передаются на клиент. Клиенту больше не приходится ждать загрузки всех комментариев. Однако с добавлением стриминга возникли другие проблемы: перестали работать якорные ссылки, надо было реализовывать восстановление скролла после перезагрузки страницы, были проблемы с переходами по истории. Все проблемы удалось решить.
Респект ребятам за то, что смогли дотащить эту фичу, но работы у них ещё осталось много. Хабр сейчас работает гораздо медленнее по сравнению со старой версией — оценка производительности в Lighthouse 25 баллов из 100. С точки зрения обычного пользователя кажется, что переход на SPA был не самой хорошей идеей.
#performance #spa #vue
https://habr.com/ru/company/habr/blog/590111/
Хабр
Как мы ускоряли комментарии Хабра
Комментарии на Хабре иногда несут больше пользы, чем сама статья. Поэтому при переходе на новую версию сайта было важно сделать работу с комментами не хуже, чем было. Вы когда-нибудь открывали в...
Фонд UI
Chrome начал спонсировать независимых разработчиков и исследователей, работающих над вебом — "The UI fund".
На грант могут податься все желающие. Нет ограничений по срокам подачи заявок. Основное условие — работа над проектом, затрагивающим CSS, HTML или UI-инструменты. Под эти категории попадают инструменты для работы c HTML и CSS, работа над спецификациями или UI-исследованиями, работа в области доступности или работа над Open UI. Ведут проект Сара Дразнер и Николь Салливан. Для поддержки будут привлекаться эксперты из индустрии.
Очень крутая инициатива. В первую очередь она полезна майнтейнерам библиотек и всем, кто помогает в развитии веб-экосистемы.
#opensource #announcement
https://web.dev/ui-fund/
Chrome начал спонсировать независимых разработчиков и исследователей, работающих над вебом — "The UI fund".
На грант могут податься все желающие. Нет ограничений по срокам подачи заявок. Основное условие — работа над проектом, затрагивающим CSS, HTML или UI-инструменты. Под эти категории попадают инструменты для работы c HTML и CSS, работа над спецификациями или UI-исследованиями, работа в области доступности или работа над Open UI. Ведут проект Сара Дразнер и Николь Салливан. Для поддержки будут привлекаться эксперты из индустрии.
Очень крутая инициатива. В первую очередь она полезна майнтейнерам библиотек и всем, кто помогает в развитии веб-экосистемы.
#opensource #announcement
https://web.dev/ui-fund/
web.dev
The UI fund | Articles | web.dev
Announcing the UI fund from Chrome, designed to provide grants for people who work on design tools, CSS, and HTML.
Forwarded from Валя читает ишью
React Forget
Только что Xuan Huang (работал над Hermes) презентовал свой ресёрч React Without Memo.
Это компилятор, который позволит не использовать React.iss.onemo, генерируя код, который будет мемоизироваться автоматически. Пока что это закрытый эксперимент (React Forget это кодовое название) и не факт, что он завершится удачно.
Прикладываю 3 скриншота:
1. как выглядит мемоизированный код, который мы пишем сейчас;
2. как может выглядеть исходный код с использованием такого компилятора;
3. результат компиляции.
Ну и посмотрите сам доклад, он супер короткий: https://youtu.be/CzTXnOJj-uc?t=6906
P.S. Очень рад, что команда React двигается в эту сторону. Мне кажется, я до сих пор не понимаю когда мне нужен useCallback, а когда не особо, и, главное, как всё это правильно написать.
Только что Xuan Huang (работал над Hermes) презентовал свой ресёрч React Without Memo.
Это компилятор, который позволит не использовать React.iss.onemo, генерируя код, который будет мемоизироваться автоматически. Пока что это закрытый эксперимент (React Forget это кодовое название) и не факт, что он завершится удачно.
Прикладываю 3 скриншота:
1. как выглядит мемоизированный код, который мы пишем сейчас;
2. как может выглядеть исходный код с использованием такого компилятора;
3. результат компиляции.
Ну и посмотрите сам доклад, он супер короткий: https://youtu.be/CzTXnOJj-uc?t=6906
P.S. Очень рад, что команда React двигается в эту сторону. Мне кажется, я до сих пор не понимаю когда мне нужен useCallback, а когда не особо, и, главное, как всё это правильно написать.
Адаптация Relay для большой кодовой базы
На прошедшем React Conf 2021 был представлен новый компилятор Relay для оптимизации GraphQL-запросов — "Introducing the new Relay compiler".
Relay — это фреймворк для работы с GraphQL в React-приложениях. При использовании Relay компоненты декларативно описывают необходимые им данные с помощью GraphQL-фрагментов. Компилятор Relay на этапе сборки приложения обходит компоненты и подготавливает оптимизированный GraphQL-запрос на базе этих фрагментов.
Скорость компилятора с ростом кодовой базы Facebook постепенно ухудшалась, поэтому его переписали c JavaScript на Rust. Скорость работы компилятора улучшилась в пять-семь раз. Кроме улучшения производительности новый компилятор подготовил платформу для дальнейшего развития Relay. Например, благодаря ему в Relay появилась поддержка новой директивы
#react #graphql #rust
https://relay.dev/blog/2021/12/08/introducing-the-new-relay-compiler/
На прошедшем React Conf 2021 был представлен новый компилятор Relay для оптимизации GraphQL-запросов — "Introducing the new Relay compiler".
Relay — это фреймворк для работы с GraphQL в React-приложениях. При использовании Relay компоненты декларативно описывают необходимые им данные с помощью GraphQL-фрагментов. Компилятор Relay на этапе сборки приложения обходит компоненты и подготавливает оптимизированный GraphQL-запрос на базе этих фрагментов.
Скорость компилятора с ростом кодовой базы Facebook постепенно ухудшалась, поэтому его переписали c JavaScript на Rust. Скорость работы компилятора улучшилась в пять-семь раз. Кроме улучшения производительности новый компилятор подготовил платформу для дальнейшего развития Relay. Например, благодаря ему в Relay появилась поддержка новой директивы
@required для упрощения работы с данными. Также этот компилятор лежит в основе расширения для VSCode для поддержки автодополнения имён полей в GraphQL-фрагментах. Расширение на данный момент недоступно для внешних пользователей, так как над ним ещё ведётся работа.#react #graphql #rust
https://relay.dev/blog/2021/12/08/introducing-the-new-relay-compiler/
relay.dev
Introducing the new Relay compiler | Relay
Отладка утечек памяти с помощью "Detached Elements" в Edge DevTools
Патрик Броссет из Microsoft рассказал о новом инструменте для упрощения поиска утечек памяти в клиентских JavaScript-приложениях — "Debug memory leaks with the Microsoft Edge Detached Elements tool".
В DevTools Edge была добавлена новая вкладка "Detached Elements". С её помощью можно получить список всех DOM-элементов, откреплённых от документа, и быстро найти участок кода, в котором были сохранены ссылки на эти элементы. Для поиска утечек также можно использовать вкладку "Memory" со снятием снапшотов памяти (доступно во всех Chromium-based браузерах), но по сравнению с "Detached Elements" это не так удобно.
"Detached Elements" будет доступен в Edge 97.
#edge #devtools #debug
https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/
Патрик Броссет из Microsoft рассказал о новом инструменте для упрощения поиска утечек памяти в клиентских JavaScript-приложениях — "Debug memory leaks with the Microsoft Edge Detached Elements tool".
В DevTools Edge была добавлена новая вкладка "Detached Elements". С её помощью можно получить список всех DOM-элементов, откреплённых от документа, и быстро найти участок кода, в котором были сохранены ссылки на эти элементы. Для поиска утечек также можно использовать вкладку "Memory" со снятием снапшотов памяти (доступно во всех Chromium-based браузерах), но по сравнению с "Detached Elements" это не так удобно.
"Detached Elements" будет доступен в Edge 97.
#edge #devtools #debug
https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/
Microsoft Edge Blog
Debug memory leaks with the Microsoft Edge Detached Elements tool
Memory leaks occur when the JavaScript code of an application retains more and more objects in memory that it doesn’t need any longer instead of releasing them for the browser to garbage collect (GC). For long-running apps, small memory leaks of on
👍1
Создание временных сайтов с помощью Netlify Drop
Недавно Netlify запустил новый сервис "Drop" для быстрого развёртывания сайтов.
Netlify — это платформа для публикации статически генерируемых сайтов. У неё есть много полезных штук с довольно хорошим бесплатным тарифом. Сайт Defront хостится на Netlify, всё работает как часы.
Недавно они сделали совершенно гениальный по своей простоте сервис. Если вам нужно временно опубликовать сайт, берёте папку с index.html и сопутствующими ресурсами, кидаете её в окно браузера, и у вас появляется сайт. Сервис работает даже без аккаунта на Netlify, в этом случае сайт будет работать 24 часа, потом он будет автоматически удалён.
#tool
https://app.netlify.com/drop
Недавно Netlify запустил новый сервис "Drop" для быстрого развёртывания сайтов.
Netlify — это платформа для публикации статически генерируемых сайтов. У неё есть много полезных штук с довольно хорошим бесплатным тарифом. Сайт Defront хостится на Netlify, всё работает как часы.
Недавно они сделали совершенно гениальный по своей простоте сервис. Если вам нужно временно опубликовать сайт, берёте папку с index.html и сопутствующими ресурсами, кидаете её в окно браузера, и у вас появляется сайт. Сервис работает даже без аккаунта на Netlify, в этом случае сайт будет работать 24 часа, потом он будет автоматически удалён.
#tool
https://app.netlify.com/drop
🔥2
Релиз Firefox 95
В Firefox 95 включён RLBox — технология для улучшения безопасности браузера с помощью WebAssembly. Также в этой версии для всех пользователей был включён Site Isolation.
В macOS уменьшено потребление процессора во время обработки событий. А также было уменьшено потребление энергии при программном декодировании видео. Это особенно заметно в режиме полноэкранного просмотра.
В HTML был добавлен глобальный атрибут
В JS-движке значительных изменений не было, но был добавлен
#firefox #release
https://www.mozilla.org/en-US/firefox/95.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/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
🔥1
Преимущества хранения node_modules в git
Джек Франклин из команды разработки Chrome DevTools написал статью о том, почему они коммитят зависимости в систему контроля версий — "Why you should check-in your node dependencies".
Плюсы такого подхода:
— ускорение разворачивания проекта и уменьшение нагрузки на сеть;
— гарантированная воспроизводимость сборок;
— независимость от центрального хранилища кода;
— осознанное использование зависимостей.
Также в статье упоминается про большие диффы при добавлении зависимостей. Эта проблема у них частично решена запретом обновления проектного кода вместе с кодом зависимостей. Про минусы больше ничего нет, однако при таком подходе как минимум появляются проблемы при использовании нативных модулей.
#npm
https://www.jackfranklin.co.uk/blog/check-in-your-node-dependencies/
Джек Франклин из команды разработки Chrome DevTools написал статью о том, почему они коммитят зависимости в систему контроля версий — "Why you should check-in your node dependencies".
Плюсы такого подхода:
— ускорение разворачивания проекта и уменьшение нагрузки на сеть;
— гарантированная воспроизводимость сборок;
— независимость от центрального хранилища кода;
— осознанное использование зависимостей.
Также в статье упоминается про большие диффы при добавлении зависимостей. Эта проблема у них частично решена запретом обновления проектного кода вместе с кодом зависимостей. Про минусы больше ничего нет, однако при таком подходе как минимум появляются проблемы при использовании нативных модулей.
#npm
https://www.jackfranklin.co.uk/blog/check-in-your-node-dependencies/
👎2
Улучшилась ли скорость веба благодаря Web Vitals?
Барри Поллард проанализировал влияние метрик Web Vitals на производительность веба в целом — "Have Core Web Vitals made the web faster?".
Внедрение метрик Core Web Vitals (CWV) по данным Google дало положительный эффект. По сравнению с прошлыми годами количество сайтов, удовлетворяющих CWV, увеличилось более чем на 20%. Однако Барри пишет о том, что сложно судить о динамике изменения метрик, если их определения претерпели значительные изменения. Именно это произошло с метриками LCP и CLS.
Более непредвзятую оценку может дать HTTPArchive. Данные семи миллионов сайтов показывают небольшое падение производительности за прошедший год (вывод сделан на основе изменения SpeedIndex). Но и это тоже не конец истории, так как HTTPArchive собирает данные заглавных страниц сайтов, что может значительно влиять на итоговую оценку.
Барри пишет про то, что ответ на вопрос лежит где-то посередине. Нельзя категорично утверждать, что благодаря CWV скорость веба улучшилась. Но введение CWV заставило владельцев крупных сайтов инвестировать ресурсы в улучшение производительности. Также крупные игроки (Wordpress, Wix) стали более серьёзно относиться к производительности, после того как Google объявил о том, что алгоритм ранжирования поиска будет учитывать метрики CWV.
#performance #research
https://calendar.perfplanet.com/2021/have-core-web-vitals-made-the-web-faster/
Барри Поллард проанализировал влияние метрик Web Vitals на производительность веба в целом — "Have Core Web Vitals made the web faster?".
Внедрение метрик Core Web Vitals (CWV) по данным Google дало положительный эффект. По сравнению с прошлыми годами количество сайтов, удовлетворяющих CWV, увеличилось более чем на 20%. Однако Барри пишет о том, что сложно судить о динамике изменения метрик, если их определения претерпели значительные изменения. Именно это произошло с метриками LCP и CLS.
Более непредвзятую оценку может дать HTTPArchive. Данные семи миллионов сайтов показывают небольшое падение производительности за прошедший год (вывод сделан на основе изменения SpeedIndex). Но и это тоже не конец истории, так как HTTPArchive собирает данные заглавных страниц сайтов, что может значительно влиять на итоговую оценку.
Барри пишет про то, что ответ на вопрос лежит где-то посередине. Нельзя категорично утверждать, что благодаря CWV скорость веба улучшилась. Но введение CWV заставило владельцев крупных сайтов инвестировать ресурсы в улучшение производительности. Также крупные игроки (Wordpress, Wix) стали более серьёзно относиться к производительности, после того как Google объявил о том, что алгоритм ранжирования поиска будет учитывать метрики CWV.
#performance #research
https://calendar.perfplanet.com/2021/have-core-web-vitals-made-the-web-faster/
Web Performance Calendar
Have Core Web Vitals made the web faster?
The Core Web Vitals (CWV) were announced in May 2020 and as part of that announcement Google said they would be "evaluating Page experience for a better web". Crucially that this evaluation would form part of their search ranking algorithm: in short, faster…
👍1
За прошедшие две недели в канале для патронов Defront было опубликовано одиннадцать постов:
— Невидимый бэкдор в JavaScript-коде
— Веб-зомби
— Скромная перегрузка функций в TypeScript
— Откладывание выполнения некритичных скриптов
— Использование ссылок mailto
— Алгоритмы сжатия в HTTP
— Стриминг контента в SPA
— Эффективное решение задач и отладка
— Как работает троттлинг в Lighthouse
— UI браузера с точки зрения безопасности
— Подожди пять минут
Становитесь патроном канала на Patreon, чтобы получить доступ Defront Plus (более 300 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.
Спасибо всем, кто читает и поддерживает Defront!
https://www.patreon.com/myshov
— Невидимый бэкдор в JavaScript-коде
— Веб-зомби
— Скромная перегрузка функций в TypeScript
— Откладывание выполнения некритичных скриптов
— Использование ссылок mailto
— Алгоритмы сжатия в HTTP
— Стриминг контента в SPA
— Эффективное решение задач и отладка
— Как работает троттлинг в Lighthouse
— UI браузера с точки зрения безопасности
— Подожди пять минут
Становитесь патроном канала на Patreon, чтобы получить доступ Defront Plus (более 300 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.
Спасибо всем, кто читает и поддерживает Defront!
https://www.patreon.com/myshov
👍3
Глубокое клонирование объектов с помощью structuredClone
Сурма из Google рассказал про новое API для глубокого клонирования JavaScript-объектов — "Deep-copying in JavaScript using structuredClone".
Самым популярным решением для глубокого клонирования объектов был JSON-хак:
Он стал настолько популярен, что в браузерах были добавлены специальные оптимизации для этого хака. На данный момент он остаётся самым быстрым способом для глубокого клонирования небольших объектов. Однако он не поддерживает объекты с циклическими ссылками,
Структурное клонирование — это другое название для глубокого клонирования. Оно использовалось браузерами неявно при передаче объектов с помощью postMessage и сохранении объектов в IndexedDB. Новый метод structuredClone открывает удобный доступ к этому механизму клонирования без недостатков JSON-хака:
Поддержка strucutredClone на данный момент есть в Firefox 94, в nightly-версии Chrome и Safari TP.
#js #api
https://web.dev/structured-clone/
Сурма из Google рассказал про новое API для глубокого клонирования JavaScript-объектов — "Deep-copying in JavaScript using structuredClone".
Самым популярным решением для глубокого клонирования объектов был JSON-хак:
const myDeepCopy = JSON.parse(JSON.stringify(myOriginal));
Он стал настолько популярен, что в браузерах были добавлены специальные оптимизации для этого хака. На данный момент он остаётся самым быстрым способом для глубокого клонирования небольших объектов. Однако он не поддерживает объекты с циклическими ссылками,
Map, Set, Date, RegExp и ArrayBuffer.Структурное клонирование — это другое название для глубокого клонирования. Оно использовалось браузерами неявно при передаче объектов с помощью postMessage и сохранении объектов в IndexedDB. Новый метод structuredClone открывает удобный доступ к этому механизму клонирования без недостатков JSON-хака:
const myDeepCopy = structuredClone(myOriginal);
Поддержка strucutredClone на данный момент есть в Firefox 94, в nightly-версии Chrome и Safari TP.
#js #api
https://web.dev/structured-clone/
web.dev
Deep-copying in JavaScript using structuredClone | Articles | web.dev
For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with `structuredClone()`, a built-in function for deep-copying.
🔥7
Релиз Safari 15.2
На прошлой неделе вышла новая версия Safari. Джен Симмонс рассказала про основные новинки релиза — "New WebKit Features in Safari 15.2".
— Объём доступной памяти для WebAssembly увеличен до 4Гб. Была оптимизирована обработка исключений.
— Добавлена поддержка HTTP-заголовков Cross-Origin-Opener-Policy и Cross-Origin-Embedder-Policy для включения
— Добавлена поддержка цветового пространства 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/
https://developer.apple.com/documentation/safari-release-notes/safari-15_2-release-notes
На прошлой неделе вышла новая версия 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/
https://developer.apple.com/documentation/safari-release-notes/safari-15_2-release-notes
🎉1
TechTalks Зарплаты.ру 29.12 в 19:00 в Новосибирске
Финалим год своей любимой развлекухой — болтаем за IT под пиво и пиццу. Как обычно, в программе 2 отделения:
Открытый микрофон
Вы заранее присылаете нам свой вопрос, кейс, жалобу, доклад, стендап - что угодно, о чём бы вы хотели поговорить с IT-аудиторией. Сцена и микрофон к вашим услугам, но можно написать и анонимно — на техтолке "письмо" прочитают ведущие. 5-10 минут на ваш кейс и 10-15 минут на его обсуждение. Форма для вашего кейса
IT-игра "100-к-2" (по мотивам "Сто к одному")
Мы пристали с дурацкими вопросами к сотрудникам Зарплаты.ру — от разработчиков до сотрудников отдела продаж и маркетологов. Будем угадывать самые популярные и самые редкие ответы от наших ребят. Новогоднее настроение, подарки и кринжовый угар — что ещё нужно за 3 дня до конца года?
Руин-паб "Типография" (Новосибирск, Красный проспект, 22), начало в 19:00
Ссылка на регистрацию
Финалим год своей любимой развлекухой — болтаем за IT под пиво и пиццу. Как обычно, в программе 2 отделения:
Открытый микрофон
Вы заранее присылаете нам свой вопрос, кейс, жалобу, доклад, стендап - что угодно, о чём бы вы хотели поговорить с IT-аудиторией. Сцена и микрофон к вашим услугам, но можно написать и анонимно — на техтолке "письмо" прочитают ведущие. 5-10 минут на ваш кейс и 10-15 минут на его обсуждение. Форма для вашего кейса
IT-игра "100-к-2" (по мотивам "Сто к одному")
Мы пристали с дурацкими вопросами к сотрудникам Зарплаты.ру — от разработчиков до сотрудников отдела продаж и маркетологов. Будем угадывать самые популярные и самые редкие ответы от наших ребят. Новогоднее настроение, подарки и кринжовый угар — что ещё нужно за 3 дня до конца года?
Руин-паб "Типография" (Новосибирск, Красный проспект, 22), начало в 19:00
Ссылка на регистрацию
👍1
Fuite — инструмент для поиска утечек памяти в SPA
Нолан Лоусон представил утилиту для автоматизированного поиска утечек памяти в SPA — "Introducing fuite: a tool for finding memory leaks in web apps".
Fuite — консольная утилита, работающая поверх Puppeteer. Она запускает циклический сценарий перехода по ссылкам приложения и возврата назад по истории браузера. После сбора статистики выводится список объектов, которые увеличились кратно количеству прогонов.
Fuite не интегрируется в DevTools, как недавно представленный инструмент Edge, но помогает в поиске более широкого спектра утечек памяти.
#debug #tool #spa
https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/
Нолан Лоусон представил утилиту для автоматизированного поиска утечек памяти в SPA — "Introducing fuite: a tool for finding memory leaks in web apps".
Fuite — консольная утилита, работающая поверх Puppeteer. Она запускает циклический сценарий перехода по ссылкам приложения и возврата назад по истории браузера. После сбора статистики выводится список объектов, которые увеличились кратно количеству прогонов.
Fuite не интегрируется в DevTools, как недавно представленный инструмент Edge, но помогает в поиске более широкого спектра утечек памяти.
#debug #tool #spa
https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/
Read the Tea Leaves
Introducing fuite: a tool for finding memory leaks in web apps
Debugging memory leaks in web apps is hard. The tooling exists, but it’s complicated, cumbersome, and often doesn’t answer the simple question: Why is my app leaking memory? Because of …
👍2🔥2