Филипп Концаренко
1 361
Блоги

Маркер, опросы, цитаты: что мы изменили в редакторе для написания статей

Функции, которые появились в последние месяцы.

Поделиться

В избранное

В избранном

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

Один для всех

Пользователи TJ, vc.ru, DTF и сотрудники «Комитета» используют один и тот же редактор для написания статей — tjournal.ru/writing/. Только помимо стандартных функций для написания текстов моим коллегам доступны и дополнительные инструменты, связанные с редакторской работой — например, отправка push-уведомлений, управление комментариями, отображением материала в соцсетях и так далее.

Еще одно важное отличие — редакции первыми получают новые функции, которые мы запускаем в редакторе. Они их тестируют, дают обратную связь, после чего функция появляется у всех пользователей.

А обновления в редакторе появляются у нас почти каждую неделю. Обычно я рассказываю об этом во внутренней группе для сотрудников «Комитета», потому что чаще всего речь идет об обновлении админских функций.

Однако за ноябрь и декабрь мы выпустили несколько интересных обновлений в редакторе, которые уже доступны всем пользователям TJ, vc.ru и DTF. Пришло время рассказать о них подробнее.

1. Маркер для выделения фраз

Во всех сервисах для написания текстов есть два обязательных инструмента — жирность и курсив. Они есть и в нашем редакторе, только авторы vc.ru, TJ, DTF используют их очень редко.

Например, курсив применяется для выделения примечаний редакции (но не только — прим. ред). Жирность — в интервью для выделения вопросов интервьюера.

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

Жирность для этих целей не подходит — смотрится грязно и отнимает слишком много внимания при чтении. Курсив же, наоборот, даёт пользователю сигнал о том, что это второстепенная информацию, которую можно спокойно пропустить.

Поэтому мы добавили в редактор новый инструмент «Маркер» (сначала хотел заменить им жирность, но вовремя остановили — прим. разумных коллег). Он не отнимает много внимания при чтении, как, например, жирность, но при этом даёт пользователю «выжимку» лучшего из статьи.

«Маркер» — третий инструмент в списке, который появляется при выделении любого слова или фразы. Попробуйте.

Но это не точно

2. Много, очень много разных цитат

Цитаты — один из самых популярных инструментов у всех редакций «Комитета» и читателей. Поэтому только за последние полгода мы обновляли его несколько раз.

Ноябрь мы начали с того, что пересмотрели все примеры использования цитат в текстах на vc.ru, TJ, DTF и выделили три основных типа, которые спроектировали заново.

Мнение

Большое развернутое высказывание спикера. Фотография и имя автора вверху, текст цитаты внизу. Назвали «Мнение», потому что этот тип часто используется для подборок мнений. Выглядит вот так:

Я бросил колледж после первых шести месяцев обучения, но оставался там в качестве «гостя» еще около 18 месяцев, пока, наконец, не ушел. Почему же я бросил учебу?

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

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

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

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

Ничто из этого не казалось полезным. Но десять лет спустя, когда мы разрабатывали первый «Макинтош», все это пригодилось. И «Мак» стал первым компьютером с красивой типографикой. Если бы я не отчислился, я бы никогда не записался на тот курс каллиграфии и у компьютеров не было бы такой изумительной типографики, как сейчас.

Конечно, нельзя было соединить все точки тогда, когда я был в колледже. Но через 10 лет все стало очень, очень ясно.

Еще раз: вы не можете соединить точки, смотря вперед; вы можете соединить их, только оглядываясь в прошлое. Поэтому вам придется довериться тем точкам, которые вы как-нибудь свяжете в будущем. Такой подход никогда не подводил меня, и он изменил мою жизнь.

Стив Джобс
основатель Apple

По центру

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

Компьютер — это самый удивительный инструмент, с каким я когда-либо сталкивался.

Основная

При добавлении цитаты в текст этот вариант устанавливается по умолчанию. «Основная» цитата крупнее «Мнения», отображается на фирменной подложке издания и выровнена по левому краю.

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

Стив Джобс
основатель Apple

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

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

Я очень уважаю постепенные преобразования.

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

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


3. Опросы

Опросы для читателей мы придумали давно — вероятно, больше года назад. Однако долгое время не могли приступить к их реализации — всё время появлялись более срочные задачи. В ноябре 2017 года благодаря самому молодому разработчику нашей компании «Опросы» заработали у сотрудников «Комитета».

Спустя месяц сервис появился и у всех пользователей vc.ru, TJ, DTF. Работает просто: результаты обновляются в прямом эфире, при желании можно переголосовать.

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

4. Подсказки при наборе хэштегов

Для маркировки контента мы используем хэштеги. Чтобы помогать авторам маркировать статьи и минимизировать вероятность возникновения ошибки при наборе тега, мы сделали подсказчик.

Вводите символ # в любом текстовом поле, появляется список наиболее популярных тегов на данный момент. Если начнете набирать текст дальше, список будет фильтроваться. При помощи стрелок на клавиатуре выбираете подходящий тег.

5. Количество оставшихся символов в заголовке

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

Счетчик появляется, когда остается меньше 20 символов до органичения.

6. Cmd+S для сохранения

В любой момент нажимаете Cmd+S — статья сохраняется.

7. Редактирование URL

В «инлайновом редакторе» — это та штука, что появляется при выделении слова — теперь можно редактировать ссылку.

8. Обновление «Ссылок»

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

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

Поэтому мы теперь парсим еще и небольшое описание страницы — чтобы было больше контекста.

Кстати, добавили поддержку кириллических ссылок.

9. Обновление фотогалереи

Высота фотогалереи теперь зафиксирована и равна высоте наименьшей фотографии в ней — благодаря этому удалось избавиться от огромных пустых областей у фотографий других форматов.

Убрали стрелки для пролистывания, которые раньше перекрывали часть фотографии. Вместо них добавили небольшой значок в левом верхнем углу, который исчезает при пролистывании.

#обновления #редактор

{ "author_name": "Филипп Концаренко", "author_type": "self", "tags": ["\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f","\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440"], "comments": 34, "likes": 53, "favorites": 9, "is_advertisement": false, "section_name": "blog", "id": "64835", "is_wide": "" }
Популярные материалы
Показать еще
{ "is_needs_advanced_access": true }

Популярные комментарии

Дискуссии по теме
доступны только владельцам клубного аккаунта

Купить за 75₽
Авторизоваться

Преимущества
клубного аккаунта

  • отсутствие рекламы
  • возможность писать комментарии и статьи
  • общение с членами клуба
Подробнее

Преимущества
клубного аккаунта

  • отсутствие рекламы
  • возможность читать и писать комментарии
  • общение с членами клуба
  • возможность создавать записи

Сколько это стоит?

Членство в клубе стоит всего 75₽ в месяц. Или даже дешевле при оплате за год.

Что такое клуб?

Клуб ТЖ это сообщество единомышленников. Мы любим читать новости, любим писать статьи, любим общаться друг с другом.

Вступить в клуб

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Вы не против подписаться на важные новости от TJ?

Нет, не против
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "i", "ps": "cndo", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "i", "ps": "cndo", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfk" } } }, { "id": 6, "disable": true, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byswn", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "cndo", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223677-0", "render_to": "inpage_VI-223677-0-130073047", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=cndo&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudv", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fzvc" } } } ]