DEV Community: Bailey Pardee

What if time and money weren't an issue?

Bailey Pardee — Sun, 07 Nov 2021 19:54:30 +0000

What app, website, or technology would you create if time and money weren't a problem?

There are a number of problems in the world that could be solved if the right technology were to be created for them, but I can't say I'd be fully passionate about any of them. In classes, I've had countless professors start by saying "what's an app you could write to solve a problem?" and then you spend the rest of the semester writing a mediocre app that meets their requirements to solve that problem.

If I'm being honest, at this point I'm out of ideas. So often when you start to design an app to solve a problem you find that apps already exist for that problem and you just end up comparing yours to one that people already use instead of making it the way you want it to be.

With that being said, if I had all of the time and money I needed, I would design a video game. A video game may not solve any problems, but it would provide a source of escapism for people, allow for skill development, and connect people around the world through online play. I haven't fully decided what kind of game it would be, but I would lean more towards an action and adventure game that you can play with your friends and updates would allow for more world expansion and customization.

It may not be a life changing solution to a problem, but I think it'd be really interesting to learn how to develop a game. As of now, I'm no where near prepared to create a video game, but I'm always open to learning new things, so maybe someday.

Let's Talk About Fonts

Bailey Pardee — Mon, 25 Oct 2021 00:01:19 +0000

Maybe you've thought about fonts a lot or maybe you haven't at all, but if you're reading this chances are you've had to implement them in a project or will in the future, so allow me to share my font wisdom with you.

In my class, my group and I have been working on creating a web component "learning card" which is broken up into separate elements including the overall scaffolding of the card and a banner element comprised of a header, subheader, and icon as shown below.

Fonts can often make or break a reader's ability to understand the material so having a consistent one is important. For our lit element project, we found it was best to import a font from Google Fonts as it is hosted separately from our server simplifying the cross-browser support process. We did this by taking the link provided on Google Fonts and linking it in our index.html as shown below.

Then, within the body we styled it like any other element.

Swap allows you to set a back up font option in the event that your chosen font does not load. This is important so that the element can still render by swapping the chosen font for the fall-back font.

For the Stack Overflow post I followed, click here
To follow my group's progress, click here

Considerations for Building a Web Component and Its API

Bailey Pardee — Sun, 10 Oct 2021 20:53:54 +0000

Class Project

The web component we are beginning to work on is a card (shown below). Some things to consider when creating a card are: What elements can it be broken into? What "states" does the card have? What accessibility concerns should we consider? What flexible content should we consider? And more.

For our project, we will be breaking the card down into 4 main elements:

icon
header/banner
body
card scaffolding

Potential Difficulties

A potential difficulty I anticipate is determining how exactly we want the user to be able to interact with the card and making it happen. My group has discussed the concept of a card that slides to the side or up and down to allow for more information or icons. This is not a state that we handled with the button we built, so I expect new challenges with it.

What's Manageable

Having already made a web component that was a button, there are a few aspects to this card that I hope to be more manageable. One of these is the ability to apply basic states to the card. These include hovering and focusing. I also hope that getting started with the card will be more manageable than with the button as we are beginning with a template to follow and expand from.

Creating a CTA Button Progress

Bailey Pardee — Fri, 24 Sep 2021 14:55:16 +0000

For my IST 402 class, we are creating a call to action button. I'm still new to web components, so the button is a work in progress for my partner and I.

Difficulties

We've experienced a series of difficulties along the way of creating this button as we are both brand new to this process and there is way too much that goes into a single button. One thing we've struggled with is the shadow parts aspect of the project, so we're still trying to read up on how it works. We're also having some difficulties getting the disabled aspect to work, but I think we're close figuring it out.

Successes

My partner and I have learned to celebrate the small victories and take the requirements one step at a time. So far, we've been able to change the CSS for our button to change its look, add hover and focus changes, keyboard accessibility, and icons. We covered icons in class and learned how to add them to our buttons with just a few lines of code (now if we could only get the no icon option to work we'd be golden).

