• Как отследить когда кеш сбросится?

    scoffs
    @scoffs
    Frontend | C# | Student
    Может что-то типа этого?

    После вызова self.skipWaiting() в Service Worker можно отправить сообщение об успешном сбросе кеша обратно в клиентскую часть приложения, используя postMessage(). В клиентской части вы можете прослушивать это сообщение и выполнить обновление страницы с помощью location.reload() или другого подходящего метода.

    // Service Worker
    self.addEventListener('message', event => {
        if (event.data && event.data.type === 'SKIP_WAITING') {
            self.skipWaiting();
            event.source.postMessage({ type: 'CACHE_RESET_SUCCESS' });
        }
    });


    // client
    navigator.serviceWorker.addEventListener('message', event => {
        if (event.data && event.data.type === 'CACHE_RESET_SUCCESS') {
            location.reload();
        }
    });


    Либо
    Если вы хотите, чтобы клиентская часть обновляла страницу после сброса кеша, вы можете прослушивать событие controllerchange на объекте navigator.serviceWorker. Когда Service Worker сбрасывается и становится активным контроллером, будет вызвано событие controllerchange, и вы можете выполнить обновление страницы.

    navigator.serviceWorker.addEventListener('controllerchange', () => {
        location.reload();
    });
    Ответ написан
    Комментировать
  • Как создать статью через VK API?

    scoffs
    @scoffs
    Frontend | C# | Student
    Насколько мне и знатокам API VK известно, на данный момент нельзя создать статью через API
    Ответ написан
    Комментировать
  • Как спарсить сайт, на котором всплывает окно?

    scoffs
    @scoffs
    Frontend | C# | Student
    Можно вручную найти нужный класс (возможно, что это не sg-button)

    Ещё можно попробовать использовать методы для работы с окнами в Selenium.

    from selenium import webdriver
    from selenium.webdriver.common.by import By
    import time
    
    driver = webdriver.Chrome()
    
    driver.get("https://znanija.com/app/ask?entry=hero&q=magic")
    time.sleep(3)
    
    # Переключаемся на всплывающее окно, если оно активно
    if len(driver.window_handles) > 1:
        driver.switch_to.window(driver.window_handles[1])
        driver.close()
    
    # Возвращаемся на основное окно
    driver.switch_to.window(driver.window_handles[0])
    
    # Кликаем на кнопку на основной странице
    driver.find_element(By.CLASS_NAME, 'sg-button').click()
    Ответ написан
  • Как вывести значения в API VK?

    scoffs
    @scoffs
    Frontend | C# | Student
    Чтобы получить только первые две строки результата, вы можете изменить ваш цикл for следующим образом:

    for i, p in enumerate(data1):
        if i < 2:  # Ограничение вывода только первых двух строк
            print('sex:', p['reach']['sex'])
            print('age:', p['reach']['age'])
    Ответ написан
  • Как добавить класс всем элементам при использовании querySelectroAll?

    scoffs
    @scoffs
    Frontend | C# | Student
    Для понимания проблемы достаточно вывести element в консоль при querySelectorAll и понять, что это массив. Тогда для присвоения доп. класса надо пройти по этому массиву и добавить этот самый класс.

    let elements = document.querySelectorAll('.advantages__item');
    
    window.addEventListener('scroll', check, false);
    
    function check() {
      if (window.scrollY > 300) {
        elements.forEach(function(element) {
          element.classList.add('show');
        });
      } else {
        elements.forEach(function(element) {
          element.classList.remove('show');
        });
      }
    }

    console.log() сила!
    Ответ написан
    3 комментария
  • Можно ли на чистом CSS показывать tooltip, только если текст не умещается в блоке?

    scoffs
    @scoffs
    Frontend | C# | Student
    На чистом CSS нет, тут можно сделать с помощью JS

    const block = document.getElementById('your-block-id'); // Замените 'your-block-id' на актуальный идентификатор вашего блока
    
    if (block.scrollWidth > block.offsetWidth) {
      // Текст обрезается и появляется троеточие
      // В этом случае вы можете добавить обработчик события наведения мыши, чтобы показать тултип
      block.addEventListener('mouseenter', showTooltip);
      block.addEventListener('mouseleave', hideTooltip);
    } else {
      // Текст полностью умещается в блоке
      // В этом случае вы можете удалить обработчики событий или не отображать тултип вообще
      block.removeEventListener('mouseenter', showTooltip);
      block.removeEventListener('mouseleave', hideTooltip);
    }
    
    function showTooltip() {
      // Код для показа тултипа
    }
    
    function hideTooltip() {
      // Код для скрытия тултипа
    }
    Ответ написан
    Комментировать
  • Как в запросе сослаться на предыдущие строки?

    scoffs
    @scoffs
    Frontend | C# | Student
    Возможно, вам надо что-то типа этого:
    SELECT * FROM (
      -- Внутренний подзапрос, применяющий оконную функцию LAG() к таблице calls
      SELECT *,
        LAG(duration) OVER (PARTITION BY cid_from ORDER BY call_time) AS previous_duration
      FROM calls
    ) AS subquery
    -- Основной запрос, фильтрующий результаты
    WHERE duration > 20 -- Длительность звонка больше 20 минут
      AND previous_duration < 2; -- Предыдущая длительность меньше двух минут
    Ответ написан
    1 комментарий
  • Как заставить Selenium работать с прокси socks5?

    scoffs
    @scoffs
    Frontend | C# | Student
    Мне кажется, что вы неправильно задаете параметры для использования прокси.

    Вместо того, чтобы указывать network.proxy.type, network.proxy.socks и network.proxy.socks_port через FirefoxProfile, вы должны настроить эти параметры через proxy_options в seleniumwire_options:
    from seleniumwire import webdriver
    from selenium.webdriver.common.by import By
    
    seleniumwire_options = {
        'proxy': {
            'http': 'socks5://127.0.0.1:40000',
            'https': 'socks5://127.0.0.1:40000',
            'no_proxy': 'localhost,127.0.0.1',
            'proxy_type': 'manual'
        }
    }
    
    options = webdriver.FirefoxOptions()
    profile = webdriver.FirefoxProfile()
    user_agent = UserAgent().random
    profile.set_preference("general.useragent.override", user_agent)
    
    driver = webdriver.Firefox(
        options=options,
        firefox_profile=profile,
        seleniumwire_options=seleniumwire_options
    )
    
    driver.get('https://www.whatismyip.com/')
    print(driver.find_element(By.CSS_SELECTOR, '.we-did-it__title').text)

    Здесь мы указываем параметры прокси в формате http и https, а также удаляем порт изno_proxy. Вы можете изменить эти настройки под свои нужды.

    Кроме того, я добавил простой тест для проверки IP-адреса через whatismyip.com

    Помогло?
    Ответ написан
  • Почему на мобильном устройстве при нажатии на ссылку сразу происходит загрузка новой страницы без выполнения JQuery?

    scoffs
    @scoffs
    Frontend | C# | Student
    Возможно, проблема в том, что в мобильных браузерах и в Web App Telegram код события клика на ссылке выполняется асинхронно. Из-за этого прелоадер не успевает отобразиться перед переходом на следующую страницу.

    Вы можете вмешаться в процесс отправки формы или перехода по ссылке, чтобы показать прелоадер перед переходом. Для этого вы можете использовать событие отправки формы ($('form').submit(...)) или метод window.location.href для перехода по ссылке.

    Пример кода для реализации этой идеи может выглядеть так:
    $(function() {
    
            $('a').click(function(event) {
              event.preventDefault(); // Отменяет переход по ссылке
              var url = $(this).attr('href');
              $(".loader_inner").fadeIn();
              $(".loader").fadeIn();
              setTimeout(function() {
                window.location.href = url; // Переход по ссылке после отображения прелоадера
              }, 400); // Задержка, чтобы прелоадер успел отобразиться
            });
          });
          
          $(window).on('load', function() {
            $(".loader_inner").fadeOut();
            $(".loader").delay(400).fadeOut("slow");
          });


    UPD 31.05.23: Код обновлён
    Ответ написан
    9 комментариев
  • Как обновить фавиконку для пользователей Мак и Айфон?

    scoffs
    @scoffs
    Frontend | C# | Student
    Дело точно в платформе?

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

    И ещё:
    1. Убедитесь, что у вас есть иконка фавиконки в различных размерах. Рекомендуемый формат и размеры иконки могут быть следующими:
    2. Формат: .ico, .png, .svg (рекомендуется использовать .png или .svg)
    3. Размеры: 16x16 пикселей, 32x32 пикселей, 48x48 пикселей, 64x64 пикселей
    Ответ написан
    Комментировать
  • Почему не применяются стили для псевдоэлемента?

    scoffs
    @scoffs
    Frontend | C# | Student
    Как минимум к псевдоэлементам обращаются через ::
    Т.е. не :after, а ::after

    upd: хотя работать по сути должны оба способа
    upd 2: тень есть
    Для проверки меняем непрозрачность и всё
    box-shadow: 0px 4px 19px rgba(0, 0, 0, 1);
    Что не так с цветом?
    Ответ написан
    Комментировать
  • Как поставить картинку на фон опроса VK API на Python?

    scoffs
    @scoffs
    Frontend | C# | Student
    Попробуй этот метод https://dev.vk.com/method/photos.getWallUploadServer
    Ответ написан
    Комментировать
  • Как сделать "квадраты" одного размера?

    scoffs
    @scoffs
    Frontend | C# | Student
    Одно из возможных решений заменить grid на flex:
    .services-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: stretch;
    }

    Удалите свойство grid-template-columns из .services-content.
    Ответ написан
    Комментировать
  • Есть ли решение для деплоя только html разметки через github actions?

    scoffs
    @scoffs
    Frontend | C# | Student
    Возможно вам надо настроить файл конфигурации Tailwind CSS (например, tailwind.config.js), в котором вы можете настроить классы, которые будут включены или исключены из сборки. Вам также потребуется настроить пути к вашим исходным файлам CSS и файлу вывода CSS. Пример конфигурации:

    // tailwind.config.js
    
    module.exports = {
      purge: {
        enabled: true,
        content: ['path/to/your/html/files/*.html'], // Путь к вашим HTML файлам
      },
      // Остальные настройки Tailwind CSS
    };

    В вашем процессе сборки добавьте команду для сборки CSS с использованием Tailwind CSS. Например, вы можете использовать команду npx tailwindcss build или yarn tailwindcss build с указанием входного и выходного файла CSS. Например:
    npx tailwindcss build path/to/your/css/input.css -o path/to/your/css/output.css

    После выполнения сборки вам нужно будет заменить ссылку на старые файлы CSS на ссылку на новый собранный файл CSS на сервере.

    Таким образом, вы будете собирать только CSS-классы, используемые в ваших HTML файлах, и затем заменять только файл CSS на сервере, не затрагивая HTML разметку и Fenom шаблоны.
    Ответ написан
  • Как изменить часовой пояс для rss WordPress на +0300?

    scoffs
    @scoffs
    Frontend | C# | Student
    В WordPress обычно используется функция mysql2date(), чтобы преобразовать дату и время в формат, используемый в RSS-ленте. Если вам нужно изменить часовой пояс в этой функции, вы можете использовать функцию date_default_timezone_set() перед вызовом mysql2date(), чтобы временно изменить часовой пояс.

    Пример использования date_default_timezone_set():
    date_default_timezone_set('Europe/Moscow'); // Установка часового пояса на Московское время
    $date = mysql2date('D, d M Y H:i:s O', $your_date); // Замените $your_date на вашу переменную с датой


    Замените 'Europe/Moscow' на ваш часовой пояс. Список поддерживаемых часовых поясов можно найти на официальном сайте PHP: https://www.php.net/manual/en/timezones.php
    Ответ написан
    Комментировать
  • Font-dislay: swap. Как избежать смещение макета?

    scoffs
    @scoffs
    Frontend | C# | Student
    Одним из возможных решений этой проблемы может быть использование опции font-display: optional вместо swap для пользовательского шрифта. Это позволит браузеру применять масштабирование шрифта сразу после его загрузки, даже если он еще не полностью загружен.

    Вот пример кода:
    @font-face {
        font-family: 'Roboto Condensed';
        font-style: normal;
        font-weight: 400;
        font-display: optional;
        src: url(fonts/roboto_condensed/RobotoCondensed-Regular.ttf) format('truetype')
    }


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

    Однако имейте в виду, что изменение font-display может повлиять на воспринимаемую производительность сайта, поскольку оно может вызвать "сдвиг" текста после полной загрузки шрифта
    Ответ написан
    Комментировать
  • Как сортировать название языков в Polylang??

    scoffs
    @scoffs
    Frontend | C# | Student
    Примерные шаги:
    1. Зайдите в административную панель WordPress.
    2. Перейдите в раздел "Языки" (Languages) и выберите вкладку "Настройки" (Settings).
    3. Убедитесь, что у вас установлен и активирован плагин Polylang.
    4. В разделе "Языки" (Languages) найдите настройку "Порядок языков" (Language order).
    5. Введите коды языков в поле "Порядок языков" в нужном вам порядке. Для английского языка используйте код "en" (или другой код, если вы использовали нестандартные языковые коды), а для русского языка - "ru".
    6. Чтобы установить английский язык (EN) в качестве первого языка, установите значение 0 в поле "Положение языка в переключателе" (Language switcher order) для языка "en".
    7. Для русского языка (RU) установите значение 1 в поле "Положение языка в переключателе" (Language switcher order) для языка "ru".
    8. Сохраните изменения.


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

    scoffs
    @scoffs
    Frontend | C# | Student
    Возможно вам надо что-то типа этого
    // Отслеживание кликов по телефонной ссылке
    $('a[href^="tel:"]').click(function() {
        var utmParams = getUTMParams(); // Функция для получения utm-меток
        sendLeadToBitrix(utmParams); // Функция для отправки данных в Битрикс24
    });
    
    // Отслеживание кликов по ссылке WhatsApp
    $('a[href^="https://api.whatsapp.com"]').click(function() {
        var utmParams = getUTMParams(); // Функция для получения utm-меток
        sendLeadToBitrix(utmParams); // Функция для отправки данных в Битрикс24
    });
    
    // Функция для получения utm-меток из URL
    function getUTMParams() {
        var urlParams = new URLSearchParams(window.location.search);
        var utmParams = {};
    
        if (urlParams.has('utm_source')) {
            utmParams.source = urlParams.get('utm_source');
        }
    
        if (urlParams.has('utm_medium')) {
            utmParams.medium = urlParams.get('utm_medium');
        }
    
        if (urlParams.has('utm_campaign')) {
            utmParams.campaign = urlParams.get('utm_campaign');
        }
    
        // Дополнительные utm-метки, если нужно
    
        return utmParams;
    }
    
    // Функция для отправки данных в Битрикс24
    function sendLeadToBitrix(utmParams) {
        var apiUrl = 'https://your-bitrix24-url/rest/your-rest-api-endpoint'; // Замените на фактический URL и REST API-эндпоинт
    
        var leadData = {
            title: 'New Lead',
            source_id: utmParams.source,
            medium_id: utmParams.medium,
            campaign_id: utmParams.campaign,
            // Дополнительные поля лидов, если нужно
        };
    
        // Отправка запроса на создание лида в Битрикс24
        $.ajax({
            url: apiUrl,
            method: 'POST',
            data: leadData,
            success: function(response) {
                console.log('Lead created successfully');
            },
            error: function(error) {
                console.error('Error creating lead:', error);
            }
        });
    }


    Приведенный код использует jQuery для обработки событий кликов. Он отслеживает клики на ссылках с префиксом "tel:" и ссылках на WhatsApp и вызывает функцию sendLeadToBitrix(), которая отправляет данные в Битрикс24 с использованием REST API.

    Не забудьте заменить 'https://your-bitrix24-url/rest/your-rest-api-endpoint' на фактический URL вашего Битрикс24 и REST API-эндпоинт.

    Когда пользователь кликает на телефонную ссылку или ссылку WhatsApp, функция getUTMParams() извлекает utm-метки из текущего URL, а затем создает объект leadData, который содержит необходимую информацию для создания лида в Битрикс24. Затем данные отправляются в Битрикс24 с помощью AJAX-запроса.

    Обратите внимание, что для использования данного кода вам потребуется подключить jQuery на вашем сайте, если он еще не подключен.
    Ответ написан
    Комментировать
  • Как установить цель метрики на все партнерские ссылки?

    scoffs
    @scoffs
    Frontend | C# | Student
    Вам потребуется добавить код, который будет обрабатывать все ссылки с префиксом /go/ и добавлять необходимый JavaScript-код для цели Яндекс Метрики.

    Что-то типа этого:
    function add_yandex_metric_goal() {
        if (is_singular()) {
            global $post;
            $content = $post->post_content;
    
            // Поиск всех ссылок с префиксом /go/
            preg_match_all('/<a href="\/go\/(.*?)"/', $content, $matches);
    
            // Добавление JavaScript-кода для цели Яндекс Метрики к найденным ссылкам
            if (!empty($matches[1])) {
                $goal_code = "ym(83804250, 'reachGoal', 'goshop'); return true;";
                $replacement = '<a href="/go/$1" onclick="' . $goal_code . '"';
                $content = preg_replace('/<a href="\/go\/(.*?)"/', $replacement, $content);
    
                // Обновление контента поста
                $post->post_content = $content;
                wp_update_post($post);
            }
        }
    }
    add_action('wp', 'add_yandex_metric_goal');


    Приведенный код будет искать все ссылки с префиксом `/go/` на страницах постов или страниц WordPress и добавлять необходимый JavaScript-код для цели Яндекс Метрики.

    Убедитесь, что замените 'ym(83804250, 'reachGoal', 'goshop'); return true;' на ваш фактический код цели Яндекс Метрики.

    После добавления этого кода в functions.php и сохранения изменений, все партнерские ссылки с префиксом /go/ на вашем сайте должны быть обработаны и получить нужный JavaScript-код для цели Яндекс Метрики.
    Ответ написан
    3 комментария
  • Как убрать лишние пробелы при использовании grid, gap?

    scoffs
    @scoffs
    Frontend | C# | Student
    Ошибка явна в grid разметке
    А именно
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 33% 33% 33%;
    Ответ написан