Forem: Melissa Guachun

Destructuring in JavaScript

Melissa Guachun — Wed, 08 Jun 2022 16:16:54 +0000

This is probably going to be a shorter article on a very important and useful concept. In this article, I'll be going over some basic uses of the destructuring assignment in JavaScript!

The destructuring assignment is a special syntax that allows us to extract properties from an object or array. From there, we are able to bind them to variables.

Destructuring is super useful to know once you understand the basics of it's usage. This concept allows you to take data from arrays, objects, and maps and attach them into new and unique variables. We can even extract multiple properties or elements from an array at a time.

Let's look at an example to understand how this concept works:

Instead of writing this:

const inviteList = ["John", "Anna", "Paulina", "Chris"];

const guestOfHonor = inviteList[0];
const guestOne = inviteList[1];
const guestTwo = inviteList[2];
const guestThree = inviteList[3];

We can use destructuring to unpack our values from arrays or objects attach them to variables.


const inviteList = ["John", "Anna", "Paulina", "Chris"];

const [honoredGuest, firstGuest, secondGuest, thirdGuest] = inviteList;

By destructuring, we are able to assign to the honoredGuest (John), firstGuest (Anna), secondGuest (Paulina), and thirdGuest(Chris).

Let's look at an example when working with objects!

const cat = {
name: 'Cleo',
age: 3,
breed: 'Calico'
}

const { name, age, breed } = cat

console.log(name) //Cleo
console.log(age) // 3
console.log(breed) // Calico

Above, we assign separate variables to the name, age, and breed of a cat.

Now let's see how we can change the names of the variables.

const cat = {
name: 'Cleo',
age: 3,
breed: 'Calico'
}

const { name: catName, age: catAge, breed: catBreed } = cat

console.log(catName) //Cleo
console.log(catAge) // 3
console.log(catBreed) // Calico

Let's look a nested example of a destructuring assignment for an array:


const nestedArr = [1, [2,4], [5,7,9]]

const [first, [second, third], fourth] = nestedArr

console.log(first) //1
console.log(second) //2
console.log(third) //4
console.log(fourth) // [5,7,9]

Finally, let's look at destructuring assignment with objects:


let employee = {
id: 1001,
name: {
   firstName: 'John',
   lastName: 'Doe'
   }
};

const {
   name: {
    firstName,
    lastName
    },
 name
} = employee;

console.log(firstName); // John
console.log(lastName); // Doe
console.log(name); //{firstName: 'John', lastName:'Doe'}

This is just the tip of the iceberg as to what destructuring can do!

Sorting Arrays in JavaScript

Melissa Guachun — Wed, 01 Jun 2022 21:00:30 +0000

Sorting is one of the many essential method that you will use when learning JavaScript. Let's go over how we use the sorting method with different data types.

Strings
The sort method by default organizes its elements alphabetically.

const names = ['Sophie', 'Fletcher', 'Emmy', 'Izzy', 'Cooper']

const sortNames = names.sort()

console.log(sortNames)

//['Cooper', 'Emmy', 'Fletcher', 'Izzy', 'Sophie']

We can also sort this array in reverse order just as easily!

const reversedNames = sortNames.reverse()

console.log(reversedNames)

// ['Sophie', 'Izzy', 'Fletcher', 'Emmy', 'Cooper']

Numbers
When sorting numbers, we use a callback function to handle the comparison of values.

const nums = [10, 855, 31, 2, 930, 430, 529, 59]

const sortedNums = numbers.sort((a, b) => a - b)

console.log(sortedNums)

//[2, 10, 31, 59, 430, 529, 855, 930]

Strings with Numbers
This example pertains when a string has an injected number that is less than 10. (There will be a more extensive version of this example in a later example!). In this example, we will use slice() and turn the string with an injected number into a number. This way, we are able to sort all of the array elements where every element is the same data type.

const library = ['Book 1', 'Book 6', 'Book 2', 'Book 4', 'Book 3', 'Book 5']

const sortedLibrary = library.sort((a, b) => {
return +a.slice(-1) - +b.slice(-1)
})

console.log(sortedLibrary)
// ['Book 1', 'Book 2', 'Book 3', 'Book 4', 'Book 5', 'Book 6']

Strings with Long Numbers
For numbers larger than 9, here is a way to use regular expressions to find and sort the elements based on their values.

In this example we will be using regular expressions.

Regular expressions aka Regex is sequence of characters that forms a search pattern. The search pattern can be used for text search and text replace operations.

(Regex can be really intimidating when first faced with it. I personally still find it confusing. Appearances aside, it's a highly usable and powerful type of code that can be useful in many situations.)

Let's first break down what our regular expression will look like:


const coolRegex = /\d+/

The first and last / in coolRegex stands for the expression's boundaries.
\d stands for digit
+ means, '1 or more times'

So, in it's entirety, our regular expression is enabling us to find elements that are bigger than 9 and sort the elements of the array.

Let's move onto our full example:


const coolRegex = /\d+/;

const longLibrary = [
    'Book 339',
    'Book 868',
    'Book 23',
    'Book 90',
    'Book 5', 
    'Book 41',
    'Book 375'

]

const sortedLibrary = longLibrary.sort((a, b) => {
   return a.match(coolRegex) - b.match(coolRegex)
})

console.log(sortedLibrary)

//['Book 5', 'Book 23', 'Book 41', 'Book 90', 'Book 339', 'Book 375', 'Book 868']

To further understand the syntax of what makes a regular expression, I will provide resources at the end of this post!

Objects
For objects, we are going to sort this array by the object's id values

const users = [
 {id: 4, name: 'Jared' },
 {id: 8, name: 'Nicolette'},
 {id: 2, name: 'Michael'},
 {id: 5, name: 'Sade'},
 {id: 9, name: 'Megan'},
 {id: 1, name: 'Giovanni'},
]

const sorted = users.sort((a, b) => {
 return a.id - b.id 
})


console.log(sorted)

/*
 {id: 1, name: 'Giovanni'}
 {id: 2, name: 'Michael'}
 {id: 4, name: 'Jared'}
 {id: 5, name: 'Sade'}
 {id: 8, name: 'Nicolette'}
 {id: 9, name: 'Megan'}
*/

Personal Note:
Regex is really cool but so far in my career I haven't personally used it. For the most part, I've seen people use regex to streamline algorithms and data type problems. If you use regex in your everyday tasks, let me know! I'd love to know how and resources you used to learn.

But for my beginners reading this, please don't fret. Try to absorb what you can but don't feel pressure to learn everything about regex! Just try to understand the breakdown of the regex used in the example.

Regex Resources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes

https://www.computerhope.com/unix/regex-quickref.htm

JavaScript Array Methods

Melissa Guachun — Wed, 25 May 2022 18:10:06 +0000

When studying array methods, it can be hard to differentiate methods from each other. So in this article, I wanted to cover some common array methods and outline specific characteristics to overall display their unique behaviors.

map()
Loops through each element in an array, enabling a function to execute. It returns a new array without modifying the array it is iterating through.

const movies = ['pulp fiction','star wars','harry potter','lord of the rings']

const capitalizedMovies = movies.map(movie => {
   return movie[0].toUpperCase() + movie.slice(1)
})

console.log(capitalizedMovies)

This returns:

'Pulp fiction', 'Star wars', 'Harry potter', 'Lord of the rings'

Above, we capitalized the first letter of each movie title in the array stored in capitalizedMovies. capitalizedMovies is a new array, that has capitalized titles. This means that the our original array movies remains the same and un-mutated.

forEach()
This is similar to map() except- forEach() doesn't return a new array, so the return value will be undefined.

const numbers = [10, 20, 30, 40]
let total = 0

numbers.forEach(num=> {
   console.log(num)
   total += num
})

console.log(`Total: ${total}`)

This returns:

10
20
30
40
Total: 100

filter()
This loops through every element in an array. It creates a new array of elements once the iterator returns true.

const colors = ['blue', 'yellow', 'red', 'green', 'purple', 'pink', 'brown', 'orange', 'aqua', 'peach']

const longColorNames = colors.filter(color=> color.length >= 6)
console.log(longColorNames)

This returns:

['yellow', 'green', 'purple', 'brown', 'orange', 'peach']

Above, blue, red, pink, and aqua don't have a length of 6 or greater, so they return false. This is why they aren't shown in longColorNames.

findIndex()
This works on an array where if an element in the array fits the criteria, it returns the index of the element.


const dogs = [
     { name: 'Fletcher', breed: 'pitbull'},
     { name: 'Emmie', breed: 'hound'},
     { name: 'Sophie', breed: 'german shepherd'},
     { name: 'Daisy', breed: 'cocker spaniel'},
     { name: 'Cooper', breed: 'bulldog'},
     { name: 'Mary', breed: 'german shepherd'},
     { name: 'Mike', breed: 'brussels griffon'},
]

const findGS = dogs.findIndex(d => d.breed.startsWith('german'))

console.log(findGS)

This returns:

Above, Sophie (index of 2) and Mary (index of 5) meet the parameters of dog breeds that start with 'german'. But notice, findIndex only returns the first found result which has an index of 2.

find()
This works on an array and returns only the first element found that meets the criteria. If none of the elements fit the criteria, it gets returned as undefined.

const dogs = [
     { name: 'Fletcher', breed: 'pitbull'},
     { name: 'Emmie', breed: 'hound'},
     { name: 'Sophie', breed: 'german shepherd'},
     { name: 'Daisy', breed: 'cocker spaniel'},
     { name: 'Cooper', breed: 'bulldog'},
     { name: 'Mary', breed: 'german shepherd'},
     { name: 'Mike', breed: 'brussels griffon'},
]

const findGS = dogs.find(d => d.breed.startsWith('german'))

console.log(findGS)

This returns:

 { name: 'Sophie', breed: 'german shepherd'}

Above, you can see a whole object is being returned instead of the index being returned from indexOf().

Rest vs Spread Operator

Melissa Guachun — Tue, 17 May 2022 19:12:25 +0000

I remember being asked about the difference between the rest and spread operator and drawing a blank. I hadn't used the spread operator since I was in my bootcamp, and even on that occasion it seemed a bit glossed over.

So I wanted to address this knowledge gap by walking through the use and differences between the rest and spread operator.

It's easy to confuse the spread operator and the rest operator because their syntax is so similar.

Spread Operator: we can spread the content of an iterable into individual elements.

Note: An iterable is an object which can be looped over or iterated over with the help of a for loop. Objects like lists, tuples, sets, dictionaries, strings, etc. are called iterables

Let's look at the Spread Example:


const arr = ["My", "name", "is", "Melissa"]

const copyArr = [...arr]

console.log(copyArr)

console.log(...copyArr)

Let's see what the console returns when we console.log(copyArr)

We return ["My", "name", "is", "Melissa"]

The spread operator allows us unpack collected elements into their own single elements.

Rest: allows a function to accept an indefinite number of arguments as an array

Let's look at an example:

function logFullName(firstName, ...familyName) {
  console.log(firstName);
  console.log(familyName);
}

logFullName("Robert", "Alfred", "Cole");

**Update: thank you Bryce Dorn for correcting my code!

The elements of myName is being broken apart and reorganized into a new subarray. This is called destructuring, an array or object is broken into smaller pieces.

Let's look at our console:

The first console.log of console.log(firstName) returns the first element in the array, 'Robert'. The rest of the elements in the array are collected and put into a new sub array called familyName. This is why when we console.log(familyName) we get the new sub array consisting of the rest of the original array ["Alfred", "Cole"].

Think of rest as a mnemonic device that means it creates its own collection of the rest of the array. In this example, that would be the new sub array ["Alfred", "Cole"].

**Update: Thanks to hacker4world for giving an example on the use and syntax with functions:

function logParams(...params) {
     console.log(...params);
}

logParams(1,  2,  3, 4);

To further understand the logic at play, create your own examples and test them in your console of your choosing. Practicing this achieves a better understanding of rest and spread!

Asynchronous vs Synchronous Callbacks in JS

Melissa Guachun — Tue, 10 May 2022 18:37:53 +0000

Callbacks are a concept I struggled implementing when I was first introduced to them in bootcamp. I understood their purpose but it's inevitable that not everything you learn will immediately stick the first time around. Hopefully this dive into callbacks will help you understand their function and purpose!

What are callbacks in JavaScript?

The first thing you wanna know is that a callback is a function. In JavaScript, functions are first-class objects, meaning they can be:

-stored in a variable, object, or array

-passed as an argument to a function. returned from a function

-returned from a function

A callback is a function that is passed inside another function as an argument. It is invoked inside the outer function or "higher order function" that "calls back" the callback function to complete the task.

What is a higher order function?

A higher order function is a function that takes another function as an input, returns a function or does both.

When can callbacks be used?

Callbacks can be used for asynchronous and synchronous tasks within our code.

Let's look at an example of a synchronous callback:

console.log("Start");
function isEvenOrOdd(num, callbck) {
    //callback function invoked
    callbck(num);
}

//callback function logic

function callbck(num){
    if (num % 2 == 0) {
        console.log(`${num} is even`);
    } else {
        console.log(`${num} is odd`);
    }
}

//calling outer function 

isEvenOrOdd(37, callbck);

console.log("End");

To test our code and check out output, I use the console in Google Chrome.

Observe the order of our output to full understand the code flow of this snippet. I find using the google chrome console or a code sandbox to observe the order of the output.

Our output should console.log("Start"), tell us if our input is even or odd, and console.log("End"). The logic that occurs is:

-function isEvenOrOdd is an outer function that takes callbck and num, our callback as an argument

-the callback function is invoked when we call callbck(num)

-function callbck(num) gives us the callback logic when it is invoked

-isEvenOrOdd(37, callbck) calls the outer function, it invokes callbck(num) which calls on the callback logic

*Notice that in synchronous callbacks, callbacks are executed immediately in their order where the output is initiated with the console.log("Start"), the functions are established, invoked, and logic is called, followed by the console.log("End").

Synchronous callbacks are blocking, which means the higher-order function doesn't complete its execution until the callback is done executing

Now, let's look at an asynchronous callback:

console.log("Start");
function isEvenOrOdd(num, callbck) {
    //callback function invoked inside Timeout
    setTimeout(() => {
        callbck(num);
    }, 0);

}

//callback function logic

function callbck(num){
    if (num % 2 == 0) {
        console.log(`${num} is even`);
    } else {
        console.log(`${num} is odd`);
    }
}

//calling outer function 

isEvenOrOdd(37, callbck);

console.log("End");

This code snippet is similar to our first code snippet, except we incorporate the setTimeout function.

Let's take a look at our output:

Our asynchronous output has changed, what's going on?

With this asynchronous callback, the callback is enclosed within the setTimeout function.

By default, the setTimeout function is an asynchronous function because it causes the code flow to delay until the task has been completed.

The asynchronous callback is executed after the execution of the higher-order function.

he asynchronous way to invoke the callbacks:

-The higher-order function starts execution: console.log("Start")

-The higher-order function completes its execution: console.log("End")

-The callback function executes after the Timeout() is finished: 37 is odd

Asynchronous callbacks are non-blocking which means the higher-order function completes its execution without waiting for the callback. The higher-order function makes sure to execute the callback later on a certain event.

This is what causes us to see a difference in the order of our output.

Conclusion:
Understanding the code flow of callbacks is advantageous because you'll gain a deeper insight into how tasks are being performed, manipulating data, and debugging. I get fuzzy on these concepts still, fearing I'm not using the right syntax, so it always helps to have resources to refresh your knowledge!

References:

https://dmitripavlutin.com/javascript-callback/

https://www.freecodecamp.org/news/discover-the-power-of-first-class-functions-fd0d7b599b69/

https://dev.to/koladev/a-simple-guide-to-asynchronous-javascript-callbacks-promises-async-await-4m03

Object Oriented Programming in JavaScript

Melissa Guachun — Fri, 06 May 2022 21:37:23 +0000

Recently, I experienced my first intensive five hour technical assessment. It was a nerve-racking experience that left me mentally exhausted but at the same time, proud that I had completed it. It made me realize the significance of having fundamentals down when it comes to technical assessments. Understanding the basics of your language of choice can be the guiding force towards tackling a technical question or problem.

The assessment was divided into timed sections, starting with technical questioning from two interviewers, followed by the technical assessment itself, then a walk through of my work along with further technical questioning, and finally an interview with a product manager.

The main technical assessment involved building out a feature with logic that pulled data from static json. I was told that it didn't matter if I didn't finish the feature, as long as I talked about my intentions and next steps to the interviewers.

When the time came, I was left with a half completed project as expected. I was so mentally drained that I felt myself getting shaky at explaining my work.

The interviewers were helpful by asking me what technical issues I faced. I felt myself ranting rather than using technical language to explain my difficulties, feeling I was getting nowhere with my explanation. It wasn't until one of the interviewers asked "Is this a problem with abstraction? Inheritance? What do you think is going on?" .

Those words brought me out of my brain fog, and pointed to the basics of JavaScript that I could understand, The principles of Object Oriented Programming. I felt like I was being pushed in the right direction by my interviewer. I began to explain abstraction and how I was struggling with it within my code which led me grow upon other concepts of OOP within my project.

I realized that even though I was lost, I had those pillars of knowledge to guide me back into a technical mindset. Despite having a moment of struggle, I was able to display my strong fundamentals without letting my nerves get the best of me. Having the basics of OOP in your vocabulary allows you to draw from examples in your code and show that even if you're stuck, you're still able to communicate your technical skills effectively.

Having this moment allowed me to further understand why my coding teacher was always hammering in the pillars of OOP to us. So even though I might have covered this topic before, I wanted to revisit this concept with examples to help other prepare for their first technical assessment!

To start off, lets ask ourselves:

What is an object?

An object is a collection of properties and functions that describe any existing entity.

An example of an object can be a dog, it has properties like:
name, breed, color. Properties allow us to identify our objects and differentiate them from other objects.

With our dog, we're able to give it different functions(methods) like fetch(), or speak() that return certain actions.

So, how do we create new objects in JavaScript?

There are different methods you can use to create a new object in JavaScript, but for now, lets just create an empty object.

const dog1 = {}; //using object literals

const dog2 = Object.create(null); //using Object.create()

const dog3 = new Object(null); //using the "new" keyword

Once we have our object created, let's give it some properties and methods.

const dog = {
    name: 'Sophie',
    breed: 'German Shepard',
    sayHello: () => {
        console.log('Bark!');
   }
}

dog.sayHello(); //'Bark!'

Above, we are creating our dog object by using an object literal
Inside the object literal, we define properties and methods in a syntax known as "key:value" notation
"name" and "breed" are the object properties that are in "key:value" notation
sayHello is an object method that returns an action which is console.log('Bark!');
the last line is calling the object method using the dot(.) notation to access properties and methods within the object literal

Now we know how to create objects with properties, methods, and access them. Let incorporate them into classes.

JavaScript classes are known as the "blueprint" or template for creating new objects.

class Dog {
   name;
   breed;

   constructor(name, breed) {
      this.name = name;
      this.breed = breed;
    }

sayHello = () => console.log(`$(this.name) says hi!`);

}

const myDog = new Dog('Fletcher','Pit bull');
myDog.sayHello(); //'Fletcher says hi!'

To refresh ourselves, classes always start with an uppercase letter.

-within the class above, we have our properties listed

-after it, we have our constructor which we use to assign values to new objects using the "new" keyword

To create object instances in a class, we use the "new" keyword and the name of the class: new Dog

-In the parenthesis, we identify the values of the properties defined in the constructor to assign them to the new Dog object:
new Dog('Fletcher','Pit bull');

Let's move onto another important topic:
Inheritance!
It's not too far off from the non technical definition of characteristics or genes that are passed down from a parent to a child.

In a technical context, inheritance is the concept of creating a new child class, also known as a subclass from an existing parent class or superclass.

The child class/subclass can inherit properties and methods of the parent class, or can derive it's own properties and methods.

// parent class
class Mom { 
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`${this.name} says bark!`);
    }
}

