Nowe emotikony - propozycje ulepszeń

Hejka, 4programmers!

Nawiązując do wątku: Nowe emotikony - testy na 4programmers.dev

Jak pewnie wiecie, jakiś czas temu dodaliśmy do forum emotikonki Unicode. Można je dodać, używając notacji z dwukropkiem, np. :smile: zamieni się w ! Ponadto, ze względu na to, że wcześniejsza wersja serwisu zawierała notację wczesno-internetową, tj. :D, :), :>, ;), :-), taka notacja również zostanie przekształcona w kolorową buźkę. Zapis :P wyświetli się jako :P.

Wraz z rozwojem technologii i pojawieniem się nowszych monitorów oraz wyświetlaczy, 4K rywalizuje z FullHD, a wraz z rosnącymi rozmiarami ekranów zwiększa się również rozdzielczość. Dlatego zasłużone, lecz małe (15px/15px) emotki z GG, które były używane na forum, wymagały aktualizacji, aby dobrze wyglądać na nowoczesnych monitorach.
Podjęliśmy więc decyzję o dwóch zmianach: zaktualizowaliśmy legendarne pikselowe emotikonki z GG do nowych wektorowych wersji, które będą świetnie wyglądać nawet na wyświetlaczach 8K, oraz dodaliśmy znacznie więcej emotikonek. Zamiast 12 emotikonek z GG, mamy teraz ponad 1500 emotikonek Unicode.

Wychodząc naprzeciw Waszym sugestiom i oczekiwaniom, mamy kilka propozycji ulepszeń:

• Aktualnie emotikonki SVG wyświetlają się w rozmiarze 18px, co jest nieco za małe, szczególnie na monitorach FullHD, gdzie mogą się zlewać. Planujemy zatem zwiększyć rozmiar wyświetlanych emotek do 22px, aby były po prostu ładniejsze.
• Obecnie używany zestaw emoji to Twitter Emoji ale odpowiadając na Wasz feedback w najbliższym czasie dodamy na forum ankietę prezentującą inne warianty emotikon, aby społeczność 4programmers.net mogła większością głosów wybrać odpowiedni zestaw. Rozważamy zarówno darmowe, jak i płatne zestawy. Zachęcamy Was również do proponowania innych zestawów (muszą to być emotikony Unicode, nie dowolne obrazki).
• Jesteśmy świadomi, że mimo dodania nowej notacji :dwukropkowej:, wielu użytkowników nadal jest przyzwyczajonych do wpisywania emotek w notacji :), :D, :P z innych serwisów (pamięć mięśniowa). Dlatego planujemy dodać możliwość użycia notacji :D, :) oraz :P w autouzupełnianiu emotikonek, tak aby można było wpisać :, D, Enter i kontynuować pisanie. Zdajemy sobie sprawę, że notacja z dwukropkami :smile: może "kolidować" z notacją z nawiasami :), dlatego proponujemy dołączenie emotek :), :D oraz :P do autouzupełnienia.
  

Dodatkowo, dwa dni temu wprowadziliśmy usprawnienie, które pozwala na pokazywanie emotikonek w autouzupełnieniu w takiej samej kolejności, jak w selektorze emotikonek. Więcej na ten temat przeczytacie tutaj: !revision #28942ed Zauważyli...

Dajcie nam znać, co myślicie o tych propozycjach i czy odpowiadają one Waszym potrzebom związanym z korzystaniem z emotikon na naszym forum. Czekamy na Wasz feedback! :)

Korzystając z okazji, chcielibyśmy też poprosić o opinię osoby zaangażowane w poprzednie dyskusje: @somekind , @Panczo , @Marooned , @gajusz800 , @PaulGilbert , @Wibowit , @furious programming, @dzek69, @Czitels , @Althorion - czy te rozwiązania spełniają Wasze oczekiwania?

Miłego dnia! :D

Jeśli o mnie chodzi, to wystarczy, aby frazy pokroju :) były zamieniane na emotki. I tak nie krzystam z więcej niż kilku typów, więc jest mi obojętne jak duży zestaw emotek Unicode zostanie użyty. Same grafiki emotek nie są złe, tutaj raczej nie mam zastrzeżeń.

