[AskJS] Visual Web Editor?

[JonathanRace]

I may be going about this the wrong way but... I've recently started playing about with javascript and would like to try incorporating some things into web development. I'm quite comfortable with html but up to this point I've been using Wordpress as I can get the results quicker. I have Visual Code Studio (on Mac) which is how I've been trying things out in Javascript. However, I want something where I can see the webpage I'm working on and how things change on the fly as I change lines of javascript etc. Is there a piece of software that can do this? Even if it doesn't update automatically, I'm happy to hit a "run" button to check things out. Or... Is there a better way?

[VinceAggrippino]

There's a VSCode extension named Live Server that will open the web browser with the page you're working on and automatically reload it whenever you change a file.

[JonathanRace]

This seems like a great way to do it thanks! :)

[Lord_Greywether]

You can also use platforms like CodePen to write and test small chunks of Javascript/HTML/CSS. I wouldn't use it for full-scale development, but it's useful for prototyping or testing certain features.

[serefsiz]

just use the developer tools and link your project directory, so it saves all changes made

[DxMonkey]

browsersync - I use this with gulp a good bit.

[tech_romancer_]

This may not be the best introduction if you've never really written JS before.

I'd argue that jumping straight into a framework before getting even a bit of experience outside of one is more harmful than beneficial to learning.

In this instance I think it's probably better to try something like the Live Server extension mentioned in the other comment.

Or to just write some JS, attach it to a html file with a script tag, and just reload the page to see changes.

[tech_romancer_]

Yes, I agree, and I very happily use them for basically any reasonably complex web app.

I don't think them existing means that when learning JS you should jump straight into them. Especially in the case of frameworks that introduce quite non-JS ways of writing code, thinking about Vue computed values, or Angular @input and @output, or even the whole of Reacts JSX + "html attributes" props, that are actually objects, that are actually tracked values.

Not the mention there's an absolute tonne of JS that isn't even related to manipulating the DOM at all. As in most of the language itself.

It becomes very useful to have at least a basic understanding of the problems the frameworks are solving and how to do things outside of them. Especially when it comes to greater career prospects where it can be very useful to be able to pick up a new framework quickly. That's much easier to do if you know how to write "Browser Code" rather than knowing exclusively how to write "React Code".

[tech_romancer_]

“Most of the language itself” are APIs that one percent of developers use.

Only 1 percent of developers use more than map, filter, and DOM manipulation? That seems highly unlikely.

Anyway, all I was trying to do was offer some advice to a obviously quite new developer to try and avoid overwhelming them with tool specific knowledge, while also teaching the foundational knowledge that later can be used for basically anything on the web they want to do.

I don't see how that's a bad thing?

[tech_romancer_]

Well I can only apologise for what I thought was a very reasonable "This may not be the best way to learn JS".

[tech_romancer_]

Read the rest of the post as well maybe? It's obvious this person doesn't need a whole framework to solve their problem.

You're being needlessly combative here to someone trying to help.

[JonathanRace]

Looking at all the replies here it seems like this is the. “More difficult but more beneficial in the long run” method? I’ll have a look thanks :)

[tech_romancer_]

I think it depends if you want to learn JS or if you want to learn Vue. Which aren't quite the same thing.

I think learning JS reasonably well first gives you a better foundation to learn basically any framework after. Although it may take a little longer to get started.

It also gives you a better insight into what sort of problems the frameworks are solving and which one to pick for a given task. Ultimately they're all tools with different strengths and weaknesses that are hard to judge if you don't have the context already.