DEV Community: Austin Akers

Getting Started With The Beacon API

Austin Akers — Thu, 25 Jun 2020 14:58:50 +0000

Getting Started With The Beacon API

The Beacon API is a web API avalible for developers to implement into their application. View full list of web APIs here. The Beacon API is a Web API useful for:

Analytics
Diagnostics

Why not `fetch` or `XMLHttpRequest`?

As stated in the MDN Docs, the unfortunate truth is User Agents will typically ignore XMLHttpRequest made with an unload handler. Which is the handler we want to use before an individual leaves/navigates away from the page.

Overview?

In this article we will building a very basic analytics tracking library. The objective is to:

Create a backend to capture the data and serve our index.html page
Track what element the end user clicked on and record it with a time stamp.
Store the data that is being generated on each click to a global object to store.
Before refreshing, or leaving the page send the data stored in the global object to the backend using the sendBeacon() method provided by the Beacon API.

Setup

First, make sure you have Node.js installed into your system.
Once Node is installed on your computer clone the project files:

git clone https://github.com/BboyAkers/WebAPIs.git

or
Download Repo

Navigate to the start folder. WebAPIs->beaconAPI->start
Open the terminal and install the dependencies npm install We've installed two dependencies. body-parser and express.
- We will be using body-parse to parse the incoming POST request from our frontend.
- express is the backend web framework we will be using to setup our server.

Setting Up Our Server

Objective:

Setup a basic express server
Serve our index.html inside of our public/ folder to the frontend

Navigate to the server.js file in the base directory of the start/ folder.

First we want to setup our basic express server

server.js

const  express = require("express");

const  app  =  express();

app.listen(8081, () =>  console.log("Listening on 8081"))

In your terminal run:

node server.js

We've now successfully setup our basic express server!

When we navigate to localhost:8081 we should see the message: Cannot GET /.

What do we have to do to eliminate this error?

We need to find something for our express app to do on / our base directory.
- For example, serving our index.html to the frontend.

How do we serve our index.html from the servers side?

We are going to use express static to serve the index.html, which is a static file. Our index.html file is located in the public/ folder. When using express static we need to establish what folder we want to use to serve our static content. Since all of our static content including our index.html is inside our public folder, we are going to specify the "public" folder.

app.use(express.static('public'))

Our server.js file should look quite similar to this:

const express = require("express");

const app = express();

//serving the static content inside our public folder
app.use(express.static('public'))

app.listen(8081, () => console.log("Listening on 8081"))

Navigate to localhost:8081/index.html in your browser.

You should now see our app.

Congratulations! You've successfully setup the server!

Setting Up Our Analytics.js File

Objective:

Tie the analytics function on winow.onload window.unload.
Create an event that:
- detects what element a user clicks on when visiting the page
- Create a timestamp to record what time the user clicked that element
Store the object that holds the clicked element and the timestamp into a global object.
Before leaving the page send all the stored data to the backend using the Beacon API

Navigate to our analytics.js file in public/->analytics.js.

Inside our analytics.js file, the first thing we need to do is create an event handler that:

captures the element we clicked on inside our document
the time we clicked on it
then push it to a global array that holds the history throughout the entire end users visit to the web page.

Let's do that!

First were capturing the element we clicked on and the time we clicked on it inside our document.

document.addEventListener('click', (event) => {
  {
    clickedElement: event.target.outerHTML,
    timestamp: new Date()
  };
})

Next we need to create a dataHistory variable to store all data we capture from each click. Then push the captured data every time the user clicks inside the document.

let dataHistory = [];
document.addEventListener('click', (event) => {
  dataHistory.push({
    clickedElement: event.target.outerHTML,
    timestamp: new Date()
  });
})

Now we need create our analytics function. This function will;

execute on window.load and window.unload
Check to see if our browser has the navigator.sendBeacon() method
If it doesn't it will simply return
If it does we will define the url we are sending our analytics data to the backend
Create a variable that will create a new Blob object that will hold our stringified JSON.
Send the data to the /analytics endpoint using navigator.sendBeacon()

What our analytics methods should look like:

window.onload = window.onunload = function analytics(event) {
    if (!navigator.sendBeacon) return;

    // Url we are sending the data to
    let url = "http://localhost:8081/analytics";

    //Create the data to send
    const dataHistoryBlob = new Blob([JSON.stringify(dataHistory)], { type: 'application/json' });

    navigator.sendBeacon(url, dataHistoryBlob);
};

We've now completed our analytics.js file!
This is what our file should look like!

let dataHistory = [];

document.addEventListener('click', (event) => {
  dataHistory.push({
    clickedElement: event.target.outerHTML,
    timestamp: new Date()
  });
})

window.onload = window.onunload = function analytics(event) {
  if (!navigator.sendBeacon) return;

  // Url we are sending the data to
  let url = "http://localhost:8081/analytics";

  //Create the data to send
  const dataHistoryBlob = new Blob([JSON.stringify(dataHistory)], { type: 'application/json' });

  navigator.sendBeacon(url, dataHistoryBlob);
};

There's one last thing we haven't done. In our url variable we send the data to a backend endpoint we haven't defined yet, /analytics. Let's go to our server.js file to create that endpoint and make sure it can parse the data it's receiving.

Creating The "/analytics" Endpoint

In our server.js file let's create the /analytics endpoint.

const express = require("express");

const app = express();

app.post("/analytics", (req, res) => {
  console.log(req.body);
  res.sendStatus(204);
});
app.listen(8081, () => console.log("Listening on 8081"));

If we log the data won't be able to see anything due to express. All of our data is being passed through the body of our request. Unfortunately express itself can't parse data from the body so we have to use the body-parser package from npm. Fortunately when we did an npm install setting up the project we already added the package as a dependency. Feel free to check your package.json for reference.

Now we need to add body parser to our server and use it to parse the json data being sent to the /analytics endpoint. Our file should look like this.

const express = require("express");
const bodyParser = require("body-parser");
const app = express();

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));

// parse application/json
app.use(bodyParser.json());

//serving the static content inside our public folder
app.use(express.static('public'));

app.post("/analytics", (req, res) => {
  console.log(req.body);
  res.sendStatus(204);
});
app.listen(8081, () => console.log("Listening on 8081"))

If we save and restart our server we can click on several elements, refresh the page, exit the page, or navigate to a different website, we should see the data being sent and logged to our server. We have now successfully build a very simple use case for the beacon API!

Side note: To check to see what data is being sent to the backend on the browsers side. You can preserve the logs in the network tab.

Challenges:
Expand upon the project by:

Separating the business logic(our click event) into our index.js file and have it import and use our analytics.js file.
Expand upon the current tracking capabilities by adding unique sessions.
Clean up the element retrieval data. We currently use .outerHTML see if there are better ways to find the elements we clicked on. :)
Create a pop up to give users the option to accept or decline tracking.

Happy coding!

What is Tree Shaking?

Austin Akers — Fri, 29 May 2020 13:37:52 +0000

What is Tree Shaking?

Tree shaking is a term used as a means to eliminate code that isn't in use, or dead-code, as we call it. You can also think of it like choosing 3-4 relevant quotes from a book to write an excellent paper. If you only need 3-4 relevant quotes, why use the entire book?

Whenever a code bundler, like webpack, builds our web application for production. It does tree shaking. Code bundlers like webpack do their best to remove dead code, or unused code, to reduce the bundle size of your application when you prepare your code to be able to be used for production. Unfortunately, it can't catch everything, and that because we sometimes write code that isn't tree shaking friendly.

A way for us to help code bundlers with tree shaking, or eliminating dead code, in our web development projects is to only import necessary methods and components into our application. We do this by using JavaScript destructuring syntax in our import statements and properly export code as well. In Vuetify, this is done by default when you import and use it throughout your project.

Let's dive into an example to find out more about tree shaking!

Starting off, in JavaScript we sometimes unintentionally import an entire framework and/or library into our application. Example below:

import Vuex from  'vuex'

The problem with this import statement is that we import the entire library, vuex, when we don't need everything from it when programming.Because of that, we end up bringing a significant amount of unnecessary code, into our web application.

What are the problems with this?

It increases bundle size when we build and deploy our app.
In return, it will take longer to load. Longer load times make for a bad end user experience.
It helps us follow DRY ("don't repeat yourself" - write code only once if at all possible) coding principles when using the library of choice and the functions/methods within it.

The question you should always ask when you import a module is "What exactly do I need from here?" This allows you to better approach what to import. Example:

import { mapState } from  'vuex'

In this example we are solely importing the mapState helper from the vuex library, which is used to help manage the data and how it flows for a vue.js application. To many people not comfortable with es6 this is a different syntax from what you usually see starting out. We are using ES6 object destructuring to grab the mapState helper from vuex. Instead of importing all of vuex and only using one small part of the library, we use this syntax to grab only what we need from the vuex library. This "take what you only need" mindset helps keep dead code out of your application.

Making Your Code Tree Shaking Friendly

BOOM we magically now have a small calculator app. This is what it currently looks like:

calculator.js

//creating an object that holds functions to caclulate the numbers we input
const  myCalculator=  {
    add(a, b) {
        return a + b;
    },

    subtract(a, b) {
        return a - b;
    },

    divide(a, b) {
        return a / b;
    },

    multiply(a, b) {
        return a * b;
    }
};
//Making it possible for other files to import and use the calculator object
export  default  myCalculator;

index.js

import  myCalculatorfrom  "./calculator.js";

console.log(myCalculator.add(1,  2)); // Expected output: 3
console.log(myCalculator.subtract(15,  9)); // Expeted output: 6

This looks great, right? Well unfortunately there are a couple problems:

First, even if we use just one method on the myCalculator object we will still import everything else inside myCalculator.
Second, due to that when we use a code bundler, like webpack, to bundle it for production, our bundle size will remain the same.

How do we refactor this to make it tree shaking friendly for our code bundlers?

We're going to split each of our methods inside myCalculator into their own modules!

calculator.js

export function add(a,b){
    return a + b;
}

export function subtract(a, b){
    return a - b;
}

export function divide(a, b) {
    return a / b;
}

export function multiply(a, b) {
    return a * b;
}

What we did here was:

Break down all the methods inside the exported myCalculator object into their own separate and exportable files
Made it possible to specify what method we would like to use in our index.js

Below we will declare the function we want without worrying about dead code:

import { add } from "./calculator";

console.log(add(1, 2)); // Expected output: 3

How would we import other methods that were exported as modules from the same file?

For example, after you add two numbers you'd like to use the subtract method for two other numbers.

We can do that within our destructuring object next to add.

index.js

import { add, subtract} from "./calculator";

console.log(add(1, 2)); // Expected output: 3
console.log(subtract(15,  9)); // Expeted output: 6

There you have it! We've now learned how to make our code tree shake ready. Not only are we happy but your code bundler is as well!

More Info on Tree Shaking, Destructuring, ES6 Modules:

Reduce JavaScript Payloads with Tree Shaking (Article)
Destructuring assignment (MDN Documentation)
Destructuring in ES6 - Beau teaches JavaScript (Video)
Understanding ES6 Modules (Article)

P.S. Huge thanks for Johanna being the editor of this article!

This blog post is a part of Vuetify Beginner's Guide Series. 🐣 Each blog has been collaboratively worked on by the Vuetify Core Team. Interested in contributing a topic? ➡ Reach out to Johanna on Dev.to or in the Vuetify Community Discord.

What is a CLI?

Austin Akers — Mon, 11 May 2020 19:28:23 +0000

What is a CLI?

A CLI or Command Line Interface is an in interface that accepts text input to execute operating system functions. As a software developer we use CLI's all the time. What exactly does a CLI look like? Open your terminal on Mac or command prompt (powershell works too) if you are on Windows. As a developer we use the terminal and/or command prompt to:

install packages
run scripts
manage project files
and more.

Something you might be familiar with in the web development world is this:

$ npm install <package name>

ex. npm install vue

You can even navigate to and around the files on your system, or better yet what we call the file system.

In that example in the CLI, we are using the node package manager, npm, to install a package of our choice!

Basic Commands

There are some basic commands you can use that come in handy when using the file system:

Basic Windows Commands

dir - Lists what is in the current directory (folder).
cd <pathName> - Changes the directory (folder) in the file system
cd .. - Moves you up one level
mkdir or md <folderName> - Makes a new directory (folder).

Basic Linux Commands

ls - Lists what is in the current directory (folder).
cd <pathName> - Changes the directory (folder) in the file system
cd .. - Moves you up one level
mkdir or md <folderName> - Makes a new directory (folder).

Suggestion to get comfortable with the CLI:
Play with the commands and see what you can do!

Basic Challenges

Open your terminal/command prompt and navigate to your Documents directory and then Downloads directory
Inside your Documents directory create a folder

Bonus: Navigate inside the folder you created and figure out how to create a file!

Vue CLI

Before we get go further into getting the project started we need to take a look into the Vue CLI. Vue CLI is the standard command line tooling for developing vue.js projects. To learn how to install Vue CLI visit here. If you're wanting to know more information about how to use the Vue CLI you can visit the documentation.

Creating the Project

The first thing we need to do is create is a Vue project. Hopefully you've familiarized yourself with the basic commands. Navigate to the directory you'd like to create the project in and type:

$ vue create my-app
// navigate to new project directory
$ cd my-app

Adding Vuetify

Now that we've created our project and navigated into the directory, next we have to add the Vuetify UI.

Next we have to add the Vuetify CLI package by typing in our CLI:

$ vue add vuetify

Using Vue UI

We can also use Vue UI to install Vuetify CLI:

// ensure Vue CLI is >= 3.0
$ vue --version

// Then start the UI
$ vue ui

Click Plugins
Type in vuetify in the search bar
You should see vue-cli-plugin-vuetify
Click and install it

Let's Build a Github Profile Search Web App

Austin Akers — Wed, 03 Jul 2019 20:45:16 +0000

As my first blog post I thought i'd be great to be able to try and start posting a series of weekly projects for developers looking to build small fun web apps to add to their portfolio.

Today I thought i'd be great to start it off with building something fairly interesting. Bulding a Github Profile Search Web App using the Github API.

Let's Begin!!

1.) First create a folder structure like this.
css/styles.css
js/scripts.js
index.html

If you really want to learn something fun, try using the terminal!

touch index.html
mkdir css && mkdir js
touch css/styles.css
touch js/scripts.js

'touch' is the easiest way to create new, empty files
'mkdir' is the easiest way to create new, empty folders

2.) Setup our HTML

3.)Next we need to setup our app skeleton

We've create a two main div's. The first div is for our input field and search button. The second div is where we will be displaying the returned information from the call we make to the github api.

We have the classes there as well because we will be using them to style the application and use the elements in JavaScript as you'll see later on.

Building out the JavaScript
In this section we will be building out the functionality of the application.

4.) Scaffold

Before you build out anything it's always great to get an idea of what you should be writing before you sink time into coding. Ask yourself, "what are we trying to accomplish?"

Tasks:
-Grab search element
-Grab div that will display the data
-When we click search we want:
-Grab data from the text input field
-Use that data to grab user info from the Github API
-Display the response data from the Github API

It should look a little something like this!

5.) Grab our elements and create search call

If you're wondering about querySelector();
Here's a link!
https://www.w3schools.com/jsref/met_document_queryselector.asp
https://www.youtube.com/watch?v=JlgLDfINXvY

If you're wanting to understand addEventListener();
https://www.w3schools.com/jsref/met_document_addeventlistener.asp
https://www.youtube.com/watch?v=F3odgpghXzY

6.) Grab our data from our input field and setup our call to the Github API

Okay now whoa. There's a lot going on here you're probably wondering and to be honest. You are absolutely correct so let's break it down :).

When we click we need to grab the most recent data from our input field. If we declare in the global scope of our file it will

Secondly let's take a look at this GET request.

What is XMLHttpRequest?
XMLHttpRequest is a built-in browser object that allows to make HTTP requests in JavaScript.
More info here.
https://javascript.info/xmlhttprequest
https://www.youtube.com/watch?v=rjmtYkRK1nM

I decided to use this instead of fetch simply due to browser compatibility. I thought it'd be great to support old browsers and not have to deal with polyfills. Take a look here.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Browser_compatibility

If you'd like to use fetch instead, feel free to!

7.)Next we have to check and use our response data.

You can check the contents of the response by doing a console.log(response) where we are suppose to display the data.

Now we populate our data in our HTML

8.) Now we add styling!

We're done!!!!

Hopefully you made sure you're weren't getting any errors along the way and you've attached your scripts and style sheet as well!

As nice as this app seems there is much more you can do to improve this application.

Here's a list:
-**Look into alternatives for using innerHTML and understand why using it isn't the best practice
-Add CSS animations for the card
-Add error handling to our call
-Use CSS Grids or Flexbox for the layout
-Convert the CSS into Sass

That'll keep you busy for a bit. Have fun and enjoy your week!

DEV Community: Austin Akers

Getting Started With The Beacon API

Getting Started With The Beacon API

Why not fetch or XMLHttpRequest?

Overview?

Setup

Setting Up Our Server

Setting Up Our Analytics.js File

Creating The "/analytics" Endpoint

What is Tree Shaking?

What is Tree Shaking?

Making Your Code Tree Shaking Friendly

What is a CLI?

What is a CLI?

Basic Commands

Basic Windows Commands

Basic Linux Commands

Basic Challenges

Vue CLI

Creating the Project

Adding Vuetify

Using Vue UI

Let's Build a Github Profile Search Web App

Why not `fetch` or `XMLHttpRequest`?