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 28KB

5 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683
  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>Codes of Misconduct - Hintjens.com (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. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://hintjens.com/blog:108">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Codes of Misconduct - Hintjens.com (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://hintjens.com/blog:108">Source originale du contenu</a></h3>
  445. <p>Whenever people gather together, there's a risk of misbehavior. In tech conferences we are trying to solve this by declaring and enforcing a "Code of Conduct." I've had and seen harassment multiple times, over the years. It seems to me that the Codes of Conduct are not working. In this article I'll try to explain the problems, and propose a fix.</p>
  446. <h2 id="toc0"><span>Update</span></h2>
  447. <p>I'm going to link to Stephanie Zvan's <a href="https://archive.is/bDW6H">critique of this article.</a></p>
  448. <h2 id="toc1"><span>Identifying the Problem</span></h2>
  449. <p>Unwelcome sexual attention, aggressive conversations that won't end, intrusive photo-taking, offensive language and behavior… most of us have seen or experienced this. The mainstream solution is obvious: tell people to stop it, or else.</p>
  450. <p>Here is <a href="http://ndc-london.com/page/code-of-conduct">a typical statement</a> by a large tech conference:</p>
  451. <blockquote>
  452. <p>All delegates, speakers, sponsors and volunteers… are required to agree with the following code of conduct. Organizers will enforce this code throughout the event.</p>
  453. </blockquote>
  454. <p>Many participants do not like such statements, and the discussions over codes of conduct can become heated, emotional, and ugly. In my work in group psychology, there's a rule of thumb I have developed: <em>When two sides argue emotionally it is because both are working from false assumptions.</em></p>
  455. <p>And indeed, I think the mainstream Code of Conduct model is based on false assumptions. The theory of harassment (let's call it "Model A") has these assumptions:</p>
  456. <ol>
  457. <li>Anyone can be the harasser.</li>
  458. <li>Harassment is a motiveless act.</li>
  459. <li>Outlawing harassment will stop it.</li>
  460. </ol>
  461. <p>All three of these are provably false. Bad actors do not respect rules. They habitually avoid sanctions, and reflect them onto others. You can read my article, <a href="http://hintjens.com/blog:105">"Ten Myths About Harassment"</a> to see other related myths.</p>
  462. <p>By accepting and then acting on false assumptions, we get divisive policy and argument. And I think the outcome, with division and ill-feeling, is worse than having no code of conduct at all.</p>
  463. <p>Here is a more accurate theory of harassment (Model B):</p>
  464. <ol>
  465. <li>A specific subset of participants (the "bad actors") are systematic harassers.</li>
  466. <li>Bad actors harass as a persistent strategy for getting power, sex, amusement, etc.</li>
  467. <li>They treat rules and laws as challenges to work around, or misuse.</li>
  468. </ol>
  469. <p>The term "bad actors" is a convenient euphemism for sub-clinical psychopaths. When you understand model B, the picture shifts.</p>
  470. <p>Let's take a typical scenario, and see how it works with both models. The scenario is: at an event, participants are drinking. Mallory makes an unwelcome sexual advance towards Alice. Alice feels very uncomfortable and moves away. Mallory insists, and follows her. Alice explicitly asks him to stop, and moves. Once again, Mallory approaches and tries again.</p>
  471. <p>Model A explains it thus: Mallory was drinking and didn't realize that his behavior was causing distress to Alice. By explaining what it means to be decent, and enforcing that, he will refrain from harassing people.</p>
  472. <p>Model B explains it thus: Alice was drinking, and became more open and vulnerable. Mallory saw this, and decided to exploit it. Her display of fear and moving away drove him to be even more predatory. He was trying to isolate her, so she would give in.</p>
  473. <p>It's not that alcohol turns good actors into bad actors. Rather, it makes the good actors more vulnerable. This distinction is critical. This is the key problem: people in a foreign country, who may not be with friends, are easy targets. Instead of solving Mallory's behavior, we must solve Alice's vulnerability.</p>
  474. <p>Mallory is always going to be there. In a group of 100 people, we will have a handful of Mallorys. In a conference with 1,000 attendees, we'll have dozens of people capable of harassing others, <em>if the conditions permit it.</em></p>
  475. <p>In my view, events must be radically inclusive. To exclude people on any basis except real danger to others is a poor strategy. It introduces real, major risks such as false positives. To be accused of a Code of Conduct violation, and then excluded from an event can be life damaging. Organizers wield massive power, and bad actors can turn this power on people they see as a threat.</p>
  476. <p>Let me be explicit about this. If Alice complains to the organizers, she puts herself at even more risk. Mallory now appears to be calm and sincere. He accuses Alice of stalking him. He explains how she would not leave him alone. He looks vulnerable, gentle, and seriously distressed. Alice is angry, outraged, and emotional. Who do the organizers believe?</p>
  477. <p>And Mallory comes in all genders. Harassment <a href="http://hintjens.com/blog:105">is not a gender issue.</a> So while sanctions must be possible, the policy goal must be to make them unnecessary.</p>
  478. <p>The second problem with exclusion of supposed bad actors is that it is prejudicial. Even bad actors add to the diversity of a crowd. This is hard to admit. When I cross a bad actor, my instinct is to push them out, reject them, and tell everyone what happened. Yet I believe that is the wrong reaction.</p>
  479. <p>Rather, we must understand, and then negate and switch off their predatory behavior.</p>
  480. <p>Bad actors are pragmatic, and driven by clear calculations of opportunity versus risk. So the solution is to remove the incentives and opportunities for misbehavior, and raise the risks of exposure. Then, bad actors will adapt and self-select. Either they will behave, or they will go elsewhere.</p>
  481. <p>This removes the need for enforcement, and the risk of false positives.</p>
  482. <h2 id="toc2"><span>Designing a Solution</span></h2>
  483. <p>As a parent, I cannot stop my children from being exposed to bad actors. They will inevitably, regularly, come across people who see them as potential targets. It will happen on-line, in the streets, in schools, at friends' homes.</p>
  484. <p>One option is to keep them at home, or never let them roam alone. Yet that seems counter-productive in many ways. So instead, I teach them how bad actors think and operate. I explain what kinds of conversation and interaction are dangerous. And then I teach them what to do if such a thing happens. Find an adult you can trust, I say. Tell them what happened, call me, and wait.</p>
  485. <p>I explain to my children how bad actors stalk the Internet looking for victims. I explain what grooming looks like. I teach them to never give their real name, age, or location to strangers on-line. Never to send pictures of themselves. Never to accept a statement from a stranger as true, no matter how convincing it is.</p>
  486. <p>This is the model I believe we need for conferences and similar gatherings. Instead of telling people to be good, we teach people to stay safe.</p>
  487. <p>Here are my specific recommendations:</p>
  488. <ul>
  489. <li>We teach awareness of the behaviors one should consider "bad." We speak to potential victims and bystanders, not to bad actors. Bad behaviors are those that bad actors use to profile, stalk, isolate, and pursue their targets.</li>
  490. </ul>
  491. <ul>
  492. <li>We teach organizers how to accept and process complaints. These cannot be anonymous. They must be discreet, with protection of privacy for both parties. There must be fair follow-up, with sanctions as needed.</li>
  493. </ul>
  494. <ul>
  495. <li>We teach organizers how to protect their guests from predatory behaviors. For example, in any space where the organizers offer alcohol, they should offer food and water, and a host who does not drink, and who patrols discretely.</li>
  496. </ul>
  497. <ul>
  498. <li>We formulate these as a written protocol that events can adopt. Rather than ask every event to re-invent the wheel, we can build standards that events can reuse, and improve over time.</li>
  499. </ul>
  500. <p>Such a protocol will, I'm arguing, create safe spaces by design. It will speak to bad actors and say, clearly: you are welcome as long as you act decent. Otherwise, we are watching, and we will catch you.</p>
  501. <h2 id="toc3"><span>A Code of Conduct Protocol</span></h2>
  502. <p>This is a raw proposal. To be expanded and refined.</p>
  503. <ul>
  504. <li>The "event" is any gathering of people under auspices of an organizer. This includes formal events and informal gatherings before, after, and during a main event.</li>
  505. </ul>
  506. <ul>
  507. <li>The "organizer" is the legally responsible entity or person who hosts an event.</li>
  508. </ul>
  509. <ul>
  510. <li>The "participant" is an adult person attending or helping with an event. Minors at events are assumed to be under protection of their parents or guardians.</li>
  511. </ul>
  512. <ul>
  513. <li>Organizers and participants have rights and obligations under this protocol, which they understand and accept.</li>
  514. </ul>
  515. <ul>
  516. <li>Participants accept that the arbitrators in any event dispute are the organizers.</li>
  517. </ul>
  518. <ul>
  519. <li>Organizers who respect and enforce this protocol may say so on their conference web site.</li>
  520. </ul>
  521. <ul>
  522. <li>In an event, every participant has the right to the sanctity of their person, their time, and their space. We define a "violation" as any act that interferes with this sanctity, without consent of the participant. Silence is not consent.</li>
  523. </ul>
  524. <ul>
  525. <li>Violations include, though are not limited to, doing any of the following without consent: talking to or following a person who has expressed their desire to end a conversation; taking close photographs of a person; touching a person in an intimate or controlling fashion; use of sexualized language; display of sexual imagery; offering unsafe quantities of alcohol; offering illegal drugs of any sort; making unjustified complaints; tampering with a person's possessions.</li>
  526. </ul>
  527. <ul>
  528. <li>In all circumstances where the organizers offer alcohol, they shall also offer drinking water, and sufficient food to keep participants safe. Additionally, they shall have one or more "hosts" who do not drink alcohol, and who are trained to intervene in case of conflict or visible distress.</li>
  529. </ul>
  530. <ul>
  531. <li>The organizers shall provide a secure, private means for reporting violations. Such a report shall be considered circumstantial unless or until backed up. A report should state the time, place, name of the person accused of committing the violation, nature of the violation, and names of witnesses if any. The accused person shall have the right of reply. This material shall be kept private.</li>
  532. </ul>
  533. <ul>
  534. <li>If a participant experiences what they consider a violation, or sees what they consider a violation happening to someone else, they should report this to the organizers.</li>
  535. </ul>
  536. <ul>
  537. <li>if the organizers feel a particular individual is the cause of more than one complaint, and does not self-correct, they may exclude that person from the event. This should be done with respect for the privacy of all parties.</li>
  538. </ul>
  539. <ul>
  540. <li>The organizers shall be aware of the risk of "date rape" drugs. If they receive information about a participant who claims to have suffered from blackouts, or who behaves in uncharacteristic ways causing hurt to themselves or others, they shall assist the participant with a medical blood test for drugs, within 24 hours.</li>
  541. </ul>
  542. <ul>
  543. <li>Organizers should provide participants with an emergency contact phone number during events, for reporting urgent incidents and asking for help.</li>
  544. </ul>
  545. <ul>
  546. <li>If the organizers receive information about a possible criminal offense by or towards any participant, they should report this to local law enforcement and provide suitable support.</li>
  547. </ul>
  548. </article>
  549. </section>
  550. <nav id="jumpto">
  551. <p>
  552. <a href="/david/blog/">Accueil du blog</a> |
  553. <a href="http://hintjens.com/blog:108">Source originale</a> |
  554. <a href="/david/stream/2019/">Accueil du flux</a>
  555. </p>
  556. </nav>
  557. <footer>
  558. <div>
  559. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  560. <p>
  561. Bonjour/Hi!
  562. 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>
  563. 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>).
  564. </p>
  565. <p>
  566. 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>.
  567. </p>
  568. <p>
  569. Voici quelques articles choisis :
  570. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  571. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  572. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  573. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  574. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  575. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  576. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  577. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  578. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  579. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  580. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  581. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  582. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  583. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  584. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  585. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  586. </p>
  587. <p>
  588. 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>.
  589. </p>
  590. <p>
  591. Je ne traque pas ta navigation mais mon
  592. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  593. conserve des logs d’accès.
  594. </p>
  595. </div>
  596. </footer>
  597. <script type="text/javascript">
  598. ;(_ => {
  599. const jumper = document.getElementById('jumper')
  600. jumper.addEventListener('click', e => {
  601. e.preventDefault()
  602. const anchor = e.target.getAttribute('href')
  603. const targetEl = document.getElementById(anchor.substring(1))
  604. targetEl.scrollIntoView({behavior: 'smooth'})
  605. })
  606. })()
  607. </script>