DEV Community: Kayra Orankoy

How to Vercel

Kayra Orankoy — Tue, 15 Mar 2022 01:32:49 +0000

First things first, what is Vercel?

Vercel is a platform that allows users to streamline the website deployment process. Unlike github, it's so easy to use that my hungover post spring break butt could figure out how to use it.

Getting Started

before getting started with Vercel, you must create an account on the website, feel free to link an existing github account for ease of access.
Next, you will want to fork and clone This repository into your local machine.
Then you will open up the code through VScode, add a .env file that contains these lines and push it all back to your github repo.

Working within Vercel

From this point forwards, we will be working within Vercel to add our github repos. Within the main page, add your repos by clicking the plus button and you will be prompted to make changes.
Change the location of the output directory to dist in order to ensure that it goes through.
congratulations, if you managed to follow these steps you should now have a static webpage uploaded to Vercel.

https://vercel.com/kfo5087/ist-vercel-demo

My 11ty Websites

Hello-world https://vercel.com/kfo5087/11ty-hello

11ty-Template https://vercel.com/kfo5087/11ty-template

Haxllty https://vercel.com/kfo5087/haxerman11ty

Shout out to Michael Potter for showing us Vercel and overall this tool is much easier to use in comparison to Github Pages.

How to Docker

Kayra Orankoy — Mon, 28 Feb 2022 02:35:42 +0000

What is Docker and why is it so powerful?

As described by themselves, "Docker is an open platform for developing, shipping, and running applications". Docker utilizes "containers" which basically allow for developers to work on programs and interact without the worry of personal hardware or system based issues

As pictured above, docker provides similar functionality as a VPN, but does it in a more light weight manner. If you would like to learn more about docker and its overall functionality there is a video provided at the end of the blog

Applying Docker to the NASA api project (In theory)

Applying Docker to our NASA projects should be similar to the newsAPI exercise, first start with cloning in your repository. From there you'll need to get access to you API key.

You will also need to get the link to the endpoint by opening a port then copying the link of the webpage you are directed to into the correct line.

From here, run docker-compose up and click port 80.

assuming all of the correct information, the process should be similar to the practice problem except with the NASA api in place.

Additional Docker info

https://www.youtube.com/watch?v=rOTqprHv1YE
https://docs.docker.com/get-started/overview/

Using 11ty to create blogs

Kayra Orankoy — Mon, 28 Feb 2022 00:58:56 +0000

What is 11ty?

11ty is a static site generator that was created as a JavaScript Alternative to Jekkyl. It works with several different languages such as markdown, html, javascript, and nunjucks. Furthermore, it uses independent template engines so it can easily be coupled or uncoupled from your project without any hassle.

Hello World Blog

The First method that used is provided directly from the 11ty.dev website, first, start by running the following line,

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

Follow this by running,

npx @11ty/eleventy --serve

A prompt will pop up providing you with a local host link. Copy this link then add /README to the end of it and you will be brought to a blank website with only a header. From here you can go into VS code and either edit the *README * file or add a new file to link to when you run the program again. Add your blogposts from DEV into the file and they should pop up when you use npx @11ty/eleventy --serve

Using an 11ty Template to host blogs

we can also utilize 11ty through existing templates. In this scenario, I will be using the one provided to us for the lab at . To use this, simply clone the repository, install npm, and open up the code with code . From here you can go into the posts tab and add your own blogposts "In markdown format" to the template.

Follow this by running npm run start

Copy and paste the local host into your URL on your web browser and you will be presented with the page giving you the option to click on the blogs you've added.

Click on either of the blogs and it will bring you to them.

HAX11ty

The final method used is through a combination of 11ty and out Edtechjoker's very own HAXcms. Like the previous example, clone the provided repo and open it up through the terminal.

NOTE - This needs yarn so if you don't have it figure it out and get it installed.

Add a Markdown file and title it something, add your blogpost into said Markdown file.

Apply all the changes and use yarn install before yarn run to boot up the website. you will now be able to see any of the pages you have added or edited.

Final Thoughts

Clearly, using a template is much easier than trying to build an 11ty website from scratch. building on this, the implementation of HAXcms works to increase overall accessibility of the website and provide it with some much needed formatting. Provided in the links below will be my repos, and other resources needed to complete this lab.

https://github.com/kfo5087/11ty-hello
https://github.com/kfo5087/11ty-template
https://github.com/kfo5087/haxerman11ty
https://www.11ty.dev/docs/plugins/syntaxhighlight/

Wikipedia's API and wikipedia-query

Kayra Orankoy — Mon, 31 Jan 2022 07:10:22 +0000

What is an API?

An API (Application Programming Interface) is a software that allows for connections between computers and computer programs. For this project we took advantage of Wikipedia's API's.

Fetch

fetch is a method in JavaScript that is used to request resources in the form of HTTP from a webpage. Shown below is an example of fetch being used to communicate with Wikipedia. A request is sent out with a resulting JSON response.

Wikipedia API

Before starting with Wikipedia api, make sure to import the necessary packages by adding this line of code to the top
import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js';

Wikipedia has a numerous amount of functions that can be referenced here. This API allows users to connect to Wikipedia and manage different functions. With this lab we are dealing with the query function and it is accessed by using the tag wikipedia-query, it uses fetch to search for the necessary parameters.

<wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>
      <wikipedia-query search="${this.city}"></wikipedia-query>
      <wikipedia-query search="${this.state}"></wikipedia-query>

The above block of code is three query's that get parameters filling out the state and city, the city alone, and the state alone. They were gained earlier in conjunction with the freegeoip app.

In all, API's are a useful tool that allow for coders to do less coding. Provided is my GitHub repository

Building Basic Web Components

Kayra Orankoy — Sun, 16 Jan 2022 23:32:42 +0000

Before starting this class I had a minuscule amount of exposure to web development, JavaScript, and HTML. After this lab I can now confidently say that investing in a device that uses a Linux platform is the wave for anybody pursuing a career in web development.

SOFTWARE REQUIRED

Before starting anything, if you are on windows, I highly recommend installing the Windows Terminal found in the Microsoft store, it's a free application that will allow you to add a Linux distro and access its terminal freely. The reason to do this is because "ohmyzsh" doesn't like windows users and makes you jump through multiple loopholes to get it working correctly on your bill gates powered OS.

When setting up this terminal, the first step you must take is by enabling "Windows subsystems for Linux" found in "Windows Features" (This can be found in your computers search bar) After this install a Linux distro such as Ubuntu

add it to your terminal (may require restarting both programs) and enjoy the benefits of having your Linux terminal run through windows such as

The ability to now copy and paste without an external program
Ohmyzsh now works by copy and pasting the link to install from the website into your terminal

NODE.js
Node.js is an "asynchronous event JavaScript runtime" and its basic functionality is to allow users to build and develop scalable network applications.
NPM
NPM is a package manager that comes installed with Node.js that enables a user to discover, install, and use node programs.

What it should look like when these programs are properly installed.

The Lab

Once all the required components are installed to your system, you can proceed with the lab

Proceed to create and open a new folder using the mkdir command and cd command respectively
Run the command npm init @open-wc and if all the previous steps were done correctly, the prompt for open web components will pop up.
Select all of the options using "a", don't use typescript, and tag your web component as hello world. Install your dependencies with either Yarn or NPM and the you will be given a new pop up in browser.
The page you will be taken to willbe a mianly blank page with hello world at the top and a button that lets you increment the number

Congratulations you have created your very own web component.