DEV Community: djk47-bot

Blog Post 10: Final Project

djk47-bot — Tue, 14 Dec 2021 01:32:04 +0000

Final Project: Project #3

Overview
During the last few weeks of class we began our third and final project. The goal of this project was to Contribute to HAX The Web through a series of open ended issues and project requirements. My group, IST402j, was assigned to the trading card element.Trading Card Here. Our goal by the end of this project is to have our card resemble something like this:

What We Have Completed So Far
Our project has incorporated NodeJS, HTML, and CSS. We have used imported elements from LitElement, HTML, and CSS as we tried to build and format this project. Through the implementation of our code we have been able to successfully render four different trading cards on our page and adjust the formatting of our cards to fit our holiday theme.

What Steps Are Left
As we come close to the project deadline, our group has a few requirements to complete for this project. We are making last minute formatting issues. We are working on HAX wiring, and uploading the project onto storybook. After that, we need to upload to npm and submit both the GitHub and npm links. Our project is coming along great!

Find Our Project Here

Building an Application

djk47-bot — Mon, 08 Nov 2021 00:34:45 +0000

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

Since I am a senior graduating this December, I have been spending a lot of time searching for jobs and strategizing on where to move to. I have seen real estate websites, apps for fun things to do around a specific city, and other apps to connect with new people around your area. I would love to create an application that bundles all of those aspects into one and adds other features like safety tips for living alone, ways to find roommates, best places to shop, etc.
This would be a great bundle package to help assist new people in a new area.

This app would be useful for people of all ages, and whether or not they were new to an area or not. College kids could utilize this application to find fun things to do around the area if they are new to campus/out of state. Off campus students can use this app to find cheap grocery shopping deals, or other places to shop for apartment needs. New company transplants can meet with other people their age throughout the city and find awesome fun events or clubs to do within the area!

If Money/Time Was no Concern

If money or time was no concern, I would definitely love to start expanding application into a larger business. As said in the idea above, I would love to create an application that connects new people of a city to other people with similar likes and interests. It would be fun to incorporate some sort of social hub/coffee shop where people could hangout if they didn't have anywhere else to go. Another cool aspect of this application is it is so broad that I could really incorporate different social elements into it and build off of it. I could incorporate different sports leagues for new people, add a dating element to the application, create a social media feed/timeline element, etc. The possibilities are endless!

Slot Composition

djk47-bot — Mon, 25 Oct 2021 02:52:43 +0000

I am currently working on a project to create a card using this layout:

Defining Slot Composition
In our code we are using slot composition. Slot composition is used to pass code through elements. Code from things like the icon or the header of the card can be passed through. Below are a couple of examples on how slot composition works.

Examples of Slot Composition

Sources
Javascript.info
vuejs.org
lwc.dev

Web Component Considerations

djk47-bot — Sun, 10 Oct 2021 21:05:12 +0000

Web Component Details:

The project we are focusing on for project two is creating a learning card. Some elements of the card include:
1) banner
2) icon
3) header
4) body
The banner of the card includes a color background for the header, subheader, and icon. The bottom part of the card contains the body right under the header.

Anticipated Difficulties/Past Experience:
I don't have any experience with web development prior to coming to this class, so I have a lot to learn before each project. Luckily, completing the button project has helped me understand more about web development and how web components work. Now that we have project one under our belt, my group can use the code criticism to learn from our mistakes and ensure we don't make them again on project two.

CTA Button Progress

djk47-bot — Sun, 26 Sep 2021 19:32:55 +0000

Difficulties

Some difficulties my group has experienced during this project is prioritizing our button features and understanding what elements are realistic and not. We are creating a Halloween button, so the options are limitless. When we were brainstorming we had some disagreements on what was important and what was complex. Our group has also had some difficulty finding time outside of class to meet up and work on the project. Luckily, this has been resolved. A couple of us are completely new to web development concepts so everything seems so complicated at first. Our group has worked through these issues and we feel comfortable on our progress.

Successes

I have been really impressed with our group's creativity. With spooky season coming up, it is so exciting to create a Halloween themed button. Brainstorming has been so much fun and there are so many cool elements we can incorporate into the button! I have enjoyed the learning experience of this project and I have impressed myself with how quickly I can understand the topics. Going over a quick button creation demo was a huge help. The demo helped my group figure out the best way to get started and answered out questions!

Button Progress

Web Component Frameworks

djk47-bot — Sun, 12 Sep 2021 21:03:28 +0000

What commonalities/overlaps are there between the boilerplate code?
Some similarities between VueJS, Angular, React and StencilJS boilerplates is that they all use Javascript,CSS, and HTML. All four boilerplates contain a /src and /app directory.

Which do you think is the easiest DX (Developer eXperience) to get going?
Since I am not familiar with these frameworks, I did some research and decided which one would be easiest to learn and build from. According to https://www.codeinwp.com/blog/angular-vs-vue-vs-react/ VueJS is the best framework to start off with. VueJS has high customizability and overlaps with Angular and React so it would be best to learn VueJS first and then transition to React and Angular.

If starting to build an "app" tomorrow, which would you prefer and why?
After reading more about the frameworks, I believe Angular would be a better choice compared to Vue and React. Vue is limited by its simplicity and allows poor code that is hard to debug/test. React is not considered a complete framework and requires third-party library use for advanced features. Although Angular has the steepest learning curve, it has the most capability compared to the others.

Here is the link I followed to get the Angular boilerplate: https://github.com/juanmesa2097/angular-boilerplate

Here is my group's organization:
https://github.com/ist402groupj/boilerplates

Open-wc

djk47-bot — Sun, 29 Aug 2021 21:31:54 +0000

Creating an Open-wc Boilerplate

Downloading an IDE(Visual Studio Code):
[Link] https://code.visualstudio.com/
Click on the link above to download Visual Studio Code
The program will ask for permission before downloading. Grant permission and follow the directions within the program.

Install Node.js:
[Link] https://nodejs.org/en/
Select Node TLS version (14.17.5)
Wait for file to download and then open and follow instructions
After installation you can run the command "node -v" to check what version you have downloaded. If you get version 14, you are all set!

Download npm or yarn:
Npm should be included with node.js
[Link] https://yarnpkg.com/ for more information
Open the command prompt on your computer
Type in “npm install -g yarn” to get started with install
Optional Type in “yarn set version berry” to download all versions of Yarn from 2 onwards
Optional Type in “yarn set version latest” to update to the newest versions

Creating the open-wc boilerplate:
Type in the command: npm init @open-wc
Select a new project scaffold
Select a web component
Check the option that includes linting, testing, and demoing
Select “do not user typescript”
Name file “hello-world” ** make sure everything is lowercase**
Select to install using yarn

IST 402 Introduction

djk47-bot — Sun, 29 Aug 2021 21:21:52 +0000

Hi my name is Delaney Kendrick. I am a senior majoring in Cybersecurity Analytics and Operations. I am interested in web development because I enjoy programming and I would love to learn more languages. I have learned about web development when I had a mentor during one of my internships who showed me his project work as a web developer. I am rather beginner with most languages and I would love to further develop my coding skills.