JavaScript'er

Швидка порада щодо CSS: Використовуйте ключове слово CSS unset для скидання всіх властивостей до їх успадкованих значень, включаючи значення батьківського елемента та значення за замовчуванням Дуже зручно використовувати як значення властивості all Ти не знаєш JavaScript

Хтось реально взяв і скомпілював цей бінарний код🚬 JavaScript'еr

⚙️ JS-шпаргалка: замикання (Closures) Одна ідея: Замикання дозволяють функції “пам’ятати” змінні з зовнішнього оточення навіть після виконання цієї зовнішньої функції. 1. Базове замикання:

function counter() {
  let n = 0;
  return () => ++n;
}

2. Інкапсуляція приватної змінної:

function createUser() {
  let name = "Anon";
  return { get: () => name, set: v => name = v };
}

3. Створення фабрики функцій:

const mult = x => y => x * y;
const double = mult(2);

4. Кешування результатів:

function memo(fn) {
  let cache = {};
  return x => cache[x] ?? (cache[x] = fn(x));
}

5. Збереження стану між викликами:

function idGen() {
  let id = 0;
  return () => id++;
}

Висновок: Замикання — must-have інструмент, якщо хочеш компактно зберігати стан і приховувати логіку всередині функцій. JavaScript'еr

Мобільне меню в стилі Apple Анімація меню у мобільному форматі. Реалізовано за допомогою SCSS та JS. ⤷ Забрати код JavaScript'еr

PinMe Зазвичай, коли потрібно задеплоїти особистий сайт або показати портфоліо, окрім купівлі сервера доводиться розбиратися з купою налаштувань. Для новачків це справді високий поріг входу. У таких ситуаціях PinMe може допомогти. Це мінімалістичний, але потужний інструмент для децентралізованого деплою: достатньо однієї команди, щоб опублікувати сайт або файли. Сервер налаштовувати не потрібно. Після завантаження створюється унікальна, захищена від підміни адреса. Є підтримка прив’язки ENS домену, щоб сайт виглядав більш професійно. 📁 Language: #TypeScript 59.4% ⭐️ Зірки: 826 ➡️ Посилання на GitHub Github'er

Yaak Під час розробки часто потрібно тестувати різні API. Раніше для цього використовували Postman або Insomnia, але з часом вони почали здаватися надто громіздкими — купа функцій, які взагалі не потрібні. На GitHub я випадково натрапив на опенсорсний десктопний інструмент Yaak, створений з акцентом на конфіденційність і продуктивність. З ним можна спокійно займатися API-тестуванням, не переживаючи за витоки даних або гальмування. Він написаний на Tauri, Rust і React, працює дуже швидко і повністю офлайн. Підтримує різні протоколи — REST, GraphQL, gRPC, WebSocket та інші. Плюс вміє шифрувати і зберігати чутливі дані в системному сховищі ключів. Просто завантажуєш інсталятор і користуєшся. Чудово підходить розробникам і техкомандам, яким важливі швидкість, приватність і мінімалізм 📁 Language: #TypeScript 62.7%, #Rust 35.8% ⭐️ Stars: 8.2k ➡️ Посилання на GitHub JavaScript'еr

Бібліотека Slim Select робить створення красивих, налаштовуваних dropdown-меню з купою функцій та варіацій максимально простим. Підтримується пошук, мультивибір та багато іншого Відмінна легка альтернатива громіздким UI-фреймворкам ✌️ GitHub: slim-select Ти не знаєш JavaScript

життя побило 😭 JavaScript'еr

Зубчастий перемикач Креативний перемикач. Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'еr

🤔 Навіщо потрібен адаптер? Адаптер необхідний для забезпечення сумісності між зовнішніми компонентами та внутрішньою бізнес-логікою. Він дозволяє змінювати технології (інтерфейс користувача, базу даних, API) без зміни ядра додатка. JavaScript'еr

JavaScript викликає кошмари. 🔪 JavaScript'еr

Корисний SEO-інструмент для веб-розробників, який дозволяє миттєво перевірити, чи можуть боти Google та AI-краулери отримати доступ до вашого сайту. Просто введіть адресу свого сайту, і сервіс запустить кілька перевірок, щоб надати вам детальну інформацію про сканованість та доступність JavaScript'еr

У CSS є потужна фіча — можливість анімувати елементи залежно від поточної позиції прокрутки. Те, що раніше вимагало складного JS, тепер можна реалізувати нативно в CSS 🤩 Створіть keyframes, як для звичайних анімацій, але вкажіть режим view() або scroll(). Доступно багато параметрів для налаштування — детальніше в документації MDN по scroll-driven animations. Повна підтримка у всіх браузерах відсутня. Цей приклад працює в Chrome, для Firefox потрібні доопрацювання Робочий прототип з додатковими властивостями для Firefox можна знайти в CodePen Ти не знаєш JavaScript

Коли тімлід наприкінці робочого дня пропонує взяти завдання JavaScript'еr

🧪 JS-шпаргалка: async/await Одна ідея: async/await спрощує роботу з асинхронним кодом, роблячи його читабельним, наче звичайний синхронний код. 1. Базове очікування промісу:

const data = await fetch('/api').then(r => r.json());

2. Обгортання в async-функцію:

async function load() {
  return await fetch('/user').then(r => r.json());
}

3. Обробка помилок через try/catch:

async function run() {
  try { await doTask(); }
  catch (err) { console.error(err); }
}

4. Паралельне виконання через Promise.all():

const [u, p] = await Promise.all([getUser(), getPosts()]);

5. Очікування власного промісу:

const wait = ms => new Promise(r => setTimeout(r, ms));
await wait(500);

Висновок: async/await варто тримати під рукою — це найзручніший спосіб писати чистий асинхронний код. JavaScript'еr