• Website Home
  • About
  • Services
  • Portfolio
    • Recent
    • Archives
  • Shop
    • Catalog
    • Order

ASK Design Blog

Designer | Artist | Teacher

  •  
    • Blog Home
    • Web Design
    • Graphic Design
    • Art
      • Licensed Art
    • Links
    • Calendar
    • Contact
      • Privacy Policy
      • Cookie Policy

    Front-end Development Workflow Adjustments

    May 5, 2021 by ProfK Leave a Comment

    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.

    Anne's workflow: Github overview page
    Anne’s Github Overview page

    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

    Workflow: Github GBDog CSS file
    CSS file
    Workflow: Github GBDog functions file
    Functions file
    Workflow: Github SPS header.php changes
    Header file

    Workflow Adjustments

    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.

    Anne's workflow: VS Code - GBDog - css file
    VS Code – CSS file

    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! 

    Anne's workflow: Github Desktop - GBDog commit to main
    Github Desktop – Commit changes to Main Repo

    Github: Let’s Get Started!

    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?

    Related Posts

    What Should I Do to Protect My Site from Hackers?
    My Web Design and Development Toolset
    Video Conferencing with Zoom
    Best Alternatives to Photoshop

    Filed Under: Software Tips, Web Design Tagged With: Git, Github, Github Desktop, version control, Visual Studio Code

    Reader Interactions

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Primary Sidebar

    Affiliate Disclosure

    This website contains affiliate links, which means I may get a small commission (at no cost to you) if you use these links to make a purchase.

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Looking for Something on this Site?

    Search the Web

    New Book Published!

    Kornegger book: Inside the Rainbow

    Art and design for book cover and interior

    Inside the Rainbow: Soul Connection in Nature, by Peggy Kornegger

    BUY THE BOOK!

    Peggy and I have completed our 3rd book together! This one is about soul connection in nature. Peggy is the writer, I'm the designer and artist. I think it's pretty darn special and hope you agree 🙂. Printed book and eBook are both available on Amazon.

     
    kornegger loseyourmind front cover
    Several of my paintings are in this book (including the cover)
    BUY THE BOOK!
     
    Check out my blog post about designing books: Self-Publishing Adventures

    Amazon Affiliate

    As an Amazon Associate I earn from qualifying purchases.

    Photo, Video & Design Software

    Affiliate Partners

    We receive compensation when you purchase a service or product via the links on this blog.

    Web Hosting

    StudioPress
     
    Bluehost Website Hosting

    Testimonials

    I received the notecards on Friday and it was on my to do list today to email you my deep appreciation for them. They are amazing and I am so glad to have them to share. I am sure I will order more in the future. You are such a gifted artist and I thank you for sharing in a way others can use the art.

    — Shari Spokes

    Your new pastel "Lettuce Lake” is really beautiful. Very, very nice.

    — Tony from Belmont, MA

    My dear sweet sister. I can’t tell you how much I love your pictures. I so much wanted something and was so sorry that I couldn’t pick something out at your sale. On the other hand, I so much wanted something that you had chosen for me. Its been on my mind and suddenly, your beautiful pictures arrived. They are beyond beautiful and I cried when I saw them. Sending you love and my bestness.

    — Marti from Reno, NV

    Copyright

    © 2000-2023 Anne S. Katzeff. All rights reserved. Unless noted, all artwork and text are copyrighted by the artist. Images may not be reproduced, manipulated, or used in any way without Anne’s written permission.

    Categories

    Graphic Design

    • AIGA
    • Design Is History
    • Janice Moore
    • Mass. Contractors

    Web Design

    • 978 Grid System
    • A List Apart
    • Adobe Color Tools (formerly Kuler)
    • AWWWards
    • Smashing Magazine
    • underthesite
    • www schools

    Tech-Computer

    • Adobe TV
    • Orramac
    • Teknoziz

    Comments

    In an effort to reduce spam, comments are restricted. Please email Anne if you have a comment or question that you are unable to post. Thanks for understanding.


    Archives

    Typography

    • 1001fonts
    • Adobe Type
    • Adobe Web Type
    • Bitstream
    • Dafont.com
    • Emigre
    • Font converter (free)
    • Font Spring
    • Font Squirrel
    • Google Fonts
    • I Love Typography
    • identifont
    • Typeinspire
    • Typewolf
    • Typoretum

    Photography

    • Creative Commons

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Contact

    Website
    Email

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Connect and Share

  •  
  • Legal

    Privacy Policy
    Cookie Policy

    Copyright © 2023 · Optimal Theme · Built on the WordPress Genesis Framework· Customization and design by ASK Design