A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 15KB

1 year ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Which emoji scissors close (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://wh0.github.io/2020/01/02/scissors.html">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Which emoji scissors close</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://wh0.github.io/2020/01/02/scissors.html" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Ah, scissors.
  71. They’re important enough that we have an emoji for them.
  72. On your device, it appears as ✂️.
  73. Unlike the real world tool it represents, the emoji’s job is to convey the idea, especially at small sizes.
  74. It doesn’t need to be able to swing or cut things.
  75. Nevertheless, let’s judge them on that irrelevant criterion.</p>
  76. <h2 id="methodology">Methodology</h2>
  77. <p>Conveniently, the emojis studied in this post depict the scissors from a viewpoint parallel to the axis of the hinge.
  78. This allows us to simulate swinging the blades with basic image rotations.
  79. I collected a dataset of emojis from different vendors from <a href="https://emojipedia.org/black-scissors/">Emojipedia</a>.
  80. In the following experiments, I swing the blades around the hinge until the handles collide with each other.</p>
  81. <p>The evaluation is all subjective.</p>
  82. <h2 id="left-handed-scissors">Left handed scissors</h2>
  83. <p>It turns out that some vendors depict left handed scissors, where the top blade swings counterclockwise.
  84. I’ve put these in their own bracket.</p>
  85. <h3 id="messenger">Messenger</h3>
  86. <p><img src="https://wh0.github.io/assets/2020/scissors-messenger-open.png" alt=""></p>
  87. <p><img src="https://wh0.github.io/assets/2020/scissors-messenger-closed.png" alt=""></p>
  88. <p>You get use out of about half of the blade.
  89. It’s not great.</p>
  90. <h3 id="samsung">Samsung</h3>
  91. <p><img src="https://wh0.github.io/assets/2020/scissors-samsung-open.png" alt=""></p>
  92. <p><img src="https://wh0.github.io/assets/2020/scissors-samsung-closed.png" alt=""></p>
  93. <p>These scissors achieve about the same, with half of the blade being usable.
  94. But these ones look like they are better at poking than Messenger’s, so I gave them a slight lead.</p>
  95. <h3 id="joypixels-">JoyPixels 🥇</h3>
  96. <p><img src="https://wh0.github.io/assets/2020/scissors-joypixels-open.png" alt=""></p>
  97. <p><img src="https://wh0.github.io/assets/2020/scissors-joypixels-closed.png" alt=""></p>
  98. <p>These are very good!
  99. It’s probably within the margin of experimental error that they don’t close all the way.
  100. JoyPixels receives the gold medal in left handed scissors.</p>
  101. <h2 id="right-handed-scissors">Right handed scissors</h2>
  102. <p>Now on to the main event, the most popular type of scissors.</p>
  103. <h3 id="microsoft">Microsoft</h3>
  104. <p><img src="https://wh0.github.io/assets/2020/scissors-microsoft-open.png" alt=""></p>
  105. <p><img src="https://wh0.github.io/assets/2020/scissors-microsoft-closed.png" alt=""></p>
  106. <p>Microsoft’s emoji have a heavy black outline.
  107. In my professional opinion, the outline is not part of the scissors depicted.
  108. And even with that concession, the handles collide very early.
  109. You couldn’t cut with these.
  110. I get frustrated just looking at the image of the closed position.</p>
  111. <h3 id="apple">Apple</h3>
  112. <p><img src="https://wh0.github.io/assets/2020/scissors-apple-open.png" alt=""></p>
  113. <p><img src="https://wh0.github.io/assets/2020/scissors-apple-closed.png" alt=""></p>
  114. <p>These scissors look very heavy duty.
  115. But you can’t cut very far at all.</p>
  116. <h3 id="google">Google</h3>
  117. <p><img src="https://wh0.github.io/assets/2020/scissors-google-open.png" alt=""></p>
  118. <p><img src="https://wh0.github.io/assets/2020/scissors-google-closed.png" alt=""></p>
  119. <p>Actually it’s not very clear if these are right handed or left handed.
  120. But these close very little.</p>
  121. <h3 id="facebook">Facebook</h3>
  122. <p><img src="https://wh0.github.io/assets/2020/scissors-facebook-open.png" alt=""></p>
  123. <p><img src="https://wh0.github.io/assets/2020/scissors-facebook-closed.png" alt=""></p>
  124. <p>The handles on these collide very close to the hinge, so they barely close at all.
  125. If you could file those parts down, you could close them a lot more:</p>
  126. <p><img src="https://wh0.github.io/assets/2020/scissors-facebook-closed2.png" alt=""></p>
  127. <p>But you couldn’t, because 📁 is the only file you can get in emoji, so this altered version doesn’t count.</p>
  128. <h3 id="whatsapp-">WhatsApp 🥉</h3>
  129. <p><img src="https://wh0.github.io/assets/2020/scissors-whatsapp-open.png" alt=""></p>
  130. <p><img src="https://wh0.github.io/assets/2020/scissors-whatsapp-closed.png" alt=""></p>
  131. <p>These are pretty good.
  132. They almost fully close.
  133. WhatsApp gets third place.</p>
  134. <h3 id="emojidex-">emojidex 🥈</h3>
  135. <p><img src="https://wh0.github.io/assets/2020/scissors-emojidex-open.png" alt=""></p>
  136. <p><img src="https://wh0.github.io/assets/2020/scissors-emojidex-closed.png" alt=""></p>
  137. <p>These close perfectly!
  138. emojidex gets second place though, because the shading doesn’t inspire confidence in the blade geometry.</p>
  139. <h3 id="lg-">LG 🥇</h3>
  140. <p><img src="https://wh0.github.io/assets/2020/scissors-lg-open.png" alt=""></p>
  141. <p><img src="https://wh0.github.io/assets/2020/scissors-lg-closed.png" alt=""></p>
  142. <p>These also close perfectly.
  143. First place goes to LG!</p>
  144. <h2 id="non-conducive-depictions">Non-conducive depictions</h2>
  145. <p><img src="https://wh0.github.io/assets/2020/scissors-twitter-open.png" alt=""></p>
  146. <p><img src="https://wh0.github.io/assets/2020/scissors-twitter-closed.png" alt=""></p>
  147. <p>These are left handed.</p>
  148. <p>This depiction is highly simplified, so much so that it’s not clear how the handles would interact with each other.
  149. They appear to transition seamlessly from the blade, such that the two handles occupy different depths in the image.
  150. Supposing that the handle materials could “overlap” in the closed position, we would be able to swing these to the point where one handle pokes into the opening of the other handle.
  151. Even if we allow the handles to overlap, they don’t close all the way.
  152. They’d be uncomfortable too, with the place where you actually apply pressure being only half as thick as they should be.</p>
  153. <h3 id="openmoji">OpenMoji</h3>
  154. <p><img src="https://wh0.github.io/assets/2020/scissors-openmoji-open.png" alt=""></p>
  155. <p>These are right handed.</p>
  156. <p>These scissors start out with the handles already overlapping.
  157. We could apply the same lenient overlapping-handles rule from the Twitter experiment, but these don’t even have the hinge drawn.
  158. I traced out the outline of the back blade to judge where would be a good place to put a hinge.</p>
  159. <p><img src="https://wh0.github.io/assets/2020/scissors-openmoji-hinge.png" alt=""></p>
  160. <p>In order to have the hinge centered on the metal part on both sides, it would probably have to be about where the handle starts.</p>
  161. <p><img src="https://wh0.github.io/assets/2020/scissors-openmoji-closed.png" alt=""></p>
  162. <p>With all guesswork and alterations to the experiment, these close pretty well.</p>
  163. </article>
  164. <hr>
  165. <footer>
  166. <p>
  167. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  168. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  169. </svg> Accueil</a> •
  170. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  171. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  172. </svg> Suivre</a> •
  173. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  174. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  175. </svg> Pro</a> •
  176. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  177. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  178. </svg> Email</a> •
  179. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  180. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  181. </svg> Légal</abbr>
  182. </p>
  183. <template id="theme-selector">
  184. <form>
  185. <fieldset>
  186. <legend><svg class="icon icon-brightness-contrast">
  187. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  188. </svg> Thème</legend>
  189. <label>
  190. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  191. </label>
  192. <label>
  193. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  194. </label>
  195. <label>
  196. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  197. </label>
  198. </fieldset>
  199. </form>
  200. </template>
  201. </footer>
  202. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  203. <script>
  204. function loadThemeForm(templateName) {
  205. const themeSelectorTemplate = document.querySelector(templateName)
  206. const form = themeSelectorTemplate.content.firstElementChild
  207. themeSelectorTemplate.replaceWith(form)
  208. form.addEventListener('change', (e) => {
  209. const chosenColorScheme = e.target.value
  210. localStorage.setItem('theme', chosenColorScheme)
  211. toggleTheme(chosenColorScheme)
  212. })
  213. const selectedTheme = localStorage.getItem('theme')
  214. if (selectedTheme && selectedTheme !== 'undefined') {
  215. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  216. }
  217. }
  218. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  219. window.addEventListener('load', () => {
  220. let hasDarkRules = false
  221. for (const styleSheet of Array.from(document.styleSheets)) {
  222. let mediaRules = []
  223. for (const cssRule of styleSheet.cssRules) {
  224. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  225. continue
  226. }
  227. // WARNING: Safari does not have/supports `conditionText`.
  228. if (cssRule.conditionText) {
  229. if (cssRule.conditionText !== prefersColorSchemeDark) {
  230. continue
  231. }
  232. } else {
  233. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  234. continue
  235. }
  236. }
  237. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  238. }
  239. // WARNING: do not try to insert a Rule to a styleSheet you are
  240. // currently iterating on, otherwise the browser will be stuck
  241. // in a infinite loop…
  242. for (const mediaRule of mediaRules) {
  243. styleSheet.insertRule(mediaRule.cssText)
  244. hasDarkRules = true
  245. }
  246. }
  247. if (hasDarkRules) {
  248. loadThemeForm('#theme-selector')
  249. }
  250. })
  251. </script>
  252. </body>
  253. </html>