Den’s Blog
200 subscribers
164 photos
1 video
226 links
Amsterdam-based photographer and designer @dentalala. Follow for photo adventures and glimpses of city life!
Download Telegram
Channel created
Хорош ли дизайн Airbnb? Да, божественен.

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

Вот когда-нибудь через годик другие подписчики удивятся, покрутив эти сообщения на экран вверх, а там 2017.

— Ты что всё это время делал, ленивая жопа?
Свой текст

Чем больше сил вложено в работу, тем более ценной она кажется.

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

Как бороться?

— Просить кого-нибудь прочитать текст, перед тем как публиковать.
— Подождать день-два, пока эмоциональное отношение не остынет.
— Все время спрашивать себя: а нет ли тут моего искажения.
Вчера сделал иконку Телеграма для macOS на замену стандартной. Почему-то для некоторых программ дизайнеры делают иконки, вписанные в круг. Иногда это можно оправдать масштабом программы. iTunes — музыка, кино, программы, подкасты и ещё куча всего. iBooks — книги, журналы, комиксы, брошюры. Safari — окно в мир. Но если ты мессенджер, нафиг тебе иконка в круге? В случае с Телегой форма знака получилась вполне устойчивая. Меняйте стандартную в круге на мою без круга.

https://dribbble.com/shots/4405702
1. Скачайте icns по ссылке,
1. Правый клик по Telegram․app → Свойства,
2. Перетащите icns поверх иконки в свойствах,
3. Перезапустите Телегу.
 
Если вы когда-нибудь встречали на сайтах красивую навигацию по каталогам, похожую на FTP, например, как The Panic File Museum или Louie Mantia's Reserve, спешу обрадовать: сделать такую же довольно просто.

1. Включите directory listing для нужного вам каталога в nginx:
http://nginxlibrary.com/enable-directory-listing/

2. Оформите листинг каталогов с помощью CSS:
https://www.linickx.com/css-styling-nginx-directory-listings

Теперь на вашем сайте можно давать ссылку на раздел Downloads, не создавая при этом специальных страниц. Просто заливайте файлы в нужный каталог, всё автоматически красиво покажется посетителю.
@CitoyenMarat скинул ссылку, которой грех не поделиться. В огромной технической статье рассказывается, как устроены разные форматы изображений, способы их сжатия и оптимизации: https://images.guide

Там про JPEG, PNG, WebP, GIF, MozJPEG и ещё кучу всего малоизвестного. Про то, как готовить картинки для веба и как они обрабатываются браузерами. Приводятся полезные инструменты и техники. Я, как большой любитель оптимизации, хочу рассказать о своём флоу и трёх инструментах.

ImageOptim
https://imageoptim.com
Известное многим приложение и API для оптимизации картинок без потери качества. У меня выбраны там все возможные способы, а скорость выставлена на «безумную». Я могу потерпеть долгую процедуру, лишь бы результат был безупречным. Скармливаю ImageOptim обычно PNG, JPEG и GIF, пропуская через несколько циклов (зачастую повторные оптимизации тоже удаются), — любую растровую графику, которая будет использоваться внутри приложений или на сайтах.

SVGOMG
https://jakearchibald.github.io/svgomg
Веб-интерфейс для утилиты SVGO, через который готовлю к использованию вектор. Грубо говоря, из файла вырезаются лишние метаданные, а также уменьшается точность координат (округляются знаки после запятой). Можно смело включать там все параметры, кроме “Sort attrs”. Его советую переключать и смотреть, экономит он или, наоборот, прибавляет вес файлу. Также будьте осторожны с ползунком про степень оптимизации: призумьте превью и двигайте ползунок влево, а когда увидите визуальные искажения кривых, верните на 1 шаг правее — это нужный вам уровень. Почему-то недавно там сломалась опция “Remove xmlns”, теперь она делает картинку белой на превью. Но из SVG-файла можно безболезненно убрать эту штуку руками, на изображение она никак не влияет. SVGOMG не доводит SVG до идеала, после оптимизации я открываю файл в текстовом редакторе и вручную сокращаю #ff0000 → #f00, убираю переносы строк, теги g, defs и прочее лишнее типа fill-rule="evenodd" (формат SVG легко читается).

ShrinkIt
https://download.panic.com/shrinkit
В статье не упоминается утилита, с помощью которой можно оптимизировать PDF, ведь его мы тоже используем как самостоятельный формат и даже в Xcode как графику для iOS-приложений. Это простое окошко, куда перетаскиваешь файл, и он перезаписывается уже оптимизированным.

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