DEV Community: Nova's Knowledge

Creating a Web Component is HARD

Nova's Knowledge — Tue, 04 May 2021 18:36:23 +0000

This past semester at college, I had taken a course about dystopian technologies. Please keep this in mind, I have little to know knowledge on HTML, CSS, JavaScript, open source contributions, GitHub, etc. With A LOT of help from my teacher @btopro I began to understand many of these concepts, and have started to consider a career in this field. If you ever get a chance to watch one of his presentations or take his class if you are a student it, DO IT. His class and teaching style has been my favorite out of all my classes during my collegiate career. The past three weeks I have began working on a simple (well I think it is very difficult) web component.

Now what did I do?

As shown in the picture above, I created a web component for anyone who wants to just post in a picture with a border along with a description, caption, and credits. As simple as this may seem, this took me three weeks to complete. I had to figure out the code behind it. Once I actually started to understand the code, I was able to figure out what actually needed to be done. I started by combining two different web components together. One of them was from a custom element, and one of them was just a bunch of different classes used. So if you ever want to play around with this component or even use it, that would be sick. Here's the repo:

https://github.com/NovasKnowledge/image

Behind the scenes

To complete this project, I used open-wc and npm through my command prompt. This was confusing at first, but was thankfully able to figure it out. I then used visual studio to actually code all the small details of the component! Let's take a look of what I actually did.

This is the index.html area of the component. This is what one would see if they right clicked on the page to inspect the web component. This is where I am importing the image into the border. This is the HTML of the custom web component. This is just a small portion of what was put into creating .

Now we're getting into the details. The two pictures above were written inside the src portion of the component. This includes all the CSS classes that formats the picture, border, text, and background colors. These classes are then called inside of the render method. The constructer initializes the starting value for the certain this."". Then inside of the index.html, they gain certain values that can be changed to whatever the person using the web component desires.

Overall, this was not a simple project for me. On the other hand, someone who has been working on these topics could probably complete this in under 30 minutes. Although it was challenging, I really enjoyed working on it. If for whatever reason you want to use my repo, go for it. I code for the people.

Monolithic vs. Microservice Architecture

Nova's Knowledge — Sun, 11 Apr 2021 22:40:48 +0000

When dealing with frontend and backend development, there are many different routes developers can take. With the fast paced world that we call technology, everything is constantly changing. Something new may be developed, and then everyone switches to that component. Web components are a perfect example of this. Monolithic Architecture is another example of this.

So what does Monolithic Architecture mean?

Monolithic Architecture is the old standard design for a software program. This type of architecture is heavy in the development aspects. The problem with this type of architecture is that if someone wanted to update one part of the system, this could effect the whole system. It is tightly coupled together. This makes the system much more challenging to understand and have many side effects to anything that may happen.

What's a Microservice?

A microservice architecture is a new design version for software programs. It uses many different services together (that are loosely coupled) to create the full microservice. This way, if one section or service of the design needs changed or updated, it makes life much easier for the developer. a microservice is better organized along with a performance advantage. By using an API call, each different service is able to communicate perfectly to one another.

What's the deal with this?

In conclusion, a microservice type architecture style is the new way to go. As I stated earlier, it is easier to deal with, it has a higher performance advantage, and there are fewer mistakes to be made. Microservices can also be used inside of different containers. Overall, the microservices are the key to the future

Learning Docker and Containers YouTube Video

https://www.youtube.com/watch?v=VmMvRhk_6q8

Web Components

Nova's Knowledge — Mon, 29 Mar 2021 02:13:16 +0000

What is a a web component?

Web Components are features that provide a standard component model for the web. In other words, this is something that can be written and then inserted into whatever one is working on. These different bits of UI are important for many reasons. This can be different themes, buttons, widgets, and almost any kind of design.

Recently web components have been altered to have a set of four browser standards. All major vendors have adopted these standards. Pretty much anywhere HTML loads so do web components.

So what are the four standards?

Elements

This is a way to hold custom HTML tags
These need to be cloned by the JavaScript
One can reuse them as many times once it is used once

Custom elements

These allow you to register a new HTML tag
These can be used instead of the and tags
Instead you can use a string for the name and are defined as a JavaScript class
All of these must contain a dash
All custom elements have their own custom attributes

Shadow DOM

Shadow DOM is a way to keep all of the CSS rules the same
This is important when working as a team
Shadow DOM isolates DOM nodes
It makes the web components self-contained.

JavaScript Modules

These pull together the other three standards
It makes all of the elements to function and be completed
These can only strictly be used in the specific module unless exported otherwise

Let's talk web

So what is actually the point of these web components? Well there are a few answers to this. First off, these improve accessibility tremendously. It lets the company design their site however they desire. By having this opportunity, it is on them to decide how accessible they make it. The more accessible the site is, the higher the usability.

These also help improve the future proof development and improve transparency. As stated above, once you create the four different elements, one can continue to use them down the stretch. The components can be used anywhere regular elements are used. Everyone uses these components already. They have become the web standard.

Benny Powers says all of this information best. I would one hundred percent recommend checking out this page to learn more about web components.

All big business use web components. All small business use web components. If you are on a web site that uses HTML, it uses web components. For example, companies like Google, GitHub, EA, and Mozilla all use them.

Web components are EVERYWHERE!!!

For more information about web components, check out my YouTube video below!

Learning Web Components

Gitting The Inside Scoop On GitHub

Nova's Knowledge — Sun, 21 Feb 2021 23:20:21 +0000

What is a git?

So who exactly uses GitHub? Well everyone, but no one at the same time. If you don't have a GitHub account, are you good bro? Stop reading this and go create an account now!

Anyway, GitHub has become a hub (yes pun intended) of sharing code. GitHub is an online tool that help you enhance your online profile while working creatively with a team. Creating repositories, forking, and commits are the backbone of GitHub.

So what is a Git? A git is a command line version control system. Version control systems are an important tool of the future. You don't want someone to go in and change your code and then have no clue what's going on.

Where to start

Once your account is made, go create a new repository. After this is created, go play around with all the tools. To get started, go to add a file, and create a new file. This is where the fun begins. Your adventure starts there. You can go in and start adding whatever code you desire. This can then be added to your main if wanted, or continue to be in a different branch.

Now if you wanted to add this branch to your main code, then you create a pull request. This will then send a notification to the admin. If the code lines up and there are no conflicts, the admin can accept the changes. This will then add the new changes to the main source.

Commits?

After you finish making a change in one of the branches, you normally create a commit. A commit is used to mark a point of time for the code. This then ends up being submitted with a a message of the changes.

This is especially important if you're working as a team. You need to communicate with each other so everyone is on the same page. This keeps the overall code change in sync. The admin can see the commits when accepting the pull request also. This just keeps everyone in the loop.

If you want to learn more about GitHub, check out this video below.
Git the inside scoop on GitHub

Check out my channel for more tech topics!
My Channel

Accessibility Audits

Nova's Knowledge — Sat, 13 Feb 2021 22:05:56 +0000

When designing websites, developers have to take accessibility into account. They are held responsible so that anyone is able to access the site they are creating. It is important to understand every aspect of accessibility so that people all over the globe have easy access.

Today, I took a look at the 100 Thieves website to see how well their company website does.

Results

I ran an audit using Lighthouse, Wave, and web.dev. Below are the results I found:
Performance: 55
Accessibility: 97
Best Practices: 79
SEO: 75

Fortunately for the company, their accessibility was almost perfect. This is what company's need to aim for. After analyzing some of the information, here is what I found to be the biggest problem for the website.

They need to eliminate render-blocking resources
They have to minify JavaScript
They have to remove unused JavaScript
The time to interact with the site is 8.4 seconds

These issues were found in the performance, accessibility, and best practices stat columns.

These issues are the reason why the time to interact is so high. The developers need to take notice of these problems and fix them. To eliminate render-blocking resources, one must move all of the script and link tags to the bottom of the page. The other problems are self explanatory. This will improve all categories if done so properly.

What Now?

After taking a look and analyzing what was wrong with the site using Lighthouse and web.dev, I decided to try out wave on the site.

