role в HTML и зачем он используется?Атрибут
role используется для улучшения доступности веб-страниц. Он сообщает вспомогательным технологиям (например, экранным читалкам), какую функцию выполняет элемент.<!-- Обозначение навигационного меню -->
<nav role="navigation">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
</ul>
</nav>
<!-- Определение элемента как диалогового окна -->
<div role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Подтвердите действие</h2>
<button>ОК</button>
</div>
•
role="navigation" помогает читалкам распознавать меню.•
role="dialog" делает <div> доступным как модальное окно.CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SCSS, TS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1
Метод
includes() проверяет, содержится ли элемент в массиве.Возвращает true или false и не изменяет исходный массив
Метод includes() в JavaScript и как он используется
Метод includes() проверяет, содержится ли элемент в массиве.
Возвращает true или false и не изменяет исходный массив
•
includes() выполняет проверку на наличие значения• Работает корректно с примитивами (
string, number, boolean)• Читабельнее и безопаснее, чем
indexOf() !== -1includes() — простой и выразительный способ писать понятные проверки без лишней логики
CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1🤝1
Автор показывает полезные возможности CSS, которые легко пропустить в вечной гонке за новыми фреймворками. Только фичи, которые реально упрощают жизнь и код.
CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2🔥1👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: HTML, CSS, JS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
❗️Самые «имбовые» каналы в Telegram по мнению пользователей:
Hardware Club — здесь вы узнаете, как даже с маленьким бюджетом собрать мощный ПК. Разгон железа, оптимизация системы, новинки, лайфхаки, обзоры, комплектующие, готовые сборки.
Windows Club — этот канал удивит даже уверенного пользователя Windows. Бесплатные ключи активации, полезные софты, сервисы, фишки и нейросети.
Linux Club — это мечта для пользователей Linux. Здесь вы найдёте всё, от полезных команд в терминале, до обучающих уроков, которые пригодятся даже профи.
Apple Club — все фишки, лайфхаки, функции и свежайшие новости для iOS и macOS, собранные в одном канале.
⚡️Даже Стив Джобс бы подписался на эти каналы, пользуйтесь
Hardware Club — здесь вы узнаете, как даже с маленьким бюджетом собрать мощный ПК. Разгон железа, оптимизация системы, новинки, лайфхаки, обзоры, комплектующие, готовые сборки.
Windows Club — этот канал удивит даже уверенного пользователя Windows. Бесплатные ключи активации, полезные софты, сервисы, фишки и нейросети.
Linux Club — это мечта для пользователей Linux. Здесь вы найдёте всё, от полезных команд в терминале, до обучающих уроков, которые пригодятся даже профи.
Apple Club — все фишки, лайфхаки, функции и свежайшие новости для iOS и macOS, собранные в одном канале.
⚡️Даже Стив Джобс бы подписался на эти каналы, пользуйтесь
❤2👍1🔥1
every() в JavaScript и как он используетсяМетод
every() проверяет, удовлетворяют ли все элементы массива заданному условию.Возвращает true, если условие выполняется для каждого элемента, иначе false.
const numbers = [2, 4, 6, 8];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true
•
every() проверяет все числа на чётность• Возвращает
true, так как все элементы подходят• Полезен для валидации данных (например, все ли поля заполнены)
every() часто используют для проверки массивов перед отправкой данных на сервер
CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤1🔥1
Свойство
object-fit управляет тем, как изображение или видео масштабируется внутри контейнера, не искажая пропорции.По смыслу похоже на background-size, но применяется к <img> и <video>.
<div class="wrapper">
<img src="photo.jpg" alt="пример">
</div>
<style>
.wrapper {
width: 300px;
height: 200px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
•
cover — заполняет контейнер, обрезая лишнее•
contain — показывает всё изображение, сохраняя пропорции•
fill — растягивает без сохранения пропорций•
none — без масштабированияobject-fit решает классическую проблему «кривых картинок» в карточках, галереях и адаптивных интерфейсах
CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2❤1👍1
После 12 месяцев изучения HTML я с гордостью могу сказать... что наконец-то научился выравнивать div по центру.
CodeBase | Frontend | #meme
CodeBase | Frontend | #meme
🤣7❤1😭1🫡1🤪1
Автор спокойно разбирает Atomic CSS: какие мифы вокруг него живы, где он реально помогает, а где мешает. Практика, примеры и выводы без фанатизма и холиваров.
CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SVG, GSAP
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1🔥1