{"id":231243,"date":"2022-12-18T16:30:00","date_gmt":"2022-12-18T13:30:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231243"},"modified":"2022-12-07T10:00:55","modified_gmt":"2022-12-07T07:00:55","slug":"que-sont-les-cartes-sources-et-sont-elles-necessaires","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/que-sont-les-cartes-sources-et-sont-elles-necessaires\/","title":{"rendered":"Que sont les cartes sources (et sont-elles n\u00e9cessaires)\u00a0?"},"content":{"rendered":"\n<p>Si vous travaillez sur le front-end d&rsquo;un site \u00e0 quelque titre que ce soit &#8211; que ce soit pour un plugin, un th\u00e8me ou m\u00eame quelque chose en dehors de WordPress &#8211; vous travaillez probablement avec des outils de minification.<\/p>\n<p>Les avantages sont \u00e9vidents, non ?<\/p>\n<ul>\n<li>cela diminue la charge utile,<\/li>\n<li>il nous permet de nous concentrer sur le d\u00e9veloppement de nos environnements locaux<\/li>\n<\/ul>\n<p>Mais l&rsquo;une des fonctionnalit\u00e9s qui accompagnent l&rsquo;utilisation de ces technologies, c&rsquo;est la possibilit\u00e9 de g\u00e9n\u00e9rer des cartes sources.<\/p>\n<p>Et cela soul\u00e8ve une question (ou peut-\u00eatre deux)\u00a0: que sont les cartes sources\u00a0? Et sont-ils m\u00eame n\u00e9cessaires?<\/p>\n<p>Vous pouvez pr\u00e9tendre qu&rsquo;il est tard pour en parler, mais il y a toujours des gens qui entrent dans l&rsquo;industrie et qui ne connaissent peut-\u00eatre pas ce mat\u00e9riel.<\/p>\n<p>Alors pourquoi ne pas le couvrir ?<\/p>\n<h2>Que sont les cartes sources\u00a0?<\/h2>\n<p>En bref, les cartes source sont un moyen pour les navigateurs modernes de prendre le code minifi\u00e9 et de nous permettre de lire le code dans son \u00e9tat non minifi\u00e9.<\/p>\n<p>Par exemple, dans un projet sur lequel j&rsquo;ai travaill\u00e9, j&rsquo;ai un fichier simple, <strong>plugin-setting.scss<\/strong>, qui est minifi\u00e9 en <strong>plugin-setting.css<\/strong>. Ce fichier est <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ensuite mis en file d&rsquo;attente par WordPress<\/a>.<\/p>\n<p>Cependant, mon outil de construction g\u00e9n\u00e8re \u00e9galement une carte source. Cela signifie que j&rsquo;ai \u00e9galement un fichier appel\u00e9 <strong>plugin-settings.css.map<\/strong>.<\/p>\n<p>Ainsi, le code fourni avec le plugin <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-00-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ressemble \u00e0 ceci\u00a0:<\/a><\/p>\n<pre><code>form label{font-weight:normal}form input[type=\"text\"],form textarea{width:100%}.admin-featurebox{background:#FFF;border:1px solid #CCC;margin:20px 0;padding:10px 20px}\n\n\/*# sourceMappingURL=plugin-settings.css.map *\/<\/code><\/pre>\n<p>Mais lorsqu&rsquo;il est affich\u00e9 dans l&rsquo;outil de d\u00e9bogage des navigateurs, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-01-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">il ressemble \u00e0 ceci\u00a0:<\/a><\/p>\n<pre><code>form {\n  label {\n    font-weight: normal;\n  }\n\n  input[type=\"text\"],\n  textarea {\n    width: 100%;\n  }\n}\n\n.admin-featurebox {\n  background:#FFF;\n  border:1px solid #CCC;\n  margin:20px 0;\n  padding:10px 20px;\n}\n<\/code><\/pre>\n<p>Et les cartes source peuvent \u00eatre g\u00e9n\u00e9r\u00e9es pour les feuilles de style et JavaScript.<\/p>\n<h2>Sont-ils n\u00e9cessaires\u00a0?<\/h2>\n<p>Je ne peux pas donner un oui ou un non pr\u00e9cis \u00e0 cela; cependant, j&rsquo;ai trouv\u00e9 que plus je travaille longtemps dans cette industrie, et sur des projets, je les trouve beaucoup plus utiles que l&rsquo;alternative (qui consiste g\u00e9n\u00e9ralement \u00e0 mettre en file d&rsquo;attente le style non minifi\u00e9 \u00e0 des fins de d\u00e9bogage).<\/p>\n<p>Je vous recommande de les g\u00e9n\u00e9rer et de les inclure car cela facilite le d\u00e9bogage. Mais qu&rsquo;ils soient n\u00e9cessaires ou non d\u00e9pend de vous ou de votre \u00e9quipe.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les cartes source sont un moyen pour les navigateurs modernes de prendre le code minifi\u00e9 et de nous permettre de lire le code dans son \u00e9tat non minifi\u00e9.<\/p>\n","protected":false},"author":1,"featured_media":234913,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[904,717,841],"tags":[1167],"class_list":["post-231243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-3","category-developpeur","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/231243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=231243"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/231243\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/234913"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=231243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=231243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=231243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}