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

Один из способов разметки цитаты — и таким образом, чтобы угодить божествам семантического кода — это поместить блочную цитату в элемент figure. Затем поместите элемент cite и любую другую информацию об авторе или цитировании в figcaption

#html

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

const goToTop = () => window.scrollTo(0, 0);
goToTop();

#javascript

CSS Grid функция auto-fill()

auto-fill() – ключ ко всему. Необходимо чтобы каждая строка заполнялась максимальным числом колонок. Детально прочитать про auto-fill можете в замечательной статье Sara Soueidan «the difference between auto-fill and auto-fit». В этой статье есть видео, показывающее принцип работы.

#css

Сheckbox группа в виде плиток, которую вы можете использовать в своих работах 👇

#codepen

Анимация при наведении на карточку 👇

#codepen

Атрибут loading элемента <img>  (или  loading атрибут для <iframe>) могут быть использованы, чтобы указать браузеру на необходимость отложить загрузку изображений / iframe до тех пор, пока пользователь не доскроллит до них.

<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

Событие load запускается, когда все другие необходимые ресурсы были загружены. В это время, возможно (или даже наиболее вероятно), что изображения не будут загружены, даже если пользователь доскроллит до изображений и они будут в visual viewpoint.

#html #полезно

Функция array.flatMap() принимает функцию обратного вызова в качестве аргумента и возвращает новый сопоставленный массив:

const mappedArray = array.flatMap((item, index, origArray) => {
 // ...
 return [value1, value2, ..., valueN];
}[, thisArg]);

Функция обратного вызова вызывается для каждого элемента исходного массива с тремя аргументами: текущий элемент, индекс и исходный массив. Затем массив, возвращаемый обратным вызовом, сглаживается на 1 уровень в глубину, а полученные элементы добавляются в сопоставленный массив.

#javascript

Сам себе программист. Как научиться программировать и устроиться в Ebay?

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

#книги

Пример оформления навигационного меню 👇

#codepen

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

userLogin('user').then(function(user){
    getArticle(user).then(function(articles){
        showArticle(articles).then(function(){
            //Your code goes here...
        });
    });
});

Чтобы избежать этого, нам нужно отменить вложенность кода, вызвав getArticle из первого then и обработать его во втором then. 👇

userLogin('user')
  .then(getArticle)
  .then(showArticle)
  .then(function(){
       //Your code goes here...
});

#javascript #полезно

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

С этим эффектом есть небольшая хитрость. Магия заключается в использовании 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