Для роботи скрипта необхідно встановити наступні залежності:

npm install @vue/compiler-sfc cheerio glob js-cookie util

@vue/compiler-sfc — для парсингу .vue файлів
cheerio — для роботи з HTML (розбір шаблонів Vue)
glob — для пошуку файлів у файловій системі
js-cookie — для роботи з кукі (якщо використовується у застосунку)
util — для промисифікації функцій.

Для генерації графу потрібен Graphviz

На macOS

brew install graphviz

На Ubuntu/Debian/Windows треба пошукати 😅

У мене весь проект лежить в src
А ще у мене є components.d.ts для автоматичного підкючення компонентів

По суті той скрипт що вище сканує всі .vue файли в папці src, потім визначає залежності між компонентами. Створює файл architecture.dot, який використовується для генерації графу.

Приклад результату
Якщо структура вашого проєкту виглядає так:

src/
├── components/
│   ├── Button.vue
│   ├── Modal.vue
├── pages/
│   ├── Home.vue
│   ├── Dashboard.vue
├── shared/
│   ├── Header.vue
│   ├── Footer.vue

То граф архітектури виглядатиме приблизно так:

Групи:
components: Modal, Button.
pages: Home, Dashboard.
shared: Header, Footer.

Залежності:
Home → Header.
Dashboard → Header, Footer.
Modal → Button.

Короче у підсумку виходить дуже не поганий інструмент для візуалізації архітектури

Він по суті може допогти
1. Швидко розуміти залежності між компонентами.
2. Визначати зайві зв'язки.
3. Покращувати модульність застосунку.

12 бібліотек, які вам можуть стати у нагоді 😉

AOS (Animate on Scroll) — це легка та налаштовувана бібліотека для додавання ефектних анімацій при прокручуванні ваших вебсторінок.
https://michalsnik.github.io/aos

Chart.js - дозволяє легко створювати різні типи графіків, включаючи лінійні, стовпчасті, радарні та кругові, з мінімальною конфігурацією.
https://www.chartjs.org

SweetAlert2 пропонує адаптивні, повністю налаштовувані спливаючі вікна, які легко інтегруються у ваші проєкти.
https://sweetalert2.github.io

SortableJS дозволяє легко реалізувати функцію перетягування для списків. Її гнучкість робить її ідеальною для створення інтерактивних інтерфейсів, таких як канбан-дошки.
https://sortablejs.github.io/Sortable

Floating UI дозволяє легко керувати складними компонентами інтерфейсу, такими як підказки, випадаючі меню та спливаючі вікна.
https://floating-ui.com

FullCalendar пропонує зручний, повнофункціональний інтерфейс календаря з налаштовуваним керуванням подіями, функцією перетягування та різними режимами перегляду.
https://fullcalendar.io

Animate.css - додавайте попередньо створені анімації до елементів вашого сайту за допомогою Animate.css.
https://animate.style

Lottie від Airbnb - Ця бібліотека дозволяє інтегрувати високоякісні анімації у ваші вебдодатки.
https://lottiefiles.com/free-animations/airbnb

Tippy.js - Легка, розширювана бібліотека для створення красивих, налаштовуваних підказок, спливаючих вікон і випадаючих меню.
https://atomiks.github.io/tippyjs

Day.js — це проста й швидка бібліотека, яка чудово підходить для проєктів, що працюють з датами, не займаючи багато місця та не уповільнюючи роботу.
https://day.js.org

Swiper — це безкоштовний і потужний інструмент для створення слайдерів і каруселей. Він забезпечує плавні переходи й добре працює на різних екранах, що робить його ідеальним для мобільних проєктів.
https://swiperjs.com

Vivus - Створюйте приголомшливі анімовані SVG-малюнки за допомогою Vivus. Ця легка JavaScript-бібліотека дозволяє анімувати SVG, імітуючи процес малювання, додаючи унікальний стиль вашим графікам.
https://maxwellito.github.io/vivus

26 листопада був реліз Vite 6
Про нові зміни можна почитати тут
Якщо коротко, то:
- Деякі умови більше не додаються автоматично і мають бути вказані в конфігурації.
- JSON.stringify тепер за замовчуванням працює в режимі 'auto'
- За замовчуванням використовується сучасний API.
- У бібліотечному режимі ім'я CSS-файлу тепер залежить від назви пакету.

Якщо ви цікавитесь Vue як і я, ось вам цікавенька стаття де розповідають як побудувати веб апплікейшин який видаляє фон за допомогою Vue та Transformers.js

