[{"data":1,"prerenderedAt":477},["ShallowReactive",2],{"i-ic:outline-arrow-upward":3,"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E":8,"episode-\u002Fpodcasts\u002Fdev_email":16,"github-sponsor":379,"i-material-symbols:home":454,"i-ic:baseline-play-circle-filled-white":456,"i-material-symbols:ios-share":458,"i-cbi:deezer-logo":460,"i-vscode-icons:file-type-rss":462,"i-ri:heart-3-fill":465,"Brand_dlIOZD2O03VXPoFYukMOJnSnZRMTmJ0YwMKY5fNK8":467,"Duration_wkvnNR3cgGkQ6b6hmjkuoLk6QudTq07lRP62qjrbM":472},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"m4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z\"\u002F>",["Island",9],{"key":10,"result":11},"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E",{"head":12},{"style":13},[14],{"innerHTML":15},":where(.i-mdi\\:github){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'\u002F%3E%3C\u002Fsvg%3E\")}",{"id":17,"title":18,"author":19,"body":20,"categories":354,"description":356,"dsSlug":357,"duration":358,"episodeArtwork":359,"episodeNumber":360,"episodeType":361,"explicit":6,"extension":362,"guid":363,"links":364,"meta":365,"navigation":366,"path":367,"publicationDate":368,"season":369,"seo":370,"status":371,"stem":372,"subtitle":373,"tags":374,"videoLink":377,"__hash__":378},"podcasts\u002Fpodcasts\u002F075.dev_email\u002Findex.md","Coder des emails","Double Slash",{"type":21,"value":22,"toc":336},"minimark",[23,28,41,45,69,73,77,88,91,94,97,101,106,124,128,172,176,185,189,192,211,217,239,244,268,272,293,301,305,313,317,323,327,333],[24,25,27],"h2",{"id":26},"la-problématique-concernant-le-templating-des-emails","La problématique concernant le templating des emails",[29,30,31,35,38],"ul",{},[32,33,34],"li",{},"Problème avec la multitude des clients mail (web et app)",[32,36,37],{},"Code spécifique (merci outlook, Gmail)",[32,39,40],{},"Contrainte d’utiliser du HTML des années 2000 à base de table pour avoir un rendu homogène.",[24,42,44],{"id":43},"_2-types-demails","2 types d’emails",[29,46,47,61],{},[32,48,49,50],{},"emails transactionnels :\n",[29,51,52,55,58],{},[32,53,54],{},"confirmation de commande",[32,56,57],{},"creation de compte",[32,59,60],{},"…",[32,62,63,64],{},"emails promotions et communication\n",[29,65,66],{},[32,67,68],{},"newsletters",[24,70,72],{"id":71},"une-multitude-doutils-très-complets","Une multitude d’outils très complets.",[74,75,76],"p",{},"Quelques exemples :",[29,78,79,82,85],{},[32,80,81],{},"BREVO (ex:sendinblue)",[32,83,84],{},"MailJet",[32,86,87],{},"MailCHIMP",[74,89,90],{},"Avantages : Prise en main facile pour des non-techs. Éditeurs d’emails à base de WYSIWYG",[74,92,93],{},"Inconvénients : Difficile à piloter depuis le CMS ou le service développé.",[74,95,96],{},"Solution bien adaptée pour la gestion des newsletters, mais pas forcément pour du transactionnel.\nParfois compliqué d’automatiser ou de variabiliser.",[24,98,100],{"id":99},"allez-plus-loin-que-les-plateformes-demailing","Allez plus loin que les plateformes d’emailing",[102,103,105],"h3",{"id":104},"_1-créer-des-templates-en-mode-no-code","1 - Créer des templates en mode no-code",[29,107,108,117],{},[32,109,110,111],{},"Achat de templates ",[112,113,114],"a",{"href":114,"rel":115},"https:\u002F\u002Funlayer.com\u002Ftemplates",[116],"nofollow",[32,118,119,120],{},"Service de création de template en ligne : ",[112,121,122],{"href":122,"rel":123},"https:\u002F\u002Fstripo.email\u002F",[116],[102,125,127],{"id":126},"_2-créer-des-templates-en-mode-dev","2 - Créer des templates en mode dev",[29,129,130,137,144,151,158,165],{},[32,131,132,133],{},"En mode React style : MJML ",[112,134,135],{"href":135,"rel":136},"https:\u002F\u002Fmjml.io\u002F",[116],[32,138,139,140],{},"Bojler ",[112,141,142],{"href":142,"rel":143},"https:\u002F\u002Fbojler.slicejack.com\u002F",[116],[32,145,146,147],{},"Foundation Email ",[112,148,149],{"href":149,"rel":150},"https:\u002F\u002Fget.foundation\u002Femails.html",[116],[32,152,153,154],{},"En mode tailwind CSS ",[112,155,156],{"href":156,"rel":157},"https:\u002F\u002Fmaizzle.com\u002F",[116],[32,159,160,161],{},"En react : ",[112,162,163],{"href":163,"rel":164},"https:\u002F\u002Freact.email\u002F",[116],[32,166,167,168],{},"En Vue : ",[112,169,170],{"href":170,"rel":171},"https:\u002F\u002Fwww.vuemail.net\u002F",[116],[102,173,175],{"id":174},"_3-tester-les-emails-en-terme-marketing","3 - Tester les emails en terme marketing",[29,177,178],{},[32,179,180,181],{},"Tester le design avec ",[112,182,183],{"href":183,"rel":184},"https:\u002F\u002Fwww.litmus.com\u002Femail-personalization\u002Fai-powered-email-marketing",[116],[102,186,188],{"id":187},"_4-envoyer-les-emails","4 - Envoyer les emails",[74,190,191],{},"Via son propre serveur :",[29,193,194,201,208],{},[32,195,196,197],{},"NodeJS ",[112,198,199],{"href":199,"rel":200},"https:\u002F\u002Fnodemailer.com\u002F",[116],[32,202,203,204],{},"PHP ",[112,205,206],{"href":206,"rel":207},"https:\u002F\u002Fgithub.com\u002FPHPMailer\u002FPHPMailer",[116],[32,209,210],{},"Symfony Mailer, Laravel Mail, etc…",[74,212,213],{},[214,215,216],"strong",{},"Via des plateformes dédiées à l’envoi d’email :",[29,218,219,226,232],{},[32,220,221],{},[112,222,225],{"href":223,"rel":224},"https:\u002F\u002Fresend.com\u002F",[116],"RESEND",[32,227,228],{},[112,229,230],{"href":230,"rel":231},"https:\u002F\u002Fmailpace.com\u002F",[116],[32,233,234,238],{},[112,235,236],{"href":236,"rel":237},"https:\u002F\u002Faws.amazon.com\u002Fses\u002F",[116]," (Le moins cher, mais attention US \u002F EU réglementations)",[74,240,241],{},[214,242,243],{},"Envoyer par paquet :",[29,245,246,257],{},[32,247,248,249],{},"Pourquoi :",[29,250,251,254],{},[32,252,253],{},"pas passer pour un spammer",[32,255,256],{},"Charge serveur",[32,258,259,260],{},"Solutions :",[29,261,262,265],{},[32,263,264],{},"queue (Laravel Mail, nodemailer + kue,…)",[32,266,267],{},"Les services d’envois proposent toujours cette option",[102,269,271],{"id":270},"_5-faire-en-sorte-que-les-emails-arrivent","5- Faire en sorte que les emails arrivent",[29,273,274,277,287],{},[32,275,276],{},"Attacher son nom de domaine",[32,278,279,280,283,284],{},"Réglages DNS : ",[214,281,282],{},"MX","  - ",[214,285,286],{},"SPF  ( éviter les spams )",[32,288,289,290],{},"Réglages Sécurité : ",[214,291,292],{},"DKIM et DMARC",[74,294,295,296],{},"Outil pratique : ",[112,297,300],{"href":298,"rel":299},"https:\u002F\u002Fwww.mail-tester.com\u002F?lang=fr",[116],"https:\u002F\u002Fwww.mail-tester.com",[24,302,304],{"id":303},"vidéo","Vidéo :",[29,306,307],{},[32,308,309],{},[112,310,311],{"href":311,"rel":312},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=MHnTpN0g7ko",[116],[24,314,316],{"id":315},"personne-à-suivre","Personne à suivre :",[74,318,319],{},[112,320,321],{"href":321,"rel":322},"https:\u002F\u002Ftwitter.com\u002FHTeuMeuLeu",[116],[24,324,326],{"id":325},"site-référence","Site référence",[74,328,329],{},[112,330,331],{"href":331,"rel":332},"https:\u002F\u002Fwww.caniemail.com\u002F",[116],[74,334,335],{},"Bonne écoute !",{"title":337,"searchDepth":338,"depth":338,"links":339},"",2,[340,341,342,343,351,352,353],{"id":26,"depth":338,"text":27},{"id":43,"depth":338,"text":44},{"id":71,"depth":338,"text":72},{"id":99,"depth":338,"text":100,"children":344},[345,347,348,349,350],{"id":104,"depth":346,"text":105},3,{"id":126,"depth":346,"text":127},{"id":174,"depth":346,"text":175},{"id":187,"depth":346,"text":188},{"id":270,"depth":346,"text":271},{"id":303,"depth":338,"text":304},{"id":315,"depth":338,"text":316},{"id":325,"depth":338,"text":326},[355],"Technology","Dans cet épisode, nous allons évoquer le côté obscur de notre métier. Faire du développement à destination des emails ! Nous allons commencer par la partie templating, puis nous évoquerons les plateformes en lignes, les frameworks, les pièges à éviter et nous finirons par un retour d’expérience dans le secteur du e-commerce.","DS_075_dev_email",3822,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fv1701157471\u002FART_75_email_mytqlw.png",75,"full","md",null,[],{},true,"\u002Fpodcasts\u002Fdev_email","2023-11-29",1,{"title":18,"description":356},"published","podcasts\u002F075.dev_email\u002Findex","Méthodes et outils pour la création et l'envoi d'emails",[375,376],"email","design","uc6vJ7ujlLE","L5F8OcEKaG6Hv_y_SnhrtdqtnS2zG4JKfWeBXAp5FWg",{"data":380},{"organization":381},{"sponsorsListing":382},{"name":383,"fullDescriptionHTML":384,"url":385,"shortDescription":386,"activeGoal":387,"isPublic":366,"sponsorable":391},"sponsors-double-slash-podcast","\u003Cp>Le podcast des dev pour dev par des dev !\u003C\u002Fp>\n\u003Cp>Des podcasts et des videos sur les technologie WEB modernes.\u003C\u002Fp>\n\u003Cp>A deux ou avec un invité, on discute des tendances, des nouvelles technologies, des meilleures pratiques actuelles.\u003C\u002Fp>\n\u003Cp>🎥 \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCp5DGBAX2XNJXeOVAo7bICQ\">Youtube\u003C\u002Fa>\u003Cbr>\n🎙️ \u003Ca href=\"https:\u002F\u002Fspoti.fi\u002F317wtvD\">Spotify\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fapple.co\u002F3fTguFo\">Apple Podcast\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fbit.ly\u002F3i0hDgy\">Deezer\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fbit.ly\u002F31aKKYd\">Google Podcast\u003C\u002Fa>\u003Cbr>\n🌐 \u003Ca href=\"https:\u002F\u002Fdouble-slash.dev\u002F\">Double Slash DEV\u003C\u002Fa>\u003C\u002Fp>","https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fdouble-slash-podcast","Le podcast des dev pour les dev par des dev !",{"description":388,"percentComplete":389,"targetValue":389,"title":390},"L'ensemble des charges seront couvertes. Service de stockage et abonnement aux services utilisés.",70,"$70 per month",{"sponsors":392},{"edges":393},[394,400,406,412,418,424,430,436,442,448],{"node":395},{"id":396,"name":397,"url":398,"avatarUrl":399},"MDQ6VXNlcjEwMDMwNw==","Clément Delmas","https:\u002F\u002Fgithub.com\u002Fclem","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F100307?u=878ed4b7cdf920879b57046f19e434fea2c7d296&v=4",{"node":401},{"id":402,"name":403,"url":404,"avatarUrl":405},"MDQ6VXNlcjI3NTYwOQ==","Thibaud Lepretre","https:\u002F\u002Fgithub.com\u002Fkakawait","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F275609?v=4",{"node":407},{"id":408,"name":409,"url":410,"avatarUrl":411},"MDQ6VXNlcjE5MTQxNjA=","David Pollet","https:\u002F\u002Fgithub.com\u002Fdavidpollet","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1914160?u=4b3da16383b9fa810fd0980f756000709403ab45&v=4",{"node":413},{"id":414,"name":415,"url":416,"avatarUrl":417},"MDQ6VXNlcjYzMzMzOTY=","Eric","https:\u002F\u002Fgithub.com\u002Fericledonge","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6333396?u=e9e541a6b9125d8e8b558fdd914c847eb36db695&v=4",{"node":419},{"id":420,"name":421,"url":422,"avatarUrl":423},"MDQ6VXNlcjg4OTk3Njg=","François Gardien","https:\u002F\u002Fgithub.com\u002FYoutch","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F8899768?u=85ae8c4299c380bcec02e99e9364624f3ce333c7&v=4",{"node":425},{"id":426,"name":427,"url":428,"avatarUrl":429},"MDQ6VXNlcjEwMTc2NjI2","Antharuu","https:\u002F\u002Fgithub.com\u002Fantharuu","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F10176626?u=3f6ef490b330d5a9bbaa3137560b5d1d4cf13a4a&v=4",{"node":431},{"id":432,"name":433,"url":434,"avatarUrl":435},"MDQ6VXNlcjEwMTg2OTkz","Adrien Zaganelli","https:\u002F\u002Fgithub.com\u002FadrienZ","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F10186993?u=08189ef8cf708a61445b6a57cf7a2aa361d484af&v=4",{"node":437},{"id":438,"name":439,"url":440,"avatarUrl":441},"MDQ6VXNlcjI2MTQyMzgz","Thomas Lemoine","https:\u002F\u002Fgithub.com\u002Fthomaslemoine","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F26142383?u=4c68175459b0ae1f8c68c48c40f2ae148747675d&v=4",{"node":443},{"id":444,"name":445,"url":446,"avatarUrl":447},"MDQ6VXNlcjY1NzM3MTMx","Valentin Grenier","https:\u002F\u002Fgithub.com\u002Fvalentin-grenier","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F65737131?u=0ba0cc828412f6655a948c6a82f69b9c909f8fd9&v=4",{"node":449},{"id":450,"name":451,"url":452,"avatarUrl":453},"U_kgDOBipZwA","Hebrard Frederic","https:\u002F\u002Fgithub.com\u002Ffrederichebrard","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F103438784?v=4",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":455},"\u003Cpath fill=\"currentColor\" d=\"M4 21V9l8-6l8 6v12h-6v-7h-4v7z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":457},"\u003Cpath fill=\"currentColor\" d=\"M12 2C6.475 2 2 6.475 2 12s4.475 10 10 10s10-4.475 10-10S17.525 2 12 2m-2 14.5v-9l6 4.5z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":459},"\u003Cpath fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h3v2H6v10h12V10h-3V8h3q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm5-6V4.825l-1.6 1.6L8 5l4-4l4 4l-1.4 1.425l-1.6-1.6V16z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":461},"\u003Cpath fill=\"currentColor\" d=\"M18.774 5.051c.185-1.072.457-1.747.757-1.748c.561 0 1.015 2.341 1.015 5.228s-.455 5.229-1.016 5.229c-.23 0-.443-.4-.614-1.064c-.27 2.439-.831 4.115-1.48 4.115c-.5 0-.953-1.007-1.256-2.594c-.207 3.018-.727 5.161-1.334 5.161c-.381 0-.73-.848-.987-2.231C13.55 20 12.834 22 12 22s-1.551-2-1.86-4.853c-.255 1.383-.6 2.231-.986 2.231c-.609 0-1.128-2.142-1.335-5.161c-.3 1.587-.752 2.594-1.256 2.594c-.649 0-1.21-1.676-1.481-4.115c-.169.668-.382 1.064-.613 1.064c-.562 0-1.017-2.34-1.017-5.229S3.908 3.3 4.471 3.3c.3 0 .57.676.758 1.748C5.527 3.2 6.014 2 6.564 2c.653 0 1.219 1.7 1.487 4.168c.262-1.8.658-2.941 1.1-2.941c.624 0 1.154 2.252 1.351 5.393C10.874 7.01 11.41 6 12 6s1.128 1.011 1.5 2.62c.2-3.141.727-5.393 1.351-5.393c.444 0 .84 1.145 1.1 2.941C16.219 3.7 16.785 2 17.439 2c.547 0 1.035 1.2 1.335 3.051m-16.2 5.3C2.258 10.355 2 9.31 2 8.017s.258-2.337.576-2.337s.578 1.044.578 2.337s-.254 2.338-.578 2.338Zm18.848 0c-.32 0-.577-1.045-.577-2.338s.257-2.337.577-2.337S22 6.724 22 8.017s-.258 2.338-.576 2.338Z\"\u002F>",{"left":4,"top":4,"width":463,"height":463,"rotate":4,"vFlip":6,"hFlip":6,"body":464},32,"\u003Cdefs>\u003ClinearGradient id=\"SVGvSi4fdXe\" x1=\"30.06\" x2=\"225.94\" y1=\"30.06\" y2=\"225.94\" gradientTransform=\"matrix(.11 0 0 .11 2 2)\" gradientUnits=\"userSpaceOnUse\">\u003Cstop offset=\"0\" stop-color=\"#e3702d\"\u002F>\u003Cstop offset=\".11\" stop-color=\"#ea7d31\"\u002F>\u003Cstop offset=\".35\" stop-color=\"#f69537\"\u002F>\u003Cstop offset=\".5\" stop-color=\"#fb9e3a\"\u002F>\u003Cstop offset=\".7\" stop-color=\"#ea7c31\"\u002F>\u003Cstop offset=\".89\" stop-color=\"#de642b\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#d95b29\"\u002F>\u003C\u002FlinearGradient>\u003C\u002Fdefs>\u003Crect width=\"28\" height=\"28\" x=\"2\" y=\"2\" fill=\"#cc5d15\" rx=\"6.01\" ry=\"6.01\"\u002F>\u003Crect width=\"26.91\" height=\"26.91\" x=\"2.54\" y=\"2.54\" fill=\"#f49c52\" rx=\"5.47\" ry=\"5.47\"\u002F>\u003Crect width=\"25.82\" height=\"25.82\" x=\"3.1\" y=\"3.1\" fill=\"url(#SVGvSi4fdXe)\" rx=\"5.14\" ry=\"5.14\"\u002F>\u003Cpath fill=\"#fff\" d=\"M6.82 6.16v3.83a15.31 15.31 0 0 1 15.3 15.3h3.83A19.14 19.14 0 0 0 6.81 6.17zm0 6.45v3.72a8.97 8.97 0 0 1 8.96 8.97h3.72A12.69 12.69 0 0 0 6.81 12.6zm2.62 7.44a2.63 2.63 0 0 0-2.63 2.62a2.63 2.63 0 0 0 2.63 2.63a2.63 2.63 0 0 0 2.63-2.63a2.63 2.63 0 0 0-2.63-2.63z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":466},"\u003Cpath fill=\"currentColor\" d=\"M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2\"\u002F>",["Island",468],{"key":469,"result":470},"Brand_dlIOZD2O03VXPoFYukMOJnSnZRMTmJ0YwMKY5fNK8",{"head":471},{},["Island",473],{"key":474,"result":475},"Duration_wkvnNR3cgGkQ6b6hmjkuoLk6QudTq07lRP62qjrbM",{"head":476},{},1785405175890]