Некоторые веб-сайты очень просты. У профессионального разработчика интерфейса велик соблазн использовать тяжелые инструменты для простых задач. Вот что я узнал, разрабатывая простой сайт этой зимой. Почти никаких зависимостей, никакого JavaScript, никакой CMS. Красивая простота!
Несколько недель назад Даниэль Такай попросил меня переписать его бизнес-сайт: silberruecken.ch. Основными требованиями были производительность, а также простота дизайна, разработки и хостинга. Мы сформировали команду из трех человек: Jonas Wyssen для дизайна, Дэниел для хостинга и я для внешнего интерфейса.
Наш первоначальный диалог был очень интересным. Мы не хотели использовать CMS, поскольку для этого не хватало контента. Тем не менее, был какой-то контент, поэтому требовалось простое решение для редактирования. Введите генератор статических сайтов с механизмом шаблонов. Дизайн получился изысканным. Мы хотели реализовать прокрутку с помощью динамических графических элементов (параллаксная прокрутка). Вроде как страницы продуктов в Apple. С другой стороны, вес страницы должен быть минимальным, не более 128 КБ на страницу. Вдобавок ко всему, количество обращений браузера туда и обратно должно быть уменьшено, поэтому максимум 10 запросов на страницу было бы здорово. Время автономной работы посетителей также вызывало беспокойство, поскольку мы хотели сначала написать это для мобильных устройств.
Ящик для инструментов
Я хотел не изобретать велосипед. Должно быть что-то, что обеспечит лучший опыт разработки, чем непосредственное написание простых HTML-файлов с добавлением лишь небольшого кода JavaScript, а в идеале — никакого.
Я сделал несколько быстрых проверок, выбрал несколько кандидатов и провел несколько простых измерений, всего один запуск сборки, может быть, два, чтобы увидеть, смогу ли я найти явного победителя:
- старый добрый друг
- время сборки одного пейджера около 6 секунд
- он добавляет 77,6 КБ JS на пустую страницу
- здание примерно через 11 секунд
- добавляет около 69,9 КБ JS на пустую страницу
- быстро чуть более 1 с
- никакого JS на выходе, если это не мой код!
- время сборки 0.5с
- нет js на стороне клиента!
Тот факт, что и Next.js, и Gatsby добавляют JS, который трудно удалить, заставил меня задуматься о 11ty и Astro. Если вы создаете более многофункциональную и динамичную страницу, которая могла бы извлечь выгоду из функций Next.js или Gatsby, таких как маршрутизация, SSR и оптимизация изображений, все они были бы идеальными кандидатами, но моей целью была страница как можно более тонкой. 11ty и Astro очень похожи, и я играл с обоими. Опыт разработки превосходен в обоих случаях, и у них схожая структура. Мне больше понравились примеры, предоставленные 11ty. На веб-сайте проекта есть множество примеров страниц в качестве отправной точки. В этот раз 11ты, в следующий раз Астро.
Мастерство
Все началось с возведения небольшого, но все же прочного фундамента. С 11ty это так же просто, как создать пустой проект npm и установить зависимость. Если у вас все в порядке со значениями по умолчанию, в файле конфигурации нет необходимости. Мне очень нравится 11ty, это отличная помощь, и я рекомендую ее для вашей следующей статически сгенерированной страницы. Вы не будете разочарованы.
HTML — это та часть Интернета, разработка которой в последние годы превратилась в рутинную работу. Это грустно, но факт, и я также вношу свой вклад в это, наблюдая за каждой новой экспериментальной функцией JavaScript, возможно, играя с CSS Grids, но никогда не задавая себе вопрос: есть ли какой-нибудь новый тег, который поможет мне улучшить Интернет? Может быть, есть даже старый тег, который поможет мне создать что-то лучше. JSX, редакторы и плагины вроде Emmet позволяют легко забыть о существовании тегов. Напишите аббревиатуру, похожую на селектор CSS, нажмите Tab, готово и переключитесь на забавную часть JavaScript.
Этот сайт был другим. Как статически сгенерированный сайт, предполагая, что контент находится непосредственно в репозитории Git. HTML и часть шаблонов сыграли здесь жизненно важную роль. Моя первая идея: есть ли способ использовать там JSX? Создайте пару компонентов React, к которым мы так привыкли, наполните их данными и получайте прибыль! К счастью, эта мысль не заставила себя долго ждать. Есть более старомодное и подходящее решение для настройки без JavaScript. Если контент — это то, к чему вы стремитесь, выберите Markdown, который вам подходит. К сожалению, есть только одно исключение.
Markdown хорошо работает для контента, но если вы хотите смешать более сложный макет, все становится сложнее создавать. Это начинает напоминать взлом Markdown. План перейти на Markdown казался хорошим, но нам нужно было что-то более мощное, близкое к HTML, в идеале с возможностью его модульности. У 11ty есть несколько предложений. В данном случае я выбрал Nunjucks. Это просто; их макросы выглядят как примеси или другие компоненты и работают как шарм. К сожалению, его можно было бы поддерживать более активно. React и Vue повсюду в Интернете. Хотелось бы чаще видеть чистый, статически сгенерированный контент. Я убежден и готов бороться с чумой React.
Проблемы со стилем
CSS — вторая опора веб-проектов — переживает не лучшие времена. Мы поняли, что писать надежный, поддерживаемый код CSS сложнее, и придумали методологии CSS, препроцессоры, постпроцессоры, CSS-in-JS, стилизованные компоненты и CSS-модули… но тем временем спецификация CSS продвигалась вперед. Я считаю, что простой CSS — это то, что нужно для небольших и средних проектов.
При использовании переменных CSS больше ничего не нужно. Кроме того, страница становится маленькой, CSS — тонким, и мы встроили все это в страницу. Для оперативности: все изменяющиеся свойства имеют переменную CSS, которая изменяется в соответствии с потребностями. Это решает известную проблему повторения структуры классов при написании медиа-запросов.
Есть два популярных решения для размещения медиа-запросов. Вы можете разместить медиа-запрос непосредственно там, где вам нужно, чтобы произошло изменение — это возможно с любым препроцессором, таким как SASS или LESS. Или вы можете повторить часть структуры позже, только для той части, которая должна меняться в разных окнах просмотра. Первый вариант мне никогда не нравился. Конечно, вы не повторяете структуру для отзывчивости, и вы можете быстро увидеть, как свойство изменяется через точки останова, но для чего-то немного более сложного, чем абзац с более чем двумя точками останова, это кошмар для чтения и досадно трудно поддерживать . Второй вариант тоже не идеален. Опять же, для более сложных сценариев он плохо масштабируется. Вот пример подхода, который мы использовали в silberruecken.ch
Каждое свойство, которое зависит от размера экрана, имеет свою переменную CSS. Достаточно просто.
Теперь я продолжаю задаваться вопросом — насколько хорошо это масштабируется… Может ли это быть приемлемым решением для большого многокомпонентного проекта? Возможно, вы уже знаете его и хотели бы поделиться им с остальными читателями. Это идея, которую я хотел бы проверить. Если не на проект, то точно как идею для личного изучения. Честно говоря, у меня большие сомнения по поводу того, какое CSS-решение выбрать для следующего большого проекта. Это все еще старый добрый SCSS? Модули CSS были потрясающими, но я только что увидел, что две основные библиотеки, поддерживающие React, активно не поддерживаются. Мне очень не нравится Tailwind, и мне понравилось решение, которое мы сделали здесь… сложный выбор, и я хотел бы прочитать ваше мнение о нем.
Я хотел бы закрыть тему стилей здесь, успешно сократив количество запросов. На странице используются два шрифта, и оба взяты из шрифта Google. Подстановка их только на символы, используемые вручную, помогла удалить еще два запроса.
Управление изображениями
Какой была бы контентная страница без изображений? Обогащение каждой истории и быстрое снижение производительности страницы. Не оптимизирован для Интернета, не загружается отложенно или загружается отложенно, но вызывает смещение макета. В silberruecken.ch мы использовали простой, но быстрый способ — веб-изображения двух, а иногда и трех размеров, размещенные локально, без специального CDN или изменения размеров изображений во время полета. Ленивая загрузка приостановлена, и мне нужно попробовать еще раз.
Более интересны небольшие дополнения SVG. Страница включает три встроенных SVG. Я использую первое значение clip-path для изображений, которые вы видите на домашней странице. Второй — спрайт SVG для трех иконок. И последнее, но не менее важное — каракули на заднем плане — спрайты SVG. Ничего сверхъестественного за ним. SVG комбинируются вручную, встраиваются в HTML с помощью функции включения Nunjacks, но правда в том, что после всей работы по разработке может быть еще две корректировки, и все это настроено до следующего перезапуска страницы. Нет необходимости пересчитывать это при каждой сборке.
Заставь его двигаться
Страница статична, но это не значит, что она должна быть скучным набором текста и изображений. Чтобы обогатить опыт, Джонас предложил сделать домашнюю страницу прокручиваемой с эффектом параллакса. Параллакс уже давно присутствует в Интернете. Должен быть надежный, современный, производительный набор решений. Верно? Возможно, я не тратил достаточно времени на исследования, но я не смог найти какую-либо маленькую, быструю, активно поддерживаемую библиотеку, которая справилась бы с поставленной задачей. Если у вас случайно есть такая библиотека в вашем наборе инструментов, пожалуйста, поделитесь ею! CSS был моим первым выбором, но мне было трудно приспособиться к потребностям параллакса, что ограничивало возможности. Но, в конце концов, это решение, которое я выбрал.
Он основан на фантастической статье Линн Фишер. Если вы согласны с некоторыми манипуляциями с CSS, играя с десятками значений, пока не найдете подходящее, это может быть чем-то для вас. Огромным преимуществом является то, что это крошечное решение — несколько классов с менее чем десятью свойствами и работами! Ну, почти. Есть одно но, это могло бы работать лучше в Safari. Решение основано на перемещении предметов по оси Z и увеличении или уменьшении масштаба, чтобы создать ощущение глубины. Для этого вам также может понадобиться изменить z-индекс элементов, который не работает в Safari. Установка translateZ для элемента нарушает z-индекс, и значение не принимается во внимание.
Возможно, где-то и есть элегантное решение, но сейчас я пошел на компромисс, сохранил CSS-решение, но ограничил порядок элементов естественным порядком, чтобы нам не нужно было модифицировать `z-index`. Это помогло.
Какой будет современная веб-страница с JavaScript? Всего на silberruecken.ch 40 строк JS. Так мало строк, что я могу вставить их все сюда:
В первых 25 строках кода есть IntersetionObserver, проверяющий, появилось ли изображение в окне просмотра или покинуло его. Переключение класса visible для запуска анимации.
Вторая часть поможет скрыть мобильную навигацию. Сама навигация выполняется с помощью HTML и CSS — кнопка для переключения навигации представляет собой флажок, просто стилизованный так, чтобы он выглядел ближе к кнопке, в зависимости от ее состояния мы показываем или скрываем навигацию на меньших экранах просмотра. Сложность заключается в том, что внутри навигации есть тег привязки, указывающий на раздел контактов внутри нижнего колонтитула. Нажатие на этот якорь перемещает вас в нижний колонтитул, но также должно закрыть навигацию. Возможно, это можно было бы сделать и без JavaScript, каким-то образом добавив дополнительную метку для флажка и привязку к нижнему колонтитулу вместе, но это звучит как слишком много, поэтому 10 строк JavaScript для решения проблема.
Путешествие
Я очень рад увидеть этот проект вживую. Это был удивительный опыт: начать с производительного и быстрого решения, добавить в смесь несколько слоев кода и просто следить за тем, чтобы не сломать его. Я не могу сосчитать, сколько раз я видел заявки на улучшение производительности в проектах, многие из которых имели огромные проблемы с десятками запросов: CSS, шрифты, значки, фрагменты JS… Ах, запросы — вы видели окончательный вариант? результат? Один запрос документа — 31кб и изображения, и все. Внутри этого документа находится весь текст, метаданные, шрифт, более 1000 строк CSS и 40 строк JavaScript.
Даже в таком простом сайте, а может из-за такого простого сайта приходится концентрироваться на всех деталях, обращая внимание на каждое принятое решение. Выбор решения для параллакса причинил мне боль… Я думал, что в наши дни реализовать производительность намного проще. Это заставило меня добавить пункт в список задач: Перепроверить, нет ли в сообществе элегантного, поддерживаемого решения для параллакса. Если их нет, сделайте это, чтобы никто другой не потерял ночь на проверку устаревших библиотек. Safari продолжает ломать каждую немного более сложную вещь, которую я создаю, мне нужно было переписать CSS для параллакса, чтобы Safari оставался довольным… Ленивая загрузка изображений отключен из-за каких-то странных проблем в этом очень популярном браузере… какое-то время это будет преследовать меня. Но! Никаких обид, я надеюсь однажды написать об этом историю успеха.
Работать в такой конфигурации — одно удовольствие, и я могу только пожелать или подтолкнуть со своей стороны больше проектов: возможно, вам не понадобится корпоративное решение для вашего следующего проекта. Будь проще!
