DEV Community: yuellian

Finale: Blog 10

yuellian — Tue, 14 Dec 2021 04:22:19 +0000

The last project in our IST 402 class was a coding assignment that allowed us to explore HAX the Web by choosing an open ended issue. My class partner and I chose to create a fully functional trading card that uses HAX to edit values. Below is an image of the card we are recreating.

At this point of our project, this is how our cards look.

We have an alignment issue with the Agile stat row and the stats do not appear.

What I am most proud of is seeing all the files working together. We used map array functions and slot elements in order to create the data and it was nice figuring out how we were able to see all of it coming together.

The main difficulty this entire semester was figuring out how to work github commands. Our NPM did not always run smoothly and my partner and I were not used to pushing changes so during this project, we made the mistake of making too many changes (300+) on one compute and the changes would not push onto Github. We still have to figure out how to upload all the changes or upload a new repository for it. This is the current problem we are facing.

To access our project on Github: https://github.com/IST402/pj3

App/ Future

yuellian — Tue, 09 Nov 2021 14:20:15 +0000

App

If I could build an app, it would be a carpooling app. This app is similar to Uber. It would be as widespread as any major social media application and would be integrated into people's daily lives. Essentially, if a user with a vehicle has space in their car they will go on the app and alert people near their vicinity that they will be going to a specific place and that they have space in their car to pick up people. There will be a window for how long the user waits for people to request to join their ride. They can choose to not pick up anyone, but if the people are enroute to their location, then they will pick them up. This app is extremely convenient, saves time, saves money, and decreases overall traffic. This app is for people with a car who want to help others and for people who need a ride.

The major constraint for this app and the reason why this app would never work is that our society is too dangerous. This app can only work if we trust that nothing will happen in the car once the driver picks up the rider. We have to trust that the driver is actually going to the location they specified, that the rider is safe, and that they both don't mean any harm. We can't guarantee anything so this app might create more danger than assistance. I wished society didn't have any ill intentions and would solely use this app to help people and provide overall convenience. If there was a way we can assure people would use the app for its sole purpose, then I would love to create this app.

Future

If income did not matter, if time did not matter, if all careers were all valued the same, then I would want to be a student and teacher for the rest of my life. I love learning new things. If I had the time I would like to take one class per semester so I will always be learning something.

Growing up, I always admired my teachers. I was especially appreciative when I noticed how happy they are when they saw their students understanding and learning the material. I also had a couple of experiences being a tutor and I was extremely content when the material finally clicked with the student. I wished teachers were paid more especially due to how integral to the advancement of society they are, however, this career is undervalued and would take too long/ longer for me to reach my personal goals.

Fonts in Lit

yuellian — Tue, 26 Oct 2021 16:17:55 +0000

Fonts are an important factor when creating a web application. They play an important role when it comes to the appearance of your website.

Typically, to access fonts, you can write your own code or use a third party service.

Font Family

p {
font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

Traditionally, fonts can be applied using HTML's font-family property. The system will traverse through the list of font-family values until it finds the one the coder identified. The downside is that the font choices are limited.

You can also import fonts in your CSS file. You can either use the CSS @import or HTML tag.

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

Fonts in Lit

Importing a third party font is not supported in Lit. We have to use a tag in order to access the font.
First, you would have the create the font-family attribute in the CSS file.
Then, you would have the tag in the head of index.html.

Creating A Web Component

yuellian — Sun, 10 Oct 2021 19:47:58 +0000

There are many factors to consider when making a web component. In this blog, we will be identifying these factors.

First, we have to keep in mind the functionality and states of the card, accessibility concerns, security concerns, and design considerations.

As seen in the image of learning cards, our project consists of creating a icon, HTML text body, and header that includes the header and sub header for the card. When creating these learning cards, be mindful of the font size, card colors, font, shape of the card, and padding of the card. A key feature to note is for your card to be responsive with the website. We have to make sure that when the user zooms in and out of the website, the card will adjust to fix the window size.

Project Gauge

As an outside view, creating this card component seems pretty manageable. One of our criteria is to implement the slot feature and we already have experience with that in our button project. My main concern is working with HAX. I don't have experience with HAX so there may be a learning curve for me there.

Button Web Component

yuellian — Sun, 26 Sep 2021 19:14:19 +0000

In my cta button project, my partner and I have coded the basic css designs and the javascript function for the drop down button. We also created a slot element to practice reducing repetitive code and implemented the simple-icon library so we can included an icon for our button. Over this weekend, I am working on adding the states to the button.

My main difficulty has been launching my code onto the browser. My laptop already has the necessary installations but neither yarn start or npm run start is working. Lately, I've been copying the code that is being partner pushed onto github and pasting the changes into my code; then, I will send new code over through discord and he will implement it on his end. I will continue to look online to look for solutions.

As I continue to work on this project, I am learning more of how HTML, CSS, and JavaScript are working together to make the button work.

Repo Link: https://github.com/IST402/btnproject1

Web Frameworks

yuellian — Mon, 13 Sep 2021 16:58:17 +0000

COMMONALITIES

They are component-based JavaScript frameworks. StencilJS, however, is just a toolchain that creates projects.
VueJS, React, and Stencil use a virtual DOM while Angular uses the browser's DOM.
StencilJS and Angular both use TypeScript files

DUPLICATE/OVERLAPPING

package.json file
All have a source directory

EASIEST DX
React. It offers a lot of flexibility and is easy to test. It also has a strong community so if a coder needs help, there is a large group of developers and supporters who might've already answered their question online.

PREFERENCE
I like the Angular framework because it is a full-fledged solution, however it is great for large-scale applications. I would prefer using React for our projects because it is really flexible and great for light weight apps. It is easier to get started and relatively small file size (100 KB).

ORGANIZATION'S BIOLERPLATE
https://github.com/IST402/boilerpoint

MY BIOLERPLATE FOR ANGULAR
https://github.com/yuellian/boilerpoint

Installation Windows Set Up

yuellian — Wed, 08 Sep 2021 19:37:42 +0000

Node.js - package manager

Click on this link https://nodejs.org/en/
Choose the LTS version to download.
Once downloaded, an installation window will appear. Follow through the prompt.

NPM
NPM is installed when you install Node.js.
To check that both are in your system, open your command prompt and type
node --version
npm --version

Yarn

Open command prompt and type install -g yarn
To check if Yarn has successfully installed, type yarn --version

Open-wc
Create a folder for your projects in this class.
Open command prompt to that specific path
Type
npm init @open-wc

A prompt will appear. Select "Scaffold a new project" "Web Component" Enable all tooling options (Linting, Testing, Demoing) "No" for Typescript Enter your project's name "Yes" to Write file structure to a disk Type npm run start You are ready to code your project.

Introduction

yuellian — Wed, 08 Sep 2021 19:26:21 +0000

Hi! My name is Yue Lian and I am a junior majoring in Information Sciences and Technology with a focus in Integration and Application. I was born in Guangzhou, China and raised in New Jersey. Entering college I wasn't sure which major I wanted to pursue. I took introduction business and engineering courses my first year and after I weighed my options, I chose computer science. Then, the pandemic lockdown hit and I realized I wouldn't enjoy a career as a software developer. After extensive research, I realized product management is the field I actually want to enter specifically in the software development sector. I changed my major to IST at the end of my third semester and this path has now lead me to take IST 402. I still enjoy the technological focus in my courses and web development has always interested me. I am excited to learn about the fundamentals of web development in the course as it is an important skill to have and so I understand what makes the product work in my career.