Alpine.js

Создаём To-do List на Alpine.js

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

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

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

Читать дальше...

Имитация select с помощью Alpine.js

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

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

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

Читать дальше...

Библиотека для анимации Anime.js

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

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

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

Читать дальше...

Работа с куками в Alpine.js

Работать с куками в Alpine.js в общем-то можно как и с любым другим js-кодом. Вопрос здесь скорее в плоскости того, как мы используем куки и где это можно применить. Я покажу несколько примеров на Alpine.js, где используются куки. Это сообщение «Наш сайт использует куки бла-бла-бла...» и табы с памятью.

Перед началом определимся с функциями для работы с куками. Работать с ними через нативный js-код не очень удобно, поэтому мы воспользуемся уже готовыми функциями, например с learn.javascript.ru/cookie (прямой линк на их файл).

Для затравки рассмотрим простой пример, где можно задать, считать и удалить куку.

Читать дальше...

Взаимодействие между Alpine-компонентами

Как мы знаем, все компоненты Alpine работают изолировано. Директива x-dataопределяет сам компонент и всё «реактивное» взаимодействие происходит в пределах данного блока.

Но что делать, если нужно организовать связь между несколькими компонентами? Формально мы можем использовать сторонний js-код, в котором хранить общие переменные. Или даже использовать LocalStorage, чтобы сохранять состояние после закрытия страницы. Но всё это скорее обходные манёвры. Попробуем сделать это на нативном функционале Alpine.js.

Читать дальше...

Асинхронная загрузка js-скриптов

Думаю, что с проблемой загрузки js-скриптов сталкивался каждый вебмастер. В современных браузерах доступны варианты — обычной загрузки в HEAD, поздней (lazy) в BODY, а также async и defer. Масла в огонь подлил Гугл, который понижает рейтинг страниц, где используются загружаемые js-скрипты, мотивируя это тем, что браузер вынужден ждать их полной загрузки и отработки, прежде чем отрендерить страницу.

Но на самом деле, проблема ещё глубже, поскольку затрагивает вопрос не только последовательности загрузки, но и порядка выполнения скриптов. Я покажу это на примере Alpine.js и jQuery.

Читать дальше...

Что такое API. Объяснение с примерами

По идее про «API» должны знать все разработчики. Переводится как программный интерфейс приложения, но поскольку для нас наибольший интерес представляет Интернет, то речь пойдёт о Web API. Под ним обычно понимают некие http-запросы между клиентом и сервером. То есть всегда есть тот, кто отправляет запрос и есть тот, кто его обрабатывает и возвращает результат.

Простой пример. Вася — верстальщик, который делает сайт и знает только HTML и JavaScript. На сайте есть страница, которая выводит список пользователей. Чтобы его отобразить, нужно вначале откуда-то получить данные.

Петя, наоборот, ничего не знает о JS и верстке, но неплохо разбирается в PHP и базах данных. То есть Петя делает так, чтобы можно было сформировать данные о юзерах, а Вася сможет их получить через простой Ajax-запрос к серверу. Петя даёт Васе URL-адрес такого запроса, http-метод и список возможных параметров. Вася указывает их в fetch()или XMLHttpRequest()и получает готовые JSON-данные, которые прекрасно работают с его js-скриптами.

Вот этот механизм, когда программа предоставляет интерфейс для управления и называется API.

Читать дальше...

Перейти к странице: