周e信第17期

第17期 — 2019-08-25

在浏览器中阅读

扫描二维码关注微信公众号

Node.js

微软出品-VSCODE 全栈工程向导插件 🔗

前端框架支持 React.js , Vue.js, Angular 后端支持 node.js 和 python 的 Flask。

Lea Akkari (Microsoft) 编辑 Ka

使用pynode整合nodejs和python预测房屋价格 🔗

PyNode可以在nodejs里运行python环境.

Adam McQuistan

neon-绑定RUST用于实现native模块 🔗

支持Linux macOS Windows
支持Nodejs >= 6
支持RUST >= 1.18

Neon Bindings

npm 6.11.0发布，默认再不会创建根用户拥有的文件（除非根用户运行创建）🔗

npm 编辑 Ka

date-fns更简单易用的时间操作库 🔗

import { format, formatDistance, formatRelative, subDays } from 'date-fns'

format(new Date(), "'今天是' iiii")
//=> "今天是 Friday"

formatDistance(subDays(new Date(), 3), new Date())
//=> "3 days ago"

formatRelative(subDays(new Date(), 3), new Date())
//=> "last Friday at 7:26 p.m."

date-fns 编辑 Ka

NodeGUI-基于Qt的桌面端开发框架 🔗

与Electron，NW不同的是，构建的是Native程序，使用css+javascript的方式组织程序。注重性能优化。

Atul R 编辑 Ka

Node v12.9.0发布，Promise.allSettled可用 🔗

Atul R 编辑 Ka

Javascript

产品级别上使用 javascript 原生模块特性 🔗

使用打包工具(rollup)生成 ES2015 module 格式
积极的分割代码（配合动态加载）
预加载模块（使用 modulepreload）
使用动态加载 polyfill(如果不支持的话)
如果不支持 module，使用

Philip Walton 编辑 Ka

v8n-链式验证库 🔗

v8n()
  .string()
  .minLength(5)
  .first("H")
  .last("o")
  .test("Hello"); // true

Bruno C. Couto 编辑 Ka

geek 的方式拼出 banana 🔗

console.log(+'a'); //输出'NaN'
console.log('ba' + +'a' + 'a'); // 输出'baNaNa'
document.write(('b' + 'a' + +'a' + 'a').toLowerCase());

Stack Overflow 编辑 Ka

Javascript 2

es2019新函数 🔗

Object.fromEntries

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21
};

// convert to array in order to make use of .filter() function
// Object.entries 实现于 ES2017
let overTwentyOne = Object.entries(students).filter(([name, age]) => {
  return age >= 21;
}); // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ]

// 相当于Object.entries的反向操作
let DrinkingAgeStudents = Object.fromEntries(overTwentyOne);
// { beatrice: 22, eloise: 21 }

Array.prototype.flat

let courseStudents = [
  ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']],
  ['Wilson', 'Taylor'],
  ['Edith', 'Jacob', 'Peter', 'Betty']
];

let flattenOneLevel = courseStudents.flat(1);
console.log(flattenOneLevel);
// [
//   'Janet',
//   'Martha',
//   'Bob',
//   [ 'Phil', 'Candace' ],
//   'Wilson',
//   'Taylor',
//   'Edith',
//   'Jacob',
//   'Peter',
//   'Betty'
// ]

let flattenTwoLevels = courseStudents.flat(2);
console.log(flattenTwoLevels);
// [
//   'Janet',   'Martha',
//   'Bob',     'Phil',
//   'Candace', 'Wilson',
//   'Taylor',  'Edith',
//   'Jacob',   'Peter',
//   'Betty'
// ]

Array.prototype.flatMap

let grades = [78, 62, 80, 64];

let flatMapped = grades.flatMap(grade => [grade, grade + 7]);
// [
//  78, 85, 62, 69,
//  80, 87, 64, 71
// ]

String.trimStart 和 String.trimEnd

等同于 String.trimRight 和 String.trimLeft

let message = '   Welcome to CS 101    ';
message.trimEnd();
// '   Welcome to CS 101'
message.trimStart();
// 'Welcome to CS 101   '
message.trimEnd().trimStart();
// 'Welcome to CS 101'

catch 可不绑定异常类型

try {
  let parsed = JSON.parse(obj);
} catch {
  console.log(obj);
}

Function.toString()保留原空格格式

Laurie Barth 编辑 Ka

前端

想让你的文章出现在这里？🔗

投稿

手绘风格图表 🔗

“sketchy”, “cartoony” or “hand-drawn” 简称 xkcd(手绘卡通素描风格)

Tim Qian 编辑 Ka

微软基于chrome的Edge浏览器beta发布 🔗

支持windows和mac，开发者调试IE浏览器再也不用windows了！

Joe Belfiore (Microsoft) 编辑 Ka

变量字体和splitting实现文字特效 🔗

splitting 将文本拆分以便实现动画特效。配合 font-variation-settings变量字体可实现炫酷的问题特效。

V-Fonts包含了多种可变字体。

Michelle Barker 编辑 Ka

requestAnimationFrame和react hook配合使用 🔗

function App() {
  const [state, setState] = React.useState(0)

  const requestRef = React.useRef()
  
  const animate = time => {
    requestRef.current = requestAnimationFrame(animate);
  }
    
  React.useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(requestRef.current);
  }, []); // 注意这里。保证只调一次
  
  return <div>{state}</div>;
}

Hunor Márton Borbély

react-spinners加载动画特效,支持修改颜色 🔗

在线demo

David Hu 编辑 Ka

react-sortable-hoc-高阶函数式可排序列表，支持拖拽 🔗

在线demo

Maks Akymenko

quicklink 由 Chrome 开源来的加载加速工具 🔗

仅当浏览器空闲时执行
通过检测视图里的链接，来进行预加载
使用或 XHR 来预加载

使用示例：

<!-- Include quicklink from dist -->
<script src="dist/quicklink.umd.js"></script>
<!-- Initialize (you can do this whenever you want) -->
<script>
  quicklink();
</script>

Google Chrome Labs 编辑 Ka

react-shimmer 加载图片闪光特效 🔗

Gokcan Degirmenci 编辑 Ka

filepond-强大易用的上传组件 🔗

支持拖拽
支持图片编辑(配合doka)
支持移动端
Accessible
异步上传
支持插件

Rik Schennink 编辑 Ka

javascript 检测文件类型 🔗

通过 Buffer/Uint8Array/ArrayBuffer 检测文件类型支持远程检测。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'unicorn.png');
xhr.responseType = 'arraybuffer';

xhr.onload = () => {
  fileType(new Uint8Array(this.response));
  //=> {ext: 'png', mime: 'image/png'}
};

xhr.send();