updates

2018.md

@@ -7,6 +7,7 @@
 * Keep an eye on [turbo](https://medium.com/@ericsimons/introducing-turbo-5x-faster-than-yarn-npm-and-runs-natively-in-browser-cc2c39715403).
 * Expect CSS Flebbox, grid, ... Learn them.
 * [JavaScript usage will continue to grow](https://insights.stackoverflow.com/survey/2017#technology-programming-languages) with no [slowdown in sight](https://insights.stackoverflow.com/survey/2017#technology-most-popular-languages-by-occupation).
+* The next step for WebAssembly will be tooling. It's coming. 
 
 ***
 

SUMMARY.md

@@ -77,8 +77,7 @@
     * [App Frameworks (Desktop, Mobile etc.) Tools](tools/apps.md)
     * [State Management Tools](tools/state.md)
     * [Progressive Web App Tools](tools/pwa.md)
-    * [Scaffolding Tools](tools/scaffolding.md)
-    * [General FE Development Tools](tools/dev-tools.md)
+    * [GUI Development/Build Tools](tools/dev-tools.md)
     * [Templating/Data Binding Tools](tools/templates.md)
     * [UI Widget & Component Toolkits](tools/ui.md)
     * [Data Visualization (e.g., Charts) Tools](tools/charting.md)

learning/offline.md

@@ -9,6 +9,7 @@ Offline development (aka offline first) is an area of knowledge and discussion a
 * [Offline First](http://www.webdirections.org/offlineworkshop/ibooksDraft.pdf) [read]
 * [offlinefirst.org](http://offlinefirst.org) [read]
 * [The Offline Cookbook](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/) [read]
+* [Offline Quickstart](https://developers.google.com/web/ilt/pwa/offline-quickstart)[read]
 
 
 

learning/react.md

@@ -25,7 +25,7 @@
 
 ###### NOTES:
 
-Once you have a good handle on React you might consider looking at [Preact](https://preactjs.com/) or [Inferno](https://infernojs.org/), or both. When you have Redux mastered, take a look [MobX](https://mobx.js.org/) or consider creating your own small custom Redux like implementation from scratch.
+Once you have a good handle on React move on to learning a more robust state management solution like [MobX](https://mobx.js.org/). If you are an experienced developer with Functional Programming knowledge look at [Redux](https://redux.js.org/). If you need help understanding the role of state management beyond React's `setState` watch, "[Advanced State Management in React (feat. Redux and MobX)](https://frontendmasters.com/courses/react-state/)".
 
 
 

recap.md

@@ -13,7 +13,7 @@
 * The [great](https://medium.com/@jerrylowm/the-death-of-front-end-developers-803a95e0f411) divide between a front-end HTML & CSS developer v.s. [front-end application developer is realized/verbalized](https://medium.com/@mandy.michael/is-there-any-value-in-people-who-cannot-write-javascript-d0a66b16de06).
 * This year seemed fuller than most of solutions trying to contend with the mainstream javascript app tools (i.e. [React, Angular, and Vue etc...](https://stateofjs.com/2017/front-end/results)) Let me list them for you. [Moon](http://moonjs.ga/docs/overview.html), [Marko](https://markojs.com/), [Hyperapp](https://github.com/hyperapp/hyperapp), [Quasar Framework](http://quasar-framework.org/), [POI](https://poi.js.org), [frint](https://frint.js.org/), [BunnyJS](https://bunnyjs.com/), [jsblocks](http://jsblocks.com/), [Sapper](https://sapper.svelte.technology/), [Stimulus](https://github.com/stimulusjs/stimulus), [Choo](https://github.com/choojs/choo), 
 * This was the year that jsbin and jsfiddle evolved to things like [StackBliz](https://stackblitz.com/) and [codeSandbox](https://codesandbox.io/). Making it dead simple to share a working React app.
-* React continues to be flattered by things like [preact](https://preactjs.com/), [inferno](https://infernojs.org/), [nerv](https://github.com/NervJS/nerv) and [rax](https://github.com/alibaba/rax).
+* React continues to be flattered by things like [preact](https://preactjs.com/), [inferno](https://infernojs.org/), [nerv](https://github.com/NervJS/nerv), [dva](https://github.com/dvajs/dva), and [rax](https://github.com/alibaba/rax).
 * Cheatsheets got organized with [devhints.io](https://devhints.io/).
 * We figured out that the correct pattern for an app boilerplate/cli tool is something very opinionated like [React Create App](https://github.com/facebookincubator/create-react-app) with the ability to [escape](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject) from it when needed.
 * Most developers have found that the combination of a really good code editor and eslint and [prettier](https://github.com/prettier/prettier) plugins make writing code faster and easier.
@@ -23,9 +23,10 @@
 * CSS [revolutions/revolts](http://ryanogles.by/css/javascript/2017/05/25/the-state-of-css.html) are under way.
 * JavaScript explorer tools have arrived, [JavaScript Array Explorer](https://sdras.github.io/array-explorer/)
 and [JavaScript Object Explorer](https://sdras.github.io/object-explorer/). This is a handy interface pattern for learning about JavaScript data types (e.g. Objects and Arrays) and their methods. 
-* The [Chrome web browser dominates the market](http://gs.statcounter.com/browser-market-share) and people begin to fear [repeating the past](https://www.theverge.com/2018/1/4/16805216/google-chrome-only-sites-internet-explorer-6-web-standards).
+* The [Chrome web browser dominates the market](http://gs.statcounter.com/browser-market-share) and people begin to fear the past might be [repeating itself](https://www.theverge.com/2018/1/4/16805216/google-chrome-only-sites-internet-explorer-6-web-standards).
 * [Brave](https://brave.com/) becomes the most pleasant and safest way to browser the internet.
-* [PhantomJS is no longer maintained](https://www.infoq.com/news/2017/04/Phantomjs-future-uncertain), [Headless Chrome](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md) steps in.
+* [PhantomJS is no longer maintained](https://www.infoq.com/news/2017/04/Phantomjs-future-uncertain), [Headless Chrome](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md) and [Puppeteer](https://github.com/GoogleChrome/puppeteer) step in.
+* [Prettier](https://prettier.io/) comes from left field and becomes a stable for development.
 
 ***
 
@@ -70,3 +71,4 @@ and [JavaScript Object Explorer](https://sdras.github.io/object-explorer/). This
 * [Firebug officially dead](https://github.com/firebug/firebug).
 * CSS [20 years young](https://www.w3.org/Style/CSS20/) in 2016.
 * [Immutability](https://facebook.github.io/immutable-js/) concepts run rapid.
+

tools/animation.md

@@ -1,5 +1,7 @@
 # Animation Tools
 
+##### CSS and JavaScript Utilities:
+
 * [Animate Plus](https://github.com/bendc/animateplus)
 * [Animate](https://github.com/daneden/animate.css)
 * [Anime.js](http://animejs.com/)

tools/apps.md

@@ -23,24 +23,16 @@ These solutions typically use [Cordova](https://cordova.apache.org/), [crosswalk
 These solutions typically use [Cordova](https://cordova.apache.org/), [crosswalk](https://crosswalk-project.org/), or a custom WebView as a bridge to native APIs.
 
 * [Adobe PhoneGap](http://phonegap.com/) [$]
-* [AppBuilder](http://www.telerik.com/appbuilder) [$]
 * [cocoon.io](https://cocoon.io) [free to $]
 * [ionic hub](http://ionic.io/) [free to $]
 * [kony](http://www.kony.com/products/mobility-platform) [$]
 * [Monaca](https://monaca.io/) [$]
-* [Taco](http://taco.tools/)
 
 ##### Native Desktop WebView (i.e., Browser Engine Driven) App Frameworks:
 
 * [Electron](http://electron.atom.io/)
 * [NW.js](https://github.com/nwjs/nw.js)
 
-##### Any Platform App Frameworks:
-
-These solutions take your application and build it across several platforms and devices
-
-* [manifoldJS](http://manifoldjs.com/)
-
 ##### Native Mobile App Frameworks (Aka JavaScript Native Apps)
 
 These solutions use a JS engine at runtime to interpret JS and bridge that to native APIs. No browser engine or WebView is used. The UI is constructed from native UI components.
@@ -52,9 +44,10 @@ These solutions use a JS engine at runtime to interpret JS and bridge that to na
 * [trigger.io](https://trigger.io/how-it-works/) [$]
 * [weex](https://weex.apache.org/)
 
-##### References:
+##### References & demo apps:
 
 * [todomvc.com](http://todomvc.com/)
+* [RealWorld example apps](https://github.com/gothinkster/realworld) [code]
 * [Frontend Guidelines Questionnaire](https://github.com/bradfrost/frontend-guidelines-questionnaire)
 * [Frontend Guidelines](https://github.com/bendc/frontend-guidelines)
 
@@ -65,40 +58,14 @@ These solutions use a JS engine at runtime to interpret JS and bridge that to na
 
 ***
 
-###### NOTES:
-
-Keep an eye on [inferno](https://github.com/trueadm/inferno), [Svelte](https://svelte.technology/guide), and [NX](https://github.com/RisingStack/nx-framework) in 2017 for building component based UI applications.
-
-***
-
 ###### ADVICE:
 
-[^1] If you are new to front-end/JavaScript application development I'd start with [Riot](http://riotjs.com/) or [Vue.js](http://vuejs.org/). Then I'd work my way to [React](http://facebook.github.io/react/). Then I'd look at [Angular 2](https://angular.io/), [Ember](http://emberjs.com/), or [Aurelia](http://aurelia.io/).
+[^1] If you are new to front-end/JavaScript application development I'd start with [Vue.js](http://vuejs.org/). Then I'd work my way to [React](http://facebook.github.io/react/). Then I'd look at [Angular 2](https://angular.io/), [Ember](http://emberjs.com/), or [Aurelia](http://aurelia.io/).
 
-If you are building a simple website that has minimal interactions with data (i.e. mostly a static content web site), you should avoid a front-end framework. A lot of work can be done with a task runner like [Gulp and jQuery](https://github.com/vigetlabs/gulp-starter), while avoiding the unnecessary complexity of learning and use an app framework tool.
+If you are building a simple website that has minimal interactions with data (i.e. mostly a static content web site), you should avoid a front-end framework. A lot of work can be done with a task runner like [Gulp and jQuery](https://github.com/vigetlabs/blendid), while avoiding the unnecessary complexity of learning and using an app framework tool.
 
 Want something smaller than React, consider [Preact](https://preactjs.com/). Preact is an attempt to recreate the core value proposition of React (or similar libraries like Mithril) using as little code as possible, with first-class support for ES2015. Currently the library is around 3kb (minified & gzipped).
 
-Can't decide between React or Angluar 2, read, ["Angular 2 vs React: The Ultimate Dance Off"](https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c#.j0r1xdvzl)
-
-***
-
-###### SURVEY RESULTS:
-
-The images below are from the [2016 Frontend Tooling Survey](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results) (4715 developers) and [2016 State of JS Survey](http://stateofjs.com/) (9307 developers)
-
-![](../images/q13.jpg "https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results")
-
-<cite>Image source: <a href="https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results">https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results</a></cite>
-
-![](../images/frameworks1.png "http://stateofjs.com/")
-
-<cite>Image source: <a href="http://stateofjs.com/">http://stateofjs.com/</a></cite>
-
-![](../images/frameworks2.png "http://stateofjs.com/")
-
-<cite>Image source: <a href="http://stateofjs.com/">http://stateofjs.com/</a></cite>
-
 
 
 

tools/browser.md

@@ -1,6 +1,6 @@
 # Browser Tools
 
-##### JS Browser Coding Utilities:
+##### JS Utilities to fix Browsers:
 
 * [History.js](https://github.com/browserstate/history.js)
 * [html2canvas](https://github.com/niklasvh/html2canvas)
@@ -32,7 +32,7 @@
 * [Safari Web Inspector](https://developer.apple.com/safari/tools/)
 * [Vorlon.js](http://vorlonjs.com/)
 
-##### Browser Coding Tools to Determine If X Browser Supports X:
+##### JavaScript Utilities to Determine If X Browser Supports X:
 
 * [Feature.js](http://featurejs.com/)
 * [Modernizr](https://modernizr.com/)
@@ -52,6 +52,7 @@
 * [Browserling](https://www.browserling.com/) [free to $]
 * [BrowserStack](https://www.browserstack.com) [$]
 * [CrossBrowserTesting.com](http://crossbrowsertesting.com/) [$]
+* [Ghost Inspector](https://ghostinspector.com) [free to $]
 * [Nightcloud.io](http://nightcloud.io/)
 * [Sauce Labs](https://saucelabs.com/) [$]
 
@@ -75,6 +76,10 @@ Used for functional testing and monkey testing.
 
 * [browserhacks.com](http://browserhacks.com/)
 
+##### Browser Syncing Tools:
+
+* [Browsersync](http://www.browsersync.io/)
+
 ##### Browser List:
 
 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env.

tools/cms.md

@@ -1,17 +1,18 @@
 # Content Management Hosted/API Tools 
 
-##### API CMS (i.e., Content Delivery CMS) Tools:
+##### Headless CMS Tools:
 
 * [Contentful](https://www.contentful.com/) [$]
-* [Cosmic JS](https://cosmicjs.com/) [free to $]
 * [prismic.io](https://prismic.io/) [free to $]
-* [elemeno](https://elemeno.io) [free to $]
+* [Headless](https://www.headless.rest/)
 
-##### Hosted CMS Tools:
+##### Self-hosted Headless CMS Tools:
+
+* [Cockpit](https://getcockpit.com/)
+
+##### Hosted CMS:
 
-* [Cushy CMS](https://www.cushycms.com) [free to $]
 * [LightCMS](https://www.lightcms.com) [$]
-* [Page Lime](http://www.pagelime.com/) [$]
 * [Surreal CMS](http://www.surrealcms.com/) [$]
 
 ##### Static CMS Tools:

tools/code-editor.md

@@ -38,14 +38,18 @@ Used to share limited amounts of immediately runnable code. Not a true code edit
 * [CodePen](http://codepen.io/) [free to $]
 * [jsbin.com](http://jsbin.com/) [free to $]
 * [jsfiddle.net](http://jsfiddle.net/)
-* [liveweave.com](http://liveweave.com/)
-* [Plunker](http://plnkr.co/)
+* [StackBliz](https://stackblitz.com/)
+* [codeSandbox](https://codesandbox.io/)
 
 ***
 
 ###### ADVICE:
 
-[^1] I recommending using [Visual Studio Code](https://code.visualstudio.com/) because of the quality of the tool and the continuous improvements made to the editor that likely won't stop or slow due to the fact that Microsoft is behind the tool.
+[^1] I recommending using [Visual Studio Code](https://code.visualstudio.com/) because of the quality of the tool and the continuous improvements made to the editor that likely won't stop or slow due to the fact that Microsoft is behind the tool. It is widely used:
+
+![](../images/vscode.png "https://stateofjs.com/2017/other-tools/p")
+
+<cite>Image source: <a href="https://stateofjs.com/2017/other-tools/p">https://stateofjs.com/2017/other-tools/p</a></cite>
 
 
 

tools/comm.md

@@ -3,7 +3,6 @@
 * [Slack](https://slack.com/) & [screenhero](https://screenhero.com/) [free to $]
 * [appear.in](https://appear.in/)
 * [Mattermost](https://mattermost.org/) [free to $]
-* [TeamViewer](https://www.teamviewer.com/) [free to $]
 
 ##### Code/GitHub Collaboration & Communication:
 

tools/db.md

@@ -2,14 +2,13 @@
 
 * [AlaSQL](http://alasql.org/)
 * [Dexie.js](http://www.dexie.org/)
-* [ForerunnerDB](http://forerunnerdb.com/)
 * [LocalForage](https://localforage.github.io/localForage/)
 * [LokiJS](http://lokijs.org/#/)
 * [Lovefield](https://google.github.io/lovefield)
 * [lowdb](https://github.com/typicode/lowdb)
 * [Pouchdb](http://pouchdb.com/)
 * [NeDB](https://github.com/louischatriot/nedb)
-* [YDN-DB](http://dev.yathit.com/ydn-db/index.html)
+* [RxDB](https://pubkey.github.io/rxdb/install.html)
 
 
 

tools/dev-tools.md

@@ -1,8 +1,5 @@
-# General Front-End Development Tools
+# GUI Development/Build Tools
 
-##### Development Tools:
-
-* [Browsersync](http://www.browsersync.io/)
 * [CodeKit](http://incident57.com/codekit/)
 * [Prepros](https://prepros.io/)
 

tools/diagram.md

@@ -3,6 +3,7 @@
 * [draw.io](https://www.draw.io/) [free to $]
 * [Cacoo](https://cacoo.com) [free to $]
 * [gliffy](https://www.gliffy.com/products/online/) [free to $]
+* [sketchboard.io](https://sketchboard.io) [$]
 
 
 

tools/hosting.md

@@ -4,7 +4,7 @@
 
 * [AWS](https://aws.amazon.com/websites/) [$]
 * [DigitalOcean](https://digitalocean.com) [$]
-* [Heroku](https://heroku.com) [free to $]
+* [WebFaction](https://www.webfaction.com/) [$]
 
 ##### Static
 
@@ -14,6 +14,6 @@
 * [Surge](https://surge.sh/) [free to $]
 * [Forge](https://getforge.com/) [$]
 
-##### Local
+##### Local Hosting Tools:
 
 [Localname](https://localname.io)

tools/html.md

@@ -7,15 +7,13 @@
 * [HTML5 Boilerplate](https://html5boilerplate.com/)
 * [HTML5 Bones](http://html5bones.com/)
 * [Mobile boilerplate](https://html5boilerplate.com/mobile/)
-* [Web Starter Kit Boilerplate & Tooling for Multi-Device Development](https://developers.google.com/web/tools/starter-kit)
 
 ##### HTML Polyfill:
 
 * [html5shiv](https://github.com/aFarkas/html5shiv)
 
 ##### Transpiling:
 
-* [HAML](http://haml.info/)
 * [Pug](https://pugjs.org/api/getting-started.html)
 * [Markdown](http://daringfireball.net/projects/markdown/)
 
@@ -25,7 +23,6 @@
 * [Elements](https://html.spec.whatwg.org/multipage/indices.html#elements-3)
 * [HTML Arrows](http://htmlarrows.com/)
 * [HTML Entity Lookup](http://entity-lookup.leftlogic.com/)
-* [HTML Interfaces Browser Support ](http://www.webbrowsercompatibility.com/html-interfaces/desktop/)
 * [htmlreference.io](http://htmlreference.io/)
 * [HEAD - A free guide to <head> elements](https://gethead.info/)
 

tools/offline.md

@@ -5,6 +5,12 @@
 * [PouchDB](http://pouchdb.com/)
 * [upup](https://www.talater.com/upup/)
 
+***
+
+###### NOTES:
+
+For more tools look [here](https://github.com/pazguille/offline-first#tools).
+
 
 
 

tools/proto.md

@@ -5,13 +5,16 @@
 * [Axure](http://www.axure.com/) [$]
 * [Balsamiq Mockups](https://balsamiq.com) [$]
 * [Justinmind](http://www.justinmind.com/) [$]
+* [Moqups](https://moqups.com/) [$]
+* [proto.io](https://proto.io/) [$]
 * [UXPin](http://www.uxpin.com/) [free to $]
 
+
 ##### Collaboration / Presenting:
 
 * [InVision](http://www.invisionapp.com/) [free to $]
 * [Conceptboard](https://conceptboard.com/) [free to $]
-* [myBalsamiq](https://www.mybalsamiq.com/) [$]
+* [myBalsamiq](https://balsamiq.cloud/) [$]
 
 
 

tools/pwa.md

@@ -1,8 +1,6 @@
 # Progressive Web App Tools:
 
-##### Front-End App Frameworks:
-
-* [lighthouse](https://github.com/GoogleChrome/lighthouse)
+* [lighthouse](https://developers.google.com/web/tools/lighthouse/)
 * [Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist)
 
 

tools/static.md

@@ -10,7 +10,7 @@
 
 ###### ADVICE:
 
-[^1] Before using a static site generator consider using [Gulp](http://gulpjs.com/) to orchestrate a custom solution or use a tool that makes use of Gulp for static site generation. e.g. [Gulp Starter](https://github.com/vigetlabs/gulp-starter)
+[^1] Before using a static site generator framework consider using [Gulp](http://gulpjs.com/) or [npm scripts](https://scotch.io/tutorials/using-npm-as-a-build-tool) to orchestrate a custom solution or use a tool that makes use of Gulp for static site generation. e.g. [Blendid](https://github.com/vigetlabs/blendid)
 
 
 

tools/templates.md

@@ -3,16 +3,17 @@
 ##### Just Templating:
 
 * [doT.js](http://olado.github.io/doT/)
-* [Handlebars](http://handlebarsjs.com/)
-  * [htmlbars](https://github.com/tildeio/htmlbars)
+* [art-template](https://aui.github.io/art-template/)
 * [Nunjuncks](http://mozilla.github.io/nunjucks/)
 
 ##### Templating and Reactive Data Binding:
 
-* [Deku](https://github.com/anthonyshort/deku)
-* [jquerymy.js](http://jquerymy.com/)
 * [ractive.js](https://ractive.js.org/)
 * [react.js](https://facebook.github.io/react/index.html)
+  * [preact](https://preactjs.com/)
+  * [inferno](https://infernojs.org/)
+  * [nerv](https://github.com/NervJS/nerv)
+  * [rax](https://github.com/alibaba/rax)
 * [riot](http://riotjs.com/)
 * [Rivets.js](http://rivetsjs.com/)
 * [vue.js](http://vuejs.org/)