Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Essential JavaScript Links
Owner

ericelliott commented Jan 4, 2015

😃

Owner

ericelliott commented Jan 4, 2015

@css-nerd I still use jQuery

@ghost

ghost commented Jan 4, 2015

No problem, me too, yet sometimes it just does not make any sense to import jQuery or other large libraries in order to achieve something trivial. After all, coding the trivial things gets you started to learn JavaScript (or any language for that matter).

Of course it’s your choice, whether you’d like to add this your the list, I thought it might be helpful, because it has helped me a quite a few times. Plus, it might show newcomers that taking the easy way out is not always equivalent to taking the best way out.

Owner

ericelliott commented Jan 4, 2015

True. It's linked indirectly now via Paul Irish's impressive list of browser bugs that jQuery patches. =)

Owner

ericelliott commented Jan 6, 2015

Must-Watch JavaScript

There are too many. Pick 5 of your favorites.

Owner

ericelliott commented Jan 6, 2015

@acid24 Thanks for your contribution! =)

I can't recommend JavaScript-Garden without a total rewrite of all their recommended conclusions regarding constructors, inheritance, and factories. See The Two Pillars of JavaScript Part 1.

I know my views are not popular with people who are more familiar with classical inheritance, but I don't care about being popular. I'd rather help fewer people be more productive than be popular with a wider audience.

@ghost

ghost commented Jan 6, 2015

Did I hear books and Node.js on Twitter?

Node.js Books

PS: Why can’t I use Markdown-links correctly to save my live?

Owner

ericelliott commented Jan 6, 2015

You did. Thanks!

Owner

ericelliott commented Jan 6, 2015

Are any of these links essential?

Owner

ericelliott commented Jan 6, 2015

Can any Node experts vouch for the essential nature of css-nerd's Node book suggestions? I don't think I've read either one...

Owner

ericelliott commented Jan 6, 2015

Also, still looking for top picks from Must Watch JavaScript...

@ericelliot
Rethinking Best Practices: Pete Hunt, JSConf.Asia
Async JavaScript at Netflix: Jafar Husain, Netflix JavaScript Talks
Maintainable JavaScript: Nicholas Zakas, FluentConf

@ghost

ghost commented Jan 6, 2015

@ericelliot In the unlikely case nobody can, I’ll start by giving a little description:
The first book is relatively “new” and offers well-written compendium on how to work with Node.js, the most important modules/frameworks, how to solve particular tasks (e.g. file uploads) that every developer will face with Node as with any other environment, rounded up with reasonable (i.e. real) best practices.

It offers the best and most recent overview, I could think of, the Author has lots of experience and offers alternative solutions for many problems too. The book is as recommendable for people new to Node as well as for people who’ve already finished a few projects with it.

The second book is rather aimed at experienced Node devs and, as I must admit, sometimes a little less clear than the aforementioned one, but it’s nonetheless very useful if streaming, module usage and other things Node is pretty useful for, is relatively new to the reader.

As with the links/books provided by me before these books I wouldn’t have suggested them, if they hadn’t been useful to me.

Owner

ericelliott commented Jan 6, 2015

@tinkertrain - Thanks! =)

@ghost

ghost commented Jan 6, 2015

Must watches

It’s actually a limitation to pick 5, because there are quite a few good ones. But I am convinced that Paul Irish, Angelina Fabbro and Nicholas Zakas shouldn’t be missing from the list.

2014
  • Enemy of the State: Amy Palamountain
  • What the Heck Is the Event Loop Anyway?: Philip Roberts
2013
  • JavaScript Masterclass: Angelina Fabbro
2012
  • JavaScript Development Workflow of 2013: Paul Irish
  • Maintainable JavaScript: Nicholas Zakas
Owner

ericelliott commented Jan 6, 2015

Thanks to you, as well, Daniel! The descriptions are helpful. 👍

Dev tools & collaboration

Pasting / sharing code

@ghost

ghost commented Jan 6, 2015

This is already an amazingly useful and interesting list. Currently at the top of my bookmarks.

