Блог

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

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

Сейчас же понял, что так информация не сохраняется и не усваивается. Лучше два месяца работать с книгой на 50 страниц, чем за неделю прочитать 500.

Еще нужно отметить, что с книгой надо именно работать, а не просто ее читать. Работать значит:

• выполнять упражнения,
• выделять фрагменты,
• писать конспекты и мысли,
• останавливаться на непонятном и тщательно изучать.

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

Кстати, советую прочитать Book Of Proof. Круто про математику с заданиями, чтоб можно было поработать.

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

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

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

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

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

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

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

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

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

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

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

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

Есть замечательная библиотека date-fns, которая заменяет Moment.js в работе с датами в Джаваскрипте. Я ее использую в блоге для отображения дат заметок. Недавно вышла вторая версия, которая в три раза больше первой. На самом деле, раньше библиотека была «слишком-сумкой», которая подгружала вместе с собой все свои функции: локализацию, форматирование, дистанцию, форматирование дистанции, проверку на нынешний день, неделю, месяц, год, будущее или прошлое и т. д. А сейчас библиотека стала маленькой, потому что можно выбирать только нужные функции — выбирать только нужные карманы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как ускорял

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

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

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

Подписчикам иногда надоедает рассылка, они захотят отписаться от рассылки и делать этот процесс сложным = терять клиента продукта. Я отписался от рассылки Спотифая, но пользоваться сервисом продолжаю. Если тяжело отписаться от рассылки, клиент уходит от компании навсегда.

Отличный сервис — Стэковерфлоу (1)

Нажимаю кнопку отписки в Гмаиле наверху.

Хороший сервис — Спотифай (3)

Нажимаю кнопку отписки в Гмаиле наверху → Попадаю на сайт → Убеждаюсь, что меня отписали.

Плохой сервис — Чекио (6)

Ищу кнопку отписки внизу → Нажимаю → Попадаю на сайт → Подтверждаю, что хочу отписаться → Отключаю еще пять маленьких чекбоксов внизу → Подтверждаю еще раз.

Ужасный сервис — Майкрософт Инсайдерс (13)

Ищу кнопку отписки внизу → Нажимаю → Попадаю на сайт с документацией по отписке → Ищу ссылку → Нажимаю → Попадаю не туда → Возвращаюсь → Нажимаю на другую ссылку → Попадаю на главную страницу → Вхожу под своим аккаунтом → Возвращаюсь → Нажимаю на предыдущую ссылку → Убеждаюсь, что меня отписали.

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

Видел еще, где вообще нет кнопки отписки, но такие надо сразу блокировать.

После прочтения больше 50 заметок об искусстве письма, на меня напало вдохновение и захотелось все документировать. Настроил редактор и начал писать. Три раза заводил дневник по дням и документировал происходящее, верил в пользу: оценивать день, смотреть на ошибки и бесполезные дела, — но через десять заметок переставал писать. Я думал, что происходит слишком мало или просто забывал писать. А потом…

Внимание, самый крутой, эффективный, полезный, действенный способ писать, эксклюзивно и только тут!

Открываешь редактор, создаешь новый файл, пишешь:
— Отредактировал текст для сайта.
— Прочитал две главы из книги “Модульные системы в графическом дизайне”.
— Посмеялся с мемов.
— Прочитал пять глав Ководства Лебедева.
Сделал что-то — написал «Сделал что-то».

Затраты на такое ведение заметок

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

Файлы храню в формате .txt, поэтому они занимают максимум один килобайт. Базу бэкаплю, только что это сделал.

Каждый второй разработчик использует Visual Studio Code (из результатов опроса Стэковерфлоу). Я перешел на ВС Код с Саблайм Текста год назад и теперь влюблен в новый редактор — высокая функциональность: лайв запуск сайтов, дебаг, гит, терминал, — минималистичный дизайн, ежемесячные обновления и много другого. Проблема появляется, когда мне надо написать простой текст, как этот, для блога. Здесь пригодятся некоторые фишки, для настройки.

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

Изменения, которые я внес, отключают функции и прячут элементы:

1. Скрыл верхнюю панель с кнопками. Я делаю это везде, где могу.
2. Скрыл боковую панель с большими кнопками.
3. Скрыл нижнюю статусную панель.
4. Отредактировал название окна, чтоб не захламлять. Оставил только имя файла и свои символы.
5. Спрятал вкладки. Они все равно доступны по сочетаниям Ctrl + Tab в Виндоус и ⌘ + ⌥ + Tab в Маке.
6. Внес изменения в редактор: отключил лишние подсвечивания, убрал номера строк, отключил мини-карту и т. д.
7. Поработал со шрифтом: не стал убирать моноширинный, но изменил размер.

