DEV Community: Norris Chebl

4 Tips for Beginners (and maybe even experts)

Norris Chebl — Mon, 25 May 2020 23:54:45 +0000

1. Set a Clear Intention

The tech world is so large, you may not know exactly what you want to get into first. Frontend? Backend? Websites? Apps? Data Science? AI? Machine Learning?

I know it's kind of cheesy, but ask yourself WHY you want to learn how to code. Is this just a hobby, or do you want to this into a high-paying career? Do you want to work for a startup or a large corporation? Do you want to be an educator or teach online? Do you want to start you own tech business?

What's your plan? Being clear about what you want to do in the long run will not only help you choose the right technologies to learn but save you from spending too much time learning technologies that are nonessential for your goals.

It's easy to get lost in all of the technology. I see a lot of programmers spreading themselves too thin such as trying to learn Python while learning Ruby and Java or picking up Vue when they've barely scratched the surface with React.

I suggest specializing in 1-2 languages and 1-2 frameworks to begin. Put in the hours and strive to become an expert with a few things things versus a beginner with many.

Focus on your strengths and what you enjoy. Regardless of what you decide to commit to, you're going to face challenges you may not expect. That's why it's critical to have a strong and clear intention when beginning your programming journey.

2. Practice the Fundamentals

"I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times." - Bruce Lee

Before learning any languages, I highly recommend studying data structures and algorithms. Many developers will confirm that you may not directly use any algorithms at your job, but studying algorithms is not necessarily about just solving those problems. It's about understanding the fundamentals behind computer science.

Understanding concepts such as time and space complexity help you write more quickly executed code that takes up the least amount of memory. Whether you work at a startup or large business or even start your own company, you want to develop a product that can scale while minimizing costs and maximizing usability.

On top of all of this, it'll be a lot easier for you to get a job.

Study your algorithms and data structures - everyday for at least 1-2 hours. Here are my favorite resources:

The Fundamentals: MIT OpenCourseWare Introduction to Algorithms
Practice Coding Problems: LeetCode
Practice Mock Interviews: Pramp
Interview Prep Kit: HackerRank

3. Rest

the law of diminishing returns (n): used to refer to a point at which the level of profits or benefits gained is less than the amount of money or energy invested

Sometimes projects are so exciting, all you want to do is work on them. Other times, you're just stuck on fixing a bug or solving a problem. In both cases, it can be really easy to spend way too long on one thing.

There have been days where I've literally forgotten to eat while coding. I would go 8-10 hours straight, and my whole day would go by in the blink on an eye. There have been many times where I would spend hours trying to fix a bug, take a 1 hour break, come back and fix it within 5 minutes.

Now that I implement longer breaks and more sleep, I'm able to get the same amount of work done in 5 hours than I would in 8-10 hours. This is because of the law of diminishing returns. If you look at the mind as a points system (kind of like HP in Pokemon), we only have so many "focus points" or "problem solving points" for each day. Use them wisely.

In addition to being able to greater focus and productivity, it's just not healthy to code for that long. If you haven't already, you could start getting headaches, lack nutrition and struggle falling asleep. It's not fun.

4. Have Fun

Coding can get repetitive and even boring. You might sometimes need to spend 5 hours on re-styling a page or 2 days on fixing a bug that only required 1 line of code. It can get frustrating, so it's good to remember to build something you enjoy.

I understand the struggle of just getting through your programming class ot trying to find your first job. Do what you have to do. But at the same time, build side projects you're excited about and apply for companies with a product or service you actually care about.

Play the long game. If you're just learning how to code so that you can get a high-paying job... that's actually really awesome, that's why I started too. But I still highly suggest having a long term plan and setting yourself up for a career you can look forward to. Something you're willing to face the challenges with and learn a lot along the way.

Multiple Frontends with AWS Amplify

Norris Chebl — Mon, 18 May 2020 20:27:46 +0000

Goal

Build a React content management system that persists data (videos, images, etc.) to multiple React Native mobile apps.

Utilizing the following AWS Services for the backend:

Hosting: Amplify Console
Database: DynamoDB
User Authentication: Cognito
Storage: S3

Utilizing React for the website and React Native for the mobile apps.

Step 1: Create your GraphQL API

Run the following command:

amplify add api

Edit your schema:

