DEV Community: ColtonE37

Web Components: Flashcard

ColtonE37 — Mon, 13 Dec 2021 14:02:52 +0000

Our group this semester, we have created many things including a functional and reusable button and a learning objectives card. To wrap up our final project, we have taken on the creation of a flashcard.

Beginning

We were given a starting point of a flashcard, in which our group took the time to dissect this card and break it down into multiple parts. We decided that this flashcard would have an image area, the body that holds the user input, the checking button of the answer, and a retry button.

The Journey

Our group spent many weeks figuring out the styling, functionality, and performance of this flashcard.

The above image is our replica of the example flashcard. We made sure to include all possible features and functionality that a flashcard should have if you were to see one out on the web. Below are the checking of the user input and the retry functionality.

Our group wanted to display whether or not the user correctly or incorrectly answered the flashcard question, using icons showing a checkmark for correct and a red X for incorrect. We used simple colors for our styling on our flashcard.

My Role

My job on this flashcard started out with the creation of the check answer and retry buttons, while also adding their correct functionality when input was included by the user. Using past projects, I was able to go back and figure out how to create something simple, like a small button, and make it look like our example flashcard.

Below is some of the checking answer functionality of the check answer button.

The End

If you want to take a more deeper dive into this flashcard creation, our Github (and soon our NPM) will be linked below.

Github Link

Build Anything? I Wish..

ColtonE37 — Mon, 08 Nov 2021 02:31:04 +0000

If you could build an app, website, or technology of any kind, What would it do?

I've always wondered this question, if given all the necessary resources.. money.. time.. motivation. Sitting here trying to think of something that I would love to create from scratch has turned out to be super difficult, yet only one thing comes to mind. Video games. The one thing I have always turned to as a way of escape and enjoyment, and have always had a strong passion for. But is it the way the games were built that I love so much.. or is it the constant grind and strive to be the best in any game I play? Honestly.. winning is just too much fun. To be able to build my own website to potentially put whatever I want gaming-wise is something that interests me very much, yet can't find the motivation to put the effort in. Even just for the experience in coding, something like this would be worth the time.

Who would it be for? How would they use it? How would you use it?

Honestly, something like this could be for anyone who would want to view the highlights, clips, images, or following the journey of doing what I enjoy most. Would it be the most impressive thing ever created? No, not at all. Would it be sick to create something just to show off what I love? Absolutely.

If money was no concern, time no concern; what would you do with your life and the skills you've assembled if you could dedicate it to one thing?

I've asked myself this question many times in the past, and the answer still stands as playing video games. I have had a passion for video games since I was 6 years old, and have always had the drive to be the best I could with whatever I played. I have met some of the greatest people online and have had some of the best experiences and memories created by just playing with friends. As everything in the world does, time passes and things change. Most friends don't have the time to do the things we used to anymore, and have to adjust their lives to fit their own situations. Video games to me are more of a way to escape life's stressful times and enjoy the times I have doing what I love. The more people say they are a waste of time with no real value, the more I continue to play, as most people don't realize how much they help. They connect people, putting each other and surrounding everyone with like-minded interests and passions, while having a great time. I would totally put everything I had into just playing anything I love if I could, yet we don't live in a fiction book. I have spent tons of time trying out different hobbies, thinking of different work I could do, and even go suckered to going to college to figure out something I had any interest in for money... coding is fun and exciting to learn when you are surrounded by motivated people and professors putting the time in to teaching valuable lessons, but if time and money weren't an issue.. video games is where I'd spend my days.

Slots?

ColtonE37 — Mon, 25 Oct 2021 13:49:54 +0000

Slots are a HTML element that allows the user to set a placeholder inside of a web component to fill up with any markup. This lets you create multiple DOM trees and present them all together.

Our latest project, called learning-card, has multiple uses of this element for us to fill with any content we want. Below is the example card that we are trying to replicate.

This is what we have so far for this project, as there is a lot more to fix and add to this.

Follow the project: https://github.com/TheKodingKrab/project-two

Web Component Building

ColtonE37 — Mon, 11 Oct 2021 01:49:34 +0000

To further explore web components, I have been introduced into making a card on a webpage. Previously, a group of students and I have built a functional and reusable button web component, now implementing into the card, to allow the user to be more interactive on the page.

Card Building Example

Potential Difficulties

At a first glance, I think now that each member of the group is going to be focusing on one card, the most difficult part will be communication before and after making changes and pull requests to the component, as well as particular functionality with a clickable icon into a drop-down list of content. We want to make this card as user-friendly as possible, giving it an adequate amount of usability and accessibility to all users on all platforms. Going along with that, making our component usable on mobile and other spaces other than a PC webpage may present a new set of difficulties in the near future.

What Is Manageable?

Since making our button web component, I think shifting those elements into our card will be fairly simple and not too difficult to reflect into our card. I think the card may adopt many features that the button has, so just manipulating it to do a little more functionality will be the challenge, but not as hard with more brainpower and ideas. We have been given a good example template to work off of and we will make the most of what we are given.

Github: (https://github.com/TheKodingKrab/project-two)

Web Components Update

ColtonE37 — Sun, 26 Sep 2021 23:55:25 +0000

Work Done So Far

Throughout the weeks of understanding web components, there has been tons of new functions and coding techniques that were introduced to me since my last semester. We have started using our open-wc boilerplate to introduce our first project, creating a CTA Button. For the first week, our group has produced a not-so-pleasant-looking button, yet is the starting point into building something better. So far, our button has the functions of hovering, disabling, focusing, and activation, so far following all the necessary guidelines. HTML, CSS, and JS are the languages I have enjoyed learning and improving on so far this semester.

Easy Parts

So far, the button has been pretty straight forward with functionality and being visually appealing. Being able to design in CSS with our button and give it the professional look and functions has been "easy enough" with the help of examples and in-class walkthroughs. Although, there has been some challenges.

Difficulties

Some difficulties we have faced are mostly with GitHub, with the merging and pulling of different people's code. We have resolved most of our issues so far from talking in person with one another and getting our code on the same level. Other than that, the button project has been smooth.

What I've learned

I have learned to closely follow examples and code walkthroughs in class, as well as trying to get as much of a head-start as you can. We have been given the opportunity to have our code reviewed and improved so much, by just working ahead. It is awesome to have a great instructor who sees hard-work being done and giving all students the opportunity to progress their learning and code skills by working ahead on assignments and projects.

Our Repo: https://github.com/TheKodingKrab/cta-button/tree/main/CEEK

IST 402 Boilerplates

ColtonE37 — Mon, 13 Sep 2021 17:24:40 +0000

Commonalities Between Boilerplates

Looking at the baseline of all these boilerplates, each has specific files across each one, such as an index.html and package.json. Also, when downloading each one using npm/yarn, each has tons of dependencies needed to run each one. They also include html, css, and JS to provide functionality to the files.

Easiest Developer Experience

For the easiest experience with frameworks, I think VueJS might be the one to go for. The integration of existing projects into VueJS is said to be fast and smooth out of all frameworks, considering I have no experience with any of the others. Vue is one of the most popular frameworks when it comes to starting out, as well as being flexible to its users when building projects.

Which Would I Choose?

After looking through all the frameworks in our Github, I think if I was to build an app tomorrow, I would use VueJS. It is one of the most popular frameworks in businesses and companies, and there is a lot of information regarding this framework, making it easy to learn and understand from a beginner's standpoint.

To see the boilerplate I used, click here
To see the Github for our group's organization, click here

IST 402: How To Install open-wc

ColtonE37 — Sun, 29 Aug 2021 03:33:01 +0000

Getting Started:

Make sure to have administrator rights on your computer
Know how to open terminal (Command + Spacebar, then search Terminal on Mac)

Steps We Will Complete:

Installing NodeJS/NPM
Installing Yarn
Installing VSCode IDE
Running open-wc Boilerplate

Installing NodeJS/NPM

Start with the NodeJS installation, using this link here: https://nodejs.org/en/.
(Make sure to download the LTS version, as this will help install the correct package.)
• Once the installation box opens, continue your way through the installer, just using the default install location.
• Once installed, we can move on to the next necessary package, as NPM will install along with Node.

Installing Yarn

To install Yarn, we will now open our terminal.
• Paste the following command into the terminal: npm install -g yarn
• If errors occur, which could happen for a variety of reasons, mostly to do with administrator permissions on your device, do not panic. This error can be resolved by adding "sudo" to the beginning of the command, like this: sudo npm install -g yarn

Installing VSCode IDE

Head over to: https://code.visualstudio.com/download and select your correct version.
• When the installation prompt appears, accept the agreement, install in the default location, and depending on whether you want the shortcut icon or not is up to you.

Running the open-wc BoilerPlate

Great! Now that you have made it this far, we have just a couple more actions to perform. Here is how the last steps will play out:
• Create a new folder on the desktop, we can call this: Documents.
• To access this folder correctly, use the terminal to access the folder's correct level using cd (directory name), or by right-clicking the folder on the desktop, you can select "New Terminal at Folder" to go into the right level of the folder
• Still in the terminal, at the correct level of the folder, run this command: npm init @open-wc (If errors occur again, you can add the "sudo" at the beginning of the command.) You should have the screen showing below:

• Using arrow keys and the return key, select "Scaffold a new project"

• Select "Web Component"

• Use your spacebar to select all three options: "Linting, Testing, Demoing" and hit the return key

• Select "No" when asked for using TypeScript

• Name your component: "hello-world" Make sure this name is all lowercase!

•Select "Yes" to write the file structure to disk

• Select "Yes, with yarn" to install all necessary dependencies required for this

• After some loading and if all is done correctly, it should look like the photo below!

You have now set up your Boilerplate for open-wc! If any questions, comments, or concerns about the whole installation process, feel free to leave anything below the post! Enjoy!

IST: 402 Course Introduction

ColtonE37 — Sun, 29 Aug 2021 00:28:48 +0000

Hello Everyone! My name is Colton Eckenrode and I am from Bellefonte, PA. I am currently a senior at Penn State, majoring in Design and Development within the Department of IST. During my free time, I love to play video games with friends, practice/learn coding, hangout with friends, and play golf. Regarding web development, I have always enjoyed learning about how websites function in the back-end, as well as just building websites in general. With the technological advancements we have today, and the way jobs in this field have been growing, it is almost a necessity to learn about this kind of information and the way technology works in today's society. I'm excited to learn more about different web components in this class and how to incorporate them into code to further my coding knowledge, as future jobs will most likely look for some of these aspects. I have had the opportunity of using different languages such as Java, HTML, CSS, JS so far in my coursework to produce different projects within a group setting. As I know there is tons more stuff to learn, I think what I have seen so far has taught me pretty important techniques and has allowed me to have experience with different coding languages, as well as working alongside multiple groups of people completing semester long projects.