DEV Community: Perry McLaughlin

Trading Card Project

Perry McLaughlin — Mon, 13 Dec 2021 03:42:38 +0000

Introduction

I am currently a student in IST 402 completing my third and final project. This semester we have been learning the ins and out of web components and completing projects. This third project that I am working on, with three other students in class, is creating a trading card. This trading card has a header with the name of the object, an image, and some data like skills and a number to represent the skill level. The idea of this project is to contribute to HaxTheWeb. All of the projects that the class are completing are open issues in the HaxTheWeb issues queue.

This is what we are looking for

The image above is a comp that we were given as an example of what we want to achieve. We have designed our trading card to look like this.

Current State

Below I have a screenshot of one of the trading cards we have created (we have created 4 of them, 1 card per team member). This is definitely not our finished product, but it is where we are at currently.

We have some work to do on this card. A lot of the work revolves around some CSS changes which will make the card look much more professional.

Specific data for each card

We found a good way to render all 4 cards and make sure that the data is specific for the individuals card. The data points we picked were age, power, and speed. Below I have a screenshot of the function we created to do this.

This is just the if statement for my individual card but you can see how if the card data matches up to a specific name, it will then render that card. You can see that it is a pretty simple statement that we are able to change per which card we would like to render. Below I have attached a screenshot from our index.html file where we are calling the four trading cards. By calling the specific name, it will render that card with the specific CSS styles that we put in place as well.

Here is a screenshot of the CSS that I was talking about that will only apply to my card, so the colors will be brown and orange on my trading card.

Next steps

In the remaining couple of days on this project will be spent making sure that we have our hax wiring correct. My team and I will also be putting some time into ensuring that these trading cards are accessible and reusable. Those are two things that we have had some issues with in the past. We want this project to be very reusable. In the coming days I will be sure to update this post with our finished product as well as the new code we implement.

Here is the link to my teams GitHub Repo: https://github.com/PaddysHub/project-3

Here is the link to the project published on NPM: https://www.npmjs.com/package/@paddyshub/project-3

What I would do

Perry McLaughlin — Mon, 08 Nov 2021 05:02:54 +0000

What App Would I Make

If I had the chance to make any app I want I think I would make an app that I was actually just thinking about today. It would be an application where people could post about the length of lines at restaurants and bars. This would be a sort of social media application that is based on your location. So for example, if you location was in State College, you could sign in and post a current estimated wait time or length of a line at the restaurant you just got into. If you were told a wait time, then you could just go in and post that estimated wait time so other people at home who are thinking about coming, can know ahead of time what to expect. I find it very frustrating if I drive all the way to a restaurant just to find out theirs a 45 minute wait. I think it would be such a simple small application to make and would just need active participation for it to become successful. This could be something super popular in a college towns like State College for bars as well with so many students who go to the bars on weekends. I think it would be very popular among kids. They could just check the wait time at a bar before even leaving their apartment/house.

What I Would Do With My Life

This is a very interesting question that I thought would be simple to answer but I ended up having to think pretty hard about this one. If money and time did not matter at all, I would want to use my skills to do something that I would actually enjoy. I think some of my skills that I have obtained during college are along the lines of good business process knowledge, technical communication skills, and project management. So I started to think about things I could do with my life while using those skills. Most of things that came to mind were careers that honestly don't sound super enjoyable. So I came up with an idea of helping people invest money into tech companies. I think I have really good research and judgement skills and that could really help me help others decide to invest in a tech company/product or not. This is definitely a risky career choice being that your pretty much in charge of other peoples money and if you're wrong, they lose that money and won't trust you anymore. I think it would be super fulfilling to help first off your client by making them money off a good company/product that they invest in, but also that company/product their investing in is receiving that capital to reach their goals. If I got an investor to invest money in a start-up project, then that could really get that project off their ground and make their dream a reality. It would probably be a very exciting job where you don't really have the same work on a day to day basis which interest me a lot. I think doing the same thing day after day would just be so extremely boring and not fulfilling to me. I also think the feeling of really making a good call on investing in a company/product would be so exciting not only for me, but all the other stakeholders involved. I could also build up the trust of so many people through my hard work which sounds like a really cool thing to me. I would get to travel around all over the country and get to meet and speak to so many people. I am sure I would have the opportunity to meet some awesome people. This career choice may not be the most realistic, but I think it would lead me to being very content with going to work everyday.

Slot Composition

Perry McLaughlin — Mon, 25 Oct 2021 03:24:27 +0000

Slot composition is a helpful skill that I have been trying to understand more and more. Currently, I am working along a team of 3 other students to create a card project. The final product of this project should look similar to this image below.

My group and I are using four different elements to complete this project. Those four elements are a card, card scaffolding, an icon, and a header. I have been looking into how I can use slot composition to complete these different elements and create a smooth relationship between these elements. I have never used the slot while coding and it is not the most simple thing to understand as I have come to find out through examples I have seen in class and my own independent research. What I have found is that I can use the slot tool to place the information that I would like to be rendered in a more organized fashion taking that information from a separate position in my code.

If you take a look at the code below from my project, you can see how slot is being used in js file to call the information from header.

The slot is being used within the div. This is the same architecture that I am trying to get myself more familiar with as this will create much more organized elements that work well with each other internally.

Building a Web Component

Perry McLaughlin — Mon, 11 Oct 2021 02:52:29 +0000

I am currently a student at Penn State taking IST 402 and as part of the class, we have 3 major projects. Our first project was creating a button. Now as part of the 2nd project, we are creating a card. I think we will be putting the button that we previously made, onto that card. Which I think will be really cool. We have started with some base code provided to us by our professor and it is just a basic card set up that looks like a learning tool.

Break Down

The card has multiple elements, these elements are emphasized icon, banner/header, scaffolding of card, and the whole card. These are going to be the different pieces that must be put in place to create an organized card that looks appealing. My group and I will have to tackle each of these pieces individually then bring them together as one. We are also going to have to choose which direction we want to go with splitting up the tasks as well as which order we achieve these tasks.

Possible Difficulties

I think the biggest difficulty will be my groups inexperience. None of us have a ton of experience working with JavaScript or HTML. We are going to have to do a lot of CSS styling and are learning as we go. I think the first project that we completed helped us get our feet wet with CSS styling so we will have to keep moving from there. I think we can really work through our difficulties by just being organized with our process and asking questions.

Manageable Pieces from Last Project

Like I said, thankfully my group and I have been able to learn a lot from creating a button in our previous assignment. We are able to look how we used CSS styling in our button and see which parts of that we could use as part of our card. We can also just use the basic formatting that we learned to use from our button. Not only layout of the button, but basic layout of coding in JavaScript and HTML. I was able to see the correct way to set up a project and that is something I will definitely be referring back to as I move forward with this project.

Current Repo: https://github.com/PaddysHub/project-two.git

CTA Button Update

Perry McLaughlin — Mon, 27 Sep 2021 02:11:12 +0000

Current State

Currently, my partner and I, Andrew, are in a decent spot. We have a very basic button at this point. We have been following our in class lectures very closely as they have been very helpful to us. We just got some of our initial issues solved in class on Thursday, including issues with GitHub. We also just added in our icon in class on Thursday. We have the save icon on our button right now but we may change that to another icon in the big list that we were given.

Difficulties

Our biggest issues with this project thus far have really come from GitHub. My partner and I have little to no experience using GitHub so it is taking us a while to get used to doing basic tasks like pushing code. Besides that, we have run into issues with quotes ("") in the code. We found out in class on Thursday that there is actually issues when copying and pasting code and that where our problems came from. I had sent my partner a snippet of code that I had and it was pasted incorrectly in our code.

Items Learned

I have actually learned a lot thus far in this project. I have gained a lot of skills regarding coding HTML and also using the command line to perform tasks. I have never really used the command line in other classes. Like I spoke about earlier, I have also learned a lot about using GitHub as well. I am looking forward to completing our button and seeing the final product.

Repo: https://github.com/PaddysHub/CTAButton.git

Boilerplate Summary

Perry McLaughlin — Mon, 13 Sep 2021 02:26:15 +0000

Similarities

I will start by comparing the different boilerplates that my group has started to look at. We look at VueJS, Angular, React, and StencilJS. The first thing that I noticed is that the README files for all of them actually proved to be very helpful. I would say that probably the least helpful README was actually for the Angular, which is what I was specifically taking a closer look at. I noticed that the React and Angular boilerplates have very similar file organization which made it easy for me to navigate the files between the two. The gitignore was somewhat different for each of the boilerplates. They all also had very similar LICENSE information, I assumed they would be.

Easiest DX

I am not 100% certain which would be the true easiest DX to get going. The answer I am going to go with though is either React or VueJS. I have little to no experience with either but I know they are very popular. After taking a deeper look into the two, I feel like VueJS would be more simple based on the amount of files included in the React folder in our current repo. There is so much information that overall just made me more and more confused about how React works.

Starting an app tomorrow

My reasoning for making my selection may not be the best reason but I am going to say I would select React, even though I just said above that I don't think it is the easiest the learn. I am saying this because of all the popularity I have seen from it. I did some research and it seems like most companies are looking for developers who have experience working with React and that it just helps your career in the long run. In my past experience this summer working my internship, I know that company I worked for would push their developers to even learn React during the work day. So I think creating an app using React would just be beneficial to me in the long-run, even if it may be more difficult to learn.

My organization: https://github.com/PaddysHub

Repo I got boilerplate from: https://github.com/mdbootstrap/Angular-Bootstrap-Boilerplate.git

Install open-wc with no tooling

Perry McLaughlin — Mon, 30 Aug 2021 02:03:43 +0000

To start, we will need to install node 14 on your machine. To do this, you can use this link to get to the install page. Link: https://nodejs.org/en/
Once you get to this page, you will click on the 14.17.5 LTS install. This is the best option for install instead of using 16.8.0 version. You can then follow the basic install instructions from that point on.

We can then install npm on our machine. This is an easy process that just involves you going into the command line and typing in "npm install -g npm". You can then check to make sure that you successfully installed npm by typing in "node -v" and you should get the version number of npm.

Next, we will be installing yarn on our machine. To do this, go to your command line and type in "npm install -g yarn". To then check to make sure that yarn has been successfully install, you can type in "yarn -- version" and it will give you back the version number of yarn that you have installed on your machine.

Lastly go to the command line and type in "npm init @open-wc". If this successfully runs then you have correctly installed everything. Then follow the instructions by selecting a new project scaffold -> web component -> liniting, testing, demoing -> does not use typescript -> is named hello-world -> is installed using yarn.

Introduction

Perry McLaughlin — Sun, 29 Aug 2021 16:36:52 +0000

Hello everyone! My name is Perry McLaughlin. I am a senior from Cleveland, Ohio currently studying Human-Centered Design and Development. I will be graduating in December and am so excited!

I do not have a ton of programming experience outside of course work here at Penn State. I have been lucky enough to take a fair amount of programming courses while I have been here at Penn State. I have taken probably 2-3 programming courses a year since I have been here. Outside of these courses, I do not have much experience. This past summer I worked for a mortgage bank located in Cleveland, Ohio. During my internship there I worked as a business systems analyst. My job was focused on writing requirements to present to developers and do vendor research on possible products that we could purchase. I worked very closely with multiple developers but was not doing any of the actual programming. An example of a project that I worked on during my time there was creating an automated email to send out to loan officers when loans that they were working on were getting close to the closing date. It was a really good project to get my foot in the door and was able to work with the developers to get that automated email created.

I am really excited to get the semester started and learn many new things through out it. I wish everyone the best this semester.