
Show HN: Learn and practice modern JavaScript - jadjoubran
https://learnjavascript.online/
======
commandlinefan
I wish there was a "learn modern Javascript for people who learned Javascript
in 1998" \- it seems like the only way to get up to speed is to slog through
all the basics (yet again) and keep an eye out for the parts that seem to be
unfamiliar/new.

~~~
jsty
I was in the same position a while back, and found Eloquent JavaScript [0] to
be a really good read. It's quite well structured, which makes diving into the
bits that sound unfamiliar a lot easier.

[0] [https://eloquentjavascript.net/](https://eloquentjavascript.net/)

~~~
arethuza
I skimmed this (which looks good) and the Airbnb guide recommended
(recommended in another comment) and I can't help noticing that one uses
double quotes for strings and the other single quotes (Airbnb).

Is there actually any sensible argument one way or the other - that isn't just
being consistent with your team/project/platform...?

~~~
tokyodude
That whole issue is arguably old JavaScript. It was because HTML style
preferred double quotes so using since quotes in JS made that easier.

Modern Javascript has template literals using backticks so arguably the new
rule should be used double quote everywhere except use a template literals for
HTML or whenever doing string manipulation.

The number one thing I hate about using single quotes it is matches almost no
other languages so it ruins muscle memory if switching between languages.

JS itself prefers double quotes. See JSON.stringify or log anything to the
console that gets auto quoted, always uses double quotes

~~~
kiriakasis
The fact that JSON.stringify uses double quotes is slightly in favour of using
single quotes in handwritten code

------
sjroot
I wanted to test this out but it appears the only way to do so is by signing
in with GitHub. That won't necessarily deter me, but I imagine that will be
the case for others.

If I were you, I would allow access to the course without signing in. Then, if
the user wants to save their progress, they can connect their GH account.

~~~
jadjoubran
Thanks for the feedback! I had that during the testing period but it was a bit
confusing. You've also got flashcards linked to your progress which also
requires an account. I'm also avoiding adding a 2nd method of sign in in order
not to confuse returning visitors: "Which account did I use? "

~~~
dotancohen
Just so you know: I'm one of those guys who won't sign up until I know what
I'm getting.

From the animated gifs it looks like you're just presenting an Anki deck
online. Why not just share what you have to share as an Anki deck?

~~~
rapnie
Yes, that would be nice. Anyone know of other good Anki decks for modern JS?

------
Kaveren
This just goes to show that if someone publishes any learning resource, people
will shower the author with praise regardless of the quality, or even trying
the resource out.

We do not need yet another JavaScript learning resource, we have good ones.
Mozilla Developer Network is the best one, but there's also Free Code Camp,
Eloquent JavaScript and javascript.info among many others. Don't write a
resource for the sake of doing so unless you can bring something new to the
table.

This is totally scummy. There's no way I can see to go to the upgrade page.
Instead, it forces you to complete the lessons up to it before asking you to
pay $25 for continued access. So it requires time investment first. Doesn't
tell you the price first either.

Asking for $25 just to learn about arrays is purely abysmal. This "course"
also doesn't even seem to go over exceptions, but I can't know that for sure
because I'm not paying $25 to see the expanded table of contents. Also don't
like that you're charging $25 before I can even learn about the DOM because
half of this is incomplete.

I like that this teaches you not to use the var keyword! Pleasant to see that
for once. That's the best thing I have to say about this.

Can't skip any lessons at all, even to browse.

Back button does not do what it should on some pages. Hitting "Next" should
not refresh the page if I cannot go to the next page. I was somehow able to
trigger a bug where I didn't complete two challenges and it marked them as
completed.

Automatically sending me emails when I don't use your application for three
days without asking me first, I have to figure out it's what a mail icon in
the menu toggles. Awesome UX.

Nice that I can't send a message to support without letting Drift send me
emails about upcoming promotions.

 _Edit: The purchase page tells me $25, but the payment prompt says 25_ euro
_. Seems awfully like trying to mislead customers purposefully to pay more.
Easy to miss._

~~~
plausibilities
In the land of the blind, the one eyed man is king.

Throw The Emperor's New Clothes, Impostor Syndrome, and Late Stage Capitalism
mentalities into the mix and it's little surprise that these things play out
the way they do every single time.

------
WouterSpaak
Cool app! Well done.

I would maybe reconsider using Fira Code, or add a font preference option.
It's an awesome font but this app is clearly for beginners, and having >=, ===
and the like turn into ligatures might be a bit confusing.

~~~
jadjoubran
Thanks! During user testing, most beginners loved the Fira Code, and advanced
developers complained about Ligatures! But it's quite easy to enable/disable

~~~
vga805
I have a student right now that has dyslexia and the ligatures help a lot. I'm
glad this tool has it built-in! my student loves this already. Thanks mate!

~~~
jadjoubran
That made me so happy! Please email me (you can find my email in the footer of
the website), I'd like to give a paid account for free for your student.
Cheers!

------
onewhonknocks
Not sure why I thought this was going to be free, but for whatever reason I
was surprised to see the prompt for payment after finishing the trial.

~~~
jadjoubran
Woops, sorry about that. I'll make sure it's clearer. There's no mention that
it's Free anywhere however around 35% of the course is free. It shows which
content is free and which one is paid in the sidebar, but it could be that you
haven't checked it out

~~~
publicfig
There is also no point on the front page that it is paid, and I would assume
that because there is no mention of pricing that it would be free. I'd
definitely put something very early on stating pricing and that it is not a
free program. To tell someone 35% through a lesson that they are expected to
pay may be fine for conversion, it's a really scummy practice.

~~~
LocalPCGuy
I know this may be a minority opinion among developers, but I'm ok with them
trying to make money. And if the optimal way to do that is to ask 35% of the
way through, then that's what they should do. I don't view that as a dark
practice or bait and switch. I don't think there is an obligation to be super
clear that there is a paid version.

It's something the owner should test, and see if it puts people off or if it
converts better. Maybe it puts off 10% more people, but 30% more convert? Good
on them for finding that out and optimizing accordingly.

We in the dev world expect way too much for free. Not that I complain when I
find something for free, but people deserve to be compensated for their work
also.

~~~
publicfig
I never argued the effectiveness of misleading business practices towards
generating revenue or conversions. I feel that design can be misleading and
user-antagonistic while still being the most effective solution for
monetization. It is up to the creator/organization to make that decision, and
that decision can be both financially effective _and_ amoral/"scummy" at the
same time. I cannot make that decision for the creator/organization, but I
also feel no need to default to defending user-antagonistic practices just
because "they work".

------
crusso
Why does the site need to have my github private email address? I use
different email addresses for different sites. I don't want
learningjavascript.online to have my github email address (or any email
address, but that's doable).

I'd try out the site, but this is a show-stopper for me.

~~~
Kaveren
It needs your address so it can send you an email if you decide not to use the
application for three days, and this is turned on automatically.

~~~
crusso
1\. I don't want spam from the site. 2. I definitely don't want to use my
github email address on this site so that future spam from them or the people
who hack them looks like it came to my github address.

------
faitswulff
Hi OP, this looks great, first of all. Very nicely polished! On the other
hand, I find the most difficult thing about frontend isn't necessarily the
syntax, but the build tools - webpack, babel, etc. Is there any course
material on that?

~~~
jadjoubran
Thanks! No, not at the moment

------
stupidcar
Very nice! This seems like a better way to learn or refresh on the language
that just wading through tutorials/textbooks.

One thing that is missing is a way to report problems in the exercises.
Already in the Conditions section I found an exercise that says:

"Implement a function canVote that returns true whenever the age is bigger
than 18"

But the test is for a function that returns true when age is greater than _or
equal to_ 18.

~~~
jadjoubran
Thanks will fix! You could report those issues with the "?" icon on the lower
right

~~~
onewhonknocks
I reported this before I saw this comment. Should have known someone would
mention it here too! :)

------
vorticalbox
Opened page and saw the animation

function nameLength(name){ return name.length }

Rather than

const nameLength = (name) => name.length

This is already enough for me not to bother looking.

~~~
plausibilities
const length = (string) => (string.length)

It is unnecessary to adopt a naming convention which implies a scope within
the context of "names" when the method is compatible with all strings.

~~~
vorticalbox
It was more about the lack of es6 syntax but yes 100% agree

~~~
jadjoubran
ES6 is explained in detail, with implicit return in Chapter 5 (or 6).
Developers still need to know the function syntax for when they look up
documentation online Cheers!

------
rhacker
I know JS has had a rough last few years and we have sayings like framework du
jour, etc... but... haven't things actually started slowing down?

~~~
Kaveren
Has JS had a rough few years? There's been big advances like React and
TypeScript. ES6 was a big improvement. JavaScript finally has lexical scoping.
It's better than ever.

The frameworks exist for a reason, as much as it's popular to diss them. Stuff
like jQuery has fallen out of use because it's not considered useful anymore.

Progress is important, faster progress is good. Changing stuff for the sake of
doing so is bad, of course.

------
grumpwagon
Is there a way to remove an account?

------
seshakiran
getting 500

~~~
jadjoubran
Hey! It's probably because there's no confirmed primary email in the Github
account

------
imcotton
Modern JavaScript in practical for today should be just written in TypeScript
with Strict mode turned on.

~~~
jrockway
I agree that everyone should use Typescript but knowing what Typescript adds
to Javascript doesn't help you with anything. You have to know Javascript
first; because that's what the bulk of your code is. Typescript merely adds
some annotations and all of its syntax strictly deals with types.

Your statement kind of sounds like "don't learn C, learn how to run gcc from
the command line". Important but orthogonal.

~~~
lkschubert8
I think people miss the point that it is just a compilation check, but the
runtime is still completely dynamic. If you are writing typescript that
interacts with anything else in the world the types make no guarantees at
runtime so it is important to know how Vanilla JS would behave in that
circumstance.

