Forem: Developer Bacon 🥓🥓

Getting started with Glitch

Brett Anda 🔥🧠 — Sat, 09 May 2020 13:00:00 +0000

Glitch.com is a website that can host your online web apps. You can host entire websites on Glitch with Vue.js, React, Angular, Nuxt, and more. There is also the option to make bots for Discord, Slack, or even Twitch with a language like Node.js.

Creating your first app

When you start a project you will have the option to start from a starter template or a Github repo.

The Glitch editor has a bunch of great features like a file formator and an automatic package update checker.

Packages

After you have a project set up and ready to go, and you can make changes in the built-in editor, you will need to make sure you have a package.json file with a start script. You can ignore the package file if you are running a website with an index.html file. The start script is what Glitch looks for when running your app. Here is a template for the package file if you don't have one.

Glitch comes with an easy way to install and update NPM packages. To use this functionality go to your package.json file in your Glitch project and at the top you will see an Add Package button. To add a package just click it and search for the package you would like to install and Glitch will install it for you.

Updating packages is very similar to installing them. If a package has an available update just click on the Add Package button and any available package updates will display above the What is npm link.

The script that Glitch will run is start. As far as I can tell there is no way to change the script the Glitch will run if there is a way just let me know.

{
    "scripts": {
        "start": "node index.js"
    }
}

Currently, the highest node version that Glitch uses is v12, but if you would like to use another version of node for your project

{
    "engines": {
        "node": ">=12.x"
    }
}

Here is an example of what your package.json file should look like for your Glitch project.

{
    "name": "something-cool",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "start": "node index.js"
    },
    "dependencies": {
        "express": "^4.17.1"
    },
    "engines": {
        "node": ">=12.x"
    }
}

Formatting your files

Glitch also comes with a file formating tool, to help make your documents look just a bit nicer to look at. To use this function open a file that you would like to format and at the top of the editor, there will be a Format This File button. Using this is as simple as clicking that button.

New files and directories

Making a new file is easy with the New File button at the top left of the file hierarchy menu, but did you know that you are also able to make new folders with this as well. To do so just add the directory before the new file you want to create and add a slash in between the directory and file. Here is an example new_directory/new_file.js

.env

The .env file is where you can keep all of your super-secret private tokens for your projects. You can put all of your tokens in this file and they won't be visible to the public and won't duplicate if the project is remixed.

To access the variables that have been set in the .env file you can use the process.env object, followed by the variable, like so: process.env.SOMEVAR. This is an example of what a .env file would look like:

# Environment Config

# reference these in your code with process.env.SECRET

TOKEN=123456abcdefg

# note: .env is a shell file so there can't be spaces around =
 # Scrubbed by Glitch 2020-04-17T08:15:39+0000

How to make a JavaScript canvas double line animation

Brett Anda 🔥🧠 — Fri, 24 Apr 2020 12:00:00 +0000

So you want to make a cool line drawing animation. Well, you have come to the right and maybe only place for this specific JavaScript canvas animation.

Canvas Context and definition

To get started we will need to define the context for the canvas element like so:

let context = document.getElementById("backface").getContext("2d");

For reference, the ID for the canvas element is backface.

Defining an element without setting a variable

Did you know that you don't have to set a variable for an element if that element already has an ID? You can just use that ID as the variable and JavaScript will grab that element. For example, if we use the example above without setting a variable for the canvas it would look like the below.

let context = backface.getContext("2d");

Variables

Before we start animating we will want some empty variables for the lines to add themselves to. I chose to add every line to a variable so the positions of the lines can be chosen before the animation begins as to not calculate those positions before every line drawn.

// The line width for every line
lineWidth = 5; // 5px

function lines() {
    let valuesT = [],
        valuesB = [];
}

Now that we have arrays for the top and bottom line we can add height values for each line to be drawn later. This for loop chooses a random value between the vertical center and 0 for the height of that line. Inside the above function, you will want to add the below code.

for (var i = 0; i < backface.width; i++) {
    valuesT[i] = Math.floor(Math.random() * (backface.height / 2 - 1)) + 1;
    valuesB[i] = Math.floor(Math.random() * (backface.height / 2 - 1)) + 1;
}

Let's get some color going into this animation.

var i = 0,
    rr = Math.floor(Math.random() * (3 - 1)) + 1,
    rg = Math.floor(Math.random() * (3 - 1)) + 1,
    rb = Math.floor(Math.random() * (3 - 1)) + 1,
    r = 255,
    g = 255,
    b = 255;

Now for the line drawing. First, we will call the function with a requestAnimationFrame, then the random color for the line will be chosen and finally, the line will be drawn.

requestAnimationFrame(() => drawLines(i));

function drawLines(i) {
    //change this to a for loop that works.
    if (rr == 2) {
        r = Math.floor(Math.random() * (255 - 1)) + 1;
    } else {
        r = 0;
    }
    if (rg == 2) {
        g = Math.floor(Math.random() * (255 - 1)) + 1;
    } else {
        g = 0;
    }
    if (rb == 2) {
        b = Math.floor(Math.random() * (255 - 1)) + 1;
    } else {
        b = 0;
    }
    if (rr != 2 && rg != 2 && rb != 2) {
        var rand = Math.floor(Math.random() * (255 - 1)) + 1;
        r = rand;
        g = rand;
        b = rand;
    }

    context.clearRect(i, 0, 1 + lineWidth, backface.height);
    context.beginPath();
    context.lineWidth = lineWidth;
    context.strokeStyle = `rgba(${r},${g},${b},1)`;
    context.moveTo(i, 0);
    context.lineTo(i, 0 + valuesT[i]);
    context.stroke();
    context.closePath();

    context.beginPath();
    context.lineWidth = lineWidth;
    context.strokeStyle = `rgba(${r},${g},${b},1)`;
    context.moveTo(i, backface.height);
    context.lineTo(i, backface.height - valuesB[i]);
    context.stroke();
    context.closePath();

    // This just loops through the function until the edge
    // of the canvas has been hit and will repeat.
    if (i >= backface.width) {
        i = 0;
        requestAnimationFrame(lines);
    } else {
        i = i + 1 + lineWidth;
        requestAnimationFrame(function() {
            drawLines(i);
        });
    }
}
requestAnimationFrame(lines);

Conclusion

Below is the CodePen example of the above code with the full code below the CodePen example.

See the Pen Vertical Lines Double Animated by Brett
(@brettanda) on CodePen.

let context = backface.getContext("2d"),
    lineWidth = 5;

function lines() {
    var valuesT = [],
        valuesB = [];
    for (var i = 0; i < backface.width; i++) {
        valuesT[i] = Math.floor(Math.random() * (backface.height / 2 - 1)) + 1;
        valuesB[i] = Math.floor(Math.random() * (backface.height / 2 - 1)) + 1;
    }
    var i = 0,
        rr = Math.floor(Math.random() * (3 - 1)) + 1,
        rg = Math.floor(Math.random() * (3 - 1)) + 1,
        rb = Math.floor(Math.random() * (3 - 1)) + 1,
        r = 255,
        g = 255,
        b = 255;
    requestAnimationFrame(() => drawLines(i));
    function drawLines(i) {
        //change this to a for loop that works.
        if (rr == 2) {
            r = Math.floor(Math.random() * (255 - 1)) + 1;
        } else {
            r = 0;
        }
        if (rg == 2) {
            g = Math.floor(Math.random() * (255 - 1)) + 1;
        } else {
            g = 0;
        }
        if (rb == 2) {
            b = Math.floor(Math.random() * (255 - 1)) + 1;
        } else {
            b = 0;
        }
        if (rr != 2 && rg != 2 && rb != 2) {
            var rand = Math.floor(Math.random() * (255 - 1)) + 1;
            r = rand;
            g = rand;
            b = rand;
        }

        context.clearRect(i, 0, 1 + lineWidth, backface.height);
        context.beginPath();
        context.lineWidth = lineWidth;
        context.strokeStyle = `rgba(${r},${g},${b},1)`;
        context.moveTo(i, 0);
        context.lineTo(i, 0 + valuesT[i]);
        context.stroke();
        context.closePath();

        context.beginPath();
        context.lineWidth = lineWidth;
        context.strokeStyle = `rgba(${r},${g},${b},1)`;
        context.moveTo(i, backface.height);
        context.lineTo(i, backface.height - valuesB[i]);
        context.stroke();
        context.closePath();

        if (i >= backface.width) {
            i = 0;
            requestAnimationFrame(lines);
        } else {
            i = i + 1 + lineWidth;
            requestAnimationFrame(function() {
                drawLines(i);
            });
        }
    }
}
requestAnimationFrame(lines);

Making a shopping cart system with PHP 7.4 and MySQL

Brett Anda 🔥🧠 — Wed, 08 Apr 2020 07:00:00 +0000

This code example is just a demo to show what is possible, and should not be used for actual e-commerce websites.

let's assume that you already have a product page and are displaying these products from a MySQL database, and now you want to make a cart system so a user can purchase more than one item at a time.

Product detail page and add to cart form

This page show and individual item from the products page and will contain a form to add this item to the cart of the website. This form will go to an addtocart.php file that will set the cookie for the cart. The form will look something like the below code.

The ID for this form would have been grabbed from a MySQL database.

print("
<form action='addtocart.php?id=$id' method='post'>
  <label for='quantity'>Quantity: </label>
  <input type='number' name='quantity' id='quantity' min='1' max='20' value='1'>
  <input type='submit' name='add' id='add' value='Add to Cart'>
</form>
");

Adding to the cart

Now for the addtocart.php file. For this page, you will want to connect your MySQL server to get the items from the database to add to the cart. You will also want to make sure that you tell PHP that you want to start using sessions with the session start function.

session_start();

Connecting to your MySQL database should look something like this.

$server   = "localhost";
$username = "username";
$password = "123456789";
$database = "e-commerce";

$connection = mysqli_connect($server, $username, $password, $database);

/* And just in case something goes wrong */

if(!$connection) {
  die("Connection Failed: " . mysqli_connect_error());
}

Once you have connected to the server we can add the item to the session. Because of the detail page form, the URL should look something like this example.com/addtocart.php?id=1 which means we can grab the ID of the item from the current URL.

Even though the detail page form has the method of post we can still use GET to grab the id because we added it to the action of the form.

$id = $_GET['id'];

// Check if the add to cart button was clicked or someone just wants to load this page. This POST method `add` is from the id of the add to cart button on the detail page.
if(isset($_POST['add'])) {
  // Check if there is a session for the cart set already, if not then set one.
  if(!isset($_SESSION['shoppingcart'])) {
    $_SESSION['shoppingcart'] = [];
  }

  $quantity = $_POST['quantity'];

  $item = [
    "id"       => $id,
    "quantity" => $quantity
  ];

  // Now add new item to the cart
  array_push($_SESSION['shoppingcart'], $item);

  // Once added let's take the user to the cart page
  header("Location: cart.php");
} else {
  // If the add to cart button was not clicked then go back to the products page.
  header("Location: products.php");
}

Cart page and checkout

This page will display all of the items in the cart, have a checkout section, and remove all of the cart items.

Cart item removal

To remove all of the items from the cart let's start with the function that will check if the customer would like to do so and add the form that will trigger this action.

if(isset($_GET['reset'])) {
  session_start();
  unset($_SESSION['shoppingcart']);
  session_destroy();
}

// Start the session for the rest of the page after destroying it.
session_start();

For the form that will remove all of the items, it would look like this. This form will simply reload this file and add ?reset=RESET to the URL activating the PHP script above to remove the items.

<form action="#" method="GET">
    <label for="reset">Reset cart: </label>
    <input type="submit" value="RESET" name="reset" id="reset" />
</form>

Cart items display

Now to display all of the items that are in the cart session and the MySQL database.

// First check if the session is set
is(isset($_SESSION['shoppingcart']) && count($_SESSION['shoppingcart'])) {
  $list = $_SESSION['shoppingcart'];

  foreach($list as $item) {
    $id = $item['id'];

    // The MySQL database query for the items in the cart.
    $query  = "SELECT * FROM products WHERE id='$id'";
    // The connection variable is taken from the top of the page when we connected to the MySQL database
    $result = mysqli_query($connection, $query);

    // If only on item in the database has this id then proceed
    if(mysqli_num_rows($result) == 1) {
      $row = mysqli_fetch_array($result);

      $id = $row['id'];
      $name = $row['name'];
      $price = $row['price'];
      $quantity = $item['quantity'];

      // Now let's print out this item to HTML

      print(
        "<div class='product-card'>
          <a href='product-detail.php?id=$id'>
            <h3>$name</h3>
            <h4>$$price CAD</h4>
            <h4>Quantity: $quantity</h4>
          </a>
        </div>");
    }
  }
} else {
  print("<h2>You don't have any items in your shopping cart.</h2>");
}

How to make a parallax effect with Rellax.JS

Brett Anda 🔥🧠 — Mon, 06 Apr 2020 06:00:00 +0000

Rellax is a lightweight library made exactly for parallax effects. This JavaScript library makes it very easy to make a parallax effect so that you don't have to go through the trouble of making it your self.

Installation

This is by far the most important step. If this is not added then anything will work because it was not installed :)

npm install rellax
#of
yarn add rellax

Importing

Just like other JavaScript libraries, you will need to import the script into your

import Rellax from "rellax";

After you have imported the library you will want to set a variable for it to set the settings later on. The only variable you need to set when making this is the class that Rellax.js will look for to apply the parallax.

var rellax = new Rellax(".rellax");

JavaScript config

To change the settings for Rellax.js you will need to replace the variable definition with the below code. This sets the defaults for every parallax element.

var rellax = new Rellax(".rellax", {
    speed: -2,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
});

Adding the effect

Now let's say that you have an image that you would like to apply the parallax to and the HTML looks something like this:

<img src="cool-parallax-image.jpeg" alt="" />

To let Rellax.js know that you want to add the parallax to this element we will add the class from before to this element, like so:

<img src="cool-parallax-image.jpeg" class="rellax" alt="" />

Parallax speed

Just adding the class will set the default parallax speed for the element. If you want to increase or decrease the speed of the parallax then you can add this data-rellax-speed attribute to that element as well as the class. The minimum value is -10 and the maximum value is 10.

<img src="cool-parallax-image.jpeg" class="rellax" data-rellax-speed="-7" alt="" />

If you would like to learn more about what Rellax.js can do check out there Github documentation.

Making a Vuejs dark theme toggle

Brett Anda 🔥🧠 — Tue, 24 Mar 2020 19:30:00 +0000

Making a dark theme with CSS variables and @media

If you haven't read my previous article on making a dark theme with CSS variables. Check it out before reading this because this is a continuation of that article.

The first called script

This script should be called as soon as possible so that the proper CSS can be applied to the document. If you are using Gridsome, you can add this script to your index.html file. This code checks for what the color them of the device is then set a local storage variable and a data attribute to the theme name. For example, if the devices color scheme was set for 'dark mode' the local storage variable and data attribute would be set to dark.

Setting a data attribute makes it possible to change the CSS based on the color scheme.

(function() {
    try {
        // Checks for the color scheme of the device.
        // In this case it checks for anything that is not light theme.
        var media = window.matchMedia("not all and (prefers-color-scheme: light)"),
            body = document.body;
        if (localStorage.getItem("theme") == "dark") {
            body.setAttribute("data-theme", "dark");
        } else if (localStorage.getItem("theme") == "light") {
            body.setAttribute("data-theme", "light");
        } else if (media.matches) {
            body.setAttribute("data-theme", "dark");
            localStorage.setItem("theme", "dark");
        }
        media.addListener(function() {
            if (media.matches) {
                body.setAttribute("data-theme", "dark");
                localStorage.setItem("theme", "dark");
            } else {
                body.setAttribute("data-theme", "light");
                localStorage.setItem("theme", "light");
            }
        });
    } catch (err) {}
})();

Theme Toggle Component

In the navigation, I have made a button component to toggle the theme. This is the HTML for that component.

<template>
    <button
        :title="theme == 'dark' ? 'Dark Theme' : 'Light Theme'"
        @click="toggleTheme()"
        class="theme"
    >
        <Moon :is="theme == 'dark' ? 'Moon' : 'Sun'" height="20px" />
    </button>
</template>

<script>
    import Moon from "~/assets/images/moon-regular.svg";
    import Sun from "~/assets/images/sun-regular.svg";

    export default {
        components: {
            Moon,
            Sun
        },
        data() {
            return {
                theme: localStorage.getItem("theme")
            };
        },
        methods: {
            toggleTheme() {
                if (this.theme == "dark") {
                    this.theme = "light";
                    document.body.setAttribute("data-theme", "light");
                    localStorage.setItem("theme", "light");
                } else {
                    this.theme = "dark";
                    document.body.setAttribute("data-theme", "dark");
                    localStorage.setItem("theme", "dark");
                }
            }
        }
    };
</script>

If you would like to see this code in action check out the navigation on Developer Bacon.

How to make a html search datalist for Vue

Brett Anda 🔥🧠 — Tue, 17 Mar 2020 20:00:00 +0000

What do I mean by search suggestions

An example where I have use a datalist is on the search page. Another axample of this in action would look like this:

See the Pen HTML Search with datalists by Brett
(@brettanda) on CodePen.

Adding the datalist to an input

To add a datalist to a text input you will need to add list="id" to your text input. For this, to work the list attribute needs to be set to the id of the datalist element.

<input type="search" placeholder="Search" list="data" />

Creating the datalist element

The datalist element is like the select element.

<datalist id="data">
    <option value="HTML" />
    <option value="CSS" />
    <option value="JavaScript" />
</datalist>

Implementing Vue

let us say you have a search form component using the above datalist and search input.

<form>
    <input type="search" placeholder="Search" list="data" />

    <datalist id="data">
        <option value="HTML" />
        <option value="CSS" />
        <option value="JavaScript" />
    </datalist>
</form>

Let's say that you have an array of search values that you would like to display in this datalist, for example, this array:

export default {
    data() {
        return {
            list: ["HTML", "CSS", "JavaScript"]
        };
    }
};

<form>
    <input type="search" placeholder="Search" list="data" />

    <datalist id="data">
        <option v-for="item in list" :key="item" :value="item" />
    </datalist>
</form>

Adding Gridsome

So you are using Gridsome (like me). Let's say that you would like your posts titles to show in this data list, You will need a page-query and use that instead of the data array.

<page-query>
query Search {
  allPost {
    edges {
      node {
        title
      }
    }
  }
}
</page-query>

Now for the new datalist.

<form>
    <input type="search" placeholder="Search" list="data" />

    <datalist id="data">
        <option v-for="{ item } in $page.allPost.edges" :key="node.title" :value="node.title" />
    </datalist>
</form>

How to animate CSS and SVG's with AnimeJS

Brett Anda 🔥🧠 — Thu, 12 Mar 2020 04:16:30 +0000

Installation

Before we get into the animating we should install Animejs.

npm install animejs
#or
yarn add animejs

Now to import Animejs into your JavaScript file.

import anime from "animejs";

Constructor and target setting

To start any animation with AnimeJS you will need a constructor like the following. The targets is the selector for the element(s) that you would like to target.

anime({
    targets: "ul > li"
});

Basics to animating

Duration

Adding duration to your animation will set how long the animation will play. The value for the duration is in milliseconds.

anime({
    targets: "ul > li",
    duration: 1000 // 1 second
});

Direction

You can choose the direction of the animation with the below code. The options for directions you can pick from are normal, reverse, alternate. If you choose not to set a value for direction then normal is the default direction.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal"
});

Easing

You can also add easing to your animation. There are a bunch of different values to set for easing that can be found at animejs.com/documentation/#linearEasing. My favorite value is easeInOutSine because it performs like ease-in-out from CSS animations and works well (for me) on just about every animation I create.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal",
    easing: "easeInOutSine"
});

Staggering and Delays

In my opinion, staggering is the coolest feature because it allows you to set one animation after (or during) another, meaning you can make nice wave effects with your animations. The documentation for staggering can be found at animejs.com/documentation/#staggeringBasics. If you have several elements selected for an animation then the code below sets a 100-millisecond delay between each elements' starting animation.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal",
    easing: "easeInOutSine",
    delay: anime.stagger(100)
});

To set a normal delay you will set the delay value to your delay in milliseconds like below. Instead of this code setting a delay between each element, this sets the delay for the entire animation. This example, when called, will wait 100ms then start animating.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal",
    easing: "easeInOutSine",
    delay: 100
});

CSS Transform

To add a transform to your animation it's just like CSS transforms but you can skip the transform and go straight to translate, rotate, or skewing. What I mean by this is that in CSS you would set a translate of -1rem on the x-axis like transform: translateX(-1rem); and with AnimeJS you would do the same like this example.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal",
    easing: "easeInOutSine",
    delay: 100,
    translateX: "1rem"
});

To and from values

If you want to start an animation in a different position than you have set with HTML and CSS then you can set an array of the values. You can add as many values as you would like in the arrays.

anime({
    targets: "ul > li",
    duration: 1000,
    direction: "normal",
    easing: "easeInOutSine",
    delay: 100,
    translateX: ["-1rem", 0]
});

I have made a Codepen using AnimeJS and the examples from above.

See the Pen Animejs with a list by Brett
(@brettanda) on CodePen.

Animating SVG's

Now for the fun SVG animations!

Line Drawing

If you want to make an SVG that draws itself from nothing then you will like this feature. To add line drawing you will need an element like the path in the SVG because it works with stroke-dasharray and stroke-dashoffset.

anime({
    targets: ".cool-svg path",
    duration: 1000,
    easing: "easeInOutSine",
    strokeDashoffset: [anime.setDashoffset, 0]
});

Morphing

If you want an SVG to transform into a different shape then this is the feature for you! You can add morphing to any SVG element with a path set like the d attribute in the path element. In the below example you can change the d for whatever sets the elements path, for example with the polygon element you would change it to points.

anime({
    targets: ".cool-svg path",
    duration: 1000,
    easing: "easeInOutSine",
    d: [
        {
            value:
                "M53,234c143.452,-81.953,313.407,-167.554,430,-107c116.592,45.554,70.404,361.126,236,472c235.595,95.873,447.977,-197.535,477,-306"
        },
        {
            value:
                "M53,434c143.452,181.953,213.407,267.554,330,107c56.592,-125.554,70.404,-161.126,236,-172c235.595,-55.873,447.977,-197.535,500,206"
        }
    ]
});

Below is another Codepen example of both morphing and drawing (although a bit of a messy animation it gets the point across).

See the Pen SVG Animating by Brett
(@brettanda) on CodePen.

Conclusion

This article just went through a few of the features of AnimeJS if you would like to see what else it can do check out the full documentation.

The top 8 npm packages I use for every project

Brett Anda 🔥🧠 — Fri, 06 Mar 2020 23:30:00 +0000

Animejs

Animejs is a great JavaScript animation library that I use for just about every animation that can't be done quickly with CSS animations. This library is great for so many different kinds of animations including CSS animations and transitions, JavaScript style animations, SVG morphing animations, and more.

This package is also available with npm and can be installed like this:

npm install animejs
#or
yarn add animejs

After installing the package you can import it into your JS files with this import, and follow the Documentation for how to make amazing animations.

import anime from "animejs";

Normalize.css

Normalize.css is just a CSS file that you include in your project to 'reset' the CSS of the browser so that your code works better across as many browsers and devices as possible.

npm install normalize.css
#or
yarn add normalize.css

To include this package in your project you can add it to your main CSS or SCSS/SASS file.

// This @import will change depending on where your main CSS is located.
@import "../../../node_modules/normalize.css/normalize.css";

If anyone knows a better way to get to the root directory then node_modules please let me know in the comments.

Prettier

If you haven't already started using Prettier then you need to right now. Prettier takes care of formatting your code to your preferences so you can make typos and mistakes without needing to fix them later.

Prettier can be set up in many different ways like formatting on file save and formatting on git commit, which is exactly what pretty-quick and Husky can do.

Pretty-quick and Husky

Pretty-quick is just Prettier but can be run as a hook when committing your changes. Husky is a package that runs code hooks from the package.json file.

npm install pretty-quick husky
#or
yarn add pretty-quick husky

Then add this to your package.json file.

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}

If you select a few lines of code the put into staging then just commit those few lines of code and you receive an error from prettier. I find that if you just ignore it and commit again it will work.

Browser sync

Browser sync is great for the development of a website because it lets you view a live version of the site and reloads the page when something in the code changes. It is also great for testing your site on different devices.

npm install -g browser-sync
#or
yarn global add browser-sync

For static sites, you can run a variation of this command.

browser-sync start --server --files "css/*.css"

And for dynamic sites running on a local server, you will have to run a variation of this command. For this command to work you will have to have already set up something like a Vagrant or Docker image.

browser-sync start --proxy "yourproject.dev" --files "css/*.css"

Eslinter

Eslint checks your JavaScript files against a set of rules that you can modify and tells you if your code is broken or missing anything that will break later. This includes things like missing semicolons and proper spacing.

There are too many different ways to set Eslinter up depending on your dev server, but if you are looking to add this to your Gridsome project check out the Documentation here.

Stylelint

Stylelint is the same as Eslint but for your stylesheets. This check to make sure you are spacing elements correctly and not missing semicolons.

There is no current way to add this to Gridsome.

How to remove a link from Google search

Brett Anda 🔥🧠 — Thu, 05 Mar 2020 07:00:00 +0000

Disclaimer: You have to own the domain of the URL that you would like to remove from Google.

Google Search Console

Before beginning this tutorial you will need to set up your Google Search Console account with the domain property that has the link you would like to remove.

Step 1: Select your domain property

Once you have an account setup you can select your domain property. This has to be the same domain from the URL you wish to remove from Google Search.

Step 2: Goto Index then Removals

Once you have selected your domain on the left sidebar under Index select removals, and you will see where the list of links.

Step 3: Click new request and enter the URL

To finish this off just hit New Request and enter the link you would like to remove in the input field and hit next.

Step 4: Now to play the waiting game

After you have submitted the link you would like to remove, I've seen it take anywhere from 10 minutes to a few hours for the link to be removed from Google Search results.

Adding a route loading bar to Vue and Gridsome

Brett Anda 🔥🧠 — Mon, 02 Mar 2020 03:00:00 +0000

Dependency Installation

For this tutorial, I have decided to use NProgress for the loading indicator. You can check the demo page at ricostacruz.com/nprogress.

To start this tutorial you will need to install NProgress.

npm install nprogress
#or
yarn add nprogress

Importing the files

once the installation is complete we can move on adding the code the main.js file. If you don't already have one it should be located in src/main.js. To start using NProgress we will have to import the JavaScript and CSS.

import NProgress from "nprogress";
import "nprogress/nprogress.css";

If you a SCSS file that you would rather import the CSS there you will need something like this. This import will look different depending on your setup and where your SCSS file is located.

@import "../../../node_modules/nprogress/nprogress.css";

Now for the actual code

Your main.js files should look something like this. Note that the function is grabbing the router object. I added the typeof document !== "undefined" to the if statement because of an error I received during build.

export default function(Vue, { router }) {
    router.beforeEach((to, from, next) => {
        if (!to.hash && typeof document !== "undefined") {
            NProgress.start();
        }
        next();
    });

    router.afterEach((to, from) => {
        if (!to.hash && typeof document !== "undefined") {
            NProgress.done();
        }
    });
}

If you are not using Gridsome this is the documentation for router gaurds for Vue and your main Javascript file where your router is defined should look something like this:

const router = new VueRouter({ ... });

router.beforeEach((to, from, next) => {
  if (!to.hash) {
    NProgress.start();
  }
  next();
});

router.afterEach((to, from) => {
  if(!to.hash) {
    NProgress.done();
  }
});

Something you may not know about console log in JavaScript

Brett Anda 🔥🧠 — Sat, 29 Feb 2020 08:00:00 +0000

The normal stuff

The basics for the console.log() in JavaScript is just this:

console.log("Hello World!");

Adding styles

But did you know that you can stylize the text you are logging? To add styles to the text you just need to add %c to the beginning of the text that you want to style. For an example of this in action, this is the welcome message for Developer Bacon.

console.log(
    "%cWelcome to the console of developer bacon",
    "color:pink;text-transform:uppercase;font-weight:bold;"
);

Adding more styles

To add more styles to other text in the same console log you need to add the %c just before the second group of text. You can add as many of these indicators as you want you just need to add a new style group for each text group. Here is an example of multiple styling groups in action.

console.log(
    "%cThis text will be bold. %cThis text will be red. %c This text will be small",
    "font-weight:bold;",
    "color:red;",
    "font-size:8pt"
);

Originally posted on developerbacon.ca

Making a simple author byline for your website

Brett Anda 🔥🧠 — Tue, 25 Feb 2020 09:00:00 +0000

Why would you want an author byline on your website

The main reason you would want to add an author byline to your site is to give credit where credit is due, and by this, I mean giving information about the author of the post or article.

The HTML for this author byline example contains a rel="author" attribute to help with the SEO of the page.

HTML

<div class="author">
    <img
        class="author__item author__pic"
        src="https://en.gravatar.com/userimage/137371786/7395c6c605915c6315f96d8cd8f6ada9.jpg?size=200"
        alt="my face"
    />
    <div class="author__item author__name">
        <span><b class="author__heading">Author:</b></span
        ><br />
        <span
            ><a class="author__link" rel="author" href="//brettanda.ca" target="_blank"
                >Brett Anda</a
            ></span
        >
    </div>
    <div class="author__item author__date">
        <span><b class="author__heading">Date Posted:</b></span
        ><br />
        <span>Today</span>
    </div>
</div>

SCSS

.author {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;

    @media all and (max-width: 600px) {
        flex-flow: column nowrap;
        text-align: center;
    }
}

.author__item {
    flex: 0 1 8rem;
    margin: 1rem;

    @media all and (max-width: 600px) {
        flex: 1 1 3rem;
        margin: 0.5rem;
    }
}

.author__pic {
    flex-shrink: 0;
    flex-basis: 8rem;
    object-fit: cover;
    object-position: center;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    padding: 0.3rem;
    border: 2px solid rgba(0, 0, 0, 0.5);
}

.author__heading {
    font-size: 90%;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.author__link {
    text-decoration: none;
    color: blue;

    &:hover,
    &:focus {
        text-decoration: underline;
    }
}

There is no javascript needed for this example

Codepen example

If you want to see this in example in action here is a Codepen I made for it.

See the Pen Author byline example by Brett
(@brettanda) on CodePen.