CodeBase | Frontend
2.03K subscribers
488 photos
224 videos
4 files
795 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️🎄 — Анимированная сцена с вращающейся новогодней ёлкой.

Технологии: CSS, JS

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
🎄32👍1
Господи, да в чём проблема стать фронтендером?

Подписался на эти три канала:

👉 Фронтенд
👉
Верстка
👉
Node.JS

Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!

Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
1🔥1
1👍1🔥1😁1
⚙️ Что такое свойство aspect-ratio в CSS и зачем оно используется?

Свойство aspect-ratio задаёт соотношение сторон элемента, удерживая пропорции при изменении размеров.

Больше не нужно рассчитывать высоту через отступы или JavaScript — теперь это делается нативно


➡️ Пример:

<div class="card"></div>

<style>
.card {
width: 300px;
aspect-ratio: 16 / 9;
background: #007bff;
border-radius: 8px;
}
</style>


🗣 В этом примере элемент всегда сохраняет пропорции 16:9, независимо от ширины контейнера.

Частые применения:
• видео, изображения и превью с фиксированным соотношением сторон
• карточки, аватары и responsive UI
• создание адаптивных сеток без "резиновых" искажений


CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2👌21
🖥 Создаем UI-Kit на React: пошаговое руководство по настройке

Статья описывает, как настраивать 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
⚡️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
🖥 Коллекция полезных 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