DEV Community: ndesanno

Event Badge Final Project

ndesanno — Mon, 13 Dec 2021 03:36:45 +0000

Summary

This is the final project in the semester long class about learning web components and web development. This was a issue queue and project to wire to HAX for other people to use. The goal is a robust event badge that anyone can easily edit for their own event.

Beginning Stages

We were asked to build ff the image above and to make it changeable like it is on the website. There are many different elements to consider when trying to make this so my group and I decided on the following:

Event-Badge
Event-Header
Event-Photo
Event-Name
Event-Logo

Current State

This is what our project looks like now. We decided to take some creative liberties and change the theme to Hockey. This will still be able to be changed if the user has their own images.

We know that there is some progress to be made, but we have discussed what has to be done to make sure the team is on the same page. To finish it, we have to edit the slots to have the bottom header and image fit on the same line, add another slot for information, that element would be Event-Name.

This project requires a lot of slot and div classes to be used to properly format and make the card look like a usable event pass. For example, or render function for the header is shown below:

 render() {
    return html` <div class="container">
      <img src="${this.icon}" alt="" />
      <div class="centered">
        <h2><slot id="main-header" name="main-header">main header</slot></h2>
      </div>
    </div>`;
  }

Our other render functions also look similar to this.

Hax and NPM

Touched upon earlier, this project was a part of a issue that was on Hax GitHub account. WE decided to tackle this issue and make it our own. With just limited experience on the team and just 4 months experience myself, it has been a good learning experience attempting the projects. This will also be published to NPM for an easy download for anyone that would want to use this event badge.

Links

NPM: Added when project is complete
GitHub Repo:https://github.com/runtimeErrorsMadeEasy/Project3

Tech wish

ndesanno — Mon, 08 Nov 2021 00:58:21 +0000

If I could build an app, website, or technology, I would want to build an app that could help bring education on any topic to anybody in the world. If someone wanted to learn what happened during the 1600s they could go to the website, or if they wanted to learn how to solve calculus problems they could go to the website.

Who and how

The website would be for anyone with a curious mind. There is a lot of gatekeeping around higher education and sometimes free ones are looked down upon. In the world of engineering, some engineers went to an Ivy League school, but work with someone on their team that learned from buying textbooks and free online resources. The only difference between those two people is that one paid a lot of money for a piece of paper and one had a curious mind and the discipline to do it on their own.

They would use it by searching a topic, and having a certified course/resource pop up that someone had created, teaching them the topic.

How I would use it

I would use it by assisting me with my passions and furthering my knowledge of certain aspects of technology. It would be information at peoples fingertips, without having to search through google for reputable sources and good information.

My passion

With the skills I have assembled and the interests I have gained along the way, the one thing I would like to do with my life would be to work in eSports/gaming. Ever since I have been a little kid I have played video games with my brother and it brought us closer together and I would like to make that possible for future generations.

Being able to be a part of something and help improve it with the skills and experience I have would be an opportunity of a lifetime and not a "Job".

As time goes on and as I work at a consulting company doing cybersecurity for medical devices, I start to want to help build something that is creative and people go to for an escape. For me, video games has always been that so why not try to make my escape the thing that provides for my family.

Slot Tags

ndesanno — Mon, 25 Oct 2021 05:59:08 +0000

Slot Tags

A Slot tag in HTML essentially allows a placeholder to be able to include your own markups/code. When the code is run, it shows all the pieces together. This effectively is a way to separate different parts of the code, but still have it show up as one.

Example

These cards have been developed by my team and I with help through the use of slot tags. Before development on the cards, we decided to break up the cards into parts to be able to take advantage of scaffolding slot tags. The breakdown is as follows: icon, banner and header, card, scaffold.

When in development, the '' tag helps us be more agile in the content we want to include and it helps increase reusability of the web component.

group repo: https://github.com/runtimeErrorsMadeEasy/project2

Card Web Component

ndesanno — Mon, 11 Oct 2021 01:33:24 +0000

Development

My team and I are currently developing a card for websites like the one above. There are many elements that are a part of this card, but for this project we are focusing on four of them. They include icon, banner, scaffold, and the card itself.

Roadblocks

Some potential roadblocks we could face when developing the card with the provided elements is properly designing the styling of the elements to work together. We want the card to be very changeable with the elements working together. We also need to take into account the size of the webpage to be able to have the card properly display the data in a way that makes sense for all web page sizes.

Managing development

When considering working on a team with developers of all skill sets, documentation and communication of coding is key to project success. We will need to learn new skills in css and html to provide something that is workable and looks good.

