bootg.com »
United States »
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только » Telegram Web
Сурма написал статью про новое расширение ResizeObserver, с помощью которого можно получить размер элемента в физических пикселях — "Pixel-perfect rendering with devicePixelContentBox".
Иногда возникают ситуации, в которых размеры блока в пикселях могут получаться дробными. При рендеринге таких элементов CSS-пиксели "подгоняются" браузером к физическим пикселями с помощью pixel snapping. Проблема в том, что не было надёжного способа получения размера элемента в реальных физических пикселях. Из-за этого невозможно было реализовать pixel-perfect отрисовку в canvas — изображения могли получаться нечёткими, на них мог проявляться эффект Муара.
В Chrome 84 была добавлена новая опция ResizeObserver
#rendering #api
https://web.dev/device-pixel-content-box/
Иногда возникают ситуации, в которых размеры блока в пикселях могут получаться дробными. При рендеринге таких элементов CSS-пиксели "подгоняются" браузером к физическим пикселями с помощью pixel snapping. Проблема в том, что не было надёжного способа получения размера элемента в реальных физических пикселях. Из-за этого невозможно было реализовать pixel-perfect отрисовку в canvas — изображения могли получаться нечёткими, на них мог проявляться эффект Муара.
В Chrome 84 была добавлена новая опция ResizeObserver
['device-pixel-content-box']
. С её помощью можно получить размер любого элемента в физических пикселях и добиться pixel-perfect рендернига canvas.#rendering #api
https://web.dev/device-pixel-content-box/
web.dev
Pixel-perfect rendering with devicePixelContentBox | Articles | web.dev
Since Chrome 84, ResizeObserver supports a new box measurement called device-pixel-content-box, that measures the element's dimension in physical pixels. This is crucial for rendering pixel-perfect graphics, especially in the context of high-density screens.
Неделю назад Владимир Гриненко представил Yandex UI — новую библиотеку React-компонентов, которая используется в проектах Яндекса.
Основными требованиями при создании библиотеки были: функциональность, доступность, скорость рендеринга, возможность переопределения компонентов и расширения поведения снаружи, поддержка TypeScript и темизации. Yandex UI под капотом использует bem-react. Поддержка БЭМ-подхода позволяет гибко управлять тем, какой именно код попадает в бандл приложения. Есть поддержка Dependency Injection, с помощью которой можно подменять функциональность компонентов, например, при проведении A/B-тестов или добавлении специфичной логики. Библиотека включает 24 компонента, в будущем планируется её расширение.
Мне лично очень понравилась поддержка DI, но хотелось бы видеть полноценное API на хуках для работы с модификаторами.
#react #yandex #talk
https://www.youtube.com/watch?v=trwdc0JCelA
https://github.com/bem/yandex-ui
Основными требованиями при создании библиотеки были: функциональность, доступность, скорость рендеринга, возможность переопределения компонентов и расширения поведения снаружи, поддержка TypeScript и темизации. Yandex UI под капотом использует bem-react. Поддержка БЭМ-подхода позволяет гибко управлять тем, какой именно код попадает в бандл приложения. Есть поддержка Dependency Injection, с помощью которой можно подменять функциональность компонентов, например, при проведении A/B-тестов или добавлении специфичной логики. Библиотека включает 24 компонента, в будущем планируется её расширение.
Мне лично очень понравилась поддержка DI, но хотелось бы видеть полноценное API на хуках для работы с модификаторами.
#react #yandex #talk
https://www.youtube.com/watch?v=trwdc0JCelA
https://github.com/bem/yandex-ui
YouTube
@yandex ui
Презентация @yandex/ui — open source библиотеки React-компонентов от Яндекса. Компоненты используются внутри и отвечают самым строгим требованиям: темизируемость (дизайн отдельно, управление визуалом через дизайн-токены), скорость рендеринга, доступность…
Иногда новые спецификации добавляются в браузеры очень быстро, а иногда очень медленно. Почему так происходит? У разработчиков браузеров есть свои цели и приоритеты, которые не всегда совпадают с пожеланиями других компаний и сообщества. Компания Igalia помогает внешним компаниям в добавлении новых фич в браузеры. Например, её нанимал Bloomberg для добавления поддержки гридов в Chromium и WebKit.
Сегодня Igalia анонсировала Open Prioritizaiton. Это экспериментальный проект, который позволяет сообществу и небольшим компаниям профинансировать реализацию новых спецификаций. Сейчас в списке доступных задач есть добавление поддержки цветового пространства lab в Firefox,
В общем, если что-то из этого списка вам близко, можно поучаствовать в проекте. Я задонатил пару баксов в поддержку CSS Containment.
#announcement #browser
https://www.igalia.com/open-prioritization/
Сегодня Igalia анонсировала Open Prioritizaiton. Это экспериментальный проект, который позволяет сообществу и небольшим компаниям профинансировать реализацию новых спецификаций. Сейчас в списке доступных задач есть добавление поддержки цветового пространства lab в Firefox,
:focus-visible
в WebKit, атрибута inert
в WebKit, selector list arguments для :not()
в Chrome, CSS Containment в WebKit и добавление поддержки установки SVG-атрибута d
с помощью CSS в Firefox.В общем, если что-то из этого списка вам близко, можно поучаствовать в проекте. Я задонатил пару баксов в поддержку CSS Containment.
#announcement #browser
https://www.igalia.com/open-prioritization/
Igalia
Open Prioritization | Igalia - Open Source Consultancy and Development
Igalia is an open source consultancy specialised in the development of innovative projects and solutions. Our engineers have expertise in a wide range of technological areas, including browsers and client-side web technologies, graphics pipeline, compilers…
Сегодня вышел новый релиз Apollo Client одного из самых популярных клиентов для graphql — "Announcing the Release of Apollo Client 3.0".
Все популярные клиенты для graphql решают проблему кэширования. Они создают подмножество графа данных бэкенда на клиенте, позволяя разным graphql-запросам работать с единым набором закэшированных данных.
В третьей версии Apollo были добавлены реактивные переменные, которые при обновлении инициируют повторное чтение во всех местах их использования. Благодаря им можно упростить работу с локальным стейтом. Была добавлена поддержка Cache field policies, с помощью которых можно управлять процессом чтения и записи в кэш. Были добавлены хэлперы для упрощения работы с пагинацией.
#release #graphql #library
https://www.apollographql.com/blog/announcing-the-release-of-apollo-client-3-0/
Все популярные клиенты для graphql решают проблему кэширования. Они создают подмножество графа данных бэкенда на клиенте, позволяя разным graphql-запросам работать с единым набором закэшированных данных.
В третьей версии Apollo были добавлены реактивные переменные, которые при обновлении инициируют повторное чтение во всех местах их использования. Благодаря им можно упростить работу с локальным стейтом. Была добавлена поддержка Cache field policies, с помощью которых можно управлять процессом чтения и записи в кэш. Были добавлены хэлперы для упрощения работы с пагинацией.
#release #graphql #library
https://www.apollographql.com/blog/announcing-the-release-of-apollo-client-3-0/
Вчера вышла новая версия Chrome. Пит Лепаж рассказал про новые фичи релиза — "New in Chrome 84".
PWA приложения теперь могут регистрировать шорткаты (написать сообщение, перейти к непрочитанным сообщениям и т.п.), которые становятся доступны по правому клику на иконке приложения на десктопе или по длинному тапу на Android. Стал доступен Content Indexing API. Благодаря ему можно извлечь информацию о закэшированных элементах и отобразить её пользователю.
Стала доступна реализация Wake Lock API. Над этой спекой работали ребята из Яндекса и Microsoft. С помощью Wake Lock можно временно заблокировать отключение экрана устройства при неактивности пользователя (полезно для сайтов с кулинарными рецептами, галерей и т.п.) Обновлена реализация Web Animations API —
Много изменений в Chrome Dev Tools. Начата работа по вычищению консоли от предупреждений браузера — они потихоньку будут переезжать в таб "Issues". В попапе режима инспектирования теперь отображается информация о a11y. Обновлена панель производительности. Добавлено отображение метрик TBT (Total Blocking Time) и Cumulative Layout Shift (CLS), в событии "Layout Shift" можно проинспектировать произошедший сдвиг контента.
Возобновлён процесс выкатки SameSite для cookies, который был временно приостановлен из пандемии COVID-19. Удалена поддержка TLS 1.0 и TLS 1.1. Потенциально небезопасные запросы доступа к геолокации, отправки нотификаций и т.п. будут скрываться с помощью нового интерфейса.
#release #chrome
https://developers.google.com/web/updates/2020/07/nic84
PWA приложения теперь могут регистрировать шорткаты (написать сообщение, перейти к непрочитанным сообщениям и т.п.), которые становятся доступны по правому клику на иконке приложения на десктопе или по длинному тапу на Android. Стал доступен Content Indexing API. Благодаря ему можно извлечь информацию о закэшированных элементах и отобразить её пользователю.
Стала доступна реализация Wake Lock API. Над этой спекой работали ребята из Яндекса и Microsoft. С помощью Wake Lock можно временно заблокировать отключение экрана устройства при неактивности пользователя (полезно для сайтов с кулинарными рецептами, галерей и т.п.) Обновлена реализация Web Animations API —
animation.ready
и animation.finished
возвращают промисы, добавлены опции add
и accumulate
, улучшена производительность API. В рамках Origin Trials теперь доступен Idle Detection API для отображения статуса активности пользователя (будет полезно для чатов), а также стал доступен Web Assembly SIMD.Много изменений в Chrome Dev Tools. Начата работа по вычищению консоли от предупреждений браузера — они потихоньку будут переезжать в таб "Issues". В попапе режима инспектирования теперь отображается информация о a11y. Обновлена панель производительности. Добавлено отображение метрик TBT (Total Blocking Time) и Cumulative Layout Shift (CLS), в событии "Layout Shift" можно проинспектировать произошедший сдвиг контента.
Возобновлён процесс выкатки SameSite для cookies, который был временно приостановлен из пандемии COVID-19. Удалена поддержка TLS 1.0 и TLS 1.1. Потенциально небезопасные запросы доступа к геолокации, отправки нотификаций и т.п. будут скрываться с помощью нового интерфейса.
#release #chrome
https://developers.google.com/web/updates/2020/07/nic84
Chrome for Developers
New in Chrome 84 | Blog | Chrome for Developers
Chrome 84 is rolling out now! Users can start common tasks within your app with App Icon Shortcuts. The Web Animations API adds support for a slew of previously unsupported features. Wake Lock, and the Content Indexing API graduate from origin trial. There…
Неделя релизов продолжается. Вчера компания Adobe представила свою библиотеку React-компонентов — "Introducing React Spectrum".
В React Spectrum каждый компонент поделён на две части, которые живут в отдельных библиотеках. В библиотеке React Aria находятся хуки для работы с a11y, i18n и поведением компонентов. В библиотеке React Stately — хуки для работы со стейтом компонентов. Такое разделение удобно для переиспользования кода между разными платформами. Эти библиотеки комбинируются под зонтиком библиотеки React Spectrum, которая имплементирует дизайн-систему от Adobe. Компонентов в библиотеке довольно много. Есть Calendar, Table, Tree и другие стандартные компоненты.
Интересное решение. Если нужен компонент с немного другим поведением, можно не форкать библиотеку, а просто переопределить необходимый хук.
#react #ui #release
https://react-spectrum.adobe.com/blog/introducing-react-spectrum.html
В React Spectrum каждый компонент поделён на две части, которые живут в отдельных библиотеках. В библиотеке React Aria находятся хуки для работы с a11y, i18n и поведением компонентов. В библиотеке React Stately — хуки для работы со стейтом компонентов. Такое разделение удобно для переиспользования кода между разными платформами. Эти библиотеки комбинируются под зонтиком библиотеки React Spectrum, которая имплементирует дизайн-систему от Adobe. Компонентов в библиотеке довольно много. Есть Calendar, Table, Tree и другие стандартные компоненты.
Интересное решение. Если нужен компонент с немного другим поведением, можно не форкать библиотеку, а просто переопределить необходимый хук.
#react #ui #release
https://react-spectrum.adobe.com/blog/introducing-react-spectrum.html
Adobe
Introducing React Spectrum
Today, we’re excited to announce React Spectrum, a collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. Check it out on Github!
Станислав Черенков написал статью про использование роутинга в современных SPA-приложениях — "Your SPA doesn’t need a router".
Станислав пишет про то, что использование готовых библиотек роутинга это не самое оптимальное решение, так как разработчики роутеров не могут предусмотреть всех возможных требований. Большинство роутеров не могут работать вне уровня представления, например, react-router использует jsx. В серьёзных приложениях с таким подходом могут проблемы, если при переходе на новый роут нужно выполнить какие-то проверки, загрузить данные или дополнительные скрипты.
В статье предлагается альтернативный подход с отделением представления от логики роутинга и использованием только самых необходимых библиотек, например, для сериализации url страницы в объект.
Полезная статья. В первую очередь рекомендую почитать всем, кто разрабатывает сложные SPA.
#musings #architecture
https://forweb.dev/en/blog/drop-the-router/
Станислав пишет про то, что использование готовых библиотек роутинга это не самое оптимальное решение, так как разработчики роутеров не могут предусмотреть всех возможных требований. Большинство роутеров не могут работать вне уровня представления, например, react-router использует jsx. В серьёзных приложениях с таким подходом могут проблемы, если при переходе на новый роут нужно выполнить какие-то проверки, загрузить данные или дополнительные скрипты.
В статье предлагается альтернативный подход с отделением представления от логики роутинга и использованием только самых необходимых библиотек, например, для сериализации url страницы в объект.
Полезная статья. В первую очередь рекомендую почитать всем, кто разрабатывает сложные SPA.
#musings #architecture
https://forweb.dev/en/blog/drop-the-router/
For Web
Your SPA doesn’t need a router
So you are building a client-side web app for that next big project and wondering: “Which router should I use?”. Here is the thing: you don’t need any at all.
Хуссеейн Джирде из команды Chromium недавно представил инструмент для анализа метрик производительности js-фреймворков — "Perf Track".
Perf Track — это дашборд, на котором агрегируются метрики по популярным фреймворкам: общий размер js, использование сжатия, First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift и т.п. Данные для анализа берутся из HTTP Archive и Chrome User Experience Report. Из интересного: статистика по First Input Delay хуже всего у React и Ember, статистика по First Contentful Paint — у Angular и Polymer. Лучше всего показатели у Svelte, но размер выборки Svelte-проектов на порядки меньше выборки других фреймворков, поэтому могут быть сильные перекосы.
Надо понимать, что Perf Track показывает среднюю температуру по больнице. Тем не менее он может быть полезен для анализа общего положения дел.
#performance #tool #jsframeworks
https://perf-track.web.app/
Perf Track — это дашборд, на котором агрегируются метрики по популярным фреймворкам: общий размер js, использование сжатия, First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift и т.п. Данные для анализа берутся из HTTP Archive и Chrome User Experience Report. Из интересного: статистика по First Input Delay хуже всего у React и Ember, статистика по First Contentful Paint — у Angular и Polymer. Лучше всего показатели у Svelte, но размер выборки Svelte-проектов на порядки меньше выборки других фреймворков, поэтому могут быть сильные перекосы.
Надо понимать, что Perf Track показывает среднюю температуру по больнице. Тем не менее он может быть полезен для анализа общего положения дел.
#performance #tool #jsframeworks
https://perf-track.web.app/
Perf Track
Tracking framework performance at scale
Дэниэл Александерсен поделился результатами сравнения WebP и AVIF в статье "Comparing AVIF vs WebP file sizes at the same DSSIM".
Дэниэл захотел улучшить качество изображений в своём блоге, сохранив их небольшой размер. Обычно все изображения кодировались с одними и тем же качеством. Такой подход иногда приводил к артефактам на одних изображениях и к избыточному размеру файлов на других, поэтому был выбран другой подход. Каждое изображение кодировалось несколько раз с индивидуальными настройками качества, затем бинарным поиском выбирались те изображения, которые были ближе всего к целевому показателю индекса DSSIM (аппроксимирует работу человеческого зрения и говорит о том, насколько изображения отличаются друг от друга).
При сравнении с оригинальными JPEG-изображениями медианное значение сокращения размера файлов при сжатии с помощью WebP составило 31.5%, у AVIF — 50.3%, на 85-ом перцинтиле 20% у WebP и 39.6% у AVIF. У WebP 2.7% изображений оказались больше оригинального изображения, у AVIF все изображения были меньше.
Рекомендую почитать статью всем, кто интересуется темой сжатия изображений.
#graphics #optimization #benchmark
https://www.ctrl.blog/entry/webp-avif-comparison.html
Дэниэл захотел улучшить качество изображений в своём блоге, сохранив их небольшой размер. Обычно все изображения кодировались с одними и тем же качеством. Такой подход иногда приводил к артефактам на одних изображениях и к избыточному размеру файлов на других, поэтому был выбран другой подход. Каждое изображение кодировалось несколько раз с индивидуальными настройками качества, затем бинарным поиском выбирались те изображения, которые были ближе всего к целевому показателю индекса DSSIM (аппроксимирует работу человеческого зрения и говорит о том, насколько изображения отличаются друг от друга).
При сравнении с оригинальными JPEG-изображениями медианное значение сокращения размера файлов при сжатии с помощью WebP составило 31.5%, у AVIF — 50.3%, на 85-ом перцинтиле 20% у WebP и 39.6% у AVIF. У WebP 2.7% изображений оказались больше оригинального изображения, у AVIF все изображения были меньше.
Рекомендую почитать статью всем, кто интересуется темой сжатия изображений.
#graphics #optimization #benchmark
https://www.ctrl.blog/entry/webp-avif-comparison.html
Ctrl.blog
Comparing AVIF vs WebP file sizes at the same DSSIM
I got impressive results when comparing AVIF and WebP images at the same visual quality (using DSSIM.) AVIF’s 85th percentile was the same as WebP’s 15th!
Мэттью Виплайз написал статью про генерацию UUID на клиенте — "Generating UUIDs at scale on the Web".
Меттью занимается разработкой рекламной сети. До перехода к генерации UUID в браузере уникальный идентификатор генерировался на бэкенде. С таким подходом нельзя было отправлять пользовательские события до получения идентификатора с сервера.
Для генерации UUID рассматривались два варианта: Web Crypto API и
Очень прикольная статья. Рекомендую почитать всем, кому интересно узнать больше подробностей.
#cryptography #internals
https://medium.com/teads-engineering/generating-uuids-at-scale-on-the-web-2877f529d2a2
Меттью занимается разработкой рекламной сети. До перехода к генерации UUID в браузере уникальный идентификатор генерировался на бэкенде. С таким подходом нельзя было отправлять пользовательские события до получения идентификатора с сервера.
Для генерации UUID рассматривались два варианта: Web Crypto API и
URL.createObjectURL()
. Остановились на последнем, так как для надёжного использования Web Crypto API требовалась инициализация кода в веб-воркере, из-за этого просаживалась скорость. Перед тем как внедрить новое решение был проведён A/B-тест, чтобы удостовериться, что нет коллизий при генерации UUID. Данные показали примерно пять коллизий на один миллион запросов. Это было гораздо больше чем в теории. Исследования показали, что основная проблема была в гугл-боте, меньшая часть проблем была связана с браузером в PS Vita и .Net-конверторами html в pdf.Очень прикольная статья. Рекомендую почитать всем, кому интересно узнать больше подробностей.
#cryptography #internals
https://medium.com/teads-engineering/generating-uuids-at-scale-on-the-web-2877f529d2a2
Medium
Generating UUIDs at scale on the Web
Can you trust every browser to generate globally unique identifiers at scale? At Teads, we have tried, and the answer is yes…
Сегодня Defront Plus отмечает свой первый месяц. В нём уже было опубликовано двадцать новых постов (по пять дополнительных постов каждую неделю). Хочется поделиться тем, что там было опубликовано за последние две недели:
— Искусственный интеллект и будущее программирования
— Использование Bazel в монорепозитории
— Исследование блокировок Google Analytics
— Предзагрузка отзывчивых изображений
— Семантичное использование кнопок и ссылок
— Исследование дублирующихся запросов за html
— Критика книги "Чистый код"
— Использование Rust вместо TypeScript
— Почему браузеры не специфицируют UI, отвечающий за безопасность
— Исследование использования Cache-Control на разных сайтах
Поддержите канал на Patreon и получите доступ к Defront Plus!
https://www.patreon.com/myshov
— Искусственный интеллект и будущее программирования
— Использование Bazel в монорепозитории
— Исследование блокировок Google Analytics
— Предзагрузка отзывчивых изображений
— Семантичное использование кнопок и ссылок
— Исследование дублирующихся запросов за html
— Критика книги "Чистый код"
— Использование Rust вместо TypeScript
— Почему браузеры не специфицируют UI, отвечающий за безопасность
— Исследование использования Cache-Control на разных сайтах
Поддержите канал на Patreon и получите доступ к Defront Plus!
https://www.patreon.com/myshov
Пару дней назад вышел Chrome 84, в нём был обновлён Lighthouse до шестой версии. Про все новинки этой версии рассказал Коннор Кларк в статье "What's New in Lighthouse 6.0".
Самые важные изменения касаются анализа производительности. Были добавлены новые метрики из набора Web Vitals: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и Total Blocking Time (TBT) (самый близкий аналог First Input Delay). Обновление метрик повлияло на формулу оценки производительности страницы: в неё были добавлены метрики Web Vitals и удалены First Meaningful Paint, First CPU Idle и Max Potential FID. В статье подробно объясняются причины удаления старых метрик.
Были добавлены новые проверки в категории a11y (aria-hidden-body, aria-hidden-focus, aria-input-field-name и т.п.), по умолчанию включена визуализация неиспользуемого JavaScript, добавлена проверка элемента
#performance #release
https://web.dev/lighthouse-whats-new-6.0/
Самые важные изменения касаются анализа производительности. Были добавлены новые метрики из набора Web Vitals: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и Total Blocking Time (TBT) (самый близкий аналог First Input Delay). Обновление метрик повлияло на формулу оценки производительности страницы: в неё были добавлены метрики Web Vitals и удалены First Meaningful Paint, First CPU Idle и Max Potential FID. В статье подробно объясняются причины удаления старых метрик.
Были добавлены новые проверки в категории a11y (aria-hidden-body, aria-hidden-focus, aria-input-field-name и т.п.), по умолчанию включена визуализация неиспользуемого JavaScript, добавлена проверка элемента
<meta charset="...">
. В Node CLI и Lighthouse CI была добавлена поддержка бюджета для метрик производительности.#performance #release
https://web.dev/lighthouse-whats-new-6.0/
Лия Веру написала небольшую статью про то как подружить между собой ESM и библиотеки, использующие другие подходы, — "Import non-ESM libraries in ES Modules, with client-side vanilla JS".
Все популярные браузеры поддерживают нативную модульную систему (ESM). Проблема в том, что есть очень много CommonJS-библиотек, которые были написаны давно и которые просто так нельзя взять и подключить к себе с помощью
У такого подхода много ограничений, но он может пригодиться, если надо по-быстрому поэкспериментировать с библиотеками, которые распространяются как CommonJS/AMD-модули (для AMD надо стабить define).
#esm #trick #js
https://lea.verou.me/2020/07/import-non-esm-libraries-in-es-modules-with-client-side-vanilla-js/
Все популярные браузеры поддерживают нативную модульную систему (ESM). Проблема в том, что есть очень много CommonJS-библиотек, которые были написаны давно и которые просто так нельзя взять и подключить к себе с помощью
import
. Для обхода этой проблемы Лия предлагает использовать небольшой трюк, суть которого заключается в использовании динамического импорта с предварительно застабленной переменной module
:async function require(path) {
let _module = window.module;
window.module = {};
await import(path);
let exports = module.exports;
window.module = _module;
return exports;
}
У такого подхода много ограничений, но он может пригодиться, если надо по-быстрому поэкспериментировать с библиотеками, которые распространяются как CommonJS/AMD-модули (для AMD надо стабить define).
#esm #trick #js
https://lea.verou.me/2020/07/import-non-esm-libraries-in-es-modules-with-client-side-vanilla-js/
Орта Терокс в блоге Svelte написал статью о поддержке TypeScript — "Svelte ❤️ TypeScript".
TypeScript в Svelte поддерживался и раньше с помощью набора независимых инструментов, работа с которыми была неудобна для рядовых разработчиков. Эти инструменты были перемещены в GitHub-организацию Svelte и в целом была улучшена эргономика работы с TS в Svelte.
Поддержку TS можно включить с помощью установки необходимых пакетов и добавления атрибута
Очень хорошая новость. Полноценную поддержку TypeScript в Svelte ждали многие разработчики.
#svelte #typescript #jsframeworks
https://svelte.dev/blog/svelte-and-typescript
TypeScript в Svelte поддерживался и раньше с помощью набора независимых инструментов, работа с которыми была неудобна для рядовых разработчиков. Эти инструменты были перемещены в GitHub-организацию Svelte и в целом была улучшена эргономика работы с TS в Svelte.
Поддержку TS можно включить с помощью установки необходимых пакетов и добавления атрибута
lang="ts"
в script
. Ручную проверку типов можно запустить с помощью svelte-check
. В редакторах поддерживается автодополнение кода и проверка типов в том числе внутри разметки.Очень хорошая новость. Полноценную поддержку TypeScript в Svelte ждали многие разработчики.
#svelte #typescript #jsframeworks
https://svelte.dev/blog/svelte-and-typescript
svelte.dev
Svelte <3 TypeScript
Typernetically enhanced web apps
Гиллель Уэйн поделился своими мыслями о том, как можно улучшить подсветку синтаксиса — "Syntax highlighting is a waste of an information channel".
В статье говорится про то, что подсветка синтаксиса — это растрата информационного канала. Вместо обычной подсветки синтаксиса было бы гораздо полезнее включать контекстную семантическую подсветку. Например, для подсветки идентификаторов, импортированные из внешних модулей, для подсветки аргументов функций одним цветом, а локальных переменных другим, для идентификации функций, которые кидают исключения, но не обрабатывают их, для подсветки функций, возвращающих значения опциональных типов, и т.п.
В теории всё это выглядит очень заманчиво, но имплементация упирается в суровую действительность. Такая семантичеcкая подсветка должна реализовываться для каждого языка в отдельности, при этом многие фишки возможно реализовать только тогда, когда доступно AST.
Гиллель пишет, что у нас рано или поздно появятся подобные инструменты, так как преимущества семантической подсветки слишком хороши, чтобы их игнорировать.
#programming #musings
https://buttondown.email/hillelwayne/archive/syntax-highlighting-is-a-waste-of-an-information/
В статье говорится про то, что подсветка синтаксиса — это растрата информационного канала. Вместо обычной подсветки синтаксиса было бы гораздо полезнее включать контекстную семантическую подсветку. Например, для подсветки идентификаторов, импортированные из внешних модулей, для подсветки аргументов функций одним цветом, а локальных переменных другим, для идентификации функций, которые кидают исключения, но не обрабатывают их, для подсветки функций, возвращающих значения опциональных типов, и т.п.
В теории всё это выглядит очень заманчиво, но имплементация упирается в суровую действительность. Такая семантичеcкая подсветка должна реализовываться для каждого языка в отдельности, при этом многие фишки возможно реализовать только тогда, когда доступно AST.
Гиллель пишет, что у нас рано или поздно появятся подобные инструменты, так как преимущества семантической подсветки слишком хороши, чтобы их игнорировать.
#programming #musings
https://buttondown.email/hillelwayne/archive/syntax-highlighting-is-a-waste-of-an-information/
Генрик Уорн написал статью про хорошее логирование — "Good Logging".
Логирование — это очень хороший инструмент для поиска источников ошибок и мониторинга состояния системы. Но чтобы сделать хорошее логирование, нужно вложить немного усилий.
Логирование не должно быть слишком подробным или скупым. Хорошие сообщения в логах должны говорить не про абстрактные серверы и файлы, а про конкретные ip-адреса и имена файлов. Сообщения должны быть таким, чтобы по ним можно было удобно grep'ать. При логировании сложной логики все шаги можно поместить в список, и вывести его в лог как одну большую строку. В хороших сообщениях не должно быть специальных символов, чтобы подчеркнуть важность, лучше для этого использовать разные уровни логирования (DEBUR, ERROR, INFO etc.) Очень трудно с первого раза придумать хорошие сообщения, поэтому их нужно постепенно улучшать. Также нужно не забывать добавлять новые сообщения, если при отладке ошибки в логах нет всей нужной информации.
Очень толковая статья. Рекомендую почитать всем.
#debug #programming
https://henrikwarne.com/2020/07/23/good-logging/
Логирование — это очень хороший инструмент для поиска источников ошибок и мониторинга состояния системы. Но чтобы сделать хорошее логирование, нужно вложить немного усилий.
Логирование не должно быть слишком подробным или скупым. Хорошие сообщения в логах должны говорить не про абстрактные серверы и файлы, а про конкретные ip-адреса и имена файлов. Сообщения должны быть таким, чтобы по ним можно было удобно grep'ать. При логировании сложной логики все шаги можно поместить в список, и вывести его в лог как одну большую строку. В хороших сообщениях не должно быть специальных символов, чтобы подчеркнуть важность, лучше для этого использовать разные уровни логирования (DEBUR, ERROR, INFO etc.) Очень трудно с первого раза придумать хорошие сообщения, поэтому их нужно постепенно улучшать. Также нужно не забывать добавлять новые сообщения, если при отладке ошибки в логах нет всей нужной информации.
Очень толковая статья. Рекомендую почитать всем.
#debug #programming
https://henrikwarne.com/2020/07/23/good-logging/
Henrik Warne's blog
Good Logging
To check if a program is doing what it should, you can inspect the output from a given input. But as the system grows, you also need logging to help you understand what is happening. Good log messa…
Иан Бин рассказал, почему для своего блога он выбрал Eleventy, а не Gatsby — "Your blog doesn’t need a JavaScript framework".
Eleventy и Gatsby это наиболее популярные движки для статически генерируемых сайтов в JS-сообществе. Gatsby построен на базе React — это его основное преимущество (React знают многие разработчики) и недостаток (дополнительно добавляет несколько сотен килобайт JS). Иан задался вопросом: зачем для статически гененрируемого сайта в принципе нужен JS? В Gatsby можно отключить загрузку JS с помощью специального плагина, но такой JS-first подход несёт слишком много накладных расходов, поэтому Иан остановился на Eleventy. Eleventy быстрый движок для статически генерируемых сайтов. Он использует markdown для основного контента и традиционные шаблонизаторы (nunjucks, liquid) для всего остального.
Иан рекомендует при выборе инструментов пользоваться правилом наименьшей силы: если вся работа может быть сделана только с помощью HTML и CSS, то JS использовать не нужно.
P.S. Eleventy сейчас используется в Google (в блогах v8 и web.dev), CERN, Khan Academy, Netlify. Сайт Defront тоже работает на Eleventy.
#performance #web
https://iainbean.com/posts/2020/your-blog-doesnt-need-a-javascript-framework/
Eleventy и Gatsby это наиболее популярные движки для статически генерируемых сайтов в JS-сообществе. Gatsby построен на базе React — это его основное преимущество (React знают многие разработчики) и недостаток (дополнительно добавляет несколько сотен килобайт JS). Иан задался вопросом: зачем для статически гененрируемого сайта в принципе нужен JS? В Gatsby можно отключить загрузку JS с помощью специального плагина, но такой JS-first подход несёт слишком много накладных расходов, поэтому Иан остановился на Eleventy. Eleventy быстрый движок для статически генерируемых сайтов. Он использует markdown для основного контента и традиционные шаблонизаторы (nunjucks, liquid) для всего остального.
Иан рекомендует при выборе инструментов пользоваться правилом наименьшей силы: если вся работа может быть сделана только с помощью HTML и CSS, то JS использовать не нужно.
P.S. Eleventy сейчас используется в Google (в блогах v8 и web.dev), CERN, Khan Academy, Netlify. Сайт Defront тоже работает на Eleventy.
#performance #web
https://iainbean.com/posts/2020/your-blog-doesnt-need-a-javascript-framework/
Iain Bean
Your blog doesn’t need a JavaScript framework /// Iain Bean
Why I choose Eleventy over Gatsby for my new website
Пару дней назад в канале @juliarderity увидел сообщение, что на последней встрече TC39 на stage 2 продвинулся метод
Пропозал добавляет новый метод для индексируемых типов (строки, массивы, типизированные массивы). С помощью него можно получить элемент по переданному индексу, но в отличие от
Выбор названия метода (item) связан с наличием этого метода в DOM-коллекциях NodeList и HTMLCollection. Это было важно учесть, так как на данный момент идёт работа над тем, чтобы сделать из этих коллекций полноценные массивы.
Пропозал находится на второй стадии добавления в стандарт. Его поддержки в браузерах пока нет, но если очень хочется с ним поработать, то можно подключить полифилл.
#js #proposal
https://thenewtoys.dev/blog/2020/07/25/the-item-method-for-indexables/
https://github.com/tc39-transfer/proposal-item-method
item
. Ти-Джей Краудер написал статью про это новое предложение — "The item Method for Indexables".Пропозал добавляет новый метод для индексируемых типов (строки, массивы, типизированные массивы). С помощью него можно получить элемент по переданному индексу, но в отличие от
[]
в item
можно передавать отрицательные индексы для получения элементов с конца (как в Python). Использование нового метода помогает сократить работу, которая требуется для доступа к последним элементам массива, возвращаемого из функции:// эти две строки кода:
const result = theFunction();
const last = result[result.length - 1];
// можно заменить одной:
const last = theFunction().item(-1);
Выбор названия метода (item) связан с наличием этого метода в DOM-коллекциях NodeList и HTMLCollection. Это было важно учесть, так как на данный момент идёт работа над тем, чтобы сделать из этих коллекций полноценные массивы.
Пропозал находится на второй стадии добавления в стандарт. Его поддержки в браузерах пока нет, но если очень хочется с ним поработать, то можно подключить полифилл.
#js #proposal
https://thenewtoys.dev/blog/2020/07/25/the-item-method-for-indexables/
https://github.com/tc39-transfer/proposal-item-method
GitHub
GitHub - tc39/proposal-relative-indexing-method: A TC39 proposal to add an .at() method to all the basic indexable classes (Array…
A TC39 proposal to add an .at() method to all the basic indexable classes (Array, String, TypedArray) - GitHub - tc39/proposal-relative-indexing-method: A TC39 proposal to add an .at() method to al...
Недавно Google обновил планы по переходу на mobile-first поиск — "Prepare for mobile-first indexing (with a little extra time)".
Количество пользователей интернета, использующих смартфоны, давно превысило количество пользователей десктопных платформ. Именно поэтому Google продвигает разные инициативы, улучшающие опыт работы с мобильным вебом. В том числе было запланировано включение mobile-first индексирования с сентября 2020 года, но из-за пандемии дата была перенесена на конец марта 2021 года.
Mobile-first индексирование означает, что поисковик будет использовать мобильные версии страниц для ранжирования. В статье есть рекомендации, что проверить и исправить, чтобы сайт не упал в результатах поисковой выдачи.
#seo #google #announcement
https://webmasters.googleblog.com/2020/07/prepare-for-mobile-first-indexing-with.html
Количество пользователей интернета, использующих смартфоны, давно превысило количество пользователей десктопных платформ. Именно поэтому Google продвигает разные инициативы, улучшающие опыт работы с мобильным вебом. В том числе было запланировано включение mobile-first индексирования с сентября 2020 года, но из-за пандемии дата была перенесена на конец марта 2021 года.
Mobile-first индексирование означает, что поисковик будет использовать мобильные версии страниц для ранжирования. В статье есть рекомендации, что проверить и исправить, чтобы сайт не упал в результатах поисковой выдачи.
#seo #google #announcement
https://webmasters.googleblog.com/2020/07/prepare-for-mobile-first-indexing-with.html
Official Google Webmaster Central Blog
Prepare for mobile-first indexing (with a little extra time)
Official news on crawling and indexing sites for the Google index
Вчера вышел Firefox 79. Флориан Шольц и Гарольд Киршнер рассказали про все новинки релиза — "Firefox 79: The safe return of shared memory, new tooling, and platform updates".
В конце 2018 года из-за атаки Spectre во всех браузерах были отключены разделяемая память (SharedArrayBuffer) и таймеры с высоким разрешением. В Firefox 79 поддержка этих фич вернулась на место, но для их использования страница должна быть изолирована с помощью HTTP-заголовков
Добавлена поддержка
Для предотвращения модификации
Очень много изменений в инструментах разработчика. Стектрейсы теперь показывают полноценный стек для асинхронного кода. Флоу перехода от js-ошибок из консоли в дебаггер стал более продуман: после перехода проблемный код будет подсвечен, а при наведении будет выведена подсказка с типом ошибки. Улучшена поддержка соурс мапов в DOM-инспекторе для SCSS и CSS-in-JS. В отладчике появилась новая фича “Restart Frame”, которая позволяет "путешествовать во времени" в рамках стека вызовов. Также отладчик снова получил порцию обновлений, улучшающих производительность.
#release #firefox
https://hacks.mozilla.org/2020/07/firefox-79/
В конце 2018 года из-за атаки Spectre во всех браузерах были отключены разделяемая память (SharedArrayBuffer) и таймеры с высоким разрешением. В Firefox 79 поддержка этих фич вернулась на место, но для их использования страница должна быть изолирована с помощью HTTP-заголовков
Cross-Origin-Opener-Policy: same-origin
и Cross-Origin-Embedder-Policy: require-corp
. Возврат поддержки SharedArrayBuffer
также позволил реализовать WebAssembly Threads.Добавлена поддержка
Promise.any()
. При передаче коллекции промисов в any()
метод возвращает промис, который разрезолвится в том случае, когда разрезолвится один из переданных промисов или вернёт AggreateError
, если все промисы будут реджекнуты. Добавлена поддержка логических операторов присваивания, WeakRef
и FinalizationRegistry
.Для предотвращения модификации
window.opener
Firefox теперь автоматически устанавливает rel=noopener
для всех ссылок с target=_blank
.Очень много изменений в инструментах разработчика. Стектрейсы теперь показывают полноценный стек для асинхронного кода. Флоу перехода от js-ошибок из консоли в дебаггер стал более продуман: после перехода проблемный код будет подсвечен, а при наведении будет выведена подсказка с типом ошибки. Улучшена поддержка соурс мапов в DOM-инспекторе для SCSS и CSS-in-JS. В отладчике появилась новая фича “Restart Frame”, которая позволяет "путешествовать во времени" в рамках стека вызовов. Также отладчик снова получил порцию обновлений, улучшающих производительность.
#release #firefox
https://hacks.mozilla.org/2020/07/firefox-79/
Mozilla Hacks – the Web developer blog
Firefox 79: The safe return of shared memory, new tooling, and platform updates
Firefox 79 offers a new Promise method, more secure target=_blank links, logical assignment operators, tooling improvements for better JavaScript debugging, and many other updates of interest to web developers. In ...