I think we should just use actual emoji for this, not sprite sheets?
The major thing we need is a huge list of English language word labels for every possible emoji and then a pile of JS.
Haha, sorry I think this might be a good JS learning side project for me on the weekends if I have free time.
On Emojis - yes in theory, but not sure in practice - I can try both and see how bad it is. Mostly, there is too much differentiation across platforms leading to an inconsistent experience in expressing an emotion. Having a consistent experience here (if we're using them to help improve communication in the product) would be something I prefer we ship with. I also think when new ones get standardized, they roll out at different times at different places. Controlling that seems beneficial to some users not seeing blank unicode blocks? Maybe we just always stay behind then.
I think the pros and cons are something like:
- Users on old versions of Windows or who compiled their own Gentoo don't have occasional missing/fallback emoji.
- Users see the same picture of a smiling cat instead of different pictures of smiling cats.
- You need to rewrite RemarkupTextControl to use contentEditable, which I believe to be an enormous, complex undertaking -- or have :boar: and 🐗 mean different things and be visually distinct.
- Probably nine million other problems (commit messages, text email, search, performance, combining emoji like flags and skin tones, internationalization).
All I've learned is:
- Seems really simple/easy to build this into Autocomplete.js
- Emoji look terrible on nearly every platform / browser
- "Frequently Used" would be nice to have in Autocomplete for all objects, I think I'd save a lot of time typing @e instead of @epri daily.
- Seems like we already special case "MacroEmoji", so swapping in images would not be much work.
- Slack transforms actual emoji pastes like ❤️️ to :heart:
- There is a lot to do to make the search feel "correct" and "natural" given how much junk emoji there are.
Emoji look terrible on nearly every platform / browser
Can you go into more depth on this one? Specifically, they don't look terrible for me in any browser on MacOS X or in iOS Safari. They're fairly bad on Windows 7, but from Googling it looks like they're OK on Windows 8 and 10 and (recent versions of?) Android. Assuming they're OK on OSX, Windows 8 and 10, and iOS and recent Android I'd guess like ~95% or more of our users can see emoji fine? Did you come up with different results? Or do you think more than 5% of our users are on other platforms like self-compiled Ubuntu? Or do you think some of the full-color OS icon sets are just terrible compared to the Emojione set?
I believe Firefox is adopting EmojiOne. If I could CSS style the emojis, it would help. I find them small and hard to identify in text. Basic ones like ❤️ are easy, but all the different emotions are somewhat harder. 😁 vis. 😂 really are hard for me to visually focus on (and on my laptop, which is smaller dpi, is even harder).
This is 😄 😂 on normal Emoji.
Maybe there are some other Emoji-style tricks in CSS. I don't think I've looked.
This is what I see on my Macbook in Safari:
Those look exactly identical to me (except that Slack has a larger font size?) so I'm not sure what distinction you're pointing out or seeing on your machine.
If I can get most places to appear like Safari shows them, this will probably be good for a v1. The reason I like EmojiOne is mostly aesthetic, they are less busy visually (flatter) and are easier to determine what they are individually. I can also control the size. Let me futz with our emoji remarkup rule and see if I can normalize the display better. Though, not sure that's really possible still given Google search results.
Also, I didn't intend to work on this today, just wanted to brain dump thoughts.
Oh, woe is me, for there are no colours in my emoji. One thing to notice though - where can I find that beautiful emoji example in ui examples? Would be cool place to check for emoji support on different browsers/platforms :)
The list is sorted by emoji. 🐈 is "alphabetically" earlier than 🐱 in the list of emoji.
I think you can sort the list by English label instead by doing setName("cat 🐱") (controls sort order), then setDisplayName("🐱 cat") (controls display).
Also while you're in there maybe replace _ with (space) in the strings? I can't find :lion_face: by typing :fac... right now, but I think if you swap the underscores for spaces it will work. Then :cat should be able to find crying_cat_face and stuff, too.
I came across a small bug with the "auto-suggest" feature. In differential I was writing an inline diff, and ended with :/ to show my face in plain ascii, and hit ⌘+enter immediately after to complete my inline diff. After typing :/ the auto-complete popped up and when I saved the draft with ⌘+enter it forever immortalized the auto-complete popup on screen with no seeming way to get rid of it (refreshing probably fixes~). I can reproduce on this install.