DEV Community: Brin

Web Dev: Getting started with Vercel

Brin — Mon, 14 Mar 2022 01:51:02 +0000

What is Vercel?

Vercel is an amazing tool that allows you to build you own static sites with a few clicks of a button after setting up your account. Vercel makes the steps of deploying and scaling of your site almost effortless.

How to get started with Vercel

First, there are many ways to create an account with Vercel but I recommend to create an account through your Github. You can access the website using the link provided: Vercel Website
When creating your account through Github, it allows you to import your repositories with a few simple clicks of a button.

Vercel Demo using UI

In the picture below, is my first experience with deploying a static site on Vercel. When my instructor had given us the demo file, all I had to add was the ".env File" and copy and paste the content into the file.
Link to my deployment site
Here is a link to my Github repository if you would like to clone it and deploy it yourself:Vercel-Demo-Example

How to deploy the repo

First make sure you clone the repo or fork the repo provided above so that you can import it to your Vercel account. After that click "New Project" and make sure that you import the correct repository. After that the only thing that you need to do is to just type "dist" or "_site" into the output line on Vercel. In this demo we are going to use "dist" as the output. Once you do this, you are ready to deploy and now you can view the site! The cool thing about Vercel is when you update the Github repository to add more content, it will automatically update the changes to your deployment.

Deploying 11ty Projects using Vercel

Uploading your 11ty projects using Vercel is super easy and quick because they required little to no configuration. Here are my 11ty projects that I have deployed.

Link to my 11ty deployment
REPO My GitHub repo

Link to second 11ty deployment
Repo My Repo

If you haven't heard of 11ty check out my Blog post: Getting started with 11ty

Developer experience

Compared to the traditional CI/CD pipeline using GitHub, Vercel makes the experience of deploying your static site so much easier and quicker. The traditional CI/CD way of deploying your site can be extremely tedious and gives you little help on the errors you are getting. With Vercel, it was extremely clear when encountering an error during deployment.

Getting started with 11ty

Brin — Sat, 26 Feb 2022 22:13:18 +0000

What is Eleventy

Eleventy is a program that creates a simplified static site generator for web development. It works with many languages but on this post we are going to be using Markdown (.md).

My Experience with Eleventy

I have just recently started working with 11ty for the past few weeks and Let me just say, after overcoming the fear of not knowing what I am doing, I can confidently say it is an amazing tool that helps to simplify web development.

How to get started

Here are some links that you should look at to help you start the tutorials needed to learn how to use 11ty.

Making a Hello-World style Template (Easy)

This is how this template will look like:

Tips for Hello-World style template

When I first started to edit the documents in Visual Studio Code, I had no idea what I was doing. In order to learn how to edit the webpage you are creating, just start to type sentences into the "readme.md" File that this tutorial will show you how to create. After that wait for the local host to reload and you should see your changes on the local host page that you will open in your browser!

If you want to see my repository for this 11ty template looks like, visit my GitHub repository here:My Git repository for Hello-World style template

Eleventy Base Blog

This is my example of the base blog template that I Configured:

Home Page

Archive Page

About Page

This template was my favorite one to do because I really helped me to understand how 11ty works. If you simply just edit on of the Post.md files, it reconfigures the index.html file and changes the website for you. This is a really great template for learning how to reverse engineer the the file to create your own webpage.

My GitHub repository: Eleventy Base Blog

For my third 11ty template, I was going to use HAX11ty but i could not get yarn installed so I had just found another template on google called "Eleventy Netlify Boilerplate"in order to familiarize my self a little more with another template. Here is what it looked like after I had added my Blog posts to it:

Ill include a link to my repository for this project in case you wanted to see what I had changed compared to the original template. My changed Netlify Boilerplate

Summary

The project was a-lot of fun. You are more than welcome to clone the repositories of mine or even the base repositories to mess around with. Here i will post some of my working websites that I was able to upload using git hub pages:
My hello world website

Web Development: Docker

Brin — Fri, 25 Feb 2022 04:13:00 +0000

Docker, the leader of the industry for developing and maintaining websites. Docker is extremely powerful because it allows developers to package applications into containers. This has many benefits including saving time, money, and allowing for scalability. It allows allows for developers to test applications in its own "Container" in a timely manner.

How To Get Started With Docker

Honestly before 2 weeks ago, I had no idea what Docker was. I learned lot with how and why it works once I started to get hands on with docker. But before we get into that I wanted to address what docker needs in order to run your application.

DockerFile

The docker file is the most crucial part needed to set up an application in docker. Here is an example of a simple docker-file for the newsAPI micro service that I can post how to setup in docker towards the end of this post.

Basically what this "DockerFile" does is that is automates all the code and commands needed to setup the application on a new device(In this case the new device is the new docker instance.)

