Фронтенд для души

Всем привет!

Автоматизированный сбор аналитик и отправка на сервер - тык!

Все мы используем pagespeed, чтобы якобы замерять производительность нашего приложения и получаем какие-то цифры, а еще мы можем получить их с помощью lighthouse или вкладки perfomance в devtools, но все это позволяет измерять perfomance в моменте и только на одном устройстве (исключая общую стату в pagespeed, но она там прям супер общая), так вот если мы хотим измерять perfomance прям на устройстве пользователя и прям в моменте и при этом еще куда-то это отправлять со всякими модными данными, типо таймингов, на каком элементе произошло (в случае LCP, INP) и других приколюх, то можно использовать библиотеку от Google и просто собирать эти метрики и отправлять их на сервер!

🔤Как оно работает

Собственно, тут все просто, достаем нужные нам метрики из библиотеки и отправляем их куда хотим, можно просто логать их в консоль, чтобы логать прям все метрики, а не только initial, юзаем { reportAllChanges: true }

import { onCLS, onINP, onLCP } from 'web-vitals';

function sendToAnalytics(metric) {
  console.log(metric)
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics, { reportAllChanges: true });
onLCP(sendToAnalytics, { reportAllChanges: true });

▶️Более подробно изучить это чудо можно тут - тык

P.S. Если вдруг вы используете nuxt, не берите адаптер этой либы, он работает супер криво, лучше просто использовать оригинал 💃

Всем привет!

Гарантированная доставка небольшого количества данных на сервер - тык!

Navigator.sendBeacon позволяет асинхронно отправить Post-запрос с небольшим payload на сервер, в случае если страница начинает выгружаться, даже в случае если пользователь закроет страницу, закроет браузер или произойдет синий экран смерти (который вроде скоро станет зеленым) данные улетят.

🔤Когда может быть полезно

🔤Отправка аналитики в конце сессии.
🔤Сохранение важных стейтов на сервере, которые пользователь сам не сохранил.
🔤Логирование ошибок.

▶️Как использовать

navigator.sendBeacon(url, data);

Всем привет!

API для шеринга данных между вкладками/iframe/воркерами!

Все наверное знают, что можно отслеживать обновление LocalStorage/SessionStorage в других вкладках с помощью события storage и таким образом обмениваться данными между мастер вкладкой и дочерними, однако есть еще одно замечательно API, которое позволяет делать аналогичные действия - Broadcast Channel API, с помощью него можно создавать канал, постить в него сообщения и слушать сообщения приходящие в этот канал в других вкладках.

🔤Как это работает

// Создаем канал
const bc = new BroadcastChannel("share_channel");
// Посылаем сообщение в канал
bc.postMessage("Имя Ибрагим вам о чем-нибудь говорит ?");

// Ловим событие в канале
bc.onmessage = (event) => {
  console.log(event);
};

И получаем realtime обновление всех вкладок.

🔤Работает как и другие такие штуки только на одном домене/порту/протоколе.

Всем привет!

Вычисления на GPU!

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

▶️ Как это работает ?

🔤Композитные слои (Composite Layers) — Браузер создает отдельные слои для элементов с GPU-ускоренными свойствами. Эти слои рендерятся на GPU, что ускоряет перерисовку при анимациях.

🔤Оптимизация перерисовки (Repaint) — Свойства вроде transform и opacity не вызывают перерасчет layout и paint - браузер обновляет только композитный слой, собственно, это два единственных свойства, которые вызывают composite.

▶️ Что рендерится на GPU ?

На GPU рендерятся такие css-свойства как transform, opacity, filter, backdrop-filter, соответственно если у вас есть в анимации, такие свойства как left/right/top/bottom и подобные, оптимально их переписать на transform и тогда ваша анимация будет вычисляться на GPU.

▶️ Подводные камни

🔤Перегрузка GPU — нужно всегда учитывать, что графической памяти довольно мало и в случае ее занятости другими приложениями, могут возникнуть лаги.

🔤Большое количество слоев — также может привести к лагам.

Сайт, где можно посмотреть какие стили вызывают какие задачи из Layout/Paint/Composite — тык.

Всем привет!

В тему предыдущего поста сегодня поговорим о безопасности, а конкретно о clickjacking атаке!

Clickjacking — это когда злоумышленник подсовывает невидимый интерфейс поверх безобидной кнопки. Вы кликаете на флексящего котика💃, а на самом деле подтверждаете перевод денег🥲.

🔤Как это работает

1️⃣Ваш сайт встраивается во iframe на чужой странице.
2️⃣Злоумышленник накладывает прозрачный слой с кнопкой поверх вашего UI обычно комбинация z-index + opacity.
3️⃣Пользователь кликает в прозрачный слой на флексящего котика, но на самом деле выполняет действие в вашем приложении.

▶️Как избежать ?

Заголовок X-Frame-Options

X-Frame-Options: DENY  // Запретить всем
X-Frame-Options: SAMEORIGIN  // Только свой домен

CSP

Content-Security-Policy: frame-ancestors 'self';  

Подробнее почитать тут - тык.

Проверить свой сайт на возможность атаки - тык.

Всем привет!

CSP с заботой о безопасности — тык.

Content Security Policy (CSP) — это стандарт безопасности для веб-разработки, который позволяет защищать ваши сайты от различных видов атак. Настраивается как на уровне http-заголовков, так и на уровне meta страницы.

У CSP довольно много директив с помощью которых можно запрещать/разрешать/ограничивать загрузку определенных ресурсов, все их можно посмотреть тут, а я расскажу про наиболее используемые из них:

