CodeBase | Frontend
2.11K subscribers
486 photos
219 videos
5 files
784 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
⚙️ Что такое атрибут 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
⚡️Creepy Button — Интересная кнопка с анимацией при наведении и нажатии.

Технологии: SCSS, TS

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍1
Media is too big
VIEW IN TELEGRAM
🥱 Никто не хочет смотреть на кишки проекта. Фантик важнее конфеты.

CodeBase | Frontend | #meme
Please open Telegram to view this post
VIEW IN TELEGRAM
😁61👍1
Фронтендеры, тревога, срочно нужны гирлянды на всех сайтах!

CodeBase | Frontend | #meme
😁72💯1
👩‍💻 Метод includes() в JavaScript и как он используется

Метод includes() проверяет, содержится ли элемент в массиве.

Возвращает true или false и не изменяет исходный массив


➡️ Пример:

Метод includes() в JavaScript и как он используется

Метод includes() проверяет, содержится ли элемент в массиве.
Возвращает true или false и не изменяет исходный массив


🗣️ В этом примере:

includes() выполняет проверку на наличие значения
• Работает корректно с примитивами (string, number, boolean)
• Читабельнее и безопаснее, чем indexOf() !== -1

includes() — простой и выразительный способ писать понятные проверки без лишней логики


CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🤝1
🖥 Коллекция полезных CSS фишек, которые вы редко используете

Автор показывает полезные возможности 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
⚡️Interactive Blackhole — Интересная кнопка с анимацией при наведении и нажатии.

Технологии: 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, собранные в одном канале.

⚡️Даже Стив Джобс бы подписался на эти каналы, пользуйтесь
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
👍31🔥1
⚙️ Что такое свойство object-fit в CSS и зачем оно используется?

Свойство 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
🔥21👍1
После 12 месяцев изучения HTML я с гордостью могу сказать... что наконец-то научился выравнивать div по центру.

CodeBase | Frontend | #meme
🤣71😭1🫡1🤪1
🖥 Atomic CSS: верстка и легкость бытия

Автор спокойно разбирает 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
⚡️destination slider — Анимированный слайдер достижения цели.

Технологии: SVG, GSAP

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍1🔥1
С Рождеством Христовым! 🎄
🕊52🎄2