DEV Community: Christopher Booth

The Flexibility of a Raspberry Pi

Christopher Booth — Tue, 17 Nov 2020 13:57:42 +0000

What is this thing?

A raspberry pi? That's food right? What's it doing on a tech blog? Well, its actually not food this time around. A raspberry pi is a small computer roughly the size of a credit card. There are various models out currently, with the newest being the raspberry pi 4, which has various RAM configurations. These Pis are pretty powerful for their size and plenty capable since they can run linux. There are pre-packaged kits that one may buy when purchasing a Pi but if one wanted to go barebones on a Pi build, users will need at the minimum a:

microSD card - this is where the OS lives.
a microSD card reader - on a working computer to setup the SD card
A power adapter - Depends on model raspberry pi but either USB-C or micro-usb. A cellphone charger will do in a pinch most of the time
A raspberry Pi

What model of Pi do I need?

This depends entirely on the work load a user will demand from the raspberry pi. If the goal is to simply learn and experiment, picking up the previous generation pi, the raspberry pi 3B, might be the best option as they can be had on eBay for very little. On the other hand, if a user will be placing a demanding workload on the computer, the raspberry pi 4 model B may be the winner. It starts at $35 and has RAM variants of 2gb, 4gb, or 8gb.

Basic Setup

Most of the time, I recommend using the Rasbian OS that is made specifically for the Pi. It's a custom flavor of linux for our Pi created by the creators of Raspberry Pi themselves. The easiest way to do so is to use their tool called Raspberry Pi Imager

Download and install the imager
Select Raspian Os
Choose your SD card
Write!

There are a couple more things to do before booting up the Pi for the first time.
If you would like to run the machine headless or access it via SSH, we need to configure it first. It's painless though.

Navigate to your SC card in either your browser or from the command line.
Enter the /boot directory
Create a file named 'ssh' - DO NOT PUT A FILE EXTENSION

Create or edit the file 'wpa_supplicant.conf' in the /boot directory
The network portion of this file at the end should read: ``` network={ ssid="myNetworkName" psk="myNetworkPassword" } ``` Replace the SSID and PSK strings with your network information.

Now the Pi should be configured and ready to go. Decide on a project, and you're off to the races.

What Can I Do With This Thing?

This little computer is so low power and versatile you could have it powered on and running all the time without even knowing it. Yet it is powerful enough to do some incredibly cool tasks. I'd suggest exploring a couple of the following options:

Install NodeJS and Host Your Own Web Apps
Install PiHole, a popular network wide ad blocker.
Host a Media Server like Plex, Emby, or Jellyfin
Use NextCloud to setup a personal home cloud service
Install RetroPi instead and use it to emulate your odl game consoles. Who needs an NES Classic?
Create a secondary Git repository
Use it as learning opportunity for children, it's cheap enough and not dangerous.

The Epic Apple Tax

Christopher Booth — Tue, 10 Nov 2020 15:10:05 +0000

Earlier this year something outrageous happened. Epic Games, the creators of the immensely popular game Fortnite, sued Apple. What led to this? Why sue the company that controls the platform that so much of your userbase is derived from? Money of course!

Before the lawsuit began, Epic Games had stepped around one of Apple's rules regarding in-app payments by encouraging users to buy in game currency and items directly from Epic rather than in app. They did this by offering a discount to users who directly purchased from them but notified iOS and Android users they would not receive the same discount since Apple and Google both took percentages from the top. Apple stands firm that all payments in apps must go through their own payment service. This ensures safety of information, adds security to the apple ecosystem, and grants peace of mind to iOS users. Or so Apple claims. In reality, payments can be processed just as safely using outside sources. The problem with that is, Apple wants their cut of the revenue from the app. What's their cut? A cool 30% of all revenue. For any app developer, losing a third of your potential revenue right from the get-go can be a tough pill to swallow, and if you are relying on this potential income, you have to settle for a lot less than you should be receiving. Furthermore, if you want to offer an application to users on iOS, the only way to do so is to pay the annual developer fee, own a Mac to be able to develop for the platform, and then list it on the official App store. There are no real alternatives to this process. With Apple having complete control over their app store, with no other stores available for iOS, they have created a monopoly of their ecosystem and this is at the heart of Epic Game's lawsuit against Apple. Don't think that Epic Games is pursuing this lawsuit for selfless reasons either, though it may have great effects for smaller developers. Remember, thirty percent of a billion dollar franchise like Fortnite equates to hundreds of millions of dollars. In response to the lawsuit, Apple has pulled Fortnite from the App store. It seems until this suit is settled Fortnite will not be available to iOS users.

Epic Games CEO Tim Sweeney largely claims "Apple has locked down and crippled the ecosystem by inventing an absolute monopoly on the distribution of software, on the monetization of software." This is further evidenced by Apple's refusal to allow Microsoft's own game streaming application on the App store. At least Android users can experience the application from the Play store.

This lawsuit is unlikely to be settled anytime soon as it seems Epic Games is in it for the long haul. Hopefully in the future, however, developing an application for iOS wont be so tricky. The next court hearings are scheduled to begin in May 2021. According to statscounter.com iOS currently has just over 60% of the cell phone market share in America.

Introduction to socket.IO

Christopher Booth — Wed, 04 Nov 2020 14:54:14 +0000

What is it?

It's a tad confusing what socket IO is.
It's a JavaScript library that allows for real-time, bidirectional, and event-based communication between the client browser and the server. So what does that look like or even mean? Let's take a look using visual aids.

In the above photo we can see the client makes a request to the server. The server then processes the request and sends back some data. This is standard for any HTTP request. The connection opens, the request is sent, the request is processed, the data is returned, and finally the connection closes. This is a one time trip not to be repeated unless the page reloads or the request is on a timer or some other manual process. Furthermore, the server cannot decide to send data to the client on its own. It must await a request.

Conversely, connections from Socket IO are kept alive. They keep the connection between client and server open until told otherwise. This allows for updates from the server to be sent to the client unprompted and allows for near instantaneous communication between server and any number of clients.

With socket IO data can move more freely from server to client(s).

Here's a scenario:

Client A and Client B both open a socket connection to the same node server running socket io. Data can now flow freely from server to their clients.

Client A sends a message to the node server

The server listens for the message event and receives the message from client A.

The server decides to send the message to connected Client B so that it may see the message from A.

In the above scenario client B did absolutely nothing to request the message from the server. All it did was open the connection and wait for an event to be fired its way.

Adding Socket IO to your Node Server

This assumes you are familiar with setting up a basic express server using Node.

To begin using socket IO we must install it first:
npm install socket.io --save

Inside your server js file we need to add socket IO.
The most basic implementation should look like this:

//require express
const express = require('express');
//require socket.io
const socket = require('socket.io');

const app = express();

//start server
const server = app.listen(3000, () => {
    console.log('Server listening on port 3000');
});
//attach socket io to server
const io = socket(server);

io.on('connect', (socket) => {
    console.log(`Client connected with socket ID: ${socket.id}`);
});

The above adds socket io to the server and sets up an event listener for incoming connections. At the moment it simply logs their socket Ids to the console.

Adding Socket IO to React Client

The client needs its own socket client. I've chosen to use a hook based client.
npm i use-socket.io-client

In a react component we must make our connection to the server.

import React from 'react'
import useSocket from 'use-socket.io-client';

function example() {
    const [socket] = useSocket();
    socket.connect();

    return (
        <div>
            Hello World
        </div>
    )
}

export default example

Congratulations you've successfully connected the client to the server at this point. One thing to note is within useSocket()
When it is invoked you may pass in the address of the server it is meant to connect to.
const [socket] = useSocket('ws://someAddress')

This is not needed, however, if socket io is meant to connect to the same server the react app is accessed from. It will handle that connection on its own.

If you want to see more examples of what you can do with socket IO take a look at the official docs. Particularly take a look at their emit cheatsheet

An introduction to Docker - The development and deployment benefits

Christopher Booth — Sun, 25 Oct 2020 22:49:02 +0000

What is Docker?

Docker is an open source containerization platform. This platform allows developers to package their applications into isolated containers that house all required application software, dependencies and configurations in one neat bundle. This improves the speed at which developers can collaborate on, test, and deploy a piece of software. Since containers are isolated from one another, users can even have multiple versions of the same software running simultaneously without conflicts.

Containers

A container is a way to package applications with all required dependencies and configurations. It is a portable software container that can be easily shared and moved among a development team. Overall they make the development and deployment process much more efficient.

Since containers are portable, there is a storage system created that holds all containers called the container repository. These repositories can be private or public. Think of it as a GitHub for docker containers. Many of the public containers are available on https://hub.docker.com/ DockerHub, a resource that stores over 100,000 container images.

Containers Impact

Containers solve a lot of problems for development. Instead of setting up each machine identically for the development team to work on the same project (which can differ greatly based on operating system type and revision, and may have many steps that can lead to errors), developers can install the container and be up and running in a matter of a handful of minutes. The container is its own isolated development environment that houses all necessary dependancies. In comparison to the traditional installation steps, installation of a docker container is usually one command.

This approach of containers has many implications and simplifications for the deployment process as well. Traditionally, deployment happened in various steps. The dev team created applications with detailed instructions on how to install the application and configure it. The application typically also has a database attached to it that also needs detailed instructions for configuration. These two pieces of the puzzle must be handed off to the deployment team and they must prepare the server environment for the software. Again this may introduce many conflicts or errors due to differences in operating system, dependency versions / revisions, installation steps, etc. With docker, the teams are joined together and the only configuration needed for the server is the Docker Runtime binaries. The server can pull the container image down and run it much quicker and more reliably than traditional deployment.

In the next entry we will discuss how to get started with creating your own docker container images.

Take Care of Your Eyes

Christopher Booth — Mon, 19 Oct 2020 21:59:49 +0000

As a lifelong glasses wearer, I can tell you, your eyes matter! As an avid lifelong video game player who sat a little too close to the TV as a child, I can tell you staring at a screen for hours on end without breaks is not a good idea. According to the Vision Council of America, nearly 75% of American adults have some form of vision correction. So how can we programmers protect our eye sight - especially since staring at a digital screen for long periods of time can lead to digital eye strain? Turns out there are a bunch of tools and actions we can utilize to preserve our eyes!

Proper lighting is a must! Too much harsh light is bad for your eyes. In fact the recommended amount of light is about half of what is found in the average office space. Close drapes, use less overhead lights, try to sit perpendicular to a window rather than facing it.
Reflections are the enemy! Glare produced on your screen makes it harder for your eyes to focus. Try to pair this with the lighting tip to minimize the amount of glare on your screen and even the desk next to your screen. That harsh light reflected back into your eyes adds strain and makes your eyes work harder to focus.
Blink! Doctor who fans may have a problem with this, especially if they feel like a weeping angel is around the corner, but make sure to blink. When you stare at a screen you blink less often - roughly one third as often - and deprive your eyes of liquid. This may lead to agitating dry eye symptoms.
Take a break. Remember to stand and stretch every 20 to 30 minutes. Similarly, your eyes should be given a break. Follow the 20/20/20 rule. Roughly every 20 minutes, look at an object 20 feet away for 20 seconds. This allows your eyes to focus on something much farther away than the average computer screen and gives them a break from the bright light of the display.
Adjust your display. Install a blue light filter app such as f.lux. Increase the size of the text on your display. Buy a display with flicker free technology. All of these can help reduce strain.
Think about your posture. Spending all day hunched forward at a desk typing on a keyboard can be detrimental for you. Back pain, leg pain, stressed nerves in the neck. All of this adds up and can agitate your eyes as well.
Take REAL breaks. Keep in mind that ALL displays can be harmful. Phones, tablets, e-readers. You name it. Staring at all of these displays for too long can cause harm and substituting one for the other is not a legitimate break.

Coding is important and fun. You can use technology to accomplish incredible things. But don't forget to take care of yourself.

Virtual Machines and How To Test Linux Distributions from inside Windows

Christopher Booth — Thu, 24 Sep 2020 02:31:23 +0000

What is a virtual machine (VM)? In essence, it is a virtual computer. It is a piece of software that behaves like its own computer. Users can choose to grant or restrict access to any hardware in the machine to the VM. Multiple virtual machines may be installed on a single machine as long as the system's hardware can support it.

What does this mean for development or computer use in general? Well, not much for the average consumer, but for those who are seeking to experience a different environment than Windows or Mac OS, it can mean the ability to taste operating system freedom; and break out of the chains Microsoft and Apple have bound the user in by getting a taste of Linux inside of a VM. This allows the user to get a taste of what a Linux operating system is like without completely leaving their comfort zone behind. Admittedly, for Mac web developers, this may not offer the same benefits it would a Windows user. With many windows developers relying on the Windows Subsystem for Linux (WSL) and the constant possibility for an OS update to break support, peering over the fence into Linux land might be worth the effort. Once you have chosen what distribution of Linux to install (popular versions are: Ubuntu, Mint, POP OS), you can begin creating your virtual machine.

How to Install VM on Windows 10:

In order to start this off, you need to enable Hyper V on windows.
To do so, click start and in the search bar, type: "Turn Windows Features On or Off"

Inside the menu scroll down and make sure the box for Hyper-V is checked. If not, click the box and restart the computer when prompted.

Search for and open Hyper-V and select "Quick Create"

At this point, if you have not chosen what flavor of Linux to use, Windows will offer you a couple by default from the quick create menu. Otherwise, point it to the image file you've chosen. I chose to install an image that was not listed. I chose POP OS

From this point on, many of the prompts are self explanatory or automatic. You will reach a screen that offers two options: Connect OR edit settings. Choose connect and a new window will open. Press start and wait for the VM to load.

Many of the prompts are self explanatory (location, time of day, keyboard language, etc.). One prompt that may throw users for a loop is the prompt for choosing installation style. Pop OS offers "clean install" or "custom install" If you are unsure or do not know what you are doing, choose "clean install." This installs it to the default drive with default settings and overwrites anything that previously existed. Since this is a brand new VM using a virtual drive, no data will be lost or overwritten with a clean install.

Finished!

Congratulations you've successfully installed your first VM inside Windows 10. From here, follow the first time setup prompts like you would for any other machine and start to explore your new environment. If you end up falling in love with Linux, you can choose to install it on bare-metal so it can run as your main OS instead. If you do not enjoy the distribution of Linux you've chosen, delete the virtual machine and try a different one!

Vivium - Cause there's a shortcut for everything!

Christopher Booth — Mon, 07 Sep 2020 15:00:47 +0000

AS an avid desktop user for most of my life, the change to using a laptop as a primary device has been interesting. The portability is great, but the interaction is a bit limited. I'm looking at you, trackpad. I miss my mouse but I'm slowly learning that using a mouse or even a trackpad is not always necessary. And if we are talking about time efficiency, taking your hand off the keyboard to grab the mouse and navigate the UI is certainly less than ideal. To solve that many of our favorite programs come with keyboard shortcuts to help users move through the software at a faster pace. Some of these ready to go shortcuts are great, but there are certainly holes to fill. Enter Vivium.

Vivium is a chrome browser extension that promises to allow the user to navigate the internet without ever using a mouse. It's got the added benefit of making the user feel like a real hacker with all the clicking and clacking your keyboard will do. It's modeled after Vim, and adds several useful shortcuts to chrome.

Installation and Basic Commands:

First and foremost, installation is necessary. Open up Chrome and take a moment to visit their extension store. I also provide a link to the extension here.

To demonstrate a few of the commands I'll walk through visiting Reddit. On your desired webpage, press the F keyboard when your cursor is not active in an input field. Your screen will be filled with short, 2-letter boxes. If you type the corresponding letter, you will select and be brought to the link they are hovered over.
You can also scroll along the page by pressing "D" to go down and "U" to go up. Nifty! To scroll more slowly, on a line by line basis, you can press "J" to go down and "K" to go up.

Creating and changing tabs is also possible with Vivium. Try it out by creating a new tab with "Shift + F" to create a new tab, followed by "Shift + K" to make it active. Move back to your old tab with "Shift + J" If you decide you are done with your tabs you may close the current one with "Shift + X"

Give it a whirl, it will be faster navigation than using a mouse when you get used to it! Check out their GitHub page for official documentation and a deeper dive.

HTTP Methods: Get? Post? What does it mean?

Christopher Booth — Mon, 31 Aug 2020 13:45:18 +0000

Let's take a moment to discuss what happens when a user visits a website, in particular how the data that is ultimately seen by a user get to their browser. It turns out that the majority of the content of the webpage is the result of a a data transfer called Hypertext Transfer Protocol (HTTP).

Take a look at the URL above. It probably starts with http://. What is this mysterious transfer protocol? Well, according to w3schools.com, "HTTP works as a request-response protocol between a client and server." As an over-simplified illustration of this concept, think about logging into Facebook or YouTube. When the user logs in with their credentials, the browser (the client) sends a request for data associated with that user from the computers responsible for running YouTube (the server). When the server sends back that data, the page is reloaded with the appropriate information (the username, the history feed, recommendation feed, etc). The users computer client and the service's server has a conversation. The client tells the server "Hi, my name is Chris, may I have my data? My password is Password123" (side note, please do not use a simple password like Password123). If everything checks out and the server recognizes the information given to it by the client, it will fulfill the request and send the appropriate data to the client. Of course, the technical side of things is a tad more complicated.

With the core concept of HTTP covered, let's discuss the different possibilities presented to the developer with regards to HTTP methods and when to use each. With regard to the many different options, the two most frequently used methods are GET and POST. According to MDN, "the HTTP GET method requests a representation of the specified resource" and importantly these requests "should only retrieve data." In the above sign-in example, the client is sending a GET request asking for the user's watch history, profile information, etc. A get method with the following URL should return the appropriate information associated with user 'Chris.'
http://my-amazing-website-name.com/api-name/users/chris

Receiving data is one thing, but how about sending data out to the server? That's where the POST command comes in. Taken from MDN, "the HTTP POST method sends data to the server ... [and] is typically sent via an HTML form and results in a change on the server." A simple illustration of this is to think of posting a message on a community forum such as Reddit. When a user submits a new post, it is sent to the server in the form of a POST request.

Finally what about the possibility of deleting data from a server? Such as deleting a post from the community forums or deleting an account altogether? HTTP has developers covered. Our last command today is the DELETE method. According to MDN, the DELETE method does exactly what can be inferred from the name: DELETE "deletes the specified resource." For instance, when a user of instagram decides to delete their post, the delete command is run and removes the appropriate data from the server.

That about wraps it up for the most common HTTP methods developers have in their arsenal. There are several others in existence and maybe I will cover them at a later date.

Javascript Data Structures: The Linked List (Single Link)

Christopher Booth — Sat, 22 Aug 2020 16:35:18 +0000

Javascript is confusing at times, especially for new coders. When code starts to center around objects and manipulating them, Javascript can become even more confusing. However, this understanding of objects is fundamental and crucial when talking about data structures. One of the simplest data structures is a linked list.

What is a Linked List?

A linked list is a series of values stored in an iterative format. In essence, each value is a node (in this case each node is a javascript object) that contains a value, and a reference to the next item in the list. If no there is no next item in the list, it points to nothing, or null.

Linked List Structure

Each node is an object with two properties, a value and a reference. Here is a quick visualization of what any node in the list might look like:

We will want to implement a function to handle the creation of nodes for us.

We've covered the structure of each node, but how does the linked list know how to keep track of which node to start with and which to end at? The list itself is an object! The list itself does not actually store any of the nodes; the list keeps a reference to the first and last items in the list. This is done by adding a beginning and end property to the list object, and subsequently updating these pointers when modifying the list. If a "next" pointer can not logically point to a node, its value should be null.

At the start, our empty list should look something like this:

A list object with 2 properties: head and tail. Both properties have the value of null initially.

Manipulating the Linked List

We've covered the structure of each node as well as the structure of our list object. But how can we manipulate the list? How can we add to it? Remove from it? Due to the nature and use case of a list, in most cases you will want to add new values to the end of the list, and remove older values from the front of the list.

Adding New Nodes to the List

Adding new nodes is simple if all we want to do is add the new node to the tail end of the list.

We can create a function that takes in a value for our new node as a parameter.

Inside this addToList function we create our new Node using our node function from above. Next we check if our list obj has a valid reference to an object in its tail property. If so, we access the current tail object, add a reference our newly created object as its next, and update the tail property of the list to point to the new node.

Removing Nodes From the List

As with adding nodes to the end of the list, I'll focus on removing nodes from the front of the list.

Again we create a function to handle this removal process for us. We do not need to assign any parameters as we are only focused on removing the first node. Access the head property of our list. If its value is pointing to a node, grab the reference to that node and store it in a variable. Now that we have access to the current head, we can return its value for use in another function and see what the next item in the list is. So the next order of business is to reassign the head property of list to the next node. After reassignment, return the oldHead value if needed.

Why Use Linked Lists?

Linked lists are iterative in nature. That is to say to find one value, you must have access to the previous. Going straight to any one value is not easy. That's okay though! Linked lists are more of a method to create and sustain a queue, or an order of events in which the oldest item (in this case the oldest node) is worked with first.

Linked lists are great for when there is an indeterminate amount of data to process but it must be processed in a certain order and direct access to the middle of the queue is not needed. These lists can be an important tool for any developer.