👩‍💻 Разберем animation-fill-mode — свойство, решающее, что будет после окончания анимации!

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

Как пишется:

• none — значение по умолчанию.

• forwards — после анимации элемент сохраняет стили последнего кадра.

• backwards — до начала анимации применяется стиль первого кадра.

• both — сочетает forwards и backwards: до старта — первый кадр, после завершения — последний.

Особенно полезно при вступительных анимациях, скрытии элементов или визуальном подтверждении действий.

📣 Code Ready | #свойство

👩‍💻 Слышали, что в VS Code ваши Markdown-таблицы могут выглядеть аккуратными и понятными прямо в исходном коде?

Markdown Table Prettifier — плагин, который автоматически форматирует таблицы в тексте. Очень удобно: сразу видно, как выглядит таблица, без постоянного переключения на превью.

Особенно помогает при написании документации и любых текстов с таблицами — комфортно и быстро.

📣 Code Ready | #vscode

Автоматическое обновление данных с API

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

Подключаем fetch и запускаем обновление раз в 10 секунд:

function fetchData() {
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(updateUI)
    .catch(err => console.error('Ошибка:', err));
}
setInterval(fetchData, 10000); // раз в 10 секунд
fetchData(); // сразу при загрузке

Создаем функцию, которая обновляет содержимое контейнера:

function updateUI(data) {
  const container = document.getElementById('data-container');
  container.textContent = JSON.stringify(data, null, 2);
}

Добавим индикатор загрузки и обработку ошибок:

function fetchData() {
  const container = document.getElementById('data-container');
  container.textContent = 'Загрузка...';
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(updateUI)
    .catch(() => container.textContent = 'Ошибка загрузки');
}

🔥 Такой приём поддерживает интерфейс в актуальном состоянии и улучшает UX.

📣 Code Ready | #практика

😎 Fancy Border Radius — интерактивный генератор нестандартных скруглений для CSS.

Позволяет визуально настроить форму углов и сразу получить готовый код с поддержкой border-radius в формате slash-синтаксиса. Все изменения — наглядны и копируются в один клик.

📌 Оставляю ссылочку: 9elements.github.io

📣 Code Ready | #ресурсы