Закриття (Closures) — це основна концепція в JavaScript, яка дозволяє писати кращий, більш ефективний та модульний код. Вони забезпечують можливість створення приватних змінних, підтримки стану та складної функціональності, що часто зустрічається в сучасних фреймворках і бібліотеках.

Що таке закриття (Closure)?

Закриття (closure) — це функція, визначена всередині іншої функції. Внутрішня функція має доступ до змінних та області видимості зовнішньої функції. Закриття дозволяють використовувати приватні змінні та підтримувати стан, і вони часто використовуються в таких фреймворках JavaScript, як React, Vue та Angular.

Ключові концепції закриттів (Closures)

1.

Доступ до зовнішньої області видимості: Закриття (Closure) надає внутрішній функції доступ до змінних зовнішньої

Фото від Mohammad Rahmani на Unsplash

Нарешті завершив 2-й тиждень навчання CSS! Це зайняло трохи більше часу, ніж я очікував, але зараз я почуваюся досить добре з цього приводу. Ось що я засвоїв:

Що я навчився:

• Основи: Провів час, знайомлячись зі стилізацією, кольорами, шрифтами та макетами (Flexbox і Grid стали моїми найкращими друзями).
• Просунуті теми: Погрався з анімаціями, трансціями та плавними ефектами. Повірте, це зовсім інший світ, коли ви додаєте рух до своїх дизайнів. 🎥✨
• Адаптивний дизайн: Зробив так, щоб мої дизайни працювали на всіх пристроях за допомогою медіа-запитів. Це було викликом, але повністю того варте, коли

Обфускація JavaScript і потік виконання шкідливого ПЗ

Strela Stealer — це шкідливе програмне забезпечення для викрадення інформації, яке спеціально націлене на крадіжку облікових даних з поштових клієнтів. Воно нещодавно почало використовувати методи обфускації, такі як конкатенація рядків, заміна символів і методи протидії аналізу, що ускладнює аналіз JavaScript-коду та виявлення шкідливого ПЗ.

Strela Stealer зазвичай поширюється через кампанії Malspam, які містять zip-файли. Початкове навантаження, що вилучається з цих файлів, зазвичай є JavaScript-файлом, який виступає як точка входу для інфекції.

Потік виконання JS-скрипта:

Потік виконання

Початкове навантаження, JavaScript-файл, виконується за допомогою wscript.exe, який створює дочірній процес під назвою PowerShell.exe. Цей … Читати далі

1. Вугільно-сірий | Hex #121212
2. Темно-сланцево-сірий | Hex: #191919
3. Космічний простір | Hex: #252525
4. Насичено-чорний | Hex: #0A0A0A
5. Кавове зерно | Hex: #1B1B1B
6. Темно-сірий | Hex: #212427
7. Олійно-чорний | Hex: #0C0C0C
8. Обсидан | Hex: #0B1215
9. Ебоніт | Hex: #222428
10. Чорний шоколад | Hex: #100D08
11. Острівний метал | Hex: #1D1F21
12. Димно-чорний | Hex: #101720
13. Оксфордський синій | Hex: #212A37
14. Зловісно-чорний | Hex: #232023
15. Джет-чорний | Hex: #161618
16. Іридій | Hex: #181818
17. Арсенік | Hex: #11181C
18. Шарлстонський зелений | Hex: #212124
19. Темний острівний метал | Hex: #222428
20. Джет | Hex: #2A2A2A
21. Чорна олива | Hex: #242526
22. Полуночний синій | Hex: #212121

Ця інформація … Читати далі

Як професіонал із досвідом у дизайні та знанням програмування на React і TypeScript, я часто використовую Tailwind CSS для створення естетичних і функціональних додатків. То що ж таке Tailwind CSS?

Що таке Tailwind CSS?

