{"id":230707,"date":"2022-12-18T16:25:00","date_gmt":"2022-12-18T13:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230707"},"modified":"2022-12-07T10:00:58","modified_gmt":"2022-12-07T07:00:58","slug":"czym-sa-mapy-zrodlowe-i-czy-sa-potrzebne","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/czym-sa-mapy-zrodlowe-i-czy-sa-potrzebne\/","title":{"rendered":"Czym s\u0105 mapy \u017ar\u00f3d\u0142owe (i czy s\u0105 potrzebne)?"},"content":{"rendered":"\n<p>Je\u015bli pracujesz na interfejsie witryny w jakimkolwiek charakterze \u2013 czy to w przypadku wtyczki, motywu, a nawet czego\u015b poza WordPress \u2013 prawdopodobnie pracujesz z narz\u0119dziami do minifikacji.<\/p>\n<p>Korzy\u015bci s\u0105 oczywiste, prawda?<\/p>\n<ul>\n<li>zmniejsza \u0142adowno\u015b\u0107,<\/li>\n<li>pozwala nam skupi\u0107 si\u0119 na rozwoju w naszych lokalnych \u015brodowiskach<\/li>\n<\/ul>\n<p>Ale jedn\u0105 z funkcji zwi\u0105zanych z prac\u0105 z tymi technologiami jest mo\u017cliwo\u015b\u0107 generowania map \u017ar\u00f3d\u0142owych.<\/p>\n<p>A to rodzi pytanie (a mo\u017ce dwa): Czym s\u0105 mapy \u017ar\u00f3d\u0142owe? A czy s\u0105 w og\u00f3le potrzebne?<\/p>\n<p>Mo\u017cesz twierdzi\u0107, \u017ce jest ju\u017c p\u00f3\u017ano, aby o tym m\u00f3wi\u0107, ale zawsze s\u0105 ludzie, kt\u00f3rzy wchodz\u0105 do bran\u017cy, kt\u00f3rzy mog\u0105 nie zna\u0107 tego materia\u0142u.<\/p>\n<p>Dlaczego wi\u0119c tego nie przykry\u0107?<\/p>\n<h2>Co to s\u0105 mapy \u017ar\u00f3d\u0142owe?<\/h2>\n<p>Kr\u00f3tko m\u00f3wi\u0105c, mapy \u017ar\u00f3d\u0142owe s\u0105 sposobem, w jaki nowoczesne przegl\u0105darki mog\u0105 wzi\u0105\u0107 zminifikowany kod i umo\u017cliwi\u0107 nam odczytanie kodu w jego niezminifikowanym stanie.<\/p>\n<p>Na przyk\u0142ad w projekcie, nad kt\u00f3rym pracowa\u0142em, mam prosty plik <strong>plugin-setting.scss<\/strong>, kt\u00f3ry zostaje skr\u00f3cony do <strong>plugin-setting.css<\/strong>. Ten plik jest <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nast\u0119pnie umieszczany w kolejce przez WordPress<\/a>.<\/p>\n<p>Mam jednak r\u00f3wnie\u017c swoje narz\u0119dzie do budowania, kt\u00f3re generuje map\u0119 \u017ar\u00f3d\u0142ow\u0105. Oznacza to, \u017ce mam te\u017c plik o nazwie <strong>plugin-settings.css.map<\/strong>.<\/p>\n<p>Tak wi\u0119c kod dostarczany z wtyczk\u0105 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-00-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wygl\u0105da tak:<\/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>Ale patrz\u0105c w narz\u0119dziu do debugowania przegl\u0105darki <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-01-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wygl\u0105da to tak:<\/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>Mapy \u017ar\u00f3d\u0142owe mo\u017cna generowa\u0107 zar\u00f3wno dla arkuszy styl\u00f3w, jak i JavaScript.<\/p>\n<h2>Czy s\u0105 potrzebne?<\/h2>\n<p>Nie mog\u0119 da\u0107 temu konkretnemu \u201etak&quot; lub \u201enie&#8221;; jednak odkry\u0142em, \u017ce im d\u0142u\u017cej pracuj\u0119 w tej bran\u017cy, a w projektach s\u0105 one o wiele bardziej pomocne ni\u017c alternatywa (kt\u00f3ra zwykle jest kolejkowaniem niezminimalizowanego stylu do cel\u00f3w debugowania).<\/p>\n<p>Zalecam ich wygenerowanie i uwzgl\u0119dnienie, poniewa\u017c u\u0142atwia to debugowanie. Ale to, czy s\u0105 potrzebne, zale\u017cy od Ciebie lub Twojego zespo\u0142u.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mapy \u017ar\u00f3d\u0142owe to spos\u00f3b, w jaki nowoczesne przegl\u0105darki mog\u0105 wzi\u0105\u0107 zminifikowany kod i umo\u017cliwi\u0107 nam odczytanie kodu w jego niezminifikowanym stanie.<\/p>\n","protected":false},"author":1,"featured_media":234916,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[908,721,845],"tags":[1169],"class_list":["post-230707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-7","category-deweloper","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/230707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=230707"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/230707\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/234916"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=230707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=230707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=230707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}