Создаём To-do List на Alpine.js
Alpine.jsНаверное все программисты создавали свой todo-«велисипед», мне же было интересно разобраться насколько сложно сделать его с помощью Альпины. Для затравки, если будет время, можете посмотреть похожие примеры, только сделанные на других js-фреймворках — todomvc.com.
Когда я начал делать на Alpine, то сразу же сделал ошибку, что использовал «классический» подход в реализации. В итоге код получился запутанным и сложным. Но потом всё-таки сообразил, что можно сделать намного проще и элегантней. В «обычном» варианте нужно думать как связывать реальные данные с их хранением, то с Альпиной это работает из «коробки». По сути мы и работаем только с массивом данных, а отображение строится автоматом.
Мой пример достаточно простой. Я не стал его усложнять, оставил только базовый функционал. Так что при желании, вы сможете легко добавить что вам нужно.
Имитация select с помощью Alpine.js
Alpine.jsВсе верстальщики знают, что тэг SELECT один из самых капризных и плохо поддающихся кастомизации. Разработчики браузеров до сих пор не могут договориться какими css-стилями их можно настраивать, поэтому нам как правило приходится довольствоваться типовым поведением этого элемента с небольшим изменением дизайна.
Нужно понимать, что SELECT — это сложный элемент. Это не только внешний вид, но и достаточно сложное поведение, которое работает на события click, keydown, space, стрелки курсора, а также получение фокуса через Tab. Из-за этого все попытки переписать SELECT на какой-то свой html/js/css-вариант обычно ограничиваются только дизайнерской частью — повторить стандартное поведение достаточно сложно.
Ниже я покажу, как это можно сделать с помощью Alpine.js. Пример больше учебный, показывающий общий подход к кастомизации и созданию собственных интерактивных элементов.
Релиз шаблона MF 11 (февраль 2021)
Шаблон MFЗаказать обновление шаблона или купить его можно будет с 8 февраля. Предыдущая версия шаблона позволила двигаться дальше, поэтому в новой версии появилось много нового и интересного. :-)
Пожалуй, самым заметным будут новые цветовые темы оформления. Основной цвет шаблона blue, но в прошлой версии я добавил для тестирования red и green. Я с ними много работал и в итоге расширил MF до 10 цветовых тем: default, cyan, green, indigo, lime, orange, pink, purple, red, violet. Достаточно выбрать подходящий дизайн в админ-панели. За счёт того, что используется Material Design ничего не требуется менять в HTML-коде. Выглядит довольно круто.
Но это ещё не всё. Также я добавил одну инверсную тему, рассчитанную на тёмный фон браузера. Здесь срабатывает возможность Berry CSS, которая позволяет инвертировать цветовые палитры. Пока тема в статусе экспериментальной, поскольку достаточно сложно добиться автоматической смены дизайна на инверсный. Тут просто требуется время, чтобы отследить все нюансы.
Библиотека для анимации Anime.js
Alpine.js, jQuery и JavaScriptWEB-анимация достаточно специфичная область и не каждый разработчик с ней сталкивается. Если не рассматривать создание сложной «мультипликации», то современная анимация на сайтах выполняется с помощью CSS. Возможности здесь большие, поэтому сейчас доступно множество самых разных библиотек, предлагающих готовые css-классы.
У такого подхода есть несколько ограничений. Поскольку сама анимация жестко прописывается в виде класса, то для изменений требуется новая sass-компиляция или новый css-класс. Если, скажем, мы описываем анимацию цвета, то для 10 вариантов потребуется как минимум 10 новых классов. Аналогичная ситуация с размерами, отступами и т.д. То есть анимация в виде css-классов больше рассчитана на какие-то «фиксированные»/«типовые» эффекты.
Я уже много писал про Alpine.js как замену jQuery. Но у jQuery есть специальный метод .animate()
, с помощью которого можно создать анимацию. Она довольно ограниченная, но для многих задач её хватает. В Alpine.js такого нет, поэтому я нашёл отдельную библиотеку Anime.js, с помощью которой можно создавать совершенно потрясающие вещи.
Адаптивная сетка на flexbox
CSS, HTML, LESS, SASSСделать сетку на flex просто. Намного сложнее добиться её хорошей адаптивности. На сегодняшний день используется несколько разных подходов к этой задаче. Самый распространённый — это использование классов ширины в media-условиях. Здесь мы указываем разную ширину в зависимости от ширины экрана.
У такого способа есть несколько проблем, главная из которых — здесь не учитывается наполненность каждой ячейки. Может получится так, что ячейка с объёмным содержимым будет занимать меньше ширины. Чтобы сделать сетку, которая будет сама подстраиваться под своё содержимое, приходится отказаться от фиксированной ширины. Но, для начала рассмотрим вариант, где используется «стандартный» вариант с фиксированной шириной, чтобы понять суть проблемы.