davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Browse Source

Links

master
David Larlet 1 year ago
parent
038090ae42
commit
2375723643
11 changed files with 1221 additions and 0 deletions
Split View Show Diff Stats
  1. 219
    0
      cache/2023/0568befa90d2b39c0694d4c7ffc3cd73/index.html
  2. 52
    0
      cache/2023/0568befa90d2b39c0694d4c7ffc3cd73/index.md
  3. 178
    0
      cache/2023/328b56a2ee2e291dabc8f63a0013cc7a/index.html
  4. 11
    0
      cache/2023/328b56a2ee2e291dabc8f63a0013cc7a/index.md
  5. 186
    0
      cache/2023/392138accbdaee722a669834da5f1a8d/index.html
  6. 19
    0
      cache/2023/392138accbdaee722a669834da5f1a8d/index.md
  7. 255
    0
      cache/2023/61f52848924157701ed66c85d67f3536/index.html
  8. 88
    0
      cache/2023/61f52848924157701ed66c85d67f3536/index.md
  9. 185
    0
      cache/2023/afa0aae212698b71118868d36d50a747/index.html
  10. 18
    0
      cache/2023/afa0aae212698b71118868d36d50a747/index.md
  11. 10
    0
      cache/2023/index.html

+ 219
- 0
cache/2023/0568befa90d2b39c0694d4c7ffc3cd73/index.html View File

@@ -0,0 +1,219 @@
<!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>Don't believe ChatGPT - we do NOT offer a "phone lookup" service (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://blog.opencagedata.com/post/dont-believe-chatgpt">

<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>Don't believe ChatGPT - we do NOT offer a "phone lookup" service</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-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://blog.opencagedata.com/post/dont-believe-chatgpt" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<h4 id="our-story-begins-hey-chatgpt-is-cool">Our story begins. “Hey, ChatGPT is cool”</h4>
<p>Like everyone else when ChatGPT launched a few months ago we dove in and
played with. It is impressive.</p>

<p>In January, as the new AI queston and answer service became more and more popular, we noticed something interesting. Some new OpenCage users were starting to answer “ChatGPT” when we asked them how they had heard of us during the sign-up flow for our geocoding API. Fantastic, we thought. Over the last eight weeks this initial trickle of new sign-ups has become a steady flow.</p>

<p>But then something weird happened.</p>

<h4 id="actually-no-this-is-not-cool">“Actually, no, this is not cool”</h4>

<p>Many of these new users seemed to use the free trial of our geocoding API for just a handful of API requests and then stopped completely. Very different from the behaviour of other free trial signups.</p>

<p>We reached out to some of these users and asked why they had stopped. A few answered with some varient of “it didn’t work”, which of course alarmed us.</p>

<h4 id="not-cool-at-all">“Not cool at all”</h4>

<p>As we dug into this it became clear most of of these new ChatGPT users were tying to use our geocoding API for an entirely different purpose. It seems ChatGPT is wrongly recommending us for “reverse phone number lookup” - ie the ability to determine the location of a mobile phone solely based on the number. This is not a service we provide. It is not a service we have ever provided, nor a service we have any plans to provide. Indeed, it is a not a service we are technically capable of providing.</p>

<p>And yet ChatGPT has absolutely no problem recommending us for this service
(complete with python code you can cut and paste) as you can see in this screenshot.</p>

<p><img src="/images/chatgpt-phone-lookup.png" alt='"Screenshot of ChatGPT wrongly suggesting OpenCage offers reverse phone number lookup"' class="center-image"></p>

<p>Looking at ChatGPT’s well formulated answer, it’s understandable people believe
this will work.</p>

<h4 id="this-is-really-lame-actually">“This is really lame, actually”</h4>

<p>The situation is hugely frustrating for everyone. For us, and for the users who sign up believing we can offer this service. We’re now getting support requests every single day asking us “Why is it not working?”.</p>

<h4 id="why-does-chatgpt-think-this">Why does ChatGPT “think” this?</h4>

<p>You may be wondering “Why would ChatGPT ‘think’ they offer this service?” No doubt it’s due to the faulty YouTube tutorials people have made where they seem to claim we can do this, <a href="/post/we-can-not-convert-a-phone-number-into-a-location-sorry">as we covered previously</a>. ChatGPT has picked up that content.</p>

<p>The key difference is that humans have learned to be sceptical when getting advice from other humans, for example via a video coding tutorial. It seems though that we haven’t yet fully internalized this when it comes to AI in general or ChatGPT specifically. The other key difference is the sheer scale of the problem. Bad tutorial videos got us a handful of frustrated sign-ups. With ChatGPT the problem is several orders of magnitude bigger.</p>

<h4 id="what-now">What now?</h4>

<p>Unfortunately it’s not really clear how to solve this. All suggestions are welcome.
ChatGPT is doing exactly what its makers intended - producing a coherent, believable answer. Whether that answer is truthful does not seem to matter in the slightest.</p>

<p>I wrote this post to have a place to send our new ChatGPT users when they ask why it isn’t work, but hopefully also it serves as a warning to others - you absolutely can not trust the output of ChatGPT to be truthful,</p>

<p>Happy geocoding (NOT “phone lookup”),</p>

<p><a href="https://mastodon.social/@freyfogle">Ed</a></p>

<p><em>Note: this post was written by a human, not an AI.</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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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>

+ 52
- 0
cache/2023/0568befa90d2b39c0694d4c7ffc3cd73/index.md View File

@@ -0,0 +1,52 @@
title: Don't believe ChatGPT - we do NOT offer a "phone lookup" service
url: https://blog.opencagedata.com/post/dont-believe-chatgpt
hash_url: 0568befa90d2b39c0694d4c7ffc3cd73

<h4 id="our-story-begins-hey-chatgpt-is-cool">Our story begins. “Hey, ChatGPT is cool”</h4>
<p>Like everyone else when ChatGPT launched a few months ago we dove in and
played with. It is impressive.</p>

<p>In January, as the new AI queston and answer service became more and more popular, we noticed something interesting. Some new OpenCage users were starting to answer “ChatGPT” when we asked them how they had heard of us during the sign-up flow for our geocoding API. Fantastic, we thought. Over the last eight weeks this initial trickle of new sign-ups has become a steady flow.</p>

