Наверное все программисты создавали свой todo-«велисипед», мне же было интересно разобраться насколько сложно сделать его с помощью Альпины. Для затравки, если будет время, можете посмотреть похожие примеры, только сделанные на других js-фреймворках — todomvc.com.

Когда я начал делать на Alpine, то сразу же сделал ошибку, что использовал «классический» подход в реализации. В итоге код получился запутанным и сложным. Но потом всё-таки сообразил, что можно сделать намного проще и элегантней. В «обычном» варианте нужно думать как связывать реальные данные с их хранением, то с Альпиной это работает из «коробки». По сути мы и работаем только с массивом данных, а отображение строится автоматом.

Мой пример достаточно простой. Я не стал его усложнять, оставил только базовый функционал. Так что при желании, вы сможете легко добавить что вам нужно.

Все верстальщики знают, что тэг SELECT один из самых капризных и плохо поддающихся кастомизации. Разработчики браузеров до сих пор не могут договориться какими css-стилями их можно настраивать, поэтому нам как правило приходится довольствоваться типовым поведением этого элемента с небольшим изменением дизайна.

Нужно понимать, что SELECT — это сложный элемент. Это не только внешний вид, но и достаточно сложное поведение, которое работает на события click, keydown, space, стрелки курсора, а также получение фокуса через Tab. Из-за этого все попытки переписать SELECT на какой-то свой html/js/css-вариант обычно ограничиваются только дизайнерской частью — повторить стандартное поведение достаточно сложно.

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

Заказать обновление шаблона или купить его можно будет с 8 февраля. Предыдущая версия шаблона позволила двигаться дальше, поэтому в новой версии появилось много нового и интересного. :-)

Пожалуй, самым заметным будут новые цветовые темы оформления. Основной цвет шаблона blue, но в прошлой версии я добавил для тестирования red и green. Я с ними много работал и в итоге расширил MF до 10 цветовых тем: default, cyan, green, indigo, lime, orange, pink, purple, red, violet. Достаточно выбрать подходящий дизайн в админ-панели. За счёт того, что используется Material Design ничего не требуется менять в HTML-коде. Выглядит довольно круто.

Но это ещё не всё. Также я добавил одну инверсную тему, рассчитанную на тёмный фон браузера. Здесь срабатывает возможность Berry CSS, которая позволяет инвертировать цветовые палитры. Пока тема в статусе экспериментальной, поскольку достаточно сложно добиться автоматической смены дизайна на инверсный. Тут просто требуется время, чтобы отследить все нюансы.

WEB-анимация достаточно специфичная область и не каждый разработчик с ней сталкивается. Если не рассматривать создание сложной «мультипликации», то современная анимация на сайтах выполняется с помощью CSS. Возможности здесь большие, поэтому сейчас доступно множество самых разных библиотек, предлагающих готовые css-классы.

У такого подхода есть несколько ограничений. Поскольку сама анимация жестко прописывается в виде класса, то для изменений требуется новая sass-компиляция или новый css-класс. Если, скажем, мы описываем анимацию цвета, то для 10 вариантов потребуется как минимум 10 новых классов. Аналогичная ситуация с размерами, отступами и т.д. То есть анимация в виде css-классов больше рассчитана на какие-то «фиксированные»/«типовые» эффекты.

Я уже много писал про Alpine.js как замену jQuery. Но у jQuery есть специальный метод .animate(), с помощью которого можно создать анимацию. Она довольно ограниченная, но для многих задач её хватает. В Alpine.js такого нет, поэтому я нашёл отдельную библиотеку Anime.js, с помощью которой можно создавать совершенно потрясающие вещи.

Сделать сетку на flex просто. Намного сложнее добиться её хорошей адаптивности. На сегодняшний день используется несколько разных подходов к этой задаче. Самый распространённый — это использование классов ширины в media-условиях. Здесь мы указываем разную ширину в зависимости от ширины экрана.

У такого способа есть несколько проблем, главная из которых — здесь не учитывается наполненность каждой ячейки. Может получится так, что ячейка с объёмным содержимым будет занимать меньше ширины. Чтобы сделать сетку, которая будет сама подстраиваться под своё содержимое, приходится отказаться от фиксированной ширины. Но, для начала рассмотрим вариант, где используется «стандартный» вариант с фиксированной шириной, чтобы понять суть проблемы.