DEV Community: spb5732

An Idea.. If I didn't have to worry about school or work.

spb5732 — Fri, 05 Nov 2021 21:01:15 +0000

The problem

I used to be an extremely forgetful person I would constantly lose things such as my wallet, my car keys, my pants at highschool when we would have to change for gym, and so many more things over the years.

If only there was a tool or application that was specifically designed to help people recover their lost items.

If I had the free time to fully develop an application the solution to this problem might be where I start.

This application, lets call it "The Lost And Found" for now would be for people like me who would forget their head if it wasn't attached. At first I would develop it as a web application probably using nuxt js or asp .NET core as those are what I am most comfortable with. The application will be primarily database driven either using mongo db or AWS dynamo db. I would implement a login system either with AWS cognito or develop my own, but be careful not to store user passwords as raw text. The application would function as follows:

Users would create an account / login
At the home screen we will use a Data Table to display entries of Lost items. Each row would have a description, a photo, last seen location, date of posting, and the user who made the post.
If someone finds this item they can contact the original poster.
Users with accounts will be able to make lost item posts and add to the table.

That's it!

This would be a really simple application that could potentially help a lot of individuals.
If I developed this and it became popular I would probably like to implement a method of tipping users for finding their item, and take a small percentage of that for revenue.
In addition I would probably implement google ads so the site has some other way to make money.
Lastly If the application was really being used often I would start development for iOS and android.

That being said

I'm not sure how big of a market their is for helping people find their lost items, so this would definitely help some people, but I don't see it blowing up to being anything major.

What do you think about this Idea? Is it something worth developing?

Using slot with custom web componnents.

spb5732 — Mon, 25 Oct 2021 00:31:15 +0000

when creating custom web components the slot tag can be very useful. The slot tag allows you to pass html content into the shadowroot of your custom element.

When would you use the slot tag?

An example of when I have had to use the slot tag was when I was coding my custom web component learning card. -The card had a body section that needed to have support for any html content.

slime-card:

How to use slot.

If you have a blank slot any content will be passed from inside the custom element into the blank slot.
If you have a named slot you need to pass the slot attribute with the correct name into the html content.

examples below:

index.html


<custom-web-component>

<span>This will be put into the blank slot</span>

</custom-web-component>


<custom-web-component>

<span slot="s1">This will be put into s1 slot!</span>

</custom-web-component>

custom-web-component.js

render(){ return hml`
<div id="custom-web-component">
<slot></slot>
<slot name="s1"></slot>
</div>`;
}

In the slot tag allows you to pass html content into a custom web component. It also makes it really easy to pass content from the top level of a web component down to the bottom level. This makes alot of sense when you break down a custom web component into smaller sub components.

For example

The learning card was broken down into icon, header, body , and card as a whole
When using the card as a whole, info can be passed from the slot of the card as a whole into the slot for the body component. This allows custom web components to be very flexible.

Considerations of building a web component

spb5732 — Sun, 10 Oct 2021 19:52:12 +0000

For an assignment, my team and I were tasked to build a reusable card to be used for websites. The card would consist of a heading with an icon,title, and a body that can support any html content.

Our team will take an approach of breaking down the element into four sub elements:

-The icon
-The heading which will contain the icon element, as well as a title and sub title
-The body which we be an element that can contain other html content.
-The card as a whole, will be formed by the previous elements coming together.

Difficulties:

The difficult part about this task will be creating the sub elements in such a way that they will seamlessly come together to form the car as a whole

After the easy-button component:

After finishing with our initial task, the easy-button custom web component, we are expecting this to go smoother as we have learned to utilize css attributes and conditional rendering.

My work creating a custom web component with open-wc so far...

spb5732 — Fri, 24 Sep 2021 20:46:11 +0000

So far developing the "Easy-Button" the expereince has been pretty smooth, after checking out some docs on lit element I was able to create a base button with different styles based on attributes provided. The style our group has gone for is a button that is intended to replicate the look of the easy button from staples. By default you get a red round circle with a silver border.

If you apply an attribute of buttonText you can set the text on the button, with the perspective attribute our button shifts to give more of a three dimensional look, the gradient attribute changes the base red color of the button to a light to darker red gradient, the link attribute sets the href link for the button click event, the disabled attribute changes the color of the button to a dark color and eliminates the hover pointer effect and disables any link provided. Finally we have also included @lrnwebcomponents/simple-icon/lib/simple-icon-lite.js" in our project to make adding icons to the button very easy.