Owner

ericelliott commented Jan 6, 2015

What are the best static analysis tools? Are any of these worthy of consideration?

Browserify for concatenation/optimization and all-round goodness (it even makes writing Angular code bearable).

gollodev commented Jan 7, 2015

Data Structures and Algorithms with JavaScript

Owner

ericelliott commented Jan 7, 2015

Style guide candidates:

Looking for an idiomatic style guide to recommend. I'd prefer to pick one that has an ESLint config for style guide enforcement. Using lint rules for style enforcement radically reduces wasted time on style issues in pull requests and bikeshedding. Set it and forget it. All PRs magically conform to the correct style.

Comments, suggestions?

Owner

ericelliott commented Jan 7, 2015

Simple Made Easy Video - suggested by @getify

lguzzon commented Jan 7, 2015

In Transpilers ...
http://esperantojs.org/

I wholeheartedly recommend the "Crockford on JavaScript" videos. http://yuiblog.com/crockford/

gbabula commented Jan 7, 2015

Books:

Style Guides:

Five personal faves from Must-Watch JavaScript:

jkup commented Jan 8, 2015

Does Google's Closure Compiler fit somewhere on this list?

https://developers.google.com/closure/compiler/

bvjebin commented Jan 8, 2015

This blog can make its way in the list I guess!
http://javascriptweblog.wordpress.com/

chovy commented Jan 8, 2015

http://reddit.com/r/remotejs - Remote JavaScript jobs.

bouveng commented Jan 8, 2015

Hi! Douglas Crockford has a useful series of videos. In found those very useful.

https://youtube.com/playlist?list=PL5586336C26BDB324

Owner

ericelliott commented Jan 8, 2015

@lguzzon Why does esperantojs deserve to make the cut? Is it better than the others?

Owner

ericelliott commented Jan 8, 2015

JavaScript Jabber is already in the news section.

Anything framework specific needs to be really extraordinarily outstanding or it doesn't make the cut.

Owner

ericelliott commented Jan 8, 2015

Crockford's JS videos are pretty good, but a little dated.

Owner

ericelliott commented Jan 9, 2015

Is Intern a good testing solution? It looks like it might be good for app projects, but I'm a little wary because all the examples use AMD. Why, why, why?

npm + node style modules have won the internet. 5x as many bower modules, growing faster than the Bower registry, and Browserify is a much cleaner solution than Require.js. AMD is dead. It just doesn't know it, yet.

Owner

ericelliott commented Jan 9, 2015

Testing contenders:

Votes?

Owner

ericelliott commented Jan 9, 2015

Is Accounting.js any good? Are there better alternatives?

Another contender for testing: Testem

Great list Eric. Thanks. Here are a few additions I think people may find helpful.

http://webtoolsweekly.com - Every issue comes with on example of using JavaScript/DOM at the top followed by links to tools for testing, debugging, productivity, deployment, etc.
http://www.ng-newsletter.com/ - Weekly newsletter on Angular.
http://designpepper.com/a-drip-of-javascript/ - Not weekly, or on any time frame for that matter, but always in depth. Book also available on LeanPub.

What is considered essential really depends on what context you're working on.

If you're into Node, the work @substack has put into the Stream and Browserify handbooks is pretty crucial. @maxogden's art of node write-up is also interesting. Although not crucial to Node itself, a good understanding of ES6 fundamentals (Promises, Modules and so forth) may also be useful (in io.js sooner) and Slicknet's Understanding ES6 is also worth a read. I've found myself reading through posts from StrongLoop, the npm team and a plenty of issues for the rest of my Node knowledge. @sindresorhus maintains a pretty thorough list of resources for those interested in Node over here: https://github.com/sindresorhus/awesome-nodejs#resources

It's a different story if you care about JS application architecture, JS performance reading and so forth.

I enjoy this Crockford vid: https://www.youtube.com/watch?v=JxAXlJEmNMg more so for it's entertainment than it's importance.

Owner

ericelliott commented Jan 10, 2015

