{"id":973,"date":"2026-08-05T18:50:08","date_gmt":"2026-08-05T16:50:08","guid":{"rendered":"https:\/\/iconoclaste.net\/blog\/?page_id=973"},"modified":"2026-08-07T10:15:31","modified_gmt":"2026-08-07T08:15:31","slug":"espace-laboratoire","status":"publish","type":"page","link":"https:\/\/iconoclaste.net\/blog\/espace-laboratoire\/","title":{"rendered":"Espace \u00ablaboratoire\u00bb"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Dans cette zone, vous retrouverez tous les articles WordPress qui ont \u00e9t\u00e9 <strong>bidouill\u00e9s*<\/strong>.<br><mark style=\"background-color:#ff33ff\" class=\"has-inline-color has-white-color\">ATTENTION<\/mark> : C&rsquo;est [parfois\/souvent] bruts, scabreux, d\u00e9cal\u00e9s, <s>masculinistes<\/s>, irr\u00e9v\u00e9rencieux, superflus, ignorants, grivois, inutiles, os\u00e9s, vulcains, cashs, insolents ou crus! <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Faites votre choix.<\/h4>\n\n\n\n<!--\n  ICONOCLASTE \u2013 Grille Espace Laboratoire (optimis\u00e9e)\n  Custom HTML autonome \u2013 coller dans un bloc \u00ab HTML personnalis\u00e9 \u00bb\n  Cat\u00e9gorie : experiences (ID 269)\n  4 col. desktop \u2192 2 tablette \u2192 1 mobile | alignement gauche\n\n  Fix 2026-08-05 : suppression de &_fields qui emp\u00eachait\n  _embed=wp:featuredmedia de fonctionner (image \u00e0 la une invisible).\n-->\n<style>\n.lab-grid-wrap{margin:2em 0 3em;width:100%;box-sizing:border-box}\n.lab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:100%}\n.lab-tile{display:block;position:relative;aspect-ratio:4\/3;overflow:hidden;background:#111;border:1px solid #333;text-decoration:none!important;color:inherit;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}\n.lab-tile:hover,.lab-tile:focus{border-color:#ff33ff;transform:translateY(-3px);box-shadow:0 6px 18px rgba(255,51,255,.28);outline:0}\n.lab-tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease,filter .35s ease}\n.lab-tile:hover img{transform:scale(1.06);filter:brightness(1.1)}\n.lab-tile-caption{position:absolute;left:0;right:0;bottom:0;padding:12px 8px 9px;background:linear-gradient(transparent,rgba(0,0,0,.88));color:#ff33ff;font-family:\"Courier New\",Courier,monospace;font-size:13px;line-height:1.25;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}\n.lab-tile:hover .lab-tile-caption,.lab-tile:focus .lab-tile-caption{opacity:1;transform:translateY(0)}\n.lab-tile-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:12px;box-sizing:border-box;background:#1a1a1a;color:#ff33ff;font-family:\"Courier New\",Courier,monospace;font-size:14px;text-align:center;line-height:1.3}\n.lab-loading{color:#ff33ff;font-family:\"Courier New\",Courier,monospace;font-size:14px;text-align:center;padding:2em 0;letter-spacing:.05em}\n.lab-error{color:#ff6666;font-family:\"Courier New\",Courier,monospace;font-size:13px;text-align:center;padding:1.5em 0}\n@media screen and (max-width:782px){.lab-grid{grid-template-columns:repeat(2,1fr);gap:14px}}\n@media screen and (max-width:480px){.lab-grid{grid-template-columns:1fr;gap:12px}.lab-tile-caption{opacity:1;transform:none;font-size:14px}}\n<\/style>\n\n<div class=\"lab-grid-wrap\">\n\t<div id=\"lab-grid\" class=\"lab-grid\" aria-live=\"polite\">\n\t\t<div class=\"lab-loading\">chargement des exp\u00e9riences\u2026<\/div>\n\t<\/div>\n<\/div>\n\n<script>\n(function () {\n\t'use strict';\n\n\tvar CATEGORY_ID = 269;\n\tvar CACHE_KEY   = 'iconoclaste_lab_grid_v3'; \/\/ v3 = force refresh apr\u00e8s fix featured image\n\tvar CACHE_TTL   = 8 * 60 * 1000; \/\/ 8 minutes\n\tvar container   = document.getElementById('lab-grid');\n\tif (!container) return;\n\n\t\/* Endpoint : _embed n\u00e9cessite l\u2019absence de &_fields restrictif *\/\n\tvar endpoint = '\/blog\/wp-json\/wp\/v2\/posts'\n\t\t+ '?categories=' + CATEGORY_ID\n\t\t+ '&per_page=50'\n\t\t+ '&orderby=date&order=desc'\n\t\t+ '&_embed=wp:featuredmedia';\n\n\tfunction decodeHtml(html) {\n\t\tvar t = document.createElement('textarea');\n\t\tt.innerHTML = html || '';\n\t\treturn t.value;\n\t}\n\n\tfunction firstImageFromContent(html) {\n\t\tif (!html) return null;\n\t\tvar m = html.match(\/<img[^>]+src=[\"']([^\"']+)[\"']\/i);\n\t\treturn m ? m[1] : null;\n\t}\n\n\tfunction getFeaturedUrl(post) {\n\t\ttry {\n\t\t\tvar media = post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0];\n\t\t\tif (!media) return null;\n\t\t\tvar sizes = media.media_details && media.media_details.sizes;\n\t\t\t\/* Pr\u00e9f\u00e9rer medium (plus l\u00e9ger) puis medium_large puis original *\/\n\t\t\tif (sizes) {\n\t\t\t\tif (sizes.medium)       return sizes.medium.source_url;\n\t\t\t\tif (sizes.medium_large) return sizes.medium_large.source_url;\n\t\t\t\tif (sizes.large)        return sizes.large.source_url;\n\t\t\t}\n\t\t\treturn media.source_url || null;\n\t\t} catch (e) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tfunction buildTile(post) {\n\t\tvar title  = decodeHtml(post.title && post.title.rendered) || 'Sans titre';\n\t\tvar link   = post.link;\n\t\tvar imgUrl = getFeaturedUrl(post) || firstImageFromContent(post.content && post.content.rendered);\n\n\t\tvar a = document.createElement('a');\n\t\ta.href = link;\n\t\ta.className = 'lab-tile';\n\t\ta.title = title;\n\t\ta.rel = 'bookmark';\n\n\t\tif (imgUrl) {\n\t\t\tvar img = document.createElement('img');\n\t\t\timg.src = imgUrl;\n\t\t\timg.alt = title;\n\t\t\timg.loading = 'lazy';\n\t\t\timg.decoding = 'async';\n\t\t\ta.appendChild(img);\n\t\t} else {\n\t\t\tvar ph = document.createElement('span');\n\t\t\tph.className = 'lab-tile-placeholder';\n\t\t\tph.textContent = title;\n\t\t\ta.appendChild(ph);\n\t\t}\n\n\t\tvar cap = document.createElement('span');\n\t\tcap.className = 'lab-tile-caption';\n\t\tcap.textContent = title;\n\t\ta.appendChild(cap);\n\n\t\treturn a;\n\t}\n\n\tfunction render(posts) {\n\t\tcontainer.innerHTML = '';\n\t\tif (!posts || !posts.length) {\n\t\t\tcontainer.innerHTML = '<div class=\"lab-error\">Aucune exp\u00e9rience trouv\u00e9e pour le moment.<\/div>';\n\t\t\treturn;\n\t\t}\n\t\tvar frag = document.createDocumentFragment();\n\t\tfor (var i = 0; i < posts.length; i++) {\n\t\t\tfrag.appendChild(buildTile(posts[i]));\n\t\t}\n\t\tcontainer.appendChild(frag);\n\t}\n\n\tfunction getCached() {\n\t\ttry {\n\t\t\tvar raw = sessionStorage.getItem(CACHE_KEY);\n\t\t\tif (!raw) return null;\n\t\t\tvar data = JSON.parse(raw);\n\t\t\tif (Date.now() - data.ts > CACHE_TTL) {\n\t\t\t\tsessionStorage.removeItem(CACHE_KEY);\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn data.posts;\n\t\t} catch (e) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tfunction setCache(posts) {\n\t\ttry {\n\t\t\tsessionStorage.setItem(CACHE_KEY, JSON.stringify({\n\t\t\t\tts: Date.now(),\n\t\t\t\tposts: posts\n\t\t\t}));\n\t\t} catch (e) { \/* quota \/ private mode *\/ }\n\t}\n\n\t\/* 1. Affichage imm\u00e9diat depuis le cache si disponible *\/\n\tvar cached = getCached();\n\tif (cached) {\n\t\trender(cached);\n\t}\n\n\t\/* 2. Fetch r\u00e9seau (toujours, pour rester \u00e0 jour) *\/\n\tfetch(endpoint, { credentials: 'same-origin' })\n\t\t.then(function (res) {\n\t\t\tif (!res.ok) throw new Error('HTTP ' + res.status);\n\t\t\treturn res.json();\n\t\t})\n\t\t.then(function (posts) {\n\t\t\tsetCache(posts);\n\t\t\trender(posts);\n\t\t})\n\t\t.catch(function (err) {\n\t\t\tconsole.error('Lab grid:', err);\n\t\t\t\/* Si on avait d\u00e9j\u00e0 le cache, on le laisse ; sinon message d\u2019erreur *\/\n\t\t\tif (!cached) {\n\t\t\t\tcontainer.innerHTML = '<div class=\"lab-error\">Impossible de charger les exp\u00e9riences.<\/div>';\n\t\t\t}\n\t\t});\n})();\n<\/script>\n\n\n\n<h4 class=\"wp-block-heading\">*Pourquoi bidouiller<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-white-color\"> <\/mark>les articles du cms?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Primo, pour d\u00e9passer la cadre strict des possibilit\u00e9s interactives offertes par d\u00e9faut par l&rsquo;interface de ce cms. Ajouter des extensions \u00e0 tour de bras pour chaque publication transformerait <mark style=\"background-color:#ff33ff\" class=\"has-inline-color has-white-color\">iconoclaste.net<\/mark> tr\u00e8s rapidement en usine \u00e0 gaz et puis WordPress est un blog, et les blogs, c&rsquo;est comme la musique classique, c&rsquo;est beau mais c&rsquo;est <mark style=\"background-color:#ff33ff\" class=\"has-inline-color has-white-color\">chiant<\/mark>&#8230;<br>Secundo, pour bousculer les petits iconoclastes qui n&rsquo;ont pas connu l&rsquo;\u00e9poque des sites internet ind\u00e9pendants, bourr\u00e9s de bruits et d&rsquo;images qui clignotent et mon devoir de m\u00e9moire impose que cette culture subsiste [Je ne suis pas le seul \u00e0 le penser, il existe plein de quinquas allum\u00e9\u00b7e\u00b7s dans mon genre].<br>Et tertio, c&rsquo;est parce que <mark style=\"background-color:#ff33ff\" class=\"has-inline-color has-white-color\">j&rsquo;aime<\/mark> les regarder avec toute la nostalgie qui d\u00e9vore mes jours et hante mes nuits&#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cette zone, vous retrouverez tous les articles WordPress qui ont \u00e9t\u00e9 bidouill\u00e9s*.ATTENTION : C&rsquo;est [parfois\/souvent] bruts, scabreux, d\u00e9cal\u00e9s, masculinistes, irr\u00e9v\u00e9rencieux, superflus, ignorants, grivois, inutiles, os\u00e9s, vulcains, cashs, insolents ou crus! Faites votre choix. chargement des exp\u00e9riences\u2026 *Pourquoi bidouiller les articles du cms? Primo, pour d\u00e9passer la cadre strict des possibilit\u00e9s interactives offertes par d\u00e9faut [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width.php","meta":{"footnotes":""},"class_list":["post-973","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/pages\/973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/comments?post=973"}],"version-history":[{"count":21,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/pages\/973\/revisions"}],"predecessor-version":[{"id":1141,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/pages\/973\/revisions\/1141"}],"wp:attachment":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/media?parent=973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}