DEV Community: SparkedScience

Carded, but with Flashes

SparkedScience — Mon, 13 Dec 2021 01:43:18 +0000

I'm in some kind of mood tonight. I've been banging my head against a wall of code (New favorite phrase) all night with Java, so naturally we should talk about JavaScript.

The project

We, being PenStat (links in the bottom), were tasked with creating a flash card element. We took to recreating the original design as close as possible. Here is the reference:

And here is our final product:

There are a few key differences...

We implemented Simple Colors. This allows us to implement a simple dark mode, and the library was specifically created by the ELMSLN to be compliant with contrast ratios for accessibility standards.
Our images are customizable. They also rely on loremflickr. I worked on this section in the beginning. If the overall tag isn't given an image, it will pull an image from loremflickr as a placeholder.
We also added an option for the card to read the question out loud. More info on this portion can be found here.

Fun, right?

What I did

I briefly touched on the image portion, so we'll cover that further. But I also worked on an addition to the card that allows users to add multiple cards in one element. I'll talk about both of those now.

Images

I initially worked on getting loremflickr functional. The final product is very simple. We use <img src="${this.imgSrc}" alt=""/> if the tag is supplied an image, and <img src="https://loremflickr.com/320/240/${this.imgKeyword}?lock=1" alt=""/> for default/keyword images. If there isn't a keyword, the element sticks in a placeholder of "grey box."

Flash Card Array

The biggest wall of code I worked on in the last week before our deadline.
This is my final result. It is a logic heavy element, with very little happening on the front end. I will show you the best bits.

The Best Bits

01010100011010000110010100100000010000100110010101110011 011101000010000001000010011010010111010001110011
I'm kidding. I told you, I'm in some kind of mood tonight.
The two functions doing all of the work are getData() and formatEl(). Respectively, they get the data and create the different flash-card tags. Let's look at get data first. Here is the schema to use <flash-card-set>:

    <flash-card-set>
    <ul>
      <li>
        <p slot="front">What is strawberry in Spanish?</p>
        <p slot="back">fresa</p>
        <p slot="image">https://loremflickr.com/320/240/strawberry</p>
      </li>
      <li>
        <p slot="image">https://loremflickr.com/320/240/food</p>
        <p slot="attributes">speak</p>
        <p slot="front">What is food in Spanish?</p>
        <p slot="back">comida</p>
      </li>
      <li>
        <p slot="back">persona</p>
        <p slot="front">What is people in Spanish?</p>
        <p slot="image">https://loremflickr.com/320/240/manequin</p>
        <p slot="attributes">speak dark</p>
      </li>
    </ul>
  </flash-card-set>

It doesn't matter the order of the slots, but it relies on using a <ul> element with <li> and named slots. (I talk about named slots in my series, go check that out for a refresher.) The <ul> is a container for all of the <li>, and each <li> is a separate card. Now for the fun part: code.

getData() {
    const slotData2 = this.shadowRoot
      .querySelector(`slot`).assignedNodes({ flatten: true })[1].childNodes;
    const questionData = ['','','',''];
    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < slotData2.length; i++) {
      if (i % 2 === 1) {
        // eslint-disable-next-line no-plusplus
        for (let j = 0; j < slotData2[i].childNodes.length; j++) {
          if (j % 2 === 1) {
            const {slot} = slotData2[i].childNodes[j];
            if (slot === 'front') {
              questionData[0] = slotData2[i].childNodes[j].innerHTML;
            }
            if (slot === 'back') {
              questionData[1] = slotData2[i].childNodes[j].innerHTML;
            }
            if (slot === 'image') {
              questionData[2] = slotData2[i].childNodes[j].innerHTML;
            }
            if (slot === 'attributes') {
              questionData[3] = slotData2[i].childNodes[j].innerHTML;
            }
          }
        }
        // eslint-disable-next-line no-plusplus
        for (let k = 0; k < questionData.length; k++) {
          this.questions.push(questionData[k]);
        }
        // eslint-disable-next-line no-plusplus
        for (let l = 0; l < 4; l++) {
          questionData[l] = '';
        }
      }
    }
  }

