Сделать сетку на flex просто. Намного сложнее добиться её хорошей адаптивности. На сегодняшний день используется несколько разных подходов к этой задаче. Самый распространённый — это использование классов ширины в media-условиях. Здесь мы указываем разную ширину в зависимости от ширины экрана.

У такого способа есть несколько проблем, главная из которых — здесь не учитывается наполненность каждой ячейки. Может получится так, что ячейка с объёмным содержимым будет занимать меньше ширины. Чтобы сделать сетку, которая будет сама подстраиваться под своё содержимое, приходится отказаться от фиксированной ширины. Но, для начала рассмотрим вариант, где используется «стандартный» вариант с фиксированной шириной, чтобы понять суть проблемы.

Работать с куками в 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). Совершенно потрясающее зрелище — я конечно в диком восторге! Словами этого не описать, нужно видеть воочию. :-)

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