DEV Community: Rajiv Thummala

Vercel Based Development Workflows: The Next Advent in the Rise of Microservice Architecture

Rajiv Thummala — Mon, 14 Mar 2022 01:12:56 +0000

When it comes to application deployment, there are a myriad of tools that can be explored and leveraged. With a field as non-static as software development and deployment, however, it is vital to consistently survey the tools on the market to optimize your projects.

Perhaps one of the most potent and swift tools to use in website deployment currently is Vercel

Vercel totes a multitude of benefits such as free domain names, automatic deployments, a marketplace, serverless functions, and the ability to connect teams. In my opinion, it is one of the easiest and non-taxing platforms to deploy a website.

As adumbrated by medium.com,

By connecting the GitHub repository in the Vercel you can simply deploy the master or main branch to the Vercel domains.

Functions as a Service Architecture
What exactly is meant by functions as a service architecture? Searchitoperations explains it quite well.

Function as a service (FaaS) is a cloud computing model that enables cloud customers to develop applications and deploy functionalities and only be charged when the functionality executes. FaaS is often used to deploy microservices and may also be referred to as serverless computing.

Essentially, in layman's terms, the functions as a service architecture is a format in which you can create an application that enables you to sell its individual functions.

When leveraging the function as a service architecture, developers do not have to worry about things such as server allocation and backend services. This is because the serverless provider takes care of all these extra tasks. Thus, all you have to do is write the code for your application and you can let Vercel handle the rest.

There are numerous other pros to using this architecture as well. They are outlined by CloudFlare as follows:

Improved developer velocity
With FaaS, developers can spend more time writing application logic and less time worrying about servers and deploys. This typically means a much faster development turnaround.

Built-in scalability
Since FaaS code is inherently scalable, developers don’t have to worry about creating contingencies for high traffic or heavy use. The serverless provider will handle all of the scaling concerns.

Cost efficiency
Unlike traditional cloud providers, serverless FaaS providers do not charge their clients for idle computation time. Because of this, clients only pay for as much computation time as they use, and do not need to waste money over-provisioning cloud resources.

Thus, now you may start to get an understanding of why microservice software engineering is so vital to learn currently. With architectures such as function as a service lowering the amount of resources that must be consumed, it is a no brainer that companies are enticed by this advent. After all, who wouldn't want to save money and lower the stress on developers at the same time?

Specific Development Challenges that can be solved with leveraging this architecture is outlined quite well by Michael Potter of Redhat.

Limited deployments: Monoliths, not always but typically, opt for long sprints between deployments. This reduces the risk of new features introducing regressions to its extensive feature set but makes it more difficult for teams to plan and launch new features.

