davidbgk
/
larlet-fr-david-cache
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Vydání 0 Aktivita
A place to cache linked articles (think custom and personal wayback machine)
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
92 Revize
1 Větev
Strom: dd9d499cdc
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „dd9d499cdc“
${ noResults }
larlet-fr-david-cache/cache/350fd6131fbc77101106a9215b9.../index.html

index.html 43KB
Surový Blame Historie

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641 
  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>

  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Superhuman is Spying on You (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://mikeindustries.com/blog/archive/2019/06/superhuman-is-spying-on-you">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Superhuman is Spying on You (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://mikeindustries.com/blog/archive/2019/06/superhuman-is-spying-on-you">Source originale du contenu</a></h3>

  463.     <p>Over the past 25 years, email has weaved itself into the daily fabric of life. Our inboxes contain everything from very personal letters, to work correspondence, to unsolicited inbound sales pitches. In many ways, they are an extension of our homes: private places where we are free to deal with what life throws at us in whatever way we see fit. Have an inbox zero policy? That’s up to you. Let your inbox build into the thousands and only deal with what you can stay on top of? That’s your business too.</p>

  464. 

  465. <p>It is disappointing then that one of the most hyped new email clients, Superhuman, has decided to embed hidden tracking pixels inside of the emails its customers send out. Superhuman calls this feature “Read Receipts” and turns it on by default for its customers, without the consent of its recipients. You’ve heard the term “Read Receipts” before, so you have most likely been conditioned to believe it’s a simple “Read/Unread” status that people can opt out of. <strong>With Superhuman, it is not</strong>. If I send you an email using Superhuman (no matter what email client <em>you</em> use), and you open it <a href="https://www.youtube.com/watch?v=Hh_vLKlz2Mc" target="_blank" rel="noopener noreferrer">9 times</a>, this is what I see:</p>

  466. 

  467. <p><img src="/blog/images/inline/SuperhumanLog.png" alt="A log of every time someone has opened your email and what location they opened it from." class="alignnone size-full wp-image-29106" srcset="/blog/images/inline/SuperhumanLog.png 995w, /blog/images/inline/SuperhumanLog-300x158.png 300w, /blog/images/inline/SuperhumanLog-768x405.png 768w" sizes="(max-width: 995px) 100vw, 995px"/></p>

  468. 

  469. <p>That’s right. A running log of every single time you have opened my email, including your location when you opened it. Before we continue, ask yourself if you <strong>expect</strong> this information to be collected on you and relayed back to your parent, your child, your spouse, your co-worker, a salesperson, an ex, a random stranger, or a stalker every time you read an email. Although some one-to-many email blasting software has used similar technologies to track open rates, the answer is no; most people don’t expect this. People reasonably expect that when — and especially where — they read their email is their own business.</p>

  470. 

  471. <p>When I initially tweeted about this last week, the tweet was faved by a wide variety of people, including current and former employees and CEOs of companies ranging from Facebook, to Apple, to Twitter:</p>

  472. 

  473. <p><a href="https://twitter.com/mikeindustries/status/1144288602001571840"><img src="/blog/images/inline/Mike.png" alt="" class="alignnone size-full wp-image-29131" srcset="/blog/images/inline/Mike.png 1166w, /blog/images/inline/Mike-300x115.png 300w, /blog/images/inline/Mike-768x294.png 768w, /blog/images/inline/Mike-1024x392.png 1024w" sizes="(max-width: 1166px) 100vw, 1166px"/></a></p>

  474. 

  475. <p>It was also met critically by several Superhuman users, as well as some Superhuman investors (who never disclosed that they were investors, even in past, private conversations with me). I want to talk about this issue because I think it’s instructive to how we build products and companies with a sense of ethics and responsibility. I think what Superhuman is doing here demonstrates a lack of regard for both.</p>

  476. 

  477. <p>First, a few caveats:</p>

  478. 

  479. <ol>

  480. <li>I was invited into the Superhuman service several months ago. I began their onboarding process, was excited to try using it as my primary email client, and bailed out the moment I found out about this spyware functionality.</li>

  481. <li>Nothing in this post evaluates other things about the Superhuman service. I’m not here to tell you it isn’t fast, isn’t good looking, or doesn’t save you time. I suspect it is all of those things, in fact. So if your response to this post is <em>“BUT I LIKE IT!”</em>, I believe you that there are things to like about it. That is not the subject of this post.</li>

  482. <li>I know people whom I consider to be ethical people who use workplace software that embeds tracking pixels in emails.</li>

  483. </ol>

  484. 

  485. <p>Second, I want to talk about <em>why</em> this particular issue is so important. Not why privacy is important; we are all already learning that the hard way. Rather, why making ethical decisions at the earliest stages of your company is important.</p>

  486. 

  487. <p>When a company first forms, there are no norms or principles guiding how its people should make decisions. It’s basically just what’s in the founders’ heads. With each decision a company makes, its “decision genome” is established and subsequently hardened. You’ve decided in your first month that you’re only going to hire engineers from Top 10 engineering schools? That’s now part of your genome and will determine the composition of your company. You’ve decided to forgo extra profits by keeping your prices low for consumers? That’s now part of your genome. You’ve decided to employ a single dark pattern to trick users into adding more things to their shopping cart? Part of your genome.</p>

  488. 

  489. <p>The reason this matters is that what may seem like small decisions early on become the basis for many more decisions down the road. These decisions affect your <strong>ethical trajectory</strong> as a company. Let’s use the dark pattern example. Maybe the shopping cart thing was pretty minor and you were able to rationalize it internally in a variety of ways, including the fact that the extra item in the user’s cart was inexpensive and provided value (like a product warranty, for instance). Down the road, when employees want to employ more dark patterns, here is how the conversation would go:</p>

  490. 

  491. <p><em>Greg: “Hey, we aren’t getting enough people to opt-into our mailing list when they sign up. Can we try maybe unchecking that box by default but using language such that leaving it unchecked opts people in?”</em></p>

  492. 

  493. <p><em>Desi: “Wouldn’t we be intentionally deceiving users if we did that?”</em></p>

  494. 

  495. <p><em>Greg: “Uhhhh, we already add things to your shopping cart that you don’t even ask for!”</em></p>

  496. 

  497. <p><em>Desi: “True. This seems like less of a big deal than that. I guess I’m OK with it.”</em></p>

  498. 

  499. <p>If you’ve never worked at a tech company before, this is how things go. When faced with making a product decision that is even mildly uncomfortable, employees often first look towards expressed company principles like “Always put the customer first”, but the next thing they look for is <em>precedent</em>. What other decisions have we made that look like this one? Designers do this. Engineers do this. Product managers do this. Executives do this. It’s an easy way to inform your current decision, and it’s also an easy way to <em>cover your ass</em>. Imagine the above decision was made by a product manager, and later on the company was called out publicly on it. The CEO or Head of Product marches over to the product manager and says “what were you thinking here?!?” The product manager needs only to point to the shopping cart behavior in order to let him or herself off the hook.</p>

  500. 

  501. <p>The point here is that companies decide early on what sort of companies they will end up being. The company they may <em>want</em> to be is often written in things like “core values” that are displayed in lunch rooms and employee handbooks, but the company they <em>will</em> be is a product of the actual decisions they make — especially the tough decisions.</p>

  502. 

  503. <p>So back to Superhuman. Here we have a company that professes to create a better email experience mainly through better design and engineering. So far so good! Those who know me know that I would be among the first people to sign up for something like this and also among the most vocal to evangelize it. Heck, I love <a href="https://www.amazon.com/s?k=kohler+flipside">a certain showerhead</a> so much that I:</p>

  504. 

  505. <ol>

  506. <li>Have bought one for every shower in every place I’ve lived for the past several years.</li>

  507. <li>Bought one for every member of my leadership team at Twitter for Christmas.</li>

  508. <li>Used to keep a brand new spare one in my trunk to give away to friends every time the subject came up.</li>

  509. <li>Turned <a href="https://abs-0.twimg.com/emoji/v2/svg/1f6bf.svg">the damn showerhead emoji on Twitter into a Flipside</a>. Actually, my team did this, but as an homage to my love for it.</li>

  510. </ol>

  511. 

  512. <p>In other words, when I see great design, I proactively try to spread it as far and wide as possible.</p>

  513. 

  514. <p>What I see in Superhuman though is a company that has mistaken taking advantage of people for good design. They’ve identified a feature that provides value to some of their customers (i.e. seeing if someone has opened your email yet) and they’ve trampled the privacy of every single person they send email to in order to achieve that. Superhuman never asks the person on the other end if they are OK with sending a read receipt (complete with timestamp and geolocation). Superhuman never offers a way to opt out. Just as troublingly, <strong>Superhuman teaches its user to surveil by default</strong>. I imagine many users sign up for this, see the feature, and say to themselves “Cool! Read receipts! I guess that’s one of the things my $30 a month buys me.”</p>

  515. 

  516. <p>When products are introduced into the market with behaviors like this, customers are trained to think they are not just legal but also ethical. They don’t always take the next step and ask themselves “wait, <em>should</em> I be doing this?” It’s kind of like if you walked by someone’s window at night and saw them naked. You could do one of two things: a) look away and get out of there, realizing you saw something that person wouldn’t want you to see, or b) keep staring, because if they really didn’t want anyone to see them, they should have closed their blinds. It’s two ways of looking at the world, and Superhuman is not just allowing for option B but <em>actively causing it to happen</em>. It’s almost as if Superhuman is aiming a motion-sensitive camera outside people’s windows and sending alerts when there is motion. It’s automated and designed to capture info when your family, your friend, your co-worker, or your victim is not aware. You may think “victim” is too harsh of a word to use here, but remember, we aren’t talking about <em>you</em>. We are talking about anyone who might use Superhuman.</p>

  517. 

  518. <p>Even though most of the feedback I’ve gotten about raising this issue has been supportive, here is a collection of replies I’ve gotten on Twitter, so we can address them all in one place:</p>

  519. 

  520. <ol>

  521. <li><strong>“Email clients have done this for years. Even Apple does this with iMessage.”</strong> — Multiple People. This argument is naive at best and disingenuous at worst. Superhuman’s competitors are Apple Mail, Gmail, and Outlook. Exactly zero of those companies insert a tracking pixel into their emails. Furthermore, both Outlook and iMessage use Read Receipts that are turned off by default and controlled completely by the receiving user. In other words, when you buy a new iPhone or start using Outlook, no one requesting an Outlook or iMessage read receipt can receive one without your explicit permission. Furthermore, even if you <em>do</em> turn those on, it’s a simple one-time receipt… not a log of times and geolocations every time the recipient views the message. Both Microsoft and Apple — as well as other messaging platforms like Twitter, LinkedIn, and Signal — have designed their read receipts in an ethical way. Superhuman has not. Also ask yourself what the backlash would be if a company somehow retrofit these spying capabilities on top of iMessage. What if every single time you viewed someone’s text message, your phone sent a timestamp and location to back to the sender, creating a map of your movements? There’s a reason Apple doesn’t allow this.</li>

  522. <li><strong>“Other tools like MailChimp, PersistIQ, SendGrid, and MailTrack do this.”</strong> — Multiple People. Superhuman is an e-mail client, much like Gmail, Outlook, and Apple Mail. It is not mail automation software. Mass mailing companies, for the most part, use that technology to track open rates and also to *stop* sending out emails to people who haven’t opened them in months. There are indeed some sales-enablement companies that use this technology to track individual opens, and I find that just as creepy. The main point here is: just because technology is being used unethically by others does not mean you should use it unethically yourself. Harmful pesticides have also been around for years. That doesn’t mean you should use them yourself.</li>

  523. <li>

  524. <p><a href="https://twitter.com/sheynk/status/1144347611148771329?ref_src=twsrc%5Etfw"><img src="/blog/images/inline/Sheynk-e1562044774641.png" alt="" class="alignnone size-full wp-image-29122" srcset="/blog/images/inline/Sheynk-e1562044774641.png 1155w, /blog/images/inline/Sheynk-e1562044774641-300x124.png 300w, /blog/images/inline/Sheynk-e1562044774641-768x317.png 768w, /blog/images/inline/Sheynk-e1562044774641-1024x423.png 1024w" sizes="(max-width: 1155px) 100vw, 1155px"/></a></p>

  525. <p>Where to start with this one from <a href="https://www.linkedin.com/in/sheynkman/">Gary Sheynkman</a>. <em>You</em>, the sender, do not get to decide how <em>I</em>, the receiver, respond to you. Not returning your email right away is not passive-aggressive. It’s often just being busy or prioritizing. <a href="https://twitter.com/EricaJoy/status/1144599839042183168">As pointed out by Erica, being “left on read” can send unintended hurtful messages</a>. Furthermore, in the workplace, this can be used as a tool to monitor or coerce around-the-clock work.</p></li>

  526. <li>

  527. <p><a href="https://twitter.com/nickabouzeid/status/1144329661209407489?ref_src=twsrc%5Etfw"><img src="/blog/images/inline/Nick-e1562044724372.png" alt="" class="alignnone size-full wp-image-29123" srcset="/blog/images/inline/Nick-e1562044724372.png 1156w, /blog/images/inline/Nick-e1562044724372-300x109.png 300w, /blog/images/inline/Nick-e1562044724372-768x278.png 768w, /blog/images/inline/Nick-e1562044724372-1024x371.png 1024w" sizes="(max-width: 1156px) 100vw, 1156px"/></a></p>

  528. <p>This is  from <a href="https://www.linkedin.com/in/nickabouzeid/">Nick Abouzeid</a>, a Superhuman investor (who did not disclose that, but I got it by going to his website) from the aptly named “Shrug Capital”. This comment gets to the crux of the ethics question we are talking about here. When you are making software, you can either say “lets exploit everything in the world that can act to our benefit” or you can say “lets build something that’s great for the world”. This person looks at all people who use email as potential people to exploit. How many people use email? 2 billion or so? How many of those have images turned off? Probably a tiny percentage. And how many are expecting that every time they open an email from a friend, their friend gets notified with their geolocation? I would guess almost zero. So what this person is essentially saying is that since most people leave their curtains open at night, it’s ethical for the company he funds to film what goes on inside. Furthermore, <strong>Superhuman doesn’t even let its own customers turn images off. So merely by using Superhuman, you are vulnerable to the exact same spying that Superhuman enables you to do to others</strong>. He is right about one thing though: <em>because</em> of spyware-foisting companies like Superhuman, you should unfortunately turn off all image loading in your email client.</p></li>

  529. </ol>

  530. 

  531. <p>When you start to think about all of the ways Superhuman can be used to violate privacy, you really wonder why The New York Times spent <a href="https://www.nytimes.com/2019/06/27/technology/superhuman-email.html">1,200 words</a> on a tongue-bath that doesn’t even talk meaningfully about privacy issues at all. We don’t need journalism to tell us where venture capitalists are putting other people’s money. We need it to examine the ramifications of the technology we are pushing into the world and in what ways it might shift the <a href="https://en.wikipedia.org/wiki/Overton_window">Overton Window</a> for Ethics in either helpful or hurtful ways.</p>

  532. 

  533. <p>There are some bad people out there, so what are some bad things that people can do with technology like this? Here are just a few:</p>

  534. 

  535. <ul>

  536. <li>An ex-boyfriend is a Superhuman user who pens a desperate email. Subject: <em>“I’ve been thinking about us”</em>. He sends it to his former partner. She reads it when she gets to work in Downtown Los Angeles at 9am. She reads it again before dinner with friends in Pasadena at 7pm. She reads it again at home in Santa Monica at 1am. Over the weekend, she takes a trip to New York and reads it again. Twice. She decides not to answer the email, because her ex has stalked her in the past and she doesn’t want to communicate any further. But because of the tracking pixel, her email is <em>always communicating</em>, and it’s sharing info she does not want to send and doesn’t even know she is sending. She didn’t reply, but her ex still knows she read his email five times, including most likely in her bed. And he knows she took a trip to New York.</li>

  537. <li>A pedophile uses Superhuman to send your child an email. Subject: <em>“Ten Tips to Get Great at Minecraft”</em>. Your child keeps the email in their inbox and refers back to it often over the course of a year. Sometimes when they are at home in Vermont. Sometimes when they are at school in New Hampshire. Sometimes when they are with their grandparents in Massachusetts. Every time your child opens the email, that person knows generally where they are (or specifically, if they have other info to triangulate against).</li>

  538. <li>Superhuman decides they can make more money by supplementing their subscription fees with data licensing agreements. Maybe they decide to leave out data from paying Superhuman customers but they include location history from every single person you’ve ever emailed, because they have no contract with those people. Location maps with timestamps, other insights about things like working hours and locations, device types, and whatever else they collect. That data is then used to target those people in a variety of ways. If Superhuman is truly willing to commit to <em>never license any data to anyone for any reason</em>, they should be able to clearly say so right now. But they probably won’t, because they want to keep their options open.</li>

  539. </ul>

  540. 

  541. <p>I understand wanting to cover a new product, but an outfit as respected as the Times needs to go deeper on this stuff. Heck, I’m already at 4000 words — on a single subject — and I just wrote this on a whim over the weekend.</p>

  542. 

  543. <p>Even though I wish companies didn’t make the sorts of product decisions Superhuman has made, I’m glad they are at least showing their cards early (and appear to stand by them) so I can avoid their service. Not just on principle but because I have no reason to trust them with any of my data. Remember that they require <em>full access</em> to your Gmail in order to do their thing. Fast forward a year or two and I can see them licensing location data either from their own customers or their non-customers to a third-party for any number of distasteful purposes. <a href="https://twitter.com/vsodera/status/1145027988053823488">They say</a> they have a privacy policy that forbids this, but I don’t read <a href="https://superhuman.com/privacy">their policy</a> that way at <em>all</em>. It allows and even specifies all sorts of things they can do. Here’s an excerpt (emphasis mine):</p>

  544. 

  545. <blockquote><p><strong>HOW WE USE TRACKING TECHNOLOGY TO COLLECT INFORMATION</strong></p>

  546. <p><strong>We automatically collect usage information when you visit our Website or use the Service through the use of tracking technologies, including tracking pixels and similar technology</strong> (collectively, “Tracking Technologies”). We may use the data collected through Tracking Technologies to: (a) remember information so that you will not have to re-enter it the next time you visit the Website or use the Service; (b) <strong>provide and monitor the effectiveness of our Service</strong>; (c) <strong>provide functionality of the Service including read receipts</strong>; (d) <strong>monitor and collect analytics data using third-party tools</strong> like Google Analytics in order to help measure traffic and usage trends for the Service; (e) diagnose or fix technology problems; and (f) <strong>otherwise to plan for and enhance our Service.</strong></p></blockquote>

  547. 

  548. <p>The form of this paragraph is very familiar to lawyers. Specify some stuff that sounds mundane and then leave yourself all sorts of escape routes. Item F is essentially a universal license to do whatever they want (i.e. “We’ve ‘enhanced’ our service by using your location data in a new way!”). Now, I’m not saying this privacy policy is out of the ordinary at all. I’m just saying there is nothing about Superhuman’s Terms of Service that prevent them from making further decisions that violate your privacy in the future. Not to mention, companies can change their policy at any time. When you use a product, you need to trust the <em>people</em> who are building it — not the documents their attorneys create. And finally, once again, because of this spyware pixel, most of the people they are collecting information on aren’t even Superhuman customers and never even signed up for this policy.</p>

  549. 

  550. <p>So what would I do if I were Rahul Vohra, Superhuman’s CEO?</p>

  551. 

  552. <p>The first thing I’d do is apologize and remove this functionality for everyone. You don’t need to take out a front page ad in the Times. Just own the mistake and disable the feature unless and until you can design it in an ethical way. Don’t keep it up for a year while you work on it. Take it down. This would show responsibility and regard for doing the right thing. A sign of an honorable company is when it is willing to learn, take responsibility, and improve.</p>

  553. 

  554. <p>Next I would recalibrate how important it is to even offer Read Receipts. Superhuman seems to be doing just fine in terms of customer satisfaction. I know some people like this functionality but does the success of Superhuman’s business depend on it? I would guess not.</p>

  555. 

  556. <p>Third, if Superhuman really cared about protecting the privacy of its users, they would actually provide the exact opposite of this feature. <em>Protect</em> all Superhuman users from emails loaded with surveillance pixels, do it by default, and never embed them in their own outbound emails. There are a few <a href="https://chrome.google.com/webstore/detail/pixelblock/jmpmfcjnflbcoidlgapblgpgbilinlem">browser extensions</a> that do this decently while keeping most benign images turned on, but this would be a great feature to have baked into an email client. Use this moment as a turning point to honor all of the other work going on at the company and turn this negative into a positive.</p>

  557. 

  558. <p>Finally, if I still didn’t agree that tracking the geolocations and reading behavior of unwitting people was deceptive, I’d wear it on my sleeve:</p>

  559. 

  560. <p> </p>

  561. 

  562. <p>A lot of Superhuman’s customers — and I assume most of its employees and execs — use the “<em>Sent with Superhuman</em>” signature already. If you are so sure that automatically receiving a recipient’s geolocation every time they read one of your emails is OK, you should be OK with telling them that when you send them an email. In fact, since it’s a feature you are proud of, you should be <em>more than happy to market it so clearly</em>, right? (In case you’re wondering, exactly zero people stepped up to do this. Not Rahul Vohra, no employees, no investors, and no customers.)</p>

  563. 

  564. <p>Before I close, I want to talk about blame.</p>

  565. 

  566. <p>I don’t automatically blame Superhuman designers for this, because I don’t know if they fought for it or against it. Likewise, I don’t blame Superhuman engineers, product managers, or anyone else, for the same reason. For all I know, this was something the team pushed back strenuously on and lost. If so, thanks for fighting the good fight, and you should have your equity grant doubled for trying to do the right thing. If not, this whole article also applies to you. The only person I know for sure shares some or all of the responsibility for this is Superhuman’s CEO, Rahul Vohra. He is the only employee I’ve seen actively defend it (although perhaps others have), and it’s safe to say he was intimately involved in its development.</p>

  567. 

  568. <p><strong>This is also important: I do not know Rahul</strong>. I don’t know if he’s nice, mean, a good person, a bad person, likes his steak medium rare or well-done with ketchup, or anything else about him. I make no value judgements about him as a human, and as with most other humans, I try to assume the best about him. <em>This article is about a very specific decision of his that I find to be dangerous and wrong</em>. Whenever I see something like this, I always give the benefit of the doubt and assume the person simply doesn’t realize the downside consequences of their decision. I brought this up several months ago and the company did nothing to address it. I brought it up again last week and still nothing. In light of that, and in light of some of the responses from investors defending Superhuman’s surveillance behavior, I felt justified writing a proper piece about it.</p>

  569. 

  570. <p>Finally, if you are a user wanting to protect yourself against automatically having your email behavior and geolocation sent to people who use Superhuman and other surveillance tools, you need to do both of these things:</p>

  571. 

  572. <ol>

  573. <li>Don’t use Superhuman yourself. As mentioned earlier, Superhuman leaves you unprotected from spying because they don’t allow you to block these spyware pixels. It also turns you into an unwitting information collection machine, aggregating info on every single person you send email to. Possibly including your parents, children, partners, and friends.</li>

  574. <li>Turn off remote image loading in whatever email client you use. Almost every client these days allows you to do this, with the strange exception of Gmail for iOS. If you are a Gmail user, I recommend switching to something like Outlook on your iPhone. It’s free and allows you to use your existing Gmail account. No migration necessary. Apple Mail is fine too.</li>

  575. </ol>

  576. 

  577. <p>So to sum up — whether you are an email provider or an email user — don’t surveil, and don’t allow yourself to be surveilled. I hope Superhuman does the right thing and decides to help <em>stop</em> this problem instead of trying to normalize it.</p>

  578.   </article>

  579. </section>

  580. 

  581. 

  582. <nav id="jumpto">

  583.   <p>

  584.     <a href="/david/blog/">Accueil du blog</a> |

  585.     <a href="https://mikeindustries.com/blog/archive/2019/06/superhuman-is-spying-on-you">Source originale</a> |

  586.     <a href="/david/stream/2019/">Accueil du flux</a>

  587.   </p>

  588. </nav>

  589. 

  590. <footer>

  591.   <div>

  592.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  593.     <p>

  594.       Bonjour/Hi!

  595.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  596.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  597.     </p>

  598.     <p>

  599.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  600.     </p>

  601.     

  602.     <p>

  603.       Voici quelques articles choisis :

  604.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  605.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  606.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  607.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  608.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  609.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  610.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  611.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  612.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  613.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  614.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  615.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  616.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  617.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  618.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  619.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  620.     </p>

  621.     <p>

  622.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  623.     </p>

  624.     <p>

  625.       Je ne traque pas ta navigation mais mon

  626.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  627.       conserve des logs d’accès.

  628.     </p>

  629.   </div>

  630. </footer>

  631. <script type="text/javascript">

  632.   ;(_ => {

  633.     const jumper = document.getElementById('jumper')

  634.     jumper.addEventListener('click', e => {

  635.       e.preventDefault()

  636.       const anchor = e.target.getAttribute('href')

  637.       const targetEl = document.getElementById(anchor.substring(1))

  638.       targetEl.scrollIntoView({behavior: 'smooth'})

  639.     })

  640.   })()

  641. </script>