Зробив із ноутбука власний сервер.

Хотів я арендувати VPS для себе щоб на ньому розмістити свої проекти. Довго шукав, читав, питав і так і не зміг обрати найкращий. А потім я згадав що у мене є ноутбук, який лежить без діла. Тому склавши такі речі як: ноутбук без діла + бажання розібратись як підняті свій сервер, я почав його підіймати

1️⃣ Спочатку встановив Ubuntu Server ( останню версію Ubuntu Server можна завантажити з офіційного сайту )

При встановленні там все інтуітивно зрозуміло.
Єдино що: я обрав мінімальну конфігурацію, одразу під час встановлення додав OpenSSH Server.

2️⃣ Далі після встановлення я новоспечений сервер залишив на столі і пішов вже сів за свій ноут. До серверу підключивя через SSH через локальну мережу.

Як це зробити
Дізнайтеся локальну IP-адресу сервера

ip a

Приклад виводу: 192.168.1.100 — ваш локальний IP.

Щоб підключитися

ssh username@192.168.1.100

Далі вас попросе пароль.
Введіть його. Ну і якщо правльно ввели, то все, ви зайшли на свій сервер

3️⃣ Далі налаштування фаєрволу (UFW)

Налаштуйте захист сервера, дозволивши лише потрібні порти.

Встановіть UFW:

sudo apt update
sudo apt install ufw

Дозвольте доступ для SSH та веб-сервера:

sudo ufw allow OpenSSH
sudo ufw allow 80
sudo ufw allow 22

Увімкніть фаєрвол:

sudo ufw enable

Перевірка статусу

sudo ufw status

4️⃣ Встановлення PHP та MySQL

Встановіть PHP та необхідні модулі:

sudo apt install php php-fpm php-mysql

Встановіть MySQL

sudo apt install mysql-server

Налаштуйте MySQL для безпечної роботи (слідуйте інструкціям):

sudo mysql_secure_installation

sudo ufw status

5️⃣ Встановлення веб-сервера Nginx

sudo apt install nginx

У браузері на іншому пристрої введіть локальну IP-адресу сервера, наприклад http://192.168.1.100

6️⃣ Налаштування Nginx для роботи з PHP

sudo nano /etc/nginx/sites-available/example

Сам конфіг такий

