Антон Романков

Проблема заключается в том, что clients.openWindow(url); не открывает новую вкладку, если вкладка с таким URL уже открыта. Вместо этого он просто переходит на существующую вкладку с этим URL.

Для открытия новой вкладки даже в случае, если сайт уже открыт в браузере, вам нужно использовать window.open(url, '_blank');. Вот как это можно сделать в вашем коде:

self.addEventListener('notificationclick', function(event) {
    event.notification.close()
    const url = event.notification.data.url
    if (url) {
        window.open(url, '_blank');
    }
}, false);

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

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

Ну тут все просто. Если я правильно понял описание вопроса, то можно разделить массив нужным образом с помощью методов slice, filter, reduce..., затем сформировать 2 запроса с помощью fetch, и в конце воспользоваться Promise.all. Результаты выполнения запросов будут в массиве.

Можно контейнеру задать display: flex, внутренним блокам — flex: 1, а картинку как background поставить и задать ей нужное положение.

Набросал пример: https://codepen.io/romant094/pen/eYxvqeQ

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

Можно скрывать одну картинку и показывать другую через opacity.

<div class="portfolio-card-link">
  <a class="card-link" href="#">
    <img class="image-1" src="./Img and icon/arrowround.svg">
    <img class="image-2" src="./Img and icon/arrow45.svg">
  </a>
</div>

.portfolio-card-link .card-link img {
  transition: opacity 0.3s ease; /* Добавляем плавный переход */
}

.portfolio-card-link .card-link .image-2 {
  opacity: 0; /* Начальная прозрачность для второго изображения */
}

.portfolio-card-link:hover .card-link .image-1 {
  opacity: 0; /* При наведении на блок, первое изображение становится прозрачным */
}

.portfolio-card-link:hover .card-link .image-2 {
  opacity: 1; /* При наведении на блок, второе изображение становится непрозрачным */
}

Для того чтобы изменить размер области сьемки (а также отображения) в мобильной версии сайта, необходимо произвести изменения размеров элементов , и . Вам придется задать им новые размеры с использованием JavaScript в зависимости от разрешения экрана устройства. Вот пример того, как вы можете это сделать:

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const photo = document.getElementById('photo');

function adjustCameraSize() {
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;

  // Задайте новые размеры элементам в зависимости от размеров экрана
  video.width = screenWidth; // Ширина видео
  video.height = screenHeight; // Высота видео

  canvas.width = screenWidth; // Ширина canvas
  canvas.height = screenHeight; // Высота canvas

  photo.style.width = `${screenWidth}px`; // Ширина блока с фотографией
  photo.style.height = `${screenHeight}px`; // Высота блока с фотографией
}

// Вызывайте функцию при загрузке страницы и при изменении размера окна
window.addEventListener('load', adjustCameraSize);
window.addEventListener('resize', adjustCameraSize);

// Затем настройте вашу камеру с учетом новых размеров
navigator.mediaDevices.getUserMedia({ video: true })
  .then((stream) => {
    video.srcObject = stream;
    video.play();
    adjustCameraSize(); // Вызовите функцию снова после получения потока
  });

Этот код будет изменять размеры элементов , и в зависимости от размеров экрана устройства, и камера будет адаптироваться к новым размерам. Помимо этого, функция adjustCameraSize() вызывается при загрузке страницы и при изменении размера окна, чтобы учесть все возможные изменения размеров окна.

Учтите, что при изменении размеров элементов, вы также, возможно, захотите обновить свой CSS, чтобы элементы отображались корректно в новых размерах.

Проблема с отображением содержания страницы перед запуском вашего лоадера может возникнуть из-за того, что JavaScript выполняется асинхронно, и браузер начинает отображать страницу до завершения выполнения вашего скрипта. Чтобы избежать моментального отображения контента перед запуском лоадера, вы можете воспользоваться CSS для скрытия контента до тех пор, пока ваш лоадер не будет готов к работе.

Вот как это можно сделать:

1. Создайте CSS-класс для скрытия содержимого страницы. Например:

.hidden-content {
  display: none;
}

2. Примените этот класс к вашему элементу, чтобы скрыть содержание по умолчанию:

<body class="hidden-content">
  <!-- Ваш контент здесь -->
</body>

3. В вашем JavaScript скрипте, когда ваш лоадер готов к отображению, вы можете удалить класс `hidden-content` из элемента, чтобы отобразить контент:

// В вашем JavaScript скрипте, когда лоадер готов
document.addEventListener('DOMContentLoaded', () => {
  // ... Ваш код лоадера ...

  // Удалите класс 'hidden-content' со страницы, чтобы показать контент
  body.classList.remove('hidden-content');
});

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

Самое простое — таблицей, на мой взгляд

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

1. **Создайте образ macOS для восстановления**:
- Скачайте официальный образ macOS из App Store (если у вас есть доступ к нему).
- Создайте виртуальную машину в VirtualBox с пустым виртуальным диском.
- Запустите эту виртуальную машину и установите macOS на нее с использованием образа macOS из App Store.

2. **Подготовьтесь к сбросу пароля**:
- Завершите настройку начального профиля и пароля, который вы помните.
- Затем войдите в учетную запись администратора.

3. **Создайте нового администратора**:
- Перейдите в "Предпочтения" (System Preferences) -> "Пользователи и группы" (Users & Groups).
- Щелкните замок в правом верхнем углу и введите свой существующий пароль.
- В разделе "Пользователи" (Users) щелкните "+" для добавления новой учетной записи.
- Создайте нового пользователя с правами администратора и установите новый пароль для него.

4. **Сбросьте забытый пароль**:
- Выходите из настройки и перезапускайте виртуальную машину.
- После загрузки, войдите во вновь созданную учетную запись с правами администратора.
- После входа в систему, вы можете сбросить пароль для своей старой учетной записи через "Пользователи и группы".

5. **Удалите временного администратора**:
- После успешного сброса пароля вы можете удалить временного администратора, которого вы создали для сброса.

Этот метод поможет вам сбросить пароль для виртуальной машины macOS на VirtualBox. Убедитесь, что следуете инструкциям осторожно и законно, и помните, что Hackintosh-установки macOS на несанкционированные устройства могут нарушать лицензионное соглашение Apple.

В LibreOffice на macOS двойной пробел по умолчанию не используется для вставки точки, и к сожалению, в стандартных настройках программы нет опции для этого. Однако, вы можете настроить LibreOffice, чтобы он реагировал на двойной пробел, как вы хотите. Для этого, вам нужно использовать функцию автозамены. Вот как это сделать:

1. Откройте LibreOffice Writer (или другую часть LibreOffice, в которой вы хотите настроить эту функцию).
2. Перейдите в меню "Инструменты" (Tools) и выберите "Параметры" (Options).
3. В разделе "Языки" (Language) выберите "Автозамена" (AutoCorrect).
4. Во вкладке "Замена" (Replace), вы увидите список автозамен. Вы можете добавить свою собственную автозамену, чтобы двойной пробел заменялся на точку.
5. Нажмите на кнопку "Добавить" (Add), и введите следующие параметры:
- Заменить (Replace): Двойной пробел (два пробела).
- На (With): "." (точка).
6. Нажмите "ОК" для сохранения настроек.

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

Можно использовать transform: rotate + translate.
Пример тут:
https://codepen.io/romant094/pen/eYQxPPL

Почему бы webpack или gulp не настроить для это цели?

Можно вот этот, проверил, вроде все ок.
https://www.toptal.com/developers/cssminifier

Я бы чуть изменил структуру. Так будет в разы проще манипулировать стилями.
https://codepen.io/romant094/pen/BaGMqYQ

Обычный блок с background-image

Лучше такое на гридах делать. Если флексы, то проще сделать 2 ряда по 3 элемента, но я так понимаю, что это не совсем то, что вам надо.

https://developer.mozilla.org/en-US/docs/Web/CSS/:has
Также можно использовать :not:has
только обратите внимание на поддержку браузеров

.parent {
  display: flex;
}

.child {
  flex: 1;
}