DEV Community: jfz5219

Vercel

jfz5219 — Mon, 14 Mar 2022 02:32:17 +0000

Vercel is a platform that enables developers to focus on the frontend side of an application because the backend is abstracted away from them. It handles the building process and deployment of an application. If you link your GitHub repository to Vercel, any changes pushed to the repo will automatically be deployed to the server. This speeds up launching and increases the scalability of a website.

There are two type of functions that can be deployed, Edge Functions and Serverless Functions.

*Edge Functions: *
From my understanding, code is able to run closer to the user side because it runs through a middleware. The application is also built on V8 runtime. With these factors, startups are very fast.

*Serverless Functions: *
Serverless functions allow developers to host their code on a cloud infrastructure.

Let's get started

First connect your GitHub account to Vercel. You can connect your repos on vercel or locally.

On Vercel
Then, create a new project. You can import any of your GitHub repos into Vercel just by searching them.

Locally
Once you are in your GitHub repo locally, add this in you command line.
npm i -g vercel

Use this to build and deply.
vercel

Follow through the series of steps in the command line to deploy your application.

I set up vercel locally through my repo called ist-vercel-demo. An extra step I had to do was add an .env file for this to work locally. Here's how everything looked when I finished the steps.

Quickstart and GitHub CI/CD Pipeline

You can even deploy templates provided by Vercel to see how fast the process is.

Templates

I used the 11ty template and with a few clicks, I was able to build and deploy this website.

Compared to GitHub's CI/CD pipline, I think it was easier due to the user friendly UI. GitHub required a bit more setup. For example, a yml file is needed for the workflow. Also, you have to navigate to the Pages tab to get the website's URL. GitHub had trouble building one of my 11ty website, where as Vercel had no problems.

I built and deployed three 11ty based websites using Vercel. Just like the quickstart, it was very easy to set up, just select the repo you want to import from GitHub.

Website #1: 11ty-hello-world

Website #2: 11ty-hello-world (GitHub had trouble building this application)

Website #1: 11ty-hello-world
This deployed successfully but when visiting the website, I kept getting 404 errors.

Checkout Red Hat

This website uses Vercel to quickly build, deploy, and do test iterations.
Red Hat

Why is Docker Powerful and How to Get Started with "Play with Docker"

jfz5219 — Mon, 28 Feb 2022 00:38:50 +0000

Why use Docker?

Docker is great tool you should use when developing an application. Many new developers probably start building a monolithic application. This could be when all your services, like your server, database, files are built on top of one operating system in a VM. There may be some downsides to this. For example, if there is an error with one of your services, you might risk of messing up the other services by trying to fix that one issue.

With Docker, you are able to separate these services into containers so we can get rid of the dependencies they might have with each other. By doing this, these services will be self-contained. Now, it can exist by itself with all resources and dependencies encapsulated. Once we have these containers, we can move onto a microservice architecture.

I think of microservices as Lego pieces because of how flexible a Lego structure is. If one piece breaks, you can effortlessly replace it with another. When an application is built on microservices that comes in a form of containers, these containers are like Lego pieces that can be easily replaced. Let's say your server, in a container, is causing errors. This will not effect your container with UI components and you can just make to the container update with a new server (if you decide to).

Docker also works great in a collaborative setting. When another developer needs your application. They will already have the everything set up because Docker will help create the same environment that you worked with onto their working environment. This makes your application very portable.

Another aspect of docker is its ability to automate work. You may have had to change directories, copy files, install dependencies when creating an application. However, all of this coding in your command prompt can be written to a dockerfile.

Play with Docker

Using Play with Docker is a great way to introduce yourself to docker. Follow this tutorial first. It will show you how to create a few different type of containers. Once you are familiar with the concept of containerization, try using "Play with Docker". I used this to do an activity that I will discuss next.

Here is a good video explaining Docker:
https://www.youtube.com/watch?v=eGz9DS-aIeY

NewsAPI Activity

Our class did an activity where we had to retrieve news from a news API and display it on a component. This required the use two containers; a server container and a component container. Each container needed a dockerfile and by using a docker-compose.yml file, we are able to run the multiple dockerfiles.

component dockerfile

server dockerfile

docker-compose.yml

How to Create a DockerFile

By using what I learned from the NewsAPI activity, this is how to create a dockerfile for the NASA image search repo(an assignment on components I did for class).

First, create a file called Dockerfile. Then, we need a base image, I'll be using the same one from the NewsAPI example. This is what I think a dockerfile would look like for my NASA image search repo.

FROM socialengine/nginx-spa

WORKDIR /IST402/nasa-search-image

COPY package.json ./
RUN npm install

COPY . .
CMD["npm", "start"]

I tried following the example from the NewsAPI dockerfile.

11ty

jfz5219 — Sun, 27 Feb 2022 23:03:47 +0000

First, try to get an understanding of what a static site generator is. This might be different from what your used to, so it helps to understand why you would want to get your hands on with this approach

Here is a website to learn more about static site generators.
Link: https://www.netlify.com/blog/2020/04/14/what-is-a-static-site-generator-and-3-ways-to-find-the-best-one/

To start, I tried creating three types of 11ty based websites.

Hello World Website

I made a repo on git hub named 11ty-hello-world and cloned it. I changed my directory to 11ty-hello-world and followed this 11ty documentation to get started. I added text to the README.md file where 11ty would compile these changes and update them on the index.html file.

Link to website: https://jfz5219.github.io/11ty_hello_world/

