JavaScript'er

⚙️ 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

Вибір лише за допомогою CSS Кнопка, що дозволяє вибрати один із запропонованих варіантів. Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'еr

GPU Hot Коли доводиться стежити за кількома GPU-серверами, підключаючись до кожної машини по SSH, постійно переключатися між ними — то ще те задоволення. GPU Hot — опенсорс-утиліта, яка вирішує цю проблему. З нею можна моніторити та керувати всіма GPU прямо з браузера, в єдиному інтерфейсі. Інструмент вміє не лише в реальному часі показувати стан усіх відеокарт на одній машині, а й працювати в кластерному режимі, збираючи дані з усього парку серверів. Вся інформація виводиться у вигляді наочних графіків і таблиць. 📁 Language: #JavaScript 57.3%, #Python 28.5% ⭐️ Зірки: 646 ➡️ Посилання на GitHub JavaScript'еr

Swapy Це інструмент для створення drag-and-drop інтерфейсів всього за пару рядків коду Працює з будь-яким фреймворком: React, Vue, Angular, Svelte або навіть без них. Гнучко налаштовується, дозволяє виділяти слоти та елементи для перетягування, додавати анімації, і відстежувати зміни. Легкий у встановленні та супер зрозумілий у використанні.

npm install swapy

JavaScript'еr