A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 30KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581
  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>Popularity-driven development (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://ferrante.pl/frontend/javascript/popularity-driven-development/">
  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. Popularity-driven development (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://ferrante.pl/frontend/javascript/popularity-driven-development/">Source originale du contenu</a></h3>
  445. <p>For the last ten years I have been publishing various things on the web about JavaScript and front-end development. I also have organized meetups and conferences like <a href="http://front-trends.com">Front-Trends</a> or <a href="http://summit.meetjs.pl">Meet.js Summit</a>. I’ve met a lot of people, worked on exciting projects, got to know different views on certain topics and heard many exciting life stories, either good or bad. Recently, when I looked back at all of these moments I noticed I used social media channels to make them happen. I wasn’t aware though of the responsibility I had.<span id="more-2414"/></p>
  446. <h3>I was there</h3>
  447. <p>Truth be told, I went down the path of yet another teenager enchanted by countless possibilities of web technologies that became a professional front-end developer who is paid for his job. In 2007, at the beginning of my journey I started this blog. I remember my first JavaScript tutorial which gained a lot of readers, even though I wasn’t the expert in the field. Although I had like 20% of my current JavaScript skills, the articles I wrote for JavaScript beginners got some nice publicity. People were sharing it as well as writing positive comments. Shortly I became a recognizable JavaScript developer in Polish community and people seemed to respect my work and listen to what I have to say. I got a good creditability. It convinced me to write more things. After some time I realized I influence the choices of other developers. So when I recommended jQuery, some people followed me in this opinion and tried it. Although it was just my personal preference and I didn’t have skills to judge it well, I felt like I helped them make a choice for a good reason. I found myself special. It’s a great position to be for a 18 years old developer, right?</p>
  448. <p><a href="http://ferrante.pl/wp-content/uploads/2015/01/SennMicrophone.jpg"><img src="http://ferrante.pl/wp-content/uploads/2015/01/SennMicrophone-1024x685.jpg" alt="SennMicrophone" class="alignnone size-large wp-image-2442"/></a></p>
  449. <h3>With great power comes great responsibility</h3>
  450. <p>I wanted to tell you about that (even though it’s a tl;dr version of my online presence written from a certain perspective) to set a historical context for this article, because now after almost ten years it still happens – I mean it’s relatively easy to influence other developers by what you write or say. And people love to have an impact on something. Today we have way more communication channels than we had in 2005. A decade ago our online creditability was measured by a number of RSS subscribers in <a href="http://feedburner.google.com/fb/a/myfeeds?gsessionid=a_DoeF_GOxvpxiZXliJN2w">Feedburner</a>, now it can be expressed in many ways, for example in how many people follow us on <a href="http://twitter.com">Twitter</a> or how many developers starred our stuff on <a href="http://github.com">Github</a>, not to mention number of retweets, likes and shares. Our community is amazingly active and socially engaged, as we love to read and explore new things. And your tool might be the next thing people will talk about. Actually it’s great, because a good work always deserves a great reception. Having a group of people that admire your hard work can be for some also one of the biggest motivational factors to write even more code and share better ideas. However, we tend to forget that „with great power comes great responsibility” and while above websites helped us solve a certain group of problems, they on the other hand introduced new issues as well as redefined the old ones (including our laziness).</p>
  451. <h3>Numbers</h3>
  452. <p>Imagine you want to implement charts in your application. What you do? You probably don’t have time and money to write your own library. And it wouldn’t make sense anyway. So you either know a perfect fit from your past projects or have to find one on the web. If latter, you search for it in Google or Github. And what helps you make a decision is most likely information on how many devs have used it in their own projects. In times we live in this knowledge is often expressed by a number of followers/likes the project has gotten. So usually an ordinary developer takes the most popular project and tries to adapt it. </p>
  453. <p><a href="http://ferrante.pl/wp-content/uploads/2015/01/Screen-Shot-2015-01-25-at-10.19.24-PM1.png"><img src="http://ferrante.pl/wp-content/uploads/2015/01/Screen-Shot-2015-01-25-at-10.19.24-PM1.png" alt="Screen Shot 2015-01-25 at 10.19.24 PM" class="alignnone size-full wp-image-2424"/></a></p>
  454. <p>At this point it’s worth to realize that most of developers just can’t keep trying different things for ever or write their own solutions. Our budgets are not infinite and deadlines are tight. We need to make quick decisions. So we often measure the quality of software by a number of watch/stars at Github, while we don’t know why the project gathered so many and who clicked what. We don’t know the marketing efforts behind some of the numbers. And what is most important, how can we trust that let’s say 2000 developers have even used it? Maybe some of them clicked the star button, because they admire author’s efforts and like their blog posts? Whatever concern you’d had, you never know. A number of stars/followers is the most untrustworthy factor you can take under consideration to pick a tool for your project. </p>
  455. <p>In these circumstances other variables matter. For instance, using Github you can always inspect issues reported by other users. It will help you have a better understanding of what is going on and what kind of problems you will face when using a program you consider for your own endeavor. You will also see how fast the bugs are resolved. After all, it’s crucial to know, whether a project I will be using for months is/will be actively maintained by the authors and fellow contributors. Does it have the roadmap? What version is it at? Is the versioning logical?</p>
  456. <h3>Responsibility – think before you share</h3>
  457. <p><a href="http://ferrante.pl/wp-content/uploads/2015/01/I-am-responsible1.jpg"><img src="http://ferrante.pl/wp-content/uploads/2015/01/I-am-responsible1.jpg" alt="I-am-responsible" class="alignnone size-full wp-image-2421"/></a></p>
  458. <p>Another thing related to our social media presence is a responsibility for others. Each day the front-end community welcomes a new member who has a little experience and asks questions like <em>how should I start?</em> <em>what library to use?</em> And more. Unfortunately, when answering these questions, we – as more experienced developers – don’t want to leave our comfort zone and understand who asked them and why. Thus, although we want to help, we give answers that are most suitable for ourselves. We simply answer how we would learn JavaScript, if we started today. We don’t consider other people’s background and motivation that comes with a question. Beginners don’t want to hear „learn Angular.js”, because you use it. They look for an answer crafted well for the place they come from. Using a strongly opinionated tool won’t help them learn JavaScript. Instead, it’s worth to look back and see how we used to learn JavaScript and based on that give useful tips that will help somebody grow as a JS developer.</p>
  459. <h3>I know better attitude</h3>
  460. <p><a href="http://ferrante.pl/wp-content/uploads/2015/01/caveman-159359_12801.png"><img src="http://ferrante.pl/wp-content/uploads/2015/01/caveman-159359_12801-902x1024.png" alt="caveman-159359_1280" class="alignnone size-large wp-image-2430"/></a></p>
  461. <p>By the way, do you remember Prototype.js library? Its authors saluted to extending the native objects such as Function.prototype. Today we mark such things as a bad practice. Back then it was like – <em>wow, do you see what we can do? Awesome man!</em>. And there are more things that we appreciated and then abandoned. Not to mention „with” part of the language or advocating for avoiding <em>new</em> keyword as it can mess up with what <em>this</em> references to. Or declaring DOM events directly inside HTML code like <span class="f">&lt;a onclick=””&gt;</span>, which now seems to be a foundation for reactive-dom-like tools. We actually don’t mind history as we are constantly busy with moving forward. We don’t try to understand other perspectives. We get fascinated by new and shiny things, even if they were not tested well yet or proved to be an actual improvement. We are hungry for inventing something for the sake of inventing so we create something, share it and ask for a feedback.</p>
  462. <p>All that is great, however in this pursuit to be an author of something, only a few can acknowledge they can be mistaken. I know people from different industries. No one can argue harder about things than we do. Even when we’re not right. For me, being able to publicly confess that I was wrong was one of the most important events in my life. Having a big number of followers you need to be more responsible for your actions and have to consider different points of view. It can only improve your code and a way you act. This is one of major skills a developer can have. However, it’s in opposite of how we are thinking. We often feel we need to be smarter than others, know better and call Steve Jobs an uncle. It’s not a way to resolve problems. And that Stevie guy wasn’t alone, he had a great team behind.</p>
  463. <h3>I’m not a ninja</h3>
  464. <p>And this way of thinking is our fault as we allowed to call us Ninja Developers or Rock Star Developers, whatever. It has been a cool terminology for a long time. However, it had negative effects in the community and credited us to be infallible. It gratified developers’ vanity. That brings up another subject of being able to constructively listen as an example of acting pragmatically. I think we are not always aware of importance of this and it doesn’t have to come down only to the code. What I mean is we don’t validate opinions of others. We imply that a developer with 10,000 followers on Twitter is a star and someone who knows programming better than you just because of numbers on Twitter. In the social media world, some of us seem to be under impression that a popular developer always has to be right. I’ve witnessed it several times when people actually took the number of their followers seriously as it would be a way for them to look better in front of other developers. Actually, smart developers and speakers don’t feel like rock stars and they don’t want to be called like that.</p>
  465. <p><a href="http://ferrante.pl/wp-content/uploads/2015/01/ninja-149287_1280.png"><img src="http://ferrante.pl/wp-content/uploads/2015/01/ninja-149287_1280-1024x829.png" alt="ninja-149287_1280" class="alignnone size-large wp-image-2418"/></a></p>
  466. <p>This race for a fame is also visible in a conference world. Conferences are often used by speakers as marketing tools. We often trust them just because they have spoken at conferences. Remember that having „speaker” on their business cards doesn’t necessarily mean they are good engineers. Most of them are, but from my organizer perspective there are people that make their PR on top of this which is just unfair. </p>
  467. <h3>Evangelists</h3>
  468. <p><a href="http://ferrante.pl/wp-content/uploads/2015/01/Rock_concert_after_the_opening_ceremony_of_the_21st_World_Scout_Jamboree_at_Hylands_Park_Chelmsford_Essex_-_20070728.jpg"><img src="http://ferrante.pl/wp-content/uploads/2015/01/Rock_concert_after_the_opening_ceremony_of_the_21st_World_Scout_Jamboree_at_Hylands_Park_Chelmsford_Essex_-_20070728-1024x768.jpg" alt="Rock_concert_after_the_opening_ceremony_of_the_21st_World_Scout_Jamboree_at_Hylands_Park,_Chelmsford,_Essex_-_20070728" class="alignnone size-large wp-image-2419"/></a></p>
  469. <p>Increase in popularity of Twitter and Github also made up a fantastic opportunity for creating positions like Developer Relations Manager/Evengelist. Companies hire those people to talk to other developers and advocate their products. Some of them (yes, mainly browser vendors!) have also a privilege to talk about brand new HTML5 APIs, because their companies work on them. Following developer evangelists is a perfect way to get to know about new technologies and stay up to date with what’s going on in the market. However, when I chat with evangelists or hear about their work, they mostly focus on writing short snippets of code and traveling around the world to give talks. While I appreciate this work, I think it’s actually not as cool as it sounds. These people always complain of too many conferences they have to speak at as they are just tired of traveling here and there every week. Sometimes you feel you deal with tired people who don’t like their jobs. Sadly, they usually don’t code apps anymore because of other duties, while one of their main tasks remains to help us write better applications thanks to technologies they evangelize for. In age of the extremely fast JavaScript growth that doesn’t sound convincing.</p>
  470. <h3>People, not numbers!</h3>
  471. <p>Why does it all happen? I think the major problem lies in the fact that we became the consumers of high volume of information and we can’t process all of it. There is too much noise and we don’t have time to properly analyze the content we are served and check where it comes from. And our brains work faster, if we feed them with clear numbers. On the other hand, having a big number of followers is just tempting for authors.</p>
  472. <p>Services like Github and Twitter have certainly improved our lives in a lot of areas. Thanks to them we can share gigantic portions of knowledge every day using an outstanding range of social media options like sharing and liking. These tools helped us understand each other better and learn about different perspectives. However, they also have negative implications. We forget that people are still human beings and they are not a number of followers as well as a popularity can be just one of the factors you can measure software with. Despite the social media revolution in our industry, programs still have bugs and people still make mistakes. Github stars definitely won’t fix this.</p>
  473. </article>
  474. </section>
  475. <nav id="jumpto">
  476. <p>
  477. <a href="/david/blog/">Accueil du blog</a> |
  478. <a href="http://ferrante.pl/frontend/javascript/popularity-driven-development/">Source originale</a> |
  479. <a href="/david/stream/2019/">Accueil du flux</a>
  480. </p>
  481. </nav>
  482. <footer>
  483. <div>
  484. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  485. <p>
  486. Bonjour/Hi!
  487. 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>
  488. 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>).
  489. </p>
  490. <p>
  491. 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>.
  492. </p>
  493. <p>
  494. Voici quelques articles choisis :
  495. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  496. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  497. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  498. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  499. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  500. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  501. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  502. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  503. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  504. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  505. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  506. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  507. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  508. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  509. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  510. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  511. </p>
  512. <p>
  513. 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>.
  514. </p>
  515. <p>
  516. Je ne traque pas ta navigation mais mon
  517. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  518. conserve des logs d’accès.
  519. </p>
  520. </div>
  521. </footer>
  522. <script type="text/javascript">
  523. ;(_ => {
  524. const jumper = document.getElementById('jumper')
  525. jumper.addEventListener('click', e => {
  526. e.preventDefault()
  527. const anchor = e.target.getAttribute('href')
  528. const targetEl = document.getElementById(anchor.substring(1))
  529. targetEl.scrollIntoView({behavior: 'smooth'})
  530. })
  531. })()
  532. </script>