Frontend Developer

Не злоупотребляй if в своём коде на JavaScript/TypeScript Лучше используй optional chaining (?.), чтобы проверять наличие свойств. А дальше — с помощью && или раннего return код выглядит чище и читается лучше 💖 ➡️ @byFrontDeveloper

Бомбическая новинка в HTML и CSS! Стилизуй элементы <select> без библиотек и максимально просто. На видео показано, как сделать это всего в пару строк кода 😍 ➡️ @byFrontDeveloper

➡️ @byFrontDeveloper

Когда только начинаешь копать вёрстку, рано или поздно натыкаешься на вопрос: а можно ли вот этот тег втиснуть внутрь вот того? Чтобы не шарить по спецификациям и не гадать на кофейной гуще, есть полезный инструмент-шпаргалка по вложенности тегов. Выбираете дочерний и родительский теги и сразу получаете результат ✌️ https://caninclude.glitch.me/ ➡️ @byFrontDeveloper

Мы неправильно используем CSS и отступы для абзацев Не нужно использовать ни em, ни rem, ни px, и тем более %. Лучше и проще использовать lh. Это эквивалент высоты строки, значения свойства line-height. Браузерная поддержка — 94% Если тебе нужно поддерживать старые браузеры — добавь fallback:

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

Вы можете поиграть с различными параметрами, чтобы увидеть, как lh влияет на внешние отступы у абзацев, в этой демке Хорошая статья: Оттачивание типографики с помощью единиц line-height ➡️ @byFrontDeveloper

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

Новая фича в VS Code Insiders! Теперь можно кидать элементы прямо в Chat. Открываешь локальный сайт через встроенный Simple Browser, жмёшь «Start» на панели — и кликаешь по нужному элементу. В чат улетает: • скриншот элемента • его HTML • и CSS Удобно, если разбираешься с вёрсткой или дебажишь прямо в коде ➡️ @byFrontDeveloper

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

овый компонент для React — <ViewTransition /> Теперь мы можем легко создавать переходы в пользовательском интерфейсе. Оборачиваешь элемент, который хочешь анимировать, и задаёшь ему уникальное имя. Анимацию можно настраивать с помощью CSS. Пока что компонент экспериментальный, но выглядит очень многообещающе ➡️ @byFrontDeveloper

Библиотека для создания многошаговых форм Работает с React, Vue и Svelte. Всё, что нужно — это JSON для настройки: https://github.com/damianricobelli/stepperize ➡️ @byFrontDeveloper

Хочешь изучить React, Svelte, Vue или Angular? Этот сайт сравнивает синтаксис каждого из них! Если ты уже знаешь один из них, ты легко освоишь другой: → http://component-party.pages.dev ➡️ @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

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

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

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

Sailboat UI Cовременная библиотека UI-компонентов для Tailwind CSS. Под капотом более 150 компонентов Tailwind с открытым исходным кодом. https://sailboatui.com/ ➡️ @byFrontDeveloper

Стоп! Стоп! ✋📢 Дочитай до конца! Что лучше? 📜 Читать нудные инструкции? 📺 Смотреть часовые видео, где 90% – вода? 🔥 Или подписаться на Made in HTML/CSS и получать концентрат полезной и интересной информации по фронтенду? Я думаю выбор очевиден! 😉 🚀 Made in HTML/CSS – лучший канал о фронте! 💡💻🤩

Воспроизведение звуков в JS — плёвое дело: 🔸 Создаём Audio, кидаем туда путь к файлу 🔸 Вызываем метод play() Обратите внимание, что здесь мы создаём только один экземпляр Audio и переиспользуем его, а не создаём новый каждый раз Также доступны различные методы для паузы, продолжения, остановки, перемотки и т.д. Этот способ воспроизведения сработает только после взаимодействия юзера со страницей. ➡️ @byFrontDeveloper

💡👩‍💻 Не используйте кучу JS для тёмной и светлой темы. useMedia() и т. п. приводят к тому, что сайт вспыхнет белым при загрузке JS. Делайте переключение темы в CSS через специальное медиа-выражение. А чтобы работал переключатель, возьмите этот PostCSS-плагин ➡️ @byFrontDeveloper

⚡️ Frontend теперь в Telegram! Ребята создали крутейший канал, где на простых картинках и понятном языке обучают фронтенду, делятся полезными фишками и ресурсами Подписывайтесь: @FrontendPortal

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

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