4programmers.DEV napisał(a):

Planujemy zatem zwiększyć rozmiar wyświetlanych emotek do 22px, aby były po prostu ładniejsze.

Czyli tyle same ile w Discord.

Czemu po prostu nie użyć emoji? W sensie normalny emoji picker dodany do textarea i normalne znaki UTF zamiast jakiegoś :joy:

W sensie każdy na telefonie pewnie i tak woli emoji wybrać z menu gdzie ma je ładnie ułożone w gridzie i może wyszukiwać po słowach kluczowych zamiast zapamiętywać ich jakieś dziwne nazwy albo przewijać niekończący się dropdown.
Na windowsie jest Win+. i też łatwiej tam wybrać emoji niż emotkę z menu.
Czy normalne emoji jest kompatybilne z tą paczką emotek twitterowych?

Test

// ok widzę że są kompatybilne i podmieniane na odpowiedniki "twemoji". Pytanie po co mieć w ogóle notację z dwukropkiem skoro można wkleić / wybrać emoji normalnie jako znaczek utf?
I po co podmieniać w ogóle emoji na twitterowe "twemoji" skoro można je zostawić tak jak są i zostawić renderowanie urządzeniu? Każdy będzie miał takie emoji do jakich jest przyzwyczajony i będzie sobie mógł to nawet gdzieś pewnie zmienić jak będzie chciał.

Skoro bardzo chcecie wektorowe emotki, to można zrobić "trace" emotek z GG.

Np. na bazie twitterowego uśmiechu zrobiłem w Inkscape taki "tracing" pikselowej emotki z gg:

Do pobrania, jakby ktoś chciał to ulepszyć/użyć: new_smirk4p_svg.zip

Swoją drogą jednym z powodów dla których wprowadzono nowe emotki na 4p z tego co zrozumiałem są też kwestie licencyjne, bo używanie starej paczki emotek nie było do końca uregulowane, ale jednocześnie:

obscurity napisał(a):

Swoją drogą jednym z powodów dla których wprowadzono nowe emotki na 4p z tego co zrozumiałem są też kwestie licencyjne, bo używanie starej paczki emotek nie było do końca uregulowane, ale jednocześnie:

Dzięki za czujność - avatar konta podmieniony! :D

Cześć @obscurity! Dzięki za konstruktywny feedback!

obscurity napisał(a):

Czemu po prostu nie użyć emoji? W sensie normalny emoji picker dodany do textarea i normalne znaki UTF zamiast jakiegoś :joy:

Powodów za notacją :smile: było kilka, oto niektóre z nich:

• Mimo składni :smile:, nadal masz możliwość użycia znaków Unicode do wpisania emotikon — jeśli tak Ci jest wygodniej — go for it!
• Nie każdy ma urządzenie które pozwala tak łatwo wpisać znaki Unicode. Niektóre urządzenia dostarczają tylko podstawową klawiaturę i znaki akcentowane (np niektóre modele telefonów). Nie chcemy dyskryminować żadnego urządzenia.
• W przyszłości planujemy dodać niestandardowe emotki, specjalnie dla 4programmers.net - co powiesz na emotikonę :obscurity:? Z notacją :smile: będzie to trywialne, z emotikonami Unicode - nie tak bardzo.
• Plan zakładał przyzwyczajenia użytkowników, którzy zaczynają pisanie emotikon od : (np. :), :D). Chcieliśmy żeby wpisanie : w odpowiednim miejscu otworzyło autocomplete z emotikonami. Dodaliśmy już fixa, żeby się nie otwierało jeśli przed dwukropkiem jest litera, bo to faktycznie irytujące.
• Podobne rozwiązanie jest w innych aplikacjach, np. na Slacku gdzie możemy wpisać :smile: i zobaczymy emotikonkę, jak również :D no i oczywiście Unicode - tak, jak na 4programmers.net.
• Emotikony wpisane w składni :smile:, łatwiej jest zmienić na inne. Dla przykładu, wpisaną emotikonę :tongue: łatwo jest zmienić na :tongue_wink:, zwłaszcza że na 4programmers.net jest autouzupełniacz który usprawnia to jeszcze bardziej. Emotikony Unicode w zasadzie trzeba usunąć i wpisać nową.
• Emotikony wpisane w treści w notacji :smile: łatwo rozpoznać, zapamiętać i wpisać ponownie. Po już nawet kilkukrotnym użyciu emotikony np. :rotfl: będziemy mogli ją wpisać niemal automatycznie prosto z klawiatury, nie musząc szukać jej w selektorze lub pickerze.