Tailwind CSS — це фреймворк CSS, орієнтований на утиліти, який дозволяє розробникам створювати кастомні дизайни без необхідності виходити за межі HTML. Замість використання традиційних, заздалегідь визначених класів для стилізації елементів, Tailwind заохочує використання утилітних класів (невеликих, багаторазових класів, які застосовують конкретні стилі, такі як відступи, маргінали чи колір) безпосередньо в HTML. Такий підхід призводить до високої налаштовуваності та адаптивного дизайну, який може відповідати вашим конкретним вимогам.… Читати далі

Привіт, усім! 🎄 У цій статті я покажу, як створити анімовану зворотну відлік до Нового року за допомогою GSAP (GreenSock Animation Platform). Цей проект включатиме:

• Анімації феєрверків,
• Анімації конфеті,
• Числа відліку,
• І красивий дизайн фону.

Поїхали! 🚀

🛠️ Інструменти та технології

Для цього проекту ми використаємо наступні інструменти та технології:

1. HTML: Для структурування проекту.
2. CSS: Для стилізації та покращення анімацій.
3. JavaScript: Для керування анімаціями за допомогою GSAP.
   4.
   GSAP: Для створення плавних, професійних анімацій.

1️⃣ Крок: Налаштування проекту

Почнемо з створення простої структури HTML і імпорту бібліотеки GSAP та шрифта (Agbalumo… Читати далі

Фото Тейлора Мерфі на Unsplash

Ми швидко наближаємося до 2025 року, і React, без сумнівів, залишатиметься одним з найпопулярніших виборів для створення фронтенд-застосунків.

Це не через те, що у нього немає недоліків, а через величезну спільноту та масову популярність, яку React здобув за роки. І не можна забувати про React 19, який обіцяє багато нового, тому React не втратить своєї позиції.

Важко уявити React без хуків, але, на жаль, я часто бачу, як розробники їх надмірно використовують. В результаті їм доводиться вирішувати проблеми з масивами залежностей, непотрібними рендерами та всіма проблемами, які вони створили, оскільки глибоко в їхній свідомості є … Читати далі

Протягом багатьох років RxJS був основою реактивності в Angular. Однак однією з його основних проблем у контексті синхронізації даних і вигляду є його безстейтова природа. За своєю суттю, обсервабель (Observable) більше орієнтовані на обробку подій, а не на керування даними. У відповідь команда Angular представила нову примітиву — Signals (Сигнали). Але як тепер працювати з RxJS?

Як згадувалося раніше, основна концепція обсервабель зосереджена на сповіщеннях. Потоки (streams) та їх оператори добре підходять для опису складної логіки на основі подій, особливо при роботі з імперативними API в браузерному середовищі. Тепер, коли Angular вводить інструменти для безшовної взаємодії між сигналами … Читати далі

Привіт, я Сукі, фронтенд-розробник. Під час роботи над моїм особистим проєктом я зіштовхнувся з ситуацією, коли для проєкту була потрібна версія Node 18, а на моєму комп'ютері була версія Node 21. Я вирішив цю проблему за допомогою NVM (Node Version Manager), щоб встановити потрібну версію Node. У цьому блозі я поділюся, як я це зробив.

Щоб встановити NVM на macOS, можна виконати такі кроки:

1. Встановіть Homebrew:

Якщо у вас ще не встановлений Homebrew, відкрийте Терминал і виконайте таку команду:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Встановіть NVM за допомогою Homebrew:

Після того, як Homebrew буде встановлений, використайте його для … Читати далі

Хоістинг в JavaScript

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

Що таке Хоістинг?

Хоістинг в JavaScript — це поведінка, коли оголошення змінних та функцій переміщуються на початок їхнього контексту (скрипт чи функція) під час фази компіляції, до виконання коду.

Переміщуються лише оголошення, а не ініціалізації чи присвоєння.

Хоістинг має різну поведінку для змінних, функцій і класів. Давайте розберемо їх по черзі.

Хоістинг змінних

Хоістинг для змінної, оголошеної через var

• Змінні, оголошені за допомогою var, підлягають