Эффект замены текста при наведении мыши на ссылку

С этим эффектом есть небольшая хитрость. Магия заключается в использовании data-атрибута. С его помощью задается текст, который будет въезжать в область видимости. Также он вызывается со свойством content у псевдо-элемента ::after на ссылке. 

#css

Порядок скриптов

В любом приложении сначала необходимо загрузить основной контент. Затем мы можем сосредоточиться на сторонних вставках, поскольку они в основном занимают небольшую область на веб-странице.
Например, текстовое содержание статьи должно быть загружено перед встраиванием любых изображений или видео.
Но иногда сторонние вставки могут мешать загрузке основного контента из-за парсера блокировки JavaScript. Следовательно, нам нужно быть очень осторожными с порядком их загрузки.
Мы можем использовать свойства async и defer в теге script, чтобы упорядочить выполнение сценариев.

#html #полезно

Reseter.css объединяет все стили вашего браузера по умолчанию, переопределяя готовые стили. Это большая разница, когда normalize пытается сохранить, а Reseter.css переопределяет для большей поддержки. Нормализация работает с учетом браузеров при ее создании. Reseter.css поддерживает все браузеры и он улучшает кросс-браузерность.

• Исправленные ошибки и несоответствия браузера.
• Перезагружает различные стили элементов.
• Доступны в Sass, Scss, Less, Stylus, стилизованные компоненты (js, mjs, ts).
• Размер файла — 2,59 КБ.
• Включает нормализацию всех элементов.
• box-sizing: border-box; set;
• Проверено во всех браузерах с помощью BrowserStack.

#css

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

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
 
copyToClipboard("This Sring is Copied To Clipboard.");

#javascript #полезно

Большинство браузеров, поддерживающих Chromium, поддерживают атрибут loading со следующими значениями:

• Lazy — указывает, что iframe должен быть загружен позже. Когда браузер приближается к области просмотра, он загружает iframe.
• Eager — iframe будет загружен сразу после рендеринга страницы. Атрибут eager — это значение атрибута loading по умолчанию.
• Auto — браузер имеет право определять время загрузки iframe.

Ленивая загрузка iframe может быть эффективной, если вы работаете с картами или видео. Например, если вы используете API Google MapsEmbed, для отложенной загрузки карты.

#html#полезно

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 

Эта книга поможет вам освоить динамическое веб-программирование с применением самых современных технологий. Книга наполнена ценными практическими советами, содержит подробный теоретический материал. Для закрепления материала автор рассказывает, как создать полнофункциональный сайт, работающий по принципу социальной сети, включая рассказ о React.js.

#книги

Работа с aspect-ratio гораздо проще: указываете ширину и высоту соотношения сторон через слэш или укажите число с плавающей точкой. 2 примера соотношения сторон ниже работают одинаково:

.aspect-box {
  aspect-ratio: 3 / 2;
}
.aspect-box {
  aspect-ratio: 1.5;
}

Ширину и высоту можно явно указать для элемента, и aspect-ratio будет работать ровно так, как вы ожидаете: если какое-то разрешение не указано, оно автоматически определится по соотношению сторон. Если указать для ширины и высоты не auto, то соотношение сторон больше не применяется. Это не баг. Так и задумано, это удобно. 👇

#css