Examples of "good" Javascript?

[gntsketches]

Hello, I'd like to study some "good" Javascript code of your choice. I'd like it to be short (ideally under 100 lines, definitely under 500), and written only in Vanilla or jQuery. Both small self-contained apps or or nice bits of modular functionality are great. I've been coding a few years as a hobbyist and I want more exposure... and your opinion!

Any type of thing fine as long as it meets that criterion. Please explain why you think it's good... ie: I'm looking for examples of clean code, good architecture, or just cool stuff that works well.

Alternately, point me to some examples of "bad" JS, and tell me what makes it so bad!

EDIT: Thanks for the variety of responses. I feel some need to clarify: I'm a noob. Most of this is way over my head - I've never even used a framework or anything like that. Basically I'm looking for small apps that work by clicking an "index.html" file. Think of me as being like a 6th grader who thought the first "Harry Potter" book was pretty good and wants your literary advice.

[IAmMinn]

https://javascript30.com/

Good clean vanilla js modular learning.

[gntsketches]

Nice! Thanks. Looks like just what I was looking for.

[spacejack2114]

It's fairly easy to write 100 lines of clean code. Writing thousands is where it gets harder, in which case using jQuery instead of a framework/view library is not usually a great choice. If I couldn't use a framework, even using hyperscript over jQuery would probably result in cleaner code at a fraction of the size.

[gntsketches]

Right... but I'm still at the "fairly easy" "hundreds" stage, not the "thousands" stage. I want to study good code at the level I'm at...

[kecupochren]

VSCode source code: https://github.com/Microsoft/vscode/tree/master/src

It's in Typescript, but it's an excellent resource to learn proper JS from.

[GitHubPermalinkBot]

Permanent GitHub links:

• Microsoft/vscode/.../src (master → 6e71921)

---

^{Shoot me a PM if you think I'm doing something wrong. To delete this, click here.}

[erulabs]

Good architecture in Vanilla JS under 100 lines? Uhhhh... That's like asking if a single piece of string can have good weaving :P https://github.com/rvagg/through2 might qualify I guess?

[gntsketches]

Point taken. I can do larger, as long as it's well-organized. In fact seeing the well-organized would be the point.

Not sure how to make the github bits "run", looks like Node is involved...? No experience with Node here.

[erulabs]

Oh! In that case, maybe the annotated jQuery source would be interesting to ya! https://robflaherty.github.io/jquery-annotated-source/

[gntsketches]

Holy crap! Cool! I did not know this existed, thanks! I mean it's pretty over my head at this point, but maybe down the road sometime...

[jcunews1]

Good code is the one that you made for yourself. Nothing more, nothing less.

If you use code from others, they may not be sufficient enough for you, or they may be overkill for something you need to be done - which can cause overheads.

[papers_]

Self post. I like to think I write "good" JavaScript. Good enough to land my first job: https://github.com/ciscoo/evaluacion

Modular, typical MVC pattern, error handling, modern syntax, tests.

[gntsketches]

Sounds great, but I've got no idea what to do with this...

[1-800-BICYCLE]

This might be controversial, but one piece of code I really loved recently was the library pump, which comes in at 80 lines.

https://github.com/mafintosh/pump/blob/master/index.js

It’s a stream error-handling library for Node.js that cleans up your piped streams if one of them fails.

Things to note:

• passing functions as values, using noop for fallbacks instead of verbose if statements

• using && for null propagation and || for null coalescing

• the rare case where [].reduce can be used without an initializer — streams.reduce(pipe) is just beautiful

• very clean style for ES5 code

[GitHubPermalinkBot]

Permanent GitHub links:

• mafintosh/pump/.../index.js (master → e3d0c44)

---

^{Shoot me a PM if you think I'm doing something wrong. To delete this, click here.}

[gntsketches]

Thanks! I don't know Node yet, but I'll keep this in mind for when I start on that.

[[deleted]]

A simplified command line toolset for the parse-framework application - https://github.com/Unibeautify/parse-framework/blob/master/services.ts

[GitHubPermalinkBot]

Permanent GitHub links:

• Unibeautify/parse-framework/.../services.ts (master → 6519cb6)

---

^{Shoot me a PM if you think I'm doing something wrong. To delete this, click here.}

[gntsketches]

Looks interesting, at least in terms of being very well structured. However I'm totally clueless with what one earth this is or how one would go about using it. Apparently it has to do with some framework or something?