Forwarded from Defront — про фронтенд-разработку и не только (Alexander 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.
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Создание паттернов с помощью 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,
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Браузер. Рендеринг. Производительность
Второй год я помогаю с поиском спикеров на 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 Иванов. Браузер. Рендеринг. Производительность
При погружении в тему производительности разработчик может ступить на ложный путь, который, возможно, и позволит решить некоторые проблемы, связанные со скоростью отрисовки, но будет бесполезен при решении других проблем.
В данном докладе мы пройдём с вами…
В данном докладе мы пройдём с вами…
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Ускорение отрисовки комментарии Хабра
Станислав Лашманов поделился опытом ускорения отрисовки комментариев в 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/
Хабр
Как мы ускоряли комментарии Хабра
Комментарии на Хабре иногда несут больше пользы, чем сама статья. Поэтому при переходе на новую версию сайта было важно сделать работу с комментами не хуже, чем было. Вы когда-нибудь открывали в...
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Фонд 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 Новые шрифты
Rainer 1.0 — узкий акцидентный гротеск с высокой талией. Рудигер, его автор, начал работу над шрифтом ещё в 2014 году, и вот теперь добрался до релиза на Future Fonts.
В семействе 6 вариантов насыщенности, начертания есть прямые и с обратным наклоном. То есть, 12 шрифтов в сумме.
Лицензия стоит от 360 $, по начертаниям не продаётся.
Купить: futurefonts.xyz/rudiger/rainer/
#sans #decore
В семействе 6 вариантов насыщенности, начертания есть прямые и с обратным наклоном. То есть, 12 шрифтов в сумме.
Лицензия стоит от 360 $, по начертаниям не продаётся.
Купить: futurefonts.xyz/rudiger/rainer/
#sans #decore
Forwarded from Валя читает ишью
React Forget
Только что Xuan Huang (работал над Hermes) презентовал свой ресёрч React Without Memo.
Это компилятор, который позволит не использовать React.memo, генерируя код, который будет мемоизироваться автоматически. Пока что это закрытый эксперимент (React Forget это кодовое название) и не факт, что он завершится удачно.
Прикладываю 3 скриншота:
1. как выглядит мемоизированный код, который мы пишем сейчас;
2. как может выглядеть исходный код с использованием такого компилятора;
3. результат компиляции.
Ну и посмотрите сам доклад, он супер короткий: https://youtu.be/CzTXnOJj-uc?t=6906
P.S. Очень рад, что команда React двигается в эту сторону. Мне кажется, я до сих пор не понимаю когда мне нужен useCallback, а когда не особо, и, главное, как всё это правильно написать.
Только что Xuan Huang (работал над Hermes) презентовал свой ресёрч React Without Memo.
Это компилятор, который позволит не использовать React.memo, генерируя код, который будет мемоизироваться автоматически. Пока что это закрытый эксперимент (React Forget это кодовое название) и не факт, что он завершится удачно.
Прикладываю 3 скриншота:
1. как выглядит мемоизированный код, который мы пишем сейчас;
2. как может выглядеть исходный код с использованием такого компилятора;
3. результат компиляции.
Ну и посмотрите сам доклад, он супер короткий: https://youtu.be/CzTXnOJj-uc?t=6906
P.S. Очень рад, что команда React двигается в эту сторону. Мне кажется, я до сих пор не понимаю когда мне нужен useCallback, а когда не особо, и, главное, как всё это правильно написать.
Forwarded from Evil Martians
Злая Марсианка Вика Мельникова обсудила тонкости найма команды продуктовой разработки на подкасте #TechForNonTechies с Софией Матвеевой. Автор подкаста — ментор и создатель Enty, в разработке которого нам довелось поучаствовать.
http://amp.gs/jtjfg
http://amp.gs/jtjfg
Forwarded from UXPUB 🇺🇦 Дизайн-спільнота (uxpubpublisher)