☕️ Посмотрите на Can I Email — это как "Can I Use", но для почтовых клиентов!

Настоящая боль верстальщиков — email-рассылки. Этот сайт показывает, что поддерживается в Outlook, Gmail и прочих, на уровне CSS-свойств.
Очень полезен для тех, кто работает с маркетингом или B2B.

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

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

👩‍💻 Рассмотрим свойство text-align-last — управляет выравниванием последней строки текста!

Оно позволяет отдельно задать выравнивание только для последней строки абзаца. Особенно полезно при работе с выравниванием по ширине (justify), когда финальная строка выглядит «обрезанной».

Варианты значений:

• auto — выравнивание, как и для остальных строк, кроме случая со значением justify.
• start — в ту же сторону, что и весь остальной текст.
• end — в противоположную сторону от остального текста.
• left — по левому краю.
• right — по правому краю.
• center — по центру.
• justify — по ширине, чтобы заполнить всё пространство.

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

Web dev — мощный ресурс от Google, где публикуются официальные рекомендации, best practices и примеры по всем современным фишкам HTML, CSS, JavaScript, performance, accessibility и PWA.

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

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

👩‍💻 Рассмотрим 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 | #ресурсы