This audit goes into more detail on the site. Surprisingly, there were only 7 accessibility errors on the front end of development. All of these errors were empty button and empty link errors. This means that there needs to be words instead of just pictures. There were also only 10 contrast errors. This means that the text colors are not the proper color in contrast to the background. These are also easy fixes that can improve accessibility tremendously.

If you want to learn more about these incredible tools, check out the link below!

Accessibility Video

If you want to watch more videos that I've posted, click this link!

My channel

Using Vue JS with HTML and CSS

Nova's Knowledge — Thu, 04 Feb 2021 20:45:14 +0000

What is Vue JS???

Vue JS is an open source view model for JavaScript. After creating a resume using HTML and CSS, I wanted to dive deeper into the language and incorporate some JavaScript also. Although all I created was the simple header for my resume, it was still very interesting to see how JavaScript works with HTML. To first get started, one must copy a script tag into their HTML source code. This is so the HTML and CSS knows that they are working with Vue JS.

Now What?

For the header I created, I used the component to change my H1 tag, H2 tag, occupation tag, and photo tag. I added the new Vue to have these data values. Once created, all I had to do was add new div id and div classes to my HTML code. Once in the HTML source, for example, I used the h1 class "name" and used my JavaScript code to change the header to name.first and name.last. This would print out whatever value first and last are in the JavaScript. That way, there was more than one place for a name, than instead of typing your name out every time, you can just use the JS tags.

I next did the exact same thing for the H2 class. Now every time there needs to be a job printed out, you can change the code in the JS source and use the occupation.job. This way, it will print out anything in the job source.

Finally, for HTML to print out my photo, I needed to include the source where it was coming from. Once I had the link, I created a photo class in the JS code. Back in the HTML code, I had to add the img v-bind: src = "" so that the HTML can properly read the photo tag from the JavaScript.

What About the HTML and CSS?

When writing the new JS code, all of the CSS stayed the same. Other than some formatting, there was no extra code added. Now in the HTML code, it had to be modified so it could accept the JavaScript. After it was modified, everything worked as a team to print out a basic header from my resume.

Here is the Codepen source so you can play around with it:
Codepen Example

Here is a video explaining what I did in more detail:
YouTube Explanation

Project Explained

Nova's Knowledge — Sat, 23 Jan 2021 23:07:11 +0000

Hi Everyone,
Welcome to my first blog post.

My real name is Samuel. I am a junior at Penn State University. I am studying Information Sciences and Technology (a mix of IT and computer science kind of) and also Telecommunications (another way of saying how your phone works, this is what I tell my friends). I am looking to pursue a career in either project management, consulting, or something to do with networks (still figuring that one out).

Understanding ever-changing technology has always excited me. My goal is to gain a better understanding of new technology and 5G networks. Along with my love for technology, I have always had a passion for helping and working with people. I am an extrovert at heart. I enjoy working on team projects but can also work in a quiet environment to complete a solo task.

Over the course of the past five years, I have worked at a country club as an outdoor service staff member. While working at the country club, I have also developed a fondness towards golf. This job has taught me an excellent work ethic, responsibility, and above par communication skills. I also enjoy working out, traveling, and videography. Another hobby of mine is Twitch streaming.

Microsoft Project

Over the past year, there have been a few things I have picked up with all my free time. One of these new hobbies included how Microsoft Project worked in greater detail. The semester before, I learned the basics of what it is, and how to properly use it. I found myself very interested in this application, and excited to use it in my future.

I have about a semester length of experience using this application. I still have a lot to learn on how to use the software to its fullest extent, but for now, I want to share the knowledge that I do know. This is a very important application to understand, especially if you plan on going into project management one day.

The easiest way I could describe this would be it's an over complicated schedule. Teams use it to know when their deliverables must be finished and how much time they have. One creates a WBS to shorten the project into smaller deliverables that the client requests.

I explain the basics of Microsoft Project in the video below.

My Channel: Nova's Knowledge

My First Video:THE BASICS OF MICROSOFT PROJECT

Over the next few months, I am really looking forward to learn more about GitHub and web design. I have always had a creative mindset toward editing pictures and videos, and now I want to do the same with websites.

I look forward to growing with all of you and learn the art of technology together!!!