Блог пользователя Zlobober

Автор Zlobober, 9 лет назад, перевод, По-русски

Прошедшая сегодня революция цветов и званий представила новый цвет для легендарных гроссмейстеров (в чём-то схожий по смыслу с таргетами на TopCoder), сейчас он из себя представляет первую чёрную букву.

В моём браузере под моей операционной системой (Chrome и Linux Mint) это выглядит, IMHO, скорее как дефект вёрстки, чем как клёвый эффект:

Мне больше хотелось бы видеть что-то наподобие следующего:

Что вы думаете по этому поводу? Пишите в комментариях свои мысли и делитесь своим видением, как должны выглядеть крутейшие-программисты-всех-времён :) Главное требование — вариант не должен выбиваться из стиля CodeForces.

  • Проголосовать: нравится
  • +145
  • Проголосовать: не нравится

»
9 лет назад, # |
  Проголосовать: нравится +48 Проголосовать: не нравится

Thank you for your job.

It is not easy to analyze by scaled image. It is much better to try how it looks in tables like "Top rated/contributor". I suggest you to edit CSS and publish printscreens of main pages: home page, standings, comments in the original resolution.

It seems I do not like your proposal because of:

  • We do not use shadows in texts on Codeforces, so it makes your way to highlight to look very inorganic. It looks like it was copy-pasted from game/poster. There are many beautiful ui-design patterns but it doesn't mean that all of them are suitable for Codeforces.
  • It is very bold. It shifts the focus to legendary handles too much. I tried on main page and such handles are shouting, eclipsing everything else
  • Your way to highlight is not cross-platform :) For example, it is easy to print first black letter on Snarknews website, but it will be much harder for Snark to support your way. It is easy to type first black letter in presentation (slides), but much harder to type your way. It is easy to embroider contract handles on say t-shirts, but it is impossible to embroider your-way legendary handles.
  • »
    »
    9 лет назад, # ^ |
    Rev. 2   Проголосовать: нравится +29 Проголосовать: не нравится

    Unfortunately I didn't find a way how to insert a non-scaled image :) In all my tries even to add a picture from another site it was replaced with a link to a rescaled image from our server, so I guess we should figure out how to fix our interface for uploading picrures.

    Let me disagree on your words about shadows as it was not intended to be a shadow. My intent was to create a black so-called stroke, and it looks more like a red letter being stroked around with a pencil rather than a shadow.

    It can be done with a following CSS-code.

    .legendary-user-first-letter {
        color: red !important;
    }
    
    .user-legendary {
        
        text-shadow:
            -0   -0.5px 0.5px #000000,
            0   -0.5px 0.5px #000000,
            -0    0.5px 0.5px #000000,
            0    0.5px 0.5px #000000,
            -0.5px -0   0.5px #000000,
            0.5px -0   0.5px #000000,
            -0.5px  0   0.5px #000000,
            0.5px  0   0.5px #000000,
            -0.5px -0.5px 0.5px #000000,
            0.5px -0.5px 0.5px #000000,
            -0.5px  0.5px 0.5px #000000,
            0.5px  0.5px 0.5px #000000,
            -0.5px -0.5px 0.5px #000000,
            0.5px -0.5px 0.5px #000000,
            -0.5px  0.5px 0.5px #000000,
            0.5px  0.5px 0.5px #000000;
        color: red !important;
    }
    

    So, everybody interested may override CSS settings with this style and see how this is done.

    As for being not cross-platform, I suppose that Snark is able to add a black border around red letters, as well as some T-Shirt producer, it's not harder than drawing a logotype of Codeforces or other competition.

»
9 лет назад, # |
  Проголосовать: нравится +64 Проголосовать: не нравится

Да, ИМХО это выглядит не очень. Вдохновление для идеи наверное было подчерпнуто из дизайна Яндекса, но там это выглядит гораздо приятнее. Может, и здесь инвертировать чёрный/красный (и, пожалуй, убрать bold)? Вариант, предложенный в посте (с чёрной тенью) мне кажется не сильно лучше текущего :) Как вариант: может, сделать чисто красный хендл + какой-нибудь специальный символ перед ним?

