Недавно начал изучать Vue.js
Для обкатки знаний поставил себе следующую задачу:
Реализовать todo-list (план дел на ближайшее время) со следующими простыми возможностями:
1) Добавление новой задачи
2) Удаление задачи
3) Отметка задачи как выполненной/не выполненной
4) Синхронизация состояния задач с удалённым хранилищем (чтобы после перезагрузки страницы данные не пропадали)
Получилось что-то вроде этого:
https://web-finder.ru/files/todo-checklist/
Особенности реализации читайте под катом.
В сфере разработки программного обеспечения паттерн проектирования (design pattern) — это повторяемая архитектурная конструкция, представляющая собой решение проблемы проектирования в рамках некоторого часто возникающего контекста. Паттерны проектирования представляют собой обобщение опыта профессиональных разработчиков ПО. Паттерн проектирования можно рассматривать как некий шаблон, в соответствии с которым пишут программы.
Читать далее
Всем известно, что в iframe кодах встраивания видео YouTube и Vimeo присутствуют такие параметры, как размеры видеоплеера — ширина и высота. Что же делать, если сайт адаптивный?
Решение есть:
Обрамляем наш iframe дивником:
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/{ID_ВИДЕО}?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
Стили video-container-а ставим следующие:
Читать далее
Давно хотел сделать так, чтобы при загрузке информации в какой-либо блок (к примеру, AJAX-ом) помимо обычного прелоадера сам блок бы еще размывался.
Собственно пример можно посмотреть здесь: https://jsfiddle.net/va61mk5t/1/
Читать далее
Сразу предупреждаю: способ хорош в случае, если высота модального окна < высоты экрана. Если высота модального окна > высоты экрана и сам контент страницы порождает скроллинг, то может вылезти 2 скроллинга. Этот момент можно пофиксить выставив overflow-y: hidden; у body в момент отображения модального окна.
Взято с хабра из комментов
Принцип такой:
.modal_overlay{
width: 100%;
height: 100%;
position: fixed;
text-align: center;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
z-index: 9;
justify-content: center;
align-items: center;
display: flex;
overflow: auto;
}