Forem: NikitaL2022

Working with Vercel

NikitaL2022 — Mon, 14 Mar 2022 04:03:48 +0000

Vercel is a platform for frontend frameworks and static sites and it is used to integrate content, commerce, and database. It takes care of difficult things such as deploying, scaling, and serving personalized content.

Getting started with ist-vercel-demo

First, you will need to connect your Github account to your Vercel account because this allows Vercel to access your repositories from Github and import them.
Then, I had to do git clone this repo and add a .env file.
After, I ran npm install and vercel dev.

One thing I was having trouble with was in the Project Settings of the certain project, the output directory was incorrect. Vercel couldn't find the output directory. I was able to figure out that is uses dist, so I changed it to that.

Check here for my project.

I was having some trouble deploying the 11ty site, so I was unable to show an final product. Once I fix it, I will show my work.

Developer Experience

With what worked, I can see the Vercel is much easier and simpler to use compared to Github.

Getting Started with Docker

NikitaL2022 — Tue, 01 Mar 2022 02:57:52 +0000

Why is Docker so Powerful?

Docker is essential for developers in building, deploying, running, updating, and stopping containers. A container is an executable package of software. Docker makes it easier and safer to create containers than without it.

How to Start

First, you will need to create an account Here.
Then you go to the terminal, click New Instance and run git clone https://github.com/heyMP/news-api-workshop && cd news-api-workshop in the terminal.
Then, you run cp dot.env.example dot.env in order to get a new copy of environment settings.

This creates a file dot.env. Then you click Editor and find the dot.env file. You will need to get an API key and public url.
Go to API KEY, create an account, and it will generate your personal key.

You take your personal API key and replace it in the dot.env and SAVE.

Now you click PORT and enter 4000 and click ok.

It should show page isn't working.

You can take the url and and put it here NEWS_ENDPOINT= in dot.env.
Finally, you can run docker-compose up. Ports 80 and 4000 pop up and you can click 4000 to see the application.

Here is the link I followed.

Getting Started with 11ty

NikitaL2022 — Tue, 01 Mar 2022 01:44:34 +0000

This is my first time using 11ty, so I had some trouble creating a blog at first, so I followed this LINK to start.

Besides step 1 using VSC, I created all these files and folders within the project through Notepad

Step 1

You start of by creating a directory in the terminal

mkdir myblog
cd myblog

(myblog is what I called my project).

Step 2

Next is creating a package.json file

npm init -y

Then you install it

npm install --save-dev @11ty/eleventy

Step 3

Creating a folder called _includes and a file within called layout.njk.

First Blog

Now you have to create a folder where all your .md files will be held. I created a folder called blog and the first markdown file firstblog.md
Now you can compile the project with

npx @11ty/eleventy --serve

Your terminal should have compiled an index.html into a _site folder.

Final Project

Plug-in

The plug-in is used to make the date more presentable and easier to read.
To do this, create a file .eleventy.js. Then you put npm install --save-dev eleventy-plugin-date and do npx @11ty/eleventy --serve.
You'll see a http link containing localhost. Do ctrl + click to open your page!

Here is a link to my Github repo and Here for the 11ty lab.

Wikipedia API's and 'wikipedia-query' through fetch()

NikitaL2022 — Mon, 31 Jan 2022 04:52:43 +0000

fetch()

The tag fetch() will execute the API based on this link
(this.locationEndpoint + userIPData.ip). If the call is works, then it will return the data object as a json and it will have long, lat, city, and state properties which we assign to corresponding properties in our class LocationFromIP.
When we render html, these properties will be used as values for input box, google maps link, and Wikipedia search parameters.

API

This API https://freegeoip.app/json/ requires concatenating the link with IP address and fetching the returning data object. Here is where you can learn more about Wikipedia API.

For my project, the API doesn't work and returns nothing, so I had to hardcode the properties to show how the website would look if the API would work. This link https://freegeoip.app/ says you need to obtain API key, which needs to be added to the end of the API call.

Wikipedia-query

Wikipedia-query is very simple. All that's needed to do is pass values for the search parameters.
Interestingly, passing State College as a parameter doesn't generate any return for just city, but adding the state helps.

My Work

Here is where you can see my work and look more into the code.

Introduction to Web Components

NikitaL2022 — Mon, 17 Jan 2022 04:26:12 +0000

Software to Install

Nodejs

Nodejs is an open-source, cross-platform runtime environment that executes JavaScript code. It is recommended to install the recommended, not the latest version.

NPM

When installing Nodejs, npm is also installed along with it. To check the versions of Node and npm, you can type node -v and npm -vinto the terminal.

Git

Git is a version control system that lets you manage and keep track of source code history.

Yarn

Yarn is a package manager for Nodejs that manages project dependencies. Type npm install --global yarn and yarn --version into the terminal.

Visual Studio Code

VSC is a helpful coding environment to edit your project.

How to Start

Open-wc

In the terminal or Git Bash, type in npm init @open-wc. This command is used to create new projects.

(Intro) is a great walkthrough video that helped through each step of @open-wc.
Once you get here, click enter on scaffold a new project and web component.
You will then click tab for the 3 options including linting, testing, and demoing.
It will then ask if you want typescript, click the up and down arrow to no.
Next is the tag name of your web component. Type in hello-world.
Next, it is going to ask if you want to write this file structure to disk. Click yes.
You want to install with dependencies. Use up and down arrows to get to yes with yarn if the Yarn installation worked or yes with npm if it did not.
Finally, it will say you are set up. All you need to do is run cd hello-world and npm run start.
And here is your final product. Congratulations on your first web component!