|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527 |
- <!doctype html><!-- This is a valid HTML5 document. -->
- <!-- Screen readers, SEO, extensions and so on. -->
- <html lang=fr>
- <!-- Has to be within the first 1024 bytes, hence before the <title>
- See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
- <meta charset=utf-8>
- <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
- <!-- The viewport meta is quite crowded and we are responsible for that.
- See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
- <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
- <!-- Required to make a valid HTML5 document. -->
- <title>AgileFrance 2020 (archive) — David Larlet</title>
- <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
- <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
- <link rel="manifest" href="/manifest.json">
- <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
- <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
- <meta name="apple-mobile-web-app-title" content="David Larlet">
- <meta name="application-name" content="David Larlet">
- <meta name="msapplication-TileColor" content="#da532c">
- <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
- <meta name="theme-color" content="#f0f0ea">
- <!-- That good ol' feed, subscribe :p. -->
- <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
-
- <meta name="robots" content="noindex, nofollow">
- <meta content="origin-when-cross-origin" name="referrer">
- <!-- Canonical URL for SEO purposes -->
- <link rel="canonical" href="https://medium.com/@matti_sg_fr/agilefrance-2020-4bfe82b13b37">
-
- <style>
- /* http://meyerweb.com/eric/tools/css/reset/ */
- html, body, div, span,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
- a, abbr, address, big, cite, code,
- del, dfn, em, img, ins,
- small, strike, strong, tt, var,
- dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td,
- article, aside, canvas, details, embed,
- figure, figcaption, footer, header, hgroup,
- menu, nav, output, ruby, section, summary,
- time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- }
- /* HTML5 display-role reset for older browsers */
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section { display: block; }
- body { line-height: 1; }
- blockquote, q { quotes: none; }
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: '';
- content: none;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
-
- /* http://practicaltypography.com/equity.html */
- /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
- /* https://www.filamentgroup.com/lab/js-web-fonts.html */
- @font-face {
- font-family: 'EquityTextB';
- src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
- url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
- font-weight: 300;
- font-style: normal;
- font-display: swap;
- }
- @font-face {
- font-family: 'EquityTextB';
- src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
- url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
- font-weight: 300;
- font-style: italic;
- font-display: swap;
- }
- @font-face {
- font-family: 'EquityTextB';
- src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
- url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
- font-weight: 700;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: 'ConcourseT3';
- src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
- url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
- font-weight: 300;
- font-style: normal;
- font-display: swap;
- }
-
-
- /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
- body {
- /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
- font-family: "EquityTextB", Palatino, serif;
- background-color: #f0f0ea;
- color: #07486c;
- font-kerning: normal;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: subpixel-antialiased;
- text-rendering: optimizeLegibility;
- font-variant-ligatures: common-ligatures contextual;
- font-feature-settings: "kern", "liga", "clig", "calt";
- }
- pre, code, kbd, samp, var, tt {
- font-family: 'TriplicateT4c', monospace;
- }
- em {
- font-style: italic;
- color: #323a45;
- }
- strong {
- font-weight: bold;
- color: black;
- }
- nav {
- background-color: #323a45;
- color: #f0f0ea;
- display: flex;
- justify-content: space-around;
- padding: 1rem .5rem;
- }
- nav:last-child {
- border-bottom: 1vh solid #2d7474;
- }
- nav a {
- color: #f0f0ea;
- }
- nav abbr {
- border-bottom: 1px dotted white;
- }
-
- h1 {
- border-top: 1vh solid #2d7474;
- border-bottom: .2vh dotted #2d7474;
- background-color: #e3e1e1;
- color: #323a45;
- text-align: center;
- padding: 5rem 0 4rem 0;
- width: 100%;
- font-family: 'ConcourseT3';
- display: flex;
- flex-direction: column;
- }
- h1.single {
- padding-bottom: 10rem;
- }
- h1 span {
- position: absolute;
- top: 1vh;
- left: 20%;
- line-height: 0;
- }
- h1 span a {
- line-height: 1.7;
- padding: 1rem 1.2rem .6rem 1.2rem;
- border-radius: 0 0 6% 6%;
- background: #2d7474;
- font-size: 1.3rem;
- color: white;
- text-decoration: none;
- }
- h2 {
- margin: 4rem 0 1rem;
- border-top: .2vh solid #2d7474;
- padding-top: 1vh;
- }
- h3 {
- text-align: center;
- margin: 3rem 0 .75em;
- }
- hr {
- height: .4rem;
- width: .4rem;
- border-radius: .4rem;
- background: #07486c;
- margin: 2.5rem auto;
- }
- time {
- display: bloc;
- margin-left: 0 !important;
- }
- ul, ol {
- margin: 2rem;
- }
- ul {
- list-style-type: square;
- }
- a {
- text-decoration-skip-ink: auto;
- text-decoration-thickness: 0.05em;
- text-underline-offset: 0.09em;
- }
- article {
- max-width: 50rem;
- display: flex;
- flex-direction: column;
- margin: 2rem auto;
- }
- article.single {
- border-top: .2vh dotted #2d7474;
- margin: -6rem auto 1rem auto;
- background: #f0f0ea;
- padding: 2rem;
- }
- article p:last-child {
- margin-bottom: 1rem;
- }
- p {
- padding: 0 .5rem;
- margin-left: 3rem;
- }
- p + p,
- figure + p {
- margin-top: 2rem;
- }
-
- blockquote {
- background-color: #e3e1e1;
- border-left: .5vw solid #2d7474;
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 1rem;
- margin: 1.5rem;
- }
- blockquote cite {
- font-style: italic;
- }
- blockquote p {
- margin-left: 0;
- }
-
- figure {
- border-top: .2vh solid #2d7474;
- background-color: #e3e1e1;
- text-align: center;
- padding: 1.5rem 0;
- margin: 1rem 0 0;
- font-size: 1.5rem;
- width: 100%;
- }
- figure img {
- max-width: 250px;
- max-height: 250px;
- border: .5vw solid #323a45;
- padding: 1px;
- }
- figcaption {
- padding: 1rem;
- line-height: 1.4;
- }
- aside {
- display: flex;
- flex-direction: column;
- background-color: #e3e1e1;
- padding: 1rem 0;
- border-bottom: .2vh solid #07486c;
- }
- aside p {
- max-width: 50rem;
- margin: 0 auto;
- }
-
- /* https://fvsch.com/code/css-locks/ */
- p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
- font-size: 1rem;
- line-height: calc( 1.5em + 0.2 * 1rem );
- }
- h1 {
- font-size: 1.9rem;
- line-height: calc( 1.2em + 0.2 * 1rem );
- }
- h2 {
- font-size: 1.6rem;
- line-height: calc( 1.3em + 0.2 * 1rem );
- }
- h3 {
- font-size: 1.35rem;
- line-height: calc( 1.4em + 0.2 * 1rem );
- }
- @media (min-width: 20em) {
- /* The (100vw - 20rem) / (50 - 20) part
- resolves to 0-1rem, depending on the
- viewport width (between 20em and 50em). */
- p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
- font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
- line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
- margin-left: 0;
- }
- h1 {
- font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
- line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
- }
- h2 {
- font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
- line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
- }
- h3 {
- font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
- line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
- }
- }
- @media (min-width: 50em) {
- /* The right part of the addition *must* be a
- rem value. In this example we *could* change
- the whole declaration to font-size:2.5rem,
- but if our baseline value was not expressed
- in rem we would have to use calc. */
- p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
- font-size: calc( 1rem + .6 * 1rem );
- line-height: 1.5em;
- }
- p, li, pre, details {
- margin-left: 3rem;
- }
- h1 {
- font-size: calc( 1.9rem + 1.5 * 1rem );
- line-height: 1.2em;
- }
- h2 {
- font-size: calc( 1.5rem + 1.5 * 1rem );
- line-height: 1.3em;
- }
- h3 {
- font-size: calc( 1.35rem + 1.5 * 1rem );
- line-height: 1.4em;
- }
- figure img {
- max-width: 500px;
- max-height: 500px;
- }
- }
-
- figure.unsquared {
- margin-bottom: 1.5rem;
- }
- figure.unsquared img {
- height: inherit;
- }
-
-
-
- @media print {
- body { font-size: 100%; }
- a:after { content: " (" attr(href) ")"; }
- a, a:link, a:visited, a:after {
- text-decoration: underline;
- text-shadow: none !important;
- background-image: none !important;
- background: white;
- color: black;
- }
- abbr[title] { border-bottom: 0; }
- abbr[title]:after { content: " (" attr(title) ")"; }
- img { page-break-inside: avoid; }
- @page { margin: 2cm .5cm; }
- h1, h2, h3 { page-break-after: avoid; }
- p3 { orphans: 3; widows: 3; }
- img {
- max-width: 250px !important;
- max-height: 250px !important;
- }
- nav, aside { display: none; }
- }
-
- ul.with_columns {
- column-count: 1;
- }
- @media (min-width: 20em) {
- ul.with_columns {
- column-count: 2;
- }
- }
- @media (min-width: 50em) {
- ul.with_columns {
- column-count: 3;
- }
- }
- ul.with_two_columns {
- column-count: 1;
- }
- @media (min-width: 20em) {
- ul.with_two_columns {
- column-count: 1;
- }
- }
- @media (min-width: 50em) {
- ul.with_two_columns {
- column-count: 2;
- }
- }
-
- .gallery {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-around;
- }
- .gallery figure img {
- margin-left: 1rem;
- margin-right: 1rem;
- }
- .gallery figure figcaption {
- font-family: 'ConcourseT3'
- }
-
- footer {
- font-family: 'ConcourseT3';
- display: flex;
- flex-direction: column;
- border-top: 3px solid white;
- padding: 4rem 0;
- background-color: #07486c;
- color: white;
- }
- footer > * {
- max-width: 50rem;
- margin: 0 auto;
- }
- footer a {
- color: #f1c40f;
- }
- footer .avatar {
- width: 200px;
- height: 200px;
- border-radius: 50%;
- float: left;
- -webkit-shape-outside: circle();
- shape-outside: circle();
- margin-right: 2rem;
- padding: 2px 5px 5px 2px;
- background: white;
- border-left: 1px solid #f1c40f;
- border-top: 1px solid #f1c40f;
- border-right: 5px solid #f1c40f;
- border-bottom: 5px solid #f1c40f;
- }
- </style>
-
- <h1>
- <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
- AgileFrance 2020 (archive)
- <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
- </h1>
- <section>
- <article>
- <h3><a href="https://medium.com/@matti_sg_fr/agilefrance-2020-4bfe82b13b37">Source originale du contenu</a></h3>
- <section name="04eb" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h1 name="090b" id="090b" class="graf graf--h3 graf--leading graf--title">AgileFrance 2020</h1><h2 name="5594" id="5594" class="graf graf--h4 graf-after--h3 graf--subtitle">Des propositions pour démultiplier l’impact d’une belle et importante association, et une demande d’aide</h2></div><div class="section-inner sectionLayout--fullWidth"><figure name="2ecc" id="2ecc" class="graf graf--figure graf--layoutFillWidth graf-after--h4"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.6%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*HL8tnmi3hLiyCUfN51nYRg.jpeg" data-width="1920" data-height="894"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*HL8tnmi3hLiyCUfN51nYRg.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/2000/1*HL8tnmi3hLiyCUfN51nYRg.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*HL8tnmi3hLiyCUfN51nYRg.jpeg"></noscript></div></div><figcaption class="imageCaption">« Merci aux orgas ! » Sous-rires reçus lors de la conférence AgileFrance 2016</figcaption></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="01d5" id="01d5" class="graf graf--p graf-after--figure">Peu de personnes le savent, mais AgileFrance n’est pas qu’une géniale <a href="http://conf.agile-france.org" data-href="http://conf.agile-france.org" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">conférence</a> qui a lieu chaque année en juin au Chalet de la porte jaune. AgileFrance est en premier lieu le nom d’une <a href="http://agile-france.org" data-href="http://agile-france.org" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">association</a>. Il se trouve que son activité principale aujourd’hui est le soutien à la conférence AgileFrance, mais ses <a href="http://agile-france.org/statuts.pdf" data-href="http://agile-france.org/statuts.pdf" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">statuts</a> la destinent à bien plus que cela :</p><blockquote name="2bfe" id="2bfe" class="graf graf--blockquote graf-after--p">Cette association a pour but de soutenir la communauté Agile francophone […] dans ses efforts pour faire évoluer l’industrie du logiciel vers plus d’efficacité et d’excellence dans les entreprises, et plus de respect des individus quel que soit leur rôle : développeur, utilisateur, client final… […] Elle intervient également pour favoriser l'évolution professionnelle des personnes utilisant ces pratiques.</blockquote><p name="6f01" id="6f01" class="graf graf--p graf-after--blockquote">Je crois que depuis la signature de ces statuts en 2009, faire du mot « agile » un synonyme de « efficacité et excellence dans les entreprises » a été en grande partie accompli. En revanche, les missions d’éducation et de respect des individus me semblent toujours d’actualité. Et surtout, le principal moyen de réaliser ces missions tel que proposé par le <a href="http://agile-france.org/reglement.pdf" data-href="http://agile-france.org/reglement.pdf" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">règlement intérieur</a> de l’association a été à la fois moins exploité et de plus en plus puissant :</p><blockquote name="ec6e" id="ec6e" class="graf graf--blockquote graf-after--p">Tout membre de l’association peut constituer […] une conférence, un séminaire, un atelier, une publication, ou toute autre activité conforme aux buts de l’association. L’association apporte aux initiatives son concours administratif et s’engage à émettre les factures, recouvrer les règlements et régler les fournisseurs. En contrepartie, les organisateurs d’une initiative s’engagent :<br>• à œuvrer dans l’intérêt de la communauté des praticiens agiles, sans favoriser un acteur particulier <br>• à fournir un budget clair et complet<br>• à proposer au public principalement un contenu à vocation non-commerciale<br>• à laisser l’association disposer de tout excédent financier dégagé par l’initiative<br>[…]</blockquote><p name="ab17" id="ab17" class="graf graf--p graf-after--blockquote">En résumé, et selon ma propre reformulation :</p><blockquote name="7b19" id="7b19" class="graf graf--pullquote graf-after--p">AgileFrance a vocation à effacer la complexité administrative, le besoin de trésorerie et le risque financier qui freinent les initiatives communautaires.</blockquote><h3 name="6c37" id="6c37" class="graf graf--h3 graf-after--pullquote">9 ans plus tard</h3><p name="a1b4" id="a1b4" class="graf graf--p graf-after--h3">Cette vision était déjà belle quand l’association s’est créée. Mais aujourd’hui, grâce au moteur financier qu’est la conférence depuis qu’elle génère des bénéfices, elle offre des possibilités fabuleuses.</p><figure name="156b" id="156b" class="graf graf--figure graf--iframe graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37%;"></div><div class="progressiveMedia js-progressiveMedia"><img src="https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDOlHdHpWkAE-ECC.jpg%3Alarge&key=a19fcc184b9711e1b4764040d3dc5c07&width=40" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" data-src="/media/05b6828d68641caab63e4f06fb3c167b?postId=4bfe82b13b37" data-media-id="05b6828d68641caab63e4f06fb3c167b" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDOlHdHpWkAE-ECC.jpg%3Alarge&key=a19fcc184b9711e1b4764040d3dc5c07" class="progressiveMedia-iframe js-progressiveMedia-iframe" allowfullscreen frameborder="0"></IFRAME></div><noscript class="js-progressiveMedia-inner"><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" src="/media/05b6828d68641caab63e4f06fb3c167b?postId=4bfe82b13b37" data-media-id="05b6828d68641caab63e4f06fb3c167b" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDOlHdHpWkAE-ECC.jpg%3Alarge&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></IFRAME></div></noscript></div></div></figure><p name="b1ae" id="b1ae" class="graf graf--p graf-after--figure">Ayant co-organisé la conférence ces trois dernières années, je suis fier que nous ayons réussi à combiner développement des aspects sociaux et retombées économiques.</p><p name="94c1" id="94c1" class="graf graf--p graf-after--p">Nous avons à la fois déplacé le dîner vers une entreprise sociale et solidaire et réduit son coût ; à la fois fait connaître des professionnel·le·s et offert des <a href="https://github.com/agile-france/supports-graphiques" data-href="https://github.com/agile-france/supports-graphiques" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">ressources libres</a> ; à la fois introduit des tarifs particulier et solidaire et enregistré des excédents de plusieurs milliers d’euros. Nous n’aurions jamais pu aboutir à cela sans le travail des personnes qui nous ont précédé pour placer cette conférence dans le paysage français, et sans une trésorerie solide pour assumer le risque de l’expérimentation.</p><figure name="402f" id="402f" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37%;"></div><div class="progressiveMedia js-progressiveMedia"><img src="https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDO0TCSVUEAA4kA6.jpg%3Alarge&key=a19fcc184b9711e1b4764040d3dc5c07&width=40" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" data-src="/media/24eae692185b1fc210dd25b211ddbf5d?postId=4bfe82b13b37" data-media-id="24eae692185b1fc210dd25b211ddbf5d" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDO0TCSVUEAA4kA6.jpg%3Alarge&key=a19fcc184b9711e1b4764040d3dc5c07" class="progressiveMedia-iframe js-progressiveMedia-iframe" allowfullscreen frameborder="0"></IFRAME></div><noscript class="js-progressiveMedia-inner"><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" src="/media/24eae692185b1fc210dd25b211ddbf5d?postId=4bfe82b13b37" data-media-id="24eae692185b1fc210dd25b211ddbf5d" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDO0TCSVUEAA4kA6.jpg%3Alarge&key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></IFRAME></div></noscript></div></div></figure><p name="807e" id="807e" class="graf graf--p graf-after--figure">Le travail accompli par l’association et les initiatives qu’elle soutient sont formidables. Mais la fatigue menace tout·e bénévole. C’est pour cela que l’équipe d’organisation de la conférence se renouvelle en partie chaque année. Cette fatigue se fait aujourd’hui sentir à un niveau inquiétant pour le futur de l’organisation, dont la prochaine AG vise à réduire le nombre de membres du bureau pour faire face aux défections.</p><p name="1dd7" id="1dd7" class="graf graf--p graf-after--p">Les caisses de l’association contiennent à ce jour plusieurs dizaines de milliers d’euros prêts à être engagée pour la réalisation de sa mission. Et pourtant, le nombre de membres et d’initiatives soutenues stagne. Comme j’aurais aimé que d’autres puissent se faire épauler comme je l’ai été pour des expériences comme <a href="http://nomadconf.eu/fr/" data-href="http://nomadconf.eu/fr/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">NomadConf.EU</a> ou mon <a href="https://medium.com/@MattiSG/stupid-science-i-compared-23-sticky-notes-to-help-you-spare-wallet-and-planet-fc9b97d88503" data-href="https://medium.com/@MattiSG/stupid-science-i-compared-23-sticky-notes-to-help-you-spare-wallet-and-planet-fc9b97d88503" class="markup--anchor markup--p-anchor" target="_blank">comparatif de post-its</a> !</p><p name="833c" id="833c" class="graf graf--p graf-after--p">Je crois que nous n’avons vu qu’une petite partie de l’immense potentiel de partage, d’inventivité et de soutien mutuel qu’a la communauté agile francophone. Je crois aussi qu’il est temps, en s’appuyant sur le travail accompli depuis des années par les membres et les bénévoles, de libérer ce potentiel. <strong class="markup--strong markup--p-strong">C’est pourquoi je me présente à l’élection du bureau d’AgileFrance, et pourquoi j’ai besoin de votre soutien pour réaliser la vision promise par les statuts et l’ancrer dans son volet communautaire.</strong></p><h3 name="8a5d" id="8a5d" class="graf graf--h3 graf-after--p">La liste</h3><p name="7193" id="7193" class="graf graf--p graf-after--h3">Je suis fier d’avoir obtenu la confiance de quatre personnes que j’estime pour construire et réaliser ce projet :</p><figure name="1a41" id="1a41" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 75%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*gw6C2cltWQh4KfKMuvVjtw.jpeg" data-width="1920" data-height="1440" data-is-featured="true" data-action="zoom" data-action-value="1*gw6C2cltWQh4KfKMuvVjtw.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*gw6C2cltWQh4KfKMuvVjtw.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1200/1*gw6C2cltWQh4KfKMuvVjtw.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/1*gw6C2cltWQh4KfKMuvVjtw.jpeg"></noscript></div></div><figcaption class="imageCaption">Préparez-vous à être surpris. Affiche de forum ouvert, conférence AgileFrance 2016.</figcaption></figure><ul class="postList"><li name="b827" id="b827" class="graf graf--li graf-after--figure"><a href="https://larlet.fr/david/" data-href="https://larlet.fr/david/" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">David Larlet</a> développe du code minimaliste dans une <a href="http://scopyleft.fr/" data-href="http://scopyleft.fr/" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">coopérative</a> depuis Montréal.</li><li name="a7fd" id="a7fd" class="graf graf--li graf-after--li"><a href="https://linkedin.com/in/emilie-esposito" data-href="https://linkedin.com/in/emilie-esposito" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">Émilie Esposito</a> entraîne les entreprises à changer depuis Montpellier.</li><li name="81e5" id="81e5" class="graf graf--li graf-after--li"><a href="https://linkedin.com/in/julienporot" data-href="https://linkedin.com/in/julienporot" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">Julien Porot</a> facilite la création de produits numériques depuis Paris.</li><li name="729e" id="729e" class="graf graf--li graf-after--li"><a href="http://peggyavez.com/" data-href="http://peggyavez.com/" class="markup--anchor markup--li-anchor" rel="nofollow noopener" target="_blank">Peggy Avez</a> forme à la philosophie plusieurs publics dont des agilistes, en indépendante depuis Lille.</li></ul><p name="8422" id="8422" class="graf graf--p graf-after--li">J’ai construit cette liste en visant une diversité géographique, d’expérience, de situations personnelles et de compétences afin d’en faire le MVP de la communauté à assembler autour du projet d’AgileFrance.</p><h4 name="1575" id="1575" class="graf graf--h4 graf-after--p">Notre profession de foi est disponible sur <a href="https://mattischneider.fr/agile/france/2018" data-href="https://mattischneider.fr/agile/france/2018" class="markup--anchor markup--h4-anchor" rel="nofollow noopener nofollow noopener" target="_blank">mattischneider.fr/agile/france/2018</a>.</h4><h3 name="9bc2" id="9bc2" class="graf graf--h3 graf-after--h4">Pour faire quoi ?</h3><p name="4f97" id="4f97" class="graf graf--p graf-after--h3">En premier lieu, il s’agit de créer un espace accueillant et bienveillant pour une communauté qui se reconnaît dans l’action. C’est pourquoi, plutôt que d’investir dans des descriptions de projets spécifiques, nous avons défini nos premières métriques d'impact, que nous ajusterons selon leur utilité :</p><ul class="postList"><li name="4093" id="4093" class="graf graf--li graf-after--p">Le nombre de personnes touchées (lectorat d'un article, public d'un événement…) par des initiatives soutenues par l'association.</li><li name="64f5" id="64f5" class="graf graf--li graf-after--li">La proportion de ces personnes qui ne viennent pas du monde du développement logiciel (sans viser 100%, mais plus que 0%).</li></ul><p name="b24b" id="b24b" class="graf graf--p graf-after--li">Pour autant, pour faciliter la projection, voici quelques exemples de sujets qui me tiennent personnellement à cœur. Je ne peux pas prendre l’engagement de tous les porter, mais voilà le genre de missions qui me sembleraient trouver leur place dans cette association revivifiée :</p><h4 name="4bb7" id="4bb7" class="graf graf--h4 graf-after--p">1. Professionnaliser le non-marchand</h4><p name="90ee" id="90ee" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Problème visé :</strong> l’écart de professionnalisme ressenti par le public entre les meetups résultant d’initiatives spontanées et les conférences sponsorisées favorise les initiatives commerciales et les égos capables de développer une marque individuelle forte.</p><p name="3a29" id="3a29" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Solution :</strong> permettre aux initiatives locales de se focaliser sur la viabilité intrinsèque d’un événement en retirant la friction administrative à la croissance.</p><p name="a19f" id="a19f" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Offre :</strong> AgileFrance propose une avance de trésorerie, le <a href="https://fr.wikipedia.org/wiki/Garantie_%28finance%29" data-href="https://fr.wikipedia.org/wiki/Garantie_(finance)" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">collatéral</a>, un SIRET, un compte en banque et les outils de facturation associés à toute initiative non-marchande (qui vise l’échange de connaissances et non de services ou de produits).</p><p name="752b" id="752b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Contreparties :</strong> socialisation des bénéfices éventuels (puisque les pertes le sont) et rédaction d’un rapport d’expérience public incluant un volet financier.</p><p name="159f" id="159f" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Exemples déjà réalisés :</strong> AgileFrance, AgileOpenFrance, GeekCamp.</p><h4 name="b780" id="b780" class="graf graf--h4 graf-after--p">2. Soutenir l’innovation</h4><p name="dfd7" id="dfd7" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Problème visé :</strong> les idées les plus novatrices sont les plus folles et proviennent d’une énergie mise dans leur réalisation, pas dans la recherche d’un financement et d’un public.</p><p name="e02b" id="e02b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Solution :</strong> subventionner et soutenir les initiatives promouvant l’agilité d’une manière innovante ou explorant de nouvelles frontières d’intérêt communautaire.</p><p name="4a6c" id="4a6c" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Offre :</strong> AgileFrance propose une subvention en capital financier et réputationnel, en diffusant l’initiative dans son réseau. L’allocation des ressources devrait se faire collectivement, avec un outil comme <a href="http://cobudget.co" data-href="http://cobudget.co" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">CoBudget</a>.</p><p name="483d" id="483d" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Contreparties :</strong> initiative non-marchande (aucun bénéfice financier attendu), rédaction d’un rapport d’expérience public incluant un volet financier.</p><p name="586c" id="586c" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Exemples déjà réalisés :</strong> comparatif de post-its.</p><h4 name="37cb" id="37cb" class="graf graf--h4 graf-after--p">3. Réduire les inégalités</h4><p name="9ef0" id="9ef0" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Problème visé :</strong> les espaces d’échange professionnel sur l’agilité sont chers et souvent concentrés géographiquement (…à Paris). Cela génère une concentration des réseaux de pouvoir, une difficulté à se remettre en question et une perte d’opportunité intellectuelle et économique pour toute la communauté. Moins de personnes qui comprennent réellement les pratiques agiles, c’est moins de diversité, plus de frustration, et moins de ventes.</p><p name="4652" id="4652" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Solution :</strong> subventionner la formation des personnes traditionnellement éloignées du monde de l’agilité et pouvant apporter un nouveau point de vue à la communauté.</p><p name="387b" id="387b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Offre :</strong> AgileFrance finance le déplacement et jusqu’à 50% du prix du billet, au cas par cas. Il semble raisonnable de construire progressivement un réseau d’événements et de formations partenaires pour généraliser l’approche (par exemple : les étudiantes de <a href="https://amontourdeprogrammer.fr" data-href="https://amontourdeprogrammer.fr" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">À mon tour de programmer</a> pour la conférence AgileFrance seraient éligibles plus systématiquement qu’un individu isolé allant à une conférence commerciale).</p><p name="dcb7" id="dcb7" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Contreparties :</strong> publication d’un rapport d’expérience public (ce qui permet d’être triplement gagnants en aidant l’événement à être connu, la communauté à apprendre, et la ou le bénéficiaire à construire sa visibilité).</p><p name="efa8" id="efa8" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Exemples déjà réalisés :</strong> billets sponsorisés d’AgileFrance depuis 2016.</p><h4 name="71a2" id="71a2" class="graf graf--h4 graf-after--p">4. Diffuser les pratiques communautaires</h4><p name="69ef" id="69ef" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Problème visé :</strong> le modèle de l’association AgileFrance est celui d’un incubateur commun (au sens des <a href="https://communs.mattischneider.fr/1-concepts_utilises/1-communs.html" data-href="https://communs.mattischneider.fr/1-concepts_utilises/1-communs.html" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">communs</a>). Ce qui est, à ma connaissance, unique (corrigez-moi si je me trompe !).</p><p name="fefd" id="fefd" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Solution :</strong> faire connaître le modèle et aider à sa reproduction, en visant en priorité la francophonie, puis l’UE.</p><p name="c651" id="c651" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Moyens :</strong> exploiter les rapports publics demandés lors des soutiens pour documenter et valoriser le modèle actuel et ses réalisations, accompagner et fédérer les personnes souhaitant le reproduire.</p><h3 name="31b6" id="31b6" class="graf graf--h3 graf-after--p">Vous y croyez ? Faisons-en une réalité !</h3><h4 name="9443" id="9443" class="graf graf--h4 graf-after--h3">1. Adhérez et votez pour ce projet</h4><p name="8eb4" id="8eb4" class="graf graf--p graf-after--h4">L’Assemblée Générale lors de laquelle le nouveau bureau sera élu aura lieu le lundi 19 février 2018, à Paris. Il est possible de voter à distance, mais il faut évidemment être adhérent·e. Pour cela, <a href="mailto:bureau@agile-france.org?subject=Adh%C3%A9sion&body=Bonjour%2c%0d%0a%0d%0aJe%20souhaite%20adh%c3%a9rer%20%c3%a0%20l%27association%20afin%20d%27%c3%aatre%20en%20mesure%20de%20voter%20%c3%a0%20la%20prochaine%20%c3%a9lection%20du%20bureau.%0d%0a%0d%0aJe%20ne%20pourrai%20malheureusement%20pas%20%c3%aatre%20physiquement%20%c3%a0%20Paris%20le%2019%20f%c3%a9vrier%20pour%20r%c3%a9gler%20ma%20cotisation.%20Pourriez-vous%20m%27indiquer%20comment%20vous%20r%c3%a9gler%20la%20cotisation%20de%2020%e2%82%ac%20indiqu%c3%a9e%20dans%20le%20r%c3%a8glement%20int%c3%a9rieur%20%3f%0d%0a%0d%0aMerci%20et%20bonne%20journ%c3%a9e%2c%0d%0a" data-href="mailto:bureau@agile-france.org?subject=Adh%C3%A9sion&body=Bonjour%2c%0d%0a%0d%0aJe%20souhaite%20adh%c3%a9rer%20%c3%a0%20l%27association%20afin%20d%27%c3%aatre%20en%20mesure%20de%20voter%20%c3%a0%20la%20prochaine%20%c3%a9lection%20du%20bureau.%0d%0a%0d%0aJe%20ne%20pourrai%20malheureusement%20pas%20%c3%aatre%20physiquement%20%c3%a0%20Paris%20le%2019%20f%c3%a9vrier%20pour%20r%c3%a9gler%20ma%20cotisation.%20Pourriez-vous%20m%27indiquer%20comment%20vous%20r%c3%a9gler%20la%20cotisation%20de%2020%e2%82%ac%20indiqu%c3%a9e%20dans%20le%20r%c3%a8glement%20int%c3%a9rieur%20%3f%0d%0a%0d%0aMerci%20et%20bonne%20journ%c3%a9e%2c%0d%0a" class="markup--anchor markup--p-anchor" target="_blank">envoyez un mail au bureau</a> !</p><h4 name="34f7" id="34f7" class="graf graf--h4 graf-after--p">2. Faites connaître ce projet</h4><p name="b385" id="b385" class="graf graf--p graf-after--h4">Plus nous commencerons tôt, moins nous aurons à investir dans sa diffusion par la suite. Partagez cet article, 👏-le ci-contre, discutez des possibilités qu’il ouvre à votre cercle. Ce seront autant d’idées et de projets qui pourront voir le jour !</p><h4 name="bf89" id="bf89" class="graf graf--h4 graf-after--p">3. Proposez votre aide</h4><p name="264c" id="264c" class="graf graf--p graf-after--h4">Un tel plan nécessite de l’énergie et des compétences variées. Nous aurons besoin de bénévoles pour répondre aux mails, écrire sur Twitter, créer des pages web, lire les réponses à un appel à projets permanent, mentorer les initiatives, gérer les factures, tenir les comptes… Notre impact sera directement proportionnel à l’étendue des compétences mobilisées. Puisque l’offre principale consiste à mettre en commun la gestion de la paperasse, il y en aura évidemment beaucoup à gérer ! C’est le manque de répartition de cette charge qui met aujourd’hui l’association en danger. Il nous faudra la partager.</p><p name="50eb" id="50eb" class="graf graf--p graf-after--p graf--trailing">Avant l’élection, les besoins n’existent évidemment pas de manière prégnante. Mais pour évaluer la viabilité de ces propositions et l’échelle à laquelle nous pourrons les porter, votre déclaration d’intention sera cruciale ! Proposez votre aide en répondant à cet article ci-dessous, par <a href="https://twitter.com/intent/tweet?text=Pour+d%c3%a9velopper+%40AgileFrance%2c+je+pourrais+par+exemple%e2%80%a6%20cc%20%40matti_sg_fr&url=https://medium.com/p/4bfe82b13b37" data-href="https://twitter.com/intent/tweet?text=Pour+d%c3%a9velopper+%40AgileFrance%2c+je+pourrais+par+exemple%e2%80%a6%20cc%20%40matti_sg_fr&url=https://medium.com/p/4bfe82b13b37" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Twitter</a>, ou par <a href="mailto:agile@mattischneider.fr?subject=Soutien%20AgileFrance&body=Count%20me%20in." data-href="mailto:agile@mattischneider.fr?subject=Soutien%20AgileFrance&body=Count%20me%20in." class="markup--anchor markup--p-anchor" target="_blank">mail</a>.</p></div></div></section>
- </article>
- </section>
-
-
- <nav id="jumpto">
- <p>
- <a href="/david/blog/">Accueil du blog</a> |
- <a href="https://medium.com/@matti_sg_fr/agilefrance-2020-4bfe82b13b37">Source originale</a> |
- <a href="/david/stream/2019/">Accueil du flux</a>
- </p>
- </nav>
-
- <footer>
- <div>
- <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
- <p>
- Bonjour/Hi!
- Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
- Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
- </p>
- <p>
- Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
- </p>
-
- <p>
- Voici quelques articles choisis :
- <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
- <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
- <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
- <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
- <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
- <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
- <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
- <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
- <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
- <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
- <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
- <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
- <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
- <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
- <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
- et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
- </p>
- <p>
- On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
- </p>
- <p>
- Je ne traque pas ta navigation mais mon
- <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
- conserve des logs d’accès.
- </p>
- </div>
- </footer>
- <script type="text/javascript">
- ;(_ => {
- const jumper = document.getElementById('jumper')
- jumper.addEventListener('click', e => {
- e.preventDefault()
- const anchor = e.target.getAttribute('href')
- const targetEl = document.getElementById(anchor.substring(1))
- targetEl.scrollIntoView({behavior: 'smooth'})
- })
- })()
- </script>
|