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

Всем привет!

Немного о браузерных движках!

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

▶️Blink aka Chromium Based Browsers (📱📱📱)

Примерно 75% от рынка составляют браузеры на этом движке, в основном поддерживаемом Google и в соответствии с этим диктующим свои правила, чаще всего сюда первыми доезжают различные модные фичи и отсюда они уже уходят в другие движки.

▶️Webkit (📱)

Примерно 20% от рынка занимают браузеры от Apple, потому что в мире много Iphone с IOS, а на IOS любой браузер это внутри Safari, поэтому довольно ощутимая доля рынка остается за Apple, однако даже несмотря на это фичи сюда иногда доезжают супер долго, а иногда вообще не доезжают, либо же наоборот начинают душиться, как было с тем же PWA не так давно.

▶️ Gecko (📱)

Примерно 3% от рынка это браузеры Firefox, Tor, Waterfox и другие браузеры пытающиеся в секьюрность, приватность данных и open-source, некоторые фичи появляются здесь очень быстро, если они интересны комьюнити и полезны экосистеме, а некоторые не доезжают годами.

▶️ Нишевые и устаревшие движки по типу - Goanna, EdgeHTML и прочие.

Занимают оставшиеся 2% и являются либо являются устаревшими и неподдерживаемыми, либо экспериментальными или нишевыми для определенных целей.

Всем привет!

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

Из приколюх - есть даже типы устройств которые использовались для входа на сайт по типу, как происходила навигация из кэша, редиректом и тд, LCP по компонентам (LCP по умолчанию расладывается в Time to First Byte; Resource Load Delay; Resource Load Duration; Element Render Delay) + можно смотреть не только перцинтили, а полную стату, что довольно важно, в общем супер полезная статистика.

Покопался, увидел супер много полезной информации, особенно по сравнению с pagespeed.

Всем привет!

Отличная статья про unicode - тык.

Почему "🧑‍💻".length === 5, из чего состоят emoji, как это сущетсвует вместе с другими кодировками, что за кодовые точки зарезервированные под частное использование и что там делает логотип apple, все это рассказывается в этой статье, довольно полно, интересно и нативно!

И да, emoji в JS можно деструктурировать на их компоненты xD.

Всем привет!

Предельная адаптивность!

В css есть такая интересная функция - clamp(), с помощью нее можно задать максимальное, оптимальное и минимальное значение для свойства.

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

font-size: clamp(21px, 2.5rem, 42px);

Также в clamp можно использовать `min()/max()/calc()` функции, что делает его очень гибким.

Всем привет!

Предельная адаптивность!

В css есть такая интересная функция - clamp(), с помощью нее можно задать максимальное, оптимальное и минимальное значение для свойства.

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

font-size: clamp(21px, 2.5rem, 42px);

Также в clamp можно использовать `min()/max()/calc()` функции, что делает его очень гибким.

P.S. По итогу используется значение, которое получается из следующих условий: если вычисленное значение переданное вторым аргументом находится между значениями первого и третьего аргумента, то используется второй аргумент (оно же является предпочтительным), если вычисленное значение меньше первого аргумента, то первый аргумент, если больше третьего, то третий аргумент

Всем привет!

Нейросети добрались до браузеров!

Наткнулся на w3c на Web Neural Network API, который представляет из себя абстракцию над hardware реализациями различных нейросетей (реализаций браузеров/ос) и позволяет выполнять некоторые операции не в облаке, как мы сейчас привыкли, а локально на машине пользователя, что повышает секьюрность данных, а также дает возможность веб-платформе не зависеть от сторонних апи и реализаций, а полагаться на уже имеющиеся апи поставляемые с hardware.

▶️Основные задачи, которые выделяет proposal

🔤Обнаружение людей - Определение наличия человека в кадре видео.
🔤Распознавание лиц в реальном времени.
🔤Семантическая сегментация - Разделение изображения на области (например, удаление фона во время видеозвонков).
🔤Улучшение разрешения видео.
🔤Генерация подписей к изображениям.
🔤Машинный перевод - Перевод текста в реальном времени.
🔤Подавление шума в видео/аудио стримах.

Поддержки в браузерах пока никакой, единственное можно включить с помощью флага #web-machine-learning-neural-network в chromium based браузерах и должно завестись. Звучит интересно, думаю если эта штука когда-то реально доедет до браузеров мы увидим много полезных фичей на наших любимых сайтиках.

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

Всем привет!

Аутентификация с помощью платформозависимых и платформонезависимых средств!

В вебе уже довольно давно существует такой стандарт как WebAuthn и с помощью него можно реализовывать аутентификацию с помощью платформозависимых методов, таких как FaceId, TouchId, различных менеджеров паролей для Mac/Windows, менеджеров паролей для конкретных браузеров и всего, что ваша ОС/Браузер придумал себе как один из факторов аутентификации, но и самое интересное, что можно использовать неплатформозависимые методы, такие как различные аппаратные ключи (это такие же штуки как ledger в мире крипты), другие устройства (ipad/iphone/android) и любая другая железка которая может выступать ключом и что самое интересное это доступно в браузере с хорошей поддержко и простым API.

Использование максимально простое, там просто используется navigator.credentials.create и navigator.credentials.get, однако что интересно в использовании, это дальнейшее удаление созданного профиля и оно по сути возможно только с помощью - PublicKeyCredential.signalUnknownCredential, однако это экспериментальная фича и супер плохо поддерживаемая.

▶️Более подробно можно почитать тут:

🔤Базовая дока на MDN - тык
🔤Сайт с демкой этого самого webauthn и библиотеками, которые лучше использовать, сайт разработан и поддерживается ребятами из cisco - тык
🔤А еще в devtools можно эмулировать аутентификаторы, как много всего есть в devtools, о чем мы даже близко не знаем - тык

Всем привет!

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

Все мы используем 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 обновление всех вкладок.

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