I am currently documenting my journey but honestly, I kind of just want to share my success with someone (I don't have too many friends that will understand what I am about to say). I finally did it!!!

I finally wrote my first piece of code without recycling someone else's code. I've always had a challenging time reading the MDN documentation because let's face it... That thing is very technical, especially when you don't come from a technical background.

It's not much code but it's twelve lines of code that took me three hours to decipher by myself! I wanted to quit and just get the answers from my instructor, but I didn't and I'm happy I didn't. I can't until I am building more complex projects, I'm excited... But anyways... Thank you for stopping by!

https://w3techs.com/technologies/comparison/js-angularjs,js-react,js-vuejs

I found this survey today. It appears to be up to date. It basically says that of millions of websites that it checked, Angular, React, and Vue only have a market share of around 0.5% each. And of top 1000 websites, Angular/React/Vue only have 3.3% market share or lower.

Thing is, I hear about these frameworks all the time and I also see them mentioned in job postings. The MERN stack and the MEAN stack are terms I'm familiar with.

So my question is, why do these popular frameworks have such low market share / actual usage?

So I am a more-advanced developer than I used to was and I was thinking it is time I shared some of the lessons I learned after a lot of pain and agony.

In no particular order:

• Global Variables

One per project.

Never put more than one global variable on the global scope when you are doing your work. Yes, I know that

const A = something;
function F(x) {}

Is a lot prettier and simpler to use than

const TheNameOfTheProject = {
  const A = something; 
  function F(x) {} 
}

But if you do not, the day will come when you grow tired of chain-fucking yourself, because you accidentally used the same variable name in different projects; breaking both of your modules and making you look stupid in front of your boss. Or some other idiot doing the work overwrites your variables. FOR EVERY different project, only ever put one new variable or function on the global scope.

• Typescript

Use it.

Yes, I agree that it feels excessive, but the amount of safety you obtain is unreal. While this is perfectly valid JS

let A = [];
A = "";

Typescript would give you angry red-squigglies in the editor; and not compile.

Furthermore, the intellisence on the editor suggests that you can't do something that you, in reality, can; requiring you to typecast before you can continue.

in JS, if what you're working with is an input element:

document.querySelector(".someClass").value

Is totally kosher, but typescript requires you to

(document.querySelector(".someClass") as HTMLInputElement).value

before it will compile. Why go through this extra, tedious step? Because debugging sucks ass. When you keep your types clean and correct, the typescript intellisense tells you EXACTLY what is legal to do off of EVERY object. As a rule of thumb, if the intellisense is yelling at you, it almost guarantees something will goof up at runtime. At the cost of 10% additional time keeping your types clean, you spend 75% less time debugging. Just use it.

• Variable Declarations

"let" and "const" only. Never use "var" (unless dealing in legacy code)

In Ye-olden days, "var" was the only way to declare a variable, but people got sick of it because of scoping issues (look up block scoping vs function scoping). Furthermore "var" has disturbing properties. Execute the following lines of code to see the difference

var A = "something";
console.log(A); 
var A; 
console.log(A);

and then execute

let B = "something"; 
console.log(B); 
let B; 
console.log(B);

"var" doesn't give a damn about what does or what does not exist already and is happy to just use previously designed values without care, but "let" does. I have lost so many hours debugging legacy code because of this important distinction.

• Object Oriented Programming.

Learn it.

Coming in with no experience, it is actually a mind-fuck to wrap your head around, but once you do you'll never turn back. Much the same reason you should never put more than one global variable per project, you never know when some idiot is going to come behind you and overwrite what you are doing. Keep your work safe and self-contained.

• Best Practices

People throw that phrase around a lot but don't really know what it means. The definition of best practices is: "Whatever makes it easiest for the dipshit who has to debug your code in a few years to figure out what the fuck you were doing". It is particularly advantageous when you are said dipshit.

• Documentation

Go fucking ham with it.

A short while ago myself and the senior developer were debugging code that he himself wrote twenty years ago. However? No comments, no docs, no explanations. The fix ended up simply being to remove 3 lines of code, but it took us 3 days to find it. Any documentation that it would have taken a few seconds to write was all that it would have taken to save us all that time.

edit: There is such thing as overdocumentation -- like, you don't want to read a novel for a dozen lines of code -- but it is better to be overly clear than not at all.

• Advanced Techniques

Learn them, but be careful with how heavily you apply them.

Yes. It is really fun to flex new and cool techniques when you learn them, and one-line some code that would otherwise take 10. But as with "best practices", if nobody else knows what's going on then you're screwing over everyone else involved with you on the project. There is something to be said about the "job security" inherent in making stuff overly-fancy, but sometimes it backfires.

relevant old post from reddit:

I believe that's all the major points I have. I wish you all the best of luck

I'm at the point where I'm pretty confident in a lot of what many JavaScript tutorials consider 'Advanced' JavaScript concepts. How scope works, closure, prototypes, asynchronicity, and things of that nature. However, when I try to get into building my own projects from scratch, I get hit with 1,000,000 tools that aren't really explained in any of the resources I've used to learn. They're referenced, and I've seen a lot of videos where they basically tell you what to write in a package.json file, but theres no real concrete explanation for how all of these things interact.

For example, I understand that Node.Js allows you to run Javascript outside of the browser, but its still required to build things that you intend to run inside of a browser? NPM? What are packages and why do they need to be managed?

Is there a definitive guide for the above and things like Babel, Gulp, and the various dependencies I see listed in projects?

Edit: I guess I meant learning JavaScript is pretty straightforward. I’m obviously no expert, but I’ve learned enough to know it can be downright strange sometimes for sure.

Anyway, thank you guys for the advice. This has been MASSIVELY helpful. Hopefully this’ll help anyone else that’s struggling in this area as well.

I decided to write a short note about pro tips and effective ways to learn JavaScript in 2024.

My programming background is in the "P" languages: Perl, PHP and Python. Before I started my deep dive into JS this year, I knew just enough JS to be dangerous. But my real knowledge of JS was rather hackish, lazy, incomplete, and stuck in the early 2000's. I realized that I had a huge knowledge gap when it comes to modern JS. My goal at the moment is to work hard to achieve total JS mastery because:

• JavaScript is a huge part of the web. It's not only easily the most popular programming language, but it runs most of the web.

• JavaScript is a fairly fast-moving and highly evolving language, unlike my experience with Python which was mostly mature in its first release. JavaScript is no longer a "toy" language and I hadn't really looked under the hood in a long time, and there's been many changes and advances in ECMAScript 6.

Here's what I recommend:

• Make sure you are learning JavaScript as it is in 2024, not 2004. As I said above, much has changed and there's a lot of old legacy code on the web, so if you are just hacking on random sites on the open web, you could be dealing with some less than ideal practices.

• Always be building something in JavaScript. You want to learn JavaScript, not React, Vue.js, Next.js, or any of the other frameworks yet. It is so easy to get kind of lost in the constellation of JS frameworks: there are so many of them and so much of what you see and hear revolves around them. Stay focused on the core language. If you know the language well it will be easy for you to transfer into whatever framework du jour a project or company is using.

• Learn to use Chrome Developer Tools and get used to writing snippets of JavaScript right in the browser.

• Since I'm talking about current JavaScript in 2024, get you some good new-ish books on the subject and make them your companions. I mean books that incorporate ECMAScript 6. Books like Flanagan (aka "The Rhino Book") in the 7th edition, JavaScript Everywhere by Scott, Learning JavaScript Design Patterns by Osmani, Secrets of the JavaScript Ninja by Resig, Eloquent JavaScript by Haverbeke, Learning JavaScript by Brown, Programming JavaScript Applications by Elliot, and Speaking JavaScript by Rauschmayer. Do not underestimate the value of these books. Studying them carefully is a game-changer.

• As for online learning, I recommend The Odin Project [Note: I am not affiliated with TOP in any way]. They have an excellent JavaScript track and I've found that TOP is very good at keeping me focused on what is important to learn and builds my knowledge incrementally. Nothing against Udemy, but when I first started this journey I searched and filtered by "newest" and almost every course I saw was based on frameworks. But I would much rather do a MOOC-style JavaScript course than rely on YouTube videos. Also, the Odin Project is completely open source and free, so you have no excuse not to learn this crucial skill if you're short on money. freeCodeCamp is also a great online resource, and make sure you have MDN Web Docs bookmarked and refer to those constantly; they are an authoritative reference.

Good luck, and happy JavaScripting!

Learn to build any SaaS product through devKamet, an interactive platform to learn the essentials of Computer Science, Data Structures, Algorithms, and Operating Systems using Golang 👩‍🚀

This is for people who wants to learn more about:

- Frontend architecture

- Application server architecture

- Modern codebase with current tech stack

- How to connect to the server properly

- How to re-use your UI very fast and efficiently

- React Authorization, State management with reducer & context

- JWT Authentication

- medium to large codebase

- How to create in browser IDE to code in almost any language

- And so much more!

The work is still in-progress , I open source it to see if someone will find it useful and learn more from the codebase and the whole repo ✨

[Check the Github repo](https://github.com/abdulrahmanAlotaibi/devkamet)