Forem: Liz

stealing css

Liz — Tue, 28 Mar 2023 00:36:20 +0000

I am a visual person, so the first thing I did was recreate the badge list. This has no functionality, but I was able to import an icon and make it look pretty much exactly like the object we're duplicating. The next step is to add the drop down with a toggle. Originally, I used snipCSS to get a basic idea of how to build the object in the CSS, and I customized it accordingly. Here it is below:

I know the next step is adding the drop down toggle. There is a lot I can steal from Project 1's card such as the details and summary tags. I just have to think about how I want to layer it in. Whatever container the details and summary tags is in will need to expand with the information hidden. The information will also need to be modifiable through a slot so it can be change to fit the needs of the user.

Currently, my partner is working on the search bar. I feel like that will be the hardest part. Once everything is sketched out visually, we will need to start working on the more technically sides of things to get the API working and actually make the page have functionality.

I know this is super short, but the main gist of the past week was laying everything out the way we know how to.

https://github.com/lizblake/badge-list

creating badge-lists, fancy stuff

Liz — Tue, 21 Mar 2023 06:25:46 +0000

We're taking this, we're stealing it and we're making it open source. Like modern day Robin Hood.

Since I've borrowed an iPad from the University, I've been getting into making stickers and drawing stuff, so here's a rough sketch of our badge-list.

The basis of this list is a map like we employed in the previous homework. This will be used to create the elements of the badge list and update the count. Everything will be done through a Vercel endpoint with a json file that will need update somehow whether through a database or other means.

The badge-element will include the badge-icon, badge-title, badge-information or badge-description, badge-creator-icon, badge-creator-name, and a badge-steps-list that needs fleshed out but will be similar the badge-list but within a smaller container.

The drop-down icon is something that will be toggled with a reflective statement so that information can be populated from the Vercel endpoint only when triggered. The project will also need to be a11y compliant.

Elements like information and titles should be included as slots, and the user should be able to select what icon they would look to use.

While this is a rough summary, we will be implementing this general concept and then look towards adding more features and components.

As always, music.

Toured with them in Worchester, MA. They're badass.

I was a disappointment the first time so I decided to retake the class

Liz — Tue, 28 Feb 2023 05:26:33 +0000

Something something time flies when you're having fun something something.

About a year and a half ago I took a course at Penn State called IST 402. I did horribly. Not going to lie, I think I was confused half the time, unmotivated for 10%, and just preoccupied with other stuff for the other 40%. So I retook the course with a new number and better structure and more generalized focuses. My understanding as a whole for web dev is like "wowwwww, this is not as complicated as I thought". But still requires more effort than any other class I've taken at the diploma printing factory.

Platforms

And then we talked about platforms. For that particular week, I was 50% overwhelmed with other activities, 40% confused, and 10% sleep deprived. To be fair, I was shown a web component before anything else. I had also taken an art course on HTML and CSS at this point. Which as little effort as I put into it, I had become much better at it. But platforms were so confusing. After spending the past couple weeks on creating a card in Codepen, I think I had somewhat of an understanding of how JS, CSS, and HTML were all connected. When it came time to transfer it to a platform, I honestly had no idea where I was to copy over my code or how I was supposed to write methods. For reference, we were to work with Vue, React, and Angular. As a programmer, which I really am not a good one, it was not easy for me to transfer over the concepts without having to spend hours reading how each platform was formatted or looking at what my classmates did. And when I saw the examples, something didn't feel right. They seemed cloudy and inefficient compared to web component model I was use to looking at. Perhaps I would say something different if I was shown a money-driven platform first.

Teaching Web Components

Compared to the previous class I took on VanillaJS and web components, this one is different because of the amount of activity and interactivity that is done in class rather than being assigned large projects that are due several weeks out. That, and the people are not burnout seniors who have no interesting in learning something that they will not be using at the job that they already have. Now I am the burnout senior who wishes that they had more time because really, this stuff is fun and interesting if you have the time to put into it. Simply put, web components and VanillaJS need to be taught earlier in career. I wouldn't necessarily say that there is more handholding done in a sense, but there are more resources and quality videos than there was a year and a half ago. The more resources and solid understanding a person has of how everything works, more likely people are to transfer over to it.

Tooling

When it comes to tooling, if you have an error with a build, it can be so god awful to fix. But in the end, it does make life easier. It also makes it a lot easier for open source access and deployment. As documentation and usage improves, it will become easier to implement. It's neither easy or difficult, it really depends on what needs to be implemented and whether or not you understand where everything goes and interacts.

Additional Readings

Finally when working through a problem or developing something read the documentation. Read Stackoverflow. Cry a little. The ModzillaDocs help. And if you're super lucky, you have a good friend that makes you an hour long video telling you how to do something, so you better watch that. And read examples on GitHub. See what other people created.

As always, music recommendation :).

Still not finished

Liz — Mon, 13 Dec 2021 15:05:32 +0000

It's 9:25 am, and I'm usually up at this time because of my workout pods. But guess what, it's finals week. I'm two 5-hour energies and an all nighter in. I'm not sure I can think straight, but I am sure finishing out this semester strong. As strong as turning in three late assignments is.

Because I've been "having the college experience" the past two weeks (beers, boys, and benched), I really don't know what I have and haven't done with the final project for my IST 402 class. Which is honestly really disappointing cause I always look forward to doing it, but I haven't had the mental space or time. And guess what, I have all night today and tomorrow to make something magical happen besides it looking a third decent.

I've been working on creating an event badge based off the below.

And this is the interpretation so far:

There are so many placeholders at the moment because I just haven't been able to work on it. However, it has an annoying beautiful shadow. And frankly, that's the best part.

 :hover .holePunch {
        box-shadow: inset 0px 0px 2px hsl(220deg 10% 40% / 0.333),
          inset 0px 0px 4px hsl(220deg 10% 40% / 0.333),
          inset 0px 0px 6px hsl(220deg 10% 40% / 0.333);
      }
      .badgeContainer:hover {
        box-shadow: 0px 0px 2px hsl(220deg 10% 40% / 0.333),
          0px 0px 4px hsl(220deg 10% 40% / 0.333),
          0px 0px 6px hsl(220deg 10% 40% / 0.333);
      }

Complain if you want, but I feel it just has a modern look.

You can find it in it's current state at:

runtimeErrorsMadeEasy / Project3

This project was initially part of the issue queue with HAX, taking reverse engineering and creating open source resources. Eventually it will be published on NPM here: https://www.npmjs.com/org/runtimeerrorsmadeeasy

I'm honestly starting to fall asleep, so maybe I'll revisit this at a later state to add some updates.

The Million Dollar Question

Liz — Mon, 08 Nov 2021 20:41:44 +0000

Every person is like a lost soul wandering through a dark forest trying to figure out their purpose. We're just told that we're put here for a reason and that somebody loves you. Life's just an equation with variables to be filled.

Or you can look at it a different way. A way that I haven't really put my focus towards. There are people, places, things, choices, and a variety of different aspects of life that are gonna mold you to some viable shape. But do you know what you get to decide? The final product. Chase your dreams, do you what you want, and be proud of the work you do. I'm tired of being unconscious and losing sight of my hobbies because of the people who think you have to be a carbon copy of the next person, but better. When people ask me why I'm graduating early, it's not because I don't love learning and exploring, it's because I'm tired of being shaped into something I'm not.

I was told to pick something and stick with it, by one person, to have a role in society. To be the best at one thing. I was told to chase my dreams, by another person, to have influence in society. Not influence for power and attention, but for self fulfillment. I know who society wants me to listen to. I know who I'm going to listen to.

I was really surprised when I got an internship for something I never had a class on. But do you know what, it was something I really wanted. I love solving difficult problems and breaking things. Broke my boyfriend's heart this weekend by breaking up with him. You can laugh, I thought it was funny.

It's amazing how much you can grow when you work with people that help motivate you. But it's never one sided. There's a whole world of motivated people that want to help you help them, and when you leave behind the zombies, it's a different view.

Because of my variety of interests, if I could build something, it would be a combination of everything. Security is so ... bland. There's no design, only functionality. And not everyone has access to those functionalities. A lot of security tools have nice dashboards, but they cost hundreds to thousands of dollars. At this point in technological advancement, security should be something that is accessible to all, easy to implement and monitor.