obscurity napisał(a):

W sensie każdy na telefonie pewnie i tak woli emoji wybrać z menu gdzie ma je ładnie ułożone w gridzie i może wyszukiwać po słowach kluczowych zamiast zapamiętywać ich jakieś dziwne nazwy albo przewijać niekończący się dropdown.
Na windowsie jest Win+. i też łatwiej tam wybrać emoji niż emotkę z menu.

Dziękujemy za bardzo dobrą sugestię!

Możemy zrobić podobny picker w edytorze Markdown w 4programers.net — oprócz aktualnego autouzupełniacza które pokazuje emotki sekwencyjnie, i pickera w kontrolkach, możemy dodać dodatkowy selektor który działa podobnie jak ten z Win+., tylko z tą zaletą że działałby tak samo na każdej platformie.

Jeśli masz jakieś dodatkowe uwagi, w jaki sposób można usprawnić aktualne menu emotek w edytorze — daj znać!

obscurity napisał(a):

Czy normalne emoji jest kompatybilne z tą paczką emotek twitterowych?

Test

// ok widzę że są kompatybilne i podmieniane na odpowiedniki "twemoji". Pytanie po co mieć w ogóle notację z dwukropkiem skoro można wkleić / wybrać emoji normalnie jako znaczek utf?
I po co podmieniać w ogóle emoji na twitterowe "twemoji" skoro można je zostawić tak jak są i zostawić renderowanie urządzeniu? Każdy będzie miał takie emoji do jakich jest przyzwyczajony i będzie sobie mógł to nawet gdzieś pewnie zmienić jak będzie chciał.

Można to zrobić, nie ma ku temu większych przeciwskazań — ale kiedy testowaliśmy emotikony na różnych urządzeniach, wiele z domyślnych fontów nie wspiera wszystkich emotikonek, raz na jakiś czas się pojawi brakująca emotka. Koniecznością stało się więc dostarczenie jednolitego zestawu emotikon dla całego forum.

Jeśli chcesz żeby na Twoim urządzeniu emotikony wyświetlały się inaczej, to nie trudno byłoby dodać dodatek do przeglądarki, taki jak GreaseMonkey lub Tempermonkey, która zamieni emotikony twemoji na Twoje własne. Forum umieszcza znak Unicode emotikony w atrybucie alt="" każdej emotikony, więc łatwo byłoby ją takim skryptem podmienić, jeśli masz takie życzenie.

obscurity napisał(a):

Swoją drogą jednym z powodów dla których wprowadzono nowe emotki na 4p z tego co zrozumiałem są też kwestie licencyjne, bo używanie starej paczki emotek nie było do końca uregulowane, ale jednocześnie:

@obscurity Ale Ty przecież sam masz logo 4programmers w avatarze

PS: Już zmienione, jest git.

Nie zdążyłeś :D Poza tym 4p na to zezwala Nasze logo : Zamieszczone oficjalne logo serwisu 4programmers.net można kopiować, dowolnie przetwarzać pod jakąkolwiek postacią.

obscurity napisał(a):

Swoją drogą jednym z powodów dla których wprowadzono nowe emotki na 4p z tego co zrozumiałem są też kwestie licencyjne, bo używanie starej paczki emotek nie było do końca uregulowane […]

Było uregulowane, bo to nie była paczka z Gadu-Gadu, a ręcznie stworzony przeze mnie zestaw emotek, zastępujący ten ówczesny. A że stworzyłem go samodzielnie (od podstaw, wzgorując się na tym z Gadu-Gadu) i udostępniłem na forum bez żadnej licencji, każdy mógł go użyć w dowolnym celu.

