Адаптивная сетка на flexbox
CSS, HTML, LESS, SASSСделать сетку на flex просто. Намного сложнее добиться её хорошей адаптивности. На сегодняшний день используется несколько разных подходов к этой задаче. Самый распространённый — это использование классов ширины в media-условиях. Здесь мы указываем разную ширину в зависимости от ширины экрана.
У такого способа есть несколько проблем, главная из которых — здесь не учитывается наполненность каждой ячейки. Может получится так, что ячейка с объёмным содержимым будет занимать меньше ширины. Чтобы сделать сетку, которая будет сама подстраиваться под своё содержимое, приходится отказаться от фиксированной ширины. Но, для начала рассмотрим вариант, где используется «стандартный» вариант с фиксированной шириной, чтобы понять суть проблемы.
Работа с куками в Alpine.js
Alpine.jsРаботать с куками в Alpine.js в общем-то можно как и с любым другим js-кодом. Вопрос здесь скорее в плоскости того, как мы используем куки и где это можно применить. Я покажу несколько примеров на Alpine.js, где используются куки. Это сообщение «Наш сайт использует куки бла-бла-бла...» и табы с памятью.
Перед началом определимся с функциями для работы с куками. Работать с ними через нативный js-код не очень удобно, поэтому мы воспользуемся уже готовыми функциями, например с learn.javascript.ru/cookie (прямой линк на их файл).
Для затравки рассмотрим простой пример, где можно задать, считать и удалить куку.
Обновление Albireo Framework (январь 2021)
ДневникВыложил обновление Albireo Framework — первое в этом году. В нём довольно крупные изменения, направленные на большее удобство использования. Так же были некоторые доработки, которые накопились за время использования фреймворка на рабочих проектах. Ну и поскольку Albireo я использую как тестовую площадку для новых идей, то изменения это задел на будущее.
Взаимодействие между Alpine-компонентами
Alpine.jsКак мы знаем, все компоненты Alpine работают изолировано. Директива x-data
определяет сам компонент и всё «реактивное» взаимодействие происходит в пределах данного блока.
Но что делать, если нужно организовать связь между несколькими компонентами? Формально мы можем использовать сторонний js-код, в котором хранить общие переменные. Или даже использовать LocalStorage, чтобы сохранять состояние после закрытия страницы. Но всё это скорее обходные манёвры. Попробуем сделать это на нативном функционале Alpine.js.
Итоги 2020 года
ДневникЯ не особый фанат подведения итогов перед новым годом, но, просматривая старые посты, даже сам удивился, насколько продуктивным оказался год. Если говорить не об IT, то наверное стоит отметить влияние пандемии — начало года обещало быть достаточно «денежным», но к лету пришлось сильно подтянуть пояса — новых клиентов не было, работы были только со старыми. Наверное из-за этого и появилось время на бытовые дела (стройка), а также запуск новых проектов.
Но если выделять самое-самое главное событие — оно астрономическое: появление кометы C/2020 F3 (NEOWISE). Совершенно потрясающее зрелище — я конечно в диком восторге! Словами этого не описать, нужно видеть воочию. :-)
Впрочем, вернёмся к делам интернетовским.