Witty 11ty

Сегодня мы поговорим о стилизации с использованием Chakra UI, проблеме кастомизации скроллбаров и генерации статических сайтов через Eleventy. В процессе подскажем классный повод выпить кофе с дизайнерами, вспомним веб ранних 2000х и двумя командами превратим шаблон Markdown в готовый сайт.

Чистим чакры

Ориентироваться во всём спектре существующих компонентов, библиотек и фреймворков — задача не из лёгких. Мы стараемся говорить о самых разных инструментах — от Node.js и Typescript до Blazor и Mithril.js. Если стоит задача стилизации, рекомендуем задуматься о библиотеке компонентов Chakra UI.

Chakra UI «‎заточена»‎ на React, но поддерживает и другие фреймворки, например:

• NextJS,
• Gatsby,
• Blitz.js,
• RedwoodJS,
• Remix,
• Vite,
• Meteor.

Для каждого случая на сайте проекта есть гайд по настройке. Помимо обширной коллекции бесплатных базовых компонентов, Chakra UI предлагает множество сложных шаблонов на платной основе. Это в разы ускоряет процесс разработки, убирая необходимость работы с Figma. На выходе получаются стильные и качественные пользовательские интерфейсы.

Если же ваша задумка предполагает уникальный стиль, мы бы посоветовали выпить кофе с вашими дизайнерами, а заодно показать им, как установить Chakra UI Figma Kit. Туда уже включены стили для типографики, варианты компонентов и даже динамические слои на базе Auto Layout. Все компоненты имеют открытый исходный код и их можно использовать в любых коммерческих проектах на условиях лицензии MIT.

Недостатком Chakra UI, по мнению некоторых разработчиков, можно считать, что эта библиотека приучает к своему API. Даже если вы знаете кунг-фу и способны поспорить про CSS с его автором, Хоконом Виумом Ли, то это мало поможет в освоении Chakra UI. Сделать себе жизнь чуточку лучше можно, распечатав и повесив небольшую шпаргалку, например, отсюда.

Стоит ли кастомизировать скроллбары

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

Глобально предполагается, что разработчику необходимо отвечать за всё, что происходит в пределах указанного периметра: 

Авторам браузера остаётся всего ничего — панель вкладок, элементы управления, строка ввода и скроллбар:

В большинстве случаев внешний вид этих элементов зависит от установленной операционной системы. Чтобы улучшить пользовательский опыт, элементы управления стараются сделать унифицированными. Какое бы приложение не открыл пользователь, у него в руках будут привычные элементы управления: флажки, переключатели, радиокнопки и тому подобное. Как только вы заменяете дизайн привычного элемента, единообразие нарушается. 

Если вы всё же горите желанием это сделать, сначала задайте себе несколько вопросов: 

• Правда ли брендинг не добьётся успеха, если оставит полосы прокрутки в покое? Брендинг ведь нечто большее, чем просто внешний вид.
• Стоит ли утяжелять веб-сайт, загружая дополнительные данные, которые изменят внешний вид и параметры скроллбара? Когда дело доходит до производительности в Web, на счету оказывается каждый килобайт передаваемых данных.
• Будет ли стилизованный элемент контрастным? У Apple был горький опыт с исчезающими скроллбарами и пользователи просто не догадывались, что страница может прокручиваться вниз.

Таких неочевидных моментов, на самом деле, значительно больше. И с точки зрения дизайна, и с точки зрения личных предпочтений пользователей. Ваши собственные визуальные ощущения не могут служить надёжным показателем. Одновременно вы убираете возможность для людей с плохим зрением пользоваться всеми преимуществами высококонтрастных тем рабочего стола. Ваша улучшенная полоса прокрутки не станет для них более заметной. Так что не стоит кастомизировать скроллбары с помощью CSS.

Генератор статических сайтов Eleventy

В декабре 2017 года публике был представлен генератор статических сайтов Eleventy. Его главной ценностью стало то, что он способен превратить любой набор данных в готовый веб-сайт. Делает он это настолько быстро, что всего за одну минуту может обработать 50 тысяч файлов. Уже спустя 4 месяца после запуска он выиграл Google Open Source Award в первый раз, а ещё через год — во второй. 

В Eleventy есть поддержка Markdown и чистого JavaScript, что делает его превосходным выбором для сборки веб-сайтов с документацией. Это очень удобно, поскольку позволяет применять подход Docs-as-Code и получать очень быстрые билды. Суперсилой Eleventy стала возможность смешивать и сочетать разные шаблоны движков, например, Jekyll и Mustache. Такой трюк позволяет выполнять миграцию и доставку существующих компонентов в нужный для заказчика шаблон.

Таким проектам, как Netlify, Eleventy помог реализовать Server-Side Rendering без единой строчки JS-кода на клиентской стороне. Кстати, на сайте проекта есть доска почёта, куда вносят наиболее быстрые сайты, созданные при помощи Eleventy.

Начать работу с этим генератором можно всего за 2 шага. Перед началом мы бы убедились, что на хосте есть установленная Node.js версии 14. Далее нужно создать простейший шаблон в Markdown, например:

--- 
layout: layouts/base.njk 
title: My Blog 
Post date: 2023-05-15 
--- 

# My Blog Post 
This is the content of my blog post. 

## Subheading 
Here's some more content.

Этот шаблон использует layouts/base.njk в качестве базового макета для страницы и включает в себя заголовок, дату и основной контент, написанный на Markdown. Назвали файл index.md и запустили Eleventy:

npx @11ty/eleventy

Работает эта магия так: система заглянет в папку и заберёт оттуда файл, определив его по расширению .md, а затем сгенерирует из него .html и положит в директорию _site по умолчанию. Наш index.md превратился в готовый для употребления index.html 

Чтобы посмотреть на готовый результат, включите локальный веб-сервер:

npx @11ty/eleventy --serve

Откройте веб-страницу http://localhost:8080/ и увидите сайт, созданный из нашего шаблона. Время порадоваться — всё получилось!

Митапы