DEV Community: Bradley Black

GitHub Actions: Rise of the Machines (Automating CI, Workflow, and More on Your Favorite Open Source Platform)

Bradley Black — Fri, 21 May 2021 22:22:19 +0000

There’s good reason for Github’s ubiquity in the world of development. Its open source structure reflects what’s best about the web: free, accessible, and communal. It’s a habitat for tech giants like Facebook and rogue bands of hackers alike. Curious developers can dive deep into source code, point out bugs and suggestions, and fork public repositories to version things as they see fit. Of course, the way Github sits within the larger world of app development and publication is fairly patterned. Projects born on Github eventually move into a production environment or are published to a platform like NPM. To simplify this process, there’s Github Actions.

Github Actions is a range of automation services for increasing the functional breadth of your codebase. Developers can identify a specific workflow that is repetitive or time consuming and design a way to automate the process. Think of a Github Action as an event listener for a repo. If a specific action is taken, then the specified reaction occurs.

These actions and reactions are laid out in a YAML file, but first the user must specify a new workflow. This process begins under the Actions tab on a repo’s main page. Here a list of popular template workflows are available. Developers can also simply build a workflow from scratch. Whether a custom workflow is selected or a template, Github will launch a new YAML file nested in a .github/ folder in the main project directory. A YAML file takes on the following format:

name: learn-github-actions
on: [push]
jobs:
  runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
      - run: npm install -g bats
      - run: bats -v

Some of the basic commands/features of a Github Actions YAML are as follows:

Name: an optional attribute for IDing the action
On: this is the action you’re listening for. It can be a merge, a feature request, bug report, or any interaction that takes place with a repo or within an organization
Jobs: the list of commands to execute when an On event is triggered.
Runs-On: establishes the type of virtual machine Github will use to execute the following commands.
Steps: this is a sequence of actions to work through sequentially
Run: an executable command for the virtual machine terminal

The most common usage of Github Actions is continuous integration, but there are several other popular uses. In addition to publishing libraries to NPM or Github Packages, Github offers template Actions for deployment. To achieve complex tasks, Github publishes a number of popular workflows developers can use. Think of these as dependencies for a specific action. The checkout action, for example, does exactly what it says. It pulls a specified repository or branch into the virtual machine for the steps that follow.

This open source approach to some of the more tedious aspects of app development can really simplify the software development and deployment process. Github Actions is capable of deploying on all major platforms, and, because of the use of virtual machines, can be utilized for practically any language or configuration necessary. If a project already lives on Github, configuring automations with Actions couldn’t be easier.

Command Line Deployment with Terraform

Bradley Black — Mon, 10 May 2021 18:22:07 +0000

Terraform is an infrastructure as code (IaC) service that greatly reduces the complexity faced by developers during deployment. Developers want great agility when choosing platforms. Typically with deployment, a platform will play nicely with other in-house tech, and less so with the services of competitors. Of course, great software shouldn’t be guided by what a platform's maker deems convenient or inconvenient.

What’s the solution? First, it would be beneficial to use a service that minimizes interactions with these platforms, and gives developers direct access to the resources themselves (an AWS EC2, for example). The service should also minimize discrepancies in how developers interact with each company's products. Many of the differences platform to platform amount to proprietary flare. Product A and B will have different terminology and UI, but ultimately the tools offered are quite similar. Whether it be Azure, AWS, or GCP, there should be no need to become too deeply rooted in one offering or another. By bringing deployment away from these platforms and to the command line, Terraform allows developers to focus their energy where it ought to be: devising the best possible deployment strategy for their application.

A Declarative Approach to Infrastructure

The declarative nature of Terraform takes shape in the Terraform config file. Here, programmers simply list out the technologies and configurations they require.

You’ll notice there are no execution commands, simply a declaration of what to use. Terraform reduces complexity by internally formulating a plan that will bring a developer’s request to fruition. There’s no need to define step by step instructions. This is beneficial when first sketching out the framework of a project. It’s also beneficial when creating copies of frameworks for development, staging, and production.

Most importantly, It simplifies the process of modifying a framework. This is revealed in how Terraform is designed. The Terraform core accepts two arguments: the project state and the config file. If there are differences between the two, Terraform will devise a strategy to bring them into harmony. This means developers don’t need to spend time on breaking down existing infrastructure to improve configuration. It also means less code, as new strategies will simply take the place of old strategies in the config file.

Interacting with the Terraform Core

The 5 basic commands for Terraform are as follows:
Init: initialize a directory as a Terraform project
Validate- check the contents of the config file for validity, and clarify any changes that need to be made
Plan - print the step-by-step strategy Terraform can execute to bridge the gap between the desired configuration and current program state
Apply- this is the command to execute the plan devised by the previous command.
Destroy- shut down an infrastructure in the proper order

To see these commands in action, first create a project directory and create a main.tf file to serve as your config:

provider "aws" {
    region = "us-east-1"
}

resource "aws_instance" "ec2main" {
    ami = "ami-example"
    instance_type = "t2.micro"
}

As you can see, this declarative syntax simply lists the provider of a resource (AWS, in this case), and the resource needed (an ec2 instance). By running $terraform init, a terraform lock file will be created, and any dependencies will be downloaded. Now, running $terraform validate will check the contents of the config file to determine if it can be executed. If there are no issues, run $terraform plan to see the outcome of executing the config file. Finally, $terraform apply will put the Terraform core into action. It will communicate directly with the provider (AWS) to get the resource requested, and, if successful, bring the status of your project into state.

Often with deployment, the proprietary quirks of each platform can make for some unwanted concessions. Either use a platform with which you’re already familiar, or spend time learning to navigate an unfamiliar interface. Terraform sees these platforms as what they are: providers and resources. With infrastructure as code services like Terraform, testing different strategies, trying new technologies, and tuning a deployment approach is a much smoother process.

Improving Accessibility with Voice Control and Voice Access

Bradley Black — Mon, 10 May 2021 02:35:21 +0000

The shift towards phones and tablets, and away from desktops and laptops, greatly informs web design in 2021. The web must accommodate visitors on a wide variety of devices. This has led to uncluttered design, larger buttons and text, and a clearer navigation system. There’s also the requirement that websites be navigable with a variety of input sources: mouse, keyboard, touch, voice, etc. While these developments are for the benefit of all users, they’re especially accommodating for users with disabilities.

The World Wide Web consortium (W3C) issues a set of recommendations for design known as the Web Content Accessibility Guidelines (WCAG). Last updated in 2018, the previous update occurred in 2008. That was around the invention of the smartphone. It’s always true that technology changes so rapidly that regulations and standardizing or practice don’t follow until much later. So while the recent WCAG offers a good framework for designing for disability, they don’t mention some of the more powerful tools available that accommodate users with disabilities It is still important to consider these four key features of accessible design:
Perceivable (example: alternate text for non-text content)
Operable (example: complete keyboard accessibility)
Understandable (feedback from DOM, clarifying suggestions)
Robust (usable on a wide range of devices)

15% of people have a disability that may affect their ability to use the web. Included in this 15% are users with motor function impairment. For users who cannot operate a mouse, keyboard, or touchscreen, voice navigation has emerged as a powerful tool.

Apple’s Voice Control (for iOS and OS) and Google’s Voice Access (for Android) offer a nearly identical palette of tools for users. The goal is to break down the DOM for fast, fluid interaction by voice. This can be done by listing operable aspects of a page by name, by assigning a number, or by locating them on a grid.

After turning on Voice Control or Voice Access, a user can reveal names of buttons, text fields, and interactive elements by saying “show names” (VC) or “show labels” (VA):

support.apple.com

To navigate, the user simply then has to speak the name/label of the feature. Similarly, “show numbers” on both platforms will assign a number command to each page element:

support.apple.com

For certain applications, and for websites/apps that won’t compile names/numbers correctly, the “show grid” command is helpful:

support.apple.com

If a clickable element exists on one of the grids, the command “double click 15”, for example, would be a way to progress through a site.

When developing for iOS, programmers are required to acknowledge the necessities of accessible design. It makes sense that Apple, with a great deal of lateral power due to its grip on mobile development, can then push accessible development further than an organization like the W3C. Regardless of the platform, all developers should consider the accessibility of their applications and strive to make the web as welcoming as possible.

Supercollider: Putting a Synth on a Server

Bradley Black — Tue, 27 Apr 2021 05:54:16 +0000

supercollider

Just as it is a powerful tool for communication and collaboration in all mediums, the web can be a framework for creating music. This is largely due to server architecture. Musicians have long relied on a single source of truth when composing and collaborating. Often this is simply the physical space they share, but servers and the web allow players to bridge distances and work collectively in a similar fashion.

Supercollider is a language and platform for music creation that builds on a client-server relationship. For Supercollider, any user, or input source, takes on the roll of the client. The server is the synth engine itself. This structure has several key benefits:

Clients can take on any number of forms (humans, algorithms, other)
Clients can be of any number
Multiple clients can simultaneously engage with a single server

osc

Supercollider uses OSC to transmit data between client and server. As a result, any client capable of producing OSC messages can join in. OSC is somewhat of a successor to MIDI. The benefit of OSC is that its 32-bit format offers much richer, detailed, performance data over Midi, which is only 8-bit. In modern music practice, one is often transpiled to the other. While MIDI still holds a place in the field, and physical MIDi ports continue to be implemented in music equipment, OSC has proven to be an incredibly versatile language that musicians without a great deal of programming knowledge can use.

sclang

One large aspect of the Supercollider experience is the coding environment. The client runs on a native language called sclang. C and C++ programmers, and even Javascript programmers like myself, will find the code simple to understand and implement. It is object-oriented in nature, and uses a library of built-in classes for the majority of its functionality.

(
play(
    {
        var f;
        f = MouseY.kr(4000, 200, 'exponential', 0.8);
        SinOsc.ar(
            freq: f+ (f*SinOsc.ar(7,0,0.02)),
            mul: MouseX.kr(0, 0.9)
        )
    }
)
)

Here you can see the MouseY, SinOsc, and MouseX classes being invoked. They all have access to ar and kr methods, which are audio rate and control rate, respectively. The variable f is invoked to store whatever Y value is currently held by a mouse or trackpad. It is then combined with an LFO for musicality, combined with the X value of the mouse for amplitude, and these signals are combined to generate a specific pitch by a sine wave oscillator.

scsynth

Interaction with a Supercollider server is done with the command line using native scsynth language. These commands are used to dictate the behavior of audio busses, nodes, and synths:

scscynth -u 57117 >synth_log & scsynth -N score.osc _ out.aiff 48000 AIFF int24

This chain instructs a synth what port to use (57117), where to log output info, what file to read for osc instructions, and what sample rate and bitrate to use.

quarks

Javascript uses the npm package manager to empower coders to build and download tools and libraries for their projects. Similarly, Supercollider users quarks. Quarks are hosted on github, and can be implemented with the Quarks class:

Quarks.gui //launches an interface for the entire quarks library
Quarks.install(/*quark name here*/)
    Quarks.uninstall(/*quark you no longer need*/)

summary

The open-source and server-based approach to music making is what appeals most to be about Supercollider. Although it’s more exclusive to programmers than languages like Max/MSP or Pure Data, the ability to build instruments, controllers, and networks from the ground up opens up an endless number of paths for creative pursuits.

Swift and the Evolution of Modern Programming Languages

Bradley Black — Tue, 20 Apr 2021 02:40:57 +0000

In the modern tech world, there’s significant overlap among the key players. Google and Apple, for example, develop augmented reality technologies side-by-side. In fact, they share an AR API of the same name. However, instead of consolidating around this shared interest, a competition emerges. This approach can absolutely lead to great tech, but it creates a conundrum for developers. Big tech firms tend to frame their breakthroughs within their product ecosystem, and devote fewer resources to cross-platform support. As a result, developers who want the agility to work across all tech platforms often find themselves in a bind. One step towards Google, or Microsoft, is a step taken away From Apple, or vice versa.

Meanwhile, an interesting thing tends to happen to incumbent technology. Its creators become tasked with its maintenance and upkeep, and can focus less on innovation. Meanwhile, competing companies looking for a greater foothold have to push exciting ideas into the marketplace to compete. Inevitably, this dynamic swings interest away from the incumbent and they are forced to reconcile their out-moded approach with new demands. One example of this is Apple’s Swift programming language.

Swift aims to bridge the gap between Apple’s keystone Objective-C language and popular scripting languages like Javascript and Typescript. Objective-C’s run began in the 1980’s, and in 2014 Apple decided it was time to begin its inevitable phase out.

Like Javascript and Typescript, the code is structured in a way that reads naturally. Of course, there’s no shortage of proprietary flourishes to distinguish it from its competitors. But the structural similarities are clear.

Syntax

In Javascript, const and let lend different types of functionality to variables. In Swift, there is no const, and the variable let is actually more similar to the Javascript const. The only difference is its value can be declared after initialization.

Swift

Let greeting
Greeting = ‘hello world’
//cannot be changed

Javascript

Let greeting = ‘hello world’
Greeting = ‘new greeting’
//can be reassigned

String literals in Javascript and Typescript rely on backticks to create a string that can interpret variables. In Swift, this process is accomplished with a ‘\’ escape character followed by the variable name in parenthesis.

Swift

Let timelyGreeting = “Good \(timeOfDay)!”

Javascript

Let timelyGreeting = `Good ${timeOfDay}!`

Arrays in Swift and Javascript are identical

Var colors = [“red”, “green”, “blue”]
Colors[3] = “orange”
//valid in both Swift and Javascript!

Summary

This is just a brief exploration of the reasons for Swift’s recent rise in popularity and the way the language interprets to Javascript and Typescript.

Fixing Your Dependency Issues w/ Docker

Bradley Black — Mon, 15 Mar 2021 07:06:56 +0000

Great software relies on other programs to do much of the heavy lifting. Utilizing node libraries, database management services, and APIs makes for apps that require interconnectivity between a number of very powerful components.

The modular nature of these services allows developers to build tech-stacks with great experimentation and speed. This web of dependencies becomes as critical to an application's success as the code itself. However, dependencies pose a challenge when a program is passed between different machines, with different versions of libraries, and different hardware, and different network settings, etc etc.

All these unique factors that comprise a coding environment can lead to programs that run smoothly in certain settings and crash and burn in others. Ultimately, there's no certainty to how a program's dependencies will perform outside of the initial coding environment. And when there are issues, the debugging process can be quite time-consuming and frustrating. One tool to combat this is known as containerization.

Getting to Know Containers

Containers are a means for lightweight software virtualization. Their popularity is an acknowledgement that dependency libraries are foundational building blocks of modern apps. Containers are airtight coding environments. They include code, dependencies, and all necessary configuration information to successfully launch a program. Since containers are self-contained, they're also super portable, and they offer a much needed solution to the complexity created by dependencies.

Docker Containers, Images, and Registries

Docker is one of the most popular container platforms. There are three keys to the Docker system:

Containers- Containers are isolated live development environments. They are a virtualization of the host operating system. While similar to traditional virtual machines, containers utilize the host's operating system instead of launching complete, and heavy, isolated operating systems for every guest.
Images- An image is a container in a static, read-only state. Images are easily transferable, and can be uploaded to a registry, stored locally, or shared with others in a development team. These files are multi-layered and comprise all the instructions required to launch a container.
Registry- An archive of images. Docker offers a public library where programmers can publish their images and download the work of others.

Getting Started

Docker can be run directly from a terminal via the command line. There is also a stand-alone desktop application. Each gives programmers access to local and online libraries of images from which they can create new containers.

The docker daemon is the workhorse of the docker engine. Interactions with either the command line or desktop application kick the daemon into action. The daemon takes on the tasks of packaging containers into images, image manipulation, and image management. A restful API resides between the client and the daemon, as part of the daemon's responsibilities are uploading and pulling images from remote locations.

Once installed, running docker is as simple as launching any other program in a bash terminal. For example, if you're launching from a mac, you can create a Linux container by running the following command:

docker run -it ubuntu bash
Unable to find image 'ubuntu:latest' locally
latest: Pulling from library/ubuntu
Digest: sha256:b4f9e18267eb98998f6130342baacaeb9553f136142d40959a1b46d6401f0f2b
Status: Downloaded newer image for ubuntu:latest
root@f37912e87219

Welcome to the command line of your new Ubuntu container, which has been launched from a now locally stored Ubuntu image. Following in the terminal, you can see how this process begins with the daemon looking locally for the image you've requested. If it's not there, it will pull it from the docker registry. The container ID for this instance is listed in the command line. Running multiple ubuntu containers in multiple terminals is as simple as running the same command, but now they will launch from the image file stored locally to your machine. Each container will have a unique ID and a random name generated as a courtesy, as you can see using the list container command:

docker container ls --all
CONTAINER ID   IMAGE     COMMAND       CREATED          STATUS                        PORTS     NAMES
fb7481161193   ubuntu    "bash"        5 minutes ago    Exited (0) 12 seconds ago               sweet_northcutt
40fefcb85c40   ubuntu    "/bin/bash"   5 minutes ago    Exited (0) 5 minutes ago                hardcore_thompson
f37912e87219   ubuntu    "bash"        12 minutes ago   Exited (130) 12 minutes ago             wizardly_agnesi
2000232fa0cf   ubuntu    "bash"        15 minutes ago   Exited (0) 15 minutes ago               recursing_shtern
127e12f73185   ubuntu    "bash"        16 minutes ago   Exited (0) 15 minutes ago               frosty_torvalds

Summary

The speed and ease at which a programmer can access and share fully realized development environments is why containerization has become a standard practice in professional development. Docker makes quick work of dependency management, and frees programmers from the tedium of resolving why a build works on one machine but not others.

Classes or Hooks: Managing State in React

Bradley Black — Mon, 08 Mar 2021 05:59:35 +0000

When learning to program with the React Javascript library, a central theme begins to emerge: dynamism with stability and simplicity. Modern applications are built for interaction. So much so that programs feel less like lines of code and more like living organisms. This is a useful lens for viewing React’s architecture. Like living things, React has centralized higher-level logic and functionality. One of the key pieces of this centralized structure is known as state.

State is used to maintain all the parts of an application that have dynamic potential. Elements in the DOM are mere sensory triggers that relay user behavior and display information dictated by state. So how does one interact with their application’s state?

Prior to the release of React 16.8, state was a feature exclusive to class components. Class components, unlike their functional counterparts, could access state on the React component constructor method. However, 16.8 now allows developers to utilize state in functional components as well. This is done with a set of methods totally distinct from those used by classes. It’s important to remember that these methods are exclusive to each type of component! In other words, it’s impossible to implement class state methods on functional components, and vice versa.

Structure of State

Not only are the class and functional state methods distinct, the structure of state itself is unique to each component. For class components, state is an object. The state object’s keys represent dynamic elements in an application, and the values of these keys reflect the current state of each element.

When accessing state in functional components, you bypass this object structure and engage with the values directly. Values held in state are simply assigned to a variable, and through a unique function that couples closely to the variable, its value can be manipulated.

setState of Class Components

Setting/changing state of class components is accomplished with the following syntax:

class Pizza extends React.Component {
  constructor(props) {`
    super(props);
    this.state = {
      customer: '',
      size: '',
      toppings: [],
      count: 0,
    };
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange() {
    this.setState({
      customer: 'Isidro',
      size: 'medium',
      toppings: ['spinach', 'musrooms', 'onions', 'garlic'],
      count: this.prevState.count + 1
    })
  }
}

For this example, the values in the handleChange method have been hard-coded for simplicity. The setState method must return an object. The object will reference a key that has been added to state, and it will reassign the state value to the one being returned. Conveniently, a return object that only contains a single key/value pair will not cause other key/values in state to be removed. Only the key returned by the setState method will be affected.

In a situation where the current value of state must be accessed to properly reassign state (represented in this example by the customer’s customerLoyaltyCount), prevState is passed into setState as an argument, and all state properties can be referenced on the prevState object.

To summarize class components: a key/value is initialized on the this.state object, and it is manipulated with the setState method.

useState of Functional Components

Functional components acknowledge state with es6 destructuring syntax and the useState method:

function Pizza() {
  const [customer, setCustomer] = useState('')
  const [size, setSize] = useState('')
  const [toppings, setToppings] = useState([])
  const [count, setCount] = useState(0)

  const handleChange= () => {
    setCustomer('Isidro')
    setSize('medium')
    setToppings(['spinach', 'musrooms', 'onions', 'garlic'])
    setCount(count + 1)
  }
}

useState initializes a property to state. The argument provided sets the initial state value. It returns a tupple with the state value at index 0 and a function to alter this value at index 1. Destructuring allows programmers to assign this value/function pair to unique variable names. So, instead of using setState to access state, and then specifying the property that needs to be changed, one simply calls the named function that achieves this result.

Summary

Adding state to functional components has given developers an alternate way to add interactivity though React. Also, because functional components don’t utilize constructors or bindings, the syntax is much cleaner than that of class components. This exemplifies how React aims to simplify and super-charge the tools programmers use to make modern applications.

SQL and NoSQL Data structures

Bradley Black — Mon, 01 Mar 2021 05:34:30 +0000

For every benefit of a data structure, there will be some tradeoff. Consider cooking: say you want to prepare a meal that is cheap, fast, and delicious. You realize that you’ll only ever be able to achieve two of these qualities. So, then, it’s about ordering your priorities. And your priorities for a weeknight meal will differ from meal planning on the weekend. The same give and take is true of databases. Any application will have unique data storage priorities. These priorities are largely outlined by the CAP theorem:

C: Consistency
A: Availability
P: Partition Tolerance

Imagine these qualities as a triangle, and a given database resides on one of the triangle’s vectors.

SQL would reside on the vector between consistency and availability. NoSQL would reside between Availability and Partition Tolerance. Choosing which data storage type is right for an application means choosing the greatest priority, and understanding it will come at the expense of a lower priority.

SQL

SQL has been in practice for over two decades, and takes advantage of a relational format that increases durability and safeguards data. Data in one table can reference data from another table using keys. For deeply structured data (think anything that can cleanly be represented on an Excel spreadsheet), MySQL creates a powerful interconnected web of data that is ideal for advanced analytics. Structured Query Language is also programmer friendly. The highly structured format makes easy work of iterating through a table, filtering data, or joining data into a single collection.

For large data systems, the table-based architecture exemplified here simply scales upwards.

NoSQL

As storage needs have tilted due to the sheer volume of data collected and utilized in applications, availability and accessibility of storage have become a priority. This is where MongoDB and other NoSQL database systems thrive. By using an unstructured format, any type of data, and importantly, varying volumes of data, can easily be stored. Unstructured storage is also the optimum format for data that might not currently have much utility in a program, but could be useful in the future.

MongoDB stores data in the JSON format. JSON, or Javascript Object Notation, utilizes a key value system that is less rigid than the table system used by SQL databases. JSON’s ubiquity makes the process of formatting data for storage in MongoDB fairly straightforward.

It's important to note that there are a variety of options for adding advanced analytics functionality to MongoDB. While these methods won't be native to MongoDB as they are to MySQL, they offer programmers the opportunity to capture some of the functionality of structured databases.

Summary

To summarize, structured data storage like SQL is ideal for applications where advanced analytics are required. On the other hand, NoSQL databases like MongoDB allow programmers greater flexibility for data that is difficult to structure. MongoDB also utilizes the popular JSON format.

Unit Testing with Sinon Spies

Bradley Black — Mon, 22 Feb 2021 08:02:52 +0000

Unit Testing

Unit testing is a key tool for auditing, troubleshooting, and maintaining code. The basic principle of a unit test is that it runs on code that is locally available, and it doesn’t create side-effects.

APIs, databases, and other components outside of a coder’s control can complicate the troubleshooting process. That’s where unit testing comes in handy. When unit testing, programmers can emulate the behavior of these components with stand-ins . Not only can these stand-ins emulate the behavior of other parts of a program, they can also provide valuable feedback on how a program is running.

Sinon Spies

Sinon’s library of modules and methods provide programmers with tools to write powerful unit tests. One of these tools is spies. The functionality of Sinon spies lines up well with the definition of spy. IRL spies covertly collect and report information on a given target’s activities, movements, and plans. This isn’t far off from the behavior of a Sinon spy.

Spies wrap around existing functions, and mimic their functionality. They can also be used as an anonymous function, and, say, be fed into another function as its argument. The benefit of these practices is revealed when looking through the spy’s methods:

alwaysCalledOn: ƒ ()
alwaysCalledWith: ƒ ()
alwaysCalledWithExactly: ƒ ()
alwaysCalledWithMatch: ƒ ()
alwaysCalledWithNew: ƒ ()
alwaysReturned: ƒ ()
alwaysThrew: ƒ ()
callArg: ƒ ()
callArgOn: ƒ ()
callArgOnWith: ƒ ()
callArgWith: ƒ ()
calledAfter: ƒ (l)
calledBefore: ƒ (l)
calledImmediatelyAfter: ƒ (l)
calledImmediatelyBefore: ƒ (l)
calledOn: ƒ ()
calledWith: ƒ ()
calledWithExactly: ƒ ()
calledWithMatch: ƒ ()
calledWithNew: ƒ ()
create: ƒ (l,n)
formatters: {c: ƒ, n: ƒ, D: ƒ, C: ƒ, t: ƒ, …}
getCall: ƒ (l)
getCalls: ƒ ()
invoke: ƒ (l,n,u)
invokeCallback: ƒ ()
matches: ƒ (l,n)
matchingFakes: ƒ (l,n)
named: ƒ (l)
neverCalledWith: ƒ ()
neverCalledWithMatch: ƒ ()
printf: ƒ (l)
reset: ƒ ()
returned: ƒ ()
spyCall: ƒ ()
threw: ƒ ()
throwArg: ƒ ()
withArgs: ƒ ()
yield: ƒ ()
yieldOn: ƒ ()
yieldTo: ƒ ()
yieldToOn: ƒ ()

As you can see, the spy is set up to reveal information relevant to a function’s behavior. For example, coders can use these methods to:

Count the number of times a function is called
Record the order in which functions execute
Record arguments that are passed into a function
Store a function's output on a specified call

Code Example

The function uniqueCall should accept array and callback parameters. Also, if the array includes duplicate values, the callback function should only run on those values which are unique.

const uniqueCall = (array, callback) => {

}

let array1 = [1, 2, 2, 3]
let spy1 = sinon.spy()

An array with a duplicate value, and a Sinon spy have been initialized. The spy can be used in place of any function. In this instance, it will be given to the uniqueCall function as an argument.

const uniqueCall = (array, callback) => {
    array.forEach(value => {
            callback(value)
    })
}

let array1 = [1, 2, 2, 3]
let spy1 = sinon.spy()
uniqueCall(array1, spy1)

A v1 of uniqueCall has been implemented. The callCount method can be called on spy1 to see if the function’s behavior matches expectations:

> spy1.callCount
< 4

Since this isn’t the expected result, a v2 of uniqueCall will need to be implemented:

const uniqueCall = (array, callback) => {
    const calledValues = [];
    array.forEach(value => {
        if (!calledValues.includes(value)) {
            calledValues.push(value)
            callback(value)
        }
    })
}

let array1 = [1, 2, 2, 3]
let spy1 = sinon.spy()
uniqueCall(array1, spy1)

> spy1.callCount
< 3

This is a fairly simple example of how spies and their methods can be utilized for testing. When used to debug and optimize code, Sinon gives programmers valuable feedback so they can quickly make necessary changes.

Javascript Prototypes DIY

Bradley Black — Wed, 20 Jan 2021 22:01:58 +0000

What Are Prototypes?

Javascript prototypes scale up to the global level, and down to individual objects and elements coded into an environment. Global prototypes that come native to JS simply append to this object-oriented structure. Of course, coders can build upon this existing structure with their own prototypes.

So what are prototypes, and why use them?

Prototype methods are functionally the same as non-prototype methods, but, in most cases, prototype methods are the more efficient option. This is because non-prototype methods are copied within every instance of that datatype. The result is higher memory usage.

On the other hand, prototypes are stored as a single instance, thus taking up less memory.

The question of whether or not to use prototypes hinges on how frequently they’ll be accessed. If your method will only be used sporadically, then a prototype is probably the best bet. The native methods of JS also adhere to this approach.

These are (some of) the non-prototype methods for arrays:

And here are (some of) the prototypes:

Thinking Globally

In every JS environment, the global Object reigns, and all other complex data types inherit its prototypes. These complex data types themselves are objects, and they have access to their own set of methods and prototypes.

To see this in action, enter Object.prototype in the Dev Tools console.

For the global Window object, or any new objects that are created, these prototypes are available.

Now check the global Array prototypes by entering Array.prototypes. You’ll see a set of functions stored under the “proto” label.

Look familiar? You can see how the Array object has inherited all of the global Object’s prototypes. Notice these prototype methods are actually all functions. Also, notice how the functions have access to their own folder of global function prototypes.

Prototype DIY

Understanding this, you can see the functional symmetry between global objects and objects you code into a JS environment. Array methods and prototype methods are simply key/value pairs assigned to the global Array object, and, since they’re stored globally, any arrays you create will be able to access them.

Now we can, say, create a printMoney method that translates any array into dollar signs, and make it globally available for all arrays: