Адаптивность верстки сайта

Современная верстка должна быть адаптивной под различные размеры экрана. При просмотре сайта все смысловые блоки страницы выстраиваются в один столбик, а не самые важные элементы скрыты с возможностью их отображение по кнопке.

Быстро проверить адаптивность можно так: просто постепенно уменьшайте браузер по ширине. Вы увидите, как перестраиваются блоки сайта. Чтобы видеть, какие в данный момент размеры окна, нажмите клавишу F12, и после этого меняйте размеры браузера.

Ну, а самый эффективный и точный способ - тестирование верстки на мобильном устройстве.

Этот 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