Погляд на те, як робити стрічку 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 с. Далі — самі розумієте, що робити. Ну або хлопці з коментів на хакатоне підкажуть.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.