Fun, isn't it? I'll go line by line.

const slotData2 = this.shadowRoot
      .querySelector(`slot`).assignedNodes({ flatten: true })[1].childNodes;

I found this syntax after trial and error. We get the slot element in the render function of the element, and then get all of its data, aka the <ul> element. The querySelector renders weird, so we grab the second position in the array and get the child nodes, or all of the <li> elements.

const questionData = ['','','',''];

The specifications of the flash-card-set only allow for four items, the question, answer, image data, and any tag properties; such as speak or dark. Each slot in the array holds one of these values.
// eslint-disable-next-line no-plusplus eslint hates fun.

for (let i = 0; i < slotData2.length; i++) {
      if (i % 2 === 1) {

We loop though each <li> node in the slot. With how slots, querySelector, and lists work, we have to call the odd positions in the array. The even positions are just blank lines.

for (let j = 0; j < slotData2[i].childNodes.length; j++) {

Another loop!!!!!!! And I broke dev.to. This loop is to loop through the elements in each <li> element, aka the named slot elements. We also need the modulus operator again for the same reason as before.

const {slot} = slotData2[i].childNodes[j];

This gets the name of the slot for comparison later.

if (slot === 'front') {
              questionData[0] = slotData2[i].childNodes[j].innerHTML;
            }

It is now later. Each piece of the spec; front, back, image, and attributes; has it's own if block.

slotData2[i].childNodes[j].innerHTML

This line gets the innerHTML, or the data of the current slot in the j loop, from the tag of the current card in the i loop. I won't lie, a lot of trial and error went into these lines. It's added to the array in order.

for (let k = 0; k < questionData.length; k++) {
          this.questions.push(questionData[k]);
        }

We have a property, questions, for all of the question data of all of the cards in the set. The order of questionData is important since I used integer indexing later on. This loop just adds the data from the j loop into the questions property.

for (let l = 0; l < 4; l++) {
          questionData[l] = '';
        }

Reset the array for the next card.
And now to create the elements.

formatEl(number) {
    // create a new element
    const el = document.createElement('flash-card');
    el.setAttribute('id', `card${number}`);
    if (number !== 0) {
      el.className = 'hidden';
    }
    // add the text
    el.innerHTML = `
      <p slot="front">${arguments[1]}</p>
      <p slot="back">${arguments[2]}</p>`;
    // eslint-disable-next-line prefer-rest-params
    el.setAttribute('img-src', arguments[3]);
    // eslint-disable-next-line prefer-rest-params
    if (arguments[4].includes('speak')) {
      el.setAttribute('speak', '');
    }
    // eslint-disable-next-line prefer-rest-params
    if (arguments[4].includes('dark')) {
      el.setAttribute('dark', '');
    }
    // eslint-disable-next-line prefer-rest-params
    if (arguments[4].includes('back')) {
      el.setAttribute('back', '');
    }
    // append it to the parent
    this.shadowRoot.querySelector('#content').appendChild(el);
  }

More code, yay.

const el = document.createElement('flash-card');
    el.setAttribute('id', `card${number}`);

We create a new flash-card element and give it an ID.

if (number !== 0) {
      el.className = 'hidden';
    }

This is for the rendering. Everything except the first element is hidden by default. We have css classes for hidden and visible, which another function toggles between.

el.innerHTML = `
      <p slot="front">${arguments[1]}</p>
      <p slot="back">${arguments[2]}</p>`;

Each question has to have a question and answer, so we can hardcode these two arguments. JavaScript has a keyword, arguments, in each method. It's an array of arguments that were supplied in the method call. Very useful.

el.setAttribute('img-src', arguments[3]);

We can also hardcore this since a blank value passed to the image-prompt will use the default value.

 if (arguments[4].includes('speak')) {
      el.setAttribute('speak', '');
    }
    // eslint-disable-next-line prefer-rest-params
    if (arguments[4].includes('dark')) {
      el.setAttribute('dark', '');
    }
    // eslint-disable-next-line prefer-rest-params
    if (arguments[4].includes('back')) {
      el.setAttribute('back', '');
    }

Each of these if statements checks the attributes section of the array. If it contains any of the key words, then that attribute is set in the flash-card element.

this.shadowRoot.querySelector('#content').appendChild(el);

There is a div in the render function to house all of the cards.
It's a lot of code, but it's what I'm most proud of from this project.

Final schtuff

Go check us out in the links below.

Future Plans (Outside of Cybersecurity)

SparkedScience — Mon, 08 Nov 2021 14:40:53 +0000

I am in pain. Paintball is fun, but it hurts. Off topic, but now we're getting back on topic.

Building an app

Someone asked me, "If you could build an app/website, what would you build?" This question is actually really easy for me, since I've already built my passion project, and I am rebuilding it. My idea is to have a simple website to connect people who are struggling with their mental health to professionals to help them.

Background & Reasoning

Mental health is a topic I tend to gravitate to since I've struggled with my mental health in the past. I was a part of a team that built a website in the past as a prototype for breaking the stigma around mental health, but we did not know enough to continue on with the project. Now, I want to finally create a service to get people connected. Personally, I do not know of a single resource for finding professionals past a Google search. It seems Google SEO is the only way to find someone, and that's just not right. Just because one therapist has more links online than another, doesn't mean they are better. Don't get me wrong, any help is better than no help. But different places are better for different people. There should be a database with every single resource for people.

The website

I'm crazy to think that I could go around and get information about every single mental health service, therapist, hotline, etc. in the world, or even this country. That's why it would be open source. I would provide the backbone and some places local to me to give examples, then the community would fill in the gaps. It's a simple design; just a page with a table and a page to suggest other places. The logic would be more complex, and there would have to be validation on any new resources. My dream is to reach across the world, but I am a builder, not a publicist.

Roadblocks

I'm afraid that even if this website is built better than Google, it still won't get off the ground. It's tough trying to launch a new project. I've seen teams better than me scrap entire projects because they couldn't launch. It's the reason why I keep stalling on development. I can do all this work for it to just be a GitHub repo, staring at me every day until I delete it forever.
Fun, right?
Oh, we also have the internet trolls to worry about. Anything with input is ripe for trolls to destroy. Hence why there will be no user input past suggesting new places.

Future

If I really had all the time in the world, and no concern for living costs, I would spend my time developing this website. It's my passion project, but it also faces many giants before it will be successful. Launch will be the first major roadblock. Also, maintenance if it ever becomes popular will be a struggle. And we're going to end the giants there so I don't become discouraged any more.

Cookie

I need a cookie. You do too. Go have a cookie.

Slots like you haven't seen them before

SparkedScience — Mon, 25 Oct 2021 04:30:49 +0000

Slots like you haven't seen them before...cause I have never seen slots before in HTML. Never worked with slots or named slots. First time for everything, right?

Slots

What is a tag? A quick internet search reveals...slot machines. Note to self, <slot> means nothing to Google. According to MDN Web Docs

"The HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together."
Word jumble. Essentially, instead of using a property for text content, you can use a <slot> tag. Take this line of HTML for example.

<div id="content">${this.bodyContent}</div>

And in the tag...

<demo-code bodyContent="I read you"></demo-code>

It works in this example since our string is relatively small, and only a string. But if we want other HTML tags within the bodyContent, then we run into many issues. To get around this, we use slots.

<div id="content">${this.bodyContent}</div>

Then becomes

<div slot="content"><slot></slot></div>

And our tag becomes...

<demo-code>I read you</demo-code>

Or, more complex...

<demo-code> <a href='https://lifelinegame.fandom.com/wiki/Lifeline'>I read you</a> </demo-code>

With slots, we can inject valid HTML code into our Web Component. But this is an unnamed slot, what about if we have multiple pieces of content we want to inject into our element?

NAMED SLOTS

THAT'S RIGHT, YOU HEARD IT HERE LAST. NAMED SLOTS. Sorry, caps lock. To used named slots, we have to use <span> tags. Once again from MDN Web Docs,

"The HTML element is a generic inline container for phrasing content, which does not inherently represent anything."

"It's a tag, big whoop." I can hear people say, or maybe that's just the ringing in my ears. Spans aren't very different from divs, that is, until you combine them with slots. Take our code for example.

<learning-card type="science"><span slot='header'>Header content TEST</span><span slot='subheader'>SUBHEADER TESTING</span>We're trying multi slotted content</learning-card>

More specifically...

<span slot='header'>Header content TEST</span>

The inner HTML of the span tag get passed to the slot tag within the element. From our element source file

<h2 slot="header"><slot name="header"></slot></h2>

The named slot takes in the data from the span element and "replaces" the inner HTML of the heading tag. In essence, the above code block then becomes...

<h2 slot="header">Header content TEST</h2>

It is possible to also read data using the slot property. The above code block uses this to reference another element. It reads the data from above with the following line of HTML.

<slot name="header"></slot>

It then renders the header tag in the element to be displayed. Two methods; tags with a slot property, or span tags with names.

Advantages over properties

Properties need to be updated whenever they are changed via lifecycle hooks. Slots update automatically
Less code overall

Disadvantages

Properties are definitely much easier to understand.
Cannot use slots outside of HTML (to my knowledge)

GitHub Stuff

learning-card

PenStat / penstat-project2

Building a Card while Coughing

SparkedScience — Mon, 11 Oct 2021 02:34:03 +0000

This blog post is brought to you by a lingering cough and frustration towards machines.

Cards

We're going to be continuing our web components journey with making a multi-element card. Cards, while ambiguous, are bordered elements containing useful information or action links. By wanting to make a multi-part card, with a header banner, icon, and content, we need a multi-component project. Each piece will be it's own stand-alone web-component with the card wrangling them all together in the end.

Considerations

Before delving any deeper, we are going to look at the steps I never take when tackling a programming project; low level planning. I do a lot of high level planning in general structure and ideal functionality, but for this one we're going to get more granular. We're copying some other card examples we've seen online, which were broken down into the icon, header, and content of the card. Sometimes, you just have to section off parts of a project to get started.

Icon

Icons grab the user's attention and give them an idea of the subject without any words. Alignment in this project is going to be difficult when splicing all the components together, and the Icon may cause the most difficulty. Words are easy to work with, but images are a pain sometimes.

Header Banner

One of the easier components in the project, it consists of a main header and a possible sub-header. The main difficulties here lie in the variability and user input. We have to dynamically shift content around with page resizing, scrolling, and deal with whatever headers the designer wants to add.

Content

The easiest component, but also the one with the greatest variability. Bulleted lists, different fonts, and a possible collapsable option are all possibilities in the component.

Card

The final element that wraps all the previous together. That wrapping graphically is going to be the worst part. But after baking a call to action button, handling action events and state changes should be a breeze. That's for one element though; for multiple elements, we may have to use bubbling events and event listeners to capture what we need for reactivity. That'll be a story for another day once we start implementing and testing unknown code.

What fun.

Programming sucks

SparkedScience — Mon, 11 Oct 2021 00:30:49 +0000

Programming is a pain. What works for one person can break for another, and code never works right until you're just about ready to sign out. It doesn't matter the language or the platform, programming is annoying. So why do we program? I'm having a real difficult time of seeing it tonight.

It's for the love of creation. We crate with a purpose, we create for fun, we create to bring life to a machine. We create to make something bigger than us, something that can live on. We program cause we love it.

Sometimes, I program out of spite. I have to beat the machine, or overcome my own thoughts.

I wish I had more motivation most days to work on my projects. I wish I felt that love of creation when the same error is thrown the 15th time in a row. I wish it was more love and less anger and spite. Funny how that works sometimes.

Program for love, not for hate.

CTA Buttons...but with penguins

SparkedScience — Mon, 27 Sep 2021 04:06:51 +0000

What is a CTA?

A CTA button, or Call to Action button, just tries to get the user to do something. An example would be the like button for this article, or the Spotify Listen Now button. These buttons aren't anything complex or asking someone to act to save the world, but they must ask the user to do something.

Our CTA

So...we modeled our CTA off of the reprogrammed Club Penguin website We ripped the Create a Penguin image and based our button to be an image button without a text tag. It's...something.

Issues

Putting text on top of images is difficult, but not impossible. I used another web component, meme-maker, to overlay text on the image. It doesn't offer any text color change, but it does allow us to change the text size. We also included an icon in the button, but at the moment I have no idea what we are going to do with the icon. I also had some issues with tab-order. Since we have a meme-maker, a, and img tag, we have multiple tags that get tabbed through while it appears to sit on the same element. I had tried tab-order: "-1", but it was not working for a while. The fix was that Safari has a weird option by default that it doesn't tab through all of the elements on a page.

GitHub

penguin-state-button

PenStat / PenStat-CTA

Time for JS and the many confusing libraries and packages

SparkedScience — Mon, 13 Sep 2021 03:56:03 +0000

Hello-world

Some JS frameworks are easy to use. Others don't make it easy to get started. We're looking at Vue, Angular, React, and StencilJS, and I am really floundering at this intro.

Similarities

Right off the bat, all of the boilerplate projects have package.json files, since it is required. From there, the similarities become less apparent. They all are to create a component, but Vue is a bit vague on that front.

Vue

Vue calls their web components just components, which can be a bit confusing at times. Vue is the only one to have a custom file type of .vue. It still uses JS, but Vue has some specific functions. It is also very reactive as it has special calls to handle any event in its lifecycle. I was able to create my starter project from the Vue-cli interface.

Angular

Angular stands out as it is the only one to not use npm for building and testing. It instead uses the ng command, which is specific to Angular. Angular is also mean in that it uses typescript files, which are just annoying and borderline gatekeeping.

React

The React boilerplate we found is a mess of files, but it is very well documented (GitHub linked at the end). They boast a host of fast features and high coverage and compatibility. Not much to say on this one other than it is large and fast.

StencilJS

The outlier, StencilJS, is not a framework. StencilJS is a toolchain to generate projects. Sadly, StencilJS also uses TypeScript files, so it is not the best choice. But the fact that it isn't a framework that a programmer doesn't have to learn a new language is a huge improvement over the others.

My Personal Choice

Out of the four, I would use Vue to build a website tomorrow. I might have a bit of bias because I already work with it, but being able to create an app or web-component from the command line instead of someone else's GitHub repo is amazing. Vue also works great with API calls and data. It is also highly reactive and has a large number of tools for analyzing and debugging.

GitHub

PenStat / boilerplates

Open-WC, but for Macs

SparkedScience — Mon, 30 Aug 2021 02:07:53 +0000

People always ask why I use a Mac when I develop. Honestly, I'm so used to the Linux command line, Mac just makes sense for me. Also, I can have a virtual machine of a Windows computer or create a Windows desktop to remote into; it's not as easy to get an OS X ISO file, or I've just never had to try to know how difficult it is. Open WC has some really good tutorials to get set up, but I'll give you the copy and paste commands needed to get up and running.

Requirements

You'll need Homebrew, or brew for short, to use yarn commands. You'll also need npm and node.js. Thanks to (this tutorial)[https://tecadmin.net/install-homebrew-macos/], I found the brew install command again.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

And then yarn is

brew install yarn

within terminal.
We also use brew to install npm and node. Node.js is also needed for our development. To get node, and by extension npm, paste

brew install node

into the terminal.

Open-wc

Surprisingly, there's only one more command to run,

npm init @open-wc

If your current version of Node does not have open-wc, it will search for the required packages and install them. You'll then be prompted through menus to create a new project or update an old one. At this point, Open-wc's tooling is on your machine. I have run through my own tutorial on a fresh Linux image, which is identical except for brew, with positive results. So, I with you the best of luck with your own OS X development. I suggest VS Code for a free IDE, or Jet Brains' Web Storm if your university or work offers you a license. Please don't just use TextEdit or XCode.

Who I am, for the third time...

SparkedScience — Mon, 30 Aug 2021 01:48:47 +0000

Because I've taken this class three times now, but some things have changed. Mainly, I am now a web developer for THON! I am a developer for our THON Weekend Dashboard, a system that is used by hundreds of volunteers for tracking and building entry for our events through the year. I also have created one joke of a web component (b-r) and a serious one (barcode-reader). b-r just inserts
tags for conditional rendering purposes. barcode-reader can read and interoperate qr codes and barcodes through a user's camera. That one was a challenge, but I am proud of the tag.

I have been interested in web development ever since the Design to Make a Difference competition my senior year of high school. It was my first experience with web development, and I was the backend developer and system admin for a mental health chat website that two of us created from scratch. We used GitHub for all of our development and hosting needs, and Pusher Chatkit of the chat feature. Since then, I have been keeping my programming and web development skills sharp with online tutorials. I have primarily focused on Django, a Python web framework. Python is one of my favorite languages since I have a lot of Raspberry Pis. As for my current experience, as I mentioned I am a THON Tech captain. We use Django and Vue for our websites, so my Python and JavaScript skills are tested every day. I have also been continuing development with my mental health website, just under a new name and a new plan. Hopefully that's enough to understand my programming background, and maybe you get a sense of how much I yell at my computer when I work.

Making a web component that makes kittens cry, apparently

SparkedScience — Tue, 04 May 2021 18:36:46 +0000

I like to find shortcuts for programming problems. While working on the ELMS:LN web components project, I noticed they like to copy-paste br tags to show off intersection observers. So, to make life easier, I made a simple b-r tag. It apparently makes kittens cry.

Intersection observers

These are used for conditional rendering. An element on the page using intersection observers will not render until the viewable page is within a certain range of the element. For example, say at the end of a long webpage is a wikipedia element. The actual rendering of the wikipedia page, and the API calls to get the information, won't occur until the element is visible on the page. This is very helpful for slower or more taxed connections.

b-r

The b-r tag does not use intersection observers, but it was created to show off the usage of it. b-r has two modes; numbered and automatic. The developer can supply an amount of br tags to insert, and the element will create the line breaks. If no input is supplied, the tag will get the height of the viewable window and insert br tags to push the rest of the content off of the screen.

Feedback loops

My first solution was not elegant, but it worked. (Shamefully, my mentality with most first iterations.) I had a simple for loop to add the tags to the page. During my IST 402 class, my professor used my tag to teach on tag properties and a different way to add tags to html code. He also helped us understand how to make a tag stateful. Honestly, the best help this tag needed.

The kittens

b-r is a tag I made in less than a day for a specific use case. I know copy-pasting a br tag is easy, I'm guilty of that. While the first iteration of just user input was not extremely helpful, I believe the second iteration of conditional numbering based on window height can be useful when working across developers.

Final thoughts on Web components

This is by far not the last web component I will make or work on; My barcode-reader still has a ways to go. Maybe I'll get the chance to bring that project to THON. Either way, web components are here to stay, and I don't plan on going anywhere. Highly adaptable, very useful, and easily portable.
Except with dev.to. Social media isn't really my thing, but I try to stay updated. So expect monthly(?) updates.

Burnout

SparkedScience — Thu, 25 Feb 2021 04:35:16 +0000

I have stalled on major projects because of a lack of motivation. In this moment, I'm just burntout.

This isn't going to be some well formatted, header filled post with a 5 minute youtube video at the end. I need to rant in hopes I'll regain motivation.

Burnout in programming is the worst kind of burnout in my eyes. Burnout as a content creator sucks, but you can usually pick back up where you left off. If you walk away from a project, you have to relearn what your program does before working on it again. And that's the biggest issue. One reason programmers find it so difficult to go back to a project is that hurdle. Smaller projects it's not as bad. But multi file, multi language projects? I've been away from a Django site for months because of this hurdle.
And then there's the other issue. I'm afraid this project will fail, so why build it? Why spend the time in development for a project that I'll burn later. I don't have millions of dollars to throw at rockets that explode in the final moments. I am a single student, trying to take on a project that is too big for one professional developer alone.
Back to the topic at hand, burnout. What can we do about it?
Please let me know.
I would love to get back into programming.

-JAlbert
Current song: Miracle - Stripped; The Score

Edit: Maybe finding that one piece of technology to overcome a hurdle is all we need.

Git and the two abstractions

SparkedScience — Mon, 22 Feb 2021 03:55:02 +0000

Git in a collaborative environment

So...Git.
Might as well jump right in with Git and GitHub repos. The video goes in depth about the how, but we're going into the why and implications for teams here. Buckle up. (I'm tired)

Terminal

Easily the most difficult way to use Git. The default commit message editor is Vim, and there is no help for a mistake. Probably favored by experienced programmers and automations, this allows better control over commits and pushes. I find the automation aspect to be helpful. In one of my repos for web development, I created a Cron job to download (pull) any new code from the repo every night at midnight. If my development studio was on the same machine as the server, this would be overkill. But, when the server is on a different machine than the development tools, this is useful, as in my case. My code runs in a shared hosting environment. Having the Cron job ensures any changes made locally are moved to the production environment. NOT RECOMMENDED FOR PUBLIC USE. Actually dangerous. If a change is made that breaks the program or creates a vulnerability, but the workday is over, then a team can push that code and create problems. For a development fork, this is a great idea, as there will always be a backup of the code. Frequent merge conflict will occur though. Rant aside, the command line is good for more experienced people. Moving right along

Abstraction #1: GitHub Desktop

The desktop app provides an easy alternative to the browser version. Graphically superior to the command line, it is easier to use for beginners. I do not use it as often as I favor the next option, but we'll still talk about it. The desktop app is very similar to the browser version in almost every regard, except that you have to pull changes manually. I don't have a rant for this one. Just an all around decent option.

Abstraction #2: PyCharm or any IDE

By far the most used abstraction on my machine. With the power of the IDE and the abstraction of GitHub Desktop, it is the best option in my mind. Any development happens in the IDE, and the GitHub plugin offers enough of the same abstractions as GitHub Desktop to push and pull code. It is build right into the editor, and basic commits can occur without leaving the application. My favorite out of the three, although it takes away many features outside of pushes, commits, and pulls from inside the editor.

Collaboration

When working in a team, the Terminal version of Git is overkill and confusing for anyone. GitHub Desktop or the web version is perfect for project managers or non-technical employees who need to see the project. The graphical representation of many functions and settings is perfect for these roles. Developers would favor IDE plugins for ease of use and a simplified workflow.

Version control

One last note about Git and collaboration. Each commit generates a new hash, which can track changes over time. This is viewed easiest on the web client. GitHub keeps detailed records of each commit over time, allowing companies to roll back versions if a server breaks from a commit or if old code was lost and is needed again.

One final word, use Git. It'll. save your job.

YouTube video

Just a simple video demonstrating three ways to push code to a repo.

DEV Community: SparkedScience

Carded, but with Flashes

The project

What I did

Images

Flash Card Array

The Best Bits

Final schtuff

Links

PenStat / penguin-project-three

Future Plans (Outside of Cybersecurity)

Building an app

Background & Reasoning

The website

Roadblocks

Future

Cookie

Slots like you haven't seen them before

Slots

NAMED SLOTS

Advantages over properties

Disadvantages

GitHub Stuff

PenStat / penstat-project2

Building a Card while Coughing

Cards

Considerations

Icon

Header Banner

Content

Card

Programming sucks

CTA Buttons...but with penguins

What is a CTA?

Our CTA

Issues

GitHub

PenStat / PenStat-CTA

Time for JS and the many confusing libraries and packages

Hello-world

Similarities

Vue

Angular

React

StencilJS

My Personal Choice

GitHub

PenStat / boilerplates

Open-WC, but for Macs

Requirements

Open-wc

Who I am, for the third time...

Making a web component that makes kittens cry, apparently

Intersection observers

b-r

Feedback loops

The kittens

Final thoughts on Web components

Burnout

Git and the two abstractions

Git in a collaborative environment

Terminal

Abstraction #1: GitHub Desktop

Abstraction #2: PyCharm or any IDE

Collaboration

Version control

YouTube video