Быстрый старт методологии БЭМ (блок, элемент, модификатор)

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

Читать далее

Реализация todo-list на Vue.js

Недавно начал изучать Vue.js

Для обкатки знаний поставил себе следующую задачу:

Реализовать todo-list (план дел на ближайшее время) со следующими простыми возможностями:

1) Добавление новой задачи
2) Удаление задачи
3) Отметка задачи как выполненной/не выполненной
4) Синхронизация состояния задач с удалённым хранилищем (чтобы после перезагрузки страницы данные не пропадали)

Получилось что-то вроде этого:

https://web-finder.ru/files/todo-checklist/

Особенности реализации читайте под катом.

Читать далее

Паттерны проектирования в JavaScript

Что такое паттерн проектирования?

В сфере разработки программного обеспечения паттерн проектирования (design pattern) — это повторяемая архитектурная конструкция, представляющая собой решение проблемы проектирования в рамках некоторого часто возникающего контекста. Паттерны проектирования представляют собой обобщение опыта профессиональных разработчиков ПО. Паттерн проектирования можно рассматривать как некий шаблон, в соответствии с которым пишут программы.

Читать далее

Резиновое (адаптивное) видео с YouTube и Vimeo

Всем известно, что в 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 загрузки. Эффект размытия.

Давно хотел сделать так, чтобы при загрузке информации в какой-либо блок (к примеру, AJAX-ом) помимо обычного прелоадера сам блок бы еще размывался.

Собственно пример можно посмотреть здесь: https://jsfiddle.net/va61mk5t/1/

Читать далее