​​Как произвести удаление дублей массива(2 часть)

Метод filter() создает новый массив элементов , которые соответствуют предоставленным условиям. Другими словами, если элемент соответствует и возвращается true, он будет включен в фильтруемый массив. И любой элемент, который не соответствует или возвращает false, НЕ будет включен в фильтрованный массив.

#javascript

Виджет музыкального плеера

#codepen

Translate

Атрибут translate используется, чтобы указать, нужно ли переводить контент. Его можно прикрепить ко всем тегам HTML, потому что это глобальный атрибут.
Этот атрибут можно использовать, например, в текстовых логотипах, чтобы сохранить одно и то же название бренда при переводе страницы на другой язык.

<p translate="no">Mehdi</p>

#html

columns

Этот метод позволяет разбивать текст на столбцы. Сolumn-count определяет количество столбцов, column-gap устанавливает размер зазора между колоннами, и column-rule задает стиль вертикальной линии между столбцами.
Columns является сокращенным свойством для column-count и column-width.

#css

​​Как произвести удаление дублей массива (часть 3)

Метод reduce используется для сокращения элементов массива и объединения их в окончательный массив на основе некоторой переданной функции редуктора.
В этом случае наша функция-редуктор проверяет, содержит ли наш последний массив элемент. Если это не так, вставляем этот элемент в конечный массив. В противном случае пропускаем этот элемент и возвращаем только окончательный массив как есть (по сути, пропуская этот элемент).
reduce немного сложнее для понимания, поэтому рассмотрим подробно каждый случай:

#javascript

Poster

Атрибут poster используется для отображения изображения во время загрузки HTML-видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения.

<video poster="picture.jpeg" controls>
   <source src="file.mp4" type="file/mp4">
   <source src="file.ogg" type="file/ogg">
</video>

#html

Pattern

Атрибут pattern позволяет легко добавлять регулярное выражение к элементу ввода внутри формы. Мы также можем использовать другой атрибут title с атрибутом pattern чтобы помочь пользователю написать правильную форму текста на входе.

<form >
  <label for="input">Country Code:</label>
  <input type="text" id="input" pattern="[A-Za-z]{3}" title="Three letters country code.">
  <input type="submit">
</form>

#html

С.Стефанов - JavaScript. Шаблоны

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

#книги

text-overflow

Cвойство text-overflow равное ellipsis позволяет добавлять «…» в конец текста, когда он выходит за пределы контейнера.

p {
  text-overflow: ellipsis;
}

#css

Размер веб-страницы

Размер веб-страницы состоит из ширины и высоты отображаемого содержимого страницы.

Используйте следующее для доступа к размеру содержимого веб-страницы (включая отступы страницы, но не границы, поля или полосы прокрутки):

const pageWidth  = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;

Если pageHeight больше, чем внутренняя высота окна, то отображается вертикальная полоса прокрутки.

#javascript

scroll-behavior

Установив значение scroll-behavior равным smooth, мы имеем возможность легко осуществить плавный скроллинг между разделами страницы.

#css

<template> — это элемент HTML, который позволяет нам создать, шаблон — структуру HTML для веб-компонента. Шаблон не обязательно должен быть огромным фрагментом кода. Он может быть очень простой:
<template>
  <p>The Zombies are coming!</p>
</template>
Элемент <template> имеет важное значение, потому что он связывает все вместе. Это как фундамент здания; это база, на которой построено все остальное.

#html

Способы улучшить время загрузки страницы
1)Протестируйте свои страницы

Начните с тестирования своей страницы с помощью инструментов для проверки скорости, таких как Google Page Speed Insight, webpagetest.org, GT Metrix и т. д. Обязательно запишите свой текущий результат core web vital для тестируемой страницы. В PSI найдите общий показатель производительности страницы и лабораторные данные для отчета о тестировании в реальном времени.

#полезное

Mini Toolbar

Эффект расширения пунктов меню при наведении мыши

#codepen

Свойство flex-grow

flex-grow устанавливает коэффициент растяжения, который позволяет flex-элементам растягиваться и заполнять все доступное пространство. Значение flex-grow принимает только целое число. Обратите внимание на следующее.

.wrapper {
    display: flex;
    flex-wrap: wrap;
}
.item {
    flex-grow: 1;
}

#css

Массив и логическое значение

Вам нужно отфильтровать недействительные значения (0, undefined, null, false и т.д.) из массива? Возможно, вы не знали этого трюка:

myArray
    .map(item => {
        // ...
    })
    // Избавляемся от плохих значений
    .filter(Boolean);

Просто передайте Boolean, и все эти ложные значения будут убраны.

#javascript

Выделение текста с помощью HTML-тега mark

<p>
  <mark>Highlight</mark>
  text with HTML &lt;mark&gt; tag
</p>

Цвет фона mark по умолчанию — желтый.

#html

Текст с металлической рамкой на CSS

#codepen #css

Объединение объектов

Необходимость объединения нескольких объектов в JavaScript существует всегда, особенно когда мы начинаем создавать классы и виджеты с параметрами:

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };
const summary = {...person, ...tools, ...attributes};

#javascript

CSS свойство backdrop-filter позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.

#css