devsurvival

Web Dev Bootcamp ∙ Request Routing And Building an API

Fri, 08 May 2020 22:40:02 GMT

Goals

Learn how HTTP request works
Requesting routing with Express JS
Learn what an API is and how to build one

What is an HTTP Request

HTTP requests are just messages sent between an HTTP Client and a server.

The HTTP Client is typically a website or anything that is able to send a HTTP request

The HTTP server is a backend application that is able to receive a HTTP request, authorize the request, and then send some response back to the HTTP Client

How does HTTP Request Works

A HTTP request consists of 3 things:

1. The request line - this describes the request method and the request url

Request Methods:

GET - getting some data from a server
POST - posting or sending some data to a server
PUT - update some data in the server
DELETE - Delete some data in the server

The request url is the access point that the server exposes to the HTTP Client

2. Request Headers

request headers are additional information passed along with the HTTP request

Some examples of headers:

Accept-Charset
Accept-Encoding
Accept-Language
Authorization

3. Finally we have the request body or message

This is just the main content that we want to pass to the server from our HTTP client

Building an HTTP Server with Express

Let’s create our server first

Create a new project folder

mkdir expressAPI
cd expressAPI

Install Express and Create our server

npm init

npm install express

touch index.js

inside of the index.js file, add the following

var express = require("express")
var app = express()
const PORT = 3000
app.listen(PORT, () => {
  console.log(`listening on port ${PORT}`)
})

Run the server

nodemon index.js

Creating Routes

Routes are like request url that you create to receive HTTP requests

Inside of the index.js file

app.get("/", (req, res, next) => {
  res.status(200).json("Hello from express server!")
})

This is telling our server that we are allow to receive a GET request to the root url and return a response with message : “Hello from express server!”

Testing our route

There are 2 ways to test your routes

Using postman - an HTTP Client that allows you to send requests to your server

Web Dev Bootcamp ∙ Introduction to Node and Express JS

Thu, 07 May 2020 22:40:02 GMT

Goals

Explain what NodeJS is
Create a server using NodeJS

What is NodeJS

NodeJS is a server runtime that allows you to run javascript code on the server.

Prior to NodeJS, all Javascript code had to be run in the browser using the V8 engine provided by the browser

Javascript became so popular that ideas of writing Javascript without a browser began circulating.

In response, a group of very capable people designed NodeJS to enable developer to write JavaScript on the server.

They also open sourced the technology, so new features and bug fixes are added every day

Nodejs Libraries

NodeJS is a low level framework that allows you to create a server. Hence, there are libraries that sits on top of NodeJS that makes sever management much easier

There are many libraries to choose from, such as Express JS, Hapi, SailJS, and Meteor JS.

In this course, we will be using Express JS

What is Express?

Fast, unopinionated, minimalist web framework for Node.js - expressjs.com

Express is simply a wrapper for NodeJS that makes developing in Node Js super easy

Installing Node

Window - use the installer

Mac - use brew to install Node and NPM

brew update
brew install node

Linux - Install Node PPA and then isntall Node using terminal

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

At the time of writing this the LTS version was 12.x.

Then install node by running

sudo apt install nodejs

check if node and npm were installed successfully

node -v
npm -v

Creating Our First Server

create a new project folder

mkdir firstNodeServer
cd firstNodeServer

Add a package.json by running

npn init

there will be a series of questions about the project. Feel free to use the defaults

The package.json is a json file that contains a list of packages required to build our project

Installing the Express package

The Express package is the npm package that we need to create a node server using the Express JS framework

npm install express

Create a new index.js file

touch index.js

This file will contain our server initialization code to create a new server

Inside the index.js, add the following code

var express = require("express")
var app = express()
const PORT = 3000
app.listen(PORT, () => {
  console.log(`listening on port ${PORT}`)
})

Here we are importing the Express package that we just installed using var express = require('express').

Then we are creating a new app using express by calling var app = express()

Next we have a const PORT that will tell our server to listen on a specific port

Finally we are telling our app to listen on PORT = 3000 and console.log a message when the app is listening on that port

Start our server

There are two main ways of starting our server

Using standard node command. However, each time you make a change to your files, you have to restart the server

node index.js

Using nodemon - a small npm package that allows you to hot-reload your server each time a change is detected

install by running:

npm install -g nodemon

here the -g flag is telling npm to install nodemon globally => meaning we can run nodemon in any directory!

Run our server again by using

nodemon index.js

try changing the message in the console.log() to something else. Nodemon will automatically restart the server for you!

What’s Next?

Understand request routing and building an API

Web Dev Bootcamp ∙ Learn Git

Wed, 06 May 2020 22:40:02 GMT

What is Git?

Git is a version control software that allows you to keep track of changes to your project.

It allows you to keep a history of the changes you’ve made to a project

Why is this useful?

Bugs are typically introduced when new changes are introduced. Hence, being able to pinpoint when a bug occurred based on when the changes was made can be a time saver

You can also deploy your code to a remote server, such as Github, and other people can look at your code and contribute if they want to.

Installing Git

Window - use the installer

Mac - use the brew package manager to install

brew install git

Linux - use the terminal to install

sudo apt install git-all

Creating a new git repo

In your root project directory, run

git init

Cloning a repository

cloning a repository is like making a contained copy a repository for personal use

git clone LINK_TO_GIT_REPO

Stage, Commit, and Push

There are 3 stages to deploying your change to a remote server.

The first is staging.

Staging is the processing of adding changes to a file to a stage or an Index location

git add <filename>

you can also add all changes to the Index using

git add .

The second step is committing these changes

Committing a set of changes, is simply a way of saying : I really want to keep these changes

git commit -m "first commit"

Note: you have to include a message with every commit using the -m "your message goes here". The message should be descriptive of the changes you have made

You can also make multiple commits in a single workflow

Ideally, each commit should contain a set of related changes, such as a bug fix or a small feature

The final step is making your changes visible in the remote server

git push origin master

If this is a new repository that you created locally, you have to add a remote server first before pushing

git remote add origin <link to the server>

Branches

Every time you create git repo, it automatically generates a branch called the master branch.

Given the name, the master branch is the most valuable and should always be the most up to date

A branch is just a copy of another branch.

here is how you can create a branch

git checkout -b <name of your new branch>

Assuming that you are in the master branch, this command will create a new branch from the master branch.

You can create a branch from any branch; it doesn’t have to be your master branch

you can switch between branches using

git checkout <name of your branch>

You can check the available branches as well as the current branch that you are in using

git branch

The current branch that you are in will have an * before it

To switch back to the master branch, run

git checkout master

To delete a branch, run

git branch -d <name of branch>

Pushing a branch to the remote server

Did you noticed before how we push our changes to the remote server?

git push origin master

Here we are pushing the master branch to the origin server

you can check the servers linked to the git repo by running

git remote -v

Turns out, you can push other branches to the remote server

git push origin <name of your branch>

Pulling changes from remote branches

Let’s say someone else made some changes and pushed them to the remote server.

How do you get those changes? (Please don’t say copy and paste…)

What’s the opposite of push?

git pull

This will do a fetch and a merge into the current branch

Fetching is the process of pinging the remote server for new changes, but doesn’t actually pull the changes to your local repo

Merging Will attempt to merge the new changes with your local repo

Sometimes you want to merge some changes from one local repo to another repo

You can do that by running

git merge <destination branch>

This will merge the current branch into the destination branch

When to create a branch?

If you are working by yourself on a small project, then branching might not be necessary.

However, it does start making sense or even become essential when you are working in a collaborative environment on a large scale project.

Each person can work on a separate feature or a fixing a different bug at the same time.

There is no need to wait for a person to finish their part before you can start working on yours.

A good rule of thumb is that each feature should be its own branch, typically called the feature branch.

Stick to a consistent branch naming convention, such as

git checkout -b feature/adddeletefunctionality

Similar for bugs,

git checkout -b bug/pagedoesnotload

Git Status and Logs

Sometimes you want to check the status of your git repo, such as files that are staged, run

git status

You can also access the log by running

git log

What’s Next?

Introduction to node

Web Dev Bootcamp ∙ Learn Bash

Wed, 06 May 2020 22:40:02 GMT

What is Bash?

Bash is a command terminal where you can type in some command and your operating system will execute the command

Here is what a typical bash looks like

Common Bash Commands

ls

List all directories and files in a directory

ls

cd

Changing directories

cd myDirectoy
cd directory1/directory2/...

you can also navigate into multiple nested directories by typing a forward slash followed by the directory name

you can also go back one directory by typing cd ..

mkdir

Making new directories

mkdir myNewDirectory

touch

creating files

touch index.js

rm

removing files and directories

rm index.js
rm myDirectory

Note: you can only use rm myDirectory if the directory is empty.

To delete the directory including all files and sub directories inside of it use rm -rf myDirectory

More Information

there are a lot of commands, but these are the ones that you will probably used the most often

here is a good resource to learn more

What’s Next?

Learn git

Web Dev Bootcamp ∙ Learn Javascript Part 2 ∙ ES6

Tue, 05 May 2020 22:40:02 GMT

Goals

understand what ES6 is
Learn the most common ES6 features

What is ES6?

ES6 is the next version of Javascript following ES5. It was released in 2011 an introduced many useful changes for developers

ES6 Features

Let keyword

let is an alternative to var that allows you to scope a variable to a block as opposed to the global/function scope of a var

function fn() {
  var globalVar = 2
  if (true) {
    let blockVar = 3 // can only be accessed inside this if block
    console.log(globalVar, blockVar)
  }
  console.log(globalVar)
  console.log(blockVar) // will produce an error because blockVar is not been defined in the function scope
}

fn() // will generate error

const keyword

the const keyword lets us create variables that can only be assigned once and can not be changed

const myConst = "Dogs are great!"

myConst = "no they are not" // will generate an error because we are trying to change a constant

Arrow functions

Arrow functions are used to simplify how we write functions and to make them more concise

//traditional function

function double(num) {
  return num * 2
}

double(2) // 4

//rewritten using arrow function

var double = num => num * 2

double(2) // 4

Arrow functions are denoted by =>. On the left side we have the parameters and on the right side be have the function definition

There are several caveat we have to be aware of when using arrow functions

Multiple parameters require a () ex.

const singlePara = param1 => console.log(param1)

const multiplePara = (param1, param2) => console.log(param1, param2)

Function definitions that do not use {} are implicitly saying ‘return whatever is in the definition’

ex.

const double = num => num * 2 // since we are not using {} to encase the function definition, we are saying do num*2 and return it
const doSomething = () => ({
  name: "charlie",
  type: "dog",
}) // Not using {}, but since we are returning something that spans multiple line we are using ()
// Inside the (), we have an object {name : 'charlie', type: 'dog'} which will be returned

const fn = () => {
  // some code here

  return result
} // Now we are using {} to encase the function definition, so we have to add a return statement if we want to return something

We can also pass arrow functions to other function

var arr = [1, 2, 3]
// passing function using anonymous function
arr.map(function(currentElement) {
  return currentElement * 2
})
// the new way of doing things...
arr.map(currentElement => currentElement * 2)

classes

classes are part of OOP(object orientated programming) paradigm. This design insists that data should be represented as human readable objects or classes

Let’s learn how to create classes in Javascript

Declaring a class

class MyClass {}

Member variables and functions

class MyClass {
  name
  age
  constructor(n, a) {
    this.name = n
    this.age = a
  }

  toString() {
    return `name: ${this.name} age: ${this.age}`
  }
}

Here we have two public member variables name and age

We are initializing these members using the constructor. Each class can only have one constructor.

The purpose of the constructor is to initialized our object. Here we are assigning our name and age

We have a member function called toString() which prints the name and age of our object

Creating an object from class

var obj = new MyClass("devsurvival", 1) // we use the new keyword to create a new object and pass in the name and the age for the constructor
console.log(obj.toString()) // accessing the member function toString()
console.log(obj.name) // getting the name
obj.age = 2 // setting age

Setters/Getters and Private Members

There is a rule of thumb in programming that states that all member variables should be private and they can only be modified or accessed via setters and getters.

class MyClass {
  #name
  #age
  constructor(name, age) {
    this.#name = name
    this.#age = age
  }
  set name(n) {
    this.#name = n
  }
  get name() {
    return `name: ${this.#name}`
  }

  #myPrivateFunction() {
    console.log(
      "this is private and can only be accessed inside the class body"
    )
  }
}

var obj = new MyClass("devsurvival", 2)
obj.name = "charlie" // using setter to set the name
console.log(obj.name) // using getter to get the name
obj.#age = 2 // will generate an error
obj.myPrivateFunction() // will generate an error

Default

defaults allows to optionally pass in a parameter

function fn(value = 0) {
  console.log(value)
}

fn() // 0
fn(1) //1

For of loop

allows you to loop over the elements on an array without explicitly knowing the length of the array

var arr = [1, 2, 3]
for (let v of arr) {
  console.log(v)
}

// prints 1, 2,3

For in loop

looping through the keys of an object

var object = { name: "devsurvival", age: 2 }

for (let key in object) {
  console.log(object[key])
}

Tempate Strings

You can embedded variable inside of strings without using messy string concatenation

//traditional Javascript

var str = "hello " + name + "You wanted " + donuts + " donuts"

// ES5

var str = `hello ${name}. You wanted ${donuts} donuts`

variables used in template string are encased in a ${}

Destructuring

destructing allows you parse an object and get certain keys

let’s say you want to get the key: ‘name’ from the object, traditionally you would do obj.name each time you want to access the name

Wouldn’t it be better to parse the name once and use it? That is what destructuring allows you to do

var obj = { name: "devsurvival", age: 2 }

const { name } = obj

You can also provide an alias for a key!

var obj = { name: "devsurvival", age: 2 }

const { name: nameAlias } = obj
console.log(nameAlias) // nameAlias is an alias for the name key

Spread Operator

The spread operator is used to spread an array or an object. Let me explain using an example

var arr1 = [1, 2, 3]
var arr2 = [4, 5, 6]
// let's say we want to append arr2 to arr1
arr2.forEach(currentElement => arr1.push(currentElement))

// using spread operator, we can right this more concisely

var arr1 = [...arr1, ...arr2] // we are spreading the values of each array into a new array

How About Objects?

you can also spread objects!

function addKeys(obj1, obj2) {
  return { ...obj1, ...obj2 }
}
var obj = { name: "devsurvival" }
var obj2 = { age: 2, favoriteFood: "donut" }
addKeys(obj, obj2)

here we created a function addKeys that takes the key value pairs in the second object and spread them into the first object

Rest operator

The rest operators is kinda like spread counter part. Instead of spreading things, it gathers them!

let’s see some use cases

we can use rest operators in functions to pass a variable number of parameters

function fn(firstParam, ...otherParams) {
  console.log(firstParam)
  console.log(otherParams)
}

fn(1, 2, 3, 4)

// prints 1
// prints [2,3,4]

It can also be used to gather the keys in an object

const object = { name: "devsurvival", age: 3, food: "chicken nuggets" }

const { food, ...restOfTheKeys } = object

// food = 'chicken nuggets'
// restOfTheKeys = {name: "devsurvival", age: 3}

import and export

importing and exporting are how we share codes across multiple files

// file1.js

//named export
export function fn() {
  console.log("function from file1")
}

// file2.js

import { fn } from "file1.js"

fn()

default export

// file1.js

export default function() {
  console.log("another function from file 1")
}

// file2.js
import fn from "file1.js"

fn()

Sets and Map

Sets

are just a list of unique things. A set can contain numbers and strings

var set = new Set()
set.add(1)
set.add("one")
set.add(1) // will not be added again since 1 already exists in the set

// set = [1, "one"]

Map

Maps are like dictionaries that allows you to search for a key and get the value based on the key

var map = new Map()
const key = "name"
map.set(key, "devsurvival")
map.get(key) // name: 'devsurvival'

setTimeout and setInterval

setTimeout allows you to execute some code after a specified amount of milliseconds has passed

const timeoutId = setTimeOut(() => {
  console.log("one second has passed!")
}, 1000)

// it will print out the message after one second has passed

What if something happens and we want to cancel the setTimeout?

const timeoutId = setTimeOut(() => console.log("one second has passed!"), 1000)

clearTimeout(timeoutId) // each setTimeout() returns an id of the timeout which is used for clearing/cancelling the timeout

setInterval is used to perform some operation with a given time interval

const setIntervalId = setInterval(
  () => console.log("another second has passed"),
  1000
)

// this will print the message every second

Promises

promises are asynchronous operations meaning they do not block the program execution after being invoked.

This is commonly used when fetching data from some external source which is unpredictable in how long it takes to respond. It could be instantaneous, 2 seconds, or a couple of hours. We just don’t know

console.log("doing something...")
console.log("fetched data: ", fetchData()) // this is asynchronous
console.log("finished doing something...")

//output:

// "doing something..."
// "finished doing something..."
// "fetched data: ..."

In the program above, Javascript will not wait for fetching the data to complete before printing ‘finished doing something…’

How do we wait to get a response before proceeding?

console.log("doing something...")
fetchData()
  .then(data => {
    console.log("fetched data: ", data)
    console.log("finished doing something...")
  })
  .catch(error => {
    console.log("there was an error :( ", error)
  })

We use .then() and .catch(). .then() will wait for fetching data to complete and pass the result into the data parameter

.catch() will catch any error that is returned

Creating a Promise

var newProm = new Promise((resolve, reject) => {
  // do something ...
  if (2 === 2) {
    resolve(2)
    // if error
    reject("sorry")
  }
})

newProm.then(res => console.log(res)) // prints 2

Async and Await

What happens when we have a series of request that depends of the result of the previous request

using .then()

function makeRequests() {
  request1().then(result => {
    request2(result).then(result => {
      request3(result).then(result => {
        request(4).then(result => {
          //...
        })
      })
    })
  })
}

this nesting is hard to read and harder to debug.

To avoid this, they introduced Async and Await

Same implementation using Async and Await

async function makeRequests() {
  const result1 = await request1()
  const result2 = await request2(result1)
  const result3 = await request3(result2)
  const result4 = await request4(result3)
}

To use await to wait for our requests, we have to mark the function with async

Cool right? But there are some caveats when using async functions:

All functions marked with async returns a promise
Don’t stick an await in front of every promises! If you don’t really care about the return value, just let them be asynchronous.

Error Handling

How do we handle errors?

try {
  // do something that can cause an error
  // let's see.. I know! let's reference a variable that doesn't exists!'
  value / 0
} catch (err) {
  console.log(err)
}

What’s Next?

Start learning bash commands

Become a Web Developer With a Free Web Dev Bootcamp!

Mon, 04 May 2020 22:40:02 GMT

Start on your journey to become a web developer!

I have been working on a web development bootcamp to try and share some of the knowledge about web development that I have acquired over the years.

It is nothing fancy, just a series of blog posts covering a certain aspect of web development.

If this bootcamp or part of it helps at least one person, then it would have been worth it.

learn more

Web Dev Bootcamp ∙ Learn Javascript Part 2 ∙ ES5

Mon, 04 May 2020 22:40:02 GMT

Goal

Here we will learn some new Javascript features that were introduced in ES5 that will be useful when developing our React and Nodejs apps.

What is ES5

ES5 is a set of new features added to Javascript in 2009 to enhance productivity and to enable certain features natively without the need to hack it or code it out yourself

ES5 Features

Note: all of these features can be implemented using basic Javascript, but they exists to save you time.

We will walk through a couple of these features and see how they can be implemented using basic Javascript. I am not suggesting that you should develop that way , but it can shed light on how these features were constructed

String.trim()

allows you to trim whitespaces from the start and end of a string.

var str = " Hi There   "
var trimmedStr = str.trim() // "Hi There"

Array.isArray()

checks if a variable is an array

var arr = []
var str = "[]"

Array.isArray(arr) // true
Array.isArray(str) // false

Array.forEach()

loops through the elements on an array and run some code for each item, but it does not change the original array or return anything

var arr = [1, 2, 3]
arr.forEach(function(element, index, arr, thisArg) {
  if (element === arr[index]) {
    console.log(element)
  }
})

forEach is part of the Array prototype object and as such, you can invoke forEach using the . operator on any array [].forEach()

What is the function that we are passing to forEach ?

It is an anonymous function that accepts four parameters:

the current element
the index of the current element
the entire array
finally the thisArg

For most of your work, you will be concerned with only the first three parameters.

Let’ try to recreate the forEach() function using regular Javascript

function forEach(arr, fn) {
  var i = 0
  while (i < arr.length) {
    fn(arr[i], i, arr, this)
    i++
  }
  return
}

Can you figure out what is happening in this function…

Here is what is happening:

we declared a function called forEach(arr, fn) that accepts an array and a function
we loop through each element in the array using a while loop
in each iteration we are invoking the function fn that we passed in and passing the current element arr[i], the current index i, the array arr , and a this reference
once the loop terminates, we return nothing

Let’s trying calling it

forEach([1, 2, 3], function(currentElement, currentIndex, array, thisArg) {
  console.log(currentElement, currentIndex)
})

/* 
Output:
1 0
2 1
3 2
*/

Array.map()

Array.map() is similar to Array.forEach(), but it maps each element of the array to a new item and returns a new array with those new items

var newArray = [1, 2, 3].map(function(
  currentElement,
  currentIndex,
  array,
  thisArg
) {
  return currentElement * 2
})

// newArray = [2,4,6]

Here we are mapping over an array, and returning each value doubled

Array.filter()

Used when trying to filter certain elements from the array

var filteredArr = [1, 2, 3].filter(function(
  currentElement,
  currentIndex,
  array,
  thisArg
) {
  return currentElement > 2
})

// filteredArr = [3]

When filtering an array using Array.filter(), if the function that we pass in returns true, then that element is included in the new array. otherwise, it is excluded from the new array.

Array.reduce()

This one is a little complicated because there are many ways to use it.

You can use it to map and filter at the same time

Here is an implementation using just map and filter that filters out value that are >=2 and maps those values to a new value that is doubled the original

var newArr = [1, 2, 3]
  .filter(function(currentElement) {
    return currentElement >= 2
  })
  .map(function(currentElement) {
    return currentElement * 2
  })

//output: newArr = [4,6]

The downside to doing this, is that you are performing filter and map sequentially meaning you are revisiting certain elements twice! Once for filtering and another time to map().

This is generally ok for small amount of data, but what if you have a set of millions of values? Doing it this way can be quite expensive

Wouldn’t it be better to visit each value, check if it should be filtered out and doubling it at the same time? we would only have to visit each element once!

Here is the same functionality implemented using Array.reduce():

var newArr = [1, 2, 3].reduce(function(
  accumulator,
  currentElement,
  currentIndex,
  arr,
  thisArg
) {
  if (currentElement >= 2) {
    accumulator.push(currentElement * 2)
  }
  return accumulator
},
[])

// output: newArr = [4,6]

Here we are:

invoking the reduce() function on our array [1,2,3].
passing in a function that accepts an accumulator, the currentElement, the currentIndex, the array, and the thisArg
We are also passing in an empty array as a second argument to the reduce() function. This empty array is our accumulator
In each iteration, we check if the currentElement is greater than or equal to 2
If it is, then we add the doubled value of the currentElement to the accumulator
Then we return the accumulator

Note: always make sure to return a accumulator

learn more about Array.reduce()

Array.every()

Checks if every element in the array meets a condition and returns a boolean

var res = [1, 2, 3].every(function(currentElement) {
  return currentElement < 5
})

// res = true, every element is less than 5

var res2 = [1, 2, 3].every(function(currentElement) {
  return currentElement < 2
})
// res2 = false, not every element is less than 2, because 3 is greater than 2

Array.some()

Checks if at least one element meets a condition and returns a boolean

;[1, 2, 3].some(function(currentElement) {
  return currentElement === 1
}) // true because there is at least one element that is equal to 1

Note: the function will terminate when it encounters the first element that meets the condition

Object Properties Access Using Strings

Prior to ES5 object members are accessed using the . operator, such as person.name

In ES5 the equivalent can be written as person['name']

Why would you write write it this way? It looks more complicated and doesn’t seem to do anything different, then why?

This is useful when you are given the object key as a string

Multiline String Literals

You can now create multiline string literals using: ``

var str = `line 1
            line 2
            line 3`

More information

list of all ES5 features

What’s Next?

Learn more advanced Javascript features in ES6!

Web Dev Bootcamp ∙ Learn Javascript part 1 ∙ Basics

Sun, 03 May 2020 22:40:02 GMT

What is Javascript

Javascript is an interpreted language built for the web. Interpreted here means that there is no compilation of the code into binary before it is executed.

You can try this out by opening a browser, and then opening up the console. For google chrome, you can use fn12 to open the developer tool bar

Why Learn Javascript

It is very easy to learn
most of the web runs javascript as the main scripting language to make website more interactive
You can write Javascript on the frontend and the backend using NodeJS
If you want to become a web developer, Javascript is standard knowledge.
There are a lot of popular frameworks and libraries (React) that uses Javascript

Goal

The goal is to cover the basic of Javascript, especially the skills you need to be successful when doing frontend work in React and backend work with NodeJS

Hence, we will not cover everything there is to know about Javascript (which is quite a bit). However, feel free to do personal research and learn more about it at your own leisure.

Getting Started

Creating a Javascript file is super easy. Let’s create a new folder for this session

mkdir learn-Javascript

Let’s navigate into the folder

cd learn-Javascript

Create two files index.html and index.js. Note: the Javascript file ends with a .js

touch index.js index.html

Now let’s write some Javascript. Inside the index.js file, type in the following

// index.js
alert("hey there")

this will create an alert when the page opens. In order for this to work, we have to attach the JS file to the HTML page. In the <head> of the index.html file, add the following: <script src="index.js"></script>. Now, when you open the index.html file inside the browser, you should get a popup that saids “hey there”

Congratulations, you have ran your first Javascript code!

Printing to the console

You will find yourself printing to the console many times because it was the first way that most of us where taught to debug code. The idea of printing something to the console is common to most languages, such as C or Java.

To print to the console use

console.log("hey there")

You can also pass in variables:

console.log(myVar1, myVar2)

The semi-colon debate

If you noticed from other programming languages, such as C, each statements are typically ended by a ;

printf("hello there");

However, Javascript does not enforce this practice and you can omit the semi-colon and it makes no difference. console.log("cat") and console.log("dog"); are both the same in terms of output.

Variables

Variables are how we store data in programming.

Variables in Javascript are stored in a data type called a var

Number

var num = 2
var num2 = num + 1

String

var str = "hi there"
var strCat = str + " hieu"
var singleQuoteStr = "hi there hieu"

Floats

var float = 3.14
var res = float * 2

Boolean

var isTrue = true
var isFale = false

Objects

objects are used when you want to store multiple related data types inside one location.

Object consists of key value pairs.{Key: Value}

var emptyObject = {} // empty object
var dog = {
  breed: "golden retriever",
  age: 2,
  isCute: true,
  isDog: true,,
}

//accessing member Variables

console.log("dog breed ", dog.breed)
console.log("dog's age", dog['age'])
if(dog.isDog){
    console.log("It is a dog!")
}

you can access a member of an object using the . operator or the access operator object['NAME_OF_KEY']

Declaring a variable

var declaredVar

Assigning a variable

declaredVar = 2

Comments

// this is a single line comments
/* 
    this is a
    multiline comment
 */

Operators

Operators are how you perform calculations.

Arithmetic operators

var sum = 1 + 2 //3
var difference = 2 - 1 //1
var product = 5 * 100 //500
var quotient = 10 / 2 //5
var remainder = 5 % 4 // 1 because 4 goes into 5 one time with a remainder of 1
var exponent = 5 ** 2 // 25  = 5^2

Incrementing and Decrementing

sometimes you just want to add or subtract by some value.

Incrementing

var value = 10
value = value + 1 // increment by 1 => value = 11

Here we are adding 1 to value and assigning it back to value

a shortcut for this is:

value++ // this will return the previous value

What is ++ doing?

Here we are saying increase the value by one and return the previous value, which is also called pre-increment

Why?

Sometimes you want to increase a value by one but temporarily reference the previous value

Another way of incrementing is called the post-increment

++value // this will return the value after adding 1

This is similar to pre-increment except that it returns the new value instead of the previous value.

Decrementing

var value = 9
value = value - 1 // decrease the value by 2 and then assign it back to value

shortcut:

value-- // pre-decrement
--value // post-decrement

Assignment Operators

Before we were just incrementing and decrementing by a fixed value of 1. What if we want to multiply or divide? What if we want to do it with some other value besides 1?

That is were assignment operators come in

var value = 100
value *= 2 // multiply value by 2 and assign it back to value
value /= 2 // divide value by 2 and assign it back to value
value -= 10 // subtract 10 from value and assign the result back to value
value += 20 // add 20 to value and assign the result back to value
value %= 3 // take the result of value%3 and assign it back to value
value **= 2 // raise value to the power of 2 and assign the result back to value

String Operator

you can concat or add two strings by using +

var str1 = "hello"
var newStr = str1 + " Devsurvival!"
console.log(newStr) // "hello Devsurvival!"

shortcut:

var str1 = "hello"
str1 += " Devsurvival" //  concat "hello" and " Devsurvival" and assign the result to str1

You can also add string and numbers

var donuts = " donuts"
var quantity = 2
console.log(quantity + donuts) // "2 donuts"

Comparison Operators

How to tell if two things are the same or different? We use comparison operators

== - equal, and doesn’t care if they are not the same type

var sameValue = 2 == "2" // same value but not the same type
// true

=== - equal, and does care if they are the same type

var sameValue = 2 === "2" // same value but not the same type
// false

!= - not equal to

var notEqual = 3 != "3" // they are the same value
// false

!= - not equal to and also not the same type

var notEqual = 3 !== "3" // they are the same value, but they are not the same type
// true

> - greater than

var greater = 1 > 2
// false

< - less than

var less = 1 < 2
// true

>= - greater than or equal to

var greaterOrEqual = 2 >= 2 // not greater , but it is equal to 2
// true

<= - less than or equal to

var lessThanOrEqual = 2 <= 1
//false

Ternary operator

var res = 1 > 2 ? "greater" : "less than"
// res = "less than"

what is going on here?

we are checking if 1 > 2. If that is true , we return “greater” , else we return “less than”

What does res contains?

Since 1 is not greater than 2, the condition is false. Since it is false, we return “less than”

Ternary Formula

CONDITION  ? if true, return something here : if false, return something here

Logical Operator

Logic operators are how we check more than one conditions at the same time. Let’s say we want to check if the person is over 18 AND owns a car. We can use the && operator

var isOver18AndHaveACar = age >= 18 && hasCar

How to check if a person is over 18 OR owns a car

var isOver18OrHaveACar = age >= 18 || hasCar

How to check if a person does not have car?

var doesNotHaveCar = hasCar === false

but there is an easier way

var doesNotHaveCar = !hasCar

the ! operator flips the condition

Array

Array are just a list of items

var strArr = ["one", "two", "three"]
var numArr = [1, 2, 3]

getting an element in array

console.log(arr[0]) // prints the first element in array

getting the length of arrays

console.log(arr.length) // prints the length of the array

Loops

loops are how we iterate over an array

For loop

