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

2021-02-05 01:37:54 Максим Садым из Google написал небольшой пост о том, как было ускорено открытие DevTools в Chrome 85 — "Improving DevTools startup time".

При открытии DevTools, браузеру нужно выполнить код с помощью V8. Этот код сериализовывался в строку, которая на стороне V8 выполнялась с помощью eval. Оказалось, что от сериализации можно было избавиться. Для этого был добавлен новый метод в API mojo (механизм, который используется Chromium для передачи команд из DevTools в V8). Благодаря этой оптимизации время старта DevTools сократилось на 13% (с 11,2 до 10 секунд).

Рекомендую заглянуть в статью, если интересуетесь темой разработки браузеров.

#chromium #internals

https://developers.google.com/web/updates/2021/02/faster-devtools-startup Открыть/Комментировать

2021-02-04 02:26:29 Apple вместе с W3C Privacy Community Group представили приватный механизм для отслеживания кликов, который в первую очередь предназначен для измерения эффективности рекламы — "Introducing Private Click Measurement, PCM".

Для отслеживания эффективности рекламы сейчас используют куки. С точки зрения приватности, это не очень хорошее решение, так как пользователи, кликнувшие по рекламе, могут быть затреканы. Apple вместе с W3C Privacy Community Group разрабатывают другой подход с отложенным отправлением данных о кликах.

Принцип работы PCM. При клике по ссылке со специальными атрибутами во внутреннем хранилище браузера на семь дней сохраняется информация о клике. Сайт, на котором был произведен переход, для регистрации клика должен сделать GET-запрос к рекламной платформе по URL https://social.example/.well-known/private-click-measurement/trigger-attribution// (ведётся работа над тем, чтобы можно было отказаться от GET-запросов). Браузер при обращении к такому URL сравнивает данные из URL с сохранёнными данными клика в хранилище и, если они совпадают, через 24-48 часов отправляет анонимный отчет о клике рекламной платформе. Также есть возможность отслеживать переходы по рекламным баннерам из нативных приложений.

Экспериментальная поддержка PCM уже есть в бете iOS и iPadOS 14.5.

#apple #proposal #privacy

https://webkit.org/blog/11529/introducing-private-click-measurement-pcm/

3.1K viewsAlexander Myshov, edited  23:26

Открыть/Комментировать

2021-02-03 02:14:06 Мод Нальпас во второй статье рассказала о том, как настроить HTTPS для локальной разработки — "How to use HTTPS for local development".

Для настройки локального HTTPS удобнее всего использовать утилиту mkcert. Mkcert — это zero-config утилита для настройки локального HTTPS. С помощью команды mkcert -install создаётся локальный certificate authority (CA), с помощью команды mkcert создаётся сертификат, который нужно использовать при настройке локального HTTP-сервера.

Ещё можно использовать самоподписанный сертификат или сертификат подписанный внешним CA. Но эти варианты не очень гибки и удобны по сравнению с mkcert.

#http #tool

https://web.dev/how-to-use-local-https/

4.9K viewsAlexander Myshov, edited  23:14

Открыть/Комментировать

2021-02-02 12:47:44 За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:

— Igalia о процессе имплементации focus-visible в WebKit
— Как написать ясный текст
— Как задеприкейтить сигнатуру функции с помощью TypeScript
— Является ли разработка ПО инженерной дисциплиной
— Причины плохой производительности сайтов, использующих Ember
— Автоматическая генерация атомного CSS
— Проблемы рендеринга изображений во flex-контейнерах в WebKit
— Альтернативный подход к разработке на JavaScript
— Опыт использования Node.js с Apple M1
— Minimum viable experience и прогрессивное улучшение

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. На данный момент Patreon мой единственный источник дохода; все донаты идут на покупку еды, оплату аренды квартиры и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov Открыть/Комментировать

2021-02-02 03:13:59 Мод Нальпас написала статью о том, в каких случаях следует использовать HTTPS для локальной разработки — "When to use HTTPS for local development".

Для разработки лучше всего использовать http://localhost, так как браузеры в этом случае разрешают использовать многие API, которые доступны только с HTTPS (сервис воркеры, Payments API, Credentials API и т.п.) Но если нужно протестировать Secure Cookies, HTTP/2, исправить проблему с mixed content или если в hosts-файле стоит резолвинг 127.0.0.1 в уникальное имя, то нужно использовать HTTPS.

Если используется уникальное имя, то оно не должно совпадать с доменом верхнего уровня, иначе могут быть проблемы с резолвингом. В качестве альтернативы Мод предлагает использовать специальные домены верхнего уровня .test и .localhost. Все имена с доменом верхнего уровня .localhost будут работать так же, как и http://localhost, но только в Chrome и Edge.

#http