W sumie to nadal może, bo jest udostępniony w wątku Nowy zestaw emotek dla serwisu — posiada wszystkie pliki graficzne, których użyłem do montowania końcowych grafik (warstwy oraz gotowe klatki emotek animowanych).

4programmers.DEV napisał(a):

• Aktualnie emotikonki SVG wyświetlają się w rozmiarze 18px, co jest nieco za małe, szczególnie na monitorach FullHD, gdzie mogą się zlewać. Planujemy zatem zwiększyć rozmiar wyświetlanych emotek do 22px, aby były po prostu ładniejsze.

Chyba zmniejszyć? Ikony są elementem inline i powinny mieć wysokość linii tekstu. Obecne są za duże i sztucznie i brzydko rozpychają w pionie tekst:

Temat zdecydowanie do poprawki i emotki powinny mieć 16px, tyle co tekst. Inaczej to nie ma sensu.

Błagam wyłączcie to. Teraz za każdym razem, gdy chcę zakończyć linię dwukropkiem to automatycznie w edytorze wskakują jakieś emotikony z d**y. Weźcie już dajcie sobie spokój, komu to tu w ogóle potrzebne?

gajusz800 napisał(a):

Błagam wyłączcie to. Teraz za każdym razem, gdy chcę zakończyć linię dwukropkiem to automatycznie w edytorze wskakują jakieś emotikony z d**y. Weźcie już dajcie sobie spokój, komu to tu w ogóle potrzebne?

Cześć @gajusz800! Dzięki za feedback!

Ostatnio wprowadziliśmy poprawkę, żeby autouzupełnienie nie pojawiało się kiedy jest zaraz za literką.

Teraz za każdym razem, gdy chcę zakończyć linię dwukropkiem to automatycznie w edytorze wskakują jakieś emotikony

Mógłbyś wkleić przykład takiej linii? Wtedy będziemy mogli coś zaradzić.

Jako że zostałem wywołany — moja opinia nie zmieniła się od czasu pierwszej rozmowy, i wciąż można ją krótko podsumować tak:

• Samą „wybierałkę” emoji uważam za krok w dobrą stronę.
• Wybrany font uważam za istotnie ładniejszy od poprzednich symboli, nie rozumiem nostalgii za nimi.
• Silnie nie zgadzam się z wybranym sposobem implementacji — jako że są to normalne znaczki unikodowe, to w mojej opinii powinny zostać zrealizowane jako normalne znaczki unikodowe — podmieniane przy renderowaniu posta. Problem z ewentualnym brakiem fonta zdolnego do wyrenderowania ich rozwiązałbym tak, jak się typowo rozwiązuje ten problem — serwując odpowiedni font (na przykład Noto Color Emoji) z serwera. Tak, wiem, że planuje się dodanie pozastandardowych znaczków — ale jeszcze tego nie ma, więc… YAGNI? No i nic nie stoi na przeszkodzie, żeby albo rozwiązać tamten problem przez wrzucanie obrazków z alt-teksem (tak, jak to teraz jest zrealizowane dla wszystkich, czy jest taka potrzeba, czy nie), albo przez rozszerzenie fonta — tak jak już teraz jest to zrobione ze znaczkami typu symbola kosza, które realizowane są przez Font Awesome i jego rozszerzone glify.
  Czemu tak? Żeby korzystać z już istniejącego, popularnego i dobrze rozumianego standardu, a co za tym idzie, poprawić zakres używalności i dostępność. Obecnie, na szczęście, da się bez problemu kopiować tekst, by korzystać z narzędzi czytających na głos; ale nie jestem pewien, jak to działa w dedykowanych przeglądarkach dla osób niedowidzących. Oraz, na pewno, w tysiącu jeden innych dziwnych sytuacji wyjątkowych, o których nikt nie pomyślał.

