What are /r/javascript's favorite Products & Services?

From 3.5 billion Reddit comments

Man, I just love it when people who have never actually coded in a language that supports pass by reference try to explain what it means.

This animation shows the difference between passing by value and "passing a reference by value", which is not the same thing as "pass by reference". Javascript does not support pass by reference. And if that sentence makes you want to hit "reply" to try and argue that it does, stop right now and pick up a book on C++, because you don't know what you're talking about. Shit, even C# supports real pass by reference. That might be easier to pick up for a JS programmer.

It's probably somewhat difficult to describe visually in a 2 second gif, but in actual pass by reference, you are not only able to modify the contents of the cup, rather you are able to modify the cup itself, and even replace it with an entirely new cup. All the OP shows is the difference between passing a reference type vs a value type...you guessed it, by value, because JS doesn't support pass by reference.

So again, go read a book on C++. Or even just read this SO response with some brief code examples.

The biggest reason appears to be that Webpack 4 is essentially a completely botched release. There are docs on there that still have not been updated for Webpack 4.

A good example is caching, https://webpack.js.org/guides/caching/, is still about Webpack 3 and not about Webpack 4. Another one is that the replacement for extract-text doesn't support HMR, so you have to use something else in dev mode.

>First of all I always hire on Upwork,

I didn't need to read any more after that (but did anyway). But /u/ChamberedSwatch sums it up perfectly too.

If I were you, I'd get to know a few devs through meetup.com meets because someone you've met face to face, whose hand you've shaken, and with whom you've shared a coffee or beer, and maybe whose personal mobile phone number you have, is easier to gauge for reliability, credibility, and honesty than the mostly sharlatans (on both sides, and I include UpWork themselves in that description) that frequent UpWork.

I've been using Mithril for years, professionally and in personal projects. V1 has a super simple, and functional API. Great on it's own for beginners, and small projects.

A lot of examples in my GH or on Codepen.

On the downside is tooling; not on the same level as React or Vue.

The npm module "os" has 29K weekly downloads and 276 packages depend on it. This is NOT the Node core module OS. It is a one line module that is module.exports = require('os').

While it isn't currently malicious... one patch release and it would affect a lot. There is simply no need for this module, which begs the question of its purpose. I reported it to npm a while ago and it seems like they don't care.

Opening a dictionary is at least twice as hard as yelling on twitter.

> Promiscuous > > 1) … > > 2) consisting of parts, elements, or individuals of different kinds brought together without order. > > 3) indiscriminate; without discrimination. > > 4) casual; irregular; haphazard.

AFAIK this is the oldschool way to do <script async src=...>

http://caniuse.com/#feat=script-async

Old IEs for instance still don't support this feature.

Related SO answer: http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async/1834129

Did a quick search on NPM. Here is the numbers on monthly downloads:

• react - 3M
• jquery - 2.8M
• angular - 714K
• backbone - 533K
• vue - 316K
• @angular/core (aka Angular 2) - no idea, but probably less than 60K
• ember-source - 28K
• aurelia-framework - 18K

> There is no future in it.

Came here to say this. This is the most compelling argument against CoffeeScript.

The situation would be different if CoffeeScript was being developed as actively as the ES2015 standards are, but it's just not. They used to have a massive lead on Ecmascript, but not anymore, and it's set to start falling behind now, thanks to Babel being virtually completely up to date with even stage 0 proposals.

With ES2015 transpilation, you can have most of the cool stuff CS offers in a forwards-compatible setup. That's what everyone should be working towards now, in my opinion.

CS was a great influence and very important in JS development, though.

The devs themselves have outlined why you don’t want to use it in a blogpost here and have since put it into maintenance mode.

Basically, the API has some unusual quirks and while it solved lots of problems for people for a while, there are now different and better libraries out there.

I've had a similar experience with React-Native:

• Cryptic platform-specific errors and bugs
• Immature and largely outdated ecosystem
• Repo issues that get closed and/or ignored for months
• Buggy tooling. You can't trust react-native link/unlink to not break your app.
• Upgrading is horrible. Get ready to spend a day or two manually re-installing and debugging your native dependencies if you need to upgrade. Sometimes it's faster to just re-run create-react-native-app and copy your code over.
• Flex works but yoga isn't CSS and it's going to cause you problems.

As a long-time user of React, I'm hopeful that React-Native improves and becomes more usable as it matures, but for now I'll stick with native and Cordova.

>How is information hiding implemented in ES6

it's possible, but idiomatically, information hiding isn't really a big deal in js and i don't think it's worth the trouble. having said that, create a closure inside a scope that is inaccessible outside the scope:

const privateFunction = () => { return ' heh'; }; const privateMember = 'heh';