Eleventy Based Blog

I used this template to set up the second 11ty website. At this point, I was able to better understand the structure of 11ty. I tried adding an additional navigation tab called "Practice Tagging". This was all done under the practice.md file that I created. I just had to add these headings on top of the code.

---
layout: layouts/post.njk
title: "Practice"
templateClass: tmpl-post
eleventyNavigation:
  key: Practice Tagging
  order: 4
---

No website, will explain later.

Hax11ty Website

This one was fairly easy, all I had to do was use this template, clone it, yarn install, and yarn start. Originally, npm was used, but I ran into some problems, so yarn is used instead.

Link to website: https://jfz5219.github.io/hax_11ty/

Compare 11ty to HAX11ty

The first thing I noticed was how easy it was to get started with HAX11ty. There was no need physically install eleventy. I am pretty sure this step is automated in the code. Where as setting up an 11ty website required a bit more steps even though it wasn't difficult to understand. Personally, I thought structure of 11ty was easier to understand and it's because the website is simpler compared to HAX11ty. The UI of HAX11ty looks more user-friendly, but the 11ty-based-blog can probably be changed with more add-ons.

CI/CD Pipeline

Here is a great video explaining why you would use GitHub workflow and how to get started with it.
Link

No Link to Eleventy Based Blog!?

I was able to successfully set my workflow. However, when time came to build and run the code, I got an error. I believe GitHub was trying to use the Liquid language to process Nunjucks code. I had no clue on how to fix this, so that's why my GitHub page was not working.

Links to Repos

Hello World Blog
Eleventy Based Blog
Hax11ty

Using Your IP Address to Find Your Long/Lat Coordinates

jfz5219 — Mon, 31 Jan 2022 08:10:16 +0000

ipLookUp API: Finding My IP Address
This part was completed in my previous lab 2 activity. I basically used the ipLookUp API to fetch the IP of my current location. I will be posting my source code at the end, but you can find this part under the UserIP.js file.

ip-api API: Finding My Coordinates
For this part, I was suppose to use the GeoIP API to find my coordinates, but it was not cooperating with me. I kept getting a 502 Error.

After failing to find a solution, I decided to use another API and stumbled across ip-api. Similar to GEOIP, its response contained location data. It was neat that this API automatically found my IP address and used it to locate my coordinates.

These are the information returned in json format:

{"status":"success","country":"United States","countryCode":"US","region":"PA","regionName":"Pennsylvania","city":"Williamsport","zip":"17701","lat":41.2382,"lon":-76.9978,"timezone":"America/New_York","isp":"Comcast Cable Communications, LLC","org":"Comcast IP Services, L.L.C.","as":"AS7922 Comcast Cable Communications, LLC","query":"73.230.71.189"}

However, to fully understand this assignment, I needed to incorporate what I had in my second lab. Luckily, ip-api had an option for developers to manually input an IP address.

In the getGEOIPData() function, an instance of UserIP(named IPClass) was created. Next, using IPClass's updateUser() function, my IP address can be returned. In fetch, both the locationEndpoint url("http://ip-api.com/json/") and my IP address is combined. ip-api will then use this information to respond with my location data. I was able to plug this information into the Google Maps URL and the wikipedia-query element.

Result
This is how my website looked like when everything worked!

Links

Discovering LIT

jfz5219 — Mon, 17 Jan 2022 04:59:48 +0000

I thought I knew some basics of Javascript and CSS, but I was wrong. To begin, I'm writing this blog for one of my IST lab assignments. I first had to complete a list of thing.

List:

Download VSCode, NPM, and NodeJS
Create GitHub account
Link SSH

NPM is important because it provides tools that Node.js files may need. It also helps us interact with and create repos.

I already had VSCode and NPM, so all I needed was NodeJS. To download NodeJS, I search type it into Google and clicked the first link. I wanted to download the the recommended version and stuck with Ver. 16.13.2.

I had a GitHub account and just needed to create a repository for this lab assignment. Then, I went on a tangent on what a SSH was and how to find my keys. I ended up using this tutorial on setting up my SSH keys for GitHub.

With everything installed and ready I ran over the LIT tutorials provided by our professor. This was when I realized I knew nothing about Javascript. The tutorial started off easy, but got harder as more components came together. I was kinda lost at the last page of the tutorial, but I think it was enough for me to complete the lab.

Lab 1: Create a Hello World Element

I looked over the simple sample code given to us as a reference and documented what I understood and didn't. Deleting and checking what the code would produce helped me understand some components. After studying the code, I renamed all the element components to "Hello World". I knew I was correct once it produced the same results as the sample code. However, all of this was done in the LIT tutorial website, I still had to run my code using NPM. In the end, I couldn't completely finish the assignment because it didn't run and I had errors. I'm still trying to figure out what happened and if there's no result, I will head to my classmates, professor, or TAs for help.

Update Jan 19

With the help of some of my classmates, I was able to figure out what went wrong. I should have looked over the professors tutorial because I completely skipped over some steps for the "open-wc". Once everything was installed, then I could run "npm start".

I still came across some errors after running my code and I'll go over some of them.

First, my "HelloWorld" class was not capitalized so it looked like this (picture below).

Second, I did not import the source correctly. I should have added two dots to get to my hello-world.js directory, instead I only had one.
(WRONG, it should be src="../hello-world.js")

After patching up everything and running "npm start", the outcome looked like this.

You can check out my code on GitHub.