Tech Tip Tuesday

This post is part of a new weekly series, where I will be sharing one technology-related tip in two minutes or less.

SUBJECT
Auto Save and Refresh for Web Development

WHAT
This week’s tip is for all of you frontend developers out there. Anyone who has had to write HTML/CSS for a website is undoubtedly familiar with “Ctrl-s” (or “command-s” for you Mac folks), Alt-Tab, and F5. Building out a frontend is essentially a continuous loop of:

1. Write some HTML
   2. Save (Ctrl-s)
   3. Switch over to browser window (Alt-Tab)
   4. Refresh Page (F5)
   5. Switch back to text editor (Alt-Tab)
   6. Write CSS to style the above HTML
   7. Save (Ctrl-s)
   8. Switch over to browser window (Alt-Tab)
   9. Refresh Page (F5)

You’ll notice that only two of those steps actually involve writing any code*. Fortunately, there is a way to completely automate all of the non-coding steps, even for simple static websites. In fact, it is easier than ever now. Thanks to modern text editors like Visual Studio Code, you are one settings tweak and an extension away from coding bliss.

Automatic save and refresh

HOW
Enable Auto Save in Visual Studio Code

• In VS Code type “ctrl ,” to open the settings menu.
• In the Auto Save dropdown menu, change it from off to after delay.

Install the “Live Server” extension for VS Code

• Go to this link and click the green install button.
• After the install completes, reload VS Code.

Open your HTML/CSS files in VS Code and click the Go Live button at the bottom of the editor.

And just like that, you are now coding at the speed of thought!

As fast as the code flows from your brain to your fingers, so to will it flow onto the page.

*I’m using the word “code” loosely here. I acknowledge that it is heresy in some circles to imply that HTML/CSS is code.