There isn't lack of security engineers, there is a lack of a worldly view. As I was talking to the people who hired me for the internship, the Cybersecurity students know how to implement security techniques but don't know C and assembly. The Computer Science students don't know much about security.

That was just an idea. I'm not sure what I would specifically build. Whatever it is, it'll be artistic, innovative, something to do with security, and maybe throw hockey in there somehow. Maybe create a program that calls penalties through live video so Jay actually doesn't have to do his job.

I'm in a good mood so.

Remembering the button

Liz — Tue, 26 Oct 2021 17:18:30 +0000

Wednesday night is Survivor night which means us and the population of people who still have cable sit down to watch a show that's older than everyone in the apartment. But this also means it's the convention of the nerds.

Because I've been falling behind in literally all of my classes because I've been applying to internships, I took last Wednesday to sit down, relax, and work on the card we're developing for IST 402. And ask my comp sci friend for help. Thank god, I got an internship offer just yesterday, so maybe I'll be able to get my shit together. All I can say is that I'm a cybersecurity major and will be doing cybersecurity related things. Because I'm falling behind on everything, this blog post is also two days late.

Anyway, buttons. We made one a while ago, published it to npm, and now we're using it in our card project. This process really made me realize how import reusability is.

This is how I slotted the button in:

<div slot="button" class="buttonContainer"><cta-button icon="subject" title="${this.type}" style="--psu-background-color: ${this.bannerColor};"></cta-button></div>

Notice how "--psu-background-color" was a called variable.
This allowed the button color to mutable when a type was applied to the card.

But because I didn't think ahead... the button reverts to the colors it was when it's hovered over.

When I was creating the button, I didn't think about all the different states I should make accessible. Being able to apply the button to the card has not only helped learn about slots but the considerations that should be made with creating a web component.

The current card project can be accessed at:

runtimeErrorsMadeEasy / project2

Making a card for IST 402

And always, here's the song of the week:

We've grown up to play card games

Liz — Mon, 11 Oct 2021 04:29:56 +0000

At one point you stopped hitting things that make noises and started learning how to read. Then you learned how to write. And thirteen years later you're an eighteen year old junior in college with no idea of what you're going to do even though you keep telling yourself exactly what you're going to do.

And now you're just tired. And every word that comes out of your mouth is whiny. And you keep going till you realize just how miserable you're making everyone else around you. But then you start playing card games. You put on a poker face for every single person you see until a couple people figure you out. That's right, you guessed it, we're talking about web components this week! Cards, in specific.

Think about cards this way: you have the container, the banner, and the content. Within in the banner, you have the header, sub-header, and icon. The content can be anything, basically. Maybe an image, gif, bulleted list, or paragraph. There's also fun design modifications that you can make, such as changing the color and roundedness. I know because I'll spend hours doing that. Below is an example, not of my creation, of what I'm talking about.

Previously, I spent a couple weeks creating a button. I feel like the design aspect of the card is going to be a lot easier after that experience. And as always, the biggest struggle will be how everything fits together and what code to copy and paste.

You can check out my creation here. Which absolutely has no actual progress to it.

runtimeErrorsMadeEasy / project2

Making a card for IST 402

And of course a song that captures everything.

Click me

Liz — Mon, 27 Sep 2021 03:35:16 +0000

Or, don't. A button can still react.

Something you don't think about in every day life is how others who are less fortunate than you have to navigate life and the modern day world of technology. You don't know what's missing until the day someone needs it. There are so many amazing advances and aids, but they are rendered entirely useless if your design doesn't accommodate for them.

There is so much that goes into a button that thousands of users may click every single day, and there are so many applications and emotions that can go behind a single "click" or hit of the enter button. You've probably used a button to submit a college or job application, to send a message that makes or breaks your year, or even something just as simple as viewing another webpage. I'll have to click publish and regret all my choices after I finish writing this.

I think the most difficult thing I've encountered with creating a call to action (CTA) button is the amount of freedom I've been allotted. And, the amount of time I don't want to spend on my other assignments. I love the world of design and programming that can be combined with creating web components. That being said, I spent two hours researching how to design in a button in CSS just to make it look cool when you hover over it or focus on it. That's when you find out there's a ten times more efficient way to make something. For example, incorporating reflect to make the colors flip. And sometimes those things come with experience.

