Сообщество - Web-технологии

Web-технологии

521 пост 5 813 подписчиков

Популярные теги в сообществе:

3

Отслеживание сетевой активности и переходов между страницами в SPA

При создании инъецируемых скриптов для сайтов, использующих архитектуру SPA (Single Page Application), может возникнуть потребность отслеживать переходы между страницами или перезагрузки элементов. Из-за динамической подгрузки контента через AJAX и Fetch, события DOMContentLoaded или load будут бесполезны.

Для инъецируемых скриптов, хорошим решением будет отслеживать состояние радиомолчания (network idle). Оно наступает, когда все сетевые запросы завершены, и сеть на некоторое время «замолкает». Подобное поведение полезно, если нужно запустить код только после того, как пройдут все запросы или после перехода на другую страницу, чтобы реинициализировать скрипт.

💻 Пример сценария использования

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

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

  1. Инициализация счетчика активных сетевых запросов.

    Сниппет отслеживает все сетевые запросы на странице (Fetch и XMLHttpRequest) с помощью PerformanceObserver. Каждый раз, когда начинается новый сетевой запрос, счетчик activeRequests увеличивается.

  2. Обработка завершения запросов.

    После завершения запроса activeRequests уменьшается, и проверяется состояние сети. Если активных запросов не осталось, через 500 мс на объекте window генерируется событие network-idle.

  3. Использование события network-idle.

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

    4. Задержка перед генерацией события.

    Задержка в 500 мс добавлена, чтобы устранить "шум" случайных срабатываний и убедиться, что действительно наступило состояние радиомолчания.

📞 Важно:

  • Модификации роутов в SPA. Если у вашего SPA-приложения не используются сетевые запросы при изменении маршрутов, дополнительно можно привязаться к событиям history.pushState и popstate.

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

🫡 Заключение

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

Ознакомиться со сниппетом можно на GitHub Gist.
А подобные посты чаще в пишу в Telegram канале, там же и пример проекта, где это применимо.

Показать полностью
Вопрос из ленты «Эксперты»

Вот и кончился дискорд

Ну что, еще раз стерпим?
Ладно, отставить политоту, вопорос технического характера: через что идут голосовые каналы дискорда?
Я пользуюсь nekoray в режиме bypass, т.е. весь трафик напрямую, кроме указанных доменов или ip. Без обхода дискорд вообще не работает. Отправлять обычные текстовые сообщения и читать любые, включая просмотр фото и скачивания файлов, я смог после включения встроенной группы geosite:discord. Картинки отправлять смог после добавления адресов с хабра (статья 849092). А вот в войс зайти не могу, вернее зайти-то могу, подключить к нему не могу.

Ну или пора перестать страдать фигней и вообще весь трафик пускать через VPN, кроме зоны .ru?

3

Подключение к Mega Home он же Wifire

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

Настает 12 часов вторника, сижу дома, пью чай, интернета нет..... 14 часов, пообедал, монтажника тоже нет..., в 15 часов не выдержал позвонил в поддержку, 9 минут прослушал музыку, и тут барышня мне заявляет, видите ли, у монтажника очень сложное предыдущее подключение, поэтому мы отменили вашу заявку и ни позвонить, ни предупредить не могли, на вопрос кто будет компенсировать отгул поддержка ничего сказать не могла. Как я сдержался не знаю и в довершении розочка на тортик: когда все же сможет прийти монтажник? а через 6 дней))). Так что думайте стоит с ними связываться или нет.

ps место действия Москва

18

Как сделать версию для слабовидящих для сайта за 3 минуты по ГОСТу Р 52872-2019

Мои клиенты - медицинские клиники, попросили меня сделать версию для слабовидящих на сайте.

"В соответствием с ГОСТом Р 52872-2019 все государственные органы, медицинские и учебные учреждения обязаны иметь версию сайта для слабовидящих, чтобы не допустить дискриминации людей страдающих проблемами со зрением. Так же предусмотрена административная и уголовная ответственность за дискриминацию."

В процессе решения этой задачи я нашел скрипт - https://lidrekon.ru/slep/

Скрипт условнобесплатный (владелец оставил форму для донатов, призывая поддержать его) и довольно просто устанавливается. Рекомендую.

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

Код для вставки в секцию head:

<script src="https://lidrekon.ru/slep/js/jquery.js"></script>

<script src="https://lidrekon.ru/slep/js/uhpv-full.min.js"></script>

Либо код для вставки в footer:

<script src="https://lidrekon.ru/slep/js/jquery.js"></script>

<script src="https://lidrekon.ru/slep/js/uhpv-hover-full.min.js"></script>

Код кнопки разместить в любом месте html-страницы:

<a id="specialButton" href="#"><img src="https://lidrekon.ru/images/special.png" id='glazd' alt="ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ" title="ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ" /></a>

<style>

@Media screen and (max-width: 980px) {

#glazd {

position:absolute;

top:10px;

right:100px;

z-index: 99999;

width:50px;

}

}

@Media screen and (min-width: 980px) {

#glazd {

position:absolute;

top:20px;

left:50px;

z-index: 99999;

width:50px;

}

}

</style

>

Забирайте, если необходимо (:

Если код перестал работать, то пишите мне, я постараюсь помочь.

Показать полностью
2

Плавное погружение в SvelteKit на примере создания сайта знакомств. Часть 4

Посмотреть: рутуб, youtube

Содержание:

  • Параметры поиска

    • Добавить возраст от и до

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

  • Редактирование геопозиции

  • Сохранение сортировки и удаление фото

  • Генерация фейковых анкет

  • Загрузка фото c unsplash.com

  • Команды автоматизации

  • Поиск и участие в нем доступны, только если анкета пользователя заполнена и у него не менее 2ух фото

  • Компонент вывода фото и краткой информации о пользователе с возможностью листать фото

  • Лайки/дизлайки на странице поиска

Вопрос для тех, кто посмотрел хотя бы одно видео из серии.

Что лучше? Рассказывать какие были изменения в коде и почему, или включать написание кода в ролики?

Показать полностью
0

Ну Ё моЁ

Ну Ё моЁ
6

Почему сейчас везде убирают просмотр видео в 480p?

480p - это же компромисс между качеством и рамером видео. Уже на YouTube убирают это разрешение 480p у видео в HD (720p) качестве и выше. А для тех, у кого плохой инет, там оставили только качество 240p и 360p. Аналогичная ситуация и у Рутуба, и у Дзена, и у VideoCDN.

4

Плавное погружение в SvelteKit на примере создания сайта знакомств. Часть 3

Посмотреть: рутуб, youtube

Содержание:

  • Сгенерировать favicon в recraft.ai

  • Добавить переключатель смены темной/светлой темы

  • fix автологин

  • Редактирование профиля пользователя

    • Данные пользователя

    • Настройки поиска

    • Загрузка фото

  • Отредактировать меню

    • Перенести вниз страницы, проработать оформление

Показать полностью
Отличная работа, все прочитано!