I’ve recently updated my front-end development workflow to include an improved process for version control. Prior to this change, I would make a copy of any file I was going to edit. I could revert back to that copy in case anything got messed up. With Github, I am better able to keep track of edits. Additional Github bonuses include: work on projects from anywhere using multiple computers; collaborate with people; share files; and control how other people’s edits get incorporated into my files.
What in the World are Git and Github?
Git is a free, local system of version control. Since all of its files and folders begin with a period (.), they are hidden on Unix-based systems such as MacOS. You access them via Terminal (Command Line) or a GUI (Graphic User Interface) application like Sourcetree or Github Desktop. Github is a free cloud storage platform for hosting and managing Git files and their history. It is the world’s largest open-source repository. There is a paid plan that allows you to save private repositories.
Initially, I began using Github to track all of the changes I made to files like stylesheets, html pages, includes, WordPress functions.php, etc. It works much like MS Word, in that you see a history of exactly what edits have been made. This is incredibly helpful!
Examples of How Github Tracks Changes
In order to take advantage of Github, I installed Github Desktop. This application allows me to send and receive copies of files to and from my desktop and my Github repository. Since I’m a visual person, I shy away from Terminal (Command Line), which is the native app for Git. Github Desktop has a simple, friendly user-interface.
I also switched code editors from Dreamweaver to Visual Studio Code. I had been using Dreamweaver for years, but it’s much too sluggish for me now. VS Code is more streamlined and has lots of additional features, such as a smooth integration with Github Desktop.
Using Google Chrome Developer Tools, I target the elements that need changing and test the modifications. I then edit the code locally in VS Code, upload to the server via FTP, and commit to the Github repository via Github Desktop. One thing I love about front-end development is using cool tools!
Check out my blog post about getting started in Github!
Let’s Talk About Your Workflow
Please share your workflow in the comments section. One of the best ways to learn is to see what other people are doing. What’s your preferred code editor? How do you keep track of file changes? Are you a Command Line user or do you use a GUI?