Шпаргалка по CSS

😮

➡️ @byFrontDeveloper

VS Code фича, про которую ты мог не знать:

Теперь в терминале можно включить автодополнение а-ля IntelliSense

Как включить:
• Открываешь Settings → ищешь "terminal integrated suggest"
• Врубаешь чекбокс

Пользуемся ✌️

➡️ @byFrontDeveloper

Движущийся замок в стиле Ghibli 😮

Анимация с использованием CSS

⏩Смотреть код - тут

➡️ @byFrontDeveloper

Обновленная библиотека Anime.js

Cамая популярная библиотека анимаций на JavaScript — обновилась до версии 4.0

Обновлённая документация, новые фичи, улучшенная производительность и многое другое

Смотреть - https://animejs.com

➡️ @byFrontDeveloper

Знали ли вы, что VSCode умеет открывать браузер?

И для этого не нужны костыли в виде расширений. Всё из коробки

Твой код и изменения в одном окне

➡️ @byFrontDeveloper

Не знаешь, какую единицу использовать в CSS?

px, rem, em, fr, %, vh... слишком много вариантов 👊

Эта диаграмма — РЕШЕНИЕ!

Прими решение на основе информации, какая единица подходит лучше всего

➡️ @byFrontDeveloper

Как приподнять вьюпорт с помощью JavaScript 😂

➡️ @byFrontDeveloper

Создавай анимации между страницами всего в 5 строках кода

Знакомься: View Transitions в CSS

View Transitions в CSS — это новая фича, которая позволяет создавать плавные анимации при переходе между страницами или состояниями интерфейса практически без JavaScript

➡️ @byFrontDeveloper

Когда вебразраба попросили покрасить яйца

😆

➡️ @byFrontDeveloper

Научитесь создавать это перетаскивание с помощью JavaScript и SortJS

⏩вот сам код

➡️ @byFrontDeveloper

💡👩‍💻 Не используйте кучу JS для тёмной и светлой темы. useMedia() и т. п. приводят к тому, что сайт вспыхнет белым при загрузке JS.

Делайте переключение темы в CSS через специальное медиа-выражение. А чтобы работал переключатель, возьмите этот PostCSS-плагин

➡️ @byFrontDeveloper

Воспроизведение звуков в JS — плёвое дело:

🔸 Создаём Audio, кидаем туда путь к файлу
🔸 Вызываем метод play()

Обратите внимание, что здесь мы создаём только один экземпляр Audio и переиспользуем его, а не создаём новый каждый раз

Также доступны различные методы для паузы, продолжения, остановки, перемотки и т.д.

Этот способ воспроизведения сработает только после взаимодействия юзера со страницей.

➡️ @byFrontDeveloper

Sailboat UI

Cовременная библиотека UI-компонентов для Tailwind CSS. Под капотом более 150 компонентов Tailwind с открытым исходным кодом.

https://sailboatui.com/

➡️ @byFrontDeveloper

Динамическое переключение с помощью CSS :has() 🎁

.control:not(:has(:first-of-type:checked)) .indicator {
  translate: 100% 0;
}

Используйте сочетание [type=radio]:checked и :has(), чтобы управлять отображением визуальных элементов

➡️ @byFrontDeveloper

CSS position: sticky, scroll-snap + прогрессивное скролл-анимирование

li {
  animation: bright;
  animation-range: calc(50% - 1lh) calc(50% + 1lh);
  animation-timeline: view();
  scroll-snap-align: center;
}

@keyframes bright {
  50% { opacity: 1; }
}

Что здесь происходит:

— scroll-snap-align: center; — элемент "прилипает" по центру при прокрутке (snap-позиция).

— position: sticky подразумевается для контейнера, чтобы фиксировать элемент в нужной зоне при прокрутке.

— animation + animation-timeline: view(); — анимация завязана на скролл: когда элемент проходит через центр экрана (50%), он становится полностью непрозрачным (opacity: 1).

— animation-range указывает, в каком диапазоне скролла будет проигрываться анимация: ±1 строка текста (1lh) вокруг центра

➡️ @byFrontDeveloper

Хочешь изучить React, Svelte, Vue или Angular?

Этот сайт сравнивает синтаксис каждого из них!

Если ты уже знаешь один из них, ты легко освоишь другой:
→ http://component-party.pages.dev

➡️ @byFrontDeveloper

Библиотека для создания многошаговых форм

Работает с React, Vue и Svelte.

Всё, что нужно — это JSON для настройки:

https://github.com/damianricobelli/stepperize

➡️ @byFrontDeveloper

Новый компонент для React — <ViewTransition />

Теперь мы можем легко создавать переходы в пользовательском интерфейсе.

Оборачиваешь элемент, который хочешь анимировать, и задаёшь ему уникальное имя.

Анимацию можно настраивать с помощью CSS.

Пока что компонент экспериментальный, но выглядит очень многообещающе

➡️ @byFrontDeveloper

Flex (свойства flex-grow, flex-basis и flex-shrink) в сочетании с flex-wrap: wrap; — это невероятно мощный инструмент для адаптивной вёрстки веб-сайтов

⏩вот сам код

➡️ @byFrontDeveloper

Новая фича в VS Code Insiders!

Теперь можно кидать элементы прямо в Chat. Открываешь локальный сайт через встроенный Simple Browser, жмёшь «Start» на панели — и кликаешь по нужному элементу. В чат улетает:

• скриншот элемента
• его HTML
• и CSS

Удобно, если разбираешься с вёрсткой или дебажишь прямо в коде

➡️ @byFrontDeveloper

GSAP, одна из лучших библиотек JavaScript для веб-анимаций, теперь на 100% БЕСПЛАТНА, включая коммерческое использование.

Такие плагины, как SplitText, которые раньше были платными, теперь можно использовать бесплатно.

Теперь нет причин не использовать её 💪

➡️ @byFrontDeveloper