DEV Community: Tim Winfred (They/He)

31 Front-End Development Study Topics to Improve Your Code Quality

Tim Winfred (They/He) — Wed, 28 Jul 2021 05:20:02 +0000

If you spend a lot of time doing front-end development, you know how big the the world of HTML, CSS and JavaScript are. I came up with this list of topics after chatting with several different front-end developers over the past nine months. Some of the topics also came from my own experiences working as a full-time front-end engineer for the past three years.

The list (written in no particular order) may feel a bit intimidating now, but I am remaining optimistic about being able to continually grow my knowledge about each of these topics and hopefully commit them to memory as I use them in the wild. I actually decided to create this list after feeling a bout of imposter syndrome today at work. Now, I'm feeling excited to continue digging into each topic further!

The Document Object Model (DOM) and CSS Object Model (CSSOM)
The JavaScript Event Loop, Promises, Asyc/Await
CSS position Property
CSS Flexbox Layout
HTML Roles
Common Accessibility Issues to Always Check For
Unit & Integration Testing (Jest, Mocha, Chai, Cypress, Axe-Core)
Form action and target Attributes
JavaScript Design Patterns
Closures and Thunks
CSS Variables and Preprocessors
JavaScript as a Statically Typed Language (TypeScript)
Mutable and Immutable Types in JavaScript
JavaScript Passed by Reference / Passed by Value
JSON Data, JSON-LD, JSON Schemas & UI Schemas
HTML Meta Tags (Especially Viewport)
Different Ways Pages Zoom and How To Optimize For That
Front-End Frameworks (React, Vue, Angular)
HTML Templating (Handlebars, EJS)
Webpack / Babel
Git, Version Control and Rebasing
Jenkins, Docker, Continuous Integration
Caching
CSS Methodologies (i.e. BEM)
JavaScript Array Methods: .sort(), .filter(), .map(), .reduce()
JavaScript Object Methods: .keys(), .entries(), .values()
Front-End Performance Optimization & Speed
CSS Specificity and Inheritance
State Management (i.e. Redux)
Semantic HTML
Communicating with RESTful APIs

Feel free to leave a comment below if you have any suggestions for more topics to add to the list. Also, feel free to hit me up on Twitter @Contimporary to follow my journey to become a senior developer!

Using the JavaScript `reduce` method to optimize my React To Do app

Tim Winfred (They/He) — Tue, 27 Jul 2021 01:05:43 +0000

As part of my #100DaysOfCode challenge, I created a To Do app using React. From the outset, I felt confident about being able to complete the challenge quickly and without too many struggles. Thankfully, I was able to do so (for the most part).

The piece of the puzzle that took the longest was the sorting of the tasks. Specifically, the challenge asked to sort the tasks into three groups: overdue tasks at the top, unfinished tasks in the middle, and completed tasks at the bottom. Then, for each of those categories, the tasks should be sorted with the oldest tasks at the top.

My brain iterated through a variety of ways to sort the tasks, but here is the "first final" solution I came up with:

const sortTasks = (tasks: iTasks): iTasks => {
  const sortByDueDate = (a: iTask, b: iTask): number => {
    if (a.dueDate && b.dueDate) return Date.parse(a.dueDate) - Date.parse(b.dueDate);
    if (a.dueDate) return -1;
    if (b.dueDate) return 1;
    return 0;
  }

  const overdueTasks = tasks.filter(task => {
    return isOverdue(task.dueDate, task.isComplete);
  }).sort((a, b) => sortByDueDate(a, b));

  const toDoTasks = tasks.filter(task => {
    return !task.isComplete && !isOverdue(task.dueDate, task.isComplete);
  }).sort((a, b) => sortByDueDate(a, b));

  const completedTasks = tasks.filter(task => {
    return task.isComplete;
  }).sort((a, b) => sortByDueDate(a, b));

  return [...overdueTasks, ...toDoTasks, ...completedTasks];
};

The biggest issue I had with this "final" solution was that for each type of task, I was iterating through the entire array of tasks. I knew there had to be some way of optimizing that part of the code...

Then, my dog woke me up earlier than usual this morning and I was sitting in bed ruminating on the issue (definitely a "nerd moment" haha). I pulled open the browser on my phone and did a search for javascript filter store unfiltered items as well, in an attempt to get the filtered and unfiltered results from the above solution.

That search led me to this Stack Overflow article entitled How to get "unfiltered" array items?. BAM... there was my solution!

After watching a few videos on how to used the JavaScript reduce method, and then playing around with the method on my own, I finally came up with this solution:

const sortTasks = (tasks: iTasks): iTasks => {
  let sortedTasks = tasks.reduce((accumulator: iTasks[], currentValue: iTask) => {
    const isTaskOverdue = isOverdue(currentValue.dueDate, currentValue.isComplete);

    if (isTaskOverdue) {
      accumulator[0].push(currentValue);
    } else if (!currentValue.isComplete && !isTaskOverdue) {
      accumulator[1].push(currentValue);
    } else {
      accumulator[2].push(currentValue);
    }

    return accumulator;
  }, [[], [], []]);

  const sortByDueDate = (tasks: iTasks): iTasks => {
    return tasks.sort((a, b) => {
      if (a.dueDate && b.dueDate) return Date.parse(a.dueDate) - Date.parse(b.dueDate);
      if (a.dueDate) return -1;
      if (b.dueDate) return 1;
      return 0;
    });
  };

  return [...sortByDueDate(sortedTasks[0]), ...sortByDueDate(sortedTasks[1]), ...sortByDueDate(sortedTasks[2])];
};

This was my first time ever really playing around with the reduce method, and I feel pretty happy with the code change I made. If you have any suggestions for optimizing my code even further, please leave a comment and let me know or hit me up on Twitter at @Contimporary.

Oh, and for anybody who's curious, here are the YouTube videos I watched:

Also, for those curious, feel free to check out the code for the full app on my GitHub.

Happy Monday =)

Using Jest to check that a React Component doesn't render

Tim Winfred (They/He) — Tue, 29 Jun 2021 21:20:27 +0000

I was working on writing some Jest tests at work recently and ran into an issue with getting a false-positive when testing casing in which a component shouldn't be rendered.

The issue happened because I was using the React testing library's queryByText query. My expectation was that the test would fail if that test didn't exist, but that wasn't the case.

After playing around with the tests by throwing in some queryByText arguments that should have caused the test to fail, I was surprised to see the test still passing.

Here's what I had (modified for public consumption):

test("does not render component if user is not logged in", async (done) => {
    // All other logic has been stripped from this test sample
    const { queryByText } = render(<AccountDashboard />);

    await waitFor(() => {
        expect(queryByText("Welcome to your dashboard!")).toBeNull();
        done();
    });
});

According to the React documentation, the queryBy... method:

Returns the matching node for a query, and return null if no elements match. This is useful for asserting an element that is not present.

Unfortunately, the expect methods weren't failing the the tests were passing regardless of what the text was that I passed into queryByText. Feeling slightly frustrated, I set out to find a way to test for an empty component and settled on the following solution:

test("does not render component if user is not logged in", async (done) => {
    // All other logic has been stripped from this test sample
    const { contaner } = render(<AccountDashboard />);

    await waitFor(() => {
        expect(container.childElementCount).toEqual(0);
        done();
    });
});

Have you been able to find a better solution to testing cases when you expect that a component will NOT render? Please let me know in the comment section!

Happy testing =)

Creating Tic-Tac-Toe Using React / JavaScript

Tim Winfred (They/He) — Tue, 08 Jun 2021 06:48:28 +0000

As I continued my #100DaysOfCode challenge tonight, I decided to test my React skills to see if I could create the classic children's game Tic-Tac-Toe.

From start to finish, I believe the challenge took me about two hours, although the first 15 minutes was prepping how I wanted to design my code.

These were my pre-coding notes:

Use React

Create GameBoard component
Create GameRow component
Create GameSquare component (button)

State will live in the GameBoard component

State will include a 3x3 2D array that represents the board
- 0 = unfilled
- 1 = X
- 2 = O

State will include a moves counter that increments every time a move is made

Every time a player clicks on a GameSquare button, it sends an onClick up to parent component
Modifying the state will rerender the GameSquare component to visually show X or O

Every time a player makes a move, increment the move counter and check the move counter amount
If the counter is at least 5, check the win conditions
Only check win conditions related to the location that was updated (see below)

Win conditions:
- all items in a row
- all items in a column
- all items diagonally

Win conditions stored in a hash table (object)
- the keys would be the location of each square
>> i.e. [0,0], [0,1], [0,2], [1,0], [1,1], etc...
- values would be possible win directions for the key
>> i.e. [0,0] win conditions would be [[0,1],[0,2]], [[1,0],[2,0]], [[1,1],[2,2]]

If a win condition is ever satisfied, send an alert announcing who won and reset state

The hardest part of this challenge was figuring out how to handle the win conditions. I still think there is probably an algorithmic way to code the winConditions, but that felt more like a "nice-to-have". Maybe I'll end up updating it in the future, who knows =)

I'd love any feedback on my code, which I've pasted below for convenience. Drop me a comment if you have any thoughts!

The biggest issue I ran into was even though the gameBoard state was being updated when a GameBoard button was clicked, the DOM wasn't updating to reflect the change. After some sleuthing, I discovered that this was happening because I was originally just passing gameBoard into updateGameBoard (Gameboard.js - line 51). The children components weren't updating because React was seeing it as the same array (even though elements inside of it were updated). In the end, I had to spread the array into a new array to force it to update. Worked like a charm!

Here is the final code:

// GameBoard.js
import { useState, useEffect } from 'react';
import GameRow from './GameRow';

function App() {
  const [gameBoard, updateGameBoard] = useState([[0, 0, 0], [0, 0, 0], [0, 0, 0]]);
  const [winner, updateWinner] = useState();
  const [turnCounter, updateTurnCounter] = useState(1);
  const [currentPlayer, updateCurrentPlayer] = useState(1);

  useEffect(() => {
    if (winner) {
      alert(`Congrats player ${winner}, you're the winner!`);
      updateGameBoard([[0, 0, 0], [0, 0, 0], [0, 0, 0]]);
      updateWinner(null);
      updateTurnCounter(1);
      updateCurrentPlayer(1);
    }
  }, [winner]);

  const isWinner = (location) => {
    const winConditions = {
      '0,0': [[[0,1],[0,2]], [[1,0],[2,0]], [[1,1],[2,2]]],
      '0,1': [[[0,0],[0,2]], [[1,1],[2,1]]],
      '0,2': [[[0,0],[0,1]], [[1,2],[2,2]], [[1,1],[2,0]]],
      '1,0': [[[1,1],[1,2]], [[0,0],[2,0]]],
      '1,1': [[[0,1],[2,1]], [[1,0],[1,2]], [[0,0],[2,2]], [[0,2],[2,0]]],
      '1,2': [[[1,0],[1,1]], [[0,2],[2,2]]],
      '2,0': [[[0,0],[1,0]], [[2,1],[2,2]], [[1,1],[0,2]]],
      '2,1': [[[0,1],[1,1]], [[2,0],[2,2]]],
      '2,2': [[[0,2],[1,2]], [[2,0],[2,1]], [[0,0],[1,1]]]
    };

    let winner = false;

    winConditions[location].forEach(winLocation => {
      const isWinner = winLocation.every(item => {
        return gameBoard[item[0]][item[1]] === currentPlayer;
      });

      if (isWinner) {
        winner = true;
        return;
      }
    });

    return winner;
  }

  const handleGameSquareClick = (location) => {
    gameBoard[location[0]][location[1]] = currentPlayer;
    updateGameBoard([...gameBoard]);

    if (turnCounter > 4) {
      const weHaveAWinner = isWinner(location);

      console.log('do we have a winner?', weHaveAWinner);
      if (weHaveAWinner) {
        console.log('updating winner')
        updateWinner(currentPlayer);
      }
    }

    updateCurrentPlayer(currentPlayer === 1 ? 2 : 1);
    updateTurnCounter(turnCounter + 1);
  }

  return (
    <div className="App">
      <h1>TIM Tac Toe</h1>
      <h2>Player {currentPlayer}'s turn</h2>
      {
        gameBoard.map((row, index) => (
          <GameRow row={row} rowIndex={index} key={index} handleClick={handleGameSquareClick}/>
        ))
      }
    </div>
  );
}

export default App;

// GameRow.jsx
import GameSquare from './GameSquare';

function GameRow({ row, ...props }) {
  return (
    <div>
      {
        row.map((square, index) => (
          <GameSquare square={square} columnIndex={index} key={index} {...props} />
        ))
      }
    </div>
  )
}

export default GameRow;

import './GameSquare.scss';

function GameSquare({ square, handleClick, rowIndex, columnIndex }) {
  return (
    <button onClick={() => handleClick([rowIndex, columnIndex])}>
      {
        !square ? '' : (square === 1 ? 'X' : 'O')
      }
    </button>
  )
}

export default GameSquare;

Completing 4 JavaScript .filter() Method Challenges

Tim Winfred (They/He) — Mon, 07 Jun 2021 05:02:45 +0000

As a personal challenge to learn and grow my JavaScript skills, I will be digging into some of the most popular methods and properties the language has to offer. Over the next several weeks, I will be completing a series of algorithm challenges that require the use of specific methods/properties.

The first method in my challenge is filter().

According to the Mozilla documentation:

The Javascript array filter() creates a new array of elements from an existing array that meets a specified condition.

Time Complexity: O(n)

I decided to challenge myself with the .filter() method first because it's super useful when it comes to dealing with data. Pretty much every website with a catalogue of data (products, articles, users, etc.) needs a way to filter and return only the data necessary to perform an action. I know I have done many web searches and used the handy filtering options to narrow down the results to find exactly what I want.

If you've never used the filter() method, check out this awesome documentation from GeeksforGeeks for more information.

Challenge: Filter An Array of Objects

// create a function that filters an array of objects to find hotels rated at least N stars or higher

const data = [
    {
        name: 'Hilton',
        rating: 4.7
    },
    {
        name: 'Best Western',
        rating: 3.8
    },
    {
        name: 'Bob\'s Hotel',
        rating: 2.5
    },
    {
        name: 'Marriot',
        rating: 4.2
    }
];

function filterByRating(data, ratingMinimum, ratingMaximum) {
    data = data.filter(data => data.rating >= (ratingMinimum ?? 0));
    data = data.filter(data => data.rating <= (ratingMaximum ?? 5));
    return data;
}

const hotelsWithAtLeast4Stars = filterByRating(data, 4);
console.log(hotelsWithAtLeast4Stars);
// OUTPUT
// [{ name: 'Hilton', rating: 4.7 }, { name: 'Marriot', rating: 4.2 } ]

const hotelsWithAtLeast3Stars = filterByRating(data, 3);
console.log(hotelsWithAtLeast3Stars);
// OUTPUT
// [
//     { name: 'Hilton', rating: 4.7 },
//     { name: 'Best Western', rating: 3.8 },
//     { name: 'Marriot', rating: 4.2 }
//   ]

const hotelsBetween3and4Stars = filterByRating(data, 3, 4);
console.log(hotelsBetween3and4Stars);
// OUTPUT
// [ { name: 'Best Western', rating: 3.8 } ]

const hotelsWith3orLessStars = filterByRating(data, null, 3);
console.log(hotelsWith3orLessStars);
// OUTPUT
// [ { name: "Bob's Hotel", rating: 2.5 } ]

Challenge: Filter An Array of Numbers/Strings

// Challenge #1
// Create a function that filters strings by length given two arguments: minimum length, maximum length
// Either argument may be missing. if both are missing, return the original array

function filterStringsByLength(arrayOfStrings, minLength, maxLength) {
  arrayOfStrings = arrayOfStrings.filter(string => string.length >= (minLength ?? 0));
  arrayOfStrings = arrayOfStrings.filter(string => string.length <= (maxLength ?? string.length));
  return arrayOfStrings;
}

const arrayOfStrings = ['', 'a', 'bc', 'def', 'ghij', 'klmno', 'pqrstu', 'vwxyz12'];
const nums = [1,2,3,4,5]

const wordsAtLeast3Characters = filterStringsByLength(arrayOfStrings, 3);
console.log(wordsAtLeast3Characters);
// OUTPUT
// [ 'def', 'ghij', 'klmno', 'pqrstu', 'vwxyz12' ]

const wordsNoLongerThan5Characters = filterStringsByLength(arrayOfStrings, null, 5);
console.log(wordsNoLongerThan5Characters);
// OUTPUT
// [ '', 'a', 'bc', 'def', 'ghij', 'klmno' ]

const wordsAtLeast3CharactersAndNoLongerThan5Characters = filterStringsByLength(arrayOfStrings, 3, 5);
console.log(wordsAtLeast3CharactersAndNoLongerThan5Characters);
// OUTPUT
// [ 'def', 'ghij', 'klmno' ]

let minAndMaxNotProvided = filterStringsByLength(arrayOfStrings);
console.log(minAndMaxNotProvided);
// OUTPUT
// ['', 'a', 'bc', 'def', 'ghij', 'klmno', 'pqrstu', 'vwxyz12']


// Challenge #2
// Create a function that filters an array of numbers, given two arguments: minimum and maximum.
// Either argument may be missing. if both are missing, return the original array

function filterNumbersBySize(arrayOfNumbers, minSize, maxSize) {
  arrayOfNumbers = arrayOfNumbers.filter(number => number >= (minSize ?? number));
  arrayOfNumbers = arrayOfNumbers.filter(number => number <= (maxSize ?? number));
  return arrayOfNumbers;
}

const arrayOfNumbers = [-12, -4, 0, 2, 11, 63, 1001];

const numbersMinus5AndUp = filterNumbersBySize(arrayOfNumbers, -5);
console.log(numbersMinus5AndUp);
// OUTPUT
// [ -4, 0, 2, 11, 63, 1001 ]

const numbersNoGreaterThan10 = filterNumbersBySize(arrayOfNumbers, null, 10);
console.log(numbersNoGreaterThan10);
// OUTPUT
// [ -12, -4, 0, 2 ]

const numbersBetweenMinus4And11 = filterNumbersBySize(arrayOfNumbers, -4, 11);
console.log(numbersBetweenMinus4And11);
// OUTPUT
// [ -4, 0, 2, 11 ]

minAndMaxNotProvided = filterNumbersBySize(arrayOfNumbers);
console.log(minAndMaxNotProvided);
// OUTPUT
// [-12, -4, 0, 2, 11, 63, 1001]

Challenge: Filter Out Repeated Values

// Write a function to filter out any duplicates in an array
// Input type is an array of strings and/or numbers

function removeDuplicates(array) {
  return array.filter((item, index) => index === array.indexOf(item));
}

const arrayOfStrings = ['aa', 'bb', 'cc', 'dd', 'ee', 'aa', 'bb', 'cc'];

const arrayOfStringsWithoutDupes = removeDuplicates(arrayOfStrings);
console.log(arrayOfStringsWithoutDupes);
// OUTPUT
// [ 'aa', 'bb', 'cc', 'dd', 'ee' ]

const arrayOfNumbers = [0, 1, 1, 2, 3, 3, 3, 4, 5];

const arrayOfNumbersWithoutDupes = removeDuplicates(arrayOfNumbers);
console.log(arrayOfNumbersWithoutDupes);
// OUTPUT
// [ 0, 1, 2, 3, 4, 5 ]

const arrayOfNumbersAndStrings = arrayOfStrings.concat(arrayOfNumbers);

const arrayOfNumbersAndStringsWithoutDupes = removeDuplicates(arrayOfNumbersAndStrings);
console.log(arrayOfNumbersAndStringsWithoutDupes);
// OUTPUT
// [ 'aa', 'bb', 'cc', 'dd', 'ee', 0, 1, 2, 3, 4, 5 ]

View the code on my Github.

Design Patterns In JavaScript

Tim Winfred (They/He) — Sat, 05 Jun 2021 23:10:35 +0000

I was recently asked by a developer friend of mine what design patterns I use in my job. The question threw me off a bit because I didn't actually know the answer, even though I know that there are definitely patterns that I've used. Do those patterns have names? And why are the patterns I have been using better than others?

For today's post, I will be writing down my notes and thoughts as I learn about a variety of design patterns and how to implement them in JavaScript. Feel free to join me on my journey in this post, or make fun of my noob-ness as I discover something I feel like I should have learned already. (Better late than never, right?)

FYI: One of my primary resources for this post was this blog post from Lambda Test

What is a design pattern?

According to Wikipedia, a software design pattern is...:

A general, reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. Rather, it is a description or template for how to solve a problem that can be used in many different situations. Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.

The Lambda Test article also pointed out that they "represent time-tested solutions and best practices adopted by object-oriented software developers over time."

2021 JavaScript Design Patterns

Source

According to Lambda Test, not all of the patterns are necessary for use in JavaScript since there are native features that implement them for us, so I will only be discussing a select group of design patterns for this post. Feel free to drop me a comment if you want me to add one that I skipped over.

NOTE: All of the quoted definitions below come from the Software Design Patterns entry on Wikipedia

Constructor / Builder Pattern - Creational Design

Separate the construction of a complex object from its representation, allowing the same construction process to create various representations.

Ok, so I've definitely written JavaScript code using the Constructor design pattern before! I guess I just thought it was a feature of classes in JavaScript; I never knew that it was considered a "design pattern".

class Person {
  constructor(name, age, mother) {
    this.name = name;
    this.age = age;
    this.mother = mother;
  }
}

const tim = new Person('Tim', 31, null);
const tina = new Person('Tina', 57, null);

tim.mother = tina;

console.log(tim);

const grandma = new Person('Sherry', 80, null);

tina.mother = grandma;

console.log(tim);

Factory Pattern - Creational Design

Define an interface for creating a single object, but let subclasses decide which class to instantiate. Factory Method lets a class defer instantiation to subclasses.

So, based on the way the pattern is implemented in the Lambda Test post, it seems like the name is perfect. It is literally a pattern where you set up a single function that can take a variety of arguments to return the appropriate object. It's like asking a clothing factory for a shirt, they give you a shirt. Ask for pants, they give you pants. Ask for shoes, you get shoes. And each of those objects has it's own functionality.

function animalFactory() {
  this.createAnimal = function(animalType) {
    let animal;

    switch(animalType) {
      case 'dog':
        animal = new Dog();
        break;
      case 'cat':
        animal = new Cat();
        break;
      case 'horse':
        animal = new Horse();
        break;
      default:
        animal = new Monkey();
        break;
    }

    return animal;
  }
}

const Dog = function() {
  this.makeSound = () => {
    console.log('woof woof!');
  }
}

const Cat = function() {
  this.makeSound = () => {
    console.log('prrr prrr meow!');
  }
}

const Horse = function() {
  this.makeSound = () => {
    console.log('neeeighhh!')
  }
}

const Monkey = function() {
  this.makeSound = () => {
    console.log('ooooh ahh oooh oooh!');
  }
}

const factory = new animalFactory();

const jojo = factory.createAnimal('dog');
jojo.makeSound();

const smokey = factory.createAnimal('cat');
smokey.makeSound();

const princess = factory.createAnimal('horse');
princess.makeSound();

const kong = factory.createAnimal('monkey');
kong.makeSound();

Prototype Pattern - Creational Design

Specify the kinds of objects to create using a prototypical instance, and create new objects from the 'skeleton' of an existing object, thus boosting performance and keeping memory footprints to a minimum.

I haven't played around with prototyping very much, so I'm excited to dig into this more, especially since I know it's an awesome feature of JavaScript. In all honesty, this one confused me a lot at first, until I re-read the section in the Lambda Test article and realized it's all about cloning. Once I played around with the implementation below, I was able to figure it out and really understand it.

const macBook = {
  color: 'silver',
  turnOn() {
    console.log('turning on...');
  },
  turnOff() {
    console.log('turning off...');
  }
}

// Proper prototype cloning
const myComputer = Object.create(macBook, { owner: { value: 'Tim'} });
console.log(myComputer.__proto__ === macBook);

// Not a prototype copy
const newComputer = {...macBook, owner: 'John'};
console.log(newComputer.__proto__ === macBook);

macBook.power = 'USB-C';

// The protoype gets the new value for 'power'
console.log(myComputer.power);
// But the non-prototype doesn't
console.log(newComputer.power);

Singleton Pattern / Strict Pattern - Creational Design

Ensure a class has only one instance, and provide a global point of access to it.

So this one makes sure that only one instance exists. If something attempts to make another, it simply returns a reference to the one that already exists. Easily understood.

const Database = (function () {
  let instance;

  function createDatabaseInstance() {
    return new Object('Database Instance');
  }

  function getDatabaseInstance() {
    if (!instance) {
      instance = createDatabaseInstance();
    }

    return instance;
  }

  return { getDatabaseInstance }
})();

const databaseInstance1 = Database.getDatabaseInstance();
const databaseInstance2 = Database.getDatabaseInstance();

console.log(databaseInstance1 === databaseInstance2);

Adapter Pattern / Wrapper Pattern - Structural Design

Convert the interface of a class into another interface clients expect. An adapter lets classes work together that could not otherwise because of incompatible interfaces. The enterprise integration pattern equivalent is the translator.

Having lived abroad for a year, the idea of an adapter is easy enough to understand. It seems like it could possibly be a useful way of connecting a function from legacy code to a function in a newer part of the codebase?

I found this really awesome YouTube video that perfectly explains a use case for the Adapter pattern and was able to use that to create the below implementation to combine two different NPM libraries into one utility. The code I wrote isn't easily copy-pasted into this post, so feel free to check out the code on my Github.

I can definitely imagine A LOT of use cases for this design pattern and actually look forward to using it to help make my code more easily maintainable in the future! Probably my favorite design pattern so far =)

Composite Pattern - Structural Design

Compose objects into tree structures to represent part-whole hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly.

Hey, it's just nodes and components! I definitely know about this design pattern: One parent, multiple children. And those children can have multiple children. It's the one-to-many pattern used in JSON and HTML trees. And now I know the official name of the design pattern for it =)

const Node = function(name) {
  this.children = [];
  this.name = name;
};

Node.prototype = {
  add: function(child) {
    this.children.push(child);
    return this;
  }
}

// recursive console log of what's inside of the tree
const log = (root) => {
  if (!root) return;

  console.log('');
  console.log(`---Node: ${root.name}---`);
  console.log(root);

  root.children.forEach(child => {
    if(child?.children.length) {
      log(child);
    }
  });
}

const init = () => {
  const tree = new Node('root');
  const [left, right] = [new Node("left"), new Node("right")];
  const [leftleft, leftright] = [new Node("leftleft"), new Node("leftright")];
  const [rightleft, rightright] = [new Node("rightleft"), new Node("rightright")];

  tree.add(left).add(right);
  left.add(leftleft).add(leftright);
  right.add(rightleft).add(rightright);

  log(tree);
}

init();

Module Pattern - Structural Design

Group several related elements, such as classes, singletons, methods, globally used, into a single conceptual entity.

This design pattern reminds me of when I learned Java: Getting to give your function private functions and variables, while only exposing the functions and variables that are necessary. I have definitely used this design pattern multiple times in my career. Good to know it has a name...

const userApi = () => {
  // private variables
  const users = [];

  // private function
  const addUser = (name) => {
    users.push(name);

    return users[users.length -1];
  }

  // private function
  const getAllUsers = () => {
    return users;
  }

  // private function
  const deleteUser = (name) => {
    const userIndex = users.indexOf(name);

    if (userIndex < 0) {
      throw new Error('User not found');
    }

    users.splice(userIndex, 1);
  }

  // private function
  const updateUser = (name, newName) => {
    const userIndex = users.indexOf(name);

    if (userIndex < 0) {
      throw new Error('User not found');
    }

    users[userIndex] = newName;

    return users[userIndex];
  }

  return {
    // public functions
    add: addUser,
    get: getAllUsers,
    del: deleteUser,
    put: updateUser
  }
}

const api = userApi();

api.add('Tim');
api.add('Hina');
api.add('Yasmeen');
api.add('Neeloo');

console.log(api.get());

api.del('Yasmeen');

console.log(api.get());

api.put('Tim', 'Tim Winfred');

console.log(api.get());

Decorator Pattern - Structural Design

Attach additional responsibilities to an object dynamically keeping the same interface. Decorators provide a flexible alternative to subclassing for extending functionality.

Ok, this one is fun and easy to understand. I can set up a function to give an object common functionality and traits, but then I can "decorate" each individual instance of that object with it's own functionality and traits. I can definitely see myself using this at some point in the future.

const Animal = function(type) {
  this.type = type || 'dog';
}

const dog = new Animal('dog');
const cat = new Animal('cat');

dog.bark = function() {
  console.log('woof woof!');
  return this;
}

cat.meow = function() {
  console.log('meow meooooooow!');
  return this;
}

dog.bark();
cat.meow();

Facade Pattern - Structural Design

Provide a unified interface to a set of interfaces in a subsystem. Facade defines a higher-level interface that makes the subsystem easier to use.

I'm actually fairly familiar with the use of a facade. I've been leveraging a pre-built facade on one of the projects I am currently working on at work. (It is even imported with the name facade, but I had no idea that this was a "design pattern".)

I found this video on JavaScript facade design that was really helpful. (The guy presenting in that video has a LOT of really helpful videos.)

import axios from 'axios';

function getUsers() {
  return facade.get('https://jsonplaceholder.typicode.com/users');
}

function getUserById(id) {
  return facade.get('https://jsonplaceholder.typicode.com/users', { id });
}

const facade = {
  get: function(url, params) {
    return axios({
      url,
      params,
      method: 'GET'
    }).then(res => res.data);
  }
};

async function getData() {
  try {
    console.time('getUsers took');
    const users = await getUsers();
    console.timeEnd('getUsers took');
    console.log(`There are ${users.length} users`);

    console.time('getUserById took');
    const user1 = await getUserById(1);
    console.timeEnd('getUserById took');
    console.log(user1);
  } catch (error) {
    console.log(error);
  }
}

getData();

Proxy Pattern - Structural Design

Provide a surrogate or placeholder for another object to control access to it.

As a Magic: The Gathering player, this one makes sense in theory: Don't use the expensive card when you can use a proxy card instead.

I found this highly-rated YouTube video about the Proxy Design Pattern and how it can be used in JavaScript to create a cache to save time and reduce the number of times you have to hit an external API.

// Mock External API
function CryptoCurrencyAPI() {
  this.getValue = function(coin) {
    console.log(`Calling Crypto API to get ${coin} price...`);

    switch(coin.toLowerCase()) {
      case 'bitcoin':
        return 38000;
      case 'ethereum':
        return 2775;
      case 'dogecoin':
        return 0.39;
    }
  }
}

function CryptoCurrencyAPIProxy() {
  this.api = new CryptoCurrencyAPI();
  this.cache = {};

  this.getValue = function(coin) {
    if(!this.cache[coin]) {
      console.log(`The value of ${coin} isn't stored in cache...`);
      this.cache[coin] = this.api.getValue(coin);
    }

    return this.cache[coin];
  }
}

const proxyAPI = new CryptoCurrencyAPIProxy();

console.log(proxyAPI.getValue('Bitcoin'));
console.log(proxyAPI.getValue('Bitcoin'));
console.log(proxyAPI.getValue('Ethereum'));
console.log(proxyAPI.getValue('Ethereum'));
console.log(proxyAPI.getValue('Dogecoin'));
console.log(proxyAPI.getValue('Dogecoin'));

Chain of Responsibility Pattern - Behavioral Design

Avoid coupling the sender of a request to its receiver by giving more than one object a chance to handle the request. Chain the receiving objects and pass the request along the chain until an object handles it.

This is another one of those patterns that I definitely understand in theory and can connect to a lot of real world scenarios, but I can't immediately think of an implementation for coding aside from the sample given in the Lambda Test article.

After playing around with it a bit, I actually do like this design pattern and enjoy the ease of method chaining. What do you think of what I created? I'm not quite sure it fulfills the "object" definition from Wikipedia...

const ATM = function() {
  this.withdrawl = function(amount) {
    console.log(`Requesting to withdrawl $${amount.toFixed(2)}`);

    if (amount % 1 !== 0) {
      console.log('Sorry, this ATM can\'t dispense coins. Please request another amount.');
      return;
    }

    const dispenseOutput = {};

    // chain or responsibility function
    function get(bill) {
      dispenseOutput[bill] = Math.floor(amount / bill);
      amount -= dispenseOutput[bill] * bill;

      return { get };
    }

    get(100).get(50).get(20).get(10).get(5).get(1);

    this.dispense(dispenseOutput);
  };

  this.dispense = function(bills) {
    console.log('--- Dispensing cash ---')
    Object.entries(bills).forEach(([key, value]) => {
      console.log(`- Dispensing ${value} $${key} bills`);
    });
  }
};

const myATM = new ATM();

myATM.withdrawl(126.10);
myATM.withdrawl(1287);
myATM.withdrawl(879);

Command Pattern - Behavioral Design

Encapsulate a request as an object, thereby allowing for the parameterization of clients with different requests, and the queuing or logging of requests. It also allows for the support of undoable operations.

This one seems pretty easy, and I really like the separation of the command object and the receiver. Makes for clean code. I actually was trying to create a calculator with React recently, so this is the perfect solution!

const calculationMethods = {
  add: function(x, y) {
    return x + y;
  },
  subtract: function(x, y) {
    return x - y;
  },
  multiply: function(x, y) {
    return x * y;
  },
  divide: function(x, y) {
    return x / y;
  }
};

const calculator = {
  execute: function(method, num1, num2) {
    if (!(method in calculationMethods)) return null;

    return calculationMethods[method](num1, num2);
  }
};

console.log(calculator.execute('add', 1, 2));
console.log(calculator.execute('subtract', 5, 2));
console.log(calculator.execute('multiply', 11, 2));
console.log(calculator.execute('divide', 10, 2));
console.log(calculator.execute('square root', 20));

Observer (Pub/Sub) Pattern - Behavioral Design

Define a one-to-many dependency between objects where a state change in one object results in all its dependents being notified and updated automatically.

My immediate thought is that this makes me think of "observables" in JavaScript, which I haven't played around with too much (at least not in a while). The pub/sub idea of this pattern also makes me think of websockets and Redux.

In my below implementation, I used the example from this freeCodeCamp video that has great explaintion of the observer pattern. I switch things up a bit and implemented some method chaining:

function Subject() {
  this.observers = [];
}

Subject.prototype = {
  subscribe: function(observer) {
    this.observers.push(observer);

    return this;
  },

  unsubscribe: function(observer) {
    const indexOfObserver = this.observers.indexOf(observer);
    if (indexOfObserver > -1) {
      this.observers.splice(indexOfObserver, 1);
    }

    return this;
  },

  notifyObserver: function(observer) {
    const indexOfObserver = this.observers.indexOf(observer);
    if (indexOfObserver > -1) {
      this.observers[indexOfObserver].notify();
    }

    return this;
  },

  notifyAllObservers: function() {
    this.observers.forEach(observer => {
      observer.notify();
    });

    return this;
  }
}

function Observer(name) {
  this.name = name;
}

Observer.prototype = {
  notify: function() {
    console.log(`Observer ${this.name} has been notified`);
  }
};

const subject = new Subject();

const observer1 = new Observer('user001');
const observer2 = new Observer('user002');
const observer3 = new Observer('user003');
const observer4 = new Observer('user004');
const observer5 = new Observer('user005');

subject.subscribe(observer1).subscribe(observer2).subscribe(observer3).subscribe(observer4).subscribe(observer5);
subject.notifyObserver(observer4);
subject.unsubscribe(observer4);
subject.notifyAllObservers();

Template Method Pattern - Behavioral Design

Define the skeleton of an algorithm in an operation, deferring some steps to subclasses. Template method lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure.

Ok, so I definitely don't understand this based on that description haha. It sounds like it's extending classes, and giving the new sub-class new methods, but I definitely have to see if I can find a better description of this one...

Unlike the definition of this pattern, this explanation of the Template Method Pattern from Microsoft helped me understand what is happening (although they're not using JavaScript), as did this blog post.


class HouseTemplate {
  constructor(name, address) {
    this.name = name;
    this.address = address;
  }

  buildHouse() {
    this.buildFoundation();
    this.buildPillars();
    this.buildWalls();
    this.buildWindows();
    console.log(`${ this.name } has been built successfully at ${ this.address }`);
  }

  buildFoundation() {
    console.log('Building foundation...');
  }

  buildPillars() {
    throw new Error('You have to build your own pillars');
  }

  buildWalls() {
    throw new Error('You have to build your own walls');
  }

  buildWindows() {
    console.log('Building windows');
  }
}

class WoodenHouse extends HouseTemplate {
  constructor(name, address) {
    super(name, address);
  }

  buildPillars() {
    console.log('Building pillars for a wooden house');
  }

  buildWalls() {
    console.log('Building walls for a wooden house');
  }
}

class BrickHouse extends HouseTemplate {
  constructor(name, address) {
    super(name, address);
  }

  buildPillars() {
    console.log('Building pillars for a brick house');
  }

  buildWalls() {
    console.log('Building walls for a brick house');
  }
}

const woodenHouse = new WoodenHouse('Wooden house', '123 Maple Road');
const brickHouse = new BrickHouse('Brick house', '456 Stone Lane');

woodenHouse.buildHouse();
brickHouse.buildHouse();

Strategy Pattern - Behavioral Design

Define a family of algorithms, encapsulate each one, and make them interchangeable. Strategy lets the algorithm vary independently from clients that use it.

Alright, so this is the last one! And, thankfully, it's super simple to understand thanks to the Lambda Test Article =) I appreciate any method that allows for DRY coding and can definitely imagine a variety of implementations for this in the future.

function Regal() {
  this.getTicketPrice = function(quantity) {
    return quantity * 11.99;
  }
}

function AMC() {
  this.getTicketPrice = function(quantity) {
    return quantity * 10.99;
  }
}

function Cinemark() {
  this.getTicketPrice = function(quantity) {
    return quantity * 9.99;
  }
}

function TicketPrice() {
  this.theaterChain;

  this.setTheaterChain = function(chain) {
    this.theaterChain = chain;
  }

  this.calculate = function(quantity) {
    return this.theaterChain.getTicketPrice(quantity);
  }
}

const regal = new Regal();
const amc = new AMC();
const cinemark = new Cinemark();

const ticketPrice = new TicketPrice();
ticketPrice.setTheaterChain(regal);
console.log(ticketPrice.calculate(2));

ticketPrice.setTheaterChain(amc);
console.log(ticketPrice.calculate(3));

ticketPrice.setTheaterChain(cinemark);
console.log(ticketPrice.calculate(4));

Final Thoughts

And that's all folk (for now)!

I honestly had so much of fun digging into all of these design patterns, and am so happy I did. I skipped over a few patterns that have ES6 implementations in JavaScript, but overall I definitely learned a lot.

If you read this far, I hope my journey and my code has been helpful to you. See ya soon!

Visit my Github repo to get all of the code above in one place.

Using React's forwardRef: Component Name Missing in DevTools

Tim Winfred (They/He) — Thu, 27 May 2021 07:07:35 +0000

Hey there! Welcome to my first post =)

A quick note before I get started on the real meat of this post:
I am a front-end web developer who is currently learning to be a better React developer. There's so much to the world of JavaScript and React, so if you ever read any of my posts and have feedback, please leave a comment and let me know. Constructive feedback and advice is always welcome!

Tonight I got to use React's forwardRef method to get form input values in child components. It was actually pretty easy when I figured it out, and the React docs for the forwardRef method were simple to skim through and understand.

Initially, the one thing that I didn't like is that the method hides information about the component being wrapped in the forwardRef method. I wasn't able to see the component name in my DevTools.

This is what my code looked like initially:

Thankfully, because React is awesome like that, the documentation had a solution for me! I simply had to create a separate function for everything inside of the forwardRef method.

This is how I updated the code after digging into the documentation:

And there you have it! The fix was that simple, and the React documentation was super helpful.

Until next time...