TJ
Филипп Концаренко

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

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

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

Один для всех

Пользователи 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 лет все стало очень, очень ясно.

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

Стив Джобс

По центру

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

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

Основная

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

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

Стив Джобс

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

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

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

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

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

3. Опросы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
34 комментария
Написать комментарий...
Удивленный динозавр
Cmd+S

фу, гей

Ответить
Развернуть ветку
Хитрый Валера

Комментарий недоступен

Ответить
Развернуть ветку
Связанный клуб

На маке выполняет примерно те же действия, что и Ctrl на Windows.

Ответить
Развернуть ветку
Хитрый Валера

Комментарий недоступен

Ответить
Развернуть ветку
Связанный клуб

Обычно, горячие клавиши в OS X такие же, как на винде (полезно, если будешь какие-нибудь видео-уроки смотреть), c той лишь разницей, что используется кнопка Command, вместо Control. Вот так она выглядит.

Ответить
Развернуть ветку
Хитрый Валера

Комментарий недоступен

Ответить
Развернуть ветку
Связанный клуб

Это комплимент тому, что я неплохо объясняю?)

Ответить
Развернуть ветку
Хитрый Валера

Комментарий недоступен

Ответить
Развернуть ветку
Газетный чайник

да поебитесь вы уже, госпади

Ответить
Развернуть ветку
Геологический фитиль

Как будто что-то плохое

Ответить
Развернуть ветку
Таможенный дым

Комментарий недоступен

Ответить
Развернуть ветку
Передовой пёс_анон

⌘ + C

Ответить
Развернуть ветку
Должный единорожек88

Из статьи вынес кого шеймить за редактор и опросы

Ответить
Развернуть ветку
Ученый Паша

Но вообще да, редактор стал гораздо приятней, чем раньше. Спасибо.

Ответить
Развернуть ветку
Многочисленный дым
Ответить
Развернуть ветку
Органический Гоша

Сегодня заценил подсказки для хэштегов, был приятно удивлён. Спасибо!

Ответить
Развернуть ветку
Ученый Паша
#обвновления

Не могу выразить всю многослойность иронии.

Ответить
Развернуть ветку
Драгоценный Кирилл

Спасибо!

Ответить
Развернуть ветку
Доступный Кирилл

А для чего вот эта кнопка? Сколько бы ни нажимал - толку никакого.

И будут ли в дальнейшем для обычных пользователей доступны вывод фотографии в ленту как видео (а не как превью) и растягивание фотографии на всю ширину блока (так красиво очень)

Ответить
Развернуть ветку
Органический Гоша

где-то в мире умирает один человек, когда ты нажимаешь эту кнопку

Ответить
Развернуть ветку
Должный единорожек88

Человек - не котик, пойду покликаю

Ответить
Развернуть ветку
Органический Гоша

а если это человек-кот?
https://batenka.ru/resource/dog-man/

Ответить
Развернуть ветку
Соответствующий щит

И ведь по факту это правда, хоть связи и нет.
Только не умирает, а скорей рождается (2,6 чел./сек) :)

Ответить
Развернуть ветку
Партийный кот

А какой браузер и устройство? По этой кнопке, как можно предположить, открывается полноэкранный режим просмотра галереи фотографий.

Ответить
Развернуть ветку
Доступный Кирилл

Опера v49, Win 10. Я тоже так думал)

Ответить
Развернуть ветку
Удивленный динозавр

Будет ли нормальный редактор в мобильной веб-версии или в приложении?
Открыл вчера с телефона полную веб-версию - там не появляется инлайновый редактор и нельзя сделать новый абзац в существующем блоке, а только новый блок. Испытываю фрустрацию из-за невозможности пилить нормальные статьи с телефона.

Ответить
Развернуть ветку
Престижный турник

Мы в декабре адаптировали верстку под мобильные устройства, чтобы можно было хотя бы редактировать статью с телефона. С инлайновым редактором сложнее, но к марту решим эту проблему.

Ответить
Развернуть ветку
Удивленный динозавр

Ура, спасибо

Ответить
Развернуть ветку
Необходимый паркур

Комментарий недоступен

Ответить
Развернуть ветку
Геологический фитиль

И сломали "Прямой эфир" (в некоторых статьях не отображается, хоть заобновляй страницу)

Ответить
Развернуть ветку
Удивленный динозавр

а мой стиль для кнопки Аляски не установил(

Ответить
Развернуть ветку
Минимальный Кирилл

о ты Гошу добавил!

Ответить
Развернуть ветку
Удивленный динозавр

дя ^_^

Ответить
Развернуть ветку
Геологический фитиль

Блин, спалился =(

Ответить
Развернуть ветку
Читать все 34 комментария
null