DEV Community: Abbey Lyle

Open API Spec for Wordle

Abbey Lyle — Thu, 07 Apr 2022 17:19:04 +0000

In order to have a dictionary of words to pull from for the Wordle game, we need to connect to an API that provides us with 5-letter dictionary words.

We will be using the Random Words API to first give us a repository of all dictionary words. From here, we will specify that we want to pull only 5-letter words for our game. In the past we have been able to do this by specifying it in the URL (like an example project we have done with NASA Images API), but we are still working through figuring out this aspect of the API.

As we start to build our API spec documentation in our repository, we will be adding fields to the JSON file to specify details about this API that we are using. As of right now, we are building out the information field and paths field.

Info Field

The information field in the specifications document requires fields for the title of the API and the version. Other fields such as license, contract, and terms of service are optional but valuable fields to identify.

Paths Field

The paths field defines the relative paths to the API endpoint. These paths are appended to the end of the URL to help build out the entire, expanded URL.

Our start of the document can be found in the GitHub repository called "openapi.json".

You can find more info about the spec doc fields here

Event-driven Process Chain for Wordle

Abbey Lyle — Thu, 24 Mar 2022 16:38:43 +0000

Diagraming Wordle

As we begin to dive into the relationship between Wordle and the user, we have diagramed out the process of playing the game.

By using the event-driven process chain format, it exposes the processes that are not inherently visible to the user. It also specifies the different paths and use cases when the user plays the game. It also diagrams the autonomous work flow so that we can have a better handle on the processes that we need to replicate.

Getting Started with Vercel

Abbey Lyle — Mon, 14 Mar 2022 22:17:22 +0000

What is Vercel?

Vercel is a functions as a service architecture that allows developers to deploy websites instantly. It takes away all of the headaches associated with building and deploying a site (*cough cough GitHub), for example the CI/CD configuration needed to deploy sites.

Setting it up

First you want to create account with Vercel and link your GitHub account to it so that you can import your GitHub repositories as projects.

You will also want to download Vercel onto your machine using this line of code in terminal

npm i -g vercel

Building and Deploying

I cloned this repository onto my machine and created a .env file. My file contained these line items:

Back in Vercel, you will update the settings in the project as follows. This will ensure that your project is being outputted to the correct folder (could also be "_site" for you)

You are now ready to click deploy! My site looked like this

Publishing my Projects

Now that I am familiar with Vercel, I used it to deploy some of the repositories I created with 11ty.

1. 11ty Hello World Repo

https://github.com/abbeylyle4/11ty-hello
*Note: While this site shows a 404 error, Vercel deployed this site correctly. It is a problem with our original page :)

2. 11ty Cloned Blog Repo

My repo: https://github.com/abbeylyle4/11ty-repo
Cloned repo: https://github.com/11ty/eleventy-base-blog

3. 11ty HAX Repo

https://github.com/abbeylyle4/11ty-hax

Thanks for taking a look at my post, good luck using Vercel with your own projects! This class lab was partly in conjunction with Michael Potter from RedHat. Some of his work with web components and front-ends can be found here.

Intro to Docker

Abbey Lyle — Mon, 28 Feb 2022 00:56:35 +0000

In this blog post, I will be going over what Docker is, how it's useful, and how to get started with it on your own!

What is Docker?

Docker is a platform that delivers software in packages called containers. A container packages up all of the components for an application to run, which allows it to run faster and more safely. Docker containers are the most reliable and fast in the industry!

Get Started

To start playing with Docker, I first recommend going through this beginner tutorial to get familiar with how it works. https://training.play-with-docker.com/beginner-linux/

Next, you can start your own Docker instance here. https://labs.play-with-docker.com/. Once you create a new instance, you have access to your very own server running Docker!

Creating Dockerfiles to Communicate with API (NASA Image and NewsAPI)

For some context, we can also look at how Docker is used to create a connection to an API. To start, clone a repository that you'd like to use using a git clone and cd command like I did below.

Next, we need to create a new environment for us to start working in Docker. Run this code cp dot.env.example dot.env in the command line to do so! Now we should have a new file called dot.env. To view it, we can open the editor and see it in the file list.

Our next step is to get the API key and our endpoint! An API key is almost like a password in order to use the API. Some APIs are offered publicly like the NASA Image API, meaning that we do not need to generate a key for that example. However, the NewsAPI does need a key which could be accessed here.

To get our endpoint, it is a little more complicated. In the docker screen, you can click on "Open Port". We are going to choose to open port 4000. A new window should open with a blank page, don't worry! This is just because we haven't finished setting it up yet! Copy this URL as our endpoint.

Now that we have our API key (if needed) and our endpoint, we can enter both of these into the editor window for our new file.

To run up our own site, you can type docker-compose up in the command line Clicking 80 because it is the front-end port should show the results from the API! Best of luck!

Getting Started with 11ty

Abbey Lyle — Sun, 27 Feb 2022 20:44:11 +0000

What is 11ty?

11ty is a static site generator that can generate content pages written in multiple languages, including markdown. It basically tries to render html from other file types in your directory. In this post, we will be creating 11ty blogs using 3 different methods!

Hello World style 11ty Blog

In the first method, we will be using straight syntax from the 11ty website to create a baseline hello world style blog post. Firstly to install, this code can be run in terminal:
npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev

Once 11ty is installed, I created a new folder on my laptop to host our files for the blog. After navigating to the folder from terminal, we can run up the 11ty pages.
echo '# Page header' > README.md npx @11ty/eleventy

If run correctly, you should see a message like this:
Writing _site/README/index.html from ./README.md (liquid) Wrote 1 file in 0.03 seconds (v1.0.0)

Once our files have been set up, we can run it by coding
npx @11ty/eleventy --serve
This message will pop up:

From here, you can copy the local host url with the addition of /README/ at the end of the file path. Pasted into a browser, it should look like this!

Once you have your baseline file, you can insert your content and create your page! I opened the folder I made in VSCode and chose to insert one of my other blog posts about JavaScript. Below is how it turned out!

Using Templates for a Blog

One way that you can create your own 11ty blog site is from using a template! There are plenty of public Github repositories available for your use, I chose to use this one https://github.com/11ty/eleventy-base-blog

In Github, I selected to use that template and created a new repository to host this new blog site. This template has markdown pages in "posts" folder titled firstpost.md, secondpost.md, etc. These are the files that I edited as my blog posts!

In this image from my VSCode, you can see that I am in my firstpost file, with my JavaScript blog content in it. Once your posts are edited, you can run npm run start in terminal.

Similar to the first method, you will need to copy the local host url and paste it into your web browser. Mine looked like this!

HAX 11ty Blog

For our third and last method that we will be demonstrating, we will be using another template but it simplifies how we can deploy in a static form. To start, you will need yarn installed on your machine. You can use the template and create your own repository. [https://github.com/elmsln/hax11ty]

In this template, you can add your own blog files into the directory, or edit the current ones to your liking. I chose to edit the current files to add in my blog posts. To run, you can use yarn install then yarn start to load your site. Mine looked like this!

Hello World References:

https://www.11ty.dev/
https://www.11ty.dev/docs/plugins/syntaxhighlight/

11ty Blog Test

Abbey Lyle — Thu, 17 Feb 2022 17:55:00 +0000

Wikipedia API Contextualized and Leveraged

Abbey Lyle — Mon, 31 Jan 2022 03:30:03 +0000

First, an application programming interface (API) is a connection between computers or between computer programs that allow applications to talk to each other. They are very versatile and basically act like a mutual friend between both systems.

We will be walking through how APIs are visualized, how they work, and how the JSON response is used. The example that we will be contextualizing is Wikipedia's API and how we can leverage it using the Wikipedia query tag.

Fetch

The main goal for us here is to communicate with Wikipedia's API so that we can render their content on our own projects! We can do this by using the fetch tag. It is "behind the scenes" of the web component. It is what starts the process to retrieve information through APIs. In this case, the fetch tag is used to communicate with Wikipedia to find the respective article so that it can be rendered on the page. In the source code of the Wikipedia query, it shows the fetch tag requesting the address which then leads to the JSON API response.

APIs Visualized

The Wikipedia query tag communicates with Wikipedia's API service by searching for a Wikipedia article with the title specified. In this image of the Wikipedia query source code, you can see that the code is grabbing the Wikipedia article based on the search that the user will input.
To include the Wikipedia query in your own projects, the following syntax can be implemented. Below, we are specifying that the Wikipedia articles should be searched by the location specified by the user
JSON Response and Display
The JSON response is the default result of the fetch request because it is easily readable and easy to translate. When the JSON response is received, the web components are displayed on your own projects!

You can find more information about APIs here. For more information about the Wiki API, you can find its documentation here! For reference I have attached my own GitHub repository.

Introduction to JavaScript and Open Web Components

Abbey Lyle — Sun, 16 Jan 2022 23:45:59 +0000

Maybe you're also a beginner, or have no experience with JavaScript and are looking for a place to start. Welcome! We will be going through the steps for making sure that you have all you need to begin your web dev journey.

These steps will be most compatible with Mac users

What is JavaScript?

JavaScript first appeared in 1995 as a scripting language for the World Wide Web. It operates alongside HTML and CSS to increase interactivity and functionality on web pages. Nowadays, over 97% of websites use JavaScript to increase capabilities on their client-facing interfaces.

Now that you have a brief background, let's get started with getting all the tools we need.

VS Code

VS code is a code editing software that comes in handy when learning JavaScript. It provides support for debugging and version control. It is a great option for beginners who are getting into web dev.

You can get VS Code here

NodeJS

NodeJS is an open source platform and allows you to run server-side applications on your personal machine.

When downloading, make sure that you download the LTS/"recommended for most users" option for a more reliable platform.

Tip: to double check that NodeJS has installed successfully, you can simply type node in your terminal window (for macOS users, you can navigate to it by searching 'terminal' in your launchpad)

npm

Luckily for you, npm (node package manager) is installed as a package deal with NodeJS. Npm is the default package manager for NodeJS and allows you to use third party code in your own. It is one of the largest software registries, giving you a plethora of tools for your own code.

Similarly to NodeJS, you can ensure you have npm by typing npm in your terminal window. You will see a longer message this time showing some of the capabilities you have with npm!

Git

Git is a version control service used for communicating and collaborating between different programmers creating code for one project.

You can get git here.
After completed, type git in terminal to ensure correct installation.

Open Web Components

Now that we have all the necessary tools to begin, let's work on creating our own web component! First, we must create a new folder in Finder to host this project. Then, return to your terminal window and navigate to that folder you just created. You can do this by typing cd "foldername".
Tip: Make sure you are using the whole file path, typing just the destination folder can run an error.

Once in your folder, code npm init @open-wc and run the command. This initializes the process for us to create our first web component!

From here, we answer the following prompts:

Scaffold a new project
Web component
Press a to select all options, then enter to run
Deny typescript
Pick a name for your first project! (I picked "hello-world")
Select yes to writing file structure to disk
Install dependencies with npm (this may take some time)

After receiving the message that we are all set up, simply follow the two commands to run your web server. You should be taken to your first web component!

Understanding your Web Component

Once the web component is created, it is important to understand how it even operates using the src/HelloWorld.js file. In src files, you are able to edit code to enhance components of the websites as I mentioned at the beginning of this post. The src file looks something along the lines of this:

You can see at the beginning of the code, LitElement is being imported. Lit supports the building of fast and lightweight web components. In order to get more familiar with Lit, I recommend following this tutorial.

Check out my GitLab repository to see some of the comments I made on my code!

abbeylyle4 / IST402-lab1

Sources:
https://code.visualstudio.com/docs/editor/whyvscode
https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/
https://open-wc.org/discover/about/
https://www.creativebloq.com/features/12-common-javascript-questions-answered