JavaScript 🇺🇦

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

Бургер-меню і трикутник через CSS На 15-му уроці відеокурсу "HTML+CSS+JS для всіх" автор детально розповідає про те, як створити трикутник і бургер-меню через CSS. Мова: 🇺🇦 Тривалість: 1 год 41 хв #JS // #lessons // Вакансії IT

Image Stack Cycle Фотогалерея у вигляді стопки карток, які перегортаються лише за допомогою стрілок. Над назвою є лічильник елементів. #codepen // #practice // JS

Як працюють В-дерева та індекси баз даних Щоб розібратися в цьому питанні було простіше, ми знайшли туторіал, де автор зрозумілою мовою та з ілюстраціями пояснює, що це за структури, навіщо вони потрібні, як працюють і багато інших нюансів роботи СУБД — згодиться і в роботі з JavaScript.

Приклади тут не просто наочні, а й інтерактивні, що робить процес вивчення ще простішим і цікавішим.

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

Stacked Avatars Колаж із картинок, кожна з яких може зміщуватися в центр. Кожне фото має тонку рамку та обрізається з одного боку. #codepen // #practice // JS

🔗 Roadmap для веб-розробників Один із найкрасивіших роадмепів створив розробник із Данії — він склав інтерактивну дорожню карту для веб-розробників.

До кожного пункту додаються посилання на ресурси, де можна вивчити або підтягнути відповідну тему. Це чудовий спосіб організувати навчання і стежити за своїм прогресом у веб-розробці.

👉 Спробувати #JS // #news // Вакансії IT

Є кілька функцій для пошуку підрядка всередині рядка. Функція indexOf( searchString ) поверне індекс першого збігу з searchString у рядку. Якщо збігу немає, повертається до -1.

var string = "Hello, World!";
console.log( string.index0f("o") ); // 4
console.log( string.lastIndex0f("foo") ); // -1

console.log( string.lastIndex0f("o") ); // 8
console.log.apply( string.lastIndex0f("foo") ); // -1

console.log( string.includes("Hello") ); // true
console.log( string.includes("foo") ); // false

Аналогічно lastIndexOf( searchString ) поверне індекс останнього збігу. Якщо треба перевірити наявність підрядка, краще використовуйте includes(). Функція поверне true, якщо знайде підрядок у рядку. #JS // #practice // Архів книг

Вакансія: Front-End Developer Український венчур-білдер SKELAR шукає на офісну роботу в Києві фронтенд-розробника рівня Middle або Senior зі знанням VueJS, Typescript, HTML і CSS — для розробки нового функціоналу і розширення існуючого. 📝 Відкрити анкету #jobs // Архів книг // JS