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

Но!
Мне никогда и не требовалась производительность. У меня в приоритете скорость и удобство разработки.
А в NPM я помню, есть огромное разнообразие отличных библиотеки для CLI.
И упаковав это всё дело в бинарник весом ±60-120Mb — останется просто его закинуть на сервер, запустить, выбрать что нужно установить, И..(!)
Пойти пить чай на минут 15
(вместо 20-60 минут настройки сервера - мы тратим 5 минут и пьем чай 10-20, и это при наличии опыта, новичкам сильно больше сэкономит времени)

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

А ещё, для шарящих — пробую Cursor в сравнении с Github Copilot и взял в работу проект, на котором будет расширение для браузера на React в WXT и бэкендом на AppWrite
Так что будет чего интересного рассказать и обсудить у меня в тг @cododelia (тыкабельно)

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

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

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

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

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

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

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

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

📞 Важно:

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

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

🫡 Заключение

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

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

<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

>

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

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

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

Содержание:

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

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

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

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

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

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

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

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

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

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

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

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

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