JavaScript'er

BentoPDF Коли потрібно попрацювати з PDF, онлайн-інструменти з пошуку зазвичай вимагають завантажити файли на їх сервери і при цьому стикаються з купою обмежень по функціональності. В результаті більше роздратування, ніж користі. Випадково натрапив на GitHub на BentoPDF — це open source PDF-тулбокс, де вся обробка відбувається локально в браузері. Файли нікуди не відправляються. Всередині більше 50 корисних інструментів: об'єднання і розбиття PDF, редагування і конвертація, шифрування і стиснення. Можна створювати заповнювальні форми, додавати водяні знаки і номери сторінок, робити OCR і витягувати текst. Плюс підтримуються різні формати зображень для конвертації в PDF, включаючи HEIC і WebP. Можна працювати з Markdown, JSON та іншими форматами, а також відновлювати пошкоджені PDF. Є Docker-образ для швидкого розгортання. Або можна завантажити готову збірку і розгорнути на будь-якому веб-сервері. Підтримується установка в підкаталог і спрощений режим інтерфейсу. 📁 Мова: #JavaScript 55.3% ⭐️ Зірки: 7.7k ➡️ Посилання на GitHub Github'er

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

⚡️ IIFE — одразу запускаємо функцію IIFE (Immediately Invoked Function Expression) — це функція, яка виконується одразу після того, як її оголосили, без додаткового виклику. Такий підхід дозволяє створювати ізольовані області змінних, які не потрапляють у глобальний простір, і виконувати логіку тільки один раз. Наприклад, часто використовують IIFE для ініціалізації модулів, налаштувань або одноразових дій, коли не хочеться залишати тимчасові змінні в глобальному середовищі:

(() => {
  const temp = "Одноразова змінна";
  console.log("Hello!", temp);
})(); 
// Hello! Одноразова змінна

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

той самий великий зумер JavaScript'еr

Ефект зворотного зв'язку при натисканні на кнопку Імпульсний ефект для кнопки при натисканні на неї. Реалізовано за допомогою CSS і JS. ⤷ Забрати код JavaScript'еr

🧠 Template literals — легке форматування рядків Template literals ( `` ) дозволяють вставляти змінні прямо в рядок без складної конкатенації через +. Це робить код читабельнішим і наочнішим, особливо коли рядки довгі або містять змінні.

const name = "Dmytro";
console.log(`Hello, ${name}!`); // Hello, Dmytro!

Крім змінних, з template literals зручно робити багаторядкові рядки та складні вирази всередині ${}, що економить час і зменшує шанс помилок. JavaScript'еr

Хіба не було? JavaScript'еr

Приніс знахідку: sshx. Всього одна команда, і у вашому браузері відкривається репліка локального терміналу: ви можете запросити колег за посиланням, бачити курсори один одного і навіть спілкуватися в чаті Ідеально для дебагування, навчання або просто спільної роботи. Сайт тут, GitHub тут JavaScript'еr

Порада щодо Chrome Dev Tools: Інспекція стилів плейсхолдера За замовчуванням Chrome DevTools не відображає стилі :placeholder при інспекції елементів. Можна увімкнути налаштування "Показати shadow DOM користувача", щоб відобразити shadow DOM браузера, який генерується для різних вбудованих елементів, таких як <input>, <progress>, <video> тощо. Ми можемо інспектувати ці елементи shadow DOM, створені користувацьким агентом, щоб переглядати/редагувати стилі плейсхолдера, повзунка у range input тощо. JavaScript'еr

⚡️ Optional chaining — безпечний доступ до властивостей Optional chaining (?.) дозволяє доступатися властивостям об’єкта без ризику помилки, якщо якийсь рівень не існує. Це особливо корисно при роботі з великими об’єктами або API-відповідями, де не всі поля гарантовані.

const user = { profile: { name: "Dmytro" } };
console.log(user?.profile?.name);    // Dmytro
console.log(user?.settings?.theme); // undefined

Замість багатьох перевірок через if або логічні оператори, optional chaining робить код чистим, зрозумілим і безпечним. JavaScript'еr

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

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

Огляд методів JavaScript DOM 👨‍💻 Ти не знаєш JavaScript

Ніколи не кажи «ніколи» JavaScript'еr

Форма входу/реєстрації з подвійним слайдером Форма реєстрації або входу в аккаунт. Реалізовано за допомогою CSS і JS. ⤷ Взяти код JavaScript'еr

🔄 Default values при деструктуризації — значення за замовчуванням Деструктуризація дозволяє одразу присвоювати значення за замовчуванням, якщо потрібна властивість відсутня. Це робить код стабільним і безпечним, особливо при роботі з неповними даними.

const { x = 0, y = 0 } = { x: 5 };
console.log(x, y); // 5 0

Тут x отримує реальне значення з об’єкта, а y, якого немає, автоматично стає 0. Це зручно для API-відповідей або налаштувань, де не всі поля гарантовано присутні. JavaScript'еr