{"id":230748,"date":"2022-12-18T15:56:00","date_gmt":"2022-12-18T12:56:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230748"},"modified":"2022-12-07T10:01:00","modified_gmt":"2022-12-07T07:01:00","slug":"vad-aer-kaellkartor-och-behoevs-de","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/vad-aer-kaellkartor-och-behoevs-de\/","title":{"rendered":"Vad \u00e4r k\u00e4llkartor (och beh\u00f6vs de)?"},"content":{"rendered":"<p>Om du arbetar p\u00e5 front-end av en webbplats i n\u00e5gon kapacitet \u2013 vare sig det \u00e4r f\u00f6r ett plugin, ett tema eller till och med n\u00e5got utanf\u00f6r WordPress \u2013 arbetar du troligen med minifieringsverktyg.<\/p>\n<p>F\u00f6rdelarna \u00e4r uppenbara, eller hur?<\/p>\n<ul>\n<li>det minskar nyttolasten,<\/li>\n<li>det g\u00f6r att vi kan fokusera p\u00e5 utveckling p\u00e5 v\u00e5ra lokala milj\u00f6er<\/li>\n<\/ul>\n<p>Men en av funktionerna som f\u00f6ljer med att arbeta med dessa tekniker och det \u00e4r m\u00f6jligheten att generera k\u00e4llkartor.<\/p>\n<p>Och detta v\u00e4cker en fr\u00e5ga (eller kanske tv\u00e5): Vad \u00e4r k\u00e4llkartor? Och beh\u00f6vs de ens?<\/p>\n<p>Du kan h\u00e4vda att det \u00e4r sent att prata om detta, men det finns alltid m\u00e4nniskor som kommer in i branschen som kanske inte k\u00e4nner till det h\u00e4r materialet.<\/p>\n<p>S\u00e5 varf\u00f6r inte t\u00e4cka det?<\/p>\n<h2>Vad \u00e4r k\u00e4llkartor?<\/h2>\n<p>Kort sagt, k\u00e4llkartor \u00e4r ett s\u00e4tt f\u00f6r moderna webbl\u00e4sare att ta den minifierade koden och till\u00e5ta oss att l\u00e4sa koden i dess of\u00f6rminskade tillst\u00e5nd.<\/p>\n<p>Till exempel, i ett projekt som jag har arbetat med, har jag en enkel fil, <strong>plugin-setting.scss<\/strong>, som f\u00f6rminskas till <strong>plugin-setting.css<\/strong>. Den h\u00e4r filen <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">k\u00f6as sedan av WordPress<\/a>.<\/p>\n<p>Jag har dock ocks\u00e5 mitt byggverktyg som genererar en k\u00e4llkarta. Det betyder att jag \u00e4ven har en fil som heter <strong>plugin-settings.css.map<\/strong>.<\/p>\n<p>S\u00e5 koden som levereras med pluginet <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-00-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ser ut s\u00e5 h\u00e4r:<\/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>Men n\u00e4r det visas i webbl\u00e4sarens fels\u00f6kningsverktyg <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-01-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ser det ut s\u00e5 h\u00e4r:<\/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>Och k\u00e4llkartor kan genereras f\u00f6r b\u00e5de stilmallar och JavaScript.<\/p>\n<h2>Beh\u00f6vs de?<\/h2>\n<p>Jag kan inte ge ett specifikt ja eller nej till detta; Jag har dock m\u00e4rkt att ju l\u00e4ngre jag arbetar i den h\u00e4r branschen, och med projekt tycker jag att de \u00e4r mycket mer anv\u00e4ndbara \u00e4n alternativet (som vanligtvis st\u00e4ller in den of\u00f6rminskade stilen i fels\u00f6kningssyfte).<\/p>\n<p>Jag rekommenderar att du genererar dem och inkluderar dem eftersom det g\u00f6r fels\u00f6kning enklare. Men om de beh\u00f6vs eller inte \u00e4r upp till dig eller ditt team.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>k\u00e4llkartor \u00e4r ett s\u00e4tt f\u00f6r moderna webbl\u00e4sare att ta den minifierade koden och l\u00e5ta oss l\u00e4sa koden i dess of\u00f6rminskade tillst\u00e5nd.<\/p>\n","protected":false},"author":1,"featured_media":234919,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[910,848,724],"tags":[1173],"class_list":["post-230748","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-9","category-handledningar","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=230748"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230748\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/234919"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=230748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=230748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=230748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}