DEV Community: andrewtheiller37

Final Project

andrewtheiller37 — Sun, 12 Dec 2021 23:57:35 +0000

Overview:
The web component my group decided to work on was the trading card project. This consists of making multiple trading cards with a name and image, as well as an age, power, and speed stat. Although we are not fully done yet, I am pleased with how the cards are looking. Here is our project so far.

This is just a snippet of the 4 cards we have, formatting is still being worked on. The main library we used was LitElement, as our main source file extends it. We will also be implementing HAX, but we have not complete that yet.

Tutorial:
We started out by creating an array and mapping trading card data into the array. After this, we resized the cards to better resemble a trading card. This included playing around with height, width, margins, and other formatting settings. We used a very cool way of printing out the right trading card by calling a specific one from the html file. Below is how we implemented this.

Biggest Challenge:
One of the requirements o the project was to use an array for the data. We got stuck on how to do this, since all of the data was put onto one card. Eventually we ended up adding code in the html file that allowed us to only print one at a time. This was the biggest challenge we ran into and it instantly made the project look better after we fixed it.

Link to NPM: https://www.npmjs.com/package/@paddyshub/project-3
Link to GitHub: https://github.com/PaddysHub/project-3

If I Could Build any Technology with no Constraints

andrewtheiller37 — Tue, 30 Nov 2021 20:03:31 +0000

In this post, I will be talking about a technology that I would create if time, money, and other constraints were not a problem. The technology that I would create would be a combination of a washer and dryer.

The fact that this does not widely exist already blows my mind. Personally, I need to walk across the building and all the way down to the basement to do my laundry. After doing this with the washer, I then need to go all the way back down just to transfer my clothes to the dryer. If these two were combined, it would eliminate a trip and I would just need to go back down when they are finished.

I believe this would even be of use for a person that is not far from their washer or dryer. For example, a person may hold off on going grocery shopping for say, because they are doing laundry and need to put their clothes in the dryer after they are washed. With the washer and dryer combined, there is time to go grocery shopping since they do not need to wait for the washer to finish.

Although this is completely a first world problem, it would be something very beneficial that I believe everyone would use.

Slot Composition

andrewtheiller37 — Mon, 25 Oct 2021 01:32:05 +0000

As mentioned in the previous post, I am working on a project to create the following card.

Slot composition is used to pass slotted code between multiple elements. It can be used to pass code form the header or content of the card and then into scaffold. One example of how this is used is shown below.

Web Component Considerations

andrewtheiller37 — Mon, 11 Oct 2021 00:49:07 +0000

Overview -

The main considerations for building a web component is

Security
Accessibility
Design
States

The project will be creating cards similar to the ones linked in the post.

We may run into some difficulties since a card is more complex than the button we did previous. The main difficulty will be how the user interacts with the card (state change, clickable parts within the card).

I am sure that we will be able to complete the project since we have 4 group members working on the same project now. We will all put our heads together and figure out the best way to tackle the project.

Button Update

andrewtheiller37 — Tue, 28 Sep 2021 20:55:41 +0000

So far my partner and I have successfully made a button and added a link to it. We made it so that the link opens up in a new window. Also, we added a hovering state to the button. The button turn blue when the cursor is hovering over it. The icon and text are complete inside the button as well.

Here is the link to our work - https://github.com/PaddysHub/CTAButton

Week 3: IST 402 - Web Component Frameworks

andrewtheiller37 — Sun, 12 Sep 2021 23:22:55 +0000

Comparison -
Looking at the 4 web components frameworks: Angular, React, StencilJS, and VueJS, there are some similarities. First, all of these use JavaScript as their language. Also, they have a similar file structure in the boilerplates. Angular and StencilJS use typescript while VueJS and React don't.

What I Would Choose/Easiest Developer Experience -
The framework that I would choose would be VueJS. It appears simple to use and does not require many steps to create a functioning application on it. Also, it has the least amount of files in it. There seems to be a large amount of resources and tutorials for VueJS, so that would be useful when encountering problems.

Repo - https://github.com/PaddysHub/boilerplates

Tooling post

andrewtheiller37 — Sun, 29 Aug 2021 22:08:05 +0000

Here is how to install open-wc from scratch.

Download Install Node LTS (https://nodejs.org/en/) (should install npm too).
Download yarn (https://yarnpkg.com/).
Open the terminal on your machine.
After navigating to the folder that you are going to use. Type the command npm init @open-wc
When the options arrive click - a new project scaffold > web component > linting, testing, and demoing (check the boxes using the space bar) > Does not use typescript > type hello-world > clicked install using yarn.
The install is complete.

Blog Intro

andrewtheiller37 — Sun, 29 Aug 2021 21:52:44 +0000

Hello everyone!
My name is Andrew Theiller and I'm a senior studying Cybersecurity Analytics and Operations with a focus in application development. I've had a decent bit of experience with Java, but I have never coded in a scripting language so I am looking forward to that. I had an internship over the summer, but I did not do any programming in it. I look forward to learning another programming language and learning more about web design!