Show HN: A JavaScript Handbook
jshandbook.com
jshandbook.com
I learnt JavaScript a long time ago so I wanted something to get me up to speed with ES6 and above. The book succeeds admirably here. It is a little bit repetitive in places, but for free I'm not going to complain about that.
If you are reading this Flavio Copes - thank you :-)
You can still have the newsletter of course (and even give away copies for signing up). Just please don't have it as the ONLY way to get the full book :)
[0]: Of course I'm aware of mailinator, but why waste both our time, in that case?
Exactly. I've been burned by the whole "it's free so just sign up and cancel later". Not that this is exactly the case here.
My email address obviously has monetary value to them, so I'm immediately curious as to why, exactly. When I can just pay money, it eliminates an entire class of concerns [0].
[0]: i.e. "what are they doing with my email?", "do they filter out Mailinator?", "am I robbing them of their income if I use Mailinator?"
Just be aware that I (and others) are immediately on guard whenever something asks for email (or any personal info, for that matter). _Especially_ if that info is a barrier to something like a book. For better or for worse, it looks an awful lot like the typical email-harvesting-for-spam techniques.
> making a quick buck with "pay as you want"
If you're writing books and people are getting value out of them, I'd argue you deserve even more than a quick buck. Don't sell yourself short.
I don't think anybody would see pay what you want as a cash grab, either.
I guess it works for people with enough experience, but still, I find it odd.
Anyway it is free so I can't complain too much, subscribed.
area = width * height
a = w * h
I'd much rather see
const areaOfRect = rect.width * rect.height;
const areaOfCircle = Math.PI * circle.radius ** 2;
if (areaOfRect > areaOfCircle) { ...
if (rect.width * rect.height > Math.PI * circle.radius ** 2) { Even more controversial I'm not sure I like the new common pattern of destructuring as in
const {first, last, address, phone} = props;
...
...
<div class="name">{first} {last}</div>
<div class="address">{address}</div>
<div class="phone">{phone}</div>
<div class="name">{props.first} {props.last}</div>
<div class="address">{props.address}</div>
<div class="phone">{props.phone}</div>
For example, ElasticSearch's NEST API client uses a fluent-style API to setup configuration and mappings. It started out well, but then I got lost in a forest of nested callbacks on various mystery objects. It was a bizarre way to build what should have been a tree of strongly-typed POCO's that have a 1-to-1 correlation with the server-side concepts. Worse, I didn't see a way to dynamically manipulate the (hidden) result. Better to use the low-level API and a little reflection to compose the required JSON manually.
[On the other hand, I can think of successful fluent API's: .NET's StringBuilder works because it is super simple (only returning instances of itself). The IEnumerable extension methods (created to support LINQ) work because their broad-applicability justifies the effort to learn.]
Sorry if I missed something but I also don't see an endorsement of bad variable names in the OP's handbook. The comment just seems a little out of place, thought I mostly agree with it.
Indeed, it's more common to write 'let the area be a, the width be w and the height h; then a = w * h' than it is to write 'area = with * height' when expositing in a maths textbook. This is a really hard habit for me to get out of, even when writing code.
Source: I call myself a "Front End Engineer".
Source: can read them without my glasses :)
I can't :-p
A little feedback:
1) I find the description of the different standards (ES2015 - ES2018) to be inconsistent. ES2015 provides a summary of new features as a bullet point list, each item being a jump link to the detailed description. ES2016 and ES2017 do have the summary but no more jump links and ES2018 does not have the summary at all. I think it would be better to navigate if each chapter had the linked summary.
2) I guess in ES2017 the trailing comma description is missing a trailing comma:
This feature allows to have trailing commas in function declarations, and in functions calls:
const doSomething = (var1, var2) => {
//...
}
doSomething('test2', 'test2')
3) Unicode property escapes (p. 33ff) examples do have a comment at the end of each line which I guess is supposed to tell you whether the match will be true or false, but all comments are empty (in the pdf version).
4) The template literal interpolation example on page 69 is invalid syntax
const var = 'test'
const string = `something ${var}` //something test
5) On pages 76-77, for some reason the formatted code looks different to all other code snippets (and it doesn't look good either as it is too huge and kind of blurred)
https://bubblin.io/cover/let-s-learn-es6-by-ryan-christiani
Another resource that I like is Wesbos's video tutorials on all things JS. He has a separate course on ES6 which is great! And then there is MDN.
A couple of typos: Page 103 of PDF under "Event bubbling and event capturing" Bubbling and capturing are the 2 models that events use to propagate. Suppose you DOM structure is
should be Suppose your DOM structure is
Page 153 of PDF under "Operators > Arithmetic operators" It shows Division (https://flaviocopes.com/) but should have been the / symbol
Btw, page 25. I assume this is some pdf exporting error:
'test'.padStart(8) ' test'https://medium.freecodecamp.org/the-complete-javascript-hand...
I find myself on flavio's site pretty often coming from google when looking up node topics. He puts out a lot of content, publishing every day. You also might be reading his node content as the official getting started guide on the nodejs website, pending this PR's review.
+1 for explaining the event loop and job queues
-1 for no semi-colons though (kidding ;))
anyway i did enjoy the concise style of the handbook. well done!