{"pageContext":{"index":24,"total":363,"name":"2019-10-20","items":[{"node":{"frontmatter":{"title":"InversifyJS - typescript IoC(反转控制)容器库","publish":true,"cover":"https://raw.githubusercontent.com/inversify/inversify.github.io/master/img/cover.jpg","showCover":true,"date":"2019-10-18","category":"nodejs","url":"https://github.com/inversify/InversifyJS","author":"inversify","translator":"","tags":["ioc"],"priority":2},"html":""}},{"node":{"frontmatter":{"title":"Ionic React GA发布","publish":true,"cover":"https://ionicframework.com/blog/wp-content/uploads/2019/10/react-v1.png","showCover":true,"date":"2019-10-17","category":"frontend","url":"https://ionicframework.com/blog/announcing-ionic-react/","author":"Max Lynch","translator":"","tags":["react"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"JSON.stringify()的其它参数","publish":true,"cover":"","showCover":true,"date":"2019-10-19","category":"javascript","url":"https://pawelgrzybek.com/til-the-power-of-json-stringify-replacer-parameter/","author":"Pawel Grzybek","translator":"","tags":["js"],"priority":1},"html":"
const dude = {\n  name: \"Dan\"\n};\nconst dudeStringified = JSON.stringify(dude, (key, value) =>\n  key === \"name\" ? \"Pawel\" : value\n);\n\nconsole.log(dudeStringified);\n// {\"name\":\"Pawel\"}
\n
JSON.stringify(dude, null, \"\\t\");
\n

可以美观的打印。

"}},{"node":{"frontmatter":{"title":"SVG clip-path转换工具","publish":true,"cover":"","showCover":true,"date":"2019-10-17","category":"frontend","url":"https://yoksel.github.io/relative-clip-path/","author":"","translator":"","tags":["css"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"Timsort 各种语言默认的排序算法","publish":true,"cover":"https://cdn-images-1.medium.com/max/800/0*I8VlK7-Zh-2btQP4.gif","showCover":true,"date":"2019-10-18","category":"nodejs","url":"https://skerritt.blog/timsort-the-fastest-sorting-algorithm-youve-never-heard-of/","author":"Brandon Skerritt","translator":"","tags":["algorithm"],"priority":2},"html":"

python, java, javascrit(v8)

\n

都用的这种算法

\n
\n

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

\n
"}},{"node":{"frontmatter":{"title":"css和圆形","publish":true,"cover":"https://29comwzoq712ml5vj5gf479x-wpengine.netdna-ssl.com/wp-content/uploads/2019/10/centered-animation-opt.gif","showCover":true,"date":"2019-10-17","category":"frontend","url":"https://cloudfour.com/thinks/css-circles/","author":"Tyler Sticka","translator":"","tags":["css"],"priority":1},"html":"

实现圆形的多种方式:

\n

border-radius: 50%;

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

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

\n

svg

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

Clip Path

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

Radial Gradient

\n
.circle {\n  background-image: radial-gradient(circle, #456BD9, #456BD9 66%, transparent 66%);\n  height: 5em;\n  width: 5em;\n}
"}},{"node":{"frontmatter":{"title":"javascript命名约定","publish":true,"cover":"https://www.robinwieruch.de/static/42c38cd217935ca3c62713748f0fef4e/2b1a3/banner.jpg","showCover":true,"date":"2019-10-18","category":"nodejs","url":"https://www.robinwieruch.de/javascript-naming-conventions","author":"Robin Wieruch 编辑 Ka","translator":"","tags":["convetions"],"priority":1},"html":"

几种命名方式

\n

camelCase (used in JS) 驼峰

\n

PascalCase (used in JS) 帕斯卡

\n

snake_case 蛇形

\n

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

\n

普遍用驼峰

\n

布尔变量加is,例如isValid

\n

函数亦用驼峰 myFunction

\n

类使用帕斯卡 MyClass

\n

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

\n

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

\n

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

\n

文件一般用kebab-case

\n
\n

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

\n
"}},{"node":{"frontmatter":{"title":"popper强大的弹出框组件","publish":true,"cover":"https://raw.githubusercontent.com/FezVrasta/popper.js/master/popperjs.png","showCover":true,"date":"2019-10-19","category":"frontend","url":"https://github.com/FezVrasta/popper.js","author":"Federico Zivolo","translator":"","tags":["css"],"priority":1},"html":"

demo

"}},{"node":{"frontmatter":{"title":"node-convict Mozillia出品,为配置加上shcema验证","publish":true,"cover":"","showCover":true,"date":"2019-10-18","category":"nodejs","url":"https://github.com/mozilla/node-convict","author":"Mozillia","translator":"","tags":["convetions"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"preventExtension seal freeze的区别","publish":true,"cover":"","showCover":true,"date":"2019-10-17","category":"frontend","url":"https://css-tricks.com/stop-animations-during-window-resizing/","author":"Chris Coyier","translator":"","tags":["css"],"priority":1},"html":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
特性defaultpreventExtensionssealfreeze
添加✓
删除✓✓
改变✓✓✓
\n

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

"}},{"node":{"frontmatter":{"title":"react-tiny-fab react悬浮按钮组件","publish":true,"cover":"https://raw.githubusercontent.com/dericgw/react-tiny-fab/master/fab.gif","showCover":true,"date":"2019-10-17","category":"frontend","url":"https://github.com/dericgw/react-tiny-fab","author":"Deric Cain","translator":"","tags":["css"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"react-transitions 纯样式跨页面动画特效","publish":true,"cover":"https://camo.githubusercontent.com/dd5378ecfe6fc42690da1b7b99d28a84bc3e2469/68747470733a2f2f696d6167652e6962622e636f2f674d573871712f52656163742d5472616e736974696f6e732e676966","showCover":true,"date":"2019-10-17","category":"frontend","url":"https://github.com/joerez/react-transitions/","author":"Joe Rezendes","translator":"","tags":["css"],"priority":1},"html":"

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

"}},{"node":{"frontmatter":{"title":"svgr 将svg图片转换成react组件的工具","publish":true,"cover":"","showCover":true,"date":"2019-10-17","category":"frontend","url":"https://github.com/smooth-code/svgr","author":"Smooth Code","translator":"","tags":["css"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"tiny-swiper 只有2kb的swiper替代","publish":true,"cover":"","showCover":true,"date":"2019-10-19","category":"frontend","url":"https://github.com/joe223/tiny-swiper/","author":"WeRDyin","translator":"","tags":["css"],"priority":1},"html":"

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

"}},{"node":{"frontmatter":{"title":"user-agents 创建每天更新的随机User Agent","publish":true,"cover":"","showCover":true,"date":"2019-10-18","category":"nodejs","url":"https://github.com/intoli/user-agents","author":"Intoli","translator":"","tags":["agent"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"typical不到400b的打字特效","publish":true,"cover":"","showCover":true,"date":"2019-10-19","category":"frontend","url":"https://github.com/camwiegert/typical","author":"Cam Wiegert","translator":"","tags":["vanilla","effect"],"priority":1},"html":"

在线demo

"}},{"node":{"frontmatter":{"title":"游戏-飞翔的鸡蛋(Aero Egg)","publish":true,"cover":"https://blog.kazge.com/assets/volitantegg-show.gif","showCover":true,"date":"2019-06-12","category":"game","url":"https://blog.kazge.com/show/volitantegg/%E9%A3%9E%E7%BF%94%E7%9A%84%E9%B8%A1%E8%9B%8B.apk","author":"广告","translator":"","tags":["ads"],"priority":1},"html":"

APP Store(非国内账户可下载)\n安卓 - 中文

"}},{"node":{"frontmatter":{"title":"想让你的文章出现在这里？","publish":true,"cover":"","showCover":true,"date":"2019-07-08","category":"frontend","url":"mailto:editor@zhouexin.com?subject=投稿!","author":"投稿","translator":"","tags":["editor"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"当窗口大小变化时停止动画","publish":true,"cover":"","showCover":true,"date":"2019-10-17","category":"frontend","url":"https://css-tricks.com/stop-animations-during-window-resizing/","author":"Chris Coyier","translator":"","tags":["css"],"priority":1},"html":"

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

\n
let resizeTimer;\nwindow.addEventListener(\"resize\", () => {\n  document.body.classList.add(\"resize-animation-stopper\");\n  clearTimeout(resizeTimer);\n  resizeTimer = setTimeout(() => {\n    document.body.classList.remove(\"resize-animation-stopper\");\n  }, 400);\n});
\n
.resize-animation-stopper * {\n  animation: none !important;\n  transition: none !important;\n}
"}},{"node":{"frontmatter":{"title":"教程-dump mongo数据库压缩加密保存到AWS","publish":true,"cover":"https://severalnines.com/sites/default/files/blog/node_5773/image4.png","showCover":true,"date":"2019-10-18","category":"database","url":"https://severalnines.com/database-blog/tips-storing-mongodb-backups-cloud","author":"Bart Oles","translator":"","tags":["mongodb"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"教程-使用react创建横向滚动特效","publish":true,"cover":"https://konstantinlebedev.com/one-0bde82151042cb365993afa47aa6c8f3.gif","showCover":true,"date":"2019-10-17","category":"frontend","url":"https://konstantinlebedev.com/horizontal-scroll-animation/","author":"Konstantin Lebedev","translator":"","tags":["css"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"终端命令行里的转圈是怎么实现的","publish":true,"cover":"https://miro.medium.com/max/640/1*C66r9NIY1Nf-NtkIrZns7g.gif","showCover":true,"date":"2019-10-18","category":"nodejs","url":"https://blog.bitsrc.io/build-command-line-spinners-in-node-js-3e432d926d56","author":"Chidume Nnamdi","translator":"","tags":["terminal"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"滚动阴影特效工具","publish":true,"cover":"https://github.com/stefanjudis/css-scroll-shadows/raw/master/screenshot.jpg","showCover":true,"date":"2019-10-17","category":"frontend","url":"https://github.com/stefanjudis/css-scroll-shadows/","author":"Stefan Judis","translator":"","tags":["css"],"priority":1},"html":""}}]}}