{"id":230960,"date":"2022-12-18T16:10:00","date_gmt":"2022-12-18T13:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230960"},"modified":"2022-12-07T10:00:50","modified_gmt":"2022-12-07T07:00:50","slug":"que-son-los-mapas-de-origen-y-son-necesarios","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/que-son-los-mapas-de-origen-y-son-necesarios\/","title":{"rendered":"\u00bfQu\u00e9 son los mapas de origen (y son necesarios)?"},"content":{"rendered":"\n<p>Si trabaja en el front-end de un sitio en cualquier capacidad, ya sea para un complemento, un tema o incluso algo fuera de WordPress, es probable que est\u00e9 trabajando con herramientas de minificaci\u00f3n.<\/p>\n<p>Los beneficios son obvios, \u00bfverdad?<\/p>\n<ul>\n<li>disminuye la carga \u00fatil,<\/li>\n<li>nos permite centrarnos en el desarrollo de nuestros entornos locales<\/li>\n<\/ul>\n<p>Pero una de las caracter\u00edsticas que vienen con el trabajo con estas tecnolog\u00edas es la capacidad de generar mapas de origen.<\/p>\n<p>Y esto plantea una pregunta (o tal vez dos): \u00bfQu\u00e9 son los mapas fuente? \u00bfY son necesarios?<\/p>\n<p>Puede afirmar que es tarde para hablar de esto, pero siempre hay personas que ingresan a la industria que pueden no conocer este material.<\/p>\n<p>Entonces, \u00bfpor qu\u00e9 no cubrirlo?<\/p>\n<h2>\u00bfQu\u00e9 son los mapas de origen?<\/h2>\n<p>En resumen, los mapas de origen son una forma en que los navegadores modernos toman el c\u00f3digo minimizado y nos permiten leer el c\u00f3digo en su estado no minimizado.<\/p>\n<p>For example, in a project on which I&#8217;ve been working, I have a simple file, <strong>plugin-setting.scss<\/strong>, that gets minified into <strong>plugin-setting.css<\/strong>. This file is <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">then enqueued by WordPress<\/a>.<\/p>\n<p>I also, however, have my build tool generating a source map. This means that I\u00a0also have a file called\u00a0<strong>plugin-settings.css.map<\/strong>.<\/p>\n<p>So the code that\u2019s shipped with the plugin <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-00-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">looks like this:<\/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>But when viewed in the browsers debug tool <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-01-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">looks like this:<\/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>And source maps can be generated for both stylesheets and JavaScript.<\/p>\n<h2>Are They Needed?<\/h2>\n<p>No puedo dar un s\u00ed o un no espec\u00edfico a esto; sin embargo, descubr\u00ed que cuanto m\u00e1s tiempo trabajo en esta industria y en proyectos, los encuentro mucho m\u00e1s \u00fatiles que la alternativa (que generalmente es poner en cola el estilo no minimizado para fines de depuraci\u00f3n).<\/p>\n<p>Te recomiendo que los generes y los incluyas porque facilita la depuraci\u00f3n. Pero si se necesitan o no depende de usted o de su equipo.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los mapas de origen son una forma en que los navegadores modernos toman el c\u00f3digo minimizado y nos permiten leer el c\u00f3digo en su estado no minimizado.<\/p>\n","protected":false},"author":1,"featured_media":234918,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[903,716,840],"tags":[1172],"class_list":["post-230960","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-2","category-desarrollador","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=230960"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230960\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/234918"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=230960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=230960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=230960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}