⚙️ Что такое свойство 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

🦥Ленивый программист ©

🖥 Почему не дружат фронтендер и дизайнер: работающие техники общения между отделами

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

🔗 Ссылка

CodeBase | Frontend | #article

🦥Ленивый программист ©

🦥Ленивый программист ©

⚡️On-Scroll Fire Transition — Красивая анимация горения страницы при скролле

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

🔗 Ссылка

CodeBase | Frontend | #animate

🦥Ленивый программист ©

👩‍💻 Что такое метод 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

🦥Ленивый программист ©

🖥 Улучшаем тексты в вебе при помощи text-wrap: pretty

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

🔗 Ссылка

CodeBase | Frontend | #article

Чудо чудное😂

🦥Ленивый программист ©

🖥 Секреты эффективного кодирования на Go для опытных и новичков: профайлинг, тесты, CI

В статье рассказывают, как писать эффективный код на Go: от организации пакетов и обработки ошибок до безопасной работы с горутинами и оптимизации через pprof

🔗 Ссылка

CodeBase | Frontend | #article

🦥Ленивый программист ©