JavaScript 🇺🇦

Як працює key в React У цій статті ми заглибимось в концепцію атрибута key в React та виявимо, що key має значно ширші способи використання, ніж всі звикли думати.

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

Мова: 🇺🇦 #React // #theory // JS

console.log(1234 / 10 | 0);
console.log(1234 / 100 | 0);
console.log(43.21 | 0);

👉 Відповідь #JS // #practice // Архів книг

Frosted Glass loader Оригінальна анімація завантаження у вигляді svg-картинки. Зроблено за допомогою бібліотеки gsap. #codepen // #practice // JS

Первозданний JavaScript Автор цієї статті — сертифікований Software Engineer, який 10 років працює з JavaScript. Тут він вирішив поговорити про первозданний JavaScript — до 2015-го.

Це JS, який знають піонери й про який, на жаль, не чуло молоде покоління.

Мова: 🇺🇦 #JS // #theory // Архів книг

Статичний метод Reflect.isExtensible() визначає, чи об'єкт розширюється (чи можуть до нього додаватися нові властивості). Він схожий на Object.isExtensible(), але з відмінностями.

const object1 = {};

console.log(Reflect.isExtensible(object1));
// true

Reflect.preventExtensions(object1);

console.log(Reflect.isExtensible(object1));
// false

const object2 = Object.seal({});

console.log(Reflect.isExtensible(object2));
// false

Якщо аргумент target тут не є об'єктом (примітивом), то викликається TypeError. Із Object.isExtensible() аргумент target, який не є об'єктом, поверне false без жодних помилок. #JS // #practice // Архів книг

Верстаємо лендінг з нуля: дещо про фронтенд На 12-му уроці відеокурсу "HTML+CSS+JS для всіх" автор дає багато корисних рекомендацій щодо фронтенд-розробки в рамках верстки лендінгу і не тільки. Мова: 🇺🇦 Тривалість: 2 год 5 хв #JS // #lessons // Вакансії IT

Wiggly Squiggly Реалізовано на TypeScript, анімовано за допомогою бібліотеки TweenMax. #codepen // #practice // JS

Оновлений Angular Code Style В Angular останнім часом з’явилося багато нового: від сигналів до оновленого стилю для шаблонів. Тож автор даної статті ділиться оновленим підходом до code style. Мова: 🇺🇦 #Angular // #theory // JS

Search Input Animation Стильна анімація кнопки пошуку. Зроблено за допомогою класичного стека HTML + CSS (SCSS) + JS. #codepen // #practice // JS

Бібліотека Sonner для React З'явився потужний інструмент для створення повідомлень — просте встановлення, кастомізація і топові візуальні фішки. Вистачає трьох рядків коду, щоб усе запрацювало.

Задавайте типи, налаштовуйте позиції, керуйте кількістю відображуваних повідомлень. Також є супер-зручна підтримка анімацій і додаткових дій.

👉 Детальніше #Sonner #React // #news // JS

Метод trimEnd() видаляє прогалини з кінця рядка. До них відносяться пробіли, табуляції тощо. Якщо в кінці рядка немає прогалини, все одно буде повернуто новий рядок (фактично, копію рядка).

const greeting = '   Hello world!   ';

console.log(greeting);
// "   Hello world!   ";

console.log(greeting.trimEnd());
// "   Hello world!";

#trimEnd // #practice // JS

How JavaScript Works У цій книзі представлено всебічний вступ до JavaScript: від того, як ця мова працює на технічному рівні — до того, як її використовувати для створення веб-сайтів і програм. Рік: 2023 Мова: 🇬🇧 Автор: Jonathon Simpson #JS // #books // Архів книг

В JavaScript існує три варіанти перетворення об'єкта на масив: Object.keys(), Object.values() і Object.entries().

const zoo = {
   lion: 'meat',
   panda: 'grass',
};

Object.keys(zoo);
// ['lion', 'panda']

Object.values(zoo);
// ['meat', 'grass']

Object.entries(zoo);
// [['lion', 'meat'], ['panda', 'grass']]

Але не завжди це було так просто — до появи ES6 і ES8 доводилося використовувати перебір елементів об'єкта в циклі, щоб конвертувати об'єкт у масив. Якщо ж треба перетворити масив назад на об'єкт, можна скористатись методом під назвою Object.fromEntries. По суті, це протилежність Object.entries. #JS // #practice // Вакансії IT

Вакансія: JavaScript Developer Компанія-розробник програмного забезпечення Innovation Group шукає на віддалену роботу JS-розробника рівня Middle із досвідом з JavaScript від 4-х років та з TypeScript від 3-х років — для розробки payment і телеграм-додатків. 📝 Відкрити анкету #JS // #jobs // Архів книг

Майбутнє мікросервісів Деякі компанії, зіткнувшись зі складністю мікросервісів, повертаються до монолітів, але з використанням сучасних технологій. Інші тільки починають впроваджувати мікросервісну архітектуру. Чому компанії повертаються до спрощення, і що саме стоїть за концепцією "монолітів 2.0"? Це питання залишається відкритим для роздумів та обговорень. Своїми думками діліться в коментарях 👇 #JS // #theory // Архів книг

🟡 Дата-аналітика увійшла в топ-10 високооплачуваних професій майбутнього Аналітики даних можуть знайти роботу в будь-якій сфері: IT, маркетинг, e-commerce, фінанси, освіта, сільське господарство. 🔝 Згідно статистики DOU медіанна зарплата українських дата-фахівців сягнула $1750 в 2024 році. Хочеш дізнатися більше про цю професію? Реєструйся на безкоштовний інтенсив під наставництвом досвідченого аналітика Нікіти Тимошенко з Adante Consulting, Канада. 4 дні | Онлайн | Безкоштовно ➡️ i.goit.global ⬅️

const arr = [4, 9, 16];

const result = Math.abs(arr);

console.log(result);

👉 Відповідь #JS // #practice // Архів книг

Progress Button Дана кнопка прогресу складається з декількох svg, що анімуються бібліотекою anime.js. #codepen // #practice // JS

5 технічних тенденцій JavaScript в 2025 році JS залишається основою сучасної веб-розробки — не тому, що він зручний, а тому, що він невпинний.

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

Мова: 🇬🇧 #JS // #theory // Вакансії IT

Дізнайтеся, чи пристрій користувача працює у темному режимі, використовуючи наступний код:

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

console.log(isDarkMode) // Результат: True або False

#JS // #practice // Архів книг