Fixes to /tools and /tools/chrome-devtools + three new tips

admin/updates/lib/functions.php

@@ -88,7 +88,7 @@ function buildFile() {
 		$content['source_url'] = $_POST['source_url'];
 	}
 
-	if($_POST['tb1_heading']) {
+	if(isset($_POST['tb1_heading'])) {
 		$content['teaserblocks'] = array(
 			array(
 				'heading' => $_POST['tb1_heading'],

src/_betterbook-devtools.yaml

@@ -1,6 +1,6 @@
 toc:
 - title: "<strong>DevTools</strong>"
-  path: /chrome-devtools/
+  path: /web/tools/chrome-devtools/
   home: true
 - title: "Documentation"
   path: "#docs"

src/_includes/head.liquid

@@ -14,7 +14,7 @@
 	{% when 'spotlight' %}
 		{{ page.title }} — Google Web Showcase
 	{% when 'tools' %}
-		{{ page.title }} — Google Web Tools
+		{{ page.title }}
 	{% else %}
 		{{ page.title }} — Web Fundamentals
 	{% endcase %}

src/_langs/en/tools/chrome-devtools/index.html

@@ -1,11 +1,13 @@
 ---
 rss: false
 layout: devtools
-description: "The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome."
+description: "The Chrome DevTools are Chrome's built-in authoring and debugging tool."
 class: starter-kit
 title: Chrome DevTools
 id: chrome-devtools
 collection: tools
+feedName: Google Web Developers
+feedPath: feed.xml
 
 panels:
   - title: Elements

src/_langs/en/tools/index.html

@@ -6,8 +6,8 @@
 id: tools
 collection: web
 priority: 0
-feedName: Google Web Tools
-feedPath: tools/feed.xml
+feedName: Google Web Developers
+feedPath: feed.xml
 ---
 
 <meta itemprop="url" content="https://developers.google.com/web/tools"/>
@@ -16,7 +16,7 @@
   <div class="container">
     <p class="headliner">Get productive.</p>
     <div class="desc">
-      Discover our <h1>tools</h1> and kickstart your development.
+      Discover our&nbsp;<h1>tools</h1>&nbsp;and kickstart your development.
       <div>
         <a class="toolbutton" href="/web/updates/tools">WHAT'S NEW</a>        
       </div>

src/_langs/en/updates/2015-08-10-5-tricks-to-use-in-the-console-panel.markdown

@@ -0,0 +1,66 @@
+---
+rss: false
+layout: update
+published: true
+title: Five tricks to use in the Console Panel
+date: 2015-08-10
+article:
+  written_on: 2015-08-10
+  updated_on: 2015-08-10
+authors:
+- umarhansa
+collection: updates
+type: tip
+category: tools
+product: chrome-devtools
+featured-image: /web/updates/images/2015-08-10-5-tricks-to-use-in-the-console-panel/five-console-tricks.gif
+source_name: DevTips
+source_url: https://umaar.com/dev-tips/29-five-console-tricks/
+teaserblocks:
+- heading: ""
+  description: ""
+  image: ""
+- heading: ""
+  description: ""
+  image: ""
+- heading: ""
+  description: ""
+  image: ""
+permalink: /updates/2015/08/10/5-tricks-to-use-in-the-console-panel.html
+---
+<img src="/web/updates/images/2015-08-10-5-tricks-to-use-in-the-console-panel/five-console-tricks.gif" alt="Five tricks to use in the Console Panel">
+
+#### Use the inspect() command to jump straight to a passed-in DOM node
+
+{% highlight javascript %}
+inspect($('p'))
+{% endhighlight %}
+
+#### Use the copy() command to copy text to your clipboard
+
+{% highlight javascript %}
+copy(Object.keys(window))
+// stores ["top", "window", "location", "external"... and so on
+{% endhighlight %}
+
+#### Style your console output
+
+{% highlight javascript %}
+console.log('%cHello world', 'font-size:40px;color:#fff;text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);');
+{% endhighlight %}
+
+#### Get the values of an object
+
+{% highlight javascript %}
+values({
+    one: 1,
+    two: 2,
+    three: 3
+})
+
+// logs [1, 2, 3]
+{% endhighlight %}
+
+#### Clear the console
+
+<kbd class="kbd">Cmd + K</kbd> (Ctrl + L on Windows)

src/_langs/en/updates/2015-08-10-easily-duplicate-dom-nodes.markdown

@@ -0,0 +1,42 @@
+---
+rss: false
+layout: update
+published: true
+title: Easily duplicate DOM nodes
+date: 2015-08-10
+article:
+  written_on: 2015-08-10
+  updated_on: 2015-08-10
+authors:
+- umarhansa
+collection: updates
+type: tip
+category: tools
+product: chrome-devtools
+featured-image: /web/updates/images/2015-08-10-duplicate-dom-nodes/gplus-8f4a2ba4.png
+source_name: DevTips
+source_url: https://umaar.com/dev-tips/58-duplicate-dom/
+teaserblocks:
+- heading: ""
+  description: ""
+  image: ""
+- heading: ""
+  description: ""
+  image: ""
+- heading: ""
+  description: ""
+  image: ""
+permalink: /updates/2015/08/10/easily-duplicate-dom-nodes.html
+---
+<img src="/web/updates/images/2015-08-10-duplicate-dom-nodes/duplicate-dom.gif" alt="Duplicate DOM nodes">
+
+<em>These are essentially cut/copy and paste operations.</em>
+
+You can easily change the DOM without having to edit the HTML as a giant string.
+
+1. Right click on a node and select <em>Copy</em>.
+2. You can paste in your code editor, or for prototyping, you can paste the DOM node elsewhere in the DOM tree. The pasted node is inserted as a child of the currently selected node. In the video, I use the left arrow key to jump to the immediate parent opening tag and paste there (which is what I do in most cases).
+
+You can also Cut (right click &gt; Cut, Cmd + x/Ctrl + x) a DOM node and paste - which has the effect of moving the node.
+
+<em>Experiment:</em> Try adding more links in the header/footer of a site using this copy and paste technique and figure out at which point the layout needs improving.

src/_langs/en/updates/2015-08-10-edit-html-in-the-console-panel.markdown

@@ -0,0 +1,40 @@
+---
+rss: false
+layout: update
+published: true
+title: Edit HTML in the Console Panel
+date: 2015-08-10
+article:
+  written_on: 2015-08-10
+  updated_on: 2015-08-10
+authors:
+- umarhansa
+collection: updates
+type: tip
+category: tools
+product: chrome-devtools
+featured-image: /web/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/gplus-8f4a2ba4.png
+source_name: DevTips
+source_url: https://umaar.com/dev-tips/60-console-edit-html/
+teaserblocks:
+- heading: ""
+  description: ""
+  image: ""
+- heading: ""
+  description: ""
+  image: ""
+- heading: ""
+  description: ""
+  image: ""
+permalink: /updates/2015/08/10/edit-html-in-the-console-panel.html
+---
+<img src="/web/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/console-edit-html.gif" alt="Edit HTML in the Console Panel of DevTools">
+
+The DOM node context menu, which you may recognize from the elements panel, is also present in the console panel.
+
+<ol>
+<li>Log a DOM node to the console.</li>
+<li>Right click on it.</li>
+<li>Select Edit as HTML or Edit Text.</li>
+<li>Notice the DOM is updated on the page and also in the Elements Panel.</li>
+</ol>