{"id":231344,"date":"2022-12-18T15:44:00","date_gmt":"2022-12-18T12:44:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231344"},"modified":"2022-12-07T10:00:53","modified_gmt":"2022-12-07T07:00:53","slug":"mitae-ovat-laehdekartat-ja-tarvitaanko-niitae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/mitae-ovat-laehdekartat-ja-tarvitaanko-niitae\/","title":{"rendered":"Mit\u00e4 ovat l\u00e4hdekartat (ja tarvitaanko niit\u00e4)?"},"content":{"rendered":"\n<p>Jos ty\u00f6skentelet sivuston k\u00e4ytt\u00f6liittym\u00e4ss\u00e4 miss\u00e4 tahansa ominaisuudessa \u2013 olipa kyse laajennuksesta, teemasta tai jopa jostain WordPressin ulkopuolelta \u2013 ty\u00f6skentelet todenn\u00e4k\u00f6isesti minimointity\u00f6kalujen kanssa.<\/p>\n<p>Edut ovat ilmeisi\u00e4, eik\u00f6?<\/p>\n<ul>\n<li>se v\u00e4hent\u00e4\u00e4 hy\u00f6tykuormaa,<\/li>\n<li>sen avulla voimme keskitty\u00e4 paikallisten ymp\u00e4rist\u00f6jemme kehitt\u00e4miseen<\/li>\n<\/ul>\n<p>Mutta yksi ominaisuuksista, jotka tulevat n\u00e4iden tekniikoiden kanssa ty\u00f6skentelyyn, on kyky luoda l\u00e4hdekarttoja.<\/p>\n<p>Ja t\u00e4m\u00e4 her\u00e4tt\u00e4\u00e4 kysymyksen (tai ehk\u00e4 kaksi): Mit\u00e4 ovat l\u00e4hdekartat? Ja tarvitaanko niit\u00e4 edes?<\/p>\n<p>Voit v\u00e4itt\u00e4\u00e4, ett\u00e4 on my\u00f6h\u00e4ist\u00e4 puhua t\u00e4st\u00e4, mutta alalle tulee aina ihmisi\u00e4, jotka eiv\u00e4t ehk\u00e4 tied\u00e4 t\u00e4t\u00e4 materiaalia.<\/p>\n<p>Joten miksi ei peit\u00e4 sit\u00e4?<\/p>\n<h2>Mit\u00e4 ovat l\u00e4hdekartat?<\/h2>\n<p>Lyhyesti sanottuna l\u00e4hdekartat ovat tapa, jolla nykyaikaiset selaimet voivat ottaa pienennetyn koodin ja antaa meille mahdollisuuden lukea koodia sen pienent\u00e4m\u00e4tt\u00f6m\u00e4ss\u00e4 tilassa.<\/p>\n<p>Esimerkiksi projektissa, jonka parissa olen ty\u00f6skennellyt, minulla on yksinkertainen tiedosto, <strong>plugin-setting.scss<\/strong>, joka pienennet\u00e4\u00e4n muotoon <strong>plugin-setting.css<\/strong>. <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress lis\u00e4\u00e4<\/a> t\u00e4m\u00e4n tiedoston jonoon .<\/p>\n<p>Minulla on kuitenkin my\u00f6s rakennusty\u00f6kaluni, joka luo l\u00e4hdekartan. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 minulla on my\u00f6s tiedosto nimelt\u00e4 <strong>plugin-settings.css.map<\/strong>.<\/p>\n<p>Joten laajennuksen mukana toimitettu koodi <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-00-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/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>Mutta selaimessa tarkasteltuna virheenkorjausty\u00f6kalu <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-01-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/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>Ja l\u00e4hdekarttoja voidaan luoda sek\u00e4 tyylisivuille ett\u00e4 JavaScriptille.<\/p>\n<h2>Tarvitaanko niit\u00e4?<\/h2>\n<p>En voi antaa t\u00e4lle erityist\u00e4 kyll\u00e4 \u200b\u200btai ei; Olen kuitenkin huomannut, ett\u00e4 mit\u00e4 pidemp\u00e4\u00e4n ty\u00f6skentelen t\u00e4ll\u00e4 alalla, ja projekteissa, ne ovat mielest\u00e4ni paljon hy\u00f6dyllisempi\u00e4 kuin vaihtoehdot (joka on yleens\u00e4 jonottamaton tyyli virheenkorjaustarkoituksiin).<\/p>\n<p>Suosittelen luomaan ne ja sis\u00e4llytt\u00e4m\u00e4\u00e4n ne, koska se helpottaa virheenkorjausta. Mutta se, tarvitaanko niit\u00e4 vai ei, on sinun tai tiimisi p\u00e4\u00e4tett\u00e4viss\u00e4.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>l\u00e4hdekartat ovat tapa, jolla nykyaikaiset selaimet voivat ottaa pienennetyn koodin ja antaa meille mahdollisuuden lukea koodia sen pienent\u00e4m\u00e4tt\u00f6m\u00e4ss\u00e4 tilassa.<\/p>\n","protected":false},"author":1,"featured_media":234912,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[906,719,843],"tags":[1166],"class_list":["post-231344","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-5","category-kehittaejae","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/231344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=231344"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/231344\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/234912"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=231344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=231344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=231344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}