diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7eb2e57 --- /dev/null +++ b/.gitignore @@ -0,0 +1,59 @@ +# Created by https://www.gitignore.io + +### WebStorm ### +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm + +*.iml + +## Directory-based project format: +.idea/ + +## File-based project format: +*.ipr +*.iws + +## Plugin-specific files: + +# IntelliJ +/out/ + +# mpeltonen/sbt-idea plugin +.idea_modules/ + +# JIRA plugin +atlassian-ide-plugin.xml + +# Crashlytics plugin (for Android Studio and IntelliJ) +com_crashlytics_export_strings.xml +crashlytics.properties +crashlytics-build.properties + + +### Node ### +# Logs +logs +*.log + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directory +node_modules/ + +# the site buildg +dist/ +build/ diff --git a/README.md b/README.md index 2ef0361..f974644 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ # Essential JavaScript Links -A curated list by Eric Elliott and friends. Suggest links in the [gist comments](https://gist.github.com/ericelliott/d576f72441fc1b27dace#comment-1365676). +A curated list by Eric Elliott and friends. Suggest a link with a PR or [open a new issue](https://github.com/ericelliott/essential-javascript-links/issues/new). [Help us turn this into a proper website!](https://github.com/ericelliott/essential-javascript-links/issues) -This is a very exclusive collection of only must-have JavaScript links. I'm only listing my favorite links. Nothing else makes the cut. Feel free to suggest links if you think they're good enough to make this list. The really curious should feel free to browse the comments to find other links. I can't guarantee the quality of links in the comments. +This is a very exclusive collection of only must-have JavaScript links. I'm only listing my favorite links. Nothing else makes the cut. Feel free to suggest links if you think they're truly essential. ## Full Disclosure @@ -13,49 +13,80 @@ Some of these links are affiliate links, meaning that if you make a purchase, I ## Required Reading (Online resources) -* [Learn JavaScript Essentials (for all skill levels)](https://medium.com/javascript-scene/learn-javascript-b631a4af11f2) - One clear path to JavaScript mastery -* [JavaScript Training Sucks](https://medium.com/javascript-scene/javascript-training-sucks-284b53666245) 99 out of 100 JS developers lack the skills they need to fill hundreds of thousands of jobs. We can change that. -* [The Two Pillars of JavaScript Part 1: Prototypal OO](https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3) -* [The Two Pillars of JavaScript Part 2: Functional Programming](https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4) -* [JavaScript Objects](http://davidwalsh.name/javascript-objects) An excellent explanation of inheritance in JavaScript by Kyle Simpson -* [Isomorphic JavaScript](http://isomorphic.net/) -* [JavaScript Application Architecture on the Road to 2015](https://medium.com/@addyosmani/javascript-application-architecture-on-the-road-to-2015-d8125811101b) - Addy Osmani -* [Reactive MVC and the Virtual DOM](http://futurice.com/blog/reactive-mvc-and-the-virtual-dom) Great read, even if you're not a React user. -* [Introduction to Reactive Programming](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) -* [The General Theory of Reactivity](https://github.com/kriskowal/gtor) What is all this talk about reactive? Functional? Promises? This is the beginning of a reactive programming bible. -* [ES6 Generators](http://davidwalsh.name/es6-generators) A series of blog posts by Kyle Simpson -* [Typed JavaScript](http://www.2ality.com/2014/10/typed-javascript.html) - Excellent post about the state of typed JavaScript by Axel Rauschmayer -* [Taming the Asynchronous Beast with CSP in JavaScript](http://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript) - James Long -* [ES6 Modules: The Final Syntax](http://www.2ality.com/2014/09/es6-modules-final.html) by @rauschma #AMDisDead - +* [Learn to Code: 13 Tips That Could Save You Years of Effort](https://medium.com/javascript-scene/learn-to-code-13-tips-that-could-save-you-years-of-effort-92ce799a3e1f) **#article** +* [Learn JavaScript Essentials (for all skill levels)](https://medium.com/javascript-scene/learn-javascript-b631a4af11f2) One clear path to JavaScript mastery **#article** +* [The Two Pillars of JavaScript Part 1: Prototypal OO](https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3) **#article** +* [The Two Pillars of JavaScript Part 2: Functional Programming](https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4) **#article** +* [JavaScript Objects](https://davidwalsh.name/javascript-objects) An excellent explanation of inheritance in JavaScript by Kyle Simpson **#article** +* [JavaScript Application Architecture on the Road to 2015](https://medium.com/@addyosmani/javascript-application-architecture-on-the-road-to-2015-d8125811101b) Addy Osmani **#article** +* [Modularity](http://jlongster.com/Modularity) A pragmatic take on the tiny modules vs batteries included approach +* [Computer Science in JavaScript](https://github.com/nzakas/computer-science-in-javascript) by Nicholas C. Zakas **#article** +* [The Dao of Immutability](https://medium.com/javascript-scene/the-dao-of-immutability-9f91a70c88cd) The Way of the Functional Programmer **#article** +* [Reactive MVC and the Virtual DOM](http://futurice.com/blog/reactive-mvc-and-the-virtual-dom) Great read, even if you're not a React user. **#article** +* [Introduction to Reactive Programming](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) **#article** +* [The General Theory of Reactivity](https://github.com/kriskowal/gtor) What is all this talk about reactive? Functional? Promises? This is the beginning of a reactive programming bible. **#article** +* [Why Functional Programming Matters](http://www.cse.chalmers.se/~rjmh/Papers/whyfp.pdf) by John Hughes, 1984 **#paper** **#pdf** +* [Unapply attack](https://glebbahmutov.com/blog/unapply-attack/) Make your JS apps more secure by freezing builtins. **#article** +* [ES6 Generators](https://davidwalsh.name/es6-generators) A series of blog posts by Kyle Simpson **#article** +* [Typed JavaScript](http://www.2ality.com/2014/10/typed-javascript.html) Excellent post about the state of typed JavaScript by Axel Rauschmayer **#article** +* [ES6 Modules: The Final Syntax](http://www.2ality.com/2014/09/es6-modules-final.html) by @rauschma **#article** +* [javascript-sdk-design](https://github.com/huei90/javascript-sdk-design) A guide for people building JavaScript client SDKs **#article** +* [Advanced Performance Audits with DevTools](http://www.paulirish.com/2015/advanced-performance-audits-with-devtools/) In-depth perf case studies with Paul Irish **#article** ## Required Viewing -* [Classical Inheritance is Obsolete: How to Think in Prototypal OO](https://vimeo.com/69255635) - by [Eric Elliott](https://twitter.com/_ericelliott) -* [Asynchronous Programming at Netflix](https://www.youtube.com/watch?v=gawmdhCNy-A) - [Jafar Husain](https://twitter.com/jhusain) -* [David Nolen: Immutability: Putting The Dream Machine To Work](https://www.youtube.com/watch?v=SiFwRtCnxv4) - [David Nolen](https://twitter.com/swannodette) -* [Immutable Data and React](https://www.youtube.com/watch?v=I7IdS-PbEgI&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) by [Lee Byron](https://twitter.com/leeb) -* [Delivering the Goods](https://www.youtube.com/watch?v=R8W_6xWphtw) Paul Irish on one of the most important but overlooked topics in the development world today - page load times. -* [Simplicity Matters](https://www.youtube.com/watch?v=rI8tNMsozo0) A later version of the influential talk, "Simple Made Easy" by [Rich Hickey](https://twitter.com/richhickey) - +* [Classical Inheritance is Obsolete: How to Think in Prototypal OO](https://vimeo.com/69255635) by [Eric Elliott](https://twitter.com/_ericelliott) **#talk** +* [Composition Over Inheritance](https://www.youtube.com/watch?v=wfMtDGfHWpA) by Mattias Petter Johansson **#video** +* [Everything You Never Wanted to Know About JavaScript Numbers](https://www.youtube.com/watch?v=MqHDDtVYJRI) by Bartek Szopka **#talk** +* [Asynchronous Programming at Netflix](https://www.youtube.com/watch?v=gawmdhCNy-A) [Jafar Husain](https://twitter.com/jhusain) **#talk** +* [What is Reactive Programming?](https://www.youtube.com/watch?v=dwP1TNXE6fc) [Jafar Husain](https://twitter.com/jhusain) explains reactive programming **#talk** +* [Introduction to React](https://www.youtube.com/watch?v=XxVg_s8xAms) by Jordan Walke **#talk** +* [Introduction to Reactive Programming](https://egghead.io/series/introduction-to-reactive-programming) by André Staltz **#video** **#course** +* [Immutability: Putting The Dream Machine To Work](https://www.youtube.com/watch?v=SiFwRtCnxv4) by [David Nolen](https://twitter.com/swannodette) **#talk** +* [The Essence of FRP](http://begriffs.com/posts/2015-07-22-essence-of-frp.html) by Conal Elliott **#talk** +* [JavaScript API Design Principles](https://www.youtube.com/watch?v=HYl7ReNB5TA) by Ariya Hidayat **#talk** +* [Delivering the Goods](https://www.youtube.com/watch?v=R8W_6xWphtw) Paul Irish on one of the most important but overlooked topics in the development world today - page load times. **#talk** +* [Supercharging Page Load](https://www.youtube.com/watch?v=d5_6yHixpsQ) by Jake Archibald **#video** +* [Slay'n the Waste Monster](https://www.youtube.com/watch?v=RWmzxyMf2cE) by Colt McAnlis **#talk** +* [Simplicity Matters](https://www.youtube.com/watch?v=rI8tNMsozo0) A later version of the influential talk, "Simple Made Easy" by [Rich Hickey](https://twitter.com/richhickey) **#talk** +* [Making WebGL Dance](https://www.youtube.com/watch?v=GNO_CYUjMK8) by Steven Wittens **#talk** +* [The Pixel Factory](https://www.youtube.com/watch?v=4NkjLWAkYZ8) by Steven Wittens **#talk** +* [Getting Started with Redux](https://egghead.io/series/getting-started-with-redux) by Dan Abramov. Describes a functional approach to application state that all developers should be aware of. **#course** **#video** +* [Cycle.js Fundamentals](https://egghead.io/series/cycle-js-fundamentals) by André Staltz. **#course** **#video** + +## Exercises + +* [FreeCodeCamp](http://www.freecodecamp.com/) Learn to build apps & work on not-for-profit projects. **#exercises** +* [LearnRx](http://reactivex.io/learnrx/) **#exercises** +* [Javascripting](https://github.com/sethvincent/javascripting) Learn JavaScript by adventuring around in the terminal **#exercises** +* [Functional Javascript](https://github.com/timoxley/functional-javascript-workshop) A functional javascript workshop **#exercises** +* [Count Up to Version 6 of JavaScript!](https://github.com/domenic/count-to-6) An intro to some ES6 features via a set of self-guided workshops **#exercises** +* [ESNext Generation Interactive Workshop](https://github.com/jesstelford/esnext-generation) Learn ES6's Iterators & Generators in this interactive Javascript workshop **#exercises** +* [Promises](https://github.com/stevekane/promise-it-wont-hurt) A Workshopper module that teaches you to use promises in javascript **#exercises** +* [WebGL](https://github.com/stackgl/webgl-workshop) Learn the WebGL API **#exercises** +* [WebGL with three.js](https://github.com/alexmackey/IntroToWebGLWithThreeJS) An introduction to WebGL with three.js **#exercises** ## Spec * [ES5 Spec](http://es5.github.io/) An annotated, hyperlinked version of the ES5 spec -* [ES6 draft](https://people.mozilla.org/~jorendorff/es6-draft.html) - +* [ES6 Spec](http://www.ecma-international.org/ecma-262/6.0/) ECMAScript® 2015 Language Specification +* [ES2016 (ES7) Spec](http://www.ecma-international.org/ecma-262/7.0/) ## Books -* [JavaScript for Kids](http://www.amazon.com/gp/product/B00QL616QE?ie=UTF8&camp=213733&creative=393177&creativeASIN=B00QL616QE&linkCode=shr&tag=ericleads-20&linkId=6AOODC27L6URY3K2) -* [Eloquent JavaScript](http://eloquentjavascript.net/) -* [JavaScript: The Good Parts](http://www.amazon.com/gp/product/0596517742?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596517742&linkCode=shr&tag=ericleads-20&linkId=IJKESYSOTWGC27DR) -* [Effective JavaScript](http://www.amazon.com/gp/product/0321812182?ie=UTF8&camp=213733&creative=393185&creativeASIN=0321812182&linkCode=shr&tag=ericleads-20&linkId=JIC63I267I6UDQQZ) -* [Programming JavaScript Applications](http://pjabook.com) -* [JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596805527&linkCode=shr&tag=ericleads-20&linkId=AENIF5KLRQI3N335) -* [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) +* [JavaScript for Kids](http://www.amazon.com/gp/product/B00QL616QE?ie=UTF8&camp=213733&creative=393177&creativeASIN=B00QL616QE&linkCode=shr&tag=ericleads-20&linkId=6AOODC27L6URY3K2) by Nick Morgan +* [Eloquent JavaScript](http://eloquentjavascript.net/) by Marijn Haverbeke +* [JavaScript: The Good Parts](http://www.amazon.com/gp/product/0596517742?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596517742&linkCode=shr&tag=ericleads-20&linkId=IJKESYSOTWGC27DR) by Douglas Crockford +* [Effective JavaScript](http://www.amazon.com/gp/product/0321812182?ie=UTF8&camp=213733&creative=393185&creativeASIN=0321812182&linkCode=shr&tag=ericleads-20&linkId=JIC63I267I6UDQQZ) by David Herman +* [Programming JavaScript Applications](http://pjabook.com) by Eric Elliott +* [JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596805527&linkCode=shr&tag=ericleads-20&linkId=AENIF5KLRQI3N335) by David Flanagan +* [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) by Kyle Simpson * [Understanding ECMAScript 6](https://leanpub.com/understandinges6/read/) by Nicholas C. Zakas -* [Node.js in Action](http://www.manning.com/cantelon/) -* [The Dream Machine: J.C.R. Licklider and the Revolution That Made Computing Personal](http://www.amazon.com/gp/product/0670899763?ie=UTF8&camp=213733&creative=393177&creativeASIN=0670899763&linkCode=shr&tag=ericleads-20&linkId=NDUXYQOCMPC47SQI) +* [JavaScript Allongé](https://leanpub.com/javascriptallongesix) by Reginald Braithwaite +* [Node.js in Action](http://www.manning.com/cantelon/) by Mike Cantelon, Marc Harter, T.J. Holowaychuk and Nathan Rajlich +* [High Performance Browser Networking](http://chimera.labs.oreilly.com/books/1230000000545/index.html) by Ilya Grigorik **#book** +* ["Seven Languages in Seven Weeks"](https://pragprog.com/book/btlang/seven-languages-in-seven-weeks) Learn different ways of solving problems and you'll deepen your understanding of JavaScript. **#book** +* [WebGL Fundamentals](http://webglfundamentals.org/) by Greggman - An interactive online book about graphics programming. + ## Dev tools & collaboration @@ -63,121 +94,199 @@ Some of these links are affiliate links, meaning that if you make a purchase, I * [nvm](https://github.com/creationix/nvm) First install this... * [Node](http://nodejs.org/) Then install Node (with nvm). You'll need this even if you're a front-end dev. * [npm](https://www.npmjs.com/) Install lots of other things with npm. **The package manager for JavaScript.** Comes with Node. -* [Sublime Text 3](http://www.sublimetext.com/3) -* [Node Inspector](https://github.com/node-inspector/node-inspector) Debug Node code with the Chrome debug tools -* [TraceGL](https://github.com/traceglMPL/tracegl) Powerful runtime analysis of live JavaScript code +* [Yarn](https://yarnpkg.com/) "Fast, Reliable, and Secure Dependency Management". May speed up your installs and make them more deterministic than using npm. Uses the npm registry. +* [Atom](https://atom.io/) Nice, hackable editor by GitHub. * [Tern](http://ternjs.net/) Static analysis in JavaScript -* [JSDoc](http://usejsdoc.org/) - Pair with [Tern](http://ternjs.net/) for static analysis -* [Nitrous.IO](https://www.nitrous.io/join/uJcRo6yQDvs?utm_source=nitrous.io&utm_medium=copypaste&utm_campaign=referral) (Supports live collaboration / pair programming) -* [Slack](http://slack.com) Chat for teams, with GitHub and Google hangouts integration - * For hangouts, just type /hangout in any channel +* [Slate](https://github.com/tripit/slate) Generate beautiful API docs for your apps +* [Slack](https://slack.com/) Chat for teams, with GitHub and Google hangouts integration +* [Gitter](https://gitter.im/) Like Slack, but better for OSS projects and free chat. +* [Zoom](https://zoom.us/) Video meetings with remote control - great for interviews and remote pair programming. * [PrettyDiff](http://prettydiff.com/) -* [ES6 Fiddle](http://www.es6fiddle.net/) - +* [Babel Repl](http://babeljs.io/repl/) The Babel REPL with compiled output +* [ESNextBin](http://esnextb.in/) A babel powered ES6+ browser bin with npm package support. +* [Cloud9](https://c9.io/) Your dev environment and IDE in the cloud. +* [Koding](https://koding.com) Online cloud development platform with video & audio collaboration. +* [updtr](https://github.com/peerigon/updtr) Keep your modules up to date. +* [Greenkeeper](https://greenkeeper.io/) Automatically opens PRs when your dependencies fall behind latest. +* [greenkeeper-keeper](https://github.com/kkemple/greenkeeper-keeper) Automatically merges Greenkeeper PRs when tests pass. ## Building -* [Browserify](http://browserify.org/) Bundle modules for the browser. +* [Webpack](http://webpack.github.io/) Bundle modules for the browser. * [How to use NPM as a Build Tool](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/) +* [pre-commit](https://github.com/observing/pre-commit) Easily configure pre-commit hooks for your package ### Testing / Lint / Quality checkers -* [JSHint](http://jshint.com/) -* [ESLint](http://eslint.org/) +* [ESLint](http://eslint.org/) The pluggable linting utility for JavaScript and JSX. +* [ESLint no-inferred-methodname](https://github.com/johnstonbl01/eslint-no-inferred-method-name) A custom rule for a common problem. **#code** * [Istanbul](https://github.com/gotwarlost/istanbul) Code coverage reporting -* [tape](https://github.com/substack/tape) Minimal, dead simple unit testing. (This is all you need, really!) -* [faucet](https://github.com/substack/faucet) Prettify unit testing output (like what comes from tape). -* [Supertest](https://github.com/tj/supertest) The best way to test HTTP endpoints. +* [nyc](https://github.com/bcoe/nyc) a code coverage tool built on istanbul that works for applications that spawn subprocesses. +* [tape](https://github.com/substack/tape) Dead simple unit testing **#code** +* [tap-browser-color](https://github.com/kirbysayshi/tap-browser-color) Prettify tap output in the browser. Works well with Tape. **#code** +* [faucet](https://github.com/substack/faucet) Prettify tap output in the console. Plays well with Tape. **#code** +* [Supertest](https://github.com/visionmedia/supertest) The best way to test HTTP endpoints. **#code** ### Transpilers -* [6to5](https://github.com/6to5/6to5) (ES6) -* [CoffeeScript](http://coffeescript.org/) -* [Emscripten](http://kripken.github.io/emscripten-site/) (frequently used for C/C++ JavaScript ports) -* [Traceur](https://github.com/google/traceur-compiler) (ES.next) -* [ES6 tools](https://github.com/addyosmani/es6-tools) Addy Osmani's ES6 Tools list +* [Babel](https://github.com/babel/babel) Transpile ES2015 (ES6), ES7 to ES5, JSX to React. +* [TypeScript](http://www.typescriptlang.org/) TypeScript's structural types are worth a look. +* [You Might Not Need TypeScript](https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b) **#article** +* [Emscripten](http://kripken.github.io/emscripten-site/) Frequently used to compile C/C++ to JavaScript. +* [ES6 tools](https://github.com/addyosmani/es6-tools) Addy Osmani's ES6 Tools list. ## JavaScript environments -* [Node.js](http://nodejs.org/) Server side JavaScript and more -* [io.js](https://iojs.org/) - The Node fork +* [Node.js](http://nodejs.org/) Server side JavaScript and more. ## Libraries -* [es5-shim](https://github.com/es-shims/es5-shim) Stable, production ready. -* [es6-shim](https://github.com/es-shims/es6-shim/) Somewhat stable, but a few things I thought were solid got shifted to ES7. -* [es7-shim](https://www.npmjs.com/package/es7-shim) Experimantal. Use with caution. -* [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) A fairly comprehensive list of HTML5 API polyfills. -* [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate) You'll want to cherry-pick the best of this for your production apps. See [Initializr](http://www.initializr.com). -* [The Isomorphic Express Boilerplate](https://github.com/ericelliott/isomorphic-express-boilerplate) Write apps using the same code for both the client and the server using Node, Express, and Browserify. -* [rootrequire](https://github.com/ericelliott/rootrequire) Require files relative to your project path using the normal node require(). -* [native-promise-only](https://github.com/getify/native-promise-only) An ECMAScript standard promise polyfill by Kyle Simpson. -* [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) A [WHATWG fetch](https://fetch.spec.whatwg.org/). standard polyfill. -* [sseasy](https://github.com/heroku/sseasy) Server Sent Events for Node (HTML5 standard push notifications). -* [EventSource browser Polyfill](https://github.com/Yaffle/EventSource/) Required client-side patching to support Server Sent Events. -* [jQuery](http://jquery.com/) Yes, [I still use jQuery](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit#) and so do 61% of the top 100,000 websites - for good reason. -* [Blaze](http://meteor.github.io/blaze/) DOM-diffing isomorphic reactive templates from Meteor. -* [RxJS](https://github.com/Reactive-Extensions/RxJS) Reactive extensions for JavaScript. [What's reactive?](https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4) -* [Page.js](https://github.com/visionmedia/page.js) Tiny client-side router, inspired by Express. -* [Moment](http://momentjs.com/docs/) A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates. -* [Globalize](https://github.com/jquery/globalize) i18n / translate your app for many languages and locations (locales) -* [Express](http://expressjs.com/) The most popular framework for Node. -* [Stampit](https://github.com/ericelliott/stampit) Stampit - create objects from reusable, composable behaviors. Prototypal inheritance with stamps. -* [Credential](https://github.com/ericelliott/credential) If you write Node apps with password logins, you need Credential. -* [cuid](https://github.com/ericelliott/cuid) GUIDs are broken - use cuid, instead. -* [velocity](http://julian.com/research/velocity/) & [Velocity Motion Designer (VMD)](http://julian.com/research/velocity/#vmd) UI animation library. -* [json-schema](https://github.com/kriszyp/json-schema) - Great for model validations. - - -## Web Components - -* [FIRST](http://addyosmani.com/first/) +* [stats.js.org](http://stats.js.org/) JavaScript repos ranked by popularity. **#code** +* [Express](http://expressjs.com/) The most popular framework for Node. **#code** +* [Lodash](https://lodash.com/) Like Underscore, but much faster, and featuring a more expressive API. Check out the Ramda-style [fp versions](https://github.com/lodash/lodash/tree/npm/fp) you can import from `lodash/fp` **#code** +* [cuid](https://github.com/ericelliott/cuid) GUIDs are broken - use cuid, instead. **#code** +* [React](https://github.com/facebook/react) What do Facebook, Instagram, Netflix and PayPal have in common? React. **#code** +* [RxJS](https://github.com/Reactive-Extensions/RxJS) Reactive extensions for JavaScript. [What's reactive?](https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4) **#code** +* [Moment](http://momentjs.com/docs/) A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates. **#code** +* [https://qa.polyfill.io/v2/docs/](https://qa.polyfill.io/v2/docs/) Pollyfill browsers automatically. **#code** +* [UpUp](https://www.talater.com/upup/) Make sure your site works even when your user is offline. **#code** +* [The Universal React Boilerplate](https://github.com/cloverfield-tools/universal-react-boilerplate) Write apps using the same code for both the client and the server using Node, Express, and Browserify. **#code** +* [NodeGoat](https://github.com/OWASP/NodeGoat) Identify security vulnerabilities in your Node apps. **#code** +* [lightning.js](https://github.com/olark/lightningjs) Async fetch load 3rd party JS & expose a promise API. **#code** +* [Deep Freeze](https://github.com/substack/deep-freeze) Deep freeze objects. **#code** +* [jQuery](http://jquery.com/) Most popular JS lib by a landslide. **#code** +* [Ramda](http://ramdajs.com/) Like Lodash and Underscore, but with all functions automatically curried, and parameters arranged so that the data to be operated on is supplied last. **#code** +* [express-request-language](https://github.com/tinganho/express-request-language) Best implementation I've seen for `Accept-Language` negatiation in Express. **#code** +* [accept-language](https://github.com/tinganho/node-accept-language) If you don't use express, accept-language is the low-level lib that powers `express-request-language` for language matching & fallback. **#code** +* [Globalize](https://github.com/jquery/globalize) i18n / translate your app for many languages and locations (locales). **#code** +* [dotenv](https://github.com/motdotla/dotenv) Easily manage environment variables **#code** +* [Leaflet](http://leafletjs.com/) Interactive map UIs made easy. **#code** +* [Lusca](https://github.com/krakenjs/lusca) Secure your Express application. By the Kraken team at PayPal. +* [Stampit](https://github.com/stampit-org/stampit) Create objects from reusable, composable behaviors. Prototypal inheritance with stamps. **#code** +* [Countly](http://github.com/countly/countly-server) Open source mobile & web analytics and marketing platform. **#code** +* [node-jsonwebtoken](https://github.com/auth0/node-jsonwebtoken) Easy JSON Web Token auth. **#code** +* [velocity](http://julian.com/research/velocity/) & [Velocity Motion Designer (VMD)](http://julian.com/research/velocity/#vmd) UI animation library. **#code** +* [is-my-json-valid](https://github.com/mafintosh/is-my-json-valid) A fast [json-schema](http://json-schema.org/) validator. **#code** +* [is-express-schema-valid](https://github.com/voronianski/is-express-schema-valid) is-my-json-valid as Express middleware for `req.body` `req.query` and `req.params`. **#code** +* [inquirer.js](https://github.com/SBoudrias/Inquirer.js) Great library for building CLI tools. **#code** +* [rimraf](https://github.com/isaacs/rimraf) `rm -rf` util for nodejs. Great for npm scripts. **#code** +* [cross-env](https://www.npmjs.com/package/cross-env) Use environment variables with npm scripts cross-platform. **#code** +* [Wemo.io Open Source VR Tools](https://wemo.io/os) **#code** +* [IoT.js](http://samsung.github.io/iotjs/) An Internet of Things JavaScript platform. + + +## React + +* [Introducing React](https://www.youtube.com/watch?v=XxVg_s8xAms) **#video** +* [React blog](http://facebook.github.io/react/blog/) Official React blog +* [JSX Looks Like an Abomination but it's Good for You](https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918) My take on JSX **#article** +* [React Pure Component Starter](https://github.com/ericelliott/react-pure-component-starter) Learn React pure components **#code** +* [Baby's First Reaction](https://medium.com/javascript-scene/baby-s-first-reaction-2103348eccdd) Build your first working React component **#article** +* [Immutable Data and React](https://www.youtube.com/watch?v=I7IdS-PbEgI&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) by [Lee Byron](https://twitter.com/leeb) **#video** +* [react-stamp](https://github.com/stampit-org/react-stamp) Composable, classless React components made easy **#code** +* [react-engine](https://github.com/paypal/react-engine) PayPal's isomorphic React view engine for Express or Kraken **#code** +* [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) **#code** +* [Redux](https://github.com/rackt/redux) Predictable state container (store) for JavaScript apps **#code** +* [Redux Devtools](https://github.com/gaearon/redux-devtools) DevTools for Redux with hot reloading, timetravel debugging, and customizable UI +* [redux-saga](https://github.com/yelouafi/redux-saga) A synchronous-style side-effect library for Redux. **#code** +* [MobX](https://github.com/mobxjs/mobx) Simple, scalable state management with TFRP. **#code** +* [react-native](https://github.com/facebook/react-native) React for mobile devices **#code** +* [Elemental-UI](http://elemental-ui.com/) Modular UI component library for React. **#code** +* [velocity-react](https://github.com/twitter-fabric/velocity-react) The excellent Velocity UI animation library for React. **#code** +* [react-art](https://github.com/reactjs/react-art) React for SVG or canvas **#code** +* [react-canvas](https://github.com/Flipboard/react-canvas) React for canvas **#code** +* [react-three](https://github.com/Izzimach/react-three) Three.js rendering for React **#code** +* [react.rocks](https://react.rocks/) Pinterest-style directory of online demos with available code +* [TodoMVC in React](http://todomvc.com/examples/react/) **#example** +* [JSX Specification](http://facebook.github.io/jsx/) **#documentation** + +## GraphQL + +* [Let's Learn GraphQL](https://learngraphql.com/) **#course** +* [GraphQL at Facebook](https://www.youtube.com/watch?v=etax3aEe2dA) **#talk** +* [Getting started with GraphQL and Node.js](https://blog.risingstack.com/graphql-overview-getting-started-with-graphql-and-nodejs/) **#article** +* [GraphQL Specification](https://github.com/facebook/graphql) +* [GraphQL Reference Implementation](https://github.com/graphql/graphql-js) **#code** +* [graphql-server](https://github.com/RisingStack/graphql-server) A GraphQL server implementation with Mongo / Mongoose **#code** + +## Progressive Web Apps (PWAs) + +* [Native Apps are Doomed](https://medium.com/javascript-scene/native-apps-are-doomed-ac397148a2c0) Intro to PWAs **#article** +* [Why Native Apps Really Are Doomed](https://medium.com/javascript-scene/why-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9) Why we need PWAs - packed with stats you need to know if you're building an app. **#article** + + +## Web Components & Component Based Architecture + +* [FIRST](https://addyosmani.com/first/) * [Polyfills](http://webcomponents.org/polyfills/) * [HTML Imports](http://webcomponents.org/articles/introduction-to-html-imports/) * [Custom Elements](http://webcomponents.org/articles/introduction-to-custom-elements/) * [Templates](http://webcomponents.org/articles/introduction-to-template-element/) * [Shadow DOM](http://webcomponents.org/articles/introduction-to-shadow-dom/) * [x-gif](http://geelen.github.io/x-gif/#/http://i.imgur.com/iKXH4E2.gif) This web component wins the internet. +* [Vulcanize](https://github.com/Polymer/vulcanize) Don't let web components slow your app down. Bundle your HTML imports. + + +## Benchmarking + +* [JSlitmus](https://github.com/broofa/jslitmus) - JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests. +* [Matcha](https://github.com/logicalparadox/matcha) - Matcha allow you to design experiments that will measure the performance of your code. It is recommended that each bench focus on a specific point of impact in your application. +* [Timing.js](https://github.com/addyosmani/timing.js) - Timing.js is a small set of helpers for working with the Navigation Timing API to identify where your application is spending its time. Useful as a standalone script, DevTools Snippet or bookmarklet. +* [Stats.js](https://github.com/mrdoob/stats.js) - This class provides a simple info box that will help you monitor your code performance. ## QA / Deployment / Monitoring / CI * [PM2](https://github.com/Unitech/pm2) Process monitoring / self repair +* [Pingdom](https://www.pingdom.com) Response monitoring and alert management (because incidents happen). * [New Relic](http://newrelic.com/) Deep insights into the performance and health of your production apps * [Sauce Labs](https://saucelabs.com/) Cross platform web application testing with great collaboration and integration support * [Travis CI](https://travis-ci.org/) CI, of course * [Docker](https://www.docker.com/) Run your CI process using the same OS configs as your production systems. -* [Shippable](https://www.shippable.com/) Docker-based hosted build / CI +* [Shippable](https://app.shippable.com/) Docker-based hosted build / CI +* [Tensō](http://avoidwork.github.io/tenso/) A thin API facade in Node +* [Kong](https://getkong.org/) API/microservice extension and management layer, centralize auth, cache, logging, rate limiting, etc... plugins in Lua ); ## Community -* [ES Discuss](https://esdiscuss.org/) The mailing list where all the ECMAScript standard discussion action is. +* [JavaScript Questions Chat](https://gitter.im/learn-javascript-courses/javascript-questions) * [JavaScript on Google+](https://plus.google.com/communities/100875929141897651837) * [HTML5 on Google+](https://plus.google.com/communities/103299867207875326585) * [Node.js on Google+](https://plus.google.com/communities/115365528781941125390) * IRC ##JavaScript irc://irc.freenode.net/javascript * IRC #node.js irc://irc.freenode.net/node.js -* IRC #io.js irc://irc.freenode.net/io.js - the Node fork +* IRC #io.js irc://irc.freenode.net/io.js The Node fork +* IRC #learnjavascript irc://irc.freenode.net/learnjavascript ## News + +* [JavaScript Scene](https://medium.com/javascript-scene) * [JavaScript Weekly](http://javascriptweekly.com/) * [Node Weekly](http://nodeweekly.com/) * [HTML5 Weekly](http://html5weekly.com/) +* [ESNext News](http://esnextnews.com/) * [EchoJS](http://www.echojs.com/) -* [DailyJS](http://dailyjs.com/) -* [JavaScript Jabber](http://devchat.tv/js-jabber/) +* [JavaScript Live](https://jslive.com/) +* [JavaScript.com News](https://www.javascript.com/news) +* [Node Module Of The Week](https://nmotw.in) +* [JavascriptKicks](http://javascriptkicks.com) +* [5 Minutes of Javascript](https://fivejs.codeschool.com/) ## Pasting / sharing code * [Codepen](http://codepen.io/pen/) * [RequireBin](http://requirebin.com/) +* [ES6 Fiddle](http://www.es6fiddle.net/) +* [CodePicNic](https://codepicnic.com/) Embed interactive full-stack snippets & demos +* [JSBin](http://jsbin.com/?html,css,js,output) Embed editable code snippets. +* [jsFiddle](https://jsfiddle.net/) ## Contests @@ -186,7 +295,7 @@ Some of these links are affiliate links, meaning that if you make a purchase, I * [JS1k](http://js1k.com/) JavaScript demos in 1k of memory * [JS13k Games](http://js13kgames.com/) JavaScript games in 13k of memory * [FightCode game](http://fightcodegame.com/) program virtual battle bots and climb the leaderboard -* [Node Knockout](http://nodeknockout.com/) The legendary Node competition +* [Node Knockout](http://www.nodeknockout.com/) The legendary Node competition ## Hackable Hardware @@ -196,38 +305,47 @@ Some of these links are affiliate links, meaning that if you make a purchase, I * [Nodecopter](http://www.nodecopter.com/) * [Tessel](https://tessel.io/) * [Espruino](http://www.espruino.com/) +* [Onion Omega](https://onion.io/omega) ## Hosting * [DigitalOcean](https://www.digitalocean.com/?refcode=fdcfedac5208) +* [Heroku](https://www.heroku.com) -## For kids (and people who just love to have fun) +## For kids (and adults who just love to have fun) * [JavaScript for Kids](http://www.amazon.com/gp/product/B00QL616QE?ie=UTF8&camp=213733&creative=393177&creativeASIN=B00QL616QE&linkCode=shr&tag=ericleads-20&linkId=6AOODC27L6URY3K2) +* [Screeps](https://screeps.com/) A strategy game you control by writing JavaScript +* [CodingGame](https://www.codingame.com) Programming puzzle games +* [Fightcode](http://fightcodegame.com/) Program robots to do battle * [LearnToMod](http://www.learntomod.com/) Mod Minecraft with JavaScript +* [The Young Person's Guide to Programming in Minecraft](https://github.com/walterhiggins/ScriptCraft/blob/master/docs/YoungPersonsGuideToProgrammingMinecraft.md#the-young-persons-guide-to-programming-in-minecraft) +* [CodeCombat](https://codecombat.com/) RPG adventure controlled by JavaScript -## Twitter (alphabetical order) +## Essential Twitter (alphabetical order) -* [Addy Osmani](https://twitter.com/addyosmani) - App architecture expert, Chrome dev tools champion -* [Angus Croll](https://twitter.com/angustweets) - Author, "If Hemingway Wrote JavaScript" -* [Axel Rauschmayer](https://twitter.com/rauschma) - ES Next evangelist, author -* [Brendan Eich](https://twitter.com/BrendanEich) - Created JavaScript -* [David Nolen](https://twitter.com/swannodette) - Great functional programming content -* [David Herman](https://twitter.com/littlecalculist) - Author, "Effective JavaScript" -* [EchoJS](https://twitter.com/echojs) - News and links -* [Eric Elliott](https://twitter.com/_ericelliott) - That's me. O'Reilly author. JavaScript architect. JS Instructor. -* [Jafar Husain](https://twitter.com/jhusain) - Great talks on RxJS, ES next, etc... +* [Addy Osmani](https://twitter.com/addyosmani) App architecture expert, Chrome dev tools champion +* [Angus Croll](https://twitter.com/angustweets) Author, "If Hemingway Wrote JavaScript" +* [Axel Rauschmayer](https://twitter.com/rauschma) ES Next evangelist, author +* [Brendan Eich](https://twitter.com/BrendanEich) Created JavaScript +* [David Herman](https://twitter.com/littlecalculist) Author, "Effective JavaScript" +* [David Nolen](https://twitter.com/swannodette) Great functional programming content +* [EchoJS](https://twitter.com/echojs) News and links +* [Eric Elliott](https://twitter.com/_ericelliott) That's me. O'Reilly author. JavaScript architect. JS Instructor. +* [Jafar Husain](https://twitter.com/jhusain) Great talks on RxJS, ES next, etc... * [James Halliday](https://twitter.com/substack) aka Substack - author of ~one million~ Node modules you probably use. -* [James Long](https://twitter.com/jlongster) - CSP, functional programming advocate, Mozilla developer -* [JavaScript Cheerleader](https://twitter.com/JS_Cheerleader) - Mover & shaker, JavaScript evangelist, documentary film maker -* [JavaScript Daily](https://twitter.com/JavaScriptDaily) - News and links -* [Jordan Harband](https://twitter.com/ljharb) - Keeping us ahead of the JS curve -* [Kyle Simpson](https://twitter.com/getify) - Author, YDKJS - O'Reilly, JS Instructor, open web evangelist -* [Marijn Haverbeke](https://twitter.com/marijnjh) - Author, "Eloquent JavaScript" -* [Nicholas C. Zakas](https://twitter.com/slicknet) - Author, speaker -* [Nick Morgan](https://twitter.com/skilldrick) - Author, "JavaScript for Kids" -* [Paul Irish](https://twitter.com/paul_irish) - Developer evangelist, Chrome dev tools champion -* [Reginald Braithwaite](https://twitter.com/raganwald) - Author, "JavaScript Allongé", speaker, GitHub -* [YDKJS](https://twitter.com/ydkjs) - You Don't Know JS, O'Reilly book series by Kyle Simpson +* [James Long](https://twitter.com/jlongster) CSP, functional programming advocate, Mozilla developer +* [JavaScript Cheerleader](https://twitter.com/JS_Cheerleader) Mover & shaker, JavaScript evangelist, documentary film maker +* [JavaScript Daily](https://twitter.com/JavaScriptDaily) News and links +* [JavaScriptKicks](https://twitter.com/JavaScriptKicks) News and links +* [Jordan Harband](https://twitter.com/ljharb) Keeping us ahead of the JS curve +* [JS Cheerleader](https://twitter.com/js_cheerleader) Tech agent & JavaScript community champion +* [Marijn Haverbeke](https://twitter.com/marijnjh) Author, "Eloquent JavaScript" +* [Nicholas C. Zakas](https://twitter.com/slicknet) Author, speaker +* [Nick Morgan](https://twitter.com/skilldrick) Author, "JavaScript for Kids" +* [Nicolas Bevacqua](https://twitter.com/nzgb) Author "JavaScript Application Design", Speaker, Open-Source Evangelist +* [Paul Irish](https://twitter.com/paul_irish) Developer evangelist, Chrome dev tools champion +* [Reginald Braithwaite](https://twitter.com/raganwald) Author, "JavaScript Allongé", speaker, PagerDuty +* [YDKJS](https://twitter.com/ydkjs) You Don't Know JS, O'Reilly book series by Kyle Simpson diff --git a/categories/augmented-reality/index.md b/categories/augmented-reality/index.md new file mode 100644 index 0000000..3a1a2c7 --- /dev/null +++ b/categories/augmented-reality/index.md @@ -0,0 +1,14 @@ + +## Community + +* [W3C Augmented Reality Community Group](https://www.w3.org/community/ar/) + +## Code +* [Getting Started in VR with JS](https://www.youtube.com/watch?v=oroAoCuCc74) #video +* [WebVR Boilerplate](http://smus.com/responsive-vr/) +* [W3C AR Community Demos](https://www.w3.org/community/ar/demos-and-projects/) +* [Tracking.js](https://github.com/eduardolundgren/tracking.js/) Computer vision library with several algorithms to choose from #code +* [awe.js](https://github.com/buildar/awe.js) Location, Marker, Oculus Rift, Leap, Google Glass, texture mapped projections #code +* [clmtrackr](https://github.com/auduno/clmtrackr) Facial feature tracking #code +* [Gest.js](https://github.com/hadimichael/gest.js) Gesture recognition #code +* [Vizor.io](http://vizor.io/) Web-based OSS VR content editor #code diff --git a/contributing.md b/contributing.md new file mode 100644 index 0000000..c5e0003 --- /dev/null +++ b/contributing.md @@ -0,0 +1,101 @@ +# Contributing Guide + +These resources will be used by JavaScript developers of all levels to learn the language itself, the best programming practices and the essential libraries, frameworks and tools that are part of the modern JS scene. + +One of the reasons for this program is to make these materials available for use by housing-first job training programs for the homeless, but there's no reason not to use them by anyone interested. + +Please read [Fighting Poverty with Code](https://medium.com/javascript-scene/fighting-poverty-with-code-d1ed3ebd982d) and [The Cure for Homelessness](https://medium.com/end-homelessness/the-cure-for-homelessness-83ef0d621c71) to learn how this project got started. + + +## Order + +Keep the content in learning order, wherever feasible. If a certain section can comprise a learning track, it should be the most logical track possible. + + +## Quality Standard + +We're looking for only the best of the best material. We're not trying to collect every free resource available in the world. That's Google's job. Our job is to help the learners navigate JavaScript landscape and figure out the best, most effective tracks. This collection of links should make it easier for them, not harder. So please, don't try to add your latest blog post unless you really are one of the world-leading experts in your field. + +If you think one of the existing resources could be replaced with something better, but you're not sure what that is yet, please [nominate it for replacement](https://github.com/ericelliott/essential-javascript-links/issues/new?title=[Replace?]). Copy and paste the item that needs replacing in the issue body. + + +### How do I know if it's OK to submit other people's content? + +Ask yourself: + +* "Would an industry expert submit this?" +* "Is this topic covered **better** by one of the other resources listed with the same hashtag?" + +Remember, we're trying to create a cohesive curriculum. If there's already a better resource that teaches the same topic, that knowledge is already covered, so there's no need for you to submit something else. + +But if you know that what you're submitting is a **better resource**, please contribute! We'll always welcome a better resource. + + +### How do I know if it's OK to submit my own content? + +The "other people's content" guidelines still apply, along with: + +* Do you teach at a highly respected school known to produce the world's best talent? +* Do you get invited to speak at major industry conferences a lot? +* Have you been published by one of the top industry publishers? +* Does your blog attract 100,000+ unique pageviews? +* Do you have more than 10k social media followers, and share primarily related content? + +If you answered yes to at least three questions, go ahead and submit content that you produced. + + +### What if I'm not sure? + +Open [an issue](https://github.com/ericelliott/essential-javascript-links/issues/new?title=[Please%20review]) and ask for an expert to review your contribution. Make sure the text, `[Please review]` appears in the title. + + +## What kind of content should I contribute? + +We're primarily interested in a few types of content. You'll tell us what kind of content you're contributing by adding a hashtag at the end — like Twitter or Facebook. + +* Video Shorter is better. 5-15 minutes works best. **#video** +* Book. Only add books that are available for free online. **#book** +* Article. Blog post? Book excerpt? Paper? The hashtag you want is **#article** +* Tutorial. A tutorial is a mix of text content and instructions for the reader to follow. **#tutorial** +* Example. A demo or example implementation of something. **#example** +* Exercises. Just like tutuorials, but exercises tell the student when something is wrong and let them try to fix it. e.g. [learnrx](http://jhusain.github.io/learnrx/) **#exercises** +* Project. A resource that describes a project for a student and lets the student complete it. **#project** +* Game. A game designed to teach the student how to do something. **#game** +* Infographic. A graphical visualization of information, somtimes connecting several data sets to reveal a larger picture. **#infographic** +* Community. An online place for students to meet other people interested in the topic so they can learn from each other. **#community** +* News. A resource that lets the student track current developments about the topic. **#news** +* Collection. An expert-curated collection of resources for a particular topic (like this one!). **#collection** +* Course. A full course curriculum, typically put together for an educational organization such as a university, or online school. **#course** +* Tool. A code editor, a builder, a linter, a debug suite and so on. **#tool** +* Library. Or framework. Something like Underscore, jQuery or React. **#library** + +It's possible for a link to belong to multiple types of content. But please keep types to a minimum. You don't have to add an **#article** tag to a **#tutorial**. Simply use the most specific type applicable and leave multiple type tags for dire cases like this: + +> [Eloquent Javascript](http://eloquentjavascript.net/index.html) by Martin Haverbeke #book #excercises + +## Additional hashtags + +### Level +**#beginner**, **#intermediate** or **#advanced** + +### Just tags +While some hashtags are reserved for level or type of content, you can (and probably should) add a few more meaningful tags to make it easier for visitors to filter our collection. Your tags may denote platforms like **#node** or **#react**, domains like **#frontend** or **#backend**, concerns like **#testing** or **#building** etc. + +Multi-word tags should be delimited by underscores, like **#javascript_environments** or **#hackable_hardware**. + +## Example Learning Track + +### JavaScript Basics + +* [Why JavaScript?](https://vimeo.com/101269995) by [Eric Elliott](https://twitter.com/_ericelliott) #video +* [JavaScript for Cats](https://medium.com/javascript-scene/learn-javascript-b631a4af11f2) by [Max Ogden](http://jsforcats.com/) #tutorial #vanilla #beginner +* [Eloquent JavaScript](http://eloquentjavascript.net/) by [Marijn Haverbeke](marijnjh) #book + +## Example Reference Collection + +### Transpilers + +* [Babel](https://github.com/babel/babel) Transpile ES6, ES7 to ES5. #tool #ES6 #ES2015 +* [CoffeeScript](http://coffeescript.org/) The very concise language that compiles to JS. #tool #language +* [Emscripten](http://kripken.github.io/emscripten-site/) Frequently used for C/C++ JavaScript ports. #tool #language #C +* [ES6 tools] Addy Osmani’s ES6 Tools list #tool #collection #ES6 #ES2015 diff --git a/doc/EJSL Func Spec.md b/doc/EJSL Func Spec.md new file mode 100644 index 0000000..d128f16 --- /dev/null +++ b/doc/EJSL Func Spec.md @@ -0,0 +1,127 @@ +# Essential JavaScript Links Func Spec + +## Disclaimer + +This document is a work in progress, so don't expect it to be complete yet. Feel free to ask away. + +Also note that there is no separate technical specification, at least for now. So all the technical decisions are put here. This might change if the volume of this spec--or the dev team--grows significantly. + +## Features + +### Links Metadata: + - Title + - Href + - Author (optional) + - Screenshot url + - Short description + - Long description (optional, defaults to short description) + - Rank (invisible for viewers) + - Categories (there may be more than one. links are grouped by them, but not in filtered views) + - Level (labelled as "Good for:". Values are: "Beginners", "Intermediate" and "Advanced") + - Tags (a list) + +**Technicality**: Here's an example of a link record with full metadata (well, short of that screenshot image url): +```JavaScript + { + "title": "The Dream Machine: J.C.R. Licklider and the Revolution That Made Computing Personal", + "href": "http://www.amazon.com/gp/product/0670899763?ie=UTF8&camp=213733&creative=393177&creativeASIN=0670899763&linkCode=shr&tag=ericleads-20&linkId=NDUXYQOCMPC47SQI", + "author": "M. Mitchell Waldrop", + "short_description": "A man that made computing personal (not Jobs).", + "long_description": "In 1962, decades before \"personal computers\" and \"Internet\" became household words, the revolution that gave rise to both of them was set in motion from a small, nondescript office in the depths of the Pentagon.", + "rank": 1, + "categories": [ + "Books" + ], + "level": "Beginners", + "tags": [ + "history", + "biography", + "revolution" + ] + } +``` + +### Links sorting and filtering + +#### Rank for sorting order +Every link has a rank property that is used as a default sort order, from the highest rank to the lower. A rank is an abstract value invisible to viewers. It might mean a preferred order of learning for some categories (like _Books_) or popularity and importance for some other (like _Libraries_). + +When grouping links by category, we sort inside a category, when showing filtered links, we sort among the filtering/search results. + +**Technicality**: Rank ranges from 0 to 10. Links missing a `rank` property are considered the lowest rank and are shown last. + +#### Searching and filtering +You can search: +* by title +* by title and description +* by tags + +You can filter: +* by difficulty +* by suggested/curated +* by platform (frontend/backend/desktop etc.) +* by rating (for suggested links) + +(There's basically no borderline between searching and filtering. We can have both at once _and_ we might present it in one panel.) + +## Presentation +### Displaying links by category + +This is what you get by default: a bunch of links listed by _Category_. Every category has its name as a header and a list of links as its body. + +**Technicality**: The order of categories is defined by the `linkCategories` array (so far taken from `/src/data/the-big-data.json`). + +You can expand and collapse individual categories (group of links). When all the categories are collapsed, you just scroll through a list of categories. A useful thing to do on mobile. +(On bigger screens you might want to use a pull down list of categories to the same effect.) + +On mobile or tablet, when a categoryful of links is expanded, its header sticks to the top of the viewport until we reach the end of the list and move on to the next list. + +### Displaying the filtering/search/tag results + +If there's a search/filter applied, we don't group links by category. Then we display category (or categories, if a link belongs to a few) in every link's metadata. + +### The links themselves +Links have compact and expanded view. + +#### Compact view + +In compact view, links behave like list items. You scroll lists of compact links. A compact link consist of: + +* Title (with active a href) +* Author (optional) +* Short description +* List of tags +* Level (who ist good for: beginners | intermediate | advanced) + +When a list (of contracted links) is expanded and you scroll down past it, the next list automatically expands and the list above collapses. That way you can scroll through all the links in the collection. + +#### Expanded view + +Expanded links (with added screenshot and a full description instead of a short one) basically behave like cards. + +On mobile you view cards one at a time and scroll through them horizontally. A vertical scroll moves you to the next category. + +On tablets and above we show a few cards across and scroll through them vertically. (Maybe allow for horizontal scroll too: a whole row moves left, another moves in from the right, the row below, if it's visible, also shifts one row to the left etc.) + +_(What's the exact moment when we decide the list is over? When the next header reaches the middle of the viewport? Earlier? Later? What about when we scroll up?)_ + +There's a _Submit a link_ link at the end of every list. And it sets the _Category_ property in the _Submit a link_ form to the category in which we . + +There's a tab-like set of links above all the lists: "Show: curated | submitted | both". It doesn't stay as we scroll down and its functionality is doubled in the Search/filter panel. + +### The Search/Filtering panel + +There is one panel, with textual search and filters. + +_(We could have two, where the search panel would include all the filters, but then what happens when we reset the search? Should the filters also be reset? Besides, is filtering by tags a filter or a search? Or do we treat tags separately?)_ + +It has: +* A text input for _Search_ or _Contains_ +* A tick for _Title only_ +* A smart input for _Tags_ (with hints) +* A drop down list for _Difficulty level_ +* Ditto for _Suggested/curated/both_ +* A list box (with multiple selection) for _Platform_ +* A _Show the links_ button +* A _Reset filters_ button + diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..4e302ac --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,69 @@ +var gulp = require('gulp'), + autoprefixer = require('autoprefixer-core'), + data = require('gulp-data'), + ghPages = require('gh-pages'), + jade = require('gulp-jade'), + lodash = require('lodash'), + postcss = require('gulp-postcss'), + path = require('path'), + sass = require('gulp-sass'), + sourcemaps = require('gulp-sourcemaps'), + watch = require('gulp-watch') + +var paths = { + sass: ['./src/sass/**/*.scss'], + assets: ['./src/assets/*.*'], + js: ['./src/js/**/*.js'], + dist: './dist' +}; + +var cfg = { + autoprefixer: { browsers: ['last 2 version'] }, + jade: { pretty: true, + debug: false, + compileDebug: false + } +}; + +gulp.task('sass', function () { + return gulp.src(paths.sass) + .pipe(sourcemaps.init()) + .pipe(sass()) + .pipe( postcss([ autoprefixer(cfg.autoprefixer) ]) ) + .pipe( sourcemaps.write('maps') ) + .pipe( gulp.dest(path.join(paths.dist, 'css')) ); +}); + +gulp.task('assets', function() { + return gulp.src(paths.assets) + .pipe(gulp.dest(paths.dist)); +}); + +gulp.task('templates', function() { + return gulp.src('./src/jade/*.jade') + .pipe(data( function(file) { + var json = {}; + json.bigData = require('./src/data/essential-javascript-links.json'); + json._ = lodash; + return json; + } )) + .pipe(jade( cfg.jade )) + .pipe(gulp.dest(paths.dist)); +}); + +gulp.task('js', function() { + return gulp.src(paths.js) + .pipe( gulp.dest(path.join(paths.dist, 'js')) ); +}); + +gulp.task('deploy', function() { + ghPages.publish(paths.dist); +}); + +// Rerun the task when a file changes +gulp.task('watch', function() { + gulp.watch('./src/**/*', ['sass', 'assets', 'templates', 'js']); +}); + +// The default task (called when you run `gulp` from cli) +gulp.task('default', ['sass', 'assets', 'templates', 'js']); diff --git a/package.json b/package.json index 75d41e4..f7f124c 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "0.0.1", "description": "Essential JavaScript Links website.", "scripts": { - "cleanup": "cat README.md | node scripts/cleanup.js > build/README.md" + "cleanup": "cat README.md | node scripts/cleanup.js > build/README.md", + "md-import": "node scripts/md-import.js README.md src/data/essential-javascript-links.json" }, "engines": { "node": "0.10.x" @@ -16,5 +17,23 @@ "license": "MIT", "bugs": { "url": "https://github.com/ericelliott/essential-javascript-links/issues" + }, + "files": [], + "dependencies": { + "lodash": "^3.8.0" + }, + "devDependencies": { + "autoprefixer-core": "^5.1.10", + "gh-pages": "^0.3.0", + "gulp": "^3.8.11", + "gulp-data": "^1.2.0", + "gulp-jade": "^1.0.0", + "gulp-postcss": "^5.1.3", + "gulp-print": "^1.1.0", + "gulp-sass": "^1.3.3", + "gulp-sourcemaps": "^1.5.1", + "gulp-watch": "^4.2.4", + "lazy.js": "^0.4.0", + "node-sass": "^2.1.1" } } diff --git a/scripts/md-import.js b/scripts/md-import.js new file mode 100644 index 0000000..ba4aaf4 --- /dev/null +++ b/scripts/md-import.js @@ -0,0 +1,166 @@ +/* + How it _should_ work: + - if the old/additional json exists, open and index it (by href) + - open and cleanup the markdown + - iterate over lines: + - case category: allCategories.push, make current + - case link: merge with old meta, link.categories.push[cat], allLinks.push + - stringify and write + */ + +;(function md_import() { + var FS = require('fs'), + Path = require('path'), + _ = require('lodash'); + + var argv = process.argv, + cfg = { + linksID: 'links', + catsID: 'categories', + spaces: 2, + source: argv[2], + destination: argv[3] + }, + oldLinks, newTree, md; + + // check cli arguments + if ( !(cfg.source) || !(cfg.destination) ) + return console.error('Usage: '); + + // try and import the old JSON data (or at leas create structure) + oldLinks = readOldLinks(Path.resolve(cfg.destination)); + + // read and parse markdown (merging the old JSON) + md = getMdLines(Path.resolve(cfg.source)); + newTree = parseMarkdown(md, oldLinks); + + // write the JSON + writeJson(cfg.destination, newTree, cfg.spaces); + + + function readOldLinks(file) { + var links; + + try { + links = JSON.parse(FS.readFileSync(file, {encoding: 'utf8'}))[cfg.linksID]; + } + catch (e) { + links = []; + } + + return links; + } + + function getMdLines(file) { + var buffer = ''; + + try { + buffer = FS.readFileSync(file, {encoding: 'UTF-8', flag: 'r'}); + } + catch (e) { + console.error('Couldn\'t open ' + Path.resolve(file)); + process.exit(1); + } + + return inputCleanup(buffer).split(/\r?\n/); + } + + function inputCleanup(string) { + var replacementPairs = [ + { searchFor: /'d\b/g, replaceWith: "\u2019d"}, // I'd + { searchFor: /'ll\b/g, replaceWith: "\u2019ll"}, // you'll + { searchFor: /'m\b/g, replaceWith: "\u2019m"}, // I'm + { searchFor: /'re\b/g, replaceWith: "\u2019re"}, // you're + { searchFor: /'s\b/g, replaceWith: "\u2019s"}, // it's + { searchFor: /s'(\s)/g, replaceWith: "s\u2019$1"}, // plural possessive + { searchFor: /'t\b/g, replaceWith: "\u2019t"}, // don't + { searchFor: /'ve\b/g, replaceWith: "\u2019ve"}, // I've + { searchFor: /(\s)'(\d\ds)/g, replaceWith: "$1\u2019$2"}, // '90s + { searchFor: /O'([A-Z])/g, replaceWith: "O\u2019$1"}, // O'Reilly + { searchFor: /",/g, replaceWith: ',\u201D'}, // comma outside quote mark + { searchFor: /"\./g, replaceWith: '.\u201D'}, // period outside quote mark (transpose only) + { searchFor: /"\b/g, replaceWith: '\u201C'}, // open quote (eg, precedes a 'word boundary') + { searchFor: /\b"/g, replaceWith: '\u201D'}, // close quote (eg, is preceded by a 'word boundary') + { searchFor: /\b([\.|,|\?|!|;|:|-|—])"/g, replaceWith: '$1\u201D'}, // close quote after punctuation (which is itself preceded by a 'word boundary') + { searchFor: / - /g, replaceWith: " — "} // em dash with spaces surrounding it + ]; + + replacementPairs.forEach(function(replacement) { + string = string.replace(replacement.searchFor, replacement.replaceWith); + }) + return string; + } + + function parseMarkdown(lines, oldLinks) { + var categories = [], + links = [], + cat = '-', + tree = {}, + linksIndex = {}, + oldLinksIndex = _.indexBy(oldLinks, 'href'), + catCounters = {}; + + lines.forEach(parseLine); + tree[cfg.linksID] = links; + // Only include the non-empty category candidates. + // We can't know if a header is a category header until we count its links. + tree[cfg.catsID] = _.filter(categories, function(c) {return catCounters[c]}); + return tree; + + + function parseLine(line) { + var match, link, meta, href; + + if ( match = line.match(/^\s*#+\s(.*)$/) ) { + // Category header + categories.push(cat = match[1]); + catCounters[cat] = 0; + } else if ( match = line.match(/^\s*[\*\+\-]\s+\[(.+?)\]\((.+?)\)(\s+(.*))?$/) ) { + href = match[2]; + + // check for dupes + if (_.has(linksIndex, href)) { + if (!(_.includes(categories, cat))) { + // we've seen the link, but not under this category + linksIndex[href].categories.push(cat); + catCounters[cat]++; + } + return; + } + + link = { + title: match[1], + href: href, + short_description: match[4], + categories: [cat] + }; + + // merge old meta + if (meta = oldLinksIndex[href]) { + meta.categories = []; // lodash merge is deep — not what we want + link = _.merge(meta, link); + } + + // console.log(href, meta); + + links.push(link); + linksIndex[href] = link; + catCounters[cat]++; + } + } + } + + function writeJson(file, tree, spaces) { + spaces || (spaces = 2); + var theBigString = JSON.stringify(tree, null, spaces); + + try { + FS.writeFileSync(file, theBigString, {encoding: 'utf8'}); + } + catch (e) { + console.error('Couldn\'t write' + Path.resolve(jsonOutPath)); + process.exit(1); + } + } + +})(); \ No newline at end of file diff --git a/src/assets/.htaccess b/src/assets/.htaccess new file mode 100644 index 0000000..c066aab --- /dev/null +++ b/src/assets/.htaccess @@ -0,0 +1,998 @@ +# Apache Server Configs v2.13.0 | MIT License +# https://github.com/h5bp/server-configs-apache + +# (!) Using `.htaccess` files slows down Apache, therefore, if you have +# access to the main server configuration file (which is usually called +# `httpd.conf`), you should add this logic there. +# +# https://httpd.apache.org/docs/current/howto/htaccess.html. + +# ###################################################################### +# # CROSS-ORIGIN # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Cross-origin requests | +# ---------------------------------------------------------------------- + +# Allow cross-origin requests. +# +# https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS +# http://enable-cors.org/ +# http://www.w3.org/TR/cors/ + +# +# Header set Access-Control-Allow-Origin "*" +# + +# ---------------------------------------------------------------------- +# | Cross-origin images | +# ---------------------------------------------------------------------- + +# Send the CORS header for images when browsers request it. +# +# https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image +# https://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html + + + + + SetEnvIf Origin ":" IS_CORS + Header set Access-Control-Allow-Origin "*" env=IS_CORS + + + + +# ---------------------------------------------------------------------- +# | Cross-origin web fonts | +# ---------------------------------------------------------------------- + +# Allow cross-origin access to web fonts. + + + + Header set Access-Control-Allow-Origin "*" + + + +# ---------------------------------------------------------------------- +# | Cross-origin resource timing | +# ---------------------------------------------------------------------- + +# Allow cross-origin access to the timing information for all resources. +# +# If a resource isn't served with a `Timing-Allow-Origin` header that +# would allow its timing information to be shared with the document, +# some of the attributes of the `PerformanceResourceTiming` object will +# be set to zero. +# +# http://www.w3.org/TR/resource-timing/ +# http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/ + +# +# Header set Timing-Allow-Origin: "*" +# + + +# ###################################################################### +# # ERRORS # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Custom error messages/pages | +# ---------------------------------------------------------------------- + +# Customize what Apache returns to the client in case of an error. +# https://httpd.apache.org/docs/current/mod/core.html#errordocument + +ErrorDocument 404 /404.html + +# ---------------------------------------------------------------------- +# | Error prevention | +# ---------------------------------------------------------------------- + +# Disable the pattern matching based on filenames. +# +# This setting prevents Apache from returning a 404 error as the result +# of a rewrite when the directory with the same name does not exist. +# +# https://httpd.apache.org/docs/current/content-negotiation.html#multiviews + +Options -MultiViews + + +# ###################################################################### +# # INTERNET EXPLORER # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Document modes | +# ---------------------------------------------------------------------- + +# Force Internet Explorer 8/9/10 to render pages in the highest mode +# available in the various cases when it may not. +# +# https://hsivonen.fi/doctype/#ie8 +# +# (!) Starting with Internet Explorer 11, document modes are deprecated. +# If your business still relies on older web apps and services that were +# designed for older versions of Internet Explorer, you might want to +# consider enabling `Enterprise Mode` throughout your company. +# +# https://msdn.microsoft.com/en-us/library/ie/bg182625.aspx#docmode +# http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx + + + + Header set X-UA-Compatible "IE=edge" + + # `mod_headers` cannot match based on the content-type, however, + # the `X-UA-Compatible` response header should be send only for + # HTML documents and not for the other resources. + + + Header unset X-UA-Compatible + + + + +# ---------------------------------------------------------------------- +# | Iframes cookies | +# ---------------------------------------------------------------------- + +# Allow cookies to be set from iframes in Internet Explorer. +# +# https://msdn.microsoft.com/en-us/library/ms537343.aspx +# http://www.w3.org/TR/2000/CR-P3P-20001215/ + +# +# Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"" +# + + +# ###################################################################### +# # MEDIA TYPES AND CHARACTER ENCODINGS # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Media types | +# ---------------------------------------------------------------------- + +# Serve resources with the proper media types (f.k.a. MIME types). +# +# https://www.iana.org/assignments/media-types/media-types.xhtml +# https://httpd.apache.org/docs/current/mod/mod_mime.html#addtype + + + + # Data interchange + + AddType application/atom+xml atom + AddType application/json json map topojson + AddType application/ld+json jsonld + AddType application/rss+xml rss + AddType application/vnd.geo+json geojson + AddType application/xml rdf xml + + + # JavaScript + + # Normalize to standard type. + # https://tools.ietf.org/html/rfc4329#section-7.2 + + AddType application/javascript js + + + # Manifest files + + # If you are providing a web application manifest file (see + # the specification: https://w3c.github.io/manifest/), it is + # recommended that you serve it with the `application/manifest+json` + # media type. + # + # Because the web application manifest file doesn't have its + # own unique file extension, you can set its media type either + # by matching: + # + # 1) the exact location of the file (this can be done using a + # directive such as ``, but it will NOT work in + # the `.htaccess` file, so you will have to do it in the main + # server configuration file or inside of a `` + # container) + # + # e.g.: + # + # + # AddType application/manifest+json json + # + # + # 2) the filename (this can be problematic as you will need to + # ensure that you don't have any other file with the same name + # as the one you gave to your web application manifest file) + # + # e.g.: + # + # + # AddType application/manifest+json json + # + + AddType application/x-web-app-manifest+json webapp + AddType text/cache-manifest appcache + + + # Media files + + AddType audio/mp4 f4a f4b m4a + AddType audio/ogg oga ogg opus + AddType image/bmp bmp + AddType image/svg+xml svg svgz + AddType image/webp webp + AddType video/mp4 f4v f4p m4v mp4 + AddType video/ogg ogv + AddType video/webm webm + AddType video/x-flv flv + + # Serving `.ico` image files with a different media type + # prevents Internet Explorer from displaying then as images: + # https://github.com/h5bp/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee + + AddType image/x-icon cur ico + + + # Web fonts + + AddType application/font-woff woff + AddType application/font-woff2 woff2 + AddType application/vnd.ms-fontobject eot + + # Browsers usually ignore the font media types and simply sniff + # the bytes to figure out the font type. + # https://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern + # + # However, Blink and WebKit based browsers will show a warning + # in the console if the following font types are served with any + # other media types. + + AddType application/x-font-ttf ttc ttf + AddType font/opentype otf + + + # Other + + AddType application/octet-stream safariextz + AddType application/x-bb-appworld bbaw + AddType application/x-chrome-extension crx + AddType application/x-opera-extension oex + AddType application/x-xpinstall xpi + AddType text/vcard vcard vcf + AddType text/vnd.rim.location.xloc xloc + AddType text/vtt vtt + AddType text/x-component htc + + + +# ---------------------------------------------------------------------- +# | Character encodings | +# ---------------------------------------------------------------------- + +# Serve all resources labeled as `text/html` or `text/plain` +# with the media type `charset` parameter set to `UTF-8`. +# +# https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset + +AddDefaultCharset utf-8 + +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +# Serve the following file types with the media type `charset` +# parameter set to `UTF-8`. +# +# https://httpd.apache.org/docs/current/mod/mod_mime.html#addcharset + + + AddCharset utf-8 .atom \ + .bbaw \ + .css \ + .geojson \ + .js \ + .json \ + .jsonld \ + .rdf \ + .rss \ + .topojson \ + .vtt \ + .webapp \ + .xloc \ + .xml + + + +# ###################################################################### +# # REWRITES # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Rewrite engine | +# ---------------------------------------------------------------------- + +# (1) Turn on the rewrite engine (this is necessary in order for +# the `RewriteRule` directives to work). +# +# https://httpd.apache.org/docs/current/mod/mod_rewrite.html#RewriteEngine +# +# (2) Enable the `FollowSymLinks` option if it isn't already. +# +# https://httpd.apache.org/docs/current/mod/core.html#options +# +# (3) If your web host doesn't allow the `FollowSymlinks` option, +# you need to comment it out or remove it, and then uncomment +# the `Options +SymLinksIfOwnerMatch` line (4), but be aware +# of the performance impact. +# +# https://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks +# +# (4) Some cloud hosting services will require you set `RewriteBase`. +# +# https://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-modrewrite-not-working-on-my-site +# https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase +# +# (5) Depending on how your server is set up, you may also need to +# use the `RewriteOptions` directive to enable some options for +# the rewrite engine. +# +# https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewriteoptions +# +# (6) Set %{ENV:PROTO} variable, to allow rewrites to redirect with the +# appropriate schema automatically (http or https). + + + + # (1) + RewriteEngine On + + # (2) + Options +FollowSymlinks + + # (3) + # Options +SymLinksIfOwnerMatch + + # (4) + # RewriteBase / + + # (5) + # RewriteOptions + + # (6) + RewriteCond %{HTTPS} =on + RewriteRule ^ - [env=proto:https] + RewriteCond %{HTTPS} !=on + RewriteRule ^ - [env=proto:http] + + + +# ---------------------------------------------------------------------- +# | Forcing `https://` | +# ---------------------------------------------------------------------- + +# Redirect from the `http://` to the `https://` version of the URL. +# https://wiki.apache.org/httpd/RewriteHTTPToHTTPS + +# +# RewriteEngine On +# RewriteCond %{HTTPS} !=on +# RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L] +# + +# ---------------------------------------------------------------------- +# | Suppressing / Forcing the `www.` at the beginning of URLs | +# ---------------------------------------------------------------------- + +# The same content should never be available under two different +# URLs, especially not with and without `www.` at the beginning. +# This can cause SEO problems (duplicate content), and therefore, +# you should choose one of the alternatives and redirect the other +# one. +# +# By default `Option 1` (no `www.`) is activated. +# http://no-www.org/faq.php?q=class_b +# +# If you would prefer to use `Option 2`, just comment out all the +# lines from `Option 1` and uncomment the ones from `Option 2`. +# +# (!) NEVER USE BOTH RULES AT THE SAME TIME! + +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +# Option 1: rewrite www.example.com → example.com + + + RewriteEngine On + RewriteCond %{HTTPS} !=on + RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] + RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L] + + +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +# Option 2: rewrite example.com → www.example.com +# +# Be aware that the following might not be a good idea if you use "real" +# subdomains for certain parts of your website. + +# +# RewriteEngine On +# RewriteCond %{HTTPS} !=on +# RewriteCond %{HTTP_HOST} !^www\. [NC] +# RewriteCond %{SERVER_ADDR} !=127.0.0.1 +# RewriteCond %{SERVER_ADDR} !=::1 +# RewriteRule ^ %{ENV:PROTO}://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] +# + + +# ###################################################################### +# # SECURITY # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Clickjacking | +# ---------------------------------------------------------------------- + +# Protect website against clickjacking. +# +# The example below sends the `X-Frame-Options` response header with +# the value `DENY`, informing browsers not to display the content of +# the web page in any frame. +# +# This might not be the best setting for everyone. You should read +# about the other two possible values the `X-Frame-Options` header +# field can have: `SAMEORIGIN` and `ALLOW-FROM`. +# https://tools.ietf.org/html/rfc7034#section-2.1. +# +# Keep in mind that while you could send the `X-Frame-Options` header +# for all of your website’s pages, this has the potential downside that +# it forbids even non-malicious framing of your content (e.g.: when +# users visit your website using a Google Image Search results page). +# +# Nonetheless, you should ensure that you send the `X-Frame-Options` +# header for all pages that allow a user to make a state changing +# operation (e.g: pages that contain one-click purchase links, checkout +# or bank-transfer confirmation pages, pages that make permanent +# configuration changes, etc.). +# +# Sending the `X-Frame-Options` header can also protect your website +# against more than just clickjacking attacks: +# https://cure53.de/xfo-clickjacking.pdf. +# +# https://tools.ietf.org/html/rfc7034 +# http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx +# https://www.owasp.org/index.php/Clickjacking + +# + +# Header set X-Frame-Options "DENY" + +# # `mod_headers` cannot match based on the content-type, however, +# # the `X-Frame-Options` response header should be send only for +# # HTML documents and not for the other resources. + +# +# Header unset X-Frame-Options +# + +# + +# ---------------------------------------------------------------------- +# | Content Security Policy (CSP) | +# ---------------------------------------------------------------------- + +# Mitigate the risk of cross-site scripting and other content-injection +# attacks. +# +# This can be done by setting a `Content Security Policy` which +# whitelists trusted sources of content for your website. +# +# The example header below allows ONLY scripts that are loaded from +# the current website's origin (no inline scripts, no CDN, etc). +# That almost certainly won't work as-is for your website! +# +# To make things easier, you can use an online CSP header generator +# such as: http://cspisawesome.com/. +# +# http://content-security-policy.com/ +# http://www.html5rocks.com/en/tutorials/security/content-security-policy/ +# http://www.w3.org/TR/CSP11/). + +# + +# Header set Content-Security-Policy "script-src 'self'; object-src 'self'" + +# # `mod_headers` cannot match based on the content-type, however, +# # the `Content-Security-Policy` response header should be send +# # only for HTML documents and not for the other resources. + +# +# Header unset Content-Security-Policy +# + +# + +# ---------------------------------------------------------------------- +# | File access | +# ---------------------------------------------------------------------- + +# Block access to directories without a default document. +# +# You should leave the following uncommented, as you shouldn't allow +# anyone to surf through every directory on your server (which may +# includes rather private places such as the CMS's directories). + + + Options -Indexes + + +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +# Block access to all hidden files and directories with the exception of +# the visible content from within the `/.well-known/` hidden directory. +# +# These types of files usually contain user preferences or the preserved +# state of an utility, and can include rather private places like, for +# example, the `.git` or `.svn` directories. +# +# The `/.well-known/` directory represents the standard (RFC 5785) path +# prefix for "well-known locations" (e.g.: `/.well-known/manifest.json`, +# `/.well-known/keybase.txt`), and therefore, access to its visible +# content should not be blocked. +# +# https://www.mnot.net/blog/2010/04/07/well-known +# https://tools.ietf.org/html/rfc5785 + + + RewriteEngine On + RewriteCond %{REQUEST_URI} "!(^|/)\.well-known/([^./]+./?)+$" [NC] + RewriteCond %{SCRIPT_FILENAME} -d [OR] + RewriteCond %{SCRIPT_FILENAME} -f + RewriteRule "(^|/)\." - [F] + + +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +# Block access to files that can expose sensitive information. +# +# By default, block access to backup and source files that may be +# left by some text editors and can pose a security risk when anyone +# has access to them. +# +# http://feross.org/cmsploit/ +# +# (!) Update the `` regular expression from below to +# include any files that might end up on your production server and +# can expose sensitive information about your website. These files may +# include: configuration files, files that contain metadata about the +# project (e.g.: project dependencies), build scripts, etc.. + + + + # Apache < 2.3 + + Order allow,deny + Deny from all + Satisfy All + + + # Apache ≥ 2.3 + + Require all denied + + + + +# ---------------------------------------------------------------------- +# | HTTP Strict Transport Security (HSTS) | +# ---------------------------------------------------------------------- + +# Force client-side SSL redirection. +# +# If a user types `example.com` in their browser, even if the server +# redirects them to the secure version of the website, that still leaves +# a window of opportunity (the initial HTTP connection) for an attacker +# to downgrade or redirect the request. +# +# The following header ensures that browser will ONLY connect to your +# server via HTTPS, regardless of what the users type in the browser's +# address bar. +# +# (!) Remove the `includeSubDomains` optional directive if the website's +# subdomains are not using HTTPS. +# +# http://www.html5rocks.com/en/tutorials/security/transport-layer-security/ +# https://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1 +# http://blogs.msdn.com/b/ieinternals/archive/2014/08/18/hsts-strict-transport-security-attacks-mitigations-deployment-https.aspx + +# +# Header always set Strict-Transport-Security "max-age=16070400; includeSubDomains" +# + +# ---------------------------------------------------------------------- +# | Reducing MIME type security risks | +# ---------------------------------------------------------------------- + +# Prevent some browsers from MIME-sniffing the response. +# +# This reduces exposure to drive-by download attacks and cross-origin +# data leaks, and should be left uncommented, especially if the server +# is serving user-uploaded content or content that could potentially be +# treated as executable by the browser. +# +# http://www.slideshare.net/hasegawayosuke/owasp-hasegawa +# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx +# https://msdn.microsoft.com/en-us/library/ie/gg622941.aspx +# https://mimesniff.spec.whatwg.org/ + + + Header set X-Content-Type-Options "nosniff" + + +# ---------------------------------------------------------------------- +# | Reflected Cross-Site Scripting (XSS) attacks | +# ---------------------------------------------------------------------- + +# (1) Try to re-enable the cross-site scripting (XSS) filter built +# into most web browsers. +# +# The filter is usually enabled by default, but in some cases it +# may be disabled by the user. However, in Internet Explorer for +# example, it can be re-enabled just by sending the +# `X-XSS-Protection` header with the value of `1`. +# +# (2) Prevent web browsers from rendering the web page if a potential +# reflected (a.k.a non-persistent) XSS attack is detected by the +# filter. +# +# By default, if the filter is enabled and browsers detect a +# reflected XSS attack, they will attempt to block the attack +# by making the smallest possible modifications to the returned +# web page. +# +# Unfortunately, in some browsers (e.g.: Internet Explorer), +# this default behavior may allow the XSS filter to be exploited, +# thereby, it's better to inform browsers to prevent the rendering +# of the page altogether, instead of attempting to modify it. +# +# https://hackademix.net/2009/11/21/ies-xss-filter-creates-xss-vulnerabilities +# +# (!) Do not rely on the XSS filter to prevent XSS attacks! Ensure that +# you are taking all possible measures to prevent XSS attacks, the +# most obvious being: validating and sanitizing your website's inputs. +# +# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-iv-the-xss-filter.aspx +# http://blogs.msdn.com/b/ieinternals/archive/2011/01/31/controlling-the-internet-explorer-xss-filter-with-the-x-xss-protection-http-header.aspx +# https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29 + +# + +# # (1) (2) +# Header set X-XSS-Protection "1; mode=block" + +# # `mod_headers` cannot match based on the content-type, however, +# # the `X-XSS-Protection` response header should be send only for +# # HTML documents and not for the other resources. + +# +# Header unset X-XSS-Protection +# + +# + +# ---------------------------------------------------------------------- +# | Server-side technology information | +# ---------------------------------------------------------------------- + +# Remove the `X-Powered-By` response header that: +# +# * is set by some frameworks and server-side languages +# (e.g.: ASP.NET, PHP), and its value contains information +# about them (e.g.: their name, version number) +# +# * doesn't provide any value as far as users are concern, +# and in some cases, the information provided by it can +# be used by attackers +# +# (!) If you can, you should disable the `X-Powered-By` header from the +# language / framework level (e.g.: for PHP, you can do that by setting +# `expose_php = off` in `php.ini`) +# +# https://php.net/manual/en/ini.core.php#ini.expose-php + + + Header unset X-Powered-By + + +# ---------------------------------------------------------------------- +# | Server software information | +# ---------------------------------------------------------------------- + +# Prevent Apache from adding a trailing footer line containing +# information about the server to the server-generated documents +# (e.g.: error messages, directory listings, etc.) +# +# https://httpd.apache.org/docs/current/mod/core.html#serversignature + +ServerSignature Off + +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +# Prevent Apache from sending in the `Server` response header its +# exact version number, the description of the generic OS-type or +# information about its compiled-in modules. +# +# (!) The `ServerTokens` directive will only work in the main server +# configuration file, so don't try to enable it in the `.htaccess` file! +# +# https://httpd.apache.org/docs/current/mod/core.html#servertokens + +#ServerTokens Prod + + +# ###################################################################### +# # WEB PERFORMANCE # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Compression | +# ---------------------------------------------------------------------- + + + + # Force compression for mangled `Accept-Encoding` request headers + # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html + + + + SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding + RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding + + + + # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + # Compress all output labeled with one of the following media types. + # + # (!) For Apache versions below version 2.3.7 you don't need to + # enable `mod_filter` and can remove the `` + # and `` lines as `AddOutputFilterByType` is still in + # the core directives. + # + # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype + + + AddOutputFilterByType DEFLATE "application/atom+xml" \ + "application/javascript" \ + "application/json" \ + "application/ld+json" \ + "application/manifest+json" \ + "application/rdf+xml" \ + "application/rss+xml" \ + "application/schema+json" \ + "application/vnd.geo+json" \ + "application/vnd.ms-fontobject" \ + "application/x-font-ttf" \ + "application/x-javascript" \ + "application/x-web-app-manifest+json" \ + "application/xhtml+xml" \ + "application/xml" \ + "font/eot" \ + "font/opentype" \ + "image/bmp" \ + "image/svg+xml" \ + "image/vnd.microsoft.icon" \ + "image/x-icon" \ + "text/cache-manifest" \ + "text/css" \ + "text/html" \ + "text/javascript" \ + "text/plain" \ + "text/vcard" \ + "text/vnd.rim.location.xloc" \ + "text/vtt" \ + "text/x-component" \ + "text/x-cross-domain-policy" \ + "text/xml" + + + + # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + # Map the following filename extensions to the specified + # encoding type in order to make Apache serve the file types + # with the appropriate `Content-Encoding` response header + # (do note that this will NOT make Apache compress them!). + # + # If these files types would be served without an appropriate + # `Content-Enable` response header, client applications (e.g.: + # browsers) wouldn't know that they first need to uncompress + # the response, and thus, wouldn't be able to understand the + # content. + # + # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding + + + AddEncoding gzip svgz + + + + +# ---------------------------------------------------------------------- +# | Content transformation | +# ---------------------------------------------------------------------- + +# Prevent intermediate caches or proxies (e.g.: such as the ones +# used by mobile network providers) from modifying the website's +# content. +# +# https://tools.ietf.org/html/rfc2616#section-14.9.5 +# +# (!) If you are using `mod_pagespeed`, please note that setting +# the `Cache-Control: no-transform` response header will prevent +# `PageSpeed` from rewriting `HTML` files, and, if the +# `ModPagespeedDisableRewriteOnNoTransform` directive isn't set +# to `off`, also from rewriting other resources. +# +# https://developers.google.com/speed/pagespeed/module/configuration#notransform + +# +# Header merge Cache-Control "no-transform" +# + +# ---------------------------------------------------------------------- +# | ETags | +# ---------------------------------------------------------------------- + +# Remove `ETags` as resources are sent with far-future expires headers. +# +# https://developer.yahoo.com/performance/rules.html#etags +# https://tools.ietf.org/html/rfc7232#section-2.3 + +# `FileETag None` doesn't work in all cases. + + Header unset ETag + + +FileETag None + +# ---------------------------------------------------------------------- +# | Expires headers | +# ---------------------------------------------------------------------- + +# Serve resources with far-future expires headers. +# +# (!) If you don't control versioning with filename-based +# cache busting, you should consider lowering the cache times +# to something like one week. +# +# https://httpd.apache.org/docs/current/mod/mod_expires.html + + + + ExpiresActive on + ExpiresDefault "access plus 1 month" + + # CSS + ExpiresByType text/css "access plus 1 year" + + # Data interchange + ExpiresByType application/atom+xml "access plus 1 hour" + ExpiresByType application/rdf+xml "access plus 1 hour" + ExpiresByType application/rss+xml "access plus 1 hour" + + ExpiresByType application/json "access plus 0 seconds" + ExpiresByType application/ld+json "access plus 0 seconds" + ExpiresByType application/schema+json "access plus 0 seconds" + ExpiresByType application/vnd.geo+json "access plus 0 seconds" + ExpiresByType application/xml "access plus 0 seconds" + ExpiresByType text/xml "access plus 0 seconds" + + # Favicon (cannot be renamed!) and cursor images + ExpiresByType image/vnd.microsoft.icon "access plus 1 week" + ExpiresByType image/x-icon "access plus 1 week" + + # HTML + ExpiresByType text/html "access plus 0 seconds" + + # JavaScript + ExpiresByType application/javascript "access plus 1 year" + ExpiresByType application/x-javascript "access plus 1 year" + ExpiresByType text/javascript "access plus 1 year" + + # Manifest files + ExpiresByType application/manifest+json "access plus 1 year" + + ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" + ExpiresByType text/cache-manifest "access plus 0 seconds" + + # Media files + ExpiresByType audio/ogg "access plus 1 month" + ExpiresByType image/bmp "access plus 1 month" + ExpiresByType image/gif "access plus 1 month" + ExpiresByType image/jpeg "access plus 1 month" + ExpiresByType image/png "access plus 1 month" + ExpiresByType image/svg+xml "access plus 1 month" + ExpiresByType image/webp "access plus 1 month" + ExpiresByType video/mp4 "access plus 1 month" + ExpiresByType video/ogg "access plus 1 month" + ExpiresByType video/webm "access plus 1 month" + + # Web fonts + + # Embedded OpenType (EOT) + ExpiresByType application/vnd.ms-fontobject "access plus 1 month" + ExpiresByType font/eot "access plus 1 month" + + # OpenType + ExpiresByType font/opentype "access plus 1 month" + + # TrueType + ExpiresByType application/x-font-ttf "access plus 1 month" + + # Web Open Font Format (WOFF) 1.0 + ExpiresByType application/font-woff "access plus 1 month" + ExpiresByType application/x-font-woff "access plus 1 month" + ExpiresByType font/woff "access plus 1 month" + + # Web Open Font Format (WOFF) 2.0 + ExpiresByType application/font-woff2 "access plus 1 month" + + # Other + ExpiresByType text/x-cross-domain-policy "access plus 1 week" + + + +# ---------------------------------------------------------------------- +# | File concatenation | +# ---------------------------------------------------------------------- + +# Allow concatenation from within specific files. +# +# e.g.: +# +# If you have the following lines in a file called, for +# example, `main.combined.js`: +# +# +# +# +# Apache will replace those lines with the content of the +# specified files. + +# +# +# Options +Includes +# AddOutputFilterByType INCLUDES application/javascript \ +# application/x-javascript \ +# text/javascript +# SetOutputFilter INCLUDES +# +# +# Options +Includes +# AddOutputFilterByType INCLUDES text/css +# SetOutputFilter INCLUDES +# +# + +# ---------------------------------------------------------------------- +# | Filename-based cache busting | +# ---------------------------------------------------------------------- + +# If you're not using a build process to manage your filename version +# revving, you might want to consider enabling the following directives +# to route all requests such as `/style.12345.css` to `/style.css`. +# +# To understand why this is important and even a better solution than +# using something like `*.css?v231`, please see: +# http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/ + +# +# RewriteEngine On +# RewriteCond %{REQUEST_FILENAME} !-f +# RewriteRule ^(.+)\.(\d+)\.(bmp|css|cur|gif|ico|jpe?g|js|png|svgz?|webp)$ $1.$3 [L] +# diff --git a/src/assets/404.html b/src/assets/404.html new file mode 100644 index 0000000..8d7925a --- /dev/null +++ b/src/assets/404.html @@ -0,0 +1,60 @@ + + + + + Page Not Found + + + + +

Page Not Found

+

Sorry, but the page you were trying to view does not exist.

+ + + diff --git a/src/assets/apple-touch-icon.png b/src/assets/apple-touch-icon.png new file mode 100644 index 0000000..600738f Binary files /dev/null and b/src/assets/apple-touch-icon.png differ diff --git a/src/assets/browserconfig.xml b/src/assets/browserconfig.xml new file mode 100644 index 0000000..219b759 --- /dev/null +++ b/src/assets/browserconfig.xml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/crossdomain.xml b/src/assets/crossdomain.xml new file mode 100644 index 0000000..818b822 --- /dev/null +++ b/src/assets/crossdomain.xml @@ -0,0 +1,15 @@ + + + + + + + + + + + diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico new file mode 100644 index 0000000..be74abd Binary files /dev/null and b/src/assets/favicon.ico differ diff --git a/src/assets/humans.txt b/src/assets/humans.txt new file mode 100644 index 0000000..8d2330f --- /dev/null +++ b/src/assets/humans.txt @@ -0,0 +1,15 @@ +# humanstxt.org/ +# The humans responsible & technology colophon + +# TEAM + + -- -- + +# THANKS + + + +# TECHNOLOGY COLOPHON + + CSS3, HTML5 + Apache Server Configs, jQuery, Modernizr, Normalize.css diff --git a/src/assets/robots.txt b/src/assets/robots.txt new file mode 100644 index 0000000..d0e5f1b --- /dev/null +++ b/src/assets/robots.txt @@ -0,0 +1,5 @@ +# www.robotstxt.org/ + +# Allow crawling of all content +User-agent: * +Disallow: diff --git a/src/assets/tile-wide.png b/src/assets/tile-wide.png new file mode 100644 index 0000000..ccd739c Binary files /dev/null and b/src/assets/tile-wide.png differ diff --git a/src/assets/tile.png b/src/assets/tile.png new file mode 100644 index 0000000..f820f61 Binary files /dev/null and b/src/assets/tile.png differ diff --git a/src/data/essential-javascript-links.json b/src/data/essential-javascript-links.json new file mode 100644 index 0000000..f607fbf --- /dev/null +++ b/src/data/essential-javascript-links.json @@ -0,0 +1,1492 @@ +{ + "links": [ + { + "title": "Learn JavaScript Essentials (for all skill levels)", + "href": "https://medium.com/javascript-scene/learn-javascript-b631a4af11f2", + "short_description": "One clear path to JavaScript mastery", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "JavaScript Training Sucks", + "href": "https://medium.com/javascript-scene/javascript-training-sucks-284b53666245", + "short_description": "99 out of 100 JS developers lack the skills they need to fill hundreds of thousands of jobs. We can change that.", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "The Two Pillars of JavaScript Part 1: Prototypal OO", + "href": "https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "The Two Pillars of JavaScript Part 2: Functional Programming", + "href": "https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "How to Fix the `class` Keyword", + "href": "https://medium.com/p/how-to-fix-the-es6-class-keyword-2d42bb3f4caf", + "short_description": "TL;DR `class` is broken. Don’t use it until it’s fixed.", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "JavaScript Objects", + "href": "http://davidwalsh.name/javascript-objects", + "short_description": "An excellent explanation of inheritance in JavaScript by Kyle Simpson", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "Unapply attack", + "href": "http://glebbahmutov.com/blog/unapply-attack/", + "short_description": "Make your JS apps more secure by freezing builtins.", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "Isomorphic JavaScript", + "href": "http://isomorphic.net/", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "JavaScript Application Architecture on the Road to 2015", + "href": "https://medium.com/@addyosmani/javascript-application-architecture-on-the-road-to-2015-d8125811101b", + "short_description": "Addy Osmani", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "The Dao of Immutability", + "href": "https://medium.com/javascript-scene/the-dao-of-immutability-9f91a70c88cd", + "short_description": "The Way of the Functional Programmer", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "Reactive MVC and the Virtual DOM", + "href": "http://futurice.com/blog/reactive-mvc-and-the-virtual-dom", + "short_description": "Great read, even if you’re not a React user.", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "Introduction to Reactive Programming", + "href": "https://gist.github.com/staltz/868e7e9bc2a7b8c1f754", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "The General Theory of Reactivity", + "href": "https://github.com/kriskowal/gtor", + "short_description": "What is all this talk about reactive? Functional? Promises? This is the beginning of a reactive programming bible.", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "ES6 Generators", + "href": "http://davidwalsh.name/es6-generators", + "short_description": "A series of blog posts by Kyle Simpson", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "Typed JavaScript", + "href": "http://www.2ality.com/2014/10/typed-javascript.html", + "short_description": "Excellent post about the state of typed JavaScript by Axel Rauschmayer", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "Taming the Asynchronous Beast with CSP in JavaScript", + "href": "http://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript", + "short_description": "James Long", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "ES6 Modules: The Final Syntax", + "href": "http://www.2ality.com/2014/09/es6-modules-final.html", + "short_description": "by @rauschma #AMDisDead", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "Advanced Performance Audits with DevTools", + "href": "http://www.paulirish.com/2015/advanced-performance-audits-with-devtools/", + "short_description": "In-depth perf case studies with Paul Irish", + "categories": [ + "Required Reading (Online resources)" + ] + }, + { + "title": "Classical Inheritance is Obsolete: How to Think in Prototypal OO", + "href": "https://vimeo.com/69255635", + "short_description": "by [Eric Elliott](https://twitter.com/_ericelliott)", + "categories": [ + "Required Viewing" + ] + }, + { + "title": "Asynchronous Programming at Netflix", + "href": "https://www.youtube.com/watch?v=gawmdhCNy-A", + "short_description": "[Jafar Husain](https://twitter.com/jhusain)", + "categories": [ + "Required Viewing" + ] + }, + { + "title": "What is Reactive Programming?", + "href": "https://www.youtube.com/watch?v=dwP1TNXE6fc", + "short_description": "[Jafar Husain](https://twitter.com/jhusain) explains reactive programming", + "categories": [ + "Required Viewing" + ] + }, + { + "title": "Immutability: Putting The Dream Machine To Work", + "href": "https://www.youtube.com/watch?v=SiFwRtCnxv4", + "short_description": "by [David Nolen](https://twitter.com/swannodette)", + "categories": [ + "Required Viewing" + ] + }, + { + "title": "Delivering the Goods", + "href": "https://www.youtube.com/watch?v=R8W_6xWphtw", + "short_description": "Paul Irish on one of the most important but overlooked topics in the development world today — page load times.", + "categories": [ + "Required Viewing" + ] + }, + { + "title": "Simplicity Matters", + "href": "https://www.youtube.com/watch?v=rI8tNMsozo0", + "short_description": "A later version of the influential talk, “Simple Made Easy” by [Rich Hickey](https://twitter.com/richhickey)", + "categories": [ + "Required Viewing" + ] + }, + { + "title": "ES5 Spec", + "href": "http://es5.github.io/", + "short_description": "An annotated, hyperlinked version of the ES5 spec", + "categories": [ + "Spec" + ] + }, + { + "title": "ES6 draft", + "href": "https://people.mozilla.org/~jorendorff/es6-draft.html", + "categories": [ + "Spec" + ] + }, + { + "title": "JavaScript for Kids", + "href": "http://www.amazon.com/gp/product/B00QL616QE?ie=UTF8&camp=213733&creative=393177&creativeASIN=B00QL616QE&linkCode=shr&tag=ericleads-20&linkId=6AOODC27L6URY3K2", + "short_description": "by Nick Morgan", + "categories": [ + "Books" + ], + "author": "Nick Morgan", + "tags": [ + "kids", + "language", + "DOM", + "jQuery", + "Canvas" + ], + "level": "Beginners", + "rank": 9 + }, + { + "title": "Eloquent JavaScript", + "href": "http://eloquentjavascript.net/", + "short_description": "by Marijn Haverbeke", + "categories": [ + "Books" + ], + "author": "Martin Haverbecke", + "tags": [ + "language", + "Node.js", + "jQuery", + "modules" + ], + "level": "Beginners", + "rank": 8 + }, + { + "title": "JavaScript: The Good Parts", + "href": "http://www.amazon.com/gp/product/0596517742?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596517742&linkCode=shr&tag=ericleads-20&linkId=IJKESYSOTWGC27DR", + "short_description": "by Douglas Crockford", + "categories": [ + "Books" + ], + "author": "Douglas Crockford", + "tags": [ + "language", + "patterns", + "OOP", + "Node.js" + ], + "level": "Beginners", + "rank": 7 + }, + { + "title": "Effective JavaScript", + "href": "http://www.amazon.com/gp/product/0321812182?ie=UTF8&camp=213733&creative=393185&creativeASIN=0321812182&linkCode=shr&tag=ericleads-20&linkId=JIC63I267I6UDQQZ", + "short_description": "by David Herman", + "categories": [ + "Books" + ], + "author": "David Herman", + "tags": [ + "language", + "patterns", + "OOP", + "Node.js" + ], + "level": "Intermediate", + "rank": 6 + }, + { + "title": "Programming JavaScript Applications", + "href": "http://pjabook.com/", + "short_description": "by Eric Elliott", + "categories": [ + "Books" + ], + "author": "Eric Elliot", + "tags": [ + "language", + "patterns", + "OOP", + "frameworks" + ], + "level": "Intermediate", + "rank": 5 + }, + { + "title": "JavaScript: The Definitive Guide", + "href": "http://www.amazon.com/gp/product/0596805527?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596805527&linkCode=shr&tag=ericleads-20&linkId=AENIF5KLRQI3N335", + "short_description": "by David Flanagan", + "categories": [ + "Books" + ], + "author": "David Flanagan", + "tags": [ + "language", + "patterns", + "OOP", + "Node.js", + "jQuery", + "reference", + "volume" + ], + "level": "Intermediate", + "rank": 4 + }, + { + "title": "You Don’t Know JS", + "href": "https://github.com/getify/You-Dont-Know-JS", + "short_description": "by Kyle Simpson", + "categories": [ + "Books" + ], + "author": "Kyle Simpson", + "tags": [ + "language", + "patterns", + "OOP", + "Node.js", + "jQuery", + "reference", + "volume" + ], + "level": "Advanced", + "rank": 3 + }, + { + "title": "Understanding ECMAScript 6", + "href": "https://leanpub.com/understandinges6/read/", + "short_description": "by Nicholas C. Zakas", + "categories": [ + "Books" + ], + "author": "Nicholas C. Zakas", + "tags": [ + "language", + "patterns", + "OOP", + "ES6", + "class" + ], + "level": "Advanced", + "rank": 2 + }, + { + "title": "JavaScript Allongé", + "href": "https://leanpub.com/javascriptallongesix", + "short_description": "by Reginald Braithwaite", + "categories": [ + "Books" + ] + }, + { + "title": "Node.js in Action", + "href": "http://www.manning.com/cantelon/", + "short_description": "by Mike Cantelon, Marc Harter, T.J. Holowaychuk and Nathan Rajlich", + "categories": [ + "Books" + ], + "author": "Mike Cantelon, Marc Harter, T.J. Holowaychuk and Nathan Rajlich", + "tags": [ + "language", + "patterns", + "OOP", + "ES6", + "class" + ], + "level": "Advanced", + "rank": 2 + }, + { + "title": "The Dream Machine: J.C.R. Licklider and the Revolution That Made Computing Personal", + "href": "http://www.amazon.com/gp/product/0670899763?ie=UTF8&camp=213733&creative=393177&creativeASIN=0670899763&linkCode=shr&tag=ericleads-20&linkId=NDUXYQOCMPC47SQI", + "short_description": "by M. Mitchell Waldrop", + "categories": [ + "Books" + ], + "author": "M. Mitchell Waldrop", + "long_description": "In 1962, decades before \"personal computers\" and \"Internet\" became household words, the revolution that gave rise to both of them was set in motion from a small, nondescript office in the depths of the Pentagon.", + "tags": [ + "history", + "biography", + "revolution" + ], + "level": "Beginners", + "rank": 1 + }, + { + "title": "WebGL Fundamentals", + "href": "http://webglfundamentals.org/", + "short_description": "by Greggman — An interactive online book about graphics programming.", + "categories": [ + "Books" + ], + "author": "Greggman", + "tags": [ + "WebGL", + "graphics", + "games", + "browser" + ], + "level": "Intermediate", + "rank": 1 + }, + { + "title": "nvm", + "href": "https://github.com/creationix/nvm", + "short_description": "First install this...", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "Node", + "href": "http://nodejs.org/", + "short_description": "Then install Node (with nvm). You’ll need this even if you’re a front-end dev.", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "npm", + "href": "https://www.npmjs.com/", + "short_description": "Install lots of other things with npm. **The package manager for JavaScript.** Comes with Node.", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "Sublime Text 3", + "href": "http://www.sublimetext.com/3", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "Node Inspector", + "href": "https://github.com/node-inspector/node-inspector", + "short_description": "Debug Node code with the Chrome debug tools", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "TraceGL", + "href": "https://github.com/traceglMPL/tracegl", + "short_description": "Powerful runtime analysis of live JavaScript code", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "Tern", + "href": "http://ternjs.net/", + "short_description": "Static analysis in JavaScript", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "JSDoc", + "href": "http://usejsdoc.org/", + "short_description": "Pair with [Tern](http://ternjs.net/) for static analysis", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "Slate", + "href": "https://github.com/tripit/slate", + "short_description": "Generate beautiful API docs for your apps", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "Nitrous.IO", + "href": "https://www.nitrous.io/join/uJcRo6yQDvs?utm_source=nitrous.io&utm_medium=copypaste&utm_campaign=referral", + "short_description": "(Supports live collaboration / pair programming)", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "Slack", + "href": "http://slack.com/", + "short_description": "Chat for teams, with GitHub and Google hangouts integration", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "PrettyDiff", + "href": "http://prettydiff.com/", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "Babel Repl", + "href": "https://babeljs.io/repl", + "short_description": "The Babel REPL with compiled output", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "ES6 Fiddle", + "href": "http://www.es6fiddle.net/", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "CodePicNic", + "href": "https://codepicnic.com/", + "short_description": "Embed interactive full-stack snippets & demos", + "categories": [ + "Dev tools & collaboration" + ] + }, + { + "title": "Browserify", + "href": "http://browserify.org/", + "short_description": "Bundle modules for the browser.", + "categories": [ + "Building" + ] + }, + { + "title": "How to use NPM as a Build Tool", + "href": "http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/", + "categories": [ + "Building" + ] + }, + { + "title": "pre-commit", + "href": "https://github.com/observing/pre-commit", + "short_description": "Easily configure pre-commit hooks for your package", + "categories": [ + "Building" + ] + }, + { + "title": "JSHint", + "href": "http://jshint.com/", + "categories": [ + "Testing / Lint / Quality checkers" + ] + }, + { + "title": "ESLint", + "href": "http://eslint.org/", + "categories": [ + "Testing / Lint / Quality checkers" + ] + }, + { + "title": "babel-eslint", + "href": "https://github.com/babel/babel-eslint", + "short_description": "Allow ES6 features to pass ESLint.", + "categories": [ + "Testing / Lint / Quality checkers" + ] + }, + { + "title": "eslint-plugin-no-class", + "href": "https://github.com/emmenko/eslint-plugin-no-class", + "short_description": "Forbid the ES6 `class` keyword. [Why?](https://github.com/eslint/eslint/pull/2096#issuecomment-83044888)", + "categories": [ + "Testing / Lint / Quality checkers" + ] + }, + { + "title": "ESLint no-inferred-methodname", + "href": "https://github.com/johnstonbl01/eslint-no-inferred-method-name", + "short_description": "A custom rule for a common problem.", + "categories": [ + "Testing / Lint / Quality checkers" + ] + }, + { + "title": "Istanbul", + "href": "https://github.com/gotwarlost/istanbul", + "short_description": "Code coverage reporting", + "categories": [ + "Testing / Lint / Quality checkers" + ] + }, + { + "title": "tape", + "href": "https://github.com/substack/tape", + "short_description": "Minimal, dead simple unit testing. (This is all you need, really!)", + "categories": [ + "Testing / Lint / Quality checkers" + ] + }, + { + "title": "faucet", + "href": "https://github.com/substack/faucet", + "short_description": "Prettify unit testing output (like what comes from tape).", + "categories": [ + "Testing / Lint / Quality checkers" + ] + }, + { + "title": "Supertest", + "href": "https://github.com/tj/supertest", + "short_description": "The best way to test HTTP endpoints.", + "categories": [ + "Testing / Lint / Quality checkers" + ] + }, + { + "title": "Babel", + "href": "https://github.com/babel/babel", + "short_description": "Transpile ES6, ES7 to ES5", + "categories": [ + "Transpilers" + ] + }, + { + "title": "CoffeeScript", + "href": "http://coffeescript.org/", + "categories": [ + "Transpilers" + ] + }, + { + "title": "Emscripten", + "href": "http://kripken.github.io/emscripten-site/", + "short_description": "Frequently used for C/C++ JavaScript ports", + "categories": [ + "Transpilers" + ] + }, + { + "title": "ES6 tools", + "href": "https://github.com/addyosmani/es6-tools", + "short_description": "Addy Osmani’s ES6 Tools list", + "categories": [ + "Transpilers" + ] + }, + { + "title": "io.js", + "href": "https://iojs.org/", + "short_description": "The Node fork", + "categories": [ + "JavaScript environments" + ] + }, + { + "title": "es5-shim", + "href": "https://github.com/es-shims/es5-shim", + "short_description": "Stable, production ready.", + "categories": [ + "Libraries" + ] + }, + { + "title": "es6-shim", + "href": "https://github.com/es-shims/es6-shim/", + "short_description": "Somewhat stable, but a few things I thought were solid got shifted to ES7.", + "categories": [ + "Libraries" + ] + }, + { + "title": "es7-shim", + "href": "https://www.npmjs.com/package/es7-shim", + "short_description": "Experimental. Use with caution.", + "categories": [ + "Libraries" + ] + }, + { + "title": "HTML5 Cross Browser Polyfills", + "href": "https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills", + "short_description": "A fairly comprehensive list of HTML5 API polyfills.", + "categories": [ + "Libraries" + ] + }, + { + "title": "HTML5 Boilerplate", + "href": "https://github.com/h5bp/html5-boilerplate", + "short_description": "You’ll want to cherry-pick the best of this for your production apps. See [Initializr](http://www.initializr.com).", + "categories": [ + "Libraries" + ] + }, + { + "title": "The Isomorphic Express Boilerplate", + "href": "https://github.com/ericelliott/isomorphic-express-boilerplate", + "short_description": "Write apps using the same code for both the client and the server using Node, Express, and Browserify.", + "categories": [ + "Libraries" + ] + }, + { + "title": "rootrequire", + "href": "https://github.com/ericelliott/rootrequire", + "short_description": "Require files relative to your project path using the normal node require().", + "categories": [ + "Libraries" + ] + }, + { + "title": "dotty", + "href": "https://github.com/deoxxa/dotty", + "short_description": "Get deep properties using dot notation without throwing. e.g., `dotty.get(req, 'user.id');`", + "categories": [ + "Libraries" + ] + }, + { + "title": "native-promise-only", + "href": "https://github.com/getify/native-promise-only", + "short_description": "An ECMAScript standard promise polyfill by Kyle Simpson.", + "categories": [ + "Libraries" + ] + }, + { + "title": "isomorphic-fetch", + "href": "https://github.com/matthew-andrews/isomorphic-fetch", + "short_description": "A [WHATWG fetch](https://fetch.spec.whatwg.org/). standard polyfill.", + "categories": [ + "Libraries" + ] + }, + { + "title": "sseasy", + "href": "https://github.com/heroku/sseasy", + "short_description": "Server Sent Events for Node (HTML5 standard push notifications).", + "categories": [ + "Libraries" + ] + }, + { + "title": "EventSource browser Polyfill", + "href": "https://github.com/Yaffle/EventSource/", + "short_description": "Required client-side patching to support Server Sent Events.", + "categories": [ + "Libraries" + ] + }, + { + "title": "jQuery", + "href": "http://jquery.com/", + "short_description": "Yes, [I still use jQuery](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit#) and so do 61% of the top 100,000 websites — for good reason.", + "categories": [ + "Libraries" + ] + }, + { + "title": "Blaze", + "href": "http://meteor.github.io/blaze/", + "short_description": "DOM-diffing isomorphic reactive templates from Meteor.", + "categories": [ + "Libraries" + ] + }, + { + "title": "React", + "href": "https://github.com/facebook/react", + "short_description": "What do Facebook, Instagram, Netflix and PayPal have in common? React.", + "categories": [ + "Libraries" + ] + }, + { + "title": "Lodash-FP", + "href": "https://github.com/lodash/lodash-fp", + "short_description": "Like Underscore, but much faster, and featuring a more expressive API.", + "categories": [ + "Libraries" + ] + }, + { + "title": "RxJS", + "href": "https://github.com/Reactive-Extensions/RxJS", + "short_description": "Reactive extensions for JavaScript. [What’s reactive?](https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4)", + "categories": [ + "Libraries" + ] + }, + { + "title": "Page.js", + "href": "https://github.com/visionmedia/page.js", + "short_description": "Tiny client-side router, inspired by Express.", + "categories": [ + "Libraries" + ] + }, + { + "title": "Moment", + "href": "http://momentjs.com/docs/", + "short_description": "A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.", + "categories": [ + "Libraries" + ] + }, + { + "title": "Globalize", + "href": "https://github.com/jquery/globalize", + "short_description": "i18n / translate your app for many languages and locations (locales)", + "categories": [ + "Libraries" + ] + }, + { + "title": "Lusca", + "href": "https://github.com/krakenjs/lusca", + "short_description": "Secure your Express application. By the Kraken team at PayPal.", + "categories": [ + "Libraries" + ] + }, + { + "title": "Express", + "href": "http://expressjs.com/", + "short_description": "The most popular framework for Node.", + "categories": [ + "Libraries" + ] + }, + { + "title": "Stampit", + "href": "https://github.com/ericelliott/stampit", + "short_description": "Create objects from reusable, composable behaviors. Prototypal inheritance with stamps.", + "categories": [ + "Libraries" + ] + }, + { + "title": "Credential", + "href": "https://github.com/ericelliott/credential", + "short_description": "If you write Node apps with password logins, you need Credential.", + "categories": [ + "Libraries" + ] + }, + { + "title": "cuid", + "href": "https://github.com/ericelliott/cuid", + "short_description": "GUIDs are broken — use cuid, instead.", + "categories": [ + "Libraries" + ] + }, + { + "title": "velocity", + "href": "http://julian.com/research/velocity/", + "short_description": "& [Velocity Motion Designer (VMD)](http://julian.com/research/velocity/#vmd) UI animation library.", + "categories": [ + "Libraries" + ] + }, + { + "title": "is-my-json-valid", + "href": "https://github.com/mafintosh/is-my-json-valid", + "short_description": "A fast [json-schema](http://json-schema.org/) validator.", + "categories": [ + "Libraries" + ] + }, + { + "title": "inquirer.js", + "href": "https://github.com/SBoudrias/Inquirer.js", + "short_description": "Great library for building CLI tools.", + "categories": [ + "Libraries" + ] + }, + { + "title": "rimraf", + "href": "https://github.com/isaacs/rimraf", + "short_description": "`rm -rf` util for nodejs. Great for npm scripts.", + "categories": [ + "Libraries" + ] + }, + { + "title": "Introducing React", + "href": "https://www.youtube.com/watch?v=XxVg_s8xAms", + "categories": [ + "React" + ] + }, + { + "title": "JSX Looks Like an Abomination but it’s Good for You", + "href": "https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918", + "short_description": "My take on JSX", + "categories": [ + "React" + ] + }, + { + "title": "Immutable Data and React", + "href": "https://www.youtube.com/watch?v=I7IdS-PbEgI&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr", + "short_description": "by [Lee Byron](https://twitter.com/leeb)", + "categories": [ + "React" + ] + }, + { + "title": "Data Fetching for React", + "href": "https://www.youtube.com/watch?v=9sc8Pyc51uU", + "short_description": "Relay & GraphQL Described", + "categories": [ + "React" + ] + }, + { + "title": "Introducing Relay and GraphQL", + "href": "https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html", + "categories": [ + "React" + ] + }, + { + "title": "Building the Facebook Newsfeed with Relay", + "href": "https://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html", + "categories": [ + "React" + ] + }, + { + "title": "Relay FAQ", + "href": "https://gist.github.com/wincent/598fa75e22bdfa44cf47", + "categories": [ + "React" + ] + }, + { + "title": "react-engine", + "href": "https://github.com/paypal/react-engine", + "short_description": "PayPal’s isomorphic React view engine for Express or Kraken", + "categories": [ + "React" + ] + }, + { + "title": "Radium", + "href": "http://projects.formidablelabs.com/radium/", + "short_description": "Simplify inline styles", + "categories": [ + "React" + ] + }, + { + "title": "eslint-plugin-react", + "href": "https://github.com/yannickcr/eslint-plugin-react", + "categories": [ + "React" + ] + }, + { + "title": "React Hot Loader", + "href": "https://gaearon.github.io/react-hot-loader/", + "short_description": "for Webpack", + "categories": [ + "React" + ] + }, + { + "title": "livereactload", + "href": "https://github.com/milankinen/livereactload", + "short_description": "for Browserify", + "categories": [ + "React" + ] + }, + { + "title": "FIRST", + "href": "http://addyosmani.com/first/", + "categories": [ + "Web Components" + ] + }, + { + "title": "Polyfills", + "href": "http://webcomponents.org/polyfills/", + "categories": [ + "Web Components" + ] + }, + { + "title": "HTML Imports", + "href": "http://webcomponents.org/articles/introduction-to-html-imports/", + "categories": [ + "Web Components" + ] + }, + { + "title": "Custom Elements", + "href": "http://webcomponents.org/articles/introduction-to-custom-elements/", + "categories": [ + "Web Components" + ] + }, + { + "title": "Templates", + "href": "http://webcomponents.org/articles/introduction-to-template-element/", + "categories": [ + "Web Components" + ] + }, + { + "title": "Shadow DOM", + "href": "http://webcomponents.org/articles/introduction-to-shadow-dom/", + "categories": [ + "Web Components" + ] + }, + { + "title": "x-gif", + "href": "http://geelen.github.io/x-gif/#/http://i.imgur.com/iKXH4E2.gif", + "short_description": "This web component wins the internet.", + "categories": [ + "Web Components" + ] + }, + { + "title": "Vulcanize", + "href": "https://github.com/Polymer/vulcanize", + "short_description": "Don’t let web components slow your app down. Bundle your HTML imports.", + "categories": [ + "Web Components" + ] + }, + { + "title": "PM2", + "href": "https://github.com/Unitech/pm2", + "short_description": "Process monitoring / self repair", + "categories": [ + "QA / Deployment / Monitoring / CI" + ] + }, + { + "title": "New Relic", + "href": "http://newrelic.com/", + "short_description": "Deep insights into the performance and health of your production apps", + "categories": [ + "QA / Deployment / Monitoring / CI" + ] + }, + { + "title": "Sauce Labs", + "href": "https://saucelabs.com/", + "short_description": "Cross platform web application testing with great collaboration and integration support", + "categories": [ + "QA / Deployment / Monitoring / CI" + ] + }, + { + "title": "Travis CI", + "href": "https://travis-ci.org/", + "short_description": "CI, of course", + "categories": [ + "QA / Deployment / Monitoring / CI" + ] + }, + { + "title": "Docker", + "href": "https://www.docker.com/", + "short_description": "Run your CI process using the same OS configs as your production systems.", + "categories": [ + "QA / Deployment / Monitoring / CI" + ] + }, + { + "title": "Shippable", + "href": "https://www.shippable.com/", + "short_description": "Docker-based hosted build / CI", + "categories": [ + "QA / Deployment / Monitoring / CI" + ] + }, + { + "title": "Tensō", + "href": "http://avoidwork.github.io/tenso/", + "short_description": "A thin API facade in Node", + "categories": [ + "QA / Deployment / Monitoring / CI" + ] + }, + { + "title": "Kong", + "href": "http://getkong.org/", + "short_description": "API/microservice extension and management layer, centralize auth, cache, logging, rate limiting, etc... plugins in LUA );", + "categories": [ + "QA / Deployment / Monitoring / CI" + ] + }, + { + "title": "JavaScript on Google+", + "href": "https://plus.google.com/communities/100875929141897651837", + "categories": [ + "Community" + ] + }, + { + "title": "HTML5 on Google+", + "href": "https://plus.google.com/communities/103299867207875326585", + "categories": [ + "Community" + ] + }, + { + "title": "Node.js on Google+", + "href": "https://plus.google.com/communities/115365528781941125390", + "categories": [ + "Community" + ] + }, + { + "title": "JavaScript Weekly", + "href": "http://javascriptweekly.com/", + "categories": [ + "News" + ] + }, + { + "title": "Node Weekly", + "href": "http://nodeweekly.com/", + "categories": [ + "News" + ] + }, + { + "title": "HTML5 Weekly", + "href": "http://html5weekly.com/", + "categories": [ + "News" + ] + }, + { + "title": "EchoJS", + "href": "http://www.echojs.com/", + "categories": [ + "News" + ] + }, + { + "title": "DailyJS", + "href": "http://dailyjs.com/", + "categories": [ + "News" + ] + }, + { + "title": "JavaScript Jabber", + "href": "http://devchat.tv/js-jabber/", + "categories": [ + "News" + ] + }, + { + "title": "Node Module Of The Week", + "href": "http://nmotw.in/", + "categories": [ + "News" + ] + }, + { + "title": "Codepen", + "href": "http://codepen.io/pen/", + "categories": [ + "Pasting / sharing code" + ] + }, + { + "title": "RequireBin", + "href": "http://requirebin.com/", + "categories": [ + "Pasting / sharing code" + ] + }, + { + "title": "DemoJS", + "href": "http://demojs.org/", + "short_description": "The JavaScript demoscene party", + "categories": [ + "Contests" + ] + }, + { + "title": "JS1k", + "href": "http://js1k.com/", + "short_description": "JavaScript demos in 1k of memory", + "categories": [ + "Contests" + ] + }, + { + "title": "JS13k Games", + "href": "http://js13kgames.com/", + "short_description": "JavaScript games in 13k of memory", + "categories": [ + "Contests" + ] + }, + { + "title": "FightCode game", + "href": "http://fightcodegame.com/", + "short_description": "program virtual battle bots and climb the leaderboard", + "categories": [ + "Contests" + ] + }, + { + "title": "Node Knockout", + "href": "http://nodeknockout.com/", + "short_description": "The legendary Node competition", + "categories": [ + "Contests" + ] + }, + { + "title": "Nodebots", + "href": "http://nodebots.io/", + "categories": [ + "Hackable Hardware" + ] + }, + { + "title": "Cylon", + "href": "http://cylonjs.com/", + "categories": [ + "Hackable Hardware" + ] + }, + { + "title": "Nodecopter", + "href": "http://www.nodecopter.com/", + "categories": [ + "Hackable Hardware" + ] + }, + { + "title": "Tessel", + "href": "https://tessel.io/", + "categories": [ + "Hackable Hardware" + ] + }, + { + "title": "Espruino", + "href": "http://www.espruino.com/", + "categories": [ + "Hackable Hardware" + ] + }, + { + "title": "Onion Omega", + "href": "https://onion.io/omega", + "categories": [ + "Hackable Hardware" + ] + }, + { + "title": "DigitalOcean", + "href": "https://www.digitalocean.com/?refcode=fdcfedac5208", + "categories": [ + "Hosting" + ] + }, + { + "title": "LearnToMod", + "href": "http://www.learntomod.com/", + "short_description": "Mod Minecraft with JavaScript", + "categories": [ + "For kids (and people who just love to have fun)" + ] + }, + { + "title": "The Young Person’s Guide to Programming in Minecraft", + "href": "https://github.com/walterhiggins/ScriptCraft/blob/master/docs/YoungPersonsGuideToProgrammingMinecraft.md#the-young-persons-guide-to-programming-in-minecraft", + "categories": [ + "For kids (and people who just love to have fun)" + ] + }, + { + "title": "Addy Osmani", + "href": "https://twitter.com/addyosmani", + "short_description": "App architecture expert, Chrome dev tools champion", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Angus Croll", + "href": "https://twitter.com/angustweets", + "short_description": "Author, “If Hemingway Wrote JavaScript”", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Axel Rauschmayer", + "href": "https://twitter.com/rauschma", + "short_description": "ES Next evangelist, author", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Brendan Eich", + "href": "https://twitter.com/BrendanEich", + "short_description": "Created JavaScript", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "David Herman", + "href": "https://twitter.com/littlecalculist", + "short_description": "Author, “Effective JavaScript”", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "David Nolen", + "href": "https://twitter.com/swannodette", + "short_description": "Great functional programming content", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "EchoJS", + "href": "https://twitter.com/echojs", + "short_description": "News and links", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Eric Elliott", + "href": "https://twitter.com/_ericelliott", + "short_description": "That’s me. O’Reilly author. JavaScript architect. JS Instructor.", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Jafar Husain", + "href": "https://twitter.com/jhusain", + "short_description": "Great talks on RxJS, ES next, etc...", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "James Halliday", + "href": "https://twitter.com/substack", + "short_description": "aka Substack — author of ~one million~ Node modules you probably use.", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "James Long", + "href": "https://twitter.com/jlongster", + "short_description": "CSP, functional programming advocate, Mozilla developer", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "JavaScript Cheerleader", + "href": "https://twitter.com/JS_Cheerleader", + "short_description": "Mover & shaker, JavaScript evangelist, documentary film maker", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "JavaScript Daily", + "href": "https://twitter.com/JavaScriptDaily", + "short_description": "News and links", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Jordan Harband", + "href": "https://twitter.com/ljharb", + "short_description": "Keeping us ahead of the JS curve", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Kyle Simpson", + "href": "https://twitter.com/getify", + "short_description": "Author, YDKJS — O’Reilly, JS Instructor, open web evangelist", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Marijn Haverbeke", + "href": "https://twitter.com/marijnjh", + "short_description": "Author, “Eloquent JavaScript”", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Nicholas C. Zakas", + "href": "https://twitter.com/slicknet", + "short_description": "Author, speaker", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Nick Morgan", + "href": "https://twitter.com/skilldrick", + "short_description": "Author, “JavaScript for Kids”", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Paul Irish", + "href": "https://twitter.com/paul_irish", + "short_description": "Developer evangelist, Chrome dev tools champion", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Reginald Braithwaite", + "href": "https://twitter.com/raganwald", + "short_description": "Author, “JavaScript Allongé,” speaker, PagerDuty", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "YDKJS", + "href": "https://twitter.com/ydkjs", + "short_description": "You Don’t Know JS, O’Reilly book series by Kyle Simpson", + "categories": [ + "Twitter (alphabetical order)" + ] + }, + { + "title": "Nicolas Bevacqua", + "href": "https://twitter.com/nzgb", + "short_description": "Author “JavaScript Application Design,” Speaker, Open-Source Evangelist", + "categories": [ + "Twitter (alphabetical order)" + ] + } + ], + "categories": [ + "Required Reading (Online resources)", + "Required Viewing", + "Spec", + "Books", + "Dev tools & collaboration", + "Building", + "Testing / Lint / Quality checkers", + "Transpilers", + "JavaScript environments", + "Libraries", + "React", + "Web Components", + "QA / Deployment / Monitoring / CI", + "Community", + "News", + "Pasting / sharing code", + "Contests", + "Hackable Hardware", + "Hosting", + "For kids (and people who just love to have fun)", + "Twitter (alphabetical order)" + ] +} \ No newline at end of file diff --git a/build/README.md b/src/data/essential-javascript-links.md similarity index 51% rename from build/README.md rename to src/data/essential-javascript-links.md index 1c94a4f..17b1b51 100644 --- a/build/README.md +++ b/src/data/essential-javascript-links.md @@ -1,41 +1,30 @@ -# Essential JavaScript Links - -A curated list by Eric Elliott and friends. Suggest links in the [gist comments](https://gist.github.com/ericelliott/d576f72441fc1b27dace#comment-1365676). - -[Help us turn this into a proper website!](https://github.com/ericelliott/essential-javascript-links/issues) - -This is a very exclusive collection of only must-have JavaScript links. I’m only listing my favorite links. Nothing else makes the cut. Feel free to suggest links if you think they’re good enough to make this list. The really curious should feel free to browse the comments to find other links. I can’t guarantee the quality of links in the comments. - -## Full Disclosure - -Some of these links are affiliate links, meaning that if you make a purchase, I might earn a little money. **This has absolutely no bearing on whether or not links make the list.** *None, whatsoever.* However, it does allow me more resources to **[fight poverty with code](https://medium.com/the-backer-army/fighting-poverty-with-code-d1ed3ebd982d)**. *Every little bit counts.* - - ## Required Reading (Online resources) -* [Learn JavaScript Essentials (for all skill levels)](https://medium.com/javascript-scene/learn-javascript-b631a4af11f2) — One clear path to JavaScript mastery +* [Learn JavaScript Essentials (for all skill levels)](https://medium.com/javascript-scene/learn-javascript-b631a4af11f2) One clear path to JavaScript mastery * [JavaScript Training Sucks](https://medium.com/javascript-scene/javascript-training-sucks-284b53666245) 99 out of 100 JS developers lack the skills they need to fill hundreds of thousands of jobs. We can change that. * [The Two Pillars of JavaScript Part 1: Prototypal OO](https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3) * [The Two Pillars of JavaScript Part 2: Functional Programming](https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4) +* [How to Fix the `class` Keyword](https://medium.com/p/how-to-fix-the-es6-class-keyword-2d42bb3f4caf) TL;DR `class` is broken. Don't use it until it's fixed. * [JavaScript Objects](http://davidwalsh.name/javascript-objects) An excellent explanation of inheritance in JavaScript by Kyle Simpson * [Isomorphic JavaScript](http://isomorphic.net/) -* [JavaScript Application Architecture on the Road to 2015](https://medium.com/@addyosmani/javascript-application-architecture-on-the-road-to-2015-d8125811101b) — Addy Osmani -* [Reactive MVC and the Virtual DOM](http://futurice.com/blog/reactive-mvc-and-the-virtual-dom) Great read, even if you’re not a React user. +* [JavaScript Application Architecture on the Road to 2015](https://medium.com/@addyosmani/javascript-application-architecture-on-the-road-to-2015-d8125811101b) Addy Osmani +* [The Dao of Immutability](https://medium.com/javascript-scene/the-dao-of-immutability-9f91a70c88cd) The Way of the Functional Programmer +* [Reactive MVC and the Virtual DOM](http://futurice.com/blog/reactive-mvc-and-the-virtual-dom) Great read, even if you're not a React user. * [Introduction to Reactive Programming](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) * [The General Theory of Reactivity](https://github.com/kriskowal/gtor) What is all this talk about reactive? Functional? Promises? This is the beginning of a reactive programming bible. * [ES6 Generators](http://davidwalsh.name/es6-generators) A series of blog posts by Kyle Simpson -* [Typed JavaScript](http://www.2ality.com/2014/10/typed-javascript.html) — Excellent post about the state of typed JavaScript by Axel Rauschmayer -* [Taming the Asynchronous Beast with CSP in JavaScript](http://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript) — James Long +* [Typed JavaScript](http://www.2ality.com/2014/10/typed-javascript.html) Excellent post about the state of typed JavaScript by Axel Rauschmayer +* [Taming the Asynchronous Beast with CSP in JavaScript](http://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript) James Long * [ES6 Modules: The Final Syntax](http://www.2ality.com/2014/09/es6-modules-final.html) by @rauschma #AMDisDead - +* [Advanced Performance Audits with DevTools](http://www.paulirish.com/2015/advanced-performance-audits-with-devtools/) In-depth perf case studies with Paul Irish ## Required Viewing -* [Classical Inheritance is Obsolete: How to Think in Prototypal OO](https://vimeo.com/69255635) — by [Eric Elliott](https://twitter.com/_ericelliott) -* [Asynchronous Programming at Netflix](https://www.youtube.com/watch?v=gawmdhCNy-A) — [Jafar Husain](https://twitter.com/jhusain) -* [David Nolen: Immutability: Putting The Dream Machine To Work](https://www.youtube.com/watch?v=SiFwRtCnxv4) — [David Nolen](https://twitter.com/swannodette) -* [Immutable Data and React](https://www.youtube.com/watch?v=I7IdS-PbEgI&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) by [Lee Byron](https://twitter.com/leeb) -* [Delivering the Goods](https://www.youtube.com/watch?v=R8W_6xWphtw) Paul Irish on one of the most important but overlooked topics in the development world today — page load times. -* [Simplicity Matters](https://www.youtube.com/watch?v=rI8tNMsozo0) A later version of the influential talk, “Simple Made Easy” by [Rich Hickey](https://twitter.com/richhickey) +* [Classical Inheritance is Obsolete: How to Think in Prototypal OO](https://vimeo.com/69255635) by [Eric Elliott](https://twitter.com/_ericelliott) +* [Asynchronous Programming at Netflix](https://www.youtube.com/watch?v=gawmdhCNy-A) [Jafar Husain](https://twitter.com/jhusain) +* [What is Reactive Programming?](https://www.youtube.com/watch?v=dwP1TNXE6fc) [Jafar Husain](https://twitter.com/jhusain) explains reactive programming +* [Immutability: Putting The Dream Machine To Work](https://www.youtube.com/watch?v=SiFwRtCnxv4) by [David Nolen](https://twitter.com/swannodette) +* [Delivering the Goods](https://www.youtube.com/watch?v=R8W_6xWphtw) Paul Irish on one of the most important but overlooked topics in the development world today - page load times. +* [Simplicity Matters](https://www.youtube.com/watch?v=rI8tNMsozo0) A later version of the influential talk, "Simple Made Easy" by [Rich Hickey](https://twitter.com/richhickey) ## Spec @@ -46,28 +35,30 @@ Some of these links are affiliate links, meaning that if you make a purchase, I ## Books -* [JavaScript for Kids](http://www.amazon.com/gp/product/B00QL616QE?ie=UTF8&camp=213733&creative=393177&creativeASIN=B00QL616QE&linkCode=shr&tag=ericleads-20&linkId=6AOODC27L6URY3K2) -* [Eloquent JavaScript](http://eloquentjavascript.net/) -* [JavaScript: The Good Parts](http://www.amazon.com/gp/product/0596517742?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596517742&linkCode=shr&tag=ericleads-20&linkId=IJKESYSOTWGC27DR) -* [Effective JavaScript](http://www.amazon.com/gp/product/0321812182?ie=UTF8&camp=213733&creative=393185&creativeASIN=0321812182&linkCode=shr&tag=ericleads-20&linkId=JIC63I267I6UDQQZ) -* [Programming JavaScript Applications](http://pjabook.com) -* [JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596805527&linkCode=shr&tag=ericleads-20&linkId=AENIF5KLRQI3N335) -* [You Don’t Know JS](https://github.com/getify/You-Dont-Know-JS) +* [JavaScript for Kids](http://www.amazon.com/gp/product/B00QL616QE?ie=UTF8&camp=213733&creative=393177&creativeASIN=B00QL616QE&linkCode=shr&tag=ericleads-20&linkId=6AOODC27L6URY3K2) by Nick Morgan +* [Eloquent JavaScript](http://eloquentjavascript.net/) by Marijn Haverbeke +* [JavaScript: The Good Parts](http://www.amazon.com/gp/product/0596517742?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596517742&linkCode=shr&tag=ericleads-20&linkId=IJKESYSOTWGC27DR) by Douglas Crockford +* [Effective JavaScript](http://www.amazon.com/gp/product/0321812182?ie=UTF8&camp=213733&creative=393185&creativeASIN=0321812182&linkCode=shr&tag=ericleads-20&linkId=JIC63I267I6UDQQZ) by David Herman +* [Programming JavaScript Applications](http://pjabook.com) by Eric Elliott +* [JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527?ie=UTF8&camp=213733&creative=393185&creativeASIN=0596805527&linkCode=shr&tag=ericleads-20&linkId=AENIF5KLRQI3N335) by David Flanagan +* [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) by Kyle Simpson * [Understanding ECMAScript 6](https://leanpub.com/understandinges6/read/) by Nicholas C. Zakas -* [Node.js in Action](http://www.manning.com/cantelon/) -* [The Dream Machine: J.C.R. Licklider and the Revolution That Made Computing Personal](http://www.amazon.com/gp/product/0670899763?ie=UTF8&camp=213733&creative=393177&creativeASIN=0670899763&linkCode=shr&tag=ericleads-20&linkId=NDUXYQOCMPC47SQI) +* [JavaScript Allongé](https://leanpub.com/javascriptallongesix) by Reginald Braithwaite +* [Node.js in Action](http://www.manning.com/cantelon/) by Mike Cantelon, Marc Harter, T.J. Holowaychuk and Nathan Rajlich +* [The Dream Machine: J.C.R. Licklider and the Revolution That Made Computing Personal](http://www.amazon.com/gp/product/0670899763?ie=UTF8&camp=213733&creative=393177&creativeASIN=0670899763&linkCode=shr&tag=ericleads-20&linkId=NDUXYQOCMPC47SQI) by M. Mitchell Waldrop +* [WebGL Fundamentals](http://webglfundamentals.org/) by Greggman - An interactive online book about graphics programming. ## Dev tools & collaboration * [nvm](https://github.com/creationix/nvm) First install this... -* [Node](http://nodejs.org/) Then install Node (with nvm). You’ll need this even if you’re a front-end dev. +* [Node](http://nodejs.org/) Then install Node (with nvm). You'll need this even if you're a front-end dev. * [npm](https://www.npmjs.com/) Install lots of other things with npm. **The package manager for JavaScript.** Comes with Node. * [Sublime Text 3](http://www.sublimetext.com/3) * [Node Inspector](https://github.com/node-inspector/node-inspector) Debug Node code with the Chrome debug tools * [TraceGL](https://github.com/traceglMPL/tracegl) Powerful runtime analysis of live JavaScript code * [Tern](http://ternjs.net/) Static analysis in JavaScript -* [JSDoc](http://usejsdoc.org/) — Pair with [Tern](http://ternjs.net/) for static analysis +* [JSDoc](http://usejsdoc.org/) Pair with [Tern](http://ternjs.net/) for static analysis * [Nitrous.IO](https://www.nitrous.io/join/uJcRo6yQDvs?utm_source=nitrous.io&utm_medium=copypaste&utm_campaign=referral) (Supports live collaboration / pair programming) * [Slack](http://slack.com) Chat for teams, with GitHub and Google hangouts integration * For hangouts, just type /hangout in any channel @@ -81,52 +72,79 @@ Some of these links are affiliate links, meaning that if you make a purchase, I * [How to use NPM as a Build Tool](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/) -### Lint / Quality checkers +### Testing / Lint / Quality checkers * [JSHint](http://jshint.com/) * [ESLint](http://eslint.org/) +* [babel-eslint](https://github.com/babel/babel-eslint) Allow ES6 features to pass ESLint. +* [eslint-plugin-no-class](https://github.com/emmenko/eslint-plugin-no-class) Forbid the ES6 `class` keyword. [Why?](https://github.com/eslint/eslint/pull/2096#issuecomment-83044888) +* [ESLint no-inferred-methodname](https://github.com/johnstonbl01/eslint-no-inferred-method-name) A custom rule for a common problem. * [Istanbul](https://github.com/gotwarlost/istanbul) Code coverage reporting -* [tape](https://github.com/substack/tape) and [faucet](https://github.com/substack/faucet) for dead simple unit testing. -* [Nightwatch](http://nightwatchjs.org/) Dead simple integration testing with Selenium +* [tape](https://github.com/substack/tape) Minimal, dead simple unit testing. (This is all you need, really!) +* [faucet](https://github.com/substack/faucet) Prettify unit testing output (like what comes from tape). +* [Supertest](https://github.com/tj/supertest) The best way to test HTTP endpoints. ### Transpilers -* [6to5](https://github.com/6to5/6to5) (ES6) +* [Babel](https://github.com/babel/babel) Transpile ES6, ES7 to ES5 * [CoffeeScript](http://coffeescript.org/) -* [Emscripten](http://kripken.github.io/emscripten-site/) (frequently used for C/C++ JavaScript ports) -* [Traceur](https://github.com/google/traceur-compiler) (ES.next) -* [ES6 tools](https://github.com/addyosmani/es6-tools) Addy Osmani’s ES6 Tools list +* [Emscripten](http://kripken.github.io/emscripten-site/) Frequently used for C/C++ JavaScript ports +* [ES6 tools](https://github.com/addyosmani/es6-tools) Addy Osmani's ES6 Tools list ## JavaScript environments * [Node.js](http://nodejs.org/) Server side JavaScript and more -* [io.js](https://iojs.org/) — The Node fork +* [io.js](https://iojs.org/) The Node fork ## Libraries * [es5-shim](https://github.com/es-shims/es5-shim) Stable, production ready. * [es6-shim](https://github.com/es-shims/es6-shim/) Somewhat stable, but a few things I thought were solid got shifted to ES7. -* [es7-shim](https://www.npmjs.com/package/es7-shim) Experimantal. Use with caution. +* [es7-shim](https://www.npmjs.com/package/es7-shim) Experimental. Use with caution. * [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) A fairly comprehensive list of HTML5 API polyfills. -* [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate) For educational use only. You’ll want to cherry-pick the best of this for your production apps. +* [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate) You'll want to cherry-pick the best of this for your production apps. See [Initializr](http://www.initializr.com). +* [The Isomorphic Express Boilerplate](https://github.com/ericelliott/isomorphic-express-boilerplate) Write apps using the same code for both the client and the server using Node, Express, and Browserify. +* [rootrequire](https://github.com/ericelliott/rootrequire) Require files relative to your project path using the normal node require(). +* [dotty](https://github.com/deoxxa/dotty) Get deep properties using dot notation without throwing. e.g., `dotty.get(req, 'user.id');` * [native-promise-only](https://github.com/getify/native-promise-only) An ECMAScript standard promise polyfill by Kyle Simpson. -* [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) A [WHATWG fetch](https://fetch.spec.whatwg.org/) standard polyfill. +* [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) A [WHATWG fetch](https://fetch.spec.whatwg.org/). standard polyfill. * [sseasy](https://github.com/heroku/sseasy) Server Sent Events for Node (HTML5 standard push notifications). * [EventSource browser Polyfill](https://github.com/Yaffle/EventSource/) Required client-side patching to support Server Sent Events. -* [jQuery](http://jquery.com/) Yes, [I still use jQuery](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit#) and so do 61% of the top 100,000 websites — for good reason. -* [Blaze](http://meteor.github.io/blaze/) DOM-diffing isomorphic reactive templates from Meteor -* [RxJS](https://github.com/Reactive-Extensions/RxJS) Reactive extensions for JavaScript. [What’s reactive?](https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4) +* [jQuery](http://jquery.com/) Yes, [I still use jQuery](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit#) and so do 61% of the top 100,000 websites - for good reason. +* [Blaze](http://meteor.github.io/blaze/) DOM-diffing isomorphic reactive templates from Meteor. +* [React](https://github.com/facebook/react) What do Facebook, Instagram, Netflix and PayPal have in common? React. +* [Lodash-FP](https://github.com/lodash/lodash-fp) Like Underscore, but much faster, and featuring a more expressive API. +* [RxJS](https://github.com/Reactive-Extensions/RxJS) Reactive extensions for JavaScript. [What's reactive?](https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4) +* [Page.js](https://github.com/visionmedia/page.js) Tiny client-side router, inspired by Express. * [Moment](http://momentjs.com/docs/) A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates. * [Globalize](https://github.com/jquery/globalize) i18n / translate your app for many languages and locations (locales) -* [Express](http://expressjs.com/) The most popular framework for Node -* [Stampit](https://github.com/ericelliott/stampit) Stampit — create objects from reusable, composable behaviors. Prototypal inheritance with stamps. -* [Credential](https://github.com/ericelliott/credential) If you write Node apps with password logins, you need Credential -* [cuid](https://github.com/ericelliott/cuid) GUIDs are broken — use cuid, instead -* [velocity](http://julian.com/research/velocity/) & [Velocity Motion Designer (VMD)](http://julian.com/research/velocity/#vmd) UI animation library -* [json-schema](https://github.com/kriszyp/json-schema) — Great for model validations +* [Lusca](https://github.com/krakenjs/lusca) Secure your Express application. By the Kraken team at PayPal. +* [Express](http://expressjs.com/) The most popular framework for Node. +* [Stampit](https://github.com/ericelliott/stampit) Create objects from reusable, composable behaviors. Prototypal inheritance with stamps. +* [Credential](https://github.com/ericelliott/credential) If you write Node apps with password logins, you need Credential. +* [cuid](https://github.com/ericelliott/cuid) GUIDs are broken - use cuid, instead. +* [velocity](http://julian.com/research/velocity/) & [Velocity Motion Designer (VMD)](http://julian.com/research/velocity/#vmd) UI animation library. +* [is-my-json-valid](https://github.com/mafintosh/is-my-json-valid) A fast [json-schema](http://json-schema.org/) validator. +* [inquirer.js](https://github.com/SBoudrias/Inquirer.js) Great library for building CLI tools. + + +## React + +* [Introducing React](https://www.youtube.com/watch?v=XxVg_s8xAms) +* [JSX Looks Like an Abomination but it's Good for You](https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918) My take on JSX +* [Immutable Data and React](https://www.youtube.com/watch?v=I7IdS-PbEgI&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) by [Lee Byron](https://twitter.com/leeb) +* [Data Fetching for React](https://www.youtube.com/watch?v=9sc8Pyc51uU) Relay & GraphQL Described +* [Introducing Relay and GraphQL](https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html) +* [Building the Facebook Newsfeed with Relay](https://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html) +* [Relay FAQ](https://gist.github.com/wincent/598fa75e22bdfa44cf47) +* [react-engine](https://github.com/paypal/react-engine) PayPal's isomorphic React view engine for Express or Kraken +* [Radium](http://projects.formidablelabs.com/radium/) Simplify inline styles +* [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) +* [React Hot Loader](https://gaearon.github.io/react-hot-loader/) for Webpack +* [livereactload](https://github.com/milankinen/livereactload) for Browserify ## Web Components @@ -138,6 +156,7 @@ Some of these links are affiliate links, meaning that if you make a purchase, I * [Templates](http://webcomponents.org/articles/introduction-to-template-element/) * [Shadow DOM](http://webcomponents.org/articles/introduction-to-shadow-dom/) * [x-gif](http://geelen.github.io/x-gif/#/http://i.imgur.com/iKXH4E2.gif) This web component wins the internet. +* [Vulcanize](https://github.com/Polymer/vulcanize) Don't let web components slow your app down. Bundle your HTML imports. ## QA / Deployment / Monitoring / CI @@ -152,13 +171,12 @@ Some of these links are affiliate links, meaning that if you make a purchase, I ## Community -* [ES Discuss](https://esdiscuss.org/) The mailing list where all the ECMAScript standard discussion action is. * [JavaScript on Google+](https://plus.google.com/communities/100875929141897651837) * [HTML5 on Google+](https://plus.google.com/communities/103299867207875326585) * [Node.js on Google+](https://plus.google.com/communities/115365528781941125390) * IRC ##JavaScript irc://irc.freenode.net/javascript * IRC #node.js irc://irc.freenode.net/node.js -* IRC #io.js irc://irc.freenode.net/io.js — the Node fork +* IRC #io.js irc://irc.freenode.net/io.js The Node fork ## News @@ -192,6 +210,7 @@ Some of these links are affiliate links, meaning that if you make a purchase, I * [Nodecopter](http://www.nodecopter.com/) * [Tessel](https://tessel.io/) * [Espruino](http://www.espruino.com/) +* [Onion Omega](https://onion.io/omega) ## Hosting @@ -202,29 +221,29 @@ Some of these links are affiliate links, meaning that if you make a purchase, I * [JavaScript for Kids](http://www.amazon.com/gp/product/B00QL616QE?ie=UTF8&camp=213733&creative=393177&creativeASIN=B00QL616QE&linkCode=shr&tag=ericleads-20&linkId=6AOODC27L6URY3K2) * [LearnToMod](http://www.learntomod.com/) Mod Minecraft with JavaScript +* [The Young Person's Guide to Programming in Minecraft](https://github.com/walterhiggins/ScriptCraft/blob/master/docs/YoungPersonsGuideToProgrammingMinecraft.md#the-young-persons-guide-to-programming-in-minecraft) ## Twitter (alphabetical order) -* [Addy Osmani](https://twitter.com/addyosmani) — App architecture expert, Chrome dev tools champion -* [Angus Croll](https://twitter.com/angustweets) — Author, “If Hemingway Wrote JavaScript” -* [Axel Rauschmayer](https://twitter.com/rauschma) — ES Next evangelist, author -* [Brendan Eich](https://twitter.com/BrendanEich) — Created JavaScript -* [David Nolen](https://twitter.com/swannodette) — Great functional programming content -* [David Herman](https://twitter.com/littlecalculist) — Author, “Effective JavaScript” -* [EchoJS](https://twitter.com/echojs) — News and links -* [Eric Elliott](https://twitter.com/_ericelliott) — That’s me. O’Reilly author. JavaScript architect. JS Instructor. -* [Jafar Husain](https://twitter.com/jhusain) — Great talks on RxJS, ES next, etc... -* [James Halliday](https://twitter.com/substack) aka Substack — author of ~one million~ Node modules you probably use. -* [James Long](https://twitter.com/jlongster) — CSP, functional programming advocate, Mozilla developer -* [JavaScript Cheerleader](https://twitter.com/JS_Cheerleader) — Mover & shaker, JavaScript evangelist, documentary film maker -* [JavaScript Daily](https://twitter.com/JavaScriptDaily) — News and links -* [Jordan Harband](https://twitter.com/ljharb) — Keeping us ahead of the JS curve -* [Kyle Simpson](https://twitter.com/getify) — Author, YDKJS — O’Reilly, JS Instructor, open web evangelist -* [Marijn Haverbeke](https://twitter.com/marijnjh) — Author, “Eloquent JavaScript” -* [Nicholas C. Zakas](https://twitter.com/slicknet) — Author, speaker -* [Nick Morgan](https://twitter.com/skilldrick) — Author, “JavaScript for Kids” -* [Paul Irish](https://twitter.com/paul_irish) — Developer evangelist, Chrome dev tools champion -* [Reginald Braithwaite](https://twitter.com/raganwald) — Author, “JavaScript Allongé,” speaker, GitHub -* [YDKJS](https://twitter.com/ydkjs) — You Don’t Know JS, O’Reilly book series by Kyle Simpson - +* [Addy Osmani](https://twitter.com/addyosmani) App architecture expert, Chrome dev tools champion +* [Angus Croll](https://twitter.com/angustweets) Author, "If Hemingway Wrote JavaScript" +* [Axel Rauschmayer](https://twitter.com/rauschma) ES Next evangelist, author +* [Brendan Eich](https://twitter.com/BrendanEich) Created JavaScript +* [David Nolen](https://twitter.com/swannodette) Great functional programming content +* [David Herman](https://twitter.com/littlecalculist) Author, "Effective JavaScript" +* [EchoJS](https://twitter.com/echojs) News and links +* [Eric Elliott](https://twitter.com/_ericelliott) That's me. O'Reilly author. JavaScript architect. JS Instructor. +* [Jafar Husain](https://twitter.com/jhusain) Great talks on RxJS, ES next, etc... +* [James Halliday](https://twitter.com/substack) aka Substack - author of ~one million~ Node modules you probably use. +* [James Long](https://twitter.com/jlongster) CSP, functional programming advocate, Mozilla developer +* [JavaScript Cheerleader](https://twitter.com/JS_Cheerleader) Mover & shaker, JavaScript evangelist, documentary film maker +* [JavaScript Daily](https://twitter.com/JavaScriptDaily) News and links +* [Jordan Harband](https://twitter.com/ljharb) Keeping us ahead of the JS curve +* [Kyle Simpson](https://twitter.com/getify) Author, YDKJS - O'Reilly, JS Instructor, open web evangelist +* [Marijn Haverbeke](https://twitter.com/marijnjh) Author, "Eloquent JavaScript" +* [Nicholas C. Zakas](https://twitter.com/slicknet) Author, speaker +* [Nick Morgan](https://twitter.com/skilldrick) Author, "JavaScript for Kids" +* [Paul Irish](https://twitter.com/paul_irish) Developer evangelist, Chrome dev tools champion +* [Reginald Braithwaite](https://twitter.com/raganwald) Author, "JavaScript Allongé", speaker, GitHub +* [YDKJS](https://twitter.com/ydkjs) You Don't Know JS, O'Reilly book series by Kyle Simpson diff --git a/src/data/theBookData.json b/src/data/theBookData.json new file mode 100644 index 0000000..9a321c6 --- /dev/null +++ b/src/data/theBookData.json @@ -0,0 +1,71 @@ +{ "theBookData": + [ + { + "title": "Books", + "items": [ + { + "title": "JavaScript for Kids", "author": "Nick Morgan", "href": "#", + "description": ["A playful introduction to programming."], + "tags": ["kids", "language", "DOM", "jQuery", "Canvas"], "level": "Beginners", "rank": 9 + }, + { + "title": "Eloquent JavaScript", "author": "Martin Haverbecke", "href": "#", + "description": ["A modern introduction to programming."], + "tags": ["language", "Node.js", "jQuery", "modules"], "level": "Beginners", "rank": 8 + }, + { + "title": "JavaScript: The Good Parts", "author": "Douglas Crockford", "href": "#", + "description": ["Unearthing the Excellence in JavaScript."], + "tags": ["language", "patterns", "OOP", "Node.js"], "level": "Beginners", "rank": 7 + }, + { + "title": "Effective JavaScript", "author": "David Herman", "href": "#", + "description": ["68 Specific Ways to Harness the Power of JavaScript."], + "tags": ["language", "patterns", "OOP", "Node.js"], "level": "Intermediate", "rank": 6 + }, + { + "title": "Programming JavaScript Applications", "author": "Eric Elliot", "href": "#", + "description": ["Robust Web architecture with Node, HTML5 and modern JS libraries."], + "screenshot": "", "tags": ["language", "patterns", "OOP", "frameworks"], + "level": "Intermediate", "rank": 5 + }, + { + "title": "JavaScript: The Definitive Guide", "author": "David Flanagan", "href": "#", + "description": ["_The_ JS bible currently in its 6th edition (=ES5)."], "screenshot": "", + "tags": ["language", "patterns", "OOP", "Node.js", "jQuery", "reference", "volume"], + "level": "Intermediate", "rank": 4 + }, + { + "title": "You Don't Know JS", "author": "Kyle Simpson", "href": "#", + "description": ["A more complete understanding of JavaScript."], + "screenshot": "", "tags": ["language", "patterns", "OOP", "Node.js", "jQuery", "reference", "volume"], + "level": "Advanced", "rank": 3 + }, + { + "title": "Understanding ECMAScript 6", "author": "Nicholas C. Zakas", "href": "#", + "description": ["It is now oficially called ECMAScript 2015, but that's beside the point."], + "screenshot": "", "tags": ["language", "patterns", "OOP", "ES6", "class"], + "level": "Advanced", "rank": 2 + }, + { + "title": "Node.js in Action", "author": "Mike Cantelon, Marc Harter, T.J. Holowaychuk and Nathan Rajlich", + "href": "#", "description": ["An example-driven tutorial."], "screenshot": "", + "tags": ["language", "patterns", "OOP", "ES6", "class"], "level": "Advanced", "rank": 2 + }, + { + "title": "The Dream Machine: J.C.R. Licklider and the Revolution That Made Computing Personal", + "author": "M. Mitchell Waldrop", "href": "#", + "description": ["A man that made computing personal (not Jobs).", + "In 1962, decades before \"personal computers\" and \"Internet\" became household words, the revolution that gave rise to both of them was set in motion from a small, nondescript office in the depths of the Pentagon."], + "screenshot": "", "tags": ["history", "biography", "revolution"], "level": "Beginners", "rank": 1 + }, + { + "title": "WebGL Fundamentals", "author": "Greggman", "href": "#", + "description": ["An interactive online book about graphics programming."], + "screenshot": "", "tags": ["WebGL", "graphics", "games", "browser"], + "level": "Intermediate", "rank": 1 + } + ] + } + ] +} \ No newline at end of file diff --git a/src/img/.gitignore b/src/img/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/src/jade/about.jade b/src/jade/about.jade new file mode 100644 index 0000000..eb4f335 --- /dev/null +++ b/src/jade/about.jade @@ -0,0 +1,18 @@ +extends ./page/page.jade +//- +block content + div + p + | This is a very exclusive collection of only must-have JavaScript links. I’m only listing my favorite links. Nothing else makes the cut. Feel free to suggest links if you think they’re good enough to make this list. The really curious should feel free to browse the comments to find other links. I can’t guarantee the quality of links in the comments. + aside.InfoBox.InfoBox--Warning + h2.List-Header Full Disclosure + p + | Some of these links are affiliate links, meaning that if you make a purchase, I might earn a little money. + strong This has absolutely no bearing on whether or not links make the list. + em None, whatsoever. + | However, it does allow me more resources to + = ' ' + strong + a(href='#') fight poverty with code + = ' ' + em Every little bit counts. diff --git a/src/jade/index.jade b/src/jade/index.jade new file mode 100644 index 0000000..c737ad1 --- /dev/null +++ b/src/jade/index.jade @@ -0,0 +1,10 @@ +extends ./page/page.jade +include ./list/mixins.jade +//- +block content + // + Here go our lists of those links. + Or one list, if it's the search or filter results. + (theBigData comes from src/data/the-big-data.json via Gulp) + each cat, index in bigData.categories + +List(cat, index) \ No newline at end of file diff --git a/src/jade/list/mixins.jade b/src/jade/list/mixins.jade new file mode 100644 index 0000000..bfe92f2 --- /dev/null +++ b/src/jade/list/mixins.jade @@ -0,0 +1,39 @@ +mixin ListItemTag(t, index) + = ' ' + a(href='http://github.com/tags/'+ t) #{t} + +mixin ListItem(d, index, isCompact) + - var descShort = d.short_description || ''; + - var descLong = d.long_description || descShort; + - if (isCompact == undefined) isCompact = true; + article.List-Item + header.List-Item-Header + cite.List-Item-Title + a(href=d.href)= d.title + //- + if d.author + span.List-Item-Author by #{d.author} + p(class=['List-Item-Description', 'List-Item-Description--Short'])= descShort + //- + if d.tags + .List-Item-Tags + span.List-Item-Tags-Label Tags: + each tag, i in (d.tags) + +ListItemTag(tag, i) + if d.level + .List-Item-Level + span.List-Item-Tags-Handle Good for: + = ' ' + a(href='http://github.com/level/' + d.level) #{d.level} + +mixin List(cat, index) + - var theID = ('000' + index).slice(-4) + '-' + cat.replace(/\s/g, '-'); + - var catLinks = _(bigData.links) + - .filter(function(link) { return (_.contains(link.categories, cat)); }) + - .sortBy(function(link) { return (100 - (link.rank || -1))}) + - .value(); + section.List(id=theID) + h2.List-Header #{cat} + .List-Body + each item, i in catLinks + +ListItem(item, i, true) diff --git a/src/jade/page/page.jade b/src/jade/page/page.jade new file mode 100644 index 0000000..e11f4ea --- /dev/null +++ b/src/jade/page/page.jade @@ -0,0 +1,42 @@ +doctype html +html.no-js(lang='en') + head + meta(charset='utf-8') + meta(http-equiv='x-ua-compatible', content='ie=edge') + block title + title Essential JavaScript Links + meta(name='description', content='') + meta(name='viewport', content='width=device-width, initial-scale=1') + link(rel='apple-touch-icon', href='http://github.com/apple-touch-icon.png') + // Place favicon.ico in the root directory + link(rel='stylesheet', href='http://github.com/css/style.css') + script(src='http://github.com/js/vendor/modernizr-2.8.3.min.js') + body + + // Add your site or application content here + header#masthead.Masthead(role='banner') + block header + hgroup.Masthead-Logo + h1.Masthead-Logo-Title Essential JavaScript Links + span.Masthead-Logo-Subtitle A curated list by Eric Elliott and friends. + nav.Masthead-Menu + span.Masthead-Menu-Item + a(href='http://github.com/index.html') The Links + = ' ' + span.Masthead-Menu-Item + a(href='http://github.com/about.html') About + + main#content.Content(role='main') + block content + + footer#colophon.Colophon(role='contentinfo') + block footer + span © ’15 Eric Elliot & friends + + script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js') + script. + window.jQuery || document.write('