DEV Community: Zach Johnson

Getting Started with Vercel

Zach Johnson — Mon, 14 Mar 2022 22:14:02 +0000

Intro to Vercel

What is Vercel? Vercel is a platform for developments to help deploy their "frontend frameworks" and "static sites." Vercel's model is based around developer experience and to make the developers life much easier from start to finish of projects. The platform gives developers an easily usable UI and simple ways of deploying their sites. Vercel is partnered with many different companies that use their service in all types of industries, such as Facebook, Chipotle, and Carhartt.

There is a great blog by Michael Potter of Red Hat regarding integrating micro frontends into web apps here.

Basic Vercel Demo

To start using Vercel with your web pages and web apps, you need a Github account that has the repository of your web page or web app. You can connect this through the Vercel site here. Once this is done, you can import your repository into Vercel for it to deploy. Vercel will automatically re-deploy your app anytime you push to your Github repository. I used one of my existing repos to deploy on Vercel. On your dashboard, you can hit the "New Project" button, which takes you to a page where you will choose which Github repo you would like to import. You can change your framework preset setting depending on which one you used when creating the app. You may also need to change your output directory to whichever your app is set to. Hit "Deploy" and the result should look something like this:

Deploying an 11ty site

There are many types of deployments you can do with Vercel, one of them being 11ty. From our last blogpost, we created a few different 11ty sites and were able to deploy them using Github Actions. This time, we are using the same sites, but deploying them through Vercel. We can do this through this link, that takes us to a page where you can link a github repository that has your working 11ty site. From here, you should be able to easily click through the instructions and hit Deploy. Vercel will do everything for you and deploy your 11ty website. You should receive this message with your website below:

CI/CD Pipeline Comparison

Vercel's approach to CI/CD is wonderful for the developer and is certainly developer experience focused. Like I said earlier, everytime you push something to your deployed Github repository, Vercel will automatically re-deploy the app with your added content. This is a very easy and simple way to "check your work" and have live feedback to you by looking at your working deployment. Github Actions is another method of CI/CD pipeline, but requires much more effort and involvement to make a deployment to actually work. I recommend using Vercel in your CI/CD pipeline because of its simplicity, very intuitive approach to deployments, and developer-friendly UI.

Using 11ty to build base websites

Zach Johnson — Mon, 28 Feb 2022 04:52:40 +0000

This post is regarding getting started with 11ty and being able to use it in a very basic setting to using it with a fully developed template.

Making a Hello World 11ty Page

The first step is learning 11ty and its capabilities is making a very basic webpage with their beginners tutorial. After going through this tutorial, you can get a good idea of how to use 11ty and mess around with its basic website. I was able to add some functionality and blog posts to my Hello World site. The github repo to that site is here and the working site is here.

Using a Basic 11ty Template

After making that hello world page, I moved on to using a basic template of a 11ty site and adding functionality there. The basic template I used can be found here that you can use too. I added my blog posts to that site as well, the github repo is here and the working site is here. Building and Deploying this site was tricky and took some effort, so don't shy away if it takes a few tries to get it working.

Hax11ty template

The final 11ty site I made was using hax's hax11ty template, which is already a very functional and complicated 11ty site. The template can be found here. I added my blog posts to this as well and they can be seen in the left hand column of the site. The github repo is here and the working site is here.

If you were able to follow along and make your own versions of these templates, then congratulations! There are many other templates out there for you to explore and try on your own as well. Happy hacking!

Getting started with Docker

Zach Johnson — Mon, 28 Feb 2022 03:57:39 +0000

Before getting started with Docker, it is important to talk about why this technology is so important in the realm of web development. Docker acts as a way to bypass using VMs and having to run many OSs on a system at one time. It allows a user to run applications in containers, which are

standardized executable components combining application source code with the operating system (OS) libraries and dependencies required to run that code in any environment.

All that to say that containers make it easy to develop, build, and deploy applications at a very high level.

Getting Started

The best way to start using docker is to follow this tutorial here. The tutorial gives a simple approach to docker and helps to create a simple Todo list web app. The final product after adding a few list items looks something like this:

Play with Docker

Play with Docker is a web-based lab environment for exploring and developing your apps that can be found here. The 101 tutorial eventually starts using Play with Docker as well, so if you follow that, you will become familiar with Play with Docker.

Create a Dockerfile for NASA Image Search Repo

In our lab, we created a news api microservice that basically fetches articles from a news api and then deployed it onto Play with Docker. The github can be found here. We can do something very similar with the NASA Image Search microservice we created here. We can write a Dockerfile to be able to deploy our microservice on Play with Docker.

We will have a Dockerfile on both the frontend and backend sides of our microservice. The frontend (part where the user interacts) will look something like this:

And the backend Dockerfile will look something like this:

These files are being read by Play with Docker to help deploy our microservice on their platform. Some things will need to be changed in each file and shifted around, but for the most part, the shell of the microservice and deploying it are the same.

Back End Development with APIs

Zach Johnson — Mon, 31 Jan 2022 04:00:50 +0000

Today, I will be covering how we can extract data from an API and mapping it on the Google Maps API. I will also be covering using that data in a wikipedia-query tag to display a wikipedia page about such contents.

GeoIP

We can use an app called GeoIP, linked here, that can get geographical information, such as coordinates, about a device and send it back to the user as a JSON response. The response from GeoIP is based on your IP address, so if you are using a VPN it will give you the geo information of wherever your VPN is connected to and not your actual physical location. This is what the API response looks like in formatted JSON:

{
"ip": "104.39.60.125",
"country_code": "US",
"country_name": "United States",
"region_code": "PA",
"region_name": "Pennsylvania",
"city": "State College",
"zip_code": "16801",
"time_zone": "America/New_York",
"latitude": 40.7957,
"longitude": -77.8618,
"metro_code": 574
}

Getting JSON Response Using fetch Command

We first want to establish the GeoIP API as in instance in our class constructor by saying this.locationEndpoint = 'https://freegeoip.app/json/';. From here we will use the fetch command and call this locationEndpoint in a method called getGEOIPData:

async getGEOIPData() {
    const IPClass = new UserIP();
    const userIPData = await IPClass.updateUserIP();
    return fetch(this.locationEndpoint + userIPData.ip)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        console.log(data);
        this.long = data.longitude;
        this.lat = data.latitude;
        this.city = data.city;
        this.state = data.region_name;
        return data;
      });
  }

The fetch command simply stated goes to that webpage and retrieves whatever data we are telling to retrieve or whatever data the webpage has to offer. In this case, the GeoIP webpage returns a JSON response, so that response is assigned to the data instance we see in the .then() call.

After we receive the response, we can assign that response data attributes into the attributes of our class. This is our latitude and longitude coordinates that the GeoIP API gives us assigned into this.lat and this.long respectively.

Using fetch response to map a location

For this next portion, we will use the Google Maps iframe API, which allows us to embed a Google Maps interactive image into our html page. We will do this in the render() function of our code. We define the url of the Google Maps that we will use with our this.lat and this.long coordinates from before. Then, send this url into an html tag that shows this map on our webpage.

render() {
    // this function runs every time a properties() declared variable changes
    // this means you can make new variables and then bind them this way if you like
    const url = `https://maps.google.com/maps?q=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed`;
    return html`<iframe title="Where you are" src="${url}"></iframe> 
  }

Wiring data into a `wikipedia-query` tag

Now that we have established our ability to retrieve data from APIs using fetch(), we can use this data to embed a wikipedia article on our page. In order to do this, we have to import the wikipedia-query dependency into our project with:
import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js';. From here we can embed wikipedia articles on our webpage using an html tag inside the render() function.

<wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>
<wikipedia-query search="${this.city}"></wikipedia-query>
<wikipedia-query search="${this.state}"></wikipedia-query>`;

The tags above represent three different possible entries into this wikipedia-query search. The three are a city and state combination, only a city, or only a state. We used the data from the fetch command from the GeoIP API to get the current city and state we are in. In the API response, state is listed as region_name, so be careful when translating the response over. You should now successfully have three wikipedia articles embedded into your page. This is what one might look like:

Congratulations, you have successfully integrated two APIs into your webpage! The source code used for this project can be found here.

Basic Web Components with Open-wc, npm, node.js, and VScode

Zach Johnson — Mon, 17 Jan 2022 03:20:43 +0000

In order to start talking about web components and using open-wc, we have to introduce the building blocks that allow us to make that possible. To use open-wc, we have to install a few different dependencies that make it function. Before we install, let's talk about a few of them. First is npm, which is a JavaScript Node package manager. It offers the largest selection of code packages in their software registry. This is typically concurrently used with Node.js. Node.js is a open-source JavaScript runtime environment where code can be executed outside of the web.

Both of these JavaScript add-ins make developers lives much easier. They are free to use and open-source that make it possible to share software with others and do things that were not possible before their development. They are very commonly used in web development with back-end tools to allow for runtime processes that can occur quicker and more efficient in the web. Now, let's look at installing these JavaScript helpers.

Node.js

Go to this webpage and download the LTS version of nodejs for your device. Open the package in your downloads file folder and follow the directions to install.

npm

For npm, this can be done in the command line / terminal. Directions can be found here to download and install. After running that command, the commands node -v and npm -v can be used to check that the most current version is installed.

Yarn

Another software component we use for web develop is Yarn. We can install this in the command line with npm with the command npm install --global yarn. To check the version, use command yarn --version.

Visual Studio Code

VSCode can be downloaded and installed here. VSCode is a coding text editor for many different programming languages.

Build a Web Component

Now that we have installed those dependencies, we can make a web component with open-wc. Create a new folder/directory to house this project using either your file explorer or in the terminal with command mkdir. In your terminal, run the command npm init @open-wc. If this command was successful, you have installed everything correctly and you should see this!

When setting up the web component, the parameters I used were:

Scaffold a new project
Web component
Linting, Testing, and Demoing
No typescript
Install with npm

From this, open-wc should open a new tab in your web browser showing this:

Congratulations you have successfully made a web component/element!

The github repository containing the code for the web element is here.