type User 
@model(
  queries: { get: "getUser" },
  mutations: { create: "registerUser", update: "updateUser" },
  subscriptions: null
) {
  id: ID!
  username: String!
  email: String!
  registered: Boolean
  avatar: S3Object!
  createdAt: String
}

type Post @model @searchable @auth(rules: [{ allow: owner, identityClaim: "sub" }]) {
  id: ID!
  name: String!
  description: String!
  tags: [String]
  thumbnail: S3Object!
  video: S3Object!
  owner: String
  createdAt: String
  updatedAt: String
}

type S3Object {
  bucket: String!
  region: String!
  key: String!
}

Deploy the API:

amplify api push

You should now have a graphql folder in your project that lists all of your queries, mutations and subscriptions.

You can view your database in the DynamoDB dashboard.

Step 2: Add Authentication

amplify add auth

Create user groups:

❯ Manual configuration

Do you want to add User Pool Groups? (Use arrow keys)
❯ Yes

? Provide a name for your user pool group: Admins
? Do you want to add another User Pool Group Yes
? Provide a name for your user pool group: Editors
? Do you want to add another User Pool Group No
? Sort the user pool groups in order of preference …  (Use <shift>+<right/left> to change the order)
  Admins
  Editors

You can view user information in the Cognito dashboard.

Configure your Amplify application:

npm install aws-amplify

In App.js:

import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

For more details on adding the Authentication UI, read the Amplify docs.

Step 3: Add Storage

amplify add storage

? Please select from one of the below mentioned services (Use arrow keys)
❯ Content (Images, audio, video, etc.)
  NoSQL Database

amplify push

Note: If you would like public read access for your files, be sure to set the appropriate permissions.

Configure:

import Amplify, { Storage } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

You can view your files in the S3 dashboard.

For more details on adding Storage, read the Amplify docs.

Step 4: The fun part

Now let's connect the backend you created to a different frontend.

Go to your Amplify Console.
Click on the app you're working on.
Click "Backend Environments".
Click "Edit Backend".

Copy the line of code that looks like this:

amplify pull --appId ************* --envName *******

and run that command in your new frontend environment.

Important: Choose ‘No’ when asked if you want to modify or add new categories to your backend. Choosing ‘Yes’ will work, but it is highly recommended that you don't have your backend stored in two separate repositories for this can lead to unintended consequences with multiple sources of truth.

You will now have access to your amplifyconfiguration folder in src. This means you can now use the following in this second frontend:

import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

You can now also copy over the graphql folder from your initial frontend over to your second frontend to utilize all of your queries, mutations and subscriptions.

Note: Whenever updating your API in your backend, make sure to copy over the new graphql files into your new frontend.

You did it!

You can now use AWS Amplify to access your backend data with multiple frontends. This can especially be useful when you need to share data between web and mobile.

If you have any questions, please feel free to send me a message or ask in the comments!

Modeling Relationships - Join Table - GraphQL - AWS Amplify - AppSync - React

Norris Chebl — Mon, 11 May 2020 23:00:59 +0000

Goal

Join 2 tables in a GraphQL schema.

If you are using AWS Amplify and AppSync with a GraphQL API and have experienced some difficulty with modeling your relationships, this is a very simple method to connect your tables.

Creating the GraphQL API

Use this simple command:

amplify add api

For more detailed steps with creating your GraphQL API, check out the AWS Amplify docs.

Tables

First, let's create our the two tables we'd like to join:

Playlist:

type Playlist @model {
  id: ID!
  name: String!
  description: String!
  owner: String
  createdAt: String
}

Post:

type Post @model {
  id: ID!
  name: String!
  description: String!
  thumbnail: S3Object!
  video: S3Object!
  owner: String
  createdAt: String
}

Relationships

A Playlist has many posts.
A Post can belong to many playlists.

We must create two 1:Many relationships which will help us achieve the Many:Many relationship we need to join playlists and posts.

Let's now create the necessary 1:Many relationships with connections in each table:

Playlist:

type Playlist @model {
  id: ID!
  name: String!
  description: String!
  owner: String
  createdAt: String
  posts: [PlaylistPost] @connection(name: "PlaylistPost")
}

Post:

type Post @model {
  id: ID!
  name: String!
  description: String!
  thumbnail: S3Object!
  video: S3Object!
  owner: String
  createdAt: String
  playlists: [PlaylistPost] @connection(name: "PostPlaylist")
}

The Join Table

We can reference these connections with a third table (remember to reference these connections with the same name):

type PlaylistPost @model {
  id: ID!
  createdAt: String
  playlist: Playlist @connection(name: "PlaylistPost")
  post: Post @connection(name: "PostPlaylist", sortField: "updatedAt")
}

Deploy your API (this could take a few minutes):

amplify push

Configure Your Application

Install the required AWS Amplify package.

npm install aws-amplify

Import your AWS Amplify files in App.js:

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

Now we have access to all GraphQL query, mutation and subscription operations.

Adding a Post to a Playlist

Now that we have our two tables joined by the PlaylistPost table, we can add a post to a playlist by simple creating a new PlaylistPost.

AWS Amplify has built-in API and GraphQL functions you can use by importing them from aws-amplify. I highly recommend reading the AWS Amplify docs.

import { API, graphqlOperation } from 'aws-amplify'
import { createPlaylistPost } from '../graphql/mutations'

const add = async (playlist, post) => {
  try {
     // Specify the id of the post
     // and the playlist you want to add that post to
      const newPlaylistPostInput = {
          playlistPostsPlaylistId: playlist.id,
          playlistPostsPostId: post.id
      }
      const updatedPost = await API.graphql(graphqlOperation(createPlaylistPost, { newPlaylistPostInput }))

  } catch(err) {
      console.log(err)
  }
}

Removing a Post from a Playlist:

import { API, graphqlOperation } from 'aws-amplify'
import { deletePlaylistPost } from '../graphql/mutations'

const remove = async (selectedItem) => {
  try {
     // Specify the id of the PlaylistPost you want to delete
      const input = {
                id: selectedItem.id,
            }
            const removed = await API.graphql(graphqlOperation(deletePlaylistPost, { input }))
      }
  } catch(err) {
      console.log(err)
  }
}

You Did It!

You have successfully created a join table in your GraphQL schema as well as used AWS Amplify GraphQL operations to connect a post to a playlist. Now you can use these same steps to join other tables with similar relationships.

Note: For more guidance, I definitely suggest (for the 4th time) to read through the AWS Amplify documentation.

Two Sum Algorithm - JavaScript Tutorial/Solution

Norris Chebl — Thu, 02 Jan 2020 20:19:39 +0000

The Problem

Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

Example:

Given nums = [2, 7, 11, 15], target = 9,

Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].

Basic Solution

The brute force way of solving this would be looping through the array twice and adding up one number from each array to see if it equals the target. This is what it that looks like:

let twoSum = (nums, target) => {
    for(var i = 0; i < nums.length; i++) {
        for(var j = i + 1; j < nums.length; j++) {
            if(nums[i] + nums[j] == target) {
                return [i,j]
            }
        }
    }
}

This is inefficient simply because we have to do double the amount of work when looping through the same array twice. Although this will always work, as the array gets larger, the execution gets exponentially slower.

So let's take a look at how to go through this array only once.

Efficient Solution

First off, we need a way to keep track of all of the numbers we've already looked at as well as what numbers we need. We're going to do this by using a prevValues object to store our values which allows us to look at our numbers instantly without having to loop through the array again to see if the number exists. Take a look:

let twoSum = (nums, target) => {
// Create object to store values
  const previousValues = {}
  for (let i = 0; i < nums.length; i++) {
    const currentValue = nums[i]
    const neededValue = target - currentValue
// Store needed value as a key in the object
    const index2 = previousValues[neededValue]
// Check if we have an index that is equal to our needed value 
    if (index2 != null) {
      return [index2, i]
    } else {
// Store index for current value
      previousValues[currentValue] = i
    }
  }
}

Epic Games Launcher Not Working on Mac

Norris Chebl — Mon, 30 Dec 2019 19:45:53 +0000

Decided to learn how to make some games today, and I immediately ran into a problem downloading Unreal on my Mac today.

The Epic Games Installer just kept getting stuck in a loop of updating and restarting. I found a solution (although I don't really know why it's working, but hey, it works).

Instead of trying to boot up the installer normally by double clicking the icon on your Desktop, do this instead:

- Go to your Applications folder
- Right click
- "Open"

Again, I don't completely understand the difference, but I thought I would save Mac users some trouble by sharing what worked for me.

Side note: I'm looking forward to starting my journey with C++ programming as well as sharpening up my Javascript skills and sharing what I learn along the way. Stay tuned for more posts.

Using Rails API With React

Norris Chebl — Tue, 03 Dec 2019 21:06:38 +0000

Maybe you started using the traditional MVC (Model, View, Controller) outline for your rails apps. But now that you're using a frontend framework like React, you simply want to store your data and implement most of your logic in your backend. Great.

So what does that mean? And how do you do that?

You can use a Rails API. This simply means that you can render a bunch of JSON files that can communicate with your frontend.

For example, say you want to display a page with all of your books. You would typically have something like this in your controller.rb:

class BooksController < ApplicationController
   def index
     @books = Book.all
   end
end

and something like this in your index.html.erb:

<% @books.each do |book| do %>
     <%= book.title %>
<% end %>

Now that you're using React, you don't need to use views anymore. React is your new "views."

Let's go back to your controller. Now, we can render a JSON file with all of your books and their attributes (you will see why you need this in just a minute):

class BooksController < ApplicationController
   def index
     books = Book.all
     render json: books
   end
end

Don't forget your routes:

  resources :books

If you run our server ("rails s" in your terminal), you will see a JSON file that looks like this:

{
    "books": [
              {"title": "Harry Potter",
               "author": "JK Rowling"
              },

              {"title": "The Cat in the Hat",
               "author": "Dr. Seuss"
              }
             [
}

Now you can go to your frontend, and fetch this API data to use how you'd like. For example:

fetch('http://localhost:3000/books', {
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            Authorization: token
        }
    })
      .then(res => res.json())
      .then(data => this.setState({
             allBooks: data
           })
      )
    };

If you console.log(allBooks), you should see that you now have access to all of that data in your frontend.

What's really awesome about this is that you can handle most of the heavy logic required to showcase your data in your backend and then simply fetch the data when necessary.

You can even set up different urls to hold specific data by using params in your controller.

  def index
    if params[:release_month]
      books = Book.by_release_month(params[:release_month])
      render json: books
    else
      books = Book.all
      render json: BookSerializer.new(books)
    end
  end

This is the ".by_release_month" method we used in our Book model:

class Book < ApplicationRecord
  belongs_to :author

  def self.by_release_month(release_month)
    books = Books.filter{ |book| 
      release_month == Date::MONTHNAMES[Date.today.month]
    }
  end

end

This is how we can fetch these books with the new params in React:

fetch('http://localhost:3000/books?release_month={month}')
    .then(res => res.json())
    .then(data => { 
      // Do what you want
     })

4 Must Know JavaScript Array Iteration Methods

Norris Chebl — Wed, 13 Nov 2019 16:39:18 +0000

Working with arrays in JavaScript used to be really annoying and complex. Fortunately now, there are a bunch of amazing JavaScript array methods that just make life easier. In this post, I will be covering the 5 most important JavaScript array iteration methods.

.forEach

This is a fundamental array method concept. If you can understand how this one works, you're gonna be able to learn the other methods a lot more easily.

This method is basically a for loop that takes in a function with a parameter and outputs that same data.

For example:

const array = ['a', 'b', 'c'];

array.forEach(letter => {
  console.log(letter);
});

// expected output: "a"
// expected output: "b"
// expected output: "c"

.map

This method is also really simple. It allows you to take one array as a parameter and convert it into a new array. You'll find yourself using this method a lot.

For example:

var array = [1, 4, 9, 16];

// pass a function to map
const map = array.map(x => x * 2);

console.log(map);
// expected output: Array [2, 8, 18, 32]

.find

This allows you to find a single object within an array. It takes in a parameter and returns the first element in the array that returns true.

For example:

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// expected output: 12

.reduce

This method operates on an array, and reduces it to a single value.

It takes in two arguments:

A callback function with 2 parameters:
- accumulator: the starting value
- currentValue: each element in the array
The initial value for the accumulator.

The return function is then stored in the accumulator.

For example:

const array = [1, 2, 3, 4];
const reduce = array.reduce((accumulator, currentValue) => {
  accumulator + currentValue;
}, 0);

// 1 + 2 + 3 + 4
console.log(reduce);
// expected output: 10