@addyosmani I really believe that isomorphic JS is poised to take off, so developers who bone up on both browser and node architecture are going to have an edge. I'm sharing both kinds of resources, particularly those that talk about generally applicable stuff rather than overtly framework-specific stuff. Thanks for your contributions!

@ralphtheninja - Love it! =) Thanks a lot.

@shaneckel - I really enjoyed all of those talks. I was thinking I'd focus on stuff that is a little more current, but there is a lot of great historical info and some high level perspective in the industry in those talks. I think I'll link once to a whole collection of them. Thanks for pushing me. =)

Re: Testing. Mocha is excellent. Never had a problem, it's very flexible, and is easy to get started with (comes with a built in test runner).

@ghost

ghost commented Jan 10, 2015

@addyosmani Thank you for posting the Sindre Sorhus list on Node! That thing is amazing and just helped a lot with an annoying little problem I had.

shameless self plug (after asking if it was ok to do this)

my SOLID JavaScript talk on YouTube (from Codemash 2014) has been getting nothing but great comments for the last year, ant 10K+ views: https://www.youtube.com/watch?v=TAVn7s-kO9o

i've also had 1200+ people go through my "Mastering JavaScript 'this'" email course, with a ton of great feedback: http://derickbailey.com/email-courses/masteringthis/

We use Jenkins for CI/CD! http://jenkins-ci.org/

dfkaye commented Jan 12, 2015

MOCHA ~ multiple test styles (tdd, bdd, "qunit") & reporters ~ can intercept (& modify) failing msgs easily (thx to try/catch)

  • using Testem to drive it

No link for Jenkins?

under web components - http://bosonic.github.io/

deebloo commented Jan 13, 2015

JSDOC automatically create documentation site based on comments
Core - http://usejsdoc.org/
Grunt - https://github.com/krampstudio/grunt-jsdoc
Gulp - https://www.npmjs.com/package/gulp-jsdoc

gdbtek commented Jan 13, 2015

Web Framework: http://hapijs.com
Code Coverage: http://blanketjs.org

Owner

ericelliott commented Jan 14, 2015

@dannybluedesign: Added JSDoc to dev tools

@gbdtek What do you love about hapijs? What would you change?

Owner

ericelliott commented Jan 14, 2015

@bgtek: Can you use blanketjs with tape?

Pasting / sharing code

JSFiddle

Forgot to add morkdown

@ericelliott Have you seen and if so what do you think of Ramda? #functionalJavaScript
JSBin is very nice for JavaScript too

Owner

ericelliott commented Jan 16, 2015

@tinkertrain: Ramda is pretty cool. I think it's a great educational tool, and a worthy utility belt.

I wasn't expecting my libraries in this list but at least these widely tested and adopted polyfills ...

Custom Elements polyfill that does not pollute the global scope with partial shim and stuff and works down to IE9 and Mobile + older Android

DOM Level 4 to normalize mobile and desktop browsers to latest DOM4 standard

ie8 to bring standard DOM features to ie8 too.

gokulj commented Jan 16, 2015

A virtual DOM based micro MVC framework - http://lhorie.github.io/mithril/index.html
The blog is a great read even if you don't use Mithril
http://lhorie.github.io/mithril-blog/index.html

chiefy commented Jan 16, 2015

Mocha 👍

I have to second @addyosmani's recommendation for Nicholas Zakas's Understanding ES6. There are good programmers, and then there are good programmers who are also good writers, and Zakas is a good writer. Although still a work-in-progress what he has written so far represents the most clear, lucid explanation of ES6 features I've encountered yet, especially for Javascript programmers who may not be experienced in patterns from other languages (the chapter on Generators is a particularly good example).

Also, this may stray a bit too far off-topic from your list, but I think Multiplexing with SPDY and HTTP/2 by @guybedford is really valuable because of the impact HTTP/2 is going to have on front-end development, especially because our current build processes with bundling will become an anti-pattern. The video does a great job illustrating how HTTP/2 is going to be just as big a change for us as ES6.

