I've only been doing web on the side in my career. Mostly doing Python, C++, Swift, although I build my websites on Rails. Did a lot of frontend web 15y ago when I was young but of course a LOT has changed since. I need to do web again for a simple web app, but boy is it confusing.
Today I realised that good old AJAX requests are now done via the fetch() API. Frustratingly, when trying to google for modern ways to do it (before I knew about fetch()), I just got SEO optimized pages that list every single method on the planet from XMLHttpRequest to jQuery to a gazillion libraries, and with the fetch() API buried somewhere in between. Obviously terrible for learning. -.-
I went down a similar rabbit hole as I was looking into bundlers. I'm a Rails guy, and have always stuck with the asset pipeline and avoided complex frontend build systems. As I was trying to play with Stimulus I had to choose between webpacker, jsbuilder and importmaps, and again it was a really long rabbit hole where I had to learn about importmaps, the difference between ESM vs CJS, and finally about Heroku (our host) not supporting HTTP/2 yet and thus being a bad platform for importmaps (unless you add a CDN). Fortunately, DHH's blog post about Rails' bundler journey was pretty enlightening on this front, but of course it took me a while to find it, and then I had to remember to double-check HTTP/2 support, which DHH took completely for granted.
For some reason every step in this learning journey is frustrating and confusing. Is there a learning resource that teaches you modern fundamental JS approaches AND puts them into context with older approaches, clearly also outlining which approaches are now deprecated and why?
Also, if you search for "A re-introduction to JavaScript" in HN Search, you will find previous posts of the same article with comments pointing to other similar sources.
The book Eloquent JavaScript is also available online, but is longer: https://eloquentjavascript.net/
2) Scope. JavaScript still uses lexical scope. This remains its only scope system, which is fantastic. Now, its better because you have let and const which are block scoped, so don't use var any more.
3) Absolutely everything you need from this language can be reduced to either a data structure, a function, a primitive, and APIs. The result is really clean code if you don't need somebody else to clean your room and do your laundry for you.
4) Don't use the keyword this or anything reliant upon it.
5) Events. Get comfortable with asynchronous programming. For some reason callbacks scare the shit out of new programmers. Its just functions. If it scares you too there are promise chains and async/await. But bear in mind you can always halt a function with a return statement, but you cannot prematurely exit a promise chain.
Those are the important things. Less important things that I use all the time:
* Object.keys(myObject) // returns a string array of the property names
* TypeScript. I declare everything against some type description including function return types and function arguments. This helps identifies errors and reduces a weeks worth of refactoring down to about 2 hours max.
* Node.js. Get familiar with the language in the browser first and then spend time with Node.
Good luck.
I found it helpful, but not sure it's worth the full price. Check the free first lesson.
If your goal is just to create a simple web app, you could still use simple HTML, CSS and JS. These are standards that are mostly backwards compatible, even though they've evolved a lot. Maybe add in some jQuery too.
If your goal is to catch up with the modern tech stack, pick one of the popular frameworks (React, Vue, Svelte, Angular) and learn it, starting with their official documents. This assumes you're already comfortable or familiar with the fundamentals (HTML, CSS, JS).