第25期 — 2019-10-20

在浏览器中阅读

周e信

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

Node.js

Timsort 各种语言默认的排序算法🔗

python, java, javascrit(v8)

都用的这种算法

这是我见过的最好懂的算法，结果也是目前最稳定的算法。

Brandon Skerritt

InversifyJS - typescript IoC(反转控制)容器库🔗

inversify

终端命令行里的转圈是怎么实现的🔗
  • \ | / 四种字符不停显示

Chidume Nnamdi

user-agents 创建每天更新的随机User Agent🔗

Intoli

node-convict Mozillia出品,为配置加上shcema验证🔗

Mozillia

javascript命名约定🔗

几种命名方式

camelCase (used in JS) 驼峰

PascalCase (used in JS) 帕斯卡

snake_case 蛇形

kebab-case 脊柱（也叫spinal-case）

普遍用驼峰

布尔变量加is,例如isValid

函数亦用驼峰 myFunction

类使用帕斯卡 MyClass

对于函数组件，则应该当作类处理，使用帕斯卡function MyComponent(){}

私有属性，方法使用_开头 _myPrivateMethod

常量全部大些,中间以隔开 MYCONSTANT

文件一般用kebab-case

但是对于类文件还是建议直接用类名做文件名，即帕斯卡命名方式。

Robin Wieruch 编辑 Ka

Javascript

JSON.stringify()的其它参数🔗
const dude = {
  name: "Dan"
};
const dudeStringified = JSON.stringify(dude, (key, value) =>
  key === "name" ? "Pawel" : value
);

console.log(dudeStringified);
// {"name":"Pawel"}
JSON.stringify(dude, null, "\t");

可以美观的打印。

Pawel Grzybek

前端

svgr 将svg图片转换成react组件的工具🔗

Smooth Code

教程-使用react创建横向滚动特效🔗

Konstantin Lebedev

react-transitions 纯样式跨页面动画特效🔗

虽然名字里有react，但其是一个纯css工具，任何框架都可以使用。 在线Demo

Joe Rezendes

滚动阴影特效工具🔗

Stefan Judis

当窗口大小变化时停止动画🔗

解决办法是，捕捉resize事件，为所有样式添加停止动画样式

let resizeTimer;
window.addEventListener("resize", () => {
  document.body.classList.add("resize-animation-stopper");
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    document.body.classList.remove("resize-animation-stopper");
  }, 400);
});
.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}

Chris Coyier

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

投稿

SVG clip-path转换工具🔗

tiny-swiper 只有2kb的swiper替代🔗

替代大名鼎鼎的swiperjs，提供相同的api，减少了大小。

WeRDyin

preventExtension seal freeze的区别🔗
特性 default preventExtensions seal freeze
添加 ✓
删除 ✓ ✓
改变 ✓ ✓ ✓

这些限制都是shadow的，即只能保证对第一层的属性。

Chris Coyier

react-tiny-fab react悬浮按钮组件🔗

Deric Cain

popper强大的弹出框组件🔗

Federico Zivolo

css和圆形🔗

实现圆形的多种方式:

border-radius: 50%;

.circle {
  background: #456BD9;
  border: 0.1875em solid #0F1C3F;
  border-radius: 50%;
  box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);
  height: 5em;
  width: 5em;
}

pill椭圆形状则将其换成高度的一半,见这里

svg 

<svg viewBox="0 0 80 80" width="80" height="80">
  <circle class="circle" cx="40" cy="40" r="38"/>
</svg>

Clip Path

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

Radial Gradient

.circle {
  background-image: radial-gradient(circle, #456BD9, #456BD9 66%, transparent 66%);
  height: 5em;
  width: 5em;
}

Tyler Sticka

Ionic React GA发布🔗

Max Lynch

typical不到400b的打字特效🔗

Cam Wiegert

数据库

教程-dump mongo数据库压缩加密保存到AWS🔗

Bart Oles

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