<p>But then something weird happened.</p>

<h4 id="actually-no-this-is-not-cool">“Actually, no, this is not cool”</h4>

<p>Many of these new users seemed to use the free trial of our geocoding API for just a handful of API requests and then stopped completely. Very different from the behaviour of other free trial signups.</p>

<p>We reached out to some of these users and asked why they had stopped. A few answered with some varient of “it didn’t work”, which of course alarmed us.</p>

<h4 id="not-cool-at-all">“Not cool at all”</h4>

<p>As we dug into this it became clear most of of these new ChatGPT users were tying to use our geocoding API for an entirely different purpose. It seems ChatGPT is wrongly recommending us for “reverse phone number lookup” - ie the ability to determine the location of a mobile phone solely based on the number. This is not a service we provide. It is not a service we have ever provided, nor a service we have any plans to provide. Indeed, it is a not a service we are technically capable of providing.</p>

<p>And yet ChatGPT has absolutely no problem recommending us for this service
(complete with python code you can cut and paste) as you can see in this screenshot.</p>

<p><img src="/images/chatgpt-phone-lookup.png" alt='"Screenshot of ChatGPT wrongly suggesting OpenCage offers reverse phone number lookup"' class="center-image"></p>

<p>Looking at ChatGPT’s well formulated answer, it’s understandable people believe
this will work.</p>

<h4 id="this-is-really-lame-actually">“This is really lame, actually”</h4>

<p>The situation is hugely frustrating for everyone. For us, and for the users who sign up believing we can offer this service. We’re now getting support requests every single day asking us “Why is it not working?”.</p>

<h4 id="why-does-chatgpt-think-this">Why does ChatGPT “think” this?</h4>

<p>You may be wondering “Why would ChatGPT ‘think’ they offer this service?” No doubt it’s due to the faulty YouTube tutorials people have made where they seem to claim we can do this, <a href="/post/we-can-not-convert-a-phone-number-into-a-location-sorry">as we covered previously</a>. ChatGPT has picked up that content.</p>

<p>The key difference is that humans have learned to be sceptical when getting advice from other humans, for example via a video coding tutorial. It seems though that we haven’t yet fully internalized this when it comes to AI in general or ChatGPT specifically. The other key difference is the sheer scale of the problem. Bad tutorial videos got us a handful of frustrated sign-ups. With ChatGPT the problem is several orders of magnitude bigger.</p>

<h4 id="what-now">What now?</h4>

<p>Unfortunately it’s not really clear how to solve this. All suggestions are welcome.
ChatGPT is doing exactly what its makers intended - producing a coherent, believable answer. Whether that answer is truthful does not seem to matter in the slightest.</p>

<p>I wrote this post to have a place to send our new ChatGPT users when they ask why it isn’t work, but hopefully also it serves as a warning to others - you absolutely can not trust the output of ChatGPT to be truthful,</p>

<p>Happy geocoding (NOT “phone lookup”),</p>

<p><a href="https://mastodon.social/@freyfogle">Ed</a></p>

<p><em>Note: this post was written by a human, not an AI.</em></p>

+ 178
- 0
cache/2023/328b56a2ee2e291dabc8f63a0013cc7a/index.html View File

