Обложка канала

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

6354 @defront
Открыть

Канал про фронтенд-разработку и не только. Небольшие посты и короткие пересказы статей, приправленные авторским мнением. Ведёт канал Александр Мышов из Яндекс.Маркета.

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

    Встроенный браузер Facebook Томас Штайнер проанализировал работу встроенного браузера Facebook (In-App Browser — IAB), чтобы разобраться, чем он отличается от обычных браузеров — "Inspecting Facebook's WebView". Некоторые приложения открывают ссылки во встроенном браузере на базе WebView, потому что это даёт им больше возможностей для работы со страницей. На сайтах, открытых с помощью IAB Facebook, встраивается код сбора метрик производительности и информации о доступных возможностях WebView, в window добавляются свойства TEMPORARY и PERSISTENT, модифицируется отправляемый HTTP-заголовок User-Agent. WebView не поддерживает все возможности браузеров, поэтому некоторые страницы в нём могут быть сломаны или отображаться неправильно. Так как пользователей Facebook несколько миллиардов, вероятность встречи с подобными ошибками довольно высока. Для упрощения решения проблем в IAB включён режим отладки, чтобы разработчики могли подключиться к WebView удалённо с помощью DevTools браузера. #facebook #debug #mobile blog.tomayac.com/2019/12…-webview
    Inspecting Facebook's WebView

    The personal blog of Thomas Steiner

    Tomayac

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

    Пропозал "await.ops" Недавно узнал про пропозал "await.ops" — расширение await операторами await.all, await.any, await.race и await.allSettled. Они работают точно также как одноимённые методы у Promise. Благодаря новым операторам код получается немного короче, так как отпадает необходимость в написании Promise: 
    // до
await Promise.all(users.map(async x => fetchProfile(x.id)))