server {
    listen 80;
    server_name <ваш_білий_IP>;

    root /var/www/html;
    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.1-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_noscript_name;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

Створюєм симлінк для активації конфігурації:

sudo ln -s /etc/nginx/sites-available/example /etc/nginx/sites-enabled/

Рестартім nginx

sudo nginx -t
sudo systemctl reload nginx

7️⃣ Потім щоб все працювало рівно мені довелось купити у свого провайдера білий айпі. Це коштує 30 грн/місяць. У вашого провайдера це може бути взашалі безкоштовно

І коли у вас є білий айпи, і якщо ви пидєднуєте ваш сервер до мережі інтернет через роутер, треба налаштувати проброс портів на ньому ( роутері ).

У мене в налаштуваннях роутера є така вкладка як Виртуальный сервер
і там вказую зовнішній порт ( 80 ), внутрішній порт ( 80 ), локальну айпі адресу ( 192.168.1.100 ) і протокол ( TCP )

і потім треба зробити ще одну таку запис для SSH
овнішній порт ( 20 ), внутрішній порт ( 20 ), локальну айпі адресу ( 192.168.1.100 ) і протокол ( ALL )

Сам зовнішній айпі можна дізнатися так

curl ifconfig.me

8️⃣ Розміщення файлів і все таке відбувається тут /var/www/html

Ту сторінку що ви бачите коли перйший раз заходите можете знайти тут

sudo nano /var/www/html/index.html

Це поки все що я зробив 🙂

Далі хочу розгорнути сайт на Wordpress
Купити якийсь дешевий домен і привязати його
А ще, Налаштування HTTPS

Поки все 🙃

https://dou.ua/forums/topic/51735/ - мій перший топік на DOU 🙃

#CSS шпаргалка яка може стати у нагоді, особливо тим хто тільки починає

#frontend #html #розробка #фронтенд

Відносно нові речі, які ви повинні знати про HTML у 2025 року - https://frontendmasters.com/blog/bone-up-html-2025/

https://una.im/advanced-attr/ - Нові можливості attr()

Цікава стаття.
Точно вартої вашої уваги бо впевнений що рано чи пізно у вас буде кейс де attr() вас спасе 😉


https://css-tricks.com/positioning-text-around-elements-with-css-offset/ - Розташування тексту навколо елементів із зсувом CSS. Виглядає дуже гарно

https://css-tricks.com/some-things-you-might-not-know-about-custom-counter-styles/ - Деякі речі, які ви можете не знати про спеціальні стилі лічильників

Всім првиіт
Стартувало друге голосування на Премію Доу
Я увійшов у шорт ліст серед кандитатів в категоріі "Вони – надихають"
Тому, якщо у вас є трохи хвилинок, зайдіть сюди https://dou.ua/awards-2025/ і залиште будь ласка свій голос 😉

😍 JavaScript fwdays’25 – головна подія року для JS-розробників!

Хочете бути в курсі останніх трендів у JavaScript, почути топових спікерів та познайомитися з однодумцями?

🗓 Дата: 24 травня 2025
📍 Де: Онлайн + Київ (офлайн)
🎤 Спікери: ТОП JS-гуру, яких ви точно знаєте

На вас чекають реальні кейси, новітні технології та багато коду!

Використайте промокод POPOVJS10 та отримайте знижку 10%, деталі за посиланням 👉 https://bit.ly/43lx7FL

Що важливіше, soft skills чи hard skills?

Уявімо ситуацію: на співбесіду приходять два кандидати. Один — впевнений у технічних знаннях, швидко вирішує задачі, але не надто комунікабельний. Інший — не має великого досвіду, але легко навчається, вміє спілкуватися, добре відчуває командну динаміку. Кого обрати?

Soft skills — це не просто “вміння говорити”.
Це про критичне мислення, відкритість до зворотного зв’язку, готовність працювати в команді й адаптуватись. Навіть якщо людина ще не дотягує технічно, але активно розвивається і вміє взаємодіяти — у довгостроковій перспективі це часто приносить більше користі.

Але й hard skills не менш важливі.
Сильний технічний бекграунд дозволяє швидше реалізовувати складні рішення, не витрачати час на базові речі, не боятися нових задач. Досвідчений розробник може стати опорою для команди, навчати інших, тримати якість продукту на високому рівні.

Найкраще — це баланс.
Розробник, який має потужну технічну базу і при цьому не втрачає гнучкості мислення та комунікабельності — справжня знахідка.

А якщо обирати між двома крайнощами — то який кандидат буде краще?

Тут є трохи корисного https://place.ppv.codes

⚛️ Хочете розібратись у React на глибокому рівні та дізнатись, як працює сучасний фронтенд?
Приєднуйтесь до щорічної конференції React+ fwdays’25! 🚀

📅 18 жовтня 2025
📍 Київ (офлайн + онлайн)

У програмі:
- Практичні кейси з реальних проєктів
- Архітектура, DevEx, продуктивність, інфраструктура
- Теми з ширшої JS‑екосистеми
- Живе спілкування без формальностей

✅ Знижка 15% за промокодом: POPOVREACT15.
🎟 Реєструйтесь зараз: деталі та квитки тут.

🎤 Call for Papers
Хочете бути спікером або спікеркою? Ми шукаємо круті практичні доповіді.
Залишити заявку

🗞️ Дайджест новин та статей зі світу Frontend розробки за 05.08.2025:

🔹 Що нового у ViteLand: Підсумки липня 2025 - читати

🗞️ Дайджест новин та статей зі світу Frontend розробки за 06.08.2025:

🔹 Нескінченна анімація шатра з використанням сучасного CSS - читати

🗞️ Дайджест новин та статей зі світу Frontend розробки за 06.08.2025:

🔹 ReleasesNode.js v24.5.0 (поточний) - читати

🔹 ВипущеноNode.js v22.18.0 (LTS) - читати

🔹 Випущено ESLint v9.32.0 - читати

🗞️ Дайджест новин та статей зі світу Frontend розробки за 07.08.2025:

🔹 Отримання кількості стовпців автопідбору/автозаповнення в CSS - читати

🔹 Послідовна анімація з N елементів - читати

🗞️ Дайджест новин та статей зі світу Frontend розробки за 08.08.2025:

🔹 Потужність інтернаціонального API: Вичерпний посібник з інтернаціоналізації на основі браузера - читати

🗞️ Дайджест новин та статей зі світу Frontend розробки за 09.08.2025:

🔹 Випущено ESLint v9.33.0 - читати