// inheriting parent class
class Puppy extends Mom {

}

let puppy1 = new Puppy('Fletcher');
puppy1.greet();  //'Fletcher says bark!'

To create a class that will inherit the parent's properties, we use "extends" with the class name. In this case, puppy is the subclass or child class is extending properties from its Mom aka parent class/superclass.

An instance of the puppy object was created using the "new" keyword, and is named Fletcher. Fletcher inherits the mom's bark because when we call puppy1.greet and invoke it with the parenthesis, our return is 'Fletcher says bark!'.

Let's move onto encapsulation!

Encapsulation is a very important pillar of OOP because it gives us the ability to hide and protect data from being accessed from outside of a class. We can guess from the name 'encapsulation', that data is kept inside a capsule, which is essentially our class.

Properties and methods that are encapsulated are known as "private" properties and methods.

For this example, let's say my dog Fletcher wants to refill his prescription for more treats at the Vet. To access his medical file, he needs his fileCode.

class Dog extends Vet {
   #fileCode; //private property

   constructor(breed, fileCode) {
     super(breed);
     this.#fileCode = fileCode;
}

unlock = () => {
   console.log(`Unlocked using ${this.#fileCode}`)
}

const myDog = new Dog('Fletcher', 9119);
myDog.unlock(); // 'Unlocked using 9119'
console.log(myDog.#fileCode); //throws error
}

In the class, Dog is a child class of the parent class Vet. We specify values for the properties defined inside the constructor to later assign to new objects.

To declare private properties or private methods, add a "#" at the beginning of their name to make it inaccessible outside of the class.

Another example is using function based syntax:


class Dog {

    setAttr(breed, age){
            this.breed = breed;
            this.age = age;
    }

    getBreed() {
        console.log(this.breed)
    }

    getAge() {
        console.log(this.age)
    }

}
  const d = new Dog()

