👩‍💻 Morphing Submit Button — Анимированная кнопка загрузки после нажатия на "Submit"

Сделана на CSS, SVG и JavaScript

🔗 Открыть код

❓ Зачем используется свойство value в JavaScript и когда его применять?

Свойство value позволяет получить или изменить текущее значение элементов форм — таких как <input>, <textarea> или <select>. Это основной способ работы с пользовательским вводом на стороне фронтенда.

✅Пример:

<input id="nameInput" type="text" placeholder="Введите имя">
<script>
  const input = document.getElementById("nameInput");
  input.value = "Alice"; // Установим значение

  console.log(input.value); // Получим текущее значение ➜ "Alice"
</script>

📌В этом примере value сначала задаёт значение в поле ввода, а затем позволяет его прочитать.

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

👩‍💻 SVG background animation — Медленный круговорот звёздного неба в качестве фона для вашего сайта

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

🔗 Открыть код

⚙️ Деструктуризация в JavaScript

Разберу деструктуризацию в JS на примерах: изъятие значений, пропуски, значения по умолчанию, rest/спред, частые ловушки. Коротко и практично.

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

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

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

🔗 Открыть код

⚙️ SRE на Frontend`е

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

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

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

Сделана SCSS

🔗 Открыть код

❓ Зачем используется свойство 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-классы, а не инлайн-стили — это делает код чище и легче поддерживаемым