JavaScript'er

👌Гра камінь, ножиці, папір на чистому CSS https://codepen.io/alvaromontoro/pen/BaaBYyz JavaScript'ер

🔥Розбір завдання із співбесіди: Реалізація Promise.all На співбесідах часто пропонують написати власні реалізацію стандартних функцій мови. Одним із таких завдань може бути написання своєї версії Promise.all . Це чудовий спосіб перевірити розуміння асинхронного програмування та роботи з промісами. Що таке Promise.all? Promise.all - це метод, який приймає масив промісів і повертає новий проміс, який дозволяється, коли всі проміси в масиві успішно завершені, або відхиляється, якщо хоча б один проміс відхилено. Завдання: Написати функцію promiseAll , яка веде себе подібно до Promise.all . Функція повинна: 1. Повертати проміс. 2. Дозволятися з масивом результатів, коли всі проміси виконані. 3. Відхилятися з тією ж причиною, що перший відхилений проміс з масиву. Реалізація promiseAll

function promiseAll(promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      return reject(new TypeError('Arguments must be an array'));
    }

    const resolvedValues = [];
    let resolvedCount = 0;
    const promisesCount = promises.length;

    if (promisesCount === 0) {
      resolve(resolvedValues);
    }

    promises.forEach((promise, index) => {
      Promise.resolve(promise)
        .then(value => {
          resolvedValues[index] = value;
          resolvedCount += 1;
          if (resolvedCount === promisesCount) {
            resolve(resolvedValues);
          }
        })
        .catch(reject);
    });
  });
}

Пояснення реалізації: 1. Функція promiseAll приймає масив промісів promises . 2. Якщо promises не є масивом, функція відхиляється з TypeError . 3. Створюються змінні для зберігання дозволених значень та лічильника дозволених промісів. 4. Проміси перебираються за допомогою forEach , обробляючись через Promise.resolve для підтримки непромісів. 5. Кожного разу, коли проміс дозволяється, його значення записується в resolvedValues , і збільшується resolvedCount . 6. При досягненні resolvedCount значення promisesCount resolvedValues повертається. 7. У разі відхилення будь-якого промісу основний проміс відхиляється. Висновок: Розуміння та реалізація Promise.all відображає хороші знання асинхронності у JavaScript. Це типове питання на співбесідах, яке перевіряє вміння кандидата працювати з промісами та асинхронним кодом. JavaScript'ер

🥴Треба сказати "ні" та й все JavaScript'ер

💬Питання із співбесіди Поясніть концепцію критичного шляху рендерингу веб-сторінки та як ви можете оптимізувати критичний шлях для прискорення завантаження сторінки. Критичний шлях рендерингу - це послідовність кроків, які браузер виконує для перетворення HTML, CSS і JavaScript у пікселі на екрані. Оптимізація критичного шляху може охоплювати зменшення обсягу даних, що передаються на початковому етапі завантаження (наприклад, через мінімізацію коду, використання стиснення й оптимізацію зображень), усунення блокування ресурсів (наприклад, відкладене завантаження або асинхронне завантаження скриптів), оптимізацію порядку завантаження ресурсів (критичні стилі та скрипти першими), а також прискорення відтворення сторінки (використання кешу браузера та попереднє завантаження ресурсів). Це допомагає браузеру швидше відобразити вміст сторінки і поліпшити сприйняття продуктивності користувача. JavaScript'ер

😰А якщо брехня JavaScript'ер

🔥Корисний репозиторій на JS Madge - створює графіки та шукає циклічні залежності на основі залежностей модулів CommonJS, AMD або ES6. 🐱Посилання на GitHub. JavaScript

👩‍💻Топова шпора по багатьом темам JavaScript'ер

👩‍💻JavaScript Interview Questions – список запитань та відповідей для співбесіди Підійде для тих, хто навчається середнього рівня і вище. Посилання на GitHub. </Codu>

👩‍💻Як влаштована специфічність стилів? CSS влаштований так, що однакові CSS-властивості з різним значенням, які застосовуються до елемента, не можуть бути застосовані до нього одночасно. Наприклад:

 h1 {
   color: red;
 }
 .h1 {
   color: blue;
 }
 #h1 {
   color: yellow;
 }

<h1 id="h1" class="h1" style="color: black">Header</h1> Якась із властивостей має "перемогти". Перемагає (має перевагу) властивість найближчого до форматованого елементу стилю. Або, правильніше висловитися, найспецифічнішого стилю. Ось спрощена, але наочна модель специфічності селекторів в умовних одиницях: - Селектор тегів має специфічність, що дорівнює 1 умовній одиниці. - Клас – 10 умовних одиниць. - Ідентифікатор – 100 умовних одиниць. - Рядковий стиль - 1000 умовних одиниць У наведеному прикладі <h1> матиме чорний колір тексту. JavaScript'ер

👩‍💻Шпаргалка типів курсорів в CSS CSS-властивість cursor встановлює курсор миші, якщо є, для відображення, коли вказівник миші знаходиться над елементом. Ви можете вказати тип курсору за допомогою ключового слова або завантажити значок. JavaScript'ер

⏺Button pushed inside style Bитончена анімація іконок під час наведення курсору. Реалізовано за допомогою CSS і JavaScript. JavaScript'ер

📌Шпаргалка по функціям стрілок, представникам функцій та виразах JavaScript'ер

🥸Що таке область видимості? Область видимості – це місце, де ми маємо доступ до змінних та функцій, що знаходяться в ній. JS маємо три типи областей видимості: глобальна, функціональна та блокова (ES6). ▪️Глобальна – змінні та функції, оголошені у глобальному просторі імен, мають глобальну область видимості та доступні з будь-якого місця у коді. ▪️Функціональна – змінні, функції та параметри, оголошені всередині функції, доступні лише всередині цієї функції. ▪️Блокова – змінні, оголошені за допомогою ключових слів let і const, доступні лише всередині блоку {}, в якому було оголошено. ▪️Область видимості – це також набір правил, за якими здійснюється пошук змінної. Якщо змінної немає у поточній області видимості, її пошук проводиться вище, у зовнішній стосовно поточної області видимості. Якщо й у зовнішній області видимості змінна відсутня, її пошук триває до глобальної області видимості. Якщо у глобальній області видимості змінну виявлено, пошук припиняється, якщо ні – викидається виняток. Пошук здійснюється за найближчими до поточної областей видимості та зупиняється зі знаходженням змінної. Це називається ланцюжком областей видимості (Scope Chain). </Codu>

😰Code meme JavaScript'ер

🔗3D Tilting Card Effect Логіка повороту картки реалізована JS і залежить від положення курсора користувача. JavaScript'ер

💬Питання із співбесіди Що станеться в результаті вираження var foo = 10 + "20" і чому? Відповідь: Змінна foo набуде значення "1020". Це відбувається через концепцію, відому як наведення типів у JavaScript. Якщо хоча б один з операндів є рядком, другий також буде перетворено на рядок. У цьому випадку число 10 складається з рядком "20". У результаті число 10 перетворюється на рядок, і відбувається конкатенація рядків, а не додавання чисел. JavaScript'ер