DEV Community: Annette Michaels

Lockdown Breathes Life into Old Projects

Annette Michaels — Sun, 29 Mar 2020 18:52:21 +0000

I started my first job (yeay!) a few months ago and in the process one of my personal projects fell to the wayside. I work remotely so the stay at home order has not actually changed my life or daily pattern much. However, it has changed for many of the educators out there.

The main project I was working on had to do with increasing exposure for kids who are deaf and hard-of-hearing to English literacy. I have been working with a teacher of the deaf (and possibly more in the future) to release a website that has her reading and signing books so her students can follow along. With the lockdown in place many of her students do not have the same access to language so the past two weekends I have been working to get the site ready for deployment.

You could say why not just keep the videos on Youtube and let them search through her channel?

We thought this would make it easier for the kids to navigate and it allows for filtering. We can also control the content they are exposed to and there are no ads.

It was built with the intention of increasing accessibility so it has large easy to find buttons to help those with multiple disabilities and also it also has goes straight to fullscreen and autoplays (on most devices) when a video is clicked. This prevents accidentally playing all the videos at once. It also has a responsive design since many students do not have access to computers at home.

I have a lot to learn still and there are a lot of features we want to add including multiple sign languages to increase accessibility. It is a work in progress but I am proud of it, and am excited to get better at my craft.

This is my first app that is fully loaded on heroku. There were a few problems involving Youtube API call limitations that I believe I have found a solution to (so this is a test to see if I really fixed it =D).

It is currently available at seesignstories.herokuapp.com

3Sum Algorithm

Annette Michaels — Wed, 25 Sep 2019 04:02:30 +0000

3Sum Problem - No Duplicates

Given an array nums of n integers, are there elements a, b, c in nums such that a + b + c = 0? Find all unique triplets in the array which gives the sum of zero.

No duplicates.

The trickiest part of this problem is duplicates (language depending). At first glance it makes sense to iterate in three loops for the brute force method.

for (i = 0; i < nums.length - 2; i++) {
   for (j = i + 1; j < nums.length - 1; j++) {
      for (k = j + 1; k < nums.length; k++) {
       ///additional code here
      }
   }
}

This results in O(n^3) time complexity and removing the duplicates is difficult because the goal is to return an array of arrays.

The way I recommend doing this problem is by using two pointers reducing the complexity to O(n^2).

In layman's terms we are going to have one number that we are going to go put through all the pertinent combinations by moving two pointers around to see if they match the target.

To do this the first thing we need to do is sort the array.

nums = nums.sort()

This should work right?

let nums = [0,5,2,-5,-2]
nums.sort()
Array(5) [ -2, -5, 0, 2, 5 ]

Nope the default sort in javascript does it alphabetically.

So instead we have to change the sort method. If you want to read up I recommend the documentation here

let nums = [0,5,2,-5,-2]
nums.sort(function(a,b) {return a-b})
Array(5) [ -5, -2, 0, 2, 5 ]

Success!

Now we can get down to finding our unique triplets

So after sorting we need to create a for loop. This loop is going to represent a number that we are comparing everything to.

i = number we aren't changing
j = low pointer start spot
k = high pointer start spot

[ i:-5, j:-2, 0, 2, k:5 ]

and the next iteration of the loop (i = 1)

[ -5, i:-2, j:0, 2, k:5 ]

and then

[ -5, -2, i:0, j:2, k:5 ]

so the low pointer j will always start at i + 1 and the high pointer k will always start at nums.length - 1.

So far we have

var threeSum = function(nums) {

    let result = []

    nums = nums.sort(function(a,b) {return a-b})

    for (let i = 0; i < nums.length - 2; i++) {

        let j = i + 1
        let k = nums.length - 1


    }      

    return result
};

Since j should always be lower than k we can put most of the rest of the code into a while loop that specifies this.

and then just go through the rest of the logic.

If the sum of the three numbers is equal to the target (0 in the leetcode problem) then push it onto the array, otherwise increment or decrement the appropriate pointer to bring us closer to the target number.

var threeSum = function(nums) {

    let result = []

    nums = nums.sort(function(a,b) {return a-b})

    for (let i = 0; i < nums.length - 2; i++) {

        let j = i + 1
        let k = nums.length - 1
        while (j < k) { 
            let sum = nums[i] + nums[j] + nums[k]

            if(sum === 0) {
                result.push([nums[i], nums[j], nums[k]])
                j++
                k--
            } else if (sum < 0) {
                j++
            } else {
                k--
            }

        }


    }      

    return result
};

This mostly works except it allows for some duplicates and of course we are currently ignoring our base cases.

To ensure no duplicates once we find triplet we need to move the pointers to the next unique number else we could end up with the same triplet.

for example [0,0,0,1,1,1,2,2,2] will result in lots of duplicated triplets.

So we add the following after we add to the result array.

while (nums[k] === nums[k - 1]) k--
while (nums[j] === nums[j + 1]) j++

This concept also applies to 'i' so but we use continue to let it go to the next loop are properly handle the variables.

if (i > 0 && nums[i] === nums[i - 1]) continue

And the base cases. There are lots of ways to write these. I thought reduce would be fun to practice.

    if (nums.length < 3) {return [] }
    if (nums.length === 3) {
      let sum = nums.reduce(function(acc, cv) {
            return acc + cv
        }, 0)
      return sum === 0 ? [nums] : []
    }

Here is the full code in JS

var threeSum = function(nums) {

    let result = []

    if (nums.length < 3) {return [] }
    if (nums.length === 3) {
      let sum = nums.reduce(function(acc, cv) {
            return acc + cv
        }, 0)
      return sum === 0 ? [nums] : []
    }

    nums = nums.sort(function(a,b) {return a-b})

    for (let i = 0; i < nums.length - 2; i++) {

        let j = i + 1
        let k = nums.length - 1
        if (i > 0 && nums[i] === nums[i - 1]) continue

        while (i < j) { 
            let sum = nums[i] + nums[j] + nums[k]

            if(sum === 0) {
                result.push([nums[i], nums[j], nums[k]])
                while (nums[k] === nums[k - 1]) k--
                while (nums[j] === nums[j + 1]) j++
                k--
                j++
            } else if (sum < 0) {
                j++
            } else {
                k--
            }


        }

    }      

    return result
};

and here it is in Ruby. In Ruby the duplicates are much easier to handle because .uniq will remove them so we don't have to have the while loops.

def three_sum(nums)
  result = []

  return result if (nums.length < 3)

  return [nums] if (nums.length === 3 && nums.sum === 0)
  nums.sort!
  for i in 0..nums.length - 3
    j = i + 1
    k = nums.length - 1

    while j < k
      sum = nums[i] + nums[j] + nums[k]
      if sum < 0
        j += 1
      elsif sum > 0
        k -=1
      else
        result.push([nums[i],nums[j],nums[k]])
        j += 1
        k -= 1
      end

    end
  end

  return result.uniq
end

Learning Node/Express on the fly

Annette Michaels — Sun, 08 Sep 2019 02:47:49 +0000

I have managed to max out my Youtube API query limit (10,000 units) on my own developing my website. There are a few workarounds to this conundrum and I decided that instead of setting up multiple API keys and swapping them out that I should bite the bullet and build the back-end. Luckily, it will not be used regularly until next week so I have a little bit of time (and a back-up solution).

Initially, I wanted to build the back-end in a new language instead of what I already know (Rails), probably Java/Spring Boot or Python/Django. However, since I need it up and running quickly I thought it would make sense to take a language I already know, Javascript, and learn some new skills, NodeJS and Express. I know I'm using PostgreSQL and wanted something close to what I already know for a smooth transition. I went with Sequelize due to it's similarities to Active Record.

robinwieruch.de has been my best resource by far.

There are free tutorials in the blog section including setting up NodeJS with Babel, Express, Sequelize, and making the REST API with it.

It has an abundance of information, I recommend checking it out!

Oops don't forget to test

Annette Michaels — Wed, 04 Sep 2019 15:52:39 +0000

So managed to make a newbie mistake. I forgot to recheck my layout after editing css in all the screen sizes. Ended up with a desktop layout that I pushed to my deployed branch that looked like

instead of

oops. Easy fix at least and a friendly reminder to check everything before deploying =)

Practice what you don't like

Annette Michaels — Sat, 31 Aug 2019 01:43:55 +0000

Have you ever really not wanted to do a thing? Like really not wanted to to the point where it gave you the heebie-jeebies?

For programming it was CSS.

I am a scientist so having to use something that feels so imprecise feels innately wrong. One small change shouldn't make your website into a Picasso painting right?

Well I have been working on my website SeeSignStories and I know that this has to be an easy to navigate site that is responsive to a wide range of operating systems and screen sizes. The children using it will be in early elementary school and grabbing their parents phones or tablets, definitely not using a desktop computer. So I have been working an awful lot with CSS and learning about different viewports and doing tons of media queries.

I can solidly say that CSS and I have become better friends. Since I am looking for my first job front-end positions seem less daunting since I know I can do it.

In summary, if you don't like something or it is hard, you probably just need to practice it more.

On a side note if anyone has any tips about naming classes for CSS or organizing the giant CSS file with media queries let me know! Or eTags since my next mission is to not use up my Youtube API quota so quickly...

Project: See Sign Stories

Annette Michaels — Mon, 26 Aug 2019 02:38:48 +0000

I recently started a project working with a Teacher of the Deaf to develop English literacy skills in children who are deaf and hard of hearing. I have been using the YouTube API to fetch the videos and publish them on a page that is kid-friendly and highly accessible to those with developmental disabilities.

The adventure has just started and I have already learned so much from learning how to communicate with non-technical clients to how YouTube thumbnail resolution is more dynamic? than expected.

I will definitely be posting more about this project in the future as it matures. Check it out at

https://github.com/Rygel-XVI/SeeSignStories

Container with the Most Water - Code Challenge

Annette Michaels — Sat, 06 Jul 2019 21:33:30 +0000

Leetcode Problem 11

This problem is pretty straight forward.

Given an array of heights, find the two indices that could contain the most water between them.

Generally there are two ways of solving this, the brute force method, and the two pointer method.

Brute Force

This method will calculate every possible combination possible to determine the answer. This requires a nested loop resulting in a complexity of O(n^2).

Javascript

var maxArea = function(height) {
    let mostWater = 0

    for (let l = 0; l < height.length - 1; l++) {
        for (let r = height.length - 1; r > l; r--) {
            mostWater = Math.max(mostWater, (Math.min(height[l], height[r])*(r-l)))
        }        
    }
    return mostWater
}

A better way of doing this is to utilize two pointers.

Two Pointer Method

For this method we utilize two pointers that are placed on opposite ends of the array to iterate through once resulting in a time complexity of O(n). The area between the current left (l) and right (r) indexes and if the area is larger than the current max, it is set as max.

The indices are moved based on which one is smaller or if equal the left one in this situation. It is arbitrary which is checked in the if statement.

Javascript

var maxArea = function(height) {
    let max = 0

    let l = 0
    let r = height.length - 1

    while (l < r) {
        if (height[l] > height[r]) {
            max = Math.max(height[r] * (r-l), max)
            r--
        } else {
            max = Math.max(height[l] * (r-l), max)
            l++ 
        }       
    }

    return max
};

In Ruby...

def max_area(height)
    max_area = 0

    l_idx = 0
    r_idx = height.length - 1

    while (r_idx > l_idx)  
        if height[r_idx] >= height[l_idx]
            max_area = [(height[l_idx] * (r_idx - l_idx)), max_area].max
            l_idx += 1
        else 
            max_area = [(height[r_idx] * (r_idx - l_idx)), max_area].max
            r_idx -= 1
        end        
    end

    return max_area
end

For more readability you can always separate out the max_area (ruby) or max (javascript) into multiple lines.

Javascript

if (height[l] > height[r]) {
    maybeMax = height[r] * (r-l)
    r--
} else {
    maybeMax = height[l] * (r-l)
    l++ 
}        

max = Math.max(maybeMax, max)

Ruby

if height[r_idx] >= height[l_idx]
    maybe_max = height[l_idx] * (r_idx - l_idx)
    l_idx += 1
else 
    maybe_max = height[r_idx] * (r_idx - l_idx)
    r_idx -= 1
end

max_area = maybe_max if maybe_max > max_area

Decided to mix up the syntax on the last line for variety since the Ruby and JS solutions look so similar.

Reverse an Integer - Code Challenge

Annette Michaels — Sun, 30 Jun 2019 23:07:48 +0000

Leetcode Problem 7

Given a 32-bit signed integer, reverse digits of an integer.

Examples:
Input: -123
Output: -321

Input: 120
Output: 21

Input: 123
Output: 321

At first glance this problem is easy. In Ruby just convert to string, reverse, and convert back to integer and Ruby has all those nice built in functions to do just that and make it easy.

def reverse(x)

    x.to_s.reverse.to_i

end

However, this will not accomodate a negative number as the reverse function does not accomodate then negative. So this is what happens.

irb(main):016:0> x = -123
=> -123
irb(main):017:0> x.to_s.reverse.to_i
=> 321

What we really want is -321 and one way to accomodate this is to create a variable that indicates whether or not it should be negative and add it if necessary on the return statement.

def reverse(x)

    neg = x < 0 
    x.to_s.reverse.to_i
    return neg ? -x : x

end

Almost there. We have not considered a key part of the problem. It is a 32-bit integer.

Integers can be huge, however, when programming there are limitations. Technically you could have a number that is infinite places long and have it be an integer but that would also break whatever you are working on (hello stackoverflow). So when the question says 32-bit integer what it is saying is the largest binary number with 32 places so...

11111111111111111111111111111111 in base 2 math is equal to

4294967295 in base 10 math.

However, the problem also specifies signed so the first bit is a + or - resulting in 31 1's not 32 so we end up with the magic number as

2147483648

So the range is -2147483648 to 2147483648 right? But what about 0? Well the positive integer gets it so the range results in

-2147483648 to 2147483647 non-inclusive of those numbers.

To accommodate this we have to check if the integer input is greater or less than those ranges before returning a result.

def reverse(x)

    neg = x < 0
    x = x.to_s.reverse.to_i

    return  0 if (x > 2147483646 || x < -2147483647)

    return neg ? -x : x
end

If you wanted to not use as many built in functions building out the reverse is always good practice.

def reverse(x)
    i = 0

    neg = x < 0
    x = x.to_s

    x.length % 2 == 0? (half = x.length/2) : (half = x.length/2 + 1)
    len = x.length - 1

    while i < half
      temp = x[i]        
      x[i] = x[len - i]
      x[len - i] = temp
      i += 1
    end

    x = x.to_i

    return  0 if (x > 2147483646 || x < -2147483647)

    return neg ? -x : x
end

In Javascript we end up with

var reverse = function(x) {
    const neg = x < 0

    x = Math.abs(x).toString().split("").reverse().join("")
    x = parseInt(x)

    if (neg) {
        x = - + x
    }

    if (x < -2147483647 || x > 2147483646){
        return 0
    } else {
        return x
    }
}

Of course the parseInt can be combined with the line above it but it's a little easier to read on a different line.

Until my next code challenge.

Singly Linked List in JS

Annette Michaels — Fri, 28 Jun 2019 16:16:54 +0000

Data Structures - Singly Linked Lists

A singly linked list consists of many nodes each node contains data and points at the next node. The last node in the list points to null which is how you know you reached the end. The front of the list is the head node.

The following is some Javascript code showing initialization of the LinkedList and Node classes.


class LinkedList {

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


///Other methods here



end



class Node {

  constructor(data, next) {
    this.data = data
    this.next = next
  }

}

Head Node ---> Node ---> Node ---> Node --->...more nodes... --> null

It is a very simple structure. It does not require that nodes are next to each other in memory and because of this is very easy to add and remove from the head of the list. It can be done in constant or O(1) time which is the best possible time complexity.

Javascript - add to head and remove from head

  addToHead(data) {
    let node
    if (!!data) {
      node = new Node(data, this.head)
      this.head = node
      this.size += 1
    } else {
      return null
    }
}

  removeFromHead() {
    if (this.size != 0) {
      this.head = this.head.next
      this.size -= 1
    }
}

A downside to this structure is that it is more expensive to search for something in the list or add/remove to the end (instead of th head). Every node has to be iterated through until we accidently run into the node that contains the data we are looking for or until we reach the end or until the next pointer points to null.

// finds the Node that contains the data. If it doesn't exist returns null
  find(data) {
    let current = this.head
      while (current != null) {
        if (current.data === data) {
          return current
        } else {
          current = current.next
        }
      }
    return null
}



  addToTail(data) {
    let node
    let size = this.size
    let current = this.head

    if (!!data) {

// when list is empty just add to head
      if (current === null) {
        this.addToHead(data)
      } else {

// otherwise find the end of the list and add a Node
        while (size > 0) {

// if size === 1 than it is the last node. Add new Node to end.
          if (size === 1) {
            node = new Node(data, null)
            current.next = node
            this.size += 1
          }
// size is > 1 than decrement size and check the next Node
          current = current.next
          size -= 1
        }
      }
    } else {
      return null
    }
}

Since we have to traverse the list each time this results in O(n) complexity which is not optimal.

Inserting and deleting from the middle of the list is equally as difficult since we have to create our new node and point it to the 'next' node before we mode the current node's next to the new node. Else we have no pointer and the list is lost.

  insertAtIndex(data, index) {
    let node
    let current
    let size = this.size

// check if !!data and if index is within bounds
    if (!!data && index >= size - 1 && index >= 0) {
      current = this.head

// base case if list is empty or if adding to head
      if (current == null && index === 0 || index === size-1) {
        this.addToHead(data)
        return true
      }
// base case when adding to tail
      if (index === 1) {
        this.addToTail(data)
        return true
      }

// find spot before index and insert to next Node
      while (size > index) {
        if (size - 1 === index) {
          node = new Node(data, current.next)
          current.next = node
          this.size += 1
          return true
        }
        current = current.next
        size -= 1
      }

    }
    return false
}

This is why the structures are often used for Stacks and Queues. It allows flexibility for the operating system because it doesn't need a block of memory like an array does which makes them optimal for Stacks and Queues in my opinion. With a Stack we are always manipulating the last thing added because it is a last in first out (LIFO) structure and a Queue is a first in first out (FIFO) data structure. We can talk about those a different day.

Here's a link to my JS linked-list code

Longest Palindromic Substring

Annette Michaels — Tue, 18 Jun 2019 01:39:10 +0000

Longest Palindromic Substring

How to find the longest palindromic substring in a string?

First we have to answer the question 'What is a palindrome?"

A palindrome is the same backwards and forwards.

For example, these are all palindromes

"mom"
"racecar"
"taco cat"

So when given a string (s) how do we determine if it is a palindrome? First off we need to determine if we will be considering just single words or if we will be considering cases that include spaces. For this situation we will be using single words to make it simpler.

Some of the more common solutions include the 'brute force' method or check every substring to see if it is a palindrome. We could also do the expand from the center method which is more efficient than brute force. The best method is to use Manacher's Algorithm which is linear time and I recommend looking it up.

For this blog I am going to explain solving the problem using a matrix.

There are 3 variables to keep track of.

Index at where the palindrome starts (start)
Length of the palindrome (max)
Index offset (k)

def longest_palindrome(s)
   start = 0
   max = 0
   k = 2


end

We will iterate through the string and when we run into matching letters (matrix[i][j]) where matrix[i+1][j-1] == true we can add another true to the table. To do this we need to initialize the matrix and set all matrix[i][i] = true because each character is a palindrome of size 1.

    for n in 0..s.length - 1
      matrix[n][n] = true
    end

	a	b	b	b	a	b	c
a	T
b		T
b			T
b				T
a					T
b						T
c							T

We also need to go through and set matrix[i][i+1] to true if the characters match else the odd indicies can never be 'true' as you will see when we get to that part of the code.

    for m in 0..s.length - 1
      if (s[m] == s[m+1])
          matrix[m][m+1] = true
          start = m
          max = 1
      end
    end

	a	b	b	b	a	b	c
a	T
b		T	T
b			T	T
b				T
a					T
b						T
c							T

Now if we go through the rest of the comparisons checking if the chars are the same and the matrix value is true to the bottom left ([i+1][j-1]) we will end up filling the matrix as such.

	a	b	b	b	a	b	c
a	T				T
b		T	T	T
b			T	T
b				T		T
a					T
b						T
c							T

    while (k < s.length)
        while (i < s.length - k)
            j = i + k
            if (s[j] == s[i] && !!matrix[i+1][j-1])
                matrix[i][j] = true

                if (k > max)
                    max = k
                    start = i
                end

            end
            i += 1
        end
        k += 1
        i = 0
    end

We start with k = 2 since we already filled in the first two diagonals and then each time we increment k we set i = 0 and in the inner loop j = i + k (offset). At the end we can return the substring using the variables we saved. If we put it all together we have...

def longest_palindrome(s)
    start = 0
    max = 0

    if (s.length < 3)
        return "" if (s.length < 1)
        return s[0] if (s.length == 1)
        return s[0] == s[1] ? s : s[0]
    end

    matrix = Array.new(s.length) {Array.new(s.length)}

    for n in 0..s.length - 1
      matrix[n][n] = true
    end

    for m in 0..s.length - 1
      if (s[m] == s[m+1])
          matrix[m][m+1] = true
          start = m
          max = 1
      end
    end

    i = 0
    k = 2
    while (k < s.length)
        while (i < s.length - k)
            j = i + k
            if (s[j] == s[i] && !!matrix[i+1][j-1])
                matrix[i][j] = true

                if (k > max)
                    max = k
                    start = i
                end

            end
            i += 1
        end
        k += 1
        i = 0
    end

    return s[(start)..(start + max)]
end

And as always don't forget to add your base cases!

    if (s.length < 3)

        # empty string as input
        return "" if (s.length < 1)

        # string of length 1 should return the char
        return s[0] if (s.length == 1)

        # If there are two letters that are the same return the string else just the first char
        return s[0] == s[1] ? s : s[0]
    end

Please don't hesitate to give me feedback on my code! It's the only way we get better and I'm sure I have a long way to go =)

Career changes are hard

Annette Michaels — Tue, 11 Jun 2019 18:11:52 +0000

Changing careers is hard,

especially when working full-time in an unrelated field.

I thought completing my coursework was a challenge in time-management. I was wrong. Job searching for that first job is the real challenge in time-management.

Not only do I need to keep my coding skills up by working on personal projects and doing code problems, I also have to filter through the egregious amount of job postings, write cover letters, and network.

To add to this I have decided to learn Java. My classes were in Ruby and Javascript so learning a strongly-typed language and having built in classes for Trees and whatnot would be nice. More importantly many roles require either an iteration of C, Java, or Python so a basis in one (however small) would be great.

Here is the list

job search
network
practice code challenges
- on the computer
- on the whiteboard (aka the sliding glass door in my house)
continue working on personal projects
learn Java

I need to dedicate aliquots of time so many days a week to make sure that when I am productive that I am focused on what I need to focus on instead of trying to figure out what I should do each day.

Here is the plan:

When it is slow at work - work on blog posts on coding problems and CS topics

2 days a week (Probably Tuesday/Friday) - Job stuff
2 days a week - do a coding challenges in each language
1 day a week - practice whiteboarding
1 day a week - do nothing/sleep/excessive netflix yeay

Wen I need a break, I do what I really want to do, learn Java and work on my personal projects.

Lets see how this goes.