新公司，新团队，一个月啦

团队项目

目前团队负责的项目是跟CNN的一个专门的分布合作，具体什么部门就不透露了

项目具体分为三大块：

• CMS (Content Management System): 给CNN团队提供一个内容管理，发布平台
• Product Website： 面向真正的市场用户，提供原创视频为内容
• Analytic: 通过用户提供的评论，进行分析学习，了解用户对视频的反应

团队的分工与合作

主要7个开发人员，每个人都有相近的tech stack，没有专门的分工，除QA 和 Project manager外。

通过一个月的自我学习和相互协作，渐渐发现团队的开发进度非常快，有team leader， project manager， QA 发布相关的tickets到Pivotal Tracker，人人都可以start any ticket they like。也许这就是团队进度快的，tickets完成量高得原因。

不需要专门的对tickets进行分配，觉得有能力完成就可以自己开始做任务tickets。由于tech stack的相近也不用过多的担心无法完成，因为可以随时从身边的队友取得帮助。

每周2次例行的stand up，保持在10分钟左右，go over current working tickets and blockers。这次吐槽下前一份工作的stand up，由于manager的个人习惯，日日早上9点，每次事无巨细的问所有人，导致每日的stand up meeting能长达1小时之久，完全是浪费生命。

每周1次的IPM，安排未来2周的工作，提出工作中的问题和建议，大家投票表决，直到全票通过。第一次开会的我被小小的惊了一下，毕竟在以前的公司，可真的是完全相反的，一切都是manager拍板做决定，甚至出现过投票都被他作废的情况😩

自我提升的空间

技术方向有很多要学的，已经在之前的帖子里贴了目前工作中所用到的技术，大部分对我来说都是新东西，而且由于团队里大家都是年轻人，喜欢新技术，估计那tech stack还会越来越长。 🤓

工作效率方面，重新捡起被遗忘很久的Todoist + Evernote， 比较有个良好的任务管理软件，才能时不时的提醒，推动我一下。并且尽量每次学习使用新技术的时候都写一篇博客来记录学习过程。

总结

总的来说，这一个月还是挺开心的，新的环境，新的作息时间，告别过去慵懒的生活方式，面向一个健康，积极的未来

Use default arguments instead of short circuiting or conditionals

Default arguments are often cleaner than short circuiting. Be aware that if you
use them, your function will only provide default values for undefined
arguments. Other “falsy” values such as '', "", false, null, 0, and
NaN, will not be replaced by a default value.

Bad:

1
2
3
4

function createMicrobrewery(name) {
  const breweryName = name || 'Hipster Brew Co.';
  // ...
}

Good:

1
2
3

function createMicrobrewery(name = 'Hipster Brew Co.') {
  // ...
}

Ticket: create a new model, and associate to another modal

Create Model

For example, this ticket detail is creating a new model, contains information about some specific url.

From Sequelize official documentation, Models are defined with sequelize.define('name', {attributes}, {options}).

1
2
3
4
5
6
7
8

const LinkDetail = sequelize.define('link_detail', {
    url: {
        type: Sequelize.STRING
    },
    description: {
        type: Sequelize.STRING
    }
})

and for future repeat use, wrap it with module.exports:

1
2
3
4
5
6
7
8
9
10
11
12

module.exports = (sequelize, DataTypes) => {
    const LinkDetail = sequelize.define('link_detail', {
        url: {
            type: Sequelize.STRING
        },
        description: {
            type: Sequelize.STRING
        }
    });
    return LinkDetail;
}

Keep updating this list.

• React
  • Props vs State
• Reflux
  • ReFlux细说 (必读文章)
  • 了解 Flux 和 Reflux 的基本概念和区别
  • 了解 熟悉 Reflux 的 API， 让代码简洁优雅
  • Reflux 在 Flux 的核心概念上取消掉了dispatcher 的角色，从而解决了存在于Flux中 action 和 stores 之间 多对多 的关系，把 publisher 的角色融合到 action中，stores 也有目的性的subscribe action，而不是监听所有 actions，不造成任何资源的浪费
• Storybook.js
  • a library to better manage and documentation your web components.
• Node.js
  • Async/Await
  • Restify API framework
• Sequelize
  • Sequelize is a promise-based ORM for Node.js v4 and up. It supports the dialects PostgreSQL, MySQL, SQLite and MSSQL and features solid transaction support, relations, read replication and more.
• AWS
  • S3 Bucket Storage

JavsScript is Single Thread, CAN’T multitask

我们常说的JavaScript是单线程，所指的是JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。

The basic and plain way to handle event in JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13

event.doFirstThing();
wait(1000); // wait 1 sec to let event complete
event.doSecondThing(); // do other things after 1 sec
wait(1000); // wait 1 sec to let event complete
...
output:
// first thing output
// second thing output

Callback - When it becomes a HELL

为了解决日常中的问题，JavaScript 引入callback

A callback is just a plain old JavaScript function that can be called in response to an event.

1
2
3
4
5
6
7
8
9
10
11
12
13

setTimeout(() => {
  event.doFirstThing();
}, 2000);
wait(1000);
event.doSecondThing();
...
output: 
// second thing output
// first thing output

When we call function setTimeout(), we usually pass a callback function in setTimeout(), in this case event.doFirstThing() is that callback function.

But in the real world, the shit will turn nasty as hell, that’s why we call it Callback Hell, a callback in the another callback, and in the another callback, and in the another callback, and in the another…(something it goes forever)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function aCallbackHell() {
  // ready for something nasty ?
  setTimeout(() => {
    // third thing is waiting first and second thing to be done.
    doThirdThing();
    setTimeout(() => {
      // second thing waiting for first thing to be done.
      doSecondThing();
      setTimeout(() => {
        // first thing need to be done.
        doFirstThing();
      }, 1000);
    }, 2000);
  }, 3000);
}
aCallbackHell();

The nested setTimeout() statements would result in so much whitespace that you could build a pyramid.

Promises - way to get out of HELL

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

From MDN’s JavaScript official documentation

base on my personal understand, consider Promise as a wrapper object around a callback function, and return an object called promise, this promise object gives your two callback function as result, success and fail.

1 2 3

> const promise = createEvent(eventDetail); > promise.then(successCallback, failureCallback); >

Benefit of Promises

• Guarantees
• Chaining
• Error Propagation
• Composition

• Little Bowie (that’s right, his name is Bowie Chen) is growing so fast 😱, 10 weeks, 14lbs now!!!
• Start a new job, two weeks ago! Like it, surrounding by bunch nerds!
• Reading a book called 《真实的四大家族》

Use searchable names

We will read more code than we will ever write. It’s important that the code we do write is readable and searchable.
By not naming variables that end up being meaningful for understanding our program, we hurt our readers.
Make your names searchable. Tools like
buddy.js and ESLint
can help identify unnamed constants.

Bad:

1
2

// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);

Good:

1
2
3
4

// Declare them as capitalized named constants.
const MILLISECONDS_IN_A_DAY = 86400000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

Monday Clean Code

Use meaningful and pronounceable variable names

Bad:

1

const yyyymmdstr = moment().format('YYYY/MM/DD');

Good:

1

const currentDate = moment().format('YYYY/MM/DD');

Use the same vocabulary for the same type of variable

Bad:

1
2
3

getUserInfo();
getClientData();
getCustomerRecord();

Good:

1

getUser();

What is Puppeteer

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

Well, according to the Puppeteer office Github documentation, It is a library, it provides API services, and it controls Chrome. It’s maintained by Chrome DevTools team, only supported in Node v7.6 or greater version, and only works with Chrome or Chromium.

Manipulates Chrome like a puppeteer with your code.