<template> — это элемент HTML, который позволяет нам создать, шаблон — структуру HTML для веб-компонента. Шаблон не обязательно должен быть огромным фрагментом кода. Он может быть очень простой:
<template>
  <p>The Zombies are coming!</p>
</template>
Элемент <template> имеет важное значение, потому что он связывает все вместе. Это как фундамент здания; это база, на которой построено все остальное.

#html

Способы улучшить время загрузки страницы
1)Протестируйте свои страницы

Начните с тестирования своей страницы с помощью инструментов для проверки скорости, таких как Google Page Speed Insight, webpagetest.org, GT Metrix и т. д. Обязательно запишите свой текущий результат core web vital для тестируемой страницы. В PSI найдите общий показатель производительности страницы и лабораторные данные для отчета о тестировании в реальном времени.

#полезное

Mini Toolbar

Эффект расширения пунктов меню при наведении мыши

#codepen

Свойство flex-grow

flex-grow устанавливает коэффициент растяжения, который позволяет flex-элементам растягиваться и заполнять все доступное пространство. Значение flex-grow принимает только целое число. Обратите внимание на следующее.

.wrapper {
    display: flex;
    flex-wrap: wrap;
}
.item {
    flex-grow: 1;
}

#css

Массив и логическое значение

Вам нужно отфильтровать недействительные значения (0, undefined, null, false и т.д.) из массива? Возможно, вы не знали этого трюка:

myArray
    .map(item => {
        // ...
    })
    // Избавляемся от плохих значений
    .filter(Boolean);

Просто передайте Boolean, и все эти ложные значения будут убраны.

#javascript

Выделение текста с помощью HTML-тега mark

<p>
  <mark>Highlight</mark>
  text with HTML &lt;mark&gt; tag
</p>

Цвет фона mark по умолчанию — желтый.

#html

Текст с металлической рамкой на CSS

#codepen #css

Объединение объектов

Необходимость объединения нескольких объектов в JavaScript существует всегда, особенно когда мы начинаем создавать классы и виджеты с параметрами:

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };
const summary = {...person, ...tools, ...attributes};

#javascript

CSS свойство backdrop-filter позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.

#css

Способы улучшить время загрузки страницы
2)Включите кеширование

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

#полезно

Деструктуризация псевдонимов

Деструктуризация — это очень полезное дополнение к JavaScript, но иногда мы предпочитаем ссылаться на эти свойства под другим именем, поэтому мы можем использовать псевдонимы:

const obj =  { x :  1  } ;
// Захватываем obj.x, как {x}
const  { x }  = obj ;
// Захватываем obj.x, как {otherName}
const  { x : otherName }  = obj ;

Полезно для предотвращения конфликтов имен с существующими переменными.

#javascript

Сonic-gradient

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

.pie-chart{
    background: conic-gradient(red 120deg, green 120deg 240deg, blue 240deg);
}

#css

Внешний размер окна

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

Чтобы получить доступ к внешнему размеру окна, вы можете использовать свойство outerWidth и outerHeight, которые доступны непосредственно для объекта window:

const windowOuterWidth  = window.outerWidth;
const windowOuterHeight = window.outerHeight;

#javascript

calc()

Практическое назначение calc(): выполнение основных математических операций с возможностью интерполяции между типами единиц.

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

Пример:
.content {
  height: calc(100vh - 60px);
}

#css

WebP — изображения

Преимущества
• Изображения без потерь WebP на 26% меньше по размеру по сравнению с PNG.
• Изображения WebP с потерями на 25–34% меньше сопоставимых изображений JPEG при эквивалентном индексе качества SSIM.
• WebP с потерями также поддерживает прозрачность изображений.

Недостатки
Единственная причина, по которой Интернет не был обновлен полностью WebP — это совместимость.

• Браузеры Safari на данный момент еще не поддерживают его. Но появились новости о том, что в ближайшем будущем в Safari появится поддержка WebP.
• Системы управления контентом (CMS) в настоящее время не поддерживают WebP по умолчанию. Но вы можете установить плагин или расширение.

#html

Новая большая книга CSS. Д. Макфарланд

Технология CSS3 позволяет создавать профессионально оформленные сайты, но тонкости этого языка могут оказаться довольно сложными даже для опытных веб-разработчиков.
Книга содержит множество ценных советов, описаний приемов, а также инструкции, написанные в стиле справочного руководства.
Веб-дизайнеры, как начинающие, так и опытные, при помощи этой книги быстро научатся создавать красивые веб-страницы, которые молниеносно загружаются как на ПК, так и на мобильные устройства.

#книги

Добавление зависимостей в package.json вручную

Вам следует избегать обновления package.json вручную, так как это может нарушить синхронизацию между package.json и package-lock.json.
Вместо этого, вы можете использовать CLI команды, такие как npm i –save и npm i —save-dev для автоматического обновления package.json и package-lock.json. Они также предупредят вас, если есть какие-либо несовпадения версий в этих 2 файлах.

#javascript

inset()

Значение inset() вставляет обрезанную область от края элемента, и могут быть переданы значения для верхней, правой, нижней и левой кромок. Также можно добавить border-radius, чтобы изогнуть углы вырезанной области с помощью ключевого слова round.
В примере есть два блока с классом .box. Первый прямоугольник не имеет отсечения, второй отсекается с использованием значений inset().

#css