    d.setAttr("Fletcher", 3) //undefined
    d.getBreed()  //undefined
    d.getAge()   //undefined

Now that we have a familiar with encapsulation, let's take a look at Abstraction.

Abstraction is what helps make our code reusable by hiding complex details and showing simple ones. It helps the code to be more understandable, readable, and help the security of your app.

Let's say Fletcher is still trying to hack his medical chart to get prescribed more treats.

function Dog(name, age) {
    this.name = name;
    this.age = age;
    const pin = "pin"
    const findPin = function() {
        console.log(pin+ ' is private')
    }

    this.getPin = function() {
        console.log(name, age)
        findPin()
    }

}

const myDog = new Dog("Fletcher", 3)
myDog.getPin(); //undefined

Above, we have two functions inside the main function: findPin and getPin. Abstraction is achieved by hiding the variable ‘pin’ and function ‘findPin’ from the outside and it is only accessible from getPin function.

And finally,

Polymorphism
From the name we can deduce that polymorphism means to take on multiple forms. But in this case, polymorphism means the same method can be used on different objects.

For example, if Sophie and Fletcher have the same function - fetch(), polymorphism allows to call the same method on different objects.

class Dog {
    fetch() {
        console.log('jog')
    }
}

class Puppy extends Dog {
    fetch() {
        console.log('run')
    }

}

const sophie = new Dog()
const fletcher = new Puppy()


sophie.fetch()
fletcher.fetch()

Above, we can see how the same function is called on different classes.

Takeaways:

OOP Principles in JS:
Inheritance, Encapsulation, Abstraction, and Polymorphism

Even though I'm past being a complete novice, there is still importance to refreshing yourself with the fundamentals of Object Oriented Programming. The more time dedicated to understanding them, it becomes very clear and even intuitive what each of them does when faced with a technical assessment.

PS: If you made it through this long article, congrats. And if you feel a bit overwhelmed, don't worry. It will make sense with time. To make it up to you, here's Fletcher the hacking snacking boi.

Common Frontend Interview Questions I've Been Asked

Melissa Guachun — Thu, 28 Apr 2022 15:08:18 +0000

The source of dread we all endure while interviewing is the unpredictable nature of the hiring process. With so many companies and even more technical questions, it feels useless trying to study every single concept and definition. Being new to the field compounds with the existing feelings of anxiety when finding the right opportunity.

Having graduated from bootcamp late 2021, I've applied for over 300 positions and acquired a decent amount of interviews. During that time, I compiled some of the most common questions I've been asked as a software engineer looking for front end leaning positions.

1.What is Semantic HTML?

The use of HTML elements that define their purpose to the browser and developer.
Examples are: <form></form>, <table></table>, <footer></footer> --these elements are defined by their name where as elements like

and do not indicate their contents.

Semantic HTML defines sections in a document. So why is this important, you may ask?

This is extremely important for developers to understand when working off of existing code as it is for accessibility. For engineers, semantic HTML allows data to be shared and reused across applications. This promotes structure and assists in helping search engines understand the document and rate it by relevance for search queries.

From the user's perspective, semantic HTML assists in readability because it is sectioned by semantic HTML elements. Ordering a document's layout is crucial, especially for user's with disabilities. Having a uniform and universal set of elements to define the contents of a document supports an optimum level of user accessibility.

2.What are closures in JavaScript?

Closures in JavaScript give you access to an outer functions scope from an inner function. Closures are created whenever a function is created/initialized.

Seems like a simple question, so why is it asked so often?

Personally, I think interviewers want to establish a baseline knowledge in the language of specialization. Even though you may intuitively know that scope exists for every function, interviewers want to if you can talk about the concept in question. You may have worked with functions on an every day basis, but can you explain how/why they exist? It's important to build the skill of always questioning as an engineer. They want to see that you're always learning, and not blindly accepting things as they are.

3.What is the alt attribute on an img tag? What is their purpose?

It is the text description for media like images and videos on a web page. They are displayed when a video or image cannot be loaded onto the web page. They are accessed by screen readers to provide users with the text equivalent of images and videos.

4.What does important mean in CSS styling?

When an element is styled with the important property, it overrides all other styling. This is a great tip to know when specifying styling elements without repeating code or writing bloated code. Knowing tips like these will ensure to your interviewers that you know how to implement clean and reusable code.

5.What is the difference between const, var, and let?

These three keywords are used to define variables. But there are huge differences in their usages pertaining their scope and data.

Const is a great way to remember "constant", the keyword cannot be reassigned. When a variable is defined using const, it remains constant with it's original definition. This means it is not accessible before it appears within the code. It is also block scoped.

Var is a keyword that can be reassigned and can only be available inside the function that it is created in, therefore it is function scoped.

Let is a keyword that can be reassigned but it is similar to the scope of const, being block scoped. If variables are not created inside a function or block, then they're globally scoped.

6.Explain the DOM:

The DOM stands for Document Object Model, it's a method of translating HTML elements into a form that JavaScript can understand and interact with. JavaScript needs to understand the web page so it can manipulate, style, behave, and work as a dynamic web page.

6a. What are various ways to get elements from the DOM?

getElementsById
getElementsByClassName
getElementsByTagName
querySelector
querySelectorAll

7.What is the difference between forEach and map?

forEach Method:
-executes a function by iterating through each element of an array
-does NOT return anything, returns undefined
-allows you to modify the values of an existing array by applying the callback function on each element of an array (it mutates the original array)

map Method:
-creates a new array using the return values of this function
-creates a new array by applying the callback function on each element of the source array (does not mutate the original array)
-returns the new array

Both: execute a function for each element of an array

Takeaway Tips:

-Understand fundamental knowledge of your language, try not to let laziness hinder from asking questions about even the most basic concepts, herein lies the importance of a strong foundation

-get comfortable talking about concepts and definitions with another person (this will help you organize your thoughts, and come off clear and concise)

-in conjunction with the last tip, talk through your code with a friend, this is a great exercise in understanding your own code flow and communicating the nitty gritty details

-don't be afraid to look up studying materials and create your own study methods ie codepen, freecodecamp, udemy, github, articles, flashcards, note taking, etc

-have patience, what I know now couldn't have been learned without experience of interviewing

Saying you don't know to a question is not the end of the world.

It is not definitive of your knowledge. It is not a determination of the outcome of your interview. Admitting you don't know an answer proves that it's impossible to know everything. But more importantly, it displays your vulnerability and openness to learn.

I've had millions of moments in interviews blanking, stuttering, and tripping over my words. But when I accept the experience, and acknowledge my nervousness, I can focus on the feedback I receive from my interviewer. It let me take note of what I understood and what I didn't from the technical questions.

I wish that this was reminded more when I was entering my job hunting process. You are not going to know what they will ask you, and it's impossible to prepare for every situation. So no matter the outcome of an interview, what you gain from interviewing is how to let go.

Learning to let go allows you to let go of expectations or anxiety in the interview. It forces you to focus on yourself in a different light in understanding yourself, the knowledge you've acquired, and the insight you will gain from the interview experience.

Figma Firsts: How To Get Started

Melissa Guachun — Mon, 18 Apr 2022 18:15:46 +0000

As an engineer with a background in visual arts and an interest in frontend engineering, learning Figma seemed evident in my future. It wasn't until recently when a friend suggested it that I took looking into learning Figma seriously.

Immediately, I saw the potential behind this tool and how it can enhance my abilities as an engineer, while furthering my interest in UX/UI design. So in a way, I was killing two birds with one stone.

So I figured I'd carve out some tips on how to get started with Figma to get you started on creating layouts while displaying how I use it in my everyday life!

Getting started is pretty simple. There is a free version that can be accessed by anyone by just making an account on their site. Once your account is created, you'll be brought to your working page with a dashboard.

If you look around, you might see some familiar icons if you have experience with any drawing or photo editing software. Icons like text, pen tool, vectors and other tools exist in the Figma world just as they do in Photoshop, Illustrator, Gimp, etc. These icons serve the same purpose from prior use, so if you have prior experience with these tools, you'll feel very comfortable. And if you don't, thats totally cool too. Figma is very intuitive and does a lot of the guessing work for you, so the tools should come naturally to you with little time.

Starting a layout is like staring at a blank code editor. It can be intimidating to start, especially when you're just learning. I recommend looking into the free resources Figma offers and peruse their layout designs. It's a great way to get a deeper understanding of what's possible in Figma.

But sometimes research isn't enough to get you motivated to start designing things yourself. To really understand how to use Figma, you have to create layouts yourself. I found this daunting in it's own right. Even though I have a background in visual arts, I'm still learning how to take my visual vocabulary and transfer it to tech which has it's won concerns of accessibility, legibility, hierarchy, etc. This made me wonder, if I'm feeling overwhelmed, what does it mean for others who have little to no design background?

Regardless of the type of background you have in art and design, a great way to get into start designing is to copy other layouts.

When I was at art school, a common quote my illustration teacher would say if "You're only as good as your reference". What he meant was that our ability to show our full potential in an art piece is as good as the photos we are working from. The quality of your reference photo for a drawing or painting can foreshadow the quality of how your art piece will come out. Because if you can't understand what you're drawing from, it will be reflected onto the canvas.

There's a reason why as an art student, I was made to copy the paintings of Rembrandt and Caravaggio.

In order to be the best, you have to learn from the best. So regardless if you're a UX/UI master or a junior developer, copying layouts will help you understand design at first hand. It will help you understand the basic tools of Figma, but also allow you to practice effective design habits. This is crucial because it will allow you to build up your own design vocabulary that you can draw from and customize to your own aesthetic.

This only enhances the importance of having resources. So, if you find a template that you like, click on template, and scroll down to the bottom.

Click "Copy to Figma". The page will bring you back to your work page with the layout of the template.

From there, challenge yourself to duplicate the template yourself. Similar to coding, if you don't know how to do something, look it up.

I must have mentioned this a thousand times before, but I'll say it again. Don't be afraid to use resources and outside references. If you get stuck, look on forums, youtube, and the Figma resources page to understand the best practices. You can never have too many references.

What's great about this is that you are given a concrete objective and goal on what to create. Don't feel bad if you are unable to duplicate everything in its entirety. The point is to acquire a basic understanding of the tools you have and gain experience on how others have utilized them.

Below is an example of the login page for the Food Delivery UI Kit that I replicated.

You'll notice a lot of inconsistencies between the original template (left) and my in progress duplicate (right). The colors are a bit off, the fonts may be a bit bigger, and the spacing might be slightly different, but for the most part, I accomplished the goal of duplicating my first frame.

This leads me to my next piece of advice, don't sweat the small stuff. There may be some features you won't be able to replicate yet. That's to be expected. There are a variety of ways to construct a layout which is why it's important to take plenty of time to get the fundamentals down.

I intend to further inspect the template log in page to continue working on the check box for keep me logged in, as well as getting the sizing the same. Then I can proceed to the next frame.

What I really like about Figma is similar to Frontendmentor.io, they give you a fully fleshed out piece and you have to reverse engineer it. To some, this may be a bit overwhelming, but maybe I'm accustomed to it because I can attribute it to drawing from a reference photo. I understand what the objective is, and I have a clear reference to guide me in the right direction.

So far, I'm excited at the prospect of practicing Figma and gaining more knowledge. For now, I plan on using it to create better and more in depth layouts for my job when I'm building out new pages. My goal is to eventually start utilizing wireframing and components to create an even more immersive layout and eventually high end prototypes.

Takeaways:

-gather resources (ie: youtube tutorials, forums, join Figma groups,follow Figma developers on social media, read Figma resource articles)

-take the time to explore the dashboard, home page, and tools

-copy other people's layouts

-for best practices, abide by Figma resources

-have patience and don't worry about perfection, we all start somewhere

How to Prepare for a Cultural Interview

Melissa Guachun — Thu, 14 Apr 2022 15:13:54 +0000

Whether you love 'em or hate 'em, interviews are part of the job hunting game. Personally, I find they run the gamut. They can be great opportunity of making connections and gaining insight into an exciting opportunity. Or they can be the most awkward and anxiety inducing half hour of your whole life. To make sure you have the best interview, I've compiled a few tips for job hunters that I've gained from my own experience. Hope they help!

Do your research: Take time to look up the company you are applying for to understand their mission, what their services are, and why you are interested in working there. The last reason may seem redundant but it's important for the recruiter to understand where your passions lie and what you can bring to the table as a candidate.

The size of the company has a huge impact on how you conduct your research. Researching bigger companies can yield a larger output of information from resources like Fishbowl, LinkedIn, Glassdoor, etc. But what if you're applying for a start up? Sometimes a smaller company will attach a video about the company to their interview invitation along with their site. Take the time to watch the video and peruse their site.

Go through their site and take note at what stands out to you. How is the responsiveness of their site? Does their interface make sense? Is it accessible? Does the routing make sense? Are things stylistically obstructed?

In conversation, the interviewer will refer to the company site in one way or another. They will even flat out ask about your impression of the site or if there should be any enhancements. Having some notes about the site indicates an attention to detail and that you took time of your day to properly research the company.

When I was applying for a job, the position was for a start up. I was in the midst of the interview process where my next interview would involve meeting the founder of the company. I knew I wanted to make a good impression but was limited in the amount of information I had. I immediately went to youtube and found interviews with the founder and began watching them all. I was able to learn more about the founder's background and access a deeper understanding behind why he started the company.

The more I learned, the more excited. I found a lot similarity that the founder and I shared in art and tech. Understanding their own background also generated questions I had for them just out of mere interest. So when the time came to meet them, I was pleased to say I made a good impression. I was not only about to explain answer the questions that were asked of me, but I had come to the interview with my own personal question about them, their background, and the founding of the company. The interview felt more like a conversation, and I was lucky to have the fortune of meeting them.

2.Review your resumé: The recruiter might have your resumé in front of them or they might expect you to fill them in on your background. Either way, it's a good idea to remember a brief but informative summary on your background and technical skills. This can be as simple as explaining how you got into the tech field, what you're passionate about, and the languages you specialize in.

When I'm telling my story to a recruiter, I try to shake off the nerves and remember why I'm here interviewing in the first place. They want to know you as a person, not just the profile printed on a resumé. I know the skills I bring to a team and the potential I have as a developer to grow even more. Remembering the unique perspective of your insight and skills can help you in showing the recruiter your best authentic self.

3.Research the recruiter: When preparing for an interview, the recruiter will usually be given to you by name. Depending on the size of the company, you might be interviewed by someone who is an engineer, CTO, or even a potential coworker. Looking someone up via LinkedIn and understanding their title can help gauge the type of questions you could be asked and gain better insight about the work dynamic.

Often times, I will be interviewed by two people who are from different departments. In this case, the job I'm applying for will probably involve collaboration between those departments. So it is important that I understand their roles and how they interact with the role I'm applying for.

Understanding the dynamics of the people who interview you can prevent you from making silly errors and distract you from asking questions.

This leads me to my next tip!

4.Ask questions:

I try to come into every interview with a handful of questions off the bat. I'll write them down and have them in front of me in case I blank out from anxiety. My questions are usually involve general topics and validation for the role I'm interested in such as :

What is the tech stack for this position?
What is the work dynamic? (i.e. will I be my own department? Will I work within a team? Who will I be working with on a day to day basis?)
What does onboarding look like?
What does a day in the life of a (job position) look like at (company name)?

In the introductory stage of the conversation, these questions will normally be answered for the most part. This allows me to go deeper with my questioning like following up on a detail from the job posting or questions on topics that matter personally like:

How does the company value mental health in the office?
How is a healthy work/life balance promoted?
Tell me about the opportunities for mentorship.

Having questions on hand indicate that you're actively listening and interested in the position. It also shows you're not there to listen to a run down of a job listing, but rather, going out of your way to make a connection by showing your own interests and topics that matter to you in the work place.

5.Don't be afraid to ask the recruiter or interviewer questions: To stand out as a candidate, a good option is to ask the recruiter questions about the company from their own experience. If I'm feeling daring enough, I will ask a recruiter why they chose to work where they are. Or what they like about the company the most. If I'm being interviewed by a staff member, I will ask them what they love most about working at the company. Or even the opposite: what's the toughest part of their role.

The answers that you can receive can make you gleam a lot about how happy the employees are and what the work dynamic can be from their perspective.

6.The wild card question: Every now and then, once everything has been said, an interviewer will throw in a few personal questions. These can come as a surprise because you're so focused on making a good impression, that you can forget the simplest and most personal facts about you like your favorite phone app or your favorite book. Questions like these are often at times asked for a recruiter to understand your own passions and to even see if you're mindful of the tech you use. Here are a few usual and a few wild card questions I've been asked so far:

What's your favorite book?
Why do you want to work in tech?
What are you working on now?
What is your favorite project you've worked on and why?
What does your set up look like (do you use extra monitors? What's the brand of your keyboard? Any extra technical set up?)

The following are a bit more technically mindful:

What is a favorite site of yours and why?
What is your favorite app on your phone and why?
Mac or Android (and why?)

There isn't a wrong answer to any of the three questions I just listed. You may be asked this because the recruiter wants to know if you're aware of the tech products you're using and if you're using your technical background to understand why you're using them. They want to see if you can list any features that stand out to you, or even identify how you can personally recreate them or enhance them. They want to see if you're paying attention to tech, where your interest lies, and that you have your hand on the pulse of what's new and innovative.

Conclusion:
As a web developer with an interest in mainly frontend engineering, the questions I receive may vastly differ from the questions a backend engineer may receive. It is why I properly titled this post "How to prepare for a cultural interview". I knew I couldn't speak to all experiences such as technical interviews and or even all cultural interviews because not one company has the same interviewing process. Which means you can't fully prepare for an interview which is why they're so scary. They involve you to think on your feet while showcasing the best side of yourself which can be daunting. But if you put aside time to look into the company, and come to the interview with questions, it is natural that your authentic self will break through. Because you've done the work to get where you are to be in that interview. And at the end of the day, it's never one sided. You are also interviewing them to see if the position is the right fit for you.

Putting Your Best Foot Forward: Updating Projects

Melissa Guachun — Mon, 11 Apr 2022 12:39:04 +0000

The topic of updating past projects is stressful. After pouring hours of work into a project, the last thing you might wanna do is dive back into it after months of inactivity to see what bugs await you. But when the opportunity comes to present the skills you have to an employer, the situation changes.

I had to do this exact thing recently. During the interview process, I was asked to have 3-4 projects present and to the interviewer as a way to display my frontend skills.

When I think back to the lengthier projects that I have so far, they all stem from my coding bootcamp. At that time, the curriculum was more focused on ensuring we knew how to incorporate concepts of object oriented programming, RESTful routes, AJAX, Bcrypt, omniauth, and other important concepts into our projects. Frontend design like using CSS, Bootstrap/ReactStrap, SCSS, JQuery, and other frontend libraries were the least of their concern. And rightfully so, when I was still in bootcamp, I really didn't know I wanted to focus on frontend engineering. So I don't blame them in any way. I'm just explaining that it wasn't the main concern of my bootcamp's material.

I'm lucky at my internship where I've have the opportunity to advance my knowledge of styling, layout, flexbox, UX/UI along with my frontend skills. Even though it's been a little over two months I've been working, it's pretty remarkable how much I've learned so far. I didn't come to this conclusion until I started revamping my projects from my bootcamp days.

A project that stuck out to me that I knew I wanted to update was my vanilla Javascript frontend and SQLite3 backend.

Immediately, I cringed opening up this project. It's funny how I have such a passion for aesthetics and design, but had no real approach in designing when I was building this site. It goes to show that we all start somewhere.

I was originally inspired by Record Store Day where record stores would have a huge sale on their inventory and sell exclusive bundles. The concept behind this app was to allow a user to compile a list of albums with the proper fields such as artist, album title, year released, and genre. I wanted to create an app for users to have on hand to remind them of the albums they'd wanna buy at a record shop.

There were obvious things I knew I wanted to change stylistically off the bat.

The color became overbearing with time. I knew how important it would be to choose a color less intense for the user. I also wanted to change the font style to incorporate consistency throughout the experience of usage.

The form was needing a lot of love for styling as well. It looks clunky and didn't make sense with the flow of the app.

The workflow consisted of a user filling out the form at the top but they would ultimately have to scroll all the way down to see the album they stored. This didn't make sense and would waste the user's time.

To my surprise, I realized the title and quote styling wasn't even using CSS. It was actually a downloaded image that I attached to the heading of the file. Insane.

The list of concerns grew with the more time I spent inspecting this project. It brought back memories of how lost I felt when building the app. It's hard to imagine feeling more lost than you are now. But it was comforting in hindsight, seeing how far I had come in the matter of months. The concerns I had for the usage of this app shows that I've grown as a frontend engineer.

Growing means changing and adapting. And as much shame as I felt looking back at the app, I couldn't be too hard on myself. I was just starting and that warranted enough slack. I saw this revision as a new challenge for myself.

If I wanted to put my best foot forward and authentically show my skills, I knew a complete overhaul of the frontend was needed. I took the whole weekend to work on this project along with three others to update their frontends.

Here is the newest revision of My Record Wishlist App. As you can see, the color pallet has changed quite a bit. I created a color pallet from the title of the app. When hovering over the title, there is a responsive hover that makes the colors move in different directions. I wanted to add a playfulness to the app but not take away from it's functionality. I used a darker color for the background to not strain the eyes, and a lighter color to contrast in the text color.

Button responsiveness was added to display when a button was being hovered over through color change. I also made the font bigger, more legible, and enclosed in a border for easier reading.

An exciting piece of functionality that I built was creating a sticky header and form. As a user's list expands in length, the title of the app and form follows as they scroll through their list. In case a user doesn't have an album on their list, they can easily make an addition without scrolling all the way to the top of the file.

Revising this project gave me so much reassurance that I was learning and growing as an engineer. I amazed myself at how much better I understood my vanilla javascript code from practicing with mini projects. As well as how much more thoughtful I was about user experience from working at my internship. And even a better eye for design from practicing with styling libraries, doing frontend challenges, and pushing myself stylistically at my job. The revisioning of this project allowed all these outlets of practice to culminate in this result.

This experience makes me excited for the future. As daunting as the thought is, I hope my future self looks back at these revisions and cringe with the same first hand embarrassment. Because I'll know that my abilities have grown and I'll be eager to remind myself how far I've come.

Conclusion:
Don't let the shame or cringe overtake you when revisiting old projects. It can be hard putting aside your own ego as an engineer when revamping old projects. It's like looking at photos of yourself from middle school. You did what you thought was cool at the time. But most importantly, you showed what you knew at the time. The root of the embarrassment from looking back at the past is the inner realization that you've progressed. Without the embarrassed blush, you can't appreciate how far you've come.

Out of Bounds: A Lesson in Setting Work Boundaries

Melissa Guachun — Tue, 29 Mar 2022 16:32:19 +0000

With every week of work, I'm gaining more and more insight into what I want out of a job. The open ended questions we receive on interviews start making sense once you've acquired some experience in the field. The question "what are you looking for in a job?" comes to mind.

When I was freelancing, what I was looking for in a job was to see another job. There was so much unpredictability in freelancing, it seemed like finishing a job was a luxury of itself. This is because there's so much that can go wrong: compensation/contract disagreements, lack of budget, or being scammed (to just name a few). What I was looking for in a job at that time was more work. You were never done looking for the next gig. Unless you were represented by an agency or working for a large company, you were on your own. As you can imagine it can become toxic real fast. You begin to undersell yourself, take on projects without contracts, or even do free work for the sake of "exposure". There were times where I, myself, felt gross from the feats I went to get paid for my work. And no matter how much you worked, you were always thinking about where your next paycheck will come from.

Now, as a web developer, I'm able to take comfort in the perks that come with a job in my field. Yes, there is a lot of competition in the hiring process, but with that comes stability. It's a feeling I'm still getting used to.

Since I've been working I've been taught to deliver products and services according to what the client is looking for. But now, the tables have turned. For the first time, I'm able to self reflect on my job and decide on my own prospects. With it comes more personal and complex issues that take a lot of reflection and evaluation.

I see my old habits as a freelancer sneak into my new work environment as a developer. My partner would find me up past midnight in the dark, my dinner still sitting next to me, untouched for hours. The blue light of my laptop illuminates my face as I try to complete my work. Other times I would be found in the exact same place on the couch with a collage of tabs opened as I debug an error in my code, wearing the same sweats for five days straight. For hours on end, consecutive days, even on weekend evenings, I would be working non stop.

The manic nature of working to complete a task, just to look for the next role to complete mimicked the behavior of my former freelancing self. I was acting like I was searching for the next paycheck, but why? I have a job, I have amazing coworkers, and stability. So why am I still acting this way?

It was clear that I was only operating to survive, not thrive. My past career was coming to haunt me in the worst way and I wanted to pin this bad habit in the butt. With my help from my partner and peers, I began to evaluate how I can set up better work boundaries for myself. (Disclosure: these are tips that work for my own situation).

Support
I wasn't even aware at how harmful my behavior has been to me and my mental health if my loved ones hadn't stepped in. Having a support system is important for that reason.

When I brought this issue to a friend in the field, they were immediately concerned. It can be hard coming from a different field with your own work schedule and adapting into a whole new work flow. Having friends in your field helps tremendously because they offer insight that can make this transition a whole lot easier. They immediately suggested setting a hard shut down period at a certain time. This meant no LinkedIn, no slack, no coding editors, even shutting down your computer. Basically no screen time after 5. This seemed a bit intense but I followed their advice.

It felt wrong to stop everything when I could just keep making more headway on a project. It even made me feel nervous, like what am I going to do now? Rest?

As uncomfortable as it made me at first, I soon forgot those feelings because I was able to enjoy a meal with my partner and not my computer. I felt more present. I felt like I wasn't tethered to my work.

Change of Location
Working remotely means you can take advantage of working from the comfort of your home. But if you're like me, an anxious person who can't decide when to take a break, then it's probably best to physically step away from your work. I find it helpful to get out, despite how lousy I'm feeling, to get some air.

Whether you know it or not, your eyes need rest from the blue light of your screen. That means actually looking away and not just redirecting your attention to your phone. These walks can be cathartic for me because I'm forced to think about other things besides work because I'm not in my work environment. As much as I hate to admit it, walks are great for your mental health and can help you regain mindfulness after mindlessly staring at a screen.

You don't even have to leave your home if you feel so inclined. When it's too cold I'll get something to drink and look out my window for a few minutes. It's a pretty ideal place to zone out and give your brain a much needed break from your code.

Work Hours
(Note: this works for my position as a part time employee in my particular situation)
Since my position is part time, I'm obligated to clock in the appropriate hours for the week in a weekly report. More often than not, I find I get more done when I compartmentalize my hours into chunks instead of smaller hours at different times during the day (or night). Establishing actual work hours ensures me that I'm meeting the qualified amount of hours for my job, reassures me that I'm working the appropriate amount of time, and allows me to declare when I am off hours.

I make sure my hours are measured so I'm working the same amount of time each day. In that time I keep my schedule open for meetings with my coworkers for brainstorming, debugging, as well as taking care of my own tasks. My window of time is limited because once I meet the end of my shift, I shut down communication for my job. This is akin to the no screens time at the end of the day. Once I reach the maximum amount of hours, I am unreachable to my colleagues. Any meetings, direct messages, or emails are not seen until I clock back in the next morning.

At first I was nervous about setting this boundary. I didn't want to seem like I wasn't a team player, or that I was being closed off. I was reminded by my partner that I can't be able to do my job and help others if I don't take care of myself first. By setting this boundary, I am looking after my own well being so that I can properly take care of myself and recharge for the next day.

Staying up til the wee hours of the night won't manifest a breakthrough. In my opinion, I make the worst mistakes when I'm tired. And it won't do my team any good if I'm pushing code that has syntax errors and bugs galore.

Not having a way to clock out will only lead to you being burnt out more frequently. The ability to signify when you're off the clock establishes a routine for yourself.

I find this helpful when working from home because I don't have a commute to help me process the start or end of my day. So having a way to turn off communication once the day is over, tells your mind that it's time to shift gears into rest mode.

Pockets of Self Care
This can be another challenging but essential part, especially when working from home. It's hard to imagine what self care can be for yourself rather than how it's been commodified by social media.

What self care looks for me is watching something funny on youtube, preparing/sharing a meal with my partner, taking a walk, playing with my dog, doing my make up for the day, doing a 5 minute meditation. It doesn't have to be an expensive endeavor to find moments of self care.

You're probably doing these things already in your day to day routine. The point of this is to invest time in yourself in a mindful manner.

Conclusion
The best part about growth is that you begin to learn more about yourself. In this case, I've begun understanding what I'd want out of my job. In the future, when I'm asked this question, I'll know to mention a healthy work life balance.

As an artist, taking a break felt ridiculous. It felt like a sign of weakness which is now a tremendous miscalculation on my end. When I think of where I was then to where I am now, I understand that you can't show up for others without taking the time to take care of yourself.

In my next opportunity, I know I'll be looking for a place that values a healthy work life balance. Resting is as important as working, and having an environment that supports that message is probably the best for my own needs.

I've found through my new job, I'm able to build out a new skillset of setting work boundaries. It's a skill I'm still getting used to and honing in on skill wise. But I know I wouldn't have gotten to this realization without this job, and for that, I'm forever grateful.

Relearning the Past: Vanilla JavaScript Single Page Application

Melissa Guachun — Thu, 24 Mar 2022 17:27:37 +0000

Since my introduction to this language during bootcamp, I've been stumped by the possibilities of vanilla Javascript. Among my class, everyone seemed to be divided into two groups. Half of my classmates were immediate lovers of javascript and the other half, including myself, were completely stumped. To me, JavaScript was the wild west of languages, where anything goes. You're able to construct actions in methods on a microscopic level, which to me seemed overwhelming.

To me, the feeling can be described to when I was freelancing as an artist. I was always eager to dive into a final draft of a commission. To some, the prospect of staring at a blank page, waiting to be drawn upon can be intimidating. But I found it exhilarating.

But in the same sense of staring at a blank computer screen, the feeling of exhilaration was replaced with confusion and uncertainty. I truly didn't know where to start and felt thwarted with guilt. I began doubting myself even more, what good am I if I can't even think like a software engineer?

When the time came to create my JavaScript project, it was like my nightmare had come true. If it wasn't for my temporary cohort teacher leading the JavaScript section and the support of my classmates, I would've probably spent all my project time crying.

Once finishing JavaScript, my bootcamp eagerly pushed us ahead to React.js where I found some much needed relief.

Since then, I've sorta felt haunted by my javascript inadequacies.

I didn't really know how to think like my javascript savvy peers. It felt as if they possessed a javascript gene that I innately lacked. Those feelings became heightened when I decided to pursue more frontend and full stack positions.

As painful as it was to admit, I knew that JavaScript was a necessary language for me to learn in order to be a better programmer.

I decided to relearn how to remake a single page application (SPA) using only vanilla javascript (no frameworks). I based this project off of my original javascript SPA project from my bootcamp. Single page applications are commonly used by individuals and even large companies, so I thought this would be a pretty cool and practical project to embark on.

Unlike my bootcamp SPA, I decided to make something similar to a personal site. I also decided to not make a backend, as I wanted to focus on more frontend qualities of vanilla javascript for now.

To make this project even more enjoyable, I decided to make the personal site around my dog Fletcher.

Starting off this project, I created the appropriate files. With no frameworks in use, the set up was very easy and minimal. The first thing I built out was the pages. I defined the object pages and gave it key value pairs. The keys would be the page names and the values would be the content of those pages.

var pages = {
        'home' :   `
        <div class="home">
            <h1>Welcome to the Fletcher Flyer </h1>
            <br>
             This is a blog by me, Fletcher the dog. <br>
             My mom thought it was about time I have my own site
             <br>to share my adventures and offer my services.
             <br>
             <br>
             Unlike the Disney hit show "Dog with a Blog", I cannot talk.
             <br>
             But I do have remarkable typing skills, soulful eyes,<br> and an eye for hats. <br>


            </div>
}

Above is an example of what the page and its content looks like. I created other pages such as a page for contact, services, and about. Once I had my pages built out, I needed a function to get and display the page with the appropriate content.

I built out a function called getPageContent that takes in the parameter page. Page is the string that will define the content being shown depending on the name of the page. We use a switch statement with page as the parameter, and will be matched with our options of page names.

function getPageContent(page) {
        var contentToReturn;
        switch(page){
            case 'home': 
            contentToReturn = pages.home;
            break;
            case 'about': 
            contentToReturn = pages.about;
            break;
            case 'services': 
            contentToReturn = pages.services;
            break;
            case 'contact': 
            contentToReturn = pages.contact;
            break;
            default: 
            contentToReturn = pages.home;
            break;
        }
}

If there is a match, we show the appropriate page by accessing the pages object and its key value. The last case line is in case a match isn't found, the page will return to the home page.

Before we end this function, we add a document method. We utilize this method to be able to quickly find the matching element object to be returned. The whole point of a single page application is that there is no reloading involved. So it's important that this feature works.

    function getPageContent(page) {
        var contentToReturn;
        switch(page){
            case 'home': 
            contentToReturn = pages.home;
            break;
            case 'about': 
            contentToReturn = pages.about;
            break;
            case 'services': 
            contentToReturn = pages.services;
            break;
            case 'contact': 
            contentToReturn = pages.contact;
            break;
            default: 
            contentToReturn = pages.home;
            break;
        }
        document.getElementById('content').innerHTML = contentToReturn
    }

This method allows us to get the matching element and it's content. But right now, this method doesn't work until we define it in the html body.

<body onload="getPageContent('home');">
    <header class="header">
        <a href="./index.html" class="header_logo">Fletcher Flyer</a>
        <ul class="header_nav">
            <li class="header_list" style="line-height: 50px;"><a href="#" class="header_link" onclick="getPageContent('home')">Home</a></li>
</ul>
</header>
<div id="content"> </div>
</body>

In the header we use a hyperlink tag, connecting one page to another. In this case, we are directing our code to be read from our index.html file. That is where all of our content lives.

On Load helps us execute a javascript script once a page has been loaded. We directed the home page to be the landing page for our app.

In an li tag, we build out our home root. Within it, we use the onclick event that will take the use to the appropriate page. This occurs because we are calling on the getPageContent method with the parameter as the string 'home'. This will match the key of home to its value which is the content of the home page.

I repeat routes the syntax for the rest of the pages. Once that was done, I was surprised how within a few lines of code I had the basic layout for my SPA. It gave me even more time to explore the design aspect of this project like utilizing javascript for responsiveness and css stylings. It reminded me how powerful JavaScript truly is.

Looking back at where I was mentally when I was first learning JavaScript, it probably wasn't the best.

JavaScript was the fourth language I was learning during my bootcamp and my brain was basically mush. The whole point of a coding bootcamp is to test your limits, study hard, and put in the work. But that can clutter your mind when you're going from one language to another.

It brings home the importance of focusing on one language once you graduate. For myself, I know that JavaScript is going to be part of my career because of the positions I am passionate about pursuing. So I know, if I want to be a better frontend engineer, I need to be a better javascript engineer.

Coming out of my bootcamp made me a bit jaded, thinking I could just hop from one language to another after learning the basics. The truth is, if you want to be grow after your bootcamp, it's the best policy to choose a language and devote your time to mastering it.

There are so many language fads that go in and out of demand in the job market that can sway you in your choice. It can be hard to shut that influence out. In the end, you have to think about what's best for you, and the path you want to take in this field.

Conclusion:
JavaScript is still a bit intimidating to me. Though, I understand the more I work at it, the less scary it will become. It's really all about putting in the time. This project proved that I can code in JavaScript and understand every line of code that I write.

It's also important to mention that when revisiting, relearning, or starting a new language, to not compare yourself to others. Everyone has their own learning curve. Methods and functions that I used in my bootcamp all of a sudden make sense to me now. Sometimes your mind just needs time to absorb what you've learned.

Also, to my fellow peers who have entered the tech field as a career switch, don't give up. I battle with myself, thinking that because of my art background, I'm unable to think like an engineer. That's just destructive talk. There is no such thing as "thinking like a software engineer". We come from different backgrounds and find ourselves in this incredible new field. We bring so much to the table, that if we all homogeneously thought "like a software engineer", the tech world would be obscenely boring. It all comes down to trying, and putting the time in to learn and grow.

If you wanna checkout my full project, you can find it on my GitHub.