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-скрипты, мотивируя это тем, что браузер вынужден ждать их полной загрузки и отработки, прежде чем отрендерить страницу. Читать
Что такое API. Объяснение с примерами
По идее про «API» должны знать все разработчики. Переводится как программный интерфейс приложения, но поскольку для нас наибольший интерес представляет Интернет, то речь пойдёт о Web API. Под ним обычно понимают некие http-запросы между клиентом и сервером. То есть всегда есть тот, кто отправляет запрос и есть тот, кто его обрабатывает и возвращает результат. Читать
Организация циклов в Alpine.js
03-12-2020Alpine.js
Циклы используются там, где нужно повторить какой-то html-вывод по единому шаблону. Я уже Читать
Условные блоки в Alpine.js
02-12-2020Alpine.js
Чтобы показать или скрыть блок используется директива x-show, однако существует ещё одна альтернатива — x-if. Работают они одинаково, с той разницей, что x-show можно применить к любому html-тэгу, а x-if работает только с тэгом TEMPLATE. Читать