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

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

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

Читать ➝

Выложил обновление Albireo Framework — первое в этом году. В нём довольно крупные изменения, направленные на большее удобство использования. Так же были некоторые доработки, которые накопились за время использования фреймворка на рабочих проектах. Ну и поскольку Albireo я использую как тестовую площадку для новых идей, то изменения это задел на будущее.

Читать ➝

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

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

Читать ➝

Я не особый фанат подведения итогов перед новым годом, но, просматривая старые посты, даже сам удивился, насколько продуктивным оказался год. Если говорить не об IT, то наверное стоит отметить влияние пандемии — начало года обещало быть достаточно «денежным», но к лету пришлось сильно подтянуть пояса — новых клиентов не было, работы были только со старыми. Наверное из-за этого и появилось время на бытовые дела (стройка), а также запуск новых проектов.

Но если выделять самое-самое главное событие — оно астрономическое: появление кометы C/2020 F3 (NEOWISE). Совершенно потрясающее зрелище — я конечно в диком восторге! Словами этого не описать, нужно видеть воочию. :-)

Впрочем, вернёмся к делам интернетовским.

Читать ➝

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

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

Читать ➝

Расскажу про одну методику, которая позволяет достаточно быстро перевести макет страницы в HTML-код прототипа.

Например у нас есть лендинг. Как правило на первом этапе происходит сбор информации, а потом рисуется графический прототип. Это может быть обычный Ворд, или гугл-документы, но часто это сервис wireframe.cc. Мне он очень нравится, поскольку не содержит ничего лишнего и прост для работы. Ну и бесплатный, что тоже важно.

Иногда работу в wireframe.cc выполняет сам копирайтер. Там он не только пишет тексты, но и размечает блоки, которые по его мнению можно скомбинировать определённым образом. Когда всё готово, этот макет получает html-верстальщик, который должен перенести тексты (это простое копирование) и разверстать блоки, только уже в HTML-код.

Здесь есть очень важный момент — первая версия вёрстки должна повторять макет wireframe.cc (это может быть любой другой сервис — я привожу его только как пример). То есть не нужно верстать в цвете, задавать все изображения, настраивать отступы: нет — это будет тоже черновой вариант, но только выполненный в html-коде.

Читать ➝