Вообще, интересно узнать, что думают по этому поводу настоящие (профессиональные) дизайнеры.

  • »
    »
    9 лет назад, # ^ |
      Проголосовать: нравится +13 Проголосовать: не нравится

    Кстати не из Яндекса. Поняв, что приличного цвета под это дело не находится, я пытался сделать выделение стандартными селекторами CSS. Это вариант нашелся как попытка приспособить вариант с селектором/псевдоэлементом first-letter. Чуть позже я заметил, что в Яндекс-дизайне есть похожая идея. Это кстати, подтвердило гипотезу, что выделить первую букву неплохо.

    Как еще один вариант я рассматривал пририсовывать звездочку примерно так "★ Egor". Но выглядит почти вторично от ТопКодера, да и черная звездочка популярный символ — наверняка найдутся неудачные коннотации.

    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится +88 Проголосовать: не нравится

      Как вариант: _/¯( MAXIMAN )_/¯

      А при наведении так: ¯\_( MAXIMAN )¯\_

    • »
      »
      »
      9 лет назад, # ^ |
      Rev. 4   Проголосовать: нравится +1 Проголосовать: не нравится

      ИМХО, если бы все ники записывались с начала строки

      tourist
      Petr
      vepifanov
      rng_58
      subscriber
      YuukaKazami
      scott_wu
      jqdai0815

      хотя бы прослеживалась логика в выделении первых букв(хотя, на мой взгляд, даже так не смотрится). А так эти черные первые буквы все в разных местах. "Фишка" теряется.

      • »
        »
        »
        »
        9 лет назад, # ^ |
          Проголосовать: нравится +10 Проголосовать: не нравится

        Ты что синим стал?

        • »
          »
          »
          »
          »
          9 лет назад, # ^ |
            Проголосовать: нравится +4 Проголосовать: не нравится

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

    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится +84 Проголосовать: не нравится

      Ну хоть здесь я побываю легендарным :)

    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится +100 Проголосовать: не нравится

      А если что-то из этого: "♛ Egor", "♚ Egor", "♔ Egor" или "♕ Egor", раз уж в званиях аналогия с шахматами?

      • »
        »
        »
        »
        9 лет назад, # ^ |
          Проголосовать: нравится 0 Проголосовать: не нравится

        Идея отличная. Причём, как мне кажется, лучше всего подходит чёрный ферзь:

        ♛tourist

        ♛ tourist        (U+200A HAIR SPACE)

        ♛ tourist        (U+2009 THIN SPACE)

        ♛ tourist

        • »
          »
          »
          »
          »
          9 лет назад, # ^ |
          Rev. 2   Проголосовать: нравится +4 Проголосовать: не нравится

          Спеццимволы ИМХО таки не лучшая идея, разве что если они заблокированы для использования в никах (не знаю как с этим обстоит дело сейчас, но имхо огрничит широту фантазии пользователей и откинет лет на пять назад).

          иначе могут быть такой юмор как два tourist — один фэйк один тру

    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится +27 Проголосовать: не нравится

      Еще вариант сделать superscript, подчеркивающий их статус LGM. Как-то так:

      В виде CSS это легко реализуется и без юникода, правда это надо потестить на других браузерах.

      .user-legendary::after {
          content: " LGM";
          font-size: 6pt;
          line-height: 0px;
          color: black;
          vertical-align: super;
      }
      
  • »
    »
    9 лет назад, # ^ |
      Проголосовать: нравится +207 Проголосовать: не нравится

    С профессиональными дизайнерами тоже надо поосторожнее. Сайт Russian Code Cup самые что ни на есть профи сделали!

  • »
    »
    9 лет назад, # ^ |
      Проголосовать: нравится +8 Проголосовать: не нравится

    Яндекс это тоже заимствовал, у древних.

»
9 лет назад, # |
  Проголосовать: нравится +35 Проголосовать: не нравится

Чем вам не понравится такой цвет для легендарных? (7F0000)

  • »
    »
    9 лет назад, # ^ |
      Проголосовать: нравится 0 Проголосовать: не нравится

    Есть одна проблема: сливаться фон при наведении будет с такими хэндлами, что не есть хорошо.

»
9 лет назад, # |
  Проголосовать: нравится +20 Проголосовать: не нравится

I Think the first one looks cooler :)

