DEV Community: Liam Escribano

Valid Parentheses Problem

Liam Escribano — Sat, 15 Aug 2020 22:13:13 +0000

How to solve the Valid Parentheses Problem in JavaScript

What is the Parentheses Problem?

Your function is passed a string of brackets. If each open bracket in the string has a corresponding closing bracket and they're in the correct order, then this is considered a balanced string of brackets.

Open brackets must be closed by the same type of brackets.
Open brackets must be closed in the correct order.

"[]"        // Valid
"}{"        // Invalid
"{({[]})}"  // Valid
"{({[]}))"  // Invalid

Our Approach

We're going to be using a Stack to solve this problem. JavaScript doesn't have Stacks by default but a simple Array gives us enough of the original Stack functionality to make this work. This array will follow a LIFO (Last In First Out) behavior.

Pseudo-code

Let's try to solve this example using plain old English

'[{()}]'

Iterate over the entire string once
For every open bracket we push it to the stack
For every closed bracket we get the last open from the stack
If both the closing and opening brackets match we pop
If they don't, we end the loop and return false

Time to Code

const stack = []
const brackets = {'(':')', '[':']','{':'}'}

We created our first data structures. An array to act as our stack and an Object to map our brackets.

for (let i = 0; i < str.length; i++) {
        const currentBracket = str[i];

        if (brackets[currentBracket]) {
            stack.push(currentBracket)
...

Here we create a basic for-loop to iterate over our entire string. For every bracket we find we push it to the top of the stack only if is an open bracket.

const lastOpenBracket = stack[stack.length - 1];
if (brackets[lastOpenBracket] != currentBracket) {
    return false;
}
stack.pop();
...

If the current bracket is not open then it must be a closed bracket. We grab the last open bracket from our stack and compare them. If the pair doesn't match, we return false. If they do, we pop the stack and continue.

Here's the entire code;

function isValid(str) {
    const stack = []
    const brackets = {'(':')', '[':']','{':'}'}

    for (let i = 0; i < str.length; i++) {
        const currentBracket = str[i];

        if (brackets[currentBracket]) {
            stack.push(currentBracket)

        } else {
            const lastOpenBracket = stack[stack.length - 1];
            if (brackets[lastOpenBracket] != currentBracket) {
                return false;
            }
            stack.pop();
        }
    }
    return stack.length === 0;
}

Congratulations !

We just solved the Valid Parentheses Problem. This question was a very common interview question back in the old days but its still relevant today and we can learn a lot from it. Hope you enjoyed this read, happy coding !

JS Animation

Liam Escribano — Sat, 25 Jul 2020 19:39:48 +0000

Hello and good morning! Today I will be showing you how to turn a sprite sheet into an animation sequence using JavaScript. Here is the sprite sheet we will be working with and the final result.

Prerequisites

An understanding of the HTML canvas and context
Basic knowledge of JavaScript classes
A bit of async and await

Things to note about this sprite sheet

Has a total of 8 frames
Each frame is exactly 113x79 pixels

Our First Class

class Sprite {
  constructor(src, width, height, frames) {
    this.image = new Image;
    this.image.src = src;
    this.width = width;
    this.height = height;
    this.frames = frames;
  }
}

This class is in charge of maintaining the properties of a sprite sheet. The width and height properties belong to the expected width/height for all of the frames in the sheet (113x79).

The Animation Handler

class AnimationHandler {
  constructor(sprites) {
    this.sprites = sprites;
    this.currentSprite = sprites[0];
    this.loop = true;
    this.currentSprite.image.onload = this.render();
  }
...

The AnimationHandler class takes in an array of Sprite Objects and calls the render function in a looping state after the sprite loads.

The Brains

...
async render() {
    for (let i = 0; i < this.currentSprite.frames; i++) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(this.currentSprite.image, (this.currentSprite.width * i), 0, this.currentSprite.width, 
      this.currentSprite.height, 50, 50, this.currentSprite.width, this.currentSprite.height);

      await sleep(80)
    }
    if (this.loop) {this.render();}
  }

We first define an asynchronous function named render using the async keyword. This allows us to run multiple animations at once without creating blockage.

We then create a basic for loop to loop over the number of frames. For every frame we do these things in order.

Clear everything on the canvas
Draw the sprite image and crop it to show the current frame
Pause the loop for 80 milliseconds before continuing
Use recursion to keep the animation running

Check this link out to learn about how context.drawImage works MDN

You may be asking yourself, "Where the hell is the sleep function defined?!" I decided to keep it out of this tutorial to avoid confusion. The sleep function just returns a Promise after setTimeout.

Putting It All Together

const dogIdle = new Sprite(dog_idle, 109, 79, 4);
const dogMoving = new Sprite(dog_moving, 113, 79, 8);
new AnimationHandler([dogMoving, dogIdle])

We create two Sprite instances and pass in the required parameters. Then we create an AnimationHandler instance for the sprites. This should automatically play the first sprite sheet you pass i although the class can be easily modified to jump between animations and even pause them.

Here is the idle we defined above and an attacking animation.

Thank you for reading ! I left a few things out for the sake of keeping this simple. Like defining the canvas and context and the sleep function.

Promises Quick Guide

Liam Escribano — Thu, 09 Jul 2020 22:05:14 +0000

MDN Definition: The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

To simplify MDN's definition, promises in Javascript are Objects that return two callback functions. These callback functions are called resolve and reject. Promises also have states, pending, fulfilled, rejected.

The Anatomy of A Promise

const sayHi = new Promise((resolve, reject) => {
  resolve("Hello there!")
})

sayHi.then((value) => {
  console.log(value)
})

If you're new to Javascript this may look like gibberish to you but the fact is, it is gibberish. If I could describe Javascript in two words I would describe it as beautiful gibberish.

We create the promise using new Promise and pass in the two callback functions resolve and reject, these can be named anything you want. We then end the promise by calling it's resolve callback function and passing it a value. At this point the promise is in a settled state.

To be able to use the value that the promise returns, we need to use the then method on the promise instance. Which in turns returns another promise but we won't get deep into that. We should now have access to that promise's return value.

Promise Error Handling

The problem with our current promise is that it will always return with a fulfilled state because we currently aren't handling for any errors. Lets fix that.

const add = (num1, num2) => {
  return new Promise((resolve, reject) => {
    if (typeof num1 !== 'number' || typeof num2 !== 'number') {
      reject("Both values must be a number!")
    } else {
      resolve(num1 + num2)
    }
  })
}

add(2, "Not a number").then((total) => {
  console.log(total)
}).catch(error => {
  console.log(error)
})

This returns "Both values must be a number!". For simplicity's sake ignore the add function and focus on the core body of the promise. Within the promise scope we created an if statement to check for possible invalid datatypes. Notice we call the reject function after finding a string, this immediately ends the promise and sets it to a rejected state.

Having the promise end in a rejected state allows the catch method on the promise instance to be used. The then method gets completely ignored and only the error is returned through catch.

Promises are Asynchronous

As the header states, promises are asynchronous. Which means they will continue to run in the background while your program traverses. Here's a quick bit of code that explains it better.

const loadHugeCatImage = new Promise((resolve, reject) => {
  setTimeout(()=>{}, 10000)
  resolve("Cat Image Loaded!")
})

loadHugeCatImage.then((message) => {
  console.log(message)
})

console.log("I should be second!")

Logic tells us that "Cat Image Loaded!" will be outputted to the console before "I should be second!", due to the order of execution. In reality, even though we called the promise, the program will continue to run and execute console.log("I should be second!") before console.log("Cat Image Loaded!"). This is because of the promise's asynchronous behavior. Is incredibly useful for loading huge amounts of data in a website without slowing down the user.

This was a very simple way of explaining what promises are. If you want to know more feel free to visit MDN Promises. Thank you for reading!

Ruby Readability

Liam Escribano — Thu, 25 Jun 2020 02:17:06 +0000

Have you ever looked at someone else’s code and thought, “What on earth is this?”. We’ll you’re not the only one, you can have amazing projects but if your code is written poorly, it won’t matter. Take a look at this piece of code for example.

def happy_birthday name,age
  puts "Congrats "+name+" "+"You turned "+age.to_s+" "+"years old today!"
if age>100
  puts "You're full of experience!"
else
  puts "You still have a lot to learn!"
end
end
happy_birthday("Tom", 20)

We will be taking this piece of code and transforming it into something beautiful. Let’s begin with..

Indentation

Sure the code works, even if the two end keywords are right on top of each other. There’s currently a whole war among developers about the proper way of indenting your code. The Spacers believe you should indent with 2 or 4 spaces. The Tabbers believe you need to indent using tabs. Both agree on the importance of proper spacing for readability. Let me show you…

def happy_birthday name, age
  puts "Congrats " + name + " " + "You turned " + age.to_s + " " + "years old today!"
  if age > 100
    puts "You're full of experience!"
  else
    puts "You still have a lot to learn!"
  end
end

Now compare the if statement block with the code above. Through indentation we can clearly show that the if statement is a block of its own with its own scope. Not only that, the variables are also easier to read now.

String Interpolation & Ternary Expressions

def happy_birthday name, age
  puts "Congrats #{name}, you turned #{age} years old today!"
  puts (age > 100 ? "You're full of experience!" : "You still have a lot to learn!")
end
happy_birthday("Tom", 20)

Here, we’ve replaced + and the .to_s method with string interpolation: #{}. We then used a ternary expression to shorten our if statement: You can read more about them here.

You need to be careful when using ternary expressions. Sometimes they can make your code harder to read, use them wisely.

Keyword Arguments

For our final clean up trick we will add keyword arguments to this code. How does it look? I’ll show you:

def happy_birthday(name:, age:)
  puts "Congrats #{name}, you turned #{age} years old today!"
  puts (age > 100 ? "You're full of experience!" : "You still have a lot to learn!")
end
happy_birthday({:name => "Tom", :age => 50})

And here’s our initial code for comparison:

def happy_birthday name,age
  puts "Congrats "+name+" "+"You turned "+age.to_s+" "+"years old today!"
if age>100
  puts "You're full of experience!"
else
  puts "You still have a lot to learn!"
end
end
happy_birthday("Tom", 20)

Notice how our new piece of code looks much cleaner and shorter.

When using keyword arguments the order of the parameters doesn’t matter.

Code readability is important across all languages not just Ruby. So next time you write a piece of code, think to yourself, “is this sexy enough?”.

Thank you for reading!