129 comments

[ 3.8 ms ] story [ 197 ms ] thread
Visualize emojis to scale. The chicken is not bigger than the car anymore!
I was half-expecting there to be a gigantic jump to the sun emoji and then the galaxy emoji, but that might have presented rather interesting engineering challenges at that point.
I love the idea, but the algorithm for scaling seems a bit off. For example, it shows the human as much larger than the car.
Maybe it’s one of those tiny Smart Cars.
I think it’s by height in which case it makes sense… maybe.
Some seem by height and some by width, and some make no sense at all.
never knew i needed this until i tried
It's really laggy by the time you get to Tokyo Tower. My computer is hot.
This page was running at about 3fps on my M1 macbook.
That's what I found too, in Firefox. I then switched to Safari and it was buttery smooth everywhere (MBP 16", not M1). Haven't tried in Chrome yet. I wonder why the performance varies so wildly...
Huh? I was about to comment the exact opposite, I was super impressed by how smooth it was! And that's running on a 3 year old low-end ryzen 3 laptop processor, on firefox in fedora.
Funny idea, but lot of these seem off.

- A chicken egg is taller than 5cm.

- I would say a tulip is bigger than a phone.

- The okay hand sign says it's 21 cm.My hands are larger than average, but definitely smaller than 21cm.

- A duck isn't bigger than a goat.

- An elephant is smaller than a house.

I think some measurements are widths and some are heights.
I think they're actually all by height, and if you google them the OP actually matches up. e.g. googling

"duck height": 20 – 30 in (51 – 76 cm)

"goat height": 16 – 23 in (40 – 58 cm)

Maybe it would be better to do them by mass.

Is your mouth height 15cm/6in?
A little unfortunate if they just used the automatic Google info results. The duck one is the Indian Runner duck - a Mallard would make more sense per the emoji.
I'm curious how he determined that fire is 40cm
Obviously didn't measure a California wildfire...
The one that most confused me was lips bigger than the heart
Is it rendering the Emojis using the local emoji set so for example if I'm on an Android phone I will see the Android emojis and if I'm on an iPhone I will see the iPhone emojis?
Yes! Author here, the emojis text with css transforms.
Unfortunately the side effect is that some emojis, live the gorilla, are only a head in my font. Still, it's cute, despite the weird scales (your mouth is 12cm??)
What is the yellow smiley face that's twice as large as Japan but smaller than the earth and oh god I can see it in the sky it's look--
oh nm that's the moon
Definitely had the same question, and the exact same realisation. We must be Android users!
I wrote the first comment before I realized what it was. I thought it was a joke where the author intentionally mis-sized an object.

Only after I submitted did it occur to me that the size could be similar to the moon's

It's the moon from Majora's Mask, clearly
Neat concept.

As someone not very up-to-date in Web UI techniques, I was curious as to how the array was being advanced on scroll. Unfortunately, it looks like the answer is basically polling. The code constantly calls window.requestAnimationFrame(), checking window.pageYOffset. This means that the page is constantly doing work, even at idle.

Surely the more correct way is to install an onscroll handler or something, right?

The correct way would be a mix of those two strategies: an onscroll handler that schedules an update through requestAnimationFrame (ensuring that it only gets scheduled once until the next frame update actually executes).
The correct way is the way that works, which this does.
Well, perhaps, but it's unnecessarily inefficient.
I mean, it's inefficient as for the 120 seconds you play with it. I don't think it's worth spending more time trying to perfect something like this.
it barely works for me on mobile. very jittery
Request animation frame exists specifically to avoid ‘traditional’ polling. You’re thinking more of setInterval() which is the old way of doing it. The requestAnimationFrame docs are a good read, there are lots of performance benefits.
I didn't know that we could get a 5.5cm credit card...
Everything is by height.

V2 should try everything by mass.

Great idea! Why vertical scrolling though?
Goat: 45cm

Duck: 50cm

Might as well say “shuffled emojis with random data attached”

I managed to force this data to sort-of work by using a pygmy goat at 40-50cm tall, and a mallard deck at 50-65cm long (even larger than the site suggests). So, sure.

But if you use a more typical domestic goat, like an Irish Goat, you get a height of 80-90cm. The length is even longer.

Arm: 30cm. I think my arm is bigger than that. And fire: 40cm. This seems somewhat arbitrary lol
Let's play picky:

In anatomy, the arm is the part between the elbow and the shoulder. Below the elbow is the forearm.

With that in mind, 30cm for the arm is definitively a sound measure... and the name of the emoji is wrong. On every phone, keyboard and app.

tl;dr; what is commonly called arm is in fact arm + forearm. Don't blame the author for being correct.

The emoji isn't called "arm" though, it's "flexed biceps". Alternative names are: biceps | comic | flex | flexed biceps | muscle. [0]

And every popular implementation shows arm + forearm + fist. [1] Giving only one part of that as the length is just wrong.

Even if it were called arm, I would argue that that should be shoulder to wrist, since that's what commonly called an arm. It's also the definition that Merriam Webster has. [2]

[0] https://unicode.org/emoji/charts/emoji-list.html#1f4aa

[1] https://emojipedia.org/flexed-biceps/

[2] https://www.merriam-webster.com/dictionary/arm

Just so you know, I'm fine with calling "arm" what is between shoulder and wrist.

I was just annoyed that GP seemed to diminish OP's efforts in building their page by nitpicking chosen lengths and terms, and I chose to enter the game rather than nothing.

Your comments are welcome and informative, thank you for that. Dictionaries are descriptive and not normative, which confirms the common use of arm as "wrist to shoulder".

> Just so you know, I'm fine with calling "arm" what is between shoulder and wrist.

Great. Since that's actually what it means, in ordinary English. What you call "actually correct" "in anatomy" is professional sub-language and has no bearing on this forum. (Or any other, besides fora for professional anatomists.)

Edit: Sorry, replied to your first paragraph before even reading the rest and noticing that you actually agree... I was already slightly annoyed by your previous post, so wrote hastily. I apologize.

Yeah my mouth isn't 15cm/6in wide, definitely around half that
Well it says "to scale" not "to realistic scale" so it could be a made-up scale
Also, the "running man" being bigger than a cow and about the same size as a horse...

But what really bugs me is that it simply uses some font it finds on your system, so on my slightly outdated Linux version it only shows about 70% of the emojis. I mean, if there was ever a perfect use case for webfonts, it would be this page...

The average man is taller in height than the average cow and shorter in total height than the average horse.

His cow is about the average total height of a cow at 160cm.

He has an oddly short man though at 165cm / 5'5".

And he says the horse is the same size, but that would be only 16 hands. That would be the withers size of an average horse, but the total height of only a pony.

Some of these don't show up for me (like Saturn). This might work better with a web-font? Although then you'd lose the harmonious platform emojis. I wonder if there's a way to check if a unicode character exists in a font and dynamically substitute, without using canvas.
Quick and dirty idea: maybe try rendering it to an offscreen span/div, get its size and compare it to a well known size of what gets substituted for a generic symbol if it doesn't exist, and if the size matches that, replace with something else.
(comment deleted)
(comment deleted)
Can someone please tell me why I was hypnotised by this? Do you think this ethical to do to another human being looking for a productive afternoon!???!?!?!

/s

Should put an eggplant at the end :)
Should have "banana for scale" checkbox
Ok on my emoji set the Gorilla (Silverback) is just it's head. So it seems to imply a Gorilla has a head the size of a Llama.
why couldn't this be done with SVG?
They missed this at the end:

https://emojipedia.org/milky-way/

and this at the other end:

https://emojipedia.org/microbe/

It would be better to set the data anyway, and let the code that shows the emojis determine whether to skip the emoji or not.
agreed! they could just use an arbitrary scale.
OK, I guess that's technically understandable and all, but in this case I hope they understand their chart is completely and utterly unusable now.
Ah the ReactJS emoji!
So, is the emoji “tiny” like an atom, or “huge” like React?
React is like 35 KB gzipped. Pretty huge in terms of JavaScript bundle size, but still physically very very small!
Oh, for sure. React is pretty small on its own. It's when the whole site is bundled into an SPA that's over 1 MB is it an issue. I wasn't making a jab at React so much as a jab at people using React (IMO) irresponsibly.
The popularity of Emoji to me is not good for communication.

Instead of careful and clarity in writing, people choose Emoji to respond to what needs to be more clarified.

So, if it's hard to express your thought, let's pick an Emoji!?

At work, this leads to more trouble in writing. Most of JIRA tickets are mostly non-existent that it's badly written, confusing to the developers and rest of the team.

Emoji might be just one reason for that. But anyway, it just shows the trouble on how people have problem in writing communication.

Do people overuse Emoji ? I don't think this is about overuse or not, it's about people failed at expressing their thought through writing.

Emojis are fast, easy and universally understood, especially across language barriers.

Not all responses between humans need to be written in prose. Using images has been and will continue to be a significant way for humans to communicate with.

You missed the point here. Instead of a clear explanation in written form, people think an emoji is enough, which is a problem. As the author doesn't want to know how other 're feeling , they want to know their thoughts instead.
Perhaps they missed whatever point you were making, but your comment is largely offtopic.
People also use gestures and facial expressions while talking (see Italy for a frequently portrayed nation for this), why not use the next best thing in (non-formal) communication?
(comment deleted)