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

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

Каналы для быстрого поиска работы в it:

Три канала, которые быстро снимут вопрос поиска работы для технических специалистов в it.

@remoteit — только полная удаленка для технических специалистов в it, вакансии отбираются в ручную, минимум 4 в день, включая эксклюзивные позиции.

@relocats — вакансии для it специалистов с переездом в Еропу, Америку и Азию, только адекватные варианты с хорошими релокационными пакетами.

@gamedevjobs — самый регулярный, актуальный дайджест по gamedev вакансиям в тг. Редактирует подборки игровой эйчар с 20 летним опытом.

Подпишись и откликайся, работа найдется для всех.

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

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

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

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

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