CodeBase | Frontend
2.13K subscribers
362 photos
128 videos
2 files
521 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
Давно хотите изучить SQL, но не знаете с чего начать?

Друзья у меня для вас есть решение!

БЕСПЛАТНЫЙ SQL-бот с консультантом + канал с дружелюбным админом

Чем этот бот будет полезен лично для тебя:

Огромный сборник рецептов
Возможность легко сгенерировать SQL-запрос
В любое время суток можно получить ответ на свой вопрос.

P.S. и ещё маленький, но существенный бонус: отсутствие рекламы.

ПРИСОЕДИНЯЙСЯ ➡️ @lang_book_bot
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡️Попробуйте свои силы в разработке на React, создав ипотечный калькулятор. ⚡️

🟢 В процессе работы над проектом вы познакомитесь с функциональными компонентами, Material UI, передачей пропсов и другими интересными аспектами React разработки.

🔗 Ссылка

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

Атрибут placeholder отображает текст-подсказку внутри поля ввода. Он исчезает, когда пользователь начинает вводить данные.

Используется для уточнения ожидаемого формата или содержания.

➡️ Пример:

<form>
<label>
Ваше имя:
<input type="text" placeholder="Введите имя">
</label>
<button type="submit">Отправить</button>
</form>


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

• Помогает пользователю понять, что нужно ввести
• Повышает удобство использования формы
• Эффективен в сочетании с короткими и понятными подписями
• Не заменяет полноценные метки (label), а дополняет их.

Атрибут placeholder улучшает пользовательский опыт, особенно на мобильных устройствах.

CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Solid.js как альтернатива (P)React+MobX на практике

В статье сравнивают Solid с React+MobX на реальном мобильном проекте: проверяют размер, перфоманс и удобство, без синтетики. Плюс — готовый репозиторий для тестирования

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Developer or Designer? — Анимированный переключатель

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

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
HIIT, который не сработал

Если вы типичный айтишник, который много сидит за компьютером, двигается разве что к холодильнику и задумывается о том, как сбросить вес, то наверняка уже слышали про модные интервальные тренировки (HIIT).

Лет двенадцать назад я тоже решил попробовать. Как полагается бывшему программисту, погуглил, скачал приложение и начал тренироваться с энтузиазмом новичка. Первая неделя прошла неплохо, но потом почувствовал себя как сервер, который «перегрелся» и тормозит.😨

Еще две недели я старался продержаться, но усталость только нарастала. Обычные дела превратились прямо в сложные задачи. В итоге я бросил этот HIIT, и уже через неделю почувствовал себя отлично.😃

Мораль: начинайте постепенно, без резких нагрузок, желательно с наставником. Иначе вместо пользы получите усталость и разочарование.

Кстати, наставник и полезные привычки тут: Иван Лагунцов | Про похудение.
⚙️ Что такое свойство flex-grow в CSS и зачем оно используется?

Свойство flex-grow определяет, как свободное пространство внутри контейнера делится между дочерними элементами.

Оно задаёт коэффициент роста: чем больше значение, тем больше элемент занимает места.

➡️ Пример:

<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>

<style>
.container {
display: flex;
width: 300px;
border: 1px solid #ccc;
}
.item {
padding: 10px;
color: white;
}
.item1 { flex-grow: 1; background: #007bff; }
.item2 { flex-grow: 2; background: #28a745; }
.item3 { flex-grow: 1; background: #dc3545; }
</style>


🗣 В этом примере у второго элемента flex-grow: 2, поэтому он занимает в два раза больше места, чем соседние блоки.

CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Формошлёп — сотни хаков для фронтендеров в одном месте

Никакой скучной теории, воды и прочей шляпы, только практические примеры, которые работают.

👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.
🖥 Почему не дружат фронтендер и дизайнер: работающие техники общения между отделами

В статье фронтенд-тимлид из AGIMA рассказывает, как наладить дружбу между разработчиками и дизайнерами: меньше мифов, больше простых правил — и никакой вражды

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM