🛠 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

📑 Не лайтхаусом единым: как проверить свой сайт со всех сторон

Когда мы говорим о веб-валидаторах и оптимизации сайта под них, мы чаще всего имеем ввиду Lighthouse/Pagespeed Insights от Google, который давно стал де-факто стандартом для оценки производительности сайта. Кто-то стремится к заветным 100 баллам даже на прототипах и шаблонных приложениях в две кнопки, кто-то в шутку создает абсолютно недоступный сайт с идеальным рейтингом, но для всех фронтендеров лайтхаус предоставляет вменяемую, хоть и довольно поверхностную, аналитику производительности сайта и поиск бутылочных горлышек. Однако скорость загрузки — лишь один из множества параметров, которые стоит проверять на своём сайте, и для большинства других есть свои валидаторы и скоринговые алгоритмы. Мы рассмотрим инструменты для каждого из значимых направлений и составим список, по которому стоит прогонять свой сайт, чтобы в дальнейшем не отлавливать проблемы вручную.

#статьи

🛠 Web Extension Starter — удобный стартовый набор для создания мультибраузерных веб-расширений. Это позволяет очень легко создавать веб-надстройки для Chrome, Firefox и Opera из одной и той же кодовой базы. В комплект входят специфичные для браузера API, манифесты и файлы сборки, чтобы ваш плагин работал везде.

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

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

▍Часть 5

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

▍Липкий футер: grid-template-rows: auto 1fr auto

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

Добавление display: grid к родительскому элементу создаст одноколоночную сетку. При этом, если в разделе "Main" будет недостаточно содержимого, чтобы достигнуть футера, данный блок всё равно увеличится, заполнив свободное пространство по высоте.

Чтобы прикрепить футер к нижней части, добавьте:

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Высота хедера и футера будет установлена автоматически на основании минимального размера содержимого, а оставшееся свободное место (1fr) займёт раздел "Main".

#советы #coding #css

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

1. Не лайтхаусом единым: как проверить свой сайт со всех сторон.

2. Mirage — мощная библиотека имитации API для написания тестов без реальной серверной части.

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

📑 Задавать Height и Width для изображений снова важно

Сторонники веб-оптимизаций часто советуют добавлять к изображениям атрибуты с размерами, что позволяет при отрисовке страницы оставлять нужное количество пространства ещё до загрузки самого изображения. Это позволяет избежать смещения раскладки страницы по мере загрузки изображений - что с недавних пор начал измерять Chrome в новой метрике Cumulative Layout Shift (CLS).

#статьи #html #css

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

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

🛠 AutoNumeric — библиотека Javascript, которая обеспечивает форматирование по мере ввода в реальном времени для международных валют и других числовых стандартов. Она предоставляет полный набор параметров настройки, которые позволяют вам выбирать нужные форматы..

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

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

▍Часть 6

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

▍Классический "Святой Грааль": grid-template: auto 1fr auto / auto 1fr auto

В данной раскладке присутствуют хедер, футер, левая и правая боковая панель, а также блок с основным содержимым. Он похож на предыдущий пример, но теперь с боковыми панелями.

Чтобы описать всю сетку с помощью одной строки кода, используйте свойство grid-template. Это свойство позволяет задавать значения для них обоих.

Записывается следующим образом: grid-template: auto 1fr auto / auto 1fr auto. Слеш разделяет значения для рядов (grid-template-rows) и колонок (grid-template-columns) сетки.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

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

#советы #coding #css

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

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

🛠 Monolith — интересная библиотека, которая сохраняет целые веб-страницы в виде единого HTML-документа. Она объединяет все стили CSS, изображения, код JS и другие ресурсы, так что вы можете просто хранить всю страницу в одном файле, которым легко можно поделиться. Намного лучше, чем функция «Сохранить страницу как» в браузере.

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

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

▍Часть 7

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

▍12-колоночная сетка: grid-template-columns: repeat(12, 1fr)

В этом примере мы рассмотрим другой классический пример: 12-колоночную сетку. Вы можете быстро создавать подобные сетки в CSS с помощью функции repeat(). Использование repeat(12, 1fr); для шаблона колонок сетки создаёт 12 колонок, каждая шириной 1fr.

.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
grid-column: 1 / 13;
}

Теперь мы можем разместить на ней дочерние элементы. Один из вариантов - использовать grid-линии. Например, колонка со свойством grid-column: 1/13 будет начинаться с первой и заканчиваться последней (13-й) линией, охватывая все 12 колонок. Со свойством grid-column: 1/5 - первые 4 колонки.

В следующей части рассмотрим другой способ размещения дочерних элементов.

#советы #coding #css