CodeBase | Frontend
2.14K subscribers
380 photos
149 videos
5 files
566 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Бэкендер пишет запрос, а фронтендер просто прикручивает экшн на фронте

VS

Фронтендер верстает адаптивную, доступную версию страницы мобайл фёрст, а бэкендер просто скидывает ручку к данным

CodeBase | Frontend | #meme ©
😁4
⚙️ Что такое свойство object-fit в CSS и зачем оно используется?

Свойство object-fit управляет тем, как изображение или видео вписывается в контейнер.

Аналог background-size, но для тега <img> и <video>.

➡️ Пример:

<div class="wrapper">
<img src="image.jpg" alt="пример">
</div>

<style>
.wrapper {
width: 300px;
height: 200px;
overflow: hidden;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>


🗣 В этом примере изображение заполняет контейнер и обрезается по краям без искажений.

CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
🖥 Фишки Cursor — как сделать работу с ним дешевле и эффективнее?

Рассказываю, как выжать из Cursor максимум: настраиваю правила под директории, запускаю 3 ИИ сразу, объединяю фронт и бэк в одну папку — и получаю согласованный код без лишней суеты.

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍2
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Gooey SVG Filter Button — Анимированная кнопка с эффектом при наведении

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

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
👩‍💻 Что такое метод find() в JavaScript и как он используется?

find() — это метод массивов, который возвращает первый элемент, удовлетворяющий условию.
Если ни один элемент не подходит — возвращает undefined

➡️ Пример:

const users = [
{ name: "Анна", age: 22 },
{ name: "Борис", age: 30 },
{ name: "Вера", age: 25 }
];

const user = users.find(u => u.age > 25);
console.log(user); // { name: "Борис", age: 30 }


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

find() перебирает массив объектов
• Возвращает первого подходящего пользователя
• Идеален для поиска по условиям: ID, имя, статус и т.д.

find() часто используется в списках, где нужен один конкретный элемент, а не все подходящие


CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
🖥 БЭМ + Tailwind: прагматичный гибрид для современного фронтенда

В статье покажу, как смешал БЭМ с Tailwind — без религиозных войн и ломки шаблонов. Расскажу, как ушёл от боли нейминга и выровнял отступы, ускорив разработку почти вдвое.

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Button with tooltip hover timing feedback — Панель плеера с подсказками при наведении

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

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
⚙️ Что такое атрибут disabled в HTML и зачем он используется?

Атрибут disabled делает элемент формы неактивным: его нельзя выбрать, изменить или отправить.

Применяется к <input>, <button>, <select>, <textarea> и другим интерактивным элементам

➡️ Пример:

<form>
<label>
Промокод:
<input type="text" value="WELCOME2024" disabled>
</label>
<button type="submit">Отправить</button>
</form>


🗣️ Почему полезно:

• Блокирует ввод без JavaScript
• Удобен для отображения только для чтения
• Такой элемент не отправляется на сервер
• Часто используется для управления состоянием форм

disabled — простой способ временно выключить элементы в интерфейсе.

CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41🔥1