How to create a DockerFile within the Docker Playground

Step One: Add a new instance into your docker playground

Step Two: Clone the necessary project from GitHub Example: get clone "GitHub Link here" Note: Do not use parenthesis in your code for this step

Step Three: Create your Docker file by using: touch DockerFile

Step Four: You can now use the editor to insert the necessary code into your DockerFile (Use the screenshot above to help you setup the correct commands needed into your docker file.) Note: Some Applications will need more steps within the file to get it to run within docker.

newsAPI Micro service Fully setup

Here are some screen shots to show what the end result looks like once you are able to get the newsAPI Micro Service setup.
Screenshot 1(the end result):

Screenshot 2(Manually searching through the API data base for tesla info):

Links to get started with Docker

Link 1

Docker 101 Tutorial

Link 2

Walkthrough Setting up newsAPI microService with Docker

Front End Dev How We find the IP address and use it to find Longitude and Latitude

Brin — Sun, 30 Jan 2022 22:48:25 +0000

Brt5181

IP FAST API (Finding IP)

To start of I wanted to introduce how we get the IP address by using the IP Fast API. If you click on this link and open it in a new tab it should display all of the raw data that the api can output. This api is how we can find the IP Address show below.

In the UpdateUserIP() function, The method will fetch the ipLookUp which is the API link displayed above, then will check to see if it can be processed with this statement here:
return fetch(this.ipLookUp) .then(resp => { if (resp.ok) { return resp.json(); } return false; })
After this method verifies that we can use the json data. We then move to where we will pick apart the data so that we can use it to display and use with the the GeoIP that we will discuss later. Here is where we can convert specific parts of the json into variable:

.then(data => {
        this.ip = data.ip;

        this.location = `${data.city} ${data.country}`;
        return data;
      });

Now that we have the IP address stored as "this.ip" we can now tag the ip address as UserIP. Honestly I still don't completely understand the Tag process but I do know that it has something to do with the Lit Dependency.

We now have access to the provided IP address which now means we can use our IP Address with the next API in order to find out the Latitude and Longitude. The API we used to do this is: FreegeoIP. Again if you're interested to see how the data is portrayed with this API, Just click on the link and you should be able to see the array of data.

GeoIP API

Below will be the method that allows us to create a new element of the userIP class that we can use for the "Freegeoip" API in order to determine the Longitude and Latitude.

Combination of both API's

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.lat = data.latitude;
        this.long = data.longitude;
        this.city = data.city;
        this.state = data.region_name;
        return data;
      });
  }

As you can see in the method above, It will fetch the location endpoint which is the "FreeGeoIP" API and the User IP that was pulled from the "IP fast" API. The process again check to validate the JSON, then we can pull the data (latitude, longitude, city, and region_name) into their own variables.

GITHUB LINK TO PROJECT

Here is A link to our Groups Project: IST402 Git Project The code/Topics I discussed will be located in the source folder under "UserIP.js" (IP Fast API) and the "LocationFromIP.js" (Free Geo IP as well as the combination of the two)
If your interested in running the project, Take a look at "Intro to front end" Blog that will show you the tools necessary for you to run this GitHub project.

Intro To Web Development

Brin — Mon, 17 Jan 2022 02:25:35 +0000

Brian Trojan

How to Get NodeJS

Here is a link to NodeJS NodeJS Website After you get to the website click on LTS version and follow the instructions for installation after the download is complete.

What is NodeJS

From my understanding NodeJS is used to make a simplified scalable server to make it easier for a web developer to scale a website using javascript. It helps to save time by automating processes that could become very time-consuming.

How to Get NPM

NPM is a very simple installation Process. All you have to do is open terminal (For Mac and Linux users) and type in the following:

npm install

If you want to verify that NPM was successfully installed. Type into terminal:
npm -v This will give you the version that your system is running if it was successfully downloaded

open-wc

open-wc allows you to create a blank project in a very quick and easy manner. The command used to create a new project.
Here is a link to the video that helped walk me though creating a development environment: EdTechJoker: Intro to tooling and getting started

npm init @open-wc

What is NPM

NPM also know as Node Package Manager. The name is very self explanatory, It manages the Packages for the website that you are trying to create. It manages thousands of packages that help to save the developer a lot of time by automating that process for them. Npm also allows you to view the "Finished View" of your work by using the command npm start

Myself being new to web development, I was able to create a simple local host using the npm start command.

VS Code

Visual Studio Code is a great coding environment to add/edit your project. It it very helpful color coding different parts of you code and also has a debugging feature that could help you with errors within your code.

Lit

Lit is a great resource to help you get started with learning JavaScript and HTML. here is a link to what I had used to get familiar with a simple project. Lit Intro to JS and walkthrough