Применять настройки можно в соответствующем меню: иконка настроек в левом нижнем углу → иконка {} в правом верхнем углу. Сохраните свои нынешние настройки, может быть, вы захотите вернуться, и вставьте эти:

{
  // Окно
  "window.menuBarVisibility": "toggle", // Скрываю меню бар.
  // Доступен по нажатию Alt.
  "window.title": "${dirty}${activeEditorShort} ⚡ >_<",
  // Изменяю название окна

  // Редактор
  "editor.cursorSmoothCaretAnimation": true,
  // Включаю плавную анимацию движения курсора
  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
  // Моя настройка шрифтов. Можно вставить свою.
  // Fira Code <3
  "editor.fontLigatures": true, // Включаю лигатуры.
  // Работает только, если ваш шрифт поддерживает их.
  "editor.fontWeight": "500", // Меняю ширину шрифта.
  // Люблю жирные, но для большого текста неудобно.
  "editor.fontSize": 16, // Меняю размер шрифта.
  // Поставил на 16, чтоб побольше.
  "editor.lineNumbers": "off", // Убираю нумерацию строк.
  "editor.wordWrap": "on", // Включаю перенос слов.
  "editor.minimap.enabled": false, // Убираю мини-карту.
  "editor.renderWhitespace": "none", // Убираю символы,
  // которые отображаются вместо пробелов.
  "editor.renderIndentGuides": false, // Убираю линию,
  // которая помогает определять вложенность в коде.
  "editor.renderLineHighlight": "none",
  // Убираю подсветку линий.
  "editor.overviewRulerBorder": false,
  // Убираю рамку у скроллбара.
  // Попробуйте включить и посмотрите на скроллбар справа.
  "editor.hideCursorInOverviewRuler": true,
  // Прячу отображение курсора на скроллбаре.
  "editor.folding": false, // Убираю функцию вложенности.
  // Если функция включена
  // слева можно навести мышкой и увидить иконки.
  "editor.occurrencesHighlight": false,
  // Убираю другую подсветку.
  // Все равно работает при выборе слов.
  "editor.glyphMargin": false,
  // Убираю место под иконки редактирования и дебага.

  // Воркбенч
  "workbench.tree.renderIndentGuides": "none",
  // Убираю линию,
  // которая помогает определять вложенность в папках.
  "workbench.editor.showTabs": false, // Отключаю вкладки.
  // Отображается только активная на всю ширину.
  "workbench.activityBar.visible": false,
  // Убираю панель с большими иконками слева.
  // Можно получать доступ к вкладкам по сочетаниям клавиш.
  "workbench.editor.showIcons": false,
  // Убираю иконки из вкладок.
  "workbench.statusBar.visible": false,
  // Убираю нижнюю панель.
  "workbench.colorTheme": "Material Theme Palenight",
  // Ставлю кастомную тему.
  // Устанавливается из магазина расширений.
  "workbench.iconTheme": "material-icon-theme",
  // Ставлю кастомную тему иконок.
  // Устанавливается из магазина расширений.
  "workbench.colorCustomizations": {
    // Ставлю кастомный цвет акцента.
    "activityBarBadge.background": "#FFA000",
    "list.activeSelectionForeground": "#FFA000",
    "list.inactiveSelectionForeground": "#FFA000",
    "list.highlightForeground": "#FFA000",
    "scrollbarSlider.activeBackground": "#FFA00050",
    "editorSuggestWidget.highlightForeground": "#FFA000",
    "textLink.foreground": "#FFA000",
    "progressBar.background": "#FFA000",
    "pickerGroup.foreground": "#FFA000",
    "tab.activeBorder": "#FFA000",
    "notificationLink.foreground": "#FFA000",
    "editorWidget.resizeBorder": "#FFA000",
    "editorWidget.border": "#FFA000",
    "settings.modifiedItemIndicator": "#FFA000",
    "settings.headerForeground": "#FFA000",
    "panelTitle.activeBorder": "#FFA000",
    "breadcrumb.activeSelectionForeground": "#FFA000",
    "menu.selectionForeground": "#FFA000",
    "menubar.selectionForeground": "#FFA000"
  },

  // Breadcrumbs
  "breadcrumbs.enabled": false, // Убираю Breadcrubms.
  // Полоска над редактором со вложенностью.

  // Языки
  "markdown.preview.fontFamily":
  "Inter, Helvetica Neue, Helvetica, sans-serif",
  // Меняю шрифт превью маркдауна.
  // Inter <3

  // Эксплорер
  "explorer.openEditors.visible": 0
  // Убираю список активных файлов.
}

Многие функции все еще можно получить из Командной строки ВС Кода, Ctrl + Shift + P