Thumbs Up Innovation Lab Monthly (First Issue)

News Flash

• Babel releases 7.14.0
• Node.js release 16.0.0
• Bootstrap 5 released
• ES2021/ES12 new features
• Chrome 89 devtools add new features

Front-end ecology

WeChat new capabilities

1. Add the function of [Smart Assistant] to the live broadcast of the Mini Program

The smart assistant is a business operation tool jointly launched by the mini program live broadcast and the WeChat dialogue open platform. It supports the capabilities of "welcome, smart question and answer, hot question tracking, and statistical analysis of sales leads" in the live broadcast room, which can effectively solve the interaction between the anchor and the mass of users. Difficulties to improve the efficiency of delivery.

   小程序直播组件已更新至 1.2.9 版本，新增智能助理功能，请及时更新组件版本，确保能使用新功能。智能助理功能目前处于内测期间，
   智能助理内测指引：https://developers.weixin.qq.com/community/develop/article/doc/0002c0811dc7d09effcb4a4e556413  

Function instruction: https://docs.qq.com/doc/DTkZQVE12RGlUYmxH

2. WeChat long link to short link port stops generating short links

The platform will stop the ability of the newly generated short chain of this interface after March 15, 2021, and the short chain that has been generated will not be affected for the time being (it is expected that the historical short link analysis service will be stopped in the second half of the year)

   长链接转短链接服务致力于优化用户体验，在微信中提升扫码速度和成功率，解决开发者原链接（商品、支付二维码等）太长导致微信扫码速度和成功率下降的问题。但随着技术的发展，微信扫码能力已有较大提升，不再需要对原始链接进行转换。

Interface description: https://developers.weixin.qq.com/doc/offiaccount/Account_Management/URL_Shortener.html

3. WeChat coupons will no longer support newly created "coupons"

Starting at 0:00 on April 1, 2021, "WeChat Card Coupons> Coupons" will no longer support newly created coupons, and this feature will be offline in the future

   因“微信卡券>优惠券”产品能力未来将统一升级为“微信支付优惠券”，相关功能将进行逐步调整。2021年4月1日0点起，“微信卡券>优惠券”将不再支持新创建优惠券，该功能后续将陆续下线。其他微信卡券功能暂无变化。本次调整详细内容如下：
   1.4月1日0点起，已开通微信卡券功能的商户将无法新创建优惠券，包含API接口创建与公众平台页面创建；商户使用“会员卡”、“礼品卡”或“票证”等能力不受影响；
   2.历史已创建的优惠券，可继续正常使用“微信卡券>优惠券”相关功能（包含发放、核销等操作）；

Learn more: https://docs.qq.com/doc/DVm13ZkNVVktPQXRI?pub=1&dver=2.1.0

4. WeChat video

The video account homepage and the official account homepage can be associated with the display function

   1、点击个人视频号页面右上角的「…」进入视频号设置页面，点击最下方的「账号管理」即可绑定公众号。值得一提的是，在企业/机构视频号中，只能绑定相同主体的公众号；在个人视频号中，公众号需是相同的管理员才可绑定。
   2、视频号、公众号完成绑定后，公众号的粉丝就能在公众号主页看到关注账号的视频号信息，点击即可直达视频号页面关注，同时视频号粉丝也能在视频号主页看到该账号的公众号信息，关注更方便了。

web-vitals

Optimizing the quality of user experience has always been the key to the long-term success of every Web site. Web Vitals is a new set of core performance index systems for web pages released by Google in 2020.

Node.js 16 new capabilities

1. Timers Promise API

The Timers Promise API actually existed in Node15. It was an experimental feature at that time. It has entered a stable stage and is an exciting feature. So what is it used for?

import { setTimeout } from 'timers/promises'
await setTimeout(100)

再比如

import { setInterval } from 'timers/promises'

for await (const startTime of setInterval(100, Date.now())) {
  const now = Date.now()
  if ((now - startTime) > 1000)
    break
}

2. Bottom layer dependency upgrade

v8, upgraded to 9.0, mainly ECMAScript RegExp Match Indices
llhttp, upgraded to 6.0.0, used to parse HTTP packets
icu, upgrade to 69.1
npm, upgrade to 7.10.0

使用 process.versions 可看到相关依赖的版本号

> process.versions
{
  node: '16.0.0',
  v8: '9.0.257.17-node.10',
  uv: '1.41.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.1',
  modules: '93',
  nghttp2: '1.42.0',
  napi: '8',
  llhttp: '6.0.0',
  openssl: '1.1.1k+quic',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

3. btoa and atob

Regarding the conversion of Base64, Node used Buffer.from before, but now it supports btoa/atob to be consistent with the browser environment.
For an SSR project, the distinction of execution environment will not matter, just use btoa/atob uniformly.

const base64 = {
  encode (v: string) {
    return isBrowser ? btoa(v) : Buffer.from(v).toString('base64')
  },
  decode (v: string) {
    return isBrowser ? atob(v) : Buffer.from(v, 'base64').toString()
  }
}

4. Native support for M1 chip of Mac computer

• [Node.js learning route] https://static.app.yinxiang.com/embedded-web/profile/#/join?guid=6b25c8d4-e784-4f8d-9a0d-5ea2d8e521c6&channel=copylink&shardId=s40&ownerId=23731778

Node.js learning route

必备技能
* Javascript
* npm软件包管理
* Node.js基础知识
    * 时间发射器（Event Emitter）
    * 回调
    * Buffer类
    * 模块系统（Module System）

开发技能
* 版本管理系统
* HTTP/HTTPS协议

Web框架
* Express.js
* Meteor.js
* Sails.js
* Koa.js
* Nest.js

数据库管理
* 关系数据库管理系统
    * SQL Server
    * MySQL
    * PostgreSQL
    * MariaDB
* 云数据库服务
    * Azure CosmosDB
    * Amazon DynamoDB
* NoSQL 数据库
    * MongoDB
    * Redis
    * Apache Cassandra
    * LiteDB
* 搜索引擎
    * ElasticSearch
    * Solr

缓存
* 内存缓存（节点缓存node-cache/内存缓存memory-cache）
* 分布式缓存（Redis/Memcached）

模板引擎
* Mustache.js
* Handlebars
* EJS

实时通信
* Socket.io

API 客户端
* REST
* GraphQL

测试
* 单元测试框架
    * Jest
    * Mocha
    * Chai
* 模拟测试（Mocking）
    * Sinon
    * Jasmine

软件库推荐
* Async.js
* PM2
* Commander.js
* Nodemailer

Recommend this month

• "The Myth of Man-Moon" (Little Frederick)-a software developer's must-read soft engineering bible
• "Upward Management" (Xiao Yu)-Essential Skills for Workplace People
• "Single-core Working Method Illustration" (Steve Nottberg)-Efficient Working Methodology, Take You to Interpret the Single-Core Working Method

about Us

Company: Shenzhen Youzan Information Technology Co., Ltd.
Address: 11th Floor, Mango Net Building, Nanshan District, Shenzhen, Guangdong Province
Join us: [e-mail]