Научитесь создавать это перетаскивание с помощью 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

Мы неправильно используем CSS и отступы для абзацев

Не нужно использовать ни em, ни rem, ни px, и тем более %.

Лучше и проще использовать lh.

Это эквивалент высоты строки, значения свойства line-height.

Браузерная поддержка — 94%

Если тебе нужно поддерживать старые браузеры — добавь fallback:

p {
  padding: 1em; /* fallback для динозавров */
  padding: 1lh;
}

Вы можете поиграть с различными параметрами, чтобы увидеть, как lh влияет на внешние отступы у абзацев, в этой демке

Хорошая статья: Оттачивание типографики с помощью единиц line-height

➡️ @byFrontDeveloper

Когда только начинаешь копать вёрстку, рано или поздно натыкаешься на вопрос: а можно ли вот этот тег втиснуть внутрь вот того?

Чтобы не шарить по спецификациям и не гадать на кофейной гуще, есть полезный инструмент-шпаргалка по вложенности тегов.

Выбираете дочерний и родительский теги и сразу получаете результат ✌️

https://caninclude.glitch.me/

➡️ @byFrontDeveloper

➡️ @byFrontDeveloper

Бомбическая новинка в HTML и CSS! Стилизуй элементы <select> без библиотек и максимально просто.

На видео показано, как сделать это всего в пару строк кода 😍

➡️ @byFrontDeveloper

Не злоупотребляй if в своём коде на JavaScript/TypeScript

Лучше используй optional chaining (?.), чтобы проверять наличие свойств.

А дальше — с помощью && или раннего return код выглядит чище и читается лучше 💖

➡️ @byFrontDeveloper

Новый сайт GTA VI выглядит впечатляюще.

Анимация при прокрутке с помощью JavaScript 😍

➡️ @byFrontDeveloper

CSS progressive blur: стек пустых перекрывающих элементов с backdrop-filter: blur() — у каждого разная степень размытия и/или маска

❤️ — если нравится

➡️ @byFrontDeveloper

Осторожно с vh в CSS

На мобильных устройствах он не учитывает исчезновение панелей инструментов.

Решение —> использовать dvh: он всегда подстраивается под реальную высоту окна. Так твой дизайн использует всё доступное пространство, избегает обрезаний и улучшает пользовательский опыт 😎

➡️ @byFrontDeveloper