Фронтенд Гайд

❓ Зачем используется свойство placeholder в HTML и когда его применять? Атрибут placeholder задаёт текст-подсказку внутри поля ввода, которая исчезает, когда пользователь начинает вводить данные. Это удобно для улучшения UX и пояснения назначения поля. ✅Пример:

<input type="text" placeholder="Введите имя">
<input type="email" placeholder="Введите ваш email">

📌В этом примере подсказки помогают пользователю понять, что нужно ввести в каждое поле.

placeholder удобно использовать в формах, когда нужно кратко показать формат или пример данных. Однако он не заменяет полноценные <label> — для доступности и удобства навигации лучше использовать оба.

👩‍💻 Ubisoft Quartz Background Animation — Размытая анимация отлично подойдёт для фона на вашем сайте

Сделано на CSS

🔗 Открыть код

⚙️ Коллекция полезных HTML и CSS фич, которые редко используются

Покажу забытые, но полезные фичи HTML/CSS: когда они лучше JS и как применить без боли. Мини-примеры и быстрые советы — внедряем сегодня.

🔗 Читать статью

👩‍💻 SVG background animation test — Разъезжающиеся фигуры произвольной формы в качестве фона

Сделано на CSS

🔗 Открыть код

⚙️ Вам больше не нужен JavaScript

Покажу, как CSS+HTML берут интерактив: вложенность, @starting-style, dvh/dvw, :has(), переходы — меньше JS, больше скорости и красоты. Примеры, гайды.

🔗 Читать статью

👩‍💻 Glitch Experiment — Красивый эффект для текста

Сделано на CSS и JS

🔗 Открыть код

❓ Зачем используется свойство style в JavaScript и когда его применять? Свойство style позволяет напрямую изменять инлайн-стили элемента через JavaScript. Это удобно для динамического управления внешним видом интерфейса. ✅Пример:

<div id="box">Hello</div>
<script>
  const box = document.getElementById("box");
  box.style.color = "white";
  box.style.backgroundColor = "blue";
</script>

📌В этом примере через style элементу назначаются цвет текста и фон.

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

👩‍💻 Menu Animation — Заливка пунктов меню, которое появляется при нажатии на бургер-кнопку

Сделана SCSS

🔗 Открыть код

⚙️ SRE на Frontend`е

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

🔗 Читать статью

👩‍💻 Steam Library App Portrait Card Effect — Очередной эффект при наведении на карточки

Сделана на чистом CSS

🔗 Открыть код