👩‍💻 На стриме был вопрос с собеседования:
Как сгенерировать массив чисел и найти в нем только четные?

Оставлю тут 🤷‍♂️
Решение на JavaScript
array = []
for (let i=0; i<100000; i++){
const num = Math.round(Math.random() * 10000000)
array.push(num)
}
array.filter(i=>!(i%2))

#javascript #forbeginners

👩‍💻 Не поверите!
Открыл для себя сегодня PetiteVue

Тоже самое, что AlpineJs, но ближе к Vue и мне больше нравится)

Интересно кому?

#web #frontend #javascript

👩‍💻 Что-то я пропал немного 😁
Выше я писал про PetiteVue, сегодня проясню.

Я в тот момент делал полноэкранный вижет обратной связи. И естественно встраиваемый.
До этого я еще почитал о ShadowDom, но не осмелился взять его в работу.
А вот опыт перескакивания между фреймворками у меня большой)

#web #frontend #javascript

👩‍💻 Хотел делать как всегда на AlpineJs, который мне полюбился сразу, как я начал делать что-то подобное. Но меня не покидала мысль сделать это на VueJs с компонентами и нормальной разбивкой на части.
Начал делать и понял, что целый Vue тянуть это оч плохая идея. Да и долго это всё, окружение еще настроить, сборку в единый бандл и т.п.

Почитал о SolidJs, понял что долго буду вливаться, и тут промелькнул PetiteVue, которого поддерживает сам Evan You. Почитал кучу хвалебных статей, с помаркой, мол "Для виджетов". И загорелся.
Сразу написал вам пост, и взял в работу.

И вылезли подводные камни...
Мне очень хотелось компоненты, биндинги и вынос логики в JS. А так нельзя 😂
Выходит очень перегруженно, что-то более менее сложное - сломает ногу(
Потерял день и переписал всё обратно на Alpine.

Мораль:
Почитал статью про новый "Супер мега инструмент" и планируешь внедрять - проверь на достоверность 😉

— P.S.
И кстати потом постфактум человек заказчика заявил, что нужен "Подключаемый виджет, в одном .js файле". И инициализцией через JS функцию.
Я подсуетился и за полдня при помощи EsBuild - собрал JavaScript, подключил Sass, Pug и запихнул в бандл все HTML сущности в <template> тегах.
А Alpine c CDN подтягивается, чтобы не плодить кучу разных виджетов с Alpine внутри бандла.
Делается очень просто) Потом расскажу.

#web #frontend #javascript

👩‍💻 Как создать проект на Angular без его установки в систему

Мимолетный видос о том, как решить проблемы с правами запуска и т.п. при создании проекта на Angular.
Если сделать так, что не может не создаться проект)

😉 Глядеть


#frontend #angular #guide #troubleshooting #nodejs #javascript

💬 Отслеживание сетевой активности и переходов между страницами в 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.

#JavaScript