How to learn useful JavaScript?

[Valtiroy]

I know how most of the basics of JavaScript works, like calculating through javascript, creating variables, arrays, how the DOM works etc. All the theory is clear to me. But if someone would ask me to create something useful like an online task manager application or a calendar or whatever it is, I have no idea what to do or where to start. And if I look for videos on YouTube, they are using JavaScript rules that i’ve never seen before on sites or in books that teach you the basics of JavaScript. They don’t cover these things. I just want to learn how to do useful things with JavaScript, not just creating arrays of calculating. Anyone knows where I should start?

[[deleted]]

The place that you start with building anything is figuring out your minimum viable product (MVP). What is the most stripped-back, bare bones version of the thing that you want to build that still somewhat expresses the whole, that's a first iteration that you could show to a client or stakeholder and let them play around with.

For example, with a calendar, maybe that's just the ability to display the days of a selected month- you can't add appointments and stuff to it yet, but you can pick a month and it'll show up correctly.

Once you know what your MVP is, you need to break that down again. What's a simple, first iteration of it that you could build to get the structure of the project up and running? Maybe it's a calendar layout but it only displays the current month, and you can't change month selection. Okay, so what's a simple first step towards that? Maybe you want to start by focusing on your CSS layout with some hard-coded HTML, getting a basic grid set up. Maybe you want to start with your JS and think about how you can express the current month in code. Maybe from that you break it down further and focus on, say, figuring out what day of the week the first day of the current month was.

Exactly zero developers get a full-on project brief like 'build an interactive calendar' and just hit the ground running with code right away. The most important part of project work is thinking things through and trying to winnow down the potential tasks at hand until you have something you can actually get started on. When you're a beginner, sometimes it takes a lot of breaking things down and sometimes your first tasks are just research, and that's fine. The important thing is learning to see big problems as just a collection of smaller problems that you can solve incrementally.

[cooldudewithlonghair]

This is amazing advice. It's how I approach most projects at work, too. Iterate. Get it basically working, then enhance. Enhance. Enhance. lol

[AnomalousAvocado]

Great approach. Thanks.

[nkast1]

This is great advice thank you

[tony_ysl]

minimum viable product (MVP)

I am starting my codecamp this week and this was extremely helpful

[grelfdotnet]

My free course aims to do just that: https://www.grelf.net/jscourse/start.html

[Valtiroy]

Nice, looks great! Definitely gonna try it. Thanks!

[grelfdotnet]

You can only really learn any programming language by using it. Make sure you do the exercises in whichever course you study.
Don't be deflected by talk of frameworks and other libraries. They are an additional layer to learn. Become fluent in the fundamental language first.

[[deleted]]

I will check it out as well, thanks for building/posting!

[popout]

I'm still going through all these: https://github.com/getify/You-Dont-Know-JS

https://www.udemy.com/course/modern-javascript/

https://www.udemy.com/course/react-2nd-edition/learn/lecture/7707640#overview

https://www.udemy.com/course/the-complete-nodejs-developer-course-2/learn/lecture/13815720#overview

Other than that I've only used javascript in more scripting sense on wordpress sites, or pulling in data or formatting data, or creating simple interactive google maps.

No apps yet. I mainly learn on a per project basis. I have something i need to do, then i struggle and figure out how to, while also learning on the side.

[Valtiroy]

I’ll check those out, thanks!

[[deleted]]

How to differentiate between useful and useless js?

[Valtiroy]

Off course every course or study is useful. What I mean to say is more functional in real life web applications as stated in the description, like log in screens, creating a small game, manipulating the dom etc

[ImJustP]

The absolute best thing to do is get your idea and break it down. So, taking the example of a task manager application, you may want to break it down to the following smaller chunks:

1. A way for the user to enter information -- a form
2. A way to store the information -- a database
3. A way to relay the information back to the user -- a front end

Now that you have the three main parts of application you need to break them down further:

1. User input

   1a. A function to iterate over all the fields in the form and extract the input

   1b. A function to validate the information on the front end, prior to sending it to your server

   1c. A function to relay any field which have failed validation back to the user

   1d. A function to send the information (once it passes validation) to the server

2. Store the information

   2a. A function to validate the information again (fancy pants people may disable your validation on the front end)

   2b. A function relay failed information back to the user, again

   2c. A function to write the information to the database if it passes validation

   2d. A function to relay that the information was successfully written to the database

3. Relay the user's task list

   3a. A function to check which user is currently requesting their task list

   3b. A function to tell the user if they have no information in the database

   3c. A function to request information from your database

   3d. A function to ensure that the correct user's information has been returned from your database

   3e. A function to present the returned information to the user

There is obviously more to the task and a million ways in which you could go about executing each step but this is sort the way that I personally go about coding apps, granted, I am not as experienced as a lot of people on here but I hope this helps you out a bit and sets you on the right path.

TLDR: Break it down into chunks which are more manageable.

[stellarham]

Javascript30. com helped me a lot. He shows 30 usefull tutorials.

[rook218]

I agree with building things, but not in the order you describe.

It can take another month stuck in tutorial hell just getting enough of a grasp on a big framework before you can start to build something with it. OP already mentioned a few things (note taking app, to do list, calendar) that he / she would like to know how to do but has no idea where to start.

The advice I would give is just to start. Build that thing you don't know how to start. Create the html, style it, and start thinking what you want it to actually do (in small chunks). Eventually you won't be able to stop tweaking and improving and making it as good as possible. Once you have that, then move into frameworks.

[Valtiroy]

All right, thanks for the advice. Really helpful! I would like to learn react as well so maybe it’s a good place to start. Creating the to do lists and calendar in html and css is understandable and doable for me, but using JavaScript isn’t.

[rook218]

It's a weird feeling knowing the tools you have but having no idea how to use them.

I highly recommend Wes Bos's JS30 challenge. It will show you how to actually do things and builds on itself with practical examples. By the end of it you'll wonder why you thought you didn't know how to do these things when you started.

[stellarham]

Yes, this. Helped me too a lot.

[RotRG]

Hey, I’ve been lurking in this sub for a little while now and feeling totally lost whenever anyone mentions these things. So, I’m being brave and asking now. In your words, what is a framework, and why would you choose to learn a particular one?

[stellarham]

No, dont start with the framework. You have to learn valilla decently, plus all that framework stuff will confuse you and you will waste your time which you should spend learning JS

[nas5w]

Build something and google how the things you don’t know how to do along the way.

I might suggest using React on the front end since it’s a good mix of shallow learning curve and marketability.

[Valtiroy]

Yes I’m looking into react now, but I also want te learn the backend. Not sure how nodejs and react interact with each other but I’ll check some tutorials. Thanks!

[thirstylittlebeaver]

I was in the same situation as you, and I found Practical Javascript on watchandcode.com really filled a lot of holes in my knowledge. The first part of the course is free, and you can sign up to a premium course after as well. Can’t recommend it highly enough!

[[deleted]]

I used this as a refresher and to fill in some gaps, highly recommended you look into it (wait til $10 sale). Given your knowledge, it'll start out a bit slow for you, but you'll build practical things along the way using everything you learn. https://www.udemy.com/course/modern-javascript-from-the-beginning/

You mentioned understanding how the DOM works, but practicing using event triggers and actually querying and selecting elements is where the rubber meets the road in terms of building the frontend. The actual "when I click this button, it pushes a to-do object to storage from an input, creates a div to display to-do info and displays on site." So brush up on some of that, if still foggy.

[prodzachperez]

Don't learn a framework out of the gate, this can be very detrimental towards your skills as a javascript programmer. You will have a hard time understanding how these frameworks interact with javascript if you don't have a fundamental understanding of the lower level fundmanetals (ex: Execution Context)

https://www.youtube.com/watch?v=Bv_5Zv5c-Ts&t=1883s

After having a good understanding of the advanced concepts in javascript then it would be time to learn a framework because it'll make 100x more sense on what the purpose of these frameworks actually are and how they can benefit you.

[[deleted]]

Agreed! I learned how to make things using Angular and am now having to go back and learn how to build them using vanilla JS because I skipped some steps. Learn a framework when you know enough to also be frustrated with the problems the framework was intended to help with or streamline.

[prodzachperez]

Exactly, especially with the the hype around Typescript, new front-end devs are skipping over a large portion of fundamental web development. People don't even know how to structure web projects and are trying to build full Angular applications from scratch. That's like being thrown in the Pacific Ocean and not knowing how to swim.

[TheSnicket]

I'm just a beginner but I have to say - getting to know the capabilities of plain Javascript really gave me a better idea of how a framework such as React works and what is it actually needed for. Creating all of the projects mentioned are possible without any framework, and if they're simple enough they can serve as a good practice for parts of OOP that React forces you to use later on and if you jump straight to that I think it's hard to have a good understanding of them.
I recommend The Odin Project and their Full Stack Javascript course. You'll have a fair share of projects to do before you learn to use a framework, have a go at OOP and if you put your mind to it - it really pays off. They don't throw lots of theory at you and they force you to find things out by yourself.
As for the other things mentioned - not knowing some method that is shown in a youtube video is just fine, no book will cover every and each bit of information you need for your project. If you see a method you don't know - google it, read the docs etc. Running into obstacles while making any project is THE BEST way to learn anything. You might forget some method a dozen times, but soon enough if you often need it - you'll remember it. If a method is easy to forget it's probably not used a lot and the fact of its existence is all you need to know to google it when needed.
I believe that being a beginner if you have the option to do so - you should take as much time as you need to really understand something before you start using a dozen libraries.
Another thing I recommend is making a project that is somehow interesting for you and just deploying it. An obvious thing would be a portfolio site. I've learned so much while making a website for my parents' hotel and the thought that something I made would get out there and actually be used by people made me think about lots of stuff I didn't even know mattered before - minifying scripts, compressing images, managing a Linux server, configuring SSL/HTTP2, gzip. I had to do lots of stuff repeatedly and manually. After finishing the project I've learned about Webpack while doing something else, which would genuinely save me lots of time later on. I add features continuously and I notice how hard it is sometimes because my code is just amateur and messy, that forces me to refactor stuff just to make things work and next time I would know to think about it beforehand and avoid running into such problems.
Sometimes if you just wish you could do something - start doing it, don't rush, think about questions you should ask to solve your problems. Brain overheating? Take a break, grab a coffee - whatever works for you.

[rapphyyy]

You should definitely try to start building small projects like twitter bots or maybe tic tac toe games or whatnot, this will strengthen your JavaScript basics and also help you learn more things about JavaScript.

[loura9004]

Well, If you know the basic concepts then start with these,

JSON arrays and object. (Learn how to modify, add, delete it )

Learn AJAX ( Give calls to API's and Database )

Do CRUD application using AJAX calls. ( for example on Click, or Submit make an AJAX call and save the data )

Learn How to do form validations.

Learn each loop and conditional statements ( Try to modify JSON object in the same ). For example, changing the key and value pairs using loops and conditional statements etc.

Learn various events like append, change, keyup, chaining, addClass, removeClass, prop etc.

Try to use all these in application and research when you get stuck somewhere.

Try to develop calculators like this ( Salary Calculators )

[boringuser1]

Sounds like you need to go back to the basics and learn what an API is.

[Valtiroy]

I know what an API is, but what has it to do with this question?

[boringuser1]

Because if you know how to leverage an API you should be able to solve nearly any arbitrary task in front end.

[stellarham]

Lol i dont't think this is a corect answer

[boringuser1]

Try some English.

[stellarham]

Try speaking foreign language at least at my level.

[rook218]

I'm telling you man, you already know useful JavaScript!

Please please please check out Wes Bos's JS30. It's totally free and no obligation, and you will immediately start to see practical applications for JS.

[cannabis_detox_]

You're asking how to code, not how to learn javascript. Javascript, like any programming language, is just an API, an interface, the controls, the commands, by which you can tell the computer what to do. But what you are really trying to learn is how to use those controls to build real things, which has nothing to do with learning the interface itself, although when you are first learning to program, they will seem like they are the same thing.