{"id":78,"date":"2015-06-01T13:56:55","date_gmt":"2015-06-01T03:56:55","guid":{"rendered":"https:\/\/content.developerjack.com\/?p=78"},"modified":"2018-03-29T18:55:11","modified_gmt":"2018-03-29T07:55:11","slug":"phpstorm-zen-coding","status":"publish","type":"post","link":"https:\/\/developerjack.com\/blog\/2015\/phpstorm-zen-coding\/","title":{"rendered":"Zen Coding in PhpStorm"},"content":{"rendered":"\n<p><a href=\"http:\/\/blog.jetbrains.com\/idea\/2010\/03\/zen-coding-support-in-intellij-idea\/\">Zen Coding<\/a>\u00a0in PHPStorm is AWESOME! I was first introduced to it by\u00a0<a href=\"https:\/\/www.twitter.com\/zak\/\">Zak Henry<\/a>\u00a0after my\u00a0<a href=\"http:\/\/www.meetup.com\/SydPHP\/events\/221495826\/\">Building static sites with Sculpin talk at SydPHP<\/a>\u00a0back in May. Over the last month it\u2019s been invaluable!<\/p>\n\n\n\n<p>Zen mode is ultimately HTML completion from CSS selectors. Take this snippet for example<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p&gt;ul&gt;li.menu-item&gt;span    [TAB]\n<\/code><\/pre>\n\n\n\n<p>Typing the above line and pressing [TAB] will auto-complete into the following HTML code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;\n    &lt;ul&gt;\n        &lt;li class=&quot;menu-item&quot;&gt;&lt;span&gt;&lt;\/span&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<p>How is this useful you might add? Well I\u2019ve gone from 23 characters to 76 characters WITH formatting! That\u2019s just under 3x the speed in building HTML templates!<\/p>\n\n\n\n<p><strong>UPDATE<\/strong><\/p>\n\n\n\n<p>And now thanks to\u00a0<a href=\"https:\/\/twitter.com\/zak\/status\/616385410772504576\">Zak\u2019s helpful followup tweet<\/a>, the following works too!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div#page&gt;div.logo+ul#navigation&gt;li*5&gt;a     [TAB]\n<\/code><\/pre>\n\n\n\n<p>Any other helpful tweaks? Tweet them!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zen Coding\u00a0in PHPStorm is AWESOME! I was first introduced to it by\u00a0Zak Henry\u00a0after my\u00a0Building static sites with Sculpin talk at SydPHP\u00a0back in May. Over the last month it\u2019s been invaluable! Zen mode is ultimately HTML completion from CSS selectors. Take this snippet for example Typing the above line and pressing [TAB] will auto-complete into the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[11,15],"class_list":["post-78","post","type-post","status-publish","format-standard","hentry","category-blog","tag-php","tag-tips"],"_links":{"self":[{"href":"https:\/\/developerjack.com\/wp-json\/wp\/v2\/posts\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developerjack.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developerjack.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developerjack.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/developerjack.com\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":0,"href":"https:\/\/developerjack.com\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"wp:attachment":[{"href":"https:\/\/developerjack.com\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developerjack.com\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developerjack.com\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}