DEV Community: RyanArmani

Something pt.2

RyanArmani — Tue, 03 May 2022 14:55:52 +0000

Something

RyanArmani — Sun, 01 May 2022 21:14:47 +0000

Photos for Check In 2

RyanArmani — Mon, 28 Mar 2022 20:53:26 +0000

Vercel Introduction

RyanArmani — Tue, 15 Mar 2022 03:58:33 +0000

What is Vercel?

Vercel is a deployment platform for frontend developers. Vercel enables developers to host websites and web services that deploy instantly and scale automatically without any need for configuration. It is a common method for deploying static webapps, static sites, and frontend frameworks! Specifically, Vercel is defined as a Function as a Service (FaaS) platform, which is simply a service that enables users to produce microservice applications over the cloud without the need to support said applications with the infrastructure typically required to deploy such applications. As such, Vercel is a convenient method of deploying applications even for individuals with minimal understanding behind the deployment of such services.

https://vercel-demo-test-1-dncodfj4w-ryanarmani.vercel.app/

Note: For these sites, I had to change the output directory from _site to dist, a small change that may be unique to these apps. Images are seen below.

11ty websites

To prove how easy it is to deploy websites, I will be deploying three websites of my own which were produced by 11ty ( a stitic site generator) in a previous project. They are included below!

To setup these sites, one simply has to connect their github to Vercel by simply logging into their account. From there, a user can select the relevant repositories they wish to utilize within Vercel. Any updates that occur within these repositories will automatically be updated in Vercel (how convenient)! From here, a user can simply import a repository of choice, and simply begin to build the application!

11ty Site pictures

https://11ty-blog-temp1.vercel.app/

https://11ty-final-blog.vercel.app/

https://11ty-blog2-run1.vercel.app/articles/first-post

Vercel Demo

For this example, I used the ist-vercel-demo repository found
here for deploying a static app to Vercel. Following the steps previously used to establish the github connections, I utilized the Import Third Party git repo option found in the image below.

After cloning this repo, I added a .env file through my github. From here, I simply deployed the app as seen below!

Note: For these sites, I had to change the output directory from _site to dist, a small change that may be unique to these apps. Images are seen below.

CI/CD

As a quick cover for definitions, a CI/CD (Continuous Integration/Continuous Delivery) pipeline is a series of steps that must be performed in order to deliver a new version of software. Github is one such means of producing a CI/CD pipeline, and is a common means of hosting code and updating it before deployment. While commonly used, github is genuinely confusing when used initially for CI/CD purposes. Vercel offers an impossibly easy method of deploying existing code, with the added benefit of automatically updating projects with changes that occur in github. Vercel is a powerful tool that can only be appreciated in "application", in the literal sense of the word.

Intro to 11ty

RyanArmani — Mon, 28 Feb 2022 04:36:48 +0000

What is 11ty?

11ty is a simpler static site generator! 11ty compiles files it finds in one's working directory into static HTML files. As a result, 11ty can be used with a slew of different files and templates to construct static sites. Let's explore some ways to generate sites!

Hello World

To create a Hello World file using 11ty, we must first install 11ty! In your terminal, navigate to a folder of your choice. I will be using a folder named 11tyLab. Once here, use the command npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev. This should add relevant packages that enable highlighting of code. Next, utilize the command echo '# Page header' > README.md, as this should add a header to the READ.md file. Next, utilize the command npx @11ty/eleventy, which should finish setting up your local project's version of eleventy. Utilizing the command npx @11ty/eleventy --serve, you should now be able to access your Readme file through a browser with the local host link provided! An image is included below of what the link should look like, as it appears in purple.
In my code editor, I changed the initial Page Header to Hello World, as seen in the images below.

Repo can be found here

Blog 1

Blogs can be created with 11ty! Thankfully, 11ty offers some blog templates for us to use. These can be found here.

The first template we will be using is called eleventy-base-blog. To utilize this blog, head on over to the github page for this template. Click the "Use this template" button highlighted in green at the top right of the page. This will enable you to create your own repo of this template.

Once created, secure the https link from your own repo page by clicking the green "Code" button in at the same part of the page.

Once this link is copied, you are ready to clone the repo! I created a new folder to store this template. In your terminal, cd to the folder you would like to store this repo to locally. Once there, use the command git clone <copied-https-link>. You can now see the files stored in this folder!

In your code editor of choice, open up the folder where your repo is cloned locally, and you will notice code in a file called firstpost.md. This file stores the first blog post seen on the template. I copied my code of a previous article for lab 7 of class, and simply pasted it into this file.

To get this template to show up on your local machine, you should first edit and save changes in the firstpost.md file. Then, since I created a new folder, I needed to run the command npm install in the terminal while cd'd in my local folder, followed by npm run start. Like previously, a url should be provided to access this page in a browser highlighted next to local host.

Copying and pasting this url into a browser (or clicking on it in the terminal) shows you the result of this page! Images below are included of what mine looks like.

Repo found here

Blog 2

The second blog being used is called twelvety(source code). Follow the steps of the previous blog to get the blog up and running! Here is the output for the blog app!

Repo for this blog here!

Introduction with Docker

RyanArmani — Mon, 28 Feb 2022 03:28:38 +0000

Docker Introduction

Docker is an extraordinarily popular open source containerization platform among developers. Docker enables developers to develop, ship, and run applications through its implementation of containers. Containers are a piece of software that packages up any code and its dependencies, enabling applications to run on various computing environments regardless of differences between system requirements from one computer to another. This popular method of running and delivering apps opens a world of possibilities, with a common use being businesses rolling out updates to existing software, and reverting back to older stages of a software if any errors arise.

Starting with Docker

Docker utilizes a special file called a Dockerfile. a Dockerfile is a file that automatically runs a set amount of code within an application to assemble an image (an image is a set of code that creates a container within docker). One such example of a Dockerfile is included below, which is used to run the NewsAPI app from our class' project.
An example of a fully functional application, the NewsAPI, is included below as well to demonstrate the full capabilities of docker. This includes a series of links to news articles
One can utilize a query to find specific key terms

Create a docker file

To create a docker file for your own web app, you will need to clone a copy of your git repository (repo). One way to acquire the link to your repo is by navigating to your repo on github.com. Using my own repo as an example, navigate to the Code tab
, and select the https icon.
You will see a link to your repo. Copy this link, as we will be utilizing it in the docker environment. Navigate to "play with docker" (https://www.docker.com/play-with-docker), and scroll down until you find the "Lab Environment" tab.
Select "Get Started, and sign into Docker if prompted. Once signed in, select the "Start" button. You are now ready to set up your web app!

Inside the docker playground, on the left hand side of the screen, click the "+ Add New Instance" option.
In a moment, you should see a terminal-like sandbox environment appear in docker playground. We can input commands here! For our purposes, we will clone our git repo. Use the command git clone <your-repo-link-here>. For my web app, I used the command git clone https://github.com/IST402GroupB/ip-project.git.
We will now create a temporary file within our web app. Type in the command touch dockerfile. This command creates an image of a file within docker named dockerfile, which is a file that can be edited within the Docker Editor provided, and can be viewed by the ls -la command.

Lab 2 Option 2

RyanArmani — Mon, 31 Jan 2022 11:31:16 +0000

The aim of this portion is to explain how our group acquired relevant GeoIP data, specifically Latitude and Longitude, to map a User's location onto a Google Map and link them relevant Wikipedia pages based on their location, such as the city and state they are in.

Import

Starting at the top, we need to install something called a dependency. A dependency in JavaScript is some snippet of code from a third party, which we incorporate into our page for some sort of usage. Since we will eventually want to search a Wikipedia page, we import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js', which is a web component (microservice) that we can use to perform a query of Wikipedia pages. The second important and unique dependency is the import { UserIP } from './UserIP.js', which collects the UserIP attribute from the ./UserIP.js file, which is a file that collects the IP of the User in its own manner, discussed in Option 1 of this project. This dependency will give us the information of where a user is, which is information that will be used for locating coordinates.

Constructor

Our constructor has several elements within it. Super() calls the parent class' constructor (LitElement). This. refers to the object's original location and essentially changes its value within the scope of the constructor, assigning it a new value for all intents and purposes. We did this for UserIpInstance, locationEndpoint, long, and lat variables.

Async & Fetch

In order to retrieve the GeoIP Data based off of the user's IP address, we utilize the async function and Fetch API. Async allows one to write a promise based code w/o blocking the rest of the execution thread. A promise is a function that may produce a value in the future. Async allows the code to progress while these promises are yet to be fulfilled. Await is a keyword in the async function that waits for a promise to return a value before it is executed.

Fetch is an API that allows the user to pass a URL and make an asynchronous HTTP request. One such response may be the HTTP response OK, which affirms the HTTP request has gone through without problem. We can now use this knowledge to progress through the code!

We create a method called getGEOIPData utilizing the async function, making this method asynchronous and allows the code to run while this method awaits promises to return values to progress the code. The IPClass awaits to be updated with the User's IP. Once this promise if fulfilled and the IP value is returned, the fetch API progresses. The URL provided is the locationEndpoint, and the User's IP is provided. If the HTTP response is OK (resp.ok), the response is returned in a readable JSON file. The data from the fetch is printed to the console, and the latitude, longitude, city, and region name (State) of the User is returned based on the User's IP and is stored in the variables
this.lat, this.long, this.city, and this.state, respectively. We now have the User's geographic location! Easy!

Render

Now that we have the geographic values for the User's location, we can utilize this data to Google Maps the User, and produce Wikipedia pages based on the city and state of the user. The render function displays html code inside an html element. This function also runs each time a properties() variable changes.

To begin, the URL provided is a google maps link, with the latitude and longitude spliced into the link, which returns the exact location of those coordinates (where the user is located). To produce these results, an iframe is used, an html feature that enables one to produce a URL in a window. By utilizing the URL of the google maps link we created prior, a window of the User's location is produced in an iframe. A link to the google maps location is provided as well in the form of an href, or a link a user can click to a site.

The Wikipedia Query is achieved through the use of the <wikipedia-query> web component, which searches and produces three articles in total.

A Brief Intro to Web Components

RyanArmani — Mon, 17 Jan 2022 04:55:32 +0000

Required Software

Before starting with coding, one first needs the proper software! Required software will be VSCode and NodeJS. This introduction is primarily made for those with Windows devices, but many of the products mentioned are accessible by both MacOS and Linux devices to some capacity.

VSCode

VSCode is a popular code editor used by millions to interact with modern web and cloud applications. To install VSCode, follow the link here. For window users, you can download VSCode by clicking on the "Download for Windows" button provided on the home screen. For others, utilize the Download button in the top right corner!

Node.JS

Node.JS is a free open-source JavaScript runtime environment and is commonly used for web applications and web development. To install Node.JS, follow the link here and install the LTS (currently 16.13.2 as of this post). A picture of the screen to install for window users is included below. as a result of installing Node.JS, npm (the package manager for Node Javascript) should also be installed now. Click here to read more about npm.

Getting Started

You are finally ready to begin your project! First, create a secure folder in your file explorer to store your web component. Within your terminal, navigate to your folder. A screenshot is included below of how I myself navigated to my newly created folder, IST402, utilizing the "cd" command.

Once you have successfully navigated to your new folder, type the line "npm init @open-wc" as your next command. This will start Node.JS generator and prompt the user about the type of project to scaffold, as seen below.

The next series of questions asks about the , select "Scaffold New Project", and then select "Web Component". Using the spacebar, select "Linting", "Testing", and "Demoing". Do not select TypeScript. Give your web component a name (I named mine "hello-world-1", write the file structure to the disk by selecting "yes", and finally, "install dependencies with npm".

You can see your web application by utilizing the "cd" command in the terminal and utilizing "npm run start"!