JavaScript 🇺🇦

Шпаргалка з Document Object Model у JavaScript: window — представляє вікно браузера та глобальний об’єкт (керує вкладками, таймерами, історією), document — дає доступ до HTML-сторінки (пошук елементів, зміна структури й контенту), element — окремий HTML-елемент (робота з класами, атрибутами, розмірами), style — керування CSS-властивостями елементів (колір, відступи, позиціонування), node — базова одиниця DOM-дерева (батьківські/дочірні елементи, навігація), events — обробка подій (click, keypress, mouseover, submit), input/form — робота з формами та введеними даними (value, checked, submit), image — керування зображеннями (src, розміри), anchor — робота з посиланнями (href, target), layer — позиціонування та накладання елементів на сторінці JavaScript

Генератор випадкових паролів Вкладка генератора паролів. Реалізовано на SCSS і JavaScript. ⤷ Взяти код JavaScript'еr

😁 @itmemeua

Шпаргалка з CSS3: синтаксис — селектор + властивість + значення (selector { property: value; }), backgrounds — керування фоном (color, image, repeat, position), fonts — налаштування шрифтів (family, size, weight, style), text & spacing — відступи, вирівнювання, міжрядковий інтервал (line-height, letter-spacing, text-align), display & positioning — типи відображення (block, inline, flex) і позиціонування (static, relative, absolute, fixed), box model — margin, padding, border, colors — HEX, RGB, HSL, borders & outlines — стилі та товщина рамок, lists — оформлення списків (list-style), tables — стилізація таблиць, columns — багатоколонковий layout, overflow & visibility — керування видимістю та переповненням JavaScript

Cloudflare анонсувала «наступника» WordPress Нова CMS, побудована на Astro та TypeScript, з фокусом на сучасну розробку

Що цікавого: • безпечна за замовчуванням — плагіни працюють у sandbox • є CLI, MCP і нативна підтримка AI-агентів • просте розгортання в Cloudflare або на Node.js

$ npm create emdash

JavaScript

JavaScript + Fetch API У відео пояснюється як отримувати дані з API та працювати з JSON JavaScript

Якраз навпаки JavaScript

Плавні анімації без “стрибків” у React Зверни увагу: у коректному прикладі чіпи миттєво перебудовуються, щойно один із них видаляється. Вони не «пливуть» хаотично, а акуратно стають на нові позиції Таку поведінку забезпечує режим popLayout в AnimatePresence з motion/react. Він оптимізує анімацію при видаленні елементів, роблячи її швидшою та значно плавнішою JavaScript

Ледь помітно, але спрацювало JavaScript

Як відстежувати помилки в JavaScript? Є кілька способів: • через консоль браузера (DevTools) • за допомогою сервісів логування: Sentry, LogRocket, Bugsnag • локально через console.error з відправкою на сервер • використовуючи window.onerror, unhandledrejection та Performance API JavaScript

Meilisearch — гнучка та потужна пошукова система для будь-якого сайту чи додатку

Ключові можливості: • гібридний пошук: поєднує переваги семантичного та повнотекстового пошуку для максимально релевантних результатів • пошук під час введення: результати за <50 мс • підтримка опечаток: знаходить правильні результати навіть при помилках у запиті • фільтрація та сортування: за ціною, датою та іншими параметрами • синоніми: налаштовуйте синоніми для більш релевантних результатів • геопошук: фільтрування та сортування на основі геоданих • підтримка мов: пошук на будь-якій мові, включаючи китайську, японську, іврит та латинські алфавіти

JavaScript

Кнопки. CSS Hover Велика кількість анімованих кнопок. Реалізовано за допомогою CSS. ⤷ Взяти код JavaScript'еr

😁 @itmemeua

Шпаргалка з написання красивого HTML-коду: правильний DOCTYPE (коректне визначення документа), охайний head (meta, title, підключення стилів і скриптів), семантична структура (змістовні теги та меню), використання id/class для стилізації, один основний контейнер (div wrapper), винесення повторюваного контенту (меню, футер), правильне закриття тегів, пріоритет важливого контенту на початку, чиста ієрархія заголовків (h1–h6), відступи та форматування коду (tab/indent), розділення HTML і CSS (без inline-стилів), фокус на контенті та читабельності JavaScript

Pinterest перейшов на нативні CSS-каруселі, замінивши застарілий JS по всій платформі

Використовуючи CSS-примітиви типу scroll markers та scroll snap, команда досягла: • скорочення коду на 90% (з ~2000 рядків JS до ~200 рядків CSS) • прискорення завантаження сторінок на 15% • більш плавного та інтерактивного UI

JavaScript

І все одно кожного разу сподіваєшся, що цього разу обійдеться без помилок JavaScript

Шпаргалка з CSS селекторів: * — універсальний селектор (вибирає всі елементи), div — селектор за тегом, .class — за класом, #id — за ідентифікатором; комбінатори: div a — нащадки, div > a — прямі діти, div ~ a — загальні сусіди, div + a — сусід одразу після, div, a — вибір кількох селекторів (OR), div.class — поєднання умов (AND) JavaScript

transitionType — новий проп для посилань у Next.js 16.2 Потребує додаткової конфігурації для <ViewTransitions /> <ViewTransitions> залишається експериментальною функцією і не призначена для продакшн-проєктів Детальніше тут JavaScript