Overall, this process has been a big learning experience and we still have a lot more to figure out, so stay tuned.

If you want to view our button's progress, click here.

Comparing Web Component Frameworks

Bailey Pardee — Sun, 12 Sep 2021 21:53:58 +0000

In this post, I will be comparing the commonalities between boilerplates for React, Angular, VueJS, and StencilJS. Additionally, I will be providing my opinion as to which is the easiest developer experience when starting out and which I would prefer to use.

Similarities

A similarity of the VueJS, Angular, React, and StencilJS boilerplates is that they all contain a src or app directory. These directories hold the components needed to give the app functionality. Additionally, they all contain the JavaScript, CSS, and HTML files to create the necessary components. For these boilerplates, Angular and StencilJS both use typescript while VueJS and React do not.

Easiest Developer Experience

Of these four frameworks, VueJS appears to be the easiest developer experience to get going. It only requires a few steps to create a basic functional app with VueJS. In Vue you can have the Javascript and HTML written within the same file. This helps with easier organization and navigation around the codebase.

Which One I'd Choose

If I were to start building an "app" tomorrow, I'd use React. I am new to all of these web component frameworks, so there are a few key aspects I look at in deciding. React is commonly used by a large number of companies in a variety of different ways. As a result of this, there is a wide array of information and tutorials that can be found online to support the use of React at all skill levels.

For the Angular boilerplate I followed, click here.
To view my group's organization page, click here.

Installing open-wc on MacOS

Bailey Pardee — Sun, 29 Aug 2021 15:47:11 +0000

Installing open-wc first requires the installation of some additional tools and dependencies. In this post, I will cover Node.js/NPM, yarn, and the open-wc boilerplate.

Node.js
Download the latest LTS Build of Node.js here. Once the download is completed, the installer will have you go through a series of steps to complete agreements and enable necessary permissions. For now, stick with all of the default settings. NPM should also be installed with Node. To confirm that they were both installed, you can do node -v and npm -v in the terminal to check the version numbers.

yarn
Open your terminal to begin installing yarn. You can use the recently installed NPM to instal yarn with npm install --global yarn. If you encounter a permissions error, you may not have administrative permissions with your current user. If this is the case, use sudo npm install --global yarn.

Go to https://yarnpkg.com/ for more information about yarn.

open-wc boilerplate
Let's create a test project called hello-world to ensure everything is setup as expected. First, in your terminal, navigate to the folder where you want your project to be. Next, run the following command: npm init @open-wc. If your installations were successful, you should be given an option to Scaffold a new project. Use your return key to select this option. Next, use return to select Web Component and space bar to select all three tooling options: Linting, Testing, and Demoing. Select No for Typescript and set the name for you component as hello-world in all lowercase. Then, select Yes for writing this file structure to the disk and Yes, with yarn to complete the installation of all necessary dependencies. If everything was setup correctly, you should see the You're all set up now! message. To run it, do cd hello-world and npm run start.

IST 402: Web Components Development Intro

Bailey Pardee — Sun, 29 Aug 2021 14:56:02 +0000

Hello everyone! My name is Bailey Pardee and I am from Pittsburgh, PA. I am currently a senior studying Human-Centered Design and Development with a focus in Security and Risk Analysis at Penn State University. This semester, I am taking a Web Components Development course to further my understanding of web development. Over the summer, I interned with FedEx on a sort systems team where I had the opportunity to work on actual stories and defects from my team's backlog that are used in production today. Following the completion of my internship, I was lucky enough to be offered a full-time position at FedEx as a Full Stack Developer upon graduation. On the first day of this course, my professor referred to Full Stack Developers as unicorns and I still haven't decided if that's a good thing or a bad thing but I guess I'll find it out! My time at FedEx allowed me to further my Java skills and experience a variety of new technologies that I look forward to working with in the future and hope to be able to expand on with this course.