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

Контакт: @Filgood777 (реклама, сотрудничество)
Download 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
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️On-Scroll Fire Transition — Красивая анимация горения страницы при скролле

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

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
Сидишь у графика весь день и всё равно не уверен в сделках?
Понимаю. Было так же.

Поэтому я выстроил систему, где торгуют боты — а ты просто контролируешь.

Никакой магии. Просто чёткие правила и автоматизация.

Всё обучение по этой теме я упаковал в бота.
Доступ бесплатный.

Внутри — пошагово, с примерами, стратегиями и поддержкой.

Если хочешь разобраться — это твой шанс. Жми: @Gendelman_Cryptobot
👩‍💻 Что такое метод map() в JavaScript и как он используется?

map() — это метод массивов в JavaScript, который создаёт новый массив, преобразуя каждый элемент исходного массива по заданной функции.
Исходный массив не изменяется.

➡️ Пример:

const numbers = [1, 2, 3, 4, 5];

// Умножаем каждый элемент на 2
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]


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

map() применяет функцию ко всем элементам массива
• Возвращает новый массив с результатами
• Идеален для преобразования данных (например, умножение, форматирование).

CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Улучшаем тексты в вебе при помощи text-wrap: pretty

В статье сравниваются разные значения text-wrap, особенно новое pretty, и как оно приближает веб к качеству ручного набора. Типографика теперь — не только шрифт, но и интеллект

🔗 Ссылка

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