JavaScript'er

🔄 Деструктуризація для швидкого доступу до даних Деструктуризація дозволяє витягувати потрібні значення з масивів або об’єктів прямо в змінні без зайвих рядків коду. Це робить код більш читабельним і зменшує кількість тимчасових змінних. Наприклад, з масиву можна одразу отримати потрібні елементи:

const [a, b] = [1, 2];
console.log(a, b); // 1 2

А з об’єкта — потрібні властивості:

const {name, age} = {name: "Dmytro", age: 16};
console.log(name, age); // Dmytro 16

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

Створюйте відмінну документацію для продукту Ця React-бібліотека під назвою Fumadocs спрощує весь процес завдяки компонентам, макетам і всьому необхідному функціоналу для створення сучасної та акуратної документації. Використовуйте її для документування вашого ПЗ, бібліотеки, фреймворка або будь-якого продукту, який ви розробляєте GitHub: fumadocs JavaScript'еr

Я весь час забуваю, що в Vue можна так робити ✌️ Ти не знаєш JavaScript

😭😭😭 JavaScript'еr

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

🔗 Fetch + then — швидкий запит до API fetch дозволяє робити асинхронні HTTP-запити прямо з браузера. У поєднанні з then ти отримуєш простий і зрозумілий спосіб обробляти відповіді без складної логіки.

fetch("/api/data")
  .then(res => res.json())
  .then(data => console.log(data));

Підхід зручний для швидкого отримання даних з сервера, роботи з API і демонстрацій прототипів. Кожен .then обробляє результат попереднього кроку, що робить код передбачуваним і чистим. JavaScript'еr

⚡️ JS-патерн: IIFE (Immediately Invoked Function Expression) IIFE — це функція, яка запускається одразу після оголошення, без окремого виклику. Це зручно для створення ізольованого простору змінних і уникнення глобального забруднення. Використовувати можна для ініціалізації коду, модулів або тимчасових змінних, які потрібні тільки один раз. Все виконується миттєво і без слідів у глобальному просторі імен. JavaScript'еr

Порада щодо використання інструментів Chrome Dev Tools 💡 Чи знаєте ви, що за допомогою Chrome Dev Tools можна легко відстежувати, які події відбуваються на елементі, і переглядати властивості цих подій?

Щоразу одне й те саме 😃 JavaScript'еr

CSS border values Ти не знаєш JavaScript

🛠 Short-circuit логіка (&& / ||) — прості умови без if У JS оператори && і || дозволяють скорочено виконувати дії або присвоювати значення, замінюючи прості if-умови. Це робить код коротким і легким для читання.

const loggedIn = true;
loggedIn && console.log("Welcome!"); // Welcome!

const input = "";
const name = input || "Anon";
console.log(name); // Anon

&& виконує праву частину тільки якщо ліва істинна, а || повертає перше істинне значення. Це зручно для швидких перевірок і присвоєнь, економлячи зайві рядки коду. JavaScript'еr

Властивість shape-outside Визначає форму, навколо якої має обтікати сусідній вбудований вміст. Зазвичай це робиться для того, щоб текст міг перемальовуватися по такій фігурі, як коло, еліпс або багатокутник

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

Підбірка прикладів використання цієї властивості: натисніть JavaScript'еr

Автоматичне заповнення вводу Елемент HTML <datalist> містить набір опцій (<option></code)), доступних для вибору. Вибране значення буде встановлено для елемента <input> - Різниця між <select> і <datalist> : Крім функції автодоповнення елемента <datalist>, основна відмінність між <select> і цим тегом полягає в тому, що в елементі <select> не можна вибрати або вказати значення, якого немає у списку запропонованих JavaScript'еr

🎯 Map — ефективне зберігання ключ-значення Map дозволяє зберігати пари ключ-значення з швидким доступом до даних, на відміну від звичайних об’єктів ключі можуть бути будь-якого типу, а порядок елементів зберігається.

const map = new Map();
map.set("a", 1);
map.set("b", 2);
console.log(map.get("a")); // 1

Це ідеально підходить для кешування, підрахунку частоти елементів або швидкого пошуку, коли важлива точність і порядок даних. JavaScript'еr

Натрапив тут на цікавий матеріал про те, як працюють черги в контексті HTTP-запитів Аналізуються основні стратегії черг: FIFO, LIFO, пріоритетні, а також активне управління чергами Усе це інтерактивно: можна натискати і дивитися, як все це працює в реальному часі Берете посилання: https://encore.dev/blog/queueing JavaScript'еr

Блін, я хочу дізнатися, що це за додаток JavaScript'еr