»
9 лет назад, # |
  Проголосовать: нравится +60 Проголосовать: не нравится

Поддерживаю, эта черная буква у 4 человек больше смотрится как баг, а не эксклюзивная фишка =/

»
9 лет назад, # |
  Проголосовать: нравится +360 Проголосовать: не нравится

I knew this new legendary name looks like something.

  • »
    »
    9 лет назад, # ^ |
      Проголосовать: нравится +164 Проголосовать: не нравится

    I thought the current colorscheme is "reverse Yandex", but Nutella makes way more sense. We should start calling it "Nutella grandmaster" from now on.

    Oh, and if you reach the rank, it's mandatory to include Nutella in the celebration and to post a proof on Youtube :D

»
9 лет назад, # |
  Проголосовать: нравится +19 Проголосовать: не нравится

The second one looks cooler.

»
9 лет назад, # |
  Проголосовать: нравится 0 Проголосовать: не нравится

А мне нравится текущая версия)

»
9 лет назад, # |
  Проголосовать: нравится 0 Проголосовать: не нравится

Me dislike new dark-red, because it has too much black, and all other colors are mild. This red-black seems not friendly. Too much contrast between curve and its background. (I see it from FF & Linux Mint).

»
9 лет назад, # |
  Проголосовать: нравится +334 Проголосовать: не нравится

How about a gradient?

  • »
    »
    9 лет назад, # ^ |
      Проголосовать: нравится +5 Проголосовать: не нравится

    This looks good, but it'd be better to make it a gradient over 3 letters, not 4. That way, it wouldn't be trollable with 3-letter usernames (the chances of an LGM with a 3-letter username aren't very big, but why leave special cases?).

    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится +40 Проголосовать: не нравится

      Seeing your handle in orange feels weird :|

    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится +10 Проголосовать: не нравится

      On a scale from worse to nutella What are the chances that LGM with a 3-letter username become an LGM which would lead to an LGM being mistaken for HQ (while LGM is clearly an LGM) ?

  • »
    »
    9 лет назад, # ^ |
      Проголосовать: нравится 0 Проголосовать: не нравится

    How about users, who have 3 letters in their nicknames?

»
9 лет назад, # |
  Проголосовать: нравится +80 Проголосовать: не нравится

The only problem that I have with it right now is the fact that "grandmaster" in "Legendary grandmaster" isn't written with a capital "G", which is not the case for neither "International Grandmaster" nor the regular "Grandmaster".

»
9 лет назад, # |
  Проголосовать: нравится +12 Проголосовать: не нравится

I love current idea to highlight only the first letter. It's simple and cool.

»
9 лет назад, # |
  Проголосовать: нравится +56 Проголосовать: не нравится

I can barely even tell the color of the first letter is different without looking very closely, so I don't think it's a good idea (but then again, I'm partially colorblind and mix grey with cyan, so probably I'm not representative).

My favourite option so far is KADR's idea with chess pieces.

  • »
    »
    9 лет назад, # ^ |
      Проголосовать: нравится -30 Проголосовать: не нравится

    How many colours (with clear boundaries between them) do you see here?

    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится +14 Проголосовать: не нравится

      I counted something like 37, but I'm not sure if all stripes I see have pairwise distinct colors (to me).

      That said, I don't really want to turn this thread into discussion of my color perception.

  • »
    »
    9 лет назад, # ^ |
      Проголосовать: нравится +11 Проголосовать: не нравится

    I don't know if it's only me, but the link doesn't work.

    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится +19 Проголосовать: не нравится

      It's exclusuve to Russian Codeforces. What it says:

      "А если что-то из этого: "♛ Egor", "♚ Egor", "♔ Egor" или "♕ Egor", раз уж в званиях аналогия с шахматами?"

      Translation:

      "What if we could do something like this: "♛ Egor", "♚ Egor", "♔ Egor" or "♕ Egor", since we do have titles based on competitive chess?"

      • »
        »
        »
        »
        9 лет назад, # ^ |
          Проголосовать: нравится +3 Проголосовать: не нравится

        Thank you really much :)

      • »
        »
        »
        »
        9 лет назад, # ^ |
          Проголосовать: нравится 0 Проголосовать: не нравится

        That's a really good idea, I think it would have more upvotes if it were posted in English version. Expressing my support over here anyway :)

