Frontend Portal

Проверка фокуса на элементе

Чтобы определить, сфокусирован ли элемент, используя JavaScript, мы можем использовать свойство activeElement, которое возвращает текущий элемент с фокусом

let el = document.querySelector('.btn-white');
let isFocus = el === document.activeElement;

console.log(isFocus);   // true/false

Значение theme-color

Позволяет менять цвет адресной строки браузера и его верхней части на мобильных устройствах

Чтобы установить желаемый цвет, добавьте к <meta> атрибут content со значением цвета

<meta name="theme-color" content="#50a2de">

Задачки по Front-end - канал с задачками и тестами по JS/CSS/HTML.

На канале вы найдете:
- тесты по Javascript;
- тесты по CSS;
- тесты по HTML;
- вопросы с собеседований с решением по JS, CSS, HTML

Подписывайтесь, решайте и предлагайте свои решения: @frontquizes

Прокачиваем навыки CSS с помощью селектора :has()

Псевдокласс :has() позволяет уточнить основной селектор дополнительным. Это единственный способ выбрать элемент на основе дочернего или соседнего элемента посредством CSS

/* Применяем стили ко всем ссылкам, которые содержат изображения */
a:has(img) {
  /* Стили */
}

Форматирование чисел и Intl.NumberFormat

Intl.NumberFormat один за конструкторов Internationalization API, который используется для форматирования чисел, валюты, процентов и единиц измерения, таких как длина, температура и др.

Этот конструктор принимает локаль и объект с настройками

new Intl.NumberFormat(locale, options).format(number)

Animate.css — это библиотека готовых к использованию кроссбраузерных анимаций для ваших проектов

🔗 Ссылка: https://animate.style/

👉 @FrontendPortal | #resourse

Ленивая загрузка изображений

Атрибут loading позволяет браузеру откладывать загрузку содержимого элементов <img> и <iframe>, находящихся за пределами видимой области страницы, до тех пор, пока пользователь, прокручивая страницу, не окажется достаточно близко к этим элементам

<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

Аккордеон (FAQ)

Реализовано на HTML, CSS и JS

🔗 Код: Codepen

👉 @FrontendPortal | #codepen

Обнаружение устройств, поддерживающих hover

Медиазапрос, позволяет определить, поддерживает ли основное указывающее устройство пользователя возможность наведения (hover)

@media (hover: hover) {
  .btn:hover {
    /* Ваши стили */
  }
}

Шпаргалка по оператору typeof

👉 @FrontendPortal | #js #шпора

Создаем превью сайта при помощи Open Graph разметки

С помощью этой разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте вашего сайта

Подробнее — Статья

👉 @FrontendPortal | #HTML #разное

Чтоб будет в консоли?

Anonymous Quiz

45% - null

29% - undefined

26% - window object

👇 | #викторина

Возвращение на предыдущую страницу

History API позволяет работать с историей браузера в пределах одной сессии. С помощью History API можно переходить по истории вперёд, назад и управлять содержимым истории

Перемещаем пользователя на страницу назад:

history.back();
// или
history.go(-1);

history.forward();
// или
history.go(1);