{"pageContext":{"index":19,"total":364,"name":"2019-09-15","items":[{"node":{"frontmatter":{"title":"MDN 和 caniuse 兼容性数据整合了","publish":true,"cover":"https://hacks.mozilla.org/files/2019/08/caniuse-500x484.png","showCover":true,"date":"2019-09-11","category":"frontend","url":"https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-data-collaboration/","author":"Florian Scholz, Alexis Deveria 编辑 Ka","translator":"","tags":["html"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"Nano-SQL支持浏览器，手机的数据库抽象层","publish":true,"cover":"","showCover":true,"date":"2019-09-12","category":"database","url":"https://github.com/ClickSimply/Nano-SQL","author":"Zhonglu","translator":"","tags":["sql"],"priority":1},"html":"

支持mysql,redis,mongodb,cassandra。\n统一的查询语法（支持upsert）。

"}},{"node":{"frontmatter":{"title":"async-ratelimiter 请求频率控制库","publish":true,"cover":"","showCover":true,"date":"2019-09-12","category":"nodejs","url":"https://github.com/microlinkhq/async-ratelimiter","author":"microlink.io","translator":"","tags":["http"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"Netlify发布FaunaDB支持依然免费","publish":true,"cover":"https://cdn.netlify.com/c9fa2c8b9eff853800e36c5eca511ffc837eda68/671c5/img/blog/netlify-fauna.png","showCover":true,"date":"2019-09-12","category":"database","url":"https://www.netlify.com/blog/2019/09/10/announcing-the-faunadb-add-on-for-netlify/","author":"Lewis King Sr. Product Manager at Fauna 编辑 Ka","translator":"","tags":["netlify"],"priority":1},"html":"

FaunaDB是serverless的分布式数据库，自带GraphQL，整合Netlify后，使得开发者使用Netlify很容易的搭建可扩展的web应用。

\n

FaunaDB依然提供免费层，价格见这里。

"}},{"node":{"frontmatter":{"title":"⚠️Sequelize ORM发现sql注入漏洞，已更新布丁","publish":true,"cover":"https://res.cloudinary.com/snyk/image/upload/v1565528608/sequelize-orm-vuln-snyk-kirill.png","showCover":true,"date":"2019-09-11","category":"nodejs","url":"https://snyk.io/blog/sequelize-orm-npm-library-found-vulnerable-to-sql-injection-attacks/","author":"LIRAN TAL 编辑 Ka","translator":"","tags":["orm"],"priority":2},"html":"

针对此漏洞，Sequelize ORM反应迅速，在3.x，5.x上都发布了补丁版本。

"}},{"node":{"frontmatter":{"title":"chrome78 开发者工具新特性","publish":true,"cover":"https://developers.google.com/web/updates/images/2019/09/score1.png","showCover":true,"date":"2019-09-12","category":"frontend","url":"https://developers.google.com/web/updates/2019/09/devtools#multiclient","author":"Kayce Basques 编辑 Ka","translator":"","tags":["chrome"],"priority":1},"html":"

Audits 支持与Request Blocking和 Local Overrides 联合使用

\n

Request Blocking 可以禁用选定的脚本，Audits 可在这种情况下测试。

"}},{"node":{"frontmatter":{"title":"emoji-button表情选择工具","publish":true,"cover":"https://raw.githubusercontent.com/joeattardi/emoji-button/master/screenshot.png","showCover":true,"date":"2019-09-11","category":"frontend","url":"https://github.com/joeattardi/emoji-button","author":"Joe Attardi 编辑 Ka","translator":"","tags":["html"],"priority":1},"html":"

在线 demo

"}},{"node":{"frontmatter":{"title":"filesize.js格式化文件大小显示工具","publish":true,"cover":"","showCover":true,"date":"2019-09-11","category":"frontend","url":"https://github.com/avoidwork/filesize.js","author":"Jason Mulligan 编辑 Ka","translator":"","tags":["html"],"priority":1},"html":"
filesize(500); // \"500 B\"\nfilesize(500, { bits: true }); // \"4 Kb\"\nfilesize(265318, { base: 10 }); // \"265.32 kB\"
"}},{"node":{"frontmatter":{"title":"chrome 增加链接 ref 类型 ugc, sponsored","publish":true,"cover":"","showCover":true,"date":"2019-09-11","category":"frontend","url":"https://webmasters.googleblog.com/2019/09/evolving-nofollow-new-ways-to-identify.html","author":"Google 编辑 Ka","translator":"","tags":["html"],"priority":1},"html":"

除之前的 rel=\"nofollow\"(提示本站不负责)之外，增加了

\n\n

这三类目前都将收入 google 搜索计数，但是元数据不同。

"}},{"node":{"frontmatter":{"title":"node 多线程worker特性从实验更改为稳定","publish":true,"cover":"https://hacks.mozilla.org/files/2019/08/caniuse-500x484.png","showCover":true,"date":"2019-09-11","category":"nodejs","url":"https://github.com/nodejs/node/commit/9a436d19f3cd541f92e3c1c26a0ec020a10960fa","author":"Node.js 编辑 Ka","translator":"","tags":["worker"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"headroom滚动式隐藏页面头部组件","publish":true,"cover":"","showCover":true,"date":"2019-09-11","category":"frontend","url":"https://github.com/WickyNilliams/headroom.js","author":"Nick Williams 编辑 Ka","translator":"","tags":["html"],"priority":1},"html":"

在线demo

"}},{"node":{"frontmatter":{"title":"poli-SQL数据库分析工具","publish":true,"cover":"https://camo.githubusercontent.com/28e12f85069d935c51ffce1085a6b960420f29c4/687474703a2f2f36362e3232382e34322e3233353a383038302f696d6167652d302e382e302f626f625f676c6173735f656e2e6a7067","showCover":true,"date":"2019-09-11","category":"database","url":"https://github.com/shzlw/poli","author":"Zhonglu","translator":"","tags":["sql"],"priority":2},"html":""}},{"node":{"frontmatter":{"title":"js-fire js object转成命令行工具","publish":true,"cover":"https://camo.githubusercontent.com/9ee5c30a51ef6a6f72955a804947dbc2cab22119/68747470733a2f2f61736369696e656d612e6f72672f612f516478784f5a67734b345770306e7854375a456e366d5849692e737667","showCover":true,"date":"2019-09-12","category":"nodejs","url":"https://github.com/hobochild/js-fire","author":"Craig Mulligan 编辑 Ka","translator":"","tags":["cli"],"priority":1},"html":"

如此一个js object

\n
const fire = require('js-fire')\n\nconst calculator = {\n  double: number => {\n    // I double things\n    return 2 * number\n  },\n  add: (n1 = Math.PI, n2) => {\n    return n1 + n2\n  },\n  misc: {\n    year: () => '1999',\n    brand: () => 'casio',\n    hello: name => `hello ${name}`,\n  },\n}\n\nfire(calculator)
\n

即可发布成如下的命令工具

\n
node calculator.js --help\n\nUSAGE:\n\tnode object.js\n\nCOMMANDS:\n\n\thalf  --number=<number>\n\tdouble  --number=<number>\n\tadd  --n1=3.141592653589793  --n2=<n2>\n\n\tmisc\n\t\tyear\n\t\tbrand\n\t\thello  --name=<name>
"}},{"node":{"frontmatter":{"title":"react-md-editor react mardown 编辑器","publish":true,"cover":"https://raw.githubusercontent.com/uiwjs/react-markdown-editor/4884f29f2aad59bf7f512184ba3726d76bbd7170/website/logo.svg?sanitize=true","showCover":true,"date":"2019-09-12","category":"frontend","url":"https://github.com/uiwjs/react-md-editor","author":"uiw 编辑 Ka","translator":"","tags":["react"],"priority":1},"html":"

在线 demo

"}},{"node":{"frontmatter":{"title":"react-spinners-css 另一个加载动画库,还有 vue,Angular","publish":true,"cover":"https://camo.githubusercontent.com/6aa1631907521d36165d7ef74d78bb0fd0febbd5/68747470733a2f2f692e696d6167657375702e636f2f696d61676573322f653538333233343164356433653434303232316366383036353030343237393261393965333966372e676966","showCover":true,"date":"2019-09-12","category":"frontend","url":"https://github.com/JoshK2/react-spinners-css","author":"Josh Kuttler 编辑 Ka","translator":"","tags":["react"],"priority":1},"html":"

Vue 的实现

\n

Angular 的实现

"}},{"node":{"frontmatter":{"title":"rsuite-国人开发的react组件库","publish":true,"cover":"https://user-images.githubusercontent.com/1203827/44192693-0440f400-a163-11e8-9d7c-0cc55797e0cb.png","showCover":true,"date":"2019-09-11","category":"frontend","url":"https://github.com/rsuite/rsuite","author":"rsuite 编辑 Ka","translator":"","tags":["react"],"priority":1},"html":"

React Suite 是一套 React 组件库，为中后台产品而生。致力于创造出贴心的交互设计，同时为开发者提供了友好的开发体验。支持 TypeScript。

"}},{"node":{"frontmatter":{"title":"ruffle-模拟 flash 的 Webassembly，使用 Rust 编写","publish":true,"cover":"https://camo.githubusercontent.com/155b70fcb807787450561a70a898326746497618/68747470733a2f2f727566666c652e72732f6173736574732f6c6f676f2e706e67","showCover":true,"date":"2019-09-11","category":"frontend","url":"https://github.com/ruffle-rs/ruffle","author":"Ruffle 编辑 Ka","translator":"","tags":["webassembly"],"priority":1},"html":"

在线demo

"}},{"node":{"frontmatter":{"title":"storytime.dev 为你的代码讲个故事","publish":true,"cover":"","showCover":true,"date":"2019-09-11","category":"other","url":"https://storytime.dev","author":"编辑 Ka","translator":"","tags":["git"],"priority":1},"html":"

可为你的代码增加旁注来解释说明，就像图文插画一样讲解你的代码。

"}},{"node":{"frontmatter":{"title":"typescript3.7新特性和示例","publish":true,"cover":"https://httptoolkit.tech/static/7dbbfe618bb43a7fed133537b222389d/69cdd/code.webp","showCover":true,"date":"2019-09-11","category":"javascript","url":"https://httptoolkit.tech/blog/5-big-features-of-typescript-3.7/","author":"Tim Perry 编辑 Ka","translator":"","tags":["typescript"],"priority":2},"html":"

顶层await(Top-level Await)

\n

Javascript已经提议顶层await，不需要在外面包装async，typescript3.7已经支持。

\n
const response = await fetch('http://example.com');
\n

Null Coalescing(??操作符)

\n
const result = firstResult || secondResult;\n\n// ts3.7\nconst result = firstResult ?? secondResult;
\n

Optional Chaining(?.操作符)

\n
let result = data ? (data.key1 ? data.key1.key2 : undefined) : undefined;\n\n// ts3.7\nlet result = data?.key1?.key2;
\n

递归类型申明

\n
// 由于JSONValue定义里面又有递归的类型引用，这在3.7之前是不允许的\ntype JSONValue =\n    | string\n    | number\n    | boolean\n    | { [x: string]: JSONValue }\n    | Array<JSONValue>;
"}},{"node":{"frontmatter":{"title":"vscode-flex布局提示插件","publish":true,"cover":"https://github.com/dzhavat/css-flexbox-cheatsheet/raw/master/images/demo-command.gif","showCover":true,"date":"2019-09-12","category":"IDE","url":"https://github.com/dzhavat/css-flexbox-cheatsheet","author":"Dzhavat Ushev 编辑 Ka","translator":"","tags":["vscode"],"priority":1},"html":"

鼠标放到样式中 flex 上就会出现菜单。

\n

支持格式

\n

CSS\nLess\nSass\nScss

"}},{"node":{"frontmatter":{"title":"windows上的linux,WSL配置开发环境完全教程","publish":true,"cover":"https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c9aaa2c1-f583-473c-9179-0a94f895237a/js-dev-bash-windowslinux-windows-store.png","showCover":true,"date":"2019-09-12","category":"IDE","url":"https://www.smashingmagazine.com/2019/09/moving-javascript-development-bash-windows/#comments-moving-javascript-development-bash-windows","author":"Burke Holland 编辑 Ka","translator":"","tags":["WSL"],"priority":2},"html":"

详细的步骤安装WSL(Windows Subsystem For Linux )。

\n

WSL安装后，可无缝执行ubuntu程序，反之亦然。ubuntu可直接访问windows文件系统。

\n
\n

然而评论依然说安装麻烦，居然有人说赶不上黑苹果

\n
"}},{"node":{"frontmatter":{"title":"urql-React GraphQL 客户端","publish":true,"cover":"https://raw.githubusercontent.com/FormidableLabs/urql/master/docs/urql-banner.gif","showCover":true,"date":"2019-09-12","category":"frontend","url":"https://github.com/FormidableLabs/urql","author":"Formidable 编辑 Ka","translator":"","tags":["react"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"使用 GitHub Package Registry 作为 npm 代理，cnpm 之外的选择","publish":true,"cover":"https://github.blog/wp-content/uploads/2019/05/facebook-1200x630-final.png?w=1200","showCover":true,"date":"2019-09-12","category":"nodejs","url":"https://github.blog/2019-09-11-proxying-packages-with-github-package-registry-and-other-updates/?utm_campaign=1568215894&utm_medium=social&utm_source=twitter&utm_content=1568215894","author":"Alex Mullans 编辑 Ka","translator":"","tags":["npm"],"priority":1},"html":"

在项目文件夹下创建.npmrc

\n
OWNER替换为github账户名或机构名\nregistry=https://npm.pkg.github.com/OWNER
\n

或者直接加参数\nnpm i --registry=https://npm.pkg.github.com/OWNER

"}},{"node":{"frontmatter":{"title":"使用 rel=”preconnect”提升页面性能","publish":true,"cover":"https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_1400,f_auto,q_auto/v1565836695/preconnect_ewdjyj.png","showCover":true,"date":"2019-09-11","category":"frontend","url":"https://css-tricks.com/using-relpreconnect-to-establish-network-connections-early-and-increase-performance/","author":"Chris Coyier 编辑 Ka","translator":"","tags":["html"],"priority":1},"html":"
<!-- 提前建立连接 -->\n<link rel=\"preconnect\" href=\"http://example.com\" />\n<!-- 提前dns解析 -->\n<link rel=\"dns-prefetch\" href=\"http://example.com\" />
"}},{"node":{"frontmatter":{"title":"列举所有javascript版本的特性","publish":true,"cover":"","showCover":true,"date":"2019-09-12","category":"javascript","url":"https://github.com/daumann/ECMAScript-new-features-list","author":"Dietmar Aumann 编辑 Ka","translator":"","tags":["version"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"小窍门-postgres查询结果转json","publish":true,"cover":"","showCover":true,"date":"2019-09-11","category":"database","url":"","author":"编辑 Ka","translator":"","tags":["postgres"],"priority":1},"html":"
SELECT row_to_json(q1) FROM\n  (SELECT * FROM people LIMIT 1) q1;
"}},{"node":{"frontmatter":{"title":"微软依然在大量使用 React Native","publish":true,"cover":"","showCover":true,"date":"2019-09-12","category":"frontend","url":"https://twitter.com/grabbou/status/1169914387039211520","author":"Kayce Basques 编辑 Ka","translator":"","tags":["react"],"priority":1},"html":"

除了早就开始使用的 React Native Windows,微软依然在大量使用 React Native 实现手机端 Office 应用，并感觉良好。

"}},{"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":"微软提出静态typescript以支持低端嵌入式设备","publish":true,"cover":"","showCover":true,"date":"2019-09-11","category":"javascript","url":"https://www.infoq.com/news/2019/09/static-typescript-msft-paper/","author":"Bruno Couriol","translator":"","tags":["typescript"],"priority":1},"html":"

最终编译成小巧效率高的ARM Thumb指令机器码，可减少耗电量。

\n

这里有个STS写的游戏。

"}},{"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":"教程-使用 WatermelonDB 和 ReactNative 创建离线 app","publish":true,"cover":"https://github.com/Nozbe/WatermelonDB/raw/master/assets/logo-horizontal2.png","showCover":true,"date":"2019-09-12","category":"frontend","url":"https://www.sitepoint.com/create-an-offline-first-react-native-app-using-watermelondb/","author":"Dhanraj Acharya 编辑 Ka","translator":"","tags":["react"],"priority":1},"html":"

WatermelonDB(西瓜 DB)是基于 SQLite database 的主要用于 React Native 的本地响应式数据库，其目的是，当数据量很大的时候，取代 Mobx 或 Redux 来提升性能。

"}},{"node":{"frontmatter":{"title":"牛牛牛牛牛-汇编和c写的开源类unix操作系统,可以运行DOOM","publish":true,"cover":"https://github.com/ozkl/soso/raw/master/screenshots/soso-doom.png","showCover":null,"date":"2019-09-12","category":"os","url":"https://github.com/ozkl/soso","author":"ozkl 编辑 Ka","translator":"","tags":["os"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"教程-使用React Native创建通知","publish":true,"cover":"https://miro.medium.com/max/1920/1*g-EinSyehO6B1kHtH0WNew.jpeg","showCover":true,"date":"2019-09-12","category":"frontend","url":"https://medium.com/@vadimkorr/building-in-app-notification-system-in-react-native-96efd478ef31","author":"Vadim Korobeinikov","translator":"","tags":["react"],"priority":1},"html":"

源码

"}},{"node":{"frontmatter":{"title":"让你的 favicon 动起来","publish":true,"cover":"https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_913,f_auto,q_auto/v1565281655/s_756730CEF4FBFC43D6F30A8CF52F0C71A93AF5BC13BD01F736BA699314A1BD38_1564493246537_favicon_tezw6p.png","showCover":true,"date":"2019-09-11","category":"frontend","url":"https://css-tricks.com/the-making-of-an-animated-favicon/","author":"Florian Scholz, Alexis Deveria 编辑 Ka","translator":"","tags":["html"],"priority":1},"html":"

原理是使用 javascript 将 favicon 的 href 指向隐藏的 canvas 元素生成的 dataurl 数据(favicon.href = canvas.toDataURL('image/png');)

\n

两个示例

\n"}}]}}