👩‍💻 Рассмотрим popover — создаём всплывающие элементы без JavaScript!

Этот атрибут недавно внедрённый HTML API, который позволяет реализовывать всплывающие окна (popups, тултипы, подсказки и модальные окна) без использования JS.

Есть два варианта:

• popover="auto" — открывается через JS

• popover="manual" — требует ручного управления

Полезен для: тултипов, меню, модалок, описаний, предупреждений — и всего, что "всплывает".

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

А вы знаете, как работает for...of в JavaScript под капотом?

Для начала нужно понять, что такое итерируемый объект и итератор.
Любой объект, у которого есть метод Symbol.iterator, — итерируемый:

const nums = [10, 20, 30];
console.log(nums[Symbol.iterator]); // ƒ values() { [native code] }

Но сам цикл for...of работает не с массивом напрямую, а с его итератором.
Получим итератор вручную:

const iterator = nums[Symbol.iterator]();
console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 20, done: false }

А теперь — как for...of работает под капотом.
Он просто вызывает next() до тех пор, пока done !== true:

let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}

🔥 Можно использовать итераторы для ленивой обработки данных, например при чтении потоков, больших массивов или генерации бесконечных значений.

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

📂 Напоминалка по HTTP-статусам!

Например, код 200 означает, что всё прошло успешно, а 404 сообщает, что страница не найдена.
Очень полезно держать под рукой, когда работаешь с API или отлаживаешь backend.

На картинке показаны самые часто используемые статусы от 100 до 599.

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

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

👩‍💻 Настраиваем чекбоксы, радиокнопки и другие элементы формы — без костылей и JavaScript!

С этим справится свойство accent-color, которое позволяет задать цвет нативным интерактивным элементам, вроде:

• чекбоксов
• радио-кнопок
• слайдеров (range)
• прогресс-баров

Вместо замороченных кастомных стилей — можно использовать одно свойство.

Поддерживается в большинстве современных браузеров. Даёт аккуратный, нативный результат с полной доступностью.

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

☕️ Frontend Practice — это коллекция реальных макетов сайтов для тренировки навыков HTML, CSS и JavaScript.

В отличие от скучных задачек, здесь — дизайны в духе Apple, Dropbox, Spotify, которые можно повторять прямо у себя, прокачивая верстку до продвинутого уровня.

📌 Оставляю ссылочку: frontendpractice.com

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

😎 UIverse — огромная коллекция современных UI-компонентов созданных на HTML, CSS и Tailwind.

Кнопки, карточки, загрузки и т.д, которые можно скопировать код прямо в проект, кастомизировать стили, и вдохновиться свежими UI-решениями от сообщества.

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

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