bootg.com »
United States »
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только » Telegram Web
Вчера вышла новая версия Chrome. Пит Лепаж рассказал про все новинки релиза — "New in Chrome 83".
Из origin trial вышел Trusted Types API. Он позволяет избежать распространённых DOM-based XSS атак, блокируя прямой доступ к потенциально небезопасным частям web-платформы (innerHTML, изменение содержимого script, eval, setTimeout и т.п.) Trusted Types API можно включить с помощью заголовка CSP
Были обновлены встроенные html-контролы — унифицирован внешний вид, улучшена поддержка клавиатуры и тач-ввода. Над этой фичей работала команда Edge.
В рамках origin tirals доступны
Была добавлена поддержка изолированных окружений, которые гарантируют безопасность при использовании
В Chrome Dev Tools теперь можно эмулировать проблемы со зрением. Также можно эмулировать разные локали. При проблемах с Cross-Origin Embedder Policy на панели "Network" будет отображаться соответствующая отладочная информация. Перенесли пункт меню "Settings" в подменю "More tools".
#announcement #chrome #release
https://developers.google.com/web/updates/2020/05/nic83
Из origin trial вышел Trusted Types API. Он позволяет избежать распространённых DOM-based XSS атак, блокируя прямой доступ к потенциально небезопасным частям web-платформы (innerHTML, изменение содержимого script, eval, setTimeout и т.п.) Trusted Types API можно включить с помощью заголовка CSP
require-trusted-types-for 'script'
.Были обновлены встроенные html-контролы — унифицирован внешний вид, улучшена поддержка клавиатуры и тач-ввода. Над этой фичей работала команда Edge.
В рамках origin tirals доступны
performance.measureMemory()
— новое API для мониторинга потребления памяти страницей и Native File System API для упрощения работы с файлами в веб-приложениях.Была добавлена поддержка изолированных окружений, которые гарантируют безопасность при использовании
SharedArrayBuffer
, performance.measureMemory()
, JS Self-Profiling API.В Chrome Dev Tools теперь можно эмулировать проблемы со зрением. Также можно эмулировать разные локали. При проблемах с Cross-Origin Embedder Policy на панели "Network" будет отображаться соответствующая отладочная информация. Перенесли пункт меню "Settings" в подменю "More tools".
#announcement #chrome #release
https://developers.google.com/web/updates/2020/05/nic83
Chrome Developers
New in Chrome 83 - Chrome Developers
Chrome 83 is rolling out now! It adds support for trusted types, which help prevent cross site scripting vulnerabilities. Form elements get an important make-over. There's a new way to detect memory leaks. And the native file system API starts a new origin…
Роберто Витилло опубликовал в своём блоге статью про TCP — "What every developer should know about TCP".
Есть распространённое ошибочное предположение, что при отправке данных с помощью TCP пропускная способность канала связи не зависит от времени задержки. В статье объясняется, почему это не так.
При установке соединения сетевой стек операционной системы ищет наиболее подходящее количество пакетов (congestion window), которое можно отправить за один round-trip и которое не зафлудит канал получателя. Время доставки такой порции данных определяется с помощью round-trip time (RTT). Теоретическая максимальная пропускная способность зависит от этих двух показателей:
Статья написана очень понятно, рекомендую почитать всем, кто интересуется темой производительности.
#performance #net
https://robertovitillo.com/what-every-developer-should-know-about-tcp/
Есть распространённое ошибочное предположение, что при отправке данных с помощью TCP пропускная способность канала связи не зависит от времени задержки. В статье объясняется, почему это не так.
При установке соединения сетевой стек операционной системы ищет наиболее подходящее количество пакетов (congestion window), которое можно отправить за один round-trip и которое не зафлудит канал получателя. Время доставки такой порции данных определяется с помощью round-trip time (RTT). Теоретическая максимальная пропускная способность зависит от этих двух показателей:
Bandwidth = WinSize / RTT
. Именно по этой причине сервера стараются размещать ближе к своим пользователям.Статья написана очень понятно, рекомендую почитать всем, кто интересуется темой производительности.
#performance #net
https://robertovitillo.com/what-every-developer-should-know-about-tcp/
Флориан Раппл рассказал про текущее состояние микрофронтендов — "The State of Micro Frontends".
Микрофронтенды — это подход к организации приложения, когда команды в рамках одного продукта могут делать фичи, используя разные технологии, и релизить их независимо друг от друга. Микрофронтенды могут быть реализованы по-разному, поэтому существуют разные фреймворки для построения микрофронтендов, покрывающие специфические требования: qiankun, piral, mosaic, micromono и т.п.
Микрофронтенд — это не серебряная пуля, которая может решить все известные проблемы. Но в определённых случаях он может быть полезен. Такой подход для своих продуктов используют IKEA, Microsoft, SAP, Spotify и другие компании.
#architecture
https://blog.bitsrc.io/state-of-micro-frontends-9c0c604ed13a
Микрофронтенды — это подход к организации приложения, когда команды в рамках одного продукта могут делать фичи, используя разные технологии, и релизить их независимо друг от друга. Микрофронтенды могут быть реализованы по-разному, поэтому существуют разные фреймворки для построения микрофронтендов, покрывающие специфические требования: qiankun, piral, mosaic, micromono и т.п.
Микрофронтенд — это не серебряная пуля, которая может решить все известные проблемы. Но в определённых случаях он может быть полезен. Такой подход для своих продуктов используют IKEA, Microsoft, SAP, Spotify и другие компании.
#architecture
https://blog.bitsrc.io/state-of-micro-frontends-9c0c604ed13a
Medium
The State of Micro Frontends
One of the more controversial topics in frontend web dev is microfrontends. Are they worth it? Should you really split up your application?
В блоге Chromium была опубликована статья про исследования, которыми подкреплялись пороговые значения недавно анонсированных Web Vitals — "The Science Behind Web Vitals ".
Web Vitals состоит из трёх метрик — Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и First Input Delay (FID). Пороговые значения для них были выбраны с учётом поведения реальных пользователей. Например, одно из исследований говорит о том, что пользователи мобильных устройств обычно сохраняют внимание около 4-8 секунд. Если за это время страница не загрузилась, это означает, что для них общее время загрузки будет состоять из актуального времени загрузки плюс количество времени, в течении которого они не смотрели на устройство, после того как страница была загружена. Ещё одно исследование говорит о том, что пользователи замечают проблемы с отзывчивостью интерфейса, если время задержки до визуального фидбека находится в районе 150 миллисекунд.
Статью стоит почитать, если интересно узнать, чем руководствовались разработчики, определяя пороговые значения метрик.
#performance #metrics
https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
Web Vitals состоит из трёх метрик — Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и First Input Delay (FID). Пороговые значения для них были выбраны с учётом поведения реальных пользователей. Например, одно из исследований говорит о том, что пользователи мобильных устройств обычно сохраняют внимание около 4-8 секунд. Если за это время страница не загрузилась, это означает, что для них общее время загрузки будет состоять из актуального времени загрузки плюс количество времени, в течении которого они не смотрели на устройство, после того как страница была загружена. Ещё одно исследование говорит о том, что пользователи замечают проблемы с отзывчивостью интерфейса, если время задержки до визуального фидбека находится в районе 150 миллисекунд.
Статью стоит почитать, если интересно узнать, чем руководствовались разработчики, определяя пороговые значения метрик.
#performance #metrics
https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
Chromium Blog
The Science Behind Web Vitals
Web Vitals is an initiative by Google to help business owners, marketers and developers alike identify opportunities to improve user exp...
Пару недель назад инженеры из facebook опубликовали статью про редизайн главного сайта социальной сети — "Rebuilding our tech stack for the new Facebook".
В прошлом году на конференции f8, когда представили новый сайт, рассказали про использованные технологии. Небольшой обзор можно почитать тут. Статья сильно пересекается с докладами, но в ней есть пара новых деталей.
Для работы с CSS используют своё CSS-in-JS решение, которое на стадии сборки приложения извлекает стили из кода компонентов в CSS-файлы. При извлечении стилей используется подход Atomic CSS, в котором одно правило представляется отдельным классом. Благодаря Atomic CSS удалось уменьшить общий объём стилей на 80% по сравнению со старой версией facebook. Кроме извлечения стилей CIJ-библиотека упрощает работу с относительными размерами шрифтов для улучшения a11y. Разработчики могут использовать в коде компонентов размеры в пикселях, на этапе сборки они автоматически преобразуются в rem'ы.
Статья хорошая с большим количеством технических деталей. В первую очередь рекомендую почитать тем, кто не смотрел оригинальные доклады.
#facebook #cssinjs
https://engineering.fb.com/web/facebook-redesign/
В прошлом году на конференции f8, когда представили новый сайт, рассказали про использованные технологии. Небольшой обзор можно почитать тут. Статья сильно пересекается с докладами, но в ней есть пара новых деталей.
Для работы с CSS используют своё CSS-in-JS решение, которое на стадии сборки приложения извлекает стили из кода компонентов в CSS-файлы. При извлечении стилей используется подход Atomic CSS, в котором одно правило представляется отдельным классом. Благодаря Atomic CSS удалось уменьшить общий объём стилей на 80% по сравнению со старой версией facebook. Кроме извлечения стилей CIJ-библиотека упрощает работу с относительными размерами шрифтов для улучшения a11y. Разработчики могут использовать в коде компонентов размеры в пикселях, на этапе сборки они автоматически преобразуются в rem'ы.
Статья хорошая с большим количеством технических деталей. В первую очередь рекомендую почитать тем, кто не смотрел оригинальные доклады.
#facebook #cssinjs
https://engineering.fb.com/web/facebook-redesign/
Engineering at Meta
Rebuilding our tech stack for the new Facebook.com
Facebook.com launched in 2004 as a simple, server-rendered PHP website. Over time, we’ve added layer upon layer of new technology to deliver more interactive features. Each of these new features an…
Томас Штейнер из Google опубликовал пост про новое API — "The requestVideoFrameCallback API".
Метод
На данный момент поддержка requestVideoFrameCallback API есть только в Chromium, разработчики Firefox тоже заинтересованы в реализации этой фичи. Если всё взлетит, то вполне возможно, что через пару лет в браузере будет работать Adobe Premiere.
#video #api
https://blog.tomayac.com/2020/05/15/the-requestvideoframecallback-api/
Метод
requestVideoFrameCallback()
находится у элемента <video>
. Он позволяет регистрировать колбэк, который будет выполняться при отправке каждого кадра видеопотока в композитор, то есть на этапе рендеринга изображения. Эта фича предназначена для эффективной обработки видео в браузере, для синхронизации с внешними звуковыми источниками, для видео-анализа и "зеркалирования" видео в canvas. Частота, с которой вызывается колбэк, минимальное значение от частоты экрана и частоты кадров видео.На данный момент поддержка requestVideoFrameCallback API есть только в Chromium, разработчики Firefox тоже заинтересованы в реализации этой фичи. Если всё взлетит, то вполне возможно, что через пару лет в браузере будет работать Adobe Premiere.
#video #api
https://blog.tomayac.com/2020/05/15/the-requestvideoframecallback-api/
Tomayac
The requestVideoFrameCallback API
The personal blog of Thomas Steiner
Иван Акулов проанализировал js-бандлы и флоу загрузки web-приложения Notion и дал много советов по улучшению его производительности — "Case study: Analyzing Notion app performance".
Приложение загружается долго, это особенно заметно на смартфонах среднего ценового сегмента — время загрузки достигает 12 секунд. Больше всего времени уходит на парсинг и выполнение JS. В решении этой проблемы может помочь код-сплиттинг и удаление ненужного кода. Notion использует lodash, чтобы удалить из его кода неиспользуемые методы юзают
Очень большая и хорошая статья. Обязательно почитайте, если разрабатываете SPA.
#performance #bundle
https://3perf.com/blog/notion/
Приложение загружается долго, это особенно заметно на смартфонах среднего ценового сегмента — время загрузки достигает 12 секунд. Больше всего времени уходит на парсинг и выполнение JS. В решении этой проблемы может помочь код-сплиттинг и удаление ненужного кода. Notion использует lodash, чтобы удалить из его кода неиспользуемые методы юзают
babel-plugin-lodash
. Notion для работы с датами использует moment, вместо этой библиотеки лучше использовать современные и оптимизированные альтернативы, например, date-fns. Также в бандле приложения было найдено три разных версии core.js — библиотеки полифиллов. Такое происходит, когда приложение и зависимости используют core.js разных версий. Для решения этой проблемы можно настроить маппинг модулей с помощью resolve.alias
в конфиге wepback. В статье есть рекомендация транспилировать модули в CommonJS с помощью babel-плагина plugin-transform-modules-commonjs
с опцией lazy
. Такая оптимизация позволяет отложить выполнение js-кода, который можно не выполнять на этапе инициализации приложения. Очень большая и хорошая статья. Обязательно почитайте, если разрабатываете SPA.
#performance #bundle
https://3perf.com/blog/notion/
PerfPerfPerf
Case study: Analyzing Notion app performance
How to make a React app load ~30% faster – by tuning some configs and delaying some scripts
Пол Батлер — экс-гуглер — написал эссе про будущее web-приложений — "The WebAssembly App Gap".
В 2005 году с появлением AJAX в web'е произошла первая революция, которая принесла в браузеры офисные приложения — текстовые редакторы, календари, почтовые клиенты и т.п. Пол в статье пишет про то, что мы находимся на пороге второй революции, в основе которой лежат WebAssembly и современные браузерные API.
Есть первые ласточки этой революции, например, Figma. Она завоевала рынок благодаря слиянию двух факторов: производительности нативного кода и возможностей web'а для совместной работы. Раньше пользователям хватало обычного графического редактора, сейчас web-альтернатива выглядит достойной заменой, так как сложно игнорировать её преимущества. То же самое может произойти и с другими категориями программного обеспечения.
В статье есть размышления по поводу того, каких возможностей не хватает платформе для того, чтобы web-приложения смогли выйти на новый уровень. Также есть размышления о проблемах таких приложений. Например, если компания-владелец такого приложения обанкротится, то пользователи больше не смогут получить полноценный доступ к своим данным.
Довольно глубокая статья. В первую очередь рекомендую почитать всем, кто находится в поисках идеи для своего проекта.
#musings #webassembly
https://paulbutler.org/2020/the-webassembly-app-gap/
В 2005 году с появлением AJAX в web'е произошла первая революция, которая принесла в браузеры офисные приложения — текстовые редакторы, календари, почтовые клиенты и т.п. Пол в статье пишет про то, что мы находимся на пороге второй революции, в основе которой лежат WebAssembly и современные браузерные API.
Есть первые ласточки этой революции, например, Figma. Она завоевала рынок благодаря слиянию двух факторов: производительности нативного кода и возможностей web'а для совместной работы. Раньше пользователям хватало обычного графического редактора, сейчас web-альтернатива выглядит достойной заменой, так как сложно игнорировать её преимущества. То же самое может произойти и с другими категориями программного обеспечения.
В статье есть размышления по поводу того, каких возможностей не хватает платформе для того, чтобы web-приложения смогли выйти на новый уровень. Также есть размышления о проблемах таких приложений. Например, если компания-владелец такого приложения обанкротится, то пользователи больше не смогут получить полноценный доступ к своим данным.
Довольно глубокая статья. В первую очередь рекомендую почитать всем, кто находится в поисках идеи для своего проекта.
#musings #webassembly
https://paulbutler.org/2020/the-webassembly-app-gap/
Forwarded from Вебня (Sergey Rubanov)
Вышел Babel 7.10.0. Среди нововведений:
- поддержка пропозала Ergonomic brand checks for Private Field (stage 1)
- совместимая с ES2015 поддержка экранирования символов
- улучшения поддержки optional chaining (ES2020)
- поддержка module attributes (stage 1) парсером
- улучшенный три-шейкинг для React
- парсинг import.meta (ES2020) включен по умолчанию
- поля классов (stage 3) добавлены в shippedProposals, так как начинают появляться в браузерах
- новая архитектура для поллифилов. Теперь как альтернативу core-js можно использовать набор полифиллов из es-shims
- поддержка пропозала Ergonomic brand checks for Private Field (stage 1)
- совместимая с ES2015 поддержка экранирования символов
- улучшения поддержки optional chaining (ES2020)
- поддержка module attributes (stage 1) парсером
- улучшенный три-шейкинг для React
- парсинг import.meta (ES2020) включен по умолчанию
- поля классов (stage 3) добавлены в shippedProposals, так как начинают появляться в браузерах
- новая архитектура для поллифилов. Теперь как альтернативу core-js можно использовать набор полифиллов из es-shims
babeljs.io
7.10.0 Released: Class Fields in preset-env, '#private in' checks and better React tree-shaking · Babel
We just released a new minor version of Babel!
Google объявил о том, что показатели Web Vitals будут влиять на ранжирование сайтов в поиске — "Evaluating page experience for a better web".
Google учитывает сотни сигналов, которые влияют на ранжирование, например, адаптированность страниц под мобильные устройства, поддержку https, удобный доступ к контенту и т.п. К этим сигналам будет добавлен Web Vitals. То есть среди сайтов с примерно одинаковым контентом и сигналами предпочтение будет отдаваться тем, которые работают быстрее. Также будет изменён алгоритм попадания контента новостных сайтов в "Top Stories" — теперь необязательно, чтобы сайт предоставлял AMP-версию страниц, достаточно, чтобы он работал быстро.
Алгоритм ранжирования будет обновлён не ранее 2021 года. За шесть месяцев до обновления будет ещё один анонс. У владельцев сайтов есть много времени, чтобы улучшить показатели Web Vitals.
#seo #performance #google
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
Google учитывает сотни сигналов, которые влияют на ранжирование, например, адаптированность страниц под мобильные устройства, поддержку https, удобный доступ к контенту и т.п. К этим сигналам будет добавлен Web Vitals. То есть среди сайтов с примерно одинаковым контентом и сигналами предпочтение будет отдаваться тем, которые работают быстрее. Также будет изменён алгоритм попадания контента новостных сайтов в "Top Stories" — теперь необязательно, чтобы сайт предоставлял AMP-версию страниц, достаточно, чтобы он работал быстро.
Алгоритм ранжирования будет обновлён не ранее 2021 года. За шесть месяцев до обновления будет ещё один анонс. У владельцев сайтов есть много времени, чтобы улучшить показатели Web Vitals.
#seo #performance #google
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
Official Google Webmaster Central Blog
Evaluating page experience for a better web
We’re introducing page experience as a new ranking signal that provides a holistic picture of the quality of a user’s experience on a web page.
Руководители Trello, Vimeo, Canva и Tinder дали интервью изданию Icrement про фронтенд в своих компаниях — "Frontend at scale".
Фронтенд-команды всех компаний используют похожий стек: React и TypeScript (Tinder не учитываю, так как её представитель в интервью рассказывал только про iOS). Все компании в своих процессах разработки объединяют дизайнеров и разработчиков. В Canva пошли немного дальше — у них некоторые дизайнеры параллельно занимаются разработкой.
Были очень разные ответы на вопрос про ключевые инструменты, которые используются разработчиками. Представитель от Trello рассказал про prettier и eslint, от Vimeo — немного про внутренний инструмент для пререндеринга React-приложений, от Canva — про Storybook и его интеграцию в пулл-реквесты.
Не бомбическое интервью, но местами было интересно. Рекомендую почитать, если интересно узнать про особенности фронтенд-стека в больших компаниях.
#interview
https://increment.com/frontend/frontend-at-scale/
Фронтенд-команды всех компаний используют похожий стек: React и TypeScript (Tinder не учитываю, так как её представитель в интервью рассказывал только про iOS). Все компании в своих процессах разработки объединяют дизайнеров и разработчиков. В Canva пошли немного дальше — у них некоторые дизайнеры параллельно занимаются разработкой.
Были очень разные ответы на вопрос про ключевые инструменты, которые используются разработчиками. Представитель от Trello рассказал про prettier и eslint, от Vimeo — немного про внутренний инструмент для пререндеринга React-приложений, от Canva — про Storybook и его интеграцию в пулл-реквесты.
Не бомбическое интервью, но местами было интересно. Рекомендую почитать, если интересно узнать про особенности фронтенд-стека в больших компаниях.
#interview
https://increment.com/frontend/frontend-at-scale/
Increment
Frontend at scale – Increment: Frontend
Leaders at Atlassian, Canva, Tinder, and Vimeo discuss frameworks, tooling, and rapidly evolving technologies.
Аксель Раушмайер опубликовал статью про новый пропозал — "A first look at records and tuples in JavaScript".
Records и Tuples (записи и кортежи) — это новые иммутабельные и сравниваемые по значению примитивные типы данных. Record — это аналог объекта, tuple — массива. Для их создания используются похожие на массив и объект литералы с префиксом "#":
Благодаря иммутабельности записи и кортежи можно безопасно использовать по всей программе без необходимости в клонировании (как в случае с обычными массивами и объектами). Также их можно использовать в тех ситуациях, где не имеет особого смысла использовать обычные литералы массивов и объектов, например, при сравнении в условиях
На данный момент пропозал находится на первой стадии добавления в стандарт. Есть полифилл (использует экспериментальные
#js #proposal
https://2ality.com/2020/05/records-tuples-first-look.html
https://habr.com/ru/post/504092/ (перевод на русский язык)
Records и Tuples (записи и кортежи) — это новые иммутабельные и сравниваемые по значению примитивные типы данных. Record — это аналог объекта, tuple — массива. Для их создания используются похожие на массив и объект литералы с префиксом "#":
#[1, 2]
, #{a: 1}
.Благодаря иммутабельности записи и кортежи можно безопасно использовать по всей программе без необходимости в клонировании (как в случае с обычными массивами и объектами). Также их можно использовать в тех ситуациях, где не имеет особого смысла использовать обычные литералы массивов и объектов, например, при сравнении в условиях
#[1, 2, 3] === #[1, 2, 3]
и в качестве ключа Set
и Map
.На данный момент пропозал находится на первой стадии добавления в стандарт. Есть полифилл (использует экспериментальные
WeakRef
и FinalizationRegistry
).#js #proposal
https://2ality.com/2020/05/records-tuples-first-look.html
https://habr.com/ru/post/504092/ (перевод на русский язык)
Хабр
Первый взгляд на записи и кортежи в JavaScript
В этом посте мы вкратце рассмотрим предложение в стандарт ECMAScript «Record & Tuple» от Робина Рикарда и Рика Баттона. Это предложение добавляет два вида состав...
Increment — журнал про разработку — в этом месяце был полностью посвящён фронтенду. Там много постов от разработчиков из мира фронтенда. Среди них есть статья Эвана Ю "The process: Making Vue 3", где он рассказывает про разработку Vue 3 и особенности его работы.
К 2018 году в кодовой базе Vue 2 накопился технический долг и прояснились архитектурные проблемы. К этому моменту все браузеры стали поддерживать
Из статьи узнал, что первые прототипы были написаны с использованием Flow, но команде приходилось поддерживать тайпинги для TS, которые были востребованы гораздо больше чем Flow-тайпинги. В итоге от Flow отказались в пользу TypeScript. Ещё в статье есть интересные технические детали работы Vue 3. В новой версии компилятор шаблонов был полностью переписан. В его основу лёг пайплайн на базе AST-трансформаций, который позволил компоновать оптимизации времени компиляции в виде плагинов трансформаций. Статический анализ шаблонов и новая архитектура позволили ускорить работу с Virtual DOM до 10 раз в бенчмарках рендеринга.
Очень хорошая статья. Советую почитать всем, даже тем, кто не работает с Vue.
#vue #internals #history #jsframeworks
https://increment.com/frontend/making-vue-3/
К 2018 году в кодовой базе Vue 2 накопился технический долг и прояснились архитектурные проблемы. К этому моменту все браузеры стали поддерживать
Proxy
, благодаря чему можно было сделать новую систему реактивности с исправлением проблем старой. Также вторая версия не очень хорошо дружила со статической типизацией. Все эти факторы послужили причиной полного переписывания фреймворка и перехода на новую мажорную версию.Из статьи узнал, что первые прототипы были написаны с использованием Flow, но команде приходилось поддерживать тайпинги для TS, которые были востребованы гораздо больше чем Flow-тайпинги. В итоге от Flow отказались в пользу TypeScript. Ещё в статье есть интересные технические детали работы Vue 3. В новой версии компилятор шаблонов был полностью переписан. В его основу лёг пайплайн на базе AST-трансформаций, который позволил компоновать оптимизации времени компиляции в виде плагинов трансформаций. Статический анализ шаблонов и новая архитектура позволили ускорить работу с Virtual DOM до 10 раз в бенчмарках рендеринга.
Очень хорошая статья. Советую почитать всем, даже тем, кто не работает с Vue.
#vue #internals #history #jsframeworks
https://increment.com/frontend/making-vue-3/
Increment
The process: Making Vue 3 – Increment: Frontend
Lessons from rewriting the next major version of Vue.js.
Forwarded from Вебня (Sergey Rubanov)
Я Серёжа Рубанов, приглашённый эксперт #TC39 (комитета, занимающегося разработкой ECMAScript) и основатель канала @juliarderity.
Сегодня начигается 76я встреча TC39, которая станет второй полностью удалённой. В этот раз встреча будет длиться 4 дня по 5 часов вместо 2 дней по 7 часов и заключительного 6-часового.
Повестка очень интересная! Я уже писал обо всех пропозалах, которые готовятся к продвижению на следующий стейдж. С этой публикацией можно ознакомиться вот тут.
Как всегда буду рассказывать всё самое интересное в этом канале. Если что-то невероятно интересное или важное то сразу же лайвом, а также буду публиковать результаты каждого дня ближе к ночи.
Время проведения встреч — 15:00 - 20:00 UTC, для большинства читателей это будет 18:00 - 23:00 (по Москве, Киеву, Минску).
Мне будет приятно если Вы поделитесь этой записью в своих каналах или в сообществах, участникам которых это может быть интересно. Ещё можно поддержать на Patreon.
Сегодня начигается 76я встреча TC39, которая станет второй полностью удалённой. В этот раз встреча будет длиться 4 дня по 5 часов вместо 2 дней по 7 часов и заключительного 6-часового.
Повестка очень интересная! Я уже писал обо всех пропозалах, которые готовятся к продвижению на следующий стейдж. С этой публикацией можно ознакомиться вот тут.
Как всегда буду рассказывать всё самое интересное в этом канале. Если что-то невероятно интересное или важное то сразу же лайвом, а также буду публиковать результаты каждого дня ближе к ночи.
Время проведения встреч — 15:00 - 20:00 UTC, для большинства читателей это будет 18:00 - 23:00 (по Москве, Киеву, Минску).
Мне будет приятно если Вы поделитесь этой записью в своих каналах или в сообществах, участникам которых это может быть интересно. Ещё можно поддержать на Patreon.
Прочитал пост Пауло Кальвано про эвристическое кеширование в браузерах — "HTTP Heuristic Caching (Missing Cache-Control and Expires Headers) Explained".
Для установки времени жизни контента в кэше браузера веб-серверы отправляют http-заголовки
Очень полезная статья. Рекомендую почитать.
#http #cache
https://paulcalvano.com/index.php/2018/03/14/http-heuristic-caching-missing-cache-control-and-expires-headers-explained/
Для установки времени жизни контента в кэше браузера веб-серверы отправляют http-заголовки
Cache-Control
и Expires
. Если установлены оба заголовка то приоритет получает Cache-Control
. Есть ошибочное мнение, что если не отдавать эти заголовки, то браузеры не будут кэшировать контент, но на самом деле браузеры всё равно будут его сохранять. Время жизни обычно составляет 10% от промежутка времени между датой последнего изменения файла Last-Modified
и текущей датой. Этот нюанс может принести много проблем, поэтому не рекомендуется удалять заголовки Cache-Conrol
и Expires
. Для отключения кэширования лучше всего использовать Cache-Control: no-store
или Cache-Control: max-age=0
.Очень полезная статья. Рекомендую почитать.
#http #cache
https://paulcalvano.com/index.php/2018/03/14/http-heuristic-caching-missing-cache-control-and-expires-headers-explained/
Сегодня вышел Firefox 77. Флориан Шольц и Гарольд Киршнер рассказали про все новинки релиза — "New in Firefox 77: DevTool improvements and web platform updates".
Продолжается раскатка WebRender — нового движка рендеринга, написанного на Rust и использующего GPU для отрисовки элементов страницы. Была улучшена служебная страница управления сертификатами —
Был добавлен новый метод из будущего стандарта ES2021 для поиска и замены подстроки
Есть улучшения и исправления ошибок в инструментах разработчика. Была ускорена работа отладчика и исправлены многие проблемы с source maps. Теперь во время отладки можно выбрать фрейм и сразу же продолжить отладку внутри него без необходимости прокликивания "step out". Был добавлен интерфейс для установки брекпойнтов на чтение свойства объекта или его запись.
#firefox #release
https://hacks.mozilla.org/2020/06/new-in-firefox-77-devtool-improvements-and-web-platform-updates/
Продолжается раскатка WebRender — нового движка рендеринга, написанного на Rust и использующего GPU для отрисовки элементов страницы. Была улучшена служебная страница управления сертификатами —
about:certificate
. Пользователям UK стали доступны рекомендации лучших статей при открытии нового таба.Был добавлен новый метод из будущего стандарта ES2021 для поиска и замены подстроки
String.prototype.replaceAll()
. У объектов IDBCursor
было добавлено новое поле request
для более удобной работы с врапперами. В SVG была добавлена поддержка атрибута transform-origin
. Он используется для задания точки, относительно которой применяются трансформации.Есть улучшения и исправления ошибок в инструментах разработчика. Была ускорена работа отладчика и исправлены многие проблемы с source maps. Теперь во время отладки можно выбрать фрейм и сразу же продолжить отладку внутри него без необходимости прокликивания "step out". Был добавлен интерфейс для установки брекпойнтов на чтение свойства объекта или его запись.
#firefox #release
https://hacks.mozilla.org/2020/06/new-in-firefox-77-devtool-improvements-and-web-platform-updates/
Mozilla Hacks – the Web developer blog
New in Firefox 77: DevTool improvements and web platform updates
Firefox 77 is now available with a variety of developer tool updates and new web platform features. With your feedback, we've removed performance bottlenecks, resulting in faster, leaner JavaScript debugging. ...
Эверт Пот написал статью про синтаксис ECMAScript 4 — "ECMAScript 4: The missing version".
ECMAScript 4 бы очень большим проектом по модернизации JavaScript. Работа над этой спецификацией шла 9 лет (1999-2008), но была полностью переосмыслена, переродившись в ES5 и ES2015.
В ECMAScript 4 хотели добавить стогую систему типов с поддержкой классов (в итоге они появились в ES2015) и интерфейсов. Было запланировано добавление новых типов: byte, int, unit, double, decimal. Практически ни один из этих типов не попал в последующие версии языка, но на данный момент ведётся работа над пропозалом для добавления в JS типа decimal. Планировали добавить пакеты (packages) для организации кода. Но вместо пакетов в ES2015 решили добавить модульную систему. Существовало расширение ES4 — E4X, которое позволяло работать с XML прямо в JavaScript. Можно сказать, что E4X стал прародителем современного JSX.
Интересная статья. Рекомендую почитать, если интересуетесь историей JavaScript.
#js #history #specification
https://evertpot.com/ecmascript-4-the-missing-version/
ECMAScript 4 бы очень большим проектом по модернизации JavaScript. Работа над этой спецификацией шла 9 лет (1999-2008), но была полностью переосмыслена, переродившись в ES5 и ES2015.
В ECMAScript 4 хотели добавить стогую систему типов с поддержкой классов (в итоге они появились в ES2015) и интерфейсов. Было запланировано добавление новых типов: byte, int, unit, double, decimal. Практически ни один из этих типов не попал в последующие версии языка, но на данный момент ведётся работа над пропозалом для добавления в JS типа decimal. Планировали добавить пакеты (packages) для организации кода. Но вместо пакетов в ES2015 решили добавить модульную систему. Существовало расширение ES4 — E4X, которое позволяло работать с XML прямо в JavaScript. Можно сказать, что E4X стал прародителем современного JSX.
Интересная статья. Рекомендую почитать, если интересуетесь историей JavaScript.
#js #history #specification
https://evertpot.com/ecmascript-4-the-missing-version/
Evertpot
ECMAScript 4: The missing version
Карлес Ньюнез столкнулся с проблемой при использовании нативной ленивой загрузки изображений, разобрался с ней и написал статью "Deep dive into lazy loading images".
Нативная ленивая загрузка изображений, которую можно активировать с помощью атрибута
В отличие от других подобных библиотек lazysizes дружит с SEO. Google при обходе страниц не использует прокрутку. Библиотека проверяет, может ли user agent использовать прокрутку, и если нет, то сразу загружает все изображения.
Рекомендую почитать статью. Карлес в статье добрался до самых исходников Chromium.
#performance #lazy
https://dev.to/carlesnunez/deep-dive-into-lazy-loading-images-211f
Нативная ленивая загрузка изображений, которую можно активировать с помощью атрибута
loading="lazy"
, появилась в Chrome 76 и Firefox 75. Браузеры начинают загружать изображения по-разному. В Chrome минимальное расстояние до изображения, при котором начинается его загрузка, составляет 3000 пикселей. Автору статьи это не подходило, и он для ленивой загрузки остановился на библиотеке lazysizes.В отличие от других подобных библиотек lazysizes дружит с SEO. Google при обходе страниц не использует прокрутку. Библиотека проверяет, может ли user agent использовать прокрутку, и если нет, то сразу загружает все изображения.
Рекомендую почитать статью. Карлес в статье добрался до самых исходников Chromium.
#performance #lazy
https://dev.to/carlesnunez/deep-dive-into-lazy-loading-images-211f
DEV Community
Deep dive into lazy loading images 🖼
The first question is... why? In the current web app world saving time and network when a...
Вчера в рассылке Web Platform News пришёл апдейт про поддержку новых псевдоклассов — "CSS :is() and :where() are coming to browsers".
Псевдоклассы
Пример использования
Поддержка новых псевдоклассов уже есть в Safari Tech Preview 106 и Firefox Beta 78. В Chrome их реализация пока находится за флагом. Для ускорения внедрения можно поставить звезду соответствующим тикетам в баг-трекере Chromium (ссылки можно найти в оригинальном посте).
#css
https://webplatform.news/issues/2020-06-04
Псевдоклассы
:is()
и :where
предназначены для написания CSS-правил без дублирования селекторов. Они отличаются между собой только специфичностью. Специфичность :is()
определяется наиболее специфичным селектором, переданным в аргументах. У :where()
специфичность всегда нулевая. :where()
полезен для создания дефолтных правил, которые могут перекрываться другими правилами без увеличения специфичности селекторов и без использования !important
.Пример использования
:is()
:/* До */
.embed .button:hover,
.attachment .button:hover {
opacity: 1;
}
/* После */
:is(.embed, .attachment) .button:hover {
opacity: 1;
}
Поддержка новых псевдоклассов уже есть в Safari Tech Preview 106 и Firefox Beta 78. В Chrome их реализация пока находится за флагом. Для ускорения внедрения можно поставить звезду соответствующим тикетам в баг-трекере Chromium (ссылки можно найти в оригинальном посте).
#css
https://webplatform.news/issues/2020-06-04
webplatform.news
Web Platform News
News content for web developers written by Šime Vidas
Эдди Османи и Дэмиан Рензулли рассказали о тех случаях, когда нужно отключать предварительную подгрузку и пререндер — "What (not) to Prefetch/Prerender".
Предварительную подгрузку и пререндер не следует использовать:
— для страниц аутентификации, чтобы предотвратить разлогины, непредсказуемый сброс пароля и т.п.;
— в ситуациях когда слишком большое количество запросов может вызвать DOS;
— для страниц оформления заказа и корзины, чтобы избежать случайного добавления товаров в корзину или запуска процесса оформления заказа;
— для файлов большого размера: mp4, zip, gif, pdf. Загрузка объёмных ресурсов без ведома пользователя — это плохая практика;
— для рекламы, так как такие запросы могут привести к ложному всплеску маркетинговых показателей;
— для всех протоколов кроме http/https (tel:, mailto:, javascript: и т.п.), в зависимости от браузера, предварительная загрузка такой ссылки может непредсказуемо стригерить действие.
Рекомендую почитать статью, если используете prefetch/prerender на своём сайте.
#performance
https://addyosmani.com/blog/what-not-to-prefetch-prerender/
Предварительную подгрузку и пререндер не следует использовать:
— для страниц аутентификации, чтобы предотвратить разлогины, непредсказуемый сброс пароля и т.п.;
— в ситуациях когда слишком большое количество запросов может вызвать DOS;
— для страниц оформления заказа и корзины, чтобы избежать случайного добавления товаров в корзину или запуска процесса оформления заказа;
— для файлов большого размера: mp4, zip, gif, pdf. Загрузка объёмных ресурсов без ведома пользователя — это плохая практика;
— для рекламы, так как такие запросы могут привести к ложному всплеску маркетинговых показателей;
— для всех протоколов кроме http/https (tel:, mailto:, javascript: и т.п.), в зависимости от браузера, предварительная загрузка такой ссылки может непредсказуемо стригерить действие.
Рекомендую почитать статью, если используете prefetch/prerender на своём сайте.
#performance
https://addyosmani.com/blog/what-not-to-prefetch-prerender/
Addyosmani
What (not) to Prefetch/Prerender