davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>this website as a learning and reflection tool (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
<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>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://winnielim.org/experiments/website/this-website-as-a-learning-and-reflection-tool/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>this website as a learning and reflection tool</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://winnielim.org/experiments/website/this-website-as-a-learning-and-reflection-tool/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <h2><span class="ez-toc-section" id="What_led_to_this"></span>What led to this<span class="ez-toc-section-end"></span></h2>

<p>Once in a while I’ll stumble upon <a href="https://medium.com/the-experimental-year/the-year-i-broke-up-with-myself-a-review-of-2015-with-year-long-data-cf284e22f1f9">my 20,000+ word</a> review of 2015 and I would learn different lessons from it each time. 2015 is probably the most transformational year I’ve had so far in my life, and even 6 years later it was intriguing to see how it all happened, how it was all happening before I knew what was happening, and how I wrote my meta-thoughts on those events after the year was over. </p>

<p>I spent a really long time assembling that document manually, and I never found the will or the energy to do it again. But in recent times I’ve been having a lot of insights simply by reviewing the “on this day” function on <a href="https://dayoneapp.com/">dayone</a>. That only covers my private journal entries, and I want to go beyond surfacing entries “on this day”, so I started thinking how I want to build the functionality to somewhat automate this on this website.</p>

<p>Basically, I want to programatically surface different views of my data and writing on top of the standard reverse-chronological. I am starting by sorting them annually first, but I could also surface views by tags, related content, location, etc. </p>

<p>In parallel, I also wanted a space where I can <a href="https://winnielim.org/notes/first-note/" data-type="note" data-id="3888">write short-form thoughts</a> and store meaningful social media data like <a href="https://winnielim.org/notes/54-months/" data-type="note" data-id="3896">important instagram posts</a>. </p>

<p>(Feel free to skip the next section if you want to know more details about the why instead </p>

<h2><span class="ez-toc-section" id="Deciding_on_the_structure"></span>Deciding on the structure<span class="ez-toc-section-end"></span></h2>

<p>I thought they could all exist as the same thing, so at first I started building <a href="https://winnielim.org/archive/log/?y=2015">a page</a> where I could view everything I have done on this website – the default archive view surfaces my writing only, whereas I post other stuff like <a href="/library/collections">collections</a>, <a href="/library/resources">resources</a>, <a href="/notebooks">notebooks</a>, etc. </p>

<p>But I quickly realised I wanted a section purely reserved for short-form content. Along the way I was also wondering if I was over-complicating everything – perhaps I should just post short-form content under a different category under /journal. But the additional custom fields I wanted for short-form content would add unnecessary clutter to the default journal entry form, and if one day I decide to kill the new section I could do so cleanly if it was simply another post type in wordpress.</p>

<p>So now I have two new sections: <a href="/notes">/notes</a> for short-form content and <a href="/archive/log">/archive/log</a> for logging everything. At first I wasn’t sure about /notes because I already have <a href="/notebooks">/notebooks</a>, and a more technically correct term would be /microblog, but no one outside of tech knows what is a /microblog and to me /notebooks are the structured containers to all my content. I considered “meta” for a while, that was before the whole facebook debacle, but I guess “meta” is also not a very relatable word in the mainstream consciousness. My twitter friend also helped!</p>

<p>To be honest, at the end I don’t think anyone really cares but myself. In general from analysing my stats most people only either view the homepage if they happen to stumble upon my site from elsewhere, or the single journal entries when I publish them on social media. Only a small percentage of people explore the other sections. It is this small percentage of people who visit tens or hundreds of my pages in one visit (whoever you are, thank you for making me feel less alone in this world). I am mostly building this site for myself, but also this very small group of people.</p>

<h2><span class="ez-toc-section" id="A_tool_for_self-reflection"></span>A tool for self-reflection<span class="ez-toc-section-end"></span></h2>

<p>Our brains are limited in the way we can recall information. No one remembers what happened last week, much less specifically on a day three years ago. Our psyches also actively edit the past. Sometimes they may get romanticised, sometimes they get exaggerated. My memories of something actively influences how I interact in the present. </p>

<p>For example, when I decided to quit a job I thought I had loved I wrote down all the reasons why I had quit, precisely knowing that my future self would forget and romanticise the job. It turned out I was right, every now and then periodically I would be overcome by nostalgia which in turn invited regret. That particular journal entry was very helpful in nudging me back into reality and dispersing the romanticised regret.</p>

<p>Sometimes I feel lost and I start wondering why I am where I am. My old entries serve as a powerful reminder of why I chose to do things a certain way. It is not easy to walk on an uncommon path. There are no signposts along the way, I have to leave breadcrumbs for myself. You would think we would remember everything about our selves, but I often forget who I am and who I want to be. Societal conditioning is immense.</p>

<p>This website is essentially a repository of my memories, lessons I’ve learnt, insights I’ve discovered, a changelog of my previous selves. Most people build a map of things they have learnt, I am building a map of how I have come to be, in case I may get lost again. Maybe someone else interested in a similar lonely path will feel less alone with my documented footprints. Maybe that someone else would be me in the future. Maybe all of this would be interesting when I am dead, <a href="https://winnielim.org/journal/on-writing-to-exist-and-website-graveyards/" data-type="post" data-id="3347">assuming I find a way</a> to keep this site alive. </p>

<p>Reading my past entries also allow me to understand the distance I’ve travelled between my past selves and my current self. Sometimes it feels like I’m still stuck in my old unhealthy patterns and reading my past entries enable me to see otherwise. Some things used to haunt me greatly and I feel ambivalent or amused about them now. I like that I can relive certain experiences because I took the effort to write them down, and understand how I relate to them now.</p>

<p>Some of my best writing (to me) appears unintentionally <a href="https://www.instagram.com/p/BoYVRTanQDP/?utm_medium=copy_link">on a spontaneous photo</a> on instagram, and I want them to exist outside of a reverse chronological timeline that no one ever revisits again. I would not be re-reading these posts if not for dayone or timehop, and re-reading them lights up something in me, especially if I am in a period of existential slump, which occurs more often than I would like. Sometimes I forget I can be capable of writing in more dimensions than my usual stream of consciousness. I could reduce the time I spend in existential slumps if I could access these little sparks of my old selves in a more timely and accessible manner.</p>

<p>I store links, books and highlights on this site, so I can see how they all come together with my writing and how they influence my selves. Some books are worth revisiting over and over again, and I would like to store key highlights from all my life-changing books in one place.</p>

<p>I find repetition extremely useful when it comes to wanting to reinforce new patterns or behaviours, so this website serves as my repetition tool. </p>

<h2><span class="ez-toc-section" id="An_interactive_interface_for_programmatically_querying_my_selves"></span>An interactive interface for programmatically querying my selves<span class="ez-toc-section-end"></span></h2>

<p>It is also useful for me to have an interactive interface of everything I have learnt and written about. The queries available now are rudimentary but still more useful than purely chronological. I can see everything tagged with “<a href="https://winnielim.org/tag/zen/">zen</a>“, or search everything that mentioned the word “<a href="https://winnielim.org/?s=meditation">meditation</a>“. I built an “<a href="https://winnielim.org/archive/on-this-day/">on this day</a>” function for everything published on this website. I try to link posts up if they are related to a chain of thoughts, so if I happen to read one I’ll see the others. As long as it is queryable though SQL, I can build an interface for it (this is why I am using wordpress instead of static-site generators). Maybe one day I can build a dashboard or visualisation of my entries. I guess it is like externalising my mind on a website. </p>

<figure class="wp-block-image size-medium"><img loading="lazy" src="https://winnielim.org/wp-content/uploads/2021/11/winnielim-query-my-selves-700x350.png" alt="illustration: a search box querying my selves" class="wp-image-3922" srcset="https://winnielim.org/wp-content/uploads/2021/11/winnielim-query-my-selves-700x350.png 700w, https://winnielim.org/wp-content/uploads/2021/11/winnielim-query-my-selves-1600x800.png 1600w, https://winnielim.org/wp-content/uploads/2021/11/winnielim-query-my-selves-300x150.png 300w, https://winnielim.org/wp-content/uploads/2021/11/winnielim-query-my-selves-768x384.png 768w, https://winnielim.org/wp-content/uploads/2021/11/winnielim-query-my-selves-1536x768.png 1536w, https://winnielim.org/wp-content/uploads/2021/11/winnielim-query-my-selves-2048x1024.png 2048w" sizes="(max-width: 700px) 100vw, 700px"></figure>

<h2><span class="ez-toc-section" id="Increasing_opportunities_for_relearning"></span>Increasing opportunities for relearning<span class="ez-toc-section-end"></span></h2>

<p>Something like “on this day” or <a href="https://readwise.io/">Readwise</a>‘s emails of random highlights from our kindle library are just opportunities to re-expose ourselves to information we have stored. The question is how do I increase these opportunities beyond the context of time or randomness? I think it would have to involve some manual curation and also tools like taxonomies. I will probably discover more meaningful queries I can use regularly as I go along.</p>

<p>Many people treat their journals as something they write and they may never read them again. Same with books. We keep reading, we have all these insights from reading, then over time we forget about them. My 2015 review contained many insights and lessons that are still very relevant to me today, but I have forgotten most of them. Each time I read it I’m like <em>wow this makes so much sense</em>, then I forget, then I read it again – <a href="https://winnielim.org/journal/remembering-forgotten-lessons-and-selves/" data-type="post" data-id="2463">this loop has happened multiple times</a>. How do I store these insights in a meaningful, accessible manner that doesn’t rely on a random impulse to access it? I could set a calendar reminder, or is it possible to preempt the possible scenarios when I would need the relevant insights the most? </p>

<h2><span class="ez-toc-section" id="This_website_is_my_living_book"></span>This website is my living book<span class="ez-toc-section-end"></span></h2>

<p>Some people have asked me whether I’m ever going to write a book, since I’ve written so much and they have found some of my writing meaningful to them. This website is the book. I don’t particularly believe in books actually (I know the irony, considering the amount of books I read), especially for learning. They are linear and it is difficult to sift out the meaningful bits among the huge chunks of content. </p>

<p>But a website is interactive. Perhaps it is still chaotic now, but hopefully one day in the future people can jump directly into the parts meaningful to them and go on their own navigation path supported by relevance instead of chronology or a pre-determined linear scaffolding. They can perhaps perform their own interactive queries. You can’t do that with a book. The information in a book is also pretty much dead, whereas a website can be continually updated.</p>

<p>The thing about a website is that it is not as portable as a book in terms of the reading experience. You still have to do the work to navigate or search for what you want, whereas a book is just a page after page reading experience. I hope I can circumvent some of that with my notebooks, where I am planning to offer a more structured thematic reading experience.</p>

<h2><span class="ez-toc-section" id="Catering_to_an_audience_versus_myself"></span>Catering to an audience versus myself<span class="ez-toc-section-end"></span></h2>

<p>I do feel self-conscious in general whenever I write or make something. I think this self-consciousness is holding me back. Writing a post like this, I can’t help but wonder if people are going to think I’m super weird for putting so much effort into a personal website (well the other day I found a <a href="https://www.fieggen.com/shoelace/">site on shoelaces</a> so maybe I am not that weird after all). </p>

<p>But I realised I have to put aside this self-consciousness and work on this website as though I am only catering to myself if I want to create something that is really a true representation of how I think and create versus a false image. This website may be chaotic in its current form but it is how I work in progress. </p>

<p>I think it is a meaningful thing, to be able to put something true out there, something that people and myself can interact with, in a world where we’re actively encouraged not to be our selves.</p>

<p>This website, is my rebellion against that.</p>

<hr class="wp-block-separator">

<p><em>Note: it turns out I’ve already written <a href="https://winnielim.org/journal/remembering-forgotten-lessons-and-selves/">something similar but different</a> 2 years ago, which reinforces my point I guess: which is that I don’t remember what I’ve written, how do I make remembering easier, and it was also very interesting to see the differences in tone between that piece and this.</em></p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>