DEV Community: Stephen Nelson

react-music: An Audio Programming Sandbox

Stephen Nelson — Mon, 01 Jan 2024 18:07:12 +0000

As a musician studying software development, I have been fortunate to research and discover some interesting resources available for building DAWs and sandboxes with the sole purpose of building audio through the browser. While most of these resources are focused on capturing audio and video from the user's microphone and camera, there are some sandboxes, or developer playgrounds, readily available for curious programmers such as myself to dive into understanding different and effective approaches to building out these sandboxes.

One such resource is known as react-music, and while this is not a library, I find that it is a helpful tool in building that understanding as previously mentioned. Not only is this repository open-source and free, it is also built out with a demonstration of what is capable of being constructed with the Web Audio API. If you are unfamiliar with this browser built-in tool, I highly recommend clicking on the link below and discover what this API is capable of. If you are familiar, then let's move on to discussing react-music and how it can help develop more intuitive audio programming.

Web Audio API

So what is react-music?

React-music at its core is an open-source and free repository available for cloning, editing, and sandboxing with web browser audio. Released to the public in 2016, this repository was designed to present intuitive and well-structured audio programming through the use of the Web Audio API and React.js, if the name did not make that part obvious. Surprisingly I found this repository's main dependencies are not audio related, mostly react dependencies such as react-dom and react-router-dom. The only library imported for audio programming is tunajs, which is a JavaScript library built on top of Web Audio API to help alleviate some of the potentially complex workflow and helps developers understand web audio without having to focus too much on unfamiliar terminology that can potentially disrupt the focus on the programming itself.

As you read through the files, you will find that the components are designed with an established hierarchy that provides abstraction from the complexities of building out the DAW starting from the Song component to the Sequencer component and on to the instruments and the filters these instruments can be chained and processed through.

So what does that look like? Thankfully the developers provide an example ready to play back a sample that can either be edited or built from scratch with the pre-built components.

Syntax and Structure

Starting out

Before getting started, you will need to clone the repository into your local environment and then run the install command to obtain access.

npm install react-music

Keep in mind the components exist in different files and must be imported in order to access their functionality.

// for example
import {Song, Sequencer, Synth} from '../src';

Root structure

Next you will notice the Song component which acts as the controller for the entire beat or music excerpt you wish to program.

<Song tempo={120}>
</Song>

What is important to understand with the tempo property is that this dictates the speed at which the music will play and this can be edited to your preference. Tempo, in music, simply refers to beats per minute and in the above snippet I have it set to 120 which will play 120 beats per minute which is a standard starting point for most writing processes.

Now that we have our backbone established, next in the hierarchy chain is the Sequencer which takes in two props, resolution and bars. Resolution simply refers to the number of steps provided in the sequence array where musical notes can be specifically placed and bars indicates how many times the sequencer will play before it loops.

<Song tempo={120}>
  <Sequencer resolution={16} bars={1}>
  </Sequencer>
</Song>

Adding instruments

With the Song and Sequencer components in place, we are now able to add instruments and samples into our song to actually create audio to play back. One of the more common examples is the Synth component which is used to create an oscillator and is designed to play within the steps provided by the Sequencer component's resolution prop. The type prop refers to the type of audio wave played by the synth. There are four options such as: sine, square, triangle, and sawtooth. The specified notes can either be a single pitch played or an array of pitches if a chord is desired. Also if you wish to specify the instrument's settings on how the note should be played, the envelope prop gives the developer access to those features.

Keep in mind that other synth instruments such as Monosynth can only play one note at a time so depending on the harmonic structure you desire, this should help you make decisions on how you want your music to sound.

<Song tempo={120}>
  <Sequencer resolution={16} bars={2}>
    <Synth
      type="triangle"
      steps={[
        // [ step, duration, note || [notes] ]
        [0, 4, "c4"],
        [6, 2, ["f4", "a4", "c5"]]
      ]}
      envelope={{
        attack: 0.1,
        sustain: 0.3,
        decay: 20,
        release: 0.5
      }}
    </Synth>
  </Sequencer>
</Song>

Effects

Assuming you want to chain your instrument through effects, react-music has refined effect components that behave similarly to the effect nodes found in the Web Audio API. The difference being the terms used to describe the audio effects in react-music are more straight forward and structured using those basic effect nodes.

The effects provided in the repository are Bitcrusher, Chorus, Compressor, Delay, Filter, Gain, Moogfilter, Overdrive, PingPong, and Reverb. For the sake of the blog, I'll provide an example of using just a couple of these filters. Keep in mind these filters have their own unique effects and, when chained together, create interesting interactions producing creative results in the audio.

To utilize these effects, how you structure their relationships will affect the result of the audio's pitch and how it is played. This is where sandboxing with this repository becomes quite interesting as there are many combinations of these effects that can help developers create more unique results in their programmed music.

For example

<Song tempo={87}>
  <Sequencer resolution={16} bars={1}>
    <Compressor>
      <Reverb>
        <Synth
          type="square"
          steps={[
            [0, 2, "d#3"],
            [4, 4, "a#3"]
          ]}
        </Synth>
      </Reverb>
    </Compressor>
  </Sequencer>
</Song>

In the above snippet, I set the first effect in the chain to be a Compressor which reduces the audio signal's dynamic range to help maintain a consistent volume level and reverb for provides an an acoustic effect that smooths out the audio pitch in the form of "reflections" further creating a form of ambiance to the sound. The interesting experimentation for this could simply be switching the order of the two effects, or adding on to the effects chain and experimenting with that order for different outcomes.

The convenience of the name conventions for the instrument and effects components helps reduce the amount of time spent researching what filters and audio waves are and help developers understand the purpose these components serve in manipulating audio waves. All of this combined with basic music theory understanding paves the way for fun exploration of what is possible with audio construction and manipulation in the browser.

Conclusion

In conclusion, while this repository has not been updated in a while and web audio has advanced over the last few years, react-music is a helpful starting point in working towards understanding how to build a DAW in the web browser and general musical understanding. While this is a considerable pro with the code base, there isn't much flexibility with time signatures, only 4/4 is supported. However, there shouldn't be much need for time signature complexities when studying web browser audio. If you are interested in checking out react-music, I left the links below that walk you through the basics of adding on the existing example or the option of building out your own creation.

Resources

Wavesurfer.js

Stephen Nelson — Mon, 11 Dec 2023 13:22:10 +0000

When working on the latest feature I had to build, I was tasked with creating and saving audio in the browser through exploring the Web Audio API. As a result I was able to execute audio nodes in the MVP as well as manipulate the frequency to be saved to the database for my dev team's purposes. Ordinarily, I'd say I was satisfied, but just having audio with nothing to visualize it gave me this feeling like I could do something more with my MVP. As luck would have it, one of my teammates was already working on implementing wavesurfer.js which got me interested because I like to try and understand the technologies used by cohorts as much as I can. So I picked wavesurfer.js and decided to obtain a deeper understanding of it. So what is wavesurfer.js?

What is wavesurfer.js?

At its core, wavesurfer.js is an open-source audio visualization library that can be implemented to create interactive and customizable wave forms from decoded audio files. As noted in its name, wavesurfer is a a JavaScript library that is built on top of the Web Audio API and is mostly used in acoustic phonetics research. For reference, the Web Audio API allows developers to interact with web audio in the browser as it is built into the browser. In addition to web audio's support, HTML5 Audio provides additional assistance further expanding wavesurfer's flexibility.

The flexibility of wavesurfer.js allows it to run on most platforms such as Microsoft Windows, Mac OS X, Linux, and HP-UX due to being written Tcl/Tk. Basically Tk exists as a cross-platform widget toolkit that provides a library that consists of GUI (Graphic User Interface) widgets, which are simple elements used to build a GUI. For wavesurfer.js, Tcl/Tk uses the Snack Sound Toolkit which is another cross-platform library with bindings for the scripting languages, Tcl, Python, and Ruby. One of the main reasons for this architectural decision lies in SST's functionality that handles audio I/O, audio analysis, and processing. This allows wavesurfer.js the capacity for spectral analysis, pitch tracking, filtering, and displaying sound pressure waveforms.

These displays can render in various forms with customizable values that help developers build dynamic/interactive UIs for their applications or for researching audio and its visualization. But, what does this all look like and how can a developer retain access to the functions in this library and implement them?

Building a Waveform

Now that we've gone through a brief overview of wavesurfer.js and its architecture, let's explore the library and how to use it. Simply begin by importing the library into your file.

import WaveSurfer from 'wavesurfer.js';

Now that we have WaveSurfer imported in our file, we can create our first wavesurfer visualization.

const visualWave = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(204, 0, 255)',
  progressColor: 'rgb(0, 51, 0)',
  url: '/examples/audio/audio.wav',
  barGap: 3,
})

visualWave.on('click', () => {
  wavesurfer.play()
})

In the snippet above, I initialize a new instance of a waveform by invoking the .create() method and assigned some required properties to render the desired visualization. The container property establishes the HTML element that will contain the visualized waveform. The waveColor property is the initial color upon rendering and the progressColor property tracks the progress of the audio file's play through and shows you where you are in the recording. The url property contains the location of the audio file and the barGap property sets the space between each bar in pixels.

With these tools provided I was able to build my own waveform as seen below. The result of the code shows what I implemented and this can be done in the wavesurfer.js documentation. If you're curious then give it shot, the documentation will guide you to your desired result.

As you can see, this is just a basic implementation. However, the library contains more methods and functionality that can be utilized for more advanced uses. That being said, there are other features known as plugins that further enhance the flexibility of what developers can achieve. There are currently seven plugins that can be imported into your file which are: Regions, Timeline, Minimap, Envelope, Record, Spectrogram, and Hover. Listed with them are ways of importing them into you file. While they are part of the wavesurfer library, they are still "plugins" and need to be imported separately.

Regions

import Regions from 'wavesurfer.js/dist/plugins/regions.js';

Provides a visual overlay and markers for regions of the audio. By being able to drag the overlay across the wave, you can isolate smaller chunks of the audio to play back.

Timeline

import Timeline from 'wavesurfer.js/dist/plugins/timeline.js';

Displays "notches" and time tables below the waveform allowing you to keep track of the specific time frequencies occur.

Minimap

import Minimap from 'wavesurfer.js/dist/plugins/minimap.js';

A small waveform that serves as a scrollbar for the main waveform which is useful when the waveform is long and requires more navigation. Located beneath the main waveform

Envelope

import Envelope from 'wavesurfer.js/dist/plugins/envelope.js';

Provides a graphical interface that controls volume as well as fading the audio in and out.

Record

import Record from 'wavesurfer.js/dist/plugins/Record.js';

Records audio from the microphone and renders that audio as a waveform. This plugin is more in depth because of the added tasks of starting, stopping, and recording the audio in order to decode the audio's URL.

Spectrogram

import Spectrogram from 'wavesurfer.js/dist/plugins/spectrogram.js';

A visualization of an audio frequency spectrum. This renders a more graphical interface that relates the visualization of the spectrum of frequencies over time.

Hover

import Hover from 'wavesurfer.js/dist/plugins/hover.js';

Shows a vertical line and timestamp on waveform hover.

Pros/Cons

As with most, if not all, technologies, there can't be pros without the cons and vice versa. While wavesurfer.js has its strengths, there are some limitations and it's up to us developers to decide for or against importing into our projects.

Pros

For starters, the features and plugins nested in wavesurfer.js contribute a great deal to the library's flexibility. The waveforms generated can be given tools and properties for customization that provides more to the "wow" factor to the UI. As for UX, the methods and plugins contribute the necessary tools to developers for more dynamic and interactive audio based web applications. These experiences that can be provided to end users with audio interactions can fit comfortably in a social communication channel that prioritized audio over text. Lastly, which is perhaps the most important upside to wavesurfer.js is the efficient processes of decoding, processing, and analyzing audio files.

Cons

Speaking on audio files, there is a catch to this decoding process in that the audio files in question may fail if the audio file is large. This increases the risk of failing to decode due to memory constraints. Streaming audio isn't supported either because wavesurfer needs to download the entire audio file for decoding and rendering. The fact that wavesurfer decodes audio entirely in the browser with Web Audio, it's best practice to maintain interactions with smaller audio files. Lastly, even though the documentation is thorough and interactive, there is not much documentation that relates making research potentially more difficult if a developer is stuck.

Conclusion

Even though the documentation is lacking, the learning curve for wavesurfer.js isn't that steep and can be considered beginner to intermediate friendly. It seems the pros and cons evenly weigh each other in a fine balancing act depending on what you see as holding more weight on the scale. While wavesurfer.js doesn't have much recreational entertainment use cases currently as it does in acoustic phonetics research, it doesn't mean there can't be. This library will continue to expand and update as it is still relatively young. So who's to say someone like you or me won't come along and enhance this library?

Resources

Tone.js and the Web Audio API

Stephen Nelson — Mon, 27 Nov 2023 13:59:59 +0000

As a new developer going through bootcamp and a long time musician, I've had to make the decision to put music aside and focus on the study of software engineering. Needless to say, I miss music a great deal until the moment I can dive right back in. However, I stumbled across something that sparked great interest and gave me a taste of what I've been missing these last few months, music programming.

I recently discovered Tone.js and what it allows developers to accomplish and was inspired to look into Tone.js. I feel that I've only scratched the surface but through the study of the documentation, I was able to make sense of how this framework is laid out. With a basic knowledge of music theory, so can you! However, before we dive into Tone.js and what is has to offer, I must first discuss what built-in browser feature Tone.js enhances, the Web Audio API.

Web Audio API

So what is the Web Audio API? Before its existence, audio in webpages were still being supported, but not as efficiently with the modern web audio API. Starting in 2011, the first draft of a web audio API appeared in W3C, and since then several JavaScript libraries and frameworks have been built to assist developers in their implementation of this tool. It is a built-in browser tool that allows developers to process and synthesize audio operations in an audio context. The audio context mentioned is simply an object that contains everything related to web audio. This object in reference to web audio relations behaves as an interface that represents an audio-processing graph built from audio modules linked together.

A basic and mostly typical workflow for web audio can generally be summarized by the below chart.

MDN Web Audio Doc

In order to create these nodes to begin executing any audio processing, the audio context must first be instantiated. If you are interested in hacking with web audio, it is considered a good practice to have no more than one audio context in a single project.

const audioContext = new AudioContext();

The instantiation of the audio context means you now have an audio component to hack with! From this starting point, us developers can now begin building out our web audio project. The input phase of the audio context entails creating sources such as `` in the html file and other sources available for use in the .js file where the audio context is defined.

const soundNode = audioContext.createOscillator();

soundNode.connect(audioContext.destination);

The above snippet instantiates a common audio source in the Web Audio API called an oscillator. An oscillator in the audio context is an audio-processing module that creates a given frequency of wave. This interface can represent different periodic wave forms that produce different audio results. While this is just part of the process, the audio remains just a simple sound wave that is then connected to a destination, the computer's speaker. Let's expand this process and explore a few ways developers can manipulate these sound waves. For starters, how do we know when the audio starts? Let's take a look at a more specific context of the Web Audio API.

// new instance of an audio context
const audioContext = new AudioContext();

// volumeNode uses a gain module to control the volume
const volumeNode = audioContext.createGain();

// connecting the gain module to the destination
volumeNode.connect(audioContext.destination);

// similar to oscillator as shown above but with assigned frequencies
const triangleNode = audioContext.createOscillator();
triangleNode.frequency.value = 347;

const squareNode = audioContext.createOscillator();
squareNode.frequency.value = 443;

// types of oscillator modules
triangleNode.type = "triangle";
squareNode.type = "square";

//start the oscillators
triangleNode.start();
squareNode.start();

// connecting the audio waves to the volumeNode
triangleNode.connect(volumeNode);
squareNode.connect(volumeNode);

The above snippet puts together what we've discussed so far with a few additional steps that will help the project operate with more of the developer's intentions. Starting with the the volumeNode variable, I've assigned it the GainNode module which will allow me to control the volume of the audio context's output through the speakers. However, when the GainNode module is connected to the audio context's destination, any oscillators instantiated will not have the option to connect directly to the destination.

However, that doesn't mean I can't connect the oscillators to the GainNode module that is already connected to the audio context's destination. This still helps create a linear process from start to finish and can be expanded by patching, stringing, together other AudioNodes that have the ability to change the behavior of the oscillator's frequency. Next, I've called the .start() method on each oscillator allowing the default value of its "when" parameter to start playback immediately. Once the audio waves are signaled to start, we can then connect the oscillators to the destination which will allow the audio to finally carry through the speaker.

In this context, it helps to envision guitar pedals and how they are connected from the moment a cable connects the guitar to the pedals which eventually connect to the output of the amp. Web Audio projects operate in the same manner, just in text editors and not on a stage.

Tone.js

Now that we've taken a look at a basic Web Audio API operation, it seems projects can get tedious and potentially messy if the workflow skips out on organization and proper patching of audio nodes to the destination. Fortunately there are available frameworks that help developers keep that workflow organized, such as Tone.js. Tone.js is a Web Audio framework that allows the creation of interactive music in the browser. The syntax involved with the use of this framework is crucial in bridging the language gap by abstracting away from the machine. Tone.js was built with the intention of creating familiarity to both musicians and audio programmers.

Preloaded with a library of classes, developers can be more specific with note values without relying on specific numerical frequencies, as with the Web Audio API.

const pluckSynth = new Tone.PluckSynth().toDestination();

pluckSynth.triggerAttackRelease("C3", "4n");

Tone.Transport.start();

This basic example already eliminates the need of all the extra connect methods as seen in the previous snippets. Already in the new instantiation of a pluck synth, we are able to chain the toDestination method in one line without having to establish the audio context for the project. As for the note value and the time keeping of the synth, this is where basic knowledge of music theory comes into play. The triggerAttackRelease method combines both the triggerAttack and triggerRelease methods of Tone.js which triggers the "pitch-octave" note at the specified duration. In this case, the duration I chose is a tempo-relative value of quarter notes which in basic terms pulses on the beat. If you're unfamiliar with the terminology, you are at least familiar with quarter notes and other tempo-relative values through listening to any form of music with rhythm. Lastly, in order for the synth to start the audio, Tone.Transport.start() is invoked. You can think of Transport as the main keeper of time that can be adjusted on the go.

To further expand on what Tone.js is capable of, lets implement a loop and play with the timing of the audio using code from the above example and another Transport method.

const pluckSynth = new Tone.PluckSynth().toDestination();
const metalSynth = new Tone.MetalSynth().toDestination();

const pluckLoop = new Tone.Loop(time => {
  pluckSynth.triggerAttackRelease("C5", "8n", time);
}, "4n").start("0");

const metalLoop = new Tone.Loop(time => {
  metalSynth.triggerAttackRelease("G5", "8n", time);
}, "4n").start("8n");

Tone.Transport.start();

Tone.Transport.bpm.rampTo(120, 15);

This may seem like somewhat of a jump, but it's more of a step up in creating a musical experience! In this example I added a MetalSynth and implemented a loop for each one. The Loop module in Tone.js creates a looped callback at a specified interval. Inside each callback I'm implementing triggerAttackRelease on each synth at different note values creating a perfect fifth in music theory lingo. The second argument "8n" is the release timer on every eighth-note and time is referring to the Transport's time stamps so we can keep track of where we are in the sequence of the outputs. Of course the loops need their start signal after instantiation and the last line, bpm.rampTo is telling Transport to speed up to 120 beats per minute of the course of 15 seconds.

Another cool feature of this snippet is where each synth is off put from each other by an eighth-note. Pay attention to the start methods invoked inside each loop, the default value 0 in pluckLoop begins immediately while the "8n" in metalLoop offsets the start of the loop by an eighth-note. This creates an oscillating effect that triggers each note right after the other creating a simple but programmed "tune"!

Just by using Tone.js, the implementation of basic Web Audio API functionality is more accessible and less tedious. Developers have been using Tone.js to not only have access to familiar and readable code, but to also build out audio projects with either pre-existing instruments or any instrument they create. If you're interested in your own sound, Tone.js offers a variety of tools that make this goal achievable without having to rely on pre-built synths.

Final considerations

Aside from being a crucial tool to building sound in the web browser, Tone.js remains accessible to all developers regardless if they are familiar with the framework. Audio creation and manipulation may seem daunting to someone who isn't well versed in music composition or audio manipulation, but it's more obtainable than one might observe. Aside from those potential setbacks, the Tone.js framework offers the option of deep exploration and provides clear examples of how the methods work making this software worth the consideration.

Resources

MEAN/MERN/LAMP/SST

Stephen Nelson — Thu, 26 Oct 2023 12:35:00 +0000

Tech Stacks

Tech stacks can be a monster when learning to program web applications. There are so many languages and technologies that can leave the developer feeling overwhelmed. I have personally felt that way and I'm not a seasoned professional yet. However, as part of the trade, all web developers should at least be aware of what a tech stack is and these stacks that I'll be discussing in this blog.

For starters, we should know that tech stacks, or software stacks, are set of layered tools, libraries, programming languages, and technologies that are bundled and used to build, manage, and run applications. They consist of software components that support the application in various ways from visual model, database, networking, to security.

In this blog, I'll be diving into four widely used, common tech stacks that provide their own successful environments that can benefit web developers. We'll be diving into MEAN, MERN, LAMP, and SST, their components, and how they might be used. To start us off, let's get MEAN.

MEAN vs MERN

The MEAN tech stack is defined by its four components: MongoDB, Express.js, Angular.js, and Node.js. However, at its core, MEAN is classified as a JavaScript-based framework in web development. Its counterpart MERN (also JavaScript based) simply replaces Angular with React meaning they both contain different front-end frameworks while operating the same technologies via server-side and back-end. While both tech stacks' components are written in JavaScipt from top to bottom, there are a few differences between the two. As a result, these differences are integral in helping a developer make a decision on which one to use. Let's explore both stacks and their front-end differences.

Starting at the top tier of the MEAN architecture, Angular allows the developer to extend HTML tags with metadata, which in turn helps create dynamic/interactive web applications. In this stack, Angular interacts directly with Express.js since Express acts as the project's internet-facing web server. Express is simply another framework for Node.js that utilizes models for URL routing, handling HTTP requests/responses (GET/POST) from the Angular front-end, which contributes to more dynamic client experiences. By utilizing this line of communication between Angular and Express, the requests from Angular can connect to the Express functions that drive the application. As a result, these functions can use MongoDB's Node.js components with either callback functions or promises. These callbacks/promises are how developers access and update the data stored in the MongoDB database.

Similar to MEAN, the MERN stack implements a similar process, but in the scope of React.js which is newer among JavaScript front-end frameworks. The difference in using React is that developers are given simple components that can be connected to data on the back-end server and render them as HTML. The React components are designed to handle stateful, data-driven interfaces while requiring minimal code. It is important to note that the use of these components require the .jsx file extension that needs to be bundled. This step is crucial as it reduces the number of HTTP requests the browser needs to make, minifies the code and eliminates unnecessary characters to make the files smaller.

When it comes to choosing between the two stacks, developers should keep in mind their experiences with previous frameworks that relate to the front-end component of each stack. Developers with experience in jQuery find that MEAN is more compatible due to shared syntax conventions. React, as stated earlier, is a younger framework that is more updated that Angular and might be more appealing to younger developers. That being said, it's important to have knowledge and experience in both frameworks in case a project is built with either one.

For use cases, both stacks are designed to work well in handling JSON and JavaScript making the integration between components of each stack more intuitive and straight forward. However, depending on the size of the project, MEAN is often preferred for larger projects while MERN is more commonly used in smaller applications. Now that we've dived into JavaScript/JSON heavy stacks. Let's take a look at an alternative choice for tech stacks, LAMP.

LAMP

Shifting gears from the MEAN/MERN components, LAMP is a stack that bundles Linux, Apache web server, MySQL database and the PHP programming language. It's common to see web developers using this stack for reasons such as lower costs, efficient development speed, consistent maintenance, and flexibility in the architecture. Unlike the previous stacks, LAMP is used for either back-end or server-side development, meaning the application runs in a hidden environment from users. Such applications consist of data processing software, database components, business logic, and API for communicating with other applications.

The top layer of the architecture starts with Linux, an open-source operating system used to manage a system's hardware and resources such as: CPU, memory, and storage. This OS (operating system) exists between application and hardware making connections between the rest of the architecture, thus solidifying its role in supporting the upper layers of LAMP. The Apache web server acts as the second layer module that stores website file and exchanges information with a browser using HTTP. This exchange tends to follow the processes of receiving the request, processing that request to find the requested page file, and sending that information back to the browser.

The third layer of LAMP utilizes the relational database MySQL that stores data in a structured tabular format as opposed to MongoDB in the MEAN/MERN stacks that rely heavily on JSON data and the JavaScript language. MySQL's more rigid structure contributes to the stability of the LAMP stack since LAMP's design is focused on building out reliable back-ends. The last layer, PHP (PHP: Hypertext Preprocessor) is primarily used to determine the behavior of certain components when a webpage is loaded. In this fashion, developers can embed PHP in HTML to present real-time/updated information on websites, which allows the web server, database, and operating system to effectively process requests from browsers. A couple alternatives that can be used to replace the default PHP are Perl and Python.

SST

What about if a developer wanted to deploy a serverless application, and what would that look like?

This can be done via the SST (Serverless Stack) which is also open-source like the previous stacks. It is primarily used to deploy serverless applications on Amazon Web Services (AWS). The stack's design is focused on the flexible, easily-handled support of multiple programming languages and frameworks that include: Node.js, Python, Java, and React. Additionally, SST automatically provisions and configures the necessary AWS resources based on the current application's requirements, ultimately saving time and reducing potential errors. Be aware that if you use this technology, AWS credentials will be required to run and deploy apps created through this stack.

The advantages of using this type of stack can provide greater scalability, flexibility, and quicker time to release, all at a reduced cost. Developers using serverless have less concern over purchasing, provisioning, and managing back-end servers. As a result, developers are able to create and expand their applications without the constraints of server capacity.

When considering to use the Serverless stack, it is crucial to keep in mind the build that is the current focus. Generally if a small number of functions is being hosted, then there should be relatively little to no problems, more complex applications could work but the structure would need to be considered with care. Small pieces here is key as well as using the supported languages of SST. Another step away from using JavaScript driven components can lead developers down this route, and keep in mind this is a product of Amazon Web Services and shouldn't be used elsewhere for consistency's sake.

Closing Remarks

It goes without saying the decisions required for choosing the appropriate tech stack carries weight on a developer's mind. From front-end to back-end considerations, the tech stack chosen best reflects the developer's preferences and experiences. Language driven or cost driven, each of of these stacks provides crucial tools for all developers to get their applications deployed, just give it some thought and determine which environment best suits you.

Resources

Java vs. JavaScript

Stephen Nelson — Mon, 16 Oct 2023 13:05:48 +0000

When programmers are entering the field or starting their careers from square one, it's important to make that first step which is deciding, which language do I start with? For me, it was JavaScript and since I started my coding journey, I've repeatedly observed Java documentation, in passing, and wondered if the two were actually related. So I decided to look into the comparison between the two to satisfy my curiosity.

**Note:** This blog will continue assuming you have at least a basic foundation in JavaScipt. If not, then I highly suggest developing the required knowledge of JavaScript before proceeding.

Before I dive into the similarities and differences of each language's basic implementations, I'd like to begin by comparing the general overview of each language.

Overview

Java and JavaScript are both high-level and General-Purpose-Languages, meaning they can run on multiple platforms/devices and their human-like syntax provides more abstraction from machine code. This allows programmers to focus on the fundamentals of coding with minimal confusion. Where both languages begin to diverge from each other is that JavaScript is considered object-oriented programming and Java is known as class-based which is a style of OOP. Class-based simply means inheritance occurs by defining classes in Java as opposed to the prototype object inheritance seen in JavaScript.

Their human-like syntax makes both languages easier to read than low-level programming languages. However, Java's syntax is more similar to that of the C family (C and C++), and JavaScript is more related to Python (another high-level GPL). Also, Java code is complied before runtime and JavaScript code is interpreted at runtime and both cases have an effect on which end of development they work more efficiently in.

Before you make the decision to choose a language, it's important to look into them and decide which area of coding would best suit you. If you are considering one of these two languages, I hope this blog helps provide some inspiration to your decision. Let's break down the similarities and differences of Java and JavaScript.

Data Types

Some of the most common similarities between Java and JavaScript stem from their variables and how those variables are declared. Each language has their own form of data types that fall into two categories: simple and complex.

Simple data types such as strings, numbers, booleans, null, and undefined are the more common data types that programmers use on a daily basis. Below is a chart comparing how each language "labels" these variables through declaration and naming conventions.

int number = 5; //Java
var number = 5: //JavaScript

char myLetter = 'P'; //Java
var myLetter = 'P'; //JavaScript

boolean myBool = true; //Java
var myBool = true; //JavaScript

String myText = "This is my blog!"; //Java
var myText = "This is still my blog!"; //JavaScript

var blog = null; //JavaScript
//Why can't simple Java data types have null values?

int numTwo; // => undefined Java variable
var numTwo; // => undefined JavaScript variable

As you can see, both languages have similar implementations of their respective simple data types. There are some important differences worth investigating, starting with their variable declaration.

JavaScript uses variable declaration keywords var, let, and const. For the sake of this blog, don't worry about the differences between those three keywords, just understand that JavaScript uses these to declare variables for the interpreter to read. With JavaScript being a dynamically typed, each variable declared with var and let can be re-assigned to any other data type the programmer desires. Java, on the contrary, is statically typed, therefore the programmer is required to intentionally state which type of data the interpreter is expecting. In other words, the Java interpreter expects an integer when the int data type is stated before the variable name, acting in a similar fashion to JavaScript's variable declaration.

That being said, since null is a reference type of data that allows JavaScript to assign null to a simple data type but Java's simple data types are not reference types. If a reference type in Java is desired, then complex data types are the way to go. I want to point out that in the above code block, String myText is a reference type and is considered a non-primitive data type in Java, unlike strings in JavaScript.

Let's look at some examples of these complex data types and compare their implementation.

var myArray = ['apples', 24, true]; //JavaScript
int[] numbers = [1, 2, 3, 4]; //Java

//JavaScript
var myObject = {
  fruit: 'apple',
  integer: 24,
  myBool: true
};

//Java
//class
public class User {
   String name = "Edward";
   int age = 23;
   String email = "randomemail@gmail.com"
   //new object literal
   public static void main(String[] args) {
     User edward = new User();

   }
}

Much like JavaScript arrays, Java arrays exist as 0-indexed lists meaning programmers can also use bracket notation to find specified values in the array. For example in JavaScript myArray[1] is referring to the integer 24 on index 1. For the Java array numbers, numbers[3] references the integer value 4. The main difference between both arrays is that due to JavaScript's dynamic typing, multiple data types can be stored in an array, as seen in the above block. Java, however, is expecting the array to contain certain data types as denoted by the data type declaration before the array name. In the example above, integers are to be expected.

JavaScript object instantiation is a simple one-step setup starting with the declaration keyword (var), the name (myObject), and followed by the curly braces that contain the object's properties. In Java, object creation occurs in two steps.

Create a class (first letter is uppercased) with instance variables
Using the new keyword to define the object literal that inherits the instance variables

If you are familiar with JavaScript objects, then the example above should be a no-brainer. Much like JavaScript dot notation, Java class variables can be accessed the same way. In the example above, edward.age would return 23! However, bracket notation is not used in Java class access due to its static nature.

Array Iteration

As I've discussed how to access the data in both arrays, we can pinpoint their locations if we know where to find the data. But, what if we need to find a variable in an array or an object? Here's how you would do that on a basic level

//JavaScript
/for loop
for (var i = 0; i < 5; i++) {
  console.log(i)
}

//forEach
myNums = [1, 2, 3, 4];
myNums.forEach(function(num) {
  console.log(num);
});

//Java
//Java for loop
for (int i = 1; i < 5; i++) {
  System.out.printIn(i + 1)
}

//for each
int[] numbers = [1, 2, 3, 4];
for (int num : numbers) {
  System.out.printIn(num);
};

This blog won't go into Java class iteration as most of the time, the class will need to be converted to an array and can get messy for beginners. Respectively, this blog will not cover JavaScript object iteration assuming you've read the introduction and have a basic understanding of JavaScript. It's still imported to be exposed to the Java class syntax as you get started and how they exist compared to JavaScript objects.

Array iterations between Java and JavaScript appear to share some relations with a few tweaks in syntax. The counter variable in their respective for loops behave the same way, the only difference being the Java for loop is expecting the int data type for the counter variable while JavaScript is less strict using the keyword var. While JavaScript has its own forEach() array method, Java has the facility to reciprocate that method but in a differing implementation that loosely follows its for loop syntax. With their own unique structures, both language's array iterations share the same objective, which is to have maintain access to an array's index list.

Advantages of Each

Now that we've looked into some of the different implementations, syntax, and basic understanding, let's dive into the advantages of each language and how they are used in the programming field.

Java

If you're more interested in back-end, machine production, or server-side programming, then check out Java. Java is well-suited for enterprise/industrial applications because of how the code is compiled and its ability to independently run while disregarding the need for a browser. Android app development typically hosts Java as one of the default programming languages due to the depth of interactions and technical specifications required across multiple devices. Speaking of devices, Java as a back-end, server-side program standard is one of the most common use cases in the development of smart devices and connecting them all across the internet.

JavaScript

As stated before, if you've made it this far it's because you already have a basic understanding of JavaScript and know that it has use cases elsewhere. In case you forgot, here's a refresher on those cases.

JavaScript is widely known for building dynamic/interactive web pages, hinting at its strengths lying in the front-end of web development and play nicely with other languages such as HTML and CSS. Next, JavaScript has access to protocols (aka frameworks) that allow programmers to build out mobile apps and accomplish more on the back-end. However, keep in mind JavaScript is reliant on these frameworks to accomplish that. The key word for JavaScript here is "interactivity" while Java is an efficient source of running code on the back-end, you won't see it much on the front-end.

Conclusion

In conclusion, the question of which language you would choose simply reduces to one main question to consider. Back-end or front-end? If you are looking to build interactive website/apps/maybe the occasional browser-based game, then JavaScript might be the path to take. Java, if you're looking into smart device/industrial development, seems to be an appropriate launching pad for aspiring back-end developers. Which would you choose?

References

C#: History, .NET, Pros/Cons

Stephen Nelson — Mon, 09 Oct 2023 00:57:08 +0000

Why C#?

Choosing a programming language when starting your career or satisfying an interest in programming can feel daunting at first glance given how many languages exist. Personally I started with JavaScript in my current bootcamp which has presented its challenges. However, I decided to look into other languages to see how the experiences could compare which led me to research Microsoft's C#. In this blog I will not be comparing the two languages, but rather exploring the history of C# along with its relationship with Microsoft's .NET platform and the advantages/disadvantages present in the programming language. I'd like to begin by providing the history of where C# was developed and why its originators brought the programming language into existence.

- Side note: all programming languages have their pros and cons to varying degrees.

C#'s History and Definition

C#'s history begins in January 1999 as Anders Henjlsberg and his team began the project that would lead to the development of a new programming language labeled "Cool". However, the program language's name was short lived and replaced by Microsoft due to trademark reasons. By the time Microsoft's .NET project was publicly announced in July 2000, the newly renamed "C#" was still in development until its official launch in 2002. The origin of C#'s name is rather comical, due to my knowledge in music theory (unrelated), because of its reference to the # (sharp) accidental in modern music notation. When compared to C++, the # in C# is meant to reference four plusses on a two-by-two grid implying C# as C++'s successor or "increment" as Microsoft claims.

It's important to note that in the early days of Microsoft's new product (2002-2005), many similarities were correlated between Java and C# which led to a claim from Java's originators that C# was an "imitation" of their programming language. It was in 2005 that the developments and updates for both languages caused them to split off into their own unrelated trajectories that would later settle each language's respective definitions and functionality.

Fast-forward to today and we are able to observe the modern definition of what C# is in programming and the language's parameters and capabilities. For starters, C# is widely known as a general-purpose language or GPL for short allowing developers to utilize C# for programs such as:

1. Mobile/Desktop applications

2. Web applications, services, and sites

3. Games via the Unity Engine which is built with C

4. VR

5. Database applications

Source: Visual Studio

Due to the human-like language (shown above) that allows abstraction from machine-language in C#, the language is classified as a high-level language. High-level coding languages allow programmers to read and write programs with more ease through the use of the language that we understand. Some features included in high-level programming languages include iteration/selection constructs(if/else/while), operators that help construct boolean responses(&&, !, ||, ===), and data structures such as arrays, lists, objects, trees, and several others.

Lastly, I'd like to point out that since C# is a language provided by Microsoft, C# is best used with Windows as a result. However, one important feature tied in with C# that gives the language more versatility is the existence of the .NET Framework. If you recall my mention of the .NET project in the first paragraph, it is safe to assume both .NET and C# are closely related. This is because C# was created to specifically work in tandem with the .NET Framework.

So what is this .NET?

.NET Framework**

Microsoft's .NET Framework (built in 2000) can be defined as their own software development framework that programmers can use to build and run applications on Windows. In the beginning of this frameworks' conception, this framework was pretty much limited to Windows operating systems. The .NET Framework was the predominant implementation of the Common Language Infrastructure otherwise known as "CLI" that describes executable code and a runtime environment that allows different computer platforms to utilized other high-level languages without having to refactor to fit specific architectures.

.NET Framework also includes the Framework Class Library(FCL) that provides language interoperability across multiple programming languages. This particular library provides a collection of classes, interfaces, and value types as well as the CLI Base Class Library. While this may seem like a lot, this infrastructure provides no shortage of reusable data for programmers to implement.

Overtime, the .NET Framework was superseded by the cross-platform .NET project in 2016 which allows the platform to operate cross-platform on other operating systems such as iOS, Android, etc. With the modern cross-platform .NET framework (.NET 6), Windows operators have access to various compatible platforms for application building and running. As a result, Microsoft's .NET is becoming increasingly more accessible to other systems other than Windows and broadening the reach of C#.

This progress has been helpful in broadening C#'s outreach, but now that programmers have appropriate access to C# outside of Windows, let us explore the strengths and weaknesses of C#'s modern potential context.

Advantages and Disadvantages

Alongside C#'s fast speed, rich library, and simple syntax, the advantages of using C# should begin with its relevance to programmers who use Windows versus iOS and Android. For Windows applications, enterprise solutions, and game development (with the Unity engine), C# holds the title as the most utilized programming language. C# is also object-oriented like other high-level languages, further separating the programmer from abstraction. In terms of compatibility and cross-platform capabilities, C# can be used to "interact with applications written in compatible languages"(4. dotnet.microsoft) such as its predecessor C++ and F#. This is thanks to C# place in the .NET platform, however, this has the potential to cross over to the disadvantage side of the fence.

Even though adjustments and updates have been implemented over the years to the .NET platform, C# is still heavily reliant on "Windows platforms for execution"(3. sololearn). This could mean trouble for iOS and Android programmers. C# also faces limited mobile development options due to the mobile development landscape still being dominated by iOS and Android. Also, while C# is a high-level language and easy to read, the extensive libraries have the potential to add unnecessary layers of complexity for beginners. Lastly, C#'s code is not interpreted at runtime, instead the code is compiled before runtime after every change is made making errors and bugs more likely to go unnoticed which is dangerous for new or inexperienced programmers. So extra caution when attempting to master C# is advised, not that all other programming languages are exempt from cautious approaches.

Conclusion

In conclusion, C# has a range of reasons for programmers to pursue as long as they are aware of the potential shortcomings that the programming language inherits by default. Microsoft is still developing outside accessibility of C# for non-windows users and I believe that time will come. If you are still curious about C# and would like to look into studying it, feel free to browse the links listed below that helped me begin to understand C#. I hope you find them as helpful as I did.

Resources

Python's Contribution to Game Development

Stephen Nelson — Mon, 02 Oct 2023 01:12:48 +0000

What is Python doing in Game Development?

As with other technologies, video game development and its industry have been on the rise since the creation of Pong. Programmers and non-programmers alike, in regards to gaming industry, share a common interest aside from just enjoying the pleasure derived from the entertaining stories and mechanics that make a well-received game. What is that interest you might ask? Well, to make our own, of course. So what is Python and why is its popularity booming amongst programmers of any experience?

For starters, Python by basic definition is a high-level programming language specifically designed to focus on beginner-friendly readability. Not only Python a dynamic language, its syntax is based around object-oriented programming and functional programming. Most gaming developers, in order to speed up production, tend to reuse basic templates containing reusable code that other team members can translate and build upon with less delay. This agile nature of Python of refactoring and altering with ease turns out to be a useful component in the language's capacity to quickly prototype ideas and machines. Thanks to it's syntax, of course.

Python’s readability and functionality are designed so that even non-programmers can delegate simple tasks from setting reminders and rendering lists of any sort to software testing, web development, and game development. However, our focus today will be scoped to Python’s increasing popularity among beginners and experts as well as its contribution to game development.

Why is Python's popularity increasing?

Python has become a more accepted language in game development due to its versatility as a high-level programming language and its portability across multiple devices. It’s because of Python’s simplicity that developers have more control over maintaining and optimizing the gameplay experience while “abstracting away the details on how the code is run”(Coralogix 2022). Therefore, Python’s syntax and interpreter has Python widely agreed on as an ideal language for beginners. However, Python, like all other programming languages, is separated by both its advantages and disadvantages. So let us now discuss what those pros and cons are and why they should be considered.

The Advantages of using Python

The advantages in Python’s role in game development range from its readability to portability which results in an improved speed in game development. This ease in which Python’s code is executed makes Python a viable candidate as a supportive tool for “inserting a scripting engine into an existing video game.”(Nex 2020) As for the main language, Python can also be used as a platform for simple game designs such as most “indie games, puzzle games, 2D games, some 3D games, top-down shooters, and platformers.”(GameDev Academy 2023)

With simplicity being a major convenience of Python, developers have more freedom to focus on the fundamentals of code and basic game development. This is fine when understanding is the main focus, however, this commonly result in one of Python’s biggest disadvantage. Python simply lacks intentional complexity for high-functioning games.

The Disadvantages of using Python

Unfortunately, the simplicity in Python’s game engines provides inherent limitations in a game’s performance. This means Python doesn’t allow developers the “flexibility to control how memory is allocated and released.”(Coralogix 2022) On top of that, to enhance Python’s user-friendly environment, the code is not compiled in advance meaning the code is interpreted at runtime. Another drawback that programmers tend to deal with is finding errors only seen at runtime. This is due to Python's dynamic nature, requiring frequent testing if mistakes are common in the work environment.

As a result of these limitations in maintaining control over the hardware’s resources, most high-end game development is left to programming languages such as C++ and C#. In comparison, Python just can’t maintain the level of performance of low-level languages (C++ and C#) where the learning curve is higher than Python but more efficient in the endgame for Class-A games.

Conclusion

If you have ever played games such as: Sims 4, Snake, Asteroids, Battlefield 2, Frets on Fire, or Civilization 4, then you have unequivocally enjoyed a product that was either made with or supported by Python. Not to mention the game engines provided for it such as Pygame, Crystal Space, Panda3D and Python-Ogre, the launching pad for game development is not far off if you are interested in a project of your own. However, it is important to keep in mind that not all game developers hold Python in high regards the quality and performance of games. Python, while it still is readable, productive, and contains an extensive library of modules, the majority of the game development community has issues agreeing on Python's relevance in the industry.

This ever-lasting debate tends to get heated and is brimming with subjective opinions on which is the most efficient language in the industry. From design restrictions, mobile computing, to speed limitations, most mainstream game developers still fall back on C++ and C# for higher-end games. Still, Python is still recommended by professionals for those who are new to programming and are interested in building a foundation in developing games. In conclusion, Python may not be a heavy hitter in the field just yet, but it's a helpful place to start one's programming journey in game development.

Sources

Referenced

Engine and Game Sources for Python

Using .reduce() in JavaScript

Stephen Nelson — Thu, 17 Aug 2023 14:17:55 +0000

Of all the native array methods provided by JavaScript, the native .reduce() method is arguably the strongest and most useful of the methods. The strength of the .reduce() function's versatility lies in its ability to return any type of value the developer wishes to return at the end of the code block. However, before that can happen the required parameters must be accounted for in order for the method to work properly. These required parameters for .reduce() are an array and a callback function, and while the seed parameter is listed in the syntax, it serves the purpose of a starting point for the callback function's accumulator parameter. Keep in mind as you read along that the examples provided in this blog are implemented on a basic level and more complex scenarios for .reduce() exist beyond this base line.

-Syntax:

let array.reduce(callback(accumulator, current), seed);

-The array parameter in most cases outside of underscore.js is usually preceding the method itself as array.reduce(). This informs the interpreter that the developer is intending to reduce an array into a specific value. Now that the designated array is targeted for reduction, the developer still needs to declare a callback function to be called on the element of the current iteration of the loop. What is important to understand about the callback function is there are TWO required parameters and those are accumulator and current, and should be input in that same order. The accumulator is the total accumulated value that is updated after each iteration through the array and the current parameter is referring to the current element of the iteration.

-The last and perhaps the most versatile parameter that is passed into the .reduce() method is the seed parameter. The seed's flexibility stems from its ability to be any type of data from simple datatypes to complex datatypes. However, it is important to keep in mind that the seed acts as a starting point for the accumulator meaning if an array is being reduced to a single number and a sum is being returned as the result, it's crucial the for the seed to equal 0. If an array or object needs to be returned then the seed's input value at the time of the invocation should be either an empty array or object. The same should be exercised for strings as well.

Below are some examples of valid uses of the seed parameter:

let numbers = [1, 2, 3];

let sum = numbers.reduce(function(accumulator, current) {
    accumulator += current; 
    return accumulator
}, 0);

//returns the number value of 6

The seed parameter of 0 allows the accumulator to begin at 0 accumulate a sum from all the elements in the numbers array. At the end of the code block the accumulator must be returned otherwise the value of the method will be considered undefined.

let words = ["This", "is", "a", "sentence"];

let sentence = words.reduce(function(accumulator, current) {
    accumulator += current + " ";
    return accumulator;
}, "");

//returns the string value of "This is a sentence"

Note that now the seed was input as an empty string, the developer is now able to concatenate the strings in the words array into a single string.

let numbers = [1, 2, 3, 4, 5, 6, 7, 8];

let allEvens = numbers.reduce(function(accumulator, current) {
    if (current % 2 === 0) {
        accumulator.push(current);
    }
    return accumulator;
}, []);

//returns a reduced array of even numbers [2, 4, 6, 8]

This final example returns a reduced array from the provided numbers array array by testing if the current element is an even number. In order for this to work properly, an empty array must be provided as the seed so the accumulator's starting position is that empty array. Once the .reduce() method iterates through the numbers array, a condition will be tested on each current element (determining of the number is even) and if the current element passes that test then the element is pushed into the accumulator array.
In conclusion, the native .reduce() method is extremely useful when a specific copy of an array or object is needed, an accumulated sum to keep tabs on data occurrences, or a string needs to be formed from the elements of an array. These native array methods are tools provided to developers by JavaScript to be implemented and help strengthen the code, help with readability, and maintain dry code so repetition doesn't hinder functionality. For further information on the native .reduce() method, follow this link and dive further into the multitude of uses for .reduce().

Mozilla Developer