8 заметок с тегом

веб

Выбирайте правильные инструменты

Разработчики, которые имели медленный сайт или не имели его, с популярностью React переводят сайты на Gatsby, а потом радостно пишут в Твиттер о 90-100 в Lighthouse и рекомендуют перенести старый WordPress-блог на новый JS-фреймворк. И даже те, кто имел статический сайт на HTML с 70 в Lighthouse, переписывают его на Gatsby, который оптимизирует сайт за них и выдает хорошие цифры в тестах.

Проблема в том, что вам скорее всего не нужен JavaScript для личного блога. Gatsby крут плагинами, но всё, что нужно от него, — генерация страниц из Markdown. Клиент не хочет видеть JS-бандл. Gatsby нужен для сложных сайтов с анимациями и интерактивом, например, для этого блога — он издает звуки, персонажи двигаются, а примеры кода запускаются на месте. React с его JSX, где интерактив легко встраивается в текст, идеально здесь подходит, а еще у Gatsby хорошая поддержка MDX, чтоб делать такое же с Markdown.

Ситуация описывается так:

@twanttobealighi: реакт делает сложное простым, а простое невозможным

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

Возьмите полную статику: Eleventy, — используйте плагины для сжатия кода и картинок или напишите свой код в десять строк и дайте клиенту минималистичный набор HTML + CSS. Это тоже даст 100 в Lighthouse, но ниже буду написаны цифры, более глубоко описывающие скорость загрузки: первая отрисовка, время до взаимодействия с сайтом, самый крупный элемент сайта, — которые будут в разы меньше, а в сложных тестах вы наберете лучший результат.

А пишу я это потому, что у меня тоже сперва была полная статика с Jekyll, а потом я поддался количеству плагинов в Gatsby и автоматической оптимизации изображений. Но недавно я переписал сайт на Eleventy за три дня. Выбирайте правильные инструменты.

Забудьте про гамбургер: горизонтальный скроллинг

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

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

Плюсы:

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

Сделал себе такое меню на новом сайте Пост Величин:

Пост Величины на телефоне
Пост Величины на телефоне

А еще вот несколько примеров:

Тинькофф и ГитхабГугл и Горбунов
Меню на сайте Журнала Тинькофф. Я вдохновлялся именно им, когда делал себе для Величин
Меню на сайте Журнала Тинькофф. Я вдохновлялся именно им, когда делал себе для Величин
Меню в поиске Гугла
Меню в поиске Гугла
Меню у Гитхаба. При этом от гамбургера не избавились
Меню у Гитхаба. При этом от гамбургера не избавились
Меню на сайте Бюро Горбунова
Меню на сайте Бюро Горбунова
Автоматическая темная тема для сайта

Не буду доказывать, что темная тема нужна, просто вот:

  1. Apple: темная тема в iOS
  2. Apple: темная тема в macOS
  3. Google: темная тема в Material Design
  4. Microsoft: темная тема в Windows

Темные темы пришли в веб. Теперь Safari, Chrome, Firefox и другие популярные браузеры поддерживают темную тему для сайта. Используем это. Сейчас расскажу как сделать темную тему, чтоб никому не было стыдно.

Светлый и темный экраны. Попробуйте открыть эту картинку в темноте — второй вариант будет смотреться лучше
Светлый и темный экраны. Попробуйте открыть эту картинку в темноте — второй вариант будет смотреться лучше

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

Блог был оформлен в светлых тонах с яркими блоками — ссылками на статьи. Легко шагать, потому что фон не цветной. Начну с логики, чтоб понять, как реализовывать.

Логика

Есть: светлая тема
Будет: основа для работы темной темы

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

CSS

Есть: обычный CSS-код
Будет: переменные, чтоб менять всё в одном месте

Идем в CSS и понимаем, что давно надо перейти на переменные. Прописываем правила с переменными и потом их применяем:

:root {
/* Создаю переменные с цветами для документа (root) */
--background-color: #fafafa;
--foreground-color: #121212;
--accent-color: #ff5252;
}

div {
color: var(--foreground-color);
background-color: var(--background-color);
}

a:hover {
color: var(--accent-color);
}

Гугл:

“Use dark grey – rather than black – to express elevation and space in an environment with a wider range of depth. Apply limited color…”

