Improve help page

assets/javascripts/news.json

@@ -88,7 +88,7 @@
     "New documentations: <a href=\"/q/\">Q</a> and <a href=\"/opentsdb/\">OpenTSDB</a>"
   ], [
     "2015-07-26",
-    "Added search abbreviations (e.g. <code class=\"_label\">$</code> is an alias for <code class=\"_label\">jQuery</code>).\n<a href=\"/help#abbreviations\">Click here</a> to see the full list. Feel free to suggest more on <a href=\"https://github.com/Thibaut/devdocs/issues/new\" target=\"_blank\" rel=\"noopener\">GitHub</a>.",
+    "Added search aliases (e.g. <code class=\"_label\">$</code> is an alias for <code class=\"_label\">jQuery</code>).\n<a href=\"/help#aliases\">Click here</a> to see the full list. Feel free to suggest more on <a href=\"https://github.com/Thibaut/devdocs/issues/new\" target=\"_blank\" rel=\"noopener\">GitHub</a>.",
     "Added <code class=\"_label\">shift + &darr;/&uarr;</code> shortcut for scrolling (same as <code class=\"_label\">alt + &darr;/&uarr;</code>)."
   ], [
     "2015-07-05",

assets/javascripts/templates/pages/help_tmpl.coffee

@@ -7,7 +7,7 @@ app.templates.helpPage = """
     <ul class="_toc-list">
       <li><a href="#search">Search</a>
       <li><a href="#shortcuts">Keyboard Shortcuts</a>
-      <li><a href="#abbreviations">Abbreviations</a>
+      <li><a href="#aliases">Search Aliases</a>
     </ul>
   </nav>
 
@@ -15,14 +15,13 @@ app.templates.helpPage = """
 
   <h2 class="_block-heading" id="search">Search</h2>
   <p>
-    The search is case-insensitive and supports fuzzy matching (for queries longer than two characters).
+    The search is case-insensitive. It supports fuzzy matching
-    For example, searching <code class="_label">bgcp</code> brings up <code class="_label">background-clip</code>.<br>
+    (e.g. <code class="_label">bgcp</code> matches <code class="_label">background-clip</code>)
-    Abbreviations are also supported (<a href="#abbreviations">full list</a> below).
+    and aliases (<a href="#aliases">full list</a> below).
-    For example, <code class="_label">$</code> is an alias for <code class="_label">jQuery</code>.
   <dl>
     <dt id="doc_search">Searching a single documentation
     <dd>
-      You can scope the search to a single documentation by typing its name (or an abbreviation),
+      You can scope the search to a single documentation by typing its name (or an abbreviation)
       and pressing <code class="_label">Tab</code> (<code class="_label">Space</code> on mobile devices).
       For example, to search the JavaScript documentation, enter <code class="_label">javascript</code>
       or <code class="_label">js</code>, then <code class="_label">Tab</code>.<br>
@@ -30,16 +29,16 @@ app.templates.helpPage = """
     <dt id="url_search">Prefilling the search field
     <dd>
       The search field can be prefilled from the URL by visiting <a href="/#q=keyword" target="_top">devdocs.io/#q=keyword</a>.
-      Characters after <code class="_label">#q=</code> will be used as search string.<br>
+      Characters after <code class="_label">#q=</code> will be used as search query.<br>
       To search a single documentation, add its name and a space before the keyword:
       <a href="/#q=js%20date" target="_top">devdocs.io/#q=js date</a>.
     <dt id="browser_search">Searching using the address bar
     <dd>
-      DevDocs supports OpenSearch, meaning it can easily be installed as a search engine on most web browsers.
+      DevDocs supports OpenSearch. It can easily be installed as a search engine on most web browsers:
       <ul>
         <li>On Chrome, the setup is done automatically. Simply press <code class="_label">Tab</code> when devdocs.io is autocompleted
             in the omnibox (to set a custom keyword, click <em>Manage search engines\u2026</em> in Chrome's settings).
-        <li>On Firefox, open the search engine list (icon in the search bar) and select <em>Add "DevDocs Search"</em>.
+        <li>On Firefox, open the search engine list (icon in the search bar) and click <em>Add "DevDocs Search"</em>.
             DevDocs is now available in the search bar. You can also search from the location bar by following
             <a href="https://support.mozilla.org/en-US/kb/how-search-from-address-bar">these instructions</a>.
   </dl>
@@ -114,16 +113,16 @@ app.templates.helpPage = """
       <code class="_shortcut-code">alt + s</code>
     <dd class="_shortcuts-dd">Search on Stack Overflow
   </dl>
-  <p class="_note">
+  <p class="_note _note-green">
     <strong>Tip:</strong> If the cursor is no longer in the search field, press <code class="_label">/</code> or
     continue to type and it will refocus the search field and start showing new results.
 
-  <h2 class="_block-heading" id="abbreviations">Abbreviations</h2>
+  <h2 class="_block-heading" id="aliases">Search Aliases</h2>
-  <p>Feel free to suggest new abbreviations on <a href="https://github.com/Thibaut/devdocs/issues/new">GitHub</a>.
+  <table>
-  <table class="_abbreviations">
     <tr>
       <th>Word
       <th>Alias
-    #{("<tr><td>#{key}<td>#{value}" for key, value of app.models.Entry.ALIASES).join('')}
+    #{("<tr><td class=\"_code\">#{key}<td class=\"_code\">#{value}" for key, value of app.models.Entry.ALIASES).join('')}
   </table>
+  <p>Feel free to suggest new aliases on <a href="https://github.com/Thibaut/devdocs/issues/new">GitHub</a>.
 """

assets/stylesheets/components/_content.scss

@@ -357,12 +357,6 @@
   @extend %label;
 }
 
-//
-// Abbreviations
-//
-
-._abbreviations td { @extend %code; }
-
 //
 // Utilities
 //
@@ -370,6 +364,7 @@
 ._note { @extend %note; }
 ._note-green { @extend %note-green; }
 ._label { @extend %label; }
+._code { @extend %code; }
 ._highlight { background: $highlightBackground !important; }
 
 ._pre-clip {