Форма входа с плавающим заполнителем и световой кнопкой

#html #css

Кроссбраузерность сайта - это его корректное отображение во всех популярных интернет-браузерах:
• Google Chrome
• Yandex-browser
• Mozilla Firefox
•Safari
• Inernet Explorer
• Opera

Для проверки кроссбраузерности сразу в нескольких браузерах и различных их версиях существуют специальные сервисы.

Самый популярный и доступный из них - browsershots.org. Здесь Вы можете указать ссылку на нужную страницу сайта и выбрать необходимые версии браузеров. Проверка занимает несколько минут. В течение этих нескольких минут постепенно появляются скриншоты Вашего сайта в проверенных версиях браузеров.

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

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

Быстро проверить адаптивность можно так: просто постепенно уменьшайте браузер по ширине. Вы увидите, как перестраиваются блоки сайта. Чтобы видеть, какие в данный момент размеры окна, нажмите клавишу 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