DEV Community: elizabeth-delor

Attempting Vercel

elizabeth-delor — Thu, 28 Apr 2022 16:35:07 +0000

A lil bit of background

I will be describing how to set up a Vercel site but using one we have been working on over the past few months. Since I had issues when setting up eleventy, I could not get Vercel working on those repos.

HOWEVER! I did get it to work in this group project so we will be using that as a walkthrough.

Setting it Up

To begin, you will go to the Vercel Site and create an account or login. If you haven't created an account already I would recommend using your GitHub to login since it allows you to access your repos directly.

Importing your Repos

The reason I recommended the use of Github to login is since it allows for importing repos to be very simple.

Once logged in, you want to select "New Project" located at the upper right corner of the screen. That will bring you to a screen with a couple of options. On the right provides the you with some pre-built sites you can modify.

On the left, which we will focus on, provides you with a drop down selection for GitHub accounts and their repos.

After selecting your desired repo, all you need to do is press "import" and "save".

Configuring your Repo

The only thing you need to do to fully complete your repo is edit three things:

Root Directory
Build and Output Settings
Environment Variables

If you want to take a look at those configurations, take a look at this repo.

All Set!

Now that everything is configured you are all ready to begin. Keep in mind that typically to run a project you may use npm start or yarn start. Vercel however runs a little different as you need to run vercel dev

The Power of SVGs

elizabeth-delor — Mon, 11 Apr 2022 17:00:04 +0000

Hello Hello!

Over the course of the past ten weeks, I have had the opportunity to work with a few of my peers on HaxTheWeb. In this project, we are working to create a fun experience for students and staff at our university to create course websites or portfolios [and its completely open source ;)]

My portion of this project is the overall design so I have been primarily working in Figma. Originally I created the interfaces below:

This created the theme which spiraled into a video game aesthetic for this site. As I was procrastinating actual productive work, I created this little guy for fun.

This little guy then developed himself into an army of SVGs which gave birth to rpg-character. RPG Character, aka dapper little guy, spiraled into a seed based generator which will create a character based onto a username.

How RPG Character Works

This dapper lad is created through a series of SVGs. Originally, I was planning to just make a series of colored hats and skin tones that a user could select (as shown in this photo):

But the idea of creating a seed based generation which a series of outfits, hair, colors, and weird items occurred. Thus after a quick brainstorming session, SVGs were the solution.

SVGs

With the base of an outline and background, I worked on creating a series of different assets that will populate (and stack) onto the base. A series of skin colors, faces, hats, clothes and items were created and then stacked into making the rpg-character which is implemented onto the website as a sort of guide as you build.

On my end however it is a series of organized chaos as shown in the image below.

As more was created more ideas began to flow and we began to add assets for 404 pages, a walking state (which can be a running state) and a longer hair option. This was actually a ton of fun to do an a massive learning opportunity.

What I would add!

Unfortunately all good things must come to an end and I had to move my energy to another design portion of the website so rpg-character came to its end (for now). If you want to mess around with this character yourself you can use this nom page!

NPM

Figuring out 11ty... barely

elizabeth-delor — Sun, 27 Feb 2022 23:57:15 +0000

Using Eleventy to build a website

Over the past week I was assigned to create an 11ty site to repost my dev.to blogs onto to get use to 11ty. In this assignment I had to create three different sites from three different starting points:

No structure, just build it
Eleventy Base
Hax Base

Similar to my last post about APIs, I immensely struggled to get both 1 and 3 to actually work. So I will go into detail on the second one, aka the one that actually loves me and did what I wanted it to do :]

Eleventy Base <3

To begin, I used the template from this repo to have the structure needed to add blog posts to. From there, I had a little looksie around the repo itself and found the posts folder.

From there I decided to select three random dev.to posts from my account and put them in order from when I posted them. They are respectively labeled as #post.md from oldest to newest. Each post has the following structure to it:

---
title: "Installing Open-WC"
description: "Learn the basics on how to install Open-WC and use it!"
date: 2021-08-31
tags:
  - openwc
  - tutorial
  - terminal
layout: layouts/post.njk
---
### Applications Used:
* Terminal
* NodeJS (LTS)
* Yarn

Similar to Dev.to, eleventy base utilizes the markdown formatting. The difference is that on the eleventy base, there is a section at the top that has the information for title, description, date, tags and even layout.

For later posts, I always was about to utilize href's to link from previous posts and next posts like this:

<a href="{{ '/posts/firstpost/' | url }}">Previous Post</a>
<a href="{{ '/posts/thirdpost/' | url }}">Next Post</a>

If I had to select between the three options, I obviously would choose this one when building your own site as you can still customize as you please but do not need the stress of building everything from scratch or running into errors.

I GOT HAXCMS TO WORK [updated]

So I finally got this to work because I simply forgot to install yarn :] such a fun and fantastic find.

The Ones that Failed :[

So as stated earlier, I couldn't get the first and third repos to work T-T so sad
When doing the first one there was a lot of blood, sweat and tears (mainly tears but alas) but I was able to get the title screen to work. Now I did try to add posts, I really did, but kept running into errors.
Prior to getting the title screen I also managed to break the original repo somehow.

As for the Hax repo, I simply couldn't get past cloning the template. Once I downloaded npm and went to run it, it started to read and write a bazillion packages and I kept getting errors saying CANNOT GET / . Now I am by no means an expert but I do not think that was suppose to happen ¯_(ツ)_/¯ .

The Repos

Working
Base
Hax
Not Working ;-;
Free For All

Finding IP Addresses and Coordinates

elizabeth-delor — Mon, 31 Jan 2022 01:58:53 +0000

IP Fast API Background

Recently I have been diving into the world of APIs and slowly understanding more and more about them. The most recent API I have been looking at is IP Fast API! This API focuses on taking an IP and then gathering data such as city, country, or region from it.

We are able to use that data through the fetch() function nested within an update() function.

Below is the code I currently have that shows all the information gathered from the IP

  async updateUserIP() {
    return fetch(this.ipLookUp)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        this.ip = data.ip;
        this.city = `${data.city}`;
        this.state = `${data.region_name}`;
        this.country = `${data.country}`;
        this.location = `${data.city}, ${data.country}`;
        return data;
      });
  }

Breaking Down the Code

Now you may look at that and not process what all that code means right away but if you look at it step by step you can see that it is fairly simple!

The initial fetch() and .then() sets it up so that if it successfully grabs an IP through the API it will then allow for us to use the json data.

From there, the following .then() shows the use of how we manipulate that data provided. In this case it was broken up by city, state, country and finally a location which brings it all together.

Even now I am troubleshooting with manipulating the data as it picks and chooses when it will work and be undefined (but alas we must continue onwards).

Latitude and Longitude together in an API

Another API I am using currently is FreeGeoIP API. This API determines the latitude and longitude of your location. What we are able to do is use the data from FreeGeoIP and connect it to IP Fast API to create a fun little API marriage.

Disclaimer, my code hates me currently so the marriage is crumbling :[

Anywho! Combining the two will allow for the json data from before to be intertwined with geo location data.

Even though I am struggling to get this to work, here is the combination between the two which I have currently (and is subject to be changed)

  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.latitude = data.latitude;
        this.longitude = data.longitude;
        this.state = data.region_name;
        this.city = data.city;
        this.location = `${this.city}, ${this.state}`;

        console.log(`${this.latitude} ${this.longitude}`);
        console.log(`Your Location: ${this.location}`);

        return data;

What does it mean??

Essentially this jumble of code SHOULD be pulling the location from FreeGeoIP's API while also gathering the data from IP Fast's API and then outputting it all later in the render() function... but mine doesn't ¯\_ (ツ)_/¯

Follow Along!

If this peeked your interest, or you just want to see if I am ever able to get out of what I like to call ~undefined hell~ then you can look at my test GitHub Repo!

And if you just want to see a sparkly repo that actually works, you can check out my groups GitHub Repo!

How to Install Docker

elizabeth-delor — Mon, 24 Jan 2022 02:30:26 +0000

Docker Download Links

Mac
Windows
Linux

Getting Ready to Install

I personally use a Mac so this tutorial will be mainly following my process. I assume the steps for Windows will be similar and Docker provides Linux users steps to get it running on your device!

For this tutorial I will focus on cloning a GitHub repository and creating a build of it into Docker. I will be using the HaxCms repo in the example.

HaxCms Repo

Prior to the installation, make sure to clone your repo onto your device.

if you are unsure on how to clone your repo follow this tutorial provided by Github

Installation Steps

Install Docker onto your device
Open Docker Desktop once you complete the installation
Create an account (or login to an existing account)

How to Build an Image and Run it

To begin, we will be using that repo cloned earlier.

Open your terminal
Go to the file of your GitHub repo using cd {file path}
Enter docker build . -t {name of build} Since I was installing HAXCms, I named my build "hax" so the command I entered was docker build . -t hax
In order to run the container, use docker run -dp 80:80 or go into docker and select using port 80.

The nice thing about Docker is when you go to run your build, this window will pop up.

Enter the 80 onto the Local Host portion of this pop up.

Open your browser of choice and enter localhost:80 if you selected a different port, enter the number that reflects it in the local host

Since I used Mac, I did notice that when I attempted to run HaxCms it would not work on Safari but did work on Chrome! So if you are a Mac user as well and having trouble with it on Safari, try to switch over to Chrome.

Once the site runs, you should see your build! In this case I saw this screen.

Stopping the container

This is pretty simple! Just open Docker Desktop once again and find the current container that is running. A small menu on the right should be there, one of the options is stop.

The End?

elizabeth-delor — Mon, 13 Dec 2021 05:03:42 +0000

Over the course of the past 15 weeks, I have had the opportunity to dive into the creation of web components. Early on in this process my team and I created the penguin button and a learning card. Finally we have reached the end in which we decided to create a flashcard.

The Example

This was the base, the muse if you will, for our final project. This flashcard was apart of a set but we originally intended on just creating a singular flashcard.

The Idea

Our plan was simple, create a similar looking flashcard with a few tweaks and additions. The main thing we added was the ability to retry a problem as the original example lacked that feature.
Next was to make it so that the user can easily input a topic and have an auto generated image.
We also wanted the card to be able to change color and still look pleasing so we utilized simple colors to do so.
Lastly was to create the overlay to indicate a correct and incorrect answer.

The Final Product

This is the card which we ended with. If the user inputs a correct / incorrect answer an overlay will cover the top of the card as shown below:

We wanted to make sure that it was very clear to the reader the status of their answer. Now you may look at these photos and be wondering what those arrows on the side indicate.

Since we were able to finish the flashcard with time to spare, we implemented a carousel to the flashcard which allows for users to enter an array of questions and answers and go through the group.

My Contribution

My role for this card was mainly the stylistic aspects! The thing I am most proud of however is the overlaying (which admittedly took a lot of trial and error). My solution was utilizing different div classes. :host, and :before. Here is my pride and joy (which hopefully can save someone the stress I faced trying to get the dang thing to work)

  static get styles() {
    return css`
      .overlay {
        position: relative;
      }

      .overlay::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        border: 1px;
        border-radius: 19px 19px 0px 0px;
      }

      simple-icon-lite {
        --simple-icon-height: 100px;
        --simple-icon-width: 100px;
        color: white;
        transform: translate(-50%, -190%);
        top: 50%;
        left: 50%;
        z-index: 100;
      }

      :host([status='pending']) .overlay::before {
        display: flex;
        background: transparent;
      }

      :host([status='correct']) .overlay::before {
        display: flex;
        background: green;
        filter: opacity(0.65);
      }

      :host([status='incorrect']) .overlay::before {
        display: flex;
        background: red;
        filter: opacity(0.65);
      }
    `;
  }

Essentially what this is doing is setting the overlay depending on the status and creates the effect shown above.

If you want to get a deeper look into the inner workings of this overlaying system, as well as our flashcard as a whole you can check out our PenStat GitHub and Npm!

I am grateful for all I have learned over the last semester and stay tuned for more coding shenanigans next semester!

PenStat Links

GitHub: https://github.com/PenStat/
Flashcard GitHub: https://github.com/PenStat/penguin-project-three
NPM: https://www.npmjs.com/org/penstat2

A New Way to Watch

elizabeth-delor — Sun, 07 Nov 2021 22:28:36 +0000

Time = Money, but what if it didn't?

The idea of money and time limits a lot of individuals when it comes to creating something. Most of the time an idea is created and instantly we think on how to market it and make it profitable. If money and time were no concern, what would I do with the skills I have obtained and my life from that point?

The Current Situation

Over the past year I know most of us have relied on streaming services such as Netflix, Hulu, and Disney+ to stay sane. I know I have and in the beginning utilized web extensions such as NetflixParty [now TeleParty] to watch shows with friends. This however is no longer useful as we are slowly getting back into our normal routines and do not have the same amount of free time as we did before to watch shows together.

The Idea

An application/extension that would allow for individuals to connect over their favorite shows and movies on streaming platforms. Think of it like an expansion on Netflix Party, but individuals can make their own profiles and rate shows they have seen and even have a recommendations section.

Multiple times I have had friends who are getting into new genres and be lost on where to start. Having this would allow for them to have a good stepping stone if they have friends who are fans of that specific genre. In addition, they could look at most popular shows for each genre to get a starting point.

Features

The key features that were mention prior were having a profile, making & seeing recommendations, and looking at most popular shows based on genre. One feature I feel would be beneficial is for the user to have the ability to enable spoilers before episodes.

I personally know a few individuals who want to watch psychological thrillers/dramas but tend to avoid them because they get stressed not knowing what is going to happen. For example, when Squid Games was big my friend spoiled the show before watching due to her getting extremely anxious. By being able to enable something that just gives warnings of possible triggers or character deaths it allows for people like this to enjoy the show as they know what to expect.

Why This?

Since streaming is such a big part of our society now, this allows for a better watching experience. I know on multiple occasions I have wanted to watch something but did not know what so either I watch nothing or re-watch something I have already seen.
This would enable users to have an easier time finding shows based on a recommendation by genre, or even what their friends are watching so they can talk about the shows together.
I think it is important to give people the chance to watch shows they may not have thought to watch before and get the chance to experience new things comfortably.

Slotting

elizabeth-delor — Tue, 26 Oct 2021 16:22:30 +0000

Over the past few weeks, my team and I have been working on creating a learning card. As we work, we have been implementing slots into our render() in order to make life a little easier. The learning card which we are working on recreating is this:

Slotting Within Our Card

In order to separate our tasks, we have our code split between the Header, Frame, Icon, and the Card itself. Within each section the slotting is a little different! Below is what each section's slotting looks like:

Header

Frame

Card

What Do They Do?

Slots utilize basic level HTML to create different DOM Trees. They allow for the user to set placeholders within the component. This allows for flexibility and allows for the developer to create multiple DOM Trees.

Follow Our Journey!

GitHub : PenStat Card

Boilerplate Web Components Comparisons

elizabeth-delor — Mon, 11 Oct 2021 20:22:29 +0000

Types of Web Component Frameworks

Angular
React
StencilJS
VueJS

Similarities Between Each

Angular, React, StencilJS, and VueJS all have similar developmental tools which set the users up with similar directories. Additionally, they all include a index.html or file which does relatively the same thing. Another function which each has is that it provides the user with testing support / ability. Lastly, each provides a DOM [virtual or browser based] which will be specified below.

Differences

As stated in the similarities, yes each has a DOM but Angular uses a browser's DOM rather than a virtual one. Another difference which relates to StencilJS is the fact that it utilizes TypeScript files. StencilJS is more of a toolchain rather than a framework since it helps a user to set things up.

Preference

Personally, I enjoy using React as it offers both the ability for testing and is also simple to use for beginners. Since this is the first time I have been exposed to boilerplates, I have found this one easiest to use. Another plus of using it is the fact that there is a team of developers who work on React so you can find more information about it.

Building a Web Component.. things to think about

elizabeth-delor — Mon, 11 Oct 2021 01:05:55 +0000

Example of a Card

Over the next few weeks, my group and I will be creating a card for our web components course. When starting the development of a card the starting point was to brainstorm the different elements within it. The following is what my groups and I came up with:

Icon
Header
Frame
Card

What are the Obstacles

Since the creation of web components is still a new concept for me, an obstacle my team and I will face will be the separation and completion of work. Since another team member and I are not very confident in our ability to create a card, we will have to get help from outside sources or other team members.

For the Future

Over the following weeks, I will gain a better understanding of web components and the creations of cards. Learning how to design using CSS will be difficult but I am excited to see the progress my team and I will make over the next few weeks.

Check out the progress!!

GitHub : https://github.com/PenStat/penstat-project2

Button Updates

elizabeth-delor — Tue, 28 Sep 2021 17:44:16 +0000

Current State of Button

Currently we have two buttons, one which is normal coloring and has hovering & clicking abilities. The second is a duplication of the first but has the color variation requirement by using an inverted coloring.

Challenges

Some challenges which we are having involves having the button disabled and also adding an icon/image over our current button. In addition, we are working to make sure there are no other issues involving GitHub pushing, pulling, and committing.

What We Have Learned

invert the color of a button
using reflect
how to duplicate a button in index.html
how to make an image a button by pulling from files
how to use 'this.addEventListener'

Github and Button Preview

Github
https://github.com/elizabeth-delor/PenStat-CTA/tree/master/penguin-button

Installing Open-WC

elizabeth-delor — Tue, 31 Aug 2021 18:29:41 +0000

Applications Used:

Terminal
NodeJS (LTS)
Yarn

How to Access Terminal (Mac)

Press Command + Space to access spotlight search
Type in Terminal to Open

How to install NodeJS [includes npm]

Go to https://nodejs.org/en/ and download Node LTS
Once downloaded, go into download folder
Double Click and follow the installation prompts

To make sure it successfully installed...

Open Terminal
Type Node
If "Welcome to node js [vs #]" shows up, it has been successfully installed.

How to install Yarn

Go to https://yarnpkg.com/getting-started/install
In Terminal enter : npm install -g yarn

To make sure it successfully installed...

In Terminal type yarn
If "Success Already up-to-date" shows up, it has been successfully installed.

How to use Open-WC Boilerplate

In Documents Folder create a new folder called git
In git create another folder named your git username
Return to Terminal and enter cd Documents/git/~name of folder~
Enter npm init @open-wc
Select Scaffold a New Project
Select Web Component
Press A to select linting, testing and demoing
Select No for Typescript
Name Scaffold hello-world
Install using Yarn

Running Open-WC Boilerplate

Enter cd hello-world in Terminal
Enter npm run start