DEV Community: Allison Cortez

Discovering GraphQL

Allison Cortez — Mon, 01 Feb 2021 03:34:43 +0000

I recently had the opportunity to play around with GraphQL. It's been a fun experience for sure. I just wanted to list out some resources that have been helpful for me. For those of you who are wanting to explore GraqhQL, I would highly suggest trying it out! I definitely can see the benefits of working with it.

graphql-code-generator.com
CSS Tricks

If you're using GraphQL with React and TypeScript
nainacodes.com/blog
hasura.io/learn

What are some of your favorite resources? Feel free to comment below.

Photo by Anni Roenkae from Pexels

What is Function Binding? 💫

Allison Cortez — Sun, 24 Jan 2021 15:00:30 +0000

When working with a regular function in JavaScript (not an arrow function), you'll find that when using the this context, you're referring to the object that invoked the function.

Sometimes, this ends up creating different results than what you'd expect.

Take the following example:

const Bob = {
  temperature: "45 degrees"
  sayNews() {
  console.log('It is ${this.temperature} outside!')
  }
}

setTimeout(Bob.sayNews, 1000) // It is undefined outside!

You'll notice that we get undefined for the temperature variable. That's because when we refer to this in our setTimeout call, we are actually referring to the Window Object itself, and NOT Bob.

Are you confused yet?
So let's break this down.

setTimeout called on Bob
Inside Bob, in the sayNews function, this was referred to.
Since setTimeout is a Window Object method, Javascript thinks that this is referring to the Window.

To fix this, we could do one of two things
Use .bind to specifically bind an object to a function

setTimeout(Bob.sayNews.bind(Bob) // It is 45 degrees outside!

Use arrow functions, introduced in ES6

setTimeout(() => Dug.sayHi(), 1000) // It is 45 degrees outside!

I hope this was helpful. Thanks for reading :)

Resources

Photo by Markus Spiske from Pexels

Newsletters I actually enjoyed in 2020. 👩🏻‍💻🌍💫

Allison Cortez — Sun, 17 Jan 2021 17:50:39 +0000

Hi Everyone,
Here's a list of newsletters I actually enjoyed in 2020! What's been your favorite newsletter? Feel free to comment down below!

Hackernewsletter
More of a weekly newsletter, with articles on programming, startups, and current happenings.

GitHub explore
Catches you up on what's trending. There are different options on how frequently you'd want to receive content.

P.S. You'll need a Github account in order to sign up for email updates.

Weekly newsletter by Siddharth Kshetrapal
A friend recently recommended this newsletter to me, and honestly, I've thoroughly enjoyed Siddarth's content. It's definitely Javascript focused, but he also has other things in there about growth as a developer and other tidbits.

Status code newsletters
They have a list of different newsletters you can subscribe to. I can only attest to the Javascript and Frontend Focused ones. I think they do a good job of curating an insightful list of resources and tutorials.

Thanks for reading :)

Boost Your Productivity in 2021, get a Notion 😎

Allison Cortez — Sun, 10 Jan 2021 13:37:09 +0000

I recently discovered the Notion App this week, and it's honestly been the best thing in 2021 so far! For those who don't know what Notion is, here's the Wikipedia definition:
Notion is an application that provides components such as databases, kanban boards, wikis, calendars, and reminders. Users can connect these components to create their own systems for knowledge management, note-taking, data management, project management, among others. These components and systems can be used individually, or in collaboration with others.

Here are the main things you need to know about Notion:

It works like any other text editor.

It's features are built-in.

You can access features easily by starting your line with the following character: /.
You'll get access to numerous 'block' options where you will be able to add in tables, calendars, kanboards, you name it, in order to customize your page to your liking.
ULTIMATE CUSTOMIZATIONNNN

Start with a Template

My recommendation would be to get started with a template, when you're just learning how to navigate through Notion. Explore options, play around with the interface. Once you're comfortable, start a page of your own or make your own custom template!

free templates here, here and here

You can also use one of the many build-in templates that come with Notion.

Resources

Notion's plethora of tutorials on Youtube https://www.youtube.com/c/Notion/featured
Keep Productive, Beginners Guide to Notion https://www.keepproductive.com/blog/notion-for-beginners#:~:text=What%20is%20Notion?,toolkit%20to%20get%20work%20done
youtube walkthrough https://www.youtube.com/watch?v=lZ83Vu0SoG0&t=925s

Start the Year Strong, Join a Dev Community

Allison Cortez — Sat, 02 Jan 2021 20:15:03 +0000

Getting involved with a community has been essential to my journey as a developer. It's advice I got early on, and something I would like to pass along to others.

