📑 Объектно-ориентированный 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

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

Когда мы говорим о веб-валидаторах и оптимизации сайта под них, мы чаще всего имеем ввиду 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