Автоматическое обновление данных с 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 | #ресурсы

👍 Нашёл отличную статью на Хабре: «Настройка Jest и React Testing Library: пошаговое руководство для React и Next.js проектов»

В статье вы:
• Установите и настроите Jest;
• Подключите React Testing Library;
• Организуете структуру тестов (SCSS, SVG, компоненты);
• Настроите Jest в окружении Next.js для unit‑тестирования компонентов.


🔊 Продолжай читать на Habr!

📣 Code Ready | #статья

👩‍💻 Разберем атрибут step — контроль точности ввода чисел!

Он используется в <input> для указания шага изменения значения. Задаёт, на сколько увеличивается или уменьшается значение при вводе или при нажатии стрелок.

Можно применить со следующими значениями type:

• date — значение по умолчанию 1 день;
• month — значение по умолчанию 1 месяц;
• week — значение по умолчанию 1 неделя;
• time — значение по умолчанию 60 секунд;
• datetime-local — значение по умолчанию 1 секунда;
• number — значение по умолчанию 1;
• range — значение по умолчанию 1.

Для удобства пользователя с <input step> добавляйте инструкции через <label> или aria-describedby.

📣 Code Ready | #атрибут

👩‍💻 Знал ли ты, что можно открыть браузер прямо в VS Code?

Даже скачивать ничего не нужно, ведь всё уже встроено в редактор. Как и что можно настроить показано на видео выше от Miguel Ángel Durán

📣 Code Ready | #vscode

📂 Напоминалка по сетевым портам!

Например, порт 22 используется для SSH-подключений, а 443 — для защищённого HTTPS-трафика. Порты — основа любого взаимодействия между клиентом и сервером.

На картинке — 18 основных портов.

Сохрани, чтобы не забыть!

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