#игра дня

Для начала, котаны, спасибо за буст! Теперь это что мне, готовиться придётся...

Я всегда знал, что вы у меня самые крутаны! ❤️❤️❤️

Итак, игра дня сегодня — CSS Diner: подберёшь стили, голодным не останешься 👹️️️️️️

https://flukeout.github.io/

32 уровня тарелок, огурцов и помидоров. На ночь, наверное, не стоит.

#css #game #diner #flex #grid

#заметка дня

Чем отличаются auto-fit и auto-fill в гридах?

Отвечает Александр Друзь.

Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)

Так в чем же разница, словами? :)

При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.

В общем, всё довольно просто.

#css #grid #repeat #бородач

#статья дня

CSS Grid... с чего бы начать. Наверное с того, что это безумно просто и безумно сложно одновременно.

Кто-то пришёл в вёрстку когда гриды уже вовсю были в ходу, для кого-то гриды до сих пор означают flex-колонки из Bootstrap aka grid system и ничего другого знать не хочет. Или не может.

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

Потому я постоянно слежу за новыми обучающими инструментами и статьями и приношу их вам. И сегодня — очередной бриллиант от Джоша Камю.

Встречайте интерактивное руководство по CSS Grid: https://www.joshwcomeau.com/css/interactive-guide-to-grid/

И когда я говорю интерактивное в контексте — это буквально означает что вам не просто примеры кода дадут, а кучу ползунков, чекбоксов и живой вёрстки.

С красивыми иллюстрациями, конечно же.

В общем, бросайте все дела и бегом читать. Нашему чату нужен новый властелин гридов. Старый теперь по скриншотам гадает...

#css #grid #tool

#статья дня

С чего начать построение своего веб-секвенсора?

Конечно же с изучения Web Audio и Web Midi API!

Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/

Ну и, конечно, сразу демо: https://codepen.io/alinaki/pen/jOdeqRv

Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!

#web #audio #grid #music #бородач

#инструмент дня

Есть категория инструментов, наиболее сильные в тех средах, которые все кругом ненавидят.

Это всяческого рода таблицы с CRUD- (Create-Read-Update-Delete) возможностями.

Несложно догадаться, что наиболее прокачаны они в разного рода энтерпрайз-фреймворках (на Java и C#), под общим названием GridView, в Sencha Ext JS и... в том же 1С.

Ну ещё бы бухгалтерская платформа не умела в таблицы.

Для веба их в целом огромное количество, но многие из них, как тот же Ext JS, разрабатывались последние лет 20, выросли в огромных слабо поддерживаемых монстров. Казалось бы, ну уж за столько времени можно написать что-то гибкое и универсальное? Да не особо. И ещё денег просят.

К счастью, прогресс не стоит на месте и у нас уже есть несколько прекрасных гридов. Одним из самых крутых, несомненно, является универсальный TanStack Table (бывший React Table): https://tanstack.com/table/v8

Его кайф в том, что он предоставляет все необходимые базовые компоненты, хуки и классы под разные фреймворки, а вам остаётся собрать всё это в рабочий грид.

И пример такого рабочего грида мне на днях прислал подписчик: Material React Table.

Ссылка: https://www.material-react-table.com/

Как раз пару месяцев назад у них вышел новый релиз.

Если TanStack Query оставляет выбор UI-кита за вами, то MRT, как несложно догадаться, берёт за основу MUI (Material UI до версии 5) и добивает плюшками и полновесными примерами.

Отличная документация, готовый код прямо на главной странице. Имеется сравнение с конкурентами (куда ж без этого).

В общем, рекомендуем, котаны :)

#js #table #crud #grid

#статья дня

Надо было эту статью на фишки раздербанить, ну да ладно. Итак, задача: сделать сетку, элементы которой должны иметь четкое и, возможно, изменяемое соотношение сторон.

Передавать соотношение сторон можно через классы, конечно, но мы в 2024 году, так что будем использовать CSS-переменные (`--ratio: 4/3`). Дальше имеются два варианта:

1. Задать соотношение сторон всей строке через, удивительное рядом, складывание дробей: 4/3 + 2/3 = 6/3. Сразу можно понять, что минусов у решения достаточно.
2. flex-grow. Легко и просто.

