3 заметки с тегом

блог

Подписка по РСС

Ссылка на РСС: davidkistauri.ru/blog/rss.xml
Ссылка на Джейсон Фид: davidkistauri.ru/blog/feed.json

Обновлено 27 мая 2020. Добавил Джсон Фид.

У меня в блоге нет никаких крутых систем подписки, просто есть РСС и Джейсон Фид ленты. РСС — крутая технология, которая выдает ссылку на один файл для читалки. Файл обновляется системой и ничего делать не надо. Джейсон Фид — аналог РСС, он более современный, потому что хранит данные в формате JSON. Но для читателя различий нет.

Чем удобны РСС и Джейсон Фид? Вместо утренней и вечерней проверки всех любимых сайтов, можно добавить их один раз в программу, чтоб она собирала все в одном месте с одинаковым привычным интерфейсом для чтения. Ускорение x10.

Для лент нужна читалка — программа, которая умеет читать РСС-файлы или Джсон Фид (таких пока меньше) и выдает все в общую ленту. В ней чаще всего можно настроить интерфейс под себя. Для читалки создается аккаунт, например Фидли, который запоминает все и синхронизирует ленту между устройствами.

Краткая инструкция:

  1. Открываете читалку
  2. Ищите как добавить источник
  3. Вписываете ссылку на этот сайт

Некоторые читалки не умеют подгружать РСС или Джсон Фид по ссылке на сайт. Для них нужна прямая ссылка на РСС или прямая ссылка на Джсон Фид

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

А это я читаю Грубера в читалке Newsflow для Windows
А это я читаю Грубера в читалке Newsflow для Windows
Автоматическая темная тема для сайта

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

  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. Блог Аруна Веркатесана — Изначально мой блог был с квадратами, у которых были картинки. Было похоже на это решение. Картинки пережили изменения только в разделе с проектами, но яркие цвета по разделам остались.