DEV Community: Sparvero12

How to Utilize Vercel

Sparvero12 — Sun, 01 May 2022 22:08:52 +0000

What is Vercel

Simply put, Vercel is an easy to use and very powerful tool to build, launch deploy and maintain any kind of site you want. Vercel is a "Function as a Service" platform which is a type of cloud-computing service that allows the execution of code in response to triggers without having to go through all the steps associated with building and launching microservices. Of course, the service is "free" but a paid membership gives you access to more features, however, a free account should suffice for most users needs.

Get Started

To get started simply go to vercel.com and create an account. Since I primarily use github, I created an account with my github account. After you create your account, you'll be at the vercel dashboard.

Next simply click the New Project button. Immediately afterward you will be asked which repo you want to import.

Vercel will then present a page with configurations you can alter, this includes things such as the root directory, build and output settings and Environment variables. After setting the configurations the way you like, simply click the blue Deploy button and watch as Vercel deploys your website for you.

Just like that its done!
Link

My Experience with Vercel

My background in web development is very limited, I only started with Micro front end services a few months ago. That's my background, someone who never used a service like this before and never needed to. However, Vercel was like a dream to use. I simply imported my repo and clicked deploy and it worked! It was just simple and it worked. If I continue to need to deploy sites or test components, I will always use vercel before any other method.

Why Vercel over other CI/CD Methods?

Simply put the answer is simplicity. Vercel allows you to skip multiple steps, which eliminates the chance that errors occur during that step. It allows developers to deploy and test web components in easiest way possible, and when deployment and testing is easier, development itself gets slightly easier as well. After all, isn't that what web developers want? Something to make their lives easier that actually works?

Getting Started with 11ty

Sparvero12 — Sun, 01 May 2022 20:17:04 +0000

What is 11ty?

11ty advertises itself as an easy static site generator. After getting used to the tool, I would have to say this is not a false advertisement. 11ty is an extremely powerful tool for creating static sites(anything from blogs to archives and full sites) in a very easy way.

Hello World by 11ty

The first site I made using 11ty was incredibly basic, simply saying Hello world, however, the process used to make this simple 11ty site from scratch proved vital to figuring out how to use templates for more advanced websites. I followed this incredibly helpful guide guide to get started.
The first step is to make a directory and install npm as usual. Next, 11ty needs a package.json file to install, so create one in your new directory using npm init -y
you will then install 11ty into the local directory using npm install --save-dev @11ty/eleventy then run 11ty by entering npx @11ty/eleventy in your terminal. After installing the template files you'll use, I did echo '<!doctype html><html><head><title>Page title</title></head><body><p>Hello World</p></body></html>' > index.html and then echo '# Page header' > README.md After doing this run 11ty again.

Now you can go in and play with your blog and make it say whatever you want to. When you're done, npx @11ty/eleventy --serve will launch your static site on local host.

Hello World Repo

Using a template

For the second site I made using 11ty, I used this repo which is a more advanced 11ty template that can be customized. After following the instructions in the README.md file and edited all the markdown I came up with this:

Github Repo

HAX11ty

The incredible resource that is HAX also has an 11ty website template that can be used, this can be found here
This template is incredibly useful as it provides far more customization and deployment options then the previous template. The instructions provided in the template walk you through how to edit the files and was incredibly helpful. Especially when you're still getting used to using 11ty.

Github Repo

11ty vs HAX11ty

There is a noticable difference between these two templates. HAX11ty is far more advanced and gives you many more options. However, with complexity comes the potential for issues. I had a more difficult time getting my site to launch with HAX11ty as opposed to the 11ty template. This is not a reflection of the HAX11ty repo, rather the abundance of options and features made it easier for someone like me who was learning the tool to make a mistake more easily. Once the site launched however, I was far happier with the appearance and functionality of HAX11ty

Getting Started with Docker

Sparvero12 — Mon, 21 Mar 2022 22:14:32 +0000

What is Docker?

Docker is a very powerful tool that allows users to containerize applications. As for what that means, Docker defines Containers as

A standard unit of software that packages code and all dependencies so the application runs quickly and reliably from one computing environment to the other.

Essentially, it allows a developer to quickly package and deploy applications across environments.

Getting started.

Docker is a powerful tool yet has its own learning curve as with all programs.
to get started I'll be walking through using Docker with a news gathering API.
First, go to Play with Docker

Create a new instance in the Docker Lab
in the Docker terminal git clone https://github.com/heyMP/news-api-workshop && cd news-api-workshop
this will get you the repo needed to do this activity.
next you will need to cd into the repo. to do this run cd news-api-workshop then run cp dot.env.example dot.env
Above the Docker terminal there is a button that says edit, click that and navigate to the dot.env file you just created. as you'll see, you need an API key. to get this go to newsapi.org and sign up for free. When it gives you this key, copy it into the dot.env file where it says API key and press save

Now, go back to the Docker lab and press the port button and enter 4000. this should bring up a blank web page with some error message, thats OK! just copy the url from that page and paste it in the dot.env file where it says NEWS_ENDPOINT
Now, in the Docker terminal run docker-compose up after the command finishes it should look like this:

Now click on the port 80 button that appeared at the top of the lab, this will bring you to the functioning API and look like this:

API Connections on the Back End.

Sparvero12 — Tue, 01 Feb 2022 16:05:42 +0000

In this post I will be showing how to connect websites to APIs by using IP address longitude and latitude to render a google Maps iframe as well as a Wikipedia query tag.

GeoIP

GeoIP is a free-to-use API that collects your geographic information as well as your IP address from your Internet Service Provider (ISP). This information is then used for your lat, long, city, and state. After retrieving the information from GeoIP, it is important to set the properties for data population. Lat and long should be returned as integers while city and state should be returned as strings.

Fetching Data

Fetch API allows you to make HTTP requests to servers in web browsers. In this block fetch is used to retrieve location data from the IP address.

This code uses the URL set by locationEndpoint to fetch your location based on your IP address. Then we set the proerties lat, long, city, and state as properties in the api for use rendering the location in google maps and making the Wikipedia query.

Render

The render method is used here to return any values renderable b lit-HTML elements. This is where we generate the google maps and wikipedia query.

In order for this method of creating a Wikipedia link work you nust first run npm install @lrnwebcomponents/wikipedia-query
After that the package must be imported into the project as shown in this code block:
The command is used to create a wikipedia query tag from the this.city and this.region properties.

Link to my repo

https://github.com/Sparvero12/api-project-1

sources

https://freegeoip.app
https://www.npmjs.com/package/@lrnwebcomponents/wikipedia-query