Подробнее о решениях и ходе мысли в статье:
https://9elements.com/blog/building-a-combined-css-aspect-ratio-grid/

Флексы рулят, котаны :)

#css #grid #flex #бородач

#статья дня

Музыканты тут? Хотите нотную запись на гридах?

Нет? А я принёс! Сходу: https://cruncher.ch/blog/printing-music-with-css-grid/

В общем, предыстория такая. Разработчик по имени Стивен Бэнд несколько лет назад реализовал генерацию нотного стана в SVG из JSON записи, но осознал, что правильный рендеринг этого дела слишком сложен, и отложил.

И тут до него дошло: раз всё равно всё делать в браузере, почему бы не сделать гридами?

Ну и пошло-поехало:

grid-template-rows:
    [A5] 0.25em [G5] 0.25em [F5] 0.25em [E5] 0.25em
    [D5] 0.25em [C5] 0.25em [B4] 0.25em [A4] 0.25em
    [G4] 0.25em [F4] 0.25em [E4] 0.25em [D4] 0.25em
    [C4] 0.25em ;

Дальше — больше. Итогом стал веб-компонент, генерирующий стан из записи аккордов:

0 chord D maj 4
0 F#5 0.2 4
0 A4  0.2 4
0 D4  0.2 4

Гитхаб тоже имеется: https://github.com/stephband/scribe/

Шикарное решение, интересный ход мыслей. Всем рекомендую к прочтению, даже если вы не музыкант

я тоже нет, но это так красиво! :)

#css #grid #music

#codepen дня

Не думаю, что вы помните это изображение. Но оно — с одной из презентаций Apple. Кажется, iPhone 13. Список сотовых операторов-партнёров яблочной конторы.

Так вот.

Прелесть этой сетки логотипов в том, что она весьма сбалансирована.

Недостаточно просто взять и сделать все изображения одной ширины или одной высоты. Тут думать надо.

И вот один из вариантов попытки автоматизации подобного: https://codepen.io/jaredstanley/pen/VwYPvJO

Есть некий коэффициент scaleFactor. 0 — к единому значению приводится ширина, 1 — высота. Ну а baseSize — к чему в итоге приводить. А дальше — подбирай порядок и нужные параметры, чтоб неплохо смотрелось.

Кто-нибудь находил нечто подобное в виде плагина для Figma?

Где-то в закладках у меня лежала информация о подготовке изображений для такой сетки... завтра найду и закину.

#js #grid #img #бородач

#codepen дня

Давайте немного развлечёмся. Кто-то не так давно в чате канала выкатил большой SCSS-цикл для анимации, но саму анимацию зажал (ай-яй-яй).

Давайте исправим положение и сделаем что-то насущное.

Например, сымитируем табло в аэропорту… С его задержками смены линий при смене языка.

Поехали: https://codepen.io/alinaki/pen/ZEaOdKq

Заодно использована интересная фишка CSS Grid: наложить две ячейки друг на друга без абсолюта.

#css #grid #animation #scss #бородач

#статья дня

Прекрасный материал от Ван Дамма. Брамуса. Того самого, который нам много рассказывает про CSS Scroll Timeline API.

Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐)

Так вот, Брамус заявляет: “Календарь – это сетка!”.

Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid.

https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/

На всё про всё буквально три значащих строчки. Хочется, чтобы неделя начиналась с воскресенья? Нет проблем, сдвигаем начало сетки!

В общем, на этом войне календарей должен быть положен конец.

#css #grid #calendar

#статья дня

Вечнозелёная (суть, никогда не устареет) статья Павла Лаптева о CSS Grid: https://pavellaptev.medium.com/learning-css-grid-with-the-swiss-2bd02e913fa

Но не просто очередная уровня "две колонки, три строки", а с некоторым историческим экскурсом через газеты и журналы, приводящим в итоге к реализации пары каноничных швейцарских сеток.

А уж кто знает о типографских сетках больше швейцарцев? Да в общем-то, никто. Как и о типографике, впрочем.

Давайте-ка сюда сразу добавим статью про золотой канон в сетках (golden canon grid): https://habr.com/ru/post/479580/

#css #grid #swiss #бородач

#статья дня

