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

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

🛠 Craft.js — отличный React фреймворк, который помогает создавать удобные редакторы страниц. Это позволяет изменять содержимое веб-страницы с помощью перетаскивания, подробных текстовых элементов управления, встраивания мультимедиа и т. д. Идеально подходит для создания систем управления контентом и приложений WYSIWYG.

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

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

▍Часть 2

Первая часть.

▍Адаптивные блоки: flex: <grow> <shrink> <baseWidth>

Это распространённая раскладка, например, для лендингов, в которой может располагаться ряд из 3 элементов, обычно содержащих изображение, заголовок и текст, описывающих особенности продукта. А что на счёт адаптивности?

Если использовать Flexbox, вам не придётся настраивать расположение элементов для разных размеров экрана с помощью медиа-запросов.

Свойство flex является сокращением и позволяет задать набор значений flex: <flex-grow> <flex-shrink> <flex-basis>

Если нужно, чтобы блоки имели <flex-basis> размер, сжимались на меньших размерах, но не увеличивались для заполнения дополнительного свободного пространства, следует указать flex: 0 1 <flex-basis>. В данном случае <flex-basis> равно 150px.

В следующей части будет:

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

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

#советы #coding #css

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

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

📑 Выбор CSS макета — Grid или Flexbox?

Удачно оформленный макет удерживает пользователей на сайте, так как делает важные элементы доступными и легко находимыми. Слабые же макеты отпугивают посетителей, которые покидают ресурс, так и не найдя того, за чем пришли.

В веб-дизайне макет – это то, как сайт отображается на экране. В HTML 5 есть довольно много элементов, определяющих внешний вид веб-страницы: заголовок, навигационный блок, абзац, сноска, статья и нижний колонтитул, каждый из которых имеет свое особое значение в создании макета. Вместе же они формируют четыре основных раздела страницы – заголовок/баннер, поисковый блок, содержимое и нижний колонтитул.

#статьи #css

🛠 Yarn 2 — отличная альтернатива NPM с рядом замечательных функций, таких как кеширование модулей для использования в автономном режиме и «плоский режим», который отлично подходит для уменьшения количества дублирующихся пакетов.

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

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

▍Часть 3

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

▍Адаптивные блоки: flex: <grow> <shrink> <baseWidth>

Код ко второй части:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

Если вы хотите, чтобы при переносе на новую строку блоки растягивали и заполняли пространство, установите <flex-grow> в значение 1.

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

В следующей части рассмотрим боковую панель.

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

#советы #coding #css

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

1. Выбор CSS макета — Grid или Flexbox?

2. Craft.js — отличный React фреймворк, который помогает создавать удобные редакторы страниц.

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

Полноценные курсы по программированию за 12.99$. Домашнее задание, ответы на ваши вопросы и удобная платформа

На образовательной площадке Udemy проводится распродажа курсов по направлению Frontend-разработки.

Присоединиться к 24 000 студентов и узнать полную информацию можно тут:
https://taplink.cc/petrychenko_ivan

📑 Объектно-ориентированный JavaScript: наследование

В прошлой статье мы подробно рассмотрели процесс создания библиотеки для валидации данных, полученных из поля ввода. Библиотека хорошо работает и справляется со своей задачей. Тем не менее, если оценить библиотеку в более глобальном масштабе, то можно заметить, что она состоит из двух частей: валидации данных и коммуникации с DOM.

Вы также можете ознакомиться с другими статьями из этой темы:

Примитивы и объекты | Работа с объектами | Функции-конструкторы | Прототипы |Немного практики.

#статьи #js

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

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

🛠 Mirage — мощная библиотека имитации API для написания тестов без реальной серверной части. Mirage можно настроить для воссоздания сложных динамических сценариев, что обычно возможно только при использовании реального производственного сервера. Затем настройкой можно поделиться с остальной частью вашей кодовой базы, чтобы тесты запускались на компьютерах всех товарищей по команде.

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

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

▍Часть 4

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

▍Боковая панель: grid-template-columns: minmax(<min>, <max>) 1fr)

Ниже этого поста приведён пример, в котором используется преимущество функции minmax для grid-раскладки. Мы устанавливаем минимальный размер боковой панели равным 150px, но на экранах бо́льшей ширины позволяем растягиваться на 25%. Таким образом, панель будет занимать 25% ширины родителя, пока эти 25% не станут меньше 150px.

Укажем эту функцию в значении свойства grid-template-columns. Элемент в первой колонке (в нашем случае это боковая панель) получает minmax между 150px и 25%, а второй элемент (в нашем случае это main) занимает оставшееся пространство 1fr.

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

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

#советы #coding #css

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