VMP Sneak Peek: Emoji
36Sometimes, before we roll out new site features, we try them out on our guinea pi- er, VMP friends first.
The other day @ceagee was talking about the Oatmeal's new FB reactions. Got me thinking, we should probably have better Emoji support here on meh.com.
So we'll be rolling out some Emoji improvements with help from our VMP friends over the next few days. Just like we did before with profile pages and other forum updates.
Today's update allows VMP members to turn Emoji shortnames like into
- 119 comments, 206 replies
- Comment
So do non VMPers just see the shortname typed out?
@Ignorant I can see the emoji, so I assume the VMP part turns it into the respective
HTML entityimage from emojione before the comment is stored. So, all can see; VMPs can type.@brhfl so if you type will we all just see the shortname then?
@Ignorant I'm not vmp so I'll try it:
:thumbsdown:
@hallmike that answers it. Thanks
@hallmike try to paste one from http://getemoji.com/ for science
@Lotsofgoats 😢
@hallmike (directly copy-pasted yours, to show the difference)
@Lotsofgoats Mine fits the dark theme better. All these pops of color against the gray background hurt my eyes. :wink: 😉
@Ignorant
heheheheheheheheheheheheheh
this one is smaller
heheheheheheheheheheheheheh
@Lotsofgoats bigger?
@brhfl HEHEHE
@Lotsofgoats
@Lotsofgoats @Barney 's
@legendornothing you should see a doctor about that.
:fuck: <--- you'd think there would be a good emoji
@carl669
@carl669
@carl669
@Lotsofgoats Is that a lady farting?
@Teripie yes.
@Lotsofgoats Brilliant!
@KDemo we definitely need a :ttm: emoji.
@Thumperchick As I recall, we had one in our gishwhes Slack. I mean, c'mon, @shawn, get your together.
I see this being used like hashtags
:VMPproblems:
:BetterBelieb:
@Ignorant Let me guess, you future - you were hacked.
@narfcake OMG those guys are so leet! They got me again
:galmaegi:
@Lotsofgoats i think you have to say her name 3 times before she appears.
@carl669 spooky
@Lotsofgoats Try :Gal Maegi: Hmmm, nope. How about :gull: Damn!
@Lotsofgoats knows what I like to eat.
@carl669 not this time!
@galmaegi now i want sushi!
@carl669
@galmaegi !!! Somebody stop me, because I'm leaving stupid emojis all over the place.
@OldCatLady
these assets are adorable btw
One thought from the sideline - might be worth putting the shortname in the alt text for both a: the intended accessibility purpose of alt text (though, hearing 'ramen soup spiralcake sushi bentobox puddingplatter trianglerice ricebowl reesescup trianglekebab circlekebab' could admittedly be terrible), and b: so users can hover to figure out what exactly to type to make a puddingplatter appear (because as of right now, I couldn't tell you).I see that it is in there, I'm guessing it doesn't give text on hover because of something to do with the other hovery business (stars)?@brhfl
alt
text doesn't show up on hover in all browsers, but I'll look into it.@brhfl I see the text on hover.
@hallmike - VMP here, not appearing for me.
@shawn Durrf, of course it doesn't, disregard everything I said (and then perhaps consider slapping it in the title attribute as well since one of the two will hover, and I think that discoverability aspect could be valuable here…)
Maybe my brain will be out of Monday mode by tomorrow…
@shawn Not working w/ safari
@ceagee ...or Chrome or Firefox. At least not with a Mac.
Most fun update yet!! Thanks, @shawn !
@KDemo You mean I could have skipped all that pagination bullshit and just given you guys some colorful pictures?
@shawn - I'm easy.
:happycanadianmountieridingamooseandwavingacanadianflag: Guess that one didn't work ;)
@Moose I don't know if I should praise or curse you.
@Moose Someone's got a lot of time on his hands.
:moat:
:boat:
:VMP:
:hollboll:
:guatamalaninsanitypeppers:
:emoji:
:amazon:
:woot:
:speakerdocks:
:meh:
:mediocre:
:morningsave:
:westcoast:
@DaveInSoCal how could you leave out :fuku: ?
I made this one for Slack haha
:baby_arm:
/ \
/ \
/ \
/ \
/ \
:today:
:meh:
:jumped:
:the:
:shark:
@Pavlov
July 17th meh guy skied a whale
@Ignorant nailed it!
It's Mr. Emoji Head
Is there a list of valid codes somewhere that I missed?
@cengland0 seems like we need to make it easier to discover emoji short names somehow.
@shawn :emoji: edit darn that would have been so meta
@shawn Oh please, that would be great.
@cengland0 Maybe this will help for now:
http://www.emoji-cheat-sheet.com/
@shawn publishing short codes seems silly when you can use the literal emoji itself - everybody on mobile should have an emoji keyboard because what is life without one, and on web you can just use a site like getemoji to copy paste
vv
@Lotsofgoats I have no such keyboard on any of my mobile devices. Guess I haven't really been living.
@Lotsofgoats Publishing short codes is still necessary for those of us that still use real computers instead of relying on mobile devices to do everything.
@cengland0 I covered that case too
@Lotsofgoats I agree we don't need help on mobile when most phones have virtual emoji keyboards, but we need something for desktop browsers.
@shawn @Lotsofgoats @cengland0 @hallmike @heartny If you're on a Mac, Mavericks or higher, Control+Command+Space brings up the Characters palette, with the complete set of Emoji.
@jqubed Hey, thanks for that tidbit. I use a mixture of Mac, PC, iOS, and Android. It does seem to work exactly as you described using my Mac with Mavericks. Now the big question is if I'll remember that tomorrow. I'm old and alzheimers is kicking in.
@jqubed Thank you, but I do Windows and Android. I don't usually acknowledge the fact that I have an iPad Air.
:dave:
:fuku:
I gotta test... :fu:
@sohmageek
@sohmageek
"reversed_hand_with_middle_finger_extended"
(Holy shit, that's a lot of work to flip someone off.)
@joelmw well, you are verbose
@stardate820926 Yeah, but I'm lazy.
@joelmw
@joelmw Try just :middle_finger:… the service they use appears to use that as shorthand on their guestbook…
@brhfl
As close as I could get to PHC
I think we need some meh specific emoji's @shawn
I've seen many tried that don't work.
BTW these are :party: ! just suggesting
@ceagee Like a goat emoji beyond the one I have already seen on this thread- in fact several of them expressing different goat blame positions/expressions/.... And if you are feeling generous, several for the goat to respond back with.
:I don't get it
@somf69
@somf69 don't get
not a
:headpalm:
@DMlivezey
@DMlivezey ?
So is this using the same codes from Slack?
@jqubed no :fu: is slack code. It seems more verbose here.
is awesome, but no :panda: ??
what kind of world do we live in??
@conandlibrarian
@heartny
HOW????
@conandlibrarian panda_face, with the colon thingies at either end
@heartny
@conandlibrarian
@conandlibrarian or you can just use the actual emoji and meh does a magic translation to get the image
vv
@Lotsofgoats vv
@heartny
@Lotsofgoats vv vv vv
@heartny
I feel as though will be used often
@MrGlass but there needs to be more variety with respect to that. We need one that is hanging in a noose, one that is splayed out as road kill, one looking surprised, one sleeping on the job...
:meh:
:woot:
Well, someone had to go there ...
@El_Oel
I cheated. That's a .gif
at least @narfcake gets me
@Lotsofgoats knivesandspeakerdocks.com?
:eek:
@El_Oel :sad_panda:
@El_Oel
If a VMP member uses an emoji and then cancels their VMP, will the emoji stick or will it go back to the text?
sweet
I need to do what now?
I can't bear it.
This isn't enough to bring VMP back for me. Need the JBL Mini Dock.
@RedOak JBL MINIs FTW.
:speakerdock:
@thismyusername
What about and :moon: and :flower: and :tree: ? One emoji per post?
@OldCatLady
:trollface: :ham_radio:
@kc5rbq
@Lotsofgoats that works! :)
:walkie_talkie
:test:
:IsThisAnEmoji:
:godmode:
:finnadie:
:fuku:
:yet:
:Ibrokemymehfacestreakonmybirthday:
@looseneck Oh, no, that's terrible news! No more birthdays for you, young lady.
Just trying a few...
:20% salary bump:
I guess you can't have everything.
for chrome users:
https://chrome.google.com/webstore/detail/emoji-input-by-emojistuff/immhpnclomdloikkpcefncmfgjbkojmh?hl=en-US
for firefox users:
https://addons.mozilla.org/en-US/firefox/addon/emojikeyboard/
for IE users:
https://www.google.com/chrome/browser/desktop/index.html
https://www.mozilla.org/en-US/firefox/new/
@Lotsofgoats Testing the plugin:
Okay, it works
better option for chrome that doesn't inject html:
https://chrome.google.com/webstore/detail/emoji-keyboard/fbcgkphadgmbalmlklhbdagcicajenei
beware
keepin' it
Today's update is for @brhfl (even though they aren't a VMP).
We moved the shortname from the
alt
attribute to thetitle
attribute so they show up as tooltips in more browsers.This only works for new Emoji being posted. The old ones we're going to leave alone as extra-special beta testing Emoji without tooltips.
@shawn
@shawn
@shawn Excellent, now I know all the things I can't type because I'm not VMP! :thumbsup:
That said, erm, it may well be best to have both title and alt attributes set as such… to ensure things are in line for accessibility purposes.
@brhfl
@shawn this is what it looks like when I try to edit a message where I had a bunch of emojis.
@cengland0 How'd you enter your Emojis? I don't recognize
<span class="EmojiInput
. Looks like some kind of third party tool. What happens if you just type the text like this:Here's what I see when I edit a post with Emojis:
@shawn I used the plugin provided by @Lotsofgoats for Chrome. His message is a couple above this one. Maybe the plugin puts actual HTML code in? Doesn't sound good if that's true. There could be someone that puts in a /table or /html and if it actually uses that, it could ruin the entire page after the HTML code.
What happens if you try the plugin above and then try to edit your message?
@cengland0
@cengland0 @shawn pretty sure that the plugin is only putting a unicode emoji onto the clipboard, not injecting html. lemme paste a fire character below...
@Lotsofgoats You only did half of the test. Once you put the fire character in, then save. You then have a couple minutes where you can edit your message. Try to edit and see if you get HTML code with the SPANs in there.
@cengland0
gotta add meh.com to the blacklist and it keeps them as unicode chars
@cengland0 new link below to an extension that doesn't try to do trickery
@Lotsofgoats Link was actually above. Anyway, here's my newest test with the latest plugin.
️
@Lotsofgoats That one works much better and does allow me to edit afterwards. Thanks. That link is a keeper.
@cengland0 Stop it, just stop it. It's 78 and sunny here, and I should be out manufacturing Vitamin D and planting my garden, but I can't get away.
@OldCatLady How do you think I feel? I'm supposed to be working right now. I have high priority projects I'm trying to complete, compliance training I have to take, and I'm here screwing around with emojis for the first time. Don't tell my boss.
@shawn since this is a VMP exclusive for a bit, how about you let us claim exclusive rights to our favorite emoji. I CLAIM AND
@conandlibrarian Greedy, aren't you?!
@cinoclav you know it!
@conandlibrarian Then I would like to cybersquat @snapster's Maybe he would give me a FUKU to get it back.
@cengland0 it would work best to blackmail someone without forum moderator editing rights
@conandlibrarian I already used , you can't have it.
@cengland0 He gave you a FUKU alright. He just kept the KU.
@snapster
:octocat:
@armchair What, :trump: doesn't work?
@cinoclav
@Lotsofgoats ? The hair kind of matches!
@cinoclav :trump: works, you just have to use the right code.
Here it is --
@cengland0 I was thinking:
This one is so mine.
?
@narfcake
@Lotsofgoats You're on the internet.
http://shirt.woot.com/offers/the-internet-defined
:meh: - should be an emoji.
@Thumperchick Egging the boss or hitting him with a fry pan is not a good idea towards a second term as goat. :)
@narfcake I have that pan and I LOVE IT. I make splayed roasted chicken in it.
Are you saying my attempt at emoji breakfast octopus was unworthy?
@Thumperchick Nah, I knew what you're getting at. It's just how some can be easily reinterpreted, that's all.
I bought my pan that Saturday morning too. It arrived on Monday, and I was like whoa because I wasn't used to Woot having any sort of speed when it comes to shipping.
As soon as you loose this for all users, you will be responsible for breaking the internet. Just so you know.
:oldgoat:
This is pretty cool.
The more you know.
w? I'm I doing it right?
@medz naughty!
These are mine
Today's update is for @cengland0 who said:
And for @Willijs3, @ceagee, @oppodude, @dave, @snapster, @gio, @LaVikinga, @thismyusername, @narfcake, @pooflady, @speediedelivery who liked my reply:
We added an Emoji autocomplete widget that pops up when you type
:
and helps you find Emoji shortnames.Only available for desktop browsers. Mobile users should just use their native Emoji keyboard.
@shawn OMG, that is the most awesome thing I've ever seen. I'm not sure how you did it.
I used to be a web programmer and it would take me a long time to implement a feature like that. Here's a cookie for you. Great job!
@shawn Seems to be missing some stuff. Like :shit:.
(TC edit - is there - you just can't put a period directly after the colon.)
@shawn I do like that you're multitonal on the
@shawn Thank you! I'm just one step away from becoming my grandparents with the 12:00 constantly flashing on their VCR, so any little bit of a posting cheat is greatly appreciated.
@snapster I want a beach towel with this little guy on it. Or maybe a beach tote. It's cute!
@Shawn - are emoji order numbers the next evolution of this?
@Thumperchick if you think we haven't already discussed this at great length over here then you highly underestimate.
@shawn you never disappoint.
@Thumperchick that should really confuse fedex.
@Ignorant Order:
@Lotsofgoats
@Lotsofgoats Order: ?
When did the nomenclature change from smilies to emjoi?
@DrunkCat While it existed for quite some time before, usage of the word 'emoji' saw a considerable spike in 2015.
@DrunkCat
@DrunkCat Emoji vs emoticon is interesting, too:
@dave @snapster @brhfl @DrunkCat Emojis are actual characters defined in Unicode. To me, smilies are more picture files, like we used to use on other forums , and emoticons are the text ones we've long used, like :-) (I was always partial to (c: myself).
@jqubed I like you and am assimilating your definitions.
@DrunkCat
@Lotsofgoats INPUT MORE INPUT
@DrunkCat
@DrunkCat oh wait you're a robit you don't eat foods!
I'm surprised that no one has commented on this. I think we need to have more little stories in emoji form.
@cinoclav ^ this was the story of you posting and nobody responding, resulting in your confusion
¯\_(ツ)_/¯
@Lotsofgoats
Today's update is for @joelmw who said the autocomplete widget...
Since :shit isn't the official shortname for :poop you might get confused and still want to see all your available options in a gallery.
So, at the bottom of the autocomplete widget we added a "more..." link.
Clicking the "more..." link brings up an Emoji gallery broken up by categories.
@shawn Now come on. This is getting far too easy to use.
@shawn You are awesome!
@shawn Yeah, damnit. Stop building loyalty and making those damned users think we actually care. Right, @snapster?
@shawn It also seems like hover is working better today. But it could just be that I'm getting lucky. Or I was unlucky yesterday. In any case, several times when I hovered (and I tried every fucking square pixel, I swear), :nada:.
@shawn Oh, and it would be cool if we could search for these things, yaknow, using
@snapster was right. We're getting spoiled now. Bunch of entitled motherfuckers.
This is super!
@armchair
@Lotsofgoats
This should be the new bumper sticker for "equality"
Today's update is for @joelmw who said:
We added a search box to the Emoji picker. I like our implementation because not only are we searching on shortnames but we're also searching on keywords associated with each Emoji symbol.
For example, if I search for
alien
in Slack's Emoji picker I get the following:If you search for
alien
in our Emoji picker you find:alien
but you also find:space_invader
.Bonus update for @DrunkCat @brhfl @snapster @dave and @jqubed who were discussing the nomenclature change from "smilies" to "emoji".
The search box also helps you find the Emoji equivalent of an ASCII emoticon/smiley:
@shawn Okay, this is awesome, but I mean search on the page. Like, I wanna see who's used the emoji on a page. I'm a demanding motherfucker, aren't I?
I'm gonna check now to see if the current search finds it throughout the site or if google will find it.
@joelmw ha, yes, we had a short debate over here about whether you were talking about search in the Emoji picker or search for posts that contained specific Emoji symbols.
@shawn
@shawn Generally speaking, I want it all. In this particular case, I think the need to be able to search on a page is greater, in that I don't see other options that even come close to what that would accomplish. I tried the site search and it doesn't seem to work, btw (but you probably already knew that).
@joelmw Unfortunately, this doesn't seem to work very well, either.
@shawn Oh sweet. I have no idea about being a linguist but I'd totes like to hear more about how the labeling system works. Does each emoji basically get a dozen tags associated with it and the search uses those? Like :sa... :su... :grin.... what the fuck? There's no emoji for sandwiches?
Thank you for spelling correctly.
No update yesterday because I was busy filing out my March Madness bracket using JavaScript.
Today's update introduces a footer to the Emoji picker because I have a hard time guessing what the shortname is going to be when I select an Emoji. Also, this give us a place to promote emojione.com who is providing the excellent artwork.
Today's update is a skin tone selector.
I really like that we have diverse Emoji's but didn't like how all the skin tones selections stacked up.
Now you can select a skin tone in the Emoji picker and the rest of the skin tones are filtered out.
@shawn - We need some purple people, please.
@KDemo But that might invoke the purple people eater!
@KDemo We need lots of purple.
Today's update adds a "frequently used" section. I'm not exactly sure about the name of this section but I like that a section like this exists to help promote some standard Emoji usage patterns. We purposely used the Emoji equivalents of Facebook's recently redesign like button for this section.
These "frequently used" Emojis also show up as the initial set of the autocomplete widget as well.
Bonus update today is that we made the skin tone selection a setting that gets associated with your account.
@shawn :no pop up wiget here: Using FF on Win 8.1
@therealjrn your FF window isn't sized small enough to make the page think you're on a mobile device is it?
@Ignorant mmmm. Could be because I'm on a netbook...maybe it thinks I'm portable.
@therealjrn yup willing to bet that's it. If you go to the main page meh.com do you have the write up to the right of the product or under it?
@shawn - Wouldn't it be cool if you could turn the clickfaces into emojis? - Or maybe the emoji factory would have to do that.
@Ignorant It's on the right.
@therealjrn hmm that's strange, so main page is giving you the desktop version, but forums might be giving you the mobile version
@Ignorant Using Chrome browser it works! I wonder why my FireFox doesn't work
I think the default emoji size should be bigger... they get dwarfed compared to the text....
edit: wait are they already bigger than before? I swore they were smaller before....
@thismyusername Yea they need to be bigger... while they are a good size in the initial post, they get super tiny in the replies...
I finally got it to work!!!! Holy shit!!!
@somf69
YASSSS worth the money just for the !!! (ok not really just that but WIN!)
GIF>Emoji
@rileyper meh. I don't think this in any manner changes the dynamic of the forums. It is pretty cool though
:moose:
:goose:
:lava:
:kick:
:toy:
:smh:
:rocks:
:cops:
:amazon:
Feeling like Emoji support is working pretty well at this point. I'd think we should open this up to non VMP members at this point. Thoughts?
@shawn :thumbsup:
@shawn :meh: :shrug:
@shawn - :invite: :everyone: to the :party:!
@shawn set it free
@shawn
Thanks to all the VMP members who helped us out. Emoji is now available for everyone.
@shawn
@shawn
The next week or two will be "fun"
@brhfl finally
@shawn It is with a heavy hard I must bring this to your attention. I cannot help but to notice the obvious lack of a :drone emoji.
As I'm positive this is merely a technical malfunction, I will gleefully be patient as this situation receives your complete, and undivided attention.
Your Pal,
@ruouttaurmind
PS: Has this been implemented over on the redheaded stepchild site, drone.horse?
*heart. Heavy heart. Damn auto-correct.
@shawn Why is there no speaker dock emoji? I am absolutely furious. Pls, ill animate it if you want me to
Just a heads up not sure if already noticed or not but it seems to be parsing for emoji in urls...
And I will not let it go until there is a :dave: emoji. I won't. I want a little dave head.
Ok, that does not sound good at all, but you know what I mean.
@mfladd _
One more update here: we added an Emoji button to the Markdown editor.
@shawn
Noticed it a little while ago, though for some reason when I wanted to url-ize a few words a little while ago, the emoji screen opened up also.
@FroodyFrog good catch. we'll fix that.
@shawn thanks, it just popped up when I went to embolden a word. It also popped up when I went to make a list of bullets.