{"pageContext":{"index":14,"total":367,"name":"2019-08-11","items":[{"node":{"frontmatter":{"title":"ES标准提议-脚本中以模块引入样式","publish":true,"cover":"","showCover":true,"date":"2019-08-08","category":"frontend","url":"https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/CSSModules/v1Explainer.md","author":"Dan Clark 编辑 Ka","translator":"","tags":["html"],"priority":1},"html":"
import styles from \"styles.css\";\ndocument.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];
\n

参见此讨论

"}},{"node":{"frontmatter":{"title":"Apollo Client已支持React Hooks","publish":true,"cover":"https://miro.medium.com/max/1000/1*DTxULMcMoWBFeDvDUp3WnQ@2x.png","showCover":true,"date":"2019-08-08","category":"nodejs","url":"https://blog.apollographql.com/apollo-client-now-with-react-hooks-676d116eeae2","author":"Hugh Willson 摘译 Ka","translator":"","tags":["graphql"],"priority":1},"html":"

安装

\n

npm install @apollo/react-hooks

\n

简洁的代码 - 使用useQuery查询

\n
const LAST_LAUNCH = gql`\n  query lastLaunch {\n    launch {\n      id\n      timestamp\n    }\n  }\n`;\n\nexport function LastLaunch() {\n  const { loading, data } = useQuery(LAST_LAUNCH);\n  return (\n    <div>\n      <h1>Last Launch</h1>\n      {loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>}\n    </div>\n  );\n}
\n

使用useMutation修改

\n
function Message() {\n  const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE);\n  const [deleteMessage] = useMutation(DELETE_MESSAGE);\n  const { data } = useQuery(GET_MESSAGE);\n\n  return (\n    <div>\n      <p>\n        {loading\n          ? 'Loading ...'\n          : `Message: ${data && data.message ? data.message.content : ''}`}\n      </p>\n      <p>\n        <button onClick={() => saveMessage()}>Save</button>\n        <button onClick={() => deleteMessage()}>Delete</button>\n      </p>\n    </div>\n  );\n}
\n

改进对typescript的支持

\n

减少包大小（减少一半）

\n

使用useLazyQuery支持延迟查询

\n

改进的文档

\n

"}},{"node":{"frontmatter":{"title":"FileSaver-浏览器直接保存文件","publish":true,"cover":"","showCover":true,"date":"2019-08-08","category":"javascript","url":"https://github.com/eligrey/FileSaver.js","author":"Eli Grey 编辑 Ka","translator":"","tags":["html"],"priority":1},"html":"

基于浏览器TransformStream的实现StreamSaver。

\n
var FileSaver = require('file-saver');\n//保存Blob\nvar blob = new Blob([\"Hello, world!\"], {type: \"text/plain;charset=utf-8\"});\nFileSaver.saveAs(blob, \"hello world.txt\");\n\n// 保存链接\nFileSaver.saveAs(\"https://httpbin.org/image\", \"image.jpg\");\n\n//保存canvas\nvar canvas = document.getElementById(\"my-canvas\");\ncanvas.toBlob(function(blob) {\n    saveAs(blob, \"pretty image.png\");\n});
"}},{"node":{"frontmatter":{"title":"Intl.NumberFormat 新特性","publish":true,"cover":"https://v8.dev/_img/v8.svg","showCover":true,"date":"2019-08-08","category":"javascript","url":"https://2ality.com/2019/08/global-this.html","author":"Mathias Bynens and Shane F. Carr (V8) 摘译 Ka","translator":"","tags":["v8"],"priority":1},"html":"

提议

\n

现在支持 BigInt

\n
const formatter = new Intl.NumberFormat('fr');\nformatter.format(12345678901234567890n);\n// → '12 345 678 901 234 567 890'\nformatter.formatToParts(123456n);\n// → [\n// →   { type: 'integer', value: '123' },\n// →   { type: 'group', value: ' ' },\n// →   { type: 'integer', value: '456' }\n// → ]
\n

支持计量单位

\n
const formatter = new Intl.NumberFormat('en', {\n  style: 'unit',\n  unit: 'kilobyte'\n});\nformatter.format(1.234);\n// → '1.234 kB'\nformatter.format(123.4);\n// → '123.4 kB'
\n

常用方法

\n
const formatter = new Intl.NumberFormat('en');\nformatter.format(987654.321);\n// → '987,654.321'\nformatter.formatToParts(987654.321);\n// → [\n// →   { type: 'integer', value: '987' },\n// →   { type: 'group', value: ',' },\n// →   { type: 'integer', value: '654' },\n// →   { type: 'decimal', value: '.' },\n// →   { type: 'fraction', value: '321' }\n// → ]
\n

码农们需要的

\n

1024

\n
// Test compact notation.\nconst formatter = new Intl.NumberFormat('en', {\n  notation: 'compact'\n});\nformatter.format(1234.56);\n// → '1.2K'\nformatter.format(123456);\n// → '123K'\nformatter.format(123456789);\n// → '123M'
\n

兆每秒(科学范式)

\n
const formatter = new Intl.NumberFormat('en', {\n  style: 'unit',\n  unit: 'meter-per-second',\n  notation: 'scientific'\n});\nformatter.format(299792458);\n// → '2.998E8 m/s'
\n

百分比

\n
const formatter = new Intl.NumberFormat('en', {\n  style: 'unit',\n  unit: 'percent',\n  signDisplay: 'always'\n});\nformatter.format(-12.34);\n// → '-12.34%'\nformatter.format(12.34);\n// → '+12.34%'\nformatter.format(0);\n// → '+0%'\nformatter.format(-0);\n// → '-0%'
\n

金额

\n
const formatter = new Intl.NumberFormat('en', {\n  style: 'currency',\n  currency: 'USD',\n  signDisplay: 'exceptZero',\n  currencySign: 'accounting'\n});\nformatter.format(-12.34);\n// → '($12.34)'\nformatter.format(12.34);\n// → '+$12.34'\nformatter.format(0);\n// → '$0.00'\nformatter.format(-0);\n// → '($0.00)'
"}},{"node":{"frontmatter":{"title":"TypeLighterJS输入打字效果","publish":true,"cover":"https://github.com/EdernClemente/TypeLighterJS/raw/master/images/foo.gif","showCover":true,"date":"2019-08-08","category":"frontend","url":"https://github.com/EdernClemente/TypeLighterJS","author":"Edern Clemente","translator":"","tags":["animation"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"alpaca-免手续费炒美股api","publish":true,"cover":"https://docs.alpaca.markets/images/trade-flow.png","showCover":true,"date":"2019-08-08","category":"nodejs","url":"https://github.com/alpacahq/alpaca-trade-api-js","author":"编辑 Ka","translator":"","tags":["stock"],"priority":1},"html":"

alpaca(羊驼)是用来炒美股的0手续费的api。其提供实时股票数据，和交易api。

\n

公司背景

\n

尚不支持非美籍账户

"}},{"node":{"frontmatter":{"title":"css动画讲解","publish":true,"cover":"https://miro.medium.com/max/2024/1*aMOZ578-yNodBhdisfYGWQ.gif","showCover":true,"date":"2019-08-08","category":"frontend","url":"https://blog.prototypr.io/this-aint-disney-a-practical-guide-to-css-transitions-and-animations-a8b87e7c5531","author":"Mohammed Ibrahim","translator":"","tags":["animation"],"priority":1},"html":"

时序动画

\n

线性和贝塞尔曲线

\n

\n

几种常见贝塞尔曲线

\n

\n\n

Transitions

\n

由元素的状态改变触发\n例如：

\n
.glowAndGrow {\n  height: 100px;\n  transition: background-color 0.5s, height 1s;\n}\n.glowAndGrow:hover {\n  background-color: gold;\n  height: 200px;\n}\n<div class=\"glowAndGrow\">This box glows and grows on hover</div>
\n

Animations

\n

由keyframes组成动画

"}},{"node":{"frontmatter":{"title":"frontless-同构服务端渲染实时框架","publish":true,"cover":"https://frontless.js.org/assets/img/logo.svg","showCover":true,"date":"2019-08-08","category":"nodejs","url":"https://github.com/nesterow/frontless","author":"Anton Nesterov 编辑 Ka","translator":"","tags":["isomorphic"],"priority":1},"html":"

整合了 FeathersJS(基于 express 的 websocket 实时协议) , RiotJS(自定义标签 mvp 框架) | Turbolinks(移动端触摸导航加速) | ExpressJS。

\n

服务端推送更新的例子

\n

组件代码

\n
<my-component>\n  <div>{state.value}</div>\n  <script>\n    export default () => ({\n      id: \"message\",\n      state: {\n        value: ''\n      }\n    })\n  </script>\n</my-component>
\n

api 代码

\n
app.use('myservice', {\n  async create(data) {\n    return app.setState('message', {\n      value: 'Hello!'\n    });\n  }\n});
\n

触发状态修改的代码

\n
client.service('myservice').create({});
"}},{"node":{"frontmatter":{"title":"globalThis 提议-访问全局对象的标准方式","publish":true,"cover":"https://2ality.com/2019/08/global-this/global-scope.svg","showCover":true,"date":"2019-08-08","category":"javascript","url":"https://2ality.com/2019/08/global-this.html","author":"Dr. Axel Rauschmayer 摘译 Ka","translator":"","tags":["this"],"priority":1},"html":"

globalThis提供了一个标准的方式去获取不同环境下的全局对象。

\n

对于 nodejs 里，module 里的变量不是全局变量。需要通过 global

\n

事实上，在不同的 JavaScript 环境中拿到全局对象是需要不同的语句的。在 Web 中，可以通过 window、self 或者 frames 取到全局对象，但是在 Web Workers 中只有 self 可以。在 Node.js 中，它们都无法获取，必须使用 global。在松散模式下，可以在函数中返回 this 来获取全局对象，但是在严格模式下 this 会返回 undefined 。

"}},{"node":{"frontmatter":{"title":"javascript位运算符妙用","publish":true,"cover":"https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/08/javascript-bitwise-operators.jpeg?w=730&ssl=1","showCover":true,"date":"2019-08-08","category":"javascript","url":"https://blog.logrocket.com/interesting-use-cases-for-javascript-bitwise-operators/","author":"Glad Chinda 摘译 Ka","translator":"","tags":["bitwise"],"priority":1},"html":"

~ NOT(非)

\n

~A = - (A+1)

\n
//将indexOf转为boolean\n!!~[].indexOf(1);
\n

& AND(与)

\n
(0 & 0) === 0     // 0 x 0 = 0\n(0 & 1) === 0     // 0 x 1 = 0\n(1 & 0) === 0     // 1 x 0 = 0\n(1 & 1) === 1     // 1 x 1 = 1
\n

去掉位元

\n
(A & 0 = 0) — The bit is always turned off by a corresponding 0 bit.\n(A & 1 = A) — The bit remains unchanged when paired with a
\n

检查位元

\n
const mask = 0b010000;\nconsole.log((0b110010 & mask) === mask); //
\n

判断奇偶

\n
function isOdd(int) {\n  return (int & 1) === 1; //相当于int % 2 == 0\n}\n\nfunction isEven(int) {\n  return (int & 1) === 0;\n}\n\nconsole.log(isOdd(34)); // false\nconsole.log(isOdd(-63)); // true\nconsole.log(isEven(-12)); // true\nconsole.log(isEven(199)); // false
\n

| OR（或）

\n
(0 | 0) === 0\n(0 | 1) === 1\n(1 | 0) === 1\n(1 | 1) === 1
\n

打开位元

\n
(A | 0 = A)\n(A | 1 = 1)
\n
const mask = 0b10101010;\n\nconsole.log(0b11010000 | mask); // 0b11111010
\n

^ XOR (异或)

\n
(0 ^ 0) === 0\n(0 ^ 1) === 1\n(1 ^ 0) === 1\n(1 ^ 1) === 0
\n

转换位元

\n

(A ^ 0 = A)\nlet A = 1\n(A ^ 1 = 1)\n(A ^ 1 = 0)

\n

<< (左移)

\n

RGB 转 16 进制

\n
function rgbToHex([red = 0, green = 0, blue = 0] = []) {\n  return `#${((red << 16) | (green << 8) | blue).toString(16)}`;\n}
\n

>> (右移)

\n

hex 转 RGB

\n
function hexToRgb(hex) {\n  hex = hex.replace(/^#?([0-9a-f]{6})$/i, '$1');\n  hex = Number(`0x${hex}`);\n\n  return [\n    (hex >> 16) & 0xff, // red\n    (hex >> 8) & 0xff, // green\n    hex & 0xff // blue\n  ];\n}
\n

>>>（补零右移）

\n

基于位元的配置

\n
const LIST_FRACTION = 0x1; // (001)\nconst LIST_UNIQUE = 0x2; // (010)\nconst LIST_SORTED = 0x4; // (100)\n\n// 打开配置\nconst LIST_ALL = LIST_FRACTION | LIST_UNIQUE | LIST_SORTED; // (111)\n\n// 关闭配置\nconst LIST_DEFAULT = LIST_ALL ^ LIST_UNIQUE; // (101)\n\n//判断配置\n(flag & LIST_UNIQUE) === LIST_UNIQUE; //(存在)\n(flag & LIST_UNIQUE) !== LIST_UNIQUE; //(不存在)
\n
\n

貌似 javscript 不需要这些 C 风格的。

\n
"}},{"node":{"frontmatter":{"title":"monitr - 出自雅虎的nodejs监控包","publish":true,"cover":"","showCover":true,"date":"2019-08-08","category":"nodejs","url":"https://github.com/yahoo/monitr","author":"Yahoo 编辑 Ka","translator":"","tags":["monitor"],"priority":1},"html":"

安装使用

\n

npm install monitr

\n
var monitor = require('monitr');\nmonitor.start();\nmonitor.stop();
\n

运行方式

\n

会创建独立的线程监控使用此包的node进程的状态，通过本地域socket发送json格式统计信息.

\n
 { status:\n     { pid: <pid of the node process>,\n       ts: <current time stamp>,\n       cluster: <process group id>,\n       reqstotal: <total requests processed by this node process server>,\n       utcstart: <when the process was started>,\n       events: <number of new reports being processed since last stats reporting>,,\n       cpu: <cpu usage>,\n       mem: <memory usage>,\n       cpuperreq: <cpu usage per request>,\n       oreqs: <current open requests count>,\n       sys_cpu: <system cpu load>,\n       oconns: <current open connections count>,\n       user_cpu: <user cpu load>,\n       rps: <requests per second>,\n       kbs_out: <kbs of data transferred since last stats reporting>,\n       elapsed: <time elapsed since last event>,\n       kb_trans: <total kbs of data transferred>,\n       jiffyperreq: <cpu usage in terms of ticks per request>,\n       gc: {\n           scavenge: { count: <number>, elapsed_ms: <number>, max_ms: <number> },\n           marksweep: { count: <number>, elapsed_ms: <number>, max_ms: <number> }\n       }\n    }\n }
"}},{"node":{"frontmatter":{"title":"react-archer在元素之间画线","publish":true,"cover":"https://raw.githubusercontent.com/pierpo/react-archer/master/example.png","showCover":true,"date":"2019-08-08","category":"frontend","url":"https://github.com/pierpo/react-archer","author":"Pierre Poupin","translator":"","tags":["react"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"react-flippy创建翻面卡","publish":true,"cover":"https://github.com/sbayd/react-flippy/raw/master/hover_flippy.gif","showCover":true,"date":"2019-08-08","category":"frontend","url":"https://github.com/sbayd/react-flippy","author":"Berkay Aydın","translator":"","tags":["react"],"priority":2},"html":"
import Flippy, { FrontSide, BackSide } from 'react-flippy';\n// ... component class\nrender() {\n\t// .. return\n  <Flippy\n    flipOnHover={false} // default false\n    flipOnClick={true} // default false\n    flipDirection=\"horizontal\" // horizontal or vertical\n    ref={(r) => this.flippy = r} // to use toggle method like this.flippy.toggle()\n    // if you pass isFlipped prop component will be controlled component.\n    // and other props, which will go to div\n    style={{ width: '200px', height: '200px' }} /// these are optional style, it is not necessary\n  >\n    <FrontSide\n      style={{\n        backgroundColor: '#41669d',\n      }}\n    >\n      RICK\n    </FrontSide>\n    <BackSide\n      style={{ backgroundColor: '#175852'}}>\n      ROCKS\n    </BackSide>\n  </Flippy>\n}
"}},{"node":{"frontmatter":{"title":"react-spaces将页面或容器分成多个可拖拽改变大小的空间","publish":true,"cover":"https://camo.githubusercontent.com/6a836cc790797537591d3be52a429053b3ef98bd/68747470733a2f2f7777772e616c6c616e6561676c652e636f6d2f72656163742d7370616365732f72656163742d7370616365732d64656d6f2e676966","showCover":true,"date":"2019-08-08","category":"javascript","url":"https://github.com/aeagle/react-spaces","author":"Allan Eagle","translator":"","tags":["react"],"priority":1},"html":"

在线demo

"}},{"node":{"frontmatter":{"title":"riot.js-简单小巧自定义标签风格的框架","publish":true,"cover":"https://riot.js.org/img/logo/square.svg","showCover":true,"date":"2019-08-08","category":"frontend","url":"https://github.com/riot/riot","author":"编辑 Ka","translator":"","tags":["riot"],"priority":1},"html":"\n

使用示例

\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Riot Example: Timer</title>\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <link rel=\"stylesheet\" href=\"style.css\" />\n  </head>\n\n  <body>\n    <timer></timer>\n\n    <!-- riot tags -->\n    <script src=\"timer.riot\" type=\"riot\"></script>\n\n    <!-- scripts we need -->\n    <script src=\"https://cdn.jsdelivr.net/npm/riot@4/riot+compiler.min.js\"></script>\n\n    <!-- mount this app -->\n    <script>\n      riot.compile().then(() => {\n        riot.mount('timer', { start: 0 });\n      });\n    </script>\n  </body>\n</html>
"}},{"node":{"frontmatter":{"title":"webpack-bundle-analyzer查看什么造成文件很大","publish":true,"cover":"https://cloud.githubusercontent.com/assets/302213/20628702/93f72404-b338-11e6-92d4-9a365550a701.gif","showCover":true,"date":"2019-08-08","category":"javascript","url":"https://github.com/webpack-contrib/webpack-bundle-analyzer","author":"webpack-contrib","translator":"","tags":["webpack"],"priority":2},"html":"

插件使用

\n
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')\n  .BundleAnalyzerPlugin;\n\nmodule.exports = {\n  plugins: [new BundleAnalyzerPlugin()]\n};
"}},{"node":{"frontmatter":{"title":"www.pkgstats.com - npm包统计","publish":true,"cover":"","showCover":true,"date":"2019-08-08","category":"javascript","url":"https://www.pkgstats.com","author":"Ryan Hefner","translator":"","tags":["npm"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"取余与取模的区别","publish":true,"cover":"","showCover":true,"date":"2019-08-08","category":"python","url":"https://2ality.com/2019/08/remainder-vs-modulo.html","author":"Dr. Axel Rauschmayer 摘译 Ka","translator":"","tags":["math"],"priority":1},"html":"
# 取余\n> 5 rem -3\n2\n# 取模\n> 5 mod -3\n-1
\n

简言之取余(remainder)相当于

\n
Math.trunc(5 / -3);
\n

取模(modulo)相当于

\n
Math.floor(5 / -3);
\n

在 javascript 里，%运算符是取余

\n

在 python 里，%运算符是取模

"}},{"node":{"frontmatter":{"title":"游戏-飞翔的鸡蛋(Aero Egg)-ios非中国区可下载","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":"https://cdn.vox-cdn.com/thumbor/WClhWrT0Jbbuh-SMXmZwnUwGJiw=/0x0:4000x2499/920x613/filters:focal(1680x930:2320x1570):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/64898323/921740544.jpg.0.jpg","showCover":true,"date":"2019-08-08","category":"other","url":"https://www.theverge.com/2019/8/1/20750913/dominos-pizza-website-accessible-blind-supreme-court-lawsuit","author":"Nick Statt, @nickstatt","translator":"","tags":["ada"],"priority":2},"html":"

如今美国ADA相关的诉讼正是律师大赚的时候。

\n

美国最大披萨外卖商Domino却特立独行，要求最高法关闭针对其网站不达标ADA的诉讼。

\n

其解释说：

\n"}},{"node":{"frontmatter":{"title":"开发者需要注意的firefox-68新特性","publish":true,"cover":"","showCover":true,"date":"2019-08-08","category":"frontend","url":"https://hacks.mozilla.org/2019/07/new-css-features-in-firefox-68/","author":"Rachel Andrew 摘译 Ka","translator":"","tags":["html"],"priority":1},"html":"

支持Css Scroll Snapping特性

\n

支持::marker

\n

开发者工具-打印样式按钮

\n

\n

错误的样式依然会在样式表里显示以便觉察

\n

"}},{"node":{"frontmatter":{"title":"异步生成器和异步迭代器的使用场景","publish":true,"cover":"","showCover":true,"date":"2019-08-09","category":"nodejs","url":"https://blog.kazge.com/nodejs/2019/08/08/zh-async-generator-and-async-iterator/","author":"Ka","translator":"","tags":["ES2018"],"priority":1},"html":""}},{"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":"https://camo.githubusercontent.com/86761162d5909f69b299be987b8c2a170385b6cf/68747470733a2f2f692e696d6775722e636f6d2f763361523045372e706e67","showCover":true,"date":"2019-08-08","category":"nodejs","url":"https://github.com/ian13456/mc.js","author":"Ian Huang","translator":"","tags":["npm"],"priority":2},"html":"

技术栈为ThreeJS, ReactJS, GraphQL, and NodeJS.

"}}]}}