DEV Community: Calvin Nguyen

I tried Github CLIs...and I never open browser again!

Calvin Nguyen — Sun, 30 Aug 2020 03:26:51 +0000

Update: I added #discuss, so please if anyone of you knows new features of Github CLIs, feel free to comment. Below, I found more cool things I could do with gh.

Inspiration

GitHub tools are all great, but sometimes, I get exhausted as I’m coding and have to switch from my terminal/text editor to do many clicks in the browser, just to create or view a PR.
Luckily, on March 6th, 2020, GitHub released a new cool GitHub CLI to create PR/ Issue in your local terminal.

In this post, I will go over 1 main command that I usually daily and highly recommend: gh pr <command>.

Installment

macOS

Easy Install With brew: $ brew install github/gh/gh
Upgrade: brew update && brew upgrade gh

Windows

Install gh via Scoop:

scoop bucket add github-gh https://github.com/cli/scoop-gh.git
scoop install gh

Linux

For Linux and other platforms, please refer to this GitHub page for different installment

Normal flow vs. new Github CLI

Old Process of creating a PR:

(feat/login)$ git add .
(feat/login)$ git commit -m "init skeleton code for login"
(feat/login)$ git push origin feat/login
Open Github on browser
Open Github project
Click Create a PR
Fill the title and body

Now, let's see how many steps when we use gh pr create:

(feat/login)$ git add .
(feat/login)$ git commit -m "init skeleton code for login"

(feat/login)$ gh pr create
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 4 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 444 bytes | 444.00 KiB/s, done.
Total 5 (delta 4), reused 0 (delta 0)
remote: Resolving deltas: 100% (4/4), completed with 4 local objects.
To github.com:calvinqc/trivin.git
   1c179cb..7953ecc  HEAD -> gh-testing
Branch 'feat/login' set up to track remote branch 'feat/login' from 'origin'.

Creating pull request for feat/login into master in calvinqc/trivin
? Title [WIP] Login API
? Body <Received>
? What's next? Submit
https://github.com/calvinqc/trivin/pull/1

Options

Source from Github CLIs:

  -a, --assignee login   Assign people by their login
  -B, --base string      The branch into which you want your code merged
  -b, --body string      Supply a body. Will prompt for one otherwise.
  -d, --draft            Mark pull request as a draft
  -f, --fill             Do not prompt for title/body and just use commit info
  -l, --label name       Add labels by name
  -m, --milestone name   Add the pull request to a milestone by name
  -p, --project name     Add the pull request to projects by name
  -r, --reviewer login   Request reviews from people by their login
  -t, --title string     Supply a title. Will prompt for one otherwise.
  -w, --web              Open the web browser to create a pull request

Easy 1 line command:

$ gh pr create -t "[WIP] Login API" -b "Init skeleton code for Login API" -r "calvinqc" -l "feat" -p "Roadmap" -B dev

If there’s one thing that I love about gh pr create, it is that it will push + create a PR at the same time.

List all PRs

$ gh pr list
Pull requests for calvinqc/trivin
#2  [WIP] Register API  feat/register
#1  [WIP] Login API     feat/login

View a PR

$ gh pr view 1
Opening https://github.com/calvinqc/trivin/pull/1 in your browser

Get status of all PRs

$ gh pr status
Relevant pull requests in calvinqc/trivin
Current branch
  #1  [WIP] Login API     feat/login
   - Checks passing
Created by you
  #2  [WIP] Register API  feat/register
   - Checks passing
  #1  [WIP] Login API     feat/login
   - Checks passing
Requesting a code review from you
  You have no pull requests to review

Checkout a PR

This is very similar to a regular branch checkout, but I don't have to checkout and then pull the code from that branch

$ gh pr checkout 1

Let's connect

https://linktr.ee/calvinqc

A Step-by-Step Guide to Setting Up a Node.js API With Passport-JWT

Calvin Nguyen — Sat, 22 Aug 2020 21:37:56 +0000

Authentication and authorization are a huge part of applications. Whenever there’s an API route without protection or checks, an application can easily become a target for hackers. That’s why we need a secure token — the JSON Web Token (JWT).

The Basics of JWT

I will not go too deeply into JWT, but here are all the basics.

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA.

JSON web tokens encode and decode your user’s info. They’re used for authorization and information exchange.

They consist of three parts — header, payload, and signature — separated by dots (.) like this: xxxxx.yyyyy.zzzzz

Before You Begin

I’ll assume your computer already has npm and testing with Postman, if not check out this video.

Here’s the code if you have any trouble with the process and join Trivin’s slack if you need to ask any questions.

Server Setup

Skip this step if you prefer to use your own server.

If you don’t have a project, we’ll use Trivin to set up project templates. In this article, we’ll use it to create a simple-node-server.

$ npm i trivin -g
$ trivin server simple-node-server -g -i

This will create a simple but well-structured node-server, initialize Git, and install all the project dependencies.

Installation

$ npm i passport passport-jwt winston cors express-validator jsonwebtoken

Supporting Files Setup

$ mkdir store/ 
$ touch store/passport.js store/config.js store/utils.js controller/constant.js

Constant.js

First, there’s something I really like to do in the constant.js file. Instead of writing a lot of strings, I create variables for strings that I’m likely to re-use.
Allow TextEditor to auto-complete for me and reduce typos in strings.
Add these to the constant.js file:

export const EMAIL_IS_EMPTY = 'EMAIL_IS_EMPTY';
export const PASSWORD_IS_EMPTY = 'PASSWORD_IS_EMPTY';
export const PASSWORD_LENGTH_MUST_BE_MORE_THAN_8 =
  'PASSWORD_LENGTH_MUST_BE_MORE_THAN_8';
export const WRONG_PASSWORD = 'WRONG_PASSWORD';
export const SOME_THING_WENT_WRONG = 'SOME_THING_WENT_WRONG';
export const USER_EXISTS_ALREADY = 'USER_EXISTS_ALREADY';
export const USER_DOES_NOT_EXIST = 'USER_DOES_NOT_EXIST';
export const TOKEN_IS_EMPTY = 'TOKEN_IS_EMPTY';
export const EMAIL_IS_IN_WRONG_FORMAT = 'EMAIL_IS_IN_WRONG_FORMAT';

`utils.js`

A file that stores all the functions and validations that are used throughout the project.
It makes your code in the API Controller files much cleaner.

import sha256 from 'sha256';
import { check } from 'express-validator';
import {
  PASSWORD_IS_EMPTY,
  PASSWORD_LENGTH_MUST_BE_MORE_THAN_8,
  EMAIL_IS_EMPTY,
  EMAIL_IS_IN_WRONG_FORMAT,
} from './constant';
export const generateHashedPassword = password => sha256(password);
export function generateServerErrorCode(res, code, fullError, msg, location = 'server') {
  const errors = {};
  errors[location] = {
    fullError,
    msg,
  };
return res.status(code).json({
    code,
    fullError,
    errors,
  });
}
// ================================
// Validation:
// Handle all validation check for the server
// ================================
export const registerValidation = [
  check('email')
    .exists()
    .withMessage(EMAIL_IS_EMPTY)
    .isEmail()
    .withMessage(EMAIL_IS_IN_WRONG_FORMAT),
  check('password')
    .exists()
    .withMessage(PASSWORD_IS_EMPTY)
    .isLength({ min: 8 })
    .withMessage(PASSWORD_LENGTH_MUST_BE_MORE_THAN_8),
];
export const loginValidation = [
  check('email')
    .exists()
    .withMessage(EMAIL_IS_EMPTY)
    .isEmail()
    .withMessage(EMAIL_IS_IN_WRONG_FORMAT),
  check('password')
    .exists()
    .withMessage(PASSWORD_IS_EMPTY)
    .isLength({ min: 8 })
    .withMessage(PASSWORD_LENGTH_MUST_BE_MORE_THAN_8),
];

Passport.js Setup

A node.js library that helps you with the authentication.
Add this to your store/passport.js:

import { Strategy, ExtractJwt } from 'passport-jwt';
import { config, underscoreId } from './config';
import { User } from '../database/models';

export const applyPassportStrategy = passport => {
  const options = {};
  options.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();
  options.secretOrKey = config.passport.secret;
  passport.use(
    new Strategy(options, (payload, done) => {
      User.findOne({ email: payload.email }, (err, user) => {
        if (err) return done(err, false);
        if (user) {
          return done(null, {
            email: user.email,
            _id: user[underscoreId]
          });
        }
        return done(null, false);
      });
    })
  );
};

store/config.js is where I keep all of my configurations of the app:

export const config = {
  passport: {
    secret: '<Add_Your_Own_Secret_Key>',
    expiresIn: 10000,
  },
  env: {
    port: 8080,
    mongoDBUri: 'mongodb://localhost/test',
    mongoHostName: process.env.ENV === 'prod' ? 'mongodbAtlas' : 'localhost',
  },
};
export const underscoreId = '_id';

Modify app.js to use it with passport:

import express from 'express';
import logger from 'winston';
import bodyParser from 'body-parser';
import cors from 'cors';

import passport from 'passport';
import mongoose from 'mongoose';

import { config } from './store/config';
import { applyPassportStrategy } from './store/passport';
import { userController } from './controller';

const app = express();

// Set up CORS
app.use(cors());

// Apply strategy to passport
applyPassportStrategy(passport);
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// API Route
app.use('/', userController);

/**
 * Get port from environment and store in Express.
 */
const { port, mongoDBUri, mongoHostName } = config.env;
app.listen(port, () => {
  logger.info(`Started successfully server at port ${port}`);
  mongoose
    .connect(mongoDBUri, { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => {
      logger.info(`Conneted to mongoDB at ${mongoHostName}`);
    });
});

Run Your App

$ npm start

Let’s now go back and improve user.controller.js by applying passport-jwt to our API.

Apply Passport-jwt to Register/Login API

Image Source: dotnettricks.com

import express from 'express';
import jwt from 'jsonwebtoken';

import { validationResult } from 'express-validator';
import { config } from '../store/config';

import {
  generateHashedPassword,
  generateServerErrorCode,
  registerValidation,
  loginValidation,
} from '../store/utils';

import {
  SOME_THING_WENT_WRONG,
  USER_EXISTS_ALREADY,
  WRONG_PASSWORD,
  USER_DOES_NOT_EXIST,
} from '../store/constant';

import { User } from '../database/models';

const userController = express.Router();

const createUser = (email, password) => {
  const data = {
    email,
    hashedPassword: generateHashedPassword(password),
  };
  return new User(data).save();
}

/**
 * GET/
 * retrieve and display all Users in the User Model
 */
userController.get('/', (req, res) => {
  User.find({}, (err, result) => {
    res.status(200).json({ data: result });
  });
});

/**
 * POST/
 * Register a user
 */
userController.post('/register', registerValidation, async (req, res) => {
  const errorsAfterValidation = validationResult(req);
  if (!errorsAfterValidation.isEmpty()) {
    return res.status(400).json({
      code: 400,
      errors: errorsAfterValidation.mapped(),
    });
  } 
    try {
      const { email, password } = req.body;
      const user = await User.findOne({ email });

      if (!user) {
        await createUser(email, password);

        // Sign token
        const newUser = await User.findOne({ email });
        const token = jwt.sign({ email }, config.passport.secret, {
          expiresIn: 10000000,
        });
        const userToReturn = { ...newUser.toJSON(), ...{ token } };

        delete userToReturn.hashedPassword;

        res.status(200).json(userToReturn);
      } else {
        generateServerErrorCode(res, 403, 'register email error', USER_EXISTS_ALREADY, 'email');
      }
    } catch (e) {
      generateServerErrorCode(res, 500, e, SOME_THING_WENT_WRONG);
    }
});
/**
 * POST/
 * Login a user
 */
userController.post('/login', loginValidation, (req, res) => {
  const errorsAfterValidation = validationResult(req);
  if (!errorsAfterValidation.isEmpty()) {
    return res.status(400).json({
      code: 400,
      errors: errorsAfterValidation.mapped(),
    });
  } 
      const { email, password } = req.body;
      const user = await User.findOne({ email });
      if (user && user.email) {
        const isPasswordMatched = user.comparePassword(password);
        if (isPasswordMatched) {
          // Sign token
          const token = jwt.sign({ email }, config.passport.secret,         
          {
            expiresIn: 1000000,
          });
          const userToReturn = { ...user.toJSON(), ...{ token } };
          delete userToReturn.hashedPassword;
          res.status(200).json(userToReturn);
        } else {
          generateServerErrorCode(res, 403, 'login password error', WRONG_PASSWORD, 'password');
        }
      } else {
        generateServerErrorCode(res, 404, 'login email error', USER_DOES_NOT_EXIST, 'email');
      }
});
export default userController;

Instead of using the user’s email and hashed password for authorization, which may not be secured during the communication between the client and the server.
We use the JWT token for authorization. This way, we can ensure the security of the password and user’s email to be encrypted.

Testing

At this point, I’ll assume that you know how to use Postman.
Use the POST/ method and enter localhost:8080/register and localhost:8080/login.
After you test your Register API, you’ll successfully get a result similar to below. Copy the token to your clipboard.

Authorization

Let’s see if you want to go to a specific link that requires the user to login. Then, you can simply add an authorization in the API.

Let’s look at an example.

In user.controller.js, I include a simple '/' API that retrieves the list of all users — but I don’t want to retrieve all the users unless I log in as a user.
Another example is Facebook. If you want to go to the news feed and retrieve all your posts, you need to be logged in.
Here’s an example when you go to a secured API Route without a JWT Token (aka, you haven’t logged in):

An example with no JWT attached to the API

Authorization with Passport JWT

Add these highlights to your user.controller.js:

import express from 'express';
import jwt from 'jsonwebtoken';
import passport from 'passport';
import { validationResult } from 'express-validator';
...
/**
 * GET/
 * retrieve and display all Users in the User Model
 */
userController.get(
  '/',
  **passport.authenticate('jwt', { session: false }),**
  (req, res) => {
    User.find({}, (err, result) => {
      res.status(200).json({ data: result });
    });
  }
);
...
export default userController;

Now, test the API with Postman. Click on “Authorization”, and choose type “Bearer Token.” Then, paste your token in the token field and run:

With JWT, you’ll be able to retrieve all the users

Well Done!

You’re now able to authorize and secure all other routes that require the user to login before using the API.

Follow-up & connect with me on Github | LinkedIn | Twitter

Quick Java, Spring, Kafka & Zookeeper Setup on macOS

Calvin Nguyen — Sat, 22 Aug 2020 20:18:14 +0000

Image source from Cloudkarafka

In this tutorial/lab, you will experience a very simple and quick hands-on experience with:

Java
Springboot
Apache Kafka
Zookeeper

Requirements

Homebrew
Testing with Postman. To learn more, you can watch this video.
Understanding the core concept of Kafka

Installment

Install Java 8

$ brew tap adoptopenjdk/openjdk
$ brew cask install adoptopenjdk8

Install Kafka

$ brew install kafka

Open the 1st terminal to start Zookeeper

$ zookeeper-server-start /usr/local/etc/kafka/zookeeper.properties

Open the 2nd terminal to start Kafka

$ kafka-server-start /usr/local/etc/kafka/server.properties

Open the 3rd terminal to create a Kafka topic

$ kafka-topics --bootstrap-server localhost:9092 --topic <enter-a-topic> --create --partitions 1 --replication-factor 1

Create a Maven project with Springboot

Open start.spring.io
Choose Spring Web & Spring for Apache Kafka dependencies
Open your project in IDE (I prefer to use IntelliJ)

Configure Kafka Producer and Consumer

Add this to application.properties in src/main/resources folder, and modify the highlights:

spring.datasource.url=jdbc:mysql://localhost:3306/<your-db-name>?allowPublicKeyRetrieval=true&useSSL=false&serverTimezone=UTC
spring.datasource.username=<your-db-username>
spring.datasource.password=<your-db-password>

app.topic=<same-topic-created-in-terminal>

spring.kafka.bootstrap-servers=localhost:9092
spring.kafka.groupId=<any-group-id>

spring.kafka.consumer.bootstrap-servers=localhost:9092
spring.kafka.consumer.group-id=<any-group-id>
spring.kafka.consumer.auto-offset-reset=earliest
spring.kafka.consumer.key-deserializer=org.apache.kafka.common.serialization.StringDeserializer
spring.kafka.consumer.value-deserializer=org.apache.kafka.common.serialization.StringDeserializer

spring.kafka.producer.bootstrap-servers=localhost:9092
spring.kafka.producer.value-serializer=org.apache.kafka.common.serialization.StringSerializer
spring.kafka.producer.key-serializer=org.apache.kafka.common.serialization.StringSerializer

Open a new terminal, and create a topic:

kafka-topics --bootstrap-server localhost:9092 --topic <same-topic-in-application.properties> --create --partitions 1 --replication-factor 1

Initialize Kafka Producer & Receiver Service

Inside the package com.example, create these folders: $ mkdir controller model repository service
Create Producer and Receiver Services: $ touch service/KafkaConsumer.java service/KafkaProducer.java
Add this to KafkaConsumer:

package <enter-your-package-here>;

import org.springframework.kafka.annotation.KafkaListener;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
@Service
public class KafkaConsumer {
    public static List<String> messages = new ArrayList<>();
    private final static String topic = "<same-topic-in-resources>";
    private final static String groupId = "<same-group-id>";

    @KafkaListener(topics = topic, groupId = groupId)
    public void listen(String message) {
        messages.add(message);
    }
}

Add this code to KafkaProducer:

package <enter-your-package-here>;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.kafka.core.KafkaTemplate;
import org.springframework.stereotype.Service;

@Service
public class KafkaProducer {

    @Autowired
    private KafkaTemplate<String, String> kafkaTemplate;

    @Value("${app.topic}")
    private String topic;

    public void produce(String message) {
        kafkaTemplate.send(topic, message);
    }
}

Create Kafka API

Create a Kafka controller file: $ touch controller/kafkaController.java and add this:

package server.controller;

import org.springframework.web.bind.annotation.*;

import server.service.KafkaConsumer;
import server.service.KafkaProducer;

import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

@RestController
public class KafkaController {
  @Autowired
  private KafkaConsumer consumer;

  @Autowired
  private KafkaProducer producer;

  @PostMapping("/send")
  public void send(@RequestBody String data) {
    producer.produce(data);
  }
  @GetMapping("/receive")
  public List<String> receive() {
    return consumer.messages;
  }

  public KafkaConsumer getConsumer() {
    return consumer;
  }

  public KafkaProducer getProducer() {
    return producer;
  }

  public void setConsumer(KafkaConsumer consumer) {
    this.consumer = consumer;
  }

  public void setProducer(KafkaProducer producer) {
    this.producer = producer;
  }
}

NOTE: There are also models and repository, which you use to configure with your database, but we don’t need it in this tutorial.

Final Project Structure

Testing

There are 2 ways to send the message from the producer: Postman & Terminal.

Open the 3rd terminal that you used to create the topic earlier

$ kafka-console-consumer --bootstrap-server localhost:9092 --topic <enter-your-topic> --from-beginning

1. Postman

Use POST/ method and enter localhost:8080/send with the JSON body:

{
   "message": "Hello from Postman"
}

2. Terminal
Open the 4th terminal, and type:

$ kafka-console-producer --broker-list localhost:9092 --topic <enter-your-topic>
> Hello from the terminal

Check the terminal, you will see the message that you sent via postman and terminal in real-time.

Done & Congratulations!

Follow-up & connect with me on Github | LinkedIn | Twitter

18 VS Code Extensions for a happier coding

Calvin Nguyen — Thu, 20 Aug 2020 21:09:59 +0000

What are Best Chrome Extensions for Web Dev and Cash-back?

Calvin Nguyen — Thu, 20 Aug 2020 18:16:47 +0000

Here are the Top 6 that I used daily:

Q: Are there any cool chrome extensions out there that could improve my web dev programming?

Adblock Plus: Block all the ads
Grammarly: Used to check my grammar when I write essays, blogs, etc.
Honey: To find me the best deals
Rakuten: Give me cash back when I shop online
Redux Dev Tool: For debugging with React
JSON View: View JSON on the web browser prettier

Apps to install when you got the new Mac

Calvin Nguyen — Thu, 20 Aug 2020 18:11:35 +0000

A guide to set up your Mac and improve your programming experience to another level with Vim/Zsh/Tmux, macOS Apps, Extensions for high productive development

Inspiration

Whenever I got a new laptop, it usually takes me up to 2 hours to re-setup everything again, and I start getting tired and annoyed. Every time I set up my Mac again, I learned something new and cool things that improve my programming experience better.

So, I make a collection of setup and apps to share with you my personal guide of setting up a new Mac for software development.

1. System Preferences

System Preferences > Trackpad/Keyboard > set up as above images
iCloud > login to your account
Filevault: On
Disable Ask Siri
Location Services: On (Limited)
Check software updates
Messages app > add your Number + email
App Store > install previously installed applications

2. Terminal

Alfred

It’s a replacement to Spotlight because it’s way much faster when it comes to search any files: brew cask install alfred

Brew

Install Xcode: $ xcode-select --install
Install Homebrew: $ /bin/bash -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew cask install to install an application

iTerm2

A replacement to Terminal
Clovis wrote an awesome tutorial on how to set up more in-depth
A comparison: iTerm2 vs. Terminal
Install: brew cask install iterm2

Optional: ZSH/Tmux/Vim

I used this awesome guy’s repo as a template

3. Git

Git has become one of the main tools that every developer should know how to use it. The new Mac usually comes with Git pre-installed.

Install git: brew install git
Config git:

$ git config --global user.name "Your Name"
$ git config --global user.email "you@your-domain.com"

You will constantly be using Git daily, and SSH will allow you to pull and push to git without re-entering email and password every single time.

Git already had an article on how to add SSH to your Mac

4. Install Mac Apps with command line

If you’re a fan of command-line, and you don’t want to install apps by going through each of them on Chrome. then you should try mas

Install mas for quick setup: $ brew install mas
Search for your app: $ mas search XCode . You will find the app ID for each app
Copy the App ID into 1 command line: $ mas install <app_id1> <app_id1> <app_id3>

Note: If these apps below don’t have an app ID, then you have to install it from the browser. (Links included)

Work

XCode: 497799835
The Unarchiver: 425424353
Microsoft Word: 462054704
Excel: 462058435
PowerPoint: 462062816
VSCode
Postman
Docker

Communication

Slack: 803453959
Notions: 974929595
Zoom: 884018914

Entertainment

Messenger: 1480068668
WeChat: 836500024
Line: 539883307
Chrome
Viber
Spotify
Open Spotify: This website lets you listen to Spotify music with NO Ads

5. Chrome Extension

You don’t want to install many Chrome extensions unless you want it to “eat” a lot of your RAM or unless you have a powerful computer.

Here are the TOP 6 that I used daily:

Adblock Plus: Block all the ads
Grammarly: Used to check my grammar when I write essays, blogs, etc.
Honey: To find me the best deals
Rakuten: Give me cash back when I shop online
Redux Dev Tool: For debugging with React
JSON View: View JSON on the web browser prettier

6. VSCode Extension

How to keep your Intro short, unique, and creative at the same time

Calvin Nguyen — Wed, 19 Aug 2020 18:35:47 +0000

👉 http://github.com/calvinqc

Feel free to share yours in the comment!

Do less and get more jobs done with 5 WFH alternative apps

Calvin Nguyen — Wed, 19 Aug 2020 05:14:05 +0000

Since the COVID-19, everything shifted to move online. I start using Apple’s default apps such as Photos, Mail, Calendar, Reminders, Notes,... which are all simple, lightweight, clean, and do the work I need.

Then, as I’ve learned, I found more alternative apps that do the job better than Apple, which are faster, and nice UI, and has more features.

1. Spark Mail App

Templates

Problem: When I was sending out an email to different clients with the same template, I had to copy and paste multiple times and make changes. Sometimes I forgot to change the name of the person, and I felt so embarrassed.

Or maybe I might lose the clipboard and had to search for the email I sent, and copy the template again, which was quite inconvenient.

Solution: With Spark, I can freely create different templates for every scenario, and Of course I can share the template with my team.

Send later

I can send an email in the early morning but don’t want to wake up at 7 am and send the email.

I know that there are other 3rd parties software that can schedule an email, but having ones built-in the Mail App makes everything easier.

Synchronization

When I changed a new laptop, I have to enter all 5–6 emails again. With Spark, all I need is one email, and it will automatically sync all emails into my device.

Smart Inbox & Search

With Apple Mail, when I pinned an email, it lost among many new emails after a few minutes. If I have different types of pins, I would have to go to "Pinned" and search for it. And usually, Apple Mail search drives me nut.

With Spark, the "Pinned" is separated from the rest of regular emails so I could see it on the top of my mailing list.

Spark for Team

The real-time online collaboration will be the main focus of 2020, and Readdle is creating the future of email with Spark.

But you’ll need to pay to use it with Team.

2. Fantastical Calendar

User Interface

It’s 2020, and to be honest, people would likely try the app because it’s PRETTY!

Fantastical has a brand new user interface with multiple views, including detailed (and beautiful) full-screen views for iPhone, iPad, and Mac.

By default, it uses a mixture of a white & dark theme, which looks amazing

Conference Calls

This feature is simple, but I think I use it more than anything else when it comes to online meetings these days.

I can create an event with a Conference Calls link such as Zoom, Google Meet, etc. without going to a 3rd party or different apps such as Calendly or Google Calendar.

Bonus: It also has a Join icon in the menu bar.

Different Calendar Sets

Calendar sets let me group and view different sets of calendars, include from my team, my family, and all calendar together.

This features completely removes any distractions during my normal time, so I don’t need to worry, or startled:

“Oh shoot, I have another meeting. Oh never mind, it’s my girlfriend’s meeting.”

Customization

Template: Yes, similar to Spark, it has a template so you can create different events without finding the exact events over 3 months ago.
Shortcut: It becomes much easier to see what’s happening today, and create a new event with just 1 steps
Custom color: I can choose all meetings in different colors without creating a new calendar.
Time Zone: I could different timezones to make sure that it does not conflict with other schedules from New York or Vietnam.

Pricing

Of course, one of the major reasons that I was doubtful, in the beginning, was SUBSCRIPTION. But after 2 weeks, I don’t want to go back to Apple Calendar.

3. Alfred4

I used the spotlight for years, but when I want to search for a quick file, a folder, or a photo. It fails and disappoints me. I had to go back to the Finder and look for it.

But Alfred is different and has more cool features than you could do with just a search Spotlight. There’s only 1 word I can describe it: SUPER-FAST!

Default Results

File Search

Using the file search keywords is the best way to find files; it keeps the default results both fast and focused

Web Search

Search the web using the built-in default web searches or create your own custom searches

Clipboard History

Automatically store copied items in a searchable clipboard history

Calculator

Do quick mathematical calculations and copy the result to the macOS clipboard

Terminal/Shell

Quickly open the terminal and run shell commands

You could find more features here.

4. Notion

Notion is an all-in-one workspace where you can write, plan, collaborate, and get folders organized. It allows you to take notes, add tasks, manage projects with Teams.

Before the COVID, Notion has a paid plan if you run out of storage, or if you add more people into the workspace.

During the COVID, it has made FREE for all. And only charge when you use it with Team.

5. iTerm2 (Terminal)

If you’re a developer, you don’t want to miss trying this awesome replacement for the terminal.

Customizable

iTerm2 also lets you customize the color scheme, font, transparency, etc.
It’s possible to choose a font and adjust vertical and horizontal spacing.
Any key can be mapped to any function

Autocomplete & History are built-in

Ignore the Uppercase
iTerm2 can store up to 4M of the history of commands you already used.
This allows for better search and makes it possible to type the few first letter command only once and then search for it through the history for subsequent uses.

Integration with other Dev Tools

The great mouse and clipboard support that are built-in go really well with tmux.
Works perfectly with Oh My Zsh. It’s a perfect base to add Oh My Zsh on top of it and enjoy a lot of themes and a really pleasant look and feel.

For more features, click here

Conclusion

That’s all 5 alternative apps I personally use in my daily life to boost my working performance!

Let me know if you found any interesting apps

What Does it Take to Build a Successful, Cross-Functional Team?

Calvin Nguyen — Tue, 21 Jul 2020 05:47:48 +0000

When one project or organization gets bigger and involves more collaborations between different people from different expertise, it‘s imperative to ensure smooth integration among different teams.

Therefore, understanding the characteristic of cross-functional cooperation (CFC) has become one of the basic knowledge of any manager.

What is Cross-functional Cooperation (CFC)?

Cross-functional cooperation is a group of people including those with different expertise in finance, operations, marketing, HR, and IT to work together towards a common goal. Each will focus on their area but share knowledge and resources to facilitate and expedite the successful team goal.

Managers need to clearly understand what defines a successful CFC

When individuals with diverse work styles and functions come together the results can be innovative and transformative. Research shows however that despite its positive effects, many cross-functional teams are dysfunctional.

Therefore, it is important that leaders or managers must have a clear understanding of what influencers will impact the team’s productivity and its possible outcomes if they could achieve those.

The Influencers

There are 4 main influencers that impact cooperation
Image for post

A superordinate goal

To complete a major goal of the project, managers usually split into many small features/projects with a clear goal, which will support one final big project.

In order to build a beautiful and well functional Macbook, we cannot have 1 team to build everything.

Therefore, it is split into many small teams to work on specific tasks, which support one feature of the Macbook.

For example, we may have 2 teams: Software and Hardware.
The software Team can split into many sub-teams:

Cloud, iOS Version, UI/UX…

Same thing for the Hardware team:

Battery, Trackpad, Mainboard, Wifi, Bluetooth…

Of course, those listed teams above can be divided into many smaller teams to work on smaller parts to support that feature. In the final phase, all small features combine together to create a successful Macbook Pro as we see today.

Rules and procedures

No team is successful without rules/regulations

When we code as a team, there is a specific rule or guideline for all developers to follow so that others can read the code easily and reduce the time to understand.

If a team consist of 10 developers and all 10 developers have 10 different coding style, then we will have a massive merge conflict when other developers try to merge different features to make their feature works. It will waste a lot of time and headaches.

3 months ago, I wrote 2 simple tips to increase code development, which now all my team members could code with more confidence than other teams in classes.

Consequently, it is imperative that a clear hierarchy is defined and the rules of engagement and communication are understood by all.

Physical proximity

For a team to produce the best results, it’s better for everyone to stay close to each other.

When I intern at PayPal, all the team members sit together on the same floor, the same area. So whenever my manager wants to do a standup meeting, everyone can walk 5 seconds to his desk. Or if I have questions, I can move my chair next to my mentor to ask questions. This will save a lot of time and provide better communication.

“When project team members work near one another, they are more likely to communicate and, ultimately, cooperate”

Due to Covid-19: Many companies now switch to remote meetings via Zoom, Facebook Messenger, Google Meet/Google Hangout, Discord, etc.

I‘ve been a fan of Facebook Messenger and WebRTC technology, and now they just released new features to share screen and add more people to the group’s video call, which is so awesome.

Accessibility

Having the same working environment system will enable everyone to collaborate with each other better.

When we want to schedule a meeting, team members should have the same calendar system such as Outlook, Google Calendar, Calendar. This allows everyone to easily see each others’ schedules and make a meeting without having back-to-back rescheduling’s conflicts.

There are many great tools for project management such as MS Project, Asana, Monday, Sunsama, Smartsheet, etc. but since most of the tools are paid, so as a developer, I just prefer Github Project

Outcome

At the end of a milestone, the project manager will analyze and evaluate the team’s performance based on 2 different outcomes:

Task outcomes First and foremost, managers will examine the success of a project by the final result:

Whether or not have the team achieved the goal this week or month.
By giving the best resources to the team, have they fully or partially achieve the goal

Psychosocial outcomes

This type of outcome usually results in the team’s communication, individuals’ emotion.

The emotional and psychological effects that strong performance will have on the project team.

Is everyone happy with each other?
Is it easy for each member to express and listen to different ideas? Then, the manager will learn what to improve for better results next time and continue to keep or change the way the team works!

WebRTC — The technology that powers Google Meet/Hangout, Facebook Messenger and Discord

Calvin Nguyen — Mon, 20 Jul 2020 22:25:37 +0000

Here is what happens during a P2P connection, and all you need to know about Web Real-Time Communication

Read the original Post here

Everything you need to know about Web RTC in 9 minutes

History of Real-time Communication

Around the 2010s, real-time communication was only available using additional software, plugins, or Adobe Flash.
In 2013, the first cross-browser video call between Chrome & Firefox was introduced.
In 2014, the first cross-browser data transfer occurred, opening to a new-emerging trend in real-time communication via the client-side.

Today, it is known as the Web RTC that we use every day in Chrome, Mozilla Firefox, Opera, Safari, Edge, iOS, and Android.

Source by CometChat

Overview

WebRTC stands for Web Real-Time Communication, which is a networking technology introduced in 2011 by Google to enable real-time audio, video, and data transmission across the web and native browsers.

"Its mission is to enable rich, high-quality RTC applications to be developed for the browser, mobile platforms, and IoT devices, and allow them all to communicate via a common set of protocols."

WebRTC allows web apps to create Peer-To-Peer communication. WebRTC is a vast topic, so in this post, we'll focus on the following issues of WebRTC:

Why do developers & companies love Web RTC?
What happens during the P2P connection
- Signaling
- NATs & ICE
- STUN & TURN Server
- VP9 Video Codec
WebRTC APIs
Security

Why do developers & companies love Web RTC?

Free open source
- It provides browsers with end-to-end direct communication and allows developers to facilitate this connection easily.
Speed Enhancement
- No longer needs to be routed through a server; it reduces latency and bandwidth consumption.
- Direct communication improves the speed of data transfer & file sharing.
No third party app required
- Requiring no additional software, plugins, or continuous server involvement (Well, it does, but only in the beginning, you will know why later)
- Easily be embedded in any websites and connect peers across the internet.
Easy to implement
- Less time and effort to facilitate peer-to-peer (P2P) connection.
- All the functionality can be done through the client-side. Developers just need to download a WebRTC compatible browser and use
Compatible
- Supported by most popular browsers: Microsoft Edge, Google Chrome, Mozilla Firefox, Safari, Safari, Opera, Vivaldi.
- Supported by Android, Chrome OS, Firefox OS, BlackBerry 10, iOS, Tizen.
Provide a safe connection across many browsers
- Encryption is mandatory for all of the WebRTC components.
- Since it is not a plugin, it runs inside the browser's sandbox without creating a new process so that no malware can get into the user's system.
- No need to keep track of the updates. With the automatic updates of the browser's version, the user gets the patch as soon as it is available.

What happens during the P2P connection

Image by PubNubTo connect two browsers, Web RTC is required to perform five steps to set up a P2P connection.

Signal processing to remove ambient noise from the audio or video.
Codec handling to compress and decompress the audio or video.
Routing from one peer to another through firewalls, (NATs), and relays to create an Interactive Connectivity Establishment (ICE)
User data is encrypted before transmitting across connections.
Managing bandwidth to the user what each peer has to give

Signaling

P2P connections in the browser are established by a server to ensure all peers agree to the session.
Information like session keys, error messages, media metadata, codecs, bandwidth, and public IP address and ports are shared between peers to create the connection.
The server signals to both peers to determine what media format to use and what each peer wants to send to the other.

Network Address Translations (NATs) and ICE

NATs translate a private IP address found on devices like a home router to a public IP address. Firewalls and NATs slow the process by blocking specific protocols or ports. The solution WebRTC uses is a framework called ICE.
ICE establishes a P2P connection over the internet by trying all connections in parallel and selecting the most efficient path. There are two types of connections: STUN & TURN

STUN Servers

It first works connecting through a STUN (Session Traversal Utilities for NAT) server to get a direct link through the network address.

A STUN server provides the requestor a public IP address to communicate with others. Its purpose is to help a requestor answer the question, "What's my IP Address?"

How STUN servers work

To set up a connection with other peers, an endpoint is required to know its public IP to share with others.

When an endpoint (Calvin) is behind a NAT/Firewall, it can only identify its local IP address, and the other (Elana) cannot connect to the local IP because of the firewall security.
This endpoint will ask for help from the STUN server to provide its public IP address and a type of NAT.
The other endpoint (Elana) can attempt the connection between the two using the given public IP address from the STUN server.
If successful, media will flow directly to each endpoint without a 3rd party or another server.
For security, all STUN servers will be dropped and wait for the next query.

Limitations - Symmetric NAT

However, the situation above may sometimes fail, and the PORT and IP number will be changed.

This situation is called "symmetric NAT" as the public IP address of the STUN server does not have enough capability to establish connectivity here, as the port would also need a translation.

Some routers use Symmetric NAT, which is made to add another security layer to the endpoint or avoid many strangers to connect to your device. A Symmetric NAT not only translates the IP address from private to public but also translates ports.

In other words, the router will only accept connections from known peers that the user previously connected to. Hence, another solution is made to ensure that the connection between two peers is successful is through the TURN server.

Why STUN servers are useful

As a protocol, STUN is super fast, lightweight, and straightforward. It allows the media to travel directly to each other in a short time. STUN is beneficial to speed up the connection and get the result faster in real-time.

The scenario is similar when the user is using LAN to download the data, which is faster than downloading from the Wi-fi. Most importantly, it allows the media to travel directly between both endpoints. STUN can be used publicly and free.

TURN Servers

TURN (Traversal Using Relays around NAT) server acts as relay servers incase the peer-to-peer connection dies. While STUN servers are used to establish the connection, TURN servers remain active throughout the association.

A TURN server keeps relaying the media between the WebRTC peers. That is why the term "relay" is used to define TURN.

How TURN servers work

This relay server is used to relay traffic if the STUN server fails, and it also has the STUN's functions.

The TURN server is a STUN server with transmitting capability built-in. More specifically, TURN is used to relay audio/video/data streaming between peers, not signaling data.

Follow the steps for STUN Servers
If STUN fails, an end-user will create a connection with a TURN server, inform all peers to send data to the server, which is in charge of transferring data to the first end-user.

One main reason why a STUN server is always used first is that the TURN server is too expensive, and uses massive bandwidth if HD Video is streamed online.

VP9 Video Codec

One of the main features, why many people start to use WebRTC, is for video streaming. As live video becomes more mainstream and starts getting higher quality, it requires data transfer to be faster or the packet size to be smaller to be easily transferred.

That is when VP9 Video Codec takes place to compress and decompress the audio or video. It helps stream video quicker and more apparent. By supporting VP8, Safari 12.1 can exchange live video with other peers.

VP9, which is an improvement from VP8, is a video compression format owned by Google and created by On2 Technologies.

The main feature is to conceal packet loss and clean up noisy images, as well as capture and playback capabilities across multiple platforms.

With VP9, users can use WebRTC to stream a 720p video without packet loss or delay. It can also support a 1080p video call at the same bandwidth and helps reduce poor connections and data usage to avoid expensive costs for users.

JavaScript APIs

There are three main Javascript APIs that handle audio capturing, video conferencing, and data transmission:

MediaStream

Utilizes a user's camera and microphone to capture and stream audio and video. Using this API allows you to get access to input devices such as the microphone and the web camera.
When a developer integrates WebRTC into their website, they can create constraints on how they want the audio and video streamed. Limitations like the frame rate, size of the video frame, resolutions, and much more.
This API was provided as part of HTML 5, whereas the other two APIs are explicitly offered for WebRTC.

RTCPeerConnection

Send the captured stream of audio and video in real-time across the internet to another WebRTC endpoint. Using these APIs enables users to transmit audio and video captured by getUserMedia to other peers.
Has features to connect to a remote peer, maintain and monitor the connection, and close the connection once after it's done.

RTCDataChannel

Transmit arbitrary data. Each data channel is associated with an RTCPeerConnection.
Built-in security (DTLS) and congestion control.

Security

One of the security risks in any real-time communication application may raise during the transmission of data. Eventually, encryption is a mandatory feature of WebRTC and is enforced on all components.

WebRTC uses two standardized encrypting protocols:

Datagram Transport Layer Security (DTLS)

A standardized protocol that is built in a browser. It's used to encrypt data streams. It is based on the Transport Layer Protocol (TLP).
Preserves the semantics of the transport because DTLS uses User Data Protocol (UDP).
It is an extension of Secure Sockets Layer (SSL); any SSL protocol could be used to secure WebRTC data allowing end-to-end encryption.

Secure Real-time Transport Protocol (SRTP)

Used to encrypt media streams.
It is an extension to Real-Time Transport Protocol (RTP), which does not have any built-in security mechanisms. Adds protection, integrity, and message authentication to the RTP.
Downside: While it provides encryption for the RTP packets, it does not encrypt the header.

Steps to secure a link between 2 peers

Initiates the signaling process exchanges the metadata between two peers.
ICE check is performed, and ICE establishes a channel between parties.
DTLS handshake is performed. If there are media transported, the SRTP uses the keys that were exported at the DTLS handshake step.
All peers have secure channels with keys that are not known publicly.
Exchange Keys between the peers.

Applications that use WebRTC

Google Meet/ Google Hangout
Facebook Messenger
Discord
Amazon Chime
....

For more, you can check out this link for a list of apps that use WebRTC
http://www.webrtcworld.com/webrtc-list.aspx

WebRTC - The technology that powers Google Meet/Hangout, Facebook Messenger and Discord

Calvin Nguyen — Mon, 20 Jul 2020 21:30:49 +0000

Here is what happens during a P2P connection, and all you need to know about Web Real-Time Communication

Everything you need to know about Web RTC in 9 minutes

History of Real-time Communication

Around the 2010s, real-time communication was only available using additional software, plugins, or Adobe Flash.
In 2013, the first cross-browser video call between Chrome & Firefox was introduced.
In 2014, the first cross-browser data transfer occurred, opening to a new-emerging trend in real-time communication via the client-side.

Today, it is known as the Web RTC that we use every day in Chrome, Mozilla Firefox, Opera, Safari, Edge, iOS, and Android.

Overview

"Its mission is to enable rich, high-quality RTC applications to be developed for the browser, mobile platforms, and IoT devices, and allow them all to communicate via a common set of protocols."

WebRTC allows web apps to create Peer-To-Peer communication. WebRTC is a vast topic, so in this post, we'll focus on the following issues of WebRTC:

Why do developers & companies love Web RTC?
What happens during the P2P connection
- Signaling
- NATs & ICE
- STUN & TURN Server
- VP9 Video Codec
WebRTC APIs
Security

Why do developers & companies love Web RTC?

Free open source
- It provides browsers with end-to-end direct communication and allows developers to facilitate this connection easily.
Speed Enhancement
- No longer needs to be routed through a server; it reduces latency and bandwidth consumption.
- Direct communication improves the speed of data transfer & file sharing.
No third party app required
- Requiring no additional software, plugins, or continuous server involvement (Well, it does, but only in the beginning, you will know why later)
- Easily be embedded in any websites and connect peers across the internet.
Easy to implement
- Less time and effort to facilitate peer-to-peer (P2P) connection.
- All the functionality can be done through the client-side. Developers just need to download a WebRTC compatible browser and use
Compatible
- Supported by most popular browsers: Microsoft Edge, Google Chrome, Mozilla Firefox, Safari, Safari, Opera, Vivaldi.
- Supported by Android, Chrome OS, Firefox OS, BlackBerry 10, iOS, Tizen.
Provide a safe connection across many browsers
- Encryption is mandatory for all of the WebRTC components.
- Since it is not a plugin, it runs inside the browser's sandbox without creating a new process so that no malware can get into the user's system.
- No need to keep track of the updates. With the automatic updates of the browser's version, the user gets the patch as soon as it is available.

What happens during the P2P connection

Image by PubNubTo connect two browsers, Web RTC is required to perform five steps to set up a P2P connection.

Signal processing to remove ambient noise from the audio or video.
Codec handling to compress and decompress the audio or video.
Routing from one peer to another through firewalls, (NATs), and relays to create an Interactive Connectivity Establishment (ICE)
User data is encrypted before transmitting across connections.
Managing bandwidth to the user what each peer has to give

Signaling

P2P connections in the browser are established by a server to ensure all peers agree to the session.
Information like session keys, error messages, media metadata, codecs, bandwidth, and public IP address and ports are shared between peers to create the connection.
The server signals to both peers to determine what media format to use and what each peer wants to send to the other.

Network Address Translations (NATs) and ICE

STUN Servers

It first works connecting through a STUN (Session Traversal Utilities for NAT) server to get a direct link through the network address.

A STUN server provides the requestor a public IP address to communicate with others. Its purpose is to help a requestor answer the question, "What's my IP Address?"

How STUN servers work

To set up a connection with other peers, an endpoint is required to know its public IP to share with others.

When an endpoint (Calvin) is behind a NAT/Firewall, it can only identify its local IP address, and the other (Elana) cannot connect to the local IP because of the firewall security.
This endpoint will ask for help from the STUN server to provide its public IP address and a type of NAT.
The other endpoint (Elana) can attempt the connection between the two using the given public IP address from the STUN server.
If successful, media will flow directly to each endpoint without a 3rd party or another server.
For security, all STUN servers will be dropped and wait for the next query.

Limitations - Symmetric NAT

However, the situation above may sometimes fail, and the PORT and IP number will be changed.

This situation is called "symmetric NAT" as the public IP address of the STUN server does not have enough capability to establish connectivity here, as the port would also need a translation.

Why STUN servers are useful

TURN Servers

A TURN server keeps relaying the media between the WebRTC peers. That is why the term "relay" is used to define TURN.

How TURN servers work

This relay server is used to relay traffic if the STUN server fails, and it also has the STUN's functions.

The TURN server is a STUN server with transmitting capability built-in. More specifically, TURN is used to relay audio/video/data streaming between peers, not signaling data.

Follow the steps for STUN Servers
If STUN fails, an end-user will create a connection with a TURN server, inform all peers to send data to the server, which is in charge of transferring data to the first end-user.

One main reason why a STUN server is always used first is that the TURN server is too expensive, and uses massive bandwidth if HD Video is streamed online.

VP9 Video Codec

VP9, which is an improvement from VP8, is a video compression format owned by Google and created by On2 Technologies.

The main feature is to conceal packet loss and clean up noisy images, as well as capture and playback capabilities across multiple platforms.

JavaScript APIs

There are three main Javascript APIs that handle audio capturing, video conferencing, and data transmission:

MediaStream

Utilizes a user's camera and microphone to capture and stream audio and video. Using this API allows you to get access to input devices such as the microphone and the web camera.
When a developer integrates WebRTC into their website, they can create constraints on how they want the audio and video streamed. Limitations like the frame rate, size of the video frame, resolutions, and much more.
This API was provided as part of HTML 5, whereas the other two APIs are explicitly offered for WebRTC.

RTCPeerConnection

Send the captured stream of audio and video in real-time across the internet to another WebRTC endpoint. Using these APIs enables users to transmit audio and video captured by getUserMedia to other peers.
Has features to connect to a remote peer, maintain and monitor the connection, and close the connection once after it's done.

RTCDataChannel

Transmit arbitrary data. Each data channel is associated with an RTCPeerConnection.
Built-in security (DTLS) and congestion control.

Security

WebRTC uses two standardized encrypting protocols:

Datagram Transport Layer Security (DTLS)

A standardized protocol that is built in a browser. It's used to encrypt data streams. It is based on the Transport Layer Protocol (TLP).
Preserves the semantics of the transport because DTLS uses User Data Protocol (UDP).
It is an extension of Secure Sockets Layer (SSL); any SSL protocol could be used to secure WebRTC data allowing end-to-end encryption.

Secure Real-time Transport Protocol (SRTP)

Used to encrypt media streams.
It is an extension to Real-Time Transport Protocol (RTP), which does not have any built-in security mechanisms. Adds protection, integrity, and message authentication to the RTP.
Downside: While it provides encryption for the RTP packets, it does not encrypt the header.

Steps to secure a link between 2 peers

Initiates the signaling process exchanges the metadata between two peers.
ICE check is performed, and ICE establishes a channel between parties.
DTLS handshake is performed. If there are media transported, the SRTP uses the keys that were exported at the DTLS handshake step.
All peers have secure channels with keys that are not known publicly.
Exchange Keys between the peers.

Applications that use WebRTC

Google Meet/ Google Hangout
Facebook Messenger
Discord
Amazon Chime
....

For more, you can check out this link for a list of apps that use WebRTC
http://www.webrtcworld.com/webrtc-list.aspx

Follow me here to get the latest blog posts

The Easiest Docker & Docker-compose Setup on Compute Engine

Calvin Nguyen — Mon, 20 Jul 2020 21:28:49 +0000

Inspiration

Whenever I created a new Compute Engine and have to set up Docker again, I usually go to multiple web pages to find the right command to install Docker and Docker-compose.

It usually takes me more than 5' just to find the command line and set up. Sometimes some websites might not have what you want. So I created this blog to help me and maybe you to setup Docker and Docker-compose in less than a minute.

Requirement

In this tutorial, I’d assume you already had a new Compute Engine running Debian (as it’s the default), and get ready to run your app with Docker.
You have knowledge with Docker and it’s better that your server has Dockerfile and/or docker-compose.yml

Getting Started

ssh into your virtual machine either via command line or Cloud Console.
Login as admin: $ sudo -s

Note: If you don’t do sudo -s first, you need to have sudo in every command

The 1 Line Command

If you already know what you’re doing but getting somewhere, here is a 1-line command that will get you Docker & Docker-compose set up for Compute Engine.
I also make commands below for you to see what’s going on.

apt update && apt install --yes apt-transport-https ca-certificates curl gnupg2 software-properties-common && curl -fsSL https://download.docker.com/linux/debian/gpg | sudo apt-key add - && add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/debian $(lsb_release -cs) stable" && apt update && apt install --yes docker-ce && curl -L "https://github.com/docker/compose/releases/download/1.26.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose && chmod +x /usr/local/bin/docker-compose

Docker

If you prefer doing separately, do the following Commands

$ apt update
$ apt install --yes apt-transport-https ca-certificates curl gnupg2 software-properties-common
$ curl -fsSL https://download.docker.com/linux/debian/gpg | sudo apt-key add -
$ add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/debian $(lsb_release -cs) stable"
$ apt update
$ apt install --yes docker-ce

Testing

$ docker
$ docker info

Executing the Docker Command without sudo

Whenever you run docker, you either have to add sudo or run sudo -s, and it annoys me sometimes.
Run the commands below: $ sudo usermod -aG docker $USER
Then log in again, you will be able to run docker without sudo

Docker-compose

Why do we need docker-compose

When you run docker run ..., your app will keep running UNTIL you close the browser. This is inefficient because you don’t want to leave your tab open forever. So we will use docker-compose, and it’ll run your app in the background

Install

$ curl -L "https://github.com/docker/compose/releases/download/1.26.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

$ chmod +x /usr/local/bin/docker-compose

Testing

docker-compose --version

Usage

Make sure you have a docker-compose.yml in your directory
Run docker-compose up --build
After starting your app successfully, run docker-compose up -d
Otherwise, check the error and fix the bug

Congratulation

Now, you’re able to run your app in the background and use it using the public IPv4!