JavaScript 🇺🇦

Essential Guide to React for All Levels Незалежно від того, початківець ви чи досвідчений розробник, цей вичерпний посібник стане для вас провідником у подорожі потужною екосистемою React — з поглибленими поясненнями та практичними прикладами. Рік: 2024 Мова: 🇬🇧 Автор: Adeolu O. #React // #books // JS

Як розпочати React-проект У цій статті автор надає короткий огляд того, як почати новий проект React — доступно розповідає про переваги та недоліки, а також необхідний рівень навичок розробника. Мова: 🇬🇧 #React // #theory // JS

function getAge(...args) {
   console.log(typeof args);
}

getAge (21);

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

Particles Cursor Ефект для фону у вигляді частинок, що розпадаються в просторі. Кожна з них летить у своєму напрямку та зменшується у розмірі. #codepen // #practice // JS

Сучасні інструменти тестування: JavaScript, Supertest та Jest/Mocha У цій статті автор дає розгорнуту і обґрунтовану відповідь, в чому полягають переваги автоматизованого тестування і від чого залежить вибір інструментів. Мова: 🇺🇦 #JS // #theory // Вакансії IT

Метод repeat() створює новий рядок, повторюючи заданий рядок кілька разів, і повертає його. Викликає RangeError, якщо кількість повторень негативна, дорівнює нескінченності або перевищує максимальний розмір рядка.

const holiday = "Happy holiday!";

// Двічі вводимо рядок
const result = holiday.repeat(2);
console.log(result); // Happy holiday!Happy holiday!

// При використанні 0 повертається порожній рядок
let result1 = holiday.repeat(0);
console.log(result1);

// Використовуємо нецілі значення
let result2 = holiday.repeat(3.2);
console.log(result2);
// Happy holiday!Happy holiday!Happy holiday!
let result3 = holiday.repeat(3.7);
console.log(result3);
// Happy holiday!Happy holiday!Happy holiday!

Якщо використовується параметр 0, повертається порожній рядок. При використанні нецілого числа значення перетворюється на найближче ціле число із заокругленням донизу. #repeat // #practice // JS

Елементи web-форм та їх стилізація На 16-му уроці відеокурсу "HTML+CSS+JS для всіх" автор детально розповідає про web-форми в HTML, їх стилізацію в CSS, а також про цикли в JavaScript. Мова: 🇺🇦 Тривалість: 2 год 49 хв #JS // #lessons // Вакансії IT

Social Share Button Меню із кнопок соцмереж, яке з'являється при наведенні курсору. Картки розгортаються плавно і тому реалістично виглядають. #codepen // #practice // JS

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

У цій лаконічній статті автор наочно з прикладами коду показує, як це можна реалізувати в Angular і в React.

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

Curved Nav Елемент, який можна використовувати як основу меню або галереї зображень. Контраст створюється з допомогою складного градієнтного фону. #codepen // #practice // JS

💻 Dusa — нова мова програмування Це не просто мова, а інструмент для логічного програмування для дослідження графів. Як почати працювати з нею: 🔴спробувати у веб-редакторі 🔴встановити через npm і працювати через CLI або JavaScript API 🔴почитати статтю для занурення в тему 👉 Детальніше #Dusa // #news // JS

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

'ALPHABET'.toLocaleLowerCase(); // 'alphabet'

'\u0130'.toLocaleLowerCase('tr') === 'i'; // true
'\u0130'.toLocaleLowerCase('en-US') === 'i'; // false

let locales = ['tr', 'TR', 'tr-TR', 'tr-u-co-search', 'tr-x-turkish'];
'\u0130'.toLocaleLowerCase(locales) === 'i'; // true

Найчастіше це призведе до того ж результату, що й toLowerCase(). Для деяких локалей може бути інший результат. #JS // #practice // Вакансії IT

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

Метод Reflect.setPrototypeOf() — це той же метод, що й Object.setPrototypeOf(), за винятком типу, що повертається.

const object1 = {};

console.log(Reflect.setPrototypeOf(object1, Object.prototype));
// true

console.log(Reflect.setPrototypeOf(object1, null));
// true

const object2 = {};

console.log(Reflect.setPrototypeOf(Object.freeze(object2), null));
// false

Він встановлює прототип (тобто внутрішню властивість [[Prototype]]) зазначеного об'єкта на інший об'єкт чи null. Якщо операція пройшла успішно — повертається true, якщо ні — false. #JS // #practice // Вакансії IT

Найкращі книги по JS Добірка наших останніх публікацій із найбільш вартісними посібниками по мові JavaScript: 🔴The Complete Developer (🇬🇧, 2024) — обов'язково для вивчення розробки повних веб-програм з нуля. 🔴Mastering MEAN Stack (🇬🇧, 2023) — для створення веб-додатків за допомогою MongoDB, Express.js, Angular і Node.js. 🔴How JavaScript Works (🇬🇧, 2023) — всебічний вступ до JavaScript: від технічних нутрощів до практичної розробки. 🔴Advanced Data Fetching Patterns in React (🇬🇧, 2024) — ваш путівник через складнощі сучасної розробки React. 🔴JavaScript Interview Questions & Challenges (🇬🇧, 2023) — лаконічний посібник щодо запитань і викликів співбесіди з JS. 📚 Товариство, які ще знаєте вартісні українські чи англійські матеріали по JS? #JS // #books // Вакансії IT

Тривожні дзвіночки з екосистеми JavaScript У цьому свіжому огляді найпомітніших вразливостей безпеки JavaScript йдеться про деякі тривожні тенденції, зокрема навколо сценаріїв після інсталяції та попередньої інсталяції в пакетах npm.

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

Мова: 🇬🇧 #npm // #theory // JS

Zoom Grid On Scroll Анімація прокручування для сайту. Нахил ліній на сітці з картинками змінюється, а зображення стає кольоровим при наведенні курсору. #codepen // #practice // JS

Основи роботи з API через Fetch Коли мова заходить про те, що таке робота з API JavaScript, кожен JS-розробник, який поважає себе, одразу ж згадує про fetch — функцію, що дає змогу взаємодіяти з сервером легко й елегантно.

Але як це працює на практиці, і що робить fetch таким зручним? Про це й розповідається у свіжій статті.

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

Об'єкт WebAssembly.Table є структурою, подібною до масиву. Вона використовується для збереження посилань на функції. Як і у випадку з WebAssembly.Memory, доступ до таблиці та її зміни можна отримати як з JavaScript, так і з WebAssembly.

const tbl = new WebAssembly.Table({ initial: 2, element: "anyfunc" });
console.log(tbl.length); // "2"
console.log(tbl.get(0)); // "null"
console.log(tbl.get(1)); // "null"

У цьому прикладі створюється новий екземпляр WebAssembly Table, розміром у два елементи. #WebAssembly // #practice // JS