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

Один из способов разметки цитаты — и таким образом, чтобы угодить божествам семантического кода — это поместить блочную цитату в элемент 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