DEV Community: Edwin Reyes Rodriguez

Getting Started With Vercel

Edwin Reyes Rodriguez — Mon, 14 Mar 2022 03:39:47 +0000

Are you sick and tired of configuring your Github pages yet still failing to deploy your project? If you are, I got a solution for you.

Vercel

As you know, there is sometimes always a solution to our problems. With Vercel, we can skip the tedious GitHub pages workflow and build and deploy projects faster and more scalable.

So what is Vercel? Vercel is a platform for building front-end frameworks for static sites that developers can integrate with headless content, commerce, or database applications. With their frictionless developer experience, they handle the hard stuff, like deploying, scaling automatically, and providing personalized content worldwide.

A couple of weeks ago, I struggled to deploy a recent lab to Github pages, and their workflow was just complicated and time-consuming. When I found out about Vercel, I quickly imported the repo and deployed my project faster than I could've ever thought. An excellent user experience, in my opinion.

So enough chit chatting, let's deploy a project using Vercel.

Getting Started

First, create an account with Vercel.
Fork and clone this repository onto your local machine.
There is a .env file needed for this to work locally. Create a .env file in the git repo you cloned down locally.
Inside this file add this content and commit your changes:
In your Vercel account create and import your repo.
Quickly configure your project, override the output directory with dist, and deploy the project.

Once you have successfully deployed your project, a confetti animation will display, showing you the Vercel site and link you can access anytime from anywhere.

View Vercel site

Thoughts?

There's a big difference when deploying your CI/CD pipeline in Vercel comparing Github.

I found it very useful and deployed three other recent labs I have accomplished. Please take a look at them and view how effectively Vercel is.

11ty
Vercel site: https://eleventy-seven-orpin.vercel.app/

hello-world-11ty
Vercel site: https://hello-world-11ty.vercel.app/

11ty template
Vercel site: https://11ty-template.vercel.app/

Now that you have a view and deployed your project with Vercel, I would like to know your thoughts on your overall experience. Would you consider deploying projects in Vercel instead of Github?

Also, if you're curious, I have been lately learning micro frontend architecture and its benefits. If you would like to learn more about it, please check out this article by Michael Potter on How to use micro frontends to architect web apps.

Resources

Utilizing 11ty To Make Powerful Blogs

Edwin Reyes Rodriguez — Mon, 28 Feb 2022 03:39:35 +0000

Eleventy is a simpler static site generator. We will be using their template to build three simple blogs.

Getting Started

Before getting started, Eleventy v1.0.0 requires Node 12 or newer. Use node --version on the command line to find your local Node version. If you don't have node, you'll have to install it here.

To make a simple quick hello-world style blog using 11ty, open up your terminal and run

echo '# Page header' > README.md
npx @11ty/eleventy

After running the code above, your output would be

Writing _site/README/index.html from ./README.md (liquid)
Wrote 1 file in 0.03 seconds (v1.0.0)`

You can add content in the README.md. The power of 11ty would automatically convert your markdown file into raw HTML.

Run npx @11ty/eleventy --serve to start up a web server. Then open http://localhost:8080/README/ in your web browser of choice to see your Eleventy output. You can view my example here

Utilizing Existing 11ty Template

We will be using an existing 11ty template. To get started, first head over to the repo and click the "Use this template" button. You can also view my example here.

Next, clone the repository to your local files. Open up your terminal and run git clone (your repo url).

You can add or remove the content in the 'post' directory. This template comes with pre-generated CSS, but you can modify it in the CSS folder. 11ty would handle the backend and link your post to other blog posts. Here's an example on how to add content.

To view your blog, you must first install the required dependencies by running npm install. Then, run npx eleventy --serve. Your result should look like this.

You can view real-time updates as you modify your blog. To cancel the server, click ctrl + c.

Another existing template we can utilize would be Hax11ty. This is a pre-generated template by btopro.

To get started first, head over to the repository and click the "Use this template" button.

Next, clone the repository to your local files. Open up your terminal and run git clone (your repo URL).

You can add or remove content in the contents folder. Here's an example of mines.

To view your blog, you must first install the required dependencies by running npm install. Then, run npm start. Your result would look like this. View my example here

Now that your blogs are up and running, you can select the best template to use and add as much desired content as you need.

11ty vs Hax11ty

The Hax11ty template is much cleaner and better organized compared to 11ty. Using the 11ty quick started requires more dependencies and a lot of coding to make your site more pleasing. Using a pre-existing template gives you more freedom as you most likely run into less bugs.

11ty is such a powerful tool allowing you to build quick static sites. You can check out how I did the three blogs above in the links below.

Repository

11ty hello-world: https://github.com/reyes-edwin/hello-world-11ty
11ty template: https://github.com/reyes-edwin/11ty-template
hax11ty template: https://github.com/reyes-edwin/Hax11ty

The Power Of Docker

Edwin Reyes Rodriguez — Mon, 28 Feb 2022 03:38:49 +0000

Initially, I had never heard of Docker or even viewed examples of utilizing it. However, I now understand why Docker is so powerful after playing with it a bit.

Today I will cover the effectiveness of Docker, getting started with playing with Docker and how to create a Dockerfile.

What is Docker?

You might be questioning yourself, "what the hell is Docker?" Trust me, I was there too. Docker is an open-source platform that lets developers build, ship, and run applications. Docker is powerful because it makes it easier for you to separate your applications from your infrastructure, enabling rapid software delivery.

How does it work?

Docker works by providing a standard way to run your code. Docker is an operating system for containers. Just as virtual machines virtualize (remove the need for direct management) server hardware, containers virtualize the operating systems on servers. Each server has Docker installed and provides simple commands for building, starting, and stopping containers.

Getting Started

To get started, head over to the Docker 101 tutorial under tutorial. You can either take the tutorial on your desktop or in the cloud. In this example, I would be taking the tutorial in the cloud found here.

To access their interactive playground, you first need to create an account. If you have an account, simply login in using your Docker ID and password.

Once you log in, you'll see your own Docker VM. To launch Docker's tutorial, you first must create an instance.

Next, in your PWD terminal, write the following command

docker run -dp 80:80 docker/getting-started:pwd

This would create a container in port 80.

After successfully running the command, port 80 would display a container containing the Dockers 101 tutorial. Throughout this series, you will learn the commands for Docker while seeing the benefit of why building a microservices infrastructure is better instead of a monolithic one.

Congratulations, you have reached all the necessary steps to start with Docker. Now head on over to the tutorial and learn how to utilize Docker in your applications.

NASA API

In this sections I would be teaching you how to create a Dockerfile for one of my latest project.

To run the NASA API project in Docker, we need to ensure our Docker file has the needed scripts.

In Dockers playground, first, clone our repository and cd into the folder.
Next, we need to create a Docker file. In your PWD type touch Dockerfile.
After creating the file, you'll want to open the editor's tab and locate the Dockerfile.
Our Docker file needs some scripts to run. In the Dockerfile, enter the following command and save the new changes.

FROM node:12

WORKDIR /home/node/app

COPY package.json ./
RUN yarn install

COPY . .

CMD [ "yarn", "start" ]

Next, we need to build the container image using the docker build command. docker build -t nasa-image

Let's run the application now that we have an image! To do so, we will use the docker run command.

docker run -dp 8000:8000 nasa-image
After running the command open your local host with the port 8000.

At this point, you should have a running Docker application.

As always, thank you for reading, and I hope you have a wonderful day.

Using The Javascript Fetch API To Get Data

Edwin Reyes Rodriguez — Mon, 31 Jan 2022 04:13:58 +0000

Today, I'm going to walk you through how to wire up some data up to a Wikipedia-query tag so that when your IP address changes, your location will change, and so will the Wikipedia article.

You will see something like this.

Getting Started

For this lab we utilize GeoIP to retrieve our lat, long, city, and state. Here's how our constructor looks.

  constructor() {
    super();
    this.locationEndpoint = 'https://freegeoip.app/json/';
    this.long = null;
    this.lat = null;
    this.city = null;
    this.state = null;
  }

Next, we set the properties that we later use to populate our data. Here we return our lat and long as integers and our city and state as strings.

  static get properties() {
    return {
      long: { type: Number },
      lat: { type: Number },
      city: { type: String },
      state: { type: String },
    };
  }

Fetching the data

Before fetching the data from our API, let's talk about what fetch is. Fetch API is an interface that allows you to make HTTP requests to servers from web browsers. We utilize the fetch to retrieve our location based on our IP address in this lab. See how we utilize fetch in our lab.

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

        return data;
      });
  }

In this code block, using the URL we set to locationEndpoint we were able to fetch our location based on our IP address. We used fetch to make an HTTP request to the server holding the API, then if the response was "ok," we will return the API call as a JSON. Here's what the API response should look like.

{
"ip": "102.16.28.100",
"country_code": "US",
"country_name": "United States",
"region_code": "PA",
"region_name": "Pennsylvania",
"city": "State College",
"zip_code": "16802",
"time_zone": "America/New_York",
"latitude": 40,
"longitude": -77,
"metro_code": 574
}

We then set our properties lat, long, city, and state to the variables the API returns to access the data. In this case, we only need the latitude, longitude, city, and region_name, which means the state you are in.

Render()

render() {
    // this function runs every time a properties() declared variable changes
    // this means you can make new variables and then bind them this way if you like
    const url = `https://maps.google.com/maps?q=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed`;
    return html`<iframe title="Where you are" src="${url}"></iframe>
      <br />
      <link href="https://www.google.com/maps/@${this.lat},${this.long},14z" />
      <wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>
      <wikipedia-query search="${this.city}"></wikipedia-query>
      <wikipedia-query search="${this.state}"></wikipedia-query> `;
  }

This method is invoked on each update to perform rendering tasks. This method returns any value renderable by lit-HTML's elements. We pass the lat and long properties to get the Iframe working. Whenever these properties are changed, lit render the information and updates. Here's the results.

Wiring the wikipedia tags

In order to get the wikipedia tag working we first must the following.

Create an HTML link that sits below the iframe that links to the location on google maps.
Pass the lat, and long properties.
Next run npm install @lrnwebcomponents/wikipedia-query
In order to use the we must import the tag at the top of your file to use it import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js;'
Next, in our render function add in the wikipedia tags. Wikipedia's API is documented here
The search property takes${this.city}, ${this.state} and the comma then a space to ensure the tags work properly.

After following the steps above your results should look like this.

Based on your location the Wikipedia tag will display information of your state and city.

Now you have successfully fetch an API to wire Wikipedia tags. Way to go!

To view the complete project click here.

Resources

How To Build A Basic Web Component

Edwin Reyes Rodriguez — Sun, 16 Jan 2022 21:48:49 +0000

Initially, I only knew three things when I started web development: HTML, CSS, and Js. Now there are hundreds of libraries and frameworks to choose from. If you're new to web components, you're at the right place. In this tutorial, I will show you how to build a simple web component using the Lit library.

First thing first.... What are web components?

A Web Component is a collection of web platform APIs that can be used to create custom, reusable HTML tags that can be used in web pages and web apps. Learn more

Web components are based on existing web standards. The features needed to support web components are currently being implemented to the HTML and DOM specs, allowing developers to extend HTML elements with encapsulated styling and custom behavior.

Software Installation

Before we get started, you first will need to install some tools.

Node.js is an open-source, cross-platform runtime environment for executing javascript code. Due to its event-driven, non-blocking I/O model, Node.js is lightweight and efficient, making it ideal for data-intensive real-time applications to run across multiple devices. When you also install Node, you install NPM. NPM is a "package manager" that simplifies and speeds up the installation of Node "packages." A package, also called a module, is just a code library that extends Node by adding useful features.

Once you arrive at the site, you'll want to download the recommended file. To test if node is installed, open up your terminal, type in node on the command line, and hit enter. A welcome text with the latest version of node should appear.

If you get a message saying zsh: command not found: node retry downloading Node again. In case you still have trouble installing Node, please refer to this article.

Yarn is a package manager for your code, enabling you to share and use (e.g. JavaScript) code with other developers. To install Yarn, open up your terminal and type npm install --global yarn. Once installed, run yarn -v, and the latest yarn version should display.

Once these tools have been installed successfully, we can begin building our first web component.

Getting Started

1 - Start by creating an empty folder and naming it what you like.

2 - Inside the directory you just created run npm init @open-wc. We will use Open Web Components to get started. You can learn more about it here. If successful, you should get the same results as me.

Next, you'll want to start a new scaffold project. Simply hover over it and press enter and select web component.

After achieving this, you'll want to select all available options. You can do this by pressing a and hitting enter.

3 - The next question prompts you if you "would like to use typescript? " We are going to select no. The next step is to give our web component a name. Note: You need a minimum of two lowercase words separated by dashes—for example, hello-world.

Next, we will select "yes" for our file structure and install all of our dependencies with Yarn. If you weren't successful installing Yarn, you could use NPM instead. After a few seconds, all of your dependencies should be installed, and a message saying, "You are all set up now!" would display.

Congratulations!! You have successfully created your first web component. To launch the site, first, you need to make sure you are inside the directory of the web component you just named. You can do this by typing ls and then cd into the folder. Once inside the directory, you need to run yarn start or npm run start.

A website would launch every time you start your web component. To terminate the application, press [control] + c.

If you have trouble completing the steps above, I recommend watching this video of my professor walking through the installation process.

Next Steps?

Now that you have created your first web component, I recommend you practice and understand the code under the /src file.

First, you'll notice the import statement at the top of your javascript file. Here we import the HTML, CSS template literal tags that can be used and rendered with Lit Elements. The Lit element is the base class that manages element properties and attributes.

You might be wondering what the hell is Lit? Lit is a simple library for building fast, lightweight web components. With its boilerplate-killing component base class, it offers reactive state, scoped styles, and a declarative template system. You can build just about any type of web interface with Lit.

In the meantime, you can check out Lit's interactive tutorial on how easy and fast it is to build fast, lightweight web components.

Also, check out Lit's playground, where you can view and play around with different elements. I recommend you try to resemble the component example; it's simple and an excellent start for beginners. Check out my repository and see how I did.

Now that you know how to build your first web component keep exploring! The more you practice, the better you get at it. So happy coding!

Resources