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

девелоперу

Почему ссылки должны быть ссылками

Когда кнопка открывает новую станицу, самое тупое, что может быть, это сделать её через <button> или <input>. Если меню состоит из таких кнопок, то страницы нельзя открыть в новой вкладке.
Делайте кнопки, открывающие новые страницы, ссылками через <a>, не лишайте пользователей возможности плодить табы — они это очень любят.

2017   девелоперу   как правильно

Про аутлайны

Я думаю, что логично для начала разделить проблему на две сущности.

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

Посмотрите как это делают ребята из Эппла у себя на сайте:

Аутлайн можно увидеть только при фокусе табом, но не по клику.

Вторая сущность — визуальная. Синяя рамка не назойливый элемент. Когда решена первая сущность, то вторая уже почти не раздражает. Если по задумке подсветка фокуса должна выглядеть иначе — просто сделайте как нужно. Тупо ожидать от браузера, что он угадает ваши пожелания.

Я пользуюсь решением Олега Корсунского — скрипт Фокус фикс
Вот что он сам пишет о проблеме у себя в блоге: Про аутлайны

Это часть заметки с гита

2017   девелоперу   дизайнеру   как правильно
2017   девелоперу   дизайнеру   как правильно

Всем срать на то, что внутри, кроме тех, кто сделал то, что внутри

Этот текст посвящается господам девелоперам.

Такая штука, ребята. На ваши холивары по поводу плохого кода всем насрать, кроме вас.

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

Подумайте сами, вы никогда не заморачиваетесь над тем как устроен Фэйсбук. Как девочка с тортом не думает о том, из чего он сделан, главное, — торт вкусный. Студенту не важно как работает его микроволновка. Никто не думает о том как едет электричка.

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

Люди никогда не увидят того, чего они не увидят. Поэтому не порите дуру.
Если есть способ сделать быстрее и лучше не в угоду фэншую — делайте!
Тут не по БЭМу, но уже работает — похер на БЭМ — продолжайте. Вы испекли торт, но он отличается от рецепта — торт вкусный? Отлично! Остальное не важно.

Тут подтянулись ребята со стены и говорят, что «такой говнокод тяжело поддерживать». Что же, учитесь сразу писать хорошо, а пока учитесь пусть ваше приложение решает задачи пользователей, а не фей разработки.

2017   девелоперу   дизайнеру   как правильно

Как посчитать пропорциональный ресайз без фотошопа

Перед дизайнерами часто встаёт задача подсчитать соотношение сторон при ресайзе. Каждый раз открывать фотошоп — неудобно. Вручную гораздо быстрее. Например, у меня есть размер 167 × 155. Если пропорционально уменьшить 167 до 150, сколько получится у 155?

Делим неизвестную сторону на известную — получаем их соотношение:
155 / 167 = 0.92814

Соотношение умножаем на известный размер — получаем неизвестный и округляем до целых:
0.92814 × 150 = 139
Округление делается к ближайшему целому.

А наоборот? Пожалуйста:
167 / 155 × 139 = 150

«Мне ваши формулы никогда в жизни не понадобятся!» 😫

2017   девелоперу   дизайнеру   как правильно   полезное

Прыгающее меню

В мобильном хроме если скролить страницу вниз, то адресная строка пропадает, а при скроле в верх — появляется.
Это бесит. Некоторые ребята подхватили идею и заставили меню сайта вести себя точно так.
Теперь это бесит² × на высоту шапки.

Не надо страдать хернёй — сделайте гамбургер и успокойтесь.

2017   девелоперу   дизайнеру   навигация   сайты   херня