davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Acte de naissance (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="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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 type="text/javascript">
    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="http://scopyleft.fr/blog/2013/acte-de-naissance/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>Acte de naissance</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="http://scopyleft.fr/blog/2013/acte-de-naissance/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <blockquote>
<p>« Ce n’est pas un signe de bonne santé que d’être bien adapté à une société profondément malade » — <a href="https://fr.wikipedia.org/wiki/Jiddu_Krishnamurti">Krishnamurti</a></p>
</blockquote>

<p>Le projet de monter une <a href="http://www.les-scop.coop/sites/fr/les-scop/qu-est-ce-qu-une-scop.html">coopérative</a> de développement Web avait germé il y a bien longtemps dans nos cerveaux épris d’équité et de démocratie solidaire ; nous sommes heureux de donner concrètement vie à cette idée en créant un outil de travail pleinement conforme à nos valeurs. Oui, nous venons de créer <a href="http://scopyleft.fr/">la boîte dont nous avons toujours rêvé</a>.</p>

<p>Scopyleft est empreinte de nos convictions parmi les plus insensées ; celles de partager, d’échanger, de redistribuer, de <a href="http://scopyleft.fr/transparence/">s’ouvrir le plus complètement possible</a>, de se donner les moyens de <a href="http://scopyleft.fr/bien-etre/">s’épanouir et d’être heureux</a> dans l’exercice de notre activité professionnelle. Puisqu’on vous dit qu’on est fous.</p>

<h3>Vaste programme</h3>

<p>Évidemment, tout n’a pas été forcément facile durant cette phase de création. Et contre toute attente, les <a href="https://github.com/scopyleft/documentation/blob/master/incubateur/creation-scop.md">démarches administratives</a> n’ont pas été les obstacles les plus difficiles à surmonter, malgré leur pénibilité. Le plus stimulant — bien qu’éprouvant — a été de confronter, valider et accorder nos principes et valeurs respectifs.</p>

<p>Ce travail de plusieurs mois, bien plus fastidieux qu’il peut n’y paraître de prime abord,  nous a permis d’engager de nombreuses discussions, de soulever tout autant d’interrogations et de prendre le temps d’y répondre, ensemble. Ces efforts ont débouché sur l’établissement d’un manifeste, dont la version la plus épurée <a href="http://scopyleft.fr/#manifeste">accueille aujourd’hui les visiteurs sur le site</a>. Une <a href="https://github.com/scopyleft/documentation/blob/master/administratif/statuts.md#manifeste">version plus détaillée</a> de ce manifeste a été également ajoutée en préambule des statuts de la société.</p>

<h3>Transparence</h3>

<p>Si vous avez cliqué sur le lien précédent, vous vous êtes probablement rendu compte que nous avons mis à disposition les <a href="https://github.com/scopyleft/documentation/blob/master/administratif/statuts.md">statuts de Scopyleft</a> publiquement sur Github, ainsi que <a href="https://github.com/scopyleft/documentation">tout un ensemble de ressources</a> liées à la constitution, mais aussi à <a href="https://trello.com/board/quotidien/50879d153736d86435004cba">nos encours quotidiens</a> (excepté les échanges confidentiels avec nos clients bien entendu),  <a href="https://github.com/scopyleft/documentation/tree/master/pilotage/retrospectives">nos rétrospectives</a> ou encore <a href="https://docs.google.com/spreadsheet/ccc?key=0Al7gTbdJfUcPdFVkZ1BXdVRuMTlocFJWYjdUeU9MTmc#gid=14">notre comptabilité</a> !</p>

<p>Nous projetons de rédiger à terme des <a href="https://github.com/scopyleft/documentation#readme">notices explicatives</a> pour chacun des types de document que nous libérons et de régulièrement publier ici-même le fruit de nos expérimentations à ce sujet.</p>

<p>Bien évidemment, vous êtes encouragés à contribuer et vous approprier ces documents, leur amélioration collective étant l’un des principaux objectifs de cette libération.</p>

<h3>Aspirations</h3>

<p>Nous souhaitons avant tout mettre nos compétences individuelles et collectives au service de projets Web et mobiles utiles au plus grand nombre.</p>

<p>Nous avons à notre disposition une très bonne connaissance du Web en général et de technologies comme <a href="http://python.org/">Python</a>, <a href="http://www.djangoproject.com/">Django</a> et <a href="https://developer.mozilla.org/fr/docs/JavaScript">Javascript</a> en particulier.</p>

<p>Nous abordons chaque nouveau projet avec un regard neuf et débutant. Nous prenons beaucoup de plaisir à échanger, à partager notre culture et nos valeurs en accompagnant partenaires et organisations dans leur transformation <a href="http://agilemanifesto.org/">Agile</a> ou vers le <a href="https://fr.wikipedia.org/wiki/Lean_IT">Lean thinking</a>.</p>

<p><strong>Nous n’attendons maintenant plus qu’une chose : concevoir et fabriquer de belles choses, avec vous.</strong></p>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>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 type="text/javascript">
    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>