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

Set — это новый объект данных, представленный в ES6. Так как Set позволяет хранить только уникальные значения, когда вы передаете в него массив, он удалит все повторяющиеся значения.

Преобразуем Set в массив, используя Array.from :

#javascript

grid + place-items

Этот метод позволяет выравнивать элементы по горизонтали и вертикали всего двумя строками кода.

.parent {
  display: grid;
  place-items: center;
}

#css

Contenteditable

Атрибут contenteditable используется, чтобы сделать HTML-контент доступным для редактирования на веб-странице. Это в основном позволяет пользователю редактировать элементы страницы, которые имеют атрибут contenteditable. Пример по ссылке ниже 👇

#html

Анимация сделанная с помощью псевдоэлементов ::before и ::after

#css #codepen

Локальное хранилище

Локальное хранилище является наиболее широко используемым хранилищем из-за его простоты. Оно позволяет хранить пары ключ-значение, сериализованные в виде строк. Вы можете выполнять следующие действия в локальном хранилище:

• setItem() — сохранить ключ-значение
• getItem() — получить ключ-значение
• removeItem() — удалить ключ-значение
• clear() — очистить все пары «ключ-значение»
• key() — получить номер n-й пары ключ-значение

localStorage.setItem('session', JSON.stringify({'id': 5, 'timeout' : 500000}));
var sessionItem = JSON.parse(localStorage.getItem('session'));

#javascript

Download

Атрибут download в HTML указывает, что ссылки будут загружаться, когда пользователь нажимает на них. Этот атрибут позволяет пользователям скачивать файлы с вашего сайта. Вот пример:

<div>
<a href="index.html" download="fileName">Download this</a>
</div>

#html

Гуляющий хамелеон на чистом CSS

#css #codepen

Добавление эффекта свечения к тексту

text-shadow требует четырех значений, первые два из которых представляют горизонтальное и вертикальное положение тени соответственно. Третье значение представляет размер радиуса размытия, а последнее значение представляет цвет тени. Чтобы увеличить размер эффекта свечения, мы бы увеличили третье значение, которое представляет радиус размытия. Или, выражаясь по-другому:
text-shadow: [x-offset] [y-offset] [blur-radius] [color];

#css

​​Как произвести удаление дублей массива(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