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ů.

index.html 27KB

před 5 roky
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658
  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>How Open Sourcing My Personal Goals Made Me Really Productive (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://una.im/personal-goals-guide/">
  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. How Open Sourcing My Personal Goals Made Me Really Productive (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://una.im/personal-goals-guide/">Source originale du contenu</a></h3>
  445. <p>For the past four weeks, I&#39;ve been keeping a public, open-sourced version of my <a href="https://github.com/una/personal-goals">personal goals</a> on Github. Overall, its been a pretty great experience thats bolstered my productivity tremendously. Since then, I&#39;ve been working on making this system better and better, with some terminal aliases for ease-of-use, and some advice to help you out with your own personal goals.</p>
  446. <h2>The Structure</h2>
  447. <p>If you take a look at <a href="https://github.com/una/personal-goals">my repo</a>, or the <a href="https://github.com/una/personal-goals-starter">starter template</a>, you can see that I organized my file with a few sections:</p>
  448. <h3>README.MD</h3>
  449. <p>This is where I store a couple of things: my overall goals, things I plan to do that week, month, and a backlog. I also include links to some of my sub-folders and an overall goal for the week (added later to the process). To break it down by sub-section:</p>
  450. <ul>
  451. <li><strong>Overarching Goals:</strong> What are you trying to accomplish in general? Why are you doing this in the first place? Putting these first reminds you every time you open the list.</li>
  452. <li><strong>This Week&#39;s Goal:</strong> This is the one thing you&#39;ll mostly focus on for the week. I added it later to the process and it&#39;s really helped me to keep my goals in line from being too scattered.</li>
  453. <li><strong>Things I&#39;ll Do This Week:</strong> A checklist of weekly tasks, most should ideally be determined by the <em>weekly goal</em>.</li>
  454. <li><strong>Things I&#39;ll Do This Month:</strong> A list of tasks looking further into the future &mdash; things which may take longer to accomplish</li>
  455. <li><strong>Backlog:</strong> I have two backlog sections: one for <em>side projects</em> I need to remind myself about and one for <em>code things I want to do/play with</em></li>
  456. </ul>
  457. <h3>/content-list</h3>
  458. <p>This is where I include resources such as books, reference guides, blog posts, slides, and videos that I want to watch, categorized by subject matter.</p>
  459. <h3>/accomplishments</h3>
  460. <p>This is where I go over my week in review. I think it&#39;s a pretty important part of the process &mdash; if not the most important. I take a look at what I did, what I didn&#39;t get to, additional things I did that I didn&#39;t originally plan on, and then write about how the week went in relation to meeting my goals in general. This is where you can review and edit your plan.</p>
  461. <h3>/etc</h3>
  462. <p>You can also include additional folders with more specifics for your goals. For example, one of my goals is to write more blog posts. To help with this, <strong>I have a sub-folder for blog post ideas.</strong> I keep this public in the spirit of open source.</p>
  463. <h2>Why It Works</h2>
  464. <ol>
  465. <li>It makes you think about your goals</li>
  466. <li>Versioning helps you track goals</li>
  467. <li>Public goal lists keep you more responsible</li>
  468. <li>In moments of downtime, you&#39;ll always have a reference of productive things to do or active goals to be striving for</li>
  469. <li>You have access to your goals and resources anywhere</li>
  470. <li>Other people can contribute to your personal goals</li>
  471. </ol>
  472. <p><a class="twitter-share quote right">
  473. Writing down your goals make you think about them, and publicizing them holds you more accountable.
  474. </a></p>
  475. <p>Writing down your goals make you think about them, and publicizing them holds you more accountable. It&#39;s the same reason why keeping a <a href="http://www.ncbi.nlm.nih.gov/pubmed/22795495">food diary</a> yields better results for dieters. The simple act of writing down your day&#39;s actions makes you more likely to stick to a plan. </p>
  476. <p>Reviewing these goals in a positive light at the end of the week definitely made me feel accomplished. <strong>Positive</strong> is the key word here. Don&#39;t beat yourself up for not accomplishing everything you planned at the beginning of the week &mdash; simply re-evaluate your time allocation for the following week.</p>
  477. <blockquote class="left">You always have a reference to a productive and actionable list for reaching your goals.</blockquote>
  478. <p>Another huge advantage is that you always have a reference to a productive and actionable list for reaching your goals. A few days after I began open sourcing my goals, I went to a new gym that opened up by me. It had treadmills that were internet-connected. Awesome. I was quickly able to pull up my repo and access my content list. So I ended up watching a video on web components while jogging, allowing me to be super productive in more than one way.</p>
  479. <p>Letting other people contribute to your personal goals seems strange at first &mdash; this is <em>personal</em> after all, but it&#39;s actually pretty cool. I&#39;ve had two contributors so far; the first was somebody who added a task for me to do, which I had simply forgotten about, and the second reminded me to make time to enjoy my life and relax to prevent burnout.</p>
  480. <h2>A Few Terminal Aliases to Help</h2>
  481. <p>As a part of my workflow (and as a part of working on my own personal goals), I wrote some useful terminal aliases to help make this list super easy to access and use from anywhere the command line (thats why I&#39;m using absolute links here). You can implement these by editing your <strong>.bash_profile</strong> or <strong>.zshrc</strong> files (depending on which you use), or by creating a <strong>separate shell script file</strong> and linking it inside of your .bash_profile or .zshrc (we&#39;ll get to that in a second).</p>
  482. <p>Replace anything inside of the <code>{}</code> with your own info. These assume that your repo is hosted on Github and has a &#39;content-list&#39; folder.</p>
  483. <div class="highlight"><pre><code class="language-text" data-lang="text"># check off personal goals (open main README.md in vim)
  484. # i.e. alias pg-ch=&quot;vim ~/Dev/personal-goals/README.md&quot;
  485. alias pg-ch=&quot;vim ~{PATH-TO-FOLDER}/README.md&quot;
  486. # add to content list (opens content list folder in vim)
  487. # usage example: pg-add blog-post
  488. function pg-add() {
  489. if [ $# -eq 0 ]; then
  490. print &quot;Oops. Please enter a content type! (i.e. pg-add video)&quot;
  491. else
  492. vim ~{PATH-TO-FOLDER}/content-list/&quot;$@&quot;s.md
  493. fi
  494. }
  495. # push my changes to my github master branch and open the page
  496. # The commit message will always be &quot;push from terminal&quot; since I&#39;ll probably just be adding more resources or checking things off when using this
  497. alias pg-gh=&quot;cd ~{PATH-TO-FOLDER} &amp;&amp;
  498. git checkout master &amp;&amp;
  499. git add -A &amp;&amp;
  500. git commit -m ‘push from terminal’ &amp;&amp;
  501. git push origin master &amp;&amp;
  502. open http://github.com/{GITHUB-USERNAME}/personal-goals&quot;
  503. </code></pre></div>
  504. <p><br>
  505. If you&#39;re creating a separate shell script file (i.e. <strong>pg-aliases.sh</strong>) for better organization and to not clutter your <strong>.zshrc</strong> or <strong>.bash-profile</strong>, you would only need one line of code to link it (replacing <code>myusername</code> with your user name on your system):</p>
  506. <div class="highlight"><pre><code class="language-text" data-lang="text"># Personal Goals terminal aliases
  507. # i.e. source &quot;Users/myusername/.pg-aliases.sh&quot;
  508. source &quot;{PATH-TO-ALIAS-FILE}/&quot;
  509. </code></pre></div>
  510. <p><br>
  511. So with either of those methods, the aliases I&#39;ve provided are as follows:</p>
  512. <ul>
  513. <li><code>pg-add &lt;content-type&gt;</code>: Opens up content page in Vim for adding resources. In my setup, options include <em>blog-post</em>, <em>video</em>, <em>resource</em>, <em>book</em>, or <em>slide</em></li>
  514. <li><code>pg-ch</code>: Opens up README.md for quick checking off of weekly goals</li>
  515. <li><code>pg-gh</code>: Pushes to your master branch with a commit message of &quot;push from terminal&quot; and opens the Github page online</li>
  516. </ul>
  517. <p><small>Feel free to edit and configure this workflow to what works best for you. Again, these are <em>personal</em> goals :)</small></p>
  518. <h2>A Few Words of Advice</h2>
  519. <p>As a budding developer, I often struggle with the fact that there is so much out there to learn, and <a href="" class="twitter-share">the more I learn, the more I realize I don&#39;t know</a>. With this system, I was <strong>continuously enumerating all of the things I didn&#39;t know</strong>. No matter how well-intentioned this was, it quickly became overwhelming and somewhat discouraging. Often, especially at first, my goals would be all over the place, making me constantly add things to my weekly to-do list as I learned about them, which in turn created an ever-growing cycle of to-dos and an ever-growing list of things I didn&#39;t know. <strong>Curation is key.</strong></p>
  520. <p><a class="quote twitter-share left">Open sourcing my personal goals has by far been one of the best things I&#39;ve done for my productivity.</a></p>
  521. <p>Don&#39;t get me wrong, open sourcing my personal goals has by far been one of the best things I&#39;ve done for my productivity. I highly recommend it. But here is some advice that will help you keep your sanity from the start:
  522. <br></p>
  523. <h3>Choose One Goal for the Week</h3>
  524. <p>I added this later to the process (even after the first draft of this blog was written). I found that my goals were sort-of scattered, and I like continuing a pursuit from the day before. For this reason, I began creating an overall goal for the week before defining specific tasks. It really helped to streamline my tasks for the week.</p>
  525. <h3>Once Set, Don&#39;t Add More Goals for the Week</h3>
  526. <p>Once you&#39;ve set your weekly goals, resist the temptation to add more! Instead, if you do things that are different than you had planned, write a bout it in your weekly review. I.e. the list of <strong>&quot;Additional Things I Did This Week&quot;</strong> or get a head start on planning <strong>&quot;Things I Plan To Do Next Week&quot;</strong>. You&#39;ll feel like you did more than you planned this way, instead of feel bogged down by an ever-growing list of things you&#39;ll never get to accomplish in a week.</p>
  527. <h3>Don&#39;t Just Focus on Code</h3>
  528. <p>When you have a reference list of things to do in your spare time, it&#39;s great for being productive &mdash; but don&#39;t let that list take over your life. Admittedly, I&#39;m a little bad at this, filling mine with mostly code and work-related items. Chris Eppstein had to remind me of this point via a <a href="https://github.com/una/personal-goals/pull/3">pull request</a> telling me to &quot;enjoy the sun before it&#39;s winter&quot;. He was absolutely right. Remember to make time to make yourself and the people around you happy. After all, <a class="twitter-share">happiness should be one of your overall goals.</a></p>
  529. <h3>Take the Time to Reflect Positively</h3>
  530. <p>I mentioned this at the beginning of the post, where I talk about the structure for <strong>/accomplishments</strong>. It&#39;s really important to focus on what you&#39;ve achieved and not what you didn&#39;t get to. Think of the things you didn&#39;t get to as opportunities for future.</p>
  531. <blockquote> To get started with your own system, fork <a href="https://github.com/una/personal-goals-starter">this repo</a> and fill it up! Also, feel free to reference and contribute to <a href="https://github.com/una/personal-goals">my own repo</a> :)</blockquote>
  532. <p>I&#39;d love to hear about how this goes for y&#39;all!</p>
  533. </article>
  534. </section>
  535. <nav id="jumpto">
  536. <p>
  537. <a href="/david/blog/">Accueil du blog</a> |
  538. <a href="http://una.im/personal-goals-guide/">Source originale</a> |
  539. <a href="/david/stream/2019/">Accueil du flux</a>
  540. </p>
  541. </nav>
  542. <footer>
  543. <div>
  544. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  545. <p>
  546. Bonjour/Hi!
  547. 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>
  548. 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>).
  549. </p>
  550. <p>
  551. 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>.
  552. </p>
  553. <p>
  554. Voici quelques articles choisis :
  555. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  556. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  557. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  558. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  559. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  560. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  561. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  562. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  563. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  564. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  565. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  566. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  567. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  568. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  569. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  570. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  571. </p>
  572. <p>
  573. 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>.
  574. </p>
  575. <p>
  576. Je ne traque pas ta navigation mais mon
  577. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  578. conserve des logs d’accès.
  579. </p>
  580. </div>
  581. </footer>
  582. <script type="text/javascript">
  583. ;(_ => {
  584. const jumper = document.getElementById('jumper')
  585. jumper.addEventListener('click', e => {
  586. e.preventDefault()
  587. const anchor = e.target.getAttribute('href')
  588. const targetEl = document.getElementById(anchor.substring(1))
  589. targetEl.scrollIntoView({behavior: 'smooth'})
  590. })
  591. })()
  592. </script>