Новая статья Ахмада Шадида. На сей раз — об именованных областях сетки aka Grid Areas: https://ishadeed.com/article/css-grid-area/

Как всегда, прекрасно иллюстрированная и плавно ведущая нас от простых вещей вроде двухколоночной раскладки до мультиязычности, условного отображения и отладки в DevTools.

#css #grid

#статья дня

С чего начать построение своего веб-секвенсора?

Конечно же с изучения Web Audio и Web Midi API!

Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/

Демо: https://codepen.io/stoumann/pen/ZEjjyEp

Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!

#web #audio #grid #music #бородач

#инструмент дня

Из-за моей профдеформации — работа над расширением для Google Sheets — мне очень нравятся различные виджеты таблиц.

От экселеподобных до обычных таблиц aka гридов с фильтрами и сортировкой.

И естественно, моё внимание не мог не привлечь проект с говорящим названием fast-grid: https://github.com/gabrielpetersson/fast-grid

Автор заявляет, что на рынке лучше вариантов нет, что оно может переваривать миллионы строк с максимально быстрым скроллингом и всё это плавно и красиво. Для отрисовки используется мультипоточный веб-воркер.

Ну и, в общем-то, это правда :) Даже на тринадцатилетнем ноутбуке (с 4 ядрами и 16 гигами оперативы, впрочем) мне удалось загрузить 2 миллиона строк и радоваться жизни (Chrome, Linux).

5 миллионов, впрочем, не получилось ни на нём, ни на MacBook Pro M2 с 24 гигами. На первом вкладка съела 7 гигабайт и рухнула, на втором — съела 4 и ничего не произошло. Вообще.

И тут, конечно, встаёт вопрос целесообразности всех оптимизаций. Иметь по 5-10 миллионов строк в таблице это практически норма для Google Sheets (да, если навесить туда фильтры — всё станет очень плохо, но работает же). Заявленная плавная и бесконечно умное переиспользование DOM это хорошо, но грамотная подгрузка частями и виртуализация всё же выглядят более разумным решением.

Но если вам нужно переварить до миллиона строк — по-моему, вариант отличный.

#javascript #grid #sheets

#фишка дня

Продолжим тему ответов на ваши вопросы на собеседованиях.

Почему ваши? Ну потому что вы их предлагали! Вот тут: https://yangx.top/htmlshit/3290

Итак, вопрос: как показать спиннер загрузки прямо в кнопке, сохранив размер кнопки и её доступность?

То есть, не делать такое:

‹button>{ isLoading ? <LoadingSpinner/> : "Save" }</button>

Очевидный ответ: абсолютом спиннер сверху навернуть. Но мы же не в 2009 году, в самом деле!

А что, если нам больше одного наслоения надо? А что, если на разных устройствах нужен разный порядок отображения, например, спиннер и текст одновременно? А что, если текст состояния загрузки на самом деле длиннее, чем основной? Мы же не хотим, чтоб интерфейс прыгал.

Когда-то давно мы сделали табло, в котором меняли строки на разных языках: https://yangx.top/htmlshit/2814

И там как раз применили такую фишку CSS Grid, как стек. Т. е. накладывание блоков друг на друга без изменения их позиционной модели.

Самое время это применить и тут!

Только на сей раз мы воспользуемся именованными зонами грида, вместо grid-area: 1/1 как в прошлом примере.

Итого:

.button {
    display: grid;
    grid-template-areas: "stack";

    .spinner,
    .text {
        grid-area: stack;
 justify-self: center;
    }
}

Ну и как-то так вышло: https://codepen.io/alinaki/pen/ogvBMLv

#css #grid

#инструмент дня

Не понимаешь гриды? Не проблема!

Ведь есть конструкторы. Например, https://cssgridgenerator.io/

Задал начальные условия, поперетаскивал мышкой блоки — и готово! Забирай CSS.

А для любителей Tailwind — присутствует аналогичный проект https://www.tailwindgen.com/, он просто распихает нужные классы по блокам. Ноль забот.

Кстати, о Tailwind. На днях вышла его четвёртая версия. Ещё меньше конфигурации (ну, буквально не нужна для старта), новые утилиты для работы с transform, поддержка контейнерных запросов и интеграция с Vite.

#css #grid #tailwind