DEV Community: TaylorMorini

Vercel Site Deployment

TaylorMorini — Mon, 14 Mar 2022 00:18:29 +0000

Vercel

Vercel is a tool used to deploy and test static sites. It allows developers to complete these actions in a quick manner. Users can link GitHub accounts to Vercel and import their projects. After importing, these projects can be deployed automatically. This means that Vercel will update the deployment as changes come in.

To learn more about how this happens, check out the article and documentation listed in the Sources section.

How to get Started with Vercel

Vercel Installation

The first thing you are going to want to do is install Vercel via your command line. To do so, follow the "Vercel Installation" link.

Once you have successfully installed Vercel, you should link your GitHub account to deploy an existing project.

Importing a repository is simple: just search for the one you want to deploy and click import

For the sake of an example, I used this source to get set up with Vercel. In my terminal, I ran a cd to get into the directory where the code was housed. Then, I ran npm install and vercel dev. I pushed this code to GitHub, and was able to successfully use Vercel to generate the site.

Publishing 11ty Sites via Vercel

The process of publishing 11ty sites with Vercel is rather simple. As before, simply import the desired repos and deploy. Below are some photos of this working for me!

Vercel vs Other CI/CD Pipeline Approaches

For myself, Vercel has been the simplest tool to use so far. In my opinion, it is easier to understand and use than other approaches. Vercel has the advantage of automatically updating as code is pushed out (with the help of GitHub). In addition, the simplicity of this site allows for anyone with a basic understanding to use it for development!

In short, Vercel seems to be the most versatile tool used so far. It has presented an easy development experience and it appears to be a very powerful site.

Sources

Getting Started with 11ty

TaylorMorini — Mon, 28 Feb 2022 01:36:25 +0000

What is 11ty?

11ty is a static site generator. It is capable of rendering sites from many different language. Notably, it can use markdown. In this posting, I will be demonstrating 3 methods of creating an 11ty blog.

Getting Started

11ty Setup + Hello World Blog

In your terminal, run npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev

Once this is successful, in the terminal run a mkdir "filename". For the sake of this example, I named mine "11ty Work". After the creation of this folder, run cd filename in the terminal. From there, run echo '# Page header' > README.md npx @11ty/eleventy

Once this has been done, it can be run by running this command: npx @11ty/eleventy --serve

Once you have successfully opened the "Page Header" screen shown below:

you can open the file via VS Code and make changes.
Here is an example of what can be rendered when changes are made:

Using Template 1 for a Template Blog

The first thing you are going to want to do is use the linked template. This will give you the basic information you need to start building your site.

You can clone the repository that the template makes onto your machine. This will allow you to make any edits.

Run a npm install
Once cloning is complete, you should cd into the file that the code exists in. From there, run a
npx @11ty/eleventy --serve

In your browser, go to localhost8080

If everything has been successful, you should open something similar to the image above.

To edit to your liking follow these steps:

In the terminal, close the site by entering "control c"
Open the file in Visual Studio Code by typing code .
Navigate to the drop down labelled "posts"
Edit the information in the .md files to your liking

Using HAX11ty to Build the Same Blog

Like before, use the linked template to make a repository. You will need to do another git clone on your terminal and cd into the cloned work. Again, enter code . to open the cloned work in Visual Studio. It should be noted that HAX11ty is going to require yarn to work properly.

Run yarn install and yarn start

If all is successful, you will be able to edit the code in Visual Studio.

After making desired edits, your blog may look something like this:

Problems with Yarn? Using another Template to demonstrate 11ty

Once more, use the linked template to make your repo. Clone the repo, and cd into the cloned work. Open the file in VS code.

Run npm install --save-dev @11ty/eleventy
Run npx @11ty/eleventy --serve

Comparing First Experience with HAX11ty

HAX11ty is much more visually appealing. Both are rather simple to access and understand; although the yarn command with HAX11ty did create some challenges. Overall, however, HAX11ty does have the stronger UI.

Repos

The following repos demonstrate how I completed the discussed works.

Sites

The following sites demonstrate my work further

Hello World Site

Helpful Information

Getting Started with Docker

TaylorMorini — Sun, 27 Feb 2022 20:43:59 +0000

Why is Docker a Powerful Tool?

One of the main reasons Docker is a powerful tool is its architecture. Docker uses a client-server architecture. According to the Docker documentation,

The Docker client talks to the Docker daemon, which does the heavy lifting of building, running, and distributing your Docker containers

A visualization of this occurring:

Starting out with Docker

To begin using the Docker Playground follow these steps:

Go to this link
Navigate to the section labelled "Play with Docker"

Log in or create an account
Press the start button and add a new instance

How to Create a Dockerfile for NASA Image Search

Setup

In the Docker Playground add a "New Instance". This will open a terminal on the screen.
On GitHub, navigate to the Nasa Image Search repository and click "Code". Copy the link, and in the Docker Playground run a git clone and cd into the cloned repo

Configure

Run this command: touch "Dockerfile". This will create a new file called Dockerfile. This is where custom settings can be added.
Access your new file via the "Editor" in Docker Playground.

The document that you have added will need to be configured.
Now we must reference an endpoint for Nasa Image Search. For this example, the endpoint would be https://402a.github.io/ip-project/

In the News example, this is where you would run cp dot.env.example dot.env. This would give you the ability to open the dot.env file and populate it with specific data (a generated API Key and the NewsAPI endpoint):

For the Nasa Image Search example you can first run another touch command. For this, I ran touch "dot.env". Here, you would populate the document via the editor. The endpoint, https://402a.github.io/ip-project/ is added to this document.

Open Port

Once you have completed the configuration, you can now click on the "Open Port" button at the top of the Docker Playground screen.

You will be prompted to enter a port number. For this example, I inputted "4000"

You will not immediately be able to open the desired page. To do so, you will need to copy the URL of the page that opens when you input "port 4000".

This URL should be added to the dot.env file as the endpoint. Click 'Save' after this has been added.

Starting the application

After everything has been added, run the line docker-compose up in the playground. This will open port 4000.

Click on port 80. If all was successful, you will be able to view the working application.

News Example:

Helpful Links:

API Back End: Wikipedia-Query Tag Creation

TaylorMorini — Mon, 31 Jan 2022 04:01:17 +0000

This posting will be about the usage of an IP address, using longitude and latitude to get a Google Maps iframe, and using this information in tandem with a wikipedia-query tag. I will also be discussing fetch as well LitElements to provide insight into updating of the DOM.

The GeoIP Element

The GeoIP element is an API. It allows programmers to retrieve data from a user's IP address. This data could include the following:

For my work, I used the GeoIP API to retrieve the user's longitude, latitude, city, and state.

Google Maps: iframe

The Google Maps iframe takes in a latitude and longitude in order to display a map. The latitude and the longitude stem from the user's IP address. Therefore, the usage of the GeoIP API is necessary to successfully display the iframe.

Step by step instructions for implementation:

In the constructor you must set your locationEndpoint. You can do so by entering: this.locationEndpoint = 'https://freegeoip.app/json/'. The locationEndpoint is what is going to allow for a connection to the necessary software.
Within your properties, add the following: The property named long will be used for longitude, the property lat for latitude, city for the user's city, and finally region for the user's state.
The next step has you assigning values to the properties that you declared. This step is what ensures that the user's data is correctly outputted. Enter the code as follows:

Now you can begin rendering your map! The first thing you want to do in order to render is create a const url that will work with the properties that you declared. Based on this example, therefore, the url would be: https://maps.google.com/mapsq=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed. The interchangeable parts are ${this.lat} and ${this.long}. These could be substituted for corresponding property names, as long as they refer to longitude and latitude.
The creation of the iframe is going to rely on the url that was made in step 4. To make the iframe, simply type: html <iframe title = "Location" src="${url}"></iframe>. The title can be changed based on preference, but the src must be the url that you specified from step 4.

Wikipedia-query Tag

In order to successfully wire information into a Wikipedia-query tag, the previous steps must be completed as well as the following:

Dependencies and Import: If you would like your Wikipedia-query to work make sure to add the following import to your application: import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js';. After you have added this import, navigate to your terminal (make sure you have run the proper cd into your directory) and run npm install and once that process has finished run npm start. To check that the proper dependencies were added, in your IDE navigate to the package.json file. Here, you should see a section titled "Dependencies". Under this section, search for the following: "@lrnwebcomponents/meme-maker": "^4.0.6", "@lrnwebcomponents/wikipedia-query": "^4.0.6",. if you are able to locate these, the import and dependencies are functional.
You can now create the Wikipedia-query tag in your rendering function. For this example, I was able to complete this action by entering the following:

Again, the this.region will refer to the user's state and the this.city to the user's city. This tag will render an embedded Wikipedia article!

Fetch and LitElement

How can fetch be used to gain information from the API?
In practice, fetch is used to asynchronously receive resources across the network.

In my example, I used fetch to complete the following task:

This excerpt from my code is using information from the locationEndpoint and userIPData.ip to print data to the console.

Fetch is used with LitElement to provide updating of the DOM by ensuring that the console logs that proper user data.

Sources

GeoIP
API Endpoint Explanation
Wikipedia Tag Example
Fetch Explanation

My Source Code

https://github.com/TaylorMorini/ip-project

Getting Started with Web Components

TaylorMorini — Mon, 17 Jan 2022 02:03:14 +0000

Would you like to learn how to create a simple "Hello World" screen using JavaScript and Web Components from scratch? Follow these steps to see how I did it!

Before you Start

Install oh-my-zsh It is not necessary to install this on your terminal, this is a preference. It does, however, increase usability in my opinion.

Install Visual Studio Code This is my preferred IDE to complete this process.

What is Node.js/NPM?

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

Basically, Node.js is going to allow you to run code written in JavaScript. NPM is the default package manager for Node.js. This means that it:

puts modules in place so that node can find them, and manages dependency conflicts intelligently.

The good news is that once you have successfully downloaded Node.js, NPM will automatically be usable!

Downloading Node.js

Go to Node.js to begin installation. If you are using a Mac like I am, you should see a screen that looks like the following image:

You are going to want to download the "Recommended For Most Users" version. Once installation is complete, you can go to your terminal and run node -v.

If you have correctly installed Node.js, then you should see the version of it that was recommended. To check NPM, simply do npm-v. If everything is in working order, you will see that there is a version of NPM running on your machine.

Working with GitHub

The first thing you're going to need to do is create a profile for GitHub. Once you have created a profile, you can create a new repository by clicking the "New" button, as shown below.

If you haven't already, install Git. This is going to make it possible to interact with GitHub via your terminal. To ensure Git is installed, run git --version in your terminal. If you have successfully gotten git, then you will see a similar screen (below):

Making a Directory via Terminal

Following these steps you can make a directory straight from your terminal:

Open the terminal. Run cd Documents. This is going to navigate you to the Documents folder on your machine. This is where I made my directory.
Run mkdir sampleDirect. You can name it anything, but for the sake of the example I named mine "SampleDirect".
Run a ls if you want to be sure that it has successfully been created.
cd sampleDirect Note: if you run a ls here, its going to appear empty because you haven't added anything to it yet.

Bringing it all Together

Keep your terminal open! If you closed it, simply run the following (name specific!) to get back to your directory:
cd Documents/sampleDirect

The first step you should take is to clone your repository. To do so, copy the link for your specific repo:

Back in your terminal, run git clone and then your specific link. It should look something like this:

Run a cd. I named my Repo "sample-" so for me, I would run cd sample-".

The next thing you are going to want to do is run this command:
npm init @open-wc.

From here:

What would you like to do today?scaffold new project
What would you like to scaffold?Web component
Would you like to use a typescript? No
What is the tag name of your component? hello--World (you can name it anything)
Would you like to write this file structure to a disk? Yes
Do you want to install dependencies? Yes, with npm.

Successful setup will show:

In the terminal, run cd hello--world
Run npm run start

Running npm run start in the terminal will yield:

Opening with Visual Studio Code

Use the following steps to open with VS Code:

At the 'Start' page in VS Code select the open button
Navigate to 'Documents'
Select your directory (mine was sampleDirect)
Open your 'hello--world' file

More Help

Here is a helpful cheat-sheet for Git commands.
This is a helpful tool to learn more.
Here is my GitHub repo.