🔤default-src — Правила по умолчанию для всех типов ресурсов.
🔤script-src — Какие скрипты можно выполнять.
🔤style-src — Откуда брать CSS.
🔤img-src — Разрешённые источники изображений.
🔤connect-src — Куда можно отправлять запросы (AJAX, WebSocket).
🔤frame-src — Какие домены можно встраивать в <iframe>.

▶️Основные значения, которые можно указывать:

🔤'domain.com' — конкретное значение разрешенных доменов.
🔤'self' — разрешить текущий домен.
🔤'none' — запретить всё.
🔤'unsafe-inline' — разрешить инлайн-скрипты/стили.
🔤'nonce-abc123' — разрешить скрипты с атрибутом nonce="abc123".
🔤'sha256-...' — разрешить инлайн-код с определённым хэшем.

▶️Пример использования:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

🔤Также существует очень интересная возможность тестировать директивы с помощью `Content-Security-Policy-Report-Only: policy` и `report-uri`, который позволят отслеживать нарушения, но при этом не блокировать загрузку ресурсов, а просто направлять отчет о нарушении на url указанный в `report-uri`, подробнее тут.

Всем привет!

Нативные веб-пуши в Safari!

Сейчас веб-пуши возможно реализовать только с помощью Service-Worker и отсюда вытекают все проблемы и минусы связанные с этим (например Safari и некоторые другие браузеры по прошествии определенного времени просто могут удалить регистрацию сервис воркера вместе с очисткой куков/стораджей, также некоторые браузеры просто не поддерживают сервис воркеры и некоторые фичи апишек связанных с ним, привет Firefox в incognito), так вот Safari сделал возможность регистрировать пуши без Service-Worker'ов.

🔤 Как работает

Флоу работы с пушами не меняется, меняется только регистрация подписки, теперь она выполняется не в SW, а просто в коде и выглядит следующим образом:

const subscription = await window.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: arrayForPublicKey
});

🔤Полезно

Кстати если у вас уже есть зарегистрированный SW с пушами, то это не помешает работать этому декларативному методу, просто когда SW удалится, останется работать эта подписка.

А еще если следовать вот этому формату, то даже showNotification не придется вызывать, а Safari сам обработает прилетевший пуш и покажет его пользователю.

Раздел кстати уже завезли на whatpwacandotoday

▶️Очень здорово что есть такая фича вне SW, жаль что пока только в одном браузере и только в последних версиях сафари, кажется любое веб-приложение нуждается в веб-пушах и чем проще их будет интегрировать, тем лучше!

Всем привет!

Нативный контроль за открытием PWA!

PWA нынче модно-стильно-молодежно и достаточно удобно, особенно в реалиях отсутствия нативных приложений, по тем или иным причинам, поэтому расскажу про одну очень полезную и удобную фичу.

Относительно недавно в Chromium-based браузеры завезли поддержку launch_handler в manifest.json, эта настройка позволяет вам управлять тем, как при навигации ваше приложение откроется, как установленное pwa, или как ссылка в браузере (при этом также завезли возможно управлять этой настройкой пользователю прям внутри pwa, поддерживаемые ссылки в настройках) для того, чтобы оно завелось нужно в manifest добавить следующее:

Про конкретные значения можно почитать тут

{
  "launch_handler": {
    "client_mode": "navigate-new" | "navigate-existing" | "focus-existing" | "auto"
  }
}

P.S. А еще сегодня день веб-разработчика, всех с праздником!

Всем привет!

Розыгрыш провели, можно и полезности почитать)

Оптимизация производительности веб-страниц, когда они не видны пользователю - Page Visibility API.

С помощью этой апишки можно отслеживать когда пользователь сворачивает страницу, переключает вкладку или закрывает вкладку другим окном и применять какие-то оптимизации, чтобы не грузить лишние данные с сервера в момент когда они не нужны пользователю или не проигрывать видео или аудио или отключать всякие автослайдеры, чтобы они не крутились просто так.

🔤Как это работает

В момент когда происходит одно из событий, которое меняет visibility страницы, происходит event visibilitychange и с помощью document.hidden, мы можем определить, что в данный момент происходит со страницей, скрыта она или нет.

▶️Полезно знать

У браузера есть свои оптимизации для таких вкладок и они хорошо работают вместе с Page Visibility API

🔤Большинство браузеров перестают выполнять callback из requestAnimationFrame() фоновым вкладкам или скрытым <iframe>.
🔤setTimeout() замедляется на скрытых вкладках (обычно имеется какой-то минимальный таймаут который может быть например у Лисы и Хрома это 1 секунда, по сути все ваши таймауты меньше секунды превращаются в секунду), подробнее можно почитать тут.

Пример реализации:

function handleVisibilityChange() {
  if (document.hidden) {
    // Если страница скрыта, паузим видео
    pauseVideo()
  } else {
    // Если страница видна, резюмим видео
    resumeVideo()
  }
}

document.addEventListener('visibilitychange', handleVisibilityChange);

Всем привет!

Сегодня 2 года как я пытаюсь писать что-то полезное в этом дневнике фронтенд-больного канале, в честь этого решил разыграть пару тг-премиумов, чтобы поднять настроение в этот пасмурный или не очень день! И да это не 1-апрельская шутка, там реально премиум, я проверял)

Спасибо что читаете!💃

P.S. А еще можно нового флекс кота в реакции будет добавить)
P.P.S. Пришлось закрыть канал на время розыгрыша, а то 30 ботов за 30 минут больно удалять, хорошо хоть у них 1rpm на заходы)))