Zmiana emotek, wpływa wizualnie na to jak odbieram forum. Poprzedni zestaw bardziej mnie przekonywał, to wyróżniało ten serwis. Do nowych pewnie się przyzwyczaje, ale tak jak @Marooned uważam, że nie powinny być większe tylko mniejsze. Teraz za bardzo się narzucjają podczas czytania treści. W moim zamyśle emotki mają być uzupełnieniem posta, a nie wybrzmiewać na pierwszy plan.

A można też pójść w drugą stronę. Zamiast zmniejszać emotki, powiększyć tekst :]

Ja proponuję iść w trzecią stronę i dać rozmiar tekstu i scale: 1.2, wtedy nie będzie rozpychać tekstu w pionie i zajmie jedynie białą przestrzeń. Jeszcze ewentualnie margin w poziomie żeby się nie zlewać z literkami.

Jeszcze może rozmiar emotki dać w img zamiast w stylach bo bez styli te emotki mają rozmiar 100% a style czasem się mogą nie załadować lub załadować z opóźnieniem na mobilnym necie w lesie, lub ktoś może chcieć wyłączyć. Jeszcze lepiej jakby te emotki po prostu były mniejsze.
Na przykład edge ma "tryb czytania" (immersive reader - F9) i w nim strona wygląda tak:

@pradoslaw
@4programmers.DEV

Chodzi o to:

Piszę coś, wpisuję : i wyskakuje mi to. Czasem samo coś się wstawi. W ogóle uważam to za zły pomysł, nawet jeśli byłaby taka poprawka że po wyrazie to nie wyskakuje. Proponuję dać możliwość wyłączenia tego w ustawieniach profilu.

gajusz800 napisał(a):

@pradoslaw
@4programmers.DEV

Chodzi o to:

@Riddle: wygląda na to że polskie literki nie są traktowane jako litery. regex do poprawy. Zamiast sprawdzać czy dwukropek jest za literą moim zdaniem lepiej sprawdzić czy jest za białym znakiem

No cóż, kawał dobrej, nikomu niepotrzebnej roboty.

Nie widzę większego sensu w istnieniu wybieraka do emotek, bo to jest coś standardowo dostępne w klawiaturze albo systemie operacyjnym. Gdybym dyskutował z dwunastolatkiem, to bym użył takowego wybieraka, aby wstawić mu emoji w jego stylu. Póki co nie miałem takiej potrzeby chyba ani razu.
To, czy brzydkie emotki są większe czy mniejsze, też nie ma znaczenia, bo nadal są brzydkie.

No, a teraz to chyba nie pozostaje nic innego niż napisać wtyczkę do przeglądarki naprawiającą te durne zmiany.

gajusz800 napisał(a):

Piszę coś, wpisuję : i wyskakuje mi to. Czasem samo coś się wstawi. W ogóle uważam to za zły pomysł, nawet jeśli byłaby taka poprawka że po wyrazie to nie wyskakuje. Proponuję dać możliwość wyłączenia tego w ustawieniach profilu.

Cześć @gajusz800! Dzięki za wartościowy feedback.

Wrzuciliśmy poprawkę, i już autouzupełniacz emotikon nie będzie się pokazywał tam, gdzie chcemy po prostu wpisać dwukropek .

:O nie zamienia się na [co ciekawe, widzę, że w starych ikonach też brakło tego klasyka]

Kolejny babol:
Wpisanie :dlaczego widzę tu emotkę: daje :dlaczego widzę tu emotkę:
Innymi słowy :d zamienia się w emotkę mimo, że ciąg znaków nie kończy się \b

@Marooned dzięki za zauważenie.

Jednak zachowanie o którym mówisz nie ma nic wspólnego z nowymi emotikonami. To jest cecha parsera buziek :D, :P który jest na forum od zarań, i kod tego parsera się nie zmienił. Postawiłem sobie lokalnie starą wersję coyote z 2015 roku i efekt jest ten sam, że w słowie :dlaczego, pojawia się "laczego".

Natomiast nowe emotki mają notacją :\w: (brak spacji), zgodnie ze standardem Markdown, dlatego składnia slug-emoticons nie łapie :dlaczego widzę tu emotkę:

Bug oczywiście możemy poprawić, prawdopodobnie należałoby się zastanowić jak buźki :D i :P miałyby się zachowywać w paragrafach, linkach, tabelkach, etc.(mówię o przypadkach brzegowych gdzie buźka jest zaraz za albo przed znakiem specjalnym).

Informujemy, że zgodnie z zapowiedzią, na produkcję trafiły dzisiaj "krótkie emotikony", czyli autouzupełniacz-podpowiadajka, dzięki której przy pomocy dwóch kliknięć możemy dodać najczęstsze emotikony, np. :D -> :laugh:.

Zaczynające się od dwurkopka:

• :) -> :smile:, :twinkle:, :slight_smile:, :upside_down_face:, :innocent:
• :D -> :laugh:, :sweat_smile:, :lol:, :joy:, :rotfl:
• :P -> :tongue:, :tongue_closed_eyes:
• :( -> :frown:, :unhappy:, :sad:, :upset:, :worried:, :nervous:, :scared:, :cold_sweat:
• :c -> :disappointed:
• :* -> :kissing:, :kissing_heart:, :kissing_closed_eyes:, :kissing_smiling:
• :o -> :surprised:, :open_mouth:, :peeking_eye:, :astonished:, :head_explode:, :scream:, :dizzy:
• :x -> :zipper_mouth:, :no_mouth:, :shush:
• :> -> :happy:
• :< -> :weary:, :tired:, :angry:, :rage:, :symbols_on_mouth:
• :/ -> :confused:, :diagonal_mouth:, :grimacing:
• :| -> :neutral:, :raised_eyebrow:, :monocle:, :expressionless:, :dotted_face:
• :] -> :smirk:, :sunglasses:, :yum:

Buźki :D, :P, :o oraz :x są case-insensitive.

Zaczynające się od średnika:

• ;) -> :wink:, :smile_tear:
• ;P -> :tongue_wink:, :zany_face:
• ;* -> :kissing_heart:
• ;( -> :cry:, :sob:

Buźki zaczynające się od innych znaków:

• <3 -> :heart:, :heart_smile:, :heart_eyes:, :heartpulse:, :heart_on_fire:, :heart_hands:
:black_heart:, :brown_heart:, :orange_heart:, :green_heart:, :blue_heart:, :purple_heart:, :white_heart:
• ^^ -> :relaxed:, :blush:
• -.- -> :expressionless:.

Zachęcamy użytkowników do proponowania nowych krótkich emotikonek! Zastanawiamy się nad +1 oraz -1, które mogłyby dodawać :thumbs_up: oraz :thumb_down:. Ciekawym pomysłem wydaje się też :? na :thinking: - Co o tym myślicie?

PS: Tymczasowo usuwamy emotikonę -.-, dlaczego że przeszkadza w pisaniu myślników w paragrafach. Poprawimy to zachowanie dodając przybornik ze znakami "minus" oraz "myślnik", tak by autocomplete nie przeszkadzał w pisaniu.

Czy można poprawić błąd, że pisząc :) albo ;) i naciskając enter, ten zapis zmienia się na :cośtam:? Powiedzmy, że rozumiem, że chciano dodać gazylion nieistniejących wcześniej :trololo:, ale nie można zostawić w spokoju prostych klasyków? Strasznie to upierdliwe.

Marooned napisał(a):

Czy można poprawić błąd, że pisząc :) albo ;) i naciskając enter, ten zapis zmienia się na :cośtam:? Powiedzmy, że rozumiem, że chciano dodać gazylion nieistniejących wcześniej :trololo:, ale nie można zostawić w spokoju prostych klasyków? Strasznie to upierdliwe.

Aktualnie, na szybko bez zmiany w kodzie można skorzystać z Shift+Enter - to wstawi nową linię bez wybierania elementu w autocomplete.

Ewentualnie można pomyśleć nad tym, żeby w autocomplete pierwsza pozycja była pusta, tak jak teraz w językach programowania, i wybranie jej nie wstawia nic. Tylko że w językach programowania wybranie jej nie wstawia nowej linii