The other day I discovered this useful extension that allows you to run your code from within the Atom editor. The name of the extension is Script Runner, and while there are many other extensions that do this, I really like how this one shows the code results on the right side of your screen, allowing you to easily see your code and the result of it after running it side-by-side.

After discovering this tool my first thought was, can I find the same extension or similar for the VS Code editor? The answer is Yes. The best extension I found to run your code while in the editor is Code Runner, and while this extension shows you the results in the console window, it still displays the results in a clear way by only adding the result and the time it took to execute the code. Very useful tool!

Why are these tools useful? For starters, they allow you to see the result of your code right away, without the need of setting up a unit test, or anything else really. You still have to output your result by doing a console.log for example, but you don’t have to run it in a browser or anything like that.

Below is an example of a FizzBuzz program using Atom and Script Runner:

And below is the same code using VS Code and Code Runner

They are very similar and I will be using both, I really like how easy it is to run and see your code’s output right from the editor.

To download and install these extensions, just click on the links below, and happy coding!

Script Runner – extension for Atom editor

Code Runner – extension for Code editor

I recently decided to update the landing page of one of my projects. I wanted to have a full-page background image and change this background image every time a user landed in this page or refreshed it. Here is what I ended up doing:

The <html> tag

Since we are replacing the entire background of your page, let’s add the background image to your html tag. We are going to do this by using some JavaScript that will update the <html> style when the page loads. The reason I am doing this instead of using CSS is because I want to be able to change the background image every time the page loads or it is refreshed.

The first step is to add an id to the <html> tag as shown below:

<html lang="en" id="landing">

Adding an id to the <html> tag allows us to identify it when doing the image background change in JavaScript.

The JavaScript

In order to display a different image every time the page loads or gets refreshed I wrote a function that randomly picks one image from an array. Basically I look at the length of the array (# of images) and then just pick a number from the array using both the Math.floor and Math.random methods from JavaScript.

The last step is to change the background image style of <html> to be the current selected image from JavaScript as shown below:

// <![CDATA[
  function Randomize() {
     var images = new Array("/images/journal1.jpg",
         "/images/journal4.jpg",
         "/images/journal6.jpg",
         "/images/journal7.jpg",
         "/images/journal8.jpg",
         "/images/journal9.jpg",
         "/images/journal10.jpg",
         "/images/journal12.jpg",
         "/images/journal13.jpg",
         "/images/journal14.jpg");
     var imageNum = Math.floor(Math.random() * images.length);
     document.getElementById("signup").style.backgroundImage = "url('" + images[imageNum] + "')";
  }
  window.onload = Randomize;
// ]]>

If you haven’t already I suggest you place your images and any other static content in a CDN. If you have Azure, take a look at my previous post where I explain how to serve static files from Azure.

Please share your comments or feedback in the comments section below. Happy coding!