update from upstream

2018.md

@@ -11,16 +11,13 @@
 * Universal/isomorphic JavaScript solutions continue to evolve e.g. [next.js](https://github.com/zeit/next.js) and [Sapper](https://sapper.svelte.technology/).
 * Web components still lurk and wait for significant traction from developers.
 * I believe the end is in sight for [CSS pre-processors](https://css-tricks.com/future-front-end-web-development/#article-header-id-7) as [PostCSS](https://github.com/postcss), [CSSnext](http://cssnext.io/), and CSS in JS take over.
-* Older server centric [application patterns](https://unpoly.com) show [up again](https://github.com/turbolinks/turbolinks) but [with](https://goiabada.blog/can-you-build-a-single-page-application-without-a-front-end-framework-6799cee03750) a [new](http://triskweline.de/unpoly-rugb/#/41) [spin](https://github.com/stimulusjs/stimulus). The pendulum could [start](http://blog.bloomca.me/2018/02/04/spa-is-not-silver-bullet.html) to swinging [away from strick SPA applications](https://m.signalvnoise.com/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have-f04307009130). People will begin to [pull back on the complexity of single page applications](https://m.signalvnoise.com/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have-f04307009130) and return to things like [pjax](https://github.com/defunkt/jquery-pjax) \(A mix of SPA and Server-side Rendering. See [https://stimulusjs.org](https://stimulusjs.org/handbook/introduction)\).
-* [Progressive Web Applications](https://developers.google.com/web/progressive-web-apps/) hopefully will catch fire. If they don't, I fear they never will. At least not in there current form.
+* Older server centric [application patterns](https://unpoly.com) show [up again](https://github.com/turbolinks/turbolinks) but [with](https://goiabada.blog/can-you-build-a-single-page-application-without-a-front-end-framework-6799cee03750) a [new](http://triskweline.de/unpoly-rugb/#/41) [spin](https://github.com/stimulusjs/stimulus). The pendulum could [start](http://blog.bloomca.me/2018/02/04/spa-is-not-silver-bullet.html) to swinging [away from strict SPA applications](https://m.signalvnoise.com/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have-f04307009130). People will begin to [pull back on the complexity of single page applications](https://m.signalvnoise.com/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have-f04307009130) and return to things like [pjax](https://github.com/defunkt/jquery-pjax) \(A mix of SPA and Server-side Rendering. See [https://stimulusjs.org](https://stimulusjs.org/handbook/introduction)\).
+* [Progressive Web Applications](https://developers.google.com/web/progressive-web-apps/) hopefully will catch fire. If they don't, I fear they never will. At least not in their current form.
 * ["Chatbots created on the basis of artificial intelligence and neural networks will continue to evolve helping to increase communication online. I wonder what it will lead to, but this is unconditional web development trends 2018"](http://merehead.com/blog/web-development-trends-2018/). Nods.
 * Vue.js [usage will likely overtake all Angular usage](http://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue).
-* AR/AV, [AI](https://www.independent.co.uk/life-style/gadgets-and-tech/news/facebook-artificial-intelligence-ai-chatbot-new-language-research-openai-google-a7869706.html), and chat bots will continue to evolve and find there sweet spot.
+* AR/AV, [AI](https://www.independent.co.uk/life-style/gadgets-and-tech/news/facebook-artificial-intelligence-ai-chatbot-new-language-research-openai-google-a7869706.html), and chat bots will continue to evolve and find their sweet spot.
 * JavaScript [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) and [Generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator) will likely go unnoticed by most front-end developers.
 * More developers will divorce themselves from plain JavaScript and try [to](http://elm-lang.org/) [marry](https://www.typescriptlang.org/index.html) [another](https://reasonml.github.io/). But, just like in marital divorce one always takes most of the same problems with them to the greener grass and little actually changes. Preferences and values just get re-prioritized and [history will repeat itself](http://coffeescript.org/).
 * Webpack 4 will happen, and be better, due to competition!
 * Continued [exploration](https://css-in-js-playground.com/?theme=light) for the ideal CSS solution for a tree of UI components will not cease.
 * State management gets a [reset](https://www.youtube.com/watch?v=kp-NOggyz54) and [people start to simplify](https://github.com/thejameskyle/unstated). Hopefully, this will be the year for solutions like [mobx](https://github.com/mobxjs/mobx) to shine.
-
-[![Frontend Masters](https://frontendmasters.com/books/front-end-handbook/2018/images/FEM-2018-banner.png)](https://frontendmasters.com/)
-

README.md

@@ -1,16 +1,20 @@
-# Front-End Developer Handbook 2018
+# AVAILABLE NOW: [Front-End Developer Handbook 2019](https://frontendmasters.com/guides/front-end-handbook/2019/)
+
+***
+
+## Front-End Developer Handbook 2018
 
 ### Written by [Cody Lindley](http://codylindley.com/)
 
 *Sponsored by [Frontend Masters](https://frontendmasters.com/), advancing your skills with in-depth, modern front-end engineering courses*
 
-![Front End Handbook 2018 Cover](https://frontendmasters.com/books/front-end-handbook/2018/cover.jpg)
+[![Front End Developer Handbook 2018 Cover](https://frontendmasters.com/guides/front-end-handbook/2018/cover.jpg)](https://frontendmasters.com/guides/front-end-handbook/2018/)
 
 This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2018.
 
-It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTOs, instructors, and head hunters to gain insights into the practice of front-end development.
+It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTOs, instructors, and headhunters to gain insights into the practice of front-end development.
 
-The content of the handbook favors web technologies (HTML, CSS, DOM, and JavaScript) and those solutions that are directly built on top of these open technologies. The materials referenced and discussed in the book are either best in class or the current offering to a problem.
+The content of the handbook favors web technologies (HTML, CSS, DOM, and JavaScript) and those solutions that are directly built on top of these open technologies. The materials referenced and discussed in the book are either best in class or the current offering of a problem.
 
 The book should not be considered a comprehensive outline of all resources available to a front-end developer. The value of the book is tied up in a terse, focused, and timely curation of just enough categorical information so as not to overwhelm anyone on any one particular subject matter.
 
@@ -34,16 +38,8 @@ Part three briefly explains and identifies tools of the trade.
 
 **Read Online**:
 
-* [https://frontendmasters.com/books/front-end-handbook/2018/](https://frontendmasters.com/books/front-end-handbook/2018/)
-
-**Download a .pdf, .epub, or .mobi file from**:
-
-* [https://www.gitbook.com/book/frontendmasters/front-end-developer-handbook-2018/details](https://www.gitbook.com/book/frontendmasters/front-end-developer-handbook-2018/details)
-
-**Contribute content, suggestions, and fixes on github**:
-
-* [https://github.com/FrontendMasters/front-end-handbook-2018](https://github.com/FrontendMasters/front-end-handbook-2018)
-
+* [https://frontendmasters.com/guides/front-end-handbook/2018/](https://frontendmasters.com/guides/front-end-handbook/2018/) 
+* Translations: [Chinese](https://github.com/xitu/front-end-handbook-2018)
 
 ***
 

SUMMARY.md

@@ -1,8 +1,6 @@
 # Summary
 
 * [What Is a Front-End Developer?](what-is-a-FD.md)
-* [Recap of Front-end Dev in 2017](recap.md)
-* [In 2018 expect...](2018.md)
 * [Part I: The Front-End Practice](practice.md)
 	* [Front-End Jobs Titles](practice/types-of-front-end-dev.md)
     * [Common Web Tech Employed](practice/tech-employed-by-fd.md)
@@ -102,7 +100,6 @@
     * [JS Error Monitoring Tools](tools/error.md)
     * [Performance Tools](tools/perf.md)
     * [Tools for Finding Tools](tools/find-tools.md)
-* [Sponsored by Frontend Masters](frontendmasters.md)
-
-
-
+* [Recap of Front-end Dev in 2017](recap.md)
+* [In 2018 expect...](2018.md)
+* [Sponsored by Frontend Masters](frontendmasters.md)

_layouts/ebook/page.html

@@ -0,0 +1,36 @@
+{% extends "layout.html" %}
+
+{% block title %}{{ page.title }}{% endblock %}
+{% block description %}{{ page.description }}{% endblock %}
+
+{% block style %}
+    {### Include theme css before plugins css ###}
+    {% if not fileExists(config.styles.print) %}
+        {% if options.format %}
+        <link rel="stylesheet" href="{{ (options.format + ".css")|resolveAsset }}">
+        {% else %}
+        <link rel="stylesheet" href="{{ "ebook.css"|resolveAsset }}">
+        {% endif %}
+    {% endif %}
+
+    {{ super() }}
+
+    {### Custom stylesheets for the book ###}
+
+    {% for type, style in config.styles %}
+        {% if fileExists(style) and (type == "ebook" or type == "print" or type == options.format) %}
+        <link rel="stylesheet" href="{{ style|resolveFile }}">
+        {% endif %}
+    {% endfor %}
+{% endblock %}
+
+{% block body %}
+<div class="page">
+    {% block page %}
+        <h1 class="book-chapter book-chapter-{{ page.depth }}">{{ page.title }}</h1>
+        <div class="section">
+            {{ page.content|safe }}
+        </div>
+    {% endblock %}
+</div>
+{% endblock %}

_layouts/ebook/pdf_footer.html

@@ -0,0 +1,8 @@
+{% extends "./page.html" %}
+
+{% block body %}
+<div class="pdf-footer">
+    <span>{{ page.section }}</span>
+    <span class="footer-pages-count">{{ page.num }}</span>
+</div>
+{% endblock %}

_layouts/ebook/pdf_header.html

@@ -0,0 +1,7 @@
+{% extends "./page.html" %}
+
+{% block body %}
+<div class="pdf-header">
+    <span>{{ page.title }}</span>
+</div>
+{% endblock %}

_layouts/ebook/summary.html

@@ -0,0 +1,58 @@
+{% extends "./page.html" %}
+
+{% block title %}{{ "SUMMARY"|t }}{% endblock %}
+
+{% macro articles(_articles) %}
+    {% for article in _articles %}
+        <li>
+            <span class="inner">
+                {% if article.path or article.url %}
+                    {% if article.path %}
+                        <a href="{{ article.path|contentURL }}{{ article.anchor }}">{{ article.title }}</a>
+                    {% else %}
+                        <a target="_blank" href="{{ article.url }}">{{ article.title }}</a>
+                    {% endif %}
+                {% else %}
+                    <span>{{ article.title }}</span>
+                {% endif %}
+                {% if 1 %}
+                <span class="page">{{ article.level }}</span>
+                {% endif %}
+            </span>
+            {% if article.articles.length > 0 %}
+            <ol>
+                {{ articles(article.articles) }}
+            </ol>
+            {% endif %}
+        </li>
+    {% endfor %}
+{% endmacro %}
+
+{% block page %}
+<div class="section toc">
+    <h1>{{ "SUMMARY"|t }}</h1>
+    <ol>
+        {% for part in summary.parts %}
+            {% if part.title %}
+            <li class="part-title">
+                <h2>{{ part.title }}</h2>
+            </li>
+            {% endif %}
+            {{ articles(part.articles) }}
+
+            {% if not loop.last %}
+            <li class="divider"></li>
+            {% endif %}
+        {% endfor %}
+
+        {% if glossary.path %}
+        <li>
+            <span class="inner">
+                <a href="{{ ('/' + glossary.path)|contentURL }}">{{ "GLOSSARY"|t }}</a>
+            </span>
+        </li>
+        {% endif %}
+    </ol>
+</div>
+{% endblock %}
+

_layouts/website/page.html

@@ -0,0 +1,30 @@
+{% extends template.self %}
+
+{% block body %}
+  <div class="FmCta">
+    <a class="FmCtaLogo" href="https://frontendmasters.com/">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.7 145.8" class="logo"><path d="M182.6 20c1.7-1.8 4.2-2.7 7.7-2.7 2.5 0 5 .4 7.4 1.1 3.2 1 6.2 2.3 9 4a335.5 335.5 0 0 0-14.8 49.7 357 357 0 0 0-4.6 24c-1 6.3-1.6 12.8-1.7 19.3 0 2.2.3 4.5 1 6.6a8 8 0 0 0 2.7 4.2 16.1 16.1 0 0 1-7.1 5.2 23.5 23.5 0 0 1-8.7 1.7c-4 .1-7.7-1.2-10.6-3.8-3-2.5-4.4-6.8-4.4-13 0-3 .4-6 .8-9.1a492 492 0 0 1 10.8-47.4l-1.3.1c-.4.2-.7.5-1 .9l-40.6 62a40.8 40.8 0 0 1-13 2.5c-2.4 0-4.8-.5-7-1.5a9.1 9.1 0 0 1-4.3-5.4 273.5 273.5 0 0 0 1.8-21.5 949 949 0 0 0 1.4-29.6v-5.9c0-.6-.2-1.1-.4-1.6a1.3 1.3 0 0 0-1.1-.4c-9 16.2-16.7 29.8-23.3 40.8a307.2 307.2 0 0 1-17.8 27A69 69 0 0 1 50 141.2c-4.1 3-8.1 4.5-12 4.4-4.2.1-8.2-1.6-11-4.7-3-3.1-5-7.4-6-12.8.7.2 1.4.3 2.2.3 4.7 0 9.3-2 13.7-6 5.1-4.5 9.7-9.7 13.7-15.3 4.7-6.4 9.5-13.7 14.4-21.8C69.9 77.3 75 69 80.7 60.6c2-3.4 4.6-6.6 7.5-9.4 2.2-2 5-3.1 8-3 2 0 4 .3 5.9.8 1.1.1 2.1-.7 2.1-1.9-.7-9-3.4-15.8-8-20.6-4.7-4.7-11.3-7-19.8-7-6.9-.1-13.6 1.6-19.6 4.8-6.1 3.3-11.5 7.7-15.9 13a64 64 0 0 0-14.5 40.5c0 5.1 1.6 8.5 4.7 10a20.6 20.6 0 0 1-6.9 6 17.5 17.5 0 0 1-8.4 2.2c-4.2.1-8.2-1.4-11.2-4.3S0 84.2 0 77.9c0-7 1.1-13.8 3.4-20.4A79.4 79.4 0 0 1 26.6 23a96.9 96.9 0 0 1 36-20.3C69.2 1 75.7 0 82.5 0c16.2 0 28.5 5 36.6 15.1 8.2 10 12.3 25.8 12.3 47.1a308.6 308.6 0 0 1-1 26.3c.5 0 1 0 1.4-.2.4-.2.7-.5.8-.8l15-21.9h-.1c5.1-7.2 23.7-34.6 28.8-41.9.2-.4 1.6-2.8 3.2-3.2h.4l1.2-.1h.2a5.8 5.8 0 0 0 1.4-.3z"></path></svg>
+    </a>
+    <div class="FmCtaText">
+      <a href="https://frontendmasters.com/trial/">Get free, lifetime access to 5 popular courses</a>
+    </div>
+    <button data-cta-close class="FmCtaClose">&times;</button>
+  </div>
+
+  {{ super() }}
+
+  <script>
+    var $ctaCloseButton = document.querySelector("[data-cta-close]");
+    if ($ctaCloseButton) {
+      if (sessionStorage.fmCta2018Closed) {
+        $ctaCloseButton.parentElement.remove();
+      } else {
+        $ctaCloseButton.addEventListener("click", function() {
+          sessionStorage.fmCta2018Closed = "yes";
+          $ctaCloseButton.parentElement.remove();
+        })
+      }
+    }
+  </script>
+  <script src="scripts/pathway.js"></script>
+{% endblock %}

book.json

@@ -1,10 +1,13 @@
 {
+    "title": "Front-End Developer Handbook 2018",
+    "description": "Front-End Developer Handbook is a useful resource for understanding the entire scope of the front-end development practice.",
     "structure": {
         "readme": "myIntro.md"
     },
     "plugins": [
         "scripts",
-        "canonical-link@git+https://github.com/FrontendMasters/gitbook-plugin-canonical-link"
+        "canonical-link",
+        "open-graph"
     ],
     "pluginsConfig": {
         "scripts": {
@@ -13,7 +16,12 @@
             ]
         },
         "canonical-link": {
-            "baseURL": "https://frontendmasters.com/books/front-end-handbook/2018"
+            "baseURL": "https://frontendmasters.com/guides/front-end-handbook/2018"
+        },
+        "open-graph": {
+            "baseURL": "https://frontendmasters.com/guides/front-end-handbook/2018",
+            "defaultDescription": "Front-end Developer Handbook is a useful resource for understanding the entire scope of the front-end development practice.",
+            "defaultImage": "images/open-graph-image.jpg"
         }
     }
 }

buildspec.yml

@@ -1,6 +1,6 @@
 version: 0.1
 
-meta : |
+meta: |
   AWS CodeBuild buildspec.yml
   The dependencies are downloaded and the binary built outside of the GOPATH.
   This requies special consideration is necessary. GOROOT is not set by default.
@@ -17,14 +17,13 @@ phases:
   pre_build:
     commands:
       - apt-get update -y
-      - curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
-      - apt-get install -y nodejs
-      - npm install -g gitbook-cli --save
+      - curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
+      - apt-get install -y --force-yes nodejs
+      - npm install
   build:
     commands:
       - echo Build started on `date`
-      - gitbook install
-      - gitbook build
+      - npm run build
 
   post_build:
     commands:

learning.md

@@ -1,3 +1,6 @@
+---
+description: Self-directed and directed resources for learning to become a front-end developer.
+---
 # Part II: Learning
 
 Part two identifies self-directed (i.e., at your own pace when you want) and directed (i.e., formal class room specific times and dates) resources for learning to become a front-end developer.

learning/accessibility.md

@@ -20,7 +20,7 @@
 * [Universal Design for Web Applications: Web Applications That Reach Everyone](http://www.amazon.com/Universal-Design-Web-Applications-Everyone/dp/0596518730/ref=sr_1_1) [read][$]
 * [Web Accessibility: Getting Started](http://www.pluralsight.com/courses/web-accessibility-getting-started) [watch][$]
 * [A Web for Everyone](http://rosenfeldmedia.com/books/a-web-for-everyone/) [read][$]
-* [Web Accessibility](https://frontendmasters.com/workshops/accessibility/) [watch][$]
+* [Web Accessibility](https://frontendmasters.com/courses/web-accessibility/) [watch][$]
 * [A11ycasts](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g) [watch]
 * [Accessibility by Google](https://www.udacity.com/course/web-accessibility--ud891) - Udacity course [watch] 
 

learning/browser-dev-tools.md

@@ -14,7 +14,7 @@ I'd suggest learning and using the [Chrome web developer tools](https://develope
 
 ##### Learn Chrome Web Developer Tools:
 
-* [Chrome Developer Tools](https://code.tutsplus.com/courses/chrome-developer-tools) [watch][$]
+* [Modern DevTools](https://moderndevtools.com/) [watch][$ + free]
 * [Explore and Master Chrome DevTools](http://discover-devtools.codeschool.com/) [watch]
 * [Mastering Chrome Developer Tools](https://frontendmasters.com/courses/chrome-dev-tools/) [watch][$]
 * [Using The Chrome Developer Tools](http://www.pluralsight.com/courses/chrome-developer-tools) [watch][$]

learning/cs.md

@@ -1,6 +1,7 @@
 # Learn Computer Science via JS 
 
-* [Four Semesters of Computer Science in Six Hours](https://frontendmasters.com/workshops/computer-science/) [video][$]
+* [Four Semesters of Computer Science in Six Hours](https://frontendmasters.com/courses/computer-science/) [video][$]
+* [Four Semesters of Computer Science in Six Hours: Part 2](https://frontendmasters.com/courses/computer-science-2/) [video][$]
 * [Computer Science in JavaScript](https://github.com/davidshariff/computer-science) [read]
 * [Collection of classic computer science paradigms, algorithms, and approaches written in JavaScript](https://github.com/nzakas/computer-science-in-javascript) [read]
 * [Algorithms and Data Structures in JavaScript](https://frontendmasters.com/workshops/algorithms-data-structures-js/) [watch][$]

learning/data-api.md

@@ -1,6 +1,6 @@
 # Learn Data (i.e. JSON) API Design
 
-* [API Design in Node.js (using Express & Mongo)](https://frontendmasters.com/courses/api-design-nodejs/) [watch][$]
+* [REST & GraphQL API Design in Node.js, v2 (using Express & MongoDB)](https://frontendmasters.com/courses/api-node-rest-graphql/) [watch][$]
 * [Build APIs You Won't Hate](http://apisyouwonthate.com/) [$][read]
 * [JSON API ](http://jsonapi.org/) [read]
 * [RESTful Web API Design with Node.JS - Second Edition](https://www.amazon.com/RESTful-Web-API-Design-Node-JS/dp/1786469138?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=65822660966bb9c5339b4b411ef25d73&camp=1789&creative=9325) [$][read]

learning/dns.md

@@ -13,3 +13,4 @@
 * [How DNS Works](https://howdns.works/ep1/) [read]
 * [The Internet: IP Addresses and DNS](https://www.youtube.com/watch?v=5o8CwafCxnU&index=3&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7) [watch]
 * [What is a domain name?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name) [read]
+* [Full Stack for Front End Engineers](https://frontendmasters.com/courses/full-stack/) [watch][$]