DEV Community: Jonas Jason

What I Learned From a Week of Code Walkthroughs

Jonas Jason — Tue, 27 Apr 2021 19:03:13 +0000

What is a Code Walkthrough?

A code walkthrough is basically just as it sounds; someone leading you through the process behind how a project or a particular aspect of that project functions.

In my case, it was my professor walking us through his passion project:

elmsln / lrnwebcomponents

@lrnwebcomponents Monorepo for NPM based element definitions

From these walkthroughs, I learned 3 important lessons:

Don't worry so much about understanding everything
Know what you want to get out of it beforehand
Ask questions!

Don't worry so much about understanding everything

You likely won't. This is okay. Just try and focus on what is being discussed and not necessarily all of the details. This key point goes hand-in-hand with the next one in that you should know what you want to get out of the walkthrough.

Rather than kicking yourself mentally for not keeping up, just continue to participate in the walkthrough and isolate your focus to smaller segments of the code. Ask yourself: "Do I understand the specific block of code that I am looking at?" or "Can I see how this might interact with other parts of the code, regardless of what those use cases might be?" or my favorite; "Can I think of an example of where I could use this technique or a similar pattern?"

Those questions will be more meaningful than trying to understand exact details.

Know what you want to get out of it beforehand

This is my personal favorite tip. On the first day of the walkthrough, I had no idea of what was going on and no real understanding of how the project worked.

After realizing that this wasn't going to benefit me in any way, I changed my frame of mind. Instead of trying to manifest some deep understanding of the project, I made it my goal to learn how to become a better front-end developer. With this mindset, I began picking up little tips and techniques... and I mean little.

Things like:

How and why to define a URL so that it works for both HTTP and HTTPS in testing environments ("//www.example.com/testing.js")
Practical examples of how to use the "spread operator" (...params)
How to read a "conditional (ternary) operator" (condition ? value if true : value if false)
Many lessons about best practices and standards

There were some other things as well, but my point is this; be specific about what you want to get out of it. Do I remember the exact use cases for each of the aforementioned bullet points? No. Am I ready to contribute to the core functions of the project? No! But that is not the point. My goal was to come out on the other side as a better front-end developer, and by picking up the knowledge that I did, I'd say that I achieved that goal.

Ask Questions

This is super important. This can be the difference between you sitting through an hour-long lecture on a topic that you have no clue as to what is going on or you learning a hell of a lot more and being engaged in the conversation. It can be challenging at first to know what kinds of questions to ask or maybe you might even be embarrassed to ask them, but it is likely that someone else will be thinking the same question and that the presenter is more than happy to both receive a question and explain their answer.

Conclusion

Don't be upset that you aren't understanding everything that is being shown. Each participant will have a different level of understanding of the project being walked through. To maximize the value of the walkthrough, set a specific goal for yourself; whether that be directly or indirectly related to the project in focus. And lastly, your questions will be appreciated -- and not just by yourself.

Code walkthroughs can be a very valuable insight into a developer's mind. Talking to someone about something they've spent time on and dedicated themselves to is a great experience, so try and make the most of it! I hope that you've found some value within this post and if you have any of your own tips, be sure to leave a comment down below!

How To Secure Your Zoom Meeting

Jonas Jason — Tue, 13 Apr 2021 21:06:04 +0000

Know the Lingo

You may have heard about Zoom bombing or Zoom raiding, which;

refers to the unwanted, disruptive intrusion, generally by Internet trolls, into a video-conference call (Wikipedia).

Zoom bombing can happen to unsecured, unprotected Zoom meetings. The unwanted visitors will relentlessly torment any actual participants, thus rendering the meeting useless.

So what should I do?

Well, there's lots of ways to secure your meeting. Let's take a look at what security features Zoom has to offer when setting up a meeting.

Don't use your Personal Meeting ID for public meetings

This might not seem obvious on the surface. If you are going to send out a meeting invite that others will share, don't use this one. Your Personal Meeting ID (PMI) does not change unless you change it.

