DEV Community: pineapples

Understanding Leetcode #15 3Sum

pineapples — Sat, 19 Apr 2025 16:49:45 +0000

Leetcode # 15. 3Sum provides an unsorted list of integers and asks that you find all unique triplets from that list that add to a target number, in this case zero (0). A brute force approach would be to use three nested for loops, reaching a runtime complexity of O(n^3) in order to find all triplets. However, building on two earlier Leetcode "sum" problems, 1. Two Sum and 167. Two Sum II - Input Array Is Sorted (TwoSum Sorted for the rest of this blog) it is possible to implement an O(n^2) approach.

Hints

There are two big hints to this problem, as mentioned on Leetcode, that I've paraphrased below:

Can we "fix" one number x and then traverse the rest of the array to find all combos y and z so that x + y + z = 0? This makes the problem much more similar to TwoSum.
Can we modify the input array so that search is faster?

The answer is yes! If we sort our array in ascending order we can fix one number for each round and then implement a take on TwoSum Sorted to find all remaining members of each triplet for that number.

Runtime

In this case we will target a runtime complexity of O(n^2), which makes the addition of sorting at the beginning "free". More specifically, our target runtime is now O(n^2) + O(nlogn), but in Big O notation the smaller added chunks of runtime will fall away, leaving us with O(n^2).

Now with sorting out of the way, we can approach this problem similarly to the sorted TwoSum problem and use two pointers.

Outer Loop

The gist

If we "fix" one number x, we can then scan the array once for each x using the two pointer approach from TwoSum Sorted to find all possible y and z combos such that x + y + z = 0. See note (a) below for progressing through the outer loop.

Inner Loop:

For each x, we will use a low and high pointer to look for potential options for y and z respectively. We will set our low pointer to x + 1 and our high pointer to the last element of the array (nums.length - 1).

Now we are simply implementing the two pointer approach from TwoSum Sorted. There are two ways to conceptualize what our new TwoSum Sorted approach is seeking:
Option 1) find the numbers y and z such that x + y + z = 0
Option 2) find the numbers y and z such that y + z = x * -1.
I prefer Option 1 so that is shown in the code below.

The Gist

At each step of TwoSum Sorted ask:

Does the sum of x + y + z equal 0? If yes, we've found a valid answer so add this triplet to the result. Then iterate both low (increase with low++) and high (decrease with high--). See note (b) below.
Alternately, if this sum does not equal 0, we need to figure out which pointer to move:
- If the sum is less than the target (0), then we know our current combination of numbers is too low. Therefore, we need to increase the numbers involved. Increase the bottom pointer with low++ (see note (b) below).
- If the sum is greater than the target, the opposite is true and we need to decrease the values involved. Decrease the high pointer with high-- (see note c below).

We will follow this process until we've traversed our current section of the array (x + 1 to end) and save all valid triplets in a results array. Then progress to the next element in the outer loop and repeat, continuing until we've reached the end of the array or gone above 0 (see note (d) below).

Notes

a) In our outer `for` loop, skip any duplicate numbers.
b) Like in (a), when we find a valid triplet and we increase `low`, skip any duplicate numbers.
c) We will check all `high` values every time. As we are validating uniqueness on `x` and `y`, we should include duplicates for `z`. This ensures that we find all valid triplet combos while skipping duplicates.
d) In our outer loop, stop once we've gone above `0`. As our array is ordered, if `x` is 1, that means any potential `y` or `z` will be at least `1`. It is not possible for `1 + 1 + 1` (or any larger combination of numbers) to equal `0` so we know we are done at that point.

Code:

var threeSum = function (nums) {
    const results = [];

    nums.sort((a, b) => a - b);

    for (let i = 0; i < nums.length; i++) {
        if (nums[i] <= 0) {
            if (i === 0 || nums[i] !== nums[i - 1]) {
                twoSumII(nums, i, results);
            }
        }
    }

    return results;
};

const twoSumII = (nums, i, results) => {
    let lo = i + 1;
    let hi = nums.length - 1;

    while (lo < hi) {
        const sum = nums[i] + nums[lo] + nums[hi];

        if (sum > 0) {
            hi--;
        } else if (sum < 0) {
            lo++;

            while (nums[lo] === nums[lo - 1]) {
                lo++;
            }
        } else {
            results.push([nums[i], nums[lo], nums[hi]]);

            lo++;
            while (nums[lo] === nums[lo - 1]) {
                lo++;
            }

            hi--;
        }
    }
}

Writing a 'Median of Three' Pivot Helper for QuickSort

pineapples — Fri, 09 Dec 2022 21:39:59 +0000

QuickSort Basics
The Pivot
Median Value
Update Array Around Pivot

QuickSort Basics

QuickSort is an algorithm for sorting an array based on a pivot point in the array. To see a 3 minute visual on how QuickSort works, check out this video.

To implement QuickSort (or skip ahead to the pivot if you prefer):

Choose a pivot from the array (more on how to choose a pivot below)
The pivot function should also update the array in place by moving
- all elements smaller than the pivot value to the left of the pivot and
- all elements greater than (or equal to) the pivot to its right.
Once the elements on either side of the pivot are on their correct side, the pivot value itself is correctly placed into its final location in the sorted array.
Since the pivot value is now correct, you can disregard it and move on to sorting the elements on either side of it:
- Do this by recursively calling QuickSort again on both the left side of the pivot and the right side of the pivot.

The code for the outer QuickSort function might look something like this:

function numberCompare(a, b) {
    return a - b;
}

function quickSort(arr, comparator = numberCompare, start = 0, end = arr.length - 1) {

    if (start < end) {
        const iPivot = pivot(arr, comparator, start, end); 

        quickSort(arr, comparator, start, iPivot - 1);
        quickSort(arr, comparator, iPivot + 1, end);
    }

    return arr;
}

Some code notes:
numberCompare(): We provide a default comparator function (numberCompare) for sorting numbers in ascending order. To sort the array differently (perhaps alphabetically for strings, or in descending order), supply a different comparator function when invoking quickSort.

pivot(): This helper function will handle the following steps:

select a value from the array as the pivot
mutate the array in place so values less than the pivot are moved to its left and values greater than/equal to the pivot are moved to its right
return the index of the pivot value's final location (after array mutation is complete), allowing quickSort to be called again on each side of the pivot index

The Pivot

With the QuickSort basics out of the way, let's talk about the pivot. Technically, you can choose any value in the array as the pivot. However, some options can result in less optimal runtimes.

Naive Options:

Always choose the first element of the current array subsection.
Always choose the last element of the current array subsection.

Both of these will work and can be a bit simpler to implement. However, they run the risk of worse time complexity. On a sorted or nearly sorted array, these will both have O(n^2) runtime as each iteration of sorting will have to sort all of the remaining elements.

Pivot Improvements:

Random value from the array as pivot
Median Value of the array

These options can improve the runtime and increase the likelihood of an O(n log n) runtime, including for sorted arrays. We'll discuss using a median value.

Median Value

Median refers to the middle value in a sorted set of data, with an equal number of items on either side of it. Ideally, every time we run QuickSort, we want to pivot around the median value of our current array subsection, rather than skewing the implementation towards the highest or lowest values.

Unfortunately, we don't actually know the median value because the array is not yet sorted. Instead we can use the "Median of Three" Strategy.

Median of Three

To implement the "Median of Three" strategy, select the first, last, and middle elements from your current array (or array portion as the recursive calls begin). Take the median (middle) value of those three elements to use for the current pivot.

The code to find the median might look something like:

function bigger(arr, a, b) {
  if (arr[a] > arr[b]) return a;
  return b;
}

function getMedianPivotIdx(arr, start = 0, end = arr.length - 1) {
  const mid = Math.floor((start + end) / 2);

  const iBiggest = bigger(arr, start, bigger(arr, mid, end));

  if (iBiggest === start) return bigger(arr, mid, end);

  if (iBiggest === end) return bigger(arr, start, mid);

  return bigger(arr, start, end);
}

This function will return the index of the median value between the start, end, and middle values, allowing you to use that for a pivot.

Update Array Around Pivot

With the pivot selected, implement the rest of the pivot function:

find the correct location for the pivot by moving
- all values less than the pivot value to its left and
- all values greater than (or equal to) the pivot to its right.

One important implementation detail when actually writing this pivot code is to make sure you move the pivot value out of the way before comparing the rest of the values. (In the code below, you'll see we swap the pivot and the end values before iterating through the array to move elements to their proper side of the pivot.)

The full pivot helper might look like:

function swap(arr, idxA, idxB) {
  [arr[idxA], arr[idxB]] = [arr[idxB], arr[idxA]];
}

function pivot(
  arr,
  comparator = numberCompare,
  start = 0,
  end = arr.length - 1
) {
  const iPivotStart = getMedianPivotIdx(arr, start, end);
  const pivotVal = arr[iPivotStart];
  let iPivotTarget = start;

  swap(arr, iPivotStart, end); //swap the end and the pivot before iterating through array to update elements in place
  const iPivotTemp = end;

  for (let i = start; i < iPivotTemp; i++) { //update array in place by moving smaller elements to the front of the array
    const curr = arr[i];

    if (comparator(curr, pivotVal) < 0) {
      swap(arr, i, iPivotTarget);
      iPivotTarget++; // iPivotTarget is incremented with each swap to provide the correct location for the current swap and count the number of swaps. The final pivot index should be equal to the number of swaps.
    }
  }

  swap(arr, iPivotTemp, iPivotTarget); // after moving all smaller elements to the front of the array, swap the pivot with the first element that is larger than the pivot
  return iPivotTarget; // return the final index of the pivot
}

Why a Hash Table is a Performant Data Structure

pineapples — Fri, 02 Dec 2022 23:35:02 +0000

A hash table is type of key-value data store. Nearly every coding language includes some form of hash table by default. In Ruby, this is called a "hash", in python a "dictionary", in JavaScript an "object" or "map".

Understanding the Basics

Typically, a hash table is implemented with an associative array where each index in the array provides a slot for storing data, in this case key-value pairs. The basic operations we'll discuss here are:

Insertion: adding key-value pairs
Access/Search: finding a value in the store based on a key
Deletion: deleting a key-value pair

Hash Function

All of these operations (insertion, removal, and access) depend on a well written hash function. On a high level, a hash function takes an input of any size and converts that to an output of a fixed size. The output of the hash function is used as the index in the associative array for storing the data.

For a hash table, the hash function must do the following:

Convert the input (key) to an index that exists in the associative array
Distribute hashed values evenly to reduce collisions
Perform in constant time
Be deterministic - always convert the same input to the same output

Handling Collisions

A collision results when the hash of multiple keys result in the same output (or index in our associative array).

There are multiple solutions for handling collisions. One solution is called Separate Chaining, where we use a second data structure at each index, perhaps an array or linked list, to list all pairs whose key is hashed to that index. In order to perform any of our basic functions, we first iterate through the list at that index to check for the key.

If every hashed key "collides" or results in the same index in the associative array, we end up performing an O(N) check for each function. With minimal collisions however, we typically will have such few items at each index that each operation is just O(1).

The best hash tables, such as the built-in hash tables provided by coding languages, minimize these collisions in order to ensure the best time complexity for standard operations. A well written hash table ensures that:

It allocates a large enough associative array to provide many slots for data .
It uses a high quality hash function to evenly distribute keys within the associative array.

Using the Hash Table

Insertion

To add an element, the key is hashed to get an index in the associative array. If the key already exists in the array at that index, the existing key's value is updated. Otherwise, the new key-value pair is pushed onto the inner array.

Access/Search (By Key)

Getting the value of a key follows a similar process to insertion. First, the key is hashed to get the index. That index in the array is then visited. If the key is found at that index, the value of the key is returned. If the key is not found, it does not exist and some falsey signifier is returned.

Note: It is also possible to search a hash table by value. However, this is not an optimal use of a hash table, and the Big O will be linear or O(N).

Removal

Again, the key is hashed to get the index where it is stored in the associative array. The array at that index is searched. If the key is found, the key-value pair is removed. If it's not found, nothing else happens.

The Benefits of a Hash Table:

A hash table is optimized for insertion, removal, and searching based on the key. A well written hash table has constant (O(1)) "amortized" time for these operations. Thus, this can be an excellent choice for storing unordered data. It provides much faster access than an array, and is virtually guaranteed to be faster that an array for insertion or deletion, when the data's index in an array is unknown.

Understanding the Different Strategies of Depth First Search Tree Traversal

pineapples — Tue, 29 Nov 2022 22:17:28 +0000

Depth First Search (DFS) tree traversal can be performed with any of the following strategies: "in-order", "post-order", and "pre-order". What's the difference? The difference is actually quite simple - it is simply the order in which you visit the node compared to when you traverse the children of the node.

The Basics

To better understand what this means, let's talk about the basics of tree traversal. For simplicity, we'll assume we're only working with binary trees where each node can have at most two children, a left child and a right child.

For each node of the binary tree, there are three steps to complete:

traverse the left subtree
traverse the right subtree
do something with the node itself - here we'll record it's value

So with these three steps established, we can place them in their correct order for each DFS strategy:

Pre-order:

In pre-order, we first process the node:

Do something: record the node's value
Traverse the left
Traverse the right

Post-order:

In post-order, we process the node last:

Traverse the left
Traverse the right
Do something: record the node's value

In-order:

For in-order, we'll process the node in between traversing each side:

Traverse the left
Do something: record the node's value
Traverse the right

As we can see from the steps above, we do the exact same thing in each strategy, just in a slightly different order. This means we can use the same lines of code for each method. We'll just need to make a slight alteration in the order.

The Code

Tree Structure

We'll assume we have a Binary Tree class that looks something like this Binary Search Tree:

class Node {
  constructor(val) {
    this.val = val;
    this.left = null;
    this.right = null;
  }
}

class BinarySearchTree {
  constructor() {
    this.root = null;
  }

  insert(val) {
    const newNode = new Node(val);

    if (!this.root) {
      this.root = newNode;
      return this;
    }

    let curr = this.root;

    while (true) {
      if (curr.val > val) {
        if (!curr.left) {
          curr.left = newNode;
          return this;
        }

        curr = curr.left;
      } else if (curr.val < val) {
        if (!curr.right) {
          curr.right = newNode;
          return this;
        }

        curr = curr.right;
      }  else {
         return this;
      }
    }
  }
}

Depth First Search Pseudo Code

We will write a function that accepts a node (the root of a tree on the first pass) and returns an array of all the values in that tree, after visiting all of the nodes once. Here, we'll use a recursive strategy.

Our function will create an array, visited, to record the values of visited nodes.
Our base case will check if the node is null. If so, we'll return the empty array.
Otherwise we need to perform our three steps:
- add the value of the node to the visited array
- Recursively call our function again, passing in the left child as the node and concatenating the return value of this function call to the visited array
- Recursively call our function again, passing in the right child as the node and concatenating the return value of this function call to the visited array
After visiting all nodes in the tree, the visited array will be filled with the values of each node.
Finally, we will return visited.

Depth First Search Function

For Pre Order (visit the node first) this looks like:

function dfsPreOrder(node) {
  let visited = [];

  if (!node) return visited; //base case

  visited.push(node.val); //1. visit node
  visited = visited.concat(dfsPreOrder(node.left)) //2. traverse left
  visited = visited.concat(dfsPreOrder(node.right)) //2. traverse right

  return visited;
}

For Post Order (visit the node last) this looks like:

function dfsPostOrder(node) {
  let visited = [];

  if (!node) return visited; //base case

  visited = visited.concat(dfsPostOrder(node.left)) //1. traverse left
  visited = visited.concat(dfsPostOrder(node.right)) //2. traverse right
  visited.push(node.val); //3. visit node

  return visited;
}

For In Order (visit the node in the middle) this looks like:

function dfsInOrder(node) {
  let visited = [];

  if (!node) return visited; //base case

  visited = visited.concat(dfsInOrder(node.left)) //1. traverse left
  visited.push(node.val); //2. visit node
  visited = visited.concat(dfsInOrder(node.right)) //3. traverse right

  return visited;
}

Implement a Stack with a Singly Linked List

pineapples — Tue, 29 Nov 2022 04:23:48 +0000

First In, Last Out

A stack is a data structure that follows the First In, Last Out (FILO) principal. You can think of this like a stack of plates. As you put plates away, each one goes on top of the one before. As you pull them out, you take the plate from the top of the stack, which is the one that was most recently added. Stacks are useful in many instances. For example, the browser's call stack is a stack. The ability to undo and redo (like in PhotoShop) is also commonly implemented using stacks.

Native Data Structures

JavaScript does not include a native stack structure. You can use the built-in JavaScript array to mock a stack, relying on its push and pop methods for O(1) insertion and removal. However, there can be drawbacks to this method. Using an array requires extra memory for storing indices for each element. There is also the possibility that the location in memory where your array is stored runs out of space, requiring full re-indexing of the entire array in order to add one element.

Implement with a Singly Linked List

In order to implement a stack with a linked list, you can create a Node class where each element of the stack is a node. Each node should have a value property and a pointer to the next node:

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

Next, you can create a Stack class, which is simply a Linked List that we've named Stack. In this example, we'll use properties of head and size:

class Stack {
  constructor() {
    this.head = null;
    this.size = 0;
  }
}

Required Methods

The two most important methods to add to our Stack are push and pop.

Push

push accepts a value as an argument, and adds that value to the top of the stack. In practice that means, creating a new node using the value passed in, updating the head value on our stack to point to the new node, and incrementing the stack's size:

class Stack {
  ...

  push(val) {
    const newNode = new Node(val)
    newNode.next = this.head;
    this.head = newNode;
    this.size++;
    return this;
  }

}

Pop

pop is nearly the inverse of push. It will remove the most recently added node in our stack and return it. In this case, that means removing the existing head node, updating that head's next node to become the new head node, and decrementing the size. We'll also remove the old head's pointer into the list to avoid any accidental look-up abilities:

class Stack {
  ...

  pop() {
    if (!this.head) return null;

    const oldHead = this.head;
    this.head = oldHead.next;
    oldHead.next = null;
    this.size--;
    return oldHead;
  }

}

Additional Methods

Some other methods that are commonly added include peek, isEmpty, and size.

Peek

peek returns the top element on the stack, without removing it, allowing us to "peek" into the stack:

class Stack {
  ...

  peek() {
    return this.head;
  }
}

isEmpty

isEmpty returns a boolean - true if the stack is empty or false if not:

class Stack {
  ...

  isEmpty() {
    return !!this.size;
  }
}

size

size returns the size of the stack:

class Stack {
  ...

  size() {
    return this.size;
  }
}

Two Ways to Check an Object for Keys

pineapples — Sun, 27 Nov 2022 18:08:50 +0000

The Old Way

`Object.prototype.hasOwnProperty()`

Object.prototype.hasOwnProperty() is called on an object with the key (or property) for which you are checking passed in as an argument. This returns true if the property exists or false if not.

Note: this only checks for declared or own properties. Inherited properties will also return false.

const obj1 = {
  name: "Sam",
  age: 25,
},

obj1.hasOwnProperty("name") 
// => true

obj1.hasOwnProperty("address")
// => false

Gotchas

One drawback to this method is that it is not accessible on an object created with Object.create(null) and will error in that case:

The Recommended Way

`Object.hasOwn()`

Per MDN, Object.hasOwn() is a replacement for the previously existing .hasOwnProperty method. It is nearly identical to .hasOwnProperty - it returns true if the object has the property as an own property and false for inherited properties as well as properties that do not exist.

const obj2 = {
  name: "Tim",
  age: 10,
}

Object.hasOwn(obj2, "name");
// => true

Object.hasOwn(obj2, "address");
// => false

However, .hasOwn also works on objects created with Object.create(null) and therefore is recommended for use on all browsers that support it:

Dynamically Create an Array of Arrays

pineapples — Sun, 27 Nov 2022 03:51:57 +0000

The Reason

In a recent algorithm challenge, I wanted to create an iterable collection of ten "buckets" for grouping data. In practice, this meant creating an array of arrays like:

[[], [], [], [], [], [], [], [], [], []]

What Did Not Work

Rather than hard code each set of arrays, I wanted to create this dynamically. My first attempt (from memory and a cursory skim of the MDN docs), was to use the Array constructor with the .fill method chained on:

const arr = new Array(10).fill([]);
console.log(arr);
// => [[], [], [], [], [], [], [], [], [], []];

At first glance, this seemed to work. Console logging my new arr revealed an array containing 10 empty arrays, so I continued solving the algorithm.

As soon as I began populating the inner arrays (the buckets), I noticed that there was an issue - adding an element to one "bucket", for example at index 5, updated EVERY bucket to match, rather than only the intended bucket:

arr[5].push("hello");
console.log(arr);
// => [["hello"], ["hello"], ["hello"], ["hello"], ["hello"], ["hello"], ["hello"], ["hello"], ["hello"], ["hello"]];

Returning to the MDN docs for Array.prototype.fill, the issue became clear:

As arrays are a type of object, each of my array buckets were actually referencing the same object in memory. So rather than creating 10 distinct arrays, my array was merely displaying 10 copies of the same array.

`Array.from` to the Rescue

To dynamically create an array of arrays (or other objects), you can instead use the .from method:

const newArr = Array.from({ length: 10 }, () => []);
console.log(newArr);
// => [[], [], [], [], [], [], [], [], [], []];

Per MDN, Array.from accepts an iterable or "array-like" object as it's first argument, and an optional callback function ("mapFn") for a second argument.

Here, {length: 10} is an "array-like" object which will provide the length of the array being created.

The second argument () => [] is the "mapFn", which is called for each element and whose return value is used to populate the array.

Now, pushing an element to the array at index 5, updates only that array, as expected:

newArr[5].push("hello");
console.log(newArr);
// => [[], [], [], [], [], ["hello"], [], [], [], []];

A Brief Overview of Rails Generators

pineapples — Fri, 15 Oct 2021 18:32:58 +0000

One of the beautiful things about the Rails framework is the way that it codifies a number of best practices into an easy to get started, customizable, and highly documented tool. Why reinvent the wheel building up a boilerplate app when you can rely on some of the great minds who already did so, and focus your time on your own innovations? Rails generators are just one of the many things that allows Rails to power up great apps in a relatively short timeframe. We'll touch on some basics below.

Standard Generators

The basic format of a Rails generator is <rails generate generator-name details...>. This can also be shortened with the alias for generate, g, to <rails g generator-name details....>. In these examples, I'll use the alias g, but they can be written either way. For this example, we'll imagine that we are building an application with Book, Author, and Publisher models.

Model Generator:

Format: <rails g model Modelname>
Example: rails g model Book
This will create an empty migration for the books table, a Book model, plus the test files for the Book model.

Migration Generator:

Format: <rails g migration camel_case_description_of_migration column_name:data_type>
Example: rails g migration add_name_column_to_books name:string
This will create a fully populated migration file that looks like:

Controller Generator:

Format: <rails g controller Pluralname [action action] [options]>
Example: rails g controller Books new create show update
This is a great generator to use in tandem with the Model and Migration generators. This example of the Controller generator will create a BooksController, complete with the boilerplate for actions listed in the generator (new, create, show, update) as well as view files for each of those actions. In addition, this will create routes for the listed actions, plus an associated scss file, and additional tests for the created items

Resource Generator:

Format: <rails g resource Modelname column_name:data_type>
Example: rails g resource Author name:string
The resource generator builds on the above three controllers while offering some slight variation. It will generate a migration file to create the authors table, complete with any options we passed in, here a name column with a string datatype. This will also generate the Author model, AuthorsController, a view folder for the author related view pages, a helper file, the full authors resource for routes, associated tests, and a scss file.

Scaffold Generator:

Format: <rails g scaffold Modelname column_name:data_type>
Example: rails g scaffold Publisher name:string
The Scaffold generator is the most robust generator. This builds a complete app according to boilerplate Rails standards. If you are quickly bootstrapping an app and want to follow all the conventions, this can be a great option to get something off the ground very quickly. I won't list all the files this generates, but the Rails documentation shows a full list. One note, in most cases you won't be building an app that completely follows conventions so this generator is used less often than other ones.

Additional Tools

Adding references:

One of the great things about using Rails generators is that you can populate most of the details of your belongs_to relationships via the command line. Rails will also work behind the scenes during database lookups to enforce requirements of these relationships when they are generated in this way. Using our examples above, we can imagine that a book belongs to an author. If we re-create our Book, we can add this relationship in:
rails g resource Book name:string author:references

Task Generator:

Format: <rails g task task_name>
Example: rails g task track_books
This will create a task file located in the tasks folder (lib/tasks/track_books.rake) where you can define tasks that you need in your app.

Destroy Generator:

This will do the reverse action of the associated generator and completely roll back whatever is included in the description. This full name of this command is destroy, but it can be aliased as d.
Format: <rails d model Name>
Example: rails d model Book
This example rolls back everything that was created with the command rails g model Book, destroying the associated test files, the Model, and the boilerplate migration.

I'll leave you with a final benefit to using generators when you can. As much as typing less to create more allows you to save time, generators also offer built in protection against typos and some anti-patterns. The human brain can only remember or see so much. Even while I was typing up this blog post, I was positive I had spelled "codefies" correctly and there was some other reason it had the squiggly line below it. (Turns out it really is "codifies", not "codefies" and an "e" is not an "i"...) So developers are prone to making mistakes. Sometimes those mistakes result in massive debugging efforts, but if you can avoid that, you may as well.

Transparent Background with CSS and GIMP

pineapples — Tue, 03 Aug 2021 18:10:46 +0000

I wanted to add a transparent background image to each page of an app to create a visual through-line. I found this open source image on Pixabay
that perfectly captured the desired energy for the app:

I decided to add it to the bottom of each page as a minimized, repeating image. However, the original image at full opacity drew the user's eye and distracted from page content. Reducing the opacity and increasing transparency would improve the user experience.

Adding Background Image to App

First, I added the image as a background-image to the root html tag: body. My CSS file now looked like:

body {
    background-image: url("./images/cleaning-1294867_1280.png");
}

Opacity via CSS

Next, I attempted to add opacity with the CSS opacity tag:

body {
    background-image: url("./images/cleaning-1294867_1280.png");
    opacity: 0.3;
}

Unfortunately, the CSS opacity tag applies to ALL of its child elements as well. The background image is applied to body, the parent of the entire app, which means simply adding opacity onto body forced each element in the app to render with matching opacity. This was very hard to read:

There are a number of workarounds to this issue, notably using pseudo elements. As I wanted a statically transparent image, I decided to edit the image itself to my desired transparency and load the edited image into the app.

GIMP to the Rescue!

GIMP is a free and open source photo editing service that you can download to your desktop.

Open your image up in GIMP. To edit transparency and opacity for a full image follow the steps below. (To select only part of the image you can try this tutorial)

Step 1: click Layer → Transparency → Color to Alpha

Step 2: This will open up a window where you can edit the transparency and opacity of the image

I changed the transparency to 0.300 and maintained opacity at 1.000, but you can play around with these to find the best combination. Make sure to have "preview" clicked so you can see your changes before applying them.

When you're happy with your image click "ok" to apply changes.

Step 3: Finally, export your image in the appropriate file type. I chose .png.

(Simply clicking "save" in GIMP will save the image as an .xcf file.)

Final Details: Location, Size, Repeat

Now import your newly edited image into your project and update the background-image url. (Be sure to remove the opacity tag if you added it.)

You can add any additional background styling you like. In my case I implemented:

background-size: 20% auto; - this sets the background image width at 20% of the viewport and height to auto in proportion to the width
background-repeat: repeat-x; - repeats background horizontally
background-position: bottom 5px center; - positions the background with an offset of 5px from the bottom of the screen
background-attachment: fixed; - fixes background at it's designated position in the viewport, regardless of scroll

body {
    background-image: url("./images/tree-home-transparent.png");
    background-repeat: repeat-x;
    background-position: bottom 5px center;
    background-size: 20% auto;
    background-attachment: fixed;
  }

The Final Product:

Creating a monthly updating calendar in Rails with Whenever gem and a Cron job

pineapples — Mon, 02 Aug 2021 17:36:41 +0000

For my final portfolio project with the Flatiron School, I updated an app I'd previously created with Sinatra into React and also added additional functionality. This app allows a user to track plant care in their home, particularly watering needs for their plants. The user saw a calendar (created with React Calendar) that rendered a watering schedule on the front end. Calendar data was maintained on the back end with a PlantEvent model and database. To limit the amount of data that the database would be responsible for at any given time, the plant_events table would be updated on the first of the month with the current month's schedule. Thus I needed to implement a recurring method to delete the past month's data and instantiate new database rows for the current month.

I followed this detailed tutorial for implementing my recurring job. The steps below show how I set a Cron job to run a Rake task once a month with the whenever gem.

Step 1. Add `whenever` gem and set up the `config/schedule.rb` file

Add the whenever gem to your Gemfile with:

gem 'whenever', require: false

Then run bundle in the terminal.

After bundling, run bundle exec wheneverize . from the root of your Rails application. This creates a file called config/schedule.rb where you can write the schedule.

Step 2. Create the `whenever` schedule for your cron task in `config/schedule.rb`

The whenever gem has several built-in shorthand calls for commonly used times. To run a task on the first of the month at midnight, you can simply use the built-in 1.month shortcut:

# config/schedule.rb
every 1.month do
  rake 'calendar:update_calendar'
end

This will call a Rake task called update_calendar that is namespaced under calendar.

Step 3. Create a Rake task that will perform the needed task when called

You can use a Rails generator to generate the Rake task file with:

rails g task calendar update_calendar

This creates a file called lib/tasks/calendar.rake with the following boilerplate code:

# lib/tasks/calendar.rake
namespace :calendar do
  desc "TODO"
  task update_calendar: :environment do
  end

end

Edit the desc line to describe what your task does and add the code to perform the task inside the block. Be sure to keep the environment line as that is what loads your environment (including ActiveRecord models) inside your task. The file now looks like:

namespace :calendar do
  desc "delete previous month's calendar events and populate current month"
  task update_calendar: :environment do
    PlantEvent.delete_all
    Plant.find_each do |plant|
      if plant.watering_repeat_rate_days
        plant.build_plant_events_collection(plant.watering_repeat_rate_days)
      end
    end
  end

end

In this case, all existing plant_events are deleted. Then each plant instantiates a collection of plant_events for the current month.

For reference, the Plant model looks like:

# app/models/plant.rb
require 'date'
require 'active_support'

class Plant < ApplicationRecord
  belongs_to :user
  has_many :plant_events, dependent: :destroy

  def build_plant_events_collection(watering_repeat_rate_days, start_date = Date.today)
    event_date = start_date

    if watering_repeat_rate_days
      while event_date < start_date.at_beginning_of_month.next_month
        self.plant_events.create(date: event_date, event_type: "water")
        event_date = event_date.advance(days: watering_repeat_rate_days)
      end
    end

  end
end

Step 4. Write the crontab file for your jobs

Finally, write the crontab file that will check for cron jobs and run them in the background. You can read more about cron here and here. Basically cron lets you run background jobs at specified intervals, and the crontab tracks these jobs by name.

For production environments (the default) run:

bundle exec whenever --update-crontab

When working in development, add the development flag --set environment='development' and run:

bundle exec whenever --update-crontab --set environment='development'

Now the cron job is all set to run the rake task once a month to update the calendar.

Handling a Nested Form with a Rails Back End and JavaScript Front End

pineapples — Wed, 30 Jun 2021 23:48:40 +0000

For my fourth project with the Flatiron program I created a single page application that used a Rails API for the backend server with a JavaScript, HTML, and CSS frontend to handle page rendering and styling. The basic premise of the app was that a user could create journal entries using a timer and add a keyword to their entry. One aspect of building this app that proved to be a great learning experience was implementing a nested form. I wanted the seamless user experience of creating a new journal entry and adding a keyword with one click. I had previously implemented a nested form in a pure Rails app. Doing so from a JavaScript fetch call, however, added a new challenge.

I coded my project with a many-to-many relationship between entries and keywords, using a join table for the two models called entry_keywords. For clarity, those associations looked like:

class Entry < ApplicationRecord
  has_many :entry_keywords, dependent: :destroy
  has_many :keywords, through: :entry_keywords
end

class Keyword < ApplicationRecord
  has_many :entry_keywords, dependent: :destroy
  has_many :entries, through: :entry_keywords
end

class EntryKeyword < ApplicationRecord
  belongs_to :entry
  belongs_to :keyword
end

MVP Goals

For the minimum viable product (MVP), I decided to allow a user to assign one keyword to a new entry, rather than many at once. This could be an existing keyword or a new keyword. If the user selected an existing keyword, it would be found in the database and an association between it and the new entry would be created. If the user created a new keyword, that keyword would be instantiated as a keyword, persisted, AND assigned an association with the new journal entry. As the bulk of the application is concerned with creating, filtering, and reading journal entries, I decided that the entry model should be the main model for my form. This also meant that form processing would be handled by the entries_controller on the backend.

Rails Back End Set-Up

First I added the accepts_nested_attributes_for macro to the entry model. My entry.rb file now looked like:

class Entry < ApplicationRecord
  has_many :entry_keywords, dependent: :destroy
  has_many :keywords, through: :entry_keywords
  accepts_nested_attributes_for :keywords
end

This macro is a class method provided by ActiveRecord that will create a new method on your main model, <othermodelname>_attributes=. This will allow you to create an object of one type through the class of the main object.

For clarity, we can add the model names back in and see what’s actually happening.

The entry_controller create action, will receive the params that are send back from the front end. As the front end uses JavaScript, rather than a Rails nested form, we’ll have to make sure to code the params to include what’s needed. A correct version of params, with the keyword_attributes tag looks like:

pry>params
=>#"entry"=>{"body"=>"sample entry", "time_interval"=>1.0, "keywords_attributes"=>{"name"=>"nature"}}

To get params to look like this, the correct information needs to be passed into the fetch call.

Passing Params from Front End

Let’s say the values we want to pass back are encapsulated in the variables listed below. To ensure that they end up in our params hash just the way our backend is expecting, assign those values to an JavaScript object (named data) that imitates the expected params hash. Then pass that data object as a JSONified string into the body key of the configuration object. Finally, pass that configObj as the second argument into the fetch call. This particular configuration object informs the fetch call that is sending a POST request, and also passes the necessary data about entry and keyword to the backend params:

//info to pass to params
const body = "sample entry";
const timeInterval = 0.16666666666666666;
const keywordAttributes = {name: "nature"}

// imitate params hash with JavaScript object
const data = {
body: "sample entry",
time_interval: 1.0,
keywords_attributes: {name: "nature"}
};

//create configuration object
    const configObj = {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    }
    body: JSON.stringify(data),
}

fetch("url_to_backend_controller_action", configObj)

Back End Form Handling

The above fetch call will reach an endpoint on the backend. In this example, the backend endpoint will be the create action in the entries_controller.

Remember params?

pry>params
=>#"entry"=>{"body"=>"sample entry", "time_interval"=>0.16666666666666666, "keywords_attributes"=>{"name"=>"nature"}}

When the Entry controller encounters the keywords_attributes line in the params hash, it will be spurred to call a method with a matching name. In this case, add that matching method (keywords_attributes=) to the Entry model:

def keywords_attributes=(keyword_params)
    name = keyword_params[:name].downcase.strip
    if !name.empty?
        keyword = Keyword.find_or_create_by(name: name)
        self.keywords << keyword unless self.keywords.include?(keyword)
    end
end

(Side note: As this is a many-to-many relationship, the form could ALSO have been coded to accept multiple keyword instances. In that case, params would have needed to include another field for the ids of existing keywords as well as the keywords_attributes field. However, for simplicity, the form currently only allows adding one keyword to an entry. This means the back end can simply use the name attribute, whether finding or creating a keyword.)

Here keywords_attributes= is called with an argument of the keywords_attributes from the params hash. As keywords_attributes is a key in the params pointing to the value of {"name"=>"nature"} , it may be simpler to say that the Entry model method keywords_attributes= is called with an argument of that value: {"name"=>"nature"}.

So on encountering keywords_attributes in params, this method call is made: keywords_attributes=({"name"=>"nature"}).

And the method does four things:

1) First it grabs the specific information that we are looking for, (the value at the key of name) and also sanitizes that input with .downcase and .strip. (We want to always compare apples to apples, so we will always save keyword names as all lowercase. Anytime we check for them in the database, we’ll do so with a lowercase. In addition, we don’t want to save random white space or empty strings to our database so be sure to .strip that away.)

2) Next, check whether the string is empty to verify whether to do steps 3 and 4.

(Side note: in Ruby an empty string "" evaluates to false while a string of just space characters " " evaluates to true .)

So if the string is empty, it evaluates to false and nothing else happens in this method. In that case, no keyword is assigned to the new entry that is being created. But if the string has some value, continue on to the next step.

3) Here call the ActiveRecord macro find_or_create_by and pass in for both the database column name to look in (name) and the value to check for (the local variable name from step 1). find_or_create_by finds and then returns the first instance that matches the query. If it does not find one, it will instead instantiate a new instance with the information that was passed in and return that new instance. The return value of this method, a new or previously existing instance of the Keyword model, is assigned to a local variable, keyword.

4) Finally, while still inside the if block, add the keyword instance that was returned in step 3 to the collection of keywords on this particular journal entry.

Then the keywords_attributes= method ends and you are back in the entries_controller.

Once the entry is instantiated, render it to the frontend using json, and include the keyword. This looks like:

def create
    entry = Entry.new(entry_params)

    if entry.save
      render json: entry, include: [:keywords]
    else
      render json: entry.errors.full_messages, status: :unprocessable_entity
    end
  end

Return to Front End

Finally, returning to the front end, check the console logged response after parsing it’s JSON:

fetch("backend/url", configPostObject)
    .then(response => response.json())
    .then(json => console.log(json))

Open up the browser tools and you can see that something like this has been console logged:

// entry instance:
{id: 145, body: "sample entry", time_interval: 1, created_at: "2021-05-16T01:22:44.802Z", updated_at: "2021-05-16T01:22:44.802Z", …}
body: "sample entry"
created_at: "2021-05-16T01:22:44.802Z"
id: 145

// keyword array

keywords: Array(1)
0: {id: 4, name: "nature", created_at: "2021-05-12T17:22:45.771Z", updated_at: "2021-05-12T17:22:45.771Z"}
length: 1
__proto__: Array(0)
time_interval: 1
updated_at: "2021-05-16T01:22:44.802Z"
__proto__: Object

As the console logged object shows, the entry and keyword association were successfully persisted and returned to the front end. This means the nested form was effective for both entry and keyword information. The app successfully coordinated between a Rails backend and JavaScript frontend to handle a nested form with one click!

** Originally published May 16, 2021 via github.io

10 Basic Coding Terms For Beginners

pineapples — Mon, 21 Jun 2021 23:29:15 +0000

A really super beginner list of vocab words for code, because sometimes as I’m learning, I just want a brief 10 second synopsis on a term. (When language matters, this list is specific to Ruby.) So here goes:

Variable: a placeholder for a value. This is represented by a “bare word” data type. It allows you to access a value (which could be an extremely long bit of information) via your (typically short) variable name. In addition, as the name implies, a variable’s value can vary, though the specific rules on how it can vary, depend on the language. You can think of a variable as a labeled drawer holding some value.
Constant: this is like a variable, in that it is also a placeholder for a value. However, unlike a variable which can vary, a constant will be set equal to a value once in the course of your program and then it should not be reassigned. (You technically could reassign the constant. The language won’t physically stop you, but you shouldn’t reassign it!) Anytime you call the constant’s name, it will (or should!) always point to the value to which it was originally assigned. In Ruby, a constant starts with a capital letter.
Method: a set of instructions for something you want your code to do. Methods must be “defined” before they can be “called” or “invoked” at one (or many!) points later.

#this is the method definition:
def do_something
  puts "Hello"
end

#this is the method invocation:
do_something
=> Hello
nil

Parameters: a method can be defined to take information. The parameters are the placeholders in the method definition for that information. For example, we could make our above method take an argument containing some bit of data, and puts out the value of that data, rather than always putting “Hello”:

def do_something(data)
  puts data
end

Arguments: these are very similar to parameters. These are the actual bits of data that are passed into a method’s parameter spot(s) when the method is called. An argument can be raw data (like a “string”) or it can be the name of a variable, where the variable name points to the raw data:

#passing raw data in as an argument:
do_something("hi")
//=> "hi"
nil

#assigning a value to a variable and then passing that variable in as the argument:
greeting = "hola"

do_something(greeting)
//=> "hola"
nil

Return Value: In Ruby, a method implicitly (meaning without you having to say so) returns the value of the last line of code - unless you specifically return at some other point. In all of our examples above, nil is the return value of calling the do_something method. (Our do_something method is itself invoking the puts method on its last line. The return value of puts is nil, so our method do_something returns nil or the value of the last evaluated line of code. If we wanted do_something to simply return hello, we could type hello on the last line inside the function (we would still need to use puts if we also wanted the method to output hello):

def do_something
  puts "hello"
  "hello"
end

do_something
//=> hello #this is the output 'hello'
hello #this is the return from the last line inside the method

Terminal: the terminal is where code is “run” and evaluated. This allows you to run a program to “test” it with special tests (written to compare expected code results with actual code results) or see the output, especially in the case of a ‘command line program.’
Text Editor This is the place where you create and edit code projects, similar to using Microsoft Word or Google Docs to write a paper. Text editors are loaded up with code languages; they allow you to format code documents based on the language you are writing, as well as package up multiple files into a larger project. Some examples of text editors include Atom and VS Code. You can choose to run a terminal (where you actually run the code) from within a text editor or separately. Regardless of whether you run your terminal separately or inside your text editor, you generally operate the text editor and the terminal hand in hand while you are designing code. You’ll type in the text editor to write or edit code then run that code in the terminal to see what happens.
Keywords: These are reserved words in a code language that have already been assigned meaning by the writers of the language. Because they are reserved (and already have definitions), they should not be used to name variables or methods. Doing so would cause confusion as you would be over-writing existing definitions with special, temporary definitions. Some examples of Ruby keywords are: if, else, def, yield, do, puts, print, etc.
Program: this is a collection of code that can be compiled and run together. A program can be as simple as one file, or as complicated as you’d like. Ultimately this is a blanket term for a collection of code that performs some (or many) action(s).

And there you have it! These are some quick definitions to a few of the vocabulary words that I regularly found myself Googling at the beginning of my coding journey. This is by no means comprehensive, even for the vocabulary words above. As with everything in code, you could go much (much) deeper into these words, their meaning, and how they interact with so many other aspects of code.

** Originally published April 30, 2021 via github.io