// после
await.all users.map(async x => fetchProfile(x.id))
    На данный момент "await.ops" находится на Stage 1, и его поддержки в браузерах нет. Авторы ищут дополнительные сценарии использования предложения для его продвижения на Stage 2. #js #proposal https://github.com/tc39/proposal-await.ops
    GitHub - tc39/proposal-await.ops: Introduce await.all / await.race / await.allSettled / await.any to simplify the usage of Promises

    Introduce await.all / await.race / await.allSettled / await.any to simplify the usage of Promises - GitHub - tc39/proposal-await.ops: Introduce await.all / await.race / await.allSettled / await.any...

    GitHub

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

    Self-Profiling API на практике Ник Джансма написал статью про новое экспериментальное API для профилировки производительности сайтов на устройствах пользователей — "JS Self-Profiling API In Practice". Self-Profiling API предоставляет программный доступ к семплирующему профилировщику для получения детальной информации о выполнении JavaScript-кода у пользователей сайта. API можно использовать как для анализа производительности кода сайта, так и для анализа производительности скриптов внешних сервисов. Проанализировать выполнение кода можно на любом этапе жизни страницы. Доступ к Self-Profiling API включается с помощью HTTP-заголовка Document-Policy: js-profiling. Оно оказывает минимальный эффект на производительность сайта у пользователей. Несмотря на экспериментальный статус Facebook и Microsoft уже начали использовать Self-Profiling API в своих сервисах для поиска проблем производительности. На данный момент поддержка Self-Profiling API есть только в Chrome версии 94 и выше. #performance #api #experimental calendar.perfplanet.com/2021/js…practice
    JS Self-Profiling API In Practice

    Table of Contents The JS Self-Profiling API What is Sampled Profiling? Downsides to Sampled Profiling API Document Policy API Shape Sample Interval Buffer Who to Profile When to Profile Specific Operations User Interactions Page Load Overhead Anatomy of a Prof

    Web Performance Calendar

  • Реклама

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

    Анализ производительности HTTP/3 В блоге requestmetrics была опубликована статья, посвящённая анализу производительности HTTP/3 — "HTTP/3 is Fast". HTTP/3 — это новая версия протокола HTTP, работающая поверх транспортного протокола QUIC. Более подробно про HTTP/3 можно почитать в публикации HTTP/3: the past, the present, and the future. В этой же статье проверялась скорость загрузки трёх видов сайтов: простой сайт, тяжёлый сайт, SPA. Ресурсы загружались с трёх разных серверов в Нью-Йорке, Лондоне и Бангалоре. Чем больше было расстояние, тем лучше всего показывал себя HTTP/3. Если для передачи данных между Миннесотой и Нью-Йорком выигрыш скорости составил более 200 мс, то для соединения между Миннесотой и Бангалором выигрыш был уже 3-4 секунды. Такой значительный разрыв в скорости загрузки объясняется тем, что в HTTP/3 решена проблема с “head-of-line blocking” — блокировкой передачи данных во время потери пакетов. #http #performance #benchmark requestmetrics.com/web-per…-is-fast

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

    За прошедшие две недели в канале для патронов Defront было опубликовано двенадцать постов: — Гриды для раскладок, флексы для компонентов — Миграция плейера asciinema на Solid.js и Rust — Лог жизни за десять лет — Изображения и блокирование перехода в ждущий режим — Советы начинающим программистам — Ликвидация редиректов — Уменьшение зависимости от псевдоэлементов — Типизация JSON.parse(JSON.stringify(x)) — Различия между SLO, SLA и SLI — Как справляться с неудачами и ошибками — Анализ взаимосвязи JavaScript-ошибок и производительности — Адаптация HTML для режима чтения Становитесь патроном канала на Patreon, чтобы получить доступ в Defront Plus (более 320 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п. Спасибо всем, кто читает и поддерживает Defront! https://www.patreon.com/myshov

    Patreon is empowering a new generation of creators. Support and engage with artists and creators as they live out their passions!

    Patreon

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

    Преимущества хранения node_modules в git Джек Франклин из команды разработки Chrome DevTools написал статью о том, почему они коммитят зависимости в систему контроля версий — "Why you should check-in your node dependencies". Плюсы такого подхода: — ускорение разворачивания проекта и уменьшение нагрузки на сеть; — гарантированная воспроизводимость сборок; — независимость от центрального хранилища кода; — осознанное использование зависимостей. Также в статье упоминается про большие диффы при добавлении зависимостей. Эта проблема у них частично решена запретом обновления проектного кода вместе с кодом зависимостей. Про минусы больше ничего нет, однако при таком подходе как минимум появляются проблемы при использовании нативных модулей. #npm www.jackfranklin.co.uk/blog/ch…ndencies

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

    Релиз Firefox 95 В Firefox 95 включён RLBox — технология для улучшения безопасности браузера с помощью WebAssembly. Также в этой версии для всех пользователей был включён Site Isolation. В macOS уменьшено потребление процессора во время обработки событий. А также было уменьшено потребление энергии при программном декодировании видео. Это особенно заметно в режиме полноэкранного просмотра. В HTML был добавлен глобальный атрибут inputmode для настройки вида виртуальной клавиатуры на смартфонах. Firefox на Android теперь поддерживает CSS-свойство cursor. В JS-движке значительных изменений не было, но был добавлен Crypto.randomUUID() — API для получения криптографически устойчивых значений UUID. Изменено поведение свойства SpeechSynthesisEvent.elapsedTime; теперь оно возвращает время в секундах. #firefox #release www.mozilla.org/en-US/f…asenotes developer.mozilla.org/en-US/d…eases/95

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

    Создание временных сайтов с помощью Netlify Drop Недавно Netlify запустил новый сервис "Drop" для быстрого развёртывания сайтов. Netlify — это платформа для публикации статически генерируемых сайтов. У неё есть много полезных штук с довольно хорошим бесплатным тарифом. Сайт Defront хостится на Netlify, всё работает как часы. Недавно они сделали совершенно гениальный по своей простоте сервис. Если вам нужно временно опубликовать сайт, берёте папку с index.html и сопутствующими ресурсами, кидаете её в окно браузера, и у вас появляется сайт. Сервис работает даже без аккаунта на Netlify, в этом случае сайт будет работать 24 часа, потом он будет автоматически удалён. #tool https://app.netlify.com/drop

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

    Отладка утечек памяти с помощью "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 blogs.windows.com/msedged…devtools
    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

    Microsoft Edge Blog

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

    Адаптация Relay для большой кодовой базы На прошедшем 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 relay.dev/blog/20…compiler
    Introducing the new Relay compiler | Relay

    relay.dev

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

    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, а когда не особо, и, главное, как всё это правильно написать.

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

    Фонд UI Chrome начал спонсировать независимых разработчиков и исследователей, работающих над вебом — "The UI fund". На грант могут податься все желающие. Нет ограничений по срокам подачи заявок. Основное условие — работа над проектом, затрагивающим CSS, HTML или UI-инструменты. Под эти категории попадают инструменты для работы c HTML и CSS, работа над спецификациями или UI-исследованиями, работа в области доступности или работа над Open UI. Ведут проект Сара Дразнер и Николь Салливан. Для поддержки будут привлекаться эксперты из индустрии. Очень крутая инициатива. В первую очередь она полезна майнтейнерам библиотек и всем, кто помогает в развитии веб-экосистемы. #opensource #announcement https://web.dev/ui-fund/
    The UI fund

    Announcing the UI fund from Chrome, designed to provide grants for people who work on design tools, CSS, and HTML.

    web.dev

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

    Ускорение отрисовки комментарии Хабра Станислав Лашманов поделился опытом ускорения отрисовки комментариев в web-версии Хабра — "Как мы ускоряли комментарии Хабра". Фронтенд Хабра — это SPA-приложение, написанное на Vue.js. Самой большой проблемой после переписывания фронта Хабра стала производительность комментариев. Страницы с большим количеством комментариев рендерились медленно, а на слабых устройствах им не хватало памяти. Для решения этой проблемы ребята реализовали стриминг. Благодаря ему комментарии рендерятся на сервере и по мере готовности передаются на клиент. Клиенту больше не приходится ждать загрузки всех комментариев. Однако с добавлением стриминга возникли другие проблемы: перестали работать якорные ссылки, надо было реализовывать восстановление скролла после перезагрузки страницы, были проблемы с переходами по истории. Все проблемы удалось решить. Респект ребятам за то, что смогли дотащить эту фичу, но работы у них ещё осталось много. Хабр сейчас работает гораздо медленнее по сравнению со старой версией — оценка производительности в Lighthouse 25 баллов из 100. С точки зрения обычного пользователя кажется, что переход на SPA был не самой хорошей идеей. #performance #spa #vue https://habr.com/ru/company/habr/blog/590111/
    Как мы ускоряли комментарии Хабра

    Комментарии на Хабре иногда несут больше пользы, чем сама статья. Поэтому при переходе на новую версию сайта было важно сделать работу с комментами не хуже, чем было. Вы когда-нибудь открывали...

    Хабр

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

    Браузер. Рендеринг. Производительность Второй год я помогаю с поиском спикеров на CodeFest — крупнейшая конференция за Уралом. В прошлом году у нас выступал Сергей Ufocoder — автор канала @ufostation — с докладом "Браузер. Рендеринг. Производительность". В докладе рассказывается о производительности рендеринга в Chromium с точки зрения архитектуры браузера. Подробно объясняется работа пайплайна рендеринга на примере about://tracing и профилировки страниц с помощью вкладки Performance в DevTools. Рассматриваются несколько случаев оптимизации производительности с объяснением, почему это работает именно так. При подготовке доклада Сергей консультировался с официальной документацией Chromium и с разработчиками браузера. Доклад немного хардкорный, но полезный. Рекомендую посмотреть. #performance #chromium #internals #talks https://www.youtube.com/watch?v=tbDxm1hiEI4
    Сергей Ufocoder Иванов. Браузер. Рендеринг. Производительность

    При погружении в тему производительности разработчик может ступить на ложный путь, который, возможно, и позволит решить некоторые проблемы, связанные со скоростью отрисовки, но будет бесполезен при решении других проблем. В данном докладе мы пройдём с вами по пути, который поможет вам в решении большинства проблем производительности рендеринга. Рассмотрим внутреннее устройство браузера. Разберём, как процесс рендеринга отражён в инструментах разработчика, что такое пайплайн рендеринга, что оказывает на него негативный эффект, и как можно с этим бороться. Часто фронтенд-разработчик, иногда автор статей, порой ментор, но постоянно в браузере. Презентация: https://disk.yandex.ru/i/4oqmmU6hTVOTWg Codefest: https://codefest.ru

    YouTube

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

    Создание паттернов с помощью 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-ворклеты для рендеринга изображений. Эти ворклеты могут быть использованы везде, где можно использовать изображения, например, в background-image и border-image. В туториале рассказывается об использовании CSS Painting API для создания генеративного арта. Поддержка CSS Painting API на данный момент есть только в Chrome и других браузерах на базе Chromium. #css #tutorial css-tricks.com/creatin…aint-api
    Creating Generative Patterns with The CSS Paint API

    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

    CSS-Tricks

  • Реклама

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

    Изоляция сайтов в Firefox 94 Анна Гахокидзе из команды разработчиков Firefox рассказала про улучшение безопасности браузера с помощью изоляции сайтов — "Introducing Firefox’s new Site Isolation Security Architecture". Старая архитектура Firefox для рендеринга контента сайтов использовала непривелигированные процессы. Эти процессы ограничены в выполнении операций, например, им запрещено записывать файлы на диск. Однако несколько сайтов могли быть соседями в рамках одного процесса, и зловредный сайт потенциально мог прочитать память другого сайта. После обнаружения атак Meltdown и Spectre, которые эксплуатируют CPU для доступа к памяти сайтов-соседей, разработчики Firefox приступили к работе над новой архитектурой (проект Fission). В этой архитектуре все сайты находятся в независимых процессах. Изоляция сайтов позволяет решить проблему утечки данных через разделяемую память на системном уровне. Также изоляция улучшает стабильность браузера — критические ошибки не выходят за рамки выделенного процесса и не затрагивает сайты в соседних вкладках. Переход на новую архитектуру с полноценной изоляцией сайтов был завершён в Firefox 94. #firefox #security hacks.mozilla.org/2021/05…itecture
    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.

    Mozilla Hacks – the Web developer blog

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

    За прошедшие две недели в канале для патронов 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
    Alexander Myshov is creating defront and open source (supported by Zarplata.ru) | Patreon

    Become a patron of Alexander Myshov today: Get access to exclusive content and experiences on the world’s largest membership platform for artists and creators.

    Patreon

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

    Сравнение вычислительной производительности WebGL и WebGPU Денис Радин сравнил вычислительную производительность WebGL и WebGPU — "WebGPU computations performance in comparison to WebGL". WebGPU API предоставляет доступ к возможностям современных видеокарт. Для поддержки вычислений в нём используются вычислительные шейдеры (compute shaders). В WebGL что-то подобное можно сделать с помощью хака преобразованием данных в текстуру и их дальнейшей обработкой с помощью пиксельного шейдера. Так как WebGPU разрабатывался с учётом поддержки произвольных вычислений, в задаче на перемножение матриц он работает в 3,5 раза быстрее WebGL. WebGPU открывает доступ к машинному обучению в вебе, пост-процессингу в реальном времени и физическим симуляциям в 60 fps. #webgl #webgpu #performance pixelscommander.com/javascr…to-webgl pixelscommander.com/ru/java…to-webgl (на русском языке)