DEV Community: Taulant Sulko

The Useless Machine and what can it teach us about software and computation

Taulant Sulko — Thu, 09 Jul 2020 17:30:38 +0000

You may be familiar with The Useless Machine, made famous by American cognitive scientist Marvin Minsky. For those who aren't, it is a useless object with no real purpose.

There are many examples, but the most well-known was made by Minsky himself. His version is a box with the sole function of switching itself OFF once the user has turned it ON.

It's very silly, and can be looked at as nothing but a fun and addictive toy. However, I think this very basic automaton offers an interesting lens to look at computing through.

What are the implications of machine that can switch itself `OFF`?

I often find, when writing code, that I am essentially doing is creating metaphorical switches, then telling the computer whether they should be turned ON or OFF. Or in more broad terms whenever something should happen or shouldn't happen.

In the case of the Useless Machine, we can predict that the machine will reverse our decision every time. It is going beyond just switching between two states. The Useless Machine can put itself into a new state.

Let's do a practical breakdown of each element and how it can be represented as code.

The switch

A physical switch has two states: ON and OFF. When it's ON the current flows through it; when it's turned OFF it blocks the current by cutting the flow.

In programming the switch can be represented as boolean values TRUE and FALSE.

How can we represent the switch in a programming language? For simplicity let's track if the switch is ON. We can do this by declaring a variable called isSwitchOn and setting it to false. This represents that the switch is OFF. As we know The Useless Machine is turned OFF before the user turns it ON.

var isSwitchOn = false;

The role of the switch

The switch has a very interesting role in The Useless Machine. If we were to break this down as MVC (Model View Controller) diagram. The switch here is a Model, View and Controller all in one.

Switch Role	Computational Role	Description of Role
Model	Memory	The switch is a database that can hold either of two values `ON` or `OFF`.
View	Display	You can read the database by seeing the status of the switch if it is `ON` or `OFF`.
Controller	Logic	The switch can change the value of the database by the act of switching from `ON` to `OFF` or from `OFF` to `ON`. If something is not `ON` then it is `OFF`.

The user

The user interacts with the box by turning the switch ON.

The user turning the switch ON can be represented as a function that changes the value of isSwitchOn to true.

function turnSwitchOn() {
  isSwitchOn = true;
}

turnSwitchOn();

The role of the user

Usually people build machines that create efficiencies like saving time by doing something faster or better. Why would anyone use The Useless Machine? That's simple. It's a fun and addictive toy.

How do users get addicted to technology? Let's analyze The Useless Machine through The Hook model.

Role	Description
Trigger	User sees that the switch is turned `OFF`. Wants to turn it `ON`.
Action	User turns the switch `ON`.
Variable Rewards	The user is entertained by the fact that the machine can turn the switch back to the `OFF` position.
Investment	The user gets invested into thinking about automatons. Ponders about life and computers and finite state machines.
External Trigger	User sees that the switch is turned `OFF`. Wants to turn it `ON`.

The creepy arm inside the box

There is a tireless hand inside The Useless Machine that is tasked with turning the switch OFF whenever it finds that it is turned ON.

This arm in programming can be represented with a recursive function. When you call a function in itself it will run forever. The turnSwitchOff() function will run forever in a loop to check if the isSwitchOn is ever true.

function turnSwitchOff() {
  if (isSwitchOn == true) {
    isSwitchOn = false;
  }
  turnSwitchOff();
}

turnSwitchOff();

The role of the creepy arm

We have to notate here that computers and machines have no nuance. They just do what they are told and they do it very fast. This arm doesn't know that is being annoying. It just knows that it has to turn the switch OFF.

S1 = OFF, S2 = ON

In the scheme of Automata Theory, The Useless Machine would be considered between a Finite-state machine and a Pushdown automaton.
A Finite State machine can be switched from S1 "State 1" (OFF in our example) to S2 "State 2" (ON in our example). What is interesting about The Useless Machine is that it can switch itself back from S2 "State 2" to S1 "State 1" on it's own.

Automata Theory	Description
Combinational logic	The ability to hold boolean values like `TRUE` and `FALSE`. In our case is `ON` and `OFF`.
Finite-state machine	A machine that can be switched from 2 or more states. A door could fit this category. With a key you can switch the state from open to close and vice versa. In our case we can turn the switch from `ON`/`S2` to `OFF`/`S1`.
Pushdown Automaton	A machine that can create a top down chain reaction of states. A mechanical calculator fits this category it is complex yet still limited in the calculations it can make. The Useless Machine in theory creates a chain but it does not move further as it doesn't have other states to change but itself but going from `ON`/`S1` state to `OFF`/`S2` state.
Turing Machine	A machine that can make complex calculations and changes states. A modern computer is a Turning Machine. The Useless Machine is not even close to a Turing machine but thanks for sticking around.

Final Thought

I wanted to show that even such a simple machine can teach us so much about computation. For me as a self-taught software developer it is very important to have strong visual metaphors to ground your knowledge.

I hope you found this article interesting to read. Please feel free to comment or reach out if you

Understanding Events in Javascript

Taulant Sulko — Fri, 07 Feb 2020 19:01:24 +0000

Been doing a Javascript refresher lately and I am finally getting a good understanding of what the addEventListener() method does. Most human interactions in Javascript are tracked by these Events. Understanding the Event Listener is key to designing interactions with JS.

What are we listening to?

Let's say you want to listen to events on the button below.

<button id="button">Click Me</button>

How are we selecting the element?

First you need to select the button in our javascript code. In this example below we are doing it with the getELementById() selector.

var button = document.getELementById("button");

How are we listening to the element?

Now that we have the button contained in a variable we can use the addEventListener method to start listening to those events. We want to know when it is was clicked.

button.addEventListener();

This won't return anything yet. It's missing 2 arguments.

button.addEventListener("click", function(e) {console.log(e);});

This is the part that always seemed a bit unclear to me. What is "click"? What is function(e)? How do they relate to each other?

Let's break it down.

"click"

This is called the Event Type. This is probably the simplest one to understand. In this scenario we are waiting for a click to happen on the button element.

Other event types: onlclick, onmouseenter, onmouseleave, onmouseout, onmouseover etc.

What happens when you "click"?

function(e) {console.log(e);}

The e here just returns the event object and also takes the event object as an argument.

The e (event object) contains information about the "click" that just happened.

The e holds a lot of information that can help us understand what happened.

function(e) {console.log(e.clientX, e.clientY);}

The code above will log the X and Y position of the mouse inside the browser when the click happened.

Here is a way to test this right away in your browser console. Copy & Paste the code below and start clicking on the browser screen.

document.addEventListener("click", function(e) {console.log(e);});

Event objects in the console.log

Here is a screenshot of the above line in the browser console.

Notice how a unique event object is created for each time a "click" is registered.

Properties of a MouseEvent

As you can see there is a lot of hidden information in just one click. The MouseEvent object makes this information accessible.

isTrusted: true
screenX: 390
screenY: 567
clientX: 368
clientY: 433
ctrlKey: false
shiftKey: false
altKey: false
metaKey: false
button: 0
buttons: 0
relatedTarget: null
pageX: 368
pageY: 433
x: 368
y: 433
offsetX: 361
offsetY: 308
movementX: 0
movementY: 0
fromElement: null
toElement: body
layerX: 368
layerY: 433
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
detail: 1
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
which: 1
type: "click"
target: body
currentTarget: null
eventPhase: 0
bubbles: true
cancelable: true
defaultPrevented: false
composed: true
timeStamp: 8990.880000055768
srcElement: body
returnValue: true
cancelBubble: false

Hope you enjoyed the read. ✌️