What did 36 of us learn from July 15 - July 21, 2019?

Posted by Cut on Tue, 23 Jul 2019 08:07:10 +0200

Author: Chen Dayutou
github: KRISACHAN

If you don't want your career to end prematurely, continuous learning is essential for developers.

Recently, the author of "The Way to Front-end Interview" has set up a learning warehouse to allow some people to record what they have learned in this area.

The warehouse address is as follows:

https://github.com/KieSun/tod...

This content is usually a small point, and may not be enough to write an article. But this knowledge point may not be known to many people, so it's a great thing to record it so that others can learn it as well.

Specific knowledge points are as follows:

CSS

CSS Houdini

We may have used many CSS IN JS or CSS module schemes in our daily development, but have you heard of JS IN CSS?

CSS Houdini is a working group of engineers from various international factories, aiming to build a series of API s to enable developers to intervene in the browser's CSS engine to solve the long-standing problems of CSS.

Examples are as follows:

Let's first define a JS file called houdini.js and an HTML file called index.html.

The contents of the houdini.js file are as follows:

'use strict'
registerPaint('overdraw', class {
    static get inputProperties() { return ['--border-width']; }
    paint(ctx, geom, properties) {
        const borderWidth = parseInt(properties.get('--border-width'));
        ctx.shadowColor = 'rgba(0,0,0,0.25)';
        ctx.shadowBlur = borderWidth;

        ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        ctx.fillRect(borderWidth,
                     borderWidth,
                     geom.width - 2 * borderWidth,
                     geom.height - 2 * borderWidth);
    }
});

The index.html file is as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>demo</title>
    <style>
      .overdraw {
        --border-width: 10;
        border-style: solid;
        border-width: calc(var(--border-width) * 1px);
        border-image-source: paint(overdraw);
        border-image-slice: 0 fill;
        border-image-outset: calc(var(--border-width) * 1px);
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="overdraw"></div>
    <script>
      'use strict';
      if (window.CSS) {
        CSS.paintWorklet.addModule('houdnini.js');
      }
    </script>
  </body>
</html>

Then open a static server, you can see the effect, the effect is as follows:

JS

Alternative summation of arrays

let arr = [1, 2, 3, 4, 5]
eval(arr.join('+'))

Array full expansion

function myFlat(arr) {
  while (arr.some(t => Array.isArray(t))) {
       arr = ([]).concat.apply([], arr);
  }
  return arr;
}
var arrTest1 = [1, [2, 3, [4]], 5, 6, [7, 8], [[9, [10, 11], 12], 13], 14];  
// Expected Output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
console.log(myFlat(arrTest1))

Implementing sleep function

function sleep(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  })
}
async function test() {
  for (let index = 0; index < 10; index++) {
    console.log(index);
    await sleep(2000)
  }
}

Regular Filtering of Illegal Words

var ma = "Big fool".split('');
var regstr = ma.join('([^\u4e00-\u9fa5]*?)');
var str = "This is an article.,You need to filter out the three words "Big Fool",Big fool with big characters other than Chinese characters in the middle_/_silly a1v Stupid and foolish a1v force";
var reg = new RegExp(regstr , 'g');
str.replace(reg,"<Substituted Words>");

Node

Open Gzip

const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());

Statistical Git lines

const { exec } = require('child_process');
const { argv } = require('yargs');

const readLines = stdout => {
  const stringArray = stdout
    .toString()
    .split(/(\n)/g)
    .filter(str => str !== '\n' && str);
  const dataArray = [];
  stringArray.map(str => {
    const data = str.split(/(\t)/g).filter(str => str !== '\t');
    const [newLine, deletedLine, filePath] = data;
    dataArray.push({ newLine, deletedLine, filePath });
  });
  return dataArray;
};


try {
  if (!argv.commit) throw new Error('')
  exec(`git diff ${argv.commit} --numstat`, (error, stdout, stderr) => {
    console.table(readLines(stdout));
  });
} catch (e) {
  console.log(e);
}

Implementing an only function

var obj = {
    name: 'tobi',
    last: 'holowaychuk',
    email: 'tobi@learnboost.com',
    _id: '12345'
};

const only = (obj, para) => {
    if (!obj || !para) { new Error('please check your args!') }
    let newObj = {};
    let newArr = Array.isArray(para) ? para : typeof (para) === 'string' ? para.split(/ +/) : [];
    newArr.forEach((item) => {
        if (item && obj[item] && !newObj[item]) {
            newObj[item] = obj[item];
        }
    })
    return newObj;
}
// {email: "tobi@learnboost.com", last: "holowaychuk", name: "tobi"}
console.log(only(obj, ['name', 'last', 'email']));
console.log(only(obj, 'name last    email'));

Practical operational issues

Video compatibility correlation

In Android, direct use of native video s results in full-screen playback, covering all elements, so use the x5 player. But there are still problems with the x5 player. Although it won't cover the elements, it will add its own special effects (covering a navigation bar mask).

<video
  className='live-detail__video vjs-big-play-centered'
  id='live-player'
  controls={false}
  playsInline
  webkit-playsinline='true'
  x5-video-player-type='h5'
  x5-video-orientation='portrait'
  x5-playsinline='true'
  style={style}
/>

This allows the use of x5 players under Android, and the playsInline and webkit-playsinline properties enable inline playback in iOS environments. But the compatibility of inline playback through property settings is not very good, so we need to use the iphone-inline-video[2] library at this time, just enableInline Video (video).

Chat Data Rendering

Considering the frequent chat data in live broadcasting, all received data will be stored in an array buffer, waiting for 2 seconds to render uniformly.


// push the message to the cache array first when it is received
this.bufferAllComments.push({
  customerName: fromCustomerName,
  commentId,
  content,
  commentType
})
// Using a timer, concat in the array is sent to the current chat data every two seconds and the cache is emptied
this.commentTimer = setInterval(() => {
  if (this.bufferAllComments.length) {
    this.appendChatData(this.bufferAllComments)
    this.bufferAllComments = []
  }
}, 2000)

Link List as the Carrier of Chat Data

Considering the frequent insertion of chat data in live broadcasting, the linked list is used to store the displayed chat data. At present, only 50 pieces of data are stored, so it is very simple to delete the previous chat data.

The reason for using linked lists is to consider the problem of spatial complexity caused by frequent removal of array header data.
In addition, the function of supporting iterator is also implemented. The code is as follows:


[Symbol.iterator] () {
  let current = null; let target = this
  return {
    next () {
      current = current != null ? current.next : target.head
      if (current != null) {
        return { value: current.value, done: false }
      }
      return { value: undefined, done: true }
    },
    return () {
      return { done: true }
    }
  }
}

summary

Some ideas built up in the work

According to the four quadrants of the task, we should divide the tasks to be done every day, and complete the tasks according to the urgency (important and urgent, important and not urgent, urgent and not important and not urgent).
Learn to summarize yourself (write a weekly report or log summary of the problems encountered, always read);
Has the ability to quickly locate and solve problems (through known conditions to determine the problems encountered);
To communicate with upstream and downstream more, understand what the team has done and progress (to facilitate their own reasonable arrangement of tasks);
Be positive and optimistic without complaining (it's better to bring positive energy to the team from time to time rather than complaining all over);
More exercise and more rest (the capital of physical revolution, nothing can be done without a good body).

Last

This is a thing that needs to be shared by all of you in order to continue. It can not be done by me, YCK or a small number of people. Welcome to participate in this matter. The address is as follows: