MaxSite.org

Как создать свой сайт

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

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

Читать дальше →

Перейти к странице: