Developer Bacon Articles

Getting started with Glitch

Sat, 09 May 2020 07:00:00 GMT

[Glitch.com](https://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. ```json { "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 ```json { "engines": { "node": ">=12.x" } } ``` Here is an example of what your package.json file should look like for your Glitch project. ```json { "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 formatting 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

Fri, 24 Apr 2020 12:00:00 GMT

So you want to make a cool line drawing animation. Well, you have come to the right, and may be the 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: ```js 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. ```js 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 to not calculate those positions before every line is drawn. ```js // The line width for every line lineWidth = 5; // 5px function lines() { let valuesT = [], valuesB = []; } ``` Now that we have arrays for the top and bottom lines 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. ```js 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. ```js 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. ```js 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. ```js 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

Wed, 08 Apr 2020 01:00:00 GMT

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 shows an 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. ```php print(" "); ``` ## 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](https://www.php.net/manual/en/book.session.php) with the [session start](https://www.php.net/manual/en/function.session-start.php) function. ```php session_start(); ``` Connecting to your MySQL database should look something like this. ```php $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. ```php // Check if the add to cart button was clicked or if 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']) && isset($_GET['id'])) { $id = $_GET['id']; // 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 a 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. ```php 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. ```html ``` ### Cart items display Now to display all of the items that are in the cart session and the MySQL database. ```php // First check if the session is set is(isset($_SESSION['shoppingcart']) && count($_SESSION['shoppingcart']) != 0) { $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 one 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( "

$name

$$price CAD

Quantity: $quantity

"); } } } else { print("

You don't have any items in your shopping cart.

"); } ```

How to make a parallax effect with Rellax.JS

Mon, 06 Apr 2020 00:00:00 GMT

[Rellax](https://dixonandmoe.com/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 :) ```bash npm install rellax #of yarn add rellax ``` ## Importing Just like other JavaScript libraries, you will need to import the script into your ```js 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. ```js 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. ```js 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: ```html ``` 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: ```html ``` ## 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. ```html ``` If you would like to learn more about what Rellax.js can do check out there [Github documentation](https://github.com/dixonandmoe/rellax).

Making a Vuejs dark theme toggle

Tue, 24 Mar 2020 13:30:00 GMT

## 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](https://developerbacon.ca/articles/adding-a-dark-theme-to-your-website/). 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 the color of the device and then set a local storage variable and a data attribute to the theme name. For example, if the device's color scheme was set to '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. ```javascript (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. ```html ``` If you would like to see this code in action check out the navigation on [Developer Bacon](https://developerbacon.ca).

How to make a html search datalist for Vue

Tue, 17 Mar 2020 14:00:00 GMT

## What do I mean by search suggestions An example where I have to use a datalist is on the [search page](https://developerbacon.ca/search/). Another example 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. ```html ``` ## Creating the datalist element The datalist element is like the select element. ```html ``` ## Implementing Vue let us say you have a search form component using the above datalist and search input. ```html ``` Let's say that you have an array of search values that you would like to display in this datalist, for example, this array: ```js export default { data() { return { list: ["HTML", "CSS", "JavaScript"] }; } }; ``` ```html ``` ## Adding Gridsome So you are using Gridsome (like me). Let's say that you would like your post titles to show in this data list, you will need a `page-query` and use that instead of the data array. ```graphql query Search { allPost { edges { node { title } } } } ``` Now for the new datalist. ```html ```

How to animate CSS and SVG's with Anime.JS

Wed, 11 Mar 2020 21:30:00 GMT

## Installation Before we get into the animating we should install Animejs. ```bash npm install animejs #or yarn add animejs ``` Now import Animejs into your JavaScript file. ```js 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. ```js 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. ```js 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`, and `alternate`. If you choose not to set a value for direction then normal is the default direction. ```js 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](https://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. ```js 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](https://animejs.com/documentation/#staggeringBasics). If you have several elements selected for an animation then the code below sets a 100-millisecond delay between each element's starting animation. ```js 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 and then start animating. ```js 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. ```js 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 values. You can add as many values as you would like in the arrays. ```js 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`. ```js 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`. ```js 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](https://animejs.com/documentation/).

The top 8 npm packages I use for every project

Fri, 06 Mar 2020 16:30:00 GMT

## Anime.js [Anime.js](https://animejs.com) is a great JavaScript animation library that I use for just about every animation that can't be done quickly with CSS animations. It's also a super lightweight package. 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: ```bash 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](https://animejs.com/documentation/) for how to make amazing animations. ```js import anime from "animejs"; ``` If you would like to learn more about this package and how to use it I have written another article on the [basics of animating with AnimeJS](/articles/how-to-animate-css-and-svg-s-with-anime-js/) ## Normalize.css [Normalize.css](https://necolas.github.io/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. ```bash 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. ```scss // 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 of node_modules please let me know in the comments. ## Prettier If you haven't already started using [Prettier](https://prettier.io/) 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](https://www.npmjs.com/package/pretty-quick) is just Prettier but can be run as a hook when committing your changes. [Husky](https://www.npmjs.com/package/husky) is a package that runs code hooks from the `package.json` file. ```bash npm install pretty-quick husky #or yarn add pretty-quick husky ``` If you want to add this to your project just add this to your `package.json` file. ```json "husky": { "hooks": { "pre-commit": "pretty-quick --staged" } } ``` ### 'Git: husky > pre-commit (node v13.0.1)' error If you are using Visual Studio Code and 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 click `cancel` then try to commit again it will work. I'm not sure why this happens but if you know, send me a message. ## Browser sync [Browser sync](https://browsersync.io/) 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. ```bash npm install -g browser-sync #or yarn global add browser-sync ``` For static sites, you can run a variation of this command. ```bash 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. ```bash browser-sync start --proxy "yourproject.dev" --files "css/*.css" ``` ## Eslinter [Eslint](https://eslint.org/) 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](https://gridsome.org/docs/dev-tools/#eslint-plugin) here. ## Stylelint [Stylelint](https://stylelint.io/) 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

Thu, 05 Mar 2020 00:00:00 GMT

> **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](https://search.google.com/search-console/about) 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. ![The list of domain properties from Google Search Console of Developer Bacon](../assets/images/remove-link-from-google--domains.jpeg) ## 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. ![The top section of the navigation menu from Google Search Console](../assets/images/remove-link-from-google--menu.jpeg) ## 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. ![The form to remove a link from Google Search results](../assets/images/remove-link-from-google--enter-link.jpeg) ## 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

Sun, 01 Mar 2020 20:00:00 GMT

## 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](https://ricostacruz.com/nprogress/). To start this tutorial you will need to install NProgress. ```bash npm install nprogress #or yarn add nprogress ``` ## Importing the files once the installation is complete we can move on to adding the code to 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. ```js import NProgress from "nprogress"; import "nprogress/nprogress.css"; ``` If you have an 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. ```scss @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 a build. ```js 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](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) for Vue and your main Javascript file where your router is defined should look something like this: ```js 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

Sat, 29 Feb 2020 01:00:00 GMT

## The normal stuff The basics for the `console.log()` in JavaScript is just this: ```js 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. ```js 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. ```js 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" ); ```

Making a simple author byline for your website

Tue, 25 Feb 2020 02:00:00 GMT

## 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 ```html

Author:
Brett Anda

Date Posted:
Today

``` ## SCSS ```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 example in action here is a Codepen I made for it. See the Pen Author byline example by Brett (@brettanda) on CodePen.

Getting started with Markdown (Cheatsheet)

Wed, 19 Feb 2020 11:20:00 GMT

> This article assumes that you don't know anything or very little about the Markdown language, or if you have just come to find out what you might have missed. ## Why use Markdown Before we get into things let's talk about why you would want to use Markdown in the first place. - A great reason for using markdown is that it's everywhere. Some examples of websites that use Markdown are Reddit, Github, Medium, Dev.to, etc... You can also use it for many things outside of the web like for documents, books, presentations, and emails. - Because markdown is simple and easy to read it is future-proof. If a website or service stops supporting Markdown you still have the formatted file. ## The basics These tags are probably what you will be using for the most part and will be important to remember. ### Headings Let's start at the beginning. To make a header or heading you add a `#` to the beginning of the line. One `#` is equivalent to an `

` in HTML. To move down the line of headings you just add more `#`'s like so. ```markdown # Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 ``` ### Paragraphs Adding paragraphs is super simple. It is the default for writing with markdown. The only thing you need to do to write a paragraph is that you have nothing in front of your text. ```markdown # Heading 1 I am a paragraph, I have nothing to identify anything else so I will default to a paragraph. I am another paragraph. ``` ### Adding Links While using Markdown you may wish to add a link to some websites, like Developer Bacon ;). To add a link you just need `[]()`. In the first square brackets, you will add the link text that shows on the websites, and for the round brackets that is where you add the link. ```markdown I am a paragraph, here is my text. [I am a link](http://example.com) ``` Result: I am a paragraph, here is my text. [I am a link](http://example.com) For adding links you can also add the link directly like this: ```markdown I am a paragraph, here is my text. http://example.com ``` ### Shopping Lists So make a list is as simple as adding a `-` or `1.` in front of some text. To make an ordered list you will just number the text like the one below. ```markdown # Todo 1. Make some Bacon 2. Laundry 3. Vacuum the house 4. Take the dog for a walk ``` Result: 1. Make some Bacon 2. Laundry 3. Vacuum the house 4. Take the dog for a walk To make an unordered list you do the same thing just replace the numbers with a `-` or `+`. ```markdown # Shopping List - Eggs - Milk - Ham * Eggs * Milk * Ham ``` Result: - Eggs - Milk - Ham * Eggs * Milk * Ham ### Block Quotes To add a blockquote you just need to add `>` to the front of the text. ```markdown > this is a blockquote ``` Result: > this is a blockquote ### Italics Bold and Strikethrough You can also make Italic's, Bold text, and Strikethroughs, just like these: ```markdown _This is italicized_ _This is italicized_ This is bold This is bold This is a strikethrough ``` Result: _This is italicized_ _This is italicized_ This is bold This is bold This is a strikethrough ## The cool and extra tags These tags are still very useful, but might not be as common as the above tags (depending on where you are looking). ### Code This one is a little different because you have to specify the start and end of the code block. For both the beginning and end of a code block you will just need to place ` ``` `. With these blocks, you can also specify the coding language. To do so just add the language title right after the first ` ``` `. A great list of how languages should be entered in for the title and a great code block color/pretifier is [prismjs.com/#supported-languages](https://prismjs.com/#supported-languages). ```html

Heading 1

I am a paragraph

``` You can also make a code block with a tab space containing the code block. As far as I know, there is no way to specify what language you're using with this method. ```markdown

Heading 1

I am a paragraph

``` Result:

Heading 1

I am a paragraph

One use I have found for this method is within markdown if you want to display the backticks and language along with the block without compiling that into HTML, that's how I am displaying the example above. ````markdown ```html This is some code. ``` ```` Result: ```html This is some code. ``` #### Inline Code If you want to add a code block inline with a paragraph it's as simple as adding backticks around some text like this: ```markdown This is some text about a `

` tag. ``` Result: This is some text about a `

` tag. Because I am considering this article a cheat sheet for markdown I will update it if I find more features in markdown.

Getting started with CSS animations

Tue, 04 Feb 2020 17:30:00 GMT

## How to use CSS Transitions So you want to learn more about CSS animations. CSS animations a great and simple once you get to know them. For this example let's use a button. When a cursor hovers over this button we will change the color of the background for 0.3 seconds. The basics for CSS animations is that the element starts with the starting position like `background-color: transparent;`, then on a hover event or any other CSS event changes to the end position like `background-color: red;`. To do this you need to set a transition with the animation duration. The best way to set transitions is by adding them to the starting position element like this. ```css .button { transition: background-color 0.3s ease; } ``` A good template for transitions would look like this. The style can be anything like `height`, `background-color`, `color`, `margin`, `padding`, or if you want this transition to apply to everything then set it as `all`. Examples of the transition type would be `ease`, `ease-in-out`, `ease-in`. ```css .element { transition: [style] [duration in seconds]s [transition type]; } ``` With transitions, you can also add more than one different transition on the same element. For example, if you wanted a button background to take 0.3 seconds long and the border-color to take 0.4 seconds for the transition. The full CSS for this demo button would look like this. ```css .button { background-color: transparent; border: 1px solid black; border-radius: 5px; margin: 1rem; padding: 1rem; transition: background-color 0.3s ease, border-color 0.3s ease-in; } .button:hover. .button:focus { cursor: pointer; background-color: red; border-color: red; } ``` If you are using SCSS then the code would look like this. ```scss .button { background-color: transparent; border: 1px solid black; border-radius: 5px; margin: 1rem; padding: 1rem; transition: background-color 0.3s ease, border-color 0.3s ease-in; &:hover, &:focus { cursor: pointer; background-color: red; border-color: red; } } ``` If you want to see this code in action, here is a Codepen for the code above. See the Pen CSS animations example by Brett (@brettanda) on CodePen. ## How to use CSS Keyframes CSS keyframes can be used for more complex animations that can't be done with a simple transition. With CSS keyframes you can have many things about an element change at different times throughout the animation. Let's get right into the `@keyframes`, there are two ways to set the progression of keyframes. One is with **from** and **to** where the animation starts **from** and ends at **to**. The other method is using percentages, where **0%** is the starting style and **100%** is the end style. Here is an example of both of these methods. ```css @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-in { 0% { opacity: 0; transform: translateX(1rem); } 50% { opacity: 1; } 100% { transform: translateX(0); } } ``` If you would like to set one movement for 40% at the start of an animation, you would do that like this. ```css @keyframes fade-in { 0%, 25%, 40% { opacity: 0; } , 100% { opacity: 1; } } ``` With CSS animations you have to specify a few things for the element getting the animation before a `@keyframes` will work. The minimum for setting a keyframe is adding the name of the keyframe and the duration. You can also choose the iteration count and direction of the animation. Using the `fade-in` keyframe from above is an example of setting the keyframe. ```css p { animation-name: fade-in; animation-duration: 0.5s; animation-iteration-count: infinite; animation-direction: alternate; } ``` See the Pen CSS Keyframes example by Brett (@brettanda) on CodePen.

How to make a sliding navigation menu

Sat, 01 Feb 2020 23:00:00 GMT

This tutorial is about making the navigation menu from Developer Bacon. This article is aimed at people that don't know Vue.js and has been stripped out of this tutorial. There is the use of SCSS but there will be examples with both SCSS and the compiled CSS. The JavaScript for this tutorial uses the library [AnimeJs](https://animejs.com/). If you want to just look at the code you can find it in the Codepen example below or continue this article for the examples. See the Pen Sliding Navigation from Developer Bacon by Brett (@brettanda) on CodePen. ## The HTML Let's get started with the HTML for the navigation menu. The HTML example has all the necessary tags necessary for both the CSS and Js script to look the same as Developer Bacon. These can, of course, be changed to whatever you like (just make sure that you change it both in the CSS file and the JS file). ```html ``` ## The SCSS and CSS This first example is the SCSS for the navigation menu. If you are not familiar with SCSS the second example is the compiled SCSS to CSS. ```scss // Based on this [snippet](https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/) by Hugo Giraudel. @mixin break($point) { @if map-has-key($breakpoints, $point) { @media screen and (max-width: map-get($breakpoints, $point)) { @content; } } @else { @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. ' + 'Available breakpoints are: #{map-keys($breakpoints)}.'; } } $breakpoints: ( "sm": 800px, "md": 1000px ) !default; .header, .header * { box-sizing: border-box; } body { background-color: black; } nav[role="navigation"] { text-align: center; a { display: inline-block; margin: 1em 0.75em 2em; } } .header { background-color: red; display: flex; justify-content: space-between; margin-bottom: 20px; padding: 1rem; box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); } img.logo-link { height: 1rem; width: auto; } .logo-link, .nav__link { text-decoration: none; text-transform: uppercase; letter-spacing: 1px; color: black; transition: color 0.3s ease; &:hover, &:focus { text-decoration: none; color: white; } } .nav__link { margin-left: 20px; display: inline; @include break(md) { padding: 0.75rem; } } .nav-ham, .nav__background { display: none; } .nav-ham { z-index: 2; } @include break(md) { .nav { display: none; &.is-active { display: flex; flex-direction: column; padding: 8rem 2rem 70vh 1rem; justify-content: space-around; text-align: right; position: fixed; background-color: #222; color: white; top: 0; height: 100vh; width: 15rem; z-index: 5; box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); a { color: white; border-color: white; } } } .nav__background-1, .nav__background-2 { &.is-active { display: block; z-index: 3; background-color: gray; box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); top: 0; height: 100vh; width: 18rem; position: fixed; } } .nav-ham { display: block; background: none; border: none; outline: none; height: 3rem; width: 3rem; position: absolute; right: 1rem; top: 0; z-index: 6; .nav-ham__line { border: 1px solid white; height: 0; width: 2rem; display: block; margin: 0.6rem 0 0.6rem auto; transform-origin: center right; transition: 0.3s; } & .is-active { &:first-child { transform-origin: center right; transform: rotate(-45deg); } &:nth-of-type(2) { width: 0; opacity: 0; } &:last-child { transform-origin: center right; transform: rotate(45deg); } } } } .close-nav { display: none; position: fixed; right: -100vw; top: 0; background: rgba(0, 0, 0, 0.7); height: 100vh; width: 100vw; opacity: 0; z-index: 2; @include break(md) { &.is-active { display: block; } } } .logo { vertical-align: bottom; width: 33px; padding: 0 1px; } ``` ### The compiled CSS This is the compiled CSS from the SCSS above. ```css .header, .header * { box-sizing: border-box; } body { background-color: black; } nav[role="navigation"] { text-align: center; } nav[role="navigation"] a { display: inline-block; margin: 1em 0.75em 2em; } .header { background-color: red; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; margin-bottom: 20px; padding: 1rem; box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); } img.logo-link { height: 1rem; width: auto; } .logo-link, .nav__link { text-decoration: none; text-transform: uppercase; letter-spacing: 1px; color: black; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .logo-link:hover, .logo-link:focus, .nav__link:hover, .nav__link:focus { text-decoration: none; color: white; } .nav__link { margin-left: 20px; display: inline; } @media screen and (max-width: 1000px) { .nav__link { padding: 0.75rem; } } .nav-ham, .nav__background { display: none; } .nav-ham { z-index: 2; } @media screen and (max-width: 1000px) { .nav { display: none; } .nav.is-active { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; padding: 8rem 2rem 70vh 1rem; justify-content: space-around; text-align: right; position: fixed; background-color: #222; color: white; top: 0; height: 100vh; width: 15rem; z-index: 5; box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); } .nav.is-active a { color: white; border-color: white; } .nav__background-1.is-active, .nav__background-2.is-active { display: block; z-index: 3; background-color: gray; box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); top: 0; height: 100vh; width: 18rem; position: fixed; } .nav-ham { display: block; background: none; border: none; outline: none; height: 3rem; width: 3rem; position: absolute; right: 1rem; top: 0; z-index: 6; } .nav-ham .nav-ham__line { border: 1px solid white; height: 0; width: 2rem; display: block; margin: 0.6rem 0 0.6rem auto; -webkit-transform-origin: center right; transform-origin: center right; -webkit-transition: 0.3s; transition: 0.3s; } .nav-ham .is-active:first-child { -webkit-transform-origin: center right; transform-origin: center right; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .nav-ham .is-active:nth-of-type(2) { width: 0; opacity: 0; } .nav-ham .is-active:last-child { -webkit-transform-origin: center right; transform-origin: center right; -webkit-transform: rotate(45deg); transform: rotate(45deg); } } .close-nav { display: none; position: fixed; right: -100vw; top: 0; background: rgba(0, 0, 0, 0.7); height: 100vh; width: 100vw; opacity: 0; z-index: 2; } @media screen and (max-width: 1000px) { .close-nav.is-active { display: block; } } .logo { vertical-align: bottom; width: 33px; padding: 0 1px; } ``` ## The magic JavaScript Before we get into the Javascript of this project we should add AnimeJs to the project. To do this use this command in your project directory. ```bash yarn add animejs ``` I used AnimeJs because it is great for handling animations with Javascript. The AnimeJs documentation can be found at [animejs.com](https://animejs.com). ```javascript document.querySelectorAll(".toggleNav").forEach(item => { item.addEventListener("click", function() { console.log("clicked"); toggleNav(); }); }); function closeNav() { document.querySelectorAll(".nav-ham, .nav-ham span").forEach(function(item) { item.classList.remove("is-active"); }); anime({ targets: ".nav", duration: 400, easing: "easeInOutSine", right: [0, "-15rem"], complete: function() { document.querySelector(".nav").classList.remove("is-active"); } }); anime({ targets: ".nav__background", delay: 150, duration: 400, easing: "easeInOutSine", right: ["0rem", "-18rem"], complete: function() { document.querySelectorAll(".nav__background").forEach(item => { item.classList.remove("is-active"); }); } }); anime({ targets: ".close-nav", delay: 150, duration: 400, easing: "easeInOutSine", right: [0, "-100vw"], opacity: 0, complete: function() { document.querySelector(".close-nav").classList.remove("is-active"); } }); } function toggleNav() { document.querySelectorAll(".nav-ham, .nav-ham span").forEach(item => { if (item.classList.contains("is-active")) { item.classList.remove("is-active"); } else { item.classList.add("is-active"); } }); if (document.querySelector(".nav").classList.contains("is-active")) { this.closeNav(); } else { anime({ targets: ".close-nav", duration: 400, easing: "easeInOutSine", right: ["-100vw", 0], opacity: 1, begin: function() { document.querySelector(".close-nav").classList.add("is-active"); } }); anime({ targets: ".nav:not(.is-active)", duration: 400, delay: 150, easing: "easeInOutSine", right: ["-15rem", 0], begin: function() { document.querySelector(".nav").classList.add("is-active"); } }); anime({ targets: ".nav__background:not(.is-active)", duration: 400, easing: "easeInOutSine", // right: ['-100vw',"-20vw"], right: ["-18rem", "0rem"], begin: function() { document.querySelectorAll(".nav__background").forEach(function(item) { item.classList.add("is-active"); }); } }); } } ```

How to use webp images effectively

Sat, 25 Jan 2020 16:00:00 GMT

Webp images are great for everyone because they have many things going for them. They are new(ish) to the web which means they aren't accepted everywhere (yet). Two of the best things about them are that they compress like JPG images to very small file sizes, and they support transparency like PNG images. ## The picture element When adding these to your website you can just put them in an image tag and be done. Doing so will leave out older browsers and/or devices that just don't support Webp images yet. ```html ``` ## Backup images While this does work for browsers that support the Webp file type the image won't display on browsers that don't support the file. The best way to add Webp images to your site would be a `` element. The way the picture element works is by loading the first file type that can be loaded by the browser. Within the picture element, you will need `` elements. The source elements are where you add the `src` attribute to the different file types. The first source element in the parent picture element is the first to be loaded if the file type is supported. The first source element is where you want to put the source for the Webp file that you want to add. You will also want to add a type attribute to tell the browser what file type the file is. ```html ``` ## Un-supported picture tag Adding the above to your website won't work just yet because the picture element requires a backup `img` within the picture element. This is for browsers that don't support the picture element yet. This img element is also where you will add all your SEO-related attributes, including the alt attribute. ```html ``` The img element added in the picture element should not be a webp image because if the browser is too old for the picture element then it is also too old for loading Webp images.

Adding a dark theme to your website

Fri, 27 Dec 2019 00:00:00 GMT

So, you want to add a dark (or light) theme to your website quickly and without destroying the code that you already have. This method works by taking the color theme settings from the device that is browsing your website and sending info to the browser and CSS about those color settings. ## CSS Variables For all of the colors that you would like to change between light and dark modes, you will have to set them as CSS variables. Setting CSS variables looks like this and can be changed for different classes or in this case media queries. ```css body { --background-color: #000; --text-color: #fff; } ``` To call the variable after being set you have to follow the below code. ```css p { color: var(--text-color); } ``` Something that you should also add when calling CSS variables is adding a default fallback color for older browsers that can't handle CSS variables. When setting the fallback make it for the default color scheme if the device can't handle the `@media (prefers-color-scheme: dark) {}` media query. Adding a fallback is as simple as the below. ```css p { color: var(--text-color, #fff); } ``` If you are using SCSS/SASS variables then you need to print the variable like this. ```scss p { color: var(--text-color, #{$white}); } ``` ## Prefers color scheme Media query One of the newer media queries that have been added is the **prefers-color-scheme** media query. This checks for the color theme of the browsing device and can change styles based on that. The media query at its basics is shown below. ```css @media (prefers-color-scheme: dark) { p { color: red; } } ``` The options for the media query are: `dark`, `light`, and `no-preference`. Side note, the light color scheme is the default if the device does not support this media query.

How to setup a favicon

Thu, 07 Nov 2019 00:00:00 GMT

## The short answer The easiest way to set up a favicon (assuming that an image is already made) is by using the following code, and placing it in the `` tag. ```html ``` ## The long answer The simplest and quickest way is listed above, but what if you want to have different sizes of favicons for different devices and browsers? ## PNG Sizes To add different sizes to a favicon link you can add a `sizes` attribute to the link tag. The typical sizes for favicons in most browsers are `16x16`, `32x32` and higher. For some other browsers like Google Tv and Chrome on Android, the recommended sizes are `96x96` and `192x192` respectively. An example of these sizes would look like this. ```html ``` ## ICO file type The primary way to set an icon would be to use a .ico file. While all modern browsers can read the png format, this is primarily used for older versions of IE. You can find plenty of favicon.ico generators online to build a properly formatted ICO file. Using a favicon.ico file would look like this. ```html ``` Browsers will also be able to find the ICO file if it is just left on the root of the site and not declared in a link tag. ## SVG icons A few browsers including Chrome and Firefox recently added support for SVG favicons. If you want to see what browsers support this at the time of reading then check out [caniuse.com/#feat=link-icon-svg](https://caniuse.com/#feat=link-icon-svg). To use this new feature you will need an SVG version of the favicon of your website and add this link to the head of your site. Make sure to include the `sizes="any"` or the browser will download the file even if it can't display this as the favicon. ```html ``` ## CSS color scheme media changing favicons If you are using the `prefers-color-scheme` media query on your website and would like to change the favicon for each theme then all you need is a dark and/or light version of your favicon and a media attribute. ```html ```

Getting started with web development

Mon, 04 Nov 2019 00:00:00 GMT

Getting started with web development can be tricky and hard to get used to if you don't know where to start. When learning about web development there are some very useful tools and software that will give you a kick in the right direction. ## Useful websites for tutorials - [W3Schools](https://www.w3schools.com/) - For tutorials on HTML, CSS, JavaScript and many more. - [CSS-Tricks](https://css-tricks.com) - For community based tutorials and how-to's ## Basic HTML5 starter template This is a template for a basic HTML document. It has a link for a style sheet, favicon, and the theme color meta tag for mobile Chrome users. (If you are using VScode you can type `!` with emmet and you will get this or a template like this) ```html ``` ## The basics of using Cascading Style Sheets CSS stands for Cascading Style Sheets. CSS can be added to the HTML document in 3 different ways. There are **inline** styles which are added directly to the element for example: ```html Contact Me ``` There is also **external** CSS which is the most common and usually the best way to import CSS. The reason this is usually the best way is that it is not part of the original document, so if you have a compiler like Webpack these external CSS files can be minified. This also makes these files easier to cache for browsers. A CSS file will look something like this: ```css html, body { scroll-behavior: smooth; } body { line-height: 1; } .contact-link { color: red; } ``` The final way to add **internal** CSS which is added with the ` Contact Me ``` ## The basics of using JavaScript JavaScript can be used for many things on the web from animations to running an entire website from it. There are two main ways to import JavaScript into your HTML document. There are **external** importing from a separate JS document. This method is usually the best because it makes it easier to cache and it keeps the initial HTML document size down. With this method, it is best to keep you script import tags at the bottom of the HTML document just above the closing body tag, so when the page is loading the JavaScript is not running before the rest of the page is loaded causing the site to take longer to appear. If you want a better SEO score from Google then you should follow this rule. Added the `defer` attribute tells the script tag to run after the rest of the document to make sure that the page is done loading before the JS is executed. An example of an import script tag is shown below: ```html ``` There is also the method of writing **internal** JavaScript which is just like the method above but without the `src=""` attribute. You can write your JS within the script tag. This method makes it harder on browser caching and minifying the Javascript. Adding the defer attribute will also work with this method.

Developer Bacons First Post!

Sat, 02 Nov 2019 00:00:00 GMT

Welcome to the first post made for Developer Bacon. This is the first post of many for this website. If this is the first post that you have seen on this site, then welcome, stay a while, and explore through all the tutorials and informal posts on this great site. The posts here are fresher than freshly cooked bacon! (Well that is a maybe, not much is better than real bacon!) If you have any questions about the website or one of the articles then you can contact me through the comment section at the bottom of the articles or if what you want to ask is not about an article then you can contact me from the [Contact Page](/contact/)