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

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

Чтобы получить доступ к внешнему размеру окна, вы можете использовать свойство 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 - очень интересный и полезный онлайн-сервис с необычной задумкой. суть в том, что вы можете загрузить любое изображение (например, дизайн сайта) и узнать цветовую палитру изображения с доминантным цветом. Отличный инструмент для принятия дизайнерских решений.

#полезно

Freeze(). Как видно из названия, он может заморозить объект. Это означает, что freeze избегает изменения значения объекта. Давайте посмотрим пример кода с методом object.freeze().

let obj ={'country':""};
obj.country="Sri Lanka";
Object.freeze(obj);
console.log(obj);
obj.country="England";
console.log(obj);

Выходные значения:
{ country: 'Sri Lanka' }
{ country: 'Sri Lanka' }

#javascript

Полезная однострочная функция JavaScript, с помощью которой можно легко скопировать любой текст в буфер обмена.

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("This Sring is Copied To Clipboard.");

#javascript #полезно

blockquote

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

#html

Tailwind CSS, новый перспективный фреймворк, который делает себе имя с 2017 года. Tailwind предоставляет набор предварительно созданных служебных классов, позволяя разработчикам напрямую стилизовать элементы HTML без необходимости создавать классы CSS или вообще писать какой-либо CSS.

#css #полезно