repo: https://github.com/runtimeErrorsMadeEasy/project2

CTA Button Progress

ndesanno — Sun, 26 Sep 2021 23:02:51 +0000

Currently, my partner Adam and I have have been working on creating a CTA button that when clicked, will take you to a link. Along the development cycle there has been some good and some bad.

Good

The button at its core is functional, is the shape we want it, has an imported icon from a library, and has a hover state for it. The code for these functionalities is cleaned up and is properly developed.

Bad

We have been struggling a bit to correctly add some other required functionalities to the button, but are working on getting them completed. One in particular that we are working harder on is progressive enhancements.

Git repo

https://github.com/runtimeErrorsMadeEasy/ctaButton_2.git

Web Component Boilerplates

ndesanno — Mon, 13 Sep 2021 00:57:04 +0000

When researching frameworks for web components many different ones come up, but some common ones are VueJS, angular, StencilJS, and react. In this blog post I will be going over similarities between these frameworks and my opinion on them.

Similarities

Within each package, there is a source directory that has JavaScript, HTML, and CSS to run the whole package. All of them share similar code because it is so widely used and accepted. Also, Angular and React have more dependencies, that make it easier for the user to get what they want, but it makes the download longer.

Easiest DX

I believe that the easiest DX to get going is react. All that is needed is a few commands in the users terminal window and the program is up and running. All of these frameworks are similar and it all comes down to personal preference and whatever the user has more experience with.

What would I use to build an app tomorrow?

If I had to start building an app tomorrow, I would want to use react to build it. React has a large community behind it compared to others so it is easy to find information on it. Also, my personal experience with it has been good and I have the most experience with it.

To see some simple examples of these boilerplates, check out this repo: https://github.com/runtimeErrorsMadeEasy/boilerplates.git
Tutorial for a Hello-World program: https://upmostly.com/tutorials/react-hello-world-your-first-react-app

How To: Open WC on macOS

ndesanno — Sun, 29 Aug 2021 21:58:08 +0000

Hello! Today will be a blog post on how to instal and set up the appropriate tools to be able to use web components on macOS.

NodeJS

The first step will be to install nodeJS LTS for more stability at the link here: https://nodejs.org/en/. All this download takes is a simple file and you are good to go.

Homebrew

installing home-brew will make the rest of this process and future downloads much faster due to avoiding sudo access that could possibly come with making installations through npm. First, enter this into your terminal window: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" Follow the instructions on the terminal window and wait till installation is done. Note This installation will require sudo access so make sure you know your password.

Yarn

Now installing yarn with node is simple, just type: brew install yarn, into your terminal window.

Git

Also now is a good time to install Git while everything else is installing. Go to your terminal window and type: brew install git.

Creating a Directory

Create a directory however you want on your machine, either through the command Lind or just the desktop. I made a new folder through the desktop by right clicking, then hitting new folder and naming it git. From there I created a new folder inside of it named edtechjoker, but you can name it whatever you want.

Web Component

Now it is time to create your first web component.

go to terminal window and type: npm init @open-wc
Hit enter to select scaffold a new project
Hit enter to select Web Component
Hit A to select all then hit enter
Hit enter to select no to typescript
Type in "hello-world" no capital or spaces as the name of the web component.
Hit enter to select yes to writing to disk
Hit enter to install dependencies with yarn
After it is done building the web component, type in "cd hello-world"
Type in "npm run start"

Congratulations! you have just built your first web component!

Introduction

ndesanno — Sun, 29 Aug 2021 19:55:36 +0000

Hello everyone! My name is Nick De Sanno and I am a senior at Penn State, majoring in IST with a focus in integration and application. I have a background in cyber security and IoMT which is a new and emerging field in the healthcare industry due to all of the cyber attacks in the past years.

Currently, I want to learn more about web development and specifically web components for multiple reasons. Researching web components I have found that it is still a new and emerging field which is very exciting for someone who likes to stay on top of new technologies, also it makes web development easier for people to get started. Web development can open up endless oppertunities especially when the a lot of the tools that have been cutting edge in the field are just now getting to become mainstream, giving new developers, like me, the opportunity to create something interesting.

With my very sort time researching and working with web development tools I can already tell that learning this field is going to be fun and exciting, because of all the innovations that are being made within the community. Getting a head start on a newly growing field and community like this is extremely advantageous to my career as someone who is a developer and is trying to grow their knowledge and get a good understanding in a lot of different fields.

I am excited to get started in my journey of learning how to become a web developer!