At first when developing this button we didnt understand how to change the button styles and functionality based on provided attributes. Coming from other programming languages like C#, Java, and python we thought we would have to make use of the constructor but found it easiest to style our button ussing pure CSS. We also needed to figure out conditional rendering for attributes like icon and link, which we tried to do originally using regular if statements but after doing some research on the lit element docs found a much easier inline way of computing this.

in the future we want to add attributes for onclick functions, scaling of the button, and possibly adding sound effects for clicks.

https://github.com/spb5732/Button

VueJs, React , Angular, StencilJs

spb5732 — Tue, 14 Sep 2021 00:57:51 +0000

VueJs, Angular, React, and stencilJs are all front-end JavaScript frameworks for building modern web applications, each of these frameworks have their own quirks ,dependencies, and syntactical sugar, but also share some similarities.

Components:
components are a common theme for these frameworks. If you've ever worked on a web application using asp .NET core components in my opinion are similar to partial views. they are separated parts of HTML JavaScript and CSS that you can re use throughout your web application.

Biased Opinion:
I think VueJs has the best developer experience, I've used VueJs to create a marketing page for a company and the framework is not much different from vanilla JavaScript. If you know what you are doing with JavaScript html and CSS VueJs was nice as it provides nice separation of code through components, comes with vue routing, and comes with some nice easy ways of adding inline event listeners such as "@click" and more. If I had to chose a framework to build a web application today I would probably chose vue.

The boiler plate project for my hello-world vue comes directly from the VueJs CLI:

...
npm install -g @vue/cli

OR

yarn global add @vue/cli

vue create hello-world
...

https://github.com/Viable-Slime/BoilerPlate

IST 402 introduction

spb5732 — Fri, 03 Sep 2021 01:24:56 +0000

Hello Developers my name is Sean Brill, I am senior at Penn State pursuing a degree in IST design & development. I originally came to penn state not really knowing what I wanted to do and was originally going for a Computer engineering degree. Being a freshman not knowing how to study or manage time effectivley lead me to change my major after being scared of not finishing on time. My cousin who graduated from penn state two years prior informed about the IST major.

I started my coding journey with an introduction to python class where I was completley lost and unsure of what I was doing. I was able to get by in the class but at the time I didn;t realize this is the type of work I will be doing for the rest of my career.

After switching my major I needed to take another python class over the summer to catch up. This is where I started to really understand things and I was honestly having alot of fun doing my assignments. I liked it so much that I would put extra hours in just putting extra features to the code and little easter eggs that my professor probably never bothered to look at.

Next semester I was required to take a course on Java, coming from python as my first language Java seemed really intimidating at first. I was not used to staticly typed variables or using curley braces. Overtime whike taking vigorous notes I got pretty decent at Java as well, I learned all about classes, inheritence, polymorphism, overloading, using databases, and even made applications using java swing GUIs.

My next coding class was the hardest coding class I've taken at Penn State.. IST 311. In this java oriented class we learned all about data structres and design patterns. We had to implement Linked lists, stacks, polls, ques, trees, heaps, graphs, and sorting algorithims. This class was really interesting and brought my game to a whole new level.

The summer of 2021 I landed an internship at consulting company Seisan LLC. During my internship I learned an incredible amount about Full stack development. Coming into this internship I had no prior experience with HTML, Javavascript,CSS, and C#. Throught my time here I have coded three websites using ASP .NET Core and one with NUXT js. I have implemented AWS Cognito into two of the sites to handle signup/sign in/ verification, and forgot password. I have also been able to implement AWS dynamo db into another site to use for serverless db functionality. I gained experience with stripe api and mailchimp api. One of our recent projects I had to connect to an old IBM computer known as as400 from java to upload employee time card entries into their system. Looking back it's amazing for me to see how far I've come. From being confused by simple python programs to being able execute and implement real world solutions for sites and applications that real people will use.

Everyone has to start somewhere, I came along way and I have so much more to learn and infinite room to develop my abilites, If you've gotten this far thanks for reading about my experiences as a developer so far!