JavaScript'er

React Grid Layout — це система сіткового розташування, схожа на Packery або Gridster, для React. Вона дозволяє створювати перетягувані, змінювані за розміром і адаптивні сіткові макети в React. Уявіть панелі управління, адмін-панелі, сторінки аналітики або конструктори сторінок, де користувачі можуть вільно переміщувати та змінювати розміри блоків. Ви визначаєте сітку один раз, і вона сама керує перетягуванням, зміною розмірів і точками переривання. GitHub: react-grid-layout JavaScript'еr

🧠 Так, ви вмієте писати код. Але щоб зростати у кар’єрі, треба вміти розповідати про нього англійською. На онлайн-курсі English for IT ви прокачаєте саме ту англійську, яка потрібна для впевненої комунікації в технічному середовищі. 📝 Це 27 онлайн-занять щоб: ➔ впевнено комунікувати на мітингах, стендапах, ретроспективах, плануваннях, демо та код-ревʼю ➔ писати коментарі в GitHub і Jira, складати технічну документацію ➔ презентувати та захищати проєкти, ідеї, рішення й фічі in English ➔ чітко описувати сучасні технічні процеси та інновації ➔ підтримувати small talk та спілкування в кроскультурній команді Рівень для комфортного навчання: B1 (Intermediate) Старт: 26 лютого Програма курсу та реєстрація 🔗

Запобігання ланцюжковій прокрутці за допомогою overscroll-behavior Якщо ми спробуємо виконати прокрутку, коли межа прокрутки досягнута, прокрутка буде виконана в найближчій батьківській області прокрутки, що називається ланцюжком прокрутки (scroll chaining) Ми можемо запобігти ланцюжковій прокрутці, встановивши для властивості overscroll-behavior значення contain або none - Детальніше - Пограти можна тут JavaScript'еr

😱😱😱 JavaScript'еr

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