davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702
							<!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>
  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Blogging and me (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.ohhelloana.blog/blogging-and-me">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Blogging and me (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://www.ohhelloana.blog/blogging-and-me">Source originale du contenu</a></h3>
    <p>In the last month or so I gave three talks about blogs and me: one lightening talk at <a href="/viewsource-2018">ViewSource</a>, one at <a href="https://todo-london.com/" target="_blank">TODO London</a> and another one at <a href="https://twitter.com/ReactJSgirls" target="_blank">ReactJSGirls</a>. Although I had applied for them at different times, they all happened close to each other and with <a href="/indie-web-camp-berlin-2018">IndieWebCamp</a>, FFConf, organising a career panel and a work deadline in between it is fair to say that I had a busy November so only now I’ve had time to convert my talk into a blog post.</p>

<p>Note: This post will be a mixture of all three talks. They were all sightly different from each other but the core message is the same.</p>

<p>If you’re reading this, you are now at the most recent home for my blog: ohhelloana.blog but this isn’t my first rodeo. Blogging as been a part of my life since my privileged bum got a computer and internet in the early 2000s. For some reason I really thought the whole world should read what I had to say about myself and The Wayback Machine is there to remind me that everything you do on the internet, stays on the internet forever.</p>

<p class="p-img"><img class="post-image" src="/assets/13_12_2018/wayback_machine.png" alt="Screenshot of Way Back Machine of three different blogs between 2008 and 2011"/></p>

<p>I don’t remember all the URLs I had but I was a big fan of moving around and it means I lost some content (a blessing in disguise) but I do remember some from 2007 ~ 2008. So when I was preparing for my talks I read things I wrote 10 years ago and it was as bad as it sounds. It’s safe to say I’ve come a long way.</p>

<p>I think this an accurate timeline of my blogging life:</p>

<p class="p-img"><img class="post-image" src="/assets/13_12_2018/timeline_overview.png" alt="Timeline view from 2004 to 2018. After 2012 the line goes down and a scribble happens between 2012 and 2018"/></p>

<p>Until 2007 I had done it all: Geocities, FreeWebs, self hosting with cuteNewsPhp, phpBB forums, Coppermine Galleries, Wordpress, dot TK domains etc. I learned so much! I was always building things. I remember loving Dynamic Drive - (yes, I wanted a dinosaur cursor on my website and yes my scrollbars had the colours customised). I was just a kid who was building things for fun on the internet.</p>

<p>More towards university I had a somewhat popular blog - I even had students recognising me for writing in it and it was weirdly fun.</p>

<p>But obviously, as my timeline shows, something went wrong in 2012 and the answer to that is unfortunately easy. In 2012 I got my very first job in tech and everything stopped being fun.</p>

<p>At that point I deleted everything and my interest in blogging a new chapter of my life died too. I felt like I was the only junior developer in the world. And I was very junior. I didn’t come from a computer science course and all I knew, I learned by myself. I remember the laughs and the mean responses when someone asked my background and I said “I learned by myself from doing X”.</p>

<p>I figured that if I wasn’t as intelligent as everyone else, I needed to make sure people liked me. You can’t be dumb and unliked - those things get you fired. So, unconsciously, I started to ignore my interests in order to fit in with the rest.</p>

<p>I began to feel guilty for having fun in my free time - one time, one co-worker asked me what were my plans for the weekend and when I said it, his reply was: “maybe you should stay at home reading a javascript book”. Needless to say I didn’t do anything that weekend. I was in bed all day without energy to lift up any book.</p>

<p>I was good at hiding how depressed I was (or at least I think I was). I was functional and would only break down at home. But because I would breakdown at home and just spent my evenings crying and not reading javascript books I began to punish myself because I just couldn’t keep up with the “tech world” and my co-workers.</p>

<p>Being invisible was the safest option. I just didn't want to get fired at that point. All the joy I had was gone. But most importantly: I thought I was the only one feeling like this and because I was indeed the most junior person, I really believed that the problem was me.</p>

<p>This is what paused my “blogging life” but more things were happening around me. Social media was growing a lot in those years especially with the quick evolution of smart phones.</p>

<p>Anyone could simply create an account and share thoughts, photos and videos. The responsiveness was there and the ability to instantly share from your camera. Most (if not all) blogging platforms took too long to become responsive.</p>

<p>From my perspective I was seeing blogs and forums closing down or stagnating. And again, from my perspective:</p>

<ul>
  <li>Instant/mobile/short sharing gave me the fake impression that my peers were constantly coding and reading tech content. Blog posts probably take a bit longer to craft compared to a tweet, for example;</li>
  <li>Sharing became intimidating as it could be blown out of proportion really quickly. It’s safe to say that the stage from your own little blog to social media is a bit more scary;</li>
  <li>I started to feel that I wasn’t allowed to ever miss a day of social media (tech news FOMO);</li>
</ul>

<p>“How come these people have time to read and do everything after work?” I thought. My naiveness and inexperience created this thought inside my head that I wasn’t worthy and I should just give up.</p>

<p>This tech news FOMO was exacerbated by my feelings of guilt for not keeping up. I began to feel that if I was offline for any reason (holidays or my own mental health) I just couldn’t find things people shared anymore. Also, it is really hard to find anything on social media unless you know what you’re looking for. And, on top of that, my timeline was deciding what I should see.</p>

<p>At the time I just felt that I had to sign-up for every new cool social media thing just in case. If I was stressing out over this I can’t even imagine what someone, who choses not to have social media or simply live in a country that doesn’t allow them, would think.</p>

<p>In my terrible timeline drawing, the bit that went off rails can be described personally as a combination of toxic job/people + perception of success via social media + pressure to learn constantly and fear of missing out.</p>

<h2>Now back to blogs:</h2>

<p>Sometimes I wonder if I am like this.</p>

<p class="p-img"><img class="post-image" src="/assets/13_12_2018/old_man_yells_at_cloud_meme.jpg" alt="Meme of old man yells at cloud"/></p>

<p>When I was feeling low and alone I would recall how happy I used to be before I was working in tech. I would remember my silly fan sites, my experiments, my blogs and everything that I loved so much that made me become a developer.</p>

<p>But, thanks to social media, I very slowly started to find some people that would tweet things I could finally relate to. The following ones are more recent examples posted this year. There were a few more tweets from other people that were very important to me but because they were posted around 2013 -2015 I just couldn’t find them anymore. Nether-less, this is a beautiful example of someone sharing something I so much related to:</p>

<p><img class="post-image" src="/assets/13_12_2018/tweet01.png" aria-labelledby="tweet01"/>
<p id="tweet01">
  <a href="https://twitter.com/sarah_edo/status/1013427276350873600" target="_blank">Tweet from Sarah Drasner</a>: “I miss the useless web. I miss your grandpa’s blog. I miss weird web art projects that trolled me. I miss fan pages for things like hippos. I wish I didn’t feel like the web was collapsing into just a few sites plus a thousand resumes.”
</p></p>
<p><a href="http://www.patrickrhone.net/4480-2/" target="_blank">This post</a> by Patrick is exactly how I feel, especially this quote:</p>

<blockquote cite="http://www.patrickrhone.net/4480-2/">
  <p>Seriously, I want to bookmark this, print it, share it far and wide, especially with people who are not on a twitter because, well, it’s an increasingly bad place for those who are mental illness survivors to be.</p>
</blockquote>

<p>So, now more than ever I’ve been finding more and more people that I agree with! We should blog more and we can also have social media. These aren’t mutual exclusive!</p>

<h2>So, why am I not?</h2>

<p>I found a tweet (actually a thread) that puts it into better words than I could:</p>

<p><img class="post-image" src="/assets/13_12_2018/tweet03.png" aria-labelledby="tweet03"/></p>
<p id="tweet03">
  <a href="https://twitter.com/Fox0x01/status/951047110618689537" target="_blank">Tweet from Azeria</a>: “I regularly get messages from people who are afraid to publish their own technical blog, because they’re afraid to be judged or think people will say it’s useless bc it’s nothing innovative or elite.”
</p>

<p>Eventually my life moved on and things improved and I slowly started to think about blogging again. I wanted to share what I know about tech. Unlike my teenage years this became my occupation for about 8 hours per day but I would always stop myself because I was junior. I thought anything I would say, it would be already known my everyone. Which leads me to my very own FAQ:</p>

<blockquote>
  <p>Everyone already knows this!</p>
</blockquote>

<p>This is the number one thought that ran through my mind every time I considered writing anything technical on my blog. It was an array of “everyone already knows this” to “everyone will make fun of me because of it”. It took me a lot of time to work around this thought, but one way that worked for me was to abstract myself from the scenario (or this fear) and ask myself: realistically, what do I do if I am looking for something?</p>

<p>The realistic answer is: I use my search engine, look for what I need, open 20 tabs, check each tab and if it isn’t the answer I am looking for I just close it.</p>

<p>That’s it - there is no other consequence. I’m overthinking something that is very unlikely to happen and has stopped me from writing things that may have been helpful to someone else.</p>

<p>This advice from Jeremy Keith to A Book Apart also puts it perfectly:</p>

<p><img class="post-image" src="/assets/13_12_2018/tweet04.png" aria-labelledby="tweet04"/>
<p id="tweet04">
  <a href="https://twitter.com/abookapart/status/1017760817838788608" target="_blank">Tweet from A Book Apart quoting @adactio</a>: “Share what you learn. And the best time to share is while you’re learning it. (You’ll have a voice in your head saying ‘Everyone knows this already’... Ignore that voice.)”
</p></p>
<blockquote>
  <p>I’m X of my content!</p>
</blockquote>

<p>I’ve lost count of how many times I said something like this regarding something I wanted to share. Replace that X with words like “shy” or “embarrassed”. Ironically, I only thought this when I thought of sharing something not tech related. For example, a blog post about a holiday but I do enjoy reading about these on someone else’s blog. If I enjoy reading other people’s posts, why am I so harsh and insecure about mine?
While I’m at it who told us that enjoying anything not related to tech is bad? You’re more than your job title! You’re a whole person!</p>

<p>The reality is a little bit more positive than what our brains trick us into thinking. And being realistic, I don’t even get enough visitors on my blog to justify being afraid of posting anything here. It is tricky but all it takes is to practise the realistic consequences on your brains.
These thoughts, these fears, they pop in your head, and you know they are there, you can recognise them. They are with you as a “survival skill” and to warn you about the worst consequence. But you shouldn’t ignore them. You should work alongside them.</p>

<p>One of my fears is having someone mocking my English skills. In this case I use my fears as a tool to make sure I won’t publish mistakes on my blog. I don’t want to let it stop me from writing altogether. I want to use it as check point. I will ask some people to proof read before publishing instead. Your fears are part of who you are and use them to your benefit.</p>

<p>Okay, so I’m feeling less intimidated with posting on my blog. Now, where do I even begin?</p>

<h2>Community</h2>

<p>Things are changing, or as I prefer to say, slowing going back to what they used to be. Parts of the tech community have been getting together and talking about owning your own content. Two quick examples are the IndieWeb community and the #newwwyear hashtag.</p>

<p>I discovered the IndieWeb around a year ago and I found a place that would support me into beginning to publish again. I started to attend my local HomeBrew Website Club and even attended the IndieWebCamp. The #newwwyear hashtag even has a slack channel where you can ask some questions or get some feedback.</p>

<p>My point is: the community is here for you. You’re not alone. If you’re new to tech you can also potentially find a local community that helps you code, such as codebar.</p>

<h2>Connect with like minded people</h2>

<p>Last year I went to View Source and I saw <a href="https://www.youtube.com/watch?v=VvYK-K0jWng" target="_blank">Jeremy Keith’s talk on building the blocks of the IndieWeb</a>. I knew about IndieWeb at this point but I had never seen anyone on stage talking about it. When I got home I started to “dig in” and I found more people talking about blogs. I felt so happy! I was not alone! If you have a moment, also see <a href="https://youtu.be/DNwaChz8xRY" target="_blank">Georgie Luhur Cooke's talk "Your blog ≠ everyone else’s blog"</a>. I reckon these two videos combined represent a big part of what I believe. This part is closely connected to “find a community” but when I finally had the courage to say “hi” to these people that helped me a lot. It made me feel less alone.</p>

<h2>Do the tech bit</h2>

<p>Tech wise, it doesn’t matter. No one cares what you use to publish your blog. As far as I’m concerned having an HTML that only has links to other HTML pages counts as a lot to me. Whatever you choose as a blogging platform is right because it is the right one for you and in this process, only you matter.
Nobody has time to check your code source and almost nobody cares. If anyone does inspect your code, it is probably because they are curious how you built your site. So that they can learn something.</p>

<p>If you're keen into building your own thing, do check this <a href="https://www.staticgen.com/" target="_blank">list of static site generators</a>.</p>

<h2>Don’t overthink your content</h2>

<p>As I said before: you’re more than your job title. Don’t know what to post? Here are some ideas: Today I learned, travel, cooking, job stuff, thoughts, “retrospectives”, experiences, just photos. EVERYTHING IS VALID.</p>

<p>If you need an extra push, read this amazing <a href="https://www.sarasoueidan.com/desk/just-write/" target="_blank">article from Sara Soueidan called “Just write”</a>. She is spot on! One of the greatest tips I got from it was removing analytics and comments so that I don’t overthink about it. Not knowing if people visit my blog allows me to feel free to be myself without censorship.</p>

<p>A while back I found the following tweet:</p>

<p><img class="post-image" src="/assets/13_12_2018/tweet05.png" aria-labelledby="tweet05"/>
<p id="tweet05">
  <a href="https://twitter.com/HeyChelseaTroy/status/1051854037417635841" target="_blank">Tweet from @HeyChelseaTroy</a>: “I started a blog years ago to record what I learned about programming. As I have advanced, my posts have begun to give me credibility with technologists I don't personally know. That blog has given me a writing voice. But it has also protected my speaking voice.”
</p></p>
<p>I believe you should blog because you want to, not because you think you must. And yes, while you do it some great consequences can come out of it (like the tweet above points out).</p>

<p>Blogging can:</p>

<ul>
  <li>Solidify what you’ve learned;</li>
  <li>Give you a voice;</li>
  <li>Empower you;</li>
</ul>

<p>Bonus:</p>

<ul>
  <li>Searchable;</li>
  <li>Memories that you own and are in control of;</li>
</ul>

<p>NOTE: you don’t need a blog and/or social media presence to be amazing at your job. My talks about blogging were mostly for people who already wanted to do it but needed an extra push.</p>

<p>Back to this:</p>

<p class="p-img">
  <img class="post-image" src="/assets/13_12_2018/timeline_2.png" alt="Timeline zoomed in between 2012 and 2018 giving emphasis to the scribble in between"/>
</p>

<p>The line went up. I left places that weren’t good for me. I unfollowed people that weren’t good for me. This didn’t happen from one day to another. My current blog was created in 2014. Very slowly.</p>

<h2>But, what also helped me…</h2>

<p>A while back not many people were sharing a lot unrelated to tech. But it was reading and seeing things unrelated to tech posted by a few people that made me realise that my peers are not code/design machines but humans like myself who also have doubts, fears, joy and experiences besides their job. Reading about how relatable all of you are, keeps the community going, fosters empathy and stops the culture of overwork.</p>

<p>I promise that doing these talks was a lot more fun than writing them now in a blog post. I managed to add some jokes in there and sound a bit less sad so perhaps I express myself better in person. I'd like to thank everyone who took some minutes to message me on social media. It really meant a lot to know that some people relate to this experience and that I am on the right path to connect with like minded people.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://www.ohhelloana.blog/blogging-and-me">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>