{"pageContext":{"index":23,"total":364,"name":"2019-10-12","items":[{"node":{"frontmatter":{"title":"AniX-3k大小动画特效库(js实现)","publish":true,"cover":"https://github.com/a-jie/AniX/raw/master/logo/logo.png?raw=true","showCover":true,"date":"2019-10-10","category":"前端","url":"https://github.com/a-jie/AniX","author":"AniX","translator":"","tags":["web"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"100vh高度在手机上的问题","publish":true,"cover":"https://chanind.github.io/assets/100vh_problem.png","showCover":true,"date":"2019-10-10","category":"前端","url":"https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html","author":"David Chanin","translator":"","tags":["mobile"],"priority":1},"html":"

当地址栏出现时，100vh就超出了屏幕。

\n

解决方案：

\n\n

.fullheight {\nheight: calc(var(--vh, 1vh) * 100);\n}

\n

Bonus: simplifying with an SCSS function:

\n

@function vh($quantity) {\n@return calc(var(--vh, 1vh) * #{$quantity});\n}

\n

.fullheight {\nheight: vh(100);\n}

\n
"}},{"node":{"frontmatter":{"title":"Node Version Manager 成为OpenJs基金会(由JS基金会和Node基金会合并)第一个孵化项目","publish":true,"cover":"https://openjsf.org/wp-content/uploads/sites/84/2019/10/Welcomes-nvm-768x384.jpg","showCover":true,"date":"2019-10-10","category":"nodejs","url":"https://openjsf.org/blog/2019/10/03/openjs-foundation-welcomes-first-project-node-version-manager-nvm/","author":"Rachel Romoff","translator":"","tags":["web"],"priority":2},"html":""}},{"node":{"frontmatter":{"title":"Mongoose设计-字段冗余联动更新避免多表查询","publish":true,"cover":"","showCover":true,"date":"2019-10-11","category":"nodejs","url":"http://thecodebarbarian.com/mongoose-schema-design-pattern-store-what-you-query-for.html","author":"Valeri Karpov","translator":"","tags":["mongoose"],"priority":1},"html":"

将需要连表查询的字段作为冗余字段放在一个表里，这样尽量避免多表查询。

\n

$lookup尽量不要使用

\n

冗余字段同步数据的问题

\n
const authorSchema = Schema({ name: String });\n// Add middleware to update the dereferenced `authorName`\nauthorSchema.pre('save', async function() {\n  if (this.isModified('name')) {\n    await Book.updateMany({ authorId: this.author }, { authorName: this.name });\n  }\n});\nconst Author = mongoose.model('Author', authorSchema);\n\n// Won't trigger the 'save' middleware. You would need a separate `pre('updateOne')`\n// hook to capture this case.\nawait Author.updateOne({}, { name: 'test' });
\n
\n

这个举例太简单，并没有看到有多便利。如果是这样简单的例子，先查外表，列出id，再查本表，这也很简单。况且这个联动更新不能解决数据库被非本程序修改的问题。

\n
"}},{"node":{"frontmatter":{"title":"PostgreSQL 12: 支持 Generated Columns 特性","publish":true,"cover":"","showCover":true,"date":"2019-10-10","category":"database","url":"https://postgres.fun/20190722112100.html","author":"谭峰（francs）","translator":"","tags":["postgres"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"is-website-vulnerable检测网页是否使用漏洞库工具","publish":true,"cover":"https://github.com/lirantal/is-website-vulnerable/raw/master/.github/is-website-vulnerable-logo.png","showCover":true,"date":"2019-10-11","category":"nodejs","url":"https://github.com/lirantal/is-website-vulnerable","author":"Liran Tal","translator":"","tags":["security"],"priority":1},"html":"

使用\nnpx is-website-vulnerable https://example.com

"}},{"node":{"frontmatter":{"title":"js13kgames获奖者确定,第一名文件大小64B不到favicon.ico图标的一半","publish":true,"cover":"https://github.com/bencoder/js13k-2019/raw/master/screenshots/400x250-submission-screenshot.png?raw=true","showCover":true,"date":"2019-10-12","category":"javascript","url":"https://js13kgames.com/#winners","author":"Ka","translator":"","tags":["game"],"priority":2},"html":"

第一名demo，只有64b,居然比网站图标的一半还小，长见识！！

\n

源码

"}},{"node":{"frontmatter":{"title":"clip-path特效讲解","publish":true,"cover":"","showCover":true,"date":"2019-10-10","category":"前端","url":"https://css-tricks.com/clipping-clipping-and-more-clipping/","author":"Justin","translator":"","tags":["css"],"priority":1},"html":"

例如左上角的切割饼图菜单

\n"}},{"node":{"frontmatter":{"title":"jamstack现代站点架构的创新","publish":true,"cover":"https://remotesynthesis.com/images/posts/webcms/cms_usage.png","showCover":true,"date":"2019-10-10","category":"nodejs","url":"https://remotesynthesis.com/blog/evolution-of-web-content-manaagement","author":"BRIAN RINALDI","translator":"","tags":["jam"],"priority":1},"html":"

JAM 代表 javascript + Apis + Markup,从静态站点工具Jekyll, Middleman, Hugo发展到Netlify平台。越来越多的CMS站点开始基于JAMStack实现。

"}},{"node":{"frontmatter":{"title":"moveable拖拽，变形工具","publish":true,"cover":"https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/resizable.gif","showCover":true,"date":"2019-10-10","category":"前端","url":"https://github.com/daybrush/moveable","author":"Daybrush (Younkue Choi)","translator":"","tags":["web"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"react-awesome-slider 轻量级滑动块组件","publish":true,"cover":"https://github.com/rcaferati/react-awesome-slider/raw/master/demo/public/images/demo-cube.gif?raw=true","showCover":true,"date":"2019-10-10","category":"前端","url":"https://caferati.me/demo/react-awesome-slider","author":"Rafael Caferati","translator":"","tags":["animation"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"react-hook-form 基于钩子的react form组件","publish":true,"cover":"https://raw.githubusercontent.com/bluebill1049/react-hook-form/master/website/example.gif","showCover":true,"date":"2019-10-10","category":"前端","url":"https://github.com/react-hook-form/react-hook-form","author":"Blue Bill","translator":"","tags":["react"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"roughViz-手绘风格图表","publish":true,"cover":"https://raw.githubusercontent.com/jwilber/random_data/master/roughViz_roughnessbars.png","showCover":true,"date":"2019-10-11","category":"frontend","url":"https://github.com/jwilber/roughViz","author":"Jared Wilber ","translator":"","tags":["chart"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"s3st直接将AWS S3文件流打印到terminal的工具","publish":true,"cover":"https://github.com/lmammino/s3st/raw/master/s3st.gif","showCover":true,"date":"2019-10-11","category":"nodejs","url":"https://github.com/lmammino/s3st","author":"Luciano Mammino","translator":"","tags":["s3"],"priority":1},"html":"

使用npx s3st some-s3-bucket

"}},{"node":{"frontmatter":{"title":"react-tippy 轻量tooltip库","publish":true,"cover":"https://raw.githubusercontent.com/tvkhoa/react-tippy/master/doc/doc.gif","showCover":true,"date":"2019-10-10","category":"前端","url":"https://github.com/tvkhoa/react-tippy","author":"Khoa Thai","translator":"","tags":["react"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"react-useanimations react开源动画图标","publish":true,"cover":"https://github.com/useAnimations/react-useanimations/raw/master/useanimations-preview.gif","showCover":true,"date":"2019-10-10","category":"前端","url":"https://github.com/useAnimations/react-useanimations","author":"Tuan Phung ","translator":"","tags":["animation"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"使用face-api.js进行面部识别","publish":true,"cover":"","showCover":true,"date":"2019-10-12","category":"nodejs","url":"https://github.com/overflowjs-com/object_face_detection_webcam_react","author":"Deepak Gupta","translator":"","tags":["AI"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"ui95-windows95风格preact组件库","publish":true,"cover":"https://github.com/AshKyd/ui95/raw/master/docs/example.png","showCover":true,"date":"2019-10-10","category":"前端","url":"https://github.com/ashkyd/ui95","author":"Ash Kyd","translator":"","tags":["preact"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"我们应该使用package-lock.json","publish":true,"cover":"https://blog.logrocket.com/wp-content/uploads/2019/10/npm-nocdn.png","showCover":true,"date":"2019-10-11","category":"nodejs","url":"https://blog.logrocket.com/why-you-should-use-package-lock-json/","author":"Kostas Bariotis 编辑 Ka","translator":"","tags":["npm"],"priority":1},"html":"

刚有篇文章说要小心使用package.json,马上这篇文章又说应该使用。

\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":"教程-使用 React Hooks创建视频聊天","publish":true,"cover":"https://s3.amazonaws.com/com.twilio.prod.twilio-docs/images/IJn0tLQyaYFOpy_DdqV5cF6J5CWT6mslruhTKouesj1o3D.width-808.png","showCover":true,"date":"2019-10-10","category":"前端","url":"https://www.twilio.com/blog/video-chat-react-hooks","author":"Phil Nash (Twilio)","translator":"","tags":["twilio"],"priority":1},"html":""}},{"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":"教程-使用Nodejs,ElasticSearch和docker创建全文检索程序","publish":true,"cover":"","showCover":true,"date":"2019-10-11","category":"nodejs","url":"https://www.jsmonday.dev/articles/38/full-text-search-with-node-js-and-elasticsearch-on-docker","author":"Michele Riva","translator":"","tags":["elasticsearch"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"教程-怎样看WebPageTest工具的瀑布图","publish":true,"cover":"https://nooshu.github.io/images/2019/10/waterfall-ui-regions.png","showCover":true,"date":"2019-10-10","category":"前端","url":"https://nooshu.github.io/blog/2019/10/02/how-to-read-a-wpt-waterfall-chart/","author":"Matt Hobbs","translator":"","tags":["web"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"美最高法还是支持残疾人士，披萨店网站强硬也没用","publish":true,"cover":"https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2019/10/07/106168016-1570460554323gettyimages-860662570.530x298.jpeg?v=1570460596","showCover":true,"date":"2019-10-10","category":"web","url":"https://www.cnbc.com/amp/2019/10/07/dominos-supreme-court.html","author":"Tucker Higgins","translator":"","tags":["accessibility"],"priority":1},"html":"

宁愿打官司也不想改网站-美国比萨店请求最高法关闭关于残疾人可访问性的起诉\n结果出炉，最高法依然支持残疾人士。👏

"}},{"node":{"frontmatter":{"title":"资源-Facebook Design-各种设备的图片和sketch文件","publish":true,"cover":"https://facebook.design/public/images/devices_header.png","showCover":true,"date":"2019-10-10","category":"前端","url":"https://facebook.design/devices#filters","author":"Facebook","translator":"","tags":["web"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"解构destructuring详细示例","publish":true,"cover":"","showCover":true,"date":"2019-10-12","category":"javascript","url":"https://buginit.com/javascript/javascript-destructuring-es6-the-complete-guide/","author":"Rajnish Rajput 编辑 Ka","translator":"","tags":["destructuring"],"priority":1},"html":"

几点需要注意

\n

object 解构

\n
let a, b;\n// 数组这样写没问题\n[a, b] = [1, 2];\nconsole.log(a); // 1\nconsole.log(b); // 2\n\n\nlet y, z;\n//object这样解构就会报错,因为{}会被认为是代码块block\n{y, z} = {y: 1, z: 2};\n// 正确的写法\n({y, z} = {y: 1, z: 2});
\n

动态解构

\n
let key = 'z';\n//动态解构\nlet {[key]: foo} = {z: 'bar'};\n\nconsole.log(foo); // \"bar\"
\n

不能直接解构数组最后一个元素

\n
const [...a,b] = [1,2,3]; //错误\n//只能这样\n[1,2,3].slice(-1)[0];\n//强行解构😅🤦‍♂️\n[...arr].pop();
"}},{"node":{"frontmatter":{"title":"细看javascript顶层await","publish":true,"cover":"","showCover":true,"date":"2019-10-12","category":"javascript","url":"https://blog.kazge.com/javascript/nodejs/2019/10/11/zh-top-level-await/","author":"Ka","translator":"","tags":["await"],"priority":1},"html":""}}]}}