@@ -0,0 +1,178 @@
<!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>Streams of Consciousness (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://matthiasott.com/notes/streams-of-consciousness">

<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>Streams of Consciousness</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-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://matthiasott.com/notes/streams-of-consciousness" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p><a href="https://adactio.com/journal/19894">Jeremy wrote a little something about streams</a>, in particular about streams on personal websites. His home page actually is like a stream: links, notes, and blog posts all appear underneath each other in chronological order.</p>

<p>Many of us are now rediscovering or reviving their personal sites, not only because the demise of Twitter has made it abundantly clear that we need to shift our attention away from large social media silos when we share our ideas, thoughts, and ramblings online. Our personal sites are the perfect home for all those personal bits and pieces. All those short and long-form posts, notes, thoughts, photos, links, but also just little things we notice in our world, things we learn, and things that excite us – they all belong on our personal websites first. So if you were asking yourself what you should post on your site, the correct answer is, of course, “everything you want”. Your personal site is your home on the Web. It is your playground but it is also a very subjective and individual account of all the things you think and care about. All the things that happen in your head. And on your home page, it can all come together in one large stream of different kinds of posts.</p>

<p>You could even think of this home stream as what in literature is called a “stream of consciousness”: a constant stream of the multitudinous thoughts and feelings which pass through the mind of a narrator. Your website is a way for you to share your stream of consciousness, that temporary and subjective and highly biased snippet of the universe, with everyone else, including your future self. In all its multitudes.</p>

<p>If you look at my home page, you can see that I haven’t yet turned it into a stream. It almost looks like I haven’t posted anything since 2019. This wasn’t a conscious decision and it is something that I am going to change in the process of redesigning my site this year. And I couldn’t agree more to what Jeremy wrote. If your home stream looks like a collection of posts that all look visually distinct, more “like a chaotic second-hand bookstore”, it will be much closer to who you and your unpolished stream of consciousness actually are. It will make your site more personal and, if you want future visitors to be able to tell the difference between you and an AI, more human.</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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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>

+ 11
- 0
cache/2023/328b56a2ee2e291dabc8f63a0013cc7a/index.md View File

@@ -0,0 +1,11 @@
title: Streams of Consciousness
url: https://matthiasott.com/notes/streams-of-consciousness
hash_url: 328b56a2ee2e291dabc8f63a0013cc7a

<p><a href="https://adactio.com/journal/19894">Jeremy wrote a little something about streams</a>, in particular about streams on personal websites. His home page actually is like a stream: links, notes, and blog posts all appear underneath each other in chronological order.</p>

<p>Many of us are now rediscovering or reviving their personal sites, not only because the demise of Twitter has made it abundantly clear that we need to shift our attention away from large social media silos when we share our ideas, thoughts, and ramblings online. Our personal sites are the perfect home for all those personal bits and pieces. All those short and long-form posts, notes, thoughts, photos, links, but also just little things we notice in our world, things we learn, and things that excite us – they all belong on our personal websites first. So if you were asking yourself what you should post on your site, the correct answer is, of course, “everything you want”. Your personal site is your home on the Web. It is your playground but it is also a very subjective and individual account of all the things you think and care about. All the things that happen in your head. And on your home page, it can all come together in one large stream of different kinds of posts.</p>

<p>You could even think of this home stream as what in literature is called a “stream of consciousness”: a constant stream of the multitudinous thoughts and feelings which pass through the mind of a narrator. Your website is a way for you to share your stream of consciousness, that temporary and subjective and highly biased snippet of the universe, with everyone else, including your future self. In all its multitudes.</p>

<p>If you look at my home page, you can see that I haven’t yet turned it into a stream. It almost looks like I haven’t posted anything since 2019. This wasn’t a conscious decision and it is something that I am going to change in the process of redesigning my site this year. And I couldn’t agree more to what Jeremy wrote. If your home stream looks like a collection of posts that all look visually distinct, more “like a chaotic second-hand bookstore”, it will be much closer to who you and your unpolished stream of consciousness actually are. It will make your site more personal and, if you want future visitors to be able to tell the difference between you and an AI, more human.</p>

+ 186
- 0
cache/2023/392138accbdaee722a669834da5f1a8d/index.html View File

@@ -0,0 +1,186 @@
<!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>Farandole de projets (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://marienfressinaud.fr/farandole-de-projets.html">

<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>Farandole de projets</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-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://marienfressinaud.fr/farandole-de-projets.html" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p><strong>Je multiplie les projets ces derniers jours.</strong>
<a href="https://framagit.org/marienfressinaud/exploratrices/">Exploratrices</a> dont j’ai parlé <a href="exploratrices.html">ici</a>.
<a href="https://framagit.org/marienfressinaud/hitchhiker/">Hitchhiker</a> dont j’ai parlé <a href="https://flus.fr/carnet/hitchhiker-generateur-de-planets-statiques.html">sur le carnet de Flus</a>.
<a href="https://framagit.org/marienfressinaud/sonktionary/">Sonktionary</a> dont je n’ai pas encore parlé.
<a href="https://framagit.org/marienfressinaud/hermes">Hermès</a> sur lequel je travaille actuellement.
Sans compter <a href="https://framagit.org/marienfressinaud/farandole">Farandole</a> que je n’ai pas encore commencé.</p>
<p><em>Ça fait franchement du bien d’expérimenter autant de choses.</em></p>
<p>Pour Exploratrices, c’était la spécification complète du projet avant de démarrer, ainsi qu’une approche technique très différente de ce dont j’ai l’habitude.</p>
<p>Pour Hitchhiker, c’était la contrainte minimaliste : faire autant que possible avec aussi peu de lignes de code que je pouvais me permettre.</p>
<p>Sonktionary : un projet rigolo et fonctionnel démarré en milieu de soirée sur un coup de tête.</p>
<p>Avec Hermès, je découvre <a href="https://www.php.net/manual/language.attributes.php">les attributs PHP</a> et je complète largement mon framework, <a href="https://github.com/flusio/Minz">Minz</a>.
Je compte aussi explorer avec ce projet la dimension collaborative (et ses difficultés).</p>
<p>Je fais tout ça sans la contrainte de maintenance, car je ne développe que des prototypes de logiciels.
C’est une sorte d’exutoire pour se libérer l’esprit des projets qui me traînent dans la tête.</p>
<p><em>Libre à vous de vous en emparer.</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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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>

+ 19
- 0
cache/2023/392138accbdaee722a669834da5f1a8d/index.md View File

@@ -0,0 +1,19 @@
title: Farandole de projets
url: https://marienfressinaud.fr/farandole-de-projets.html
hash_url: 392138accbdaee722a669834da5f1a8d

<p><strong>Je multiplie les projets ces derniers jours.</strong>
<a href="https://framagit.org/marienfressinaud/exploratrices/">Exploratrices</a> dont j’ai parlé <a href="exploratrices.html">ici</a>.
<a href="https://framagit.org/marienfressinaud/hitchhiker/">Hitchhiker</a> dont j’ai parlé <a href="https://flus.fr/carnet/hitchhiker-generateur-de-planets-statiques.html">sur le carnet de Flus</a>.
<a href="https://framagit.org/marienfressinaud/sonktionary/">Sonktionary</a> dont je n’ai pas encore parlé.
<a href="https://framagit.org/marienfressinaud/hermes">Hermès</a> sur lequel je travaille actuellement.
Sans compter <a href="https://framagit.org/marienfressinaud/farandole">Farandole</a> que je n’ai pas encore commencé.</p>
<p><em>Ça fait franchement du bien d’expérimenter autant de choses.</em></p>
<p>Pour Exploratrices, c’était la spécification complète du projet avant de démarrer, ainsi qu’une approche technique très différente de ce dont j’ai l’habitude.</p>
<p>Pour Hitchhiker, c’était la contrainte minimaliste : faire autant que possible avec aussi peu de lignes de code que je pouvais me permettre.</p>
<p>Sonktionary : un projet rigolo et fonctionnel démarré en milieu de soirée sur un coup de tête.</p>
<p>Avec Hermès, je découvre <a href="https://www.php.net/manual/language.attributes.php">les attributs PHP</a> et je complète largement mon framework, <a href="https://github.com/flusio/Minz">Minz</a>.
Je compte aussi explorer avec ce projet la dimension collaborative (et ses difficultés).</p>
<p>Je fais tout ça sans la contrainte de maintenance, car je ne développe que des prototypes de logiciels.
C’est une sorte d’exutoire pour se libérer l’esprit des projets qui me traînent dans la tête.</p>
<p><em>Libre à vous de vous en emparer.</em></p>

+ 255
- 0
cache/2023/61f52848924157701ed66c85d67f3536/index.html View File

@@ -0,0 +1,255 @@
<!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>Visual design rules you can safely follow every time (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://anthonyhobday.com/sideprojects/saferules/">

<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>Visual design rules you can safely follow every time</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-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://anthonyhobday.com/sideprojects/saferules/" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p>You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are safe to follow every time.</p>
<h2>Use near-black and near-white instead of pure black and white</h2>
<p>Pure black looks unnatural on a screen, and pure white is too bright. Use close-to-black and close-to-white instead. Any other references to “black” and “white” in these rules assume you’re following this rule.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/1.png"></p>
<h2>Saturate your neutrals</h2>
<p>A neutral is generally a black, white, or grey. If you use colour in your interface, add a little bit of that colour to your neutrals. This will make the colour palette feel more coherent. If you use the HSB colour system less than 5% saturation should do it.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/2.png"></p>
<h2>Use high contrast for important elements</h2>
<p>Important elements means buttons, content, or anything else that the user needs to notice. A higher contrast means that the element will grab attention, which is useful for important elements. Elements that the user does not need to notice (e.g. structural elements, drop-shadows) can use as little contrast as possible.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/3.png"></p>
<h2>Everything in your design should be deliberate</h2>
<p>You should be deliberate about absolutely everything in your design. This means whitespace, alignment, size, spacing, colour, shadows. Everything. If someone points at a random part of your design you should have an explanation for why it looks that way. If you do not do this your design will not feel coherent.</p>
<p>If you are new to design you can use this rule as a prompt to learn more about what you are not deliberate about yet.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/4.png"></p>
<h2>Optical alignment is often better than mathematical alignment</h2>
<p>Your design software can align things mathematically. But some shapes don’t suit this type of alignment. For example, some odd shapes have a visual centre that is different from their mathematical centre. Often you will need to align things by eye so that it looks right.</p>
<p>It takes some practice to be able to align things by eye, but if you do it regularly you’ll quickly pick it up.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/5.png"></p>
<h2>Lower letter spacing and line height with larger text. Raise them with smaller text</h2>
<p>This applies to all text. The bigger the text, the less space you need between each letter and each line. The reverse is also true. If you do not do this large text can look spread out, and small text can look too close.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/6.png"></p>
<h2>Container borders should contrast with both the container and the background</h2>
<p>Example: If you have a card with a 1px border and a dark background, and it sits on top of an even darker background, the 1px border should be lighter than both of them. It should not be set to a brightness somewhere between the card and page background colours. Otherwise the edge of the container won’t look sharp enough. The same applies to light background colours: the 1px border should be darker than both background colours.</p>
<p>In the example below the left side is incorrect and the right side is correct.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/7.png"></p>
<h2>Everything should be aligned with something else</h2>
<p>Alignment helps us realise that things are related to each other. If something is not aligned with anything else, it feels like it does not belong in the design. Ideally each element should be aligned with other elements based on some kind of logic.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/8.png"></p>
<h2>Colours in a palette should have distinct brightness values</h2>
<p>When colours have different brightness values, this helps them look and feel distinctive not just in hue, but in brightness. This leads to better colour palettes because colours don’t compete with each other as much.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/9.png"></p>
<h2>If you saturate your neutrals you should use warm or cool colours, not both</h2>
<p>If you use both warm and cool colours to saturate neutrals, the colour palette will not feel coherent.</p>
<p>In the example below the left side uses a warm background and a cool foreground. The right side uses a warm background and foreground.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/10.png"></p>
<h2>Measurements should be mathematically related</h2>
<p>The spacing you use between elements, and the size of elements, should be determined by some kind of scale. This will help the design to look coherent. In the example below, every element uses multiples of 8. Horizontal and vertical grids based on a scale help if you want to make sure elements like pictures are the right size.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/11.png"></p>
<h2>Elements should go in order of visual weight</h2>
<p>If you have a series of elements in a row or column, and some are more visually heavy than others (two buttons and three links, for example), you should arrange them like a triangle. The visually heaviest element should go first, and the least heavy element last, in order. One caveat is that the visually heaviest element should be on the outside edge. If your elements are against the right edge of the design, for example, the heaviest element should be against the right edge. Elements that go in size or weight order look more satisfying.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/12.png"></p>
<h2>If you use a horizontal grid, use 12 columns</h2>
<p>If you’re going to break your design up into vertical columns, use 12 columns. A 12 column grid can be broken up into 1 column, 2 columns, 3 columns, and 4 columns, so it gives you a lot of flexibility.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/13.png"></p>
<h2>Spacing should go between points of high contrast</h2>
<p>When you’re measuring out space between elements in a design—for example if you want 100px of vertical space between blocks of content on a landing page—the spacing should be from one point of high contrast to the next. This is because our eyes find the edges of elements based on contrast, so we expect the spacing to run between points of contrast.</p>
<p>A white background with black paragraphs of text means that the points of contrast will be the end of one paragraph and the start of the next. But if you put a black background behind one white paragraph, the spacing should run from the end of one paragraph to the start of the black background, then again from the start of the black background to the start of the paragraph.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/14.png"></p>
<h2>Closer elements should be lighter</h2>
<p>As elements on the screen get closer to the user, they should get lighter. This applies to both light and dark mode UIs, because it matches how the real world works.</p>
<p>In the example below, the left side is incorrect and the right side is correct.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/15.png"></p>
<h2>Make drop shadow blur values double their distance values</h2>
<p>e.g. If you create a shadow which extends 4 pixels on the Y axis, use a blur value of 8 pixels. As the element gets “closer” to the viewer, it’s a good idea to also lower the opacity of the shadow. This looks good because as elements move closer to the light source, their shadows get more blurry.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/16.png"></p>
<h2>Put simple on complex or complex on simple</h2>
<p>A complex background (e.g. a colourful gradient fill) works best if the foreground (e.g. text) is simple. And a complex foreground element is best on a simple background. You can put simple on simple, but it tends to look plain. Complex on complex should be avoided because it’s hard to pull off and will add visual clutter.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/17.png"></p>
<h2>Keep container colours within brightness limits</h2>
<p>The brightness difference between background and container should be within 12% for dark interfaces, and 7% for light interfaces. These percentages refer to the brightness value in the HSB colour system.</p>
<p>This is based on a study of about 100 well-designed websites where I checked the brightness of containers against the backgrounds.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/18.png"></p>
<h2>Make outer padding the same or more than inner padding</h2>
<p>In containers, inner padding is the space between elements inside the container. Outer padding is the space between the elements and the edges of the container. This outer padding should be the same or more than the inner padding. Elements that are more related should be closer together. The elements inside a container are more related to each other than they are to the container itself.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/19.png"></p>
<h2>Keep body text at 16px or above</h2>
<p>16px is the default text size in most browsers. Text below this size gets harder to read, so it’s safest to avoid it for body text. The higher you go beyond 16px, the easier the text is to read.</p>
<p>If you are writing code yourself, use whatever equivalent of pixels you prefer.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/20.png"></p>
<h2>Use a line length around 70 characters</h2>
<p>It doesn’t matter too much if your line length is 60 or 80 characters, but go too far either side of that and you might run into subtle readability issues.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/21.png"></p>
<h2>Make horizontal padding twice the vertical padding in buttons</h2>
<p>The standard button pattern is wider than it is tall. If you want people to recognise an element as a button, it’s a good idea to follow the pattern. In the example below, the padding above and below the label is 30px, and the padding to the left and right is 60px.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/22.png"></p>
<h2>Use two typefaces at most</h2>
<p>A second typeface is an opportunity to reinforce the concept behind a design. It also helps add some variety to a design. It’s rarely necessary to use more than two, and it might make the design feel visually confused.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/23.png"></p>
<h2>Nest corners properly</h2>
<p>Sometimes you will have two or more rounded corners nested together. If you want them to look right, set the inside corner radius to the outside corner radius, minus the distance between the two. In the example below the outside radius is 30px, and there is a 20px gap, so the inside corner radius is 10px.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/24.png"></p>
<h2>Don’t put two hard divides next to each other</h2>
<p>Background transitions, container edges, and dividing lines will create hard visual divides. You should not have two or more hard divides next to each other. You can see this marked in red in the example below. More than one hard divide creates visual clutter and catches the eye. In the example I have removed the background transition so that the hard divide only comes from the container edge.</p>
<p><img src="https://anthonyhobday.com/sideprojects/saferules/images/25.png"></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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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>

+ 88
- 0
cache/2023/61f52848924157701ed66c85d67f3536/index.md View File

@@ -0,0 +1,88 @@
title: Visual design rules you can safely follow every time
url: https://anthonyhobday.com/sideprojects/saferules/
hash_url: 61f52848924157701ed66c85d67f3536

<p>You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are safe to follow every time.</p>
<h2>Use near-black and near-white instead of pure black and white</h2>
<p>Pure black looks unnatural on a screen, and pure white is too bright. Use close-to-black and close-to-white instead. Any other references to “black” and “white” in these rules assume you’re following this rule.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/1.png">
<h2>Saturate your neutrals</h2>
<p>A neutral is generally a black, white, or grey. If you use colour in your interface, add a little bit of that colour to your neutrals. This will make the colour palette feel more coherent. If you use the HSB colour system less than 5% saturation should do it.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/2.png">
<h2>Use high contrast for important elements</h2>
<p>Important elements means buttons, content, or anything else that the user needs to notice. A higher contrast means that the element will grab attention, which is useful for important elements. Elements that the user does not need to notice (e.g. structural elements, drop-shadows) can use as little contrast as possible.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/3.png">
<h2>Everything in your design should be deliberate</h2>
<p>You should be deliberate about absolutely everything in your design. This means whitespace, alignment, size, spacing, colour, shadows. Everything. If someone points at a random part of your design you should have an explanation for why it looks that way. If you do not do this your design will not feel coherent.</p>
<p>If you are new to design you can use this rule as a prompt to learn more about what you are not deliberate about yet.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/4.png">
<h2>Optical alignment is often better than mathematical alignment</h2>
<p>Your design software can align things mathematically. But some shapes don’t suit this type of alignment. For example, some odd shapes have a visual centre that is different from their mathematical centre. Often you will need to align things by eye so that it looks right.</p>
<p>It takes some practice to be able to align things by eye, but if you do it regularly you’ll quickly pick it up.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/5.png">
<h2>Lower letter spacing and line height with larger text. Raise them with smaller text</h2>
<p>This applies to all text. The bigger the text, the less space you need between each letter and each line. The reverse is also true. If you do not do this large text can look spread out, and small text can look too close.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/6.png">
<h2>Container borders should contrast with both the container and the background</h2>
<p>Example: If you have a card with a 1px border and a dark background, and it sits on top of an even darker background, the 1px border should be lighter than both of them. It should not be set to a brightness somewhere between the card and page background colours. Otherwise the edge of the container won’t look sharp enough. The same applies to light background colours: the 1px border should be darker than both background colours.</p>
<p>In the example below the left side is incorrect and the right side is correct.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/7.png">
<h2>Everything should be aligned with something else</h2>
<p>Alignment helps us realise that things are related to each other. If something is not aligned with anything else, it feels like it does not belong in the design. Ideally each element should be aligned with other elements based on some kind of logic.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/8.png">
<h2>Colours in a palette should have distinct brightness values</h2>
<p>When colours have different brightness values, this helps them look and feel distinctive not just in hue, but in brightness. This leads to better colour palettes because colours don’t compete with each other as much.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/9.png">
<h2>If you saturate your neutrals you should use warm or cool colours, not both</h2>
<p>If you use both warm and cool colours to saturate neutrals, the colour palette will not feel coherent.</p>
<p>In the example below the left side uses a warm background and a cool foreground. The right side uses a warm background and foreground.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/10.png">
<h2>Measurements should be mathematically related</h2>
<p>The spacing you use between elements, and the size of elements, should be determined by some kind of scale. This will help the design to look coherent. In the example below, every element uses multiples of 8. Horizontal and vertical grids based on a scale help if you want to make sure elements like pictures are the right size.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/11.png">
<h2>Elements should go in order of visual weight</h2>
<p>If you have a series of elements in a row or column, and some are more visually heavy than others (two buttons and three links, for example), you should arrange them like a triangle. The visually heaviest element should go first, and the least heavy element last, in order. One caveat is that the visually heaviest element should be on the outside edge. If your elements are against the right edge of the design, for example, the heaviest element should be against the right edge. Elements that go in size or weight order look more satisfying.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/12.png">
<h2>If you use a horizontal grid, use 12 columns</h2>
<p>If you’re going to break your design up into vertical columns, use 12 columns. A 12 column grid can be broken up into 1 column, 2 columns, 3 columns, and 4 columns, so it gives you a lot of flexibility.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/13.png">
<h2>Spacing should go between points of high contrast</h2>
<p>When you’re measuring out space between elements in a design—for example if you want 100px of vertical space between blocks of content on a landing page—the spacing should be from one point of high contrast to the next. This is because our eyes find the edges of elements based on contrast, so we expect the spacing to run between points of contrast.</p>
<p>A white background with black paragraphs of text means that the points of contrast will be the end of one paragraph and the start of the next. But if you put a black background behind one white paragraph, the spacing should run from the end of one paragraph to the start of the black background, then again from the start of the black background to the start of the paragraph.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/14.png">
<h2>Closer elements should be lighter</h2>
<p>As elements on the screen get closer to the user, they should get lighter. This applies to both light and dark mode UIs, because it matches how the real world works.</p>
<p>In the example below, the left side is incorrect and the right side is correct.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/15.png">
<h2>Make drop shadow blur values double their distance values</h2>
<p>e.g. If you create a shadow which extends 4 pixels on the Y axis, use a blur value of 8 pixels. As the element gets “closer” to the viewer, it’s a good idea to also lower the opacity of the shadow. This looks good because as elements move closer to the light source, their shadows get more blurry.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/16.png">
<h2>Put simple on complex or complex on simple</h2>
<p>A complex background (e.g. a colourful gradient fill) works best if the foreground (e.g. text) is simple. And a complex foreground element is best on a simple background. You can put simple on simple, but it tends to look plain. Complex on complex should be avoided because it’s hard to pull off and will add visual clutter.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/17.png">
<h2>Keep container colours within brightness limits</h2>
<p>The brightness difference between background and container should be within 12% for dark interfaces, and 7% for light interfaces. These percentages refer to the brightness value in the HSB colour system.</p>
<p>This is based on a study of about 100 well-designed websites where I checked the brightness of containers against the backgrounds.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/18.png">
<h2>Make outer padding the same or more than inner padding</h2>
<p>In containers, inner padding is the space between elements inside the container. Outer padding is the space between the elements and the edges of the container. This outer padding should be the same or more than the inner padding. Elements that are more related should be closer together. The elements inside a container are more related to each other than they are to the container itself.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/19.png">
<h2>Keep body text at 16px or above</h2>
<p>16px is the default text size in most browsers. Text below this size gets harder to read, so it’s safest to avoid it for body text. The higher you go beyond 16px, the easier the text is to read.</p>
<p>If you are writing code yourself, use whatever equivalent of pixels you prefer.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/20.png">
<h2>Use a line length around 70 characters</h2>
<p>It doesn’t matter too much if your line length is 60 or 80 characters, but go too far either side of that and you might run into subtle readability issues.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/21.png">
<h2>Make horizontal padding twice the vertical padding in buttons</h2>
<p>The standard button pattern is wider than it is tall. If you want people to recognise an element as a button, it’s a good idea to follow the pattern. In the example below, the padding above and below the label is 30px, and the padding to the left and right is 60px.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/22.png">
<h2>Use two typefaces at most</h2>
<p>A second typeface is an opportunity to reinforce the concept behind a design. It also helps add some variety to a design. It’s rarely necessary to use more than two, and it might make the design feel visually confused.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/23.png">
<h2>Nest corners properly</h2>
<p>Sometimes you will have two or more rounded corners nested together. If you want them to look right, set the inside corner radius to the outside corner radius, minus the distance between the two. In the example below the outside radius is 30px, and there is a 20px gap, so the inside corner radius is 10px.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/24.png">
<h2>Don’t put two hard divides next to each other</h2>
<p>Background transitions, container edges, and dividing lines will create hard visual divides. You should not have two or more hard divides next to each other. You can see this marked in red in the example below. More than one hard divide creates visual clutter and catches the eye. In the example I have removed the background transition so that the hard divide only comes from the container edge.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/25.png">

+ 185
- 0
cache/2023/afa0aae212698b71118868d36d50a747/index.html View File

@@ -0,0 +1,185 @@
<!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>We need to talk about your Github addiction (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://ploum.net/2023-02-22-leaving-github.html">

<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>We need to talk about your Github addiction</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-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://ploum.net/2023-02-22-leaving-github.html" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p>Listen my fellow geeks in code, we need to have a serious conversation about Github.</p>
<p>At first, Github was only a convenient way to host a git repository and to collaborate with others. But, as always with monopolies, once you are trapped by convenience and the network effect, the shitification process starts to try to get as much money and data from you.</p>
<p>First of all, let’s remember that Github is a fully proprietary service. Using it to host the development of a free software makes no sense if you value freedom. It is not like we don’t have many alternatives available (sourcehut, codeberg, gitlab, etc). It should be noted that those alternatives usually offer a better workflow and a better git integration than Github. They usually make more sense but, I agree, it might be hard to change ten years of suboptimal habits imposed by the github workflow.</p>
<p>One thing that always annoyed me with Github is the "fun factor". Emojis appearing automatically in messages I’m trying to post, intrusive notifications about badges and followers I earned. Annoying, to say the least. (Am I the only one using ":" in a sentence without willing to make an emoji?)</p>
<p>But I discovered that Github is now pushing it even more in that direction: a feed full of random projects and people I don’t care about, notifications to get me to "discover" new projects and "follow" new persons. They don’t even try to pretend to be a professional platform anymore. It’s a pure attention-grabbing personal data extorting social networks. To add insult to injury, we now know that everything published on Github is mostly there to serve as training data for Microsoft AI engines.</p>
<p>Developers are now raw meat encouraged to get stars, followers and commit counters, doing the most stupid things in the most appealing way to get… visibility! Yeah! Engagement! Followers! Audience!</p>
<p>Good code is written when people are focused, thinking hard about a problem while having the time to grasp the big picture. Modern Github seems to be purposely built as a tool to avoid people thinking about what they do and discourage them from writing anything but a new JavaScript framework.</p>
<p>There’s no way I can morally keep an account on Github. I’ve migrated all of my own projects to Sourcehut (where I’ve a paid account) or to my university self-hosted gitlab.</p>
<p>But there are so many projects I care about still on Github. So many important free software. So many small projects where I might send an occasional bug report or even a patch. For the anecdote, on at least two different occasions, I didn’t send a patch I crafted for small projects because I didn’t know how to send it by mail and was not in the mood to deal with the Github workflow at that particular time.</p>
<p>By keeping your project on Github, you are encouraging new developers to sign up there, to create their own project there. Most importantly, you support the idea that all geeks/developers are somehow on Github, that it is a badge of pride to be there.</p>
<p>If you care about only one of software freedom, privacy, focus, sane market without monopoly or if you simply believe we don’t need even more bullshit in our lives, you should move your projects out of Github and advocate a similar migration to projects you care about. Thanks to git decentralisation, you could even provide an alternative/backup while keeping github for a while. </p>
<p>If you don’t have any idea where to go, that should be a red light in your brain about monopoly abuses. If you are a professional developer and using anything other than Github seems hard, it should be a triple red light warning.</p>
<p>And I’m not saying that because grumpy-old-beard-me wants to escape those instagramesque emojis. Well, not only that but, indeed, I don’t wanna know the next innovative engagement-fostering feature. Thanks.</p>
<p>The best time to leave Github was before it was acquired by Microsoft. The second-best time is now. Sooner or later, you will be forced out of Github like we, oldies, were forced out of Sourceforge. Better leaving while you are free to do it on your own terms…</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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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-2021-12.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>

+ 18
- 0
cache/2023/afa0aae212698b71118868d36d50a747/index.md View File

@@ -0,0 +1,18 @@
title: We need to talk about your Github addiction
url: https://ploum.net/2023-02-22-leaving-github.html
hash_url: afa0aae212698b71118868d36d50a747

<p>Listen my fellow geeks in code, we need to have a serious conversation about Github.</p>
<p>At first, Github was only a convenient way to host a git repository and to collaborate with others. But, as always with monopolies, once you are trapped by convenience and the network effect, the shitification process starts to try to get as much money and data from you.</p>
<p>First of all, let’s remember that Github is a fully proprietary service. Using it to host the development of a free software makes no sense if you value freedom. It is not like we don’t have many alternatives available (sourcehut, codeberg, gitlab, etc). It should be noted that those alternatives usually offer a better workflow and a better git integration than Github. They usually make more sense but, I agree, it might be hard to change ten years of suboptimal habits imposed by the github workflow.</p>
<p>One thing that always annoyed me with Github is the "fun factor". Emojis appearing automatically in messages I’m trying to post, intrusive notifications about badges and followers I earned. Annoying, to say the least. (Am I the only one using ":" in a sentence without willing to make an emoji?)</p>
<p>But I discovered that Github is now pushing it even more in that direction: a feed full of random projects and people I don’t care about, notifications to get me to "discover" new projects and "follow" new persons. They don’t even try to pretend to be a professional platform anymore. It’s a pure attention-grabbing personal data extorting social networks. To add insult to injury, we now know that everything published on Github is mostly there to serve as training data for Microsoft AI engines.</p>
<p>Developers are now raw meat encouraged to get stars, followers and commit counters, doing the most stupid things in the most appealing way to get… visibility! Yeah! Engagement! Followers! Audience!</p>
<p>Good code is written when people are focused, thinking hard about a problem while having the time to grasp the big picture. Modern Github seems to be purposely built as a tool to avoid people thinking about what they do and discourage them from writing anything but a new JavaScript framework.</p>
<p>There’s no way I can morally keep an account on Github. I’ve migrated all of my own projects to Sourcehut (where I’ve a paid account) or to my university self-hosted gitlab.</p>
<p>But there are so many projects I care about still on Github. So many important free software. So many small projects where I might send an occasional bug report or even a patch. For the anecdote, on at least two different occasions, I didn’t send a patch I crafted for small projects because I didn’t know how to send it by mail and was not in the mood to deal with the Github workflow at that particular time.</p>
<p>By keeping your project on Github, you are encouraging new developers to sign up there, to create their own project there. Most importantly, you support the idea that all geeks/developers are somehow on Github, that it is a badge of pride to be there.</p>
<p>If you care about only one of software freedom, privacy, focus, sane market without monopoly or if you simply believe we don’t need even more bullshit in our lives, you should move your projects out of Github and advocate a similar migration to projects you care about. Thanks to git decentralisation, you could even provide an alternative/backup while keeping github for a while. </p>
<p>If you don’t have any idea where to go, that should be a red light in your brain about monopoly abuses. If you are a professional developer and using anything other than Github seems hard, it should be a triple red light warning.</p>
<p>And I’m not saying that because grumpy-old-beard-me wants to escape those instagramesque emojis. Well, not only that but, indeed, I don’t wanna know the next innovative engagement-fostering feature. Thanks.</p>
<p>The best time to leave Github was before it was acquired by Microsoft. The second-best time is now. Sooner or later, you will be forced out of Github like we, oldies, were forced out of Sourceforge. Better leaving while you are free to do it on your own terms…</p>

+ 10
- 0
cache/2023/index.html View File

@@ -109,6 +109,8 @@
<li><a href="/david/cache/2022/934ed9f96be582e35b3c8cf8fc0859e5/" title="Accès à l’article dans le cache local : La dette technique - Carnet de notes">La dette technique - Carnet de notes</a> (<a href="https://n.survol.fr/n/la-dette-technique" title="Accès à l’article original distant : La dette technique - Carnet de notes">original</a>)</li>
<li><a href="/david/cache/2022/328b56a2ee2e291dabc8f63a0013cc7a/" title="Accès à l’article dans le cache local : Streams of Consciousness">Streams of Consciousness</a> (<a href="https://matthiasott.com/notes/streams-of-consciousness" title="Accès à l’article original distant : Streams of Consciousness">original</a>)</li>
<li><a href="/david/cache/2022/4d3fa4020fd0504dbced1a408a2d394e/" title="Accès à l’article dans le cache local : #132: The contagious visual blandness of Netflix">#132: The contagious visual blandness of Netflix</a> (<a href="https://haleynahman.substack.com/p/132-the-contagious-visual-blandness" title="Accès à l’article original distant : #132: The contagious visual blandness of Netflix">original</a>)</li>
<li><a href="/david/cache/2022/b5acd8bbf209345ff300ea8c10c44181/" title="Accès à l’article dans le cache local : Retiring Pinafore">Retiring Pinafore</a> (<a href="https://nolanlawson.com/2023/01/09/retiring-pinafore/" title="Accès à l’article original distant : Retiring Pinafore">original</a>)</li>
@@ -135,6 +137,8 @@
<li><a href="/david/cache/2022/29dac969af1faa8ba0338a2e7e59ebbd/" title="Accès à l’article dans le cache local : A notification center for progress bars that sounds like birdsong">A notification center for progress bars that sounds like birdsong</a> (<a href="https://interconnected.org/home/2023/02/10/progress" title="Accès à l’article original distant : A notification center for progress bars that sounds like birdsong">original</a>)</li>
<li><a href="/david/cache/2022/61f52848924157701ed66c85d67f3536/" title="Accès à l’article dans le cache local : Visual design rules you can safely follow every time">Visual design rules you can safely follow every time</a> (<a href="https://anthonyhobday.com/sideprojects/saferules/" title="Accès à l’article original distant : Visual design rules you can safely follow every time">original</a>)</li>
<li><a href="/david/cache/2022/055ec9ce09151d35309f39b824189c61/" title="Accès à l’article dans le cache local : In Praise of Shadows">In Praise of Shadows</a> (<a href="https://www.robinrendle.com/essays/in-praise-of-shadows/" title="Accès à l’article original distant : In Praise of Shadows">original</a>)</li>
<li><a href="/david/cache/2022/dddffbc175fe6802b5e33a92ebc440ec/" title="Accès à l’article dans le cache local : Année 2022 en revue">Année 2022 en revue</a> (<a href="https://blog.hello-bokeh.fr/2022/12/30/annee-2022-en-revue/" title="Accès à l’article original distant : Année 2022 en revue">original</a>)</li>
@@ -167,10 +171,14 @@
<li><a href="/david/cache/2022/d7f9460e62402a298210736cdf64b88c/" title="Accès à l’article dans le cache local : 7 Reasons why I don’t write">7 Reasons why I don’t write</a> (<a href="https://mxb.dev/blog/seven-reasons-why-i-dont-write/" title="Accès à l’article original distant : 7 Reasons why I don’t write">original</a>)</li>
<li><a href="/david/cache/2022/392138accbdaee722a669834da5f1a8d/" title="Accès à l’article dans le cache local : Farandole de projets">Farandole de projets</a> (<a href="https://marienfressinaud.fr/farandole-de-projets.html" title="Accès à l’article original distant : Farandole de projets">original</a>)</li>
<li><a href="/david/cache/2022/fb08217a583922fd319fabb55f34a4f3/" title="Accès à l’article dans le cache local : A community isn’t a garden, it’s a bar.">A community isn’t a garden, it’s a bar.</a> (<a href="https://powazek.com/posts/3571" title="Accès à l’article original distant : A community isn’t a garden, it’s a bar.">original</a>)</li>
<li><a href="/david/cache/2022/3b05eb0d7d0409bcfd53b4cdf6c20daa/" title="Accès à l’article dans le cache local : The yaml document from hell">The yaml document from hell</a> (<a href="https://ruudvanasseldonk.com/2023/01/11/the-yaml-document-from-hell" title="Accès à l’article original distant : The yaml document from hell">original</a>)</li>
<li><a href="/david/cache/2022/afa0aae212698b71118868d36d50a747/" title="Accès à l’article dans le cache local : We need to talk about your Github addiction">We need to talk about your Github addiction</a> (<a href="https://ploum.net/2023-02-22-leaving-github.html" title="Accès à l’article original distant : We need to talk about your Github addiction">original</a>)</li>
<li><a href="/david/cache/2022/7258248bb534fddb277bf6148cd3ffbf/" title="Accès à l’article dans le cache local : Reentry | A Working Library">Reentry | A Working Library</a> (<a href="https://aworkinglibrary.com/writing/reentry" title="Accès à l’article original distant : Reentry | A Working Library">original</a>)</li>
<li><a href="/david/cache/2022/e29bd9361e89e31ac21ee21180ec1dfb/" title="Accès à l’article dans le cache local : Un coup d’œil sous le capot">Un coup d’œil sous le capot</a> (<a href="https://blog.gandi.net/fr/posts/un-coup-d-oeil-sous-le-capot/" title="Accès à l’article original distant : Un coup d’œil sous le capot">original</a>)</li>
@@ -203,6 +211,8 @@
<li><a href="/david/cache/2022/f9e282fb545b5c1f50dfa1c0d98c50e3/" title="Accès à l’article dans le cache local : South Pole Topography">South Pole Topography</a> (<a href="https://brr.fyi/posts/south-pole-topography" title="Accès à l’article original distant : South Pole Topography">original</a>)</li>
<li><a href="/david/cache/2022/0568befa90d2b39c0694d4c7ffc3cd73/" title="Accès à l’article dans le cache local : Don't believe ChatGPT - we do NOT offer a "phone lookup" service">Don't believe ChatGPT - we do NOT offer a "phone lookup" service</a> (<a href="https://blog.opencagedata.com/post/dont-believe-chatgpt" title="Accès à l’article original distant : Don't believe ChatGPT - we do NOT offer a "phone lookup" service">original</a>)</li>
<li><a href="/david/cache/2022/a0ccec7acb932e4155960c1c88d65eff/" title="Accès à l’article dans le cache local : La mission de Deuxfleurs">La mission de Deuxfleurs</a> (<a href="https://plume.deuxfleurs.fr/~/Deuxfleurs/La%20mission%20de%20Deuxfleurs" title="Accès à l’article original distant : La mission de Deuxfleurs">original</a>)</li>
<li><a href="/david/cache/2022/482252d2b8806e99bc30ffab2b2c51c9/" title="Accès à l’article dans le cache local : Des questions · Boris Schapira">Des questions · Boris Schapira</a> (<a href="https://boris.schapira.dev/notes/2023-02-des-questions/" title="Accès à l’article original distant : Des questions · Boris Schapira">original</a>)</li>

Write Preview
Loading…
Cancel
Save