Faster coding: The art of live reloading during development

Making changes in your code, saving the file, and then reloading the browser is a common process that can eat up a significant chunk of your time. So far we have just been opening the HTML file directly without editing the code to preview the changes.

Update the code

Open the index.html file in your code editor, opening a file in VS code. Then open the same file in your browser. They should both be open, find the line of code that reads Hello, I am John... and change John to your name. Then, save the file.

if you switch to the browser, the name still reads ‘John’. You have to reload the page to preview the change. So the steps were;

• Update the code
• Save the file
• Switch to the browser
• Reload the page
• Preview the change

Notice we have three steps between updating the code and previewing it on the browser. This process eventually eats up your time. To prove this we can simulate a real world scenario by adding a button.

Update the code, Add a button

Open the file in the browser and keep the browser open, you’ll be switching between the browser and the code editor. You can use the keyboard shortcut (Control + Tab) to switch between the two windows.

Add the markup

Inside the index.html file, find the comment that reads <!-- Add button --> and below it add a <button></button> tag and add the text “LinkedIn” then save the file.

<!-- Add button -->
<button>
  LinkedIn
</button>

Refresh your browser to preview the changes.

Add inline styles

Now, add some inline styles to the button, save the file, switch to your browser and reload to preview the changes.

<button style="background-color: blue; color: white;">
  LinkedIn
</button>

Add padding

Add padding to the button, save the file, switch to your browser and reload to preview the changes.

<button style="background-color: blue; color: white; padding: 1rem 2rem;">
  LinkedIn
</button>

Add typography styles

Lets add typography styles, save the file, switch to your browser and reload to preview the changes.

<button style="background-color: blue; color: white; padding: 1rem 2rem; font-weight: 500; text-transform: uppercase; font-size: 0.75rem;">
  LinkedIn
</button>

Add border styles

Add border styles, save the file, switch to your browser and reload to preview the changes.

<button style="background-color: blue; color: white; padding: 1rem 2rem; font-weight: 500; text-transform: uppercase; font-size: 0.75rem; border-radius: 0.25rem; border: none;">
  LinkedIn
</button>

Add space above the button

Now add a margin-top to create space between the line above and the button. Once again, reload the browser to preview the change.

<button style="background-color: blue; color: white; padding: 1rem 2rem; font-weight: 500; text-transform: uppercase; font-size: 0.75rem; border-radius: 0.25rem; border: none; margin-top: 16px;">
  LinkedIn
</button>

Improving the process

Did you notice how repetitive that process was? What we just did is a sneak peek into what really happens in the a real world coding scenario, making a small change, saving the file, reloading the browser and previewing the change.

The most ideal scenario

The goal is to reduce the amount of time from saving a file to previewing the change on a browser.

The process can be improved from this;

1. Update code
2. Save the file
3. Switch to the browser
4. Reload the page
5. Preview the change

To using shortcuts and automating browser reloads.

1. Update code
2. Save the file (control + s)
3. Switch to the browser (alt + tab)
4. Reload the page (automate)
5. Preview the change

Automating browser reloads

Servers to the rescue. In your code editor, right-click the index.html file and select “Open with Live Server”.

VS Code will automatically open the file in your browser. I remember this felt like magic when I first did it 🙂

The code editor acts like a server on the internet ‘serving’ the index.html file to the browser. (this statement doesn’t have to make sense now)

Back in the code editor. Locate and change the background-color of the <button> from blue to red, save the file and switch to the browser, the button’s color has automatically changed to red.

<button style="background-color: red; color: white; padding: 1rem 2rem; font-weight: 500; text-transform: uppercase; font-size: 0.75rem; border-radius: 0.25rem; border: none; margin-top: 16px;">
  LinkedIn
</button>

Live reloading in this case is when the code editor reloads the browser for you whenever you make a change and save the file.

And now you have a button on your portfolio.

Next up..

What is a server

Estimated Reading Time: 6 minutes