DEV Community: whatsacomputertho

Take IST 402 With Bryan Ollendyke

whatsacomputertho — Mon, 03 May 2021 23:11:28 +0000

Much like the classic, "On a scale of 1 to 10, how likely would you be to recommend our operating system to a friend?", it's not very likely that I would recommend any particular course to any particular individual. However, I attended a course this past semester that really opened my eyes to the need for transformation within the university classroom.

The True Value of University: My Unfiltered Thoughts

It seems that there has been a recent shift away from the blind investment into a university education. Whether it be attributable to the growing student loan crisis, or to the massive shift away from in-person university classes, one thing is for certain - people are beginning to doubt the value of such an investment. I, on the other hand, believe that there is plenty of value in a university education, but universities certainly are not entirely aware of (or willing to accept) the source of this value.

One incredibly important question worth asking here is the question of why undergraduate students attend a modern university. It seems clear as an undergraduate myself that most students attending a university hope to learn the skills which qualify them for a high-ranking or desirable position within some industry. University colleges and their respective departments, however, are led by academics who may not share this same point of view. Perhaps their ideal career looks much like their own; attending a Ph.D. program, becoming a tenured professor, and taking charge of an academic institution. Thus, there is often an inherent disconnect between the values of higher education, and those of the population it serves.

So What?

Well, my point of view is that larger universities, much like The Pennsylvania State University at which I am currently a rising senior, have developed substantial professional and academic communities over time which present their truest source of value for undergraduates... however, this is not enough. At the very least, the undergraduate classroom must begin to evolve such that the knowledge of the industry is integrated into the curriculum. Why do these massive universities seem to not make full use of their networks in the classroom?

What Does This Have to Do With IST 402?

During my experience in Bryan Ollendyke's IST 402 class, I was blown away by the level of industry awareness that my professor brought to the table. None of my other professors had such substantial understanding of the industry. None of my other professors invited industry professionals into the classroom to give guest lectures. None of my other professors had interesting technical projects to which they outwardly encourage students to contribute. There is such a massive demand for these kinds of opportunities for students, and yet paradoxically few classrooms provide them. If you're an IST student like myself, look no further than Bryan Ollendyke's IST 402 class for a truly valuable experience.

The course centers around the evolution of the modern web, and it covers topics such as introductory HTML, CSS, and JavaScript, before delving into more complex concepts such as (but not limited to) content management systems, web development frameworks, web components, and developer operations (DevOps). Throughout the course students are not required to submit tedious busy work assignments, rather, they are simply encouraged each week to learn as much as they can about a given technology, and then to communicate that technology in both written format (blog posts) and via the spoken word (producing videos talking about the topic). As a result, this course was able to cover a far broader scope of topics than one might encounter in a typical college course while remaining very manageable in terms of its workload. Also, being a highly self-motivated student, I found this format to be especially helpful to my learning.

My Final Project

At the end of the course, we were asked to choose between a few options for our final project. The option I went with was the one involving contributing to the LRNWebComponents open-source project. This involved developing dynamic and accessible web components using the web component standard, and participating in code reviews in order to receive feedback and to refactor the web components we developed. The web component I developed is called product-glance, and it is a simple visual element composed of an encircled icon, with a brief title and subtitle to the right of it. As a result, I earned the experience not only of developing my own software components, but also receiving feedback on the software components I developed from an experienced professional in the field. You can see my source files here within the LRNWebComponents Mono-Repository.

What's a Microservice Architecture, Tho?

whatsacomputertho — Mon, 12 Apr 2021 03:12:54 +0000

One key value throughout the history of software development has been the effort to decouple components of software programs. In essence, decoupled software is composed of many independent components which can be added, removed, and reused freely. But, what are software “components”? Well, as I’ve discussed in previous blogs, web components are a great example of decoupled components of software which can be added, removed, and reused universally across browsers and across frameworks. However, web components are really only applicable within front-end web development. Does there exist something of this nature, but geared toward back-end development?

Enter microservices. The term “microservice” is a huge buzz-word these days, but not often do people get to see what microservices actually are behind the scenes. At a high level, a microservice is a tiny application specifying a set of functions which access some remote data source or data sources, and return their data. This “set of functions” is known as its API, or Application Programming Interface. Typically, a microservice API will run on a remote web server without a front end, and its functions can be called after obtaining a developer API key.

Before microservices, the vast majority of the web utilized a monolithic architecture. For each new web application, a new front end, back end, and data source may have had to be created, configured, and carefully deployed within a fragile production environment. Nowadays, highly decoupled microservices and data sources exist all over the web, and oftentimes all that goes into spinning up a new web application is a static front-end which leverages existing APIs to deliver its dynamic content.

Check out this video I put together on deploying microservice-architected applications using Docker!

Exploring LRNWebComponents

whatsacomputertho — Mon, 29 Mar 2021 16:07:52 +0000

Throughout the history of software development, one value which has established itself as a constant is that of code reusability. For years, web development using HTML, CSS, and JavaScript has lacked the standardization which would allow for the free and flexible reuse of functional elements… until now. With the rise of the web component standard, web developers now have the standard mechanisms in place to enable low-level, yet universally applicable custom elements. And, when I say universally applicable, I mean, across browsers, across frameworks, and across content management systems. No matter how you look at it, this is truly the best of both worlds.

The Technology Backing Web Components

Web components are essentially the culmination of four major technologies in web development -- custom elements, shadow DOM, HTML templates, and ES modules. Looking back at my previous tutorial on creating web components (embedded below), we can see a few of these specifications emerge as we go through the process. In particular, we see the custom elements specification emerge when we run the function

CustomElements.define(...)

which includes our element in our HTML document’s CustomElements registry. We also see the ES modules specification emerge when we give our JavaScript web component class a type value of “module”. Beyond these specifications, the shadow DOM specification effectively allows us to isolate the scope of an element from the rest of the document so that there are no major issues when styling the element using CSS in a larger document which may use similar and conflicting naming conventions. Also, HTML templates allow us to take fragments of markup and give them values at runtime rather than at page load. And ultimately, these specifications all culminate in the enabling of our modern-day web component standard.

The Current State of Web Components

But where are all the web components? Well, slowly but surely, web components are on the rise. Brands like YouTube, EA, XFinity, and RedHat all utilize web components to some extent in their web interfaces. In fact, it’s estimated that between 5 to 10 percent of page loads involve a web component. But, with such an important and revolutionary technology, shouldn’t this number be much higher? Well, in theory, yes, but there also exists heavy fragmentation within the web development community with regard to the dominant web technology which ought to be used. Furthermore, it will take a considerable amount of time and effort to convince companies and organizations to begin to adopt web components within their existing properties. Nonetheless, there are ways that you can help web components become a widely-adopted technology. I detail this in my video embedded below -- namely, how to contribute to the LRNWebComponents open source project. If you would rather read through this tutorial, though, feel free to skip the video and read further.

Step 1: Install NPM

Downloading Node.js will give you access to NPM, or Node Package Manager.
Node.js Download

Step 2: Install Yarn using NPM

In the command line, run the command:

npm install --global yarn

Step 3: Fork the LRNWebComponents Repository

You can do this using GitHub's user-interface by traveling to the LRNWebComponents Repository and clicking the "Fork" button in the top-right.

Step 4: Clone the LRNWebComponents Repository

You can also do this using GitHub's user-interface from your forked repository by viewing it and clicking the green "Code" button. Once you've downloaded the repository as a .zip file, simply extract its contents and you're ready to go.

Step 5: Install the Required Dependencies and Dev Tools

Now, we'll move on to how we might go about modifying a web component within the LRNWebComponents repository. To do this, choose any web component in the /elements/ subdirectory and run the command:

yarn install

within its subdirectory from the command line. This will give us the necessary development tools and dependencies we need to carry out our contributions to the project.

Step 6: Start Yarn

Simply run the command:

yarn start

and you will have a hot reloading web server at your disposal for development purposes.

Step 7: Open the IDE

To edit your web component of choice, run the command:

code [FILENAME]

from the component's subdirectory in the command line. Replace "[FILENAME]" with the .js file containing the class definition of the web component you would like to modify.

Step 8: Edit the Web Component As You Wish

The specifics of this step are entirely up to you, the programmer!

Step 9: Commit Your Changes to Your Forked Repository

If you are inexperienced with Git, see my Git/GitHub tutorial (embedded below) for more info on this step.

Step 10: Send a Pull Request

Now all that is left to do is to send a pull request to the LRNWebComponents repository, and you are officially a contributor to the largest library of open-source web components in the world!

What's Git & GitHub, Tho?

whatsacomputertho — Wed, 24 Feb 2021 01:18:44 +0000

You may have heard of Git and GitHub, and you may have even used them before to share code or to grab someone else’s code. Still, though, many of you may be confused surrounding the nature and use of Git and GitHub. Some of you may not even know that these two things are different from one another. Regardless, I hope to explore both Git and GitHub conceptually and practically, and hopefully leave each of you with a greater understanding of what they are, and why they are used so heavily within software development.

Git is a software that tracks the contents of source files within a folder system. In the language of Git, this “folder system” is called a repository, a term which many developers abbreviate to “repo”. Meanwhile, GitHub is an example of a service which supports Git repositories. Namely, GitHub is a platform which hosts remote Git repositories, and allows developers to collaborate and to contribute to these repositories. Basically, any software project you’ve ever viewed on GitHub is simply a graphical display of a remote repository’s files and folders, as well as some additional information surrounding the collaboration which has taken place on the project.

See the following video for a more in-depth look into Git and GitHub, as well as a video tutorial for how to get started with Git and GitHub. If you would rather read through the setup portion of this tutorial, I went ahead and transcribed its steps and included this transcription below the embedded video.

Step 1: Create a GitHub Account

First and foremost, you’ll need to sign up for a GitHub account. Doing so will allow you to create your own remote repositories hosted by GitHub.

Step 2: Create a GitHub Repository

The repository you create will be empty when you create it, but soon, we’ll populate it with a test project.

Step 3: Install Git

This will allow you to interface with your local Git repository via the command line.
Git Download

Step 4: Identify or Create a Software Project On Your Hard Drive

Identify the project for which you would like to create a Git repository. In my video's demonstration, I used an existing project from a past video.

Step 5: Navigate to Your Project Folder via the Command Line

We will be interfacing with Git via the command line at the root folder of your identified project.

Step 6: Initialize Your Git Repository

Once you’ve navigated to your project folder, run the command:

git init

This command initializes your local repository.

Step 7: Add a Reference to Your Remote Repository

We can then add a reference to our remote repository by running the command:

git remote add origin [URL]

Replace "[URL]" with your remote repository's URL. We will use this reference later when we send our local repository to the remote one.

Step 8: Add Your Project's Source Files to Your Local Repository

We can add our source files one-by-one by running:

git add [FILENAME]

Replace "[FILENAME]" with the name of the file you would like to add. More simply, we can add all the files in your project by running:

git add *

Step 9: Commit Your Added Files

This will essentially save the current state of your repository. Do so by running:

git commit -m "message"

Add your own custom message within quotations to signify the purpose of the commit.

Step 10: Add a Main Branch to Your Local Repository

To do this, we’ll run:

git branch -M main

Step 11: Push Your Local Repository to Your Remote Repository

Push your local repository to the remote repository by running:

git push -u origin main

After running this command, refresh your GitHub repository in your browser, and you’ll see that your project has now been sent to your remote repository.

What's Accessibility, Tho?

whatsacomputertho — Mon, 15 Feb 2021 04:07:33 +0000

Introduction

Let’s say you were in charge of introducing a brand new currency into your country. It consists of four different coins, each having different values. How would you physically design these coins such that the introduction of this new currency is maximally successful?

Human Centered Design and Its Effects

In Britain, in 1971, a very similar situation was at hand. The British government was faced with the task of introducing a brand new set of coins to correspond with its new currency. To help carry out the design of these new coins, Britain invested in research into what makes a coinage system successful. One of the things the researchers discovered was that the coins should be designed such that any given coin could be identified by touch alone. This may sound rather unsurprising -- after all, we all carry our coins around in our pockets, or perhaps in a purse or wallet of some sort. But, if phrased differently, this insight can act as a nearly infinite source of design wisdom. Allow me to propose the following generalization:

Designing for those who lack certain senses can provide unforeseen benefits that propagate outward, even to those who do not lack such senses

Now this statement is a bit more surprising. In fact, this statement was possibly the most profound insight I took away from my reading of the first few chapters of Frank Ritter’s Foundations for Designing User-Centered Systems. There is much, much more that Ritter has to offer in his book, and so if you found this particular case to be uniquely interesting, I encourage you to purchase Foundations for Designing User-Centered Systems. Also, as a disclaimer, I am in no way affiliated with any publisher or author of this publication, it’s just a genuinely good book that has a lot of great insights to offer.

In general, though, it focuses on the concept of Human-Centered Design, which is no new or surprising concept. Obviously, if we design things for humans to use, an integral part of the design of such things are the human users themselves. But, much like our coinage example, Human-Centered Design can provide some incredibly beautiful insights into the design of things; and not to mention, as a field, Human-Centered Design is a very elegant intersection of various fields of study, including psychology, engineering, computer science, and more.

Accessibility on the Web

With all this being said, what principles of Human-Centered Design does the web have to offer? Is the internet designed to be used and operated by all, or is there still progress to be made in this regard? Well, one massive initiative throughout the history of the internet has been the push for accessibility. Accessibility is a broad term which involves a number of considerations on various levels, but in a general sense, accessibility directly mirrors the concept that was revealed to us in our coinage example. Accessibility generally involves the design of user-interfaces with a focus on those who are impaired in some area of perception or function. This may include anything from total blindness to lack of motor function.

There are many technologies and software techniques that support accessibility. For example, user interfaces which are higher in terms of their color contrast are easier for those who have some visual impairment to perceive. Furthermore, those with total blindness may use a screen reader, or perhaps a braille reader hardware component to perceive webpage text. Also, those with auditory impairments may read closed captions when viewing videos on the internet.

One of the main ways that the web approaches accessibility is through its support of ARIA, which is an acronym for the Web Accessibility Initiative’s Accessible Rich Internet Applications specification. ARIA defines a set of properties that can be given values in HTML, and even adjusted dynamically using JavaScript. These values describe the text that should be read off by a screen reader when an object is in focus, they specify implied relationships between objects, and much more.

How Accessibility and SEO are Closely Connected

All things considered, accessibility may still be a tough sell for many people. After all, development is a costly practice, and to a corporate executive, it could be difficult to comprehend the immediate value in pouring so much time and effort into serving a small subset of a given application’s stakeholders. That said, much like our coinage example from earlier, accessibility has some significant, and relatively unforeseen benefits that propagate outward beyond the stakeholders that it intends to serve.

Perhaps most significantly, accessibility, when implemented correctly into a webpage, increases the page’s search engine optimization immensely. Search engines like Google and Yahoo incentivise accessibility, and the more accessible your page is, the higher it is likely to be ranked by search engines. In addition, designing a web page for accessibility inherently requires programmers to include relevant, and elegant descriptions of their HTML tags so that they can be interpreted by screen readers, and other technologies which promote accessibility.

How to Know Whether Your SEO or Accessibility Should Be Improved

So, let’s say you have a webpage, and you’re interested in improving its SEO, and/or its relative accessibility. Where should you start? Well, I recommend looking into two tools which support the measurement and improvement of Accessibility and SEO. First, we have the WAVE Web Accessibility Evaluation tool. This tool allows its users to input a URL to a webpage, and it measures the accessibility of the page by identifying accessibility errors, alerting the user of potential concerns, and pointing out where the site succeeds in making itself accessible by all users. Next, we have web.dev, which is a Google-owned project that measures the overall effectiveness of a webpage by gauging its performance, accessibility, best practices, and search engine optimization.

If you own a website, or if you are developing one, and you are at all interested in increasing its accessibility and its SEO, I encourage you to look into both of these tools, and to implement their feedback into your website. Not only will this result in a more accessible webpage, but it will increase your search rankings, and ultimately result in more traffic, and more revenue.

What's a Web Component, Tho?

whatsacomputertho — Thu, 11 Feb 2021 04:29:44 +0000

Although this is no new concept, many learners who are new to programming do not realize that making "custom HTML tags", or web components, is even possible. Even more surprising, many professional developers may miss out on the fact that there exist tons of open source web components that are free to download and use. In this blog, we are going to discuss how, exactly, open-source web components can be downloaded and used for development.

Step 1: Download Node.js

First, you’ll need to download Node.js, which will automatically provide you with all the necessary environment variables and tools needed to use NPM, or “Node Package Manager”. NPM is a very powerful command line tool which we’ll talk about very soon. For now, though, the first step will be to download Node.js. Below is a link to their download page:
[nodejs download]https://nodejs.org/en/download/

Step 2: Install Polymer Using NPM

To install polymer, navigate to your command line and enter the command:

npm install -g polymer-cli

If you’re on a Linux machine, you may also need to add the sudo command to run the command as an administrator. This will install polymer, which is a service that will allow you to host and view your webpage locally.

Step 3: Download Desired Open-Source Web Components Using NPM

Navigate, using the command line, to a folder on your hard drive within which you would like to store your project. Next, run the commands:

npm install @lrnwebcomponents\meme-maker

npm install @lrnwebcomponents\moar-sarcasm

These commands will bring in two example web components which will allow us to create memes in HTML, and also add sarcasm to our webpage text.

Step 4: Implement in HTML

Here are the tags I added within the body of my HTML file which should successfully import the remote web components, and of course, instantiate them on your webpage.

<meme-maker class="meme" top-text="Oh heck" bottom-text="A computar :DDDDD" image-url="computar.jpg"></meme-maker> <moar-sarcasm>whatsacomputertho</moar-sarcasm> <script type="module"> import {MemeMaker} from '@lrnwebcomponents/meme-maker'; import {MoarSarcasm} from '@lrnwebcomponents/moar-sarcasm'; </script>

Keep in mind, I'm using a local image in the meme-maker tag, so if you copy these tags into your project as-is, it is likely that no meme will show up.

Step 5: Serve Locally Using Polymer

Back in the command line, navigate to your project folder and execute the command:

polymer serve

Then, once it returns an IP address and port number, copy it into your browser's search bar. This should take you to your webpage, and you should be able to see your successfully instantiated web components.

See the below video for a more in-depth tutorial on Open-Source web components

What's "whatsacomputertho", Tho?

whatsacomputertho — Mon, 25 Jan 2021 02:39:57 +0000

My Brand Identity

Hello everyone, and welcome to whatsacomputertho. It is my mission with this brand to provide learners with nearly any level of skill in math and programming with relatively informal content which leaves them both amazed, and feeling as though they learned something new. Ultimately, I hope my mission will help lead toward my goal of mapping the landscape of mathematics, computer science, and their various overlapping fields for both experienced and inexperienced learners to become aware of each of their subfields and the relationships between them.

Background

My Personal Journey

Part of what inspired whatsacomputertho is my personal background with mathematics and computer science. Throughout high school, I was unaware of the fact that computer science was such a rich field, both intellectually and professionally. This is due to the fact that my high school simply did not offer computer science courses. In addition, while I was quite the fan of math in high school, all in all, my high school’s math department was highly focused and did not do a great job overall of exposing us to the wide range of mathematical fields.

Due to this, I chose to pursue my hobby of videography and video editing as a major in college. I pursued this hobby pretty heavily for quite a while before stumbling across a few YouTube videos discussing higher-dimensional geometry and non-euclidean projection which revitalized my interest in, and appreciation for, mathematics. Furthermore, this really inspired my goal to build a mental map of mathematics, and eventually pursue a more technical major in college.

Development of “whatsacomputertho”

During the summer after my Freshman year at college, after I had switched my major to a more technical area of study, I decided I would spend the summer “catching up” to my peers who had more experience programming than I had at that time. I studied very basic web development, and in doing so, I realized how little I knew about the realm of computer abstraction. I found it incredibly hard to understand just how everything worked at various levels of abstraction, and so, just as I had begun to do for mathematics, I began constructing a second mental map of the field of computer science. This was what had led to my realization of my guiding question, the question which inspires me each day to push a bit further in my studies. My guiding question is, “What’s a computer though?”.

My Brand in Practice

The Monty Hall Problem

While I could discuss for hours the cheesy corporate gibberish of mission statements and goal declarations, I would rather put on display a tangible example of what my brand truly contributes to today’s digital landscape. Below, you will find my most recent video discussing the infamous Monty Hall problem. I find this particular problem to be one which can trick even the most experienced statistician or analyst, yet one which is simultaneously so easy to understand upon analysis, that even those with little to no experience can understand just what makes it so unintuitive. In order to do so, I modeled the problem using a decision tree, which I felt did the job of turning an unintuitive problem into an intuitive one.