• Как открыть новую вкладку браузера через клик по push-уведомлению, если сайт уже открыт?

    @romant094
    Frontend-developer
    Проблема заключается в том, что 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);
    Ответ написан
    Комментировать
  • Почему на ios разный select?

    @romant094
    Frontend-developer
    Селект — это один из самых сложных компонентов для реализации и кастомизации. Не получится нативными средствами сделать селект, который будет везде выглядеть одинаково. Нужно делать кастомный.
    Можно взять готовый, благо библиотек сейчас предостаточно.
    Ответ написан
    Комментировать
  • Как сделать пунктирное подчеркивание ссылок?

    @romant094
    Frontend-developer
    Удобно, чтобы можно было добавить padding-bottom.
    a {
      border-bottom: 1px dashed #cecece;
      padding-bottom: 3px;
    }

    Таким образом можно избавить от padding'a, не увеличивая физический размер элемента. Также можно анимировать появление / исчезновение.
    a {
      position: relative
    }
    
    a::after {
      position: absolute;
      bottom: 10px;
      left: 0;
      display: block;
      content: '';
      width: 100%;
    }

    Ну и самый простой и некастомизируемый вариант, как написал Михаил Р.
    Ответ написан
    4 комментария
  • Почему то работает, то не работает событие input в форме?

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

    @romant094
    Frontend-developer
    Ну тут все просто. Если я правильно понял описание вопроса, то можно разделить массив нужным образом с помощью методов slice, filter, reduce..., затем сформировать 2 запроса с помощью fetch, и в конце воспользоваться Promise.all. Результаты выполнения запросов будут в массиве.
    Ответ написан
    Комментировать
  • Telegram как лента?

    @romant094
    Frontend-developer
    Ответ написан
    Комментировать
  • Как сверстать и отцентрировать?

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

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

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

    @romant094
    Frontend-developer
    Можно скрывать одну картинку и показывать другую через 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; /* При наведении на блок, второе изображение становится непрозрачным */
    }
    Ответ написан
    Комментировать
  • Как скалировать video внутри тега?

    @romant094
    Frontend-developer
    Для того чтобы изменить размер области сьемки (а также отображения) в мобильной версии сайта, необходимо произвести изменения размеров элементов , и . Вам придется задать им новые размеры с использованием 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, чтобы элементы отображались корректно в новых размерах.
    Ответ написан
    Комментировать
  • Почему перед загрузкой лоадером на момент видно саму страницу?

    @romant094
    Frontend-developer
    Проблема с отображением содержания страницы перед запуском вашего лоадера может возникнуть из-за того, что 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');
    });

    Это гарантирует, что контент не будет виден до момента, когда ваш лоадер будет готов к работе, и после этого он будет отображаться нормально.
    Ответ написан
    Комментировать
  • Верстка блоку отзивов,как сделать так как на дизайне?

    @romant094
    Frontend-developer
    Самое простое — таблицей, на мой взгляд
    Ответ написан
    Комментировать
  • Есть ли возможность сбросить пароль macOC на VirtualBox?

    @romant094
    Frontend-developer
    Сброс пароля виртуальной машины 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.
    Ответ написан
  • Mac os: Как в libreOffice двойным пробелом поставить точку?

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

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

    Теперь, когда вы введете двойной пробел, LibreOffice будет автоматически заменять его на точку. Помните, что эта настройка будет работать только в LibreOffice, и не повлияет на другие приложения macOS.
    Ответ написан
    1 комментарий
  • Как на флексах прижать первую строку к левому краю, вторую к правому?

    @romant094
    Frontend-developer
    Можно использовать transform: rotate + translate.
    Пример тут:
    https://codepen.io/romant094/pen/eYQxPPL
    Ответ написан
    Комментировать
  • Онлайн css-минификатор без багов?

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

    Можно вот этот, проверил, вроде все ок.
    https://www.toptal.com/developers/cssminifier
    Ответ написан
    Комментировать
  • Как поменять цвет текста при выборе radio кнопки?

    @romant094
    Frontend-developer
    Я бы чуть изменил структуру. Так будет в разы проще манипулировать стилями.
    https://codepen.io/romant094/pen/BaGMqYQ
    Ответ написан
    Комментировать
  • Как сверстать эту нижнюю часть секции?

    @romant094
    Frontend-developer
    Обычный блок с background-image
    Ответ написан
    Комментировать
  • Как создать такую сетку при помощи флексов?

    @romant094
    Frontend-developer
    Лучше такое на гридах делать. Если флексы, то проще сделать 2 ряда по 3 элемента, но я так понимаю, что это не совсем то, что вам надо.
    Ответ написан
    Комментировать
  • Как перенести часть текста на другую строку в блочной структуре?

    @romant094
    Frontend-developer
    С блочными элементами никак, их нужно сделать инлайновыми
    Ответ написан
    Комментировать
  • Есть ли что то типо условия hasclass в CSS?

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