JavaScript'er

Паришся з підбором шрифтів для UI?🔥 Ось тулза, яка підбере ідеальну пару основного та другорядного шрифту, та ще й на реальних прикладах Більше жодних страждань із друкаркою: https://www.uifonts.app/ JavaScript'ер

CSS Порада: Можливо, ви не знали про цей трюк анімації іконки при кліку/фокусі Легко анімуйте іконку при взаємодії, створюючи спрайт зображення з усіма кадрами анімації та використовуючи функцію тимчасового розрахунку steps() у CSS.

 input[type="checkbox"] {
/* Задаємо ширину і висоту, рівні розміру одного кадру в спрайте */
width: 28px;
height: 28px;
appearance: none;
background: url('/images/star_sprite.png') no-repeat;

/* steps = загальна кількість кадрів – 1 */
transition: background-position 0.3s steps(15);
}

input[type="checkbox"]:checked {
/* Перехід до останнього кадру */
/* Ширина одного кадру = 28px */
/* 28px * 15 кадрів = 420px */
background-position: -420px 0;
}

Подивіться наживо: редагована демо-пісочниця JavaScript'ер

Посібник із правильного написання JS-коду від Airbnb Відмінний репозиторій на GitHub від Airbnb, з детальним посібником з написання чистого, послідовного та професійного JS Також містить гайдлайни для React, CSS-in-JS, CSS, Sass та Ruby https://github.com/airbnb/javascript JavaScript'ер

Набір CSS анімацій на всі випадки життя Якщо хочете додати анімацію, але не до кінця розумієте, як вона виглядатиме, то вам допоможе Animista . Вибирайте з каталогу, налаштовуйте параметри та одразу переглядайте результат. https://animista.net JavaScript'ер

Gradient Glowing Preloader Неоновий градієнтний перехід контуром прелоадера. Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'ер

Шпаргалка по HTML JavaScript'ер

Тримайте нову статтю про сучасні можливості функції attr() у CSS. Автор докладно розглядає, як використання attr() із зазначенням типу даних розширює можливості динамічного управління стилями, включаючи такі випадки, як призначення номерів колонок CSS Grid, доступ до атрибуту rows в textarea і затримка анімації. У статті представлені практичні приклади, демонстрації та обговорюються поточні обмеження підтримки у браузерах. Читайте статтю тут: First Look at The Modern attr() JavaScript'ер

Запам'ятовуємо і повторюємо JavaScript'ер

link hover 12 Накладення кольору на посилання при наведенні. Реалізовано з допомогою SCSS. ⤷ Забрати код JavaScript'ер

Ловіть крутий сайт для прокачування навичок та підготовки до співбесід - BFE.dev . Тут зібрано понад 600 завдань з JavaScript , React , TypeScript , CSS і навіть системного дизайну Можна писати код прямо у браузері з підтримкою TypeScript, відразу перевіряти рішення та дивитися, як впоралися інші JavaScript'ер

Є потенціал переключитися на третій JavaScript'ер

Оновлена ​​бібліотека Anime.js Найпопулярніша бібліотека анімацій на JavaScript - оновилася до версії 4.0 Оновлена ​​документація, нові фічі, покращена продуктивність та багато іншого Дивитись - https://animejs.com JavaScript'ер

❗️ Безоплатний 8-денний тест-драйв IT професій ▪️ Для бажаючих працювати онлайн і заробляти в $; ▪️ Для тих, хто давно хотів працювати в IT, але не обрав для себе напрям Тривалість — 8 днів. Заняття проходять вечорами.

На тест-драйві ви спробуєте себе в ролях: ▫️ вебдизайнера, ▫️ розробника, ▫️ дата-аналітика, ▫️ проджекта, ▫️ тестувальника.

✅ Програма розрахована на новачків. У вільний час ви дивитесь короткі лекції та робите цікаві завдання, які перевіряє ментор. Почни новий рік правильно! 🎁 Після реєстрації приємний бонус: Штучний інтелект в IT. Як використовувати AI у 5 ключових ІТ-професіях?. 🔥 Реєструйтесь за посиланням: https://i.goit.global/eoPxg

Анімація height тільки за допомогою CSS Нова CSS-властивість interpolate-size — одна з найкращих новинок у #CSS . Якщо тобі будь-коли доводилося реалізовувати анімований акордеон, тепер це буде набагато простіше. Більше не потрібно хаків із розрахунком висоти на JS Тільки подивіться, як просто:

 article {
height: 150px;
overflow: hidden;
transition: height .5s;

interpolate-size: allow-keywords;
}

article:hover {
height: auto;
}

В даний момент експериментальне та підтримується тільки в Chrome Докладніше: https://developer.chrome.com/docs/css-ui/animate-to-height-auto JavaScript'ер

Для любителів CSS та терміналу: CLI для caniuse Брамус зробив консольну утиліту для швидкого перегляду Can I Use прямо в терміналі. Корисно для швидкої перевірки, але не замінить сайт – там зручніше фільтрувати та шукати за ключовими словами JavaScript'ер

Коли ти вивчаєш CSS, твій погляд на життя змінюється 😁 JavaScript'ер