export default class Foo { public publicFunction() { return privateMember + privateFunction(); // closure inaccessible to code using class Foo } }

I answered your first question before I read your second and third question.

Yeah, definitely use TypeScript. It's pretty close to what you're looking for. You may not be be following the exact same route when architecting code, but you'll wind up in nearly the same place. I also used AS3 and also thought it was a pretty good look into what ecma could be, and I think TypeScript is fantastic for communicating contracts and adding stronger enforcement. It will never be quite as powerful for architecting as a statically typed language, but it takes JavaScript and elevates it to about 90% of the way there, which is good enough in my experience.

gulp is waaaay better than grunt, and I haven't looked back since I switched.

Also worth checking out is slush, which is the gulp equivalent of yeoman

In my experience I found that Google picks up content from client side rendered React apps pretty well... assuming your app loads reasonably fast.

That said, I would recommend server rendering if SEO performance is a concern.

&#x200B;

&#x200B;

Import path quick suggestions in JavaScript and TypeScript

Used plugins for this before, but hell ya. This will probably work better than the plugins could.

Hi Reddit,

I'm very happy that you're all so excited about my book. I'd just like to clear up a few points:

1. The fact that it's available for free in HTML form does not mean that I'm giving permission for you to scrape it and download it, nor am I giving permission for you to download PDF versions from torrent sites.

2. I worked on the book for 3 years. You have no idea how much effort goes into writing a technical book until you try to write one. My compensation for that work so far is less than minimum wage.

3. I am the founder of JSHomes - an organization dedicated to providing job training for housing-first programs for the homeless. When you decide to pocket the small expense of the book to save a few bucks, keep in mind that the money you saved could have helped a lot of people. https://medium.com/the-backer-army/fighting-poverty-with-code-d1ed3ebd982d

Out of respect and decency, please enjoy the book in its legal forms.

Sincerely,

Eric Elliott

Try redux. It is a simple library that focuses on classic FP techniques and is heavily used. There are egghead videos where the author (the great Dan Abramov) walks you through building it, and the reasoning behind it.

https://github.com/reduxjs/redux

https://egghead.io/courses/getting-started-with-redux

Couldn't agree with the recommendation to read Clean Code more. I might also suggest reading The Design of Everyday Things by Don Norman as a primer to the other design books, it's very non technical but helps to build a foundation for thinking about UX.

These rules are several years out of date.

Modern browsers (both Blink and Webkit, and probably Gecko too) use a dirty-bit system for DOM manipulation. Manipulating the DOM is just a few pointer swaps; it is not quite as fast as pure Javascript, but it's close.

However, when you dirty the DOM, it means that the browser then has to perform an expensive CSS recalc + layout + paint operation when control returns from JS. Or worse, it may have to perform that layout synchronously, blocking execution of that JS, as soon as you perform a query on a DOM node that was invalidated by your previous operation. I wrote more on this here, which also includes a link to a post by a core Webkit (now Blink) contributor with the list of properties that triggered layout as of 2011 - the list is currently very similar, although there's an experimental Chrome feature under testing that will invalidate everything I'm writing, and of course Servo does everything differently. You may also want to read How Browsers Work, which is still remarkably accurate, though again some research being done by Blink and Servo would change it dramatically.

The advice to remove your element from the page before doing DOM manipulation on it was true when IE6 was the dominant browser, 8 years ago. It's counterproductive now - it will make your code run marginally (though not severely) slower. The key performance idea with 2014 browsers is to batch all your mutations to the DOM; instead of mutating, then querying, then mutating again, keep a work list of everything you need to change and then apply the changes all at once.

I had a series of icons on the top of my personal website linking to various other platforms where I have a social media presence. They had classnames starting with"i-". Things like "i-youtube", "i-blog", and... "i-facebook". Because I had social buttons disabled via UBlock Origin, my link to facebook was just gone.

Fair warning, OP: it doesn't matter what classname you use, if you put ads there, it's going to eventually be blocked by the various ad blocking plugins. Even randomly generated classnames are probably not safe, the internet is very good at genrating heuristics to block ads, and it will always be easier to block ads than to try and defeat ad blockers: https://adblockplus.org/blog/fb-reblock-ad-blocking-community-finds-workaround-to-facebook

JavaScript enjoys a unique position as a language because it is so ubiquitous. It runs on virtually all web browsers, and this includes phones and tablets as well. It's also the only language that runs on all three mobile operating systems: iOS, Android and Windows. It's also used by Node, one of the most popular web servers. Finally it's used by databases like MongoDB. The wide usage base alone is a reason to learn JavaScript.

Now, the fancy parts. It uses one of the simplest data formats: JSON. This format is a mixture of {"key": value} and ["arrays", "like this"]. JSON mimics the object and array literal notations in JavaScript, which is elegant and simple.

Functions create their own nested scope. Functions can also return objects when using the 'new' keyword. Objects have a property 'prototype' which is a way to accomplish inheritance. However this is out of the way unlike Java or C++ where classes and inheritance are required to accomplish much of anything in the language.

Also because you can reference closures you can do things like currying, which is really elegant.

To end on a funny note, this a good lampooning some strange parts of JavaScript: https://www.destroyallsoftware.com/talks/wat

Edit: Thanks for the gold, kind stranger :-)

ES5 does not have classes. Its has objects and prototypal inheritance. Don't try to use those as if they were classes. Its just not the same thing.

Its possible to use some libraries to give you some behavior that might feel a little bit more like Java classes. For example underscore.js has a helper function called extend that you might find useful. Its still not exactly a Class, in the traditional OO sense, but the implementation of extend here will give you something closer to the style of inheritance you're used to.

By the way, you can use postgres both as a noSQL and relational database with its jsonb storage feature : http://hasura.io/blog/the-unofficial-guide-to-jsonb-operators-in-postgres/

It gets even more easier to use with a library like https://github.com/robconery/massive-js

If you can wait a few months, I recommend reading Professional JavaScript for Web Developers 4th Edition . It's scheduled for release on July 31, 2018. The 3rd Edition was the best JavaScript book in 2012, but I would no longer buy that edition since some parts have become outdated. To shorten the waiting time you could take a look at Eloquent JavaScript 3rd Edition. It's free and from 2018.

With Let's Encrypt eventually providing free SSL certificates to everyone who wants one, we're rapidly going to see a HTTPS-everywhere world become reality. Which is how it should be.

Nice list! Already used some of those tools in my smaller projects. I think one library is missing from your list: Moment.js (although most devs might already know it)

Working with dates is a real pain in the ass, especially with vanilla JavaScript.

I guess this depends on your prior experience and what stage you're at with learning JavaScript. However, here are some that I've found valuable:

• Marijn Haverbeke's Eloquent JavaScript: A Modern Introduction to Programming (available online for free: http://eloquentjavascript.net)

• Kyle Simpson's You Don't Know JavaScript series of books (also available online for free: https://github.com/getify/You-Dont-Know-JS)

• Douglas Crockford's JavaScript: The Good Parts

ES6 (ES2015) is a spec related to JavaScript the language, whereas window.fetch() is a WebApi (you can use it in the browser): https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Availability: http://caniuse.com/#feat=fetch

For your situation, I highly recommend JavaScript: The Good Parts by Crockford. Keep in mind he is quite controversial, and there are even some significant portions of JS:TGPs I flat out disagree with. But, the book is well written, short, to the point, and will take you from zero to comfortable in JS very quickly.

As you use the language more, you'll form your own opinion on JS:TGP, but for now, going with its teachings can't hurt.

From the Hacker News: https://news.ycombinator.com/item?id=9432384 >z1mm32m4n 38 minutes ago
>If an image fails to load, the browser draws a little box with some alternate text describing that box. If the CSS doesn't load, your text and content is displayed in a weird font without the grid layout you were using, but if you wrote your HTML semantically (using <h1> instead of <div class="title"> etc.), the browser can still show most of your content, and you can still move around on the page. > >If the JavaScript fails to load and you were using it to significantly alter the content on your page, for example loading a news article asynchronously, the entire page fails to load. > >I don't mean to pick on this app in particular (I actually think it's really cool and I plan on using it and learning from it), but take a look at what happens to http://hswolff.github.io/hn-ng2/ when you switch off JavaScript--it's completely unusable. Now try switching off JavaScript on Hacker News--all the links and comments are still there.

Funny how on both sites most commenters haven't even looked at the link.

function twoTwo() { var Hͫ̆̒̐ͣ̊̄ͯ͗͏̵̗̻̰̠̬͝ͅE̴̷̬͎̱̘͇͍̫̠̱̩̭̤͈̾ͦ͊͒͊̓̓̐̑̎̋ͮͩ̒͑̾͋͘Ç̳͕̯̭̱̲̣̠̜͋̍O̴̦̗̯̹̼ͭ̐ͨ̊̈͘͠M̶̝̠̭̭̤̻͓͑̓̊ͣͤ̎͟͠E̢̞̮̹͍̞̳̣ͣͪ͐̈T̡̯̳̭̜̠͕͌̈́̽̿ͤ̿̅̑Ḧ̱̱̺̰̳̹̘̰́̏ͪ̂̽͂̀͠ = arguments.callee.name.length; var ლಠ益ಠლ=(function P0() {return arguments.callee.name})() .split('').filter(function(chr) {return /[A-Z0-9]/i.test(chr)}) .reduce(function(a, b) {return a.charCodeAt(0) + b.charCodeAt(0)}) >> Hͫ̆̒̐ͣ̊̄ͯ͗͏̵̗̻̰̠̬͝ͅE̴̷̬͎̱̘͇͍̫̠̱̩̭̤͈̾ͦ͊͒͊̓̓̐̑̎̋ͮͩ̒͑̾͋͘Ç̳͕̯̭̱̲̣̠̜͋̍O̴̦̗̯̹̼ͭ̐ͨ̊̈͘͠M̶̝̠̭̭̤̻͓͑̓̊ͣͤ̎͟͠E̢̞̮̹͍̞̳̣ͣͪ͐̈T̡̯̳̭̜̠͕͌̈́̽̿ͤ̿̅̑Ḧ̱̱̺̰̳̹̘̰́̏ͪ̂̽͂̀͠; return ლಠ益ಠლ }

jsfiddle

From the comments on Hacker News:

> It looks like they weren't actually using React for much. The diff is +230 lines, and there's close to that much of just new tests. Most of the actual changes are trivial (e.g. @isMounted() to @mounted) and there's not all that much DOM manipulation logic in the end result. > > Overall it looks like React guided them in the right direction for how to design their view code, but they don't actually need most of React's functionality.

I started with Angular but I'm more of a React guy now. It depends if you want a big framework that does everything (ajax, DI, ...) and enforces you to its constraints, or if you just want to abstract the V (in MV*), ignore the DOM and just code the logic.

Also, it's not only about React. Check Vue (personal favorite), Ractive, Reactive, Ripple, Rivets.

Edit: a bit biased but thats how I feel now - But Angular is a great framework overall. Just know that you will end up coding "angular" rather than "javascript".

There is no official JavaScript documentation; it's important to note that what we colloquially refer to as JavaScript is really called ECMAScript.

Mozilla has excellent documentation of its brand of ECMAScript, JavaScript, at Mozilla Developer Center: https://developer.mozilla.org/en/javascript

You can read Microsoft's documentation of their brand of ECMAScript, JScript, here: http://msdn.microsoft.com/en-us/library/yek4tbz0(VS.85).aspx

The loop is now complete. Now with v8js and php.js, we can run php inside of javascript inside of php inside of javascript ...

On another note, does anyone know how php.js on node.js performance compares to zend php interpreter.

My trust for Google has ever so slowly been coming to an end and this is the last strike. Their dictatorship is a corroding poison, they even banned Refined Twitter the other day for no reason. Chrome has officially made it on my boycotted list. Firefox, you beautiful thing, I’m coming back baby.

As of 2019 I currently leverage the following:

• uBlock Origin
• Ghostery
• DuckDuckGo
• Little Snitch
• NordVPN
• 1.1.1.1.1

All these wonderful tools allow me to browse the web and use my computer without the bullshit, I highly recommend these tools. While Chrome has been great I ain’t going down this route.

Update:

Have completed the switch from Chrome back to Firefox. I must say having neglected Firefox for so long I’ve missed all the fantastic advancements that come with it. I dropped Ghostery as part of the protection list, no need to use a tool that helps advertisers.

I’m closing, fuck google and fuck chrome.

I think it contains a lot of dubious advice and examples.

It contains some decent advice as well, but unfortunately, because Martin typically writes about his personal preferences and by his own admission he doesn't always have objective evidence to justify what he recommends, no-one in the target audience can reliably tell which advice is worth following.

A simple example is that he is a big fan of very short functions. There is little evidence to support that style working well in terms of productivity or quality. If anything, what evidence there is about function lengths suggests that extremely short functions are a liability. You'll find discussion about this sort of issue in a better book like Code Complete, complete with sources. You won't find much of it in Clean Code.

A larger example: I just opened it at a random page, and found myself in the middle of a 50+ page chapter that presents a worked example of improving code, using an argument parser as its example material. I looked through the whole thing to make sure I wasn't being unfair, but no, the code at the start of the chapter really is the final result, of which the author is apparently very proud. I'd initially assumed it was the starting point, because it's a textbook example of verbose, over-complicated, hard-to-navigate code that would never pass a code review anywhere I've ever been involved with them. Ironically, the author actually comments on part of this in the text itself, and mentions that the same functionality could be achieved in far less code in various other programming languages. So why not use one of those to illustrate good programming practice then, rather than presenting a case study in why Java has the negative reputation it has?

Books:

• JavaScript: The Good Parts

• JavaScript: The Definitive Guide

Online Resources:

Mozilla Developer Network (MDN)

Libraries:

Too numerous to really mention even a fraction, but some of bigger ones:

• jQuery
• Angular (MVC framework, alternatives are Ember and Knockout)
• React (DOM manipulation/management)
• NodeJS (server-side JS)

Management:

• NPM (Node Package Manager)
• Bower/Grunt

You can copy/paste an emoji directly into source code and use it in a string, or anywhere else, really (yes, it is OS agnostic).

I generally use https://emojipedia.org/ to find/lookup emoji and then copy/paste it to where I need it. At work we use this in the console (like in the article) but really they can be used most anywhere these days.

Yes, learn Scala - it's really fun! And if you're knee-deep in ES6 at the moment then the syntax is a breeze. You can even start off writing Scala as if it's JavaScript (minus prototypal inheritance!).

But the real reason to learn Scala is not to get work in finance, but because it'll give you a whole new perspective on coding that you can then bring back in to JavaScript. I'd HIGHLY recommend doing the Martin Odersky coursera course: https://www.coursera.org/course/progfun... it's incredibly insightful.

Figured I'd mention that Microsoft also has Visual Studio Online, which can be configured with an Azure server to offer similar capabilities with better extension support as far as I know. It's also a lot more straightforward to set up.

I have had issues with hosting on my personal desktop and access from a laptop - the desktop host needs to be re-initialized every time I connect (super annoying, if anyone has a similar experience, would love a solution).

New tab/about:blank/google.com if it's just to play around in DevTools.

I really like https://codesandbox.io/ for more involved experiments, and it makes it easy to share them with team mates.

https://codepen.io/anon/pen/rqWeqe?editors=0001

&#x200B;

function add() { if (arguments.length === 2) { return arguments[0] + arguments[1]; } if (arguments.length === 1) { let firstArg = arguments[0] return function(secondArg) { return secondArg + firstArg } } }

Hopefully the code is self-explanatory.

Nobody has given a serious answer, but I remember the confusion of starting out so I'll go for it.

You are a web developer and have lots of tedious tasks you need to complete every time you need to push an update to your website or whatever:

• Join up all your JavaScript files (and bower/npm dependencies JavaScript files).

• Compile SCSS/Less to CSS.

• Minify JavaScript/HTML/CSS.

• Optimise images.

• Compile Typescript/ES6/CoffeeScript to ES5.

... and so on.

Grunt is a tool that helps* you write shit that does all the above. You could do it all yourself without Grunt, Gulp or whatever, but it would be hassle and would probably involve calling a whole lot of command line tools every time you need to update your production server for example.

* I said "helps" because Grunt doesn't do all that work on its own necessarily. Instead there are lots of plugins that are written for Grunt that do little individual tasks. E.g. one plugin might just be for concatenating JavaScript for example. You piece all these plugins together with Grunt and divide them into "tasks". You might have a "build" task that does three or four steps to get your site ready for release. Or you might have a "test" tasks that runs all your tests.

Not exactly ELI5 but that would take a long time to explain to a five year old.

It's more like a performance test really, each "particle" is actually a React component, just to see how far it can go. Makes for a cool effect anyway. Full code: https://codesandbox.io/embed/387z7o2zrq

Welcome to closures. Once you understand this you will be much more productive in Javascript.

The way you are doing it, all your click handlers are sharing the same variable 'i' with the same scope. So by the time you get around to executing any of those click handlers, they all look up the value of i, and of course it's the last value it was set to.

Solution: create a function that returns the function you want, with a value that is captured in its own private scope. This is a closure.

function makeLinkRevealer(x) { return function() { $('.divs').hide(); $('#' + links[x] + '_div').show(); };
}

for(i in links) { $('#' + links[i] + '_link').click( makeLinkRevealer(i) ); }

You can even create that function-returning function inline. The pattern looks like

function(x){ return function() { ... code that uses the value of x ... }; }(i)

You see what's happening? the function(x) { } (i) will, within the scope of {}, bind x to whatever i is at that moment. But because we return a function that uses x, we can say that x is "closed over", and the function reference is itself a "closure".

Yes, the React core team discussed that in their blog post on the release candidate of v.17, and advised those who really need synchronous cleanup to use the useLayoutEffect.

Note that Photoshop uses a variant of JavaScript called ExtendScript, likely based on ES3/ES5. The .jsx extension refers to ExtendScript and not JSX.

The main webpage and documentation have been rewritten for webpack 2, it's gotten quite good. https://webpack.js.org/guides/

Pick a guide, "getting started" and "creating a bundle" will teach you everything to get going, make a first build and use it. You extend your config every once in a while, when you need something extra, be it a new loader, maybe for css or image compression, babel and so on.

Inlining these solutions into your own libraries makes them less stable, less cross-platform, less future-proof, and more difficult to read. A better solution, if your goal is to reduce the size of your dependencies, would be to depend on small NPM modules for the particular features you need.

For example: domready

I really, really like Kapeli's Dash for this if you're on OSX. I've encountered maybe two or three situations where a standard or custom Docset didn't exist for what I cared about in the last 4+ years, and I am a pretty eclectic developer.

I'll give it a try - Microsoft have been doing a lot of good things lately - but I doubt it'll tear me away from Atom. The <code>atom-typescript</code> package provides a Typescript implementation superior to VS/WebEssentials.

Edit: Basically an under-powered version of Atom. Uses Chromium as a rendering/processing platform just like Atom, no custom packages, but integrated Git support and Node.js/Mono debugging.

The first thing that comes to mind is understanding scope. In particular, if you come from a C-esque language, this might be one of your biggest hangups. Understanding how the scope works before you write your code will inevitably lead to a better-written product.

(tl;dr for the rest of this: know the fundamentals)

The route I came up, I started as an OOP developer and thought JS was a toy language for much of my career. It wasn't until I took the time to understand the language that I came into my own as a JS dev, and it is currently my favorite language to develop for. If you're the book-reading sort, I would suggest the following resources in sequence:

• JavaScript: The Definitive Guide (David Flanagan)
• JavaScript: The Good Parts (Douglas Crockford)
• JavaScript Patterns: Build Better Applications with Coding and Design Patterns (Stoyan Stefanov)

If you follow this link and look at the Frequently Bought Together section, you'll see that these three form a common trifecta. What you can expect:

• The first book will give you a fundamental understanding of the language (I would personally skip the DOM-related parts, since that's more framework/environment than language)
• The second book will tell you "Okay, we just gave you a drawer full of knives, here are the ones that won't send you to the hospital"
• The third book gives you a rationale for how and why to apply the language in certain ways. It deals with JS-specific issues, and also brings in some of the Gang of Four patterns and other best practices.

(edit: added link to Amazon page for the first of the three books, fixed formatting)

The promise of Yarn was great, but I've had problems with them since day 1 because the offline feature didn't work with Github dependencies (as opposed to published npm packages).

I opened 2 issues with them about this and even eventually had a member of my team submit a pull request to fix this. Curiously, the very naive pull request that we sent (it didn't have any unit tests) was ignored for almost a month before being merged without guidance on unit testing. A look through their git history around that time shows that it doesn't seem like they really believe in unit testing?.

After that I switched to pnpm and never looked back. For my use case, it's better than Yarn in every way. Though I have to say, NPMv5 looks like it merits further a further look.

> Sure, but on mobile data, the bottleneck is bandwidth. Most client side rendering frameworks are quite heavy.

React is 50kb minified and gzipped. jQuery is half that. And you load those only the first time you visit a site. Sometimes, not even that, thanks to free distribution networks.

If you have a single photo on your page, your client-side GUI library will be dwarfed by it. And we live in an age where many fancy web pages are using friggin' videos as backgrounds for their home page hero banners.

> A lot of apps have very bad data-needed-to-render / rendered-page ratios

90% of everything is crap. What some apps and frameworks do isn't representative of an entire approach to application development.

> I'm not saying CSR does not have a place, and I think mostly server side rendering with a thin layer of client side for interactivity is great way to go.

Sometimes it is, sometimes it isn't. And having a "thin client side" doesn't preclude client-side rendering. Client-side rendering doesn't automatically mean a "fat client side".

A lot of things but the most important of all Never ever reassign function parameters. There is an ESLint rule for this and I believe everyone should enable this in their projects.

This bit me badly because a dependency that I was using was reassigning some arrays that I passed and this caused very weird issues in my code. I solved it by sending a new copy of the array every time I used the dependency. I plan on fixing this upstream later this week.

I also realised how hard asset revisioning and live reload is.

I suggest you use TypeScript instead of Babel, it transpiles to plain javascript (ES5/ES3) with generators and async/await, TS will be more suitable for you, because you have CPP background which is a strongly typed language like TypeScript: https://www.typescriptlang.org/docs/handbook/basic-types.html

> How are the transpilers making this code work on older browsers

they basically use state machines.

They're pretty close https://deno.land/benchmarks, usually within 10% by the graphs.

I think that's pretty impressive, being less than a year old vs a 10~ year project with a decade of optimisations & work :), I assume we can expect it to match node performance in the future.

I want to put a vote in for Phaser. Solid framework, lots of examples, and you can get quite deep with it. It's also open source so if the game making aspect isn't challenging enough for you, you could contribute to the code-base.

Why not using the native Promises? Their cross browser support is actually pretty good. For the non supported browsers, you can find some great polyfill easily.

Native Promises are known to be slower than Q or whatever, for now. But what's great about them is that:

• They're being used for next EcmaScript/JavaScript features (like async/await)
• They're actually native, and future proof
• The performances will eventually rise
• You can find some great debug tools, like the Ember Promises manager

> jQuery, for example, provides a really powerful element selector which saves you writing a lot of code compared to writing it in vanilla JS.

Nowadays, the selector itself doesn't really considering there's the standard querySelector and querySelectorAll methods, jQuery has a few useful custom pseudo-classes but the situation has much improved since 3-4 years ago when you'd pretty much have to walk your DOM tree by hand (using getElementById, getElementsByName and childNodes) if you didn't use a selectors library.

Where jQuery still shines is:

1. Fluent/literate syntax, the DOM simply has no provision for doing something like getting an element, setting an attribute, setting a property and changing the content text all in one expression, you'll need at least an assignment or two in there

2. Bulk operations, they can also be a performance trap, but with raw DOM you'll have to manually iterate that shit, no selecting half a dozen elements via CSS and trivially setting their color or whatever. Well at least querySelectorAll ~~returns a native Array, not a fucking NodeList~~ actually it still returns a bloody shit of a nodelist, thanks mkantor for fact-checking me.

3. Events handling. First is the events binding itself, while IE9 finally implements the standard addEventListener IE8 doesn't and will still require either building a shim or having multiple paths for events handling. Second addEventListener is way more verbose than on or bind. And third, doing event delegation manually (.on with a selector or .delegate) is Not Fucking Fun: IE8 doesn't (of course) support Element.matches() at all, but more annoyingly all Element#matches() implementations at this point are prefixed so filtering your target is going to be verbose and repetitive.

> is there anything that traditional static-typed languages can still do that JavaScript can't?

You get better tooling with types. You can auto-complete more, you get more meaningful call-tips, simple errors are immediately caught, breaking changes in APIs are identified right away, and so on. It makes working on larger projects much easier.

If you want that kind of thing with JavaScript, you can use TypeScript instead.

If you're primarily interested in mobile stuff, you should also take a look at Kotlin and Flutter.

Oh boy.

1. They're loading two different versions of jQuery (2.1.4 and 1.11.1). I'm tempted to email them and suggest loading at least four versions of jQuery. Two just doesn't suffice in this Web 2.0 era.

2. All the images are loading from uploads.webflow.com. Going to https://webflow.com/ brings up some completely different CMS thing. Seems legit.

3. They wrote "it's" instead of "its" and the font for their "learn about micro-apps" link is way too thin and looks ugly. You think with $31 million they could afford to check their grammar and use proper fonts. The fonts seem fine on retina screens, so thankfully the 5% of the world that use Apple hardware and no external screen will be able to read the text fine.

tl;dr: wat.

Back in 2006, it introduced itself as:

> jQuery is a new type of Javascript library. It is not a huge, bloated, framework promising the best in AJAX - nor is just a set of needlessly complex enhancements - jQuery is designed to change the way that you write Javascript.

> jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.

Taken from: https://web.archive.org/web/20060203025710/http://jquery.com/

Usually when programmers refer to "the standard library" of a language, they are referring to the libraries that come included with the language.

For example, console.log is a function that exists in Node's standard library, and it's included when you install Node. You don't need to install anything separately to use it (https://nodejs.org/api/index.html everything in this link is Node's "standard lib").

The Go community tends to recommend that you avoid external libs in favor of Go's standard libs. In this case, they are suggesting that you use http.

Ignore the downvotes. Programmers, especially on reddit, are terrible people that tend to hate newcomers.

I've read the majority of them (JavaScript: The Good Parts, You Don’t Know JS, JavaScript: The Definitive Guide, Effective JavaScript: 68, JavaScript Patterns and eloquent javascript).

For me the best one to understand the js concepts is "You don't know JS" (comparing with javascript: the good parts, JavaScript: The Definitive Guide and Eloquent javascript). That book cannnot be better :P (organized and so well explained). I really like how he explains the scope, closures and "this" keyword for anybody (expertises and beginners), cannot be better explained. https://github.com/getify/You-Dont-Know-JS

Then you can start reading the advanced books: Effective JavaScript, Secrets of the javascript Ninja (pending) and Design patterns (don't confuse with "JavaScript Design Patterns" by Addy Osmani which is also great but it's more like a design patterns cheatbook to have near you when you are programming) which are great ones.

Or Day.js as Moment.js is now considered legacy

Notes - Day.js is one of the recommend alternative to Moment.js which have the similar API to Moment

You could look into using Datatables, it has an extension that allows you to load a large dataset and only renders what is required. http://datatables.net/extensions/scroller/

Edit: Just in case it's not obvious in this example, Datatables has filtering, sorting, pagination etc. It's just not enabled. This is an example of Datatables with default/zero configuration http://datatables.net/examples/basic_init/zero_configuration.html

Did you read the blog post? Or maybe this one http://babeljs.io/blog/2015/02/15/not-born-to-die/?

Babel is not just an ES6 transpiler. The plans for Babel aren't just ES7+, it's goal is to become the base of all major JavaScript tooling. Linters, minifiers, type systems, formatters, syntax highlighters, codemods, etc. They all need similar tools to work and Babel is there to provide that tooling.

1. If you don't already have firebug installed, do so. (Its a FireFox extension) Experiment with the debugger. Find a website that you think is doing something neat with JavaScript, use the debugger to walk through their code (assuming its not minified/obfuscated/compiled).

2. Read this: http://www.w2lessons.com/2011/04/you-dont-know-javascript.html The article will put things in to perspective on what are beginner/intermediate/advanced JS topics. If there are holes in your self-described basic knowledge vs what is described as beginner, aim for having a good grasp on those topics.

3. What book did you read/skim? If it wasn't Douglas Crockford's "JavaScript: The Good Parts," I'd strongly recommend reading that cover to cover. Its terse, but has a number of important things you should know as a JS programmer. (Other books to consider later are 'javaScript patterns', 'High Performance JavaScript', and 'Secrets of the JavaScript Ninja')

4. I second finding some sort of project to throw your new found knowledge at; be it some open source project, a new personal side project, or take another pass at one of your existing/old personal projects. Your new found JS skills aren't much good if you can't do anything with them...

5. Don't bother with CoffeeScript, anything that hides the language you are working in from you can only lead to more chaos. It can be bad enough learning the details of JS that you don't need to add another layer of complexity.

6. Learning JQuery is a good idea, but take the time to question how JQuery is doing what its doing.

it's a shorthand way of writing

if (i !== -1) ...

This is because in two's complement systems the bitwise inverse of -1 is all zeros; falsy. Every other number evaluates to true (allowing it to be a fast check with indexOf to see if a string/array contains something)

https://stackoverflow.com/questions/1789945/how-to-check-if-one-string-contains-another-substring-in-javascript#comment8972847_1789952

EDIT: changed wording from 'fast' to 'shorthand' as /u/fruitdev pointed out that the bitwise not method is actually slower than a standard i !== -1.

You can disable the custom CSS by unchecking "Use subreddit style" in the sidebar.

Or you can try tweaking the CSS by installing Reddit Enhancement Suite and going to Options -> Appearance -> Stylesheet Loader

> This is also my biggest beef. ES6 modules are the future, and rewiring importing rules at runtime is completely antithetical to how they work.

RFC author here.

The monkey patching is only there because Node doesn't expose an API to hook into the CommonJS resolution (yet). We don't like it either (especially since it means we have to write some code we don't really care about), but we figured it was the best way to show how valuable it would be to have a dedicated way to achieve these kind of things.

Regarding ESM modules, Node 10 actually ships with a loader hook API, and as such I'm quite confident we won't have to patch like we did for CJS. At the very least, we'll be able to provide constructive early feedback on this API to the Node project.

Udacity has an awesome course on this exact thing, Web Performance Optimization. It's free, just click view courseware.

It was developed with Ilya Grigorik too, who is kind of a big deal

You typically shouldn't bind or make new functions in the render method, if it can be avoided. This is so calling render doesn't have to make a bunch of new functions every time.

> We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

https://reactjs.org/docs/handling-events.html

Funny you should mention that. I was reading RFC 3986 just a few weeks back and stumbled across this example URL:

foo://example.com:8042/over/there?name=ferret#nose _/ ___________/___/ ___/ _/ | | | | | scheme authority path query fragment | __________________|_ / \ / \ urn:example:animal:ferret:nose

I recognised this as being an example I had written in some code many years ago. I don't know how it ended up in RFC 3986, but it felt kinda nice to know that I had been cited by Tim Berners-Lee, in a roundabout kinda way.

Read JavaScript: The Good Parts by Crockford. He goes over structuring JavaScript in an OOP fashion. More generally it's a great book that will bring your understanding of JS from intermediate to the beginnings of expert.

> From the point of view that a programmer cares about...

This is the point of view that I'm working with, not referring to the internals. Mutability is a separate issue. As far as argument passing semantics go, all arguments are passed by value in Javascript, and many other languages. Go check out the code example in the SO reply I linked in my other comment.

Bonus: it works in two dimensions! https://codepen.io/a8t/pen/QOjzpL

(I haven't fixed the focus when you hit the right side of the window or the bottom of the page yet, but that's one line each :) )

To be honest, I'm kind of confounded by the question. HTTP is built around URIs. It has always been intended as a protocol for requesting and sending data at any given URI. To propose that URIs are eliminated and replaced with content bodies is nearly the same as creating a new protocol.

If you won't take my word for it: https://tools.ietf.org/html/rfc7230#section-2.7

> Uniform Resource Identifiers (URIs) [RFC3986] are used throughout HTTP as the means for identifying resources (Section 2 of [RFC7231]).

Now consider at least one possible anecdote. Many existing technologies use URIs to handle various types of caching. A request for /doctor/1 is easy to ship off to a server that has the cached data. If the request went to / then no processing on the URL can happen, all headers must be processed, and the request body must be parsed before anything else can happen. You've effectively tied your application logic to your infrastructure.

In short: this isn't how HTTP works, so don't do it.

No matter your opinion of Backbone, I think its annotated source code makes for a fairly easy read.

Not only is clean and modular, but it's also not too big. This makes it easy to follow and understand. On the other hand, I can't say you'll find anything particularly... special. It's mostly straightforward stuff.

Something a bit more substantial could be the source for OpenStreetMap's new iD Editor. I haven't had a chance to dig too deeply into it yet, but from what I could see a couple of days back when they announced it officially, the code looks pretty well structured and clean. It's also a full application so it's a larger code base. Still, from a "first look" I'd say it seems pretty manageable.

I'm a big angular user. I created Plunker, which is 100% written in Angular.js as a part of my learning experience of the framework.

My biggest gripe is the challenge of server-side rendering. I would like a mechanism to deliver pre-rendered markup to the client side and have that markup then 'taken over' and cached by angular as a template. I'm sure there is some tricky way to put this together, but for the time being I have not seen a clean solution.

https://angular.io/guide/upgrade?

Edit: Downvotes? Seriously? There is absolutely an upgrade path from AngularJS to Angular. Is it easy? No. But considering the fact that they are essentially completely different frameworks, it’s pretty amazing an upgrade path exists at all. Currently in the middle of an upgrade and yes it’s time consuming, but at least I can develop new features in Angular and incrementally upgrade my AngularJS app.

any chance you could just add a class to the <td> instead? Javascript seems like the wrong tool to use.

Either way, i think it's something like this (untested, just typing this in reddit)

var table = document.getElementById("yourtable"); //your table's ID var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
var status = cells[i].innerHTML;
if ( status == "offline" ) {
cells[i].className = 'offline'; } else { cells[i].className = 'online'; } }

Then with css you just specify some colours for .online and .offline

edit: normally i'd use jQuery for this, as the code would be shorter, but i did it in plain js with this being /r/javascript

edit2: dumped it in jsfiddle, it just works: http://jsfiddle.net/x5zse/1/ (took me a while to find the 'no library' option)

I've never been able to bring myself to like it. It's great for bridging the gap between designers and developers, but if I'm not in a project where I don't need to worry about that, I'll usually go the other route, and I'm a big fan of react-hyperscript in particular.

I think you need to save what you've been working on so far, close your editor and take a minute to read the React docs.

https://reactjs.org/docs/thinking-in-react.html

Everything you've mentioned is a lack of understanding of how React is supposed to work, and you're trying to fight against it using practices found in frameworks such as Angular and Vue.

For desktop apps, a good choice is Electron. Some popular examples are Atom, Visual Studio Code, Discord, Slack, and WhatsApp.

For mobile apps, a good option is React Native. Some popular examples are Facebook, Instagram, UberEATS, Discord .

You should really think it through if this is the best choice. All of these apps have good reasons to do so. Atom and Visual Studio Code allow scripting/styling with JS/CSS. Discord, Slack, and WhatsApp want the same experience for website and desktop (lot of shared code).

Electron is a good choice if your app targets both web and desktop. React Native is a good choice if you want to share code between Android/iOS/Web.

How soon before we get yarn pre-bundled with node releases? Is anything planned? It would be super sweet to have the option to use it instead of npm at all.

I'm not advocating for replacing npm, but it would be great to have the option to pick between npm and yarn as clients.

I'm not Sir_Lith but I think this is the biggest question for Vue at the moment. If you are happy with React there aren't really many concrete reasons to pick up Vue. Vue offers better out-of-the-box performance than React (and sometimes Vue even beats hand-optimized React code) but how many people are actually hitting React's performance ceiling? I'm curious how React Fiber will affect this, if at all.

To get to your point, I don't see any major, key selling points of Vue over React. There are a ton of small things that I think Vue does better than React, but small improvements aren't going to motivate companies to port their codebases nor developers to abandon (potentially) years worth of experience.

That said, a common theme from companies discussing why they chose Vue over React is simplicity (1, 2). However, I don't see this becoming the norm especially if there is a large talent pool of developers with React experience.

tl;dr good is the enemy of great ;)

I'm booked solid with work and cannot help with your project, but I wanted to say "thank you" for the book recommendations. I'm grabbing a copy of "The Clean Coder" now because it looks pretty interesting.

The top comment on hackernews about this article (by patio11) is very poignant and well written - especially if you're getting most of your opinions on coding from reddit or #javascript.

If any of the "self-hating web dev" resonates with you, then I'd recommend reading patio11's post a few times!

I really hope some people find this to be a fun tool. I spent a little over five months building it by myself.

Before anyone asks, yes, the backend currently supports other languages! Specifically:

• C
• C#
• C++
• Elixir
• F#
• Haskell
• Java
• JavaScript
• Objective-C
• OCAML
• Php
• Python
• Ruby
• Rust
• Swift

Once I’ve smoothed out the rough edges and squashed some bugs, I’ll begin working on rolling other languages out. Also, the challenges right now are rather easy BUT the system allows anyone to publish their own challenges. So if you want harder/more challenges, by all means please help out! :)

>First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.

That's a pretty controversial premise, and not one that should be dismissed so easily. Sure, "it feels nicer" is subjective, but what's wrong with subjective? If a large majority (I'm not saying this is the case) think Angular "feels nicer" than React, isn't that significant? I would think that could play a large role in community size/quality.

Besides, it seems like he starts off with a claim of objectiveness, and then makes a handful of subjective arguments. The bottom line is, most of the design decisions he discusses with Angular were made with one thing in mind: testing. He pontificates about the difficulty of large apps, but ignores testing and dismisses dependency injection. If you want to convince people that a React codebase is more maintainable, compare tests. StackOverflow threads like this make me want to hold off on looking into React.

On a side note, I find Google front ends to be much more impressive than Facebook's. They're not Angular based, but Google+, for instance, is a much nicer web app than Facebook IMO.

Mozilla's working on a free SSL certificate system, called Let's Encrypt. It has some software component and one of it's features is that it will keep track of when your certificate is going to expire and automatically renew it.

jQuery is a library for DOM manipulation, events, AJAX, and animation. It's not a framework. It doesn't provide any structure.

And this is fine if all you need is a bit of glue code for a few jQuery plugins. For example, a small e-commerce website with a carousel on the landing page, an accordion in the FAQ, typeahead in the search field, and some lightbox & tabs on the product page.

jQuery is perfect for this.

But if the inherit complexity goes beyond that, things get kinda hairy. E.g. when you start to store some data in the DOM, you really should start using some kind of model to keep things organized and separated.

Well, you can of course fix this. You can create your own structure and the conventions which go with that. You can create your own "lightweight" framework. But the problem with that is it has to be written, tested, and documented. It's a crazy amount of work. Even the most simple frameworks like Backbone need a ton of documentation (http://backbonejs.org/ = 17k+ words [show it on the projector and slowly scroll down for dramatic effect]).

Of course, no one you hire has any chance to be familiar with an in-house framework.

Existing frameworks are already written, they are tested (unit-tested and battle-tested), and they also are documented. Furthermore, there are plenty 3rd party resource (blog posts, videos, conferences & meetups, and online courses) and, if it's a popular framework, there are also plenty of developers who are already familiar with it.

That's the kind of angle I'd try. I'd start with a "it made sense at the time" kind of opener instead of flat out insulting the developers who wrote it and the people in charge who green-lit it. Be diplomatic.

You also might like:

jQuery Conference 2013 SF Beyond the DOM: Sane Structure for JS Apps by Rebecca Murphey
https://www.youtube.com/watch?v=cd7HHN6IkrU

The spec says DOM and Script evaluation is synchronous. If the scripts are at the bottom, the DOM above is available.

HTML5 Spec: >There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

HTML5Rocks: How Browsers Work (Order of Processing)

>Authors expect scripts to be parsed and executed immediately when the parser reaches a <script> tag. The parsing of the document halts until the script has been executed. If the script is external then the resource must first be fetched from the network–this is also done synchronously, and parsing halts until the resource is fetched. This was the model for many years and is also specified in HTML4 and 5 specifications.

WARNING: some of these tips are trivial or browser-specific, not good general tips. In particular David Calhoun's:

> You can pass arguments into setTimeout and setInterval

Not unless you want your code to break in IE, you can't.

Moreover, architecting your code assuming you can pass references and complex objects into setTimeouted/setIntervaled functions and then finding out that it doesn't work in IE (where the entire function call has to be decomposed back down to a string) hurts, and often requires hideous hacks (dumping objects into global variables - shudder) or a complete re-design of that part of the system.

Believe me I know, because I was bitten by exactly this issue when writing a custom Javascript library for my employer.

> Old String functions

Whooo. Someone's realised that they can browse the Javascript String object documentation (developer.mozilla.org seems to be down temporarily, but it's all right there in the documentation, and always has been).

> An HTML element with an ID creates a JavaScript global with the same name

Not in Firefox it doesn't. Try it.

Basically the way you should think about TypeScript is that it's ES2015 and beyond, with optional static types.

If you're familiar with JSX, it's conceptually similar to how JSX adds some syntax on top of JavaScript. The difference is that types in TypeScript don't have any emit - they're erased away.

The benefits of the type system are not just catching errors and typos, but that we can build a lot of great tooling around it.

You can try it out on https://www.typescriptlang.org/play

I have put your code up into this jsFiddle sample so its easier to show/modify. I also added some basic bounds checking for the ball.

You had a typo in one of your function calls, which invalidated the entire script. ctx.clearRec should be ctx.clearRect.

If you are using Chrome, press the F12 key to enter the development tools and you can see errors like this pop out in the script.

Edit: As a side note, if you are going to be doing canvas work, you may be interested in checking out the jQuery jCanvas plugin for easier syntax/cross browser support.

You can't really do that without some kind of back end for your website. Be really careful with the password bit as well. You could do it with PHP but tbh for a small website stick with a off the shelf solution. For your your usage you will be able to use the free tier as well! ᕕ( ᐛ )ᕗ

Take a look at, prismic.io

or https://firebase.google.com

or https://www.mongodb.com/cloud/stitch

That way you will ensure it is reliable and you can focus on making the website great.