Frontend Den – Telegram
Frontend Den
1.35K subscribers
73 photos
11 videos
24 files
277 links
Все дял починаючих веб-розробників і не тільки. Зв'язок з адміном або запропонувати новину 👉 @denyspopov_web
@junnot_chat
#frontend #wordpress #html #css
Download Telegram
26 листопада був реліз Vite 6
Про нові зміни можна почитати тут
Якщо коротко, то:
- Деякі умови більше не додаються автоматично і мають бути вказані в конфігурації.
- JSON.stringify тепер за замовчуванням працює в режимі 'auto'
- За замовчуванням використовується сучасний API.
- У бібліотечному режимі ім'я CSS-файлу тепер залежить від назви пакету.
👍3
Якщо ви цікавитесь Vue як і я, ось вам цікавенька стаття де розповідають як побудувати веб апплікейшин який видаляє фон за допомогою Vue та Transformers.js
👍11🔥2
Зробив із ноутбука власний сервер.

Хотів я арендувати 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

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

#frontend #html #розробка #фронтенд
16
Відносно нові речі, які ви повинні знати про 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/ - Деякі речі, які ви можете не знати про спеціальні стилі лічильників
👍5
Всім првиіт
Стартувало друге голосування на Премію Доу
Я увійшов у шорт ліст серед кандитатів в категоріі "Вони – надихають"
Тому, якщо у вас є трохи хвилинок, зайдіть сюди https://dou.ua/awards-2025/ і залиште будь ласка свій голос 😉
🔥10
😍 JavaScript fwdays’25 – головна подія року для JS-розробників!

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

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

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

Використайте промокод POPOVJS10 та отримайте знижку 10%, деталі за посиланням 👉 https://bit.ly/43lx7FL
6
Що важливіше, soft skills чи hard skills?

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

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

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

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

А якщо обирати між двома крайнощами — то який кандидат буде краще?
8
Тут є трохи корисного https://place.ppv.codes
5👍1
⚛️ Хочете розібратись у React на глибокому рівні та дізнатись, як працює сучасний фронтенд?
Приєднуйтесь до щорічної конференції React+ fwdays’25! 🚀

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

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

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

🎤 Call for Papers
Хочете бути спікером або спікеркою? Ми шукаємо круті практичні доповіді.
Залишити заявку
2👍1🔥1
🗞️ Дайджест новин та статей зі світу Frontend розробки за 06.08.2025:

🔹 Нескінченна анімація шатра з використанням сучасного CSS - читати
🔥31
🗞️ Дайджест новин та статей зі світу Frontend розробки за 06.08.2025:

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

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

🔹 Випущено ESLint v9.32.0 - читати
2
🗞️ Дайджест новин та статей зі світу Frontend розробки за 07.08.2025:

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

🔹 Послідовна анімація з N елементів - читати
3
🗞️ Дайджест новин та статей зі світу Frontend розробки за 08.08.2025:

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

🔹 Випущено ESLint v9.33.0 - читати
🗞️ Дайджест новин та статей зі світу Frontend розробки за 13.08.2025:

🔹 Нам може знадобитися щось середнє між кореневими та відносними блоками CSS для "базових елементів" - читати
👍1
🗞️ Дайджест новин та статей зі світу Frontend розробки за 14.08.2025:

🔹 5 корисних функцій CSS з новим правилом @function - читати

🔹 Динамічні запити до медіа/контейнерів з використанням if() - читати
👍1