DEV Community: Ryan

My Personal Site's Tech Stack

Ryan — Mon, 10 Oct 2022 17:34:04 +0000

Hey, hey! 🙋‍♂️ Thanks for stopping by. I recently put together my own developer website, a little blurb about myself and my career - something more than my resume. This started as a quick project to help me learn what Preact was like but slowly turned into something I wanted to polish and deploy. I am pleased with how easy the site was to write, its performance, and its overall feel as a project. In this post, I am going to go over the tech stack I used to create and host this minimalistic site. If you'd like to check out the site before reading this post, you can find it here!

Preact CLI

I initialized my site using the Preact CLI. Preact is a lightweight alternative to React. Preact is a good library to use for a personal site because it focuses on the site's performance and size - I am just displaying static text and images after all. Preact is fast and only ~5kb, while React is ~100kb! I've still got some digging to do to figure where Preact is limited in comparison to React but it worked like a charm for this project.

Styled Components

Styled components let you write CSS in your JS! One major benefit of using this library is that it provides component-level encapsulation, so you write the CSS right in your component's file and there is no worry about it leaking out. This library also has built-in theming, it exposes a wrapper component that gives the rest of your application context to the current theme. The theming functionality made it quite easy to create the light/dark themes for the site.

const Content = styled.div`
    align-items: center;
    display: flex;
    flex-direction: column;
`; // Reference Content directly in your JSX

AOS

The Animate on Scroll library is perfect for anybody looking for minimalistic scroll animations. Initialize AOS, add some data tags to your HTML elements, and you're good to go. This was my first time using this library, and I could see myself coming back to it. I used this to fade/flip in different elements on the page as the user is scrolling down. Seems to give the static content a more interactive feel.

<Container data-aos="fade-up" data-aos-duration="400">

There was one caveat while using AOS with the styled component's theme provider. At times when the user switched themes, child elements using AOS inside a parent also using AOS would disappear and only appear again when the user scrolled. I believe the way styled components obfuscates classes/switches themes was causing the AOS state to believe that the elements were new and had not been animated in yet. To resolve this, I added a custom hook that takes advantage of AOS's document events to keep track of which items had animated in. Once an item had animated, I made sure it did not animate again - keeping it on the screen while switching themes. I used the uuid-random library to help me achieve this.

Netlify + GitHub

Netlify's GitHub integration is so sweet! It makes deploying your site too easy, it's hard to pass up when you want to get something up and running quickly. Through Netlify, you select your repo/main branch in GitHub, define the code's build command and output directory, and then Netlify will automatically deploy and host your site. You can choose to deploy the site whenever you push code to your main branch if you want to, that's what I like to do. You can even customize the site's subdomain name.

Google Analytics (GA4)

I was curious about who may come across this site (if anybody), and whether they would actually interact with the page. GA4 is easy to install into your application. All you've got to do is create an account, and then add a script to your page's <head> tag. GA4 will then give you access to real-time analytics about users, page views, and event counts.

Figma

Figma helped me jumpstart this project. Although my initial design was minimal, it gave enough to go off of to start laying things out. The rest of the layout came naturally after that. One thing I want to highlight is Figma's frame layout grid (the red grid rows). The grid helped get things in the right position when laying things out, following these grid lines will give your page a nice a natural flow without having to think on it too much. It certainly helped me as I don't practice UX design too often.

If you'd like to give the site a look, you can find it at https://ryanhenness.com!

Angular Component Considerations

Ryan — Thu, 20 May 2021 22:02:14 +0000

There is more to developing a component than making sure the component looks and works the way it should. Components are a huge portion of what our SPA is made up of so we should consider each component's performance, usability, readability, and more. This will help make sure our code stays maintainable and performant over time.

Performance 🏃

For the user's sake, we want the component to be as performant as it can be. The SPA's job is to quickly render the data provided by the backend systems. Achieving this can be supplemented with built-in Angular performance features, and thinking about how the DOM is made up.

Use trackBy along with your ngFor directives.
This will tell Angular what to consider as a "change" in our object being iterated so that it does not re-render the entire iterable to the DOM.
Use ChangeDetectionStrategy.OnPush when applicable.
This strategy is intended to be used with components with immutable reference types. It will turn off the component's expensive automatic change detection. Make sure to check whether the component is still working as intended after this. If the inputs received from the parent component are mutated in the parent component, the component using OnPush will not update because it is not receiving a new reference of the input.
Watch out for DOM over-pollution.
It is good to consider how your component is going to affect the structure of the DOM. For example, if items produced by a loop need an associated modal component for each, do not include the modal within the items. That would make an unnecessary amount of modals in the DOM. Rather, have the modal component live at the same level as the items (or somewhere else that makes sense), and have the items emit an output that is used to open/populate the singular modal.
Make sure to unsubscribe from your Observables in ngOnDestroy.
If subscriptions are not unsubscribed from when the component is destroyed, a huge memory leak occurs because the callback attached to the subscription will be continuously called. Memory leaks take from resources and slow down the application.

Usability 🔨

For the developer's sake, we want components to be easy to use. The closer to a "plug and play" component the better.

Avoid speculative generalization.
Most of the time, we want to find the sweet spot between a one-off and an overly abstracted component. Component features should be written to handle most cases, not all cases all of the time. Make sure you're not overly abstracting a component for cases it may probably never be used for.
Think about how the component will be consumed.
What will be needed for the inputs/outputs? Much like the point above, the goal here is to find a good middle ground between simplicity and flexibility. Don't include inputs/outputs that are not needed, the component can always be extended to include new ones later. Also, do not include too little nor too many inputs/outputs that it makes the component hard to use.
Provide the component in the correct module.
Make sure components are provided at the correct scope. If it's going to be a shared component throughout the app, we'll want to provide it at a higher level. If it will only be used in a certain module, make sure the scope is to that module. This will help us keep our codebase maintainable, and keep our build times low. Remember that each time you make a change to a component, the module that the component belongs to will need to be built again.

Readability 📘

When developing Angular components, they should use the same practices as other components within the codebase. Following common practices helps other developers build a rough mental model of components at first glance, which makes them easy to read. When components are easier to read, they're easier to maintain, debug and extend.

Structure the component correctly.
Placement of your imports, types, enums, markup, properties, methods, etc. matter. This may also include alphabetical order, or public/private order. Make sure the component being developed is following the same patterns as the other components in the codebase. Do the same for external files as well, such as external styling sheets.
Follow style guidelines.
Components should be written using common style guidelines. Everyone writes code a bit differently, so these guidelines help us keep things manageable. This helps our team write code that we can all easily and quickly understand.
Consider splitting the component into child components.
Child components should be created when their markup bloats the parent component, or when the parent component has a chunk of state/logic that would make sense being kept separate in a child component.

Misc. 🌀

Consider implementing accessibility and responsiveness solutions to the component.
Think about the contexts that the component will be used in. Who is using it? What display sizes will this component be used on? Areas of accessibility that should be thought of are visual, hearing, cognitive, and motor. When thinking about responsiveness, gauge whether this component will need to take another shape as screen sizes get small or large.
Research older components to see how they handled similar cases to the component you are building.
Most of the time, components share similar logic in certain areas. Take a look around when developing a component to see what others have done to solve certain problems. You may be able to use some of their ideas, or make them even better. Doing this can be a good opportunity to reinforce your ideas, or learn something new.

Add to the discussion below if you've got any others to add! :)

Design Patterns: Decorator

Ryan — Mon, 13 Jan 2020 23:27:48 +0000

Hey there, my last posts looked at creational and behavioral design patterns. This time we're going to be going over our first structural pattern, the Decorator pattern. Structural patterns give us a way of combining objects into larger structures while keeping these structures flexible and efficient. When you think of the Decorator pattern, think of Matryoshka dolls (the dolls that stack inside of one another). You'll soon see that the Decorator pattern gives our code flexibility at run-time while extending class functionality.

If you don't know what a wrapper class is, you might want to check out this post first! (But it's not required)

Overview

Definition
Implementation
Example Code

Definition

Decorate: make (something) look more attractive by adding extra items or images to it. The Decorator pattern allows us to add functionality to our classes without directly modifying or inheriting from them. We're able to add behavior to our classes by wrapping them up inside of another class.

We can dynamically add responsibilities to objects with a Component and Decorator relationship. The Decorator conforms to the Component's interface while also having an instance Component object within itself. The Decorator object is then effectively able to add functionality to the Component by adding functionality to itself.

Implementation

To achieve the Observer pattern, there are 4 types of classes we need to implement:

Component
- Defines the interface for the Concrete Component we want to dynamically add to.
Concrete Component
- The class we are adding functionality to.
Decorator
- Maintains reference to the Concrete Component we're adding to.
- Implements Component's interface (by wrapping the Component's methods).
Concrete Decorator
- Adds the functionality.

Using C#, the pattern looks like this:

using System;
using System.Collections.Generic;

public class Program
{
    public static void Main()
    {
        ConcreteComponent component = new ConcreteComponent();
        component.DoSomething();
        ConcreteDecorator decorator = new ConcreteDecorator(new ConcreteComponent());
        decorator.DoSomethingElse();
    }

    // 2. The concrete component (what we're decorating)
    class ConcreteComponent : IComponent
    {
        public void DoSomething()
        {
            Console.WriteLine("Doing something!");
        }
    }

    // 1. The component's interface
    interface IComponent
    {
        void DoSomething();
    }

    // 3. The decorator
    abstract class Decorator : IComponent
    {
        protected IComponent Component  { get; set; }

        public Decorator(IComponent component)
        {
            this.Component = component;
        }

        public void DoSomething()
        {
            this.Component.DoSomething();
        }
    }

    // 4. The concrete decorator
    class ConcreteDecorator : Decorator
    {
        public ConcreteDecorator(IComponent component) : base(component) {}