— уже давно рассказал, что выбирать черный (#000000) для темной темы не стоит — лучше выбрать темно-серый. Устанавливаем цвета для темной темы. Если их больше, чем три — фон, текст и акцентный, — то просто менять местами не подойдет, надо изучать поведение цвета.

@media screen and (prefers-color-scheme: dark) {
:root {
/* Перезаписываю переменные с цветами для темной темы */
--background-color: #121212;
--foreground-color: #fafafa;
}
}

Работаем с цветом

Есть: обычная смена цветов местами
Будет: замена цветов на другие

Акцентные цвета надо поменять на более светлые, чтоб контраст правильно соблюдался. Но темная тема не только про замену цветов. Гугл советует делать поверхности, которые логически выше, ближе к пользователю светлее. Для того, чтобы расположить элемент одного цвета с фоном, надо задавать рамки.

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

Темная и светлая темы в блоге
Темная и светлая темы в блоге

Для проверки контраста в Chrome сделали приспособление века в инструментах разработчика: открываем инструменты разработчика (Ctrl|Cmd + Shift + I), включаем наведение (Ctrl|Cmd + Shift + C), наводим на текст и видим сразу маленькое окошко, где показана контрастность. Если в стилях нажать на цвет элемента, то появится точная контрастность и линии, помогающие ее настроить.

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

Суммируя: переменные, правильные цвета, медиа-стили.

Дизайнерские штуки и логика на моем сайте

Решил рассказать о всяких мелочах в дизайне сайта. Некоторые штуки я подглядел в других блогах, например у Бирмана и в его Эгее, и переделал под свой блог.

Штука с заголовками

Заголовок показывает иерархию. Если я нахожусь на главной странице, заголовок «Давид Кистаури», если в блоге и списке проектов: «Давид Кистаури. [раздел]», дальше продолжается через точку. Например у раздела тегов в блоге заголовок «Давид Кистаури. Блог. Теги».

Это правило не соблюдается для шаблонных страниц: статей, страниц проектов, разделов для каждого тега, потому что писать «Давид Кистаури. Блог. Как использовать ВС Код, если ты пишешь текст» — издевательство над читателем, особенно тем, кто заходит с телефона.

Штука со ссылками

Ссылки в блоге — первые две можно нажать, третью — нет, потому что мы и так находимся в блоге, а еще две — дополнительные: у блога есть теги и на него можно подписаться
Ссылки в блоге — первые две можно нажать, третью — нет, потому что мы и так находимся в блоге, а еще две — дополнительные: у блога есть теги и на него можно подписаться

Над заголовком всегда стоят ссылки в блоках. Они делятся на два типа: постоянные — primary — и непостоянные — secondary. Постоянных три: главная страница, страница с проектами и блог — они представляют разделы сайта; при добавлении нового раздела добавляется и ссылка.

Постоянные ссылки

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

Непостоянные ссылки

Они имеются не всегда и зависят от страницы. В блоге две ссылки: на список тегов и РСС. На странице проекта одна ссылка — на сам проект. Такие ссылки имеют дополнительный фоновый цвет, а текст по стандарту синий.

При ховере постоянных ссылок заливается фон, непостоянных — текст. При фокусе у ссылки появляется внутренняя рамка, заданная через тень.

Расположение непостоянных ссылок

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

Про дизайн кирпичей я рассказывал в канале в Телеграме. Теги я расположил именно так, потому что у них есть связь — в одной статье может быть несколько тегов и их может быть много; чаще заходят не за опеределенным тегом, а для полного списка тем, на которые я пишу.

Ссылки на статьи я расположил по отдельности, потому что каждая статья — отдельная единица контента и слепливание их делает поиск тяжелым. Да и для кирпичного дизайна длинные заголовки статей не подходят — длинных кирпичей я не видел.

Штука с линейками

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

Штука с темной темой

Темная тема нужна. А если продукт — блог, в котором статьи могут быть длинными, то хватит мучать читателя-сову яркими цветами. Задача не просто поменять белый фон на черный, а подобрать цвета, чтоб в темной версии также были видны и различимы все элементы — работали тени.

Яркие цвета не должны занимать большую площадь и надо правильно подменять элементы, фон и цвет текста. В списке постов я убрал цветной фон у блоков и задал его заголовку — мало яркого, больше темного. Больше про темную тему я расскажу в следующей заметке.

Вдохновение

Пока я делал этот сайт, много анализировал, думал, исследовал и подглядывал. Со всего веба набрал по чуть-чуть и добавил от себя. Тут самые яркие источники крутого дизайна.

  1. Дизайн АйОС — скругления и стиль кнопок в целом может напоминать элементы АйОС. Шрифт тоже подобный.
  2. Портфолио Сергея Сурганова — центр сайта — минимализм в портфолио — позаимствован у Сергея Сурганова. У него еще есть монолог, где он рассказывает, почему такой принцип крут и почему картинки не обязательны.
  3. Блог Максима Ильяхова — я включил сюда именно блог Ильяхова, но он написан на Эгее, поэтому источником является именно дизайн движка, но так легче показать пример и я вдохновился именно его блогом. Вся типографика: отступы, размеры заголовков, длина строки и много другого по тексту изначально было взято оттуда, потом дорабатывалось и изменялось.
  4. Блог Аруна Веркатесана — Изначально мой блог был с квадратами, у которых были картинки. Было похоже на это решение. Картинки пережили изменения только в разделе с проектами, но яркие цвета по разделам остались.
Учимся смотреть на UX по-другому у Твиттера

Недавно Твиттер изменили в веб версии иконку поиска на хэштег. Это было не лучшее решение.

  • Смена иконки на какую-либо другую всегда вызывает сложности — приходится привыкать, особенно если изменения происходят в соц. сети с миллиардной аудиторией.
  • Поиск во всех интерфейсах давно ассоциируется с иконкой лупы, поэтому менять иконку на что-либо другое ради индивидуализма не круто.

Но у Твиттера была другая причина. Изначально домашняя страница всегда была устроена в хронологическом порядке и показывала твиты только тех, на кого пользователь подписан. Потом Твиттер решили использовать алгоритмы, но пользователям это не понравилось и они начали переключать ленту обратно на хронологический порядок.

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

Но при этом у Твиттера все еще на каждой странице есть отдельное меню поиска, поэтому логичным выглядит только выбор: или лента по интересам или меню с поиском — мешать не стоит.

Сейчас у Твиттер так
Сейчас у Твиттер так

Сейчас они поступили так: на широких экранах есть иконки с подписями и поиск подписан словом и обозначен иконкой-хэштегом, а на узких экранах, где подписей нет, иконка меняется на лупу. Но между двумя этими состояниями есть промежуточное, где подписей нет, но иконка обозначена хэштегом.

Мастер Букет 2

Сперва я расскажу про историю создания и развития сайта Мастер Букета до нынешнего времени:

Давно я взялся за проект Мастер Букет, задача: сайт и начальная раскрутка соц. сетей. Сайт писал долго: не было контента, ломался ноутбук, переписывал заново, ждал заказчика с деталями… Спустя полтора месяца мы запустили сайт. Мне сайт нравился: я полюбил Гельветику, цвета, расположения элементов и то, что довел проект до релиза один.

Сразу после запуска я начал писать обновление — адаптация, новый контент, данные в JSON. Это были первые и последние шаги в PHP. Я узнавал новое — добавлял на сайт. Обновление так и не вышло.

Новый, добрый Мастер Букет заменяет старый и злой. Что изменилось: я избавился от зависимостей: Bootstrap и jQuery, изменил дизайн: новое положение элементов, оптимизировал.

Как избавлялся от мусора

Больше не будет jQuery. Он оказался тяжелее, чем чистый JavaScript. Исправлять ошибки сложно, потому что опытные разработчики пишут на ванильном JavaScript и советов не дадут. Много кода не понадобилось: вывод букетов из файла JSON и пару фишек с прокручиванием и появлением.

Раньше много элементов привязывалось к двум библиотекам: WOW и Animate. Еще две зависимости, чтоб элементы выезжали с анимацией. Это пишется и без библиотек. Кастомизации больше — веса меньше.

Написано без Фреймворков. Важно помнить про чистый HTML и CSS. Нет Джаваскрипта — есть скорость.

Размер зависимостей Мастер Букета: Animate, WOW, jQuery
Размер зависимостей Мастер Букета: Animate, WOW, jQuery

Перенес все на CSS Grid

Сайт состоял из колонок Bootstrap. Когда я писал его, не знал о CSS Grid. Запросто переписал. Больше колонок, строки, расстояние между модулями. Кастомизации больше — веса меньше.

Как редизайнил

Я частично прочитал книгу “Модульные системы в графическом дизайне”. Вдохновился осмысленностью и аккуратностью, отказался от налезающих элементов. Верстка стала компактнее: на мобилках стартовый экран стал короче, теперь в строку помещается четыре букета вместо трех.

Элементы теперь «висят», больше нет прибитых картинок, видео или карт. Расстояние снаружи и внутри сетки одинаковое.

Как ускорял

Пришлось сильно сжать картинки, убрать видео и карту. От .webp картинок отказался, потому что они еще больше разрастались, чем сжатые JPEG. Сайт грузится быстрее: даже спиннер загрузки не понадобился. Во второй раз грузится моментально, но я не добавлял поддержку PWA. Еще убрал эмоджи по запросу клиентов и сделал простенькую 404 страницу, хотя на одностраничнике не нужна, — традиция.

Результаты PageSpeed Insights по скорости
Результаты PageSpeed Insights по скорости

Ссылка: masterbuket.now.sh

Почему надо дать Файерфоксу шанс

Используешь Хром? У меня плохие новости для тебя. В эру браузерной монополии мы должны оглядываться на другие браузеры, давайте сделаем это.

Ситуация

Гугл оккупировал весь веб Хромом. У него больше половины всех юзеров.

Инфографика популярности браузеров на всех платформах
Инфографика популярности браузеров на всех платформах

Сафари на втором месте только из-за популярности АйОС и МакОС.

Обновление Файерфокса

Сейчас большинство разработчиков выбирают между Хромом и Файерфоксом. В 2017 году Мозилла выпустила обновленную версию своего браузера — Файерфокс Квантум с новыми настройками внешнего вида, улучшенной поддержкой расширений, приватностью и, что самое главное, скоростью. В два раза быстрее, чем старый Файерфокс и быстрее, чем Хром.

Сравнение скорости Файерфокса Квантум и старого Файерфокса
Сравнение скорости Файерфокса Квантум и старого Файерфокса

Файерфокс ипсользует собственный движок с новым Квантум ЦСС и Квантум DOM рендерингом. Много объяснений в блоге Мозиллы. Хром использует больше оперативной памяти, чем Файерфокс. Также, Файерфокс имеет много полезных фишек, как отображение ненужных ЦСС правил и поддержка prefers-color-scheme: dark медиа правил, которые у Хрома только в бете.

Демонстрация темного режима в новом Файерфоксе
Демонстрация темного режима в новом Файерфоксе

Боитесь насчет расширений? Сейчас большинство разработчиков пишут расширения для одинаково Хрома и Файерфокса.

Последняя причина — антимонополия. Надо давать шанс другим компаниям, которые меньше и тогда станет заметно, как развивается фронтенд. Перенесите все свои закладки в Файферфокс на неделю и попробуйте его.

Разработчик? Замени это сейчас

До сих пор используешь это? Я отказался и теперь более продуктивный как фронтенд разработчик. Список вещей, которые тебе надо заменить сейчас.

ВС Код — редактор, который я теперь использую
ВС Код — редактор, который я теперь использую

Список инструментов, которые я больше не использую, и чем я их заменил:

  1. Atom → Sublime Text → VS Code. Я начал кодить с Codecademy (они первые в гугле). Мой первый HTML код я скопировал в Atom и сохранил на компьютер. Я выбрал его, потому что давно, когда искал текстовый редактор, натыкался на Атом и в описании у него было что-то связанное с кодом. Потом я перешел на Sublime Text и он был хорош. Я написал в нем много вышедших и не вышедших сайтов. Потом я услышал о VS Code — он был для меня слишком сложным после Sublime, но я полностью перешел.
  2. Beautify → Prettier. Форматировать код вручную очень тяжело, поэтому я решил автоматизировать этот процесс. Сперва использовал расширение Beautify, но потом перешел на Prettier с его конфигурационными файлами.
  3. Стандартный моноширинный шрифт → Fira Code. Шрифт даже для разработчика очень важен. Раньше я не обращал на это внимания и однажды я увидел в твиттере один интересный шрифт с новой функцией для меня — лигатурами. Это был Fira Code. Сейчас он очень популярен.
  4. jQuery → чистый JS. Я начал писать на JavaScript с туториала по jQuery на ютубе. Там говорилось, что jQuery чище, меньше, легче и позволяет решать задачи в несколько строк, которые в JavaScript пишутся в 200. Но после я понял, что у чистого JS больше поддержки, он чище, легче и занимает меньше места со стандартной поддержкой браузера.
  5. CSS → SASS. Просто нравится синтаксис родитель { ребенок {} }.
  6. Jekyll → Gatsby. Gatsby более прогрессивен и имеет много оптимизация из коробки.
  7. Lighthouse → PageSpeed Insights. Просто более стабильно.

Статья будет дополняться вечно.