Owner

ericelliott commented Jan 16, 2015

Thanks for the recommendations! =)

mtomcal commented Jan 16, 2015

kaidez commented Jan 17, 2015

Can I suggest Stoyan Stefanov's "Object-Oriented JavaScript" as a book? It contains an excellent walk-through on closures and has two great chapters on prototypes.

apsavin commented Jan 17, 2015

What about jscs - js code style checker?
Why Sublime Text 3? WebStorm!

Transpiler: TypeScript I know, it's made by Microsoft so it must be evil. But it's really not 😄

Owner

ericelliott commented Jan 18, 2015

Thanks for the suggestions, guys! I hope people have as much fun exploring the comments as they do the actual list. =)

Excellent resource, thank you. Are you tracking io.js? http://blog.risingstack.com/iojs-overview

jwebcat commented Jan 18, 2015

You should add @sindresorhus to the twitter list.

I definitely suggest to look into http://dmitrysoshnikov.com/. It is the one of the best js explanation ever as for nooby me.

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
http://jsperf.com/

vneverz commented Jan 22, 2015

Amazingly useful and interesting list. Thanks for the recommendations!

jkup commented Jan 22, 2015

Consider adding the NodeUp podcast? Potentially breaking podcasts out of the news section?

a0viedo commented Jan 22, 2015

I also recommend the book @css-nerd mentioned, Node.js: The right way. Also consider adding these:

Community

Games (to learn)

Thanks for posting this info! It's really useful to me as I broaden (and deepen) my understanding of JavaScript.

Because I mostly don't know these resources, I forked your gist so I could insert descriptions into each listing (mostly as written at the link you provide). I don't know if there's anyway to feed these back to you, if you wanted. My fork of your list is at https://gist.github.com/rsperberg/ed44613269be4b1eff79

Engines

NiL.JS

jkup commented Jan 26, 2015

Also, I'd second adding Atom.io like @krishammons recommended. It's open source unlike Sublime and written in JavaScript! ( Technically CoffeeScript ).

lunelson commented Feb 3, 2015

@jhusain's interactive Functional Programming tutorial is really nice
https://jhusain.github.io/learnrx/

Owner

ericelliott commented Feb 5, 2015

👍 LOTS of great suggestions. Thanks, everybody! =)

Owner

ericelliott commented Feb 5, 2015

@rsperberg Your fork is awesome, and it inspired me to turn this into a proper website.

Btw, I posted another version at super-script.us, in order to discuss the good you are doing with this list without mixing your curatorial authority with my opinion. And now that you're looking to turn this list into a website, I will help in whatever way I can. Great idea!

Owner

ericelliott commented Feb 6, 2015

Hey @rsperberg - I like it.

Quick jam session: I think it could use a more condensed listing format -- maybe small thumbnails next to short descriptions, mirroring the original a little more closely. We could add an icon to expand the listing, and clicking the title could send you to the linked resource.

Would you feel confident implementing that in HTML / CSS / JS? Or even (if you're feeling adventurous) a web component thumbnail list? =)

We'd need a little data structure for each link. Something like:

{
  name: String,  // link text
  link: Href, // url
  thumbnail: Href,  // link to thumbnail image
  image: Href  // link to full-size image
  categories: Array // list of categories the link should be displayed in
}

Eventually, adding a link could be as simple as pasting a URL into a form and selecting a category or two. We could have scripts generate the images for us, and suggest a description based on the page's content.

A Smarter Way to Learn is a really great resource with a ton of practice activities and explanations that I have found super helpful.

elmasse commented Feb 11, 2015

Any reason mocha is not under test section?
http://mochajs.org
I use it a lot with sinon + chai + proxyquire in nodejs
http://sinonjs.org
http://chaijs.com
https://www.npmjs.com/package/proxyquire

Owner

ericelliott commented Feb 11, 2015

@elmasse

On real production projects, I have used Jasmine, Mocha, NodeUnit, Tape, and a bunch of other solutions. I have investigated many other options. For the last few years, I have used and continue to use tape on all of my personal projects and projects that I lead. Here's why:

I won't list Mocha in the Essential JavaScript Links collection because Mocha does way too much and gives developers way too much freedom, and that leads to analysis paralysis and lost productivity. Maybe worse, there are getters with side effects in some of the available BDD style assertion libraries, and at one company I worked for (not naming names), that buried a bug in one of our tests, and we spent far too long debugging the test case rather than developing actual application code.

Test assertions should be dead simple:

equal, and deepEqual, pass, & fail are my primary go-to assertions. If equal and deepEqual were the only assertions available anywhere, the testing world would probably be better off for it. Why? equal and deepEqual provide quality information about expectations, and they lead to very concise test cases that are easy to read and write.

Users don't get lost in unnecessary grammar verbosity like they do in BDD style assertions.

  • Better readability.
  • Less code.
  • Less maintenance.

These features trump bells and whistles. No contest.

Another reason that I don't recommend Mocha is because it's not as easy to use in your continuous integration pipeline as tape. One of the best features of tape is that it's very easy to use with just about any test tooling, because it just outputs raw TAP - a very simple standard that has been around forever, for which there is a gigantic ecosystem.

I know that Mocha can output tap, but the fact that it doesn't just stream raw tap to the console by default makes more work for the developers and dev-ops. For unit tests, bells and whistles are a waste of time and productivity.

Want your testing to just get out of your way and let you concentrate on building things?

You can't beat tape.

elmasse commented Feb 11, 2015

@ericelliott,

Awesome response, as usual. Fair enough. I have to give tape a try myself yet.

Anyway, beside mocha, I believe sinon and proxyquire are awesome libs to help unit testing.

Owner

ericelliott commented Feb 11, 2015

👍

Owner

ericelliott commented Feb 11, 2015

The need for proxyrequire may be a code smell. Should you be exporting a function and using dependency injection, instead?

elmasse commented Feb 11, 2015

Not really.
For instance, if your module depends on fsto read a file and you want to do real unit tests, then you need to mock some how the disk access in your tests.

Owner

ericelliott commented Feb 12, 2015

Yeah, that could be a valid use case, but sometimes it's used when dependency injection would be better. I said it "could be" a code smell, not that it always is.

I think it's worth questioning yourself every time you use it, though. "Would my program be better if I could inject this dependency, instead?"

SOSANA commented Feb 15, 2015

Awesome thread... Big topic on TDD & BDD...

@ericelliott — somehow I missed your note of 10 days ago.
Yes, I'd be interested in working this up, although there are certain parts that might throw me.
By the end, I'd like to be able to create that web component thumbnail list, although at present I'm ignorant of even where to start (well, the links you have here, obviously).
Btw, I saw today that 6to5 has been renamed to Babel.

Owner

ericelliott commented Feb 15, 2015

Yeah, I've updated the Babel link.

"Would my program be better if I could inject this dependency, instead?"

@ericelliot Have you seen need in your code to use a dependency injection container of some kind? I find myself having areas of my code base which are mainly responsible for object construction and other areas that use those services via injection, but I wonder if using an injection container could help me manage the object construction areas a little better.

I briefly looked into using https://github.com/angular/di.js/ in node, just wondering if you have opinions on how best to go about managing dependencies in node, or if in general you don't find need for a library to do that.

Cmdv commented Feb 20, 2015

I used to use Sublime Text 3 all the time but I moved over to Webstorm for my javascript and it really put up my productivity as a lot of the required tools are all under one hood (terminal, server, git etc), you can still install plugins or create your own.

When working on a node.js project the predictive text is amazing, pull's in what you want from code on other js files even if they are closed. This works great with node_modules too if you keep forgetting the markup. The list goes on but I find it a strong contender that maybe a little under looked.

Useful ES6 features summary: https://github.com/lukehoban/es6features

Owner

ericelliott commented Feb 27, 2015

@nackjicholson If you want to tightly couple your modules to your app, by all means, make them depend on a dependency injection container.

Wait. Wat? Yeah. The whole point of dependency injection is to loosen the coupling between modules, but a DI container bypasses the nice dependency system built-in to node (so any dependency static analysis has to be rolled out custom for your app), and your dependencies all end up knowing each other by dependency name.

Granted, it makes it a little more convenient to swap out dependencies (just replace the named dependency with something else), but if you're building wisely, you're exposing facade wrappers to your app, anyway, so that benefit is nullified.

"Sometimes, the elegant implementation is just a function. Not a method. Not a class. Not a framework. Just a function." - John Carmack

The great thing about functions is they can take arguments. The great thing about JavaScript is functions can even take other functions as arguments.

You want the most flexible dependency injection system? For anything that produces objects, export a factory function that takes an options hash.

Do the same for dependencies that need to be shared between modules. Pass in your logger and your app config objects.

If you're worried about DI, this should be your new favorite pattern:

module.exports = function myAwesomeThing(options) {
  var myAwesomeInstance = {};
  // use dependencies passed in on the options object
  return myAwesomeInstance;
};

Want to get really fancy? Throw Stampit into the mix for truly flexible factories.

Owner

ericelliott commented Feb 27, 2015

@Cmdv Many of those benefits are available through plugins in Sublime Text, but WebStorm does have some very nice static analysis built-in. Sublime Text + Tern + DocBlocker gets you most of the way there, but WebStorm is all pre-configured for you.

But for me, I keep going back to Sublime Text because it's faster. WebStorm is like a Cadillac that tops out around 50mph. Sublime Text is the nimble sports car. I find after I've invested time tuning it, I can run circles around WebStorm... it's just that up-front investment that sucks. =)

Your mileage may vary. It's certainly possible to bog down Sublime Text too if you go too crazy with the plugins. For example, I always build a nice dev console into my projects so I get realtime lint and unit test feedback while I'm developing, so I don't install any of the inline debugging tools in Sublime. I also have a tendency to do quite a bit of interactive debugging directly in Chrome with workspaces, so it would be dishonest to say that my whole workflow really depends on Sublime Text. I let it be a good text editor, and I let my other tools be awesome at what they do.

Nevraeka commented Mar 2, 2015

Hosting - Divshot

@ericelliott you remain blessed.

@ericelliott How about a list of the best/most useful Sublime Text plugins? You mentioned Tern and DocBlockr. Others?

xfq commented Apr 5, 2015

I think the HTML5 community on Google+ has too much off-topic stuff.

@ericelliot As always thanks. I have been doing exactly what you suggest above. Factory/Builder pattern for injecting dependencies and options into modules. It does work really well.

As far as the areas of my code, usually near the entry point, that end up being spots where objects and options are constructed in order to be passed around -- I guess that's just sort of natural consequence.

Owner

ericelliott commented Apr 8, 2015

@nackjicholson - I rarely have a ton of objects with methods floating around. Instead, I have a lot of functions in place and state flows through them. See The Two Pillars of JavaScript Part 2 for why that's a good thing. =)

hueitan commented May 4, 2015

Javascript SDK design guide extracted from work and personal experience
https://github.com/huei90/javascript-sdk-design
page: http://sdk-design.js.org/

It doesn't hurt to add CodeSchool.com and codecademy.com

hoichi commented May 10, 2015

Not specific to JS, but I've found Debuggex extremely handy for regex debugging.

moklick commented May 19, 2015

Why should we suggests links here instead of creating pull requests?

Owner

ericelliott commented Jun 1, 2015

@moklick Originally, it didn't have a proper repository. I started it as a gist, and it grew and took on a life of its own. You should use pull requests, now.

Hey Eric. What happened to your EJL repo?

Scott

victor-dev commented Apr 25, 2017 edited

Why the Essential JavaScript Links List was 404 ?

404ing :(

404 :(

Mashpy commented Jul 19, 2017

Thanks for your listing. If anyone would like to read JavaScript books, here you will find best javascript books for beginners.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment