DEV Community: Liam Kirkland

HAXtheWeb Project

Liam Kirkland — Sun, 12 Dec 2021 22:33:23 +0000

Overview

For our final project, our group is making a "mark-the-words" card. The general function of our card is to present the user with a paragraph. The prompt above the paragraph will tell the user what words to pick out.

The user can then select what answers they believe are correct. They do so by clicking a word within the paragraph. They can also deselect words by clicking selected words.

Once the user has selected all the words they think are correct, they can click the button labeled "Check". This will lock the paragraph so it is no longer interactable. It will then check the highlighted words, marking them correct or incorrect. Correct answers add a point, incorrect answers take away a point, missed answers have no effect. Their score is tallied and displayed next to the button. The check button turns into a "Try Again" button, which will clear the user's score, deselect all words, and set the board to it's original state.

Source

The project is not currently published to NPM as of 12/11/2021. By 12/14/2021 the project should be found in our group's organization found here.
The github link for the project can also be found here.

The Code

This project was written in NodeJS, HTML, and CSS. In the HTML, it is split into 3 sections:

Prompt Area
Text Area (paragraph/work section)
Results Area (button + scoring)

We imported the LitElement, HTML, and CSS libraries from lit for this project.
When the tag is used, the prompt and answers are declared within the tag (shown below):

<mark-the-words answers= "it'll,don't,you'll,i'm,we'll,can't,we've,wouldn't,didn't" promptContent= "Select all of the contractions (Words shortened using an apostrophe):">

The paragraph is put between the tags and parsed into individual spans that can be edited and interacted with. When a user clicks on one of the words, they apply an attribute to the span that lets the code know it is selected and should be checked if the button is pressed.
Once the button is pressed, all words within the text area lose their pointer-events. This means the user can't add more selected words in "check mode". Any selected word gets run through a for loop to determine if it is contained within the correct answer list defined in the tag. Correct answers are marked with a green box and add a point, incorrect answers are marked with a red box and subtract a point.
The points of a given test run can never go below 0 (zero), and their percentage correct is calculated to the nearest tenth of a percent.

Once in check mode, the user may reset the board by pressing the button which changed its label from "Check" to "Try Again". This clears all right and wrong answers, sets scores equal to 0, and allows the user to try again.

-------------------------------

Once styling is complete, I will insert a codepen.io link as a demo for the code.

My Dream App

Liam Kirkland — Sun, 07 Nov 2021 19:24:01 +0000

Ever since I was a kid, I've always loved computers, my parents say that I could use a laptop before I could walk. Ultimately my passion for computers and technology have driven me down the road I'm on now.

I think that technology and coding should be introduced to kids sooner, as sometimes you don't find out what you want to do until much later, when it's harder to learn with limited time.

I want to create an app or educational program that encourages kids interested in technology to venture further. Something that schools could use and integrate within their own program. With varying levels of complexity so that lower grade levels can still participate. It would specifically be designed for K through 12 teaching, as most colleges have the upper level learning that can get a student to where they need to be for their future.

Putting more emphasis on exposing kids to technology early is important, as it can get swept under the rug in many cases. Implementing a small class in middle school that would expose kids to the potential, then having more advanced elective classes in high school.

With no concern of time or money, I would promote the importance of tech and it's implications on developing society. It's an important thing to wield, and ensuring it's in the right hands with the right intentions is just as important. As easily that technology can make life easier/better, it can just as well make it worse, less private, less safe.
I want to ensure that technology is advanced and developed for the good of society, rather than used as a way to use or manipulate it.

Slots in Custom Web Components

Liam Kirkland — Tue, 26 Oct 2021 05:43:28 +0000

During development of any custom web component, slots can be extremely useful. Slots allow for use to pass in HTML into different parts of our card.

Below we see the cards we are trying to replicate.

Slots are ultimately useful in structuring a custom element. While our group is still trying to fully utilize slots in our component, we see the benefits of the structure they provide. We are on our way to properly using slots to their fullest.

render() {
    return html`

    <div class="cardWhole">
      <div class="cardHeader">
        <slot name="top-header"></slot>
        <slot name="bottom-header></slot>
      </div>
      <div class="cardBody">
        <p> content body </p>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>
    `;
  }

Our Github Repo

Building a Web Component

Liam Kirkland — Sun, 10 Oct 2021 19:48:43 +0000

A lot goes into building a web component, so it's important to plan beforehand. Thinking about each aspect of the component, as well as security, accessibility to those with disabilities, and stylization of it are all important to consider.

The Comp + Breakdown

For this assignment, we are working on information cards (shown below).

These cards are made up of 4 main elements:

Banner
Icon
Header
Body

Each one of these elements will be customizable, as shown in the image. The banner will go across the top of the card and will allow for color customization. This banner will server simply as a background for the icon and header. The icon will use an SVG, which makes it easily interchangeable. The icon will be placed on the left side of the banner. The header will be composed of a header and sub-header, placed on the banner next to the icon. The body will be placed under the banner.

Expected difficulties and What may be manageable

Coming into this class, I have never touched CSS or HTML. I've done the most basic use of JavaScript, and using NodeJS is a whole new beast that I am still getting used it.
So trying to learn then instantly apply what I've learned with little practice will be the hardest thing for me to overcome. Having the button project before this will help, as that provided me with some practice in those languages.

Creating a CTA Button

Liam Kirkland — Sun, 26 Sep 2021 18:41:08 +0000

Difficulties

For my IST402 class, we were tasked to create Call to Action (CTA) buttons. I myself have never worked with HTML or CSS prior to the class, and have minimal JS knowledge.
That has been the biggest hump for me to get over as I have to learn HTML and CSS basics while learning more advanced techniques at the same time. The CTA Button is also a brand new concept to both myself and my partner. There is a lot to learn for both of us and trying to adapt has been our biggest challenge

Successes

Despite these challenges, we have managed to create the base of a functioning CTA button. It is very basic, but as we continue to learn we keep adding more intricate/advanced pieces to the button. Hopefully by the end of the project we've expanded our skill set to make a presentable and well functioning CTA button.

Here's our repo so you can track our progress as we learn more and more.

IST402 - Boilerplates

Liam Kirkland — Mon, 13 Sep 2021 22:37:15 +0000

Commonalities between Boilerplates

Between the boilerplates, there are a couple off files that carry over between the two (VueJS and Angular are the only two I can currently compare) such as package.json. Both have a lot of extra files used to hold dependencies or information. Both also contain an index.html file within their source code. Outside of that the Angular boilerplate has a lot more going on within it.

Which Seems Easier/My Choice

Between VueJS and Angular, VueJS seems a lot simpler/easier DX. I would definitely start with using VueJS if I were to start a project tomorrow. I have very limited experience with Web Dev, so I'd prefer to stick with the easier one to get started (VueJS).

Org Github
Angular Repo

How to install open-wc

Liam Kirkland — Sun, 29 Aug 2021 23:44:00 +0000

To start, install the latest version of Node LTS by first going to the prior link.
After the download is finished, run the installer. Follow the instructions in the Node.js Setup Wizard (this should also install npm along with Node, which is what we need).

Now install yarn which can be done by entering the following command into the Windows Command Prompt:

npm install --global yarn

Now navigate to whatever folder you are going to use in your command prompt, then type the following command in:

npm init @open-wc

This may take a minute to setup, but once options appear select the following (using the arrow keys and enter key):

Scaffold a new project
Web component
Linting
No (no typescript)
Enter the name of your web component (in our case, "hello-world")
Look over the file location, if it looks right select "Yes"
Select "Yes, with yarn" for the dependencies install

And you're all set!

Introduction

Liam Kirkland — Sun, 29 Aug 2021 23:28:44 +0000

About me

Hello, my name is Liam Kirkland! I am from a suburb right outside of Philly. I've only moved once and it was to a house 5 minutes away from where we originally lived, so I've pretty much been in the same town my whole life. I am a senior at Penn State majoring in IST with a focus in Design and Development (which has since been replaced by HCCD). My hobbies basically revolve entirely around my PC (mostly just playing games), so I figured IST was a solid fit for my major).

Why Web Dev

Web development seems like a field with very broad opportunity, meaning there is a lot of possible options to find a job that would interest me. I hope to learn more about the skills required for the field and want to see if it is a good fit for myself. Web development is constantly evolving (from what I can tell) and is still a fairly new and emerging field. It is something used in virtually every business with new positions opening up everyday. It is something that would be worth gaining experience in to get a head start on the rest of just about everyone looking for a job anymore.

I hope to learn a lot from this class and am excited to work with everyone! :D