DEV Community: Raquel Román-Rodriguez

Algo Logging: Reverse a String in JavaScript

Raquel Román-Rodriguez — Tue, 07 Dec 2021 22:27:40 +0000

Welcome back!

I am starting to work my way through this repository of algorithm problems from Learn-Co. It starts off easy, which is great for people who may be new to algorithms.

So, I thought I could, ahem, re-start at the beginning, too. I know I have previously presented some more challenging problems, but I'm headed back to basics for a bit.

If you'd like to try the problem yourself first, you can find it in the above linked repository or here:

CodeWars
LeetCode*

* This version is slightly different in expectation. More on this later.

The Problem

The Reverse String algorithm problem is as follows:

Given a string s, return s in reverse. Do not use any built-in reverse method.

Example

s = hello world
output = dlrow olleh

The Approach

Before I get into my approach, I need to address the LeetCode version of this problem, which asks for you to solve the problem "in-place", meaning "mutate the original string."

I am solving these problems in JavaScript, and in JavaScript, strings are immutable. This means it is not possible to reverse a string in-place. There's a reason the LeetCode version of this problem has to use an array of characters instead of a string. Since an array of strings is not itself a string, and our our problem is how to reverse a string, not an array, that is the problem we will solve. 😤

const a = "I'm a string";
const b = ['I', "'", 'm', ' ', 'n', 'o', 't'];

typeof(a) === 'string'; //true
typeof(b) === 'string'; //false 🤯
Array.isArray(b); //true 🤯

Apparently, an array is not a string.

That being said, if the problem you are given is to reverse an array in-place, (which is what the LeetCode version of this problem is,) the solution I am going over here is not the most optimized version. Check out the two-pointer technique, instead.

Okay, back to the program.

In this approach, we will initialize a new variable, reversed, as an empty string. We will then loop over s backwards, adding each character to reversed inside of the loop.

Time Complexity: O(n)
Why?
There is a single for loop. The time it takes to compute the solution will grow directly with the length of our input string, s. Thus, n represents the length of s.

Space Complexity: O(n)
Why?
We are creating a variable, reversed, that will be the length of s. This means the memory consumed to solve the algorithm is directly related to the length of s. Thus, n represents the length of s.

Variables Used:

reversed - An empty string to which we will add characters from s.
i - Our for loop counter. It will initially point to the last index of s so we can loop backwards.

Line-by-Line Walkthrough:

function reverseString {...}

Initialize variable reversed as an empty string show
```
let reversed = "";
```
Create a for loop which will iterate through the length of s backwards. Initialize variable i with value of s.length-1, set the loop exit condition to be when i is equal to 0, and decrement i each iteration. Backwards looping! show
```
for (let i = s.length-1; i >=0; i--) {...
```
Inside of the loop, redefine reversed to be reversed + the current character we are at in s. show
```
reversed += s[i]
```
Once the loop has finished, return reversed. show
```
return reversed
```
Show Me The Logs

Here are my console.logs for this problem.

For the best experience, view them on replit, where you can fork it and feed your own inputs into the function!

🚀 🚀 🚀 REVERSE A STRING STARTING NOW 🚀 🚀 🚀
__________________________________________________

        📥 s = "hello world"

============ LOOP 1 OF 11 ============

            s = "hello world"
            reversed = ""
            i =  10 
            s[i] = "d"

============ LOOP 2 OF 11 ============

            s = "hello world"
            reversed = "d"
            i =  9 
            s[i] = "l"

============ LOOP 3 OF 11 ============

            s = "hello world"
            reversed = "dl"
            i =  8 
            s[i] = "r"

============ LOOP 4 OF 11 ============

            s = "hello world"
            reversed = "dlr"
            i =  7 
            s[i] = "o"

============ LOOP 5 OF 11 ============

            s = "hello world"
            reversed = "dlro"
            i =  6 
            s[i] = "w"

============ LOOP 6 OF 11 ============

            s = "hello world"
            reversed = "dlrow"
            i =  5 
            s[i] = " "

============ LOOP 7 OF 11 ============

            s = "hello world"
            reversed = "dlrow "
            i =  4 
            s[i] = "o"

============ LOOP 8 OF 11 ============

            s = "hello world"
            reversed = "dlrow o"
            i =  3 
            s[i] = "l"

============ LOOP 9 OF 11 ============

            s = "hello world"
            reversed = "dlrow ol"
            i =  2 
            s[i] = "l"

============ LOOP 10 OF 11 ============

            s = "hello world"
            reversed = "dlrow oll"
            i =  1 
            s[i] = "e"

============ LOOP 11 OF 11 ============

            s = "hello world"
            reversed = "dlrow olle"
            i =  0 
            s[i] = "h"


======== 🏁 Finished Looping 🏁 ========

        🌟 🌟 🌟 Final Solution 🌟 🌟 🌟

 The reversed version of "hello world" is "dlrow olleh"!

Solution

Finally, if you'd like to see a clean, log-free version of the solution, here it is:

View Solution

function reverseString(s) {
  let reversed = "";

  for (let i = s.length - 1; i >= 0; i--) {
    reversed += s[i]
  }

  return reversed;
}

Thanks for reading and I wish you luck on whatever algorithmic endeavor brought you to this post. ♥

Algo Logging: The nth Fibonacci Number in JavaScript

Raquel Román-Rodriguez — Wed, 20 Oct 2021 22:47:41 +0000

I vividly remember the first time I encountered the nth Fibonacci algorithm. I had messaged a friend about starting to practice algorithms to which she responded:

Yeah! I just did one on the Fibonacci Sequence today! So fun!

I was immediately filled with flashbacks of my Masters program, sitting in a 500-level Music Theory course, checking for the Fibonacci sequence and the Golden Ratio in Sonatas by Mozart and Schubert.

Luckily for all of us, this algorithm problem's solution isn't as complicated as music theory at 8am. This time, it's the computer's job to figure out the sequence, we're just going to tell it how.

If you'd like to try the problem yourself first, you can find it here:

CodeWars
LeetCode

The Problem

The Fibonacci Number algorithm problem is as follows:

The Fibonacci sequence is derived of numbers where each number is the sum of the preceding numbers in the sequence. The sequence begins with 0 and 1.
Write a function that takes a integer, n, which represents an index in the sequence and return the Fibonacci Number held at that position.

Example

Fibonacci Sequence: 0, 1, 1, 2, 3, 5, 8, 13...
n = 4
output = 3

The Approach

We need a way to construct the Fibonacci sequence programmatically but we only need to construct it up to the nth position, and then return the number we find there.

It might be tempting to try this problem using recursion, where you call your function from within itself until you've reached the result:

//a recursive solution

function nthFib(n) {
    if (n <= 1)
        return n;
    return nthFib(n-1) + nthFib(n-2);
}

However, this approach solves for the same number in the sequence multiple times, which problematic from an optimization standpoint, and that's the whole reason that you're here, is it not?

You could clean this up a bit by using memoization (storing the results from a function call to prevent recalculating the same results again), but it's still going to run up space complexity (the amount of memory an algorithm takes up) with the memoization, which is wasteful, since we don't care about retaining the entire sequence in our output.

Instead, let's think about how you might solve this problem with your regular, human brain, not the computer. I'm thinking it would go like this:

Start with 0 and 1.
Sum the next number in the sequence by adding your previous two numbers: 0 + 1 = 1
Sum the second-to-last of your previous numbers with your new number: 1 + 1 = 2
Repeat steps 2-3 until you get to the nth position of the sequence.
Tell me the answer you got.

Let's try that instead.

Variables Used:

prevTwo - an array that holds the previous two numbers of the sequence
i - a counter variable in our for loop
sum - the sum of prevTwo[0] and prevTwo[1] in the loop

Line-by-Line Walkthrough:

function nthFib(n) {...}

Initialize the variable prevTwo with a value of [0,1], representing the start of the sequence show
```
let prevTwo = [0, 1];
```
Create a for loop which will iterate until we've reached the nth number in the sequence, initialize variable i with value of 0. show
```
for (let i = 0; i <= n; i++) {...
```
Inside of the loop, initialize a variable sum that is equal to prevTwo[0] + prevTwo[1]. show
```
let sum = prevTwo[0] + prevTwo[1];
```
Still inside the loop, set the values held in prevTwo to be our new previous two numbers in the sequence, the number held at prevTwo[1] and our new sum. show
```
  prevTwo = [prevTwo[1], sum];
}
```
When the loop is finished, return prevTwo[1]. This is our nth Fibonacci Number show
```
  return prevTwo[1]
}
```

Show Me The Logs

Here are my console.logs for this problem.

For the best experience, view them on replit, where you can fork it and feed your own string into the function!

🚀 🚀 🚀 Nth FIBONACCI NUMBER STARTING NOW 🚀 🚀 🚀

                📥 n =  5

================= FOR LOOP: 1 OF 4 =================

    Fibonacci Sequence, so far: [ 0, 1 ] 

        🔸 prevTwo = [ 0, 1 ] 
        🔸 i = 0

        🧮 ...calculating sum... 🧮

            🔸 sum = 0 + 1 = 1

        → Moving 1 position [0]
        → Moving 1 into position [1]

        prevTwo is now [ 1 , 1 ]

================= FOR LOOP: 2 OF 4 =================

    Fibonacci Sequence, so far: [ 0, 1, 1 ] 

        🔸 prevTwo = [ 1, 1 ] 
        🔸 i = 1

        🧮 ...calculating sum... 🧮

            🔸 sum = 1 + 1 = 2

        → Moving 1 position [0]
        → Moving 2 into position [1]

        prevTwo is now [ 1 , 2 ]

================= FOR LOOP: 3 OF 4 =================

    Fibonacci Sequence, so far: [ 0, 1, 1, 2 ] 

        🔸 prevTwo = [ 1, 2 ] 
        🔸 i = 2

        🧮 ...calculating sum... 🧮

            🔸 sum = 1 + 2 = 3

        → Moving 2 position [0]
        → Moving 3 into position [1]

        prevTwo is now [ 2 , 3 ]

================= FOR LOOP: 4 OF 4 =================

    Fibonacci Sequence, so far: [ 0, 1, 1, 2, 3 ] 

        🔸 prevTwo = [ 2, 3 ] 
        🔸 i = 3

        🧮 ...calculating sum... 🧮

            🔸 sum = 2 + 3 = 5

        → Moving 3 position [0]
        → Moving 5 into position [1]

        prevTwo is now [ 3 , 5 ]

=============== 🏁 Finished Looping 🏁 ===============

        🌟 🌟 🌟 Final Solution 🌟 🌟 🌟

 The 5 th number in the Fibinacci Sequence is 5 !

Solution

Finally, if you'd like to see a clean, log-free version of the solution, here it is:

View Solution

function nthFib(n) {
  let prevTwo = [0, 1];

  for (let i = 0; i < n - 1; i++) {
    let sum = prevTwo[0] + prevTwo[1];
    prevTwo = [prevTwo[1], sum];
  }

  return prevTwo[1]
}

Thanks for reading and I wish you luck on whatever algorithmic endeavor brought you to this post. ♥

Algo Logging: the Longest Substring of Unique Characters in JavaScript

Raquel Román-Rodriguez — Fri, 08 Oct 2021 20:35:16 +0000

Recently, I've been meeting with some peers to practice algorithms. We get together once a week to solve a couple problems and discuss our individual solutions, patterns, and best practices.

After our sessions, I take the final, optimized solution of the problems we've solved and add extensive console logs explaining how the solution works and share the result with my peers.

I've decided that this labor of love could possibly benefit others, so, here is the first of at least a few posts on some common algorithms, their solutions, and the logs I've written that explain them.

This week, we'll start with the Longest Substring of Unique Characters problem.

If you'd like, you can attempt the problem yourself, first:

The Problem

The Longest Substring of Unique Characters, also called The Longest Substring Without Repeating Characters, is as follows:

Given a string s, return the length of the longest substring consisting of unique characters.

Example

s = "ababcccabcdefbc"
output = 6 (length of "...abcdef...")

So, where do we start?

The Approach: Sliding Window

For those unfamiliar, the sliding window technique is a method for solving certain algorithms, particularly those that request a 'sub-' version of an array or string. While there are certainly more than a few ways to solve such problems, sliding window usually presents a reduced time complexity to other solutions.

In this particular instance, using sliding window allows us to achieve linear time (O(n)), as opposed to a brute force approach using multiple nested for loops with O(n^3). Woof.

Even if you've never seen sliding window used or heard of time complexity and Big O notation, don't fret! We're going to walk through this problem one iteration at a time.

Variables Used:

max - tracks the longest length seen (solution)
start - an integer pointing to the starting index of our sliding window
i - an integer pointing to the end of our sliding window as we iterate through the string.
charMap - a Map* object, storing seen characters and their most recently seen index + 1.
- "Wait...why index + 1?" Well, if we encounter that same character again, we want to be able to move the start of our sliding window to exclude the last time we saw it.
- EX. If we saw 'a' at index 0 and see it again at index 3, we have to move the start index of our window to 1 so we can add the 'a' at index 3 to our substring

Psst...A Map object in JS is an object that remembers the order its keys were passed in.

Line-By-Line Walkthrough:

function longestSubString(s) {...}

Initialize the variables max and start with a value of 0 and charMap using the Map() constructor show
```
let max = 0;
let start = 0;
const charMap = new Map();
```
Create a for loop which will iterate through the length of s, initialize variable i with value of 0. show
```
for (let i = 0; i < s.length; i++) {...
```
Inside of the loop, create a conditional statement that asks if charMap currently contains the character held at s[i].

If so, and start is smaller than the value in charMap for s[i], we need to shift our window. Move start to the index stored in charMap. show
```
if (charMap.has(s[i])) {
   start = Math.max(charMap.get(s[i]), start);
}
```
- Math.max takes the largest of its arguments.
Still inside the loop, set max to whichever is larger: max or i - start + 1. show
```
max = Math.max(max, i - start + 1);
```
- In this moment, i is the end of our current window, start is the start, and the +1 corrects for zero indexing to get the max length. If that is bigger than the value of max, we've found a new longest substring
Also still in the loop, add s[i] to charMap with it's index, i, as it's value. show
```
  charMap.set(s[i], i + 1);
}
```
Once the loop is finished, return 'max'. show
```
  return max;
}
```

Show Me The Logs

Here are my console.logs for this problem.

For the best experience, view them on replit, where you can fork it and feed your own string into the function!


🚀 🚀 LONGEST SUBSTRING OF UNIQUE CHARACTERS STARTING NOW 🚀 🚀 

    📥 s = "ababcbbc"

=================FOR LOOP=================

    --- We are on iteration 1 of 8 ---

    The current Window is "[]ababcbbc"

        🔸 i =  0 
        🔸 start =  0 
        🔸 max =  0 
        🔸 charMap =  Map {}
        🔸 s[i] = 'a'

    → Does 'charMap' contain 'a'? 

      ❌ NO: 
        → 'a' will be added to charMap
        → The current window will add 'a'

      🌟 NEW MAX FOUND 🌟 
            max = 1

    → 'a's value in 'charMap' will now equal: 1

=================FOR LOOP=================

    --- We are on iteration 2 of 8 ---

    The current Window is "[a]babcbbc"

        🔸 i =  1 
        🔸 start =  0 
        🔸 max =  1 
        🔸 charMap =  Map { 'a' => 1 }
        🔸 s[i] = 'b'

    → Does 'charMap' contain 'b'? 

      ❌ NO: 
        → 'b' will be added to charMap
        → The current window will add 'b'

      🌟 NEW MAX FOUND 🌟 
            max = 2

    → 'b's value in 'charMap' will now equal: 2

=================FOR LOOP=================

    --- We are on iteration 3 of 8 ---

    The current Window is "[ab]abcbbc"

        🔸 i =  2 
        🔸 start =  0 
        🔸 max =  2 
        🔸 charMap =  Map { 'a' => 1, 'b' => 2 }
        🔸 s[i] = 'a'

    → Does 'charMap' contain 'a'? 

      ✅ YES:
        → Does the current window contain a?

        ✅ YES:
          ♦ The last index that did NOT contain 'a' was 1 
          ♦ 'start' is at index 0 
          ♦ 'a' is already inside the window.

    ⛔ Repeated Character Found in Window ⛔

        The window needs to shift: 
        'start' moved to index 1

    → 'a's value in 'charMap' will now equal: 3

=================FOR LOOP=================

    --- We are on iteration 4 of 8 ---

    The current Window is "a[ba]bcbbc"

        🔸 i =  3 
        🔸 start =  1 
        🔸 max =  2 
        🔸 charMap =  Map { 'a' => 3, 'b' => 2 }
        🔸 s[i] = 'b'

    → Does 'charMap' contain 'b'? 

      ✅ YES:
        → Does the current window contain b?

        ✅ YES:
          ♦ The last index that did NOT contain 'b' was 2 
          ♦ 'start' is at index 1 
          ♦ 'b' is already inside the window.

    ⛔ Repeated Character Found in Window ⛔

        The window needs to shift: 
        'start' moved to index 2

    → 'b's value in 'charMap' will now equal: 4

=================FOR LOOP=================

    --- We are on iteration 5 of 8 ---

    The current Window is "ab[ab]cbbc"

        🔸 i =  4 
        🔸 start =  2 
        🔸 max =  2 
        🔸 charMap =  Map { 'a' => 3, 'b' => 4 }
        🔸 s[i] = 'c'

    → Does 'charMap' contain 'c'? 

      ❌ NO: 
        → 'c' will be added to charMap
        → The current window will add 'c'

      🌟 NEW MAX FOUND 🌟 
            max = 3

    → 'c's value in 'charMap' will now equal: 5

=================FOR LOOP=================

    --- We are on iteration 6 of 8 ---

    The current Window is "ab[abc]bbc"

        🔸 i =  5 
        🔸 start =  2 
        🔸 max =  3 
        🔸 charMap =  Map { 'a' => 3, 'b' => 4, 'c' => 5 }
        🔸 s[i] = 'b'

    → Does 'charMap' contain 'b'? 

      ✅ YES:
        → Does the current window contain b?

        ✅ YES:
          ♦ The last index that did NOT contain 'b' was 4 
          ♦ 'start' is at index 2 
          ♦ 'b' is already inside the window.

    ⛔ Repeated Character Found in Window ⛔

        The window needs to shift: 
        'start' moved to index 4

    → 'b's value in 'charMap' will now equal: 6

=================FOR LOOP=================

    --- We are on iteration 7 of 8 ---

    The current Window is "abab[cb]bc"

        🔸 i =  6 
        🔸 start =  4 
        🔸 max =  3 
        🔸 charMap =  Map { 'a' => 3, 'b' => 6, 'c' => 5 }
        🔸 s[i] = 'b'

    → Does 'charMap' contain 'b'? 

      ✅ YES:
        → Does the current window contain b?

        ✅ YES:
          ♦ The last index that did NOT contain 'b' was 6 
          ♦ 'start' is at index 4 
          ♦ 'b' is already inside the window.

    ⛔ Repeated Character Found in Window ⛔

        The window needs to shift: 
        'start' moved to index 6

    → 'b's value in 'charMap' will now equal: 7

=================FOR LOOP=================

    --- We are on iteration 8 of 8 ---

    The current Window is "ababcb[b]c"

        🔸 i =  7 
        🔸 start =  6 
        🔸 max =  3 
        🔸 charMap =  Map { 'a' => 3, 'b' => 7, 'c' => 5 }
        🔸 s[i] = 'c'

    → Does 'charMap' contain 'c'? 

      ✅ YES:
        → Does the current window contain c?

        ❌ NO 

    → 'c's value in 'charMap' will now equal: 8
_______________________________________________


🏁 🏁 🏁 Final Solution 🏁 🏁 🏁

Length of longest substring is 3

Solution

Finally, if you'd like to see a clean, log-free version of the solution, here it is:

View Solution

function longestSubString(s) {
  let max = 0;
  let start = 0;
  const charMap = new Map();

  for (let i = 0; i < s.length; i++) {
    if (charMap.has(s[i])) {
      start = Math.max(charMap.get(s[i]), start);
    }

    max = Math.max(max, i - start + 1);
    charMap.set(s[i], i + 1);
  }
  return max;
}

Thanks for reading and I wish you luck on whatever algorithmic endeavor brought you to this post. ♥

ActiveRecord Migration Rollback: learning the pitfalls of the `change` method the hard way

Raquel Román-Rodriguez — Mon, 09 Aug 2021 01:39:07 +0000

I recently finished my project for the third phase of FlatIron's Software Engineering Bootcamp. I built a raised-bed garden planning app using React for the front-end, and Ruby with ActiveRecord and Rack for my back-end. It was my first real back-end experience. You can check out the deployed app here.

I got to learn a lot from my own mistakes on this project, and one mistake in-particular caused such grief that I'm hoping this blogpost can serve as a word of caution to others learning about ActiveRecord Migrations.

The gist of this is that not all ActiveRecord Migrations support the change method equally (or at all). This is well-documented in the Active Record Migration docs, a section that apparently eluded my eyes before disaster struck.

The Mistake

Calling this "a mistake" is a bit misleading. It really was a chain of mistakes caused by my own lack of understanding of ActiveRecord migrations and rake commands.

This chain of mistakes started with the 37 records of my Plant model and three times this of my Note model that I needed to import into my database.

I thought I'd be cute, give myself some extra 'controlled forms in React' and 'writing routes in Rack' practice by making a form to POST this data to my back-end. A time-wasting labor ~~that I destroyed in a single command later~~.

My next misstep was when I realized I had an incorrect association in my models. To fix it, I wrote a migration to remove the foreign id:

class RemoveGardenIdColumnFromPlants < ActiveRecord::Migration[6.1]
  def change
    remove_column :plants, :garden_id
  end
end

After migrating this, I created a new model and yet another migration. I went to check my schema and realized the association from my remove_column migration was still in the Plants table, because this was not the correct way to remove an association id.

"No problem," I thought, "I'll roll it back, try again."

"HA! Not so fast!" said ActiveRecord:

===========================================================
rake aborted!
StandardError: An error has occurred, this and all later migrations canceled:

remove_column is only reversible if given a type.

Here's where things go very south for me.

It's important to note that up until this point, it was absolutely possible for me to reverse this migration and not lose my data in the process.
Taking a break before the panic starts might be the most important lesson here.

I began googling, trying things with increasing recklessness as my frustration grew. It was here that I misread a Stack Overflow question thinking it was asking how to solve the problem I was facing, and made the fatal mistake of running rake db:drop. While this did allow me to remove the migration mistakes, I also lost all of my data I had spent time submitting through that form I made.

🙃 Awesome.

Avoiding the Mistake

First and foremost: When something goes wrong, especially when working with data, STOP. Take a break. Go for a walk. Mistakes with database commands can have dire consequences that cost you precious time. And don't you dare run that #@$!-ing command until you know what it does.

Once you've stepped away from the problem, come back to it, and read advice, carefully.

In writing this post, I re-read the first answer I had come across that had told me to change the migration file to use an up and down method in the remove_column migration. I did try this, but received the same error.

The next line of that answer explained how to rollback to a specified version using rake db:down VERSION=<your-version-number-here>. I tried this, trying to rollback to the first version of my migration, which also did not work, because what this line was actually telling me was that, since I had run another migration after the remove_column, I needed to rollback to the remove_column migration, and then try to rollback with up\down implemented.

The Solution

If you've created another migration after the irreversible one, rollback to the version of the irreversible migration using rake db:down VERSION=<your-version-number-here>
Change the irreversible migration file to use up and down instead of change, like so:

class RemoveGardenIdColumnFromPlants < ActiveRecord::Migration[6.1]
    def up
        remove_column :plants, :garden_id 
    end
    def down
        add_column :plants, :garden_id, :integer
    end
end

or using change:

class RemoveGardenIdColumnFromPlants < ActiveRecord::Migration[6.1]
  def change
    remove_column :plants, :garden_id, :integer
  end
end

ActiveRecord is an awesome tool, but migrations can be a steep learning curve. Take your time, take a breath, and don't cry over dropped tables.

How to: Creating Bash Aliases

Raquel Román-Rodriguez — Fri, 23 Jul 2021 17:20:28 +0000

Are you tired of your terminal yelling at you when you mistype git commit -m?

How about having to type out long paths to navigate to folders you are frequently accessing?

What if I told you that you could use aliasing in your terminal to make your frequently-used Bash commands short and sweet? It's a rather quick process that will save you countless hours over the course of your life as a developer, so let's do it!

What is an alias?

For our purposes, an alias is an alternate name for a command. Essentially, we a creating a shortcut for our Bash commands.

There are two types of aliases we can use in our terminal:

Session-based aliases
Persistent aliases

Session-based aliases are defined and stored in the terminal session and disappear when that session is closed, while persistent aliases are defined in a file associated with our user profile and (you guessed it) persist between sessions.

Syntax

The syntax for defining bash aliases is the same between both types:

 alias <alias name>='<the bash command to be aliased>'

It is very important to note the lack of white-space in the alias definition. If you add spaces around your '=', your alias will not work.

Session-Based Aliases

Session-based aliases are defined in the terminal command line, using the aforementioned syntax. Here is an example of an alias for switching directories:

user:~$ alias project='cd Development/code/my-awesome-project/'
user:~$ project
user:~/Development/code/my-awesome-project$

I can now navigate to my projects directory by simply typing project in the command line.

However, if I close my terminal, re-open it, and try to run project again, I get the following error:

user:~$ project

Command 'project' not found, did you mean:

  command 'projectx' from deb project-x (0.90.4dfsg-0ubuntu5)
  command 'projectl' from deb projectl (1.001.dfsg1-9build3)

Try: sudo apt install <deb name>

This is because the alias project was unique to the session I defined it in!

These types of aliases can be great while working with something that requires you to run a verbose command numerous times, but is perhaps unique to the session you're working in. Personally, I find them useful when running test files, but use your imagination on their usecases.

Persistent Aliases

Persistent aliases can completely change your Bash experience, speeding up your efficiency and reducing typos in your commands. To see a list of your currently defined persistent aliases, run alias in your command line.

Defining custom persistent aliases requires more work than session-based aliases, and missteps could have some undesired consequences. Follow along carefully and keep your hands and feet inside the car at all times.

Open your terminal
Assure that you're in your home directory: cd ~
Run ls -a to list all of the directory files, including system files
Look for a file named .bash_aliases. If it doesn't exist, create it: touch .bash_aliases
Run vi .bash_aliases to enter the Vim text editor. The file should look something like this:
Press 'i' to enter Insert mode

Now, we can use our syntax from before to define our own, persistent aliases. Here are some simple examples:

alias a='add .'
alias cm='commit -m'
alias be='bundle exec'
alias fi-ruby='cd ~/Development/code/ruby-phase-3'

Once you're happy with your aliases, hit Ctrl + C to leave Insert mode.
To save your edits and exit Vim, type :wq! and hit Enter.
You should be back in your terminal. Close your terminal.
Reopen the terminal and run alias. This will print a list of all of the persistent aliases associated with your user profile. Check that the ones you just created are included among them. If not, go back through the above steps.

You can now enter your aliased commands in the command line and save yourself time and ~~cuss words~~ frustration from your typos and lengthy commands!

Happy coding!

Using Two-Dimensional Arrays to Build a Walkable Game Map (in React!)

Raquel Román-Rodriguez — Sun, 11 Jul 2021 20:07:32 +0000

I recently deployed my first-ever React project, a mini-simulation game called CodeCamp Quest where you play as a student developer trying to balance her homework assignments with her needy (but adorable) dog.

Creating this project not only gave me a chance to deepen my understanding of React, but also to learn Redux and experience writing custom hooks. I faced a number of challenges along the way, one of which was how to handle creating map boundaries. I’ll get into how I solved it, but first...

Some Background on My Inspiration for the Game

When I told my instructor I was thinking of doing a game for my React project, I didn't fully understand what I was getting myself into. I knew I wanted to build a game that aligned with my love of games like The Sims and Stardew Valley. At a minimum, I wanted to be able to move a character on a plane and complete tasks.

I also knew I wanted the plot to reflect my recent experience learning React with two dogs who love to tell me what to do and when. Write what you know, so they say.

In conceptualizing the logic, I had a feeling it was possible to create a grid and to make the character's X and Y coordinates dynamic with keystrokes, but beyond that, I was essentially prepared to start guessing.

I googled 'React Game,' where I came across this video of Drew Conley giving a talk at React Rally in 2016 about the game his team built entirely in React, called Danger Crew. I also encountered Andrew Steinheiser's React RPG, a dungeon-crawler ~~of which I wasted a good amount of research time playing.~~

These games proved to me that what I wanted was possible, I only needed to figure out how.

The Array Map

I started with the thing I was sure how to build: moving a character on a plane by dynamically changing their coordinates using keystrokes. I created a custom hook that stored the x-y coordinates in state and altered them according to the arrow key being pressed. The character could then move freely around the browser window, beholden to nothing, free of the restrictions of the walls and map edges like a roving specter...amazing, but not the game I was building.

I needed a way to efficiently store the bounds of the map. Different rooms have different walkable areas, so a simple range condition couldn't work, and eventually, I would also need to allow actions on certain game tiles.

So, I called my dad, a developer from whom I got my love of video games. He suggested that I look into using a two-dimensional array, a common solution for games that use a grid.

I built out my bedroom array, where each tile stored a boolean value for 'walk' and 'action' in an object:

const X = { walk: false, action: false,};
const O = { walk: true, action: false,};
const AO = { walk: true, action: true,};
const AX = { walk: false, action: true,};

const BEDROOM_MAP = [ //each elem in the nested array equals a tile on the x-axis
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 0
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 1
    [X, X, X, X, X, X, X, X, X, X, X, X], // y= 2
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 3
    [X, X, AX, AX, X, AO, AO, X, AO, AO, X, X], // y = 4
    [X, X, AO, AO, O, O, O, O, AO, AO, X, X], // y = 5
    [X, X, O, O, O, O, O, O, O, O, X, X], // y = 6
    [X, X, O, O, O, O, O, O, O, O, O, O], // y = 7
    [X, X, X, O, O, O, O, O, O, O, O, O], // y = 8
    [X, X, X, O, O, O, O, O, O, O, X, X], // y = 9
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 10
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 11
]

Compare this to the mock-up of the map grid I had created in an image editor, we can see it is mostly the same. (In testing, I discovered a need to have some action tiles that were not walkable, but did allow for actions):

Using the Array

To make the character abide by my new rules, I created a function that took in the current coordinates and the direction indicated in the keydown event.

The function then adjusted for what would be her next stride by adding or subtracting 2 (the length of her stride) from the current x or y (dependent on the direction moved).

function getNextTile(direction, position) {
    let newPos;
    let X;
    let Y;

    switch (direction) {
        case 'up':
            newPos = position.top - 2
            X = ((position.left + 192) - (position.left % 32)) / 32
            Y = (newPos - (newPos % 32)) / 32
            return MAP_TABLE[Y][X][key];

By dividing the coordinates held in position by 32 (the pixel size of my grid), and passing them as the indices to MAP_TABLE, which held the 2D arrays for each map area, we are able to return the boolean for 'walk' held on the next tile. The return of this boolean value determines if the reducer that moves the character runs or not, thus restricting her to my map.

You'll notice I had to subtract the remainder of the current position / 32 before dividing it to account for being in the middle of tiles, as the player steps by 2px at a time.

By the way, if you are curious why I am adding 192 in the X coordinate calculation: Like an old Pokémon game, CodeCamp Quest uses a viewport, allowing the entire map to be rendered behind the viewport container. When the player walks up or down, the character sprite moves, but when walking left or right, the sprite is stationary and the map image moves instead. 192px renders the character in the center of the viewport container on the x-axis. The getNextTile function needs to account for that fixed position.

My first JavaScript project became a lesson in deploying a REST API json-server (and how you can do it, too.)

Raquel Román-Rodriguez — Tue, 08 Jun 2021 18:31:41 +0000

You know that moment when you realize the idea you had is going to be ~~a lot~~ a bit more work than you initially realized? Sometimes, your vision for something doesn't align with your skill-set, your tools, or your timeframe, or you just happen to dream big. And while that can be stressful, it can also be an amazing chance to grow.

I recently completed my first-ever JavaScript application. It's a simple web app that let's users explore the films and characters of Studio Ghibli. The project was my first assessment for FlatIron's Software Engineering Bootcamp and the requirements included using a public API with JSON as the communication format. The project is hosted here.

While I certainly learned a good amount about HTML, CSS, and JavaScript working on this project, a unique challenge presented itself during my workflow:

"How does a baby developer like me with essentially no back-end knowledge yet host her own REST API for a small project?"

Well, let me tell you.

The Problem

The general parameters for our project were:

A HTML/CSS/JS frontend app that accesses data from a public API. All interactions between the client and the API should be handled asynchronously and use JSON as the communication format.

I knew there was an existing Studio Ghibli API, but as I explored the data, I noticed that it didn't have any images, which didn't match my vision for my app. However, my instructor gave me the green light to use a locally hosted JSON-Server via this Node Module and I set off working on my project.

I built the shell of my site in HTML and CSS, then created a db.json file where I modified the Studio Ghibli API to hold images, descriptions, and other supplemental data I wanted to display.

Comparison of changes I made to the original API data

Installing and running the JSON server locally took exactly two lines typed into the terminal:

$ npm install -g json-server

$ json-server --watch db.json

I then got my fetch() requests working using 'http://localhost:3000/...', wrote document.createElement about a hundred times, and was ecstatic with my final product.

Except, because I was using a locally hosted server, no one else could see my final product unless they cloned the repo and started a local server themselves. While this met the assessment requirements, I wasn't very happy with that as my end result.

I explored some free JSON hosting options, but I repeatedly hit walls with various feature limitations. Additionally, I encountered issues where the documentation for these options made significant assumptions of understanding or lacked documentation entirely, which is a problem for newbs like me.

A lesson for the future: your project is only as accessible as its documentation is clear.

The Solution

I reached out to my instructor again for advice on how I might be able to make my web app, well, an actual web app. She returned with this amazing template which allows developers to deploy the fake REST API JSON-server (which I was already using locally) to Heroku.

It works beautifully, and the directions are actually accessible for beginners. 🤯

All together, it took me about 15-minutes to get this working, including editing my fetch() requests to use my new API. Though, if you haven't already built your database (~~let's not talk about how much time I spent on that part of this project~~), your timeframe will certainly vary.

Here's how it works:

On the GitHub page for the template, select the 'Use this template' button
Name the repo and select 'Create repository from template'
Clone the repo to your local machine
Open the repo in your favorite text editor
Modify the contents of the db.json file to match your data
- Check the documentation on structuring a JSON-server if you're unsure on how to format this
Sign up for Heroku
Install the Heroku CLI on your computer
- This was the most intimidating part for me! Hang in there!
Run the heroku login command in your terminal and follow the prompts
cd into your local repo clone from step 3

While in your local repo, run the following:

 $ heroku create
 # A bunch of code will print
 $ git push heroku master

Run heroku open to see your JSON-server in all its gloryCongratulations!
- You can now fetch to your database using the Heroku App URL, and you have access to your REST API routes and endpoints. Hooray!
(optional) Heroku automatically 'sleeps' your app after 30 minutes of inactivity. It will reboot when a request is made but can take a few seconds. To avoid this, add your app to Kaffeine, which will ping your app every 30 minutes to prevent sleeping.
- Heroku does require all free apps 'sleep' for 6 hours a day, but Kaffeine allows you to select your app's "bedtime." How sweet.

And with that, you can show your grandma that cool project you just finished without trying to talk her through installing Git.

Giving Up The Ghost: Why I'm Trading My Academic Career for Software Engineering

Raquel Román-Rodriguez — Fri, 21 May 2021 16:46:51 +0000

On March 21st, 2021, I posted a tweet to clear my head. The next day, I decided to quit my job as a college professor and become a software engineer.

Since 2018, I have worked at a small, private college in Ohio where I am the Director of Vocal Studies. I graduated with a Masters of Music from the Cleveland Institute of Music in 2018, and when I was first promoted to my current position, I couldn't wait to help my colleagues build a music program from the ground-up. I believed deeply in the potential of our program. I drew up 5-year plans, created new courses, standardized expectations, and threw my weight behind numerous extra projects, all to improve the experience for our students. I distinctly remember standing in my boss' doorway in February of 2020 and saying, "I'm ready to go all in for this program, so let me know how I can help."

Me, conducting at our Winter 2019 Choral Concert

And then, March 2020 came. The school closed a week before our Spring concert. Like most professors, I was woefully unprepared to move my courses online, but especially because all of my courses involved performing music synchronously. I wrote an email to my choral ensembles once it became clear that we would not be returning to campus, cancelling class for the year.

Over the summer, I was determined to enter the new year prepared for anything. Colleges were fearful of their dwindling enrollments and were desperate to offer some level of in-person learning. However, guidelines for safe choral singing released by the American Choral Directors Association made me well-aware that our school lacked the facilities and funding to give me what I needed to hold in-person choir safely. I had to find a way to make the course work virtually.

I spent weeks researching best-practices for virtual music making: I learned about programs that could reduce latency to imperceptible amounts, what buffer packets are, how to use an audio interface, and more. I became an expert on Zoom Meetings. I made videos to both show students the potential of the technology and to train them to use it. And perhaps my biggest triumph: I learned to use Reaper, a Digital Audio Workstation (DAW) to edit audio for our virtual concerts. (It may come as a surprise that someone can obtain a Masters degree in Music without ever having had to use a DAW, but this is the norm. As one might imagine, this has been a great topic of discussion recently.)

And in the Fall, I was ready.

Or, I thought I was ready. What I wasn't ready for was how draining spending 100 hours editing a 30-minute virtual concert would be. I wasn't ready for how emotionally taxing watching my students struggle through the darkness of this year through a computer screen would be. And most of all: I wasn't prepared to answer my own questions on the ethics of recruiting and encouraging students to major in a field where I knew that their prospects, even pre-pandemic, were bleak.

I Believe by Mark Miller from our February 2021 virtual concert.

I released three full-length virtual choir concerts. The music was all rehearsed via Zoom, the final recordings made separately using click-tracks and mastered together in Reaper. The reception was impressive-- some local professional ensembles reached out to me regarding our process, engagement on our videos were far higher than in-person attendance could have even accommodated, pandemic or not. But as the year wore on, the feeling of fulfillment wore off and the weight of that question on the ethics of recruitment grew by the day.

So, on March 21st, 2021, after a day of sitting through some auditions from prospective students, I posted a tweet and went to bed.

// Detect dark theme var iframe = document.getElementById('tweet-1373810108585676803-81'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1373810108585676803&theme=dark" }

I woke up in the morning to hundreds of twitter notifications. I had, in the small realm of Academic Music Twitter, gone viral and some well-connected people had retweeted me. Oops.

Moments later, I opened Facebook to find that someone had posted a screenshot of the tweet in the largest Facebook group for classical singers. It is a group that is a bit notorious for its egos and archaic takes, but what do you expect from a group of people who majored in Opera?

In the thread, a shocking number of singers defended the system while also making weird, false assumptions about my career, not knowing that I am actually one of the lucky few with stable music income and a titled position.

I have spent my entire adult life working for a career in academia, I have made countless sacrifices and given up other promising opportunities. Academia has given me more than most, and yet still very little in return. I have often described my career as feeling like a chess game where you can’t see the board, and not in a cool, Beth Harmon way, but an “Oh my god, I forgot I don’t know the rules of chess” kind of way.

It was at this moment I realized that I could no longer contribute to this field. I wasn't okay with the answer, "well, we can't predict student success and what's wrong with training more people than there are spots for?" when we know that includes encouraging 18-year-olds to take out a mortgage's worth of debt (with a much higher interest rate) for that training. I also recognize that if I do not recruit students, the college will determine they cannot retain my position, but I can't look students in the eyes and tell them that majoring in music is a good choice anymore. I had to get out.

I made a plan over the next couple weeks, and once I had my finances in order, I applied to FlatIron School less than a month later.

Ok, why software engineering, though?

Frankly, I had been considering it for years. I have dabbled in code, mostly for my own benefit over the years. I've written scripts for some of my Google Sheets that automated actions I needed done for work, lightly messed with modding the video games I play, and of course, created custom MySpace layouts as a teenager.

It also doesn't hurt that my father is a Senior Developer at Black and Veatch with over 25 years of experience in software development. I grew up watching him pour over books on numerous languages, hearing him repeat ad-nauseum that “JavaScript and Java are two different languages!”, and of course, asking him for help when my own code wasn’t working.

Perhaps it is genetic, but I am a problem-solver who loves a good puzzle, and I often get the same “one more piece” feeling from working on code as I do from puzzles. I have joked that the specter of becoming a developer has been haunting me since my courses on HTML and CSS for graphic designers in my undergrad, so, I'm trading the ghost of academia for that of software engineering and not looking back.