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

По возможности старайтесь объявить переменные 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 #полезно

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

const randomNumberInRange = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min;

randomNumberInRange()
//Результат: случайное число от 0 до 100.
randomNumberInRange(100, 200)
//Результат: случайное число от 100 до 200.

#javascript

circle()

Как вы видели, значение circle()создает круглую обрезанную область. Первое значение — это длина или процент и радиус круга. Второе необязательное значение позволяет вам установить центр круга. В приведенном ниже примере я использую значения ключевых слов, чтобы установить обрезанный кружок вверху справа. Вы также можете использовать длину или проценты.

#css

q

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

#html

Атрибут cite

И <q>, и blockquotes могут использовать атрибут цитирования (cite). Этот атрибут содержит URL, который предоставляет контекст и / или ссылку на цитируемый материал. Спецификация подразумевает, что URL может быть окружен пробелами.

Атрибут cite не виден пользователю по умолчанию. Вы можете добавить его с помощью магии CSS, как показано в следующей демонстрации.👇

#html #css

35 / 5000

eCommerce Slide Effect 👉 GSAP & JS

#codepen

Преобразование RGB в Hex

Полезная функция в этом списке, которая используется для преобразования RGB в шестнадцатеричный код.

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 
rgbToHex(0, 51, 255);
// Result: #0033ff

#javascript

Credit Card Form - VueJs

#codepen #javascript