JavaScript'er
关闭频道
Заявки приймаємо автоматично! Канал з лайфхаками для кожного поважаючого себе веб-розробника Запросити друга, якщо є: https://t.me/+my7itn9CGMplOTAy Зв'язок: @Ekater1na_admin
显示更多
网络:7 131
订阅者
-324 小时
-247 天
-6730 天
帖子存档
7 131
Repost from Ти не знаєш JavaScript
крута карта при наведенні
Ефект наведення на картку з плавним розмиванням зображення. Реалізовано за допомогою CSS.
⤷ Забрати код
Ти не знаєш JavaScript
7 131
Які методи спілкування є в протоколі HTTP?
- GET — отримання даних;
- POST — відправка/створення;
- PUT — оновлення;
- PATCH — часткове оновлення;
- DELETE — видалення;
- OPTIONS, HEAD, CONNECT, TRACE — допоміжні методи.
JavaScript'ер
7 131
Який атрибут тега необхідний для зв’язування таблиці стилів з HTML документом?
7 131
Натрапив на класний плагін для Tailwind з >70 готовими анімаціями + туторіал, як його збирали.
Без конфігу, просто ставиш, підключаєш плагін і використовуєш класи типу
animate-fade-in. Можна кастомізувати тривалість, затримку тощо.
Сайт: tailwindcss-animations.vercel.app
Писали плагін у лайві — є туторіал на YouTube. Відмінний спосіб розібратися, як працює Tailwind зсередини. Адже класи на кшталт pl-0, w-full і т.п. теж використовують ту ж систему, про яку говорять у відео
JavaScript'ер7 131
CSS-функції вже тут 👎
Тепер можна робити ось так:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
7 131
Який метод JavaScript використовується для створення точної копії об'єкта, включаючи вкладені об'єкти?
7 131
everestpipkin/tools-list – це список невеликих безкоштовних або експериментальних інструментів, які можуть бути корисні при створенні гри, сайту або інтерактивного проєкту
Мета списку — дозволити працювати поза закритими виробничими екосистемами або огородженими програмними середовищами
Мови: HTML (100.0%).
⭐️ Зірка 1.7k
https://github.com/everestpipkin/tools-list?tab=readme-ov-file#Graphics
JavaScript'ер
7 131
Порада з CSS: простий спосіб отримати доступ до будь-якого значення атрибута у вигляді рядка за допомогою функції
attr()
CSS-функція, яка вміє отримувати значення будь-якого атрибута елемента, а потім використовувати це значення прямо у стилях
Найпоширеніші випадки використання цієї функції - для створення тултіпа (приклад на гіфці) та також для відображення значення атрибута href після тексту посилання при друку сторінки
@media print {
a::after {
content: " [" attr(href) "]";
}
}
7 131
Яке значення буде у змінній e після виконання наступного коду?
let e = [1, 2, 3];
let f = e.flatMap(x => [x, x * 2]);
7 131
Анімація підпису
Генерація підпису на основі введеного тексту. Реалізовано за допомогою CSS та JS.
⤷ Забрати код
JavaScript'ер
7 131
Repost from Ти не знаєш JavaScript
Як ми можемо прискорити завантаження ресурсів?
- Кешування (Cache-Control, ETag).
- Стиснення (GZIP, Brotli).
- Ліниве завантаження зображень.
- CDN для статики.
- Мінімізація та об’єднання файлів.
- Асинхронне завантаження скриптів (defer, async).
- Відкладене завантаження нефокусних блоків (вкладки, карти).
Ти не знаєш JavaScript
7 131
Набридло шукати потрібні гілки git у нескінченному списку в консолі?
За замовчуванням,
git branch -l сортує гілки в алфавітному порядку, через що важко знайти останні
Рішення просте – сортувати гілки за датою останнього коміту:
git config --global branch.sort -committerdate 7 131
HTML-порада
Не використовуй
input type="number" для важливих числових полів — типу поштового індексу, номера картки тощо.
Чому?
- На десктопі з’являється зайвий спіннер.
- Значення може випадково змінитися при прокручуванні миші або натисканні клавіш вгору/вниз.
Замість цього — використовуй inputmode="numeric" + pattern
✅ Показує цифрову клавіатуру на мобільних пристроях — кращий UX.
✅ Додає валідацію на цифри.
JavaScript'ер