[{"data":1,"prerenderedAt":1996},["ShallowReactive",2],{"articles":3},[4,473,979,1119,1190,1330,1498,1688],{"id":5,"title":6,"body":7,"description":462,"extension":463,"meta":464,"navigation":465,"path":466,"seo":467,"stem":468,"tags":469,"__hash__":472},"article\u002Farticle\u002Ffermer-les-bandeaux-cookies-avec-un-bookmarklet.md","Fermer les bandeaux cookies en 1 clic avec un bookmarklet",{"type":8,"value":9,"toc":458},"minimark",[10,14,26,31,38,51,58,65,68,113,117,120,125,320,323,449,454],[11,12,6],"h1",{"id":13},"fermer-les-bandeaux-cookies-en-1-clic-avec-un-bookmarklet",[15,16,17],"blockquote",{},[18,19,20,21,25],"p",{},"Puisque chez JAMgency, nous sommes pour un web plus \"propre\", et qu'on ne peut pas forcer les autres à en faire\nautant... Voici un petit \"hack\" à base de ",[22,23,24],"strong",{},"bookmarklet"," pour vous faciliter la vie et fermer ces fameux popin plus\nfacilement.",[27,28,30],"h2",{"id":29},"définition-dun-bookmarklet","Définition d'un bookmarklet",[18,32,33,34,37],{},"Bookmarklet est un ",[22,35,36],{},"mot valise avec \"bookmark\" et \"applet\""," pour \"favori\" et \"script\".\nIl permet donc d'exécuter du javascript lors du clic sur un favori au lieu de rediriger vers une page.",[15,39,40],{},[18,41,42,43,47,48],{},"Cela est issue des débuts du HTML, à l'époque il n'y avait pas de ",[44,45,46],"code",{},"onClick"," mais pour lancer un script au clic, on faisait ",[44,49,50],{},"href=\"javascript:\"",[18,52,53,54,57],{},"C'est ce que l'on va utiliser pour créer un bookmarklet. Votre \"favori\" doit donc commencer par ",[44,55,56],{},"javascript:"," pour le devenir, suivi du code javascript à executer dans la page. Script à ajouter dans le champ \"URL\" de votre favori, comme si c'était un lien classique.",[18,59,60,61,64],{},"Attention, votre navigateur ",[22,62,63],{},"peut bloquer ce fonctionnement de base",", mais vous pourrez l'activer dans la config.",[18,66,67],{},"Par exemple, ce bookmarklet supprimera le contenu de votre page. (Ok ça ne sert à rien, c'est un exemple avec un effet bien visible.)",[69,70,75],"pre",{"className":71,"code":72,"language":73,"meta":74,"style":74},"language-js shiki shiki-themes monokai","javascript:document.getElementsByTagName('body')[0].remove();\n","js","",[44,76,77],{"__ignoreMap":74},[78,79,82,86,90,93,97,100,104,107,110],"span",{"class":80,"line":81},"line",1,[78,83,85],{"class":84},"sCdxs","javascript:document.",[78,87,89],{"class":88},"sHkqI","getElementsByTagName",[78,91,92],{"class":84},"(",[78,94,96],{"class":95},"s_Ekj","'body'",[78,98,99],{"class":84},")[",[78,101,103],{"class":102},"s7s5_","0",[78,105,106],{"class":84},"].",[78,108,109],{"class":88},"remove",[78,111,112],{"class":84},"();\n",[27,114,116],{"id":115},"bookmarklet-pour-fermer-les-pop-in","Bookmarklet pour fermer les pop-in",[18,118,119],{},"Voici donc le script désiré, indenté pour la lisibilité, en dessous la version à copier.\nCela ne fonctionne pas sur l'ensemble des popins cookies, la liste sera complétée au fûr-et-à-mesure que je tomberai dessus.",[15,121,122],{},[18,123,124],{},"Didomi représente une très grande partie de ces bandeaux. J'ai dû en installer pour mes clients par le passé, et ceux sont les meilleurs pour le respect du RGPD (si bien configuré). Car il permet le \"tout refuser en un clic\" qui est une obligation, mais rarement respectée pour un \"tout accepter\" plus simple...",[69,126,128],{"className":71,"code":127,"language":73,"meta":74,"style":74},"\u002F\u002F Didomi\nif (document.getElementById(\"didomi-host\")) {\n    document.getElementsByTagName(\"body\")[0].classList.remove(\"didomi-popup-open\");\n    document.getElementById(\"didomi-host\").remove();\n}\n\u002F\u002F Les autres je ne sais plus, je vais noter maintenant\nif (document.getElementById(\"cw_ui\")) {\n    document.getElementById(\"cw_ui\").remove();\n}\nif (document.getElementById(\"sd-cmp\")) {\n    document.getElementById(\"sd-cmp\").remove();\n    document.getElementsByTagName(\"html\")[0].classList.remove(\"sd-cmp-gF8Ho\");\n}\n",[44,129,130,136,157,187,205,211,217,233,250,255,271,288,315],{"__ignoreMap":74},[78,131,132],{"class":80,"line":81},[78,133,135],{"class":134},"snpHw","\u002F\u002F Didomi\n",[78,137,139,143,146,149,151,154],{"class":80,"line":138},2,[78,140,142],{"class":141},"s8I7P","if",[78,144,145],{"class":84}," (document.",[78,147,148],{"class":88},"getElementById",[78,150,92],{"class":84},[78,152,153],{"class":95},"\"didomi-host\"",[78,155,156],{"class":84},")) {\n",[78,158,160,163,165,167,170,172,174,177,179,181,184],{"class":80,"line":159},3,[78,161,162],{"class":84},"    document.",[78,164,89],{"class":88},[78,166,92],{"class":84},[78,168,169],{"class":95},"\"body\"",[78,171,99],{"class":84},[78,173,103],{"class":102},[78,175,176],{"class":84},"].classList.",[78,178,109],{"class":88},[78,180,92],{"class":84},[78,182,183],{"class":95},"\"didomi-popup-open\"",[78,185,186],{"class":84},");\n",[78,188,190,192,194,196,198,201,203],{"class":80,"line":189},4,[78,191,162],{"class":84},[78,193,148],{"class":88},[78,195,92],{"class":84},[78,197,153],{"class":95},[78,199,200],{"class":84},").",[78,202,109],{"class":88},[78,204,112],{"class":84},[78,206,208],{"class":80,"line":207},5,[78,209,210],{"class":84},"}\n",[78,212,214],{"class":80,"line":213},6,[78,215,216],{"class":134},"\u002F\u002F Les autres je ne sais plus, je vais noter maintenant\n",[78,218,220,222,224,226,228,231],{"class":80,"line":219},7,[78,221,142],{"class":141},[78,223,145],{"class":84},[78,225,148],{"class":88},[78,227,92],{"class":84},[78,229,230],{"class":95},"\"cw_ui\"",[78,232,156],{"class":84},[78,234,236,238,240,242,244,246,248],{"class":80,"line":235},8,[78,237,162],{"class":84},[78,239,148],{"class":88},[78,241,92],{"class":84},[78,243,230],{"class":95},[78,245,200],{"class":84},[78,247,109],{"class":88},[78,249,112],{"class":84},[78,251,253],{"class":80,"line":252},9,[78,254,210],{"class":84},[78,256,258,260,262,264,266,269],{"class":80,"line":257},10,[78,259,142],{"class":141},[78,261,145],{"class":84},[78,263,148],{"class":88},[78,265,92],{"class":84},[78,267,268],{"class":95},"\"sd-cmp\"",[78,270,156],{"class":84},[78,272,274,276,278,280,282,284,286],{"class":80,"line":273},11,[78,275,162],{"class":84},[78,277,148],{"class":88},[78,279,92],{"class":84},[78,281,268],{"class":95},[78,283,200],{"class":84},[78,285,109],{"class":88},[78,287,112],{"class":84},[78,289,291,293,295,297,300,302,304,306,308,310,313],{"class":80,"line":290},12,[78,292,162],{"class":84},[78,294,89],{"class":88},[78,296,92],{"class":84},[78,298,299],{"class":95},"\"html\"",[78,301,99],{"class":84},[78,303,103],{"class":102},[78,305,176],{"class":84},[78,307,109],{"class":88},[78,309,92],{"class":84},[78,311,312],{"class":95},"\"sd-cmp-gF8Ho\"",[78,314,186],{"class":84},[78,316,318],{"class":80,"line":317},13,[78,319,210],{"class":84},[18,321,322],{},"La version à copier dans votre \"favoris\"",[69,324,326],{"className":71,"code":325,"language":73,"meta":74,"style":74},"javascript:if (document.getElementById(\"didomi-host\")) { document.getElementsByTagName(\"body\")[0].classList.remove(\"didomi-popup-open\"); document.getElementById(\"didomi-host\").remove(); } if (document.getElementById(\"cw_ui\")) { document.getElementById(\"cw_ui\").remove(); } if (document.getElementById(\"sd-cmp\")) { document.getElementById(\"sd-cmp\").remove(); document.getElementsByTagName(\"html\")[0].classList.remove(\"sd-cmp-gF8Ho\");}\n",[44,327,328],{"__ignoreMap":74},[78,329,330,332,334,336,338,340,342,345,347,349,351,353,355,357,359,361,363,366,368,370,372,374,376,379,381,383,385,387,389,391,393,395,397,399,401,403,405,407,409,411,413,415,417,419,421,423,425,428,430,432,434,436,438,440,442,444,446],{"class":80,"line":81},[78,331,56],{"class":84},[78,333,142],{"class":141},[78,335,145],{"class":84},[78,337,148],{"class":88},[78,339,92],{"class":84},[78,341,153],{"class":95},[78,343,344],{"class":84},")) { document.",[78,346,89],{"class":88},[78,348,92],{"class":84},[78,350,169],{"class":95},[78,352,99],{"class":84},[78,354,103],{"class":102},[78,356,176],{"class":84},[78,358,109],{"class":88},[78,360,92],{"class":84},[78,362,183],{"class":95},[78,364,365],{"class":84},"); document.",[78,367,148],{"class":88},[78,369,92],{"class":84},[78,371,153],{"class":95},[78,373,200],{"class":84},[78,375,109],{"class":88},[78,377,378],{"class":84},"(); } ",[78,380,142],{"class":141},[78,382,145],{"class":84},[78,384,148],{"class":88},[78,386,92],{"class":84},[78,388,230],{"class":95},[78,390,344],{"class":84},[78,392,148],{"class":88},[78,394,92],{"class":84},[78,396,230],{"class":95},[78,398,200],{"class":84},[78,400,109],{"class":88},[78,402,378],{"class":84},[78,404,142],{"class":141},[78,406,145],{"class":84},[78,408,148],{"class":88},[78,410,92],{"class":84},[78,412,268],{"class":95},[78,414,344],{"class":84},[78,416,148],{"class":88},[78,418,92],{"class":84},[78,420,268],{"class":95},[78,422,200],{"class":84},[78,424,109],{"class":88},[78,426,427],{"class":84},"(); document.",[78,429,89],{"class":88},[78,431,92],{"class":84},[78,433,299],{"class":95},[78,435,99],{"class":84},[78,437,103],{"class":102},[78,439,176],{"class":84},[78,441,109],{"class":88},[78,443,92],{"class":84},[78,445,312],{"class":95},[78,447,448],{"class":84},");}\n",[15,450,451],{},[18,452,453],{},"Oui, il existe des extensions de navigateur qui permettent de faire la même chose, mais installer encore une dépendence pour un petit script...",[455,456,457],"style",{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html pre.shiki code .s7s5_, html code.shiki .s7s5_{--shiki-default:#AE81FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snpHw, html code.shiki .snpHw{--shiki-default:#88846F}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}",{"title":74,"searchDepth":138,"depth":138,"links":459},[460,461],{"id":29,"depth":138,"text":30},{"id":115,"depth":138,"text":116},"Puisque chez JAMgency, nous sommes pour un web plus \"propre\", et qu'on ne peut pas forcer les autres à en faire autant...","md",{},true,"\u002Farticle\u002Ffermer-les-bandeaux-cookies-avec-un-bookmarklet",{"title":6,"description":462},"article\u002Ffermer-les-bandeaux-cookies-avec-un-bookmarklet",[470,471,24],"technique","hack","fD84ZSDxjG19grPKC5IjUoePG-ONzUs-ZuY9YqTqsJU",{"id":474,"title":475,"body":476,"description":489,"extension":463,"meta":971,"navigation":465,"path":972,"seo":973,"stem":974,"tags":975,"__hash__":978},"article\u002Farticle\u002Fgenerer-un-pdf-avec-nodejs-et-puppeteer.md","Générer un PDF avec Node.js et Puppeteer à partir d'une page web",{"type":8,"value":477,"toc":964},[478,482,485,490,494,505,509,521,542,549,553,558,871,875,882,888,929,933,948,961],[11,479,481],{"id":480},"générer-un-pdf-avec-nodejs-et-puppeteer","Générer un PDF avec Node.js et Puppeteer",[18,483,484],{},"Vous en avez marre de maintenir votre script de génération de fiche produit PDF (ou votre CV), générez les directement à partir de votre site avec Node.js et Puppeteer.",[15,486,487],{},[18,488,489],{},"Pire que la mise en page d'un fichier Word, la mise en page d'un PDF généré par un script... Simplifiez-vous la vie en convertissant directement vos pages web en PDF.",[27,491,493],{"id":492},"introduction","Introduction",[18,495,496,497,500,501,504],{},"Nous allons voir ici comment créer un ",[22,498,499],{},"script Node.js"," qui vous permettra de ",[22,502,503],{},"générer un PDF à partir d'une page de votre site",".\nLe script tournera en local, mais vous pouvez l'intégrer de manière automatique dans votre CI\u002FCD.",[27,506,508],{"id":507},"installation","Installation",[18,510,511,512,520],{},"La seule dépendance dont vous avez besoin, ",[513,514,519],"a",{"href":515,"target":516,"className":517},"https:\u002F\u002Fpptr.dev\u002F","_blank",[518],"ypk__external-link","Puppeteer"," qui est un navigateur headless (ou plutôt, il contrôle votre navigateur).",[69,522,526],{"className":523,"code":524,"language":525,"meta":74,"style":74},"language-bash shiki shiki-themes monokai","npm install -D puppeteer\n","bash",[44,527,528],{"__ignoreMap":74},[78,529,530,533,536,539],{"class":80,"line":81},[78,531,532],{"class":88},"npm",[78,534,535],{"class":95}," install",[78,537,538],{"class":102}," -D",[78,540,541],{"class":95}," puppeteer\n",[18,543,544],{},[22,545,548],{"className":546},[547],"ypk--error--no-background","Attention si vous utilisez PhantomJS ! La librairie était couramment utilisée, mais elle est officiellement stoppée car elle génére de trop grosses failles de sécurité.",[27,550,552],{"id":551},"le-script-complet","Le script complet",[18,554,555],{},[44,556,557],{},"tools\u002Fpdf-generator.js",[69,559,561],{"className":71,"code":560,"language":73,"meta":74,"style":74},"\u002F\u002F Chargement des dépendances\nconst puppeteer = require('puppeteer');\n\n(async () => {\n    \u002F\u002F Lancement de Puppeteer\n    const browser = await puppeteer.launch({\n        headless: true\n    });\n    \n    \u002F\u002F Ouverture et navigation vers la page à convertir\n    const page = await browser.newPage();\n    await page.goto('http:\u002F\u002Flocalhost\u002Fma-super-page-a-convertir', {waitUntil: 'networkidle2'});\n    \n    \u002F\u002F Génération du PDF\n    await page.pdf({\n        \u002F\u002F Chemin vers le PDF relatif à la racine de votre projet\n        path: 'src\u002Fpdf\u002Fmon-super-pdf.pdf',\n        format: 'A4',\n        \u002F\u002F N'oubliez pas de forcer le printBackground à true\n        \u002F\u002F Car il est possible que dans votre style CSS cela soit l'inverse pour plus d'éfficacité\n        \u002F\u002F Mais là on veut du beau\n        printBackground: true,\n        margin: {\n            top: '0.5cm',\n            right: '0.5cm',\n            bottom: '0.5cm',\n            left: '0.5cm'\n        }\n    });\n\n    \u002F\u002F Fermeture du navigateur et fin du script\n    await browser.close();\n})();\n",[44,562,563,568,590,595,611,616,638,646,651,656,661,680,705,709,715,727,733,745,756,762,768,774,785,791,802,812,822,831,837,842,847,853,865],{"__ignoreMap":74},[78,564,565],{"class":80,"line":81},[78,566,567],{"class":134},"\u002F\u002F Chargement des dépendances\n",[78,569,570,574,577,580,583,585,588],{"class":80,"line":138},[78,571,573],{"class":572},"sOx1s","const",[78,575,576],{"class":84}," puppeteer ",[78,578,579],{"class":141},"=",[78,581,582],{"class":88}," require",[78,584,92],{"class":84},[78,586,587],{"class":95},"'puppeteer'",[78,589,186],{"class":84},[78,591,592],{"class":80,"line":159},[78,593,594],{"emptyLinePlaceholder":465},"\n",[78,596,597,599,602,605,608],{"class":80,"line":189},[78,598,92],{"class":84},[78,600,601],{"class":141},"async",[78,603,604],{"class":84}," () ",[78,606,607],{"class":572},"=>",[78,609,610],{"class":84}," {\n",[78,612,613],{"class":80,"line":207},[78,614,615],{"class":134},"    \u002F\u002F Lancement de Puppeteer\n",[78,617,618,621,624,626,629,632,635],{"class":80,"line":213},[78,619,620],{"class":572},"    const",[78,622,623],{"class":84}," browser ",[78,625,579],{"class":141},[78,627,628],{"class":141}," await",[78,630,631],{"class":84}," puppeteer.",[78,633,634],{"class":88},"launch",[78,636,637],{"class":84},"({\n",[78,639,640,643],{"class":80,"line":219},[78,641,642],{"class":84},"        headless: ",[78,644,645],{"class":102},"true\n",[78,647,648],{"class":80,"line":235},[78,649,650],{"class":84},"    });\n",[78,652,653],{"class":80,"line":252},[78,654,655],{"class":84},"    \n",[78,657,658],{"class":80,"line":257},[78,659,660],{"class":134},"    \u002F\u002F Ouverture et navigation vers la page à convertir\n",[78,662,663,665,668,670,672,675,678],{"class":80,"line":273},[78,664,620],{"class":572},[78,666,667],{"class":84}," page ",[78,669,579],{"class":141},[78,671,628],{"class":141},[78,673,674],{"class":84}," browser.",[78,676,677],{"class":88},"newPage",[78,679,112],{"class":84},[78,681,682,685,688,691,693,696,699,702],{"class":80,"line":290},[78,683,684],{"class":141},"    await",[78,686,687],{"class":84}," page.",[78,689,690],{"class":88},"goto",[78,692,92],{"class":84},[78,694,695],{"class":95},"'http:\u002F\u002Flocalhost\u002Fma-super-page-a-convertir'",[78,697,698],{"class":84},", {waitUntil: ",[78,700,701],{"class":95},"'networkidle2'",[78,703,704],{"class":84},"});\n",[78,706,707],{"class":80,"line":317},[78,708,655],{"class":84},[78,710,712],{"class":80,"line":711},14,[78,713,714],{"class":134},"    \u002F\u002F Génération du PDF\n",[78,716,718,720,722,725],{"class":80,"line":717},15,[78,719,684],{"class":141},[78,721,687],{"class":84},[78,723,724],{"class":88},"pdf",[78,726,637],{"class":84},[78,728,730],{"class":80,"line":729},16,[78,731,732],{"class":134},"        \u002F\u002F Chemin vers le PDF relatif à la racine de votre projet\n",[78,734,736,739,742],{"class":80,"line":735},17,[78,737,738],{"class":84},"        path: ",[78,740,741],{"class":95},"'src\u002Fpdf\u002Fmon-super-pdf.pdf'",[78,743,744],{"class":84},",\n",[78,746,748,751,754],{"class":80,"line":747},18,[78,749,750],{"class":84},"        format: ",[78,752,753],{"class":95},"'A4'",[78,755,744],{"class":84},[78,757,759],{"class":80,"line":758},19,[78,760,761],{"class":134},"        \u002F\u002F N'oubliez pas de forcer le printBackground à true\n",[78,763,765],{"class":80,"line":764},20,[78,766,767],{"class":134},"        \u002F\u002F Car il est possible que dans votre style CSS cela soit l'inverse pour plus d'éfficacité\n",[78,769,771],{"class":80,"line":770},21,[78,772,773],{"class":134},"        \u002F\u002F Mais là on veut du beau\n",[78,775,777,780,783],{"class":80,"line":776},22,[78,778,779],{"class":84},"        printBackground: ",[78,781,782],{"class":102},"true",[78,784,744],{"class":84},[78,786,788],{"class":80,"line":787},23,[78,789,790],{"class":84},"        margin: {\n",[78,792,794,797,800],{"class":80,"line":793},24,[78,795,796],{"class":84},"            top: ",[78,798,799],{"class":95},"'0.5cm'",[78,801,744],{"class":84},[78,803,805,808,810],{"class":80,"line":804},25,[78,806,807],{"class":84},"            right: ",[78,809,799],{"class":95},[78,811,744],{"class":84},[78,813,815,818,820],{"class":80,"line":814},26,[78,816,817],{"class":84},"            bottom: ",[78,819,799],{"class":95},[78,821,744],{"class":84},[78,823,825,828],{"class":80,"line":824},27,[78,826,827],{"class":84},"            left: ",[78,829,830],{"class":95},"'0.5cm'\n",[78,832,834],{"class":80,"line":833},28,[78,835,836],{"class":84},"        }\n",[78,838,840],{"class":80,"line":839},29,[78,841,650],{"class":84},[78,843,845],{"class":80,"line":844},30,[78,846,594],{"emptyLinePlaceholder":465},[78,848,850],{"class":80,"line":849},31,[78,851,852],{"class":134},"    \u002F\u002F Fermeture du navigateur et fin du script\n",[78,854,856,858,860,863],{"class":80,"line":855},32,[78,857,684],{"class":141},[78,859,674],{"class":84},[78,861,862],{"class":88},"close",[78,864,112],{"class":84},[78,866,868],{"class":80,"line":867},33,[78,869,870],{"class":84},"})();\n",[27,872,874],{"id":873},"lancement-du-script","Lancement du script",[18,876,877,878,881],{},"Pour que le script fonctionne, ",[22,879,880],{},"il faut que votre site soit lancé et l'URL en localhost accessible",".",[18,883,884,885,881],{},"Pour plus de praticité, pensez à ajouter le script dans votre ",[44,886,887],{},"package.json",[69,889,893],{"className":890,"code":891,"language":892,"meta":74,"style":74},"language-json shiki shiki-themes monokai","{\n    \"scripts\": {\n        \"pdf:build\": \"node tools\u002Fpdf-generator.js\"\n    }\n}\n","json",[44,894,895,900,908,920,925],{"__ignoreMap":74},[78,896,897],{"class":80,"line":81},[78,898,899],{"class":84},"{\n",[78,901,902,905],{"class":80,"line":138},[78,903,904],{"class":572},"    \"scripts\"",[78,906,907],{"class":84},": {\n",[78,909,910,913,916],{"class":80,"line":159},[78,911,912],{"class":572},"        \"pdf:build\"",[78,914,915],{"class":84},": ",[78,917,919],{"class":918},"susgL","\"node tools\u002Fpdf-generator.js\"\n",[78,921,922],{"class":80,"line":189},[78,923,924],{"class":84},"    }\n",[78,926,927],{"class":80,"line":207},[78,928,210],{"class":84},[27,930,932],{"id":931},"conclusion","Conclusion",[18,934,935,936,939,940,943,944,947],{},"Avec ceci, vous avez la possibilité de faire ",[22,937,938],{},"de beaux PDFs"," rapidement, ",[22,941,942],{},"automatiquement mis à jour"," et ne nécessitant ",[22,945,946],{},"pas une énième source de données"," et d'erreur.",[18,949,950,951,881,957,960],{},"Le style de vos PDFs sera logiquement ",[22,952,953,954],{},"basé sur votre feuille de style avec la media query ",[44,955,956],{},"print",[958,959],"br",{},"\nC'est parfait, vous avez déjà cela d'implémenté sur votre site... N'est-ce pas ???",[455,962,963],{},"html pre.shiki code .snpHw, html code.shiki .snpHw{--shiki-default:#88846F}html pre.shiki code .sOx1s, html code.shiki .sOx1s{--shiki-default:#66D9EF;--shiki-default-font-style:italic}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html pre.shiki code .s7s5_, html code.shiki .s7s5_{--shiki-default:#AE81FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .susgL, html code.shiki .susgL{--shiki-default:#CFCFC2}",{"title":74,"searchDepth":138,"depth":138,"links":965},[966,967,968,969,970],{"id":492,"depth":138,"text":493},{"id":507,"depth":138,"text":508},{"id":551,"depth":138,"text":552},{"id":873,"depth":138,"text":874},{"id":931,"depth":138,"text":932},{},"\u002Farticle\u002Fgenerer-un-pdf-avec-nodejs-et-puppeteer",{"title":475,"description":489},"article\u002Fgenerer-un-pdf-avec-nodejs-et-puppeteer",[470,976,977],"backend","nodejs","8uKQbJ3pWjfNBq_UJNdkLsndFDCsXtssEj0NxK_-4Ow",{"id":980,"title":981,"body":982,"description":1110,"extension":463,"meta":1111,"navigation":465,"path":1112,"seo":1113,"stem":1114,"tags":1115,"__hash__":1118},"article\u002Farticle\u002Fgit-based-cms.md","Les CMS orientés Git",{"type":8,"value":983,"toc":1101},[984,987,1000,1004,1015,1019,1026,1030,1037,1041,1053,1057,1070,1074,1081,1083],[11,985,981],{"id":986},"les-cms-orientés-git",[15,988,989],{},[18,990,991,992,995,996,999],{},"Vous voulez ",[22,993,994],{},"gérer vos contenus"," sans avoir à vous occuper de l'infogérance, avec un historique, et tout ça ",[22,997,998],{},"gratuitement"," ? Les CMS orientés Git sont là pour ça !",[27,1001,1003],{"id":1002},"le-stockage-des-données","Le stockage des données",[18,1005,1006,1007,1010,1011,1014],{},"Le principe est simple, ",[22,1008,1009],{},"au lieu de stocker les données dans une base de données, on les stocke dans un repo Git"," et l'accès se fait via l'API de l'outil de gestion de version (GitLab\u002FGitHub\u002F...).\nVous pouvez utiliser par exemple des fichiers ",[44,1012,1013],{},".json"," pour organiser vos données, mais d'autres formats sont possibles.\nOn peut même envisager d'utiliser les \"issue\" plutôt que le repo, tout ce qui est accessible via l'API.",[27,1016,1018],{"id":1017},"les-droits-et-lauthentification","Les droits et l'authentification",[18,1020,1021,1022,1025],{},"Et pour les droits ? Il suffit de ",[22,1023,1024],{},"s'authentifier via l'oAuth"," de ce dernier.\nL'application va vous demander des droits pour utiliser l'API via votre accès et ensuite stocker votre token pour la suite.",[27,1027,1029],{"id":1028},"lécriture-des-données","L'écriture des données",[18,1031,1032,1033,1036],{},"Pour l'écriture, ",[22,1034,1035],{},"pas de POST\u002FPUT classiques, mais des commits",", on passe par l'API en lui envoyant les nouveaux fichiers et en faisant des commits.\nCela peut paraitre plus lourd, mais complétement pris en charge pour nous.",[27,1038,1040],{"id":1039},"lapplication-en-elle-même","L'application en elle-même",[18,1042,1043,1044,1047,1048,881],{},"Ok, et pour l'application qui fait tourner tout ça ? Donc, elle n'a ni besoin de gérer l'authentification ni base de données. La récupération\u002Fécriture des infos se fera par API. On peut ainsi avoir une ",[22,1045,1046],{},"application générée statiquement",", comme ",[513,1049,1052],{"href":1050,"target":516,"className":1051},"https:\u002F\u002Fdecapcms.org\u002F",[518],"Decap CMS",[27,1054,1056],{"id":1055},"lhébergement","L'hébergement",[18,1058,1059,1060,1063,1064,1069],{},"La dernière étape, héberger tout ça, ",[22,1061,1062],{},"un simple hébergement statique suffit"," comme ",[513,1065,1068],{"href":1066,"target":516,"className":1067},"https:\u002F\u002Fwww.netlify.com\u002F",[518],"Netlify"," ou un S3 like. Pour Decap CMS, on parle de seulement 3 fichiers... Donc, vous n'êtes pas près de dépasser les free tiers.",[27,1071,1073],{"id":1072},"pour-aller-plus-loin","Pour aller plus loin",[18,1075,1076,1077,1080],{},"Vous pouvez ensuite soit intégrer le tout dans votre projet de site, ou ",[22,1078,1079],{},"jouer avec votre CI\u002FCD pour déclencher des builds"," à votre convenance.",[27,1082,932],{"id":931},[18,1084,1085,1086,1089,1090,1093,1094,1097,1098,881],{},"On se retrouve donc avec une solution de gestion de données, ",[22,1087,1088],{},"gratuite"," dans la plupart des cas, et ",[22,1091,1092],{},"complètement infogérée",", avec un ",[22,1095,1096],{},"haut niveau de sécurité"," et même un ",[22,1099,1100],{},"historique",{"title":74,"searchDepth":138,"depth":138,"links":1102},[1103,1104,1105,1106,1107,1108,1109],{"id":1002,"depth":138,"text":1003},{"id":1017,"depth":138,"text":1018},{"id":1028,"depth":138,"text":1029},{"id":1039,"depth":138,"text":1040},{"id":1055,"depth":138,"text":1056},{"id":1072,"depth":138,"text":1073},{"id":931,"depth":138,"text":932},"Vous voulez gérer vos contenus sans avoir à vous occuper de l'infogérance, avec un historique, et tout ça gratuitement ? Les CMS orientés Git sont là pour ça !",{},"\u002Farticle\u002Fgit-based-cms",{"title":981,"description":1110},"article\u002Fgit-based-cms",[470,1116,1117,976],"jamstack","cms","ocySiEbgBtsc1idGjG_PGOjcnKTlHwIPZGV7fZYeiq0",{"id":1120,"title":1121,"body":1122,"description":1182,"extension":463,"meta":1183,"navigation":465,"path":1184,"seo":1185,"stem":1186,"tags":1187,"__hash__":1189},"article\u002Farticle\u002Fgit-bisect.md","Git Bisect, une commande à connaitre",{"type":8,"value":1123,"toc":1179},[1124,1127,1136,1143,1147,1173],[11,1125,1121],{"id":1126},"git-bisect-une-commande-à-connaitre",[15,1128,1129],{},[18,1130,1131,1132,1135],{},"Un bug est passé sous les radars, et vous ne savez pas depuis combien de temps il est là... ",[44,1133,1134],{},"git bisect"," est le héro dont vous avez besoin !",[18,1137,1138,1139,1142],{},"Cette ",[22,1140,1141],{},"commande méconnue de git est vraiment géniale"," ! Perso ça m'est arrivé 2-3 fois seulement, mais sans elle j'aurais pris bien plus de temps à résoudre mes bugs.",[27,1144,1146],{"id":1145},"explication","Explication",[1148,1149,1150,1154,1157,1163,1166],"ul",{},[1151,1152,1153],"li",{},"Vous découvrez un bug et ne savais pas depuis combien de temps il est là ;",[1151,1155,1156],{},"Vous commencez par revenir sur un ancien commit pour lequel vous êtes sûr que le bug n'était pas là ;",[1151,1158,1159,1160,1162],{},"Vous lancez ",[44,1161,1134],{}," qui va faire... Une bissection ! Oui voilà, bravo les mathématiciens 😁 Il va se placer sur le commit entre l'actuel et le dernier et te demander si le bug est là ?",[1151,1164,1165],{},"Si oui, il va faire une bissection entre le commit du milieu et le dernier, si non, une bissection entre celui du milieu et le premier. Du coup, vous serez soit au 1\u002F4 soit au 3\u002F4.",[1151,1167,1168,1169,1172],{},"Dans tous les cas, cela divise par deux le nombre de commits potentiels à chaque itération, et il ne te faut souvent ",[22,1170,1171],{},"pas plus de 5 bissections pour identifier le commit responsable"," du bug !",[18,1174,1175,1176,1178],{},"Après, il vous restera à faire les modifs, mais ",[44,1177,1134],{}," aura fait son travail rapidement.",{"title":74,"searchDepth":138,"depth":138,"links":1180},[1181],{"id":1145,"depth":138,"text":1146},"Un bug est passé sous les radars, et vous ne savez pas depuis combien de temps il est là... `git bisect` est le héro dont vous avez besoin !",{},"\u002Farticle\u002Fgit-bisect",{"title":1121,"description":1182},"article\u002Fgit-bisect",[470,1188],"git","ELBeLy6Gm4J2btMvUm2NjXoHavklinm25vCLHTzPpkM",{"id":1191,"title":1192,"body":1193,"description":1321,"extension":463,"meta":1322,"navigation":465,"path":1323,"seo":1324,"stem":1325,"tags":1326,"__hash__":1329},"article\u002Farticle\u002Fl-optimisation-prematuree.md","L'optimisation prématurée, ennemie de l'avancée",{"type":8,"value":1194,"toc":1313},[1195,1198,1204,1215,1219,1226,1230,1237,1242,1264,1269,1273,1295,1299,1306],[11,1196,1192],{"id":1197},"loptimisation-prématurée-ennemie-de-lavancée",[18,1199,1200,1201,1203],{},"Lorsqu'il est temps d'avancer, de livrer, on se demande si notre produit est prêt.",[958,1202],{},"\nEt si on se le demande trop, on ne sort rien.",[15,1205,1206],{},[18,1207,1208,1209,1211,1212,1214],{},"Pourquoi il n'y a pas de pagination sur ton site ?",[958,1210],{},"\n- On va commencer par avoir plus de contenus avant ça, vous connaissez l'optimisation prématurée ?",[958,1213],{},"\nC'est mon deuxième article sur ce site, si j'avais développé la pagination avant, il n'y aurait rien.",[27,1216,1218],{"id":1217},"présentation","Présentation",[18,1220,1221,1222,1225],{},"L'optimisation prématurée est un concept qui met en avant les features que l'on veut créer ",[22,1223,1224],{},"avant même qu'elles ne deviennent désirées",", repoussant ainsi la sortie, tout en ajoutant une dose de complexité.",[27,1227,1229],{"id":1228},"ne-le-prenez-pas-mal-lintention-est-bonne","Ne le prenez pas mal, l'intention est bonne",[18,1231,1232,1233,1236],{},"Oui, bien souvent cette optimisation est preuve de bonne volonté, ne dit-on pas que ",[22,1234,1235],{},"l’enfer est pavé de bonnes intentions"," ?\nOn cherche à améliorer le code ou bien \"prévoir pour plus tard\", mais ce \"plus tard\" arrivera-t-il ?",[1238,1239,1241],"h3",{"id":1240},"un-exemple-très-simple-qui-mest-arrivé-à-mes-débuts","Un exemple très simple qui m'est arrivé à mes débuts",[1148,1243,1244,1247,1258],{},[1151,1245,1246],{},"Je devais faire une flèche vers la droite, je m'occupe du design et de l'intégration, jusque-là pas de soucis ;",[1151,1248,1249,1250,1253,1254,1257],{},"Mais je me dis que ",[22,1251,1252],{},"tant que j'y suis, autant faire les 3 autres"," flèches (gauche, haut, bas), ",[22,1255,1256],{},"et là voilà, notre optimisation prématurée"," ;",[1151,1259,1260,1261,881],{},"Car avant même d'utiliser une des autres flèches, le design a bien changé 3 fois, ",[22,1262,1263],{},"3 modifications que j'ai dù répliquer pour rien",[15,1265,1266],{},[18,1267,1268],{},"Ce n'était pas grand-chose, mais c'était systématique pour moi en ce temps, il y a plus de 10 ans, et c'est mon manager de l'époque qui m'en a fait prendre conscience (merci Jean).",[1238,1270,1272],{"id":1271},"on-y-trouve-tout-de-même-un-petit-schéma-dans-lapprentissage","On y trouve tout de même un petit schéma dans l'apprentissage",[1148,1274,1275,1281,1288],{},[1151,1276,1277,1278,1257],{},"Jeune, je suis ",[22,1279,1280],{},"parti à fond, dans tous les sens",[1151,1282,1283,1284,1287],{},"Puis j'ai commencé à bien maîtriser, ",[22,1285,1286],{},"vouloir avoir des choses parfaites",", et me retrouver dans cette optimisation prématurée ;",[1151,1289,1290,1291,1294],{},"Et maintenant, je sais qu'il faut y aller, qu'il faut ",[22,1292,1293],{},"se confronter à ses utilisateurs",", c'est ça qui nous fera avoir le produit parfait.",[27,1296,1298],{"id":1297},"pensez-plutôt-kiss-keep-it-stupid-simple","Pensez plutôt KISS (Keep It Stupid Simple)",[18,1300,1301,1302,1305],{},"Bien que cela semble contre-intuitif, ",[22,1303,1304],{},"le plus difficile à apprendre, c'est apprendre à faire les choses simplement",".\nUne application simple est plus facile à comprendre, maintenir et faire évoluer.\nLa complexité est source de coûts de conception, de maintenance et une source potentielle d'erreurs.",[18,1307,1308,1309,1312],{},"Et pour le moment, je n'ai parlé que de code, mais ",[22,1310,1311],{},"pour l'UX c'est la même chose",".\nIl vaut mieux n'avoir que les fonctionnalités essentielles, plutôt qu'une foule de fonctionnalités non utilisées et brouillant l'ergonomie.",{"title":74,"searchDepth":138,"depth":138,"links":1314},[1315,1316,1320],{"id":1217,"depth":138,"text":1218},{"id":1228,"depth":138,"text":1229,"children":1317},[1318,1319],{"id":1240,"depth":159,"text":1241},{"id":1271,"depth":159,"text":1272},{"id":1297,"depth":138,"text":1298},"Lorsqu'il est temps de livrer, on se demande si notre produit est prêt, et si on se le demande trop, on ne sort rien.",{},"\u002Farticle\u002Fl-optimisation-prematuree",{"title":1192,"description":1321},"article\u002Fl-optimisation-prematuree",[1327,1328],"soft-skill","kiss","ndJDHXJc5q6BUOaf7eAPua7Jpa9VFrYQ-RyqopZyf0Y",{"id":1331,"title":1332,"body":1333,"description":1489,"extension":463,"meta":1490,"navigation":465,"path":1491,"seo":1492,"stem":1493,"tags":1494,"__hash__":1497},"article\u002Farticle\u002Fle-dev-frontend-est-il-mort.md","Le dév Frontend est-il mort ?",{"type":8,"value":1334,"toc":1482},[1335,1338,1343,1349,1353,1360,1370,1385,1389,1403,1417,1428,1432,1447,1454,1458,1469,1471],[11,1336,1332],{"id":1337},"le-dév-frontend-est-il-mort",[15,1339,1340],{},[18,1341,1342],{},"J'ai dit pendant des années que le bon dév Fullstack n'existe pas, et maintenant, tout le monde doit être Fullstack pour rester dans la course...",[18,1344,1345,1346,881],{},"La multiplication des frameworks\u002Flibs JS, les difficultés du marché, l'IA, ",[22,1347,1348],{},"tout cela est en train de tuer le dév Frontend",[27,1350,1352],{"id":1351},"mon-cas-personnel","Mon cas personnel",[18,1354,1355,1356,1359],{},"J'ai une réelle appétence pour ",[22,1357,1358],{},"le Frontend que je trouve plus créatif et moins routinier que le Backend",". Voilà pourquoi je me suis longtemps défini comme un dév Frontend malgré mes 8+ années de Backend (PHP et Node.js).",[18,1361,1362,1363,1366,1367,881],{},"Je précise que ",[22,1364,1365],{},"je n'ai jamais cessé de faire du Backend",", que cela soit chez mes clients ou pour mes projets personnels, alors ",[22,1368,1369],{},"mon retour au Fullstack n'est pas opportuniste, je m'adapte juste",[18,1371,1372,1373,1376,1377,1380,1381,1384],{},"J'aurais adoré voir le marché tendre vers ",[22,1374,1375],{},"du dév Frontend avec de l'UX design",", ce qui je suis sûr, aurai apporté ",[22,1378,1379],{},"des interfaces bien plus belles et ergonomiques",", mais le marché est tel qu'il est...\nÀ un moment, j'ai même tenté de me définir comme ",[22,1382,1383],{},"UX développeur",", car j'intègre et développe les interfaces que j'ai moi-même désignées.",[27,1386,1388],{"id":1387},"comment-en-est-on-arrivé-là","Comment en est-on arrivé là ?",[18,1390,1391,1394,1395,1398,1399,1402],{},[22,1392,1393],{},"Les nombreux frameworks JS\u002FCSS ont tué la créativité",", les dévs Frontend lambda ne font plus qu'intégrer des composants pris de libs qu'ils n'ont pas codé ou designés, du coup leur valeur ajoutée n'est plus aussi importante, et ",[22,1396,1397],{},"tout le milieu du dév Frontend en pâtit",".\nLes clients veulent de fait ",[22,1400,1401],{},"des dévs plus polyvalent"," à défaut d'expertise poussée et recherchent de moins en moins de dév Frontend.",[18,1404,1405,1408,1409,1412,1413,1416],{},[22,1406,1407],{},"L'IA ne va sûrement pas arranger les choses",", cela fait des années qu'on entend que l'IA va remplacer les dévs. Et ",[22,1410,1411],{},"même si cela semblait bien loin, cela semble un peu plus proche maintenant","...\nEt ",[22,1414,1415],{},"les premiers à être remplacés seront les intégrateurs et dév Frontend"," qui n'apportent pas de compétences en plus comme le Backend ou l'UX.",[18,1418,1419,1420,1423,1424,1427],{},"Avec tout cela, ",[22,1421,1422],{},"le plus sûr est de se porter vers le Backend"," qui porte le business et qui sera toujours essentiel, même dans un contexte de marché en recession. Et ",[22,1425,1426],{},"nous voilà (re)devenu Fullstack"," pour rester dans la course.",[27,1429,1431],{"id":1430},"et-le-backend-seul-dans-tout-ça","Et le Backend seul dans tout ça ?",[18,1433,1434,1435,1438,1439,1442,1443,1446],{},"Pour le dév Backend c'est différent, ",[22,1436,1437],{},"des pûrs Backend seront toujours là",", ils seront juste ",[22,1440,1441],{},"couplés à des Fullstack plutôt qu'à des Frontend"," pour s'occuper de l'intégration.\nCar ",[22,1444,1445],{},"le business et les données sont portés par le back",", que cela soit en monolithe, via API ou micro-services.",[18,1448,1449,1450,1453],{},"Et puis on ne va pas se mentir, mais ",[22,1451,1452],{},"beaucoup de dévs Backend se déclarent Fullstack dés qu'il touchent une ligne de CSS","... Les pûrs Backend sont rares.",[27,1455,1457],{"id":1456},"les-nouvels-arrivants-le-no-codeur-et-lia","Les nouvels arrivants, le No-Codeur et l'IA",[18,1459,1460,1461,1464,1465,1468],{},"Comme si tout cela ne suffisait pas, ",[22,1462,1463],{},"il y a maintenant la montée en puissance du No-code et de l'IA",".\nIl devient maintenant ",[22,1466,1467],{},"simple de créer de superbes applications sans le moindre code",". Et même si cela ne peut pas tout remplacer, le no-code prends forcément sa part du marché.",[27,1470,932],{"id":931},[18,1472,1473,1474,1477,1478,1481],{},"Voilà pourquoi je pense que ",[22,1475,1476],{},"notre métier est en plein chamboulement",", mais heureusement, ",[22,1479,1480],{},"c'est le propre du développeur que de se remettre en question"," et de se former.\nEt il va devenir compliqué de se concentrer sur une seule expertise et rester dans la course.",{"title":74,"searchDepth":138,"depth":138,"links":1483},[1484,1485,1486,1487,1488],{"id":1351,"depth":138,"text":1352},{"id":1387,"depth":138,"text":1388},{"id":1430,"depth":138,"text":1431},{"id":1456,"depth":138,"text":1457},{"id":931,"depth":138,"text":932},"La multiplication des frameworks\u002Flibs JS, les difficultés du marché, l'IA, tout cela est en train de tuer le dév Frontend.",{},"\u002Farticle\u002Fle-dev-frontend-est-il-mort",{"title":1332,"description":1489},"article\u002Fle-dev-frontend-est-il-mort",[1495,1496],"humeur","frontend","6QeeuvJO3IZY6DVB_5kQLlhAHjL4wrm2M70SnQurfyU",{"id":1499,"title":1500,"body":1501,"description":1680,"extension":463,"meta":1681,"navigation":465,"path":1682,"seo":1683,"stem":1684,"tags":1685,"__hash__":1687},"article\u002Farticle\u002Fpourquoi-l-ux-ui-est-importante.md","Pourquoi l'UX\u002FUI est importante ?",{"type":8,"value":1502,"toc":1674},[1503,1506,1510,1522,1528,1545,1549,1560,1581,1591,1595,1618,1625,1642,1644,1647,1667],[11,1504,1500],{"id":1505},"pourquoi-luxui-est-importante",[27,1507,1509],{"id":1508},"un-beau-design-est-toujours-agréable","Un beau design est toujours agréable",[18,1511,1512,1513,1516,1517,1521],{},"Le design est la ",[22,1514,1515],{},"première chose qui nous saute aux yeux en arrivant sur un site"," (",[1518,1519,1520],"em",{},"aprés le popin d'acceptation de cookies...","), il doit donc plaire à l'utilisateur pour le mettre dans de bonnes conditions.",[18,1523,1524,1527],{},[22,1525,1526],{},"Les goûts et les couleurs","... Perso, je suis pour la simplicité, mais suivant le site ou l'application, il faut savoir être plus tape à l'oeil, mais vous l'avez compris, cela ne sera pas le cas içi.",[15,1529,1530],{},[18,1531,1532,1533,1536,1537,1540,1541,1544],{},"Je pense à la fois où un commercial est venu me demander si je pouvais faire quelque chose pour préparer un rdv client (Olivier, dédicace).\nJ'ai pris un après-midi pour ",[22,1534,1535],{},"faire un template spécifique à ce futur client",". Et quand mon commercial a commencé la présentation, ",[22,1538,1539],{},"le prospect pensait être dans un de leurs outils",".\nQuand il s'est aperçu que c'était le nôtre, mais avec son design, ",[22,1542,1543],{},"la vente était faite"," ! Il ne restait plus qu'à présenter les fonctionnalités de notre application et les termes du contrat.",[27,1546,1548],{"id":1547},"lacceptation-dun-outil-passe-par-sa-facilité-daccès","L'acceptation d'un outil passe par sa facilité d'accès",[18,1550,1551,1552,1555,1556,1559],{},"Puis, pour que l'utilisateur veuille continuer à visiter ou utiliser votre application, ",[22,1553,1554],{},"il doit se sentir à l'aise"," et votre expérience utilisateur (UX) doit être éfficace et simple, ",[22,1557,1558],{},"que ce soit sur mobile ou sur ordinateur"," !",[15,1561,1562],{},[18,1563,1564,1565,1568,1569,1572,1573,1576,1577,1580],{},"J'ai travaillé avec ",[22,1566,1567],{},"la Chine"," (pour le compte de Decathlon) et je peux vous dire qu'ils n'ont ",[22,1570,1571],{},"pas la même notion de \"simple ef efficace\"","... Donc là encore, il faut s'adapter.\nEt je ne parle pas des ",[22,1574,1575],{},"pays écrivant de droite à gauche",", si votre UX n'est pas prête dans un contexte international, ",[22,1578,1579],{},"ils auront une expérience dégradée"," (l'ouverture pays pour Bonduelle Israël a été un peu plus longue que les autres, on va dire... le RTL n'était pas anticipé).",[18,1582,1583,1584,1587,1588,881],{},"En plus bien souvent, ",[22,1585,1586],{},"une bonne UX, c'est gratuit"," ! Ou plutôt, ça se rentabilise en temps de SAV économisé et en bouche-à-oreille de clients satisfaits.\nLa deuxième proposition n'est pas évidente à quantifier, mais la première, elle, ",[22,1589,1590],{},"peut rentrer dans vos KPIs façilement",[27,1592,1594],{"id":1593},"la-data-cest-bien-lui-faire-raconter-une-histoire-cest-mieux","La data c'est bien, lui faire raconter une histoire c'est mieux !",[18,1596,1597,1598,1601,1602,1605,1606,1609,1610,1613,1614,1617],{},"Et maintenant que l'on a ",[22,1599,1600],{},"un utilisateur content de visiter",", il ne faut pas le ",[22,1603,1604],{},"laisser errer sans but",", il faut lui donner ce qu'il désire : ",[22,1607,1608],{},"de jolis produits"," pour un site marchand, ",[22,1611,1612],{},"un numéro de téléphone"," pour réserver une table pour un restaurant, ou bien ",[22,1615,1616],{},"des données qui racontent quelque-chose"," pour une application.",[18,1619,1620,1621,1624],{},"De grands tableaux façon Excel avec plein de lignes et de colonnes, ça peut plaire à certains, mais ça ne va pas à l'essentiel.\nVos données doivent être ",[22,1622,1623],{},"filtrées et triées correctement, et ensuite regroupées par typologie",", pour que les comparaisons puissent faire ressortir les \"histoires\".",[15,1626,1627],{},[18,1628,1629,1630,1633,1634,1637,1638,1641],{},"Je cherche à ",[22,1631,1632],{},"optimiser les ventes sur mon site marchand",", une liste de produits classique triés par CA généré peut m'aider ?\nOui, mais peut-mieux faire, car peut⁻être que ",[22,1635,1636],{},"votre produit phare accapare tout le CA du rayon"," par exemple, mais que finalement ",[22,1639,1640],{},"le rayon d'à côté qui place bien plusieurs produits génère un bien meilleur CA",". Pour le savoir, il faut organiser ses données et c'est là que l'UX peut vous aider (et un bon Data Analyst).",[27,1643,932],{"id":931},[18,1645,1646],{},"On peut donc dire que l'expérience utilisateur passe par 3 étapes :",[1148,1648,1649,1655,1661],{},[1151,1650,1651,1654],{},[22,1652,1653],{},"La présentation"," : Arrivée sur le site et découverte du design ;",[1151,1656,1657,1660],{},[22,1658,1659],{},"L'utilisation"," : Début de la navigation et des parcours utilisateurs ;",[1151,1662,1663,1666],{},[22,1664,1665],{},"L'acceptation"," : Prise en main compléte, ou abandon.",[18,1668,1669,1670,1673],{},"Et que ",[22,1671,1672],{},"ces 3 étapes doivent être soignées pour avoir des utilisateurs heureux",", avec la volonté d'utiliser l'outil ou de revenir sur le site.",{"title":74,"searchDepth":138,"depth":138,"links":1675},[1676,1677,1678,1679],{"id":1508,"depth":138,"text":1509},{"id":1547,"depth":138,"text":1548},{"id":1593,"depth":138,"text":1594},{"id":931,"depth":138,"text":932},"Parce que l'UX est souvent laissée de côté dans les applications métier, ou bien noyée dans un design flamboyant de site web. Voici pourquoi vous devez faire l'effort de l'améliorer.",{},"\u002Farticle\u002Fpourquoi-l-ux-ui-est-importante",{"title":1500,"description":1680},"article\u002Fpourquoi-l-ux-ui-est-importante",[1495,1496,1686],"ux\u002Fui","sceE2xFvxHLWOE46j7eGc55Q66kGU0WTMcIj9pYJ2aA",{"id":1689,"title":1690,"body":1691,"description":1989,"extension":463,"meta":1990,"navigation":465,"path":1991,"seo":1992,"stem":1993,"tags":1994,"__hash__":1995},"article\u002Farticle\u002Fqu-est-ce-que-la-jamstack.md","Qu'est-ce que la JAMstack ?",{"type":8,"value":1692,"toc":1978},[1693,1696,1707,1712,1716,1727,1731,1734,1782,1786,1789,1814,1818,1822,1825,1859,1863,1866,1874,1877,1901,1905,1908,1924,1927,1937,1939,1949,1962,1972],[11,1694,1690],{"id":1695},"quest-ce-que-la-jamstack",[18,1697,1698,1699,1702,1703,1706],{},"La JAMstack pour ",[22,1700,1701],{},"Javascript\u002FApi\u002FMarkup"," est une méthode de génération de site statique.\nL'ensemble des pages du site est construit au déploiement de celui-ci et il n'y a donc ",[22,1704,1705],{},"plus besoin de serveur dynamique"," pour l'héberger.\nCette stack permet de générer un site très simple, mais permet aussi de faire des sites bien plus complexes.",[15,1708,1709],{},[18,1710,1711],{},"Vous imaginez aller au resto et attendre pour commander que le serveur écrive la carte à chaque fois devant vous avant de vous la donner ? C'est ce qu'il se passe sur votre site quand vous n'utilisez pas la JAMstack...",[27,1713,1715],{"id":1714},"un-peu-dhistoire","Un peu d'histoire",[18,1717,1718,1719,1722,1723,1726],{},"Le concept a été posé par Mathias BIILMANN (le PDG de ",[513,1720,1068],{"href":1066,"target":516,"className":1721},[518],") en 2015 et son entreprise est d'ailleurs une solution idéale pour héberger vos sites JAMstack.\nOn retrouve maintenant la possibilité de générer statiquement un site dans la plupart des framework frontend JavaScript, un petit ",[44,1724,1725],{},"npm run generate"," avec Nuxt par exemple.",[27,1728,1730],{"id":1729},"avantages","Avantages",[18,1732,1733],{},"Vous générez vos pages lors du déploiement, le site en production est statique :",[1148,1735,1736,1745,1752,1760,1767,1775],{},[1151,1737,1738,1739,1744],{},"Pas de BDD, pas de serveur dynamique, vous n'hébergez ",[22,1740,1743],{"className":1741},[1742],"ypk--valid--no-background","que des fichiers statiques"," (HTML\u002FCSS\u002FIMG) ;",[1151,1746,1747,1748,1257],{},"De fait, les ",[22,1749,1751],{"className":1750},[1742],"performances sont inégalées",[1151,1753,1754,1755,1759],{},"Niveau sécurité, ",[22,1756,1758],{"className":1757},[1742],"il n'y a rien à attaquer",", on est donc encore au maximum ;",[1151,1761,1762,1763,1257],{},"Aucun soucis de scalabilité, votre site supportera ",[22,1764,1766],{"className":1765},[1742],"n'importe quelle charge",[1151,1768,1769,1770,1774],{},"Vous pouvez aussi l'impliquer dans votre ",[22,1771,1773],{"className":1772},[1742],"démarche RSE",", grâce aux autres points ;",[1151,1776,1777,1778,881],{},"Pour tout ça, des ",[22,1779,1781],{"className":1780},[1742],"frais d'hébergement et maintenance bien moindre",[27,1783,1785],{"id":1784},"inconvénients","Inconvénients",[18,1787,1788],{},"Mais bien sûr, il y a quelques contraintes :",[1148,1790,1791,1799,1806],{},[1151,1792,1793,1794,1798],{},"La JAMstack ",[22,1795,1797],{"className":1796},[547],"ne peut pas servir à la création d'application"," métier ;",[1151,1800,1801,1805],{},[22,1802,1804],{"className":1803},[547],"Ajouter du dynamisme à votre site est possible, mais moins trivial"," qu'avec un site classique ;",[1151,1807,1808,1809,1813],{},"Le moindre appel API en production et ",[22,1810,1812],{"className":1811},[547],"la résilience de votre site en dépendra",". Mais si tout es bien fait, cela peut ne toucher qu'un unique composant, et surtout, cela sera forcément moindre que de faire tomber l'entièreté du site.",[27,1815,1817],{"id":1816},"outils-prestataires","Outils & Prestataires",[1238,1819,1821],{"id":1820},"générateurs-de-site-statique","Générateurs de site statique",[18,1823,1824],{},"De très nombreux outils permettent maintenant de générer statiquement votre site :",[1148,1826,1827,1835,1843,1851],{},[1151,1828,1829,1834],{},[513,1830,1833],{"href":1831,"target":516,"className":1832},"https:\u002F\u002Fnextjs.org\u002F",[518],"Next.js",", le plus populaire sur GitHub, sur base de React ;",[1151,1836,1837,1842],{},[513,1838,1841],{"href":1839,"target":516,"className":1840},"https:\u002F\u002Fgohugo.io\u002F",[518],"Hugo",", l'historique, celui par lequel beaucoup de choses ont commencées ;",[1151,1844,1845,1850],{},[513,1846,1849],{"href":1847,"target":516,"className":1848},"https:\u002F\u002Fnuxt.com\u002F",[518],"Nuxt",", basé sur Vue.js que je recommande ;",[1151,1852,1853,1858],{},[513,1854,1857],{"href":1855,"target":516,"className":1856},"https:\u002F\u002Fwww.11ty.dev\u002F",[518],"Eleventy (11ty)",", mon chouchou, tellement simple, rapide et puissant, mais basé sur aucune techno \"à la mode\" et donc bien moins répandu.",[1238,1860,1862],{"id":1861},"gestionnaires-de-contenu","Gestionnaires de contenu",[18,1864,1865],{},"Mais pour générer un site, il faut bien des données en entrée ? Ici deux camps se distinguent :",[1148,1867,1868,1871],{},[1151,1869,1870],{},"Les CMS API-driven, le classique WordPress en headless et tous les petits nouveaux développés spécifiquement pour ça ;",[1151,1872,1873],{},"Le CMS \"Git-based\", là, c'est game changer, car pas besoin de serveur non plus pour l'administration... Au lieu d'enregistrer des données en BDD, on fait des commits directement dans notre gestionnaire Git favori via son API.",[18,1875,1876],{},"Mes propositions :",[1148,1878,1879,1885,1893],{},[1151,1880,1881,1884],{},[513,1882,1052],{"href":1050,"target":516,"className":1883},[518]," (anciennement Netlify CMS), que je recommande, par les créateurs de Netlify ;",[1151,1886,1887,1892],{},[513,1888,1891],{"href":1889,"target":516,"className":1890},"https:\u002F\u002Fstrapi.io\u002F",[518],"Strapi",", le plus populaire sur GitHub, et son CEO est maintenent Lillois ! Dédicace à Pierre ;",[1151,1894,1895,1900],{},[513,1896,1899],{"href":1897,"target":516,"className":1898},"https:\u002F\u002Fdirectus.io\u002F",[518],"Directus",", celui que j'utilisais avant de découvrir les Git-based et Netlify CMS.",[1238,1902,1904],{"id":1903},"hébergeurs","Hébergeurs",[18,1906,1907],{},"Pour héberger votre site, votre prestataire habituel a forcément une offre d'hébergement de fichiers statiques, cherchez une offre \"bucket like\" comme Amazon S3, et je citerai :",[1148,1909,1910,1916],{},[1151,1911,1912,1915],{},[513,1913,1068],{"href":1066,"target":516,"className":1914},[518],", l'origine de tout ça, un premier déploiement en quelques minutes et plus encore ;",[1151,1917,1918,1923],{},[513,1919,1922],{"href":1920,"target":516,"className":1921},"https:\u002F\u002Fwww.clever-cloud.com\u002Ffr\u002Fproduct\u002Fstockage-objet-cellar\u002F",[518],"Clever Cloud",", si vous voulez que tout reste en France.",[18,1925,1926],{},"Et si vous voulez partir sur un CMS API-driven :",[1148,1928,1929],{},[1151,1930,1931,1936],{},[513,1932,1935],{"href":1933,"target":516,"className":1934},"https:\u002F\u002Fwww.stackhero.io\u002Ffr-fr\u002Fservices\u002FDirectus\u002Fbenefits",[518],"Stackhero propose une instance Directus"," déployable en quelques instants.",[27,1938,932],{"id":931},[18,1940,1941,1942,1945,1946,1559],{},"La JAMstack mérite de se retrouver ",[22,1943,1944],{},"partout sur le web",", énormément de cas d'usage s'y prêtent.\nPour certains, cela est évident, pour d'autres, il faut mettre en place des spécificités, mais ",[22,1947,1948],{},"dans tous les cas, on y gagne en résilience",[15,1950,1951],{},[18,1952,1953,1954,1958,1959,881],{},"Hé mais \"JAMstack\u002FJAMgency\"... Ce n'est pas un hasard ",[78,1955,1957],{"style":1956},"font-style:normal","😉"," c'est justement ce qui m'a motivé à créer l'agence, ",[22,1960,1961],{},"pour un web plus responsable",[18,1963,1964,1965,1968,1969,881],{},"Imaginez un site de vente en ligne JAMstack et une API tombée... Avec un site dynamique, tout le site serait hors ligne, en JAMstack, il resterait tout de même le catalogue produit.\nEt dans tous les cas, ",[22,1966,1967],{},"l'API est bien moins sollicitée",", car pour afficher la page d'un produit, il n'y a qu'à demander à l'API si le produit est en stock vu que ",[22,1970,1971],{},"tout le reste est déjà généré",[18,1973,1974,1975,1559],{},"Bref, ",[22,1976,1977],{},"vive la JAMstack",{"title":74,"searchDepth":138,"depth":138,"links":1979},[1980,1981,1982,1983,1988],{"id":1714,"depth":138,"text":1715},{"id":1729,"depth":138,"text":1730},{"id":1784,"depth":138,"text":1785},{"id":1816,"depth":138,"text":1817,"children":1984},[1985,1986,1987],{"id":1820,"depth":159,"text":1821},{"id":1861,"depth":159,"text":1862},{"id":1903,"depth":159,"text":1904},{"id":931,"depth":138,"text":932},"Présentation de la JAMstack, des avantages de la génération de site statique et pourquoi vous devez l'utiliser.",{},"\u002Farticle\u002Fqu-est-ce-que-la-jamstack",{"title":1690,"description":1989},"article\u002Fqu-est-ce-que-la-jamstack",[470,1116,1496],"iHtH-3jDFP_tuDKcKGnwLuCGVhowJAQpYTZOOwIJSzA",1775518747641]