Русский
Русский
English
Статистика
Реклама

Google chrome

Новая утечка истории браузера через favicon

19.02.2021 14:12:20 | Автор: admin

Недавно наткнулся на это исследование pdf (по его мотивам уже была статья на хабре), после прочтения, решил поискать более интересные способы использования F-Cache. Объективно, схему с редиректами никто в здравом уме не будет ставить на свой сайт. Это утечка, но утечка представляющая больше теоретический интерес, чем практический(имхо).

Обозначил цель(найти способ проверить F-Cache через javascript) и начал поиски. В ходе экспериментов выделил несколько способов это сделать, но опишу самый интересный, на мой взгляд.

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

Предварительный тест можно пройти здесь: https://favicon-leak.site/

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

У хрома есть два типа ресурсного кеша: disk и memory. Как многие догадались, disk cache это перманентное хранилище ресурсов, но со своей задержкой на чтение(1+ ms). В свою очередь, memory cache используется для временного хранения часто используемых ресурсов, а чтение, в среднем, мгновенное (0 ms). Таким образом, помещая ресурс в memory cache браузер уменьшает количество чтений с диска и увеличивает скорость повторной загрузки самих ресурсов.

Когда мы первый раз загружаем картинку через <img>, то ее либо загрузит по src, либо достанет из disk cache. В обоих случаях эта картинка, чаще всего, помещается в memory cache. Рассмотрим такой javascript код:

var img = new Image();img.src = some_image_url;if (img.complete && img.height + img.width > 0) {// Это условие TRUE, только когда картинка успешно была прочитана из memory cache}

Именно этот код позволяет проверить наличие картинки в memory cache. Из этого можно сделать такой вывод: если загрузить <img> минимум два раза, то во второй раз картинка должна загружаться уже из memory cache.

<img> + <img> + <img> + <img><img> + <img> + <img> + <img>

Поведение тега <link rel="icon"> отличается от <img> и повторная загрузка одной картинки всегда читает ее с диска:

<link> + <link> + <link> + <link><link> + <link> + <link> + <link>

Ключевой находкой стало такое поведение браузера:

<img> + <img> + <link> + <img><img> + <img> + <link> + <img>

Как мы видим, после загрузки картинки через <link>, она помещается в disk cache и при повторном чтении ее через <img> она загружается с диска(даже если уже была в memory). Это нормальное поведение браузера для картинки, которой нет в F-Cache. НО! Если картинка для <link> загружена из F-Cache, то это никак не влияет на состояние, предварительно загруженной в memory cache, картинки. Вероятно, это связанно с тем, что F-Cache никак не взаимодействует с сетевым уровнем. Следовательно, если после
<img> + <img> + <link> + <img> < загрузка этой картинки произошла мгновенно, то мы можем сделать вывод, что эта картинка была в F-Cache т.к. она не была удалена из memory cache. Вот и вся хитрость, позволяющая проверять наличие картинки в F-Cache.

Важно заметить, что этот метод не 100%-но надежный, т.к. мы не можем точно проверить была ли вообще загруженна картинка в <link>(например, могла произойти сетевая ошибка), поэтому я использую setTimeout. Чем больше timeout, тем выше вероятность, что <link> успел прогрузиться.

Про F-Cache

F-Cache привязан к конкретному профилю, поэтому если вы хотите протестировать с нуля, то лучше всего создать новый профиль в браузере. Время жизни иконок в F-Cache индивидуально для каждой иконки и зависит от cache policy домена-владельца. F-Cache в инкогнито работает только в read-only режиме.

Про сайт https://favicon-leak.site/

Используя автоматизированный хром, я собрал небольшой список ссылок на favicon-ы популярных сайтов. https://favicon-leak.site/ проверяет иконки из этого списка. Возможно, когда вы будете читать эту статью какие-то ссылки уже устареют и будут возвращать ложноотрицательный результат.

Код на github

Подробнее..

Перевод Отключение Google FloC на вашем веб-сайте

16.04.2021 20:09:46 | Автор: admin

Google недавно объявил о развертывании технологии Federated Learning of Cohorts (FLoC) в рамках инициативы Privacy Sandbox, направленной на замену сторонних файлов cookie новым методом профилирования пользователей, который собирает данные, генерируемые непосредственно браузером.

Организация Electronic Frontier Foundation (EFF) выпустила обзор FLoC и связанных с ним угроз, а также разработала полезный инструментдля проверки, используется ли браузер пользователя для сбора данных и снятия цифрового отпечатка устройства.

Сайт для проверки, используется ли в вашем браузере FloC Сайт для проверки, используется ли в вашем браузере FloC

Примечания: EFF отмечают, что вместо устранение проблемы, Google создает новые. Если любой сайт сможет получить данные о когортах, возникнут условия для предварительной жесткой фильтрации целых групп пользователей, исходя из обобщенных предпочтений. Среди новых рисков также выделяют появление фактора для более интенсивного использования методов косвенной идентификации пользователя(browser fingerprinting), использующих специфичные настройки и особенности оборудования.

Plausible Analytics также присоединился к статье, в которой объясняется, какое отношение FLoC имеет к пользователям и разработчикам.- что послужило источником вдохновения для этого краткого руководства.

Заголовок FLoC

Основной способ, с помощью которого конечный пользователь может избежать FLoC, это просто не использовать Chrome, а вместо этого выбрать браузер, уважающий конфиденциальность, например Mozilla Firefox.

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

Для этого необходимо добавить следующий кастомный заголовок HTTP-ответа:

Permissions-Policy: interest-cohort=()

В этом руководстве вы найдете инструкции о том, как добавить кастомные заголовки HTTP-ответов в конфигурации веб-серверов и прокси-серверов.

NGINX

Добавьте в файл конфигурации NGINX следующее:

# /etc/nginx/sites-available/default.confserver {    location / {add_header Permissions-Policy interest-cohort=();...

Перезапустите NGINX с помощью команды service nginx restart

Apache

Добавьте следующую директиву в свой файл конфигурации Apache:

# /www/htdocs/example.com/.htaccess <IfModule mod_headers.c>  Header always set Permissions-Policy: interest-cohort=()</IfModule>

Перезапустите Apache с помощью команды service apache2 restart

Caddy

Добавьте следующее в свой Caddyfile:

# Caddyfileexample.com {header Permissions-Policy "interest-cohort=()"...

Перезапустите Caddy с помощью команды caddy reload

Lighttpd

Добавьте в файл конфигурации Lighttpd следующее:

# /etc/lighttpd/lighttpd.confserver.modules += ( "mod_setenv" )setenv.add-response-header = ( "Permissions-Policy" => "interest-cohort=()" )

Перезапустите Lighttpd с помощью команды service lighttpd restart

Netlify

Добавьте в файл конфигурации Netlify следующее:

# netlify.toml[[headers]]  for = "/*"  [headers.values]    Permissions-Policy = "interest-cohort=()"

Если вы предпочитаете использовать _headers файл вместо файла конфигурации TOML, добавьте в этот файл вместо указанных выше строчек следующее:

# _headers/*  Permissions-Policy: interest-cohort=()

При следующей сборке или развертывании Netlify добавит и обслужит заголовки.

GitHub Pages

В настоящее время не существует возможности добавлять кастомные заголовки HTTP при использовании GitHub Pages. Однако есть обходной путь добавление метатегов на сами страницы.

Добавьте в раздел <head> HTML-кода следующее:

<meta http-equiv="Permissions-Policy" content="interest-cohort=()"/>

GitLab Pages

Как и в случае с GitHub, при использовании GitLab Pages нет возможности добавлять кастомные заголовки HTTP. Таким образом, придется воспользоваться тем же методом, что и выше, и устанавливать директивы в самом HTML.

Однако, если вы пользуетесь GitLab Community Edition, можно установить заголовки, добавив в свой gitlab.rbфайл следующее:

# gitlab.rbgitlab_pages['headers'] = [ "Permissions-Policy: interest-cohort=()" ]

Вы также можете указать заголовки при запуске GitLab Pages binary:

./gitlab-pages -header "Permissions-Policy: interest-cohort=()"

CloudflareWorkers

Вы можете создать следующий Worker Script, чтобы установить заголовки ответа:

addEventListener('fetch', event => {  event.respondWith(handleRequest(event.request))})async function handleRequest(request) {  let response = await fetch(request)  let newHeaders = new Headers(response.headers)  newHeaders.set("Permissions-Policy", "interest-cohort=()")  return new Response(response.body, {    status: response.status,    statusText: response.statusText,    headers: newHeaders  })}

Добавьте этот Worker Script в домен, установив этот домен в качестве Worker Route.

WordPress

WordPress позволяет устанавливать заголовки из своей кодовой базы с помощью хуков. Добавьте следующий код в конец functions.php файла активной темы:

function disable_floc($headers) {    $headers['Permissions-Policy'] = 'interest-cohort=()';    return $headers;  }add_filter('wp_headers', 'disable_floc');}

Сохраните файл в админ-панели WordPress. Все новые запросы будут содержать необходимый заголовок.

Если вы используете какие-либо механизмы кэширования и плагины (например, FastCGI Cache от NGINX, W3 Total Cache и т. Д.), необходимо очистить кэш, чтобы он был повторно заполнен с указанными выше дополнениями.


Дата-центр ITSOFT размещение и аренда серверов и стоек в двух дата-центрах в Москве. За последние годы UPTIME 100%. Размещение GPU-ферм и ASIC-майнеров, аренда GPU-серверов, лицензии связи, SSL-сертификаты, администрирование серверов и поддержка сайтов.

Подробнее..

Расширение для Google Chrome управляем скиллами друзей в LinkedIn

31.03.2021 00:12:34 | Автор: admin

Статья пригодится для новичков которые давно мечтали создать свое расширение для Google Chrome, но до дела так и не доходило. Поэтому давайте считать, что время пришло, пишем расширение прямо сейчас.

Данное расширение позволяет прожимать подтверждения скиллов на странице друга или отменить подтверждения скиллов. Полезно когда вместо десятков нажатий на "плюсики" Вы нажимаете только на одну кнопку расширения.

Предупреждаю: будет просто.

Что нам понадобится?

