Web Dev Toolchains/Work flow advice

[trag1c]

 

Hey all.

 

The program that I am currently taking contains a web development course and I have no idea about the workflow or tools involved with it. All that we're dealing with this semester is JS, CSS/HTML, AJAX and JSON so nothing too crazy (Next semester is server side stuff). I am extremely familiar when it comes to the workflow and toolchains of compiled/interpreted applications using languages like C/C++, Java, C#, Python, ASM but web development is extremely far out of my wheel house so I have no idea what tools and workflows are available for it.

 

So far my setup is VS code with a live server extension and chrome but after using this for nearly 3 months out of this semester it still feels clunky to design and test web pages. I find it counter intuitive to have to reload the page every time I make a change, especially when I am working with forms and have to program the functionality for them. When I am working on the pages it is very iterative. I'll get the elements on the page and then program the required functionality for them before I style the page. But as I make changes I am constantly reloading and testing these changes, It helps in the long run making sure the page functions exactly as I want it too so that I get excellent grades but it is also a massive time sink to do so. 

 

The way I see it, I have 4 possible options.

1. Change my workflow
2. Change my tooling to benefit my work flow
3. A mixture of the two above choices.
4. Just live with it.

Any thoughts for improving my workflow or toolchain? It would be great to have WYSIWYG (What you see is what you get) type of editing so that I can make changes on the fly without having to go through the process of retesting the entire page but rather just the section I need to retest. Additionally, I find the debugging experience to be lack luster at best; although, that might just be my naivety when using chromes developer tools. 

 

[phje]

CTRL + R forever and always.

In all seriousness, that is and has been the go-to method in Web Dev for as long as I remember. I wasn't trained formally, so maybe others have different opinions. 

 

In JS server side code like node and react there are options to have things auto reload when changes are made. 

 

I think because of the nature of traditional web development the need for the auto reload was just never really needed.

[trag1c]

1 hour ago, phillipsj89 said:

CTRL + R forever and always.

In all seriousness, that is and has been the go-to method in Web Dev for as long as I remember. I wasn't trained formally, so maybe others have different opinions. 

 

In JS server side code like node and react there are options to have things auto reload when changes are made. 

 

I think because of the nature of traditional web development the need for the auto reload was just never really needed.

Well that sucks. I was hoping for a silver bullet here hahaha. This has been my biggest gripe with web dev so far but I guess if that's the way its done there's not much I can do but suck it up.

 

Thanks for the reply.

[Kopaka]

It's possible. Look into something like https://browsersync.io/

 

You can set it up yourself, or you can use some framework that has a prebuilt toolchain which may be easier, for example https://reactjs.org/docs/create-a-new-react-app.html#create-react-app