Этот CodePen показывает как браузеры следуют по ключевым кадрам (keyframe) в анимации.

#codepen

​​Неизменность, мутация, изменчивость

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

Например, это мутация:

#javascript

Accept

Как вы знаете, HTML позволяет создавать поля ввода, в которые вы можете загружать свои файлы. В дополнение к этому атрибут HTML accept используется во входных данных для загрузки, чтобы указать типы файлов или единственный формат, который пользователь может загрузить на сервер.

Например, мы можем принять загрузку на наш сервер только jpg и png.

#HTML

Демонстрация requestAnimationFrame

В этой JavaScript демонстрации видно, как использовать requestAnimationFrame API для воспроизведения и паузы

#javascript #codepen

Multiple

Атрибут multiple в HTML можно прикрепить к тегам input и select. Это в основном позволяет пользователю вводить несколько значений.

Например, мы также можем использовать атрибут multiple во входных данных для загрузки HTML, чтобы пользователь мог загружать несколько файлов. Вот пример кода:
<input type="file" multiple />

#html

Эффект ввода на CSS

#css #codepen

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