A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

index.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>about nownownow.com (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://nownownow.com/about">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>about nownownow.com</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://nownownow.com/about" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <h2 id="what">What is a “now page”?</h2>
  71. <p>
  72. Most websites have a link that says “<strong>about</strong>”.
  73. It goes to a page that tells you something about the background of this person or business.
  74. For short, people just call it an “about page”.
  75. </p>
  76. <p>
  77. Most websites have a link that says “<strong>contact</strong>”.
  78. It goes to a page that tells you how to contact this person or business.
  79. For short, people just call it a “contact page”.
  80. </p>
  81. <p>
  82. So a website with a link that says “<strong>now</strong>”
  83. goes to a page that tells you <strong>what this person is focused on at this point in their life.</strong>
  84. For short, we call it a “now page”.
  85. </p>
  86. <p>
  87. See examples by browsing <a href="/">nownownow.com</a>.
  88. </p>
  89. <p>
  90. Although it’s normal to make the web address “/now”, just like it’s usually “/about” and “/contact” in those other examples, the URL could be anything.
  91. </p>
  92. <h2 id="social">Don’t Twitter and Facebook updates do that?</h2>
  93. <p>
  94. No.
  95. If I wonder how someone is doing these days, it doesn’t help me to see that they went on vacation last week, are upset about something in the news, or even got a new job.
  96. That’s not the big picture.
  97. </p>
  98. <p>
  99. Think of <strong>what you’d tell a friend you hadn’t seen in a year</strong>.
  100. </p>
  101. <p>
  102. Like, “Still living in Dallas, though considering moving to Austin. Working at ABC. Really getting into cycling. The kids are age 3 and 6. I’m reading a lot of Pema Chödrön, and listening to a lot of jazz piano especially Brad Mehldau. I’ve stopped taking on web design clients, since I’d rather keep improving my back-end database work.”
  103. </p>
  104. <p>
  105. That’s what a now page is for.
  106. You can’t get that big picture from any other outlets I’m aware of.
  107. </p>
  108. <h2 id="why">Why do I need a now page?</h2>
  109. <p>
  110. If you’re not already feeling that this would be very useful to you, then you don’t need one.
  111. </p>
  112. <p>
  113. If you don’t already have your own website, with an “about” page that’s about you personally, then this isn’t for you.
  114. </p>
  115. <p>
  116. This isn’t for marketing or attention.
  117. It will not benefit you in any business way.
  118. </p>
  119. <p>
  120. It’s useful <strong>for the same reason an “about” page is useful on your site</strong>: because people on your site want to know more about you.
  121. </p>
  122. <p>
  123. Besides answering the common question, “What are you up to these days?”, those who have a now page say it’s a good reminder of their priorities.
  124. By publicly showing what you are focused on now, it helps you say no to other requests.
  125. </p>
  126. <p>
  127. <em>“A few days ago I added my now page and felt an immediate sense of relief from pitch emails that ignored the fact that I said explicitly on my site that my team and I can’t handle unsolicited pitches. Simple idea. Big impact.”</em> — <a href="http://nerdzach.com/now/">Zach Ware</a>
  128. </p>
  129. <p>
  130. <em>“Any time I’m in something that kind of feels useful or fun, but isn’t clearly aligned with my bigger goals, I pull up my now page and ask ‘Is it on there? Should I add it?’ Most of the time the answer is no, and I move on. Sometimes it’s yes, and when it is, at least it’s an intentional priority shift.”</em> — <a href="http://practicingdeveloper.com/now/">Gregory Brown</a>
  131. </p>
  132. <h2 id="whatnow">So what is nownownow.com?</h2>
  133. <p>
  134. After a few people added a /now page to their site — (<a href="http://sivers.org/nowff">see original story</a>) — <a href="http://gregalbritton.com/now">Greg Albritton</a> suggested we keep <strong>a collection of everyone that has a /now page</strong>.
  135. </p>
  136. <p>
  137. That’s all this is.
  138. It’s not a business.
  139. It’s not social media.
  140. </p>
  141. <p>
  142. <a href="http://sivers.org/now3">See the announcement and story here</a>.
  143. </p>
  144. <h2 id="hownow">How do I get listed on nownownow.com?</h2>
  145. <p>
  146. <strong>If you already have your own website with a /now page on it</strong>, as described and defined above, just email the URL to me at <a href="mailto:derek@sivers.org">derek@sivers.org</a>.
  147. After you do, I’ll email you back with a link to log in and answer a few questions, which, when done, will create a profile page for you.
  148. </p>
  149. <p>
  150. If not, <a href="#how">see below</a>.
  151. </p>
  152. <h2 id="how">How do I make a now page?</h2>
  153. <p>
  154. <strong>If you already have a website, but don’t have a /now page</strong>, just add a new page.
  155. If you’re using WordPress, look for “Pages” on the left, and choose “Add New”.
  156. Give it a “permalink” of /now.
  157. (Sorry I can’t help with tech support.)
  158. </p>
  159. <p>
  160. Write something about what you’re doing now, and publish.
  161. Once it’s online, email me the URL.
  162. </p>
  163. <p>
  164. <strong>If you don’t have a website</strong>, but have been meaning to get one, create a free one at <a href="https://wordpress.com/">wordpress.com</a>.
  165. Before you announce it, I highly recommend getting your own domain name at <a href="https://www.hover.com/">hover.com</a>.
  166. Point your domain to your WordPress blog, and use that.
  167. (Again, sorry I can’t help with tech support, but this is very common stuff, so anyone else can.)
  168. </p>
  169. <p>
  170. A new service called <strong><a href="https://ournows.com/">Our/Nows</a></strong> has set up just to help you make a /now page, without your own website.
  171. </p>
  172. <h2 id="biz">Can we add our business here?</h2>
  173. <p>
  174. No.
  175. Browsing <a href="/">nownownow.com</a> is only interesting because you get a glimpse into people’s lives and how they focus.
  176. </p>
  177. <p>
  178. If it became full of businesses, it would lose its appeal, and I’d probably just shut down this site.
  179. </p>
  180. <p>
  181. If you have a business website that is really just you, then that’s OK.
  182. But other than that, I won’t be adding business sites.
  183. </p>
  184. <h2 id="add">You know what this needs? …</h2>
  185. <p>
  186. Please tell me.
  187. I’m here as a public servant, taking requests.
  188. </p>
  189. <p>
  190. Or just make something first, and let me know.
  191. No need to ask my permission.
  192. </p>
  193. <p>
  194. Some people have done some cool things with this already, like <a href="https://github.com/haroldtreen/query-nownownow">this query tool</a> and <a href="http://nownownow.herokuapp.com/">this word cloud</a>.
  195. </p>
  196. <h2 id="who">Who is behind this?</h2>
  197. <p>
  198. <a href="http://sivers.org/">Derek Sivers</a>.
  199. That’s me.
  200. </p>
  201. <p>
  202. I’m just doing this because people have asked me to.
  203. Email me at <a href="mailto:derek@sivers.org">derek@sivers.org</a> with any questions or suggestions.
  204. </p>
  205. </article>
  206. <hr>
  207. <footer>
  208. <p>
  209. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  210. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  211. </svg> Accueil</a> •
  212. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  213. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  214. </svg> Suivre</a> •
  215. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  216. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  217. </svg> Pro</a> •
  218. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  219. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  220. </svg> Email</a> •
  221. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  222. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  223. </svg> Légal</abbr>
  224. </p>
  225. <template id="theme-selector">
  226. <form>
  227. <fieldset>
  228. <legend><svg class="icon icon-brightness-contrast">
  229. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  230. </svg> Thème</legend>
  231. <label>
  232. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  233. </label>
  234. <label>
  235. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  236. </label>
  237. <label>
  238. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  239. </label>
  240. </fieldset>
  241. </form>
  242. </template>
  243. </footer>
  244. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  245. <script>
  246. function loadThemeForm(templateName) {
  247. const themeSelectorTemplate = document.querySelector(templateName)
  248. const form = themeSelectorTemplate.content.firstElementChild
  249. themeSelectorTemplate.replaceWith(form)
  250. form.addEventListener('change', (e) => {
  251. const chosenColorScheme = e.target.value
  252. localStorage.setItem('theme', chosenColorScheme)
  253. toggleTheme(chosenColorScheme)
  254. })
  255. const selectedTheme = localStorage.getItem('theme')
  256. if (selectedTheme && selectedTheme !== 'undefined') {
  257. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  258. }
  259. }
  260. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  261. window.addEventListener('load', () => {
  262. let hasDarkRules = false
  263. for (const styleSheet of Array.from(document.styleSheets)) {
  264. let mediaRules = []
  265. for (const cssRule of styleSheet.cssRules) {
  266. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  267. continue
  268. }
  269. // WARNING: Safari does not have/supports `conditionText`.
  270. if (cssRule.conditionText) {
  271. if (cssRule.conditionText !== prefersColorSchemeDark) {
  272. continue
  273. }
  274. } else {
  275. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  276. continue
  277. }
  278. }
  279. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  280. }
  281. // WARNING: do not try to insert a Rule to a styleSheet you are
  282. // currently iterating on, otherwise the browser will be stuck
  283. // in a infinite loop…
  284. for (const mediaRule of mediaRules) {
  285. styleSheet.insertRule(mediaRule.cssText)
  286. hasDarkRules = true
  287. }
  288. }
  289. if (hasDarkRules) {
  290. loadThemeForm('#theme-selector')
  291. }
  292. })
  293. </script>
  294. </body>
  295. </html>