        public void DoSomethingElse()
        {
            Console.WriteLine("Doing something else!");
        }
    }
}

Output:
Doing something!
Doing something else!

You can play with this code here on .NET Fiddle

Example Code

Decorators are good to use when you don't want to/can't change the behavior of a class. You can run into this situation for a lot of different reasons, you might be working with legacy code that shouldn't be modified, or working with a library that you cannot modify.

Let's write a program that adds functionality to a Calculator class. Our Calculator class only has an Add method right now, but we want to add a Subtract method so we'll create a decorator for the class.

using System;

public class Program
{
    public static void Main()
    {
        Calculator calculator = new Calculator();
        Console.WriteLine("Regular Calculator:");
        Console.WriteLine(calculator.Add(4, 3) + "\n");
        BetterCalculator betterCalculator = new BetterCalculator(calculator);
        Console.WriteLine("Decorated Calculator:");
        Console.WriteLine(betterCalculator.Add(4, 3));      
        Console.WriteLine("But I can also subtract!");
        Console.WriteLine(betterCalculator.Subtract(4, 3)); 
    }

    class Calculator : ICalculator
    {
        public override int Add(int x, int y)
        {
            return x + y;
        }
    }

    abstract class ICalculator
    {
        public abstract int Add(int x, int y);
    }

    class Decorator : ICalculator
    {
        ICalculator myCalc { get; set; }

        public Decorator(ICalculator calculator)
        {
            this.myCalc = calculator;
        }

        public override int Add(int x, int y)
        {
            return this.myCalc.Add(x, y);
        }
    }

    class BetterCalculator : Decorator
    {
        public BetterCalculator(ICalculator calc) : base(calc) {}

        public int Subtract(int x, int y)
        {
            return x - y;
        }
    }
}

Output:
Regular Calculator:
7

Decorated Calculator:
7
But I can also subtract!
1

You can play with this code here on .NET Fiddle

Disclaimer: There are a lot of resources for learning design patterns, and they can be implemented in different ways. I would recommend exploring more resources when finished with this post.

Design Patterns: Observer

Ryan — Tue, 07 Jan 2020 23:01:33 +0000

Wassup! This is the third post that I'm writing while learning design patterns. My first two posts covered creational design patterns. This time we'll be taking a look at the Observer pattern which is a behavioral pattern. I'll first give a definition of the pattern, then show its implementation in C#, and finish with a code example.

Overview

Definition
Implementation
Example Code

Definition

Observer: a thing that watches or notices something. The Observer pattern allows us to create a one-to-many relationship between objects so that when one object changes, the many will be notified and update accordingly.

In this pattern, there is one Subject and many Observers. The Subject holds whatever state is of interest and notifies the Observers when the state changes. Each Observer keeps a reference to the Subject, stores the state that should be consistent with the Subject's, and implements the Observer updating interface to keep the state consistent with that of the Subject.

Implementation

To achieve the Observer pattern, there are 4 types of classes we need to implement:

Subject
- Stores List of its Observer objects.
- Defines the Attach, Detach, and Notify methods.
- Notifies the Observers when the state changes.
Concrete Subject
- Holds the state.
Observer
- Defines an Update interface.
Concrete Observer
- Implements the Update interface
- Stores reference to the Concrete Subject
- Stores state that should stay consistent with the Concrete Subject.

Using C#, the pattern looks like this:

using System;
using System.Collections.Generic;

public class Program
{
    public static void Main()
    {
        ConcreteSubject subject = new ConcreteSubject();
        ConcreteObserver observer = new ConcreteObserver(subject);
        subject.Attach(observer);
        subject.SomeState = 100;
        subject.Notify();
    }
}

// 1. Subject
abstract class Subject
{
    List<Observer> observers = new List<Observer>();
    public void Attach(Observer observer)
    {
        observers.Add(observer);
    }

    public void Detach(Observer observer)
    {
        observers.Remove(observer);
    }

    public void Notify()
    {
        foreach (var observer in this.observers)
        {
            observer.Update();
        }
    }
}

// 2. Concrete Subject
class ConcreteSubject : Subject
{
    public int SomeState { get; set; }
}

// 3. Observer
abstract class Observer
{
    public abstract void Update();
}

// 4. Concrete Observer
class ConcreteObserver : Observer
{
    public int ObserverState { get; set; }

    ConcreteSubject MySubject { get; set; }

    public ConcreteObserver(ConcreteSubject subject)
    {
        this.MySubject = subject;
    }

    public override void Update()
    {
        this.ObserverState = MySubject.SomeState;
        Console.WriteLine("My state has been updated: " + this.ObserverState);
    }
}

Output:
My state has been updated: 100

You can play with this code here on .NET Fiddle

Example Code

There are all sorts of reasons we may want to use a subject/observer relationship while developing... this pattern is used a lot. Some examples include UI components reacting to one another, subscription services, app users following other users, etc.

Let's write a program that models sports fans cheering for their favorite player. The Subject will be the athlete and the Observers will be the fans. Every time the athlete scores, the fans will react to it in some way.

using System;
using System.Collections.Generic;

public class Program
{
    public static void Main()
    {
        BasketballPlayer damianLillard = new BasketballPlayer("Damian Lillard");
        BasketballFan basketballFan1 = new BasketballFan(damianLillard);
        damianLillard.Attach(basketballFan1);
        damianLillard.Score(3);
        BasketballFan basketballFan2 = new BasketballFan(damianLillard);
        damianLillard.Attach(basketballFan2);
        damianLillard.Score(2);
    }

    abstract class Player
    {
        List<Fan> fans = new List<Fan>();

        public void Attach(Fan f)
        {
            fans.Add(f);
        }

        public void Detach(Fan f)
        {
            fans.Remove(f);
        }

        public void Notify()
        {
            foreach(Fan f in fans)
            {
                f.Update();
            }
        }
    }

    class BasketballPlayer : Player
    {
        public string Name;
        public int Points = 0;

        public BasketballPlayer(string name)
        {
            this.Name = name;
        }

        public void Score(int points)
        {
            this.Points += points;
            this.Notify();
        }
    }

    abstract class Fan
    {
        public abstract void Update();
    }

    class BasketballFan : Fan
    {
        BasketballPlayer FavoritePlayer;
        int FavoritePlayerPoints;

        public BasketballFan(BasketballPlayer player)
        {
            this.FavoritePlayer = player;
            this.FavoritePlayerPoints = this.FavoritePlayer.Points;
        }

        public override void Update()
        {
            this.FavoritePlayerPoints = this.FavoritePlayer.Points;
            Console.WriteLine(this.FavoritePlayer.Name + " has " + this.FavoritePlayerPoints + " points!");
        }
    }
}

Output:
Damian Lillard has 3 points!
Damian Lillard has 5 points!
Damian Lillard has 5 points!

You can play with this code here on .NET Fiddle

Disclaimer: There are a lot of resources for learning design patterns, and they can be implemented in different ways. I would recommend exploring more resources when finished with this post.

Design Patterns: Factory

Ryan — Mon, 06 Jan 2020 20:45:00 +0000

Yo yo! This is the second post that I'm writing as I'm starting to learn design patterns. My first post covered the Singleton pattern, you can find that here. This time we'll be taking a look at another creational pattern, the Factory pattern. Let's first visit the definition, then the implementation of the pattern, and finish with a look at some example code.

Overview

Definition
Implementation
Example Code - Creating Books

Definition

Factory: a building or group of buildings where goods are manufactured. Like I said earlier, the Factory pattern is a creational pattern and it gives us flexibility in creating different types of objects that inherit from the same class, and then use those objects within the same code.

We use a Factory and Product relationship to make up this pattern. The Factory takes care of instantiating the Products that it wants to produce, and the Products just need to know what rules they need to follow in order to be a product.

Implementation

To achieve the Factory pattern, there are 4 types of classes we need to implement:

Abstract Factory class.
- Defines an abstract Create method. In some cases, this may include a default implementation.
Concrete Factory classes.
- Implements the Create method (this will instantiate the Factory's Product objects).
Abstract Product.
- Defines the Product properties and methods.
Concrete Product class (this will be instantiated by the Factory objects).
- Inherits from the Product class, defines the unique Product.

This pattern allows us to defer the creation of the Product objects to the subclasses of Factory, making it a creational pattern that gives our code flexibility.

Using C#, the pattern looks like this:

using System;

public class Program
{
    public static void Main()
    {

    }
}

abstract class Factory
{
   public abstract Product Create();
}

class FactoryA : Factory
{
    public override Product Create()
    {
        return new ProductA();
    }
}

class FactoryB : Factory
{
    public override Product Create()
    {
        return new ProductB();
    }
}

abstract class Product
{
    public string Name;
}

class ProductA : Product
{
    public ProductA()
    {
        this.Name = "Pepsi";
    }
}

class ProductB : Product
{
    public ProductB()
    {
        this.Name = "Coke";
    }
}

Output:
FactoryA created Pepsi
FactoryB created Coke

You can play with this code here on .NET Fiddle

Example Code - Creating Books

Now let's take a look at a real world example. Perhaps we want to create a program that helps users create different types of Books. For now, this program will help the user create a Novel, or a History book. Novels will be composed of Pages: Title Page, Event, and About the Author. History books will be composed of Pages: Acknowledgments, Units, and Glossary. The program will then print out the Pages of the book they decided to create (using the same code no matter which book type that the user chose).

using System;
using System.Collections.Generic;

public class Program
{
    public static void Main()
    {
        Console.WriteLine("Welcome to Book creator!");
        Console.WriteLine("Would you like to make a Novel or History book?");
        string bookType = Console.ReadLine();
        BookFactory bookFactory = new CoolBookFactory(bookType);
        Book userBook = bookFactory.Create();
        // The magic of the pattern is below:
        Console.WriteLine("PAGES -----");
        foreach (var page in userBook.pages)
        {
            Console.WriteLine(page.GetType().Name);
        }
    }
}

abstract class BookFactory
{
    public abstract Book Create();
}

class CoolBookFactory : BookFactory
{
    public string BookType { get; private set; }

    public CoolBookFactory(string bookType)
    {
        this.BookType = bookType;
    }

    public override Book Create()
    {
        if (this.BookType == "Novel")
            return new NovelBook();
        if (this.BookType == "History")
            return new HistoryBook();

        return null;
    }
}

abstract class Book
{
    public List<Page> pages = new List<Page>();
}

class NovelBook : Book 
{
    public NovelBook()
    {
        this.pages.Add(new TitlePage());
        this.pages.Add(new EventPage());
        this.pages.Add(new AboutTheAuthorPage());
    }
}

class HistoryBook : Book
{
    public HistoryBook()
    {
        this.pages.Add(new AcknowledgmentsPage());
        this.pages.Add(new UnitsPage());
        this.pages.Add(new GlossaryPage()); 
    }
}

abstract class Page {}
class TitlePage : Page {}
class EventPage : Page {} 
class AboutTheAuthorPage : Page {}
class AcknowledgmentsPage: Page {}
class UnitsPage : Page {} 
class GlossaryPage : Page {}

Output:
Welcome to Book creator!
Would you like to make a Novel or History book?
Novel
PAGES -----
TitlePage
EventPage
AboutTheAuthorPage

You can play with this code here on .NET Fiddle

You can see that we now have the flexibility of adding other Books and Pages without modifying the creation code written in our main class. To add other Books, all we would need to do is have the Factory class handle another book type.

Disclaimer: There are a lot of resources for learning design patterns, and they can be implemented in different ways. I would recommend exploring more resources when finished with this post.

Design Patterns: Singleton

Ryan — Sun, 24 Nov 2019 05:03:58 +0000

Hey guys, thanks for being here! I've decided to start writing some posts as I review design patterns. Design patterns help provide a general and reusable solution to recurring software development problems. First, we're going to be taking a look at the Singleton pattern.

Overview

Definition
Implementation
Real-World Examples

Definition

Singleton: a single person or thing of the kind under consideration.
The Singleton design pattern is a creational design pattern. It refers to a class that has only one instance in existence at any given time. If we try to instantiate an instance of the Singleton class for a second time, the new variable also points to the first instance that was created earlier.
Let's take a look at the implementation of this pattern and then talk about some problems it can help solve.

Implementation

To achieve the Singleton pattern, the class has two main characteristics:

The constructor is private.
There is a static method that returns the Singleton instance.

These characteristics allow us to first create an instance for the class if it has yet to be instantiated, and then return that instance whenever the class is called for.

Using C#, the pattern looks like this:

using System;

public class Program
{
    public static void Main()
    {
        Singleton object1 = Singleton.Instance();
        Singleton object2 = Singleton.Instance();
        if (object1 == object2)
            Console.WriteLine("They're the same instance!");
    }
}

/// <summary>
/// The Singleton class.
/// </summary>
class Singleton
{
    private static Singleton myInstance;

    // 1. The constructor is private.
    private Singleton() { }

    // 2. Static method that returns the Singleton instance.
    public static Singleton Instance()
    {
        if (myInstance == null)
            myInstance = new Singleton();

        return myInstance;
    }
}

In this case, the program would write the string "They're the same instance!". You can play with this code here on .NET Fiddle

Real-World Examples

Sweet, now we're able to write a class that will only have one instance in our program at a time! What can we do with that? What kind of recurring software development problems can this pattern help solve?

A Singleton pattern is especially useful when accessing some sort of resource that the entire application is making use of that may have issues when being accessed by more than one instance at a time (it helps solve concurrency issues). There are a lot of common development situations where this might be the case, like hardware interface access, and logging data to a file.

In the case of hardware interface access, we may be connecting to hardware that will have concurrency issues when being accessed by multiple instances. For example, the Singleton pattern can help a printer print documents in a certain order, avoiding deadlock situations. In the case of logging data to a file, we may have multiple clients logging to a single file at the same time. The Singleton pattern can help prevent problems with concurrent access to this log file.

Disclaimer: There are a lot of resources for learning design patterns, and they can be implemented in different ways. I would recommend exploring more resources when finished with this post.

Making a Node.js SoundCloud Music Player

Ryan — Thu, 20 Jun 2019 05:39:01 +0000

What's up, it's been a while since I've posted! I'm excited about this one and I'm glad that you're here. :) I'm going to be building a SoundCloud music player using Node.js. This project's code can be found in my SweetCode repository alongside other code.

There are three main sections in this post. Following the post will walk you through the entire journey of building the SoundCloud music player - from setting up the 'Hello, world' server to changing the volume of the player:

Hello, SoundCloud Player
Playing Music
Adding Functionality

Hello, SoundCloud Player

Creating the App

Let's start it off by making our server.js file. This is going to be our Node.js server, and it can stay simple for this project because a lot of the work will be done on the client-side. For this app, I'm going to be using Express as our minimalist server framework, and EJS as our view engine. If you're unfamiliar with setting up/running a Node.js server up, check this post out.

server.js -

var express = require('express');
var app = require('express')();

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static('public'));

app.get('/', function (req, res) {
  res.render("client");
});

app.listen(5000, function () {
  console.log('listening on *:5000');
});

Structuring the App

As you can see in our first route, we're going to be rendering client. "Client" is actually our .ejs file that is going to live in a folder called views. We've also got a public folder, this is where most of our JavaScript will live. Here is what the current folder structure looks like:

Whenever I am starting work on a new project, I like to start simple and figure out what to focus on first. This project is mostly about making the browser play music from SoundCloud, so I want to keep the view as simple as possible for now. Let's set up our client.ejs file with a simple play button (this will give us a button to set the set up of our music player, it does nothing for now!).

client.ejs -

<body>
  <button>Play</button>
</body>

Nice, the app is running now.

Playing Music

Understanding NPM Packages and Bundling

Okay so we're to the cool part! But how are we going to do this, what are we going to use? Well, we could use the vanilla SoundCloud API or we could search for some sort of wrapper package that someone has made for the SoundCloud API. I think I'm going to use this soundcloud-audio npm package written by Dmitri Voronianski, it seems solid and it's got good documentation to get us going.

Since this npm package is written for the server-side, we're going to have to use some sort of bundler to allow us to use it on the client-side (the browser). You can find an explanation for this here. The bundler I am going to use is Browserify.

Writing the Player

Let's write our player.js file and then I'll show you how to bundle it and use it with your play button. Inside of our public folder, let's create our player.js. For this example, I'm going to be using this mix by Biskwiq.

In player.js let's first require our soundcloud-audio package and create our player. Creating the player requires you to use your own client id (I have scraped one from the web that you can use!)

EDIT: This key no longer works, you will need to find another!

We can give the window a function called play in which the player will call its resolve function with the link to the desired SoundCloud song.

player.js -

const SoundCloudAudio = require('soundcloud-audio');
const player = new SoundCloudAudio('95f22ed54a5c297b1c41f72d713623ef');

window.play = function () {
    player.resolve("https://soundcloud.com/biskwiq/dawntheopus", function (track) {
        player.play();
    });
}

Sweet, now all we have to do is include this script to our client.ejs file and assign it to the play button like so:

<script src="player-bundle.js"></script>
<body>
  <button onclick="play()">Play</button>
</body>

Oh wait! That's player-bundle.js, not player.js. We need to make this bundle file so that we can use this player on the client-side. Download Browserify by running this command in the root of your project:

npm install --save browserify

Don't forget to use --save with your installs! Your packages need to be saved with your local node modules, rather than globally, to be bundled.

Now we can bundle the player.js by running the following command:

browserify public/player.js -o public/player-bundle.js

This will tell browserify to take the player.js file and bundle it up and throw its output into the same folder with the name player-bundle.js. Whenever we make a change to the player.js we need to rebundle it with this command. Running this command again will overwrite the bundle file without prompting.

Sweet! The play button now streams that song! NOTE: The volume will be high as we have not touched that setting yet. :)

Adding Functionality

So it plays music, but it doesn't do much else yet. I definitely expect a music player to have a pause button, and be able to change the volume. Let's do it! I'm first going to give my client.ejs the buttons:

client.ejs -

<script src="player-bundle.js"></script>
<body>
  <button onclick="play()">Play</button>
  <button onclick="pause()">Pause</button>
  Volume: <input type="range" min="0" max="100" value="80" class="slider" id="volume-range">
</body>

First, let's implement the pause function for the player since we're referencing it in the onclick but it's not actually defined yet. It's very easy, the function we want to use is already on the player constant we made:

player.js -

const SoundCloudAudio = require('soundcloud-audio');
const player = new SoundCloudAudio('95f22ed54a5c297b1c41f72d713623ef');

window.play = function () {
    player.resolve("https://soundcloud.com/biskwiq/dawntheopus", function (track) {
        player.play();
    });
}

window.pause = function () {
    player.pause();
}

Don't forget to rebundle your player.js file!!

Bam, the song pauses! Now let's get that volume control working so that we don't blow our ears off again. Our player is going to need to know what volume level to set the volume to, so let's make a function that takes a level. Note that this level needs to be a decimal, we'll be passing in a whole number then dividing it by 100 so that it's in decimal form for the player's setVolume function.

player.js -

const SoundCloudAudio = require('soundcloud-audio');
const player = new SoundCloudAudio('95f22ed54a5c297b1c41f72d713623ef');

window.play = function () {
    player.resolve("https://soundcloud.com/biskwiq/dawntheopus", function (track) {
        player.play();
    });
}

window.pause = function () {
    player.pause();
}

window.setVolume = function (level) {
    level = level / 100;
    player.setVolume(level);
}

Since we're not using a button for the volume, we can't use an onclick. What we can do is get the "volume-range* control and call the setVolume function whenever it the control gets input.

client.ejs -

<script src="player-bundle.js"></script>
<body>
  <button onclick="play()">Play</button>
  <button onclick="pause()">Pause</button>
  Volume: <input type="range" min="0" max="100" value="80" class="slider" id="volume-range">
</body>
<script>
    var volume = document.getElementById("volume-range");
    volume.oninput = function () {
        setVolume(this.value);
    }
</script>

Review

If you followed along with me, congrats! You just made a SoundCloud music player. You used an Express Node.js server to serve a bundled npm package that wraps functionality for the SoundCloud API. If you want to continue development on this project, I've got a few suggestions:

Add a timeline for the song so that the user can change the time of the song.
Add some styling so that the player looks better!
Add a queue so that the user can add songs to be played next (also add a next button).
Show the currently playing song's cover art, title, and artist name.
Make it so that the player is shared across web browsers (if one user plays, skips, etc. then that function also happens for other users on the site). Look into socket.io.

Thanks for sticking around until the end. If you've got any questions feel free to comment/message me directly here, or on my socials: @rhenness & @ryhenness most places. :)

If you liked this post, you might also like Make a Node.js Twitter Bot: Bogus Definition.

Junior Dev Learning: Wrapper Classes

Ryan — Fri, 30 Nov 2018 21:36:29 +0000

Overview

What is a Wrapper Class?
Bare-Bones Wrapper Example
Real-World Wrapper Example

What is a Wrapper Class?

The main idea of a wrapper class is to mimic the functionality of another class while hiding the mimicked class' complexity. A wrapper is a class that takes an instance of another class (the class being wrapped) as an argument in its constructor, making it a primitive class of the one being wrapped. This means the wrapper has access to the wrapped class' functionality and is able to expose the desired features/build utility components on top of this wrapped class. In this post we'll be using C# to demonstrate but this is pattern is viable in all object-oriented languages.

Bare-Bones Wrapper Example

Okay, we understand that a wrapper should "wrap" another class. But what does that structure actually look like? Well it's pretty simple, the wrapper will contain a private class variable, which is the type of the wrapped class. The wrapper's constructor will take an instance of the wrapped class, and set the private class variable to this instance. This allows us to add to the wrapped class without actually modifying it. In this example, there's a class CoolPerson, who has FirstName, and LastName class variables. This CoolPerson class has two methods: one to say its first name, and another to say its last name. What if we wanted a method that will say both names at the same time? This is where the CoolPersonWrapper class comes into play. This CoolPersonWrapper will add to CoolPerson with a FullName class variable, and a method that says this full name.

In this block we see the main program instantiating a CoolPerson, and wrapping that CoolPerson within a CoolPersonWrapper. The wrapper then goes ahead and says its full name with a single method.

namespace WrapperExample
{
    class Program
    {
        static void Main(string[] args)
        {
            CoolPerson someCoolPerson = new CoolPerson("Cool", "Dude");
            CoolPersonWrapper someCoolPersonWrapper = new CoolPersonWrapper(someCoolPerson);
            someCoolPersonWrapper.SayFullName();
            Console.ReadKey();
        }

In this block we see the definition of CoolPerson which has two separate methods for saying its first and last names.

        public class CoolPerson
        {
            public string FirstName { get; set; }
            public string LastName { get; set; }

            public CoolPerson(string firstName, string lastName)
            {
                this.FirstName = firstName;
                this.LastName = lastName;
            }

            public void SayFirstName()
            {
                Console.WriteLine("My first name is " + this.FirstName);
            }

            public void SayLastName()
            {
                Console.WriteLine("My last name is " + this.LastName);
            }
        }

In this block we see CoolPersonWrapper takes a CoolPerson in the constructor and uses this CoolPerson to set the FullName variable, which is used in the single SayFullName() method which is the functionality we're adding on top of the wrapped class. We can also see SayFirstName() and SayLastName() are both methods from the wrapped class that we are exposing with public methods.

        public class CoolPersonWrapper
        {
            private CoolPerson CoolPerson { get; set; }
            private string FullName { get; set; }

            public CoolPersonWrapper(CoolPerson coolPerson)
            {
                this.CoolPerson = coolPerson;
                this.FullName = coolPerson.FirstName + " " + coolPerson.LastName;
            }

            public void SayFullName()
            {
                Console.WriteLine("My name is " + this.FullName);
            }

            public void SayFirstName()
            {
                this.CoolPerson.SayFirstName();
            }

            public void SayLastName()
            {
                this.CoolPerson.SayLastName();
            }
        }
    }
}

The console output looks like this:

My name is Cool Dude

Real-World Wrapper Example

Why wouldn't we have just added the SayFullName() method to the CoolPerson class? Well, that would have worked too but what if the CoolPerson class was part of a third party library that we did not have access to modify? Changing the functionality of third party classes is where wrapping is needed.

As an example, we can discuss the case of disposing COM objects. When developing an Excel or Word add-in, developers will be working with COM objects which need some manual memory management. The developer is required to release these objects using a Marshal.ReleaseComObject() method call passing the COM object. On top of that, the developer must wrap the codeblock the COM object is used in with a try/finally, and call the release method in the finally block. This requires the developer to also declare the COM object outside of the try/finally. This can get ugly. Here is an example:

        public void SetApplication()
        {
            WordInterop.Application application = null; // COM Object
            try
            {
                application = new WordInterop.Application();
            }
            finally
            {
                if (application != null)
                {
                    application.Quit();
                    Marshal.ReleaseComObject(application);
                }
            }
        }

Imagine what it starts to look like when more COM objects are added! What can we do to make this cleaner? Well, we know that C# has an IDisposable object interface which allows us to use a using block for objects that implement this interface, and it will dispose of the object correctly when the block is finished. We can use a wrapper class to do this! What we do is wrap WordInterop.Application in a new class, WordApplicationWrapper. In this new wrapper class, we will also implement IDisposable. To satisfy the requirements of IDisposble we will implement a method that is called when the wrapped object is being released at the end of the using. This method is where we're able to call Marshal.ReleaseComObject(). This allows us now to use a using block instead of this try/catch, with the declaration outside:

        public void SetApplication()
        {
            using (var application = new WordApplicationWrapper(new WordInterop.Application()))
            {
                application.Quit();
                // When we reach the end of the using block, the wrapped object
                // will be disposed of.
            }
        }

Much cleaner, the wrapper served us well. :)

You can check out my GitHub tutorials here.

If this post helped you, you might also like:

Let's Solve: Code Challenge - Picking Numbers

Ryan — Sat, 21 Oct 2017 23:40:26 +0000

Hey hey, welcome to my first Let's Solve! We're going to be solving an algorithm code challenge called Picking Numbers, which is categorized as an easy problem - so our goal is to not only solve the problem, but make our solution fast. In this post I'm going to be outlining and applying the general steps I take when solving a problem like this. I hope to turn this into a series as I run into problems and solutions that I find interesting. :)

I'm building a portfolio of my personal Hacker Rank algorithm problem solutions, which can be found on GitHub.

Problem

The first step that I take in solving these problems is obvious, taking a look at the problem statement:

Given an array of integers, find and print the maximum number of integers you can select from the array such that the absolute difference between any two of the chosen integers is <= 1.

From this, we can see that we will be dealing with an unsorted list.

Input/Constraints & Examples

The next step I take, whether I'm solving an algorithm problem in person or online, is figuring out the input/constraints. For online problems, the input/constraints are most likely listed, while in person you may have to ask for them.

For Picking Numbers, the input is:

The first line contains a single integer, n, denoting the size of the array.

The second line contains n space-separated integers describing the respective values of A0,A1,...,An-1.

And the constraints are:

2 <= n <= 100

0 < Ai < 100

The answer will be >= 2

The example input given is:

6
4 6 5 3 3 1

This results in the output 3, because we can satisfy the problem by choosing 3, 3, 4. The biggest difference between any two of these numbers is 1.

Brute Force

After I understand the problem, constraints, and examples, I look at finding a brute force way of solving the problem. Sorting is always on my mind when trying to solve problems: can sorting help me in this case? For brute force solving this problem, yes it can. We can first sort the array, and then loop through it while keeping track of the longest sequence of numbers that are within one of each other. Our sorted array will look like this: 1, 3, 3, 4, 5, 6.

Then looping through the sorted array, while keeping track of the longest sequence, we will find the longest sequence is: 3, 3, 4.

Optimization & Walkthrough

So, our brute force solution works for this small array input. But what if the input gets really big? The sorting at the beginning is going to take too much time, possibly O(n²), which will most likely cause the problem to bust. How could we optimize this? Well, we know that we can look for a sequence to satisfy the problem. This makes me wonder if I can create a sequence in a way that doesn't use sorting.

Now this brings me to something else I keep handy in my algorithm toolbox: hash maps. I find hash maps to be particularly useful when solving problems where the order of things doesn't matter, they help us get rid of duplicates, sort, and all sorts of things. Can a hash map help solve this problem? I think it can. This is what a basic hash map looks like, an index, known as a key, mapping to another value:

We can use a hash map to map the numbers found in our input array to the number of times they appear. This means that our input array values are acting as the keys, and the amount of times they appear are acting as the values. We can then loop through the hash map as if it were the sorted array, and find our longest sequence! Our hash map for the example input will look like this:

We can see our output value is the highest sum of two key values next to each other:

Now that I've drawn the hash map out, I can see that each index of the hash map (0-6) only needs one input value... so we can use an array instead of a hash map. :)

Implementation

Now it's time to figure out which language I want to solve this in. Since I want to get better at JavaScript, I'm going to use that!

The first thing that we want to do is read in our values from the input, and initialize our key-value map array with all 0's. We know that there can't be more than 100 array values, and the array values cannot be an integer higher than 100, so we can do that like so:

function main() {
    // Read input
    var n = parseInt(readLine());
    a = readLine().split(' ');
    a = a.map(Number);

    // Construct our map
    var map = new Array(100);
    map.fill(0);
}

Now we want to populate map with a for-loop. The key values of map will have values that correspond with the amount of times that key appears in the input array. So as we loop through the input array, we can just bump the value of each key by one:

function main() {
    // Read input
    var n = parseInt(readLine());
    a = readLine().split(' ');
    a = a.map(Number);

    // Construct our map
    var map = new Array(100);
    map.fill(0);

    // Populate map
    for(var i = 0; i < a.length; i++){
        map[a[i]]++;
    }
    console.log(map);
}

After running what we have with the example input:

6
4 6 5 3 3 1

We can see that map looks like this: [0, 1, 0, 2, 1, 1, 1].

The final thing we need to do is find the max sum of two values with keys within one of each other, this will be our result. Let's create a max value that keeps track of the highest sum, and then loop through the map to update our max value whenever adding each key's value to the key's value before it in the map sums higher than the current max:

function main() {
    // Read input
    var n = parseInt(readLine());
    a = readLine().split(' ');
    a = a.map(Number);

    // Construct our map
    var map = new Array(100);
    map.fill(0);

    // Populate map
    for(var i = 0; i < a.length; i++){
        map[a[i]]++;
    }

    // Find the max sum of two values with keys within one of each other
    var max = 0;
    for(var i = 1; i < map.length; i++){
        if(map[i] + map[i - 1] > max){
            max = map[i] + map[i - 1];
        }
    }
    console.log(max);
}

Results

Let's run our code on all of Hacker Rank's test cases...

Drum roll please!

Boom! All of our test cases pass in O(n) time. :)

Takeaways

I always try to reflect, and think about what I learned by solving a code challenge. For this one, my takeaway is that hash maps can be useful when dealing with unsorted lists. In this case, we were sort of able to create an appearances "attribute" for each value of the array using a hash map - this was useful, and much faster than sorting the entire input array.

Please add to the discussion below! How would/did you solve this problem? Need help?

The Path to Conquering Async JavaScript

Ryan — Wed, 18 Oct 2017 00:28:43 +0000

Yoooo, I'm glad you're here! We'll be discussing how to conquer asynchronous JavaScript! As I've been trying to teach myself Node.js and build some things, I've found that async calls aren't the most trivial to learn to deal with. Async JavaScript actually takes a good amount of thought to fully comprehend. I hope to pave a path that makes understanding how to deal with async calls faster and easier.

You can find all of the code used in this article on GitHub.

What's the Problem?

JavaScript is a synchronous language, which means it is single-threaded, so it only runs one block of code at a time. A problem occurs when we want to make some sort of async call, which is a multi-threaded. The problem is that when our JavaScript calls an async function - our JavaScript continues to run, although there is a block of code running somewhere else. I run into this problem the most when I am dealing with API requests.

Here's an example -

The JavaScript block starts
An API request is made
JavaScript code continues AND the API request processes
JavaScript uses the request's response before the response is returned

Notice how there are two number threes? That's the problem. The JavaScript code continues to run as the request is being made. This means it's possible for the JavaScript to attempt to use the request's response value before it's available, and we take the L.

The Goal

The goal is to be able to call async functions in a synchronous fashion - the calls should wait for the one before it to finish before executing:

Which will look something like this when there are multiple async calls:

var a = await asyncToGetA();
var b = await asyncToGetB(a);
alert(b);

Using Callbacks

What's a Callback?

So how do we overcome this issue? Well, let's first take a look at callback functions so that we can get a glance at a potential fix. Callbacks are a way of telling the code to run a function after another function is finished, if your code isn't making too many async calls then this is an ok option to use. This is achieved by passing a function into another function as an argument, and then calling the argument function at the end of the one it's passed to.

Let's say we have a function, runThisFirst(), that we want to run before another function, runThisSecond(). runThisFirst() will simulate an async call with setTimeout() and set x to 5. Once that's finished, runThisSecond() will run. Since we want runThisSecond() to run after runThisFirst(), we are going to pass it as the callback function:

// Define functions
var runThisFirst = function(callback){
    setTimeout(function(){ 
        x = 5;
        callback(); // runThisSecond is called
    }, 3000);
}

var runThisSecond = function(){
    alert(x);
}

// Run functions, pass runThisSecond as the callback argument 
var x;
runThisFirst(runThisSecond);

You can run this code snippet on JSFiddle.

Callback Chaining

If callbacks fix our async issue, then can't we just chain callbacks together? You can, but it gets scary. There's this concept of Callback Hell where the callback JavaScript code turns into a pyramid shape, making it messy and hard to understand.

Here's a minimalist example of what the skeleton of a Callback Hell pyramid looks like:

function one() {
  setTimeout(function() {
    console.log('1. First thing setting up second thing');
    setTimeout(function() {
      console.log('2. Second thing setting up third thing');
      setTimeout(function() {
        console.log('3. Third thing setting up fourth thing');
        setTimeout(function() {
          console.log('4. Fourth thing');
        }, 2000);
      }, 2000);
    }, 2000);
  }, 2000);
};

One of the best programming practices is writing readable code, and callbacks can stray us away from that when chaining too much. To avoid this, we're going to look into Promises and Async/Await.

Promises

A promise function is a function that promises to return a value. This allows you to associate code with async calls, all by having the async calls be apart of the Promise. This is where we can make our API calls. :) Here's how they work:

var somePromise = new Promise((resolve, reject) => {
  var x = 5;
  // Now wait a bit for an "async" call
  setTimeout(function(){
    resolve(x); // Return your promise!
  }, 3000);
});

You can see the Promise constructor has two parameters: resolve, and reject. If everything within the Promise goes according to plan (there are no errors), resolve is called, which returns some value for the Promise. If an error occurs, the Promise should call reject and return the error. For this example, reject is not being called.

Now, let's try to run something that depends on this Promise to see if it waits for the x value to be resolved before executing. We can do this by using the .then function:

var somePromise = new Promise((resolve, reject) => {
  var x = 5;
  // Now wait a bit for an "async" call
  setTimeout(function(){
    resolve(x); // Return your promise!
  }, 3000);
});

somePromise.then((somePromisesReturnValue) => {
  alert("Check it out: " + somePromisesReturnValue);
});

You can run this code snippet on JSFiddle.

Check it out! Things are already looking cleaner and easier to understand. Nice job. :) But now, what if one Promise depends on another Promise? We'll have to chain Promises together.

In order to pass values from one Promise to another, we are going to wrap the Promise within a function like so:

function somePromise() {
  var promise = new Promise((resolve, reject) => {
    var x = 5;
    // Now wait a bit for an "async" call
    setTimeout(function() {
      resolve(x); // Return your promise!
    }, 3000);
  });
  return promise;
}

Promise Chaining

Now we can write another Promise, anotherPromise(), which is going to take the return value of somePromise() and add 1 to it. This function is going to have a shorter setTimeout(), so we can tell that it waits for somePromise() to resolve before running. Notice how we pass somePromisesReturnValue as an argument:

function anotherPromise(somePromisesReturnValue) {
  var promise = new Promise((resolve, reject) => {
    var y = somePromisesReturnValue + 1; // 6
    // Now wait a bit for an "async" call
    setTimeout(function() {
      alert("Resolving: " + y);
      resolve(y); // Return your promise!
    }, 1000);
  });
  return promise;
}

Now, all we have to do is use the .then function in order to call these Promises synchronously:

function somePromise() {
  var promise = new Promise((resolve, reject) => {
    var x = 5;
    // Now wait a bit for an "async" call
    setTimeout(function() {
      resolve(x); // Return your promise!
    }, 3000);
  });
  return promise;
}

function anotherPromise(somePromisesReturnValue) {
  var promise = new Promise((resolve, reject) => {
    var y = somePromisesReturnValue + 1; // 6
    // Now wait a bit for an "async" call
    setTimeout(function() {
      alert("Resolving: " + y);
      resolve(y); // Return your promise!
    }, 1000);
  });
  return promise;
}

somePromise().then(anotherPromise);

You can run this code snippet on JSFiddle.

Heck yeah! You can see that anotherPromise() waited for somePromise()'s return value, 5, before it executed its code. Things are really looking up. :)

Async/Await

Awesome! So we're done, right? Nope, but we're close! If we take our code from the last section, and try to assign the return value from the Promise chain, we can see that the rest of the code isn't waiting for the entire Promise chain to resolve. "[object Promise]" is alerted first.

function somePromise() {
  var promise = new Promise((resolve, reject) => {
    var x = 5;
    // Now wait a bit for an "async" call
    setTimeout(function() {
      resolve(x); // Return your promise!
    }, 3000);
  });
  return promise;
}

function anotherPromise(somePromisesReturnValue) {
  var promise = new Promise((resolve, reject) => {
    var y = somePromisesReturnValue + 1; // 6
    // Now wait a bit for an "async" call
    setTimeout(function() {
      alert("Resolving: " + y);
      resolve(y); // Return your promise!
    }, 1000);
  });
  return promise;
}

var chainValue = somePromise().then(anotherPromise);
alert(chainValue); // This is executing before chainValue is resolved

You can run this code snippet on JSFiddle.

How do we make the rest of the code wait?! That's where async and await come in. The async function declaration defines an async function, a function that can make async calls. The await operator is used to wait for a Promise to resolve, it can only be used inside an async function.

Mission Accomplished

Instead of using .then, let's create a main() function so that we can make calls like the goal we had at the beginning of the article:

function somePromise() {
  var promise = new Promise((resolve, reject) => {
    var x = 5;
    // Now wait a bit for an "async" call
    setTimeout(function() {
      resolve(x); // Return your promise!
    }, 3000);
  });
  return promise;
}

function anotherPromise(somePromisesReturnValue) {
  var promise = new Promise((resolve, reject) => {
    var y = somePromisesReturnValue + 1; // 6
    // Now wait a bit for an "async" call
    setTimeout(function() {
      resolve(y); // Return your promise!
    }, 1000);
  });
  return promise;
}

const main = async () => {
  var a = await somePromise();
  var b = await anotherPromise(a);
  alert(b);
}
main();

You can run this code snippet on JSFiddle.

Look how pretty that main function is :') beautiful. And there you have it, a nice looking main function that isn't a pyramid. Congratulations!

Adding Broad Error Handling

You may want to add some error handling within your Promises themselves while using the reject callback, but you can also add overall error handling with a try/catch inside of the main() function that will catch any errors thrown throughout all of the code used within the main() function:

const main = async () => {
  try{
    var a = await somePromise();
    var b = await anotherPromise(a);
    alert(b);
  }
  catch(err){
    alert('Oh no! Something went wrong! ERROR: ' + err);
  }
}

We can check this by throwing an error within our anotherPromise():

function somePromise() {
  var promise = new Promise((resolve, reject) => {
    var x = 5;
    // Now wait a bit for an "async" call
    setTimeout(function() {
      resolve(x); // Return your promise!
    }, 3000);
  });
  return promise;
}

function anotherPromise(somePromisesReturnValue) {
  var promise = new Promise((resolve, reject) => {
    var y = somePromisesReturnValue + 1; // 6
    throw 3292; // ERROR CODE BEING THROWN HERE
    setTimeout(function() {
      resolve(y);
    }, 1000);
  });
  return promise;
}

const main = async () => {
  try{
    var a = await somePromise();
    var b = await anotherPromise(a);
    alert(b);
  }
  catch(err){
    alert('Oh no! Something went wrong! ERROR: ' + err);
  }
}
main();

You can run this code snippet on JSFiddle.

Review

I'm glad that we were able to make it this far and come up with a pretty basic path for overcoming JavaScript async problems! We took a look at fixing async issues with callbacks, which can work if there isn't too much complexity. Then we dove into solving the problem with combining Promises and Async/Await! Finally, we talked about how to broadly handle errors. If you would like to learn more about error handling with Promises and Async/Await, I suggest you check out some documentation: Promise.prototype.catch() and await.
If you'd like to work on something where this async functionality could be useful, think about checking out my article on how to make a Twitter bot with Node.js. :)

Make a Node.js Twitter Bot: Bogus Definition

Ryan — Thu, 12 Oct 2017 16:54:09 +0000

Wassup wassup, I'm glad you're here! We'll be discussing how to create a Twitter bot. A Twitter bot is an account that is connected to a hosted app that uses the Twitter API in order to make requests for that Twitter bot, such as tweeting, retweeting, liking, and more. Bots are a fun way to improve your coding skills through creativity, there are a bunch of different APIs available that you can use to make your bot do all sorts of things. Throughout the article, I'll be referencing the setup of one of my bots, @BogusDefinition. This bot tweets out random words with definitions that seem correct, but actually aren't.

You can find all the code used in this article on GitHub.

There are three main sections to this article. Following the article will walk you through the entire setup of a Twitter bot - from setting up your bot's app with Twitter, to hosting the bot with its upgraded functionality on a live server:

Hello, Twitter Bot
Making the Bot Smarter
Deploying the Bot

Hello, Twitter Bot

Creating the App

The first thing that you want to do is create the Twitter account for your bot. After you've got the account set up, you can head on over to the Twitter's Application Management page. You should see something like this, click on "Create New App".

It will prompt you for some information, such as name, description, and website. For the website, you can use your GitHub account's URL - or some other URL that you feel is valid. Check the "Developer Agreement" checkbox, and click "Create your Twitter application".

Your Keys & Access Tokens

In order for your Node.js app to be authenticated when requesting from the Twitter API, you've got to include keys and access tokens. These keys and access tokens work a lot like a username and password, they allow your Node.js app to "login" to the Twitter account. On your Twitter app's page, you should see an "Application Settings" tab, with a "Consumer Key" section.

Click on the highlighted link, "manage keys and access tokens". You'll see the following page. Copy down the Consumer Key (API Key), and Consumer Secret (API Secret). Then go ahead and click "Create my access token" at the bottom. Copy the Access Token, and Access Token Secret.

The Bot's First Tweet

Now that you have your keys and access tokens, you can start developing the code for your bot. Create a new folder on your computer for your bot's code. Inside of the folder, create a file called env.js. This file should be at the root of your project and is going to contain your environment variables, which will include the keys and access tokens you just created. :) env.js should look like this:

    process.env['TWITTER_CONSUMER_KEY'] = '1mFxGkYQPEuxqbtHd55cb89';
    process.env['TWITTER_CONSUMER_SECRET'] = 'IK1ytDHhtzF4AUvh5fkmoaBC1mTvmWT18WjAhl3Y9bQv5y8o';
    process.env['TWITTER_ACCESS_TOKEN'] = '2057253019-IpiUHS9FuJqPQSQbaChVHvEza1J08QZlJYY3Z';
    process.env['TWITTER_ACCESS_TOKEN_SECRET'] = 'jHj81H3qYUOrOSXNg6RMVAPaKgMv6pz0ogs1YWeJ7pa';

Be sure to use your own keys and access tokens!

The next thing you need to do is create a file called index.js. This file is going to be the main file for your bot, it will start your bot. First, I'll break this file down by each section, then show a shot of its entire content.

You want to set up your required Node packages at the top of the file. The packages that we are using are Express, Request, and Twit. Express allows us to set up a minimalist web framework. Request will give us the capability to make easy HTTP requests in order to make some API calls. Last but not least, Twit will make it easy for us to access the Twitter API:

var express = require('express');
var twit = require('twit');
var request = require('request');

The next bit is pretty simple, it creates the Express app and sets the port:

var app = express();
app.set('port', process.env.PORT || 5000);

The next part is where you're going to use the the env.js variables, these are the variables that let our app receive authentication when connecting to Twitter. When initializing your bot with the Twit package, you've got to pass your keys and tokens as parameters like this:

if(process.env.TWITTER_CONSUMER_KEY == undefined){
  require('./env.js');
}
var bot = new twit({
  consumer_key:         process.env.TWITTER_CONSUMER_KEY,
  consumer_secret:      process.env.TWITTER_CONSUMER_SECRET,
  access_token:         process.env.TWITTER_ACCESS_TOKEN,
  access_token_secret:  process.env.TWITTER_ACCESS_TOKEN_SECRET,
  timeout_ms:           60*1000,  // optional HTTP request timeout to apply to all requests. 
});

The if-statement is used in order to figure out whether the application is running locally or on a server. If TWITTER_CONSUMER_KEY is defined, the app knows it's running on a server that has the definition already. If it is not defined, then the app knows it needs to include the env.js file that we have locally. This env.js file will not be a part of the GitHub repo.

Taking a look at the Twit documentation you can see that you're able to post a tweet quite easily. There is a .post function that you are able to call. Make your bot tweet "Beep boop bop!" with this block:

bot.post('statuses/update', { status: 'Beep boop bop!' }, function(err, data, response) {
  console.log('Success!');
});

Almost there! You just need to tell your app what port to listen to:

app.listen(app.get('port'), function() {
  console.log('Bot is running on port', app.get('port'));
});

Your entire index.js file should look like this:

var express = require('express');
var twit = require('twit');
var request = require('request');

var app = express();
app.set('port', process.env.PORT || 5000);

if(process.env.TWITTER_CONSUMER_KEY == undefined){
  require('./env.js');
}
var bot = new twit({
  consumer_key:         process.env.TWITTER_CONSUMER_KEY,
  consumer_secret:      process.env.TWITTER_CONSUMER_SECRET,
  access_token:         process.env.TWITTER_ACCESS_TOKEN,
  access_token_secret:  process.env.TWITTER_ACCESS_TOKEN_SECRET,
  timeout_ms:           60*1000,  // optional HTTP request timeout to apply to all requests. 
});

bot.post('statuses/update', { status: 'Beep boop bop!' }, function(err, data, response) {
  console.log('Success!');
});

app.listen(app.get('port'), function() {
  console.log('Bot is running on port', app.get('port'));
});

Running Your Bot

Before you're able to run your bot locally, you've got to install --save each of the Node packages that are being used. So, from your app's root folder, run the commands npm install --save express, npm install --save request, npm install --save twit. If you haven't run a Node.js application locally before, you can give my article Node.js + Express Server Setup a glance.

Okay, cool! Your bot is ready to send its first tweet! Start up your bot with node index.js, and you should see "Success!" on the command-line. Check out your bot's Twitter profile, and you'll see that it tweeted "Beep boop bop!"

Making the Bot Smarter

It's dope that you've got the bot tweeting, but there's more to do now! This is where the fun part starts. Your bot can't actually get smarter, but we can make people believe it is with some simple API calls. ;) Bogus Definition is a bot that tweets a random word, with a definition that sounds kind of right, but isn't. This is accomplished by requesting a random word from Wordnik, then a rhyming word of that random word, then a definition of that rhyming word, and then finally combining the random word with the rhyming word's definition.

Tweet -- "randomWord: rhyming word's definition"

In this section, I'll show you how I did that.

API Calls

The Request package is going to make it easy for us, too! Let's kick things off by tweeting out a random word. You might ask, how are we going to get a random word? Well, check out the Wordnik API. Under words, there's a randomWord endpoint that we can access with an HTTP request, and it will give us a random word. In order to do that, we need to use request. You can get the request URL by clicking the "Try it out!" button under the Wordnik endpoint section.

Here's the randomWord request:

randomWord = 'http://api.wordnik.com:80/v4/words.json/randomWord?hasDictionaryDef=true&minCorpusCount=0&maxCorpusCount=-1&minDictionaryCount=1&maxDictionaryCount=-1&minLength=5&maxLength=-1&api_key=' + process.env.WORDNIK_KEY;
  request(randomWord, function (error, response, body) {
    randomWord = JSON.parse(body).word;
  });

I've signed up for a Wordnik account, and added my Wordnik API key to my env.js file as WORDNIK_KEY. You can do this too here. After you sign up, you can find your API key under your account settings at the bottom of the page.

Now inside of that request call, we can tweet the word that we received. You'll notice this line JSON.parse(body).word. We are receiving body as a JSON-formatted text response, and parsing it to a JSON object. This body is the response from the server, which contains our random word, under the .word attribute. If you haven't heard of JSON, or parsing it, you can learn more here. It's very useful, so be sure you understand! After you've parsed your random word, you can tweet it by putting a .post call inside of your request callback (the second parameter of the request function call):

request(randomWord, function (error, response, body) {
    // When the request finishes, this post will be called
    bot.post('statuses/update', { status: randomWord}, function(err, data, response) {
        console.log("Success!");
    });
});

Go ahead and run your bot with the command-line. Your index.js should look like this now:

var express = require('express');
var twit = require('twit');
var request = require('request');

var app = express();
app.set('port', process.env.PORT || 5000);

var bot = new twit({
  consumer_key:         process.env.TWITTER_CONSUMER_KEY,
  consumer_secret:      process.env.TWITTER_CONSUMER_SECRET,
  access_token:         process.env.TWITTER_ACCESS_TOKEN,
  access_token_secret:  process.env.TWITTER_ACCESS_TOKEN_SECRET,
  timeout_ms:           60*1000,  // optional HTTP request timeout to apply to all requests. 
});

randomWord = 'http://api.wordnik.com:80/v4/words.json/randomWord?hasDictionaryDef=true&minCorpusCount=0&maxCorpusCount=-1&minDictionaryCount=1&maxDictionaryCount=-1&minLength=5&maxLength=-1&api_key=' + process.env.WORDNIK_KEY;
request(randomWord, function (error, response, body) {
    // When the request finishes, this post will be called
    bot.post('statuses/update', { status: randomWord}, function(err, data, response) {
        console.log("Success!");
    });
});

app.listen(app.get('port'), function() {
  console.log('Bot is running on port', app.get('port'));
});

Asynchronous Problem

Okay, you've got a random word, and now want a rhyming word. So, all you need to do is make another request with the randomWord variable, right? Kind of, but there's a problem. Making a request is an asynchronous call. This means that when we make the request, that our request gets sent to the API, and at the same time our code continues to run. The problem with this is that our code is not waiting for the API response before continuing. So, it's possible that our code will try to make the second API request for the rhyming word before the random word is even returned, which will result in an undefined return value. How do we fix this? If you want a solution better than callbacks, check out The Path to Conquering Async JavaScript.

Callbacks

There are multiple ways to solve the asynchronous problem depending on what exactly you're doing, you can check out async functions, and promises. I'm going to solve the problem using callbacks. A callback function is a function passed into another function as an argument, which is then called once the outer function is done executing.

Here's an example, first runThisFunctionFirst is called, and it gets passed runThisFunctionSecond as the parameter callback. So, runThisFunctionFirst will add 2 to the number parameter, and once it's finished doing that, it will call callback which is runThisFunctionSecond and pass it plusTwo. Then, runThisFunctionSecond will log the value after runThisFunctionFirst is done doing its work.

function runThisFunctionSecond(plusTwo) {
  console.log('The input number + 2 is: ' + plusTwo);
}

function runThisFunctionFirst(number, callback) {
  var plusTwo = number + 2;
  callback(plusTwo); // this runs theCallbackFunction because it was passed as an arguement
}

runThisFunctionFirst(number, runThisFunctionSecond);

Bogus Definition Chain

So how is this going to solve our problem? Well, we can make a callback chain similar to this with three functions: getWord, getRhymingWord, and getRhymingDef. These will be called just like runThisFunctionFirst and runThisFunctionSecond, but we will have a third function that would be equivalent to runThisFunctionThird.

Let's go ahead and create some global variables that will hold our content, and create our first function:

// Global variables needed to create the tweet
var randomWord;
var rhymingWord;
var rhymingDef;

function getWord(callback){
  randomWord = 'http://api.wordnik.com:80/v4/words.json/randomWord?hasDictionaryDef=true&minCorpusCount=0&maxCorpusCount=-1&minDictionaryCount=1&maxDictionaryCount=-1&minLength=5&maxLength=-1&api_key=' + process.env.WORDNIK_KEY;
  request(randomWord, function (error, response, body) {
    randomWord = JSON.parse(body).word;
    callback(randomWord);
  });
};

Now, getWord will need to be passed a function getRhymingWord so that it can call it once it's finished making its request.

Notice that callback is being called within the second parameter of the request call, it needs to be there because the second parameter is called once the API returns a value.

You can see getRhymingWord needs two parameters: one for the randomWord that is returned by the request and another for the callback function, which will be getRhymingDef.

function getRhymingWord(randomWord, callback){
  rhymingWord = 'http://api.wordnik.com:80/v4/word.json/' + randomWord + '/relatedWords?useCanonical=false&relationshipTypes=rhyme&limitPerRelationshipType=10&api_key=' + process.env.WORDNIK_KEY;
    request(rhymingWord, function (error, response, body) {
    try{
      rhymingWord = JSON.parse(body)[0].words[0];
      callback(rhymingWord);
    }catch(err){
      sendTweet(); // The word didn't rhyme with anything... restart
    }
  });
};

Now we can add the third function:

function getRhymingDef(rhymingWord, callback){
  rhymingDef = 'http://api.wordnik.com:80/v4/word.json/' + rhymingWord + '/definitions?limit=200&includeRelated=true&useCanonical=false&includeTags=false&api_key=' + process.env.WORDNIK_KEY;
  request(rhymingDef, function (error, response, body) {
    rhymingDef = JSON.parse(body)[0].text;
    callback(rhymingDef);
  });  
};

We still aren't calling the functions yet, so let's create a function called sendTweet that will be called once our bot starts up. This function will implement the callback chain. It will work just like the example that we used. First it calls getWord and passes nowGetRhymingWord as the callback function. Then inside of getWord it calls callback which is nowGetRhymingWord and passes it nowGetRhymingDef, and so on:

var sendTweet = function(){
  getWord(nowGetRhymingWord);
  function nowGetRhymingWord(randomWord){
    getRhymingWord(randomWord, nowGetRhymingDef);
    function nowGetRhymingDef(rhymingWord){
      getRhymingDef(rhymingWord, nowReturnTweet);
      function nowReturnTweet(definition){
        var wordAndDef = capitalizeFirstLetter(randomWord) + ": " + rhymingDef;
        bot.post('statuses/update', { status: wordAndDef }, function(err, data, response) {
          console.log("Success!");
        });
      }
    }
  }
}

Notice there is a helper function capitalizeFirstLetter. I added this because the response from Wordnik is not capitalized when getting a word. The function looks like this:

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

Okay... but sendTweet still isn't being called! Let's call it, and set an interval for it to be called:

// Send tweet every 28 minutes, and on start
setInterval(function() {
  sendTweet();
}, 1700000);
sendTweet();

So your entire index.js file should now look like this:

var express = require('express');
var twit = require('twit');
var request = require('request');

var app = express();
app.set('port', process.env.PORT || 5000);

if(process.env.TWITTER_CONSUMER_KEY == undefined){
  require('./env.js');
}

var bot = new twit({
  consumer_key:         process.env.TWITTER_CONSUMER_KEY,
  consumer_secret:      process.env.TWITTER_CONSUMER_SECRET,
  access_token:         process.env.TWITTER_ACCESS_TOKEN,
  access_token_secret:  process.env.TWITTER_ACCESS_TOKEN_SECRET,
  timeout_ms:           60*1000,  // optional HTTP request timeout to apply to all requests. 
})
///////////////////////////////////

// Global variables needed to create the tweet
var randomWord;
var rhymingWord;
var rhymingDef;

// Callback chain
var sendTweet = function(){
  getWord(nowGetRhymingWord);
  function nowGetRhymingWord(randomWord){
    getRhymingWord(randomWord, nowGetRhymingDef);
    function nowGetRhymingDef(rhymingWord){
      getRhymingDef(rhymingWord, nowReturnTweet);
      function nowReturnTweet(definition){
        var wordAndDef = capitalizeFirstLetter(randomWord) + ": " + rhymingDef;
        bot.post('statuses/update', { status: wordAndDef }, function(err, data, response) {
          console.log("Success!");
        });
      }
    }
  }
}

// Send tweet every 28 minutes, and on start
setInterval(function() {
  sendTweet();
}, 1700000);
sendTweet();

function getWord(callback){
  randomWord = 'http://api.wordnik.com:80/v4/words.json/randomWord?hasDictionaryDef=true&minCorpusCount=0&maxCorpusCount=-1&minDictionaryCount=1&maxDictionaryCount=-1&minLength=5&maxLength=-1&api_key=' + process.env.WORDNIK_KEY;
  request(randomWord, function (error, response, body) {
    randomWord = JSON.parse(body).word;
    callback(randomWord);
  });
};

function getRhymingWord(randomWord, callback){
  rhymingWord = 'http://api.wordnik.com:80/v4/word.json/' + randomWord + '/relatedWords?useCanonical=false&relationshipTypes=rhyme&limitPerRelationshipType=10&api_key=' + process.env.WORDNIK_KEY;
    request(rhymingWord, function (error, response, body) {
    try{
      rhymingWord = JSON.parse(body)[0].words[0];
      callback(rhymingWord);
    }catch(err){
      sendTweet(); // The word didn't rhyme with anything... restart
    }
  });
};

function getRhymingDef(rhymingWord, callback){
  rhymingDef = 'http://api.wordnik.com:80/v4/word.json/' + rhymingWord + '/definitions?limit=200&includeRelated=true&useCanonical=false&includeTags=false&api_key=' + process.env.WORDNIK_KEY;
  request(rhymingDef, function (error, response, body) {
    rhymingDef = JSON.parse(body)[0].text;
    callback(rhymingDef);
  });  
};

// Helper function for to capitalize the random word
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// Tells the Express app to listen to a port
app.listen(app.get('port'), function() {
  console.log('Node app is running on port', app.get('port'));
});

Deploying the Bot

Hey hey! Your bot can now run from the command-line. But you don't want it to have to run on the command-line for its entire life, so let's deploy it to Heroku. If you haven't deployed a Heroku app before, check out my article Auto-Deploy a Node.js Server: Heroku + GitHub. It will give you all of the steps you need to get the code connected, but you will still need to get config variables going on your Heroku app. I'll talk about that next here.

When deploying your app, don't include env.js in your GitHub repo.

Heroku Config Vars

Remember making the env.js file? Well, Heroku doesn't have it because it's not included in your GitHub repo. We do this because we don't want the entire internet knowing your Twitter app's authentication information! If someone were to find those keys and tokens, they could go ahead and start using your bot for their own purposes. But there's good news, under your Heroku app's "Settings" tab, there is a "Config Variables" section. Click on "Reveal Config Vars", and here you can add all of the information that is inside your env.js file, and it will stay hidden within Heroku, out of sight from the rest of the internet. :)

Sleepy Bot Problem

Heroku will put your app to sleep if it hasn't been pinged in a while. That means, if the address of your Heroku app isn't visited, that your bot won't work anymore. You're in luck though, under the Heroku app's "Resources" tab, there is an "Add-ons" section. Here you can search for and add "Heroku Scheduler" to your app.

This allows you to schedule command-line calls of your choice. With this, you can have the scheduler call node index.js every day, hour, or 10 minutes to make your bot stay awake and tweet!

Review

Congratulations! You've successfully built and deployed a Node.js Twitter bot! You did this by using multiple Node packages, making multiple API calls using a callback chain, and deploying to Heroku. Now it's time to get creative with some other APIs to make your bot do different things. Here's a fun list of APIs that you can check out to inspire your bot's next function. :) Please comment below if you have any comments, questions, or concerns! I'll be happy to reply.

Other Twitter Bots

I've created some other bots, you can find them all at:

Bogus Definition: Tweets bogus definitions.
Just Doing Junk: Retweets people who are just doing things.
Spots Of Midnight: Tweets the spots of midnight around the world.

Auto-Deploy a Node.js Server: Heroku + GitHub

Ryan — Thu, 05 Oct 2017 17:17:47 +0000

Yo yo yo, I'm glad you're here! We'll be discussing how to auto-deploy a Node.js server on Heroku through GitHub integration. This means that whenever you push a change to your GitHub repo that it will automatically deploy your server on Heroku with those changes! This makes it easy to keep your live app and repo in sync, you no longer have to keep track of them separately! If you haven't set up a Node.js server locally before, check out Node.js + Express Server Setup first.

You can find the code used in this article on GitHub.

There are three main sections in this article. Following them will take you through the entire process of setting up your GitHub repo/Heroku server, connecting the two, and auto-deploying:

GitHub Repo Setup
Heroku App Setup
Auto-Deploying the Server

GitHub Repo Setup

Creating the Repo

First, you want to make sure that you have the Git CLI installed, this will allow you to perform git commands with your local command-line to interact with your GitHub repo.
Now you need to create your GitHub repo. There are ways to do this with the command-line, but I do this through the GitHub site by clicking the "New repository" option under the "+" drop-down at the top right of the page.

Go ahead and give your repo a name, it can be anything you'd like. Also, check the "Initialize this repository with a README" checkbox. Finish up by clicking "Create repository".

Cloning the Repo

Find and open up your repo on GitHub and look for the green "Clone or download" drop-down, and copy the link inside.

Now that you've got your repo created and its clone link, you can clone it to your computer. On your computer somewhere, create a folder that you would like the code to go under. Open up your command-line and navigate to the inside of the folder that you created. Command-line navigation instruction can be found here. Run the command:

git clone [your repo's clone link]

So, what exactly did this command do? If you take a glance at the folder you cloned in, the README.md file that was created along with your repo is now inside. That's not it, either. Allow your hidden folders to show and you'll see a .git folder. You can give this folder a look, but don't edit anything. It's hidden because its information is sensitive. Its basic function is to connect and sync your GitHub repo with the one that is now on your computer. Cool, now you can move on to getting your Heroku server set up.

Server Preparation

Running a server locally is a bit different than running it on Heroku. If you haven't already, copy the files from this repo to the folder that you created for your server. You'll notice it has a bare-bones Node.js server structure. There's an index file, and a package file, but there's also this Procfile. So, what is the Procfile? It tells Heroku which command to run when starting the app. If you look at its content, you'll see:

web: node index.js

This command node index.js is the same command that you can run from your command-line to start your server locally - but Heroku needs it to be inside of the Procfile so that it knows which command to run in order to start the server itself.

Pushing to GitHub

Now that you've got the files copied to your folder, you can go ahead and push them to your GitHub repo. In order to do that you need to use these commands on the command-line, within your folder, in this order:

git add index.js package.json Procfile
git commit -m "Server prep"
git push origin master

^{If you're having trouble pushing to the repo you created, make sure you didn't include the .git folder from the repo you copied the server files from; you should only have one .git folder inside your top-level folder - the one that was copied with your initial GitHub repo.}

Heroku App Setup

Creating the Heroku App

Jump on over to Heroku and click "Create new app" from the "New" drop-down menu at the top right of the page.

This will prompt you for a name, use kebab casing. After you've entered a name you're happy with, click the "Create app" button.

Connecting GitHub

Navigate to your newly created Heroku app, and click on the "Deploy" tab:

Under this deploy tab, you'll see a section called "Deployment method". In this section you'll see an option "Connect to GitHub", click on that.

It will ask you to connect your GitHub account, and then ask you to choose which GitHub repo to connect to the Heroku app. Connect the Node.js GitHub repo that you created previously.

Auto-Deploying the Server

You've connected your Heroku app and GitHub repo, but you don't have auto-deployments quite yet. Check out the "Automatic deploys" section that's also under the "Deploy" tab.

Click the button "Enable Automatic Deploys". This will make it so that whenever you push changes to the main branch of your GitHub repo, Heroku will detect those changes, and automatically deploy the server.

Triggering Auto-Deployment

In order to trigger an auto-deploy, you've got to make a change to the code, and push it to your GitHub repo. Let's change the response string of your first route in index.js. Change it to anything you want, and it should be displayed on your browser when you open your app. I'm changing my route's response to look like this:

// Our first route
app.get('/', function (req, res) {
  res.send('Hello Node + GitHub! This code push has auto-deployed!');
});

Now go through the same steps we discussed previously to push these changes to the GitHub repo: git add index.js, git commit -m "Changed route response", and finally git push origin master.

If you take a look at your Heroku app's dashboard, you'll see there is a build log under the "Overview" tab:

If you click "Open app", you'll see the response from your auto-deployed code:

Review

Congratulations! You've just set up a Node.js server on Heroku with auto-deploy capability through GitHub integration. You did this by creating a Node.js GitHub repo, defining the server and its Procfile, creating a Heroku app, and configuring the auto-deployment option to deploy on new code pushes to the main branch of your GitHub repo. You no longer have to worry about syncing your Heroku app and GitHub repo manually, the code is all in one place! If you'd like to learn more about organizing your routes, check out External Routes with Node.js.

DEV Community: Ryan

My Personal Site's Tech Stack

Preact CLI

Styled Components

AOS

Netlify + GitHub

Google Analytics (GA4)

Figma

Angular Component Considerations

Performance 🏃

Usability 🔨

Readability 📘

Misc. 🌀

Design Patterns: Decorator

Overview

Definition

Implementation

Example Code

Disclaimer: There are a lot of resources for learning design patterns, and they can be implemented in different ways. I would recommend exploring more resources when finished with this post.

Design Patterns: Observer

Overview

Definition

Implementation

Example Code

Disclaimer: There are a lot of resources for learning design patterns, and they can be implemented in different ways. I would recommend exploring more resources when finished with this post.

Design Patterns: Factory

Overview

Definition

Implementation

Example Code - Creating Books

Disclaimer: There are a lot of resources for learning design patterns, and they can be implemented in different ways. I would recommend exploring more resources when finished with this post.

Design Patterns: Singleton

Overview

Definition

Implementation

Real-World Examples

Disclaimer: There are a lot of resources for learning design patterns, and they can be implemented in different ways. I would recommend exploring more resources when finished with this post.

Making a Node.js SoundCloud Music Player

Contents

Hello, SoundCloud Player

Creating the App

server.js -

Structuring the App

client.ejs -

Playing Music

Understanding NPM Packages and Bundling

Writing the Player

player.js -

Adding Functionality

client.ejs -

player.js -

player.js -

client.ejs -

Review

Junior Dev Learning: Wrapper Classes

Overview

What is a Wrapper Class?

Bare-Bones Wrapper Example

Real-World Wrapper Example

Let's Solve: Code Challenge - Picking Numbers

Problem

Input/Constraints & Examples

Brute Force

Optimization & Walkthrough

Implementation

Results

Takeaways

The Path to Conquering Async JavaScript

What's the Problem?

The Goal

Using Callbacks

What's a Callback?

Callback Chaining

Promises

Promise Chaining

Async/Await

Mission Accomplished

Adding Broad Error Handling

Review

Make a Node.js Twitter Bot: Bogus Definition