💡 Современные и эффективные CSS-раскладки

▍Часть 11

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой и десятой частями.

Ключевым моментом данной раскладки является свойство justify-content: space-between, которое размещает первый и последний дочерние элементы у края родителя, поровну распределяя доступное пространство между самими элементами. В нашем случае внутри карточек выбран режим раскладки Flexbox, с вертикальным расположением элементов, заданным с использованием flex-direction: column

Это размещает заголовок, описание и блок изображения в одну колонку внутри родительской карточки. Затем применяется свойство justify-content: space-between, прикрепляющее первый (заголовок) и последний (блок изображения) элементы к краям, а блок описания между ними.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Видео-демонстрацию смотрите ниже под этим постом.

#советы #coding #css

🔥 Лучшее на канале за неделю

1. Декларативный подход в Angular.

2. Gridsome — гибкий генератор статических сайтов на базе Vue.js.

3. Современные и эффективные CSS-раскладки.

📑 Yaml vs Json — что круче?

Сегодня поговорим об интересном (и таинственном для фронтов) формате YAML. Он считается одним из наиболее популярных форматов для файлов конфигураций.

Файлы с расширением .yaml или .yml вы можете встретить довольно часто, например .travis.yml (для Travis Build), .gitlab-ci.yml (для git lab CI) и др.
И тогда возникают резонные вопросы: что это за формат и чем он отличается от JSON-а?

Цель этой статьи — познакомить вас со структурой YAML, помочь понимать, читать и изменять YAML-файлы. Для тех, кто уже знаком с форматом — напомнить про некоторые его особенности. И сравнить YAML с JSON.

#статьи

Выберите правильный вариант 👇🏼 #test #js

Подробное объяснение теста в чате @webb_chat

🛠 Vue Interactive Paycard — впечатляющая форма кредитной карты, которая реагирует на ввод пользователя и анимирует карту в реальном времени. Она имеет потрясающий дизайн и анимацию, а также очень удобна в использовании с форматированием чисел, проверкой и определением типа карты.

#инструменты #js

💡 Современные и эффективные CSS-раскладки

▍Часть 12

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой и одиннадцатой частями.

Ключевым моментом данной раскладки является свойство justify-content: space-between, которое размещает первый и последний дочерние элементы у края родителя, поровну распределяя доступное пространство между самими элементами. В нашем случае внутри карточек выбран режим раскладки Flexbox, с вертикальным расположением элементов, заданным с использованием flex-direction: column ...

В следующей части продолжим данную тему.

Видео-демонстрацию смотрите ниже под этим постом.

Продолжение следует...

#советы #coding #css

Выберите правильный вариант 👇🏼 #test #js

Подробное объяснение теста в чате @webb_chat

📑 Фронтенд-разработчику: 10 направлений, в которых стоит развиваться в 2021 году

Профессия «фронтенд-разработчик», без сомнения, будет одной из самых востребованных в 2021 году.

Раньше тем, кто работал в этой сфере, для создания интерактивных сайтов достаточно было знать HTML, CSS и, возможно, jQuery. Но сегодня фронтенд-разработчик вынужден существовать в обширной и постоянно меняющейся экосистеме, состоящей из инструментов, библиотек, фреймворков. Разработчику жизненно необходимы навыки владения самыми разными средствами, ему постоянно приходится вкладывать время и силы в самообучение.

В последние несколько лет мир увидел замечательные новые библиотеки и фреймворки, основанные на JavaScript и составляющие сегодня основу практически любого веб-проекта. Это, например, React, Vue, Svelte.

#статьи #frontend

🛠 PWA Asset Generator — инструмент командной строки для создания ресурсов PWA на основе Node.js и Puppeteer. Он генерирует значки и заставки, а затем автоматически добавляет их в manifest.json и HTML вашего проекта.

#инструменты #typescript #js

💡 Современные и эффективные CSS-раскладки

▍Часть 13

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой и одиннадцатой частями.

Из прошлой части: В нашем случае внутри карточек выбран режим раскладки Flexbox, с вертикальным расположением элементов, заданным с использованием flex-direction: column ...

Это размещает заголовок, описание и блок изображения в одну колонку внутри родительской карточки. Затем применяется свойство justify-content: space-between, прикрепляющее первый (заголовок) и последний (блок изображения) элементы к краям, а блок описания между ними.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Видео-демонстрацию смотрите ниже под этим постом.

В следующей части рассмотрим стилизацию с помощью Clamp.

#советы #coding #css

🔥 Лучшее на канале за неделю

1. Yaml vs Json — что круче?

2. Vue Interactive Paycard — впечатляющая форма кредитной карты, которая реагирует на ввод пользователя и анимирует карту в реальном времени.

3. Современные и эффективные CSS-раскладки.

♥️ Наши каналы для программистов

На канале Daily Coding мы каждый день публикуем интересные задачи с собеседований, обучающие статьи, бесплатные книги, советы разработчикам и многое другое.

На канале Говнокод ежедневно выходят забавные подборки плохого кода и мемы для программистов.

Подписывайтесь! Неважно на каком языке вы пишете, вы обязательно найдете что-то новое и интересное.

📑 Осциллограф в браузере

В статье рассказывается об осциллографе в браузере.

#статьи