Недавно прошла смешная новость про объединение мы были свидетелями Великого Объединения разрозненных лент. Сообщения из Хабра, Гиктаймса и ещё одного -выкинутого недавно- сервиса ребята из некого стартапа «ТМ» объединили на хакатоне в одну ленту. Большое спасибо им за это, -а то многие уже сами расчехлили огнемёты,- потому что этого многие очень ждали. Теперь мы можем взять их код и -исправить косяки- внести вклад в развитие этого безусловно нужного продукта. Даже по отдельным признакам можно заметить, что он будет развиваться, а значит, наши скромные усилия не пропадут даром. Github.
Что хотелось бы исправить?
1. В ленте много избыточных слов и строк. Понятно, что они это делали вечером на коленке, чтобы поучить react.js, поэтому им было не до оформления подписи в стандартный формат с картиночками. Нам, как ни странно, тоже будет не до этого, но цифры между ненужных слов интересуют. Поэтому уплотнили строчку до блоков, которые видны на КДПВ.
2. Цвета иконок сливаются в один. Нет, конечно, это тренирует сноровку — увидеть различие между похожими буквами «Н» и «М», -и пригодится на охоте на дичь- но работу можно поручить компьютеру — показывать иконки разных цветов. Иконку для манагеров подкрасили в сиреневатый, чтобы по палитре отличалась.
3. Частокол иконок не способствует визуальному разделению. Пусть они будут хотя бы сдвинуты.
4. Стоп, а зачем на циферки целую строку? Давайте-ка мы их сгруппируем влево в гнездо из 5-6 значений (6-е значение — рейтинг статьи, начинает быть видно после 3 суток, внизу существующего списка).
5. В ленте все слова и фразы — заголовки статей. Статьи пишутся крупным текстом. Но юмор ситуации в том, что вся лента — это заголовки. Нет необходимости их выделять.
6. Все слова и фразы ленты — это ссылки. Ссылки необходимо подчёркивать. Их так в школе учили, ставили двойку, если ссылки не подчёркивали. В реальности, см. п. 5, весь «юмор» в том, что все строчки — ссылки. Нет необходимости их отличать от текстов — не ссылок.
7. Бледность названий статей. Это здорово, когда название находится над статьёй, большое, и его бледный цвет не отвлекает от содержания, но виден издалека. Но, см. п. 5 и 6, в списке названий они превращаются в рутинный текст, который, в первую очередь, нужно удобно читать. Делаем его чёрным и обычного размера.
8. Ссылки — ещё в 1-м классе в 1997 году учили, что это текст в HTML, выделенный синим цветом, а иногда даже другим. Всё правильно. Но в вузе ребята скоро узнают правила юзабилити — чем больше активная площадь элемента, тем легче на неё нажать. Поможем им в этом — сделаем из ссылок (которые могут быть короткими и неудобными для нажатия) активные ячейки — ведь место всё равно пустует, не будем создавать пользователю лишнюю работу по прицеливанию на короткие заголовки. Итог:
Куда делось Geektimes-меню?
9. Разделим важные значения разными цветами. Число комментариев — важно. У числа просмотров важен скорее порядок, чем его точное значение. Число просмотров можно сделать менее заметным. А остальные важные значения — Favorities и рейтинг — вокруг иконок.
10. Адаптивность полей. В узких колонках не будет лишним ни один пиксель. Сужаем поля при менее 640.
Вот куда делось меню — оно появляется при наведении мыши на едва заметные тени. Ну, трюк уже знают все пользователи ZenComment. Коричневые ссылки — уже посещённые.
11. Они посчитали невозможным держать гиктаймс-заголовок при ширине менее 1000. Посмотрите решение с наличием заголовка от 320 пикс…
После применения скрипта (как в п.13) ширина слева будет ещё меньше, когда удалятся ненужные буквы.
12. У них сайдбар исчезает при тех же менее 1000 пикс. В то же время, есть ощущение, что вскоре сайдбар будет полноценным, будет иметь все информеры. Поэтому сделаем, как ZenComment, наличие сайдбара при весьма узких окнах. Примерно до 500 его можно держать, но пока блок левых информеров сделан кое-как, а ценности в сайдбаре мало, убираем его, начиная с 570.
13. Есть избыток в словах «минут», «часов», «дней», можно ограничиться «м», «ч», «д», но мы их понимаем, тренировка в выводе склонений русского языка пригодится при сдаче студенческих работ. Но нам тоже лень применять скрипт, поэтому пусть пока повисят. Когда дойдёт дело до скрипта, место -за счёт этого мусора- можно будет сократить.
Теперь от нашего стола — вашему
Мы тут покумекали вечерок и решили.
1. Оформить фид так, как это сделано в новой версии ZenComment, в соответствии с пунктами выше.
2. На HabrAjax тоже поддержать стили. Скрипты никакие пока не задействованы — но ведь и у вас нет ничего — ни авторизации, ни страниц. Скрипты излишни.
3. Поддержать фид и в тёмной теме HabraDarkAge (в планах).
Поначалу хотелось самим сформировать ленту как подгрузку 1-2 других в просматриваемую, с подгрузкой статей. Но оказалось, что у вас нет кроссдоменной отдачи статьи, надо писать код посложнее, на вечер не уложится. А тут — TMFeed. Ну, и…
На что можно обратить внимание?
У проекта (TMFeed) есть будущее — об этом можно догадаться по признакам.
1. Единый Хабр был популярен.
1. Применили современную библиотеку. Знаковое явление на проекте, освещающем современные тенденции ИТ.
2. Внесли в список значений рейтинг статьи, хотя он появляется только на 3-й день. Это значит, что или будет авторизация (и рейтинг у каждой статьи), или многостраничность фида.
3. Намеренная простота оформления. Понятно, что оформление будет доводиться до единства с другими продуктами, но сейчас просто другие приоритеты. Хотя бы, та же многостраничность.
4. Почему сейчас не показыывают аннотации статей? Очевидно, потому что система показа заголовков очень сырая, и было бы очень расточительно отдавать не только заголовки за последние 2 дня. Отдавать меньше — пока система не позволяет, а без текстов аннотаций объём JSON сейчас примерно 25 КБ (немного).
Что хотелось бы увидеть в серверной части в будущем
1. Подгрузку статей и их комментариев прямо в ленту. Тут есть много любителей похакатонить — пригласите пару ребят на выходные оттуда снизу, из комментов — они живо подгонят код.
2. А больше ничего и не надо, всё уже есть. Или будет. Ну, может быть, динамический фильтр по хабами ключевым словам и регекспам. И незакрытое API, чтобы читать верхушку фида и подгружать в ленту каждые 30 с. Далее — сами понимаете, что делать. Ну или ребята из комментов на хакатоне подскажут.
Автор: spmbt
Источник
Взгляд на то, как делать ленту TMFeed
прошла смешная новость про объединениемы были свидетелями Великого Объединения разрозненных лент. Сообщения из Хабра, Гиктаймса и ещё одного-выкинутого недавно-сервиса ребята из некого стартапа «ТМ» объединили на хакатоне в одну ленту. Большое спасибо им за это,-а то многие уже сами расчехлили огнемёты,-потому что этого многие очень ждали. Теперь мы можем взять их код и-исправить косяки-внести вклад в развитие этого безусловно нужного продукта. Даже по отдельным признакам можно заметить, что он будет развиваться, а значит, наши скромные усилия не пропадут даром. Github.Что хотелось бы исправить?
1. В ленте много избыточных слов и строк. Понятно, что они это делали вечером на коленке, чтобы поучить react.js, поэтому им было не до оформления подписи в стандартный формат с картиночками. Нам, как ни странно, тоже будет не до этого, но цифры между ненужных слов интересуют. Поэтому уплотнили строчку до блоков, которые видны на КДПВ.
2. Цвета иконок сливаются в один. Нет, конечно, это тренирует сноровку — увидеть различие между похожими буквами «Н» и «М»,
-и пригодится на охоте на дичь-но работу можно поручить компьютеру — показывать иконки разных цветов. Иконку для манагеров подкрасили в сиреневатый, чтобы по палитре отличалась.3. Частокол иконок не способствует визуальному разделению. Пусть они будут хотя бы сдвинуты.
4. Стоп, а зачем на циферки целую строку? Давайте-ка мы их сгруппируем влево в гнездо из 5-6 значений (6-е значение — рейтинг статьи, начинает быть видно после 3 суток, внизу существующего списка).
5. В ленте все слова и фразы — заголовки статей. Статьи пишутся крупным текстом. Но юмор ситуации в том, что вся лента — это заголовки. Нет необходимости их выделять.
6. Все слова и фразы ленты — это ссылки. Ссылки необходимо подчёркивать. Их так в школе учили, ставили двойку, если ссылки не подчёркивали. В реальности, см. п. 5, весь «юмор» в том, что все строчки — ссылки. Нет необходимости их отличать от текстов — не ссылок.
7. Бледность названий статей. Это здорово, когда название находится над статьёй, большое, и его бледный цвет не отвлекает от содержания, но виден издалека. Но, см. п. 5 и 6, в списке названий они превращаются в рутинный текст, который, в первую очередь, нужно удобно читать. Делаем его чёрным и обычного размера.
8. Ссылки — ещё в 1-м классе в 1997 году учили, что это текст в HTML, выделенный синим цветом, а иногда даже другим. Всё правильно. Но в вузе ребята скоро узнают правила юзабилити — чем больше активная площадь элемента, тем легче на неё нажать. Поможем им в этом — сделаем из ссылок (которые могут быть короткими и неудобными для нажатия) активные ячейки — ведь место всё равно пустует, не будем создавать пользователю лишнюю работу по прицеливанию на короткие заголовки. Итог:
Куда делось Geektimes-меню?
9. Разделим важные значения разными цветами. Число комментариев — важно. У числа просмотров важен скорее порядок, чем его точное значение. Число просмотров можно сделать менее заметным. А остальные важные значения — Favorities и рейтинг — вокруг иконок.
10. Адаптивность полей. В узких колонках не будет лишним ни один пиксель. Сужаем поля при менее 640.
Вот куда делось меню — оно появляется при наведении мыши на едва заметные тени. Ну, трюк уже знают все пользователи ZenComment. Коричневые ссылки — уже посещённые.
11. Они посчитали невозможным держать гиктаймс-заголовок при ширине менее 1000. Посмотрите решение с наличием заголовка от 320 пикс…
После применения скрипта (как в п.13) ширина слева будет ещё меньше, когда удалятся ненужные буквы.
12. У них сайдбар исчезает при тех же менее 1000 пикс. В то же время, есть ощущение, что вскоре сайдбар будет полноценным, будет иметь все информеры. Поэтому сделаем, как ZenComment, наличие сайдбара при весьма узких окнах. Примерно до 500 его можно держать, но пока блок левых информеров сделан кое-как, а ценности в сайдбаре мало, убираем его, начиная с 570.
13. Есть избыток в словах «минут», «часов», «дней», можно ограничиться «м», «ч», «д», но мы их понимаем, тренировка в выводе склонений русского языка пригодится при сдаче студенческих работ. Но нам тоже лень применять скрипт, поэтому пусть пока повисят. Когда дойдёт дело до скрипта, место
-за счёт этого мусора-можно будет сократить.Теперь от нашего стола — вашему
Мы тут покумекали вечерок и решили.
1. Оформить фид так, как это сделано в новой версии ZenComment, в соответствии с пунктами выше.
2. На HabrAjax тоже поддержать стили. Скрипты никакие пока не задействованы — но ведь и у вас нет ничего — ни авторизации, ни страниц. Скрипты излишни.
3. Поддержать фид и в тёмной теме HabraDarkAge (в планах).
Поначалу хотелось самим сформировать ленту как подгрузку 1-2 других в просматриваемую, с подгрузкой статей. Но оказалось, что у вас нет кроссдоменной отдачи статьи, надо писать код посложнее, на вечер не уложится. А тут — TMFeed. Ну, и…
На что можно обратить внимание?
У проекта (TMFeed) есть будущее — об этом можно догадаться по признакам.
1. Единый Хабр был популярен.1. Применили современную библиотеку. Знаковое явление на проекте, освещающем современные тенденции ИТ.
2. Внесли в список значений рейтинг статьи, хотя он появляется только на 3-й день. Это значит, что или будет авторизация (и рейтинг у каждой статьи), или многостраничность фида.
3. Намеренная простота оформления. Понятно, что оформление будет доводиться до единства с другими продуктами, но сейчас просто другие приоритеты. Хотя бы, та же многостраничность.
4. Почему сейчас не показыывают аннотации статей? Очевидно, потому что система показа заголовков очень сырая, и было бы очень расточительно отдавать не только заголовки за последние 2 дня. Отдавать меньше — пока система не позволяет, а без текстов аннотаций объём JSON сейчас примерно 25 КБ (немного).
Что хотелось бы увидеть в серверной части в будущем
1. Подгрузку статей и их комментариев прямо в ленту. Тут есть много любителей похакатонить — пригласите пару ребят на выходные оттуда снизу, из комментов — они живо подгонят код.
2. А больше ничего и не надо, всё уже есть. Или будет. Ну, может быть, динамический фильтр по хабами ключевым словам и регекспам. И незакрытое API, чтобы читать верхушку фида и подгружать в ленту каждые 30 с. Далее — сами понимаете, что делать. Ну или ребята из комментов на хакатоне подскажут.
Автор: spmbt
Источник
Рекомендованный контент