Feature collision: Every feature in one bucket sometimes introduces regressions to other functionality (you'd be surprised how often this happens). This is why core teams try to limit the number of new features they introduce concurrently.

Limited technology stack: With monoliths, you have to work with the available tools. Integrating new technologies within the monolith is often a significant lift. Also, introducing new technology to the monolith means more responsibility for the team dedicated to ensuring uptime.

Ownership: When you have large teams supporting a monolith, the responsibility for a feature may bounce from one developer to another. This sounds good on the surface but often leads to developers having to maintain product features they aren't entirely familiar with.

Getting started with Vercel

Before we go ahead, you can view my live vercel demo.

To demonstrate how to get started with Vercel, we are first going to be working with it locally and then we will go over how to deploy your own repository. In particular, pay attention to the contrasts between Vercel and GitHub and how relaxed the deployment functions.

To start, clone this repository to your computer.

CD into your cloned repository and run vercel dev

Open the repo in vscode and make a file called .env in the root. Add this to the contents of the file.

This is an "environmental variable" file. This is a common thing on these sorts of service to keep security sensitive variables out of version control.

Once you are done, save and then run npm install. Next, we are going to run the following command: vercel dev

This should build your site in a local host

Thats it! It is very simply to deploy.

What exactly is vercel dev? The vercel website explains it quite well.

Single-Command Local Development
Typically, developing a website or application involves a series of steps:

Cloning repositories
Fetching packages
Synchronizing and matching ports
Downloading the right runtime for each programming language > And so on... >Even for modern projects, we often need to look up the README.md file for instructions about installing dependencies, and then tell a package manager to run developer scripts.

Vercel gives you a different contract. It is always Vercel dev.

Running the command "Vercel dev" will build your application swiftly and with ease.

Deploying publicly

Before we start, you can look at my public Vercel repo of the demo we just worked on.

Head over to vercel.com and get your GitHub account connected.

Go to your dashboard. Select new project

Import the repo that you want to deploy. Adjust the build settings if needed. My project builds out of a folder named "public" so I needed to let Vercel know.

Now select deploy and your site should be running!

**Here is one of my 11ty sites deployed on Vercel and GitHub Pages.

_Vercel was 100x time easier than getting the GitHub pages to function correctly. _

There are other CD/CI pipelines on the market that can be used as well. For instance, services such as monorepo enable you to easily generate a version controlled repo that contains a lot of projects. However, Vercel is in my opinion better than this service as monorepo often contains logically independent projects that have to be run by different teams/organizations. As stated by semaphoreci.com,

Doing CI/CD with a monorepo is a challenge. By default, every code change would launch a pipeline that would build, test, and deploy every single project included in the monorepo. This is time-wasting, costly, and a risky.

How Shoelace uses Vercel to deploy builds per branch

Now we are going to be looking at how Shoelace leverages Vercel to deploy builds per branch.

Start by cloning this repo and then getting it linked to your Vercel account. Follow the same procedure aforementioned.

Note that shoelace is building out of dist

In Vercel, the main branch should essentially be perceived as the production. Every time a pull or merge request is made to a specific branch, Vercel generates a unique deployment. This enables a developer to view these changes in a previewed environment before merging this with the rest of your branches. Now it may start to become clear why shoelace leveraged Vercel in particular, as it enables this large stack of components (see image below) to be deployed and previewed in specific/separate branches.

Shoelace also configures Vercel directly by leveraging the vercel.json file. This file as stated by vercel,

The vercel.json configuration file lets you configure, and override the default behavior of Vercel from within your project. This includes settings for:

cleanUrls
trailingSlash
redirects
rewrites
headers

You can find my other 11ty deployments with vercel here:

base blog with vercel

hax with vercel

It is clear that microservice architecture is the future and Vercel is certainly playing a role in this revolution. Thanks for reading my post!

11ty Introduction and Getting Started

Rajiv Thummala — Mon, 28 Feb 2022 05:39:24 +0000

As asserted by Stephanie Eckles of smashingmazine.com,

Eleventy (aka 11ty) is rising in the ranks among static site generators. This Node-based builder is attractive due to its zero-config starting point, purely static output, and ease of achieving the coveted top Lighthouse performance score of four perfect 100s. Let’s dive into what else makes it unique, and learn about some essential concepts to help you successfully get started.

Well why learn how to use 11ty? With the advent of microservice architecture reaching the forefront in the coming years, it is vital that it is added to your toolkit

Easy to leverage and deploy with technologies such as Netlify, 11ty can be great for compiling files in your working directory to static HTML files. In fact, the process is barely taxing as there are many templates online to aid in the development process.

11ty is great for compiling files in your working directory into static HTML files. There are a multitude of templates online that can be leveraged to aid in this process. Many of these templates that you find online are created to function effortlessly with Netlify. However, to get your site up with github pages, it will take a tad bit more effort. In this tutorial we will be making 3 different blogs that leverage 11ty and are hosted on github pages.

These are my completed blogs that display my different dev.to posts. You can view them before we start learning.

Scratch 11ty
Source Repo
Live Github Pages Site

Hax 11ty
Source Repo
Live Github Pages Site

With a Template
Source Repo
Live Github Pages site

Building an 11ty Site from Scratch and Deploying to Github Pages

First we are going to be running through how to work with 11ty from scratch. I did this by following this tutorial. This video was also of great help and offered insight into the inner workings of 11ty.

Start by creating a new folder and then CD to it in the terminal. Run the following command:
npm install @11ty/eleventy

From here you want to open up the folder in Vscode or your preferred IDE.

Open up package.json and change your scripts to match this screenshot.

Next create a new file in the root of your project called ".eleventy.js"

Add the following into this file.

_Make sure your output is set to public because this where your index.html files will be generated. _

Your next step is to make a source folder (src) with a markdown file named index.md. Github pages looks for an index when deploying so make sure that everything is lowercase as this process is case-sensitive. Addd some content to this file and npm start to check if everything is working. If you are getting the cannot get error, trace back your steps to see if you have made any mistakes with the naming of your index file.

In order for 11ty to function, it looks for a folder called _includes. Create a folder called "_includes" in the src folder.

Now we are going to add 2 njk files in this includes folder: base and post.

For VSCODE users: if your code is in all white look for plaintext at the bottom in the blue bar and type in HTML

Go back into index.md and make sure the layout is set to your new base.njk file as it is in my repo.

Now make a blog posts folder in your src folder and add a json file called blogPosts.json --> fil the content as I have done here

You can make your posts as well inside of this folder but I opted to make them in the root to make it easier with the deployment to github pages.

Make markdowns for your different posts and then head into your index markdown. Link to your different posts that you created as depicted in this screenshot.

What follows is really important if you are deploying to github

Make a .github folder in the root with a folder named "workflows" inside of it. In this workflows folder create a yml file "main.yml"

Fill the file with the following code.

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: ACTIONS_ALLOW_UNSECURE_COMMANDS
        id: ACTIONS_ALLOW_UNSECURE_COMMANDS
        run: echo 'ACTIONS_ALLOW_UNSECURE_COMMANDS=true' >> $GITHUB_ENV

      - name: set env variable actor
        run: echo 'GITHUB_ACTOR=$GITHUB_ACTOR' >> $GITHUB_ENV

      - name: set env variable repo
        run: echo 'GITHUB_REPOSITORY=$GITHUB_REPOSITORY' >> $GITHUB_ENV
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
        with:
          persist-credentials: false        
      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm install
          npm run build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@3.5.7
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: _site # The folder the action should deploy.

Thats it! Not too much of a hassle considering you will rarely be leveraging 11ty from scratch. Push to github, go into settings >> pages >> and enable github pages. If you are running into errors with jekyll, add a .nojekyll file into the root and that should fix the issue. You can add a .gitignore file if you would like as well like I did --> check my repo for assistance with this.

Working with hax11ty

Now we are going to be working with hax11ty.

Start by running the following command:
curl -fsSL https://raw.githubusercontent.com/elmsln/hax11ty/master/hax11tyme.sh -o hax11tyme.sh && sh hax11tyme.sh
CD to the folder in your terminal and run:

yarn install
yarn start

Start by heading into src >> settings.js and filling in your metadata.

From here on everything is quite easy as we have a template. Just exchange the markdowns in src >> content >> posts with yours. The main problems you may run into is with getting github pages to work with this, which is what I had to spend most of my time figuring out. Fortuantely, I was able to get it to work and can guide you through the main errors you will encounter.

First and foremost, you must ensure that you have the main.yml file in the .github >> workflows folder. Check my repo for more guidance. Without this file github CANNOT build your site correctly.

Next, you must let github pages know that you are using 11ty and not jekyll. Add a filed named ".nojekyll" into your root. You can leave it empty. Now deploy to Github pages and it should look like this.

11ty with a template
Now is the easy part. Since we will be working with a template, most of the work is already done for you. All you have to do is exchange the existing content with your own metadata and then push to github. For my attempt I leveraged the base blog.

Clone the repo and install npm. Next edit the metadata in _data/metadata.json.

Run eleventy with npx elevnty.

Now to deploy you must again ensure that you are creating the .github folder with the workflows and main.yml file. Add a .nojekyll file into the root as well. Once you are done just push to github and enable github pages. If you are running into a 404 error, make sure that your index is visible in the root.

Generating a Docker File for your NASA Image Search Repo

Rajiv Thummala — Thu, 24 Feb 2022 01:08:21 +0000

First started in 2013, Docker is a set of platform as a service products that leverage OS-level virtualization to deliver software in containers.

Containers make it easy to put new versions of software, with new business features, into production quickly-and to quickly roll back to a previous version if you need to. A form of virtualization, one single container can be utilized to run anything from a small microservice or software process to a larger application. Inside a container are all the necessary executables, binary code, libraries, and configuration files. Thus, docker is so powerful due to its ability to facilitate the microservice deployment process by leveraging containers to run across different computing environments.

To begin, lets ensure that you have a rudimentary understanding of how docker functions. Please run through this tutorial if you are not familiar with docker.

If you are not running through the tutorial, ensure that you have your own server through Docker. If you are stuck on this, please run through the aforementioned tutorial.

The NASA Image Search Repository already has some adequate functionality. Leveraging microservices, the application can be deployed in a non-taxing way that does not increase in complexity as it is transferred between computing environments. However, there is one way to optimize this deployment: containers. Docker will help us integrate our microservices into containers and will consequently avoid becoming a monolithic application.

Setup

Create ADD NEW INSTANCE in the Docker Playground. Run the following command in the new instance console.
git clone https://github.com/IST402-Group-E/ip project/blob/master/src/Nasa.js && cd Nasa.js

Configure

Before we ran any Docker commands, we need to configure our custom settings for this application. These settings will be an API key and the url of your Play With Docker instance.

Run the following command to set up a fresh copy of your environment settings.

cp dot.env.example dot.env

What we just done is created a new file called dot.env. Following the configuration as code principle, we are going to add our applications custom settings via environment variables. Docker relies on this pattern to ensure the application thats running inside of it is stateless.

Now we need to populate those settings.

Select the EDITOR button in your docker lab (it is to the right of the orange DELETE button)

Now we need to obtain our api key, which will be our unique password for requesting a new query. Head over to api.nasa.gov to signup and generate an api key for NASA Image search.

Obtain this key and then insert it into dot.env (replace it with XXXXXXX)

Now select open port in docker
Type 4000 into the prompt and click "Ok".

You should see a new page that is blank since there is no running application yet. COPY the url that blank page. That's were our server will be accessible when we get this thing running.

Now that we have the public url we can add it to our dot.env and click "Save"

Now just head over to docker and start up the application

Run the following command in your terminal: docker-compose-up. Select port 80 to view our application!

Feeding IP addresses into the API of GeoIP to Obtain Geographic Coordinates (Lat/Long)

Rajiv Thummala — Mon, 31 Jan 2022 04:45:51 +0000

This will be a brief synopsis and run through on how latitude and longitude coordinates can be detected via GeoIP. Particularly, by feeding IP addresses into the GeoIP API. You can follow along with my github repo.

Before we get started, let's import the necessary dependencies within your project. Since we are going to be wiring up the data to a wikipedia-query tag, we will need to import the following dependency: @lrnwebcomponents/wikipedia-query/wikipedia-query.js

Make sure you are using the right syntax

To complete the setup process we will also need to do npm install @lrnwebcomponents/wikipedia-query

As you parse through the constructor repo, you will notice that the first API you run into is: https://freegeoip.app/json/

This is the GeoIP API. Unfortunately, at the time of this writing, the server is down so I am unable to provide an overview of all the services this API offers in particular. However, you can head over to this link to poke around.

Deciphering the GeoIP API?

You will notice that the geoip is set to the locationEndpoint.

An endpoint, as adumbrated by smartbear.com, enables

APIs to transfer vital information, processes, transactions, and more. API usage will only increase as time goes on, and making sure that each touchpoint in API communication is intact is vital to the success of each API. Endpoints specify where resources can be accessed by APIs and play a key role in guaranteeing the correct functioning of the software that interacts with it. In short, API performance relies on its ability to communicate effectively with API Endpoints.

Thus, this will serve as an endpoint in which the GeoAPI will retrieve information regarding the client's location to carry out an operation.

You will also notice that GeoIP is referenced in the async getGeoIPData() method. Let's take some time to pick apart what is going on here.

`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.state = data.region_name; //avoided making the same mistake as last time (reminder --> region name)
    this.city = data.city;
    this.location = `${data.city}, ${data.state}`;
    this.lat = data.latitude; 
    this.long = data.longitude;

    console.log(`Your coordinates: ${this.lat} ${this.long}`);
    return data;
  });`

To make it easier, lets split this up into 2 parts to get a better understanding: Obtain information from the API & Feed into LitElement based web component to provide stateful updating of the DOM

Obtain information from the API

Lets begin by taking a look at this segment:

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; })

The fetch command in particular should strike you as new if you have not worked with this language much. It was for me atleast. However, you will quickly learn from a google search that it works similar to the throw and catch commands from java.

What is happening here is that the program is essentially throwing out a mandatory request for the program to provide information regarding the location endpoint, which we instantiated in the constructor. If the program does not get a response, it will catch it (through returning false in this case). As stated earlier, the location endpoint serves as a checkpoint for the API to retrieve information regarding the client's location.

What you will notice also is that "userIPData.ip" is also being fetched. Lets take a look at this further. You can follow along in my repo if that is easier!

`async updateUserIP() {
return fetch(this.ipLookUp)
.then(resp => {
if (resp.ok) {
return resp.json();
}
return false;
})
.then(data => {
this.ip = data.ip;
this.cityYouAreIn = data.city;
this.countryYouAreIn = data.country;

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

    // this.location = "Your location is: " + data.cityYouAreIn+ ", " + data.countryYouAreIn; //understood that the data. references the getproperties method
    return data;
  });

We will notice here that the updateUserIP method is being used to retrieve information regarding the user's ip address and listing readable info regarding their whereabouts (city & country). It is also fetching ipLookUP (https://ip-fast.com/api/ip/?format=json&location=True), which can be found in the constructor in this file.

ipLookup references an API called ip-fast. ip-fast is an API that analyzes the client's network activity to approximate their location. In case of error, it will return false to catch.

Both of these API's are thus added together to obtain the geoIPdata. Therefore, what we essentially have here in the async getGEOIPData() method enables us to leverage 2 APIs to retrieve the information that we need. But what do we do now that the data has been fetched?

Feed into LitElement based web component to provide stateful updating of the DOM

` })
.then(data => {

    this.state = data.region_name; //avoided making the same mistake as last time (reminder --> region name)
    this.city = data.city;
    this.location = `${data.city}, ${data.state}`;
    this.lat = data.latitude; 
    this.long = data.longitude;

    console.log(`Your coordinates: ${this.lat} ${this.long}`);
    return data;
  });`

Now if we take a look at this second half of the method, we will notice that the data is actually being entered into the console for use. When I first ran into this section of the program, I actually found it quite easy to interpret despite being unfamiliar with this syntax.

We start of with "then the data"...

Is used to retrieve information regarding the client's state. You must call for state through region_name as opposed to just data.state (don't make the same mistake I did). Next you can see that the city and location are retrieved. We also add both latitude and longitude into our instances so that we can obtain the geographical coordinates. Ensure that you are doing data.latitude and data.longitude NOT data.lat and data.long.

These instances are then simply fed into the console.

console.log(Your coordinates: ${this.lat} ${this.long}); return data;

From here, all you have to do is render. I referenced btopro's codepen to do this, as you can see in my repo.

After copious efforts getting all the bugs out of my code, I am close to getting an accurate solution. I will continue to update the repo as I optimize the program.

As you can see, leveraging public API's to perform functions are seamless and potent. There are a multitude of micro services across the web that can be utilized to achieve a goal in a non-taxing manner.

NASA Rendering in particular is a great one, which provides the ability to render images from NASA by leveraging their public api. This enables individuals that are not affiliated with NASA to easily access this large stack of information with ease.

As highlighted by wilsjame, these are just some of the many APIs that can be used:

Near Earth Object Web Service (NeoWs): Access to near Earth asteroid information.
Earth Polychromatic Imaging Camera (EPIC): Full disc imagery of the Earth.
Earth Observatory Natural Event Tracker (EONET): Prototype web service providing continuously updated natural event metadata, such as storm imagery, gathered from the Earth’s surface.
NASA Image and Video Library: Access to the NASA Image and Video Library.
Sounds (beta): Access to space sounds via SoundClound with some of the hassle abstracted away.
NASA rendering; render images from NASA using their public API to render the data

Good luck on your attempt and I thank you for taking your time to read this post.

An introduction to open-wc

Rajiv Thummala — Mon, 17 Jan 2022 20:47:47 +0000

Upon dipping your feet into the behemoth that is web development, you will quickly realize how non-static this field is. Everything is constantly changing and evolving, from updates to web protocols to constant syntax alterations. Consequently, a 1337 developer must periodically update their toolkit with the new fads and revolutions within the industry.

With a sector that is never static, it is vital that the fundamentals of web development are mastered to provide a base in expanding a developer's toolkit. Perhaps one of the most important fundamentals to grasp is the basics of JavaScript. As adumbrated by tutorialspoint:

Javascript is the most popular programming language in the world and that makes it a programmer’s great choice. Once you learnt Javascript, it helps you developing great front-end as well as back-end softwares using different Javascript based frameworks like jQuery, Node.JS etc. Javascript is everywhere, it comes installed on every modern web browser and so to learn Javascript you really do not need any special environment setup. For example Chrome, Mozilla Firefox , Safari and every browser you know as of today, supports Javascript.Javascript helps you create really beautiful and crazy fast websites. You can develop your website with a console like look and feel and give your users the best Graphical User Experience.

This article will provide a beginners perspective on how to begin to interact with JavaScript and will facilitate the setup process to begin exploring the language.

NodeJS & NPM

Our first journey together in the world of JavaScript will begin by installing a software named "NodeJS". What exactly is NodeJS?

In simple terms, it’s a JavaScript free and open source cross-platform for server-side programming that allows users to build network applications quickly. Click here to learn more about NodeJS

Follow the listed steps closely and don't hesitate to scour the internet further to diagnose any challenges you encounter.

1) Head over to and select the big green button on the left that reads LTS. In my case, the version is 16.13.2 LTS.

Once you finish downloading, proceed to the next step.

2) Next, hold the windows key + R and type "cmd" in the run box that pops up. You can also type "command prompt" into the search bar in your computer if you prefer. This should open up a black box. This is called the terminal or command prompt.

Type node-v into your terminal. This will be used to check what version of NodeJS you have downloaded. Moreover, it will be used to check if you have actually downloaded NodeJS.

You should have something like this. The number following the "v" is your version number. (Don't worry if it is different than what I have you may proceed to the next step). If you are encountering issues, head over to YouTube to search for a NodeJS download tutorial.

3) Next we are going to make sure that npm downloaded correctly. Npm is a package manner that JavaScript leverages to facilitate the runtime environment.

Run the command npm-v to see what version of npm you have downloaded. Again, the same thing applies here. Don't worry if the numbers following the v are different than the following image. This indicates your version number. If you do not have npm installed, try running the following commmand in your terminal:

npm install -g npm

If you are still running into trouble, head over to YouTube to search for installation tutorials for npm.

Installing ohmyzsh
Next we will work on installing ohmyzsh. Zsh will aid tremendously in operating the terminal. Head over to for any extra explanations on the following steps.

1) To start, type "windows powershell" into the search bar in your computer.

Select "run as administrator" as depicted in the image. If you do not have windows powershell, I would advise downloading it from the Microsoft Store. Otherwise, you can try running the following steps from your regular terminal/command prompt.

2) Run the following command in windows powershell:

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

3) This leads us into our next step which is to install debian. Head over to the microsoft store on your windows machine and search for "debian". Install the application as depicted in the following image.

4) Next open up debian either through the microsoft store or by searching for it in the search bar.

Run the following commands in order.

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install zsh
$ zsh
$ sudo apt-get install curl
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

5) Restart debian and make sure that you see .zsh somewhere in the terminal. This lets you know that you have installed zsh correctly.

6) Next we will be installing the node within zsh.

Understanding how Node works and its primary function is important. As referenced on medium.com,

Node allows you to execute Javascript code outside of the browser, in a computing environment (such as a server or local development environment) rather then a browser environment.

In laymans terms, node essentially enables an individual to execute their code in a sandbox environment. (Without causing any real damage). Think of it like practicing an idea for a painting on a sheet of printer paper before starting on the canvas.

Run the following command:

$ sudo apt-get install build-essential

7) Run the following command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

8) Make sure that you have VSCODE installed before you proceed. If you do not have vscode installed, follow the steps linked in this video and then come back. -->

Run the following command:

code ~/.zshrc

This will open up vscode with a file. Click on the .zshrc tab and paste the following code after the last line.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

Save the VSCODE file (Ctrl + S), then exit VSCODE.

9) Open up debian and run the following command:

nvm install --lts

Next run this command: nvm use --lts

Nice Work!

Starting with open-wc

Now we will take our first dive into working with open-wc.

1) Before we get started, you will need to create your github account and a repository. Follow the steps in this video then proceed to the next step.

2) Next, you will need to establish a secure, SSH key based handshake with github. Follow the steps in this article to complete this task, then proceed to the next step.

3) Open your terminal (windows key + r --> type in cmd in run box). Next you will need to navigate your github repo that you created.

Find your github repo in your file explorer and right click the file to copy the path to your clipboard.

In your terminal, type cd then paste in the file path.
This should change your directory to your github repo that you created.

4) In the terminal type npm init @open-wc. Wait for the terminal to complete its processing.

5) You should now see a gui that prompts you with some options.
Navigate through the UI to select the following options:

What would you like to do today? >> Scaffold a new project
What would you like to scaffold?>> Web Component
What would you like to add (just click enter) >>
Would you like to use typescript? >> No

_for the following option, replace what follows hello-world with whatever you would like _

What is the tagname of your web component >> hello-world_RajivLab1

Write the file to disk and install dependencies.

6) Follow the instructions in the terminal.
Change the directory to your web component and then run the following command:

npm run start

7) A browser should pop up with localhost in the address. Right click this page and click "view page source"

You now have access to the source code of this page.

8) Now lets go ahead and begin to decipher what this code is asking of us. Right click and select "Save as" to download the page.

9) Drag this downloaded file into vscode so that we can comment on the file and start to decipher what the code is doing.

If this is your first time with JavaScript, start by copy and pasting each line of code into google to try and make sense of it. Leave a comment by typing //your_comment_goes_here to annotate what you believe the code is doing.

This article will help.

You can access my first ever interaction with this code snippet on my Github which is linked here. Thank you for reading this article and I wish you good luck on the rest of your JavaScript journey.