Undoing changes to multiple files ... I keep getting it wrong

I came to learning front end a short while ago from being very familiar with apps like illustrator, photoshop, reaper and so on. With these I have just one file, I can save incrementally when something significant has changed, but I’m used to just being able to spam CTRL-Z if something isn’t working and starting over. Unfortunately, I keep trying to undo work in parallel HTML and CSS files, but I don’t know how far to go in each and it all gets messed up and I keep losing work because of it.

What is a good strategy for keeping track of changes in 2 separate files? Should I be saving incrementally much more often. I have actually considered just using style tags for CSS so I can keep it all in one file and undo as I want to and then move the CSS over when finished, is that a terrible idea?

One thing that doesn’t help my messy situation is I don’t really have a handle on naming conventions for selectors, I try to not write duplicate code for elements that will all be styled the same way, but invariably find I need to change something later and have to rename classes, which I often get confused and wish I had just named everything uniquely from the get go. I know it’s not very economical, but should I stick to unique selectors for different sections at least until I become better at organising everything?

Any tips or advice would be greatly appreciated as I’m getting a bit tired of unpicking work I’ve messed up through lack of organization.

Cheers…

Edit: What would be amazing (for me at least) would be a vscode extension that kept a single undo file for both the CSS and HTML (and JS) and would undo changes in order in all the files you have open. If you close one it would prompt you to make an incremental save.

(I can dream)

1 Like

While I don’t have a recommendation that handles the exact workflow you’re going for, I think you could benefit a lot from using Git. It would allow you to keep track of changes in multiple files at once and allow you to revert back to certain versions of files all at once too, and so much more. It has a really nice integration with VSCode as well. Ultimately, you’ll likely start using Git in the future anyway, along with GitHub.

The course on Codecademy doesn’t cover the use of it in VSCode, but it teaches the fundamentals and knowing how it works from the command line is beneficial anyway. Once you know how it works, then you can use whatever GUI for it (like vscode) without wondering how it does the “magic”.

If you’re on a career path, then there’s a good chance it will be part of your path already. If you’d like to take it on its own just to be able to start working with it immediately, you can do so here: Learn Git. If you do take it ahead of time, it will be marked as complete on your career path too so you won’t have to repeat it.

4 Likes

Thanks, I’ll check that out.

Spent some time completing the command line and github courses, fiddled around with VScode and Git. I can see what you mean, Github is literally what I was asking for, albeit a slightly obtuse and hard for noobs version of it, but it does do exactly what I wanted. Definitely worth the time invested and I learned some command line into the bargain.

The only issue I had with VScode was when I try to push a local repo to GH it pushes the parent folder rather than the one I am working in.

eg. MyCodecademyFolder > MyProjectFolder (it pushes MyCodecademyFolder)

I have worked out that dropping MyProjectFolder onto VSCode opens just that folder to the workspace but I think there’s probably an easier way I am missing. Anyway, it works and I am well on the way to taking advantage of GitHub saving all my different versions and being able to undo my errant code ramblings more easily.

So, thank you very much for the advice, it was very helpful.

1 Like

You can use git without github if you’re just working locally. An online repo is useful if you’re changing workstation and is probably the best way to share a project with others in the long term though.

If you have a .git folder in "MyCodecademyFolder" then you’re tracking from that folder recursively, so all the subfolders and so on. It would be easier if you tracked each individual project folder separately. Both for your own sake and should you ever share any projects.

Double check where the .git file is and consider whether it should actually be in the project subfolder instead (then your push would behave as expected).

2 Likes

Yeah, VSCode keeps putting the git folder in the codecademy folder rather than the project folder when I create a repo from VSCode. Only way I have found to avoid this is dragging the project folder into VSCode and then that opens in the workspace and I no longer see the codecademy parent folder in the VSC file explorer.