A quick note: I'm a Mexican-American lady, originally from Texas. I would say that the communities I've joined are definitely geared towards my demographic.

Getting involved with a community could be daunting at first.

Not sure where to start?

Here are some great first action steps:

Go to Meetups

This is especially true for our post-pandemic world. Even though it's definitely not the same as in-person, It's a great way to get connected with your local community, or even join some nationwide groups.

You can learn something new, sign up for lightning talks, join a more non-formal happy hour setting, or attend a traditional workshop. There are so many different types of formats when it comes to Meetup groups, you're bound to find something that sparks your interest.

Join a Slack

Similar to Discord, Slack is an online community where you can join specific groups and channels that you're interested in. It's a great way to meet new people and chat in a more direct way with members within your group. Here are a few slacks I've thoroughly enjoyed being apart of:

Women Who Code

Every experience I've had with these ladies has been a positive one. From their active slack communities to their numerous events, every interaction has been exceptional. The WWC website itself has so many resources. Once you're acquainted with a local chapter or have done some research on their website, I would definitely suggest joining a local chapter, if there is one in your city, or even joining a specialty slack ( They range from Front-end Development to Cloud Development).

Techqueria

Techqueria is one of the most active Slacks I've been apart of. They have great channels to join, everyone is super friendly and resourceful. You can even sign up for their #cafecito channel which automatically connects you with another member in the slack every 2 weeks, encouraging you to meet other members.

Get Involved: Join Discussions

Now that you've joined a community or are on Meetup learning and meeting local devs, I would be active in that community. There are several ways to do this. You could sign up for a lightning talk in your meetup group, if it's a slack community, stay involved through discussions in the chat groups. See if there are opportunities for volunteer work in your community, or even find an open-source project to contribute to. The list goes on!

Conclusion

I hope this gave you a good idea of where to start. As always, feel free to comment below your favorite ways to connect with others. I'll also put some resources down below.

Resources

Here are a few resources I've enjoyed this past year.

Using Map, Filter, and Reduce: Collection-Processing Methods in Javascript

Allison Cortez — Sun, 27 Dec 2020 16:32:15 +0000

filter, map and reduce are very powerful methods. They allow you to iterate through the contents of an array, similar to a for loop. Each method creates a new array, element or object, based on the callback function that it's supplied.

I would say these three methods win the popularity contest due to the following:

their non-destructive nature(The return value is a copy of the original, the original stays unchanged)
they are easier to write and follow DRY(Don't Repeat Yourself) principles

Let's go ahead and break these down:

Array.Map()

invokes a callback function on every element in the array
returns a copy of the original array that is passed to it
the original array does not change

let array = [8, 10, 12, 14]
let newArray = array.map(element => element + 4)
console.log(newArray) // [12, 14, 16, 18]
console.log(array) //[8, 10, 12, 14]

Learn more about map here and here

Array.Filter()

The filter method is very similar to map. It also goes through every element of an array and returns a new updated copy of that array. The difference lies in how we utilize the callback function.

For example:

let array = [8, 10, 12, 14]
array.filter(function(e) {
    return e >= 12;
  }) // [12, 14]

In this example, the new array here has all the elements that return true for the callback function. All elements that return false will be skipped. If we have no true elements, the return value will be an empty array.

Array.Reduce()

The reduce method applies a function to each value of the array using an accumulator, reducing it to one single value. Just like map and filter, the original array remains unchanged.

The reducer function takes four arguments:

Accumulator
Current Value
Index
Array (our original)

MDN Syntax:
arr.reduce(callback( accumulator, currentValue, [, index[, array]] )[, initialValue])

More on reduce()

You can think of the accumulator as a running total, with each element of our array being added to that total.
The index, array, and initialValue are all optional.
If an initialValue is not provided, the first element of the array will be the accumulator and the second element will become the currentValue.

let array = [1, 2, 3, 4].reduce(
(accumulator, currentValue, currentIndex, array) => accumulator + currentValue) 

console.log(array) // 10

If an initial value IS provided, the accumulator will be equal to the initialValue. currentValue will equal the first element in our array.

let array = [1, 2, 3, 4].reduce(
(accumulator, currentValue, currentIndex, array) => { return accumulator + currentValue}, 10) 

console.log(array) // 20

Since we provided an initial value of 10, we start with our accumulator at 10, adding each element in the array to 10, giving us a total of 20.

Summary

map: Transform every element and create a new array
filter: Create a new array with all elements that pass the test implemented by the callback function.
reduce: Reduce every element into a new value

Photo by Sharon McCutcheon from Pexels

Thanks for reading! :)

