Господи, да в чём проблема стать фронтендером?
Подписался на эти три канала:
👉 Фронтенд
👉 Верстка
👉 Node.JS
Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!
Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
Подписался на эти три канала:
👉 Фронтенд
👉 Верстка
👉 Node.JS
Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!
Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
❤1🔥1
Свойство
aspect-ratio задаёт соотношение сторон элемента, удерживая пропорции при изменении размеров.Больше не нужно рассчитывать высоту через отступы или JavaScript — теперь это делается нативно
<div class="card"></div>
<style>
.card {
width: 300px;
aspect-ratio: 16 / 9;
background: #007bff;
border-radius: 8px;
}
</style>
Частые применения:
• видео, изображения и превью с фиксированным соотношением сторон
• карточки, аватары и responsive UI
• создание адаптивных сеток без "резиновых" искажений
CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2👌2❤1
Статья описывает, как настраивать UI-Kit на React: от установки зависимостей и сборки до тестирования, линтинга и документирования. Пошаговый разбор полного цикла разработки дизайн-системы.
CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1👏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
Автор показывает полезные возможности 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