Немного времени, любой текстовый редактор (стандартный notepad подойдет.

Этого хватит чтобы пользоваться расширением на своем компьютере. Но если Вам нужно чтобы пользователи всего мира могли сами скачивать Ваше расширение, то будет необходимо добавить расширение в магазин Google Chrome заплатив 5$.

В любом месте на диске создаем директорию в которой будем создавать необходимые файлы.

Манифест расширения

Самый важный файл расширения - это его манифест. Данный файл описывает структуру Вашего расширения: название расширения, описание расширения, версия, необходимые для работы права, иконки, ссылки на файлы расширения.

Создаем файл с именем manifest.json:

{"manifest_version": 2,"name": "Linkedin Manage Friend Skills","description": "Linkedin Manage Friend Skills","version": "1.0.0","content_scripts": [{"matches": ["*://www.linkedin.com/*"],"js": ["content.js"]}],"icons": {"128": "icon_128.png"},"browser_action": {"default_icon": "icon.png","default_popup": "popup.html"}}

manifest_version - недавно вышла версия 3, но большинство расширений сейчас на версии 2
name - здесь название расширения
description - описание расширения
version - версия расширения, для начала можно задать 1.0.0
content_scripts:
matches - описывает шаблон по которому скрипты будут знать на какой странице можно работать, в данном случае на сайте www.linkedin.com
js - имя рабочего скрипта расширения (javascript формат)
icons - список иконок для отображения в настроках расширений браузера (128 подразумевает что Вы сделаете иконку размером 128x128 пикселей)
browser_action:
default_icon - иконка для отображения расширения
default_popup - html окно которое откроется при клике мышкой по иконке расширения

Иконка

В директорию с манифестом нужно скопировать файл icon.png размером 128x128 пикселей. Эта иконка будет отображаться на панели расширений браузера. Скачайте любую подходящую картинку из Интернет или создайте свою собственную.

Также скопируйте в директорию иконку icon_128.png размером 128x128 пикселей. Она будет отображаться в настройках браузера в меню "Расширения".

Окно расширения

В директории с манифестом создаем текстовый файл с именем popup.html.

Чтобы окно выглядело более менее красиво, кроме голой html-разметки используем стили.

Само окно представляет собой текст названия расширения с двумя кнопками: "Accept skills" и "Reject skills".

Текст popup.html
<!DOCTYPE html><html><head>   <meta charset="utf-8">   <title>Linkedin Accept Friend Skills</title>   <!--ссылаемся на шрифты, используемые в документе-->   <link href="http://personeltest.ru/aways/fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">   <!--здесь мы ссылаемся на стили, которые будем использовать в документе, а именно стиль иконок-->   <link href="http://personeltest.ru/aways/maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" ><style>    /* Модальная структура документа */    /*общие настройки для всего документа*/    html,    body {      font-family: 'Open Sans', sans-serif;      font-size:18px;      verticalalign: text-bottom;;      margin: 0;      min-height: 100px;      padding: 0;      width: 380px;    }    /*задаём настройки для заголовков первого уровня*/    h1 {      font-family: 'Menlo', monospace;      font-size: 22px;      font-weight: 400;      margin: 0;      color: #2f5876;    }    a:link,    a:visited {      color: #000000;      outline: 0;      text-decoration: none;    }    .logo {      padding: 16px; /*отступы со всех сторон*/    }    .logo-icon {      vertical-align: text-bottom; /*выравнивание по нижней части текста*/      margin-right: 12px; /*задётся отступ элементов от изображения*/    }    .version {      color: #444;      font-size: 18px;    }    .flex-container {      display: flex; /*отображает контейнер в виде блочного элемента*/      justify-content: space-between; /*равномерное выравнивание элементов*/      padding: 10px 22px;    }    /*задаём настройки для контейнеров с иконками*/    .flex {      opacity: 1; /*параметр непрозрачности иконок*/      width: 200px;    }    .flex:hover {      opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/    }    .flex .fa {      font-size: 40px;      color: #2f5876;    }  </style></head><body><div class="modal-header">   <h1 class="logo">      <span class="version">Linkedin Manage Friend Skills</span>   </h1></div><div class="modal-icons">    <div class="flex-container">      <button id="accept" class="flex">          <i class="fa fa-check"></i>          <span>Accept skills</span>      </button>      <button id="reject" class="flex">          <i class="fa fa-ban"></i>          <span>Reject skills</span>      </button>    </div>  </div><script src="popup.js"></script></body></html>

На 88-й строке popup.html происходит загрузка popup.js

Скрипт загружается при загрузке страницы и добавляет на загружаемую страницу 2 метода для наших кнопок: "onclick_accept" для первой кнопки и "onclick_reject" для второй. Данные методы отправляют в скрипт content.js команду "+" для автоматического подтверждения скиллов или "-" для автоматической отмены подтверждений скиллов.

Файл скрипта popup.js представлен ниже. Данный файл также создаем в директории с манифестом.

document.addEventListener('DOMContentLoaded', function() {    document.querySelector('#accept').addEventListener('click', onclick_accept, false)    document.querySelector('#reject').addEventListener('click', onclick_reject, false)    function onclick_accept() {          chrome.tabs.query({currentWindow: true, active: true},          function (tabs) {            chrome.tabs.sendMessage(tabs[0].id, '+')          })    }    function onclick_reject() {          chrome.tabs.query({currentWindow: true, active: true},          function (tabs) {        chrome.tabs.sendMessage(tabs[0].id, '-')          })    }}, false);

Файл скриптов

В директории с манифестом создаем текстовый файл с именем content.js:

Текст content.js

Данный скрипт при нажатии кнопок расширения получает команды из скрипта "+" или "-" и выполняет соответствующий код.

Если команда "+", то происходит поиск кнопок на странице с неподтвержденными скиллами и по очереди прожимает их.

Если команда "-", то происходит поиск кнопок на странице с подтвержденными скиллам и по очереди прожимает их.

Список файлов в директории расширения выглядит так:

Установка расширения

Первым делом необходимо открыть настройки расширений в браузере.
Способ 1: в адресной строке Google Chrome вводим chrome://extensions/
Способ 2: открываем настройки Google Chrome, переходим в меню "Дополнительные инструменты" и далее в "Расширения".

В верхнем правом углу меню "Расширения" необходимо включить "Режим разработчика".
Для загрузки нового расширения следует нажать на кнопку "Загрузить распакованное расширение" и выбрать каталог с файлами Вашего расширения.

Экран любого загруженного расширения позволяет управлять расширением: включение/выключение, перезапуск, удаление, подробная информация.

Чтобы закрепить расширение на панели расширений нужно сделать следующее:

Как пользоваться расширением

В текущей разработке для подтверждения или отмены подтверждения скиллов нужно находясь на странице Linkedin Вашего друга пролистать страницу вниз до загрузки блока скиллов. После этого можно пользоваться кнопками расширения. Если у Вас есть рабочий способ решить этот момент чтобы не нужно было пролистывать, то прошу рассказать в комментариях.

Подробнее..

Перевод Контейнерные запросы в CSS

28.04.2021 18:07:33 | Автор: admin

Как фронтенд-дизайнер я за последние 6 лет не был так взволнован новой CSS-функцией, как сейчас. Благодаря усилиям Мириам Сюзанны и других умных людей прототип контейнерных запросов можно включить в Chrome Canary

О контейнерных запросах запомнилось много шуток, но они, наконец, здесь. В этой статье я расскажу, зачем нам нужны контейнерные запросы, как они облегчат нашу жизнь, и, самое важное, ваши компоненты и макеты станут мощнее. Если вы взволновались так же, как и я, давайте углубимся в тему. Вы готовы?


Проблема с медиазапросами

Веб-страница состоит из разных разделов и компонентов, которые мы делаем отзывчивыми при помощи медиазапросов CSS. В этом нет ничего плохого, но есть ограничения. Например, мы можем написать медиазапрос, чтобы показать минимальную версию компонента на мобильном или настольном компьютере. Часто отзывчивый веб-дизайн не имеет отношения к видовому экрану или к размеру экрана. Он касается размера контейнера. Рассмотрим такой пример:

Вот очень типичный макет с компонентом карточкой. И два варианта:

  • Стопкой (смотрите aside).

  • Горизонтально (смотрите main).

Реализовать такое на CSS можно несколькими способами, вот самый распространённый: нам нужно создать базовый компонент, а затем написать его вариации.

.c-article {  /* The default, stacked version */}.c-article > * + * {  margin-top: 1rem;}/* The horizontal version */@media (min-width: 46rem) {  .c-article--horizontal {    display: flex;    flex-wrap: wrap;  }  .c-article > * + * {    margin-top: 0;  }  .c-article__thumb {    margin-right: 1rem;  }}

Обратите внимание, что мы описали класс .c-article--horizontal для работы с горизонтальной версией компонента. Если ширина видового экрана больше 46rem, компонент должен переключаться на горизонтальную версию. Это не плохо, но каким-то образом заставляет ощущать себя ограниченным. Хочется, чтобы компонент реагировал на ширину своего родительского компонента, а не на видовой экран браузера или размер экрана.

Считайте, что мы хотим использовать стандартную .c-c-card в разделе main. Что произойдёт? Ну, карта расширится до ширины своего родителя и, следовательно, окажется слишком большой. Посмотрите на рисунок:

Это проблема, и мы можем решить её при помощи контейнерных запросов. (Есть! наконец-то!) До погружения в тему давайте взглянем на результат.

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

<div class="o-grid">  <div class="o-grid__item">    <article class="c-article">      <!-- content -->    </article>  </div>  <div class="o-grid__item">    <article class="c-article">      <!-- content -->    </article>  </div></div>
.o-grid__item {  contain: layout inline-size;}.c-article {  /* The default style */}@container (min-width: 400px) {  .c-article {    /* The styles that will make the article horizontal**        ** instead of a card style.. */  }}

Как помогут контейнерные запросы?

Предупреждение: контейнерные запросы CSS пока поддерживаются только в Chrome Canary с экспериментальным флагом.

При помощи контейнерных запросов CSS мы можем решить вышеуказанную проблему и создать растягиваемый компонент. Это означает, что мы можем вложить компонент в узкий родительский элемент, и он превратится в версию "стопкой", а в широком родительском компоненте в горизонтальную версию. Опять же все элементы не зависят от ширины видового экрана.

Вот как я представляю себе это:

Фиолетовый контур это ширина родительского компонента. Обратите внимание, как компонент адаптируется к большему размеру своего родительского компонента. Разве это не потрясающе? Вот мощь контейнерных запросов CSS.

Как работают контейнерные запросы

С контейнерными запросами теперь можно поэкспериментировать в Chrome Canary. Чтобы включить их, перейдите в chrome://flags, найдите чекбокс "container queries" и отметьте его.

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

Значение inline-size означает, что компонент реагирует только на изменения ширины родительского элемента [прим. перев. в случае языков с вертикальным направлением, возможно, речь идёт о высоте]. Я попытался задействовать block-size, но это свойство ещё не работает. Пожалуйста, поправьте меня, если я ошибаюсь.

<div class="o-grid">  <div class="o-grid__item">    <article class="c-article">      <!-- content -->    </article>  </div>  <div class="o-grid__item">    <article class="c-article">      <!-- content -->    </article>  </div>  <!-- other articles.. --></div>
.o-grid__item {  contain: layout inline-size;}

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

.o-grid__item {  contain: layout inline-size;}@container (min-width: 400px) {  .c-article {    display: flex;    flex-wrap: wrap;  }  /* other CSS.. */}

@container это элемент .o-grid__item, а min-width: 400px его ширина. Мы даже можем пойти дальше и добавить больше стилей. На видео показано, чего можно добиться от компонентов:

У нас есть следующие стили:

  1. По умолчанию (вид карточки).

  2. Горизонтальная карточка с маленьким предпросмотром.

  3. Горизонтальная карточка с большим предпросмотром.

  4. Если родительский компонент слишком большой, стиль будет похож на стиль раздела hero, указывая, что это избранная статья.

Давайте углубимся в примеры применения контейнерных запросов.

Случаи применения контейнерных запросов CSS

Контейнерные запросы и CSS-грид с auto-fit

В некоторых случаях применение auto-fit в CSS-гриде приводит к неожиданным результатам. Например, компонент оказывается слишком широким, и его содержимое трудно читается. Дам немного контекста: вот визуальный элемент, показывающий разницу между auto-fit и auto-fill в гриде CSS:

Обратите внимание, что при использовании auto-fit элементы расширяются, чтобы заполнить доступное пространство. Однако в случае автоматического заполнения `` элементы грида не будут разрастаться, вместо этого у нас будет свободное пространство (пунктирный элемент в крайнем правом углу).

Возможно, вы сейчас думаете, как этот факт относится к контейнерным запросам. Каждый элемент грида это контейнер, и, когда он расширяется (то есть когда мы используем auto-fit), нам нужно, чтобы компонент изменился, опираясь на это расширение.

<div class="o-grid">  <div class="o-grid__item">    <article class="c-article"></article>  </div>  <div class="o-grid__item">    <article class="c-article"></article>  </div>  <div class="o-grid__item">    <article class="c-article"></article>  </div>  <div class="o-grid__item">    <article class="c-article"></article>  </div></div>
.o-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  grid-gap: 1rem;}

Когда элемента четыре, результат должен выглядеть примерно так:

Что произойдёт, когда количество статей уменьшится? Чем меньше у нас будет элементов, тем они будут шире. Так происходит потому, что мы используем auto-fit. Первый выглядит хорошо, но последние два (2 на ряд, 1 на ряд) не очень: они слишком широкие:

Что делать, если каждый компонент статьи изменяется в зависимости от ширины родительского компонента? Если так, auto-fit будет очень хорошим преимуществом. Вот что нужно сделать: если ширина элемента грида превышает 400 пикселей, статья должна переключиться на горизонтальный стиль, а добиться этого можно так:

.o-grid__item {  contain: layout inline-size;}@container (min-width: 400px) {  .c-article {    display: flex;    flex-wrap: wrap;  }}

Кроме того, если статья единственный элемент в гриде, хочется отобразить её с разделом hero.

.o-grid__item {  contain: layout inline-size;}@container (min-width: 700px) {  .c-article {    display: flex;    justify-content: center;    align-items: center;    min-height: 350px;  }  .card__thumb {    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 100%;    object-fit: cover;  }}

Вот и всё. У нас есть компонент, реагирующий на ширину родительского компонента, и он работает в любом контексте. Разве это не потрясающе? Посмотрите демо на CodePen.

aside и main

Часто нам нужно настроить компонент, чтобы он работал в контейнерах небольшой ширины, таких как <aside>. Идеальный пример раздел новостей. Когда ширина маленькая, нужно, чтобы её элементы складывались, а когда места достаточно, нужно горизонтальное расположение элементов.

Как видно на рисунке, мы работаем с разделом новостей в двух разных контекстах:

  • Раздел aside.

  • Раздел main.

Такое невозможно без контейнерных запросов, если у нас нет класса вариаций в CSS, например .newsletter--stacked или чего-то в этом роде.

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

.newsletter-wrapper {  contain: layout inline-size;}/* The default, stacked version */.newsletter {  /* CSS styles */}.newsletter__title {  font-size: 1rem;}.newsletter__desc {  display: none;}/* The horizontal version */@container (min-width: 600px) {  .newsletter {    display: flex;    justify-content: space-between;    align-items: center;  }  .newsletter__title {    font-size: 1.5rem;  }  .newsletter__desc {    display: block;  }}

Вот видео с результатом.

Посмотрите демоверсию на CodePen.

Пагинация

Я обнаружил, что контейнерные запросы хорошо подходят для пагинации. Сначала у нас могут быть кнопки Previous и Next; если пространства достаточно, можно скрыть кнопки и показать всю нумерацию страниц. Посмотрим на рисунок ниже:

Чтобы справиться с приведёнными выше состояниями, сначала нужно поработать над стилем по умолчанию (кнопками в виде стопки), а затем над двумя другими состояниями.

.wrapper {  contain: layout inline-size;}@container (min-width: 250px) {  .pagination {    display: flex;    flex-wrap: wrap;    gap: 0.5rem;  }  .pagination li:not(:last-child) {    margin-bottom: 0;  }}@container (min-width: 500px) {  .pagination {    justify-content: center;  }  .pagination__item:not(.btn) {    display: block;  }  .pagination__item.btn {    display: none;  }}

Посмотрите демоверсию на CodePen.

Карточка профиля

Вот ещё один пример применения: контейнерные запросы идеально работают в нескольких контекстах. Состояние малого размера работает при маленьких видовых экранах и в контекстах вроде сайдбара. Состояние большого размера работает при гораздо больших контекстах, таких как размещение в гриде из двух колонок.

.p-card-wrapper {  contain: layout inline-size;}.p-card {  /* Default styles */}@container (min-width: 450px) {  .meta {    display: flex;    justify-content: center;    gap: 2rem;    border-top: 1px solid #e8e8e8;    background-color: #f9f9f9;    padding: 1.5rem 1rem;    margin: 1rem -1rem -1rem;  }  /* and other styles */}

При помощи этого кода теперь мы видим, как компоненты работают в разных контекстах без единого медиазапроса.

Посмотрите демоверсию на CodePen.

Элементы формы

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

.form-item {  contain: layout inline-size;}.input-group {  @container (min-width: 350px) {    display: flex;    align-items: center;    gap: 1.5rem;    input {      flex: 1;    }  }}

Посмотрите демо на CodePen.

Тестирование компонентов

Теперь, когда мы рассмотрели несколько случаев, когда контейнерные запросы могут быть полезны, возникает вопрос: как протестировать компонент? К счастью, мы можем сделать это с помощью свойства родительского компонента resize.

.parent {  contain: layout inline-size;  resize: horizontal;  overflow: auto;}

Об этом методе я узнал из этой замечательной статьи Брамуса Ван Дамма.

Легко ли отлаживать контейнерные запросы в DevTools?

Короткий ответ нет. Вы не увидите чего-то вроде @container (min-width: value). Я думаю, что это дело времени, поддержка такой отладки появится.

А запасной вариант для браузеров без контейнерных запросов?

Да! Конечно. Определённым образом можно предоставить альтернативу. Вот две замечательные статьи с объяснением, как это сделать:

Заключение

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

Если вы уже имеете некоторые навыки работы с CSS, но всё ещё не можете сказать, что разбираетесь во фронтенде можете обратить внимание на наш курс-профессию Frontend-разработчик, где вы сможете научиться создавать адаптивные веб-сайты сиспользованием CSS, Flexbox, разрабатывать интерактивные веб-сайты иприложения на JS иHTML, а также писать сложные компоненты на React и интерфейсы с авторизацией и с подключением к бэкенду.

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

Узнайте, как прокачаться и в других специальностях или освоить их с нуля:

Другие профессии и курсы
Подробнее..

Внедрение E2E-тестирования с Puppeteer и Jest

18.02.2021 10:20:32 | Автор: admin

Привет, Хабр!

Хотим поделиться краткой историей о том, как мы на одном из проектов Рексофт пришли к написанию автотестов, и почему сделали акцент именно на e2e-тестах.

Речь пойдет о работе с порталом крупного федерального заказчика, работающего в сфере B2B и B2C, имеющего серьезный трафик из всех регионов. Сайт писал не Рексофт. Ресурс попал к нам на поддержку какое-то время назад. Изначально проект содержал довольно много легаси кода, тестов не было, как и документации. Требовалось сделать редизайн по новым макетам, параллельно расширяя существующую функциональность. Обычная история.

В какой-то момент мы поняли, что ручное прокликивание интерфейса стало занимать очень много времени, и решили, что пришло время для автотестов.

Перед выбором подхода к автотестам классифицировали баги по типу: их большая часть касалась именно бизнес-логики (Javascript). Багов, связанных с кроссбраузерностью или вёрсткой, было не очень много.

Итак, цель была поставлена автоматизировать проверку бизнес-логики, т.е. заполнение и отправку форм, работу слайдеров и т.д.

В качестве базового фреймворка для тестов был выбран Jest, а для имитации действий пользователя Puppeteer. Последний выбрали благодаря тому, что он поддерживается Google и имеет отличную документацию. Нам было вполне достаточно тестов в одном браузере (Chrome) (хотя, есть инструменты, позволяющие с помощью Puppeteer запускать тесты и в других браузерах, например, Firefox и IE). Playwright тогда ещё не было, а Selenium, чисто субъективно, казался более сложным в развертывании.

Далее кратко опишу преимущества и недостатки e2e-тестов.

Недостатки e2e-тестов

Относительно высокая сложность написания. Нужно обладать определёнными навыками, чтобы написать компактный и легкочитаемый e2e-тест.

Проблема закопаться. Я точно знаю, что желание проверить всё и вся, может привести к написанию огромного количества избыточных тестов. Как побороть эту проблему? Не стоит пытаться протестировать абсолютно все возможные кейсы, достаточно сосредоточиться на основных.

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

Хрупкость e2e-тестов. Что я имею ввиду? Случай, когда тест падает без видимых на то причин, а при повторном запуске успешно выполняется, или же когда к падению теста приводит незначительное изменение в верстке. С хрупкостью тестов можно бороться с помощью автоматического перезапуска теста после падения. Помогут в этом раннер jest-circus и параметр retryTimes. Это практически полностью решает проблему ложных падений тестов.

Преимущества e2e-тестов

Гарантии. С e2e-тестами вы получаете определенные гарантии того, что система в целом работает корректно. Юниты такой гарантии не дают. Разумеется, это не значит, что вы получаете 100% гарантию того, что у вас работает абсолютно всё. Но вы будете уверены, что по крайней мере протестированные сценарии точно работают.

Снижение рабочей нагрузки. Без тестов разработчик вынужден думать как бы чего не сломать. Ведь не прокликивать же весь проект после очередного коммита с правками! С тестами вы узнаете о поломке еще до того, как код будет залит на стенд.

Ускорение разработки. Благодаря снижению количества багов и устранению ручных проверок интерфейса, серьезно экономится время. Причём e2e-тесты экономят не только ваше время, но и время тестировщиков (позволяя им заводить меньше багов, меньше коммуницировать, выясняя их детали и т. д.), время аналитиков (понятные тесты отличная документация, отвечать на вопросы аналитиков вы будете намного быстрее).

Ускорение рефакторинга. При рефакторинге js, e2e-тесты не придется переписывать. Да и рефакторинг в вёрстке тоже редко приводит к их переписыванию.

Нет зависимости от кодовой базы и js-фреймворка. Вы можете написать e2e-тесты даже к легаси коду, что поможет быстрее его отрефакторить. При этом вы практически не зависите от js-фреймворка, т.к. в тестах оперируете только сущностями браузера.

Лайфхаки

1. Для ускорения написания первых тестов можно записывать действия пользователя с помощью Headless recorder или с помощью встроенных в Chrome инструментов.

2. Если требуется проверить несколько наборов данных в рамках одного кейса и руки тянутся написать for внутри теста, используйте jest-each. Эта библиотека позволит прогнать несколько наборов данных в одном кейсе, сохранив читаемость кода:

each` url | selector | expectedIsVisible ${'/page1.html?land'} | ${'.js-order-button'} | ${true} ${'/page1.html'} | ${'.js-order-button'} | ${false} ${'/page2.html?land'} | ${'.js-order-button'} | ${true} ${'/page2.html'} | ${'.js-order-button'} | ${false}`.it('Отображение кнопок заказа на странице $url', async ({ url, selector, expectedIsVisible }) => { await page.goto(`${SERVER_URL}${url}`, {   waitUntil: 'networkidle2',   timeout: 0 }); expect(await isVisible(page, selector)).toEqual(expectedIsVisible);});

3. В случае возникновения ошибок, puppeteer не всегда корректно подсвечивает строку с ошибкой. Поэтому следует проверить код перед ошибочной строкой, часто ошибка кроется именно там.

4. Puppeteer позволяет запускать браузер с различными флагами, что иногда очень полезно (chrome://flags/). Ниже пример запуска браузера с отключенным флагом SameSite by default cookies

puppeteer.launch({ headless: true, slowMo: 80, args: [   '--disable-features=SameSiteByDefaultCookies' ]});

В качестве заключения

Написание e2e-тестов занимают около 5-10% от времени написания фичи. На фиксы багов уходило сильно больше времени, так что оно того стоило. Несмотря на ряд недостатков, e2e-тесты позволяют значительно ускорить процесс разработки и обрести уверенность в том, что основная функциональность системы работает.

Разумеется, при внедрении e2e-тестов для фронтенда необходимо учитывать специфику вашего проекта. Спасибо за внимание!

Подробнее..

Как обойти ограничение браузера и прикрепить сразу два файла и более мультидобавление файлов

03.03.2021 16:23:30 | Автор: admin
Привет, Хабр!

Давайте решим нетривиальную задачу. Представьте, что вам нужно скачать данные через интерфейс элементарным способом, например, кликнуть по кнопке Скачать фаилы.

Возьмём по умолчанию Chrome v.88. Задача звучит так:

  • Сгенерировать файлы на стороне клиента.
  • Скачать все сгенерированные файлы одним кликом.

Это может быть всё что угодно: кучка бинарников, большие архивы с бэкапами, галерея картинок и прочее. Мы же будем говорить именно о механизме скачивания как таковом, поэтому в качестве примера возьмём скачивание текста и картинок.


Само собой, можно решить такую задачу, просто сжав все нужные файлы в один ZIP-архив, а потом уже скачать его. Выходит, пользователь скачает единый файл, который потом самостоятельно разархивирует. Например, можно использовать библиотеку jszip, которая позволяет скачивать набор файлов, сжав их.

Вот небольшой пример скачивания с предварительным сжатием из документации:

var zip = new JSZip();zip.file("Hello.txt", "Hello World\n");var img = zip.folder("images");img.file("smile.gif", imgData, {base64: true}); zip.generateAsync({type:"blob"}).then(function(content) {// see FileSaver.jssaveAs(content, "example.zip"); });

А где тут нетривиальность? спросите вы. И будете правы. А если речь идёт об одновременном скачивании с сайта двух, трёх или десяти файлов? Например: есть лист в селекте, в котором можно выбрать определённое количество файлов для скачивания. Введём дополнительное условие: у пользователя нет установленного архиватора, поэтому вариант со сжатием в архив отбрасываем. Как решить такую задачу?

Сначала подготовим браузер. Chrome по умолчанию запрещает скачивать мультифайлы. Это сделано в целях безопасности. Поэтому эту функцию надо сначала разблокировать в настройках браузера:

  1. Заходим в настройки сайтов: chrome://settings/content.
  2. Переходим в доступ дополнительных прав (Additional permissions).
  3. Выбираем Automatic downloads.
  4. Добавляем необходимый сайт в категорию Allow.




Отлично, теперь ваш браузер стал менее безопасным позволяет скачивать на конкретном сайте сразу несколько файлов.

Подход #1 FileReader


Первый подход рассмотрим на примере генерации файлов с помощью FileReader и API для чтения base64. Отмечу сразу, что у FileReader довольно обширное API, поэтому выбирайте то, что больше нравится: text, arrayBuffer или binaryString.

(function () {  const button = document.getElementById("download_with_reader");  const content = ["content-1", "content-2", "content-3"];    const createLink = () => {    let link = document.createElement('a');    link.download = 'hello.txt';    return link;  }    const generateBlob = () => {    for (const [index, value] of content.entries()) {      const blob = new Blob([value], { type: "text/plain" });      download(blob, index);    }  }  const download = (blob, index) => {    const link = createLink();    let reader = new FileReader();    reader.readAsDataURL(blob);    reader.onload = function () {      link.href = reader.result;      link.download = `content-${index+1}.txt`;      link.click();    }  }    button.addEventListener("click", generateBlob);}) ();

[код на Gitlab]

Подход #2 createObjectURL


А ещё можно использовать createObjectURL он позволяет хранить File-объекты или Blob-объекты.

(function () {  const button = document.getElementById("download_with_url_object");  const content = ["content-1", "content-2", "content-3"];    const createLink = () => {    let link = document.createElement('a');    link.download = 'hello.txt';    return link;  }  const generateBlob = () => {    for (const [index, value] of content.entries()) {      const blob = new Blob([value], { type: "text/plain" });      download(blob, index);    }  }  const download = (blob, index) => {    const link = createLink();    link.href = URL.createObjectURL(blob);    link.download = `content-${index+1}.txt`;    link.click();    URL.revokeObjectURL(link.href);  }   button.addEventListener("click", generateBlob);}) ();

[код на Gitlab]

Подход #3 Скачивание по URL


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

(function () {(function () {  const button = document.getElementById("download_with_request");  const urls = ["images/image-1.jpg", "images/image-2.jpg", "images/image-3.jpg"];    const delay = () => new Promise(resolve => setTimeout(resolve, 1000));    const downloadWithRequest = async () => {    for await (const [index, url] of urls.entries()) {      await delay();      const link = document.createElement("a");      link.href = url;      link.download = `image-${index+1}`;      link.click();    }  }    button.addEventListener("click", downloadWithRequest);}) ();

[код на Gitlab]

Итого


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

Минимальное PWA

17.03.2021 00:15:17 | Автор: admin

Какие характеристики должны быть у web-приложения, чтобы соответствовать критерию "прогрессивное"? Понятно, что, как и обычные web-приложения, прогрессивные строятся на базе "большой тройки" web-технологий - HTML/CSS/JS. Но что именно делает web-приложения прогрессивными?

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

Принципы отбора характеристик

Я возьму пустой HTML-файл и буду постепенно добавлять к нему артефакты, превращающие его в PWA, пока мой смартфон не решит установить это приложение, а Chrome не перестанет выкидывать предупреждения. Chrome выбран по причине того, что основным "движителем" технологии PWA на данный момент является Google.

HTTPS

Первое, что нужно настроить на сервере - это шифрование трафика. Тут всё делается так же, как и для обычных web-приложений. Лично я использую Apache httpd, а сертификаты для шифрования генерирую через Let's Encrypt.

App Shell

Оболочка приложения - это минимальный набор файлов, позволяющий приложению запускаться в offline-режиме. Я попробую весь необходимый код (HTML/CSS/JS) по максимуму уместить в одном файле - index.html.

<!DOCTYPE html><html lang="en"><head>    <title>PWA</title>    <style>        BODY {            background-color: #FB9902;            color: #342309;            font-size: xx-large;            margin: 0;        }        DIV {            align-content: center;            display: grid;            height: 100vh;            justify-content: center;        }    </style></head><body><div>App Shell</div></body></html>

Manifest

Манифест является непосредственным маркером того, что данная страница является частью прогрессивного web-приложения. Подключается манифест в заголовке HTML-страницы:

<link rel="manifest" href="demo.pwa.json">

Специальных правил для наименования файла с манифестом я не видел, тип содержимого маркируется через значение manifestатрибута rel.

Пустой манифест генерирует такие сообщения об ошибках в Chrome:

Вот минимальное содержимое, которое не вызывает появления в Chrome предупреждений:

{  "start_url": "./",  "name": "PWA",  "display": "standalone",  "icons": [    {      "src": "./icon.png",      "sizes": "144x144",      "type": "image/png"    }  ]}

Icon

Как видно из предупреждений Chrome'а, иконка должна быть размера 144x144 минимум и в формате PNG, SVG или WebP. Примерно такую я и сделал:

В общем случае может быть множество иконок различных размеров.

Service Worker

После добавления минимального манифеста и иконки в Chrome остаётся только одно предупреждение - относительно service worker'а.

Service worker подключается через скрипты в оболочке приложения (index.html):

<script>    if ("serviceWorker" in navigator) {        self.addEventListener("load", async () => {            const container = navigator.serviceWorker;            if (container.controller === null) {                const reg = await container.register("sw.js");            }        });    }</script>

Минимальное содержимое файла sw.js:

'use strict';

вызывает вот такое предупреждение в Chrome: Page does not work offline

Stackoverflow сообщает, что предупреждение связано с отсутствием обработчика на событие fetch. Добавляем пустой обработчик:

'use strict';function hndlEventFetch(evt) {}self.addEventListener('fetch', hndlEventFetch);

Теперь предупреждение изменилось на:

Site cannot be installed: Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. See https://goo.gle/improved-pwa-offline-detection for more information.

Моя текущая версия Chrome: Version 89.0.4389.72 (Official Build) (64-bit)

Тем не менее, смартфон предлагает установить приложение при заходе на страницу:

То есть, на данный момент service worker может быть номинальным, но в ближайшем будущем (в августе 2021-го) этого будет недостаточно.

Кэширование

Чтобы наше приложение оставалось PWA и после августа 2021-го, нам нужно добавить кэширование файлов, входящих в оболочку приложения. Вот полный код service worker'а:

'use strict';const CACHE_STATIC = 'static-cache-v1';function hndlEventInstall(evt) {    /**     * @returns {Promise<void>}     */    async function cacheStaticFiles() {        const files = [            './',            './demo.pwa.json',            './icon.png',            './index.html',            './sw.js',        ];        const cacheStat = await caches.open(CACHE_STATIC);        await Promise.all(            files.map(function (url) {                return cacheStat.add(url).catch(function (reason) {                    console.log(`'${url}' failed: ${String(reason)}`);                });            })        );    }    //  wait until all static files will be cached    evt.waitUntil(cacheStaticFiles());}function hndlEventFetch(evt) {    async function getFromCache() {        const cache = await self.caches.open(CACHE_STATIC);        const cachedResponse = await cache.match(evt.request);        if (cachedResponse) {            return cachedResponse;        }        // wait until resource will be fetched from server and stored in cache        const resp = await fetch(evt.request);        await cache.put(evt.request, resp.clone());        return resp;    }    evt.respondWith(getFromCache());}self.addEventListener('install', hndlEventInstall);self.addEventListener('fetch', hndlEventFetch);

С таким service worker'ом наше приложение будет считаться прогрессивным и в Chrome 93+. Вот какие файлы легли в кэш:

Ошибка, которая высветилась в консоли - отсутствие файла favicon.ico:

GET https://bwl.local.teqfw.com/favicon.ico 404

Но это уже особенности работы браузера, а не PWA.

Резюме

Чтобы web-приложение считалось прогрессивным (в том числе и после августа 2021-го) оно должно удовлетворять следующим условиям:

  1. Использовать шифрование (HTTPS).

  2. Оболочка приложения (загружает манифест приложения).

  3. Манифест (загружает иконку и service worker).

  4. Иконка.

  5. Service worker.

  6. Кэширование файлов оболочки приложения.

При соблюдении этих условий PWA устанавливается на смартфоне:

Послесловие

На написание этой статьи меня натолкнуло сообщение в Chrome о том, что с версии 93 web-приложения без кэширования оболочки приложения более не будут считаться прогрессивными и им будет отказано в установке. Я вышел на PWA через такое замечательное приложение, как Vue Storefront. Разработчики провели гигантскую работу и привязали к Magento 2 фронт, созданный с использованием современных технологий (положа руку на сердце, оригинальный фронт Magento 2 очень сильно отстал от современных тенденций web-разработки).

Когда я разбирался с тем, как устроен Vue Storefront, я обратил внимание, что приложение написано из расчёта, что соединение с интернетом будет всегда. Что и понятно, e-коммерция без интернета перестаёт быть таковой. И хотя браузеры предоставляют определённые возможности для того, чтобы PWA были максимально похожи на нативные мобильные приложения, современные PWA не спешат их использовать. Всё-таки, они во-первых - web, а прогрессивные - лишь во-вторых. Можно написать web-приложение, можно написать serverless приложение (за исключением App Shell, манифеста и service worker'а, разумеется - их всё равно придётся тянуть с сервера). Но написать приложение, которое бы работало как web-приложение при наличии интернет-соединения, и работало в автономном режиме в его отсутствие - в разы сложнее каждого из этих вариантов.

Именно поэтому разработчики Vue Storefront не стали заморачиваться с автономной функциональностью, ограничившись кэшированием статики и некоторых данных. Именно поэтому для Vue Storefront вылетает сообщение о том, что в Chrome 93+ их приложение более не будет считаться прогрессивным (демо, откройте консоль). Кстати, для собственной PWA-разработки самой Magento ситуация аналогичная.

Другими словами Google ужесточает критерии PWA, сдвигая фокус от web'а в сторону мобильных платформ. Конечно, можно и дальше называть обычные web-приложения прогрессивными, даже если они на 100% предполагают использование на десктопах и в условиях стабильного интернет-соединения. Но общая тенденция говорит о том, что место для PWA - мобильные устройства:

In December 2020, Firefox for desktop abandoned implementation of PWAs (specifically, removed the prototype "site-specific browser" configuration that had been available as an experimental feature). A Firefox architect noted: "The signal I hope we are sending is that PWA support is not coming to desktop Firefox anytime soon." Mozilla still plans to support PWAs on Android.

Разработчики Firefox не собираются поддерживать PWA в десктопной версии своего браузера.

Нельзя сказать, что PWA являются чисто Google'овской технологией:

всё-таки поддержка PWA-технологии различными браузерами на различных платформах достаточно объемлющая. Но дрейф в сторону "мобилизации" технологии я игнорировать не могу.

На мой взгляд PWA - это "нишевое" решение, для мобильных устройств. Да, оно сделано с использованием web-технологий (HTML/CSS/JS) и крутится внутри браузера, но к разработке PWA нужно подходить скорее с точки зрения нативных мобильных приложений, чем с точки зрения web-приложений (сайтов или SPA).

Другими словами, если вам нужно именно web-приложение, то вам не нужно PWA. А вот если вам нужно разработать именно мобильное приложение, то PWA может быть приемлемым вариантом.

Подробнее..

Перевод Тонкости работы консоли разработчика Chrome

17.04.2021 14:23:59 | Автор: admin

Начнем с простого. Вот фрагмент кода JavaScript, который создает небольшой массив чисел, а затем изменяет его. Массив записывается в консоль как до, так и после изменения:

const numbers = [2, 3, 4, 5];console.log(numbers);// Square the numbersfor (let i = 0; i<numbers.length; i++) {    numbers[i] = numbers[i]**2;}console.log(numbers);

Более осторожный подход будет использовать Array.map() для обработки массива вместо цикла for...of. (Таким образом, ваши изменения будут применены неразрушающим образом к новому массиву.) Но есть причина, по которой я выбрал этот подход. Он демонстрирует первый пример некой странной причуды в консоли разработчика.

Чтобы увидеть проблему в действии, откройте эту страницу в браузере на базе Chromium (например, Chrome или Edge), затем откройте консоль разработчика и затем разверните списки массивов в консоли. Вы увидите два массива, но оба они будут экземплярами измененного массива:

Почему это происходит? Если окно консоли закрыто во время выполнения кода, и вы регистрируете объект, срабатывает шаблон ленивого вычисления. Ваша команда console.log() фактически регистрирует ссылку на массив. В интересах экономии памяти и оптимизации производительности Chrome не пытается извлечь информацию из массива, пока вы не развернете ее в консоли, то есть после того, как она будет преобразована в окончательную форму.

Есть много способов обойти эту проблему. Откройте консоль перед загрузкой страницы. Или явно преобразуйте массив в строку, когда вы его регистрируете, потому что строки не будут использовать ленивую оценку:

console.log(numbers.toString());

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

const objects = [ {name: 'Sadie', age: 12},{name: 'Patrick', age: 18}];console.log(objects);objects[0].age = 14;console.log(objects);

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

Как решить эту проблему? Вы можете преобразовать массив в строку, но не с помощью простого вызова toString(). Вместо этого вам нужно будет написать алгоритм, который будет делать это самостоятельно, или использовать библиотеку, или использовать JSON. Но, конечно, настоящая проблема в том, что эта ошибка может возникнуть в иерархии вложенных объектов, когда вы этого не ожидаете, и вы невольно примете информацию в консоли разработчика, если она окажется неточной. Лучшая защита - знать о возможности ленивой оценки. Еще одна хорошая практика - написать целевой код ведения консоли для вывода определенных свойств с примитивными типами данных. Не регистрируйте целые объекты и полагайтесь на расширяемое представление в консоли, если это не является абсолютно необходимым.

Подробнее..

Перевод Что вошло в релиз движка V8 версии 9.0

01.05.2021 20:09:31 | Автор: admin

17 марта 2021 был опубликован релиз девятой версии движка V8. Этот пост - краткое описание того что вошло в список изменений релиза.

Оригинальный пост V8 release v9.0

JavaScript

Индексы соответствия (match indices) в RegExp

Начиная с версии 9.0, разработчики могут получать массив начальных и конечных позиций, совпадающих c группами захвата, соответствующих регулярному выражению. Этот массив доступен через свойство .indices для объектов сопоставления, если регулярное выражение имеет флаг / d.

const re = /(a)(b)/d;      // Note the /d flag.const m = re.exec('ab');console.log(m.indices[0]); // Index 0 is the whole match.//  [0, 2]console.log(m.indices[1]); // Index 1 is the 1st capture group.//  [0, 1]console.log(m.indices[2]); // Index 2 is the 2nd capture group.//  [1, 2]

Более подробное описание по ссылке

Более быстрый доступ к свойствам через функцию super

Доступ к свойствам через функцию super (например, super.x) был оптимизирован за счет использования встроенной системы кеширования V8 и оптимизированной генерации кода в TurboFan. С этими изменениями, доступ к свойствам через функцию super, теперь ближе к тому, чтобы быть наравне с обычным доступом к свойствам, как видно из графиков ниже.

Детальное описание находится по ссылке

Запрет конструкции "for ( async of "

Была обнаружена и исправленна в V8 v9.0, грамматическая неточность. Теперь конструкция for ( async of не парсится больше.

WebAssembly

Более быстрые вызовы в JS-to-Wasm

V8 использует разные представления для параметров функций WebAssembly и JavaScript. По этой причине, когда JavaScript вызывает экспортированную функцию WebAssembly, вызов проходит через так называемую оболочку JS-to-Wasm, отвечающую за адаптацию параметров из области JavaScript в область WebAssembly, а также адаптацию результатов вызова, в противоположном направлении.

К сожалению, это приводит к снижению производительности, а это означает, что вызовы из JavaScript в WebAssembly были не такими быстрыми, как вызовы из JavaScript в JavaScript. Чтобы свести к минимуму эти проблемы перфоманса, оболочка JS-to-Wasm теперь может быть встроена в сайт вызова, упрощая код и удаляя этот лишний фрейм.

Допустим, у нас есть функция WebAssembly, которая складывает два двойных числа с плавающей запятой, например:

double addNumbers(double x, double y) {  return x + y;}

и например, мы вызывем эту функцию в JavaScript, чтобы добавить несколько векторов (представленных в виде типизированных массивов):

const addNumbers = instance.exports.addNumbers;function vectorSum(len, v1, v2) {  const result = new Float64Array(len);  for (let i = 0; i < len; i++) {    result[i] = addNumbers(v1[i], v2[i]);  }  return result;}const N = 100_000_000;const v1 = new Float64Array(N);const v2 = new Float64Array(N);for (let i = 0; i < N; i++) {  v1[i] = Math.random();  v2[i] = Math.random();}// Warm up.for (let i = 0; i < 5; i++) {  vectorSum(N, v1, v2);}// Measure.console.time();const result = vectorSum(N, v1, v2);console.timeEnd();

Эта функция все еще является экспериментальной, и ее можно включить с помощью флага --turbo-inline-js-wasm-calls.

Подробнее см. дизайн документ.

Подробнее..
Категории: Javascript , Google chrome , Webassembly , V8

Перевод Sparkplug неоптимизирующий компилятор JavaScript в подробностях

09.06.2021 20:16:20 | Автор: admin

Создать компилятор JS с высокой производительностью означает сделать больше, чем разработать сильно оптимизированный компилятор, например TurboFan, особенно это касается коротких сессий, к примеру, загрузки сайта или инструментов командной строки, когда большая часть работы выполняется до того, как оптимизирующий компилятор получит хотя бы шанс на оптимизацию, не говоря уже о том, чтобы располагать временем на оптимизацию. Как решить эту проблему? К старту курса о Frontend-разработке делимся переводом статьи о Sparkplug свече зажигания под капотом Chrome 91.


Вот почему с 2016 года мы ушли от синтетических бенчмарков, таких как Octane, к измерению реальной производительности и почему старательно работали над производительностью JS вне оптимизирующих компиляторов. Для нас это означало работу над парсером, стримингом [этой поясняющей ссылки в оригинале нет], объектной моделью, конкурентностью, кешированием скомпилированного кода...

Впрочем, повернувшись лицом к улучшению производительности фактического, начального выполнения JS, мы столкнулись с ограничениями процесса оптимизации интерпретатора. Интерпретатор V8 сам по себе быстрый и сильно оптимизированный, но интерпретаторам как таковым свойственны накладные расходы, избавиться от которых мы не можем: например на декодирование байт-кода или диспетчеризацию неотъемлемые части функциональности интерпретатора.

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

Выход из положения Sparkplug: новый неоптимизирующий компилятор JavaScript, который мы выпустили вместе с V8 9.1, он работает между интерпретатором Ignition и компилятором TurboFan.

Новый процесс компиляцииНовый процесс компиляции

Быстрый компилятор

Sparkplug создан компилировать быстро. Очень быстро. Настолько, что мы всегда можем компилировать, когда захотим, повышая уровень кода SparkPlug намного агрессивнее кода TurboFan, [подробнее здесь, этой ссылки в оригинале нет].

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

Второй трюк в отличие от большинства компиляторов Sparkplug не генерирует промежуточное представление (IR). Вместо этого Sparkplug компилирует прямо в машинный код за один линейный проход по байт-коду и выдаёт соответствующий выполнению байт-кода машинный код. На самом деле компилятор это switch внутри цикла for, который занят диспетчеризацией, чтобы за каждой инструкцией закрепить генерирующие машинный код функции.

// The Sparkplug compiler (abridged).for (; !iterator.done(); iterator.Advance()) {  VisitSingleBytecode();}

Недочёт промежуточного представления (IR) заключается в том, что компилятор ограничен возможностями оптимизации. Поскольку промежуточной архитектурно независимой стадии нет, этот факт также означает, что всю реализацию нужно переносить на каждую поддерживаемую архитектуру отдельно. Но, оказывается, ни то, ни другое не является проблемой: портировать код довольно легко, вместе с тем Sparkplug не нужно выполнять тяжёлую оптимизацию.

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

Совместимые с интерпретатором фреймы

Добавление нового компилятора в зрелую виртуальную машину JS пугающая задача. Кроме стандартного выполнения в V8 мы должны поддерживать отладчик, профилирование центрального процессора с обходом стека, а значит, трассировки стека для исключений, интеграцию в стратегию динамического повышения уровня функции, замену на стеке, чтобы оптимизировать код горячих циклов. Работы много.

Sparkplug это рука мастера, которая ловкими, красивыми движениями упрощает большинство этих задач, то есть он поддерживает совместимые с интерпретатором стековые фреймы. Давайте вернёмся немного назад. При выполнении кода во стековых фреймах хранится состояние функции. Это касается каждого вызова какой-то новой функции: для её локальных переменных создаётся стековый фрейм. Этот стек определяется указателем на фрейм в начале и указателем на стек в конце.

Стековый фрейм с указателями стека и фреймаСтековый фрейм с указателями стека и фрейма

Сейчас около половины читателей закричит: "Диаграмма не имеет смысла, стек направлен в другую сторону!" Ничего страшного, я сделал кнопку: думаю, стек направлен вниз.

Когда функция вызвана, адрес возврата кладётся на стек и удаляется со стека функцией, когда она возвращается, чтобы знать, куда вернуться. Затем, когда функция создаёт новый фрейм, она сохраняет указатель на старый фрейм на стеке и устанавливает новый указатель в начало собственного стекового фрейма. Таким образом, на стеке образуется цепочка указателей на фреймы, каждый из которых отмечает начало фрейма, указывающего на предыдущий:

Стековые фреймы для нескольких вызововСтековые фреймы для нескольких вызовов

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

Это основной макет стека для всех типов функций; затем идёт соглашение о передаче аргументов и о том, как в своём фрейме функция хранит значения. В V8 мы имеем соглашение для фреймов JS, что аргументы до вызова функции (включая приёмник) добавляются на стек в обратном порядке, а также о том, что первые несколько слотов стека это вызываемая функция, контекст, с которым она вызывается, и количество передаваемых аргументов. Вот наш стандартный фрейм JS.

Это соглашение о вызове JS, общее для оптимизированных и интерпретируемых фреймов, именно оно позволяет нам, например, при профилировании кода на панели производительности отладчика проходить по стеку с минимальными накладными расходами.

В случае Ignition соглашение становится более явным. Ignition интерпретатор на основе регистров, это означает, что есть виртуальные регистры (не путайте их с машинными!), которые хранят текущее состояние интерпретатора. включая локальные переменные (объявления var, let, const) и временные значения. Эти регистры содержатся в стековом фрейме интерпретатора, вместе с указателем на выполняемый массив байт-кода и смещением текущего байт-кода в массиве.

Sparkplug намеренно создаёт и поддерживает соответствующий фрейму интерпретатора макет фрейма. Всякий раз, когда интерпретатор сохраняет значение регистра, SparkPlug также сохраняет его. Делает он это по нескольким причинам:

  1. Это упрощает компиляцию Sparkplug; новый компилятор может просто отражать поведение интерпретатора без необходимости сохранять какое-либо отображение из регистров интерпретатора в состояние Sparkplug.

  2. Поскольку компилятор байт-кода выполнил тяжёлую работу по распределению регистров, такой подход ускоряет компиляцию.

  3. Это делает интеграцию с остальной частью системы почти тривиальной; отладчик, профайлер, раскручивание стека исключений, вывод трассировки все эти операции идут по стеку, чтобы узнать, каков текущий стек выполняемых функций, и все эти операции продолжают работать со Sparkplug почти без изменений, потому всё, что касается их, они получают из фрейма интерпретатора.

  4. Тривиальной становится и замена на стеке (OSR). Замена на стеке это когда выполняемая функция заменяется в процессе выполнения; сейчас это происходит, когда интерпретированная функция находится в горячем цикле (в это время она поднимается до оптимизированного кода этого цикла) и где оптимизированный код деоптимизируется (когда он опускается и продолжает выполнение функции в интерпретаторе), любая работающая в интерпретаторе логика замены на стеке будет работать и для Sparkplug. Даже лучше: мы можем взаимозаменять код интерпретатора и SparkPlug почти без накладных расходов на переход фреймов.

Мы немного изменили стековый фрейм интерпретатора: во время выполнения кода Sparkplug не поддерживается актуальная позиция смещения. Вместо этого мы храним двустороннее отображение из диапазона адресов кода Sparkplug к соответствующему смещению. Для декодирования такое сопоставление относительно просто, поскольку код Sparklpug получается линейным проходом через байт-код. Всякий раз, когда стековый фрейм хочет узнать "смещение байт-кода" для фрейма Sparkplug, мы смотрим на текущую выполняемую инструкцию в отображении и возвращаем связанное смещение байт-кода. Аналогично, когда Sparkplug нужно узнать OSR из интерпретатора, мы смотрим на байт-код в смещении и перемещаемся к соответствующей инструкции Sparkplug.

Вы можете заметить, что теперь у нас есть неиспользуемый слот фрейма, где должно быть смещение байт-кода; избавиться от него мы не можем, поскольку хотим сохранить оставшуюся часть стека неизменной. Мы перепрофилируем этот слот стека, чтобы вместо него кешировать "вектор обратной связи" для текущей выполняющейся функции; это вектор, хранящий данные о форме объекта, и он должен быть загружен для большинства операций. Всё, что нам нужно делать, соблюдать осторожность с OSR, чтобы гарантировать, что мы подставляем либо правильное смещение байт-кода, либо правильный вектор обратной связи для этого слота. В итоге стековый фрейм Sparkplug выглядит так:

Полагаемся на встроенный код

На самом деле Sparkplug генерирует очень мало собственного кода. У JS сложная семантика, так что для выполнения даже самых простых операций требуется много кода. Принудительная повторная генерация такого кода при каждой компиляции оказалась бы плохим решениям по нескольким причинам:

  1. Из-за огромного количества кода, который необходимо сгенерировать, она значительно увеличила бы время компиляции.

  2. Этот подход увеличил бы потребление памяти кодом Sparkplug.

  3. Пришлось бы переписывать кодогенерацию для большого количества функциональности JS, что, вероятно, означало бы и больше ошибок, и большую поверхность атаки.

Поэтому, чтобы сделать грязную работу, вместо повторной генерации кода Sparkplug вызывает встроенные функции, небольшие сниппеты машинного кода, встроенного в двоичный файл. Они либо совпадают с теми, что использует интерпретатор, либо по крайней мере большая часть кода Sparkplug общая с кодом обработчиков интерпретатора. В действительности код Sparkplug это вызовы встроенных двоичных сниппетов и поток управления.

Вы можете подумать: "Ну и какой тогда смысл во всём этом? Разве Sparkplug не выполняет ту же работу, что и интерпретатор?" и во многом будете правы. Во многих отношениях Sparkplug является "просто" сериализацией выполнения интерпретатора, вызывая те же встроенные двоичные сниппеты и поддерживая тот же стековый фрейм. Тем не менее оно того стоит, потому что Sparkplug удаляет (или, точнее, предварительно компилирует) те самые неустранимые накладные расходы интерпретатора, такие как декодирование операндов и диспетчеризация следующего байт-кода.

Оказалось, что интерпретация эффективнее множества оптимизаций уровня центрального процессора: статические операнды динамически читаются из памяти интерпретатором, вынуждая процессор делать предположения о том, какими могут быть значения. Диспетчеризация к следующей инструкции байт-кода для сохранения производительности требует успешного прогнозирования ветви выполнения, и, даже если предположения и прогнозы верны, по-прежнему нужно выполнять декодирование и диспетчеризацию кода, а также занимать драгоценное пространство различных буферов и кешей. ЦП сам по себе эффективный интерпретатор, хотя он применяется к машинному коду. С этой точки зрения Sparkplug транспилятор из байт-кода Ignition в байт-код центрального процессора, перемещающий выполнение в "эмуляторе" к "нативному" выполнению.

Производительность

Так как же Sparkplug работает на практике? Мы выполнили несколько бенчмарков Chrome на наших ботах для замера производительности со Sparkplug и без него. Спойлер: мы очень довольны.

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

Speedometer

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

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

Обзор бенчмарка

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

На этих тестах мы решили посмотреть метрику V8 Main-Thread Thread, измеряющую общее проведённое в V8 время (включая компиляцию и выполнение), в основном потоке (то есть исключая стриминговый парсинг или фоновую оптимизацию). Это лучший способ увидеть, насколько оправдан Sparkplug, без учёта других источников шума бенчмарка.

Результаты различны и сильно зависят от машины и веб-сайта, но в целом выглядят прекрасно: видно улучшение около 515 %.

Медианное улучшение времени работы V8 в основном потоке на наших бенчмарках для просмотра с 10 повторениями. Полосы на диаграмме указывают на диапазон между квартилямиМедианное улучшение времени работы V8 в основном потоке на наших бенчмарках для просмотра с 10 повторениями. Полосы на диаграмме указывают на диапазон между квартилями

Таким образом, V8 имеет новый сверхбыстрый неоптимизирующий компилятор, повышающий производительность V8 в реальных бенчмарках на 515 %. Он уже доступен в V8 v9.1 (укажите опцию --sparkplug), и мы выпустим его вместе с Chrome 91.

Вот что важно заметить: выделившись в отдельную область разработки, фронтенд не ограничивается одним только JavaScript, например есть множество тонкостей в том, каким образом браузер работает с CSS. Вместе с тем оптимизации на уровне браузера не означают, что можно больше не писать аккуратный, компактный и элегантный код. Скорее они означают, что теперь разработчики будут свободнее чувствовать себя, когда захотят написать сложную или тяжёлую функциональность. Если фронтенд вам интересен, вы можете обратить внимание на наш курс Frontend-разработчик, где получите комплексную подготовку, чтобы в дальнейшем писать и поддерживать приложения различного масштаба и уровня сложности.

Узнайте, как прокачаться и в других специальностях или освоить их с нуля:

Другие профессии и курсы
Подробнее..

Сборники рецептов jq

14.04.2021 10:21:24 | Автор: admin
jq introjq intro

Мы все иногда сталкиваемся с необходимостью вытащить нужную информацию из JSON или YAML файлов. Многие уже познакомились с мощью утилиты jq. Судя по публикациям на Хабре, напр. http://personeltest.ru/aways/habr.com/ru/post/525808/, и вопросам в qna, тема до сих пор актуальна.

Мне в очередной раз пришлось вспомнить специфический DSL jq чтобы восстановить накопленные за долгое время закладки в Хроме, не сохранённые при апгрейде. Точнее, файл Bookmarks в формате .json сохранился, но ни в какую не хотел импортироваться в новый Хром. Хочу поделиться рецептом решения этой проблемы, заодно упорядочить собранные в разных местах миниатюрные скрипты для решения похожих проблем.

JQ в действительности полноценный язык программирования со всеми атрибутами - переменными, типами данных, арифметикой, циклами и условными переходами, массой встроенных функций и возможностью добавления новых. Удивительно, всё это в программке размером 30KB, страницей "man jq" такого же размера и библиотекой libjq размером 300KB.

Итак, заглянув в свой Bookmarks с несколькими сотнями ссылок, первый вопрос - какова структура этого .json файла? По счастью, я уже знал как быстро её посмотреть и использовать в дальнейших запросах. Вот эта команда:

... $ jq '[paths|join(".")]' Bookmarks|head -n 16
[
"checksum",
"roots",
"roots.bookmark_bar",
"roots.bookmark_bar.children",
"roots.bookmark_bar.children.0",
"roots.bookmark_bar.children.0.children",
"roots.bookmark_bar.children.0.children.0",
"roots.bookmark_bar.children.0.children.0.children",
"roots.bookmark_bar.children.0.children.0.children.0",
"roots.bookmark_bar.children.0.children.0.children.0.date_added",
"roots.bookmark_bar.children.0.children.0.children.0.guid",
"roots.bookmark_bar.children.0.children.0.children.0.id",
"roots.bookmark_bar.children.0.children.0.children.0.name",
"roots.bookmark_bar.children.0.children.0.children.0.type",
"roots.bookmark_bar.children.0.children.0.children.0.url",

Всего строк по количеству записей в json файле, нам достаточно увидеть структуру самого первого блока данных, далее она в основном повторяется. Уже видно, что Хромовские закладки организованы как вложенные папки и собственно ссылки. Папки здесь обозначены как массивы children, а ссылки как хэши с соответствующими полями.

Хром умеет импортировать закладки в виде .html файла. Ссылка в этом файле выглядит таким образом:

    <dt><a href="http://personeltest.ru/aways/www.youtube.com/watch?v=qbEPae8YNbs" add_date="0">Deep Dive on Amazon ECS - Brent Langston</a>    </dt><dt><a href="http://personeltest.ru/aways/aws.amazon.com/blogs/aws/new-import-existing-resources-into-a-cloudformation-stack/" add_date="0">Import Existing Resources into a CloudFormation Stack</a>

Таким образом, нам надо достать из json файла все значения .url и .name, затем добавить их в таблицу .html как строки. Значение ADD_DATE не обязательно. Вот так это извлекается из уже знакомой нам структуры данных .json файла:

... $ jq '.roots.bookmark_bar.children[].children[] | .url, .name' Bookmarks|tail -n 4"http://lib.rus.ec/b/285485/read""Мир многих миров. Физики в поисках иных вселенных (fb2) | Либрусек""https://picasaweb.google.com/Dr.Anticommunij""Picasa Web Albums - ophil"

Здесь вместо индекса массива в .json файле использовано обозначение [], означающее итерацию по всем элементам массива. Идём дальше. С такой же лёгкостью можно добавить в вывод желаемые строки, чередуя строки в фильтре со значениями из хэша:

... $ jq -jr '.roots.bookmark_bar.children[].children[] | ("<dt><a href=\"", .url, "\">", .name, "</a>\n")' Bookmarks|tail -n 2</dt><dt><a href="http://personeltest.ru/away/lib.rus.ec/b/285485/read">Мир многих миров. Физики в поисках иных вселенных (fb2) | Либрусек</a></dt><dt><a href="http://personeltest.ru/aways/picasaweb.google.com/Dr.Anticommunij">Picasa Web Albums - ophil</a>

Внимательный читатель заметил, что выше использованы 2 опции запуска jq:

  • -j --join-output - не вставлять новую строку в выводе, её можно задавать самому, см. символ \n

  • -r --raw-input - не выводить кавычки как в объектах json, их снова задаю вручную

Для сохранения всех закладок надо повторить эту команду для всех вложенных папок, например, добавить ещё один уровень вложенности .children[] и добавить результат в понятный Хрому .html файл. Начальный файл можно сделать создав в Хроме одну ссылку и экспортировав в файл, в который добавим извлечённые из старого Bookmarks закладки. Пару строк закрытия таблицы в самом экспортированном файле нужно удалить перед добавленными строками и вставить в самый конец:

</DL><p>

</DL><p>

Импорт покажет все закладки без разбиения на папки, но это лишь хороший повод навести порядок, удалить ненужные и отсортировать их в менеджере закладок Хрома с учётом прожитых лет.

Мощь jq работает точно также с файлами .yaml и .xml. Автор проекта "yq: Command-line YAML/XML processor" Андрей Кислюк для работы с этими форматами данных не стал изобретать велосипед, а реализовал на языке python преобразование YAML/XML в JSON, затем передачу команд и опций для выполнения в jq. Обратное преобразование в yaml задаётся опциями -y или -Y, если необходимо, см. https://kislyuk.github.io/yq/

Замечательный сборник рецептов нашёл у Remy Sharp'а https://remysharp.com/drafts/jq-recipes. Нашёл его поиском "jq cookbook", лучше него что-то сделать трудно. Надеюсь, его рецепты будут доступны несмотря на текущий статус draft.

Нельзя не посоветовать также документацию автора jq Stephen Dolan'а. Кроме самой документации, есть также tutorial, wiki, FAQ и ещё один сборник рецептов.

Подробнее..

Генерация картинок в коде

08.04.2021 02:10:23 | Автор: admin

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

Обоснование кейса

Не секрет что соцсети являются огромной площадкой для поиска аудитории что бы позитивно выделить свой материал в ленте сделать его узнаваемым и вызывающим желание кликнуть. нужно правильно оформить на странице The Open Graph тэги.

пример с установленными og и без нихпример с установленными og и без них

страница без og тегов выглядит довольно куцо в соцсети или мессенджере, просто строчка с текстом и всю информацию о том что внутри вы узнаете только перейдя по ней. Настроив og теги вы сразу же можете презентовать свой сайт. и сделать его узнаваемым и выделяющимся ещё до того как пользователь зайдёт к вам. Важной частью этой узнаваемости конечно является изображение. Хорошо если у вас лендинг и вам достаточно одной картинки на весь сайт. Но если у вас ресурс с огромным количеством контента то нужно как то разнообразить эти изображения и сделать уникальными, вооружившись пэинтом фотошопом можно без проблем сделать такую картинку, но процесс этот довольно рутинный и скучный и всё таки требует времени, но его можно автоматизировать. В этом месте и появляется задача генерировать такие изображения автоматически. Работая в charmer мы делаем проекты на высоком визуальном уровне и изображения для расшаривания в соцсетях и мессенджерах являются важной частью. Давайте перейдём к описанию решения.

Техническая часть

Все кто пытался редактировать изображения в коде, скорее всего сталкивался с imageMagick решение уже зарекомендовавшее себя, есть обертки под все популярные языки, до сих не теряет актуальности поддерживается и развивается. Позволяет делать магию с картинками, закрывает практически все потребности в обработке картинок. Что же не так с ImageMagick? Он невероятно сложен в использовании. Если нужно сделать относительно сложный визуал

Например как тут

то в imageMagick будет довольно тяжело всё это выстроить. Учитывая то что изображение для фона, не всегда подходят по размеру и пропорциям под итоговый вариант. И наложенный текст может быть любой длинны. Так же в тексте могут быть важные типографические контролы, например неразрывный пробел.

В общем достаточно сложно сделать какой то шаблон для изображений который будет собираться в imageMagick. Но существует уже отличное готовое и всем известное решение для верстки по шаблону это - HTML.

Как можно применять HTML и Headless browser можно увидеть на схеме ниже.

Принципиальная схемаПринципиальная схема

Первым делом создается знакомый всем rails разработчикам ERB template. По нему генерируется html файл и запускается headless browser, исполнение bash команд в руби реализовано в Kernel. Дальше браузер сохраняет скриншот в файл и готово. Мы получили результирующую картинку.

Производительность

Запуск внешнего приложения в коде звучит как задача которую нужно явно запускать в фоновом режиме. Для этой цели отлично подходит sidekiq. Возможно у вас chrome тоже вызывает устойчивую ассоциацию с избыточным потреблением памяти, но как показали тесты, в headless режиме память расходуется в щадящем режиме.

На видео видно потребление ресурсов при работе приложения. Заметно как резко подскочило цпу, но это настраивается уже через sidekiq на видео в нем паралельно запускаются несколько воркеров, код для генерации картинок потокобезопасный. Если настроить на один поток то потребление ресурсов будет гораздо скромнее. За 20 секунд сгенерировалось и сохранилось 50 изображений, что достаточно быстро для такой задачи.

Итоги

Конечной целью было создание инструмента который позволит решать описанную задачу быстро и надежно. При написании кода упор был сделан на минимальное конфигурирование, потокобезопасность и простоту в использовании. Исходники доступны на гитахбе и сам гем на rubygems. Если для кого то этот гем будет полезным и найдутся идеи и желание как то улучшить\исправить с радостью приму PR или комментарии) Всем спасибо, кто дочитал до конца!

Подробнее..

Перевод Google удалил расширение ClearURLs из Chrome Web Store

25.03.2021 14:07:14 | Автор: admin

Google по каким-то причинам удалил популярное расширение ClearURL.

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

Многие сайты имеют излишне длинные URL-адреса с дополнительными параметрами, которые не несут никого функционала, но используются просто для отслеживания. Это в большей степени относится к ссылкам, присутствующим, например, в информационных бюллетенях:

https://example.com?utm_source=newsletter1&utm_medium=email&utm_campaign=sale&some_other_tracking_bits=...

Например, при нажатии на результат поиска изображения Google не сразу отправляет вас на исходный URL-адрес своей веб-страницы, а на промежуточный URL-адрес, который и перенаправляет вас.

https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.bleepingcomputer.com%2F&psig=AXXXXXYAWa
&ust=1616XXXXXXX&source=images&cd=vfe&ved=0CXXXXe-p3XXX

Дополнительные параметры в указанном выше URL-адресе (ved, cd и т. д.) просто отслеживающие метки и источники перехода, используемые для аналитики.

ClearURLs предназначен для фильтрации таких параметров отслеживания из URL-адресов и повышения конфиденциальности пользователя в интернете.

Если бы все ссылки будут лишены таких посторонних меток, они будут иметь довольно минимальную длину, состоящую только из важных данных.

Разработчик подал апелляцию в Google против блокировки расширения и получил ответ: в копии электронного письма, предоставленного разработчиком, Google утверждает, что описание расширения слишком подробное и нарушает правила интернет-магазина Chrome.

Google также заявил, что в описании расширения не упоминается, что оно содержит определенные функции, такие как импорта/экспорта настроек, ведения журнала и кнопка пожертвования, что вводит в заблуждение. Также было заявлено в письме, что расширение без необходимости требует разрешение на запись в буфер обмена (clipboardWrite).

Роиберт изначально опроверг утверждение Google, заявив, что clipboardWrite используется для записи очищенных ссылок через контекстное меню в буфер обмен: в данном функционале больше нет необходимости, начиная с последних версий, потому что он переключился на другой метод копирования в буфер обмен.

Это разрешение было пережитком более ранней версии ClearURLs, сообщил Роиберт BleepingComputer в интервью по электронной почте.

Пользователи Chrome могут скачать и установить вручную расширение со страницы релизов на GitHub. Пользователи Microsoft Edge могу скачать расширение из Edge Add-ons store.

Роиберт также выпустил новую версию 1.21.0 с рекомендуемыми исправлениями, ожидающую проверки, которая появятся в магазинах Mozilla и Edge.

Подробнее..

Используем DevTools в headless Chrome

20.04.2021 12:16:22 | Автор: admin


Если вы когда-нибудь использовали Puppeteer, то наверняка сталкивались с неудобной отладкой скриптов на удалённых нодах headless Chrome. Часто так не хватает консоли, а лучше полноценной панели инструментов для изучения запросов и логов хотя постойте. Puppeteer сам по себе построен поверх Chrome DevTools Protocol, значит, наверняка есть куча решений для проброса данных в локальные DevTools? А вот и нет. Есть только два более-менее рабочих инструмента: отладчик для browserless.io и pptrconsole. Второй по функционалу и стабильности уже далеко впереди, поэтому поговорим про него.

Функционал


Сайт pptrconsole это по сути демка частично опенсорсного проекта ViewFinder, так что можно без проблем развернуть свою ноду и не зависеть от чужого облака. Цель ViewFinder развернуть полноценный доступ к удалённому headless-браузеру прямо во вкладке обычного браузера (здесь и дальше речь в силу очевидных причин пойдёт только про Chrome) внутри песочницы, сохранив доступ к максимальному количеству браузерных событий и взаимодействий, и, конечно, к DevTools. Чтобы максимально обезопасить конечный браузер от уязвимостей и прочих криптомайнеров, сервер не использует API браузера, вместо этого он просто стримит картинку (отображение и полученные данные живут в виртуальной среде). При этом разработчик делает упор на низкую задержку, так что картинка из самого браузера передаётся в минимальном приемлемом качестве, а панель DevTools отображает только запрошенные данные, что позволяет сократить нагрузку от одной вкладки до считаных килобит.

Fun fact: так как страница с панелькой выглядит и ведёт себя в точности как локальные DevTools (ещё бы, ведь обе исполняют код Chromium), можно из интереса сравнить версии



Помимо инструментов разработчика ViewFinder предлагает много фич, усложняющих обнаружение headless браузера и упрощающих использование:

  • Поддержка браузерных диалогов многие детекторы ориентируются на возможность и скорость прокликивания всплывающих окон
  • Работа с расширениями
  • Корректный юзер-агент
  • Не определяется использование DevTools Protocol
  • Корректный захват мыши и скролл на любых устройствах
  • Нормально работающие копирование и вставка
  • Заполнение форм (текстовые инпуты, чекбоксы, загрузка файлов)
  • История (отсутствует в привычном виде, но доступна для навигации по кнопкам и из консоли)
  • Можно работать в нескольких вкладках, и в том числе создавать вкладки инкогнито
  • Динамическое изменение качества картинки в зависимости от пропускной способности сети
  • Счетчик трафика на сервере и для вкладки
  • Доступность с любого девайса на всех популярных ОС


Как и сам Puppeteer, приложение построено на Node.js, причём весь браузер ViewFinder легко встраивается в другое приложение. Например, можно завернуть его в Electron и использовать как нативное приложение, или прикрепить DevTools к основной странице.

В интерфейсе можно писать, запускать и отлаживать скрипты Puppeteer:



Установка


Ставить будем на чистый VPS:

  sudo apt update && sudo apt -y upgrade  sudo apt install -y curl git wget certbot  curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh  bash ./install_nvm  source $HOME/.profile  source $HOME/.nvm/nvm.sh  nvm install --lts  npm i -g serve nodemon pm2 npm npx


Склонируем и запустим ViewFinder:

  git clone https://github.com/c9fe/ViewFinder  cd ViewFinder  npm i  npm start


Скрипт start.sh поддерживает следующие аргументы:

  ./start.sh <chrome_port> <app_port> <cookie_name> <username> token2


Также доступен докер-образ (установка для Ubuntu ниже):

  sudo apt-get update  sudo apt-get install \    apt-transport-https \    ca-certificates \    curl \    gnupg \    lsb-release  curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg  echo \  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null  sudo apt-get update  sudo apt-get install docker-ce docker-ce-cli containerd.io


Скачаем и запустим образ:

  docker pull dosyago/browsergapce:2.6  curl -o chrome.json https://raw.githubusercontent.com/c9fe/ViewFinder/master/chrome.json  sudo su -c "echo 'kernel.unprivileged_userns_clone=1' > /etc/sysctl.d/00-local-userns.conf"  sudo su -c "echo 'net.ipv4.ip_forward=1' > /etc/sysctl.d/01-network-ipv4.conf"  sudo sysctl -p  sudo docker run -d -p 8002:8002 --security-opt seccomp=$(pwd)/chrome.json dosyago/browsergapce:2.6


Или можно собрать образ самостоятельно:

  git clone https://github.com/c9fe/ViewFinder  cd BrowserGap  git fetch --all  git branch nexe-build  ./buld_docker.sh  ./run_docker.sh


Заключение


Как и у любого продукта, у ViewFinder есть свои слабые стороны: плохонькие юзабилити и дизайн не слишком мешают, а вот желание разработчика загнать полноценное пользование сервисом в SaaS модель напрягают. К счастью, он принципиально держит фронтенд и вообще большую часть проекта открытыми, да и для частного использования это сейчас практически безальтернативный инструмент. Судя по его комментариям, из-за большого спроса на качество картинки, в следующих релизах появится его регулировка, чтобы пользователи могли сами выбирать между экономией трафика и визуальной составляющей. Кроме того, вместо передачи отдельных фреймов в webp будет реализован h264-стрим (через конвертацию в ffmpeg). В любом случае проект интересный и закрывает целую нишу, так что своих пользователей он уже нашёл.



На правах рекламы


Эпично! Мощные серверы на базе новейших процессоров AMD EPYC для размещения проектов любой сложности, от корпоративных сетей и игровых проектов до лендингов и VPN.

Подробнее..

Как освободиться от Яндекс-дзена и прилипшей строки в поиске

31.03.2021 00:12:34 | Автор: admin
imageРечь пойдёт о юзер-стилях, помогающих программистам не отвлекаться на Дзен и не закрывать часть окна браузера поисковой строкой Яндекса.

Нет сомнения, что читатели сайта всё это знают, но не часто реагируют на желания Яндекса улучшить жизнь большинства. Я тоже, хотя когда-то писал эти стили для себя, уже почти год не реагировал на ребрендинг Главной Яндекса, когда окончательно убрали настраиваемые Виджеты и ввели Дзен. Но сегодня навёл некоторый порядок (когда окончательно стало понятно, что там особо нечего смотреть, а если и есть, то не в режиме рекламы), чтобы Яндексом было эффективнее пользоваться).

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

Дзен-баннеры под поиском


Кому-то наоборот, видео и реклама привлечёт свежие ассоциации и обогатит вид скудной поисковой строки, но мы сейчас про сосредоточенного на своей задаче пользователя. Что ему от Главной страницы Яндекса надо?

  1. поисковая строка;
  2. контекстные подсказки под ней;
  3. без анимаций и баннеров вокруг;
  4. конечно, без Дзена.

Вдруг иногда он понадобится? Или пользователь не один, или не всегда он такой сосредоточенный и может себе позволить заглянуть? Хорошо, оставим его, появляющегося по наведению мыши на заголовке Дэен под поисковой строкой.

Для решения этой задачи в десктопном браузере нужно установить юзер-стиль Yandex remove ads с сайта userstyles.org. Прежде чем его установить, в браузере нужно установить расширение (webextension) Stylus для Хрома (Яндекса, Оперы, Вивальди, других), для Firefox. И немного запастись терпением Почему?

К сожалению, он с трудом справляется с потоком посетителей, всегда очень тормозит и может открыть страницу за 1-2 минуты. Но сайт полезный, старый, собравший в себе многие юзерстили, и лучшего хостинга для них пока не придумали он уже последних года 3 в таком состоянии.

Если удастся этот стиль поставить, будут наблюдаться решения таких вопросов:

  1. Двигающаяся карусель из текстовых новостей показана статически, без анимаций,
  2. Между строчками есть пустоты, потому что там иногда появляются баннеры, вёрстка которых периодически меняется и меняет привычный расклад полезных блоков. Чтобы изменения наблюдались с меньшими последствиями, место для баннеров сохранено.
  3. На страницах картинок, погоды и новостей тоже по возможности убраны лишние элементы,
  4. Дзен не отображается, кроме заголовка, при наведении мыши на который весь Дзен виден, если с него продолжать не сводить мышку. Впрочем иногда бывает, что Яндекс не выдаёт заголовок, и тогда наводить мышь не на что. Беда не большая во множестве ссылок яндексовых порталов по ссылке ещё с Главной есть отдельная ссылка на Дзен-портал, там стили ничего не давят и там Дзену самое место.
  5. На страницу поиска ходят для поиска, поэтому на Главной видим его, бледный логотип (или дудлы) и 4 виджета с новостями, погодой, валютами и пробками.
  6. Если надо залогиниться в Яндекс, эти стили временно нужно отключить, потом включить после логина. Не настраивается красивая форма входа, потому что Яндекс, бывает, слишком часто меняет вёрстку, портя исправляющие стили. Поэтому лучше их не иметь.
  7. Код стилей имеет долгое наследие различных старых вариантов версток, которые не удаляются по причине, что неизвестно, когда старые варианты у компании становятся полностью забытыми. А кода прибавляют они сравнительно немного.
  8. Тот или другой стиль на лету выключается или включается через значок расширения в тулбаре (как на фото вверху над катом), не требуя перезагрузки страницы и никак не влияя на её содержимое можно манипулировать юзерстилями, не боясь потерять что-то набранное на странице.

Время от времени (от каждый день до раз в полгода), Яндекс меняет стили своих страниц, поэтому пользовательский юзерстиль может ломаться. Но код открыт, а автор стиля сам его иногда правит. Есть шансы, что при обновлении стиля с сайта userstyles.org функции снова подправятся в нужном направлении. Если же нет в тулбаре на значке расширения Stylus сломавшееся расширение можно отключить (или поправить своими силами).

Как не закрывать часть окна плавающей строкой поиска?


Для этой задачи есть другой юзерстиль "Yandex No Float Field". С ним верхнее поле с поисковой строкой перестаёт плавать и закрывать часть экрана, а плавает только логотип слева, при наведении на который появляется поисковая строка (без прокрутки вверх).

Дополнительно, этот стиль делает список подсказок чуть прозрачным и не полностью перекрывающим полезное содержание страницы. А 3 ссылки на поиск по Гуглу, Bing и Mail поставлены повыше, не в самом низу страницы.

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

Хотелось бы, конечно, видеть эти удобства в функциях самого сайта Яндекс, чтобы в десктопном и в мобильном дизайнах не требовалось бы пользоваться расширениями для улучшения его прямых функций поиска. К примеру, интерфейс Гугла при похожих возможностях проще и практичнее. (Хотя по прилипшей строке тоже пришлось позаниматься и с ним.)
Подробнее..
Категории: Css , Google chrome , Firefox , Yandex , Userstyles

Полезные функции DevTools для тестировщиков

21.05.2021 18:18:17 | Автор: admin

Всем привет! Меня зовут Миша, я работаю на позиции ручного тестировщика, или Manual QA - кому как удобно. В связи с тем, что в моей работе преобладает ручное тестирование - я часто сталкиваюсь с консолью разработчика в браузере (думаю как и 99.9% web-тестировщиков).

В интернете огромное количество источников, в которых можно найти информацию про DevTools, как для разработчиков, так и для тестировщиков. Конечно, наполнение таких статей очень сильно разнится в зависимости от ее направленности. Изучив большое количество подобного материала и поняв, что нас (тестировщиков) обделяют информацией :), решил залезть в первоисточник для изучения инструментов разработчика в полном объеме. Пройдясь по всем пунктам огромного меню, выписал для себя порядка 20 пунктов, которые были бы интересны (читай полезны) для тестировщиков. Сразу скажу, что в статье я не буду рассказывать, как пользоваться тем или иным инструментом, так как это подробно описано в статьях, которые будут прикреплены к каждому из пунктов. Цель моего повествования - скорее вычленить из огромного списка возможностей DevTools, именно те, которые были бы полезны для QA-специалистов. Не претендую на объективность и полную раскрытость темы, но постараюсь это сделать.

P.S.: Очередность пунктов в списке не говорит об их важности.

  1. Эмуляция android и ios, подключение android при отладке.

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

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

  2. Переопределение геолокации и подмена User-Agent.

    Продолжим рассматривать возможности DevTools для мобильных устройств. В вышеуказанных двух пунктах говорится о возможности изменять (подменять) геолокацию нахождения устройства и параметры юзер агента. Думаю, что многим тестировщикам частенько приходится воспроизводить какие-либо баги, которые были выловлены клиентами продукта не имея на то соответствующих технических возможностей. Подмена User-Agent поможет воспроизвести тот или иной баг, который был воспроизведен из какой-либо версии браузера или ОС. Закончив тестирование, никогда не забывайте возвращать данные User-Agent в исходное положение.

    Подмена User-AgentПодмена User-Agent
  3. Определение JS пути к строке.

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

  4. Изменение стилей CSS у элементов.

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

    Пример изменения размера поля элементаПример изменения размера поля элемента
  5. Неиспользуемые CSS и Javascript в вёрстке.

    Не будем забывать про тестирование производительности, данный пункт будет интересен именно с точки зрения ускорения загрузки Вашего web-сайта. Если количество неиспользуемого кода, который каждый раз пробегает при загрузке той или иной страницы, очень велико, то при помощи действий, описанных в статье, будет возможность найти весь неиспользуемый код и указать его, как артефакт в баг репорте.

    Отчет о покрытии кодаОтчет о покрытии кода
  6. Немного интересного про debug JavaScript.

    Многим этот пункт покажется лишним, ведь дебажить код - это вещь, которой в основном занимаются разработчики для отладки кода. Но со своей стороны хочу сказать, что это умение для тестировщика, лишним точно не будет. Безусловно для отладки кода необходимо уметь его читать. Думаю, многие видели большое количество мемов про JavaScript, которые красноречиво говорят о том, что язык далеко не самый легкий, особенно для простого обывателя. С другой стороны, некоторые данные иногда формируются на фронте, проходя несколько функций и понять почему в переменной сформировалось определенное значение, бывает очень важно. Даже в мои 3 года опыта работы в тестировании я уже сталкивался с дебагом кода именно в Chrome. Безусловно, без помощи разработчика я бы вряд ли смог это сделать, но в этой ситуации я понял, что этот момент очень важен.

  7. Сохранение изменений в Chrome при перезагрузке страницы.

    Такую возможность добавили в DevTools относительно недавно (с 65 версией). Она позволяет сохранять все изменения, которые были внесены в те же CSS стили, о которых я говорил выше. И при перезагрузке страницы они сохранятся, чтобы, например, была возможность посмотреть, как ведет себя измененная кнопка при загрузке страницы.

  8. Имитация медленного сетевого соединения.

    Эффект DevTools, который демонстрирует, как ведет себя страница при её загрузке на мобильных устройствах. Разработка, в 90% случаев, ведется при хороших условиях, связанных со скоростью интернета и его стабильностью, также как и тестирование, в связи с чем выловить баг, который воспроизводится у пользователя, становится возможным только полностью воспроизведя все окружение, в котором этот баг проявился. С появлением нового высокоскоростного интернета для мобильный устройств, возможно эта проблема будет не совсем актуальной, но пока этого не происходит. По крайней мере не во всех странах .

    Выбор скорости соединенияВыбор скорости соединения
  9. Настройка столбцов на вкладке Network.

    Тоже очень полезная вещь, которую я не смог найти ни в одной статье про DevTools для тестировщиков. Здесь можно настроить именно те столбцы, которые необходимы для анализа запросов на сайте в Вашем конкретном случае.

    Список возможных столбцов в NetworkСписок возможных столбцов в Network
  10. Снимки экрана при загрузке страницы.

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

  11. Блокирование запросов.

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

  12. Все о cookies во вкладке applications.

    Cookies - очень важная вещь для анализа пользовательских сессий, соответственно, так как мы (тестировщики) воспроизводим пользовательские сценарии, нам необходимо знать, как можно улучшить тест-кейсы, используя работу с куками. В статье описаны все сценарии (поиск, удаление, изменение данных).

Бонусы:

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

Безусловно DevTools не ограничивается тем функционалом, который я описал выше. Есть очень интересные вкладки, которые называется performance и audit, но я не стал нагружать еще этой информацией, так как считаю это темой для отдельной статьи, если в целом это интересно будет прочитать и познакомиться с этими вкладками в DevTools.

Всем спасибо за внимание!

Подробнее..

Перевод Шпион, выйди вон что делают браузеры после установки?

09.04.2021 12:18:12 | Автор: admin

Установка нового браузера не заканчивается его запуском. При первом старте браузеры проходят фазу донастройки что-то докачивают, конфигурируют и, конечно, рапортуют. Если посмотреть на соответствующие сетевые запросы, можно многое узнать о браузере в частности, какой информацией о пользователе и устройстве он поделится с неустановленной группой лиц.

В этой статье мы оценивали поведение пяти браузеров: Brave, Chrome, Firefox, Edge и Opera. Все исследования проводились на десктопе под управлением Windows 10 (версия 20H2, билд 19042.804) с подтвержденной учёткой Microsoft.

TLDR: меньше всего запросов делает Brave

В 2020 году профессор Дуглас Лейт из Тринити-колледжа (Дублинский университет) провел исследование браузеров и разделил их по тому, насколько успешно они хранят конфиденциальность пользователя. В первую группу вошел Brave как самый приватный браузер, во вторую Chrome, Firefox и Safari, в третью Edge и Yandex, которые защищали данные пользователя хуже всего. В нашем исследовании не участвовали Safari и Yandex, а в исследовании профессора Лейта Opera, но в целом мы получили похожие результаты.

У Brave сетевых запросов меньше всего, также меньше всего хостов, к которым он обращался. Все соединения были с бэкендами Brave. Множество запросов отправил Firefox, хотя большинство из них были связаны с безопасностью. Запросы отправлялись на узлы Mozilla. Edge был наиболее активен в отношении рекламы, он начинал собирать соответствующие данные раньше всего. Кроме того, браузер от Microsoft блестяще продемонстрировал, как много информации о пользователе можно получить через учетную запись Windows.

Chrome, как и Edge, пытается идентифицировать пользователя как можно раньше. Кроме того, он пересылает больше, чем другие браузеры, информации о том, что пользователь печатал или вставлял. Такую информацию, впрочем, передавали все браузеры, кроме Brave (Firefox ждёт, пока пользователь введёт хотя бы два символа, и только потом начинает передачу). Opera чаще всех отправляет запросы на сторонние хосты и проверяет каждый URL через sitecheck.opera.com.

Методология

Перед каждым анализом мы зачищали папки %appdata% и %localappdata% в Windows, т. е. информацию, относящуюся к профилю пользователя. Все браузеры были обновлены до последней версии. Чтобы отслеживать запросы, мы использовали программу Telerik Fiddler версии 5.0.20204.45441. Она мониторила запросы в течение 10 минут с момента первого запуска каждого браузера.

В течение первых пяти минут пользователь ничего не делал в браузере, а затем открывал новую вкладку. Любые запросы на сбор каких-либо данных, синхронизацию или персонализацию отклонялись. После открытия новой вкладки пользователь ничего не делал в течение еще четырех минут. На девятой минуте в адресной строке печаталось слово brave (как пример потенциального поискового запроса), а затем удалялось посимвольно. Потом пользователь вставлял в адресную строку слово password целиком и таким же образом это слово удалял. Это делалось для того, чтобы отследить, передает ли браузер данные пользователя, включая случайно вставленную информацию, каким-либо удаленным службам.

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

Подробные результаты по каждому браузеру

Brave версии 1.21.73

Запросы Brave распределились по следующим категориям.

  1. Запросы, связанные с защитой данных. Браузер скачал набор правил для блокировки рекламы, компонент HTTPS Everywhere, два списка отозванных сертификатов, список потенциально вредоносных URL (Safebrowsing) и набор правил, определяющих, какие плагины можно безопасно использовать.

  2. Запросы, связанные с функциональностью Brave. Например, набор кастомных HTTP-заголовков, а также набор правил для функции SpeedReader.

  3. Скачивание вариаций браузера. Это анонимные A/B-тесты, которые Brave проводит для улучшения своей работы.

  4. Скачивание Sponsored Images для региона пользователя это рекламные NTP. Пользовательские данные при этом никуда не передаются.

  5. Анонимная телеметрия и отчетность браузер отправляет дату установки, платформу, и несколько P3A-метрик.

После первоначальной настройки Brave также обновил некоторые компоненты.

Всего было сделано 70 запросов к 10 различным хостам, все хосты были поддоменами brave.com. Ни в одном запросе не содержалось персональных данных, только информация о версии браузера и некоторые данные об устройстве, на котором был установлен браузер (ОС, язык, объём памяти устройства). Когда пользователь набирал или редактировал символы в адресной строке, никаких запросов не было.

При повторном запуске было сделано 24 запроса, они касались обновлений компонентов браузера, заголовков, A/B-тестов и списков Safebrowsing.

Chrome версии 89.0.4389.72

Одним из первых запросов Chrome была попытка ассоциировать пользователя и существующий аккаунт Google. Затем браузер запросил возможные вариации Chrome также тестирует новые функции таким образом.

Далее браузер обновил компоненты и скачал набор расширений например, ярлыки Google Docs, Google Drive и YouTube. Запросил списки Safebrowsing и загрузил список проверенных плагинов.

Перед тем, как загрузить новую вкладку, Chrome запросил промо-сообщения, метаданные для дудлов, виджет Google Apps и необходимый для отображения новой вкладки JSON-файл.

Всего Chrome сделал 91 сетевой запрос к 5 доменам верхнего уровня. Все домены принадлежали Google. Хотя попытка ассоциировать пользователя и Google-аккаунт была, никакой персональной информации в итоге Chrome не передал. Как и Brave, Chrome собирал общую информацию об устройстве, с которого пользователь зашел в браузер.

Что касается ввода/вставки символов каждый символ передавался по адресу google.com/complete/search. Вместе с символами передавалась и другая информация, в основном не имеющая отношения к конкретному пользователю данные об устройстве, положении курсора и т. д. Также с виджетом Google Apps при создании новой вкладки приехала кука размером 180 байт. Этот файл потом отправлялся на google.com в каждом запросе, связанном с вводом символов.

При повторном запуске новых запросов замечено не было. Как и в первый раз, Chrome попытался найти аккаунт пользователя через accounts.google.com/ListAccounts. Поскольку пользователь не был залогинен, браузеру не удалось ничего обнаружить. Затем Chrome запросил обновления для дудлов и прочее, что требовалось для создания новой вкладки. Запросы к accounts.google.com, www.google.com, apis.google.com и ogs.google.com включали в себя всё ту же куку, выставленную при первом запуске.

Firefox версии 86

Первыми запросами Firefox проверял, доступен ли интернет. 21 запрос был отправлен для проверки содержимого удаленного файла success.txt. В 7 запросах не было строки запроса, еще в 7 была строка запроса ?ipv4, в последних 7 строка запроса ?ipv6. Для обновления своих служб безопасности Firefox сделал намного больше запросов, чем остальные браузеры свыше двух с половиной тысяч. Одним из первых ответов был набор списков, связанных с защитой от трекинга и другими аспектами безопасности. Также несколько запросов касались вариаций для A/B-тестов их так или иначе проводят все браузеры.

Затем Firefox установил WebSocket-соединение с сервером автопушей. Это соединение веб-приложения используют, чтобы иметь возможность отправлять пользователям уведомления, даже если они в данный момент не работают в браузере. Во время соединения сервер отправил браузеру идентификатор регистрации нового пользователя пушей Push User Agent Registration ID (UAID).

При запуске в Firefox было открыто две вкладки: одна обычная новая вкладка, вторая Уведомление о конфиденциальности для веб-браузера Firefox. Поскольку для второй нужно было подключение к интернету, отправлялись дополнительные запросы. Их было 22.

Всего Firefox отправил 2799 запросов к восьми доменам верхнего уровня. Большинство доменов принадлежали или поддерживались Mozilla. В конце первой сессии браузер сделал запрос к терминалу классификации клиентов, позже такой запрос был замечен повторно.

Что касается телеметрии, диагностические данные обычно содержали информацию о событии, браузере, а также идентификаторы клиента и сессии в браузере. Кроме того, несколько запросов были отправлены через отдельный процесс pingsender.exe. Этот процесс отправлял запросы и после того, как пользователь закрыл браузер, причем информации пересылалось довольно много: идентификатор клиента, данные об устройстве, о браузере, включая список дополнений, плагинов и даже данные о внешнем оформлении браузера, о тестах, в которых был задействован браузер, о количестве мониторов, об установленном антивирусном ПО и так далее. Интересно, что мы нашли ключ, который, судя по названию, должен был отвечать за передачу телеметрических данных: environment.settings.telemetryEnabled. В нем было выставлено false, но по факту данные пересылались, и в огромном объеме.

Последний запрос перед закрытием включал в себя множество разнообразных метрик. Хотя большинство из них к персональным данным отношения не имело, все же мы почувствовали себя неуютно, настолько подробной была телеметрия.

После ввода или вставки символов (не менее двух) Firefox отправлял запросы с этими символами в Google. Отметим здесь, что профессор Лейт не обнаружил подобных запросов, но он вставлял в адресную строку URL возможно, Firefox отправляет данные в поиск, только если они не представляют собой URL.

При повторном запуске браузера обнаружились новые запросы, которые содержали информацию в том числе об идентификаторах пользователя и сессии. Кроме того, поскольку Mozilla приобрела компанию-создателя сервиса Pocket, мы не удивились, увидев в запросах адреса getpocket.cdn.mozilla.net и spocs.getpocket.com. К тому же, похоже, что браузер на этот раз сгенерировал отдельный уникальный идентификатор для Pocket. Завершилась сессия четырьмя запросами двумя от процесса Firefox и двумя от pingsender.

Edge версии 88.0.705.81

Первым делом Edge попытался идентифицировать пользователя. Надо сказать, что возможностей для этого у браузера от Microsoft куда больше, чем у прочих, и пользуется он ими весьма агрессивно, получая данные из аккаунта Windows. Конечно, как и другие браузеры, Edge запрашивал списки безопасных плагинов и потенциально вредоносных URL, но это была лишь часть запросов. Еще часть была связана с рекламой и трекерами таких запросов было намного больше, чем у других браузеров, также больше было и запросов на к посторонним бэкендам.

Всего Edge отправил 367 запросов к 13 доменам верхнего уровня. Большинство доменов принадлежало Microsoft. В этих запросах присутствовала и потенциально конфиденциальная информация, причем защищена она была слабо.

Уже при установке браузер нашел в системе изображение владельца и адрес электронной почты. В запросах к различным хостам отправлялись данные о пользователе, в ответ также приходила всяческая информация например, результатом запроса на bing.com/fd/auth/signin стал набор кук с идентификаторами и именем владельца компьютера. Запрос на substrate.office.com вернул не только эти данные, но и дату рождения пользователя, его полное имя, местонахождение и пол. Еще один на ntp.msn.com вернул JSON-файл с информацией о местонахождении пользователя (с точностью до нескольких десятков километров).

Когда пользователь печатал / вставлял слова в адресную строку, Edge обрабатывал эти символы и предлагал варианты из bing.com/profile/history/data. Чтобы получить эти варианты, браузер использовал наборы кук с всевозможными идентификаторами.

Интересно, что Edge был единственным из браузеров, который отправлял специальные запросы, связанные с редиректами и онлайн-рекламой по технологии real-time bidding. Также Edge транслировал информацию ScorecardResearch, сервису, который специализируется на сборе данных о поведении пользователей в интернете. Этот сервис есть во многих блок-листах.

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

Разумеется, Edge отправлял и телеметрические запросы: в частности, на сайты arc.msn.com, browser.events.data.msn.com, edge.activity.windows.com, config.edge.skype.com, browser.pipe.aria.microsoft.com, target.microsoft.com, web.vortex.data.microsoft.com и clarity.ms. По окончании сессии браузер отправил данные о том, как долго была открыта страница, о ее размерах, о том, как далеко пользователь ее промотал, был ли он авторизован и многое другое. Когда пользователь печатал или вставлял символы, они пересылались на bing.com/qbox. В каждом таком запросе был идентификатор пользователя и имя владельца компьютера.

При повторном запуске Edge сделал еще 70 запросов, аналогичных тем, что были отправлены до этого.

Opera версии 88.0.4324.182

При запуске Opera отправил пользователя на redir.opera.com. Пока страница грузилась, еще два запроса прошли на sitecheck.opera.com, сервис, который проверяет URL на безопасность. Затем были загружены вариации браузера для конкретного региона все те же, которые нужны для A/B-тестов. Три запроса было сделано на exchange.opera.com скорее всего, они связаны с встроенным в браузер криптокошельком. Несколько запросов было сделано по поводу расширений. В конце сессии Opera запросил обновления и получил некоторые скрипты, наборы правил, настройки и информацию для расширения Rich Hints.

Всего было сделано 106 запросов к 30 доменам, из которых только 17 принадлежали или управлялись Opera Software. При первых запросах браузер отправлял данные, полученные из дистрибутива идентификатор установки, последний посещенный URL, откуда был скачан дистрибутив, и так далее. После этой отправки Opera запрашивал редирект на www.opera.com/firstrun/. Затем собирались данные о стране, откуда пользователь зашел, и языке системы, вместе с этой информацией пересылались идентификаторы.

При запуске Opera были замечены соединения с Google Analytics, Twitter и Hotjar. В Google направлялись данные технического характера, включая идентификаторы пользователя. Twitter также выдал нам куку с идентификатором пользователя. В Hotjar, судя по всему, никакие персональные данные не отправлялись. Три запроса ушло на android.clients.google.com, что удивительно ведь браузер установлен на Windows. Мы предполагаем, что браузер таким образом может отправлять какие-то уведомления на устройства пользователя.

Символы при вводе или вставки Opera сразу транслировал в Google для поиска в реальном времени. В этих запросах содержался идентификатор, сообщавший Google, что поиск идет с Opera.

При повторном запуске Opera сделал всего 16 запросов для обновления расширений, загрузки набора идентификаторов функций, а также получения свежей информации о курсе валюты и криптовалюты.

Подробнее..

WebUSB. Прошейся из браузера

31.05.2021 12:16:05 | Автор: admin


Разработчики хромиума постоянно пилят огромное количество классных API для разных технологий и железяк. Тут и Web Share, и работа со звуком, Bluetooth, NFC, WebOTP и много чего ещё, более-менее полный список со статусами реализации можно посмотреть здесь. Но больше всего среди них впечатляет WebUSB API, о настоящих возможностях которого я узнал совсем недавно. Оказывается, с его помощью можно не только открывать странички с подключенных устройств, но и прошивать их. Это открывает новый крутейший сценарий работы со всякой мелкой электроникой.

Пара слов про WebUSB


Главной фишкой WebUSB считается возможность использовать USB-девайсы так, чтобы они при подключении открывали какой-то заданный сайт или запускали веб-приложение в хроме вылезает уведомление, из которого можно его открыть. Главное преимущество в том, что можно писать кроссплатформенный код, который можно запустить сразу, без каких-либо инсталляторов и траты времени на выбор нужных файлов для ОС и архитектуры. Нажал на кнопку, получил результат.

WebUSB вышел в релиз в 2017 году, а в последний год его поддержка заметно выросла, так что ещё через годик он наверняка уже не будет восприниматься как какая-то диковинка. Кстати, это не полностью продукт гугла: в разработке стандарта активно участвовала Mozilla, но пока что, как и Apple, не торопится внедрять технологию в свой браузер из-за потенциальных уязвимостей. Конечно, API глубоко протестировано и запускается (очевидно) только под https, но из-за огромной мощности и количества потенциальных векторов атаки их точку зрения можно поддержать. С другой стороны, у 70% пользователей WebUSB уже давно живёт в браузере, и о критических уязвимостях пока не слышно.

Как и в большинстве новых API, WebUSB можно явно разрешить или запретить HTTP-заголовком Feature-Policy или атрибутом allow в iframe:

  Feature-Policy: fullscreen "*"; usb "none"; payment "self" https://payment.example.com

  <iframe allowpaymentrequest allow="usb; fullscreen"></iframe>

К тому же, получить доступ к списку устройств можно только через функциюnavigator.usb.requestDevice(), которая огромное модальное окно и запускается только в ответ на действие пользователя (вроде нажатия на кнопку). То есть злоумышленники не получат у вас доступ к девайсам, пока вы явно не вызовете их список и не выберете какой-нибудь вручную.



DFU


Полностью описывать механизм работы и нюансы API можно долго, и для этого есть web.dev и стандарт. Самое интересное в firmware. Так как железку, раздающую сайт, надо ещё научить это делать, разработчики, чтобы два раза не вставать, запилили возможность прошивать её прямо из браузера точнее, не сломали эту возможность :)


zhovner многим открыл глаза этим видео в том числе и мне

К USB-устройству обеспечен прямой доступ, со списком интерфейсов, VID/PID и другой информацией. Данные можно считывать и записывать управляющие команды, отслеживать состояния и так далее. Что из этого следует? Что тут же найдётся сумрачный гений, который запилит удобный инструмент, утилизирующий эти возможности! Так и появился PoC webdfu, позволяющий прошивать устройства в DFU-режиме.



DFU (Device Firmware Upgrade) это спецификация, созданная для упрощения обновления прошивки на USB-устройствах. Она поддерживается почти на всех ОС, работает в специальных программах вроде DfuSe и в оригинальной dfu-util. Как нетрудно догадаться из названия, webdfu служит драйвером USB-DFU для хрома. Он может:

  • Загружать текущую прошивку с устройства (upload)
  • Записывать новую прошивку на устройство (download)
  • Переключать устройство в режим DFU
  • Выполнять upload/download совместимо с STM'овской DfuSe

Не может:

  • Открыть устройство, если нет прав на доступ к нему или отсутствует базовый драйвер (Windows изрядно портит этим нервы)
  • Работать с файлами форматов DfuSe
  • Загружать прошивку в формате .dfu
  • Обрабатывать ошибки записи

А теперь возьмите полминуты паузы и подумайте: то, для чего раньше нужно было качать нужные драйвера, программы и библиотеки под разные ОС и архитектуры, теперь можно делать в пару кликов из браузера, на чём угодно! Будущее уже здесь.

Потестить это чудо техники можно с любым DFU-совместимым устройством, есть готовый проект dapboot для STM32F103, там вообще ни строчки писать не нужно, только собрать.

Ссылки





На правах рекламы


Виртуальные серверы с мгновенной активацией на Linux или Windows. Сервер готов к работе через минуту после оплаты!

Присоединяйтесь к нашему чату в Telegram.

Подробнее..

Как просто заблокировать сайты в веб- приложении Google Chrome?

30.03.2021 00:12:15 | Автор: admin
Огромный объем информации окружает пользователей повсюду. Создание и развитие современных персональных компьютерных устройств, в основной своей массе представленных стационарными персональными компьютерами, ноутбуками широкого вариативного ряда и мобильными устройствами, постепенно приобретающими масштабы популярности, схожие с компьютерами, совокупно с прогрессивным программным обеспечением позволяют задействовать значительную долю информационных материалов мгновенно и с высокой скоростью взаимодействия.

image



Введение


Но значительный прирост массива информации, постоянно или временно используемой пользователями, стал возможен после повсеместного распространения и внедрения глобальной международной компьютерной сети Интернет. Всемирная сеть является сосредоточением необычайно большого количества информационных ресурсов, содержащих самые разные виды открытых или закрытых цифровых данных.

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

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

Как быстро заблокировать веб-сайты непосредственно для себя?



image

Простой, удобный и довольно быстрый способ блокирования веб-сайтов в сетевом обозревателе Google Chrome связан непосредственно с использованием соответствующего расширения из, проверенных на совместимость и работоспособность, готовых решений Интернет-магазина Chrome. Мы рекомендуем воспользоваться предлагаемым потенциалом инструмента для повышения производительности Block Site (прямая ссылка на ресурс: chrome.google.com/webstore/detail/block-site-website-blocke/eiimnmioipafcokbfikbljfdeojpcgbh?hl=ru), препятствующем отображению, внесенных в пользовательский черный список, сетевых ресурсов.

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

Но насколько сложно и надежно данное решение? Абсолютно простое и понятное в использовании. Однако Block Site не является безусловным инструментом блокирования доступа к веб-сайтам. При необходимости внести определенные изменения, пользователи смогут перейти к настройкам расширения и быстро отредактировать установленные разрешения на блокировку, мгновенно устранив препятствие для отображения востребованного ресурса. И несмотря на способность расширения устанавливать дополнительную защиту в виде пароля для доступа к заблокированным сайтам и предпочтительным параметрам Block Site, любой из пользователей, имеющий доступ и возможность использовать данный компьютер, может обойти заданную блокировку путем применения другого веб-браузера.

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

Если у пользователей присутствуют определенные опасения, что расширению Block Site, блокирующему установленные в настройках сетевые ресурсы, разрешено просматривать и изменять пользовательские данные на посещаемых сайтах, то можно ограничить его доступ, используя инструмент управления правами доступа Google Chrome. Например, при желании заблокировать веб-сайт Facebook и запретить приложению Block Site задействовать операции просмотра и изменения, можно в настройках расширения веб-браузера установить подобное ограничение и отозвать разрешение непосредственно для данного конкретного сайта, внеся его в соответствующий список.

Опытные пользователи могут попытаться блокировать веб сайты с помощью изменения системного файла hosts, путем внесения в него дополнительного собственного списка доменов и связанных с ними IP-адресов. Однако Google Chrome игнорирует данный файл пользовательской системы, что предотвращает перенаправление зловредными программами веб-сайтов, таких как Facebook, во вредоносные местоположения и исключает возможное блокирование сайтов. Поэтому расширение Block Site является более предпочтительным, простым, удобным и полезным решением для ежедневного индивидуального применения.

Как заблокировать сайты с помощью родительского контроля?


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

В таком случае стоит рассмотреть возможность аппаратного способа сдерживания несанкционированного доступа к сетевым ресурсам. Многие маршрутизаторы Wi-Fi имеют встроенные функции блокировки веб-сайтов, и такой способ будет работать намного лучше, чем представленное в предыдущем разделе расширение обозревателя Google Chrome. Если используемый маршрутизатор оснащен подобной функцией, то пользователи могут указать в настройках устройства удаленной раздачи доступа к сети Интернет перечень запрещенных к посещению веб-сайтов, и никто из подключенных к данной сети Wi-Fi потребителей не сможет их посетить. Конечно, продвинутые и уверенные пользователи могут использовать VPN или прокси-серверы, чтобы обойти установленный черный список нет гарантированных и стопроцентных способов предотвращения доступа к закрытым сайтам. Но в любом случае, это мощный и достаточно надежный способ блокировки нежелательного содержимого в сети Интернет.

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

Например, создание семейной группы в Windows 10 позволят пользователям не только определять допустимые периоды времени использования компьютера, список разрешенных приложений и игр, ограничивать и контролировать покупки в магазине Microsoft Store, но и блокировать веб-сайты для связанной детской учетной записи. На устройствах Mac функция Screen Time, добавленная в Mac OS Catalina, позволит пользователям ограничить доступ к сайтам. В линейке ноутбуков Chromebook можно использовать Family Link, чтобы контролировать, какие веб-сайты разрешено посещать детским учетным записям.

Как заблокировать доступ к веб-сайтам в организации?


Данный вариант не поможет пользователям управлять Google Chrome в домашних условиях. Коммерческие организации, использующие Chrome Enterprise, могут использовать функцию URLBlacklist в Google Chrome для блокировки отдельных веб-сайтов. Эта функция предназначена для ИТ-специалистов, управляющих подключенными устройствами компании, устанавливающих корпоративные приложения, расширения и задающие другие правила управления на предприятиях. Внедрение функции блокировки позволит администраторам ограничить доступ подключенных пользователей к Интернету, повлиять на повышение общей производительности, увеличить защиту от вирусов и вредоносного содержимого потенциально опасных сайтов.

Для получения более подробной информации об использовании функции URLBlacklist ответственным специалистам компаний стоит обратиться к официальной документации по блокировке сайтов корпорации Google, полноценно представленной в сети Интернет на официальном сайте поддержки Google Chrome.

Заключение


Развитие и массовое повсеместное внедрение сверхбыстрых и мощных персональных компьютерных устройств, представленных на сегодняшний день широким модельным рядом стационарных и мобильных вариантов, под управлением современного программного обеспечения совокупно повлияло на создание, распространение и применение огромного объема разнообразных видов цифровых данных, значительная часть которых представлена в глобальной сети Интернет.

Возможности всемирной сети, помимо хранения информационных материалов и обеспечения различных способов их передачи, сфокусированы, в том числе, на предоставлении пользователям широких возможностей по изучению и удаленному взаимодействию, с представленными в Интернете на разных ресурсах, данными, общее количество которых велико и постоянно увеличивается.

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

Полную версию статьи со всеми дополнительными видео уроками смотрите в источнике. Если у вас остались вопросы, задавайте их в комментариях. А также зайдите на наш Youtube канал, там собраны более 400 обучающих видео.
Подробнее..

Лучшие флаги Google Chrome для повышения удобства пользователей

29.03.2021 00:13:50 | Автор: admin
Веб-браузер Google Chrome, на сегодняшний день, наиболее востребованный среди пользователей. Он по праву занимает лидирующее положение в списке бесплатного программного обеспечения.

image

Введение


Одной из главных отличительных особенностей, выгодно выделяющей веб-браузер на фоне других многофункциональных веб-приложений, является высочайшая скорость загрузки и отображения сетевого ресурса при непосредственном к нему обращении. Дополнительно, помимо приятного, исполненного в простом минималистическом виде, пользовательского интерфейса, приложение Google Chrome оснащено множественными предустановленными функциональными инструментами, каждый из которых направлен на обеспечение беспрепятственного функционирования веб-браузера, облегчение общего взаимодействия и поддержку высокого уровня безопасности, ограждая пользователей от вероятно потенциально опасного содержимого и блокируя предполагаемые вредоносные воздействия очевидных зловредных сетевых инструментов.

Разработчики веб-браузера Google Chrome постоянно работают над улучшением существующих функций, дополняя и усовершенствуя их, в зависимости от предъявляемых новых требований, возникающих непосредственно в процессе использования приложения.

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

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

Данные флаги были протестированы в приложении Google Chrome 78 в ноябре 2019 года. Но даже если пользователи загрузили и используют уже более новую версию Google Chrome, многие из них, вероятно, все еще будут так же доступны.

Примечание. Некоторые экспериментальные функции, которые доступны на странице флагов не проходят проверку и при следующем обновлении веб-приложения исчезают из списка предлагаемых образцов. Например, флаг enable-reader-mode, который сокращает веб-страницу до минимума, упрощая ее отображение, и позволяет пользователям прочесть статью без отвлекающих факторов, рекламы и дополнительного всплывающего содержимого, теперь недоступен в новой версии Google Chrome. Но если потребность в данной функции существует, то мы рекомендуем установить расширение Reader Mode из Интернет-магазина Google Chrome или переключиться на другой браузер со встроенным режимом чтения, такой как Mozilla Firefox, Microsoft Edge или Apple Safari.

Как включить флаги в Google Chrome?


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

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

Кроме того, необходимо помнить, что разработчики Google могут удалить какую угодно произвольную функцию из представленных вариантов в любое время, поэтому лучше не использовать их на постоянной основе. Существует вероятность, что какой-либо конкретный флаг может просто исчезнуть после следующего обновления веб-браузера. Это случается не часто, но все же происходит. Например, функция Filesystem API in Incognito, которая была доступна в семьдесят восьмой версии веб-браузера Google Chrome уже отсутствует в следующем выпуске. В определенных случаях отдельные сайты блокируют отображение своего содержимого для тех пользователей, которые используют режим инкогнито. И данный флаг создает временную файловую систему в памяти, которая обычно отключена в безопасном анонимном режиме. Такая операция заставляет сайты думать, что пользователи используют обычный вариант Google Chrome, поэтому блокировка снимается и отображается вся представленная информация без ограничений. Возможно, подобный флаг появится вскоре в новом обновленном варианте и будет доступен для тестирования в следующих сборках, так как его способности довольно востребованы и интересны.

Если интерес к экспериментальным функциям не пропал, то откройте новую вкладку веб-браузера Google Chrome и в строке состояния введите (или скопируйте и вставьте) следующий адрес страницы флагов chrome://flags:

image

Затем нажмите на клавиатуре клавишу Ввод, чтобы непосредственно завершить переход на искомую страницу. Каждый флаг содержит подробную информацию о том, с какими операционными системами он работает: Windows, Mac, Linux, Chrome OS, Android или одновременно поддерживает все из перечисленных систем. Обязательно обратите внимание на перечень систем и убедитесь, что используемая на конкретном компьютерном устройстве операционная система присутствует в указанном списке.

image

Когда нужный флаг найден, щелкните раскрывающееся меню рядом с описанием экспериментальной функции и во всплывающей панели возможных вариантов действий выберите параметр Enabled (Включить), чтобы применить заложенные возможности функции к Google Chrome.

image

После включения флага пользователи должны перезапустить браузер, используя маленькую синюю кнопку Relaunch, которая появляется внизу страницы.

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

image

Теперь, когда мы рассмотрели простой способ включения флагов Google Chrome, давайте перейдем к лучшим функциям, повышающим удобство.

Функция группирования вкладок


image

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

Скопируйте и вставьте следующую ссылку chrome://flags/#tab-groups или вручную введите ее в соответствующей строке веб-браузера, а затем нажмите клавишу Ввод на клавиатуре, чтобы перейти непосредственно к флагу:

image

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

Функция очистки значков расширений с панели инструментов Google Chrome


image

Любые расширения или дополнения, устанавливаемые пользователями в веб-браузер Google Chrome, располагают свои значки на панели инструментов, информативно перегружая меню управления. Для уменьшения визуальной нагрузки и приведения панели управления к стандартному минималистическому виду, разработчики Google Chrome подготовили флаг, скрывающий значки расширений за одним объединяющим значком.

Вероятно, данная функция будет уже доступна в скором времени и включена изначально по умолчанию в набор стандартных приложений Google Chrome, но в настоящий момент пользователи могут с ней ознакомиться, только включив соответствующий флаг. Введите в строке адреса или скопируйте и вставьте следующую фразу chrome://flags/#extensions-toolbar-menu, а потом нажмите клавишу Ввод:

image

После перезагрузки веб-браузера выбранная функция будет активирована. Пользователи, справа от адресной строки состояния, смогут обнаружить новый значок расширений, представленный в форме кусочка головоломки. Панель инструментов и меню браузера Google Chrome будут очищены, а все установленные расширения будут скрыты за появившемся значком. Нажмите на значок схематически изображенной части мозаики, чтобы увидеть перемещенные значки расширений.

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

Функция автоматического отображения содержимого любого сетевого ресурса в темной теме


image

Пользователи могут включить темный режим отображения своего веб-браузера в настройках операционной системы, и Google Chrome, наряду с некоторыми другими приложениями, последует заданным приоритетам визуального представления, но большинство веб-сайтов будут игнорировать установленное тематическое обновление, останутся без изменений и будут представлены в своем обычном цветовом фоне. В распоряжении веб-разработчиков присутствует возможность производить кодировку своих сайтов, которая позволит автоматически переходить в темный режим вместе с остальной частью пользовательской операционной системы, но очень немногие ее применяют.

В флагах Google Chrome есть готовое решение для принудительного перехода на темный цвет. Включите экспериментальную функцию Force Dark Mode for Web Contents, и Google Chrome наложит темную тему на загружаемые веб-сайты, превратив светлый фон в темный, а текст представит в белом цвете. Действительно, полученный вариант итогового представления не идеален, не так хорош и не настолько оптимален, как темный режим, закодированный разработчиками сайтов, но он совсем не плох и пользователи могут выбрать несколько разных вариантов для его настройки.

Скопируйте и вставьте фразу chrome://flags/#enable-force-dark или вручную наберите ее в строке перехода Google Chrome и нажмите на клавишу Ввод, чтобы отыскать востребованный флаг:

image

Обновление: данный флаг, по-видимому, вызывает серьезные проблемы в Chrome OS начиная с Chrome 78. Не включайте его в Chromebook, иначе может потребоваться выполнить перезагрузку Chrome OS.

Функция вывода кнопки Воспроизведение / Пауза для музыки и видео


image

Многие пользователи регулярно слушают музыкальные произведения и просматривают различные видео композиции в сети Интернет. Часто они не ограничиваются только одной вкладкой, а открывают сразу несколько разных тематических сайтов. И когда подобных мультимедийных сетевых ресурсов запущено на разных окнах веб-браузера довольно много, то поиск нужной вкладки может оказаться непростой задачей. Небольшой активный индикатор Google Chrome на вкладках конечно помогает немного, но наличие скрытой кнопки Воспроизведение / Пауза способно помочь пользователям гораздо лучше.

Поэтому для облегчения управления музыкальным и видео содержимым включите функцию Global Media Controls. На панели управления веб-браузера Google Chrome появиться дополнительная кнопка Управляйте воспроизведением музыки, видео и других медиафайлов, нажатие на которую вызывает отображение вложенной всплывающей панели, где пользователи могут видеть название воспроизводимых композиций, а также регулировать, запускать и останавливать их исполнение.

Чтобы найти ответственный флаг, скопируйте и вставьте следующий фразу chrome://flags/#global-media-controls или самостоятельно осуществите ее набор в строке Google Chrome и нажмите клавишу Ввод для непосредственного перехода к указанной искомой функции:

image

Функция плавной прокрутки


image

Данный флаг обеспечивает плавную прокрутку при просмотре доступного наполнения сетевых ресурсов в Интернете с помощью компьютерной мыши и клавиатуры. Он использует более сглаженную, равномерную и понятную анимацию прокрутки при просмотре содержимого веб-страницы, тогда как встроенный по умолчанию в Google Chrome инструмент перемещения передвигается рывками, прерывисто и скачкообразно, особенно на гораздо более длинных страницах. Флаг устраняет такой недостаток, который присутствует в веб-браузере довольно давно.

Скопируйте и вставьте следующий адрес chrome://flags/#smooth-scrolling или вручную его наберите в ответственной строке Google Chrome и перейдите непосредственно к флагу, нажав на клавишу Ввод:

image

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

Функция повышения скорости взаимодействия с протоколом QUIC



image

Протокол QUIC (HTTP/3), разработанный корпорацией Google, позволяет веб-браузерам и веб-серверам быстрее общаться и передавать информацию друг другу, обладает большей устойчивостью к ошибкам и включает в себя шифрование TLS 1.3, что позволяет значительно повысить безопасность протокола. QUIC предлагает меньше накладных расходов при организации сетевого соединения и обеспечивает более быструю передачу данных при подключении. В отличие от предыдущих распространенных образцов протоколов, наличие ошибки, такой как потерянная в процессе передачи часть данных, не приведет к остановке соединения и ожиданию окончания устранения проблемы. QUIC будет продолжать передавать другие данные, пока существующая неполадка устраняется.

Несмотря на то, что поддержка протокола QUIC уже включена в Opera и Chrome Canary, пользователи могут активировать флаг Google Chrome и начать использовать его в стабильном канале непосредственно перед выпуском. Конечно, данная функция ускорит общее взаимодействие только в том случае, если пользователи обращаются к веб-сайту, размещенному на сервере с поддержкой QUIC.

Чтобы воспользоваться преимуществами протокола HTTP/3, введите следующую ссылку chrome://flags/#enable-quic или скопируйте и вставьте ее непосредственно в связанную строку Google Chrome, а затем нажмите на клавишу Ввод, чтобы включить флаг:

image

Полную версию статьи со всеми дополнительными видео уроками смотрите в источнике. Если у вас остались вопросы, задавайте их в комментариях. А также зайдите на наш Youtube канал, там собраны более 400 обучающих видео.
Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru