DEV Community: Justin Bermudez

Nullish Coalescing Operator ??

Justin Bermudez — Sun, 27 Dec 2020 06:30:44 +0000

Have you ever seen the double question mark operator in javascript??

It can be used like this

const firstName = null;
const lastName = null;
const nickname = null;

console.log(firstName ?? lastName ?? nickname ?? "anonymous")
// => "anonymous"

The console did not log null from the first 3 variables, but the last one. This is because the Nullish Coalescing Operator will output the first defined value. The 3 variables we defined are set null so they are all faulty and have no value.

This looks like it is similar to another operator we have that looks like this "||". The OR operator almost does the same thing but the first TRUTHY value. As opposed to the Nullish Coalescing Operator returns the first DEFINED value.

Review our list of Falsy Values:

false
0
-0
0n
""
null
undefined
NaN

When looking at a ?? b if a is defined with a value, then we will get "a", otherwise we will return b.

const a = 0;
const b = 1;
console.log(a ?? b)
// => 0

The value of a is returned here since we defined a with the value 0. If this was using the OR operator

const a = 0;
const b = 1;
console.log(a || b)
// => 1

a is defined with a faulsy value so we will get retrned the value of b.

Difference Between var and let in Javascript

Justin Bermudez — Sat, 19 Dec 2020 11:02:48 +0000

Before es6, we would only have 'var' to declare variables. But now we are given `var', 'let', and 'const', but we will only talk about differences between 'var' and 'let' in this.

There are issues with 'var' that may have led to the development of 'let'. They both are variable assignments but 'let' is more strict.

Using 'var' allows you to declare, redeclare, and update all within the same scope.

javascript var num = 0 var num = 1 num = 2 console.log(num) // prints out 2

'var' will not throw an error for reassignment. We may overwrite an important variable.
If we used 'let'

javascript let num = 0 let num = 1
this will throw a redeclaration error. The case of updating using 'let' will not throw an error though.
javascript let num = 0 num = 1

Another difference is how they work with scope.

javascript var tool = "hammer" var num = 0 if (tool == "hammer"){ var num = 3 } console.log(num) // num will output 3
In this example, the variable is reassigned and the output is taken from inside the function which may not be what we want.

In 'let' we will keep within our scope.

javascript let tool = "hammer" let num = 0 if (tool == "hammer"){ let num = 3 } console.log(num) // num will output 0

How to Start Using Styled Components in Your Projects

Justin Bermudez — Sun, 13 Dec 2020 03:58:39 +0000

First have to add the library to your project with

npm install styled-components

Then you can have a separate file for all your stylings. Keep in mind the files will not be css files they will be js files.

To start using styled components, we must import it from "styled-components"

import styled from 'styled-components';

Then you can start styling.

When you style, you can style individual elements

import const StyledDiv = styled.div`
    display: flex;
    flex-direction: column;
`;

Now when we import them into our main app, we use them like a component.

<StyledDiv>
    <AnotherComponent />
</StyledDiv>

Splitting a Number into Individual Digits Python

Justin Bermudez — Sun, 06 Dec 2020 03:30:01 +0000

If you are looking only for the code then here it is

number = 12345
numList = [int(digit) for digit in str(number)]

numList in this example would return
[1, 2, 3, 4, 5]

The best way to look at all the individual numbers in a number is to use list comprehension by first turning the number into a string. This way you will be able to iterate over the string as each individual character. Then finally turn the individual characters into a number. This can all be done in side of a list.

To breakdown the above code, to make it look nicer:

for digit in str(number):
    int(digit)

This block of code returns a number, so if you put it around square brackets, then it will become a list.
Then you would be able to iterate over the list and do as you please.

Finding a Loop in a Singly Linked List in Python

Justin Bermudez — Sat, 28 Nov 2020 09:10:31 +0000

Given the head of a Singly Linked List that contains a loop, which is the list's tail points to some node in the list instead of none.

Given a standard class of Linked List

class LinkedList:
    def __init__(self, value):
        self.value = value
        self.next = None

When we look through the Linked List we should return where the loop returns us too. So after our tail node, we return what comes after that.

We look at 2 nodes at a time moving at different speeds. If the nodes ever equal each other, then that is where our loop is.

def findLoop(head):
    first = head.next
    second = head.next.next
    while first != second:
        first = first.second
        second = second.next.next
    while first != second:
        first = first.next
        second = second.next
    return first

Move Zeroes LeetCode Python Solution

Justin Bermudez — Sat, 21 Nov 2020 13:55:21 +0000

Prompt states:
Given an array nums, write a function to move all 0's to the end of it while maintaining the relative order of the non-zero elements.

Example:
Input: [0, 1, 0, 3, 2]
Output: [1, 3, 2, 0, 0]

We need to look through the given array and keep track of the current number and another number which we will call position.

Starting at position 0, if our number we are iterating is equal to 0, then we want to move on to continue looping until we hit a nonzero.

Then we would swap the two numbers, the position we are keeping track of and the current number. We would repeat this process until the very end of the array.

def moveZeroes(nums):
    pos = 0
    for i in range(len(nums)):
        num = num[i]
        if num != 0:
            nums[pos], nums[i] = nums[pos], nums[i]
            pos += 1

Leetcode Permutations Problem: Python Solution

Justin Bermudez — Sun, 15 Nov 2020 04:18:40 +0000

Given a collection of distinct integer, return all possible permutations.

Example:
Input: [1, 2, 3]
Output:
[
[1,2,3],
[1,3,2],
[2,1,3],
[2,3,1],
[3,1,2],
[3,2,1]
]

Leetcode problem can be found here

We need to understand what a permutation is; a way in which a set of things can be ordered. So our given input of numbers, we must find every possible combination starting with first number, then second number, then so on.

The way I approached this problem was by finding out how I wanted to initially loop through the whole input array.

We want to keep track of our result we want to output at all times and we want to constantly append this with

for i in range(len(array)):
    newArray = array[:i] + array[i+1:]
    newCurrentArray = currentArray + [array[i]]

this is our main algorithm that will constantly look for the different permutations. We now have to call this recursively
to get every permutation

def getPermutations(array):
    result = []
    helper(array, [], result)
    return result
def helper(array, current, permutations):
    if not len(array) and len(current):
        oermutations.append(current)
    else:
        for i in range(len(array)):
            newArr = array[:i] + array[i+1:]
            newCurr = current + [array[i]]
            helper(newArr, newCurr, permutations)

Learning Slice Notation with Python

Justin Bermudez — Sun, 08 Nov 2020 01:23:06 +0000

Slicing is a shortcut when you have a given array or list, and you want only a part of that. Going through a for loop or what not can take more work and slicing will take less lines.

Let's say we want 2-5 only

example:

array = [1, 2, 3, 4, 5, 6]

array[1:5]
=>
[2, 3, 4, 5]

The slicing parameters look like so
[(start here but does not include):(number we end on does include):(optional:how many steps to take)]

The above example does not use the third parameter. If left blank, then the third parameter will default to 1.

We can use it like so

example:

array = [1, 2, 3, 4, 5, 6]

array[2:6:2]
=>
[3, 5]

We ignore the 2 and start at 3, then we take 2 steps to include the 5, then we end there because 6 is not 2 steps from 5.

What if we ignored the first parameter?

array = [1, 2, 3, 4, 5, 6]

array[:3]
=>
[1, 2, 3]

We would skip the first parameter of where to start so we start from the beginning and the second parameter tells us where to end, so we include everything up to where we stopped at which was 3 here.

Same idea with omitting the first 2 parameters.
If we skip the first 2 then we would just take those steps from beginning of our input to the end.

array = [1, 2, 3, 4, 5, 6]

array[::2]
=>
[2, 4, 6]

Valid Parentheses Python Solution

Justin Bermudez — Sat, 31 Oct 2020 12:08:46 +0000

The problem statement is as follows:
Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.

An input string is valid if:

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

If you want to checkout the original problem go here

So first thing you would want to know is what the different parts of a parentheses is

opening = "{[("
closing = "}])"

we are also going to need to know the corresponding opening and closing brackets so we can put use a dictionary.

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

So now we can go through the actual input string and check. If the character is an opening bracket, then we can push it onto a stack.
If it is a closing, we must check if our stack is empty or not. If it is empty, then we can return False.
Otherwise, we check the most recent item we pushed onto the stack and compare it with our current item. If they are matching open and close brackets then we can pop.

for char in s:
    if char in opening:
        stack.append(char)
    elif char in closing:
        if len(stack) == 0:
            return False
        if stack[-1] == brackets[char]:
            stack.pop()
        else:
            return False
return len(stack) == 0

full solution

def isValid(s):
    opening = "{[("
    closing = "}])"
    brackets = {')': '(', '}': '{', ']': '['}
    stack = []

    for char in s:
        if char in opening:
            stack.append(char)
        elif char in closing:
            if len(stack) == 0:
                return False
            if stack[-1] == brackets[char]:
                stack.pop()
            else:
                return False
    return len(stack) == 0

Enabling CORS for Node Express Backend

Justin Bermudez — Sun, 25 Oct 2020 01:18:40 +0000

Let us say you have a React frontend and trying to POST a form to your Node backend. After you hit that submit button, you will be hit with an error in the console.

You basically do not have access to that backend, so we will use CORS to enable it.

First thing is always to install the package
npm install cors

Then we would have to require 'cors' and allow our server to use it.

const express = require('express')
const cors = require('cors')
const app = express()

app.use('cors')

Leaving it like this would allow anything to access your server. This is obviously not good since we do not want anything but our frontend to find access to our backend.

A way to access a single endpoint would be

const express = require('express')
const cors = require('cors')
const app = express()

app.get('/products/:id', cors(), function(req, res, next)) {
    res.json({msg: 'CORS enabled for this endpoint'})
}

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

If you wish to whitelist a website

const express = require('express')
const cors = require('cors')
const app = express()

const whitelist = {
    origin: 'localhost:3000'
}

app.get('/products/:id', cors(corsOptions), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for only localhost:3000'})
})

Link
to cors documentation

POST React Form to Server

Justin Bermudez — Sun, 18 Oct 2020 04:51:58 +0000

Using React to send FORM data to any given server.

I will show an example with 1 input in the form.

Need the name of our input in state

state = {
    name: ''
}

We now need event handlers to set our state and the actual post request.

In the handleSubmit, we want to fetch the endpoint that we set our server to be at. For example localhost:3000.

handleChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
}

headers = {
    'Content-Type': 'application/json',
    Accept: 'application/json'
}

handleSubmit = (e) => {
    e.preventDefault()

    fetch('your server endpoint here', {
        method: 'POST,
        headers: headers,
        body: JSON.stringify({
            name: name
        })
    )}
    .then(response => response.stringify())
    .then(data => console.log("successfully sent: ", data)
}

How the form looks

<form onSubmit={this.handleSubmit}>
    <label>Name:</label>
    <input 
        type="text" 
        value={this.state.value} 
        name="name" 
        onChange={this.handleOnChange} 
    />
    <input type="submit" value="submit" />
</form>

Depth-First Search (DFS) with Python

Justin Bermudez — Sun, 11 Oct 2020 05:22:25 +0000

Given a Node class that has a name and array of optional children nodes. When put together, these nodes form a tree-like structure.


class Node:
    def __init__(self, name):
        self.children = []
        self.name = name
    def addChild(self, name):
        self.children.append(Node(name))
        return self
    def depthFirstSearch(self, array):
        array.append(self.name)
        for child in self.children:
            child.depthFirstSearch(array)
        return array