👩‍💻 Хотел делать как всегда на 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

🖼️ Бинарники, RUST и JavaScript (Bun)

В комментариях рассказывал, что учил Rust, делая пошаговый эффективный setup сценарий для настройки Ubuntu в качестве веб сервера.
После чего планировалось его собрать в бинарник.

Я нашел нужные библиотеки, разобрался с базовыми принципами работы на Rust, и определил порядок действий и архитектуру проекта, но на этом и остановился, так как подвернулся коммерческий проект.

Так сейчас я вспомнил один факт!
У JavaScript - есть шикарнейшая среда выполнения Bun, предоставляющая еще и набор довольно интерсных инструментов.
Полностью о нём пока не стану рассказывать, суть не в этом, а в возможности компиляции кода в бинарник. При этом, нечто подобное есть и в последних версиях NodeJS в виде патчинга бинарника интерпретатора JavaScript кодом (упоминалось начиная с 16, если не ошибаюсь).
Но в Bun умеет в рантайм исполнения TypeScript без необходимости сборки проекта в JavaScript. А ещё говорят, что есть возможность оптимизации этого TS/JS в байткод.

Но я вижу, что Bun явно в проигрыше по памяти, а производительность и не ставил под сомнение, Rust шустрее.
На скрине можно увидеть, что такой скрипт занимает 20Mb RAM, а сам по себе весит 57Mb:

setInterval(  () => {
  console.log(Date.now());
}, 1000);

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

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

А ещё, для шарящих —бонусом к Cursor я взял в работу проект, на котором будет расширение для бразуера на React в WXT и бекендом на AppWrite
Так что будет чего интересного рассказать и обсудить

#NodeJS #Bun #Rust #JavaScript #TypeScript #Linux