JavaScript'er

⌛css preloader Очікування завантаження у вигляді частинок, що стрибають, які змінюють свій колір при зіткненні. Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'ер

📱Оптимізація продуктивності за допомогою debounce JavaScript 1. Що таке debounce? Debounce – це техніка, що дозволяє обмежити частоту виконання функції, запобігаючи її викликам на кожній події. Це корисно при роботі з подіями, що часто відбуваються, наприклад, уведення тексту або прокручування сторінки.

 let timeout;
function debounce(func, delay) {
return function() {
clearTimeout(timeout);
timeout = setTimeout(func, delay);
};
}

2. Як працює debounce? Debounce затримує виконання функції, поки подія припиниться на заданий проміжок часу. Це особливо корисно для запобігання частим запитам на сервер, наприклад, у полі пошуку.

 const handleInput = debounce(function() {
console.log('Введення оброблено');
}, 500);

document.getElementById('search').addEventListener('input', handleInput);

3. Використання debounce для подій input Коли користувач вводить текст у поле, можна використовувати debounce, щоб надіслати запит на сервер лише після того, як користувач перестане вводити текст на 500 мілісекунд.

 document.getElementById('search').addEventListener('input', debounce(function(e) {
console.log('Пошук для:', e.target.value);
}, 500));

4. Переваги використання debounce

• Зменшується кількість функцій, що виконуються. • Покращує продуктивність, уникаючи зайвих обчислень. • Ефективний для пошукових форм, автодоповнення та інших інтерактивних елементів.

JavaScript'ер

Unlimited POWEEEEEER! 😎 JavaScript'ер

📌Натрапив тут на одну корисну штуку - Mocky називається Загалом, якщо потрібно швидко згенерувати якусь фейкову відповідь від сервера — ось це саме те, що треба Заходиш на сайт, вбиваєш свою JSON-відповідь, налаштовуєш заголовки, коди відповідей — і вуаля, у тебе вже є URL-адреса, яку можна смикати як справжній API😧 ✓ Ендпоїнти GET/POST/PUT/DELETE ✓ Налаштування заголовків та відповідей ✓ Без реєстрації та безкоштовно JavaScript'ер

💡Порада щодо JavaScript Можливо, ви не знали про цей простий спосіб виконання сортування без урахування регістру JavaScript'ер

🥸Як робиться http запит? HTTP-запит включає метод (GET, POST), URL, заголовки та тіло (якщо потрібно), відправляється клієнтом на сервер, який повертає відповідь. JavaScript'ер

Тук-тук ✊ Вивчати АНГЛІЙСЬКУ без стресу хочеш? А ще й зі знижкою 1000 грн і з 10 уроками у подарунок 😏🎁 Умови 👇 Опануй цілий рівень за 3 місяці, займайся 2 рази на тиждень в групі Online по 90 хв та проходь самостійні уроки тоді, коли буде час на натхнення! ✅ змінюй графік занять (~18 варіантів) та перенось уроки без обмежень ✅ навчайся на базі інтерактивного підручника 12 Tracks (~ 38 видів вправ) ✅ персоналізуй своє навчання з розумним тренажером SMARTE (лексика, граматика, нотатки) Всім, хто приєднається у групи з 9 грудня даруємо 🎁 10 онлайн уроків на тему "50 побутових предметів англійською". Отримай знижку 1000 грн на онлайн курс за репост у себе в сторіз (деталі у менеджерів). Отримай знижку 👉 пиши "хочу знижку 1000 грн" @Project12_english Тест на визначення рівня та запис на курс – https://cutt.ly/veZ92l1O 📒 Telegram школи Р12

Мало хто по-справжньому розуміє Event Loop JavaScript💀 Цей ресурс пояснює його покроково та наочно. Встав свій код, і він покаже, як все виконується: https://vault-developer.github.io/event-loop-explorer/ JavaScript'ер

🌐hn-theme-switcher — розширення Chrome, що дозволяє користувачам налаштовувати зовнішній вигляд Hacker News за допомогою різних тем. Мови: CSS (53.9%), JavaScript (39.2%), HTML (6.9%). ⭐️ Star 12 Github'er

⬇️Desktop Menu Animation Поява бічних вкладок меню при натисканні на кнопку Бургер Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'ер

Шпаргалка по JavaScript JavaScript'ер

❗️ Безоплатний 8-денний тест-драйв IT професій ▪️ Для бажаючих працювати онлайн і заробляти в $; ▪️ Для тих, хто давно хотів працювати в IT, але не обрав для себе напрям Тривалість — 8 днів. Заняття проходять вечорами.

На тест-драйві ви спробуєте себе в ролях: ▫️ вебдизайнера, ▫️ розробника, ▫️ дата-аналітика,  ▫️ проджекта,  ▫️ тестувальника. 

✅ Програма розрахована на новачків. У вільний час ви дивитесь короткі лекції та робите цікаві завдання, які перевіряє ментор. Після реєстрації приємний бонус: Штучний інтелект в IT. Як використовувати AI у 5 ключових ІТ-професіях?. 🔥 Реєструйтесь за посиланням: https://i.goit.global/5iLXh

💡Порада з HTML Чи знаєте ви, що можна розмістити кнопку відправки форми поза самою формою? JavaScript'ер

🥸Наведи приклад мікрозавдань Приклади мікрозадач JavaScript включають колбеки, пов'язані з Promise (методи .then(), .catch(), .finally()), а також MutationObserver. Ці завдання додаються в чергу мікрозадач і виконуються відразу після поточного стека викликів, але до виконання макрозадач, таких як таймери або події з черги подій. JavaScript'ер

"Тестувальник-сатанісит, щоб пофіксити баг, приносить у жертву працюючу фічу" 😅 JavaScript'ер

⌛CSS Loader animation Очікування завантаження у вигляді мерехтливого кільця. Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'ер

🥸Питання співбесіди Як використовувати модулі JavaScript? Відповідь: 1. Експортування модулів: Дозволяє виконувати функції, об'єкти або змінні доступними для інших файлів. Використовується export для експорту кількох елементів із модуля.

 // utils.js
export function add(a, b) {
return a + b;
}
export const pi = 3.14159;

2. Імпортування модулів: Дозволяє використовувати раніше експортовані елементи. Використовується import для імпорту окремих елементів із модуля.

 // main.js
import { add, pi } from './utils.js';
console.log(add(2, 3)); // 5
console.log(`Value of pi: ${pi}`); // Value of pi: 3.14159

3. Експорт за замовчуванням: Використовується для експорту одного основного елемента з модуля. Це може бути функція, клас чи об'єкт. Використовується export default для цього.

 // math.js
export default function multiply(a, b) {
return a*b;
}

4. Імпорт за замовчуванням: Здійснюється без фігурних дужок. Можна дати елементу, що імпортується, будь-яке ім'я.

 // main.js
import multiply від './math.js';
console.log(multiply(2, 3)); // 6

5. Динамічний імпорт: Дозволяє завантажувати модулі асинхронно, що корисно для завантаження модулів на вимогу. Використовується import() для динамічного імпорту.

 // main.js
async function loadModule() {
const { add } = await import('./utils.js');
console.log(add(5, 10)); // 15
}
loadModule();

6. Імпорт всього вмісту модуля: Іноді потрібно імпортувати вміст модуля під одним ім'ям. Використовується import*as для цього.

 // main.js
import * as Utils from './utils.js';
console.log(Utils.add(2, 3)); // 5
console.log(`Value of pi: ${Utils.pi}`); // Value of pi: 3.14159

Ти не знаєш JavaScript