var i
for (i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

here we are initializing i to 0.
We check if i is less than the length of the array
If i is less than the length of the array, we enter the loop and print the current item at index i
We are done with the loop and increment i by 1.

Here is the general format of a for loop:

for ( STARTING_VALUE ; CONDITION ; UPDATE THE STARTING CONDITION){
    // if CONDITION is true
    some code to run here...
    // once the code inside the loop is done, we update the starting condition and check the condition again,
    // if the condition fails at any point, the loop terminates
}

While Loop

Similar to a for loop, a while loop is used to repeat some code until a certain condition is met

var i = 0

while (i < arr.length) {
  console.log(arr[i])
  i++
}

In a while loop, we check for some condition. If that condition is true. we enter the loop. We keep repeating until the condition is no longer true and we exit the loop

Do While Loop

A do while loop is similar to a while except, it does executes the code inside the loop at least once regardless of the condition

var i = 0
do {
  // do something...
} while (i > 0)

Here you can see that we execute the code inside the do block and then check the condition. When we check the condition i>0, we know this is false, and the loop will execute only once.

Condition Statements

Conditional statements are ways we can conditionally perform something.

if (age >= 18) {
  // do something that people over 18 can do
}

The above is an if statement. It checks a condition, and if the condition is true, it executes the code block inside the parenthesis {}.

Else if and Else

else if is used following an if statements to check if it satisfies another condition. You can have multiple else if, but they all have to follow an if statement.

an else statement is used at the very end of the else if statement when the condition does not satisfies the if and none of the else if statements.

if (age >= 18) {
  // if they are over 18
} else if (likesDog) {
  // if they are not over 18, check if they like dogs
} else if (playsVideoGames) {
  // if they are not over 18 and do not like dogs, check if they play video games
} else {
  // if they are not over 18, do not like dogs, and do not play video games
}

Switch

switch are often used when you have many conditions to check for.

For instance

switch (favoriteFood) {
  case "pizza":
    console.log("you liked pizza!")
    break

  case "donuts":
    console.log("you like donuts!")
    break
  case "steak":
    console.log("you like steak!")
    break
  default:
    console.log("you like", favoriteFood)
}

Here you are testing the variable favoriteFood and you have a set of cases that you are testing for pizza, donuts, and steak. If the case matches, you enter the statement, execute the code, and then break which exits from the switch. Make sure you have a break at the end of each case statement.

You can also provide a default case which will be executed if none of the cases matches the test value.

Functions

Functions are reusable blocks of code that we can pass different parameters into and get a different output.

Let’s see how we can create a function

function bark() {
  console.log("woof!")
}

Here we have a function called bark.

How do we use it? simple.

bark() // invoking or calling the function bark();

Passing parameters

you can make a function for dynamic by passing parameters

function bark(nameOfDog) {
  console.log(nameOfDog + " barked!")
}

here we are passing in the nameOfDog and console.log(nameOfDog + " barked!")

Invoked the function:

barked("Charlie") // "Charlie barked!"

Returning a value

It is great that a function can perform things, but what about getting some return value from it? Javascript functions can also return a value after performing some kind of calculations

function double(num) {
  return num * 2
}

var doubledValue = double(3) // doubledValue = 6

This function accepts a num and returns the number after it has been doubled.

Anonymous Functions

Anonymous functions are functions without a name

// normal functions
function fnNAme(){

}
//anonymous functions
function(){

}

When To Use Anonymous Function?

When you need to pass a function definition into a another function without declaring the function explicitly. Let’s learn with an example

// traditional way of passing a function to another function

function fn1() {
  console.log("this is function 1")
}

function run(fn) {
  fn() // invoked the function that was passed in
}
// passing fn1 to run()

run(fn1)

// The code above can be simplified using anonymous function

function run(fn) {
  // same as before
  fn()
}

// passing in the anonymous function
run(function() {
  console.log("this is function 1")
})

This is useful when you want to pass in a function that will not be referenced anywhere else and will only be used temporarily.

What’s Next?

Learn some advanced Javascript using ES5 and ES6 in part 2 of learning Javascript

Web Dev Bootcamp ∙ Authentication In Node (Coming Soon!)

Sat, 02 May 2020 22:40:02 GMT

Web Dev Bootcamp ∙ Introduction To React (Coming Soon!)

Sat, 02 May 2020 22:40:02 GMT

Web Dev Bootcamp ∙ Deploying App To Heroku (Coming Soon!)

Sat, 02 May 2020 22:40:02 GMT

Web Dev Bootcamp ∙ Introduction To MongoDb And Mongoose(Coming Soon!)

Sat, 02 May 2020 22:40:02 GMT

Web Dev Bootcamp ∙ Managing State With Redux (Coming Soon!)

Sat, 02 May 2020 22:40:02 GMT

Web Dev Bootcamp ∙ Review And Conclusion (Coming Soon!)

Sat, 02 May 2020 22:40:02 GMT

Web Dev Bootcamp ∙ Connecting React Client with Node API (Coming Soon!)

Sat, 02 May 2020 22:40:02 GMT

C Programming ∙ Introduction (Coming Soon!)

Fri, 01 May 2020 22:40:02 GMT

Web Dev Bootcamp ∙ Introduction

Fri, 01 May 2020 22:40:02 GMT

Introduction

Welcome to the Web Dev Bootcamp!

via GIPHY

If you have an interest in web development or are trying something new, then you are in the right place.

Curriculum

Introduction

Learn the standard web technologies - HTML, CSS, and Javascript
Advanced Javascript ES5 and ES6 features
Bash Commands
Overview of Git

Backend

Introduction to NodeJS and ExpressJS
Understand how API and requests works
Database with MongoDB and Mongoose
Authentication in Node

Frontend

Learning React - components, states, styling
Connecting React with Redux
Connecting React client to API

Deploying App

Learn how to deploy web app to heroku

Conclusion

Review
What to do after completing the course

Getting Help

You can get help by:

following me on twitter
submitting a github issue
join the Devsurvival discord server
post your question in the discussion section below each post

Getting Source Code

You will find all relevant source code for this bootcamp here

Good Luck and Have Fun 😄

Start Learning

Web Dev Bootcamp ∙ Learn CSS

Fri, 01 May 2020 22:40:02 GMT

What is CSS

CSS or Cascading Style Sheets is a language for describing how your website looks. With CSS you can alter the color, spacing, orientation, size, shape, and so on.

CSS is the design language of the web, and it is not as easy to use as it ought to be, and it can be confusing, especially if you are new to it. ~ Jeffrey Zeldman

No worries. You don’t need to be an expert at CSS to be a web developer. You just need the basic and a little practice and the rest will take care of itself.

Goal

Learn the basics of CSS.

It will not cover everything there is to know about CSS because you don’t need to know everything.

It will just cover the fundamentals of CSS and most of the commonly used properties.

Creating CSS file

CSS files have the .css extension. Inside this file is a list of selectors and css properties.

div.blue-box {
  color: blue;
  font-size: 24px;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

Here we have a selector of div.blue-box we are targeting all div with class blue-box .

color: blue - makes the text blue
font-size - making the font 24px
width: 100px - the box is 100px wide
height: 100px - the box is 100px tall
border: 1px solid blue - it has a 1px thick blue border

Here is what it looks like

Blue Things

Selectors

Class - .round { border-radius: 25%; }. Notice that the class: round is pre-pended with a .. This will target any element with class: round. In other words, <span class="round"> , <div class="round"> , and <p class="round"> will all have the property border-radius with value 25% applied to them.
id - #my-id { color: red } - this will make the element with id of my-id have a red font.
Immediate descendant - div > a {color: pink} - the > tells the browser to make all immediate descendant that is an anchor tag of any div have the color pink. Immediate descendant are like your grandparent’s children (your parents), so it does not include the grandchildren(you or your siblings).
All descendant - div * {font-weight: bold} - here we are saying make all descendants of any div have a font-weight: bold. Now this is more inclusive than the immediate descendants because it includes you and everyone else related.

here is a complete list of CSS selectors

Common Properties

Here are a list of commonly used properties. Note: there are a lot more, but you don’t need to memorize any of them or know all of them. Just know that they exists and your good to go!

color - div {color: blue} - font-color
background - div { background: pink} - changes the background. You can also use an image as a background using div {background-image: IMAGE_SRC}
border - div {border: 1px solid blue} - adding borders to an element. border: 1px solid blue is a shortcut that means give me a 1px thick blue border. You can also add border to one side: div { border-left: 1px solid black}
margin - div { margin: 10px} - add margins to an element. Here we are adding a 10px margin to all side of div’s
padding - div {padding: 10px} - add paddings between the border of a bloc and its content

Here is a good visualization of margins and padding
width - div { width: 100px} - determines the width of an element.
height - div {height: 100px} - determines the height of an element

here are more commonly used css properties. Again, I don’t expect anyone to memorize these things. It is more of a look-up-when-I-need-it kind of thing.

Flex-box

For most of this bootcamp, I will be using flex-box to layout the UI and components.

Flex-box is simply a way of laying out components on a webpage. here is a really good tutorial on this topic.

How to test your CSS sheet?

In your WebDevBootcamp folder, create a new folder called learn-CSS.
create two files index.html and style.css.
add the boiler code to the index.html file

<html>
  <head></head>
  <body></body>
</html>

in the head of the html file add <link rel="stylesheet" href="style.css">
You are all done. Now your css in style.css will target any element you declared in index.html

More Information

Here is is another great resource for learning more about CSS: MDN CSS Doc

What’s next

Start learning Javascript

Java ∙ Introduction (Coming Soon!)

Fri, 01 May 2020 22:40:02 GMT

Web Dev Bootcamp ∙ Learn HTML

Fri, 01 May 2020 22:40:01 GMT

What is HTML

HTML is a Hyper Text Markup Language that tells the browser how our website is layed out. It describes the structure and the elements in our webpage. A typical button is represented as

Goal

Understand the basics of HTML

This section will not cover everything there is to know about HTML because you don’t need to know everything to be successful.

It will just cover the basics and just enough to get you started

Setup

You need a code editor to write your code in. I prefer vs code, but feel free to use any editor you like.

As a good coding practice, always start your project by creating a project folder. This helps to organize your code. For the purpose of this bootcamp, we are going to have one master folder to store all of our codes, and create nested folders if we feel the need to separate things.

create a folder named something along the line of “WebDevBootcamp”

Mac and Linux:

mkdir WebDevBootcamp

Note: Here I am using a bash command to create the folder. I will go into more depth later about bash commands.

Window:

just use your file explorer to create the folder.

Creating your first HTML file

inside of the “WebDevBootcamp” folder, create another folder called “learn-HTML” or anything else you want to call it.
inside the “learn-HTML” folder, create an HTML file index.html. Here “index” is the name of the file and “.html” is the file type
Add boiler plate. A HTML file contains a set of tags. There are two types of tags:
1. Opening and closing tags: <html></html>
2. Self closing tags: <img/>. Self-closing tags do not need an additional closing tag

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body></body>
</html>

The <html></html> tag is used to wrap our entire HTML file inside the HTML file, we have two element <head></head> and <body></body> The head contains meta data and scripts tags that the browser runs when we load the HTML file. The body contains the content of our HTML page

Lets add a title
1. Inside the <title></title>, add a title => <title>Dogs are Great!</title>
2. To view your HTML file, the easiest way is to drag and drop it anywhere inside your google chrome browser.

Congrats! you have officially created your very first HTML file.

Elements

<body></body> - contains the content that will appear on the webpage
<title></title> - storing the title of the webpage
<h1></h1> - headers are large text usually used for article titles and titles. There is also h2, h3, h4, h5, h6 tags
<p></p> - paragraph

Attributes

Attributes are like special properties that you pass to an HTML tag to alter its functionality or how it is displayed

Ex.

<img src="cutedog.jpeg" alt="cute dog" />

here the src is the location of the image and alt is the text that will appear if the image failed to load

Here are a list of common attributes that

disabled - if true, then the element is disabled
href url to another website
id id of an element
src url of image location
style - styling an element
title -tooltip when you hover an element

Styling

styling allows you to customize the look of an element

<body style="background:red;"></body>

here we gave the body a style attribute and gave it the style background:red; which will make the background red

Comments

comments are little notes to yourself, but do not show up on the webpage

<!-- Dogs are awesome! -->

Links

use an anchor tag <a></a> and provide a href

<a href="http://google.com">google</a>

Table

<table>
  <tr>
    <th>name</th>
    <th>favorite food</th>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Donuts</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>Ice cream</td>
  </tr>
</table>

here is what it looks like:

name	favorite food
Bob	Donuts
Sara	Ice cream

List

Ordered List

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>

here is what it looks like:

item 1
item 2
item 3

Unordered list

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

here is what it looks like:

item 1
item 2
item 3

Block

Blocks are like containers for a group of related elements.

<div>
  <h1>This is a container for my cookie</h1>
  <p>flavor: chocolate</p>
</div>

here is what it looks like:

This is a container for my cookie

flavor: chocolate

Classes, id, and names

These are typically identifiers that helps add specificity to an element. for instance, <div class="dog animal">Woof</div> and <div class="cat animal">Meow</div> are div. One with class “dog” and the other “cat”, and they both have class “animal”

Note: you can assign more than one class to an element by separating them with a space

Having this specificity is useful when you want to target a specific element by its class and style it a specific way without affecting other similar elements

Ranking by specificity, id is the most specific, follow by class, and finally name

Form and inputs

A form is how to obtain data from the users. A form will typically consists of one or more inputs and a submit button

<form action="/receive-form" method="POST">
  <input type="text" id="name" placeholder="Enter your name" />
  <label for="name">Name:</label>

  <input type="email" id="email" placeholder="enter your email" />
  <label for="email">Email:</label>

  <input type="password" id="password" placeholder="enter your password" />
  <label for="password">Password:</label>

  <button type="submit">submit</button>
</form>

Here we have three inputs. a text input for the name, an email input, and a password input. We also have a submit button. When the user clicks submit a POST request will be sent to the /receive-form route on the server

More information

complete list of tags

MDN Introduction to HTML

What’s next

Start learning CSS

Guide to Showcasing Your Project

Wed, 29 Apr 2020 22:40:32 GMT

You ready to go public ?

Here at Devsurvival we provide a free and easy way to showcase your projects to the community.

Why you should join?

it is free
quick and easy to set up
get feedbacks
acquire lead

Start Now

My Love And Hate Relationship With Hackathons

Sun, 26 Apr 2020 13:00:00 GMT

My First Hackathon

I was hanging out at one of my favorite developer communities, devto, and I ran into a post written by one of the admins at Devto announcing that Twilio was hosting their 2020 hackathon at Devto.

The hackathon is hosted online, so you don’t have to relocate to participate. I happen to be in quarantine during the COVID-19 pandemic, so given my abundance of time and boredom, I joined my first hackathon.

What is a hackathon?

Feel free to skip this part if you already know what it is or if you want to validate what I am saying is for the most part accurate.

“A hackathon is simply a gathering of developers who share similar interests and are trying to solve some problem in society using current technologies” ~ Hieu Nguyen

The general gists of it is:

They propose a theme.
You brainstorm some ideas around that theme by yourself or with other people.
Once you have an idea, start planning and implementing it.
Testing and fine tuning your application.
Show time - there is usually a chance for you to present your project or post it on some forum for others to see
Receive feedbacks - this is very useful because other developers (some are a lot better than you. Trust me, I learned from personal experience) will look at your application and point of things that you might have missed or complement you on the things they liked.

The goal is not to produce a battle tested application with many features. It is about working together and building something minimally functional to showcase your ideas. Think of it as planting the seed.

Theme and Brainstorming

For this particular hackathon the themes were:

COVID-19 Communications: an app to help folks communicate during this challenging time, either to stay connected or to help resolve COVID-19 related challenges.

Engaging Engagements: an app that a company could implement to better engage with their customers or to manage their business.

Interesting Integrations: an app that integrates Twilio with at least one other API.

Exciting X-Factors: an innovative or unexpected app that doesn’t necessarily fit any of the above categories, but is a clear winner nonetheless.

learn more

Note: you have to integrate one of the Twilio API into your application. Otherwise, it wouldn’t be called the Twilio Hackathon.

My approach to comming up with an idea

I did not rush head first into the hackathon like many people would. Yes there was a time limit. However, it is entirely up to you to manage your own project, so I waited a good week or so.

During this time, I was searching for ideas and looking at other people’s submissions to gain some inspiration. The worst thing that can happen is you did something that some else did. To avoid this, do your research and really think outside the box. Some questions you might asks are:

What problems am I facing that I can solve using technology?
Do other people also have this problem?
Are there existing technologies that fix or alleviate this problem?
Can the existing solution to this problem be improved and maybe I can make it better?

My humble beginnings

Since this was my first hackathon, I decided to take the safe route and choose something very simple.

A lot of people think that at every hackathon, you have to build something complex with a lot of functionalities.

Yes there will be submissions that are crazy advanced and complicated, but bare in mind that it is YOUR hackathon experience. You are free to go at your own pace.

So in this spirit, I built an app that lets you sign up for an account with your phone number, set a timer, and once the timer runs out, you get a text message telling you get off your electron device and offers a suggestion for something else you can do.

I called it: Device Police. I know not the greatest idea or name for that matter, but it suited my level of experience and was achievable within the time constraint.

view full submission

What I love about hackathons

Own your ideas - the nature of a hackthon to challenge your critical thinking and creativity really helps you to think of new ideas.
You are your own boss - Unlike a school project or a work project, a hackathon project is for the most part controlled entirely by you.

Besides the theme and several criteria that they imposed, you are not really restricted by any schedule or standards.

You want to build it the night before the submission deadline? Go at it! The internet is your oyster.

Meeting awesome people - Sometimes you get to team up with complete strangers with a completely different set of perspectives and skills.

This is really good because whatever skill you lack, that person might be able to compensate, and vice versa.

Many of these relationships can last a lifetime. They could be your future co-worker at a startup or a friend who considers coding as a conversational topic.

Building presense - Think of a hackathon as an audition for programmers. You prepare your act, polish it, show up on audition day, and cross your finger hoping you pass.

Hackathons provide a stage and an audience that may include potential employers.

Even if you don’t win it, being present and making something cool and useful is enough to turn a couple eyes in your direction.

Free and unlimited membership - Most of the time, a hackathon is sponsored by some big company who are willing to spare a small percentage of their fortune to scout potential hires or to establish interests in a certain field.

For you, that means admission is typically free. The only thing you pay is time, passion, and maybe a little dignity.

You will make mistakes, but don’t let that discourage or prevent you from joining a hackathon. Keep in mind that you are surrounded by people who makes a living by fixing bugs or faults in an application that is how you learn.

What I don’t like about Hackathons

Note: Some of these do not apply to hackathons hosted online, but they are fair expectations of an in-person hackathon.

Unrealistic time constraint - a lot of hackathons tends to span a day or two. This small window translates to sloppy code and bugs. Many projects fall through because they could not accommodate a roadblock or a nasty bug.
Toxic environment - If you’ve attended a hackathon in person, then you probably have noticed that they are usually not organized with health and productivity in mind. You are in this crowded space. Lots of talking and cursing(a natural tendency when your codes doesn’t work). When it comes to food offerings, don’t expect a michelin star meal. They often prep pizzas, caffeinated drinks, and other unhealthy food.
Too much socializing and not enough coding - One of the perks of being at a hackathon is meeting people. However, like they always say: too much of a good things is a bad thing. It can become very distracting when you are trying to complete your project and socialize at the same time.

Should you join a hackathon?

If you haven’t been to one before, then I would definitely advise to try it at least once.

If you have previous experiences with hackathons, then make your best judgement and considered how much value you gained from attending it.

If it wasn’t good, what could you have done differently? How could the organizers make it better? Would you consider doing an online hackathon?

How To Earn A Free Ticket To A Computer Science Internship

Wed, 22 Apr 2020 23:46:37 GMT

Who is this post for?

If you are a computer science student who’s actively looking for an internship or preparing to do so, definitely keep reading.

If you have a genuine interest in computer science and are considering a career as a developer, feel free to keep reading.

If none of the above applies to you, but your curiosity is killing you, I guess I can’t stop you 🤷

Background

I have done multiple internships. The first internship was the harder job search of the two, which was expected because I did not have any relevant job experience.

After doing multiple interviews and hopping around different companies, I have noticed things that were helping me land more interviews and ultimately more job opportunities.

In this session, I am going to share some tips on how to land your internship and things that I have done to greatly increase the chances.

New fish in the sea

credits to Sense

Just like a freshman in highschool, you are the small fish in the vast, diverse tech industry. I mean a really small fish, like a sardine compared to shark.

The shark has years of experience in the sea. It knows how the environments behaves and how to adapt.

As a newcomer, it can be tough to fit in and dig a room for yourself in this rapidly changing environment. If you started out feeling this way, then we were born in the same school of fish.

However, we consume, learn, and ultimately grow. With each stage of our growth, we must find a new shell or hole to fit in.

In this post, I am going to show you how to find your next hole or internship as a small fry in the sea.

Cutting to the chase

Here is a list of things to follow to guarantee your next internship.

1. The extra mile

There is only so much stuff that a computer science degree can teach you. When most universities are designing their computer science curriculums they are asking: What should I teach that will provide the most fundamental skills and will remain relevant 20 years from now?

9 times out of 10, a highly demanding programming framework or a trending language does not make the cut. The reason why they are not taught is simply because in the next couple of years, something else will replace it, which means they have to redesign their course.

For these reasons, I implore you to not wait for your professor to feed you all the technical knowledge you need to succeed.

Those who are successful are the same ones going the extra mile to obtain the skills needed in the REAL world. How?

Start by finding your interests. It could be a coding language or a technology. For instance, I was interested in web development, so I choose to learn HTML, CSS, and Javascript
Research your topic and gather resources
Train and Apply - use online tutorials, courses, and documentation as a learning aid. Once you know it enough, start applying it by building something or teaching it to someone else(blog, video tutorial, answering question).
After you have apply what you’ve learned to build or produce something tangible, you can start leveraging it in your interviews and on your resume.

2. Cast a wide net

This one is a no-brainer. Don’t apply to just your favorite companies or the ones that shows up in the top 500 fortune companies list. By doing so, you are limiting your own chances of scoring an internship.

3. Networking

Having a presence in the tech industry can be pivotal in getting an internship. Many of your connections can help provide a direct line to new job opportunities and a beneficial relationships with potential employers.

They say it is always easier to ask a favor from someone you know as oppose to a stranger. How?

Create a LinkedIn account and reach out to potential employers.
Join a developer community like devto or reddit.
Build a profolio website and share it
Get involved in social events and conferences.
Join a hackathon - many employers will search for potential hires at a hackathon. Regardless, it is a good experience to have on your resume.

4. “NEVER GIVE UP”

via GIPHY

Let’s face it. You are going to be turned down once or twice, but don’t let that overshadow how much success is in store for you once you’ve earned a ticket to your internship.

NCL Exploitation Root Cause Write Up

Mon, 20 Apr 2020 13:00:00 GMT

This was my first time competing in an event like the competition hosted by the National Cyber League (NCL) and I had a lot of fun going through each of the categories from Wifi Pentesting, Network Analysis, Exploitation, Web App Security and many more.

There were many tricky challenges that ranged from Easy to Hard, but the category that I found most interesting is the “Enumeration and Exploitation” category. The challenges in this category involved reverse engineering software/malware or retrieving files from a machine.

There was a challenge in the Spring 2020 Preseason that I really enjoyed solving called “Root Cause”. During the preseason I noticed that there was around ten players that managed to solve the Root Cause problem in the beginning unlike many of the other challenges where there were many people with a 100% completion in different categories. I saw this as a challenge and began to solve it and become one of the top players.

You are given the option between downloading either a x32 or x64 binary file to solve the problem. So my first instinct was to open the debugger of my choice and at the time I used Ghidra a tool that was developed by the NSA.

You can also follow along with binary file to download here

Once you open Ghidra you want to start a new project and import the binary file into you project.

Now that the file is added to the project we want to open the CodeBrowser which is represented as a dragon in the tool chest panel. Then open the project and import file in the CodeBrowser..

Now that we have imported the file we want to analyze it

In the next window we want to make sure we have “Decompile Parameter ID” checked

To jump to the start of the program we can go to the symbol tree window on the left side and under the dropdown of the functions folder we want to click “entry” this is where the C program begins.

In the decompile window we can see the entry point and that it calls another function which is our “main”. The decompiler renamed this to FUN_00400b0b. If we double click on it we can jump to the main of the C program.

Once we have stepped into the main of the C program we can see on line 2 there is an int and undefined datatype as the parameters. From experience with C we can assume that this is int argc, char *argv and user input is passed to the binary. Also it is important to note the TID that we were given by the NCL competition is only argument that is ran when the binary is executed in the terminal. You can also see proof of that on line 17.

So we can go ahead and rename these by right clicking and changing the variable name and type to its respective value. At this point we can begin to follow the decompiled code and understand what is going on. We can also see that the program requires the user to run a root or a user that has a UID of 0

 uid = geteuid();
 if (uid != 0) {
   fwrite("You don\'t have permission to run this program!\n",1,0x2f,stderr);
                   /* WARNING: Subroutine does not return */
   exit(1);
 }

So I went ahead and renamed a few variables to help me follow the program.

We can see that there is a another function previously called FUN_00400906 that we renamed to CalculateFlag that passes an argument of argv[1] which should be the TID value that we passed into the program. Now if we double click on the CalculateFlag function we can just to its decompiled code and right off the bat I noticed that there were variables that had hex values set.

If we convert those hex values to ascii we should get something that starts with SKY- which is a piece of a flag since all the NCL flags start with NCL- or SKY-. We cant assume that this is the flag because the program does something with the TID and those values.

As we go through the program we notice is that the AUTH linux environment variable is retrieved and saved to a variable in the program and is later used.

  __s = getenv("AUTH");
   if (__s != (char *)0x0) {
    sVar1 = strlen(__s);
    if (sVar1 == 0xd) {
      local_68 = 0;
      local_70 = 0;
      while( true ) {
        sVar1 = strlen(tid);
        if (sVar1 <= (ulong)(long)local_70) break;
        local_68 = local_68 + tid[local_70];
        local_70 = local_70 + 1;
      }
      local_6c = 0;

I assume this AUTH environment variable is set on the NCL linux server and has a flag stored to check the user input the right flag. We can see that the program checks to make sure the user input flag is 13 (0xd) characters long and begins to take the TID value we passed in and adding the decimal value of each char to local_68 which is later used in the program.

Unfortunately I don’t have the TID that was given to me, but the value of local_68 turned out to be 2487.

Then immediately after we can see that local_6c is set to 0 which which is the index of the program.

        if (index < 4) {
          if ((int)flag_value[index] != local_58[index]) {
            uVar2 = 0;
            goto LAB_00400adf;
          }
        }

Now the code begins to come a little more clear. The code above shows that the AUTH environment variable which we assumed as the flag value is compared with the values we found at the beginning of the program as shown below. This values should be equivalent to SKY-.

  local_58[0] = 0x53;
  local_58[1] = 0x4b;
  local_58[2] = 0x59;
  local_58[3] = 0x2d;
  local_48 = 0x50;
  local_44 = 0x51;
  local_40 = 0x4e;
  local_3c = 0x4f;
  local_38 = 0xc;
  local_34 = 0x31;
  local_30 = 0x30;
  local_2c = 0x30;
  local_28 = 0x31;

‘0x50’, ‘0x51’, ‘0x4e’, ‘0x4f’, ‘0xc’, ‘0x31’, ‘0x30’, ‘0x30’, ‘0x31’

Now that we know the flag begins with SKY- we can begin to solve the rest. Now that we are looking for the 4 index value of the flag we can follow the code below.

        else {
          if (index == 8) {
            if (flag_value[8] != flag_value[3]) {
              uVar2 = 0;
              goto LAB_00400adf;
            }
          }
          else {
            if (((long)flag_value[index] ^ tid_value % 10) != (long)local_58[index]) {
              uVar2 = 0;
              goto LAB_00400adf;
            }
          }
        }
        index = index + 1;

As we said earlier we can assume that local48, local44, local40, local3c, local38, local34, local30, local2c, and local28 is the remaining values of the local58 array which is the obfuscated flag stored in the program. Since we are looking for the 4 index we will start at line 9 and it we can see that the flag value we input has a bitwise XOR to the value 2487 (tidvalue) and is modulus by 10 and is compared to the local58 flag character stored in the program. So in order to reverse the value we can use a little bit of python.

chr(int("0x50" ,16) ^ 2487 % 10)

The output returns a ‘W’

So we can do this for all of the hex values.

a = ['0x50', '0x51', '0x4e', '0x4f', '0xc', '0x31', '0x30', '0x30', '0x31']
  for hex in a:
    print chr(int(hex ,16) ^ 2487 % 10),

The output gives us:

W V I H 6 7 7 6

Now all we have to do is piece it together and we have the flag.

Just to note for the future. The TID will always be different so this flag wont always be the same.

4 Wonderful OS For Computer Science Students. Number 3 is a must.

Sun, 19 Apr 2020 23:46:37 GMT

⏭️ Skip to list

What is an operating system?

For the sake of brevity, an OS or operating system is a piece of software that runs your hardware in a computer. It provides a level of abstraction and offers the convenient user experience that we all know and love.

The invention of modern day operating system bridged the gaps between humans and computers. Computers existed before operating systems came about. However, using one at that time required a high degree of computer knowledge that most people did not have.

How does the choice of operating system affects computer science?

As a computer science student myself, I was forced to dig deep into what a computer is and how they work. Contrary to the belief that computer science is just about learning algorithms and coding. There are many layers in a computer

There is the hardware layer(hard drives, CPU, RAM, registers, cache). Then there is the operating system and application layer. Choosing an operating system will affect the entire composition of a computer.

As a computer science student you are forced to go down these layers and interact with them. Choosing the right operating system for these tasks can make a difference in your learning experience and how successful you will be.

Not all operating systems are the same

Window is not the same as mac. Mac is not the same as Linux. Linux is not the same as Windows.

Although they achieve similar goals, how they are implemented is a different story.

Remember as a computer science student, you are not concerned with using the operating system, because anyone can do that. You are concerned with how it works!

Top 4 OS for computer science students

Note: The order is not an indication of one being better than the other.

Window - The most popular operating systems, and chances are, you are running it right now.

This is good for basic computer tasks like file management and browsing the internet. You can also do programming on window, but some of the tool-chains is not the most forgiving to install or use.

Mac OS - Most developers you see at hackathons or conferences will likely sport a macbook running Mac OS. There are good reasons for that: the hardware is good, it’s reliable, no-headache when setting up new tools or working with existing popular technologies, stunning interface.

However, the main benefit for a computer science student is the terminal. Even if you are using an IDE or integrated development environment, you will find yourself coming back to the terminal from time to time.

The terminal provides some very powerful features such as file management, installing packages and modules, compiling your code, and executing your code.

Since Mac OS is based on Unix, the development experience is pretty similar to linux. However, since Mac OS is proprietary, you are prevented from seeing the source code and doing certain things that violate the term of use. Even if it was for learning.

Ubuntu - Open source, linux distribution. These two things are the main reason why every computer science students should use Linux.

There are many distributions of linux that you can choose from. This flexibility allows you to hop between different linux operating systems while still maintaining the core functionality.

The fact that it is open sourced means that you can look at the source code and try to learn how it works. you can even change it if you want to! This transparency provides the perfect learning environment for a computer science students.

The expectation is for you to learn how a computer works, software and hardware. What better way to do that than by using a naked operating system.

Similar to how you dissect a frog to learn how it functions, you need to dissect an operating system and all its underlying components to learn how a computer functions.

In addition, you can install ubuntu on virtually any computer!

Chrome OS - This one is relatively new to the market, but it is slowly growing into the developer’s community. You can use it to run python and Node, and support for linux features is slowing creeping its way in. Some of the main attractions of Chrome OS is its affordability and simplicity. Amazon sells these chromebooks for less than $500.

Parting advice

Whatever you decide on, know the differences between these operating systems and when to use one over the other.

There will be a point in your education or career where you are not given the choice in which operating system to use.

For instance, I had to use linux(ubuntu) for my operating systems class or else risks failing the class because the tests used to validate the projects were written specifically for linux.

So it is in your best interests to dap your feet in the water with what is available out there and don’t be afraid to try new things 😄.

Learn The Truth About Getting a Computer Science Degree In The Next 5 Minutes

Sat, 18 Apr 2020 23:46:37 GMT

credits to Matt Ragland

What is Computer Science?

According to Techopedia

”Computer science is the study of both computer hardware and software design. It encompasses both the study of theoretical algorithms and the practical problems involved in implementing them through computer hardware and software.”

Dictionary.com defines computer science as

”the science that deals with the theory and methods of processing information in digital computers, the design of computer hardware and software, and the applications of computers.”

These definitions can be a mouthful sometime and the meaning can sometimes get lost in the jargon, so let’s pick out some keywords.

Software - There are many forms that is thing exists in. It could be an app on your phone, your desktop programs like a pdf reader, or a website.

At the end of the day, they are just lines of text. What makes these lines of text different than a regular piece of text is that the computer views them as commands.

When you type print "hello world". To a normal human being, it is the equivalent of writing I love chicken nugget. However, to the computer, these words are quite different.

The computer thinks: “ooh ooh, I just received a command to do something. Let’s see what it is…Yes I can definitely print ‘hello world’ for you. No problem …printing…printing…Here you go. I am done printing your message :)”

Theory - The logical reasoning and analysis of how a computer and software function using models and mathematics.
Computer - a software can be run on any hardware that is able to store and process data. It could be your smart washing machine, but the majority of the software are designed to be run on a computer.
Hardware - There is a misconception out there that software and data exists in a realm outside our physical world like magic 🌈.

However, as any computer scientists will tell you, that is far from the truth.

Data must be stored on a physical hard drive. There are electrical components and moving parts that helps to read and write data to your hard drive.

In order to run your command, you need a central processing unit or CPU. CPU is a hardware that exists in your computer. Its job is to process information and do whatever it is you tell it to.

Algorithm - So we have a command that prints "Hello World", but now we want it to take in some input like a name and give us an output like print "Hieu". This can be achieved using an algorithm. An algorithm is like a black box that you can pour some inputs into, and then get something back from it.

Why Do People Get A Computer Science Degree?

Money - Average salary for a software developer in the United States is $76,525. This value can changed depending on where you live and the level of experience with the highest pay ranging from 100k - 350k. Despite the high pay, most of these people would keep do their job and love doing it for even a fraction of their current salary.
They Love Doing It - many programers consider their work as artistic. In fact, programming or coding requires a high degree of creativity and critical thinking. It is similar to the high that other artists experience. They just want to keep doing again and again.
They Want To Change The World- Many programmers dreams of one day developing something that will revolutionize the world. They draw their inspiration from the likes of Mark Zurkerberg who developed Facebook.

Do I need a Degree To Be A Software Developer?

Absolutely Not.

In the age of the internet, there is really no limit to what you can learn online.

For instance, I wanted to build a blog a couple of weeks ago, but I did not have the technical knowledge to do so. My computer science program wasn’t going to help. I was too busy doing calculus and solving algorithms problem. However, I wasn’t going to give up there. I researched online on how to learn web development and starting a blog. Within a couple months, my blog was up and running.

Self-taught to a Career

Once you are feeling confident, you can start looking for work. Since you don’t have a degree, the only thing that is going to back you up is experience, experience, and more experience. There are many ways to accumulate experience:

Build and publish a successful app.
Join a coding bootcamp
Network with other developers
Freelancing
Contribute to open source
Blogging - teaching what you have learned to someone else. If done correctly, this approach can mark you as an authoritative figure in your niche. Note: patience is required for this route as you have to start building your creditability and fan base.

Is It That Simple?

There are several reasons why you should still want a computer science degree.

Direct Access to Job Market after graduation as many companies are looking to hire new graduates.
Understanding The Fundamentals - Many computer science skills, such as data structure and operating systems, are just not taught at the same level in a self-taught environment compared to a college class.
Networking - You are surrounded by professors, experts, and other students who all shared the same interests, so being able to find a connection in your field is trivial.
Internship - Many universities will offer opportunities to complete internships for class credit. Doing an internship provides you with some real world perspectives and skills that are likely not taught in school. Plus, you get the 💰💰💰
College Experience - Just do it so you can say you’ve done it philosophy.

3 Things I've Learned From Doing Nails Professionally as a 16 Years Old

Fri, 17 Apr 2020 23:46:37 GMT

Credits to Lazar Gugleta

Wait… What?!?!?

Yes, you heard that right. I started doing nails when I was 16.

How does a computer science students and developer begin his career by doing nails?

I wonder that question myself sometimes. Well to understand this story you have to go back in history and understand where it all started.

History Lesson

Feel free to skip this section, but I recommend briefing over it as it will set the stage for the rest of the post

During the vietnamese war, many families were dislocated due to the violence and war boundaries.

The communist North vs the American backed South.

My family was situated in the south at that time. My grandfather fought in the war and befriended many American soldiers. He would often share stories about how beautiful and developed Vietnam was before all the violence.

We had cars! I did not believe it when they told me that vietnamese were driving cars in the 60s and 70s.

The economy was growing and international trade was at its peak. My aunt even told us that she once had a french teacher. Can you imagine a vietnamese girl in the 60s or 70s taking french lessons. That idea seems farfetched now, but prior to the war, things were different.

For those who follow history, then we all know that the north eventually invaded the south, and story short, Vietnam became a communist country. However, there was still a glimpse of freedom for those who were willing to risk everything.

My family were some of the brave souls that abandoned the country they loved in search of freedom beyond the waters.

They scattered onto wooden boats that were not meant for the treacherous conditions of the sea. They brought nothing with them besides the clothe they had on and the hope of freedom.

Most of my families arrived in America. Some where in Germany, Madagascar, and other neighboring countries that were willing to take in vietnamese refugees.

Once they got here, they needed to work and start over. Many went straight into factories.

My aunt had other ideas. She wanted to try her hand at doing nails. She was old at the time and many nail salons rejected her application because of it.

However, her persistence eventually earned her enough money to start her own business. Her business grew and she was able to open more shops.

Despite, all of her successes, she never forgot where she came from and what matters most in here life: her family. She was able to petition for her other siblings to come to America,

and guess what they did for work? Nails.

Soon it became standard for any person in the family to start out working in one of the family’s nail salon. Naturally, I was cultivated at an early age to start working in the nails salon.

My Initial Reaction

I despised it with every inch of my soul, but I manage to tolerate it and gained some very valuable life lessons along the way that I don’t think could have been obtained from doing anything else.

3 Things I’ve Learned From Doing Nails Professionally As a 16 Years Old

1. The value of money

At a young age I learned that money or any other thing that holds monetary value must be earned with hard work. The shortcuts of acquiring wealth is either illegal or only work in the short term.

2. Time is a commodity

I often worked at the nails salon right after school, which did not leave me with a lot of time to do other things. To compensate, I would always complete as much school work at school as I can.

Instead of hanging out with friends or doing other things that typical teenagers do, I worked. I had earned a decent income which at the time, surpassed my imagination of what I could buy with it.

3. Appreciate the little things

You may have been wondering by now why I was working so hard in the first place?

Why not just quit? The reality was that I couldn’t.

I was going through some rough time as a teenager and my parents could not make the sacrifices needed to raise me.

Instead of feeling pity for myself, I picked up a job in my family’s business and started working.

Working gave me a new outlook on life. It taught me the preciousness of having a supportive family. I finally understood what my parents were saying when they told me: “We work hard so you can have a happy life.”

During this time, happiness and joy was scarce in my life, so I appreciated every ounce of happiness that I could find. It could be a smile from a stranger or a complement from a school teacher. It all adds up.

What are your thoughts?

Mac - Changing Font Size Without Lowering Display Resolution

Thu, 16 Apr 2020 22:40:32 GMT

Many other guides on this topic solve this problem by changing your display scaling. Although this methods works and is fairly simple, it does result in a minor degradation of visual quality or display resolution.

This tutorial is a little bit different. I am going to show you how easy it is to change your system font without the side effects of lowering your resolution. Let’s get started.

Who is this guide for?

If you are a person who likes to take your gadgets and experiment with them, then this guide is for you. If you are just trying to quickly change the font size or the scaling of your mac’s appearance without downloading extra software, then I recommend using the provided display settings provided by Apple in your mac’s preferences.

Step 1

Download TinkerTool. This tools allows you to tweak certain things in your mac that are usually not exposed to the common user. Don’t worry it is legal 😉.

Step 2

Open the Tinkertool dmg file and open the TinkerTool app. There will be a couple pop-ups, just click continue on those.

Step 3

Navigate to the “font” panel. Once you are there, you can change any of the available font options according to your needs. There is no need to save your changes once you are done, just restart any application and you will see the update, and that is it. You can always go back and fine tune it to suit your preference.

How do I reset everything and pretend this never happened?

Simple. Navigate to the reset panel and click “reset to pre-tinkertool state”.

“It’s still magic even if you know how it’s done.” -Terry Pratchett,

The Power Of Bookmarking Websites

Sat, 11 Apr 2020 22:40:32 GMT

What is Bookmarking?

Credits to: 五玄土 ORIENTO

Bookmarking is the practice of saving a website to your browser for easy access at a later time. On Google Chrome, there is usually a star at the end of the URL bar that lets you bookmark the current page. Pretty straight forward, but it is one of the most under-appreciated feature.

Why you should start Bookmarking

Bookmarking allows you to quickly save a website, so you can look at it later like an interesting article that you want to read later. You can bookmark your most visited sites, such as Youtube or Twitter. People tend to visit these sites with high frequency throughout the day, and being able to directly go to them with a click of a button can be a time saver.

Please save yourself from a carpal tunnel by clicking that star to save the website. Otherwise, bookmark your frequently visit websites so you can avoid the common habit of doing a google search every time… Cmon, we have all been there. Me: trying to get to Youtube

typing “yout” in the URL bar
waiting for the google search algorithm to do its things
its done finally! (Click the first Youtube result)

Bookmarking on Steroid

Are you convinced yet? Bookmarking in its simplest form is great, but what if you have hundreds of websites? Start grouping websites into directories! This is where the true power of bookmarking lies in. Organizing related websites into folders allows you to quickly and intuitively find a website you are looking for. For instance if I was looking for a website I bookmarked about a hackathon, I can intuitively go into my bookmark directories : code -> hackathon -> my_hackathon.com

It might be cumbersome or even pointless to do it this way, but at least give it a try 🙏. I had some doubts when I first started, but the investment was totally worth it now 😄

Blogging As A Learning Tool

Thu, 09 Apr 2020 22:40:32 GMT

What is Blogging?

Photo Credits To: NeONBRAND

This question has probably been answered a thousand times, but I will answer it from the perspective of a computer science student which might differ a little bit with the conventional views.

Besides being a great tool for sharing new ideas or maybe passing along some useful information. Blogging can also serve as a learning tool for the writer themselves. Just consider what is going on inside the blogger’s mind when they are writing. For instance, if you were writing a blog about how to build a website, you first have to know how to do it yourself. Once you know how to do it, your next challenge is to formulate how you are going to deliver it to the audience. Some questions you might ask:

How should I break down the problem?
What are some questions or challenges that my audience will have if I wrote it this way?
Can I simplify it even further to enhance understanding?
Will this information be overwhelming?
If I was in their shoes, what would I wish the author could have done better?
Can some people see the value in reading this post?

These are not all the questions going through the bloggers mind, but it paints a pretty good picture of the thinking process.

How Does Blogging Helps You Learn?

There is a common understanding that a true expert of anything can explain their topic to even the most unintelligent of us. This concept is called The Protégé Effect, the act of teaching someone else as a mean to learn. Sounds selfish, but it works. I have practiced this method multiple times when learning a new programming skill, and I must confess that I am a better programmer because of it.

What’s Next?

The next time you confront a new learning challenge, write about it and try to teach it to someone else!

What If I am Wrong?

Before becoming a blogger, I always had some reservations about how other people would react. However, I learned that a blog is the best place to make a mistake 😄 When you are wrong about something people are quick to point out your mistakes, and you as the writer, should take those criticisms and feedbacks and improve from them!

Happy Blogging 🌟 😃 🌟!

How Many Hours Do You Code In a Day During a Crisis

Sun, 29 Mar 2020 22:40:32 GMT

At the time of writing this, I was under locked down due to the coronavirus. There was not a lot that I could do to pass the time. I could waste time on youtube or browse the latest viral news. Instead, I decided to code and learn something new while I’m at it. Yeah yeah, “overachiever over hurr”. What? I like to code. Coding and A LOT of free time is a perfect combination.

For the last week or so, I have put in an average of 6-8 hrs a day ≈ a full day job without the pay.

So what about you? What crisis are you in right now? How has that affect your productivity?

Top 10 Discord Servers For Developers

Sun, 29 Mar 2020 22:40:32 GMT

What The Heck is Discord ?

Discord is a community based chatting app that allows you to directly connect with other people within your niche. Although Discord was initially built for gamers, it grew and people from all walks of life started using it to empower their connectivity.

One of those communities is obviously the developer’s communities. I say communities , plural, because there are multiple sub-communities. One might focus on web development while another might focus on game development.

Here Are My Top 10 Discord Servers To Join As a Developer

Programmer’s Hangout - Jack of all trade. There is a channel for everything you can think of. They have special channels dedicated to off-topic discussion, web development, computer science topic, animme, javascript, jobs, etc.. It is also very active with over 10,000 active users.
Devcord - Another popular community that focuses on general development topic, such as web development, desktop application, mobile devleopment. They also help channels for getting help with language or technology specific problems.
The Coding Den - Another active community with over 5000 active users. Similar to the other servers, this one also provides technology/language specific channels. There is also a channel for showcasing your projects. However, be aware that they are very weary about spamming your project for the sake of promoting it, so make sure it is educational and adds value to the community.
SpeakJS - do you write a lot of Javascript? Well, there is a server fully dedicated to it! You will be surprised at how much more you can learn by interacting with other people. give it a try!
CodeSupport - If you need some serious help with your programming, then there is no better place to look than here. There is just about one channel for every topics you can think of.
Nodeiflux - Do you have an unbreakable bond with Javascript that you would use it for both frontend and backend development? That is where Node comes in. This one single technology that allows developers to run Javascript on the server gave rise to an entire community of developers.
Lazy Developer - They say developers are one of the most lazy people. What better way to honor that than to create an entire community full of lazy devlopers. On a more serious note, this server can be a great place to learn new tips and tricks to increase your productivity and reduce your work.
TensorFlow - If you are familiar with machine learning, then you probably already know that Tensorflow tends to be the centered of manny conversations. It is the most popular machine learning library.
Programmer Humor - Are you suffering from a developer’s burnout or just bored from typing all day? Come here to get your daily juice of laughter from intelligent people with a humor side.
Python - Python is quickly becoming one of the most trending languages do to its simplicity and role in data science and machine learning. Come here to showcase your python skill and pick up a some extra tips and tricks.

Update:

here are some additional servers recommended by the awesome community at devto:

Did I Miss One?

There are a lot of servers, so narrowing it down to a handful is quite a difficult task, so if I missed a very reputable one, please forgive me 😥 and post it in the comment below.

How To Get In Contact

Sat, 28 Mar 2020 22:40:32 GMT

Let’s Connect

You can get in touch with me using the contact form or follow me on social media:

Setting or Scaling Native Resolution On Mac

Sat, 28 Mar 2020 22:40:32 GMT

Defaults and Settings

If you own a mac or have previous experiences with one then you probably know that Apple offers a list of options for configuration the resolution of your display. You can choose “default for display” or select from a list of scaled options: Ranging from “Larger Text” to “More Space”. If you hover over an option, you will see the resolution that it scales to.

I own a macbook pro 16” (you can call me spoiled or lucky :P), and the native resolution for this model is 3072 x 1920. One day, I went to scale the resolution to the native resolution, but could not find an option to do so! It seemed really odd to me that Apple does not offer the option to adjust the resolution to match the native display resolution. Even if there are only a select few who will find it useful, they should still make it available.

Display Menu Jumps In To Save The Day

Display Menu is an app that lets you configure your macbook display with any resolution. With this tool, I was able to quickly set my screen resolution to the native resolution! But it was…ahh not all great.

The native resolution turns out to be too small for my eyes, and I have almost 20/20 vision. However, everything on the screen was crispier and there was more screen real estate.

Download and Usage

Download the app from the mac store
Launch Display Menu
The icon should added to the top right corner of the screen.
Click the icon and adjust your resolution.

If you have any comments or questions, please submit below.

Best Way To Learn React

Fri, 27 Mar 2020 22:40:32 GMT

Forget what I just said. There is no such thing as the best way for learning ANYTHING. This post is reserved for newcomers to React who are trying to navigate the complicated world of web development and especially trending technologies like React. I will also prescribe some note worthy courses and tutorials to start learning React some of which I have actually used and succeeded.

What is React?

React is a framework developed by Facebook and was open sourced in 2013. React quickly gain popularity and was adopted by some of the top companies like Airbnb, Uber, Facebook, and Netflix. However, you don’t have to be a big company to use React. React is able to handle any number of projects from small single page app to apps that can handle thousands of users at once.

If you do web development, more specifically ui design, then React will become standard knowledge for many web development positions.

Ohh right. Almost forgot to answer the original question. React in technical term is a component based client side framework. A client side framework is a library that handles the user facing interface of an application. Some of the main jobs of a client side library is to display content to the page (sounds obvious Lol), handles user inputs, provide consistency in the development process( you are using one framework, therefore, there is less of a chance of contradicting design philosophy), and the most important job is to manage the state of the application.

React VS Anguar VS plain HTML, JS, and CSS?

Without going into too much details, React and Anguar are similar in that they provide the same service to the developers. They provide a set of well defined tools and functionality to ease the UI design process. React is based on components while Angular is based on modules and services.

However, some people have argued that React has a steeper learning curve than Angular. Over the recent years, the learning curve for react has reduced significantly due to the increase of online tutorials and courses.

Angular is managed by Google , hence, features are slower to release, but not by a lot. Angular is also open source. For comparison Angular has around 60k stars of github while React has a whopping 146k stars. What does more stars translate to? It means more people are using React and contributing to React. From a developers perspective (I might be a little biased here), React has fewer bugs than Angular, and more features that the developer community is requesting.

Plain HTML, CSS and, JS? Before React and Angular, every single website used any combinations of these three to achieve the same complexity of a modern web app. People used JQuery to easily integrate animations and special web interactions.

Don’t be fool. HTML,CSS, and JS are still the backbone of web development. However, how they are used is being revolutionized by React.

You Want Some React?

There are a lot of good tutorials and resources and some not so great ones. Here are some of the top picks for learning React.

React’s Official Website - there is no better place to learn something than from the originator. Short and easy to follow.
Udemy’s Advanced Web Development BootCamp - A full stack developer course covering the MERN stack - ReactJS, ExpressJS,NodeJS, and MongoDB. By the end of this bootcamp, you will be able to build an entire react application with a backend server. (I took this course and built a full react application in less than 2 months)
Another Udemy Couse - React - The Complete Guide (incl Hooks, React Router, Redux) - I have read some great reviews about this course. It is purely focused on React without the extra stuff.
Youtube React Tutorial For Beginners - I like this one because it is completely free and it is a video format course, which makes it way more interactive and helpful for the visual learners.

Final Note

If you still find it hard to decide, it’s completely normal. Heck, I was stuck on searching for the best course for days before settling on one. Whatever the case may be, just start somewhere and start building your developer’s toolbox.

Writing For Devsurvival

Fri, 27 Mar 2020 22:40:32 GMT

Why write on devsurvival?

Hi. Thanks for coming to devsurvival. This is a new blog where you can submit writing about technology and more. The community is kinda small right now, but with your help, it can grow!

Some Little Rules

Please make sure your blog follows the criteria below:

Contains a title and cover image.
Unlike other blogging platform, devsurvival does not concern with your grammar and spelling skills 😉 as long as the readers can understand what you are trying to say.
Code block must be correctly formatted.
Content must be useful or fun to read by at least one other person besides yourself.

Submitting Blog

Submit your blog using this form

Request An Emoji Tag

Fri, 27 Mar 2020 22:40:32 GMT

Did not find an emoji tag?

The emoji tags is an easy way to add emojis to your comments by using # tags ( e.g entering #smile will produce 😊) Cool right? Submit your emoji tag request here

Devsurvival User Guide

Thu, 26 Mar 2020 23:46:37 GMT

Devsurvival Starter Guide

Welcome to devsurvival ! This quick user guide will get you up to speed with the website in no time

Leaving a comment

Click on one of the available posts
Click on discussion
Enter your name , email, and comment and hit comment
Please don’t spam the discussions.
Be thoughtful and make constructive comments. It is ok to say “I like the post” or “Cool”.

You want some emojis?

I got you. Type one of the following tags into the comment section.

Tags	Emoji
#smile	😀
#laugh	😂
#pray	🙏
#thumbsup	👍
#fire	🔥
#thinking	🤔
#crying	😭

📓 complete list of emojis (you can also request new ones to be added)

Edit Suggestion

At devsurvival, you can make edit suggestions to a post. Follow the instructions below to make an edit suggestion:

Select a post.
Click the Edit Icon on the tool bar located on the left side
Enter your name, email, and a suggestion to the author.
hit submit
you are all done! You will be notify of the author’s response by email

Submitting Guest Blog

click here for instructions on submitting guest blog.

Quick Access Tools

located on the left side bar is a set of icons under Tools to help you navigate devsurvival.com.

Last Few Words

Have fun and hopefully you learn something while you were here with us. Educating or at least an attempt to do so is the reason why I created this blog.

About Devsurvival

Tue, 24 Mar 2020 22:40:32 GMT

Enjoy this amazing picture of Vietnam, where it all started.

photo credits to: Ammie Ngo

Humble Roots

Devsurvival was born from a curiosity or perhaps an obsession with the internet. It started out as a small side project for experimenting with new web technologies, and now it has grown into a close-knit community of developers.

The Purpose

To share some of my experiences as a developer and to help others survive the dev world

What You Will Find

Tutorials and guides
Stories and discussions about development topics
Free courses covering topics like web development

Team

me 👨‍💻
my macbook 💻
the internet 🌐

Build A Todo App with React, MongoDB, ExpressJS, and NodeJS Part 1 (Backend)

Mon, 23 Mar 2020 22:40:32 GMT

Estimated Completion Time: 15-30 minutes

Background

The classic todo app has been written so many times that most people have lost count. However, in this tutorial, I will try to cover some React and Node JS skills that can be used to create this app.

A little background. I have about 2 years of react experience and have built several react applications. However, don’t be fool, I am far from being an expert in this area. There are still a lot of advanced things that I am still learning everyday.

How did I meet our friends React and Node? Story short, I was a computer science student in college and was bored from all the classes I had to take; I needed something to revive the joy of being a programmer, so I did a little research and came upon the MERN Stack - MongoDB, ExpressJS, ReactJS, and NodeJS. I went through a couple online tutorials and here I am.

Project Setup

Install Node

Mac: Install Homebrew. Homebrew is a package manager for mac. It helps you install programs and packages using the terminal.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Install Node

brew install node

check if Node was installed successfully.

node -v

Linux:

Open a terminal

sudo apt install nodejs

check if node installed successfully

node -v

install NPM, a package manager for Node

sudo apt install npm

check if NPM installed successfully

npm -v

Window: Download the installer

Installing MongoDB

MongoDB is the database that we will use to store our todo’s

Mac:

using Homebrew

brew tap mongodb/brew
brew install mongodb-community@4.2

at the time of writing this, version 4.2 was the latest. The latest version might be different for you. here is a link that might help you find the latest version

Run the mongodb instance using

brew services start mongodb-community

Linux:

Due to the variations in installing MongoDB depending on the distribution, here is the link to the original installation guide

Setting up project structure

create the application folder

mkdir todo-app
cd todo-app

create the backend folder

mkdir todo-backend

create the front end react app

npx create-react-app todo-frontend

now you should have a folder structure like so

todo-app
    - todo-backend
    - todo-frontend
        - node_modules
        - public
        - src
        - package.json
        - .gitignore
        - README.md

Building backend

navigate to the todo-backend folder

cd todo-backend

run

npm init -y

install packages that we will need to build the express server

npm install express body-parser mongoose --save

ExpressJS - is the server framework with Node JS under the hood.
body-parser - allows express to parse the request payload into the req.body object. More about this later.
mongoose - high level API for interacting with our MongoDB database.

create the index.js which will store our server initialization logic.

touch index.js

If you have VS Code installed, you can open the project in VS Code using

code .

otherwise, just open it in your favorite code editor

copy this code into the index.js file

const express = require("express") // our express server
const app = express() // generate an app object
const bodyParser = require("body-parser") // requiring the body-parser
const PORT = process.env.PORT || 3000 // port that the server is running on => localhost:3000
app.use(bodyParser.json()) // telling the app that we are going to use json to handle incoming payload

app.listen(PORT, () => {
  // listening on port 3000
  console.log(`listening on port ${PORT}`) // print this when the server starts
})

Run the server

node index.js

You should see the message print out to the terminal.

Nodemon(highly recommend but not required)

This handy tools allows you to edit your server files and see the change propagate in real time without starting the server each time with node index.js

install by running

npm install -g nodemon

Run the server again using

nodemon index.js

If you choose to not use this tool, make sure to restart the server each time you make a change to the todo-backend files

Connecting to MongoDB

create the models folder in the root of the todo-backend folder

mkdir models

Connecting to the database is really simple. Create an index.js file in the models directory

touch models/index.js

copy the follow code into the index.js file

const mongoose = require("mongoose")
mongoose.connect("mongodb://localhost/todo-app", {
  // connecting to the mongodb database name: "todo-app" locally
  keepAlive: true, // keeping the connection alive
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
mongoose.set("debug", true) // enabling debugging information to be printed to the console for debugging purposes
mongoose.Promise = Promise // setting mongoose's Promise to use Node's Promise

Create the Todo Model

A model is just a blue print for an object that we want to store in our database. It describes the structure and fields that pertains to a specific kinds of data.

Create the todo.js file that will store our model

touch models/todo.js

copy the code below into the todo.js file

const mongoose = require("mongoose") // requiring the mongoose package

const todoSchema = new mongoose.Schema({
  // creating a schema for todo
  task: {
    // field1: task
    type: String, // task is a string
    unique: true, // it has to be unique
    required: true, // it is required
  },
  completed: {
    // field2: completed
    type: Boolean, // it is a boolean
    default: false, // the default is false
  },
})

const todoModel = mongoose.model("Todo", todoSchema) // creating the model from the schema

module.exports = todoModel // exporting the model

Now that we have our model, let’s use it. In the index.js file of the models dictory , add the following line of code to the bottom.

module.exports.Todo = require("./todo") // requiring the todo model that we just created in mongodb

Next, add the following statement to the top of the index.js file where we stored server initialization logic. Note: we did not do require("./models/index.js") because in Node Js whenever we require a directory, it will search for the file named index first.

const db = require("./models/")

Run the server to make sure that nothing is broken. Chances are, you ran into this error: MongoNetworkError: failed to connect to server [localhost:27017] in the terminal which is because we have not started the mongodb server locally. Run the following command to start the mongodb service on mac.

brew services start mongodb-community

Restart the node server and we should see that everything is fine

listening on port 3000
Mongoose: todos.ensureIndex({ task: 1 }, { unique: true, background: true })
(node:10201) DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead.

Establishing API Endpoints

API endpoints are just URL’s that can be used to make request to a service or a system.

How should we structure our API Endpoints?

establish what kinds of functionality we want to expose. In our case, we need to be able to add a new todo, delete a todo, update a todo, and retrieve all the todos
formulate the routes. For instance an ice-cream distribution API can expose icecream.com/flavors making a GET request to this API endpoint will retrieve all the flavors.

Our todo API will have the following endpoints

GET  /todos //getting all todos
POST  /todos //adding a new todo
PUT  /todos/:id //updating a todo with the matching id
DELETE  /todos/:id //deleting a todo with matching id

Lets Create Some Routes

Routes in Node and Express are just API endpoints that we are exposing.

Update the index.js file at the root containing the server initialization logic to look like the section below. This might be quite a bit of code, and you will probably feel overwhelmed. Do not be discouraged. I will clarify each part. Those of you who are familiar with ExpressJS will find this section familiar, so feel free to skim over the section below.

const express = require("express")
const app = express()
const bodyParser = require("body-parser")
const PORT = process.env.PORT || 3000
const db = require("./models/")

app.use(bodyParser.json())

function success(res, payload) {
  return res.status(200).json(payload)
}

app.get("/todos", async (req, res, next) => {
  try {
    const todos = await db.Todo.find({})
    return success(res, todos)
  } catch (err) {
    next({ status: 400, message: "failed to get todos" })
  }
})

app.post("/todos", async (req, res, next) => {
  try {
    const todo = await db.Todo.create(req.body)
    return success(res, todo)
  } catch (err) {
    next({ status: 400, message: "failed to create todo" })
  }
})

app.put("/todos/:id", async (req, res, next) => {
  try {
    const todo = await db.Todo.findByIdAndUpdate(req.params.id, req.body, {
      new: true,
    })
    return success(res, todo)
  } catch (err) {
    next({ status: 400, message: "failed to update todo" })
  }
})
app.delete("/todos/:id", async (req, res, next) => {
  try {
    await db.Todo.findByIdAndRemove(req.params.id)
    return success(res, "todo deleted!")
  } catch (err) {
    next({ status: 400, message: "failed to delete todo" })
  }
})

app.use((err, req, res, next) => {
  return res.status(err.status || 400).json({
    status: err.status || 400,
    message: err.message || "there was an error processing request",
  })
})

app.listen(PORT, () => {
  console.log(`listening on port ${PORT}`)
})

The success function accepts the res object and the payload and send a 200 status code with the payload in the response

function success(res, payload) {
  return res.status(200).json(payload)
}

GET /todos/ - getting all the todos. app.get() tells express that the route "/todos" is a get route. The second paramater async (req,res,next)=>{ //some code } is the function that gets called when the server receives this request.

Inside the function, we are getting the all todos using await db.Todo.find({}). If it was successful we return success(res, todos) with all the todos. Otherwise, we received an error and send a 400 status code with a message.

app.get("/todos", async (req, res, next) => {
  try {
    const todos = await db.Todo.find({})
    return success(res, todos)
  } catch (err) {
    next({ status: 400, message: "failed to get todos" })
  }
})

POST /todos/ - creating a new todo we called await db.Todo.create(req.body) to create a new todo. Here req.body contains the request payload that will contain the task to be created.

app.post("/todos", async (req, res, next) => {
  try {
    const todo = await db.Todo.create(req.body)
    return success(res, todo)
  } catch (err) {
    next({ status: 400, message: "failed to create todos" })
  }
})

PUT /todos/:id - updating a todo with the given id we update the todo by calling await db.Todo.findByIdAndUpdate(req.params.id, req.body, {new:true}). here req.params contains all the route parameters that we specified; Here we have one: "/todos/:id" called id. req.body contains the new information that we want to update the task with. The last parameter {new:true} tells mongoose that we want the updated task to be returned.

app.put("/todos/:id", async (req, res, next) => {
  try {
    const todo = await db.Todo.findByIdAndUpdate(req.params.id, req.body, {
      new: true,
    })
    return success(res, todo)
  } catch (err) {
    next({ status: 400, message: "failed to update todo" })
  }
})

DELETE /todos/:id - deleting a todo with the given id we call await db.Todo.findByIdAndRemove(req.params.id)

app.delete("/todos/:id", async (req, res, next) => {
  try {
    await db.Todo.findByIdAndRemove(req.params.id)
    return success(res, "todo deleted!")
  } catch (err) {
    next({ status: 400, message: "failed to delete todo" })
  }
})

This is our error handler. Whenever we call next({status: 400, message: "failed to do something"}), we are passing the error object to the error handler.

app.use((err, req, res, next) => {
  return res.status(err.status || 400).json({
    status: err.status || 400,
    message: err.message || "there was an error processing request",
  })
})

Testing Our API

Now that our API is built, how do we test it? There is a useful tool called Postman that allows us to make http requests through a user interface. Download it

Here is a quick video of me testing it.

What’s Next

The next step is to create the react front end and connect it with the API backend. Here is the next segment of this tutorial Build A Todo App with React and Node Part 2 (Frontend)

This tutorial’s source code can be found on github

Build A Todo App with React, MongoDB, ExpressJS, and NodeJS Part 2 (Frontend)

Mon, 23 Mar 2020 22:40:32 GMT

Welcome back. Congratulation on completing part 1 of the tutorial on how to create a todo app with React and NodeJS.

In part 2, we will create the react frontend and connect it to our API backend to GET, POST, UPDATE, and DELETE our todos.

Additional Packages

Before we can start coding, we have to install some additional packages to make this work.

Axios - allows us to send http request from out react frontend to our todo API run npm install axios in the todo-frontend directory
Cors - allows cross domain http request. In other words, without enabling cors on the backend, even Axios will not able to send our request to the API. run npm install cors in the todo-backend directory, and then add the snippet below to the top of your index.js file in the root of todo-backend directory

const cors = require("cors")
app.use(cors())

Almost There :)

Since the frontend for this application is pretty straight forward, we are going to make changes to two files: App.js and the APIHelper.js (we will have to create)

Let’s create the APIHelper.js file in the src directory of the todo-frontend .

touch APIHelper.js

Copy the following code into the APIHelper.js file

import axios from "axios"

const API_URL = "http://localhost:3000/todos/"

async function createTodo(task) {
  const { data: newTodo } = await axios.post(API_URL, {
    task,
  })
  return newTodo
}

async function deleteTodo(id) {
  const message = await axios.delete(`${API_URL}${id}`)
  return message
}

async function updateTodo(id, payload) {
  const { data: newTodo } = await axios.put(`${API_URL}${id}`, payload)
  return newTodo
}

async function getAllTodos() {
  const { data: todos } = await axios.get(API_URL)
  return todos
}

export default { createTodo, deleteTodo, updateTodo, getAllTodos }

Let Me Explain

We have four functions that mimic our API createTodo, deleteTodo, updateTodo, getAllTodos .

createTodo(task) - accepts a task and sends a post via axios.post to our API_URL and returns the newTodo. Note: axios stores the response of our requests in a field called data,

deleteTodo(id) - accepts an id and sends a delete request to our API.

updateTodo - accepts an id and a payload object contain fields that we want to update => payload= {completed: true} .It sends a PUT request to update the todo.

getAllTodos - fetching all the todos from our API via axios.get

And we make all these functions accessible in other files using an export function export default { createTodo, deleteTodo, updateTodo, getAllTodos };

App.js

Copy the following code into your App.js file

import React, { useState, useEffect } from "react"
import "./App.css"
import APIHelper from "./APIHelper.js"

function App() {
  const [todos, setTodos] = useState([])
  const [todo, setTodo] = useState("")

  useEffect(() => {
    const fetchTodoAndSetTodos = async () => {
      const todos = await APIHelper.getAllTodos()
      setTodos(todos)
    }
    fetchTodoAndSetTodos()
  }, [])

  const createTodo = async e => {
    e.preventDefault()
    if (!todo) {
      alert("please enter something")
      return
    }
    if (todos.some(({ task }) => task === todo)) {
      alert(`Task: ${todo} already exists`)
      return
    }
    const newTodo = await APIHelper.createTodo(todo)
    setTodos([...todos, newTodo])
  }

  const deleteTodo = async (e, id) => {
    try {
      e.stopPropagation()
      await APIHelper.deleteTodo(id)
      setTodos(todos.filter(({ _id: i }) => id !== i))
    } catch (err) {}
  }

  const updateTodo = async (e, id) => {
    e.stopPropagation()
    const payload = {
      completed: !todos.find(todo => todo._id === id).completed,
    }
    const updatedTodo = await APIHelper.updateTodo(id, payload)
    setTodos(todos.map(todo => (todo._id === id ? updatedTodo : todo)))
  }

  return (
    <div className="App">
      <div>
        <input
          id="todo-input"
          type="text"
          value={todo}
          onChange={({ target }) => setTodo(target.value)}
        />
        <button type="button" onClick={createTodo}>
          Add
        </button>
      </div>

      <ul>
        {todos.map(({ _id, task, completed }, i) => (
          <li
            key={i}
            onClick={e => updateTodo(e, _id)}
            className={completed ? "completed" : ""}
          >
            {task} <span onClick={e => deleteTodo(e, _id)}>X</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default App

Let Me Explain

We start by creating two states: todo and todos. States are like information about your components. todo will store the user input when creating a new todo and todos will store all of our todos.

Let’s see what the component looks like on paper.

return (
  <div className="App">
    <div>
      <input
        id="todo-input"
        type="text"
        value={todo}
        onChange={({ target }) => setTodo(target.value)}
      />
      <button type="button" onClick={createTodo}>
        Add
      </button>
    </div>

    <ul>
      {todos.map(({ _id, task, completed }, i) => (
        <li
          key={i}
          onClick={e => updateTodo(e, _id)}
          className={completed ? "completed" : ""}
        >
          {task} <span onClick={e => deleteTodo(e, _id)}>X</span>
        </li>
      ))}
    </ul>
  </div>
)

To keep things simple we have a text input, a button for submitting the input, and a list.

The text input has an onChange event handler for handling user inputs. When the user clicks the Add button, the onClick event handler is triggered- createTodo() is invoked.

Creating Todo

lets look at what the createTodo function does

const createTodo = async e => {
  e.preventDefault()
  if (!todo) {
    // check if the todo is empty
    alert("please enter something")
    return
  }
  if (todos.some(({ task }) => task === todo)) {
    // check if the todo already exists
    alert(`Task: ${todo} already exists`)
    return
  }
  const newTodo = await APIHelper.createTodo(todo) // create the todo
  setTodos([...todos, newTodo]) // adding the newTodo to the list
}

Overall, it validates the input, create the todo using the APIHelper.js we created, and then add it to the list of todos

Displaying the Todos

<ul>
  {todos.map(({ _id, task, completed }, i) => (
    <li
      key={i}
      onClick={e => updateTodo(e, _id)}
      className={completed ? "completed" : ""}
    >
      {task} <span onClick={e => deleteTodo(e, _id)}>X</span>
    </li>
  ))}
</ul>

We are mapping over the list of todos and creating a new list item with li

How do we load the todos when the page loads? React offers a useful function call useEffect which is called after the component is rendered

useEffect(() => {
  const fetchTodoAndSetTodos = async () => {
    const todos = await APIHelper.getAllTodos()
    setTodos(todos)
  }
  fetchTodoAndSetTodos()
}, [])

we create an async function called fetchTodoAndSetTodos which call the APIHelper’s getAllTodos function to fetch all the todos. It then sets the todos state of the component to include these todos.

Marking Todo As Completed

;(
  <li
    key={i}
    onClick={e => updateTodo(e, _id)}
    className={completed ? "completed" : ""}
  >
    {task} <span onClick={e => deleteTodo(e, _id)}>X</span>
  </li>
)``

When the task is completed we add the class completed. you can declare this css class in a separate file. create-react-app provides an App.css file for this purpose.

.completed {
  text-decoration: line-through;
  color: gray;
}

Notice each todo item (<li onClick={updateTodo}>{task}</li>) has an onClick event handler. When we click an li we trigger the updateTodo function.

const updateTodo = async (e, id) => {
  e.stopPropagation()
  const payload = {
    completed: !todos.find(todo => todo._id === id).completed,
  }
  const updatedTodo = await APIHelper.updateTodo(id, payload)
  setTodos(todos.map(todo => (todo._id === id ? updatedTodo : todo)))
}

e is the event object on which we invoked e.stopPropagation() to prevent the click event from propagating to the parent element. Next, we find the todo in the list of todos and flip its completed status(completed = true => !completed == false) . We add this new completed status to the payload object. we then call APIHelper.updateTodo and pass in the id and payload of the todo.

The next bit of code is a little confusing. we call todos.map which maps over the array and return a new array. With each iteration we are check if the id matches. If it matches, then we return the updatedTodo which is effectively updating the todo. Otherwise, we return the original todo and leave it unchanged.

Deleting a Todo

<li
  key={i}
  onClick={e => updateTodo(e, _id)}
  className={completed ? "completed" : ""}
>
  {task} <span onClick={e => deleteTodo(e, _id)}>X</span>
</li>

Notice how we have a <span onClick={DeleteTodo(e, _id)}>X</span> next to the task. When this span is clicked, it triggers the deleteTodo function that will delete the todo.

Here is the function for deleting the todo.

const deleteTodo = async (e, id) => {
  try {
    e.stopPropagation()
    await APIHelper.deleteTodo(id)
    setTodos(todos.filter(({ _id: i }) => id !== i))
  } catch (err) {}
}

we call APIHelper.deleteTodo and pass in the id of the todo we want to delete. If you refresh the page, the todo will be deleted. What if you were lazy and did feel like refreshing or you didn’t know better? Well, we have to remove it manually from the todos state. We remove it by calling todos.filter which will filter out the todo with the id we just deleted.

Show Time

Here is a quick demo:

This tutorial’s source code can be found on github

Pointers in C and C++

Sat, 21 Mar 2020 23:46:37 GMT

Ahh the good old pointers. The first topic in most computer science program that most students struggle with. I admit. Not everyone uses pointers in their day to day programming life. In fact, I have never had to use pointers during my internship at several companies. However, after taking operating systems and several critical computer science courses, I realized that they all share one common enemy or ally depending on your perspective: Pointer. Its annoying persistence to show up in my education career has forced me to reconsider its significance and relevance in the developer world.

Although most developers will never have to use it, it is good to know that it exists and the role it serves in your everyday computing life. Heres why. Every application you write will consume memory. That is an undeniable fact that you just have to accept. Anything that touches memory will inherently involve using pointers. Some may argue that even the most complex python program does not include a single pointer. In reality, the python language has taken care of that work for you, so you don’t have to. spoiled bastard 😙

What is a pointer?

A pointer is just a generic name given to a variable that holds the memory address of something. The analogy here is that a pointer is the street sign that points *no pun intended, you to the location where you want to go.

Declaring a Pointer

int *int_pointer;
char *char_pointer;
float *float_pointer;
struct Person *person_pointer;

The general format of a pointer is the [Data Type] *[Variable Name]. the * indicates that the variable of that specific data type is a pointer.

Initializing a Pointer

Pointers store memory addresses, but how do we get the memory address of something? C has a special built in operator & that returns the address of any value.

int value =2;
int *location_of_value = &value;

here the variable value contains 2, and we retrieved the location of this “2” in memory using &value and assigned it to the pointer *location_of_value

Retrieve The Value From The Pointer

Given a pointer, to retrieve the value from the pointer, we have to dereference it using *. In other words, once we see the street sign, how do we travel to get to the location?

int value =2;
int *location_of_value = &value;
int retrieved_value=*location_of_value; // retrieved_value == 2

Here we are retrieving the value from the location using *location_of_value

Special Cases of pointers

Arrays

Arrays of any data type is a special case of pointer usage where the variable associated with the array is the pointer to the first element of the array. Sound confusing? So was I.

int arr[3]= {1,2,3};
printf("%p\n", arr);

the %p in the printf statement is used to print the address of pointers. Here when we print the address of the pointer and pass arr, we expect arr to contain an address. what is stored at this address?

int arr[3]= {1,2,3};
printf("%d\n", *arr);// prints 1

when we deference this address stored in arr we get the value 1, which is the first element in the array. To get the next value in the array, we just tell the pointer to move to the next address.

int arr[3]= {1,2,3};
printf("%p\n", arr);// prints 1
arr++;
printf("%d\n", *arr); // prints 2

When we increment the pointer we are telling it to move over by sizeof(int) bytes which is the memory address of the next element in the array.

Strings

There is actually no such things as a string in C. A string is just an array of char.

 char str[10]= "Hi There\0";
 printf("%c", *str); // prints "H"

Here str points to the memory address of the first character in the sequence of char. To print the entire string

char str[10] = "Hi There \0";
while(str){
    printf("%c", *str);
    str++;
}
// prints "Hi There"

Classes and Structs

structs and classes are a little different in their dereferencing step

typedef struct person{
    char* first_name;
    int age;

}person;
.
.
.
char name[10] = "Bob";
person p1 = {name, 21};
person *p1_location = &p1;
printf("First name:%s age:%d \n", p1_location->first_name, (*p1_location).age);

To access the member fields of the person struct given a struct person *, there are two ways.

p1_location->firstname -Dereference and access in one operator
(*p1_location).firstname -Dereference first and then access

Memory Allocation and pointers

Pointers are also used when allocating block of memories

char *str_ptr = malloc(sizeof(char) * 10)
strcpy(str_ptr, "hello\0");
printf("%s\n", str_ptr) // prints "hello"

Here we are asking malloc to give us a block of memory that can store 10 characters and return to us the starting memory address of the first location.

Final Note

This list of examples is not an exhaustive list of ways that pointers are applied, but it is a good starting point for those who are new to memory addresses and pointers. Peace Out :)

Synchronization and Critical Section Problem

Sat, 21 Mar 2020 22:40:32 GMT

What is Synchronization?

Synchronization in the context of multi-programming or multi-threaded programming is the process that coordinates access and manipulation of share data. If you have read some of my previous blogs, you would have noticed that we occasionally run into an issue where two threads are trying to access the same share data at the same time. To deal with this common issue we have to learn how to synchronize access of these share datas.

Critical Section Problem

The critical section is anywhere in code were one thread is accessing share data that could potentially be accessed by another thread. Synchronization will attempt to prevent two threads from accessing the critical section/shared data at the same time.

Implementing Synchronization

There are many ways to implement synchronization but they all follow this general pseudo code:

// Some code
.
.
.
acquire_access
    // critical section
    // access and update shared data
release_access
.
.
.
// some code

acquiring access will cause the thread to wait if access is being used by another thread or it will successfully acquire the access if no other thread is using it. Once the thread finished, it releases the access so another thread can use it.

The most simple implementation of this uses what is called Semaphore

sem_t mutex;
sem_init(&mutex, 0, 1);
int critical_section = 0;

//thread 1

sem_wait(&mutex);
critical_section ++;
sem_post(&mutex);

//thread 2

sem_wait(&mutex);
critical_section ++;
sem_post(&mutex);

Closer Look

we start by declaring a mutex variable. we initialize it with sem_init(&mutex, 0, 1) .The first parameter is the semaphore that we are trying to initialize, the 0 allows the semaphore to be shared between the threads, and the 1 is the value with which we want to initialize the sem_t mutex with. learn more . Always initialize a semaphore to a positive number, I will explain why a little bit later.

the snippet for thread 1 and thread 2 is very similar. We invoke sem_wait(&mutex) which is equivalent to acquire access. here is the pseudo code of how this function work

sem_wait(semaphore){
    if semaphore greater than 0
        semaphore -1
        return;
    else
        wait/sleep
}

Based on the code above, the semaphore has to be initialized to a positive number for even the first thread to access the critical section. When the first thread access the critical section, mutex = 1 , calling sem_wait will decrement the mutex and mutex = 0 and return. First thread is allow to enter critical section.

While first thread is accessing critical section, another thread attempts to go into the critical section, it calls sem_wait(&mutex), but mutex= 0 so it is put to sleep or forced to wait.

The first one finished using the critical section and call sem_post(&mutex) which is equivalent to release access. here is the pseudo code for sem_post.

sem_post(semaphore){
    semaphore + 1
    wake up the first thread in line to access the critical section
}

After the first thread calls sem_post(&mutext), the second thread wakes up and enter the critical section and the process repeats.

Final Note

If you want to get into multi-threaded programming, understanding of this concept is crucial.

Multi-threaded Programming in C

Sat, 21 Mar 2020 22:40:32 GMT

What is Multi-threaded Programming?

Multi threaded programming is a design approach that splits work into smaller units of work and distribute them among a collection of workers or threads that can solve the individual job concurrently. Imagine that you and your friends are trying to make a pizza. It would not make sense for everyone to make the dough and then make the sauce and then cook it. Instead, one person can make the dough while someone else can make the sauce and preheat the oven.

Thread vs Process

Process - When you are running any program, you are in fact running a process. For instance, you downloaded an application on your computer. It is sitting idling on your computer(like a lot of things we download and never use), it is not a process. When you open the application and it is actively running woahla! It becomes a process. Note: you can have more than one process of a program.

Thread - A process will always have one thread commonly called the main or parent thread. However, a process can have more than one thread. A thread that is created in the main thread is called the child thread.

So what happens when you create a thread? Thread creation will usually accepts a routine or function that will get invoked when the thread execution begins. When the child thread is executing the function/routine, the parent thread will continues execution unless a wait is invoked.

Memory Space

“Memory… is the diary that we all carry about with us.” ~ Oscar Wilde

All programs consume memory or space (RAM)
A Process has its own memory space
One process can not access another process’s memory space - else it would cause corruption or the common segmentation fault (sound familiar? )
The memory space of a process can grow and shrink based on the need of the program.
a section is a segment of a process’s address/memory space

Section	Purpose
Data	Global Variables
Code/Text	Source Code
Heap	Dynamic Memory Allocation
Stack	Local variables, function invocation and parameters

Multi-thread vs Multi-process

Maybe you have heard of multi-core or multi-processing. Multi-processing and multi-threading despite their similarities are different things. When you are following multi-processing, you are creating multiple processes of the same program. On the other hand, when you create a thread, you are creating multiple child threads within one process that can run different routine or functions at the same time. There are pros and cons of using each

Multi-Process	Multi-thread
each process has its own address space	threads shares the same data, heap, and code section, but have their own stack and register
Overhead for creating Process	Thread creation is fast
Greater CPU utilization due to context switching(CPU switching from one process to another)	Greater CPU Utilization due to switching between the threads
	Failure to synchronize threads can result in corrupt data

Let’s Learn by Example

I will try to solidify some of these concepts through a programming example. The program is very simple and all it does is take two sets of numbers and compute their sum: A: [1,2,3] B: [4,2,6] => A+B = 1+2+3+4+2+6 = 18. Note: the order of addition does not matter

#include <stdio.h>
#include <stdlib.h>
#include <pthread.h>
#include <semaphore.h>
#include <unistd.h>


int sum = 0; // Global int to store the sum of the two arrays
sem_t mutex; // Synchronization Bit

void *add(void *arg){
    int *ptr = (int *) arg;
    while(*ptr != -1){
        sem_wait(&mutex);
        sum += *ptr;
        printf("value: %d sum %d\n", *ptr,sum );
        sem_post(&mutex);
        ptr++;
    }
    return NULL;
}

int main(int argc, char *args[]){
    int A[4] = {1,2,3, -1}; // -1 marks the end of array
    int B[4] = {4,2,6, -1};

    pthread_t t_a, t_b;
    sem_init(&mutex, 0, 1);
    pthread_create(&t_a , NULL, add, A);
    pthread_create(&t_b, NULL, add, B);

    pthread_join(t_a, NULL);
    pthread_join(t_b, NULL);
    printf("Total: %d\n", sum);

    return 0;
}

Output

value: 1 sum 1
value: 4 sum 5
value: 2 sum 9
value: 6 sum 15
value: 2 sum 7
value: 3 sum 18
Total: 18

Closer Look

Look at the main function

int main(int argc, char *args[]){
    int A[4] = {1,2,3, -1}; // -1 marks the end of array
    int B[4] = {4,2,6, -1};

    pthread_t t_a, t_b;
    sem_init(&mutex, 0, 1);
    pthread_create(&t_a , NULL, add, A);
    pthread_create(&t_b, NULL, add, B);

    pthread_join(t_a, NULL);
    pthread_join(t_b, NULL);
    printf("Total: %d\n", sum);

    return 0;
}

We initialized two array A and B. Note the -1 indicates the end of array. and we declared two struct pthread_t: t_a and t_b. Then we called sem_init(&mutext)which will initialize the mutex struct, for now you don’t have to worry about sem_t mutex and sem_init(&mutex, 0, 1), sem_wait(&mutex), and sem_post(&mutex). In short they are the key parts of synchronization and protecting the critical section problem.

We then call pthread_create(&t_a, NULL, add, A) which creates a new thread. the information pertaining to this thread is store in t_a and this thread will run the void *add(void *arg) function with array int A[4] = {1,2,3,-1}. Same thing for thread p_thread t_b and int B[4] = {4,2,6,-1}

At this point all three threads are running concurrently. Wait. Why three? Remember, a process always has at least one thread: the parent thread. What if the parent thread finishes while the child threads are running? Welp, kids are no better than their parents, so sadly, the child threads will terminate when the parent terminates.

To prevent this from happening, we use pthread_join( t_a, NULL) which will cause the parent thread to wait for the child thread t_a to terminate before continuing

So what does the child threads do?

The two child threads will each run this function void *add(void*args) to compute the sum. Note: the sum is a global variable. Where does global variables live in the memory space? In the data section. Which sections are shared by threads? data, heap, and code/text. My point is: both pthread_t t_a and pthread_t t_b can access the int sum = 0

int sum = 0; // Global int to store the sum of the two arrays
sem_t mutex; // Synchronization Bit

void *add(void *arg){
    int *ptr = (int *) arg;
    while(*ptr != -1){
        sem_wait(&mutex);
        sum += *ptr;
        printf("value: %d sum %d\n", *ptr,sum );
        sem_post(&mutex);
        ptr++;
    }
    return NULL;
}

First we have to convert the parameter void *arg into a int *ptr because we passed in the int array when creating the thread and the variable name of the array : int A[4]= {1,2,3,-1} in other words, A stores the pointer to the first element of the array. If you want to learn more about pointers click here.

we loop over the array. Ignore the sem_wait(&mutex) and sem_post(&mutex) these functions are again part of the synchronization and critical section problem. . For now, just pretend that they were not there.

we dereference *ptr and increment and the value of sum and move to the next element using ptr++

Once both child threads finish looping through their array and terminates, the parent thread will continues execution and print the total

    pthread_join(t_a, NULL);
    pthread_join(t_b, NULL);
    printf("Total: %d\n", sum);

    return 0;

I highly recommend copying the entire code section above and running it using gcc -o OUTPUT_FILE_NAME src.c -pthread. Here, src.c is the C source code file you copied into. OUTPUT_FILE_NAME is an arbitrary name of your executable and -pthreads will link the pthread library. Run the program using ./OUTPUT_FILE_NAME. Mess around with it and have fun.