26 листопада був реліз Vite 6
Про нові зміни можна почитати тут
Якщо коротко, то:
- Деякі умови більше не додаються автоматично і мають бути вказані в конфігурації.
- JSON.stringify тепер за замовчуванням працює в режимі 'auto'
- За замовчуванням використовується сучасний API.
- У бібліотечному режимі ім'я CSS-файлу тепер залежить від назви пакету.
Про нові зміни можна почитати тут
Якщо коротко, то:
- Деякі умови більше не додаються автоматично і мають бути вказані в конфігурації.
- JSON.stringify тепер за замовчуванням працює в режимі 'auto'
- За замовчуванням використовується сучасний API.
- У бібліотечному режимі ім'я CSS-файлу тепер залежить від назви пакету.
vitejs
Vite 6.0 is out!
Vite 6 Release Announcement
👍3
Якщо ви цікавитесь Vue як і я, ось вам цікавенька стаття де розповідають як побудувати веб апплікейшин який видаляє фон за допомогою Vue та Transformers.js
LogRocket Blog
Building a background remover with Vue and Transformers.js - LogRocket Blog
Build a real-time image background remover in Vue using Transformers.js and WebGPU for client-side processing with privacy and efficiency.
👍11🔥2
Зробив із ноутбука власний сервер.
Хотів я арендувати VPS для себе щоб на ньому розмістити свої проекти. Довго шукав, читав, питав і так і не зміг обрати найкращий. А потім я згадав що у мене є ноутбук, який лежить без діла. Тому склавши такі речі як: ноутбук без діла + бажання розібратись як підняті свій сервер, я почав його підіймати
1️⃣ Спочатку встановив Ubuntu Server ( останню версію Ubuntu Server можна завантажити з офіційного сайту )
При встановленні там все інтуітивно зрозуміло.
Єдино що: я обрав мінімальну конфігурацію, одразу під час встановлення додав OpenSSH Server.
2️⃣ Далі після встановлення я новоспечений сервер залишив на столі і пішов вже сів за свій ноут. До серверу підключивя через SSH через локальну мережу.
Як це зробити
Дізнайтеся локальну IP-адресу сервера
Приклад виводу: 192.168.1.100 — ваш локальний IP.
Щоб підключитися
Далі вас попросе пароль.
Введіть його. Ну і якщо правльно ввели, то все, ви зайшли на свій сервер
3️⃣ Далі налаштування фаєрволу (UFW)
Налаштуйте захист сервера, дозволивши лише потрібні порти.
Встановіть UFW:
Дозвольте доступ для SSH та веб-сервера:
Увімкніть фаєрвол:
Перевірка статусу
4️⃣ Встановлення PHP та MySQL
Встановіть PHP та необхідні модулі:
Встановіть MySQL
Налаштуйте MySQL для безпечної роботи (слідуйте інструкціям):
5️⃣ Встановлення веб-сервера Nginx
У браузері на іншому пристрої введіть локальну IP-адресу сервера, наприклад http://192.168.1.100
6️⃣ Налаштування Nginx для роботи з PHP
Сам конфіг такий
Створюєм симлінк для активації конфігурації:
Рестартім nginx
7️⃣ Потім щоб все працювало рівно мені довелось купити у свого провайдера білий айпі. Це коштує 30 грн/місяць. У вашого провайдера це може бути взашалі безкоштовно
І коли у вас є білий айпи, і якщо ви пидєднуєте ваш сервер до мережі інтернет через роутер, треба налаштувати проброс портів на ньому ( роутері ).
У мене в налаштуваннях роутера є така вкладка як Виртуальный сервер
і там вказую зовнішній порт ( 80 ), внутрішній порт ( 80 ), локальну айпі адресу ( 192.168.1.100 ) і протокол ( TCP )
і потім треба зробити ще одну таку запис для SSH
овнішній порт ( 20 ), внутрішній порт ( 20 ), локальну айпі адресу ( 192.168.1.100 ) і протокол ( ALL )
Сам зовнішній айпі можна дізнатися так
8️⃣ Розміщення файлів і все таке відбувається тут /var/www/html
Ту сторінку що ви бачите коли перйший раз заходите можете знайти тут
Це поки все що я зробив 🙂
Далі хочу розгорнути сайт на Wordpress
Купити якийсь дешевий домен і привязати його
А ще, Налаштування HTTPS
Поки все 🙃
Хотів я арендувати 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
Поки все 🙃
Ubuntu
Get Ubuntu Server | Download | Ubuntu
Get Ubuntu Server one of three ways; by using Multipass on your desktop, using MAAS to provision machines in your data centre or installing it directly on a server.
🔥18👍8❤4
https://dou.ua/forums/topic/51735/ - мій перший топік на DOU 🙃
DOU
Можливо прийшов час перестати використовувати БЕМ ?
Методологія BEM вже давно стала частиною арсеналу веб-розробників, але чи актуальна вона у 2024 році? Денис Попов, Frontend-розробник Nova Digital, поділився своїм поглядом на переваги та недоліки цієї технології й відповів на запитання: чи варто сьогодні
🔥19👍3
Відносно нові речі, які ви повинні знати про HTML у 2025 року - https://frontendmasters.com/blog/bone-up-html-2025/
👍14
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/ - Деякі речі, які ви можете не знати про спеціальні стилі лічильників
Цікава стаття.
Точно вартої вашої уваги бо впевнений що рано чи пізно у вас буде кейс де 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/ - Деякі речі, які ви можете не знати про спеціальні стилі лічильників
👍5
Всім првиіт
Стартувало друге голосування на Премію Доу
Я увійшов у шорт ліст серед кандитатів в категоріі "Вони – надихають"
Тому, якщо у вас є трохи хвилинок, зайдіть сюди https://dou.ua/awards-2025/ і залиште будь ласка свій голос 😉
Стартувало друге голосування на Премію Доу
Я увійшов у шорт ліст серед кандитатів в категоріі "Вони – надихають"
Тому, якщо у вас є трохи хвилинок, зайдіть сюди https://dou.ua/awards-2025/ і залиште будь ласка свій голос 😉
🔥10
😍 JavaScript fwdays’25 – головна подія року для JS-розробників!
Хочете бути в курсі останніх трендів у JavaScript, почути топових спікерів та познайомитися з однодумцями?
🗓 Дата: 24 травня 2025
📍 Де: Онлайн + Київ (офлайн)
🎤 Спікери: ТОП JS-гуру, яких ви точно знаєте
На вас чекають реальні кейси, новітні технології та багато коду!
Використайте промокод POPOVJS10 та отримайте знижку 10%, деталі за посиланням 👉 https://bit.ly/43lx7FL
Хочете бути в курсі останніх трендів у JavaScript, почути топових спікерів та познайомитися з однодумцями?
🗓 Дата: 24 травня 2025
📍 Де: Онлайн + Київ (офлайн)
🎤 Спікери: ТОП JS-гуру, яких ви точно знаєте
На вас чекають реальні кейси, новітні технології та багато коду!
Використайте промокод POPOVJS10 та отримайте знижку 10%, деталі за посиланням 👉 https://bit.ly/43lx7FL
❤6
Що важливіше, soft skills чи hard skills?
Уявімо ситуацію: на співбесіду приходять два кандидати. Один — впевнений у технічних знаннях, швидко вирішує задачі, але не надто комунікабельний. Інший — не має великого досвіду, але легко навчається, вміє спілкуватися, добре відчуває командну динаміку. Кого обрати?
Soft skills — це не просто “вміння говорити”.
Це про критичне мислення, відкритість до зворотного зв’язку, готовність працювати в команді й адаптуватись. Навіть якщо людина ще не дотягує технічно, але активно розвивається і вміє взаємодіяти — у довгостроковій перспективі це часто приносить більше користі.
Але й hard skills не менш важливі.
Сильний технічний бекграунд дозволяє швидше реалізовувати складні рішення, не витрачати час на базові речі, не боятися нових задач. Досвідчений розробник може стати опорою для команди, навчати інших, тримати якість продукту на високому рівні.
Найкраще — це баланс.
Розробник, який має потужну технічну базу і при цьому не втрачає гнучкості мислення та комунікабельності — справжня знахідка.
А якщо обирати між двома крайнощами — то який кандидат буде краще?
Уявімо ситуацію: на співбесіду приходять два кандидати. Один — впевнений у технічних знаннях, швидко вирішує задачі, але не надто комунікабельний. Інший — не має великого досвіду, але легко навчається, вміє спілкуватися, добре відчуває командну динаміку. Кого обрати?
Soft skills — це не просто “вміння говорити”.
Це про критичне мислення, відкритість до зворотного зв’язку, готовність працювати в команді й адаптуватись. Навіть якщо людина ще не дотягує технічно, але активно розвивається і вміє взаємодіяти — у довгостроковій перспективі це часто приносить більше користі.
Але й hard skills не менш важливі.
Сильний технічний бекграунд дозволяє швидше реалізовувати складні рішення, не витрачати час на базові речі, не боятися нових задач. Досвідчений розробник може стати опорою для команди, навчати інших, тримати якість продукту на високому рівні.
Найкраще — це баланс.
Розробник, який має потужну технічну базу і при цьому не втрачає гнучкості мислення та комунікабельності — справжня знахідка.
А якщо обирати між двома крайнощами — то який кандидат буде краще?
❤8
⚛️ Хочете розібратись у React на глибокому рівні та дізнатись, як працює сучасний фронтенд?
Приєднуйтесь до щорічної конференції React+ fwdays’25! 🚀
📅 18 жовтня 2025
📍 Київ (офлайн + онлайн)
У програмі:
- Практичні кейси з реальних проєктів
- Архітектура, DevEx, продуктивність, інфраструктура
- Теми з ширшої JS‑екосистеми
- Живе спілкування без формальностей
✅ Знижка 15% за промокодом: POPOVREACT15.
🎟 Реєструйтесь зараз: деталі та квитки тут.
🎤 Call for Papers
Хочете бути спікером або спікеркою? Ми шукаємо круті практичні доповіді.
Залишити заявку
Приєднуйтесь до щорічної конференції React+ fwdays’25! 🚀
📅 18 жовтня 2025
📍 Київ (офлайн + онлайн)
У програмі:
- Практичні кейси з реальних проєктів
- Архітектура, DevEx, продуктивність, інфраструктура
- Теми з ширшої JS‑екосистеми
- Живе спілкування без формальностей
✅ Знижка 15% за промокодом: POPOVREACT15.
🎟 Реєструйтесь зараз: деталі та квитки тут.
🎤 Call for Papers
Хочете бути спікером або спікеркою? Ми шукаємо круті практичні доповіді.
Залишити заявку
Fwdays
React+ fwdays’25 - практична конференція про React та сучасний JavaScript
❤2👍1🔥1
🗞️ Дайджест новин та статей зі світу Frontend розробки за 05.08.2025:
🔹 Що нового у ViteLand: Підсумки липня 2025 - читати
🔹 Що нового у ViteLand: Підсумки липня 2025 - читати
void(0)
What’s New in ViteLand: July 2025 Recap
July 2025 brings exciting updates in the Vite ecosystem, including the release of Vite 7, Rolldown's new features, and the upcoming ViteConf in Amsterdam. Discover the latest news in Vite, Vitest, Oxc, Rolldown and more!
❤1
🗞️ Дайджест новин та статей зі світу Frontend розробки за 06.08.2025:
🔹 Нескінченна анімація шатра з використанням сучасного CSS - читати
🔹 Нескінченна анімація шатра з використанням сучасного CSS - читати
Frontend Masters
Infinite Marquee Animation using Modern CSS
A set of logos with an infinite repeating slide animation is a classic component in web development. We can find countless examples and implementations starting from the old (and now deprecated) <marquee> element. I’ve written an article about it myself a…
🔥3❤1
🗞️ Дайджест новин та статей зі світу Frontend розробки за 06.08.2025:
🔹 ReleasesNode.js v24.5.0 (поточний) - читати
🔹 ВипущеноNode.js v22.18.0 (LTS) - читати
🔹 Випущено ESLint v9.32.0 - читати
🔹 ReleasesNode.js v24.5.0 (поточний) - читати
🔹 ВипущеноNode.js v22.18.0 (LTS) - читати
🔹 Випущено ESLint v9.32.0 - читати
nodejs.org
Node.js — Node.js v24.5.0 (Current)
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and noscripts.
❤2
🗞️ Дайджест новин та статей зі світу Frontend розробки за 07.08.2025:
🔹 Отримання кількості стовпців автопідбору/автозаповнення в CSS - читати
🔹 Послідовна анімація з N елементів - читати
🔹 Отримання кількості стовпців автопідбору/автозаповнення в CSS - читати
🔹 Послідовна анімація з N елементів - читати
Frontend Masters
Get the number of auto-fit/auto-fill columns in CSS
Ever wanted to get the number of auto-fit/auto-fill columns in a grid? For example, because you want to highlight just the items in the first or last row or column? Do something special just for even or for odd rows or columns (e.g. zebra striping)? Or for…
❤3
🗞️ Дайджест новин та статей зі світу Frontend розробки за 08.08.2025:
🔹 Потужність інтернаціонального API: Вичерпний посібник з інтернаціоналізації на основі браузера - читати
🔹 Потужність інтернаціонального API: Вичерпний посібник з інтернаціоналізації на основі браузера - читати
Smashing Magazine
The Power Of The Intl API: A Definitive Guide To Browser-Native Internationalization — Smashing Magazine
Internationalization isn’t just translation. It’s about formatting dates, pluralizing words, sorting names, and more, all according to specific locales. Instead of relying on heavy third-party libraries, modern JavaScript offers the Intl API — a powerful…
❤2
🗞️ Дайджест новин та статей зі світу Frontend розробки за 09.08.2025:
🔹 Випущено ESLint v9.33.0 - читати
🔹 Випущено ESLint v9.33.0 - читати
eslint.org
ESLint v9.33.0 released - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
🗞️ Дайджест новин та статей зі світу Frontend розробки за 11.08.2025:
🔹 Використання API користувацького виділення - читати
🔹 Використання API користувацького виділення - читати
Frontend Masters
Using the Custom Highlight API
The Custom Highlight API came to my attention recently as Firefox recently started supporting it (Firefox 140, June 2025), which brought support across all the major browsers. With it, you can apply (some) styling to text that you get your hands on in JavaScript…
🗞️ Дайджест новин та статей зі світу Frontend розробки за 13.08.2025:
🔹 Нам може знадобитися щось середнє між кореневими та відносними блоками CSS для "базових елементів" - читати
🔹 Нам може знадобитися щось середнє між кореневими та відносними блоками CSS для "базових елементів" - читати
CSS-Tricks
We Might Need Something Between Root and Relative CSS Units for "Base Elements" | CSS-Tricks
I've come to realize that perhaps we need to have a unit between root and relative values. This would bring about a whole new possibility when creating reusable components.
👍1