»
9 лет назад, # |
  Проголосовать: нравится -29 Проголосовать: не нравится

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

или наоборот, парные:

»
9 лет назад, # |
Rev. 3   Проголосовать: нравится -53 Проголосовать: не нравится

Итак, легендарные должны смотреться, с одной стороны, как красные (это ведь тоже красные), но при этом совершенно по-особенному, так, как бы это отличало их от всех остальных кодеров, не только от красных. Как насчёт вот такого:

tourist
Petr
vepifanov
rng_58
subscriber
WJMZBMR
scott_wu
TooSimple
qwerty787788
Marcin_smu

  • »
    »
    9 лет назад, # ^ |
    Rev. 2   Проголосовать: нравится -31 Проголосовать: не нравится

    Привет, вижу ты исправил одну опечатку, но этого мало :((((

    • смотреться
    • ведь
    • ...так, как чтобы это отличало их...
    • Как насчёт ... ?
    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится -17 Проголосовать: не нравится

      Нет, я именно так и хотел написать — "так, как ...". Спасибо, что нашли остальные ошибки.

      А разве я Вам разрешал называть меня на ты? Что-то не припоминаю.

      • »
        »
        »
        »
        9 лет назад, # ^ |
        Rev. 3   Проголосовать: нравится -28 Проголосовать: не нравится

        В "так, как" я проблемы не вижу, а вот в "так, как бы это отличало их" она есть. Наверное, тут нужно чувствовать язык, а это не всем дано, сорян. Так что исправь пока остальные не увидели.

        А разве ты мне запрещал? Что-то не припоминаю.

  • »
    »
    9 лет назад, # ^ |
      Проголосовать: нравится +3 Проголосовать: не нравится

    А чего сразу минусить без объяснения недовольства?
    ПС Скажите, пожалуйста, как называется данный шрифт:)

    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится +13 Проголосовать: не нравится

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

      "brush script mt"

»
9 лет назад, # |
Rev. 3   Проголосовать: нравится +76 Проголосовать: не нравится

»
9 лет назад, # |
Rev. 4   Проголосовать: нравится -39 Проголосовать: не нравится

Добавьте просто префикс какой-нибудь, например

Легендарный-tourist

Легендарный-Petr

Легендарный-vepifanov

Легендарный-rng_58


и на черно-белых экранах можно будет отличить легендарных от обычных, без onMouseOver :)

  • »
    »
    9 лет назад, # ^ |
    Rev. 2   Проголосовать: нравится +53 Проголосовать: не нравится

    Боюсь показаться мажором, но у кого-то ещё есть чёрно-белые экраны?

    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится +5 Проголосовать: не нравится

      на книжках с электронными чернилами, правда, не уверен, что на них можно заходить на сайты))

      • »
        »
        »
        »
        9 лет назад, # ^ |
          Проголосовать: нравится +1 Проголосовать: не нравится

        kindle очень даже норм для сёрфинга, если надо почитать текст (в прочем, не монохромный, а много оттенков серого)

      • »
        »
        »
        »
        9 лет назад, # ^ |
          Проголосовать: нравится 0 Проголосовать: не нравится

        Как же можно забыть классическое:

    • »
      »
      »
      9 лет назад, # ^ |
        Проголосовать: нравится +3 Проголосовать: не нравится

      может быть, и есть люди которые страдают цветовой слепотой...

  • »
    »
    9 лет назад, # ^ |
      Проголосовать: нравится 0 Проголосовать: не нравится

    Черно-белые экраны? WTF? Телевизор "Радуга" 60х годов выпуска, подключенный к Apple II?

»
9 лет назад, # |
  Проголосовать: нравится 0 Проголосовать: не нравится

who is silap-aliyev? :D

»
9 лет назад, # |
  Проголосовать: нравится -10 Проголосовать: не нравится

second one is better

»
9 лет назад, # |
  Проголосовать: нравится 0 Проголосовать: не нравится

Может весь хэндл покрасить в золотой оттенок?

»
9 лет назад, # |
  Проголосовать: нравится +1 Проголосовать: не нравится

I think after legendary grandmaster . all characters will be black. like MikeMirzayanov