Alpine.js

Моё впечатление о dev-версии Alpine 3

16-06-2021Alpine.js

Недавно был анонс 3-й dev-версии AlpineJS. Это даже не новая версия, а скорее прототип для разработчиков. Сейчас много вопросов, много ошибок, поэтому использовать эту версию на рабочем сайте, я бы не рискнул. Более того, 3-я версия серьёзно ломает совместимость с текущей 2-й, поэтому переход на новую скорее всего потребует и переписывание старого кода. И это гигантский минус — скорее всего переход на новую версию займёт много времени. Вряд ли вебмастера сразу кинутся переписывать старый код. Читать ➝

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

13-02-2021Alpine.js

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

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

09-02-2021Alpine.js

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

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

01-02-2021Alpine.js, jQuery и JavaScript

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

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

12-01-2021Alpine.js

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

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

06-01-2021Alpine.js

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

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

25-12-2020Alpine.js, jQuery и JavaScript

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