DEV Community: Clayton

Setting Up Typescript with ESLint in 5 Easy Steps

Clayton — Mon, 01 Feb 2021 19:55:56 +0000

Backstory

In June 2019, the team at Microsoft shared a roadmap for TypeScript which included an overhaul to the way they handle linting. One of the major changes to come about was the deprecation of TSLint and the adoption of ESLint as the formal linter of choice.

This article assumes you are starting a brand new project, but if you want to migrate from TSLint over to ESLint, the VSCode team has provided a wonderful walkthrough.

Because of these changes, the ESLint team is no longer maintaining the typescript-eslint-parser package and they instead recommend using @typescript-eslint/parser.

Setup

In order to get started, you'll need to navigate to your projects directory and run the following sequence of commands:

1) yarn init -y

This will create a brand new project.json file using the recommended default configuration.

2) yarn add -D typescript eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

This installs the necessary base packages to get typescript and eslint integrated into the project.

3) touch .eslintrc.js

This creates your eslint configuration file where you can specify rules, options, settings, and much more. You'll want to add any necessary configuration options to the file as a part of this step. Make sure to also install any necessary dependencies, if you're extending a base configuration such as airbnb. I've provided a few example configuration files here. These may be helpful if you're using react, react native, or node as your framework of choice, otherwise feel free to start with a blank slate. If you are using a base configuration, you'll want to make sure to install any peer dependencies as well.

4) Add a lint script to your package.json file that was created in step 1.

"scripts": {
  "lint": "eslint --ext .ts ."
}

5) Finally, run the previous script yarn lint to search for any errors or warnings in your .ts and .tsx files.

Thats it! I hope this quick reference guide served useful to you as you begin to build out your next great project!

Quick Note: if you're extending the airbnb-typescript configuration, you may run across the following error:
Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated.
If this happens, you'll first need to add a .tsconfig file to your project, either manually or with the following command: npx tsc --init. Once that's been created, you'll want to update your .eslintrc.js file and include project: './tsconfig.json' under the parserOptions section.

Transitioning from JavaScript to Swift

Clayton — Mon, 04 Jan 2021 13:40:33 +0000

Introduction

If you're like me, mobile development can seem intimidating. I was used to this world where JavaScript was the hammer that solved all problems when it came to web development. There are solutions to mobile development in the JavaScript ecosystem (like React Native) that helped bridge that gap a bit, but I still felt this desire to really understand what was happening behind the curtain. In order to kickstart this journey into mobile development, I began in the most obvious starting place, learning Swift. Swift is the official language created by Apple to develop applications for iOS, macOS, watchOS and tvOS. In this introduction to Swift, I'll explore different concepts and try explaining how they relate to their counterparts (if one exists) in JavaScript. Let's get started!

The Basics

Var - similar to the var and let keyword in JS. Used to initialize scoped variables.

Let - analogous to const in JS. Once it's declared, it cannot be mutated. Small subtlety here in that it can be initialized without an initial value, and eventually set later, but still may only be set once.

Optionals - If you're familiar with TypeScript, these are very similar to nullable values. You declare an optional by appending a ? at the end of the data type declaration. It's essentially telling Swift, "this property may or may not have a value associated with it". If it does not, the value is set to nil and no compilation errors are thrown. Any data type in Swift can be set as an optional.

Side note: In order to retrieve a value from an optional, you must unwrap it in Swift. There are two methods to unwrapping an optional, a forced unwrap where Swift pulls the value out without checking for its existence (the onus is on you to check this). The other, more streamlined, approach is to store it in a temp variable if a value exists, or keep moving along if it doesn't. Both options are shown below:

// declare your optional
var optionalString: String?

// shorter, more concise approach
if let unwrappedString = optionalString {
    print(unwrappedString)
} else {
    //...no value, do something else
}

// must check for value here or app could crash
if optionalString != nil {
    // we are force unwrapping here by using the bang (!) operator
    var unwrappedString = optionalString!
    print(unwrappedString)
}

Data Types

All of your typical primitive data types (bool, char, int, float, etc) are available in Swift, as well as some of your other common types found in JavaScript (string, array). There are even a few others you might not be familiar with if you're coming from a pure JavaScript background (dictionary, set, enum). If you're used to TypeScript, the syntax for declaring these data types may look familiar:

var myString: String
var myInt: Int
var myIntArray: [Int] // Array of Int
var students: [Int: String] // Dictionary of Int keys and String values
enum animalEnum {
    case lion
    case tiger
    case bear
}

With the string data type also comes string interpolation, which does exist in Swift but the syntax may look a bit different than what you're used to:

let firstName = "Foo"
let lastName = "Barr"
let age = 30

//string interpolation
print("Hello, my name is \(firstName) \(lastName), and I'm \(age) years old!")

Functions

Functions are structured in a similar way to what you might be used to, with a few minor differences thrown in. Functions are declared with the func keyword. Any parameters must identify their data type, and any calling function must explicitly define the arguments it's passing to the function (there are times when this restriction isn't true, but for the sake of this article, I'll stick with the rule of thumb here).

func printHappyBirthdayMessage(age: Int, name: String) {
    print("Happy birthday, \(name)! I can't believe you're already \(age) years old!)
}

printHappyBirthdayMessage(age: 30, name: "Foo Bar")

If you are returning a value, you must specify its data type as well, using the arrow syntax (this may look familiar to arrow functions in JavaScript, except with a single dashed arrow instead of =>):

func calculateSqFeet(length: Int, width: Int) -> Int {
    return length * width
}

Loops

There are three major types of loops in Swift, and are all pretty common in JavaScript: while, repeat-while (analogous to do-while in JavaScript), and for-in loops. The main one that you'll find yourself using is the for-in and its syntax is pretty much the same as JavaScript.

In Swift, there are some additional utilities you can use with loops as well, including range operator to increment by 1:

for number in 0...10 {
    print(number) // this will print out all numbers 0 to 10, including 10
}

for number in 0..<10 {
    print(number) // this will print out all numbers 0 to 9
}

Decrementing is just as easy. There are also going to be times where incrementing one by one is not sufficient. In Swift, using strides make both of these situations a breeze:

for number in stride(from: 0, through: 256, by: 16) {
    print(number) // this will print out all numbers 0 to 256, including 256, and increment by 16 at a time
}

for number in stride(from: 0, to: 256, by: 16) {
    print(number) // this will print out all numbers 0 to and increment by 16 at a time
}

for number in stride(from: 100, through: 0, by: -10) {
    print(number) // this will print out all numbers 100 to 0, including 0, and decrement by 10 at a time
}

Structs and Classes

Structs are very similar to classes in that they group related pieces of information into one body or object. A few differences between the two are that structs cannot implement inheritance and are considered value types, whereas classes are considered reference types in Swift.

Structs also support initializers that get called anytime a new struct is instantiated, but they are not required. The difference here is that classes do require initializers (think constructors in other languages) if default values are not provided. Classes also allow for de-initializers that are used to cleanup after a class reference is removed from memory by the ARC (Automatic Reference Counting), otherwise known as the garbage collector in other languages. Both classes and structs can contain protocols (discussed a bit later in this article) and subscripts as well.

struct Book {
    // static properties
    var title: String
    var author: String
    var genre: String
    var publishYear: Int
    var currentPage: Int
    var totalPages: Int

    //computed property - also available in classes
    var remainingPages: Int {
        // excluding a setter makes it a readonly computed prop
        get {
            return totalPages - currentPage
        }
    }

    // methods
    func overview() -> String {
        return "\(title) is a \(genre) book, written by \(author) in \(publishYear)"
    }
}

var newBook = Book(title: "1984", author: "George Orwell", genre: "Fantasy", publishYear: 1949)

print(newBook.overview()) // "1984 is a Fantasy book, written by George Orwell in 1949"

class Animal {
    var numberOfLegs: Int
    init() {
        self.numberOfLegs = 2
    }

    final func walk() { // using the final keyword ensures this function can't be overwritten
        // ...walk function logic
    }

    deinit {
        // do any cleanup work here
    }
}

class Dog : Animal {
    override init() { // must use the override keyword here
        super.init() // have to call superclass' init method first
        super.numberOfLegs = 4 // to override a property
    }

    func bark () {
        print("woof woof")
    }
}


let myDog = Dog()
print(myDog.numberOfLegs) // prints out 4

Closures

Closures in Swift are blocks of code that you intend to pass to a function or method. You can think of this as an anonymous function you might pass to another function in JavaScript. There are a few ways to write and pass closures and the following three solutions are all valid syntax for declaring closures:

struct Product {
    var id: Int
    var name: String
    var seller: String
    var price: Float
}

let product1 = Product(id: 1, name: "Book", seller: "Foo Industries", price: 12.00)
let product2 = Product(id: 2, name: "Movie", seller: "Foo Industries", price: 15.00)
let product3 = Product(id: 3, name: "Furniture", seller: "Bar Industries", price: 25.50)

let allProducts = [product1, product2, product3]

func sortByPrice(firstProduct: Product, secondProduct: Product) -> Bool {
    if firstProduct.price <= secondProduct.price {
        return true
    } else {
        return false
    }
}

// Closure examples

// 1) just pass in the defined function above
let priceSortedProducts = allProducts.sorted(by: sortByPrice)

// 2) using the "in" keyword
let nameSortedProducts = allProducts.sorted(by: {
    (firstProduct: Product, secondProduct: Product) -> Bool
    in
    if firstProduct.name <= secondProduct.name {
        return true
    } else {
        return false
    }
})

// 3) using the reserved $index Swift provides
let sellerSortedProducts = allProducts.sorted { $0.seller <= $1.seller }
sellerSortedProducts

As you can see in the last example, you can condense your closure down and even remove the return statement if it fits on one line of code.

Extensions

A lot of times, you'll want to extend some behavior that might make it easier to reuse across your application. Swift makes it very easy to extend almost any object, struct, or class by using the extension keyword. For example, if I wanted to add some functionality to the native String type, I could add the following extension method:

extension String {
    func makeSpongebobCase() -> String {
        var newString = ""

        for (index, char) in self.enumerated() {
            let newChar = index % 2 == 0 ? char.uppercased() : char.lowercased()

            newString.append(newChar)
        }

        return newString
    }
}

let text = "Swift is a tough language!"

print(text.makeSpongebobCase()) // SwIfT Is a tOuGh lAnGuAgE!

Protocols

A protocol in Swift is a way to formalize a class or struct's properties and behavior. The easiest way to visualize a protocol is to think of it as a manuscript or list of requirements necessary to implement some behavior or code (in other languages this could be described as an interface).

Implementing a protocol is simple, but there a few things to note. If you need to inherit a super class, it must be defined first. Then you can begin pulling in any necessary protocols. Unlike classes, you can adopt multiple protocols in Swift by separating each one with a comma:

class MySubClass: MySuperClass, SomeProtocol, SecondProtocol { }

Defining a protocol is as simple as listing any required properties and methods needed to implement said protocol:

protocol DogProtocol {
    // what methods are required?
    func bark()
    func eat()
    func drink()

    // what properties/data types are required?
    var name: String { get set }
    var breed: String { get }
    var age: Int { get set }
}

Some caveats to consider

I hope all of the above helped to give a good introduction into Swift, especially if you're coming from a more web-based language like JavaScript. Outside of the foundational programming concepts, there are a few minor components to be aware of when making your way over to the Swift programming language:

Parentheses are not required in if statements, but are allowed. The opening and closing brackets ({}) are required, however.
Semi-colons are also not required to end a line of code.
Switch statements do not flow through, meaning a break keyword is not needed as an exit condition in a case block. Once a matching case has been found, the switch statement exits after the case block executes.
- Multiple case conditions can be checked at once, using comma delimited values:

  switch (myValue) {
      // checking multiple cases
      case 1, 2, 3:
          print("case met")
      case 4:
          //do something else
  }

If a function has the possibility of throwing an error, the throws keyword must be explicitly stated in the function definition, for example:
- func makeNetworkCall(url: String) throws -> Int
When calling a function that may throw an error, a do-catch block might be necessary (similar to a try-catch block in other languages).
- For example, calling the function above might look something like:

  do {
      result = try makeNetworkCall("www.example.com")
  } catch {
      // ...handle error here
  }

If you don't care about catching the error, you can shorten the above code even more using an optional:

  if let result = try? makeNetworkCall("www.example.com") {
      print(result)
  }

A good alternative to writing a bunch of if/else conditions in a function that has a number of optional parameters is using the guard clause. Any guard must have an else block that contains an exit condition if the guard evaluates to false:

    func myOptionalFunction(param1: String?, param2: Int?, param 3: String?) {
        guard let p1 = param1,
            let p2 = param2,
            let p3 = param3 else {
            // ...return/throw/break/continue statement
        }

        // p1, p2, and p3 all accessible here since guard clause was used
    }

One final keyword to take note of is defer. If you find yourself needing to close a connection, or dispose of an object in multiple places, this is a crucial keyword to take advantage of. In Swift, defer will ensure that a block of code runs before exiting the calling block of code (whether thats through a return statement, throwing an error, etc). Defining a defer block is simple:

func processRequest() {
    openConnection()

    defer {
        // something that needs to happen at the end of this function,
        // regardless of what happens during the call of the function
        closeConnection()
    }
}

Disjoint-Set/Union-Find Data Structure

Clayton — Tue, 05 May 2020 14:10:29 +0000

Note: This post is part of the Data Structures and Algorithm series. To see more posts from this series, click here. The illustrations below are inspired by the Algorithms, Part I course on Coursera. All code examples from this series can be found here.

A disjoint-set (also referred to as a union-find data structure) is a data structure that tracks a set of elements partitioned into a group of disjoint subsets (also known as connected components). Given this type of data structure, there are multiple algorithms that can be used to solve the two major equations for a disjoint-set, the Union command and the Find query, which we'll go into more detail below.

Dynamic Connectivity

A dynamic connectivity structure maintains information about the connected components of a graph.
Given a set of N objects:
- Connect two objects (the Union command)
- Determine if there is a path connecting the two objects (the Find query)

Union-Find Illustration

Quick Find

Quick Find is an Eager algorithm also used to solve the dynamic connectivity problem.
The Find query for this algorithm is very efficient and is measured in constant time.
- Given id[] of size N, check if p and q are connected.
The Union command is measured in quadratic time because the time to resolve is dependent on the size of the array and the number of values that must change as a result.
- When changing a value of id[q], you must also change all entries whose value is equal (connected) to id[q] as well.

Quick Find Illustration

Quick Find Implementation

import DisjointSet from "./DisjointSet"

class QuickFind implements DisjointSet {
  disjointSet: number[]

  constructor(quantity: number) {
    this.disjointSet = []

    for (let i = 0; i < quantity; i++) this.disjointSet[i] = i
  }

  connected = (p: number, q: number): boolean => {
    return this.disjointSet[p] === q
  }

  union = (p: number, q: number): void => {
    const pid = this.disjointSet[p]
    const qid = this.disjointSet[q]

    this.disjointSet.forEach((value, index) => {
      if (value === pid) {
        this.disjointSet[index] = qid
      }
    })
  }
}

export default QuickFind

Quick Union

Quick Union is a Lazy algorithm that, again, is used to solve the dynamic connectivity problem.
Data structures implementing this algorithm are represented as trees in order to find the connected root of each element.
The Find query requires a traversal up the tree:
- Given id[] of size N, check if p and q have the same root.
The Union command requires the find query in order to determine each element's root before merging.
- This command is measured in linear time because in order to merge the connected components containing p and q, we must set the id of p's root to the id of q's root.

Quick Union Illustration

Quick Union Implementation

import DisjointSet from "./DisjointSet"

class QuickUnion implements DisjointSet {
  disjointSet: number[]

  constructor(quantity: number) {
    this.disjointSet = []

    for (let i = 0; i < quantity; i++) this.disjointSet[i] = i
  }

  private root(valueToCheck: number): number {
    while (this.disjointSet[valueToCheck] !== valueToCheck) {
      valueToCheck = this.disjointSet[valueToCheck]
    }

    return valueToCheck
  }

  private isDirectChild(p: number, q: number): boolean {
    return this.disjointSet[p] === q
  }

  connected(p: number, q: number): boolean {
    if (this.isDirectChild(p, q)) return true

    return this.root(p) === this.root(q)
  }

  union(p: number, q: number): void {
    const rootP = this.root(p)
    const rootQ = this.root(q)

    this.disjointSet[rootP] = rootQ
  }
}

export default QuickUnion

Improvements to Quick Union

Weighted Quick Union

We can improve Quick Union by "weighting" our algorithm. What this means is that anytime a Union operation is performed, we will always link the root of the smaller tree to the root of the larger tree.
- This helps to keep the overall tree structure relatively flat, compared to a normal quick-union tree (as pictured below), and ensures each node is never too far from the overall root node.
- The Find query takes the time proportional to the depth of p and q.
- Because we are always setting the root of the smaller tree to that of the larger tree, the depth of any node is at most log N (where N is the number of nodes in the overall tree).

Weighted Quick Union Illustration

Weighted Quick Union Implementation

For the weighted quick union implementation, you can see below that our Find query remains the same. For the Union operation, however, we are incrementing the size of the larger root by the size of the smaller root.

import DisjointSet from "./DisjointSet"

class WeightedQuickUnion implements DisjointSet {
  disjointSet: number[]
  size: number[]

  constructor(quantity: number) {
    this.disjointSet = []
    this.size = []

    for (let i = 0; i < quantity; i++) {
      this.disjointSet[i] = i
      this.size[i] = 1
    }
  }

  private root(valueToCheck: number): number {
    while (this.disjointSet[valueToCheck] !== valueToCheck) {
      valueToCheck = this.disjointSet[valueToCheck]
    }

    return valueToCheck
  }

  private isDirectChild(p: number, q: number): boolean {
    return this.disjointSet[p] === this.disjointSet[q]
  }

  connected(p: number, q: number): boolean {
    if (this.isDirectChild(p, q)) return true

    return this.root(p) === this.root(q)
  }

  union(p: number, q: number): void {
    const rootP = this.root(p)
    const rootQ = this.root(q)

    if (rootP === rootQ) return

    if (this.size[rootP] <= this.size[rootQ]) {
      this.disjointSet[rootP] = rootQ
      this.size[rootQ] += this.size[rootP]
    } else {
      this.disjointSet[rootQ] = rootP
      this.size[rootP] += this.size[rootQ]
    }
  }
}

export default WeightedQuickUnion

Weighted Quick Union with Path Compression

This algorithm can be improved even further by compressing the path to the overall root.
- So, after computing the root of p, for any node that was passed over (6, 3, 1 in the following illustration), we'll set it to point to the new root as well.
- This causes our overall tree to flatten even further, decreasing the time complexity to almost linear.

Weighted Quick Union with Path Compression Illustration

Weighted QU with Path Compression Implementation

For this implementation, we're going to update our root method so that for each traversal to an object's root, we'll set the value of every other node in the path to point to its grandparent, thereby halving the length to the object's root.

private root(valueToCheck: number): number {
  while (this.disjointSet[valueToCheck] !== valueToCheck) {
    this.disjointSet[valueToCheck] = this.disjointSet[
      this.disjointSet[valueToCheck]
    ];
    valueToCheck = this.disjointSet[valueToCheck];
  }

  return valueToCheck;
}

Integrating Firebase with React-Redux

Clayton — Fri, 03 Jan 2020 14:20:11 +0000

If you find this post helpful, head over to my blog and check out some of my other posts!

Google's Firebase is a "platform that helps you quickly develop high-quality apps and grow your business". One of its capabilities includes user authentication. Google makes setting this auth up within your application relatively straightforward, but there can be some quirks, which we'll discuss throughout this post. I will also be using React-Redux for global state management, showing some of the benefits there as well. With that said, let's start building our app!

As a side note, you can always view the application we'll be creating in it's entirety here on my Github.

Register your application

The first thing you'll want to do is create your firebase project. Assuming you're logged into a valid Google account, head over to the Firebase console and create a new project. Once you've completed the setup process and given your project a name, click the Authentication option on the left and then the Sign-in method tab after that.

As you can see, Firebase offer a wide array of options to choose from when it comes to user authentication. To keep this post relatively simple, we're going to enable the Email/Password option. Once that's enabled, click the Project Overview link on the left sidebar, and look for the Web icon (</>) on the center of the page.

Clicking this icon will walk you through the setup process for registering your application. After giving your app a nickname and selecting Register App, Google will give you a block of code to add their SDK to your application. You can ignore the majority of this as we'll be integrating Firebase into our app later on, but do take note of everything within the firebaseConfig variable, as we'll need this later on. It should look something like this:

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyBqLJWJh7Y8RoX5R35lcLW6e2HND6HP094",
  authDomain: "test-app-c6570.firebaseapp.com",
  databaseURL: "https://test-app-c6570.firebaseio.com",
  projectId: "test-app-c6570",
  storageBucket: "test-app-c6570.appspot.com",
  messagingSenderId: "922987846764",
  appId: "1:922987846764:web:15fdbdd9611049f7090c49",
  measurementId: "G-5BNM7SLY03",
}

Now that we've got the registration process behind us, the fun can begin. Let's get to coding!

Project Initialization

If you're not familiar with create-react-app, it's an awesome command-line tool that quickly sets up a boilerplate react application for you in seconds. Assuming you have Node >= 8.10 and npm >= 5.6 on your machine, run the following command to create our firebase react application npx create-react-app firebase-react-redux

Once that process has completed, if you run cd firebase-react-redux, you should see quite a bit of files and directories that create-react-app generated for us. Let's test out our newly created application by running yarn start in the console. If everything works as expected, you should now see the following page boot up in your browser:

Initial Components

With our React app up-and-running, we can start building out our application. We'll need to install a few dependencies first, so lets do that by stopping the application and running the following command in your terminal:

yarn add bulma firebase redux react-redux redux-thunk react-router-dom react-toastify

Bulma is the styling framework we're going to be using with our application. Firebase is necessary to integrate with their auth platform. Redux and react-redux will allow us to manage global user state. Redux-thunk allows for asynchronous operations within redux. React-router-dom will allow for more declarative routing within our application, and react-toastify gives us a lightweight notification on successful actions performed by the user.

With those packages installed, let's create three components. One will require authentication, one will be public, and we'll also create the homepage. Inside of your src folder, create a new directory called components and create the following three files in that directory:

We'll also create a header component (header.js) inside the same directory that will link to our newly created pages.

import React from "react"
import { NavLink } from "react-router-dom"

const Header = () => {
  return (
    <>
      <nav className="level">
        <NavLink to="/" exact className="link is-info">
          Home
        </NavLink>
        <NavLink to="/public" exact className="link is-info">
          Public
        </NavLink>
        <NavLink to="/private" exact className="link is-info">
          Private
        </NavLink>
      </nav>
    </>
  )
}

export default Header

Now we can update our App.js file and add some routes to our new components:

import React from "react"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import "bulma/css/bulma.css"
// Components
import Home from "./components/home"
import Header from "./components/header"
import Public from "./components/public"
import Private from "./components/private"

function App() {
  return (
    <Router>
      <section className="section">
        <div className="container">
          <Header />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/public" component={Public} />
            <Route path="/private" component={Private} />
          </Switch>
        </div>
      </section>
    </Router>
  )
}

export default App

If we boot up our app again (yarn start) you should see a very generic, styled application with working links to our new components!

Firebase

Now that we've got a functioning application, let's start integrating it with Firebase so we can allow users to register and login to our application.

Under our src directory, create a new folder called auth. We're going to create two files here. The first will utilize the configuration object that Firebase gave us when we originally registered our application (we'll call it config.js). You'll want to make sure you add this file to your .gitignore since it will contain sensitive information that you wouldn't want stored in source control. This file should look something like this:

const firebaseConfig = {
  apiKey: "AIzaSyBqLJWJh7Y8RoX5R35lcLW6e2HND6HP094",
  authDomain: "test-app-c6570.firebaseapp.com",
  databaseURL: "https://test-app-c6570.firebaseio.com",
  projectId: "test-app-c6570",
  storageBucket: "test-app-c6570.appspot.com",
  messagingSenderId: "922987846764",
  appId: "1:922987846764:web:15fdbdd9611049f7090c49",
  measurementId: "G-5BNM7SLY03",
}

export { firebaseConfig }

The second file will be a wrapper to integrate with Firebase's SDK, and we'll name it auth-service.js:

import firebase from "firebase/app"
import "firebase/auth"
import { firebaseConfig } from "./config"

!firebase.apps.length && firebase.initializeApp(firebaseConfig)

const auth = firebase.auth()

// Helper method for initial load of site
// Firebase takes a second to determine currentUser object
// So we can use local storage for initial UI purposes
const getAuthenticationStatus = () => {
  return localStorage.getItem("isAuthenticated")
}

export { auth, getAuthenticationStatus }

We are exporting two things here, the first (auth) will give us direct integration into Firebase's SDK so we can utilize some of their methods for things like login, logout, and registration. The second is a helper method that will set a flag in localStorage, and you'll see later why that's necessary.

With Firebase ready to go, let's get Redux setup within our application.

Redux

Redux is a library that assists with controlling and maintaining global state within an application. The react-redux dependency we installed earlier lets us use certain bindings for Redux within our React application. For the scope of this article, I'm going to assume you are somewhat familiar with Redux, as we'll be using it to maintain state in the context of users.

Let's create another directory under the src folder, and call it redux. We're going to drop four files in here.

The first is going to set up our global store within redux, we'll call this configure-store.js.

import { createStore, applyMiddleware } from "redux"
import combinedReducers from "./combined-reducers"
import thunk from "redux-thunk"

export default function configureStore(initialState) {
  return createStore(combinedReducers, initialState, applyMiddleware(thunk))
}

Next, we'll create a file called combined-reducers.js to aggregate all reducers into one object that Redux can use. This will come in handy if we decide to add any future reducers outside the context of Firebase in the future.

import { combineReducers } from "redux"
import currentUser from "./firebase-reducer"

const combinedReducers = combineReducers({
  currentUser,
})

export default combinedReducers

Now let's set up some actions. According to the redux docs, actions are "payloads of information that send data from your application to your store." Let's start by creating a few actions (firebase-actions.js) to register and login to our application.

import { auth } from "../auth/auth-service"

export const loginSuccess = () => {
  return {
    type: "LOGIN_SUCCESS",
    currentUser: auth.currentUser.toJSON(),
  }
}

export const registerSuccess = () => {
  return {
    type: "REGISTER_SUCCESS",
    currentUser: auth.currentUser.toJSON(),
  }
}

export const register = (email, password) => async dispatch => {
  try {
    await auth.createUserWithEmailAndPassword(email, password)
    dispatch(registerSuccess())
  } catch (error) {
    throw error
  }
}

export const login = (email, password) => async dispatch => {
  try {
    await auth.signInWithEmailAndPassword(email, password)
    dispatch(loginSuccess())
  } catch (error) {
    throw error
  }
}

As you can see, we're importing the auth object we created earlier that gives us access to the Firebase SDK. We also have two methods, register and login that utilize this SDK. Assuming everything goes smoothly, we dispatch an action loginSuccess and registerSuccess and grab the current user from the same SDK. These actions will then be picked up by our reducer, which we'll create now (firebase-reducer.js):

export default function firebaseReducer(state = null, action) {
  switch (action.type) {
    case "REGISTER_SUCCESS":
    case "LOGIN_SUCCESS":
      return action.currentUser
    default:
      return state
  }
}

This reducer is relatively straightforward. It simply listens for either the REGISTER_SUCCESS or LOGIN_SUCCESS action, and returns the current user to our redux global state. Now that we are listening for these actions, let's create a few components to take advantage of these new capabilities.

Login and Register Pages

We'll create two new files under our components directory, one to login (login.js) and one to register (register.js).

import React, { createRef } from "react"
import { toast } from "react-toastify"
// Redux
import { connect } from "react-redux"
import { login } from "../redux/firebase-actions"

const Login = ({ login, history }) => {
  const email = createRef()
  const password = createRef()

  const handleSubmit = event => {
    event.preventDefault()
    login(email.current.value, password.current.value)
      .then(() => {
        toast.success("Login successful")
        history.push("/")
      })
      .catch(error => {
        toast.error("Login failed")
        console.error(error)
      })
  }

  return (
    <form onSubmit={handleSubmit}>
      <h1>Login</h1>
      <div className="control">
        <input
          name="name"
          type="email"
          ref={email}
          placeholder="Email"
          className="input is-primary"
        />
      </div>

      <div className="control">
        <input
          name="password"
          type="password"
          ref={password}
          placeholder="Password"
          autoComplete="none"
          className="input is-primary"
        />
      </div>

      <div className="control">
        <button type="submit" className="button is-link">
          Submit
        </button>
      </div>
    </form>
  )
}

export default connect(
  null,
  { login }
)(Login)

Our login page may look intimidating at first, but let's digest it a bit. We're using the createRef method from react to gain access to the current values of the email and password input elements. We're also using connect from react-redux to pass our login action we just created in as a component prop. When the form is submitted, assuming everything looks ok, we're using the react-toastify library we installed earlier to notify the user that they successfully logged into the application, and then we are redirecting them back to the homepage via the history prop.

Our register component will look pretty similar:

import React, { createRef } from "react"
import { toast } from "react-toastify"
// Redux
import { connect } from "react-redux"
import { register } from "../redux/firebase-actions"

const Register = ({ register, history }) => {
  const email = createRef()
  const password = createRef()

  const handleSubmit = event => {
    event.preventDefault()
    register(email.current.value, password.current.value)
      .then(() => {
        toast.success("Registration successful")
        history.push("/")
      })
      .catch(error => {
        toast.error("Registration failed")
        console.error(error)
      })
  }

  return (
    <form onSubmit={handleSubmit}>
      <h1>Register</h1>
      <div className="control">
        <input
          name="name"
          type="email"
          ref={email}
          placeholder="Email"
          className="input is-primary"
        />
      </div>

      <div className="control">
        <input
          name="password"
          type="password"
          ref={password}
          placeholder="Password"
          autoComplete="none"
          className="input is-primary"
        />
      </div>

      <div className="control">
        <button type="submit" className="button is-link">
          Submit
        </button>
      </div>
    </form>
  )
}

export default connect(
  null,
  { register }
)(Register)

With both of these components ready to go, let's add them into our header, so users can navigate to the register and login pages:

import React from "react"
import { NavLink } from "react-router-dom"

const Header = () => {
  return (
    <>
      <nav className="level">
        <NavLink to="/" exact className="link is-info">
          Home
        </NavLink>
        <NavLink to="/public" exact className="link is-info">
          Public
        </NavLink>
        <NavLink to="/private" exact className="link is-info">
          Private
        </NavLink>
        <NavLink to="/login" className="link is-info">
          Login
        </NavLink>
        <NavLink to="/register" className="link is-info">
          Register
        </NavLink>
      </nav>
    </>
  )
}

export default Header

We'll also want to make sure we add our Routes, as well as a ToastContainer and ReactToastify.css (to show toast notifications) to our application's App.js file:

import React from "react"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import "bulma/css/bulma.css"
import { ToastContainer } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"
// Components
import Home from "./components/home"
import Header from "./components/header"
import Public from "./components/public"
import Private from "./components/private"
import Login from "./components/login"
import Register from "./components/register"

function App() {
  return (
    <Router>
      <section className="section">
        <div className="container">
          <Header />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/public" component={Public} />
            <Route path="/private" component={Private} />

            <Route path="/login" component={Login} />
            <Route path="/register" component={Register} />
          </Switch>

          <ToastContainer autoClose={3000} hideProgressBar />
        </div>
      </section>
    </Router>
  )
}

export default App

In order to wire up redux, we'll want to add a ReduxProvider to the index.js file at the root of our src directory:

import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import * as serviceWorker from "./serviceWorker"
//Redux
import configureStore from "./redux/configure-store"
import { Provider as ReduxProvider } from "react-redux"

const store = configureStore()

ReactDOM.render(
  <ReduxProvider store={store}>
    <App />
  </ReduxProvider>,
  document.getElementById("root")
)

serviceWorker.unregister()

We've done a lot so far. Let's stop our application (if it's currently running) and reboot using the yarn start command to test it out. If you navigate to the Registration page using the link in the header, and submit a fake email and password, you should be redirected to the homepage and a green toast notification should confirm your registration!

If you navigate to the Login page and attempt to login using the same email and password, you should see the same behavior there as well. Our application is still not where we want it, however.

You'll notice after logging in that you still have a login and register link at the top. From a logged-in user's perspective, they really should be seeing a logout link instead. We also haven't prevented users who aren't logged in from seeing the private page we created at the beginning of this tutorial. We should fix that as well.

Quick note, you can also view information about registered users in the Firebase console by clicking on the Authentication tab we looked at earlier.

Additional Components

Let's give our users the ability to logout when they're finished using our application. We're going to update our firebase-actions.js file to include two new methods, one to allow the user to logout and another to fetch the currentUser object using the onAuthStateChanged method, which is the preferred method according to Firebase's documentation.

import { auth } from "../auth/auth-service"

export const loginSuccess = () => {
  return {
    type: "LOGIN_SUCCESS",
    currentUser: auth.currentUser.toJSON(),
  }
}

export const registerSuccess = () => {
  return {
    type: "REGISTER_SUCCESS",
    currentUser: auth.currentUser.toJSON(),
  }
}

export const register = (email, password) => async dispatch => {
  try {
    await auth.createUserWithEmailAndPassword(email, password)
    dispatch(registerSuccess())
  } catch (error) {
    throw error
  }
}

export const login = (email, password) => async dispatch => {
  try {
    await auth.signInWithEmailAndPassword(email, password)
    dispatch(loginSuccess())
  } catch (error) {
    throw error
  }
}

export const logout = () => async dispatch => {
  try {
    await auth.signOut()
    dispatch({ type: "LOGOUT", currentUser: auth.currentUser })
  } catch (error) {
    throw error
  }
}

export const fetchUser = () => async dispatch => {
  try {
    await auth.onAuthStateChanged(currentUser => {
      if (currentUser) {
        localStorage.setItem("isAuthenticated", true)
        dispatch({
          type: "FETCH_USER",
          currentUser: currentUser.toJSON(),
        })
      } else {
        localStorage.removeItem("isAuthenticated")
        dispatch({
          type: "FETCH_USER",
          currentUser: null,
        })
      }
    })
  } catch (error) {
    throw error
  }
}

One thing to note in the fetchUser method is that we are setting a boolean flag in localStorage when a user authenticates or logs out. This will help us quickly determine whether a user is logged in for UI purposes, which we'll discuss in just a bit.

We'll also need to update firebase-reducer.js to make sure the store is updated when these new actions are dispatched:

export default function firebaseReducer(state = null, action) {
  switch (action.type) {
    case "REGISTER_SUCCESS":
    case "LOGIN_SUCCESS":
    case "LOGOUT":
    case "FETCH_USER":
      return action.currentUser
    default:
      return state
  }
}

Let's ensure the fetchUser method is called when our application is first loaded in the browser by adding it to our App.js file:

import React, { useLayoutEffect } from "react"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import "bulma/css/bulma.css"
import { ToastContainer } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"
// Redux
import { connect } from "react-redux"
import { fetchUser } from "./redux/firebase-actions"
// Components
import Home from "./components/home"
import Header from "./components/header"
import Public from "./components/public"
import Private from "./components/private"
import Login from "./components/login"
import Register from "./components/register"

function App({ fetchUser }) {
  useLayoutEffect(() => {
    fetchUser()
  }, [])

  return (
    <Router>
      <section className="section">
        <div className="container">
          <Header />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/public" component={Public} />
            <Route path="/private" component={Private} />

            <Route path="/login" component={Login} />
            <Route path="/register" component={Register} />
          </Switch>

          <ToastContainer autoClose={3000} hideProgressBar />
        </div>
      </section>
    </Router>
  )
}

export default connect(
  null,
  { fetchUser }
)(App)

Finally, let's update our header.js file to ensure that a user does not see the Login or Register links once they are logged in, and instead see a link to Log Out.

import React, { useLayoutEffect, useState } from "react"
import { NavLink } from "react-router-dom"
import { toast } from "react-toastify"
import { getAuthenticationStatus } from "../auth/auth-service"
// Redux
import { connect } from "react-redux"
import { logout } from "../redux/firebase-actions"

const Header = ({ logout }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(null)

  useLayoutEffect(() => {
    setIsAuthenticated(getAuthenticationStatus())
  })

  const handleLogout = event => {
    event.preventDefault()
    logout()
    toast.success("Logout successful")
  }

  return (
    <>
      <nav className="level">
        <NavLink to="/" exact className="link is-info">
          Home
        </NavLink>
        <NavLink to="/public" exact className="link is-info">
          Public
        </NavLink>
        <NavLink to="/private" exact className="link is-info">
          Private
        </NavLink>
        {isAuthenticated ? (
          <>
            <NavLink onClick={handleLogout} to="/" className="link is-info">
              Logout
            </NavLink>
          </>
        ) : (
          <>
            <NavLink to="/login" className="link is-info">
              Login
            </NavLink>
            <NavLink to="/register" className="link is-info">
              Register
            </NavLink>
          </>
        )}
      </nav>
    </>
  )
}

const mapStateToProps = ({ currentUser }) => {
  return { currentUser }
}

export default connect(
  mapStateToProps,
  { logout }
)(Header)

If you're logged into the application, our nav menu should now only display a logout link. Click this link and you should now see the navigation menu update, displaying our original login and register links from before. Looks like it's working, good job!

Private Routes

Our users are now able to log into and out of the application at will. We still have one more thing to do, however. If you recall at the beginning of this tutorial, we created a private component that we only wanted logged-in users to access. That's not working at the moment, so let's see if we can fix that.

Let's create a new component under the components directory and call it private-route.js. This will serve as an additional route we can use for pages that we don't want un-authenticated users to see.

import React from "react"
import { getAuthenticationStatus } from "../auth/auth-service"
import { Route, Redirect } from "react-router-dom"

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props =>
        getAuthenticationStatus() ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/",
            }}
          />
        )
      }
    />
  )
}

export default PrivateRoute

Firebase's documentation recommends using the onAuthStateChanged method to determine whether a current user is logged in or not. However, there are some quirks that happen under the hood that make this a bit of a nuisance in this scenario.

Essentially, the method that they recommend first returns an initializing status before ultimately returning the currentUser object. If we went this direction, our navigation and private-route components would first assume the user is not logged in during the initializing phase, showing the incorrect nav menu, and then re-render after the currentUser object is returned. This would create a negative user experience for our end users.

With that being said, let's instead check whether a user is logged in by using the getAuthenticationStatus method we created earlier, which checks the localStorage behind the scenes.

With this private route component in place, lets update our App.js file to ensure our private.js component is only accessible if a user is logged in:

import React, { useLayoutEffect } from "react"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import "bulma/css/bulma.css"
import { ToastContainer } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"
// Redux
import { connect } from "react-redux"
import { fetchUser } from "./redux/firebase-actions"
// Components
import Home from "./components/home"
import Header from "./components/header"
import Public from "./components/public"
import Private from "./components/private"
import Login from "./components/login"
import Register from "./components/register"
import PrivateRoute from "./components/private-route"

function App({ fetchUser }) {
  useLayoutEffect(() => {
    fetchUser()
  }, [])

  return (
    <Router>
      <section className="section">
        <div className="container">
          <Header />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/public" component={Public} />
            <PrivateRoute path="/private" component={Private} />
            <Route path="/login" component={Login} />
            <Route path="/register" component={Register} />
          </Switch>

          <ToastContainer autoClose={3000} hideProgressBar />
        </div>
      </section>
    </Router>
  )
}

export default connect(
  null,
  { fetchUser }
)(App)

If you log out of the application and try accessing our private component from the navigation menu, you'll notice that you are redirected back to the home page. If you log in, however, you'll see that you can access it just as we could before!

Conclusion

That should do it! Your app should now be up and running with the ability to register, log in, and log out users utilizing Redux with Firebase authentication. I hope you learned a bit as you followed along, and make sure to come back and check out other articles similar to this on my blog 😄

Essential Docker Commands

Clayton — Tue, 19 Nov 2019 13:18:56 +0000

If you find this post helpful, head over to my blog and check out some of my other posts!

I recently began playing around with Docker in my spare time. I've heard a lot about the benefits of containerizing applications but, being an avid practitioner of pain driven development, I haven't found the need to implement it in any of my applications thus far. Curiosity got the better of me, however, and I decided to list out a quick reference guide for common commands used within the Docker CLI. A complete list of these commands are readily available on Docker's documentation site, but feel free to follow along in your terminal after downloading Docker Desktop.

Getting Started

The easiest way to get started from the command line, and typically one of the first commands I run when starting out with a new CLI, is the help command. The docker help command will give you a list of commands that are available within the Docker CLI.

Images

In Docker, an image is a set of instructions or commands used to create a container (more on containers later). Images are immutable in nature, so once an image is built, it must either be re-created or deleted using a new set of instructions. The instructions that Docker images are built from are known as Dockerfiles.

In order to build an image, a simple command can be run from your terminal:

docker build -f {DOCKER_FILE_NAME} -t {IMAGE_TAG} .

docker build is executed with a couple of arguments to build a Docker image. The first argument specifies which Dockerfile to reference in order to build the image, and the second argument specifies the tag, or alias, of the image that you are building. So, the above command could look something like this:

docker build -f node.dockerfile -t thefrugaldev/node .

Once you've got a few images created, you can list them out using the following command:

docker images

This will list out all top level images, including their properties such as tags, the date they were created, size, and their image id. The output in your terminal should look something like this, after execution.

If you find that you have too many images or decide you don't need a specific image anymore, you can always remove an image by providing the image id as an argument to the following command.

docker rmi {IMAGE ID}

Containers

Containers are probably what brought you to Docker in the first place. The word gets thrown around a lot when mentioning Docker, but what is a container? From a high level, a container is similar to an image, but its state can change and is built at runtime. Containers, unlike images, have a writable persistence layer, that can be added to or modified. When a container is deleted, so too is this persistence layer. So, in this sense, multiple containers can share a single image, and still have an isolated persistence layer.

To run a container, simply specify which image you want to run. The terminal will then return the container id of the newly created container.

docker run -d thefrugaldev/node

There are quite a few options that you can pass to the previous command:

docker run -d --net {NETWORK} --name {CONTAINER_ALIAS} -p {LOCAL_PORT:HOST_PORT} {IMAGE_TO_RUN}

By specifying -d you are telling Docker to run in detach, or background, mode. In Docker, you can set up an isolated network with the --net argument, and containers within that network can communicate with one another. The --name allows you to assign a name to the container, making it easier to maintain after it's up and running. The -p flag allows you to bind an external port on your local machine to an internal port on the host machine that is running the container. Finally, you can provide the image you'd like to run. An example of this command might look something like this.

docker run -d --net isolated_network --name my_funky_new_container -p 8080:5000 thefrugaldev/aspnetcore

Sometimes, you may need to execute an external command once an application is up and running. For this, Docker allows the exec command to be run within the context of a specific container.

docker exec {CONTAINER_NAME} {CMD}

Once you've got a few containers up and running, feel free to run any of the following commands to visualize and remove any containers running on your machine.

docker ps # list any running containers
docker ps -a # list all containers (running or otherwise)
docker rm {CONTAINER_ID} # remove a specific container by id
docker rm -f $(docker ps -a -q)

That final command is an interesting one. It's forcing docker to remove containers with the -f flag. The last part of that command $() tells Docker to evaluate an expression inside the parentheses. Here, we're telling Docker to find all containers (running or otherwise) in quiet (-q) mode (only display numeric IDs) and return what was found. The entirety of the command essentially tells Docker to remove all containers (running or otherwise).

Volumes

For larger write operations, containers can have volumes associated with them as well. You can think of volumes like a symlink that points to a virtual directory that is managed by Docker. When you stop, or even remove, a container, the volume remains in-tact unless you explicitly remove it. This allows volumes to be safely shared by multiple containers.

In order to remove a container, along with any associated volumes, you'll want to use the following command (which you've seen before) with the specified -v option.

docker rm -v {CONTAINER_ID}

If you happen to remove a container and forget to remove its associated volumes (which never happens to me 😉), there is a quick and easy command to remove any unused volumes that may be stuck out in purgatory.

docker volume prune

Docker Compose

Once you get comfortable with Docker, you may find creating multiple containers from individual images can become tedious and is not very scalable. If that's the case, take a look at Docker Compose. According to their docs, compose is a "tool for defining and running multi-container Docker applications". To take advantage of docker-compose, you'll need to create a yaml file that informs Docker of instructions necessary to create containers, including the docker file to use, networks to create, ports to use, etc.

I wont go into too much detail around the docker-compose cli, but I've provided a list of common commands that I think will be beneficial on your journey.

docker-compose build
# build the images specified in the docker-compose.yml file
docker-compose up -d
# builds, (re)creates, starts, and attaches to containers for a service
# the -d flag tells docker-compose to run in detach mode
docker-compose down --rmi all --volumes
# stops and removes containers
# also removes any networks, volumes and images created by the up command
docker-compose logs
# displays log outputs.
# very useful if you run the up command in detach mode
docker-compose ps
# list all currently running containers
docker-compose start
# starts existing containers
docker-compose stop
# stop running containers without removing them
docker-compose rm -v
# removes any stopped containers
# the -v flag also removes any attached volumes

Extensions

I hope the above commands can serve as a reference point for others as I'm sure it will for me when I inevitably forget them. As a side note, I wanted to end this post by suggesting a very helpful extension for Visual Studio Code. If you haven't already, I suggest downloading the Docker extension provided by Microsoft. This extension gives you a GUI to really help visualize what containers, volumes, images, and registries are currently enabled on your local machine.

Resolving Conflicts in Git

Clayton — Fri, 08 Nov 2019 16:39:54 +0000

There are quite a few ways to resolve conflicts in git, whether it's through the command-line or a GUI. In this post, I'm going to offer an opinionated solution using the command-line and, more specifically, using a tool called vimdiff (because I'm most familiar with the Vim interface). If you find this post helpful, head on over to my blog and check out some of my other posts!

Set up Git config with your tool of choice

The first thing you'll want to do is configure git to use the mergetool you're most comfortable with. There are a number of options to choose from, including emerge, gvimdiff, kdiff3, meld, vimdiff, and tortoisemerge. For a complete list of tools and settings, simply run git mergetool --tool-help in your terminal. In this post, I'm going to use vimdiff. Now, I could do this by runnning git -t vimdiff, which would configure it as my tool for this session only. However, I want git to always default to this tool for any future conflicts.

So, the first few commands that we'll run are:

git config merge.tool vimdiff
git config merge.conflictstyle diff3
git config mergetool.prompt false

The first command specifies which tool is used by the git-mergetool. The second command specifies the formatting of conflicts in your terminal. Setting "diff3" in this instance adds the original text to the conflict display, but leaving it as default and omitting the second command is fine as well. Finally, the last command just ensures that the user is prompted before the merge resolution is executed.

Starting the merge tool

Executing the git mergetool command will run the mergetool and you can begin resolving conflicts.

Your terminal should now display an interface similar to the format in the image below.

As you can see, there are four sections in this UI. The local section is the file from the current local branch. The base is the common ancestor between the local and remote commits. This is essentially what the file looked like before either commit was changed. The remote file is the one you are merging into your branch. Lastly, the merged file at the bottom is the result of the conflict resolution and what will be saved in your repository after you execute the resolution.

You can navigate between the four areas of the terminal using Ctrl W to move between windows, or Ctrl W + J to move directly to the merged window. For other navigational commands, visit the vim docs.

Edit the files

Once you've navigated to the window that you want to edit, press the i key to insert text in Vim. After you're finished making the changes you'd like, press the esc key to exit insert mode and enter command mode, and you should see those changes reflected in your merged section. If not, simply type :diffupdate and hit enter and the UI should update to show your merged copy.

If this seems tedious and you would rather take a complete copy of either the local, base, or remote files, you can run the following commands. :diffg RE gets the entire changes from the remote copy, :diffg BA from the base copy, and :diffg LO from local.

Save your changes

After you're satisfied with the changes you made, and the merged copy reflects what you were after, it's time to save and commit the changes.

Enter command mode by pressing esc, and type :wqa. This command will write, save, and quite all filles within Vim. You are now ready to commit your changes using the well-known git commit -m "My Commit Message" command. Vimdiff will create a few files for you during the resolution, most ending in a *.orig suffix, but to get rid of these files simply run git clean.

All finished

That should do it. Assuming you had no other conflicts, you should now be ready to push your changes. If there are more, feel free to use the same process we just went over to resolve any outstanding conflicts. I originally decided to write this article as a reference guide for myself, but I hope I've helped a few other frustrated devs stuck in conflict purgatory along the way 😉.

Getting Familiar with Redis Data Types

Clayton — Thu, 26 Sep 2019 12:57:48 +0000

Redis is an open-source, in-memory data store. Although there are many use cases, including acting as a message broker, Redis is commonly used as a caching mechanism. I've recently been looking into utilizing this caching service at work. With that in mind, I figured I would write up a quick post about some of the more common data types supported in Redis, and when you might expect to use them.

Note: All examples below are utilizing the redis-cli but feel free to follow along using the playground.

Keys

If you are already somewhat familiar with caching, you'll understand that most values are retrieved using a key to lookup said value. In typical caching systems, this key is represented by a primitive string. In Redis, however, keys are binary safe, which means that you can use something as simple as "thefrugaldev" as your key, or something as complex as the content of a JPEG file. With that being said, it is recommended on their docs to stick with a schema (ex: "object-type:id") rather than really condensed or complex keys, as this can have an impact on lookup performance. Keys can also be assigned for a limited (expiry) time as seen in the example below.

Example

> set key some-value
OK

# Expire key after 5 seconds
> expire key 5
(integer) 1

# Get TTL for key
> ttl key
(integer) 5

# Get key after TTL has expired
> get key
(nil)

Strings

Strings are the most basic kind of Redis data type and have a max value of 512 MB. Strings, similar to keys in Redis, are binary safe, meaning they can contain any type of data including JPEG images, serialized objects, etc.

When to use strings

Strings are useful when you need to encode a lot of data in a little amount space. This may include caching HTML fragments or pages. Because Redis does not have a dedicated integer type, strings can also be used to represent a base-10, 64-bit signed integer. Built-in Redis commands including INCR (increment) or DECR (decrement) can then be used to adjust these integer values.

Example

> set thefrugaldev awesome
OK

> get thefrugaldev
"awesome"

Lists

If you are familiar with Linked List data types, you are already on your way to understanding Lists in Redis. Lists in Redis are essentially Linked Lists of string values, sorted by insertion order. A List in Redis offers a very generous max length of 2³² - 1 elements (more than 4 billion elements). Similar to a Linked List, when elements are added to a Redis List they can be inserted at the head (beginning) or tail (end) of the list very quickly since it's an O(N) operation. However, these operations can become super slow if you're accessing anything near the middle of a very large list.

When to use lists

A very common use case for Redis Lists is the social network example. Twitter uses Redis Lists to display the latest tweets in a real-time approach. Redis also recommends using lists for communication between processes, where one (the producer) pushes elements onto the list and then the other (consumer) pulls the items off the list and takes some action.

Example

# Create a new list
# todolist: "cut the grass"
> lpush todolist "cut the grass"
(integer) 1

# Add a new item to the list
# todolist: "cut the grass", "make the bed"
> rpush todolist "make the bed"
(integer) 2

# Add an item to the beginning of the list
# todolist: "pay the electricity bill!", "cut the grass", "make the bed"
> lpush todolist "pay electricity bill!"
(integer) 3

# Remove an item from the list
# todolist: "pay the electricity bill!", "cut the grass"
> rpop todolist
"make the bed"

Sets

Redis Sets are an unordered collection of strings. Because there is no guarantee on the order in which a set is returned to the user, operations are always O(1), or constant time, regardless of the number of elements within the set. Sets in Redis will never allow repeated members, so adding the same element multiple times will still result in the set only containing one copy of the element. This means that adding an element does not require an initial check to see if it already exists within the set. Unions, intersections, difference operations are all possible with Redis sets and are executed rather quickly.

When to use sets

Sets are great for identifying relationships between entities. For example, keeping track of the individuals that make up a team. Because set values are always unique, another good example for utilizing sets is keeping track of unique visitors to a website or webpage.

Examples

# Create a set for an amazing basketball team
> sadd "chicago bulls" "michael jordan" "scottie pippen" "dennis rodman" "luc longley" "ron harper"
(integer) 5

# Get all the members in the set
# note that the returned set is not in the order they were added
> smembers "chicago bulls"
1) "scottie pippen"
2) "michael jordan"
3) "luc longley"
4) "dennis rodman"
5) "ron harper"

# Determine if a given value is a member of a set
> sismember "chicago bulls" "michael jordan"
(integer) 1

> sismember "chicago bulls" "larry bird"
(integer) 0

Hashes

Redis Hashes are maps between string fields and string values, and are great for storing more complex data. With that in mind, they are perfect for representing objects and, like lists, hashes can store more than 2³² - 1 (4 billion) field-value pairs.

When to use sets

If you're familiar with object-oriented programming, which I'm assuming a lot of you are, Hashes are a great way to represent and cache these objects. One great example I've read while
researching is inventory information for an e-commerce site.

Examples

# Create a Hash and set multiple values at once
> hmset developer:001 "username" "thefrugaldev" "height" "5'10" "favorite beer" "bourbon"
OK

# Get the value associated with a hash field
> hget developer:001 "favorite beer"
"bourbon"

# Get all the fields and values in a hash
> hgetall developer:001
1) "username"
2) "thefrugaldev"
3) "height"
4) "5'10"
5) "favorite beer"
6) "bourbon"

Sorted Sets

Sorted sets are similar in nature to sets, where they are non-repeating collections of strings. There is a subtle difference in that every member of a sorted set is associated with a score. Scores are a range of integers that can be expressed precisely. Sorted sets use a double 64-bit floating point number to represent the score, and this is what will ultimately be used to sort the given set.

While members of a sorted sets are unique, similar to sets, scores may be repeated. Sorted sets begin sorting the set as items are added, which is an O(log(n)) operation. This improves performance when retreiving an element from the sorted set, making it an O(1), or constant time, operation because it's already sorted.

Assuming an element is added to a sorted set with a unique score, the element will be sorted on that score appropriately. However, if the score provided is similar to another score already in the set, the elements will be sorted lexographically (alphabetically). One other thing to note, sorted sets are variadic, meaning they have an indefinite arity, or the number of arguments a function accepts.

When to use sorted sets

One of the best examples I've come across in relation to using sorted sets comes from Redis' own documentation. There are many commands to use when keeping track of leaderboards in an online multiplayer game, including ZADD when a new score is submitted, ZRANGE to pull the top of the leaderboard, and ZRANK to find a specific users' ranking, all with impressive speed.

Example

# Create a sorted set with multiple members
> zadd "college football team rankings" 1 "georgia bulldogs" 3 "alabama crimson tide" 130 "florida gators" 2 "clemson tigers" 9 "notre dame" 6 "oklahoma sooners" 7 "auburn tigers" 5 "ohio state buckeyes" 8 "wisconsin" 4 "lsu tigers"
(integer) 10

# Get the score of individual members
> zscore "college football team rankings" "georgia bulldogs"
1.0
> zscore "college football team rankings" "florida gators"
130.0

# Return a range of members in a sorted set, by index
> zrange "college football team rankings" 0 8
1) "georgia bulldogs"
2) "clemson tigers"
3) "alabama crimson tide"
4) "lsu tigers"
5) "ohio state buckeyes"
6) "oklahoma sooners"
7) "auburn tigers"
8) "wisconsin"
9) "notre dame"

These are just some of the common data types I've run across while initially exploring Redis. If you'd like to explore further, a full list of data types with their associated commands can be found here. I hope you've had some fun following along and enjoyed learning about some of the more useful data types in Redis; I know I did.