Способы улучшить время загрузки страницы
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

Используйте let и const вместо var

При объявлении переменных JavaScript, предпочитают использовать let и const переменные. Эти две переменные не инициализируются во время поднятия (hoisting). Переменная var — инициализируется, и иногда это может привести к проблемам.

#javascript

Orientation — это полезная медиа-функция, которая позволяет вносить изменения в зависимости от ориентации экрана. Может иметь два значения: portrait и landscape.

Но что браузер считает portrait и что landscape? Значение portrait будет вызывать изменения каждый раз, когда высота области просмотра больше ширины. Аналогично, если ширина больше, чем высота, область просмотра будет landscape.

#css #адаптив

Объявлять переменные в верхней части

По возможности старайтесь объявить переменные JavaScript в верхней части текущей области видимости. Это служит трем целям.

Во-первых, это помогает сделать ваш код чище.

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

Третья причина заключается в том, что это позволяет избежать случайного повторного объявления существующих переменных.

#javascript #полезно

Разгони свой сайт. Методы клиентской оптимизации веб-страниц. Николай Мациевский.

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

#книги

Анимация обрезанной области

CSS-переходы и анимация могут быть применены к объекту clip-path для создания интересных эффектов. В следующем примере я анимирую круг при наведении курсора, переходя между двумя кругами с другим значением радиуса.

#css

Cкрыть/показать панель уведомлений при прокрутке

Заголовок будет состоять из двух частей: верхней и нижней.

• В верхней части будет специальное уведомление о бесплатной доставке и контактная информация.
• Нижняя часть будет содержать логотип компании и меню. По умолчанию меню не появляется.

#codepen

Функция inverted-colors полезна, если вам нужно применить некоторые стили, когда системные цвета инвертированы.
Для чего мне инвертировать системные цвета? Обычно это очень полезно, если вам нужно улучшить читаемость.

Также имейте в виду, что при инвертировании цветов рекомендуется увеличивать размер шрифта и уменьшать толщину шрифта. Это отличная вещь, которую вы можете сделать с помощью этой медиа-функции!

@media screen and (inverted-colors: inverted) {
/* Ваш код */
}

#css

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

#полезно