JS Fundamentals: var, let, and const

Allison Cortez — Mon, 21 Dec 2020 02:45:59 +0000

Var, let and const are different type of variable declarations. In this article, I'll be doing a quick rundown of the differences between var, let, and const.

I would say this is more for readers who are just getting started with Javascript or are maybe new to ES6 and its features.

Things to note, before continuing:

SCOPE: where the variables are available for use.
HOISTING: a JS mechanism where variables and function declarations are moved to the top of their scope before execution. (this is more for variables declared with var)

VAR

Before ES6, var was the only type of declaration used.
It's best practice to only use var when ABSOLUTELY NECESSARY. Most programmers think var is too editable and presents issues like accidentally overriding code you were trying to keep or introducing security issues due to the global access that var has.

SCOPE: global/function-based
HOISTING: hoisted to the top of its scope, initialized with undefined
var can be updated
var can be redeclared

Scope Example:

var howdy; // howdy = undefined
console.log(howdy); // this would print out undefined
howdy = "hi there" // howdy value is updated to "hi there"
console.log(howdy); // this would print out "hi there"

Since howdy is called first without being assigned, howdy gets stored with an undefined variable in the first line. In the second line, our console.log will return undefined. After we assign a value on line 3, our console log will update the howdy variable and assign it to "hi there". So on line 4, our console log will be "hi there".

LET

Let is preferred for variable declaration.

SCOPE: block (let would only be available within that block)
HOISTING: Hoisted to the top, NOT initialized, which means you'll get a Reference Error if you try to call the variable before it's been declared.
Let can be updated.
Let can not be re-declared.

What is a block?
A block of code closed in with curly braces {}. Anything inside the curly braces is part of that block.

function blockScope(){
  let car = honda
  console.log(car); // "honda"
}
console.log(car) // car is undefined

Since the car variable was declared inside of our block, it has block scope. We do not have access to it outside of the block. So when we console.log on the last line, we will get an error, undefined.

Let CAN NOT be re-declared

// we can re-assign egg's value
let egg = "over-easy"
egg = "sunny-side up"

//we CAN'T re-declare egg after that first time
let egg = "sunny-side up"
let egg = "hard-boiled" //error: egg has already been declared

CONST

Variables declared with const will keep a consistent value, meaning if you assign a string to your egg value, you won't want to change the value to an integer later. The value type stays constant.

SCOPE: block
HOISTING: Hoisted to the top, but NOT initialized. (like our let variable)
const can not be updated
const can not be redeclared
while var and let can be declared without a value, const MUST be initialized with a value.

Hope this was helpful. Any questions or additions? Please leave a comment. Also, thanks for reading :)

Photo by Aleksandar Pasaric from Pexels

Breaking down a classic interview question: FizzBuzz

Allison Cortez — Sun, 13 Dec 2020 21:09:36 +0000

Problem:
write a program that console logs the numbers from 1 to n.
For multiples of 3 print 'fizz' instead of the number. For multiples of 5 print 'buzz'. For numbers that are multiples of both 3 and 5, print 'fizzbuzz'.

Example:
fizzBuzz(5)
1
2
fizz
4
buzz

The first thing that popped into my head:
We have to iterate through our list of numbers in some way, in order to check each individual number from one to n, which means...

STEP 1, A FOR LOOP

We'll assign i to start at one, since this specific problem requires us to do so.

function fizzBuzz(n) {
  for (let i = 1; i <=n; i++) {
  // here, we'll check each number for our requirements..
  }
}

The next thing to think about would be how exactly would you calculate a multiple of a number?

Here's a helpful link, in case anyone is lost right now:
MDN Docs

STEP 2, THE MODULO OPERATOR

The first check to make would be to see if our current number in the loop is a modulo of both 3 and 5.

function fizzBuzz(n) {
  for (let i = 1; i <=n; i++) {
    //is the number a multiple of 3 and 5?
    if (i % 3 = 0 && i % 5 === 0){
    console.log('fizzbuzz');
    }
  }
}

Sidenote
We DO NOT set up another separate if statement... we want to build on that first check.

What this means:
If our first if statement is true, we don't run any other code inside the for loop. To ensure this, we'll add onto the first if statement with else ifs.

STEP 3

Check to see if we have a multiple of three.

function fizzBuzz(n) {
  for (let i = 1; i <=n; i++) {
    //is the number a multiple of 3 and 5?
    if (i % 3 = 0 && i % 5 === 0){
    console.log('fizzbuzz');
    } else if (i % 3 === 0) {
      // is the number a multiple of 3?
        console.log('fizz');
    }

  }
}

STEP 4

Check to see if we have a multiple of five.

function fizzBuzz(n) {
  for (let i = 1; i <=n; i++) {
    //is the number a multiple of 3 and 5?
    if (i % 3 = 0 && i % 5 === 0){
    console.log('fizzbuzz');
    } else if (i % 3 === 0) {
      // is the number a multiple of 3?
      console.log('fizz');
    } else if (i % 5 === 0) {
      // is the number a multiple of 5?
      console.log('buzz')
    }

  }
}

STEP 5

If we meet none of those conditions, we'll just print out that number.

function fizzBuzz(n) {
  for (let i = 1; i <=n; i++) {
    //is the number a multiple of 3 and 5?
    if (i % 3 = 0 && i % 5 === 0){
    console.log('fizzbuzz');
    } else if (i % 3 === 0) {
      // is the number a multiple of 3?
      console.log('fizz');
    } else if (i % 5 === 0) {
      // is the number a multiple of 5?
      console.log('buzz')
    } else {
      // none of the conditions above returned true
      // print out the current number we're looping through
      console.log(i)
    }

  }
}

I hope this was helpful for those just getting started with these kinds of problems :)

Photo by Anthony from Pexels

Front-end Interview prep: resources

Allison Cortez — Sun, 06 Dec 2020 22:26:13 +0000

I've recently been preparing for frontend interviews and have compiled quite a list on my local drive. I wanted to share resources that have helped me in the past. This includes blog posts, Github Repos, other sites that have served as good sources of information.

Hope this is helpful for those going through this process! Also, feel free to share what your favorite resource has been or currently is. :)

General Interview Prep

Udemy's Coding Interview Bootcamp I would highly suggest investing in this course! Stephen Grider does such an amazing job of breaking down these common interview questions.
Ben Rogojan's Study Guide shoutout to Ben for this lengthy and super helpful post!

Frontend specific

Algorithm prep

Photo by fauxels from Pexels

JS Spread Operator: How It Works and Why It's Useful

Allison Cortez — Mon, 30 Nov 2020 03:29:01 +0000

The spread operator is a super useful piece of syntax, introduced with the ES6/ ES2015 version of Javascript.

Main Function
The spread operator allows an iterable (array expression or string) to be expanded. So what does that even mean?

Basically, there are 3 places to use spread:

function calls(executing a function)
array literals (making a new array)
object literals (making a new object)

Function Calls

Lets say we have an array:

const emojis = ["sad face", "happy face", "heart", "sun"]

If I console.log, I would get back an array of strings.

console.log(emojis)
// => ["sad face", "happy face", "heart", "sun"]

What if I just wanted the content inside of the array? This is where the spread operator comes in.

console.log(...tvShows)
// => sad face happy face heart sun

The spread operator gives us the capability of extracting these values from the array.

Summary:
We can spread an iterable into separate arguments in a function call.

Array Literals

Quickly copy, add on, and create arrays based on existing arrays.

Let's say we have the following:

const dogs = ["Bud", "Champion"]
const cats = ["Stella", "Dolly"]

What if I want to join these 2 arrays? I could do something like this:

const pets = [dogs, cats]
// => [Array(2), Array(3)]

The return value would be a nested array.

What if I just want to get back one array?

const pets = [...dogs, ...cats]
// => ["Bud", "Champion", "Stella", "Dolly"] // YAY!

Note: order DOES matter. Because we put in dogs before cats, we got dogs first on the list.

more examples:

[...dogs,"Buddy","cats", "Chester"]
// =>["Bud", "Champion", "Buddy", "Stella", "Dolly", "Chester"]

Copying Arrays(this works for objects too)

Let's say we want to make copies of the following:

const colors = ["green","blue", "yellow"]

In Javascript, if you set a variable equal to an existing array, they are linked and will point to the same thing in memory.

const colorCopy = colors
colorCopy.push("white")

colorCopy
// => ["green","blue", "yellow", "white"]

colors // original array also got updated :(
// => ["green","blue", "yellow", "white"]

this updates our copy, but it ALSO updates our original. That's not what we want!

One good reason for using the spread operator is that it is non-destructive. Here's how we can make a copy of the original, without manipulating the original array:

const colorCopy = [...colors]
colorCopy.push("white")

colorCopy
// => ["green","blue", "yellow", "white"]

colors // original array
// => ["green","blue", "yellow"]

Note: spread only goes one level deep when copying an array.

Conclusion
Using the spread operator can be so useful! I hope this was a helpful breakdown.

Resources

Colt Steele
MDN Docs
Photo by Daria Shevtsova from Pexels

JS Fundamentals: Scope explained

Allison Cortez — Mon, 23 Nov 2020 00:13:50 +0000

What is Scope?

Scope is the concept of where something is available. The actual MDN definition states it's the context in which values and expressions are "visible" or can be referenced.

In Javascript, there are 3 types of scope: Global, Function, and Block Scope.

Global Scope

When a variable or function has a global scope, that means it can be accessed everywhere in our code.

var a = "I'm a global variable!";

function myFunct(){
  console.log(a); // has access to 'a' since it has global scope.
}

myFunct() // 'I'm a global variable!'.

Tip: If a variable or function is NOT declared inside a function or block, it most likely falls under the global scope.

Function Scope

When variables, functions, or parameters are declared inside of a certain function, they are only accessible within that specific function.

function eatDinner(){
  var item = 'Turkey';
  console.log(`I love ${item}!`)
}

eatDinner(); // 'I love Turkey!'
console.log(item); // 'ReferenceError: item is not defined.'

From outside of the function, we can't reference anything declared inside of it.

Block Scope

A block statement creates its own scope.

Variables declared with var are not block-scoped.

if (true){
  var myVar = 42;
}

myVar; // => 42

Variables declared with const and let are block-scoped.

if (true){
  const myVar = 42;

  let secondVar = 1000;
}

myVar;
// Uncaught ReferenceError: myVar is not defined

secondVar;
// Uncaught ReferenceError: secondVar is not defined

Things to keep in mind when defining scope

Variables created without const, let, or var keywords will be globally-scoped, regardless of where they are in your code.

const greeting = 'Hey guys'; // global scope
holiday = 'Thanksgiving'; // global scope

if (true){
  lastName = 'Cortez'; // global scope
  let firstName = 'Allison'; // block scope
}

lastName;
// => "Cortez"
firstName;
// 'ReferenceError'

Generally, you should never use global variables.

For example, say you're storing sensitive information...

function userAccount(){
  password = 'secretPassword';

}

password;
// => "secretPassword"

In our example, we probably wanted our password variable to have a function scope.. BUT since it had global scope, we got access to sensitive information when we shouldn't have.

It's best practice to make variables and functions available only where they're needed.

MDN Scope

My first month as a post-graduate from bootcamp

Allison Cortez — Sun, 15 Nov 2020 16:55:48 +0000

It's been about a month since I graduated from the Flatiron School. Even though it's only been a few weeks, I feel that I have learned so much in my post-grad journey!

I've compiled a list of resources, general tips, and broken down some habits that have worked for me in my first month since graduating. My hope is that this is insightful or even helpful for others in a similar position.

Productivity/Tracking

RESOURCE: Google Sheets

Tracking my progress has been essential for me. This has helped me stay organized and keep up with my goals for the week.

I keep track of jobs I've applied to, jobs I plan to apply to for the week, and any interviews or meetings/calls I've had with potential employers.
I TRY to code every day and write at least one blog per week.

Learning, Refreshers, and Games to keep coding and keep learning.

This is tailored toward the front-end.

CSS Tricks
MDN
Frontend Masters
Javascript 30
Flexbox Froggy
Udemy, Modern React with Redux 2020 update
DuckDuckGo - an obvious one. If I don't know something, I take the time to find the answer.
MAKING THINGS AND BREAKING THEM, FIXING THEM, THEN ADDING MORE FEATURES AND REPEATING THIS PROCESS- Really this bullet should be at the top.

Community

Community has been so crucial in my post-grad journey. I would highly recommend getting involved in your local tech community, going to virtual meetups, talking with people in the industry.

WomenWhoCode

virtual meetups, job boards, and Slack spaces. See if there is one for your specific city!

Techqueria Slack

a 501c3 nonprofit that empowers Latinx professionals with the resources and support that they need to thrive and become leaders in the tech industry. They have the most active slack I've ever been apart of, and everyone is so supportive!

Diversify Tech

job board for women, minorities, and other underrepresented groups

CoLabs

Detroit Labs Developer community. Meet once a month, great group of individuals! :)

Interview Prep

Nothing really new here, It's what everyone says helps and honestly, everyone is right.

General Tips

be humble, be kind, be genuine. At the end of the day, we're all just humans trying to survive 2020.

Final Thoughts

Even though I am not speaking as a person who HAS landed their first dev role, I wanted to be open about my process, which I feel is equally as important. I hope it's helpful for others in the same position right now.

What's helped you along your journey?