While I was able to get the bookmark icon working in class, you learn about the dependencies and libraries involved with creating web components. Without the contributions of others, I wouldn't be able to get a simple bookmark icon without hours and hours of work. You also learn that the dinosaur icon requires another library, and that's why you can't see it when you try to implement it.

There's still some work to be done. I haven't implemented disable yet.

Here's my thing: https://github.com/runtimeErrorsMadeEasy/ctaButton

Here's what I was listening to when I wrote this:
https://open.spotify.com/track/3QcWLlzSUFFWotRzxv6rbQ?si=1fd5fe1d244e49ef

Last Minute Boilerplates

Liz — Mon, 13 Sep 2021 04:30:46 +0000

One of the definitions of boilerplates is "writing that is clichéd or expresses a generally accepted opinion or belief". This writing, in a sense, is the cliché of "I had all week to do this, and I'm writing it 5 mins before midnight the night it's due". We all have our strengths and weaknesses, much like frameworks.

There's really sparkly ones that are full of menus to get you started, like Angular. It's too cluttered. No, I don't want to check out the Angular blog. What's the fun in having things easy? Angular is the only one that uses ng to set it up. Sounds like some proprietary bs (as I type this on a Mac).

StencilJS seems like an underdog, it's got a story to tell. But it's not a framework at all. Like the lovable oddball most movies have (back to clichés), that's kinda where StencilJS sticks. It seemed similar to open-wc as in it used the terminal to select options, and was a simple line of text to you get started with your web component.

React was simply established. There was a lot of documentation associated, but there's a full stack of developers dedicating their lives to it. Many people who swear by it, and that just happens to create a large pool of features because everyone has their different needs. This is gold star of developer experience; there's so many resources and so many people working on it, how can it be horrible.

VueJS was simple enough to use. If I was going to build an app tomorrow, I would probably try Vue because there seems like enough documentation to help me stumble through it.

Overall, all frameworks have a similar set up. There's package.json files and src files. That's just conventions, clichés, what frameworks are. I think my favorite is the inevitable README.

proof:
https://github.com/runtimeErrorsMadeEasy/boilerplates

Installing open-wc

Liz — Mon, 30 Aug 2021 02:20:04 +0000

The following is a guide on installing open-wc on MacOS:

The install for Node JS can be found at https://nodejs.org/en/. 14.17.5 is recommended due to the stability and lack of necessity for the bleeding edge features.
Yarn can be installed by typing npm install -g yarn into the terminal. sudo may have to be used to complete the install.
In whatever folder you prefer to use, you should be able to run npm init @open-wc. Going through the setup, you select web component, all three tooling options should be highlighted using the spacebar, typescript should not be selected, and the component can be named whatever you like. Finally, it should be installed using yarn.
The component can be started by switching into the project directory and running npm run start. The component will open in a browser window.

Introduction

Liz — Mon, 30 Aug 2021 02:01:02 +0000

Hey! My name is Liz, and I'm a junior studying Cybersecurity with a minor in IST. I'm from about 25 miles west of State College (middle of nowhere). I play women's club hockey and men's league, so half my nights are spent at the rink. Over the summer, I did research for the University looking at supply chain vulnerabilities with open-source intelligence. We took 5 vendors and them through SpiderFoot, Maltego, Shodan, Wayback Machine, and various job posting websites to find vulnerabilities such as open ports and out of date software. I really enjoyed research, so I'm looking to do something similar next summer. During the school year, I'm the secretary of WIST and work as the program coordinator of the IST Student Government. This is also my second semester working as a learning assistant for IST 220. I have no clue what I want to do with my life, but it's ok.

Why web development? I remember talking to some guy I play hockey with, and now I'm in his class. While that's a true story, I feel like web development is an area that's not really covered with Cybersecurity classes, and I wanted to learn more. I also didn't mind programming, but I've only done three semesters of Java and a little bit of Python. I've also helped design logos and enjoy drawing, so it would be cool to kinda integrate that with web design. I'm looking forward to contributing to open source.