# Heroku(Node.js deploy)

It’s been a long time coming, but I am finally ready to start my portfolio website. So I thought to myself what better way to figure out how to deploy an app then to blog about it.

## Getting Started

In order to get started, head on over to Heroku, their dev center has a lot of helpful information on how to deploy an application depending upon what language your going to use. In my case I will be using Node.js for my portfolio. Heroku also assumes that you already have a free Heroku account set up, as-well as Node.js and npm installed.

# Library Vs. Framework

OK… lets talk, I feel as a new developer this concept is a little weird to wrap your head around…. at-least for me I know it is. Library vs Framework? Whats the difference? and how can you go about leveraging these to create awesome projects.

# sortedSquareArray

Recently been getting back into algorithms after taking a little break, and ran across the sortedSquareArray. I thought we could break this down a bit and find the best way to solve it.

# Problem Statement

Given an integer array `nums` sorted in non-decreasing order, return an array of the squares of each number sorted in non-decreasing order.

Example 1:

`Input: nums = [-4,-1,0,3,10]Output: [0,1,9,16,100]Explanation: After squaring, the array becomes [16,1,0,9,100].After sorting, it becomes [0,1,9,16,100].`

Example 2:

`Input: nums = [-7,-3,2,3,11]Output: [4,9,9,49,121]`

Approach:

At first glance this seems simple enough, we simply just need to square each number and…

# To Do Part 2

Last week I started a blog about making a todo list, and we got our app basic setup. To review you can head here, this week I thought we add a little bit more functionality to it. Lets recap what we have so far though…

`import React, { useState } from 'react'function Todo({ todo }) {  return (    <div className='task'>      {todo.content} //shows our todos   </div> )}function App() {const [todos, SetTodos] = useState(     //initial state[  { content: "Get Out Of Bed" },  { content: "Brew Coffee" },  { content: "Make…`

# To Do List Part 1 (React)

Let’s build something this week. Most weeks I have been blogging, revolve around me picking a method or state management pratice and elaberate on it. This time around I thought maybe we take some of what I have gone over in pass blogs, and look at how we can use some of that and implement it in a practical use application, in this came a to do list.

## Getting Started

Alright lets do this, to make it easy will build this all in our App.js, but you could always seperate your components into seperate .js files…

`npx create react-app my-todo-listcd my-todo-listnpm start…`

# Map()

Lets talk Map method. This method is invaluable when it comes to iterating over an array to get your desired result. The map() method creates a new array that is populated with the results of the provided function on every element in the calling array.

# Examples

Alright, now we get the gist of what it is….lets take a look at a couple examples that make this method so useful!

`const numArray = [2, 4, 6, 8];//function callconst numMap = numArray.map(x => x + 4);//return callconsole.log(numMap);//[ 6, 8, 10, 12 ]`

This is a pretty minimal example…

Try and Catch

Last week I got into Axios, how to get started and how it can be used to improve our fetch requests. This week I thought I would expand upon this a little bit and look at how we can UP our promise game by adding error handling with try and catch.

# Try and Catch

So what is try and catch? well its just like it sounds!

`try {//axios.get ..... } catch (error) {//error handling ...}`

First, with our try block we are executing our fetch call, in this case axios. If this axios call is successful then…

# Axios

For a developer, having access to API’s in order to create amazing websites is a critical part of what we do. Usually pulling information from these treasure troves involved some kind of fetch() call to retrieve the information via JSON, and from there we parse the JSON for the information we need.

Example:

`fetch('https://jsonplaceholder.typicode.com/todos/1')  .then(response => response.json())  .then(json => console.log(json))`

returns the follow…

`{	"userId": 1,	"id": 1,	"title": "delectus aut autem",	"completed": false}`

This way has been tried and true, but what if there was a better way? Introduce Axios, a promise based HTTP client for the browser…

BY far one my favorite methods in JavaScript has been using the spread operator. The spread operator allows iteration on array expressions or strings to be expanded upon. Great use case for this is lets say have a list of scores, and you simply want to return those scores, you can use the spread operator…

`let testScores =[75, 90, 80, 60];let storedScores = [...testScores];console.log(storedScores);  // will return [75, 90, 80, 60]`

Now lets look at another example, lets say we simply want to return a String into a list.

`let greeting = 'Good Morning User';let returnGreeting = [...greeting];console.log(returnGreeting);//will…`

# LocalStorage

You ever just want to build a project without having to go thru the hassle of setting up a backend to store all your inputs? Enter localStorage. LocalStorage allows developers to access read-only objects saved across the browser session. The great part of localStorage is that unlike sessionStorage which gets cleared every time the page reloads, localStorage will not clear unless you clear it yourself or have a function that does so. …

## Gabriel Castro

Full Stack, Software Engineer. Focus in Rails, JavaScript and React.

Get the Medium app