第19期 — 2019-09-08

在浏览器中阅读

周e信

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

Javascript

教程-在火狐里调试typescript🔗

tsc 编译 typescript 后,使用 sourcemap 可在火狐中查看。

Jan Honza Odvarko

David Byers

PhD student - Antoine Vastel

typescript里使用void🔗

基本上和 undefined 一样,主要区别 void 作为返回类型可指代任何类型,而 undefined 则不行。

function doSomething(callback: () => void) {
  let c = callback(); // c =2
}

// 返回number的函数
function aNumberCallback(): number {
  return 2;
}

// 可以
doSomething(aNumberCallback);
function doSomething(callback: () => undefined) {
  /* ... */
}

function aNumberCallback(): number {
  return 2;
}

// 错误,必须是返回undefined
doSomething(aNumberCallback);

@ddprrt

google使用typescript反应very good🔗

主要反馈的问题是泛型相关的。

Evan Martin@google

Array.from 使用🔗

将类数组结构转换为数组

Array.from('Hey'); // => ['H', 'e', 'y']
Array.from(new Set(['one', 'two'])); // => ['one', 'two']

const map = new Map();
map.set('one', 1);
map.set('two', 2);
Array.from(map); // => [['one', 1], ['two', 2]]

浅克隆

const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);

numbers === numbersCopy; // => false

做 Array.fill 类似的事情

const length = 3;
const init = 0;
const result = Array.from({ length }, () => init);

result; // => [0, 0, 0]
const length = 3;
const init = 0;
const result = Array(length).fill(init);

fillArray2(0, 3); // => [0, 0, 0]
const length = 3;
const resultA = Array.from({ length }, () => ({}));
const resultB = Array(length).fill({});

resultA; // => [{}, {}, {}]
resultB; // => [{}, {}, {}]

// 注意这里,fill使用的相同的对象填充
resultA[0] === resultA[1]; // => false
resultB[0] === resultB[1]; // => true
// map则不能达到相同效果,map会忽略Array(length)创建的empty slots
const length = 3;
const init = 0;
const result = Array(length).map(() => init);

result; // => [undefined, undefined, undefined]

填充范围数字

function range(end) {
  return Array.from({ length: end }, (_, index) => index);
}

range(4); // => [0, 1, 2, 3]

使数组元素唯一

function unique(array) {
  return Array.from(new Set(array));
}

unique([1, 1, 2, 3, 3]); // => [1, 2, 3]

Dmitri Pavlutin 编辑 Ka

Node.js

spencer kelly

hashids-将数字转换为uniqueid🔗

可逆的将数字转为字符串,支持加盐,支持自定义字符集,支持hex

const hashids = new Hashids('', 0, 'abcdefghijklmnopqrstuvwxyz') // 全部小字母
console.log(hashids.encode(1, 2, 3)) // mdfphx

Bazyli Brzóska

cytoscape

camaro-xml转json🔗

v4使用WebAssembly,性能依然快,但是比v3要慢,作者正在改进。

Tuan Anh Tran 编辑 Ka

Ackee-网站统计工具🔗

不想使用google统计?想用自己的统计工具,Ackee就是开源的网站统计工具。

需要mongodb。

Tobias Reich 编辑 Ka

前端

NHN nhn

投稿

使用Puppeteer抓取页面dark模式🔗

需要运行脚本的机器开启dark模式。

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html --output screenshot --fullPage

Bram.us

Adrian Sureshkumar

Fangzhou Li

Jess Mitchell

transform: rotate让你的光标旋转起来🔗
.cursor {
    --r: 0deg;
    position: fixed;
    left: -8px;
    top: -6px;
    pointer-events: none;
    user-select: none;
    display: none;
    transform: translate(var(--x), var(--y));
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4));
    svg {
        display: block;
        width: 28px;
        height: 28px;
        transform: rotate(var(--r));
    }
}

Chris Coyier

React Navigation

Giampaolo Bellavite

html5的a标记可以有条件包含块元素🔗

html5里,a标记可以包含块元素,前提是,a的父元素也是块元素。

Ben Nadel

跳到页面顶部的几种方法🔗

锚记

<html id="top">
  <body>
     <!-- the entire document -->
     <a href="#top">Jump to top of page</a>
  </body>
</html>
html {
  scroll-behavior: smooth;
}

上面的方法会改变焦点

解决:

<html>
  <body>
     <a id="top"></a>
     <!-- the entire document -->
     <a href="#top">Jump to top of page</a>
  </body>
</html>

javascript

window.scroll({
  top: 0, 
  left: 0, 
  behavior: 'smooth'
});

Chris Coyier

appbase.io

数据库

三星宣布推出符合行业标准的key-value SSD原型🔗

今年早些时候,存储网络行业协会(SNIA)的 Object Drives 工作组发布了 Key Value Storage API 规范 1.0 版。今天三星推出一款 key-value SSD 原型以兼容这个用于密钥存储设备的行业标准。

wenwei@cntronics

Dj Walker-Morgan

Dj Walker-Morgan

Python

Neel Somani

教程-OpenCV到浏览器🔗

教程-OpenCV到浏览器.md

Adrian Rosebrock

再来尝试一下AI预测股票🔗

源码

看过很多这样的预测股票的文章,都有源码,而且大部分最后有简历地址😂。老编不禁好奇?真赚钱的话,为啥不闷声发大财?

Frank Ceballos 编辑 Ka

人工智能

自动驾驶公司 Waymo 公开其传感数据集🔗

此数据集包含司机超过 5 个小时的传感高清数据。

Anthony Alford 编辑 Ka

扫描二维码关注微信公众号
本期阅读量