Forem: Neil Berg

5 Tips for Ending Coder's Block

Neil Berg — Tue, 11 Jun 2019 21:11:22 +0000

Coder's block, the equivalent to writer's block, is a common feeling where developers don't know what to do next.

If you're just learning to code, there's often a daunting feeling of "what should I build?". The so-called "tutorial-hell" is a feeling of not knowing how to apply new skills to a project outside the scope of the tutorial. Or, you may just be looking to have some fun on a side project, but don't know where to start.

Luckily, there are many tricks to help break that feeling of being stuck and instead place you on a happy and inspired coding journey.

Break through the block and start feeling excited again!

Below are my top 5 tips. Have others? Make sure you drop them in the comments below!

1. Imitate With a Twist

Source: Unicode/Cosmopolitan

Musicians, artists, chefs, writers, fashion designers, filmmakers, and most other creatively-driven people are constantly viewing, hearing, tasting, and consuming work from their peers. Blending all of these experiences from others with your own interests leads to something original.

Take note of websites, apps, and other digital products you use regularly and see which ones spark you with inspiration.

Do you like the design?
Are you impressed how data is quickly fetched?
Does an animation after a click bring a smile to your face?

Whatever the feature is, try recreating it with your own flair. Start small - try building just that nifty header or that silky-smooth transition. Incrementally build up from there and move on to additional features.

The best part? Once you finish the feature, you'll gain confidence that you can indeed build that awesome piece of a product you love (and show off to potential employers!).

2. Look Beyond the Screen

So often as developers we're literally living and working inside of our computer/phone screens. However, there is so much inspiration to be found outside of these screens.

Netflix and CSS Grid and chill?

Magazines, billboards, album covers, cereal boxes, labels on food products and just about everything has a design that is begging to be translated into code! Try implementing a responsive grid for some of those static designs, and have fun with funky colors and fonts that are often found in print but rarely used in code.

3. Talk to People

Whether on a plane, sitting at a bar, or just hanging out with friends, ask some questions about what new site or app someone would love to have. Sure, most times there is already an app for it, but who cares, build another one!

"You know how to code?! Can you make this, and that, and this other thing?"

No worries whether it'll be used or not, just treat this like a freelance project where you research what similar products already exist, how they can be improved, and how your code can help solve the problem at hand.

Best case scenario: you develop a useful (maybe profitable) product for someone. Worst case scenario: you have a new portfolio item and maybe even a new friend.

4. Hindsight is 20/20

Look back at a project or piece of code you wrote months ago. No doubt it can be improved with the knowledge and skills you have gained since then. Make some refactors and add some new features to it. Take it in new directions based on a tutorial you just finished or a youtube video/blog post you just read.

Looking backwards can move you forward. Source: Lori Ward

5. Contribute to Open Source Code

Sometimes the best plan of action is not starting from scratch on your own, but jumping on existing projects.

Look for tags on Github seeking help and are good first issues to tackle. Attend a local meetup or hack-a-thon and see what projects are ongoing that you can join. Hangout on Dev.to, Twitter, Reddit, and other social media platforms to see what others are publishing and whether you can help them.

Other developers need you!

Final thoughts

If you're feeling stuck about what to do next, know that you are in good company. Everyone I know has felt this way in the past and occasionally feels it now. Try a few tips above to see if it helps you out and let me know if you have additional ideas for others or me to use in the future!

Leaping Into Linked Lists

Neil Berg — Sun, 09 Jun 2019 22:53:55 +0000

When working with arrays, finding the point of insertion/deletion is constant in time but performing the insertion/deletion is O(n). This potentially costly operation happens since elements in arrays are allocated contiguously in memory, leading to a reorganization of the structure while performing the insertion/deletion.

On the flip side, linked lists, which are comprised of nodes containing a data value and a pointer to the next node (and previous node in the case of doubly linked lists), allow for constant-time insertion/deletion of elements. This performance gain - relative to arrays - occurs since we only need to track the current pointer in memory during traversal and re-assign that pointer when the target element is added or removed.

In other words, regardless of the linked list size, the act of insertion/deletion requires a single action of pointer reassignment, i.e., O(1) time complexity. Though, the traversal to find the element to add/remove has a complexity of O(n). In summary, the time complexities of insertion/deletion between arrays and linked lists are:

Arrays

Finding the point of insertion/deletion: O(1)
Performing the point of insertion/deletion: O(n)

Linked Lists

Finding the point of insertion/deletion: O(n)
Performing the point of insertion/deletion: O(1)

Let's leap into the world of singly and doubly linked lists.

Singly linked lists

Singly linked lists are defined by nodes, which are plain objects, that contain two properties:

A value, such as an integer or a string
A pointer to the next node in the list, or null if at the end of the list.

The list itself also has two properties:

A head whose value points to the first node in the list
A length

For instance, a singly linked list with three nodes containing the values of 5, 8, and 13 looks like:

Creating Node and SinglyLinkedList Classes

Using ES6 classes as syntactic sugar for prototypal inheritance, we can start by defining classes for nodes and the singly linked list structure.

Each Node in the list is instantiated with some value (e.g. an integer) and an initial next property set to null.

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

A new instance of Node is created with the new operator and the desired value passed into it:

const node = new Node(5);
console.log(node);
// Node { value: 5, next: null }

The list is instantiated by defining two properties: a head that initially is set to null and a length that is initially zero.

class SinglyLinkedList {
  constructor() {
    this.head = null;
    this.length = 0;
  }

  // Methods to be added next
  add(value) {}
  addAt(k, value) {}
  remove(value) {}
  removeAt(k) {}
  indexOf(value) {}
  nodeAt(k) {}
}

const sll = new SinglyLinkedList();
console.log(sll);
// SinglyLinkedList { head: null, length: 0 }

A new instance of SinglyLinkedList is created with the new operator:

const sll = new SinglyLinkedList();

Adding Nodes

Adding a node at the end of a singly linked list takes the following steps:

Create a new node with the inputted value.
Check if the list is empty, i.e., the head is null.
If empty, set the list's head to the new node.
If not empty, traverse the list until the last node (which has a next value of null) is found, then set the last node's next property to point to the new node.
Increment the list's length.

add(value) {
  const node = new Node(value);

  if (!this.head) {
    this.head = node;
  } else {
    let current = this.head;
    while (current.next) {
      current = current.next;
    }
    current.next = node;
  }
  this.length++;
}

//
const sll = new SinglyLinkedList();
sll.add(5);
sll.add(8);
sll.add(13);
console.log(JSON.stringify(sll, null, 4))
// {
//     "head": {
//         "value": 5,
//         "next": {
//             "value": 8,
//             "next": {
//                 "value": 13,
//                 "next": null
//             }
//         }
//     },
//     "length": 3
// }

Adding Node at Index k

Adding a node at an index k is accomplished with the following steps:

Ensure that index k is non-negative and less than the list's length.
Create a new node with the inputted value.
If k = 0, set the new node's next value to the initial next value of the list's head and reassign the head to the new node.
If k > 0, loop k times starting at the head and track the previous and current nodes during the traversal. These nodes are used to bracket the new node in the next step.
Set the previous node's next value to the new node and the new node's next value to the current node.
Increment the list's length.

  addAt(k, value) {
    if (k < 0 || k > this.length) {
      return false;
    }

    const node = new Node(value);
    if (k === 0) {
      node.next = this.head.next;
      this.head = node;
    } else {
      let current = this.head;
      let previous = undefined;
      for (let i = 0; i < k; i++) {
        previous = current;
        current = current.next;
      }
      previous.next = node;
      node.next = current;
    }
    this.length++
  }

// Example -- 
const sll = new SinglyLinkedList();
sll.add(5);
sll.add(8);
sll.add(13);
sll.addAt(2, 10);
console.log(JSON.stringify(sll, null, 4));
// {
//     "head": {
//         "value": 5,
//         "next": {
//             "value": 8,
//             "next": {
//                 "value": 10,
//                 "next": {
//                     "value": 13,
//                     "next": null
//                 }
//             }
//         }
//     },
//     "length": 4
// }

Removing Nodes

Removing nodes with a specific value is accomplished in the following steps:

If the target value is the value of the head, point the head to the next value of the head and decrement the list's length.
Otherwise, traverse the list - tracking the previous and current nodes - until the target node's value is reached.
Set the previous node's next value to the current node's next value.
Decrement the list's length.

remove(value) {
  if (value === this.head) {
    this.head = this.head.next;
    this.length--;
  } else {
    let current = this.head;
    let previous = undefined;
    while (current.next) {
      // Traverse until target value found or end of list when current.next === null
      if (current.value === value) {
        previous.next = current.next;
        this.length--;
        break;
      }
    }
  }
}
// Example --
const sll = new SinglyLinkedList();
sll.add(5);
sll.add(8);
sll.add(13);
sll.addAt(2, 10);
sll.remove(8);
console.log(JSON.stringify(sll, null, 4));
// {
//     "head": {
//         "value": 5,
//         "next": {
//             "value": 10,
//             "next": {
//                 "value": 13,
//                 "next": null
//             }
//         }
//     },
//     "length": 3
// }

Removing Nodes at Index k

Removing nodes at index k is accomplished in the following steps:

Ensure that k is non-negative and less than the list's length.
If k === 0, re-set the head to point to it's next value and decrement the list's length.
If k > 0, traverse the list k times - keeping track of the previous and current node - and then set the previous node's next value to the current node's next value. Decrement the list.

removeAt(k) {
  if (k < 0 || k > this.length) {
    return false;
  }

  if (k === 0) {
    this.head = this.head.next;
    this.length--;
  } else {
    let current = this.head;
    let previous = undefined;
    for (let i = 0; i < k; i++) {
      previous = current;
      current = current.next;
    }
    previous.next = current.next;
    this.length--;
  }
}
// Example --
const sll = new SinglyLinkedList();
sll.add(5);
sll.add(8);
sll.add(13);
sll.removeAt(1);
console.log(JSON.stringify(sll, null, 4));singlyLinkedList.js
// {
//     "head": {
//         "value": 5,
//         "next": {
//             "value": 13,
//             "next": null
//         }
//     },
//     "length": 2
// }

The Index of a Value

Locating the index associated with a certain value is accomplished by simply traversing the list until the target value is found and returning how many steps the traversal required. If no value is found we can return -1 or something similar.

indexOf(value) {
  let i = 0;
  let current = this.head;
  while (i < this.length) {
    if (current.value === value) {
      return i;
    }
    current = current.next;
    i++;
  }
  return -1;
}

// Example --
const sll = new SinglyLinkedList();
sll.add(5);
sll.add(8);
sll.add(13);
console.log(sll.indexOf(5)); // 0
console.log(sll.indexOf(8)); // 1
console.log(sll.indexOf(13)); // 2

The Node at Index k

Locating the node at a particular index is accomplished by simply traversing the list k times and returning the resulting node. As done before, we also first check to make sure a valid index is provided.

nodeAt(k) {
  if (k < 0 || k > this.length - 1) {
    return false;
  }
  let current = this.head;
  for (let i = 0; i < k; i++) {
    current = current.next;
  }
  return current;
}

// Example --
const sll = new SinglyLinkedList();
sll.add(5);
sll.add(8);
sll.add(13);
console.log(JSON.stringify(sll.nodeAt(1), null, 4));
// {
//     "value": 8,
//     "next": {
//         "value": 13,
//         "next": null
//     }
// }

Doubly Linked Lists

We saw that only forward traversal (starting at the head) was possible in singly linked lists. Enabling forward and backward traversal is possible by adding a previous or prev property to each node and a tail property to the linked list. The result is a doubly linked list and conceptually looks like:

Creating Node and DoublyLinkedList Classes

Each Node in the list is instantiated with some value (e.g., an integer) and next and prev properties set to null.

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
    this.prev = null;
  }
}

The list is instantiated by defining three properties: a head and tail that initially are set to null and a length that is initially zero.

class SinglyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
    this.length = 0;
  }

  // New methods to be added next
  display() {}

  addAtHead(value) {}
  addAtTail(value) {}
  addAtIndex(k, value) {}
  addAtElement(element, value) {}

  removeAtHead() {}
  removeAtTail() {}
  removeAtIndex(k) {}
  removeAtElement(element) {}
}

const dll = new DoublyLinkedList();
console.log(dll);
// DoublyLinked { head: null, tail: null, length: 0 }

Displaying the List

Logging a doubly linked list to the console is a bit tricky due to the circuitous nature of the the prev pointers. I prefer to display the head, tail, and each node on new lines surrounded by arrows representing their prev and next properties:

display() {
  let dataString = 'Head => ' + '\n';
  let current = this.head;
  while (current !== null) {
    dataString += '<-' + current.value + '->' + '\n';
    current = current.next;
  }
  dataString += '<= Tail';
  return dataString;
}

Adding Nodes at the Head

Adding nodes at the head of the list is accomplished in the following steps:

If the list is empty, point the head and tail to the new node.
If the list is not empty:
- Set the new node's next property to the head's current value (i.e., the current first node in the list).
- Set the current first node's prev property (this.head.prev) to the new node.
- Reset the head to point to the new node.
Increment the list's length.

addAtHead(value) {
 let node = new Node(value);
 if (!this.head) {
   // First node
   this.head = node;
   this.tail = node;
 } else {
   node.next = this.head;
   this.head.prev = node;
   this.head = node;
 }
 this.length++;
}
// -- Example
const dll = new DoublyLinkedList();
dll.addAtHead(13);
dll.addAtHead(8);
dll.addAtHead(5);
console.log(dll.display());
// Head =>
// <-5->
// <-8->
// <-13->
// <= Tail

Addings Nodes at the Tail

Adding nodes at the tail is nearly identical to adding at the head:

If the list is empty, point the head and tail to the new node.
If the list is not empty:
- Set the new node's prev property to the tail's current value (i.e., the current last node in the list)
- Set the current last node's next property (this.tail.next) to the new node.
- Reset the tail to point to the new node.
Increment the list's length.

addAtTail(value) {
  let node = new Node(value);
  if (!this.tail) {
    // First node
    this.tail = node;
    this.head = node;
  } else {
    node.prev = this.tail;
    this.tail.next = node;
    this.tail = node;
  }
  this.length++;
}
// -- Example
const dll = new DoublyLinkedList();
dll.addAtHead(13);
dll.addAtHead(8);
dll.addAtHead(5);
dll.addAtTail(22);
console.log(dll.display());
// Head => 
// <-5->
// <-8->
// <-13->
// <-22->
// <= Tail

Adding Nodes at Index k

Adding new nodes at a specified index k is accomplished by:

Checking that the index is non-zero and less than the list's length
If k = 0, we're at the beginning of the list, so the new node is inserted at the head (see steps above for addAtHead())
If k = the list's length, we're at the end of the list, so the new node is inserted at the tail (see steps above for addAtTail())
Otherwise, traverse k steps forward from the head (as shown below) or backward from the tail and track the current head in each step. Then:
- Set the new node's prev property to the current head at the end of the traversal
- Set the new node's next property to the next property of the current node
- Set the current node's next property to the new node
Increment the list's length.

addAtIndex(k, value) {
  const node = new Node(value);
  if (k < 0 || k > this.length) return undefined;
  if (k === 0) {
    // at head
    node.next = this.head;
    this.head.prev = node;
    this.head = node;
  } else if (k === this.length - 1) {
    // at tail
    node.prev = this.tail;
    this.tail.next = node;
    this.tail = node;
  } else {
    //somewhere in the body
    let i = 1;
    let current = this.head;
    while (current.next) {
      if (i === k) {
        node.prev = current;
        node.next = current.next;
        current.next = node;
      }
      current = current.next;
      i++;
    }
  }
  this.length++;
}
// -- Example
const dll = new DoublyLinkedList();
dll.addAtHead(13);
dll.addAtHead(8);
dll.addAtHead(5);
dll.addAtTail(22);
dll.addAtIndex(2, 10);
console.log(dll.display());
// Head => 
// <-5->
// <-8->
// <-10->
// <-13->
// <-22->
// <= Tail

Adding Nodes at an Element

Adding nodes at target element is even easier than adding at a target index. We simply traverse the list until the target element is found, tracking the current node at each step, and then:

Set the new node's prev property to the current node.
Set the new node's next property to the value current node's next property.
Set the current node's next value to the current node.
Increment the list's length.

addAtElement(element, value) {
  const node = new Node(value);
  let current = this.head;
  while (current.value !== element && current.next) {
    current = current.next;
  }
  node.prev = current;
  node.next = current.next;
  current.next = node;
  this.length++;
}
// -- Example
const dll = new DoublyLinkedList();
dll.addAtHead(13);
dll.addAtHead(8);
dll.addAtHead(5);
dll.addAtTail(22);
dll.addAtIndex(2, 10);
dll.addAtElement(5, 7);
console.log(dll.display());
// Head => 
// <-5->
// <-7->
// <-8->
// <-10->
// <-13->
// <-22->
// <= Tail

Removing Nodes at the Head

To remove a node at the head, we essentially skip over the first element in the list. This is done by:

Moving the head to its next value.
Setting the prev property of the node that the head is now pointed at to null.
Decrementing the list's length.

removeAtHead() {
  if (this.head) {
    this.head = this.head.next;
    this.head.prev = null;
    this.length--;
  }
}
// -- Example
const dll = new DoublyLinkedList();
dll.addAtHead(13);
dll.addAtHead(8);
dll.addAtHead(5);
dll.removeAtHead();
console.log(dll.display());
// Head => 
// <-8->
// <-13->
// <= Tail

Removing Nodes at the Tail

To remove a node at the tail, we essentially skip over the last element in the list. This is done by:

Moving the tail to the tail's prev node.
Setting the next property of the node that the tail is now pointing at to null.
Decrementing the list's length.

removeAtTail() {
  if (this.tail) {
    this.tail = this.tail.prev;
    this.tail.next = null;
    this.length--;
  }
}
// -- Example
const dll = new DoublyLinkedList();
dll.addAtHead(13);
dll.addAtHead(8);
dll.addAtHead(5);
dll.removeAtTail();
console.log(dll.display());
// Head => 
// <-5->
// <-8->
// <= Tail

Removing Nodes at Index k

When removing nodes at a target index k, we first check to make sure k is non-negative and less than the list's length. Then:

If k = 0, we're at the head, call removeAthead()
If k = list's length, we're at the tail, call removeAtTail()
Otheriwse, traverse k steps, tracking the current node during each step, and then essentially skip over the node to be removed by:
- Setting the current node's prev.next value to the current node's next value.
- Setting the current node's next.prev value to the current node's prev value.
Decrement the list's length.

removeAtIndex(k) {
  if (k < 0 || k > this.length - 1) {
    return undefined;
  }
  if (k === 0) {
    // at the head
    this.removeAtHead();
  } else if (k === this.length - 1) {
    // at the tail
    this.removeAtTail();
  } else {
    let current = this.head;
    for (let i = 0; i < k; i++) {
      previous = current;
      current = current.next;
    }
    current.prev.next = current.next;
    current.next.prev = current.prev;
  }
  this.length--;
}
// -- Example
const dll = new DoublyLinkedList();
dll.addAtHead(13);
dll.addAtHead(8);
dll.addAtHead(5);
dll.removeAtIndex(1);
console.log(dll.display());
// Head => 
// <-5->
// <-13->
// <= Tail

Removing Nodes at Target Element

Finally, we can remove at a desired element using the following steps:

If the element to be removed is attached to the node that the head is pointing to, call removeAtHead()
If the value to be removed is attached to the node that the tail is pointing to, call removeAtTail()
Otherwise, traverse the list until that element is found, tracking the current node during each step, and applying the same logic as above when removing at a desired index.
Decrement the list's length.

removeAtElement(element) {
  if (element === this.head.value) {
    this.removeAtHead();
  } else if (element === this.tail.value) {
    this.removeAtTail();
  } else {
    let current = this.head;
    while (current.value !== element && current.next) {
      current = current.next;
    }
    current.prev.next = current.next;
    current.next.prev = current.prev;
    this.length--;
  }
}
// -- Example
const dll = new DoublyLinkedList();
dll.addAtHead(13);
dll.addAtHead(8);
dll.addAtHead(5);
dll.removeAtElement(8);
console.log(dll.display());
// Head => 
// <-5->
// <-13->
// <= Tail

Regular Expressions for Regular People

Neil Berg — Wed, 29 May 2019 03:01:39 +0000

Equally elegant and mysterious, regular expressions are a critical tool for input validation, string manipulations, and a host of other tasks. Their syntax can be daunting at first, but there is a clear logic between the slashes, and I find that it's best revealed by stepping through a handful of examples.

As such, this post covers the creation and application of some common uses of regular expressions in JavaScript. It is intended for regular people. By that I mean people like me, people who are not RegExperts, but commonfolk who only occasionally need to reach for them.

Creating regular expressions

There are two ways to create a regular expression (RegEx):

RegEx literal of a pattern in between slashes

Most common creation method
Used when you know the pattern upfront and it does not change

const re = /flower/

Constructor function RegExp

Used when the pattern is not known unfront, but changes during code execution or pattern comes from user input or external sources

const re = new RegExp('flower')

Testing regular expressions

There are two ways to test a regular expressions:

Using methods of the RegExp object:

test - returns true if matched or false if no match
exec - returns array of matched details or null if no match

/flower/.test('flowerpot')
// true

/flower/.exec('flowerpot')
// ["flower", index: 0, input: "flowerpot", groups: undefined]
// returned details include: matched text, starting index of the match
// and the original text input

Using methods of the String object:
- match - returns array of matched details or null if no match
- replace - returns new string with matched text replaced with defined new text
- (less common): search and split

'Los Angeles, California'.match(/California/)
//["California", index: 13, input: "Los Angeles, California", groups: undefined]

'Los Angeles, California'.replace(/California/, 'CA')
// "Los Angeles, CA"

Finally, there is a wonderful online tool called Regular Expressions 101 that allows for interactive testing of patterns. Explanations are also provided for why matches occurred.

Flags

Flags can be attached to patterns that modify the search parameters. Common flags include:

g - global matching, aka find all matches
i - case insensitive, aka ignore casing

'one hat two hat red hat blue hat'.match(/hat/g)
// ["hat", "hat", "hat", "hat]

'App.js app.js wrapper.js'.match(/app/gi)
// ["App", "app", "app"]

Quantifiers

Certain quantifying characters and expressions can be included after patterns to refine their specificity.

Optional matching with `?`

/colou?r/.test('color')
// true 
// The "u" is optional

One or more matches with `+`

'yassss queen'.match(/yas+/)
// ["yassss", index: 0, input: "yassss queen", groups: undefined]
// The "s" is matched one or more times (4 times in this case)

None, one or more matches with `*`

'ya queen'.match(/yas*/)
// ["ya", index: 0, input: "ya queen", groups: undefined]
// The "s" does not need to be matched

"Starts with" using `^`

/^App/.test('App.js');
// true

"Ends with" using `$`

/js$/.test('App.js');
// true

Match an exact n number of times using `{n}`

/5{3}/.test('555');
// true
// Three 5's are exactly matched

Match at least n number of times using `{n,}`

/5{3,}/.test('5555');
// true
// At least three 5's are matched

Match between n and m number of times using `{n,m}`

/5{1,4}/.test('55');
// true
// Between one and four 5's are matched

Metacharacters

In addition to letters and digits, regular expressions can also be composed with metacharacters, which are always prefaced by a backslash. A few common metacharacters include:

\w - any alphanumeric or word character
\W - any non-alphanumeric or word character

'R2-D2'.match(/\w{2}\W\w{2}/);
// ["R2-D2", index: 0, input: "R2-D2", groups: undefined]
// Two word characters (R2), then one non-word character (-), then
// two word characters (D2) are matched

\d - any digit
\D - any non-digit

'C-3PO'.match(/\D{2}\d\D{2}/);
// ["C-3PO", index: 0, input: "C-3PO", groups: undefined]
// Two non-digits (C-), then one digit (3), then
// two non-digits (PO) are matched

\s - any whitespace character (space, tab, newline)
\S - any non-whitespace character

'apples or oranges'.match(/\S+\s\S+\s\S+/);
// ["apples or oranges", index: 0, input: "apples or oranges", groups: undefined]
// One or more non-whitespace characters (apples), then a whitespace,
// then one or more non-whitespace characters (or), then a whitespace,
// then one or more non-whitespace characters (oranges) are matched

Multiple patterns with "or" operator

The OR operator in regular expressions is defined by the pipe |. This allows for a positive match to occur if at least one of multiple patterns are found.

'555'.match(/\d{3}|\(\d{3}\)/)
// ["555", index: 0, input: "555", groups: undefined]
// 555 is matched by \d{3}

'(555)'.match(/\d{3}|\(\d{3}\)/)
// ["(555)", index: 0, input: "(555)", groups: undefined]
// (555) is matched by \(\d{3}\)
// Note: parentheses in literal form need to be escaped by backslahes

Character sets

Square brackets define sets of characters that match when any character in that set is matched:

/[A-Z]\d-[A-Z]\d/.test('R2-D2')
// true since the following is matched:
// any uppercase letter, digit, hypen, any uppercase letter, digit

/[A-D]-[0-4][N-Q][N-Q]/.test('C-3PO')
// true since the following is matched:
// any uppercase letter between A and D, hypen, any digit between 0 and 4, 
// any uppercase letter between N and Q, any uppercase letter between N and Q

When used inside of a character set, the caret ^ creates an invert set, aka match anything but those characters.

/[^A-Q]\d-[^A-C]\d/.test('R2-D2')
// true since the following is matched:
// any uppercase letter not between A and Q, digit, hypen,
// any uppercae letter not between A and C, digit

Capturing groups

Patterns enclosed by parentheses are called capturing groups. This allows the pattern to be referenced later in the regular expression or be referenced in the array of matched details.

/(\w+)\s\1\s\w+\s(\w+)\s\2/.test('same same but different different')
// true
// capture group 1 is "same"
// capture group 2 is "different"
// \1 and \2 reference "same" and "different", respectively
// true since the following is matched:
// one or more word characters (capture group 1), whitespace, 
// value of capture group 1, whitespace, one or more word characters, 
// one or more word characters (capture group 2), whitespace,  
// value of capture group 2

Using the exec RegExp method, we can more clearly see the details of this regular expressions:

/(\w+)\s\1\s\w+\s(\w+)\s\2/.exec('same same but different different')
// "same same but different different", "same", "different", index: 0, 
// input: "same same but different different", groups: undefined]

The returned result includes:

substring that was matched
capture groups (e.g. "same" and "different")
starting index of the first match
original text

Capture groups can also used to replace repeating words in a sentence.

'My name name is is Neil'.replace(/(\w+)\s\1/g, '$1');
// "My name is Neil"

The regular expression matches all occurrences of one or more word characters (capture group) followed by a space followed by the value of that capture group. Since the global flag is used, this matches "name name" and "is is". "name" is the value of the capture group in the first match and "is" is the value of the capture group in the second match. \1 references the value of the capture group inside the regular expression, while '$1' references the capture group as the second argument to the replace method. Thus, the matched text of "name name" and "is is" are replaced with "name" and "is", respectively.

Similarly, capture groups can be used to rearrange words in a sentence.

'James Bond'.replace(/(\w+)\s(\w+)/, 'My name is $2, $1 $2');
// "My name is Bond, James Bond"

The matched text is "James Bond", where "James" is the value of capture group 1 and "Bond" is the value of capture group 2. We replace that matched text with "My name is" followed by the value of capture group 2, a comma, and then the values of capture groups 1 and 2.

Lookaheads

Lookaheads allow for a match only when one pattern is followed ("positive lookahead") or is not followed ("negative lookahead") by another pattern. Positive lookaheads are created with pattern1(?=pattern2) and negative lookaheads are created with pattern1(?!pattern2).

The following examples also introduce the . wildcard, which enables a match on any character.

/(.)+(?=Berg)/.test('Neil Berg');
// True
// "Berg" follows any one or more characters (Neil )

/(.)+(?!Berg)/.test('Neil Diamond');
// True
// "Berg" does not follow any one or more characters

Example: Password Validation

Suppose we enact the following password rules for a user login:

must include at least 1 number
must include lower and uppercase letters
must inclued at least 1 special character (e.g., !@#\$%&)
must be at least 8 characters long

These conditions can be represented by the following regular expression:

/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}/

Four positive lookaheads are used to check whether the following conditions anywhere in the text are followed by any character zero or more times:

a digit: (?=.*\d)
a lowercase letter: (?=.*[a-z])
an uppercase letter: (?=.*[A-Z])
a special character: (?=.*[!@#$%^&*])

Finally, the text must be at least 8 characters long .{8,}

Interestingly, Javascript is not even needed to test regular expressions on text, date, search, url, tel, email, and password inputs in HTML. These inputs can accept a pattern attribute containing a regular expression that is used to checked against form submission. Once the regular expression is matched, the form be submitted.

Let's create a username/password form where the password input has a pattern attribute. A title attribute can also be included that will be shown if a user tries to submit before passing the pattern check.

<div class="form-container">
  <form>
    <label for="username">Username: </label>
    <input type="text" id="username" required>
    <label for="password">Password: </label>
    <input
      type="password"
      id="password"
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}"
      title="Must contain at least one number, uppercase letter,
      lowercase letter, and special character, and be at least 8
      or more characters long"
      required>
    <input type="submit" id="submit" value="Submit">
  <form>
</div>

I also added an event listener to the password input that tests the regular expression after each keyup. Once the validation is true, the submit button changes from grey to green:

const submit = document.getElementById('submit');
const password = document.getElementById('password');

function validate() {
  const re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}/;
  if (re.test(password.value)) {
    submit.style.background = '#039b1c';
    submit.style.color = '#F3F3F3';
  } else {
    submit.style.background = '#ccc';
    submit.style.color = "black";
  }
}

password.addEventListener('keyup', validate);

Forem: Neil Berg

5 Tips for Ending Coder's Block

1. Imitate With a Twist

2. Look Beyond the Screen

3. Talk to People

4. Hindsight is 20/20

5. Contribute to Open Source Code

Final thoughts

Leaping Into Linked Lists

Singly linked lists

Creating Node and SinglyLinkedList Classes

Adding Nodes

Adding Node at Index k

Removing Nodes

Removing Nodes at Index k

The Index of a Value

The Node at Index k

Doubly Linked Lists

Creating Node and DoublyLinkedList Classes

Displaying the List

Adding Nodes at the Head

Addings Nodes at the Tail

Adding Nodes at Index k

Adding Nodes at an Element

Removing Nodes at the Head

Removing Nodes at the Tail

Removing Nodes at Index k

Removing Nodes at Target Element

Regular Expressions for Regular People

Creating regular expressions

Testing regular expressions

Flags

Quantifiers

Optional matching with ?

One or more matches with +

None, one or more matches with *

"Starts with" using ^

"Ends with" using $

Match an exact n number of times using {n}

Match at least n number of times using {n,}

Match between n and m number of times using {n,m}

Metacharacters

Multiple patterns with "or" operator

Character sets

Capturing groups

Lookaheads

Example: Password Validation

Optional matching with `?`

One or more matches with `+`

None, one or more matches with `*`

"Starts with" using `^`

"Ends with" using `$`

Match an exact n number of times using `{n}`

Match at least n number of times using `{n,}`

Match between n and m number of times using `{n,m}`