https://web.dev/when-to-use-local-https/ Открыть/Комментировать

2021-02-01 04:35:09 Дейв Седдиа написал статью про современную экосистему React — "State of the React Ecosystem in 2021".

Этот обзор был вдохновлён вопросом на reddit, где участник задал вопрос про актуальность подходов, которые были популярны в 2016 году. За пять лет в мире React произошло много изменений. Появились хуки, стабилизировался Context API, появилась экспериментальная поддержка Suspense и Server Components. Redux остаётся популярным решением для работы с состоянием, но очень сильно сдаёт свои позиции. Для загрузки данных набирают популярность библиотеки react-query и swr. Для описания сложной логики используют библиотеку XState.

Рекомендую почитать статью, если хотите познакомиться с современными инструментами и библиотеками экосистемы React.

#react

https://daveceddia.com/react-ecosystem-overview/ Открыть/Комментировать

2021-01-31 02:06:13 В блоге GitHub была опубликована статья про оптимизацию анимаций и изображений — "Making GitHub’s new homepage fast and performant".

При разработке новой домашней страницы GitHub ребята столкнулись с проблемой — в коде не было явного перечисления анимируемых свойств transition: * 0.6s ease;, что приводило к повышенному потреблению CPU. Для решения этой проблемы они стали анимировать только opacity и transform: transition: opacity 0.6s ease, transform 0.6s ease;.

Внизу страницы находится большое изображение с прозрачностью. Самым оптимальным форматом для хранения этого изображения лучше всего подошёл WebP. В качестве фоллбека воспользовались SVG с маской. Благодаря такому подходу удалось сэкономить несколько сотен килобайт.

Интересная статья. Рекомендую заглянуть.

#performance

https://github.blog/2021-01-29-making-githubs-new-homepage-fast-and-performant/ Открыть/Комментировать

2021-01-29 23:25:13 Джек Арчибальд написал статью про опасность использования функций в качестве коллбеков — "Don't use functions as callbacks unless they're designed for it".

Скорее всего вы когда-нибудь сталкивались с подобным кодом: [1, 2, 3].map(doSomething). Если doSomething поставляется внешней библиотекой и принимает один аргумент, то всё будет работать нормально. Но код может сломаться, когда doSomething начнёт принимать больше аргументов. Джек пишет о том, что если функция не создавалась с явным учётом того, что она будет использоваться в качестве коллбека, то вместо неё безопаснее использовать функцию-враппер [1, 2, 3].map(x => doSomething(x)).

Точно также небезопасно отправлять в качестве аргумента объект, если он не соответствует необходимому типу, но содержит нужные свойства.

Полезная статья. Рекомендую заглянуть.

#js

https://jakearchibald.com/2021/function-callback-risks/ Открыть/Комментировать

2021-01-29 14:32:31 Defront сегодня празднует второй день рождения. В январе 2019 года мне захотелось поделиться прочитанной статьёй со своими коллегами во внутреннем чате Яндекс.Маркета. Написал небольшой tldr и подумал, что такой формат будет полезен большему числу людей. Потом пошло-поехало, и вот вас уже больше 5000.

Благодарю за помощь в развитии канала:
Сергея Рубанова (@webnya — крутой канал про web-стандарты и новинки web'а от участника TC39)
Олега Ковалёва (@oleg_log — сильный канал про бэкенд и программирование в целом)

Также хочу передать привет всем дружественным каналам и сообществам (если кого-то забыл, пишите в лс):
@ufostation @javascript_ru
@typesafesound @amorgunov
@frontend_u_news
@forwebdev @winterview
@dereference_pointer_there
@evodevclub @Loskirs
@htmlshit @prostorazrabotka
@we_use_js @css_ru

Спасибо всем за помощь и поддержку!

P.S. Если считаете нужным, можете сделать подарок каналу и рассказать про Defront своим друзьям, коллегам и подписчикам.

https://twitter.com/myshov/status/1355105595997757442 Открыть/Комментировать

2021-01-28 22:36:31 Аксель Раушмайер написал статью про отличия между undefined и null — "undefined vs. null revisited".

Спецификация описывает эти значения следующим образом: undefined используется как значение по умолчанию в неинициализированных переменных; null используется как значение, которое явно устанавливается разработчиком как признак отсутствия любого объектного значения.

Для выбора между undefined и null Аксель использует правило: undefined — это метазначение, которое существует на уровень выше кода программы, и оно означает, что что-то не существует или отсутствует; null — существует на уровне кода программы, и оно означает, что что-то "отключено".

Мне не очень нравится метафора с "отключением" с помощью null, но нравится идея undefined как метазначения. Как бы то ни было, статья полезная, рекомендую почитать.

#js

https://2ality.com/2021/01/undefined-null-revisited.html Открыть/Комментировать