Instead, schedule a new meeting

Click on the + icon, then select Schedule Meeting:

Then, you will be able to set up the options for your meeting:

On this page, you are going to want to enable the password field, and use your own unique password. Another tip is to make sure to enable the waiting room. This will ensure that any guests (either wanted or unwanted) don't just join straight into the main meeting room.

Advanced Options

Down at the bottom, if you click the Advanced Options dropdown, you are able to enable a few more security features:

I'd suggest Mute participants upon entry and if possible for your organization, Only authenticated users can join

In-Meeting Security

Once the meeting has started, there are even more security features for you to choose from. These can be found by clicking on the Security shield on the bottom. Options include:

Lock Meeting (does not let anyone else inside of the meeting)
Enable Waiting Room (if you haven't already)

and options to limit participants' ability to:

Share their screen
Rename themselves
Unmute themselves

These are the basics to securing your Zoom meeting. There are far more options if you really want to limit other features within the meeting, but I won't get into every one. Be sure to consult Zoom's own website if you are interested in finding out more.

Additional Resources

Monolithic VS Microservice Architecture

Jonas Jason — Sat, 10 Apr 2021 12:29:03 +0000

The web is changing... as it always does. But this time, I will tell you how microservices are contributing to that change. To begin, we should first know what the old standard of monolithic architecture actually is. I found this helpful introduction on whatis:

Monolithic architecture is the traditional unified model for the design of a software program. Monolithic, in this context, means composed all in one piece. According to the Cambridge dictionary, the adjective monolithic also means both too large and unable to be changed.

-- According to Ivy Wingmore

Let's focus on that last sentence about being unable to be changed. In the case of software projects, this isn't actually the case. However, it does indicate the difficulty of which implementing change can be. Any change to one component has the capability of breaking the entire system.

Microservices

Microservice architecture is an architectural style that structures an application as a collection of microservices where communication between microservices is often performed using API calls.

This image serves as an excellent example:

-- Sahiti Kappagantula

Mediamore is an entertainment company, using different microservices to power their app. They break it down into these services:

most liked
user info
video uploading
most trending
content
recommendations

and many more that aren't featured in this graphic.

Making Changes

Each microservice is likely maintained by its very own team (being a larger company). If the team working on video recommendations makes a change to their service, it only affects that one service. In terms of reliability, this means that a breaking change would only break the video recommendations. Users would still be able to browse videos, upload, comment, and everything else they'd normally do.

While microservices certainly are flexible and resilient, the more you have the tougher it can get to manage all of them.

This can definitely get a little convoluted if the microservices are obnoxiously fragmented or illogically compartmentalized. In a hilariously overexaggerated example:

Summary:

Microservices are the new gold standard. They are more reliable and easier to change than typical monolithic projects. However, they aren't necessary in every case. Be sure to think about whether or not they're right for your project.

I made a video walking you through deploying a Node.js To-do app on Docker. I also elaborate a little further on microservice architecture. Be sure to check it out:

The Case For Web Components

Jonas Jason — Mon, 29 Mar 2021 01:46:17 +0000

What are web components?

Web components are, by definition;

"a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps"

-Webcomponents.org introduction

In terms of business, this means that the development team could create each component of a website once and then anyone else who needs to use it can do so with ease.

For example, let's say we are building a site for an organization. This organization prioritizes consistency (as it should) and therefore wants certain components of their websites to be uniform; the header, footer, menus, and any other reusable components.

Brigham Young University has a great example of what an organization's codebase should look like here.

With each component being built and modified as needed, websites can be set up and deployed exponentially faster and cheaper than traditional methods and short-lived JS frameworks. Web components are here to stay.

-Webcomponents.org

If you're looking for a more in-depth look into getting started with web components, check out this 8 part blog series by Benny Powers.

So, who's using them?

As mentioned before, Brigham Young University:

Adobe

Adobe has been a big proponent in expanding the open source space for web components. They even have a playground space for you to try out:

-Adobe web components playground

YouTube

YouTube uses tons of web components throughout their site. This is thanks in part to Google being a huge driving force in making web components the new standard.

If you want to watch a video explanation, I did make one, but bare with me as I was feeling under the weather:

How To Host Your Own GitLab Server

Jonas Jason — Sun, 21 Feb 2021 19:10:24 +0000

Why GitLab?

Unlike GitHub, GitLab is more optimized for setting up controlled environments. It's similar to GitHub Enterprise. This includes organizational sign-in, more customization capabilities, and better CI/CD.

GitHub is great for personal projects and even team collaboration. GitHub thrives on its amazing community. But if you're looking for something with better change tracking and management tools, GitLab is the way to go.

Getting Started

I used Reclaim Cloud for this tutorial. This is not the only option, but Reclaim is a good choice for hosting since they only charge you for what you use.

First Things First

Head over to the Reclaim Cloud applications page
Scroll down until you see DevOps Lab - GitLab Server
Click Install and enter your email. Make sure to check your junk folder just in case the confirmation email goes there.
Click on the DEPLOY NOW button in the email. This will take you to the environment setup.
Feel free to change your Environment name, Display Name, and Region if needed. Then click Install

Note: You will need to provide payment information as they are providing the server hosting.

This will take a while - but you can let that get set up and check your email to be notified whenever it's finished.

Configuration

Once your environment is set up and ready to go, you can hover over it and click the Change Environment Topology button. It's the green cog with squares underneath:

This page allows you to allocate resources to your server. I bumped mine up to 10 cloudlets minimum just go give myself a little more breathing room. Depending on the size of your organization, you may need more or less.

Start Using

After you deploy, you'll get an email with the username and password for the root user, which allows you to configure the instance even further.

If you want to import your existing GitHub repos, first sign in. Then on the main page at the top right you can choose New project which will take you to this screen:

Select Import project
Choose GitHub

Now you'll need to go to your GitHub profile settings and generate a new token.

Be sure to check the box that gives the token full access to your repos:

Generate the token, copy it
Switch back to your GitLab Authentication page to use it
Click Authenticate
Import your GitHub repos

Now all of your projects are backed up on your very own GitLab instance!

As a recap, check out this video:

Accessibility: Attention to Details

Jonas Jason — Mon, 15 Feb 2021 01:15:08 +0000

What is a11y?

a11y is an abbreviation for "accessibility" (a + 11 letters + y). The purpose of accessibility is to ensure as many people as possible are able to utilize a product or service. In the digital landscape, that means making websites that are able to be navigated by those with some disability or impairment.

Let's take a look at a real world example

The Governor's Pub; one of my favorite places to eat around State College, has a website. How does it stack up in terms of a11y? Let's see:

Here's a screenshot of a lighthouse report, which grades a website based on different categories relating to accessibility.

Not too bad, right? It shows a score of 82 right there.

Well, not quite. While on the surface we interpret the term "disability" as someone with some physical impairment such as being blind or deaf, when we're talking about the internet, that term extends to those with slow internet connections or those using nontraditional devices.

When loading a website, having a slow connection is a disability. So how can we help that? One suggestion given in the report to help performance issues is to serve images in different formats that are better with compression.

Unlabeled Links

One of the greatest tools for blind and visually impaired computer users is the screen narrator; which reads all of the text that appears on screen. However, not all elements of a website can be read verbatim. In our case we can see that there is an improperly labeled link. Here is a code snippet of a button that says "Order Online" which sends you to another service where you can order food:

<img src="/uploads/2/5/2/6/25262348/editor/online-900.jpg?1586087123" alt="Picture" style="width:auto;max-width:100%">

When using screen narrator, it says "Picture" rather than "link to order online" or something more useful and informational. To fix this, links should contain alt text. Here is a more helpful link:

<img src="/uploads/2/5/2/6/25262348/editor/online-900.jpg?1586087123" alt="Link to order online" style="width:auto;max-width:100%">

Navigation Trap

One of the biggest issues I found during my audit of this site is that the embedded Facebook content can trap a user inside of it almost indefinitely.

What do I mean by that? Well, when a blind user is on a website, they use the tab key to navigate and listen to what the screen narrator is telling them is on the page. Think of it like listening to the options given by a call center robot.

"For more options, press 9"

Now imagine if that robot started reading every single sub-option before ever getting to the main option that you need. That's pretty much what's happening with this. The worst part about it though, is that it is blocking the "contact us" link at the bottom of the page. When making reservations to eat out, this can be an especially useful link for a blind person.

An easy workaround for this would be to simply reorder the page and move the contact button up higher, at least above the Facebook content.

What Now?

It's our responsibility to assure that our services are usable by as many people as possible. Beyond just being kind, these people are prospective patrons! It benefits us all to work together.

That's about all I have to say for this blog post. Be kind, be accessible, and stay safe.

P.S. I also made a video about it.

Intro to Vue.js

Jonas Jason — Wed, 10 Feb 2021 18:38:18 +0000

What is Vue?

Well, completely stolen from their website, Vue is defined as:

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

That's helpful... NOT

I know. It's a little wordy. But to help break this definition down a little bit, you should first know what a framework is.

So what is a framework?

A framework is a building block for making websites or web apps. Think of it like somewhat of a template to use. There's a library of predefined functions that you can take advantage of rather than creating everything from scratch.

My favorite analogy that I've heard is; if you're building a car, you're best off buying a wheel rather than try and reinvent it.

Do you have a super digestible and intelligently explained video that I can just watch instead?

Funny you should ask that. I actually do. I made this video demonstrating how I used Vue to build off of my resume that I made using HTML and CSS. If you want to know how I made that, you can watch this video

Who am I?

Jonas Jason — Fri, 22 Jan 2021 23:32:53 +0000

Hello World

My name is Jonas and I'm a junior at The Pennsylvania State University, pursuing my B.S. in Information Sciences & Technology: Design and Development. This degree involves designing software and integrating information technologies to meet users’ specific needs, as well as working with unfamiliar software programs and computer languages, developing applications, troubleshooting problems, and thinking logically to solve complex problems. Beyond the classroom, I am involved with multiple clubs and organizations, most of which relate to STEM.

Okay, so what?

Well, I thought it would be nice to introduce myself so you can know a little more about the guy behind the tutorials I'm making. To start off, I recorded an explanation as to why the notorious "turn it off and on again" method works.

Alright, tell me more 🤔

Whenever our computers, smartphones, or [insert pretty much any device] freezes, oftentimes one of the many apps we have running is the culprit. Due to faulty programming, some apps get stuck in a dead-end. Though a series of logical twists and turns, if the user finds themselves in a situation that was unaccounted for during the programming phase, they might get stuck.

Can you put that into normal people speak, please?

The example I used in my video was as follows:

Imagine that you're hiking along a trail through the woods and you come across a fallen tree. No big deal, you can just climb over it or walk around it.

Now, imagine that path leads to a bridge, stretching over a raging river. Just one thing… the bridge has collapsed. If that bridge was the only way to cross the river for 50 miles on either side, then you’ll just have to turn around, head back the way you came from, and start over.

This is similar to how computers work in the event of errors. If the problem is small enough, like our fallen tree example, there might be another way for the program to “get around” the issue and execute the desired operation.

However, when it comes to our bridge example, and the program encounters a very large problem, we’re then stuck in a never-ending loop left with no other choice but to start from the very beginning.

Example

Let's say you're watching a YouTube video on your phone of somebody explaining this whole concept (linked below). Your phone is connected to Wi-Fi, but all of a sudden the signal fades. Instead of just stopping in place, your phone is "smart" enough to switch over to mobile data. You are able to watch your video fairly seamlessly. This is an example of a small "hiccup" like our fallen tree.

However, in the event of a much more severe incident (a collapsed bridge), our device just cannot find a way through or around the problem and simply has to start back at square 1.

TL;DR

Just watch this video