├── .gitignore ├── .vscode └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── commitlint.config.js ├── common ├── base.css └── reset.css ├── draft ├── 1.计量长度.1.md ├── 10.Github 上常用之外的 Markdown 语法.12.md ├── 100.JavaScript WebGL 矩阵.117.md ├── 11.将数字转换为字符串碰到的问题.13.md ├── 12.toString() 和 String() 的区别.14.md ├── 13.position 属性值 sticky.15.md ├── 14.Date 转换报错.16.md ├── 15.Date 字符串格式.17.md ├── 16.JavaScript 新旧替换一：变量声明.18.md ├── 17.canvas 宽高问题.19.md ├── 18.canvas 显示模糊问题.20.md ├── 19.canvas 设置边框问题.21.md ├── 2.阻止自动填充帐号 input.4.md ├── 20.npm Getting started.22.md ├── 21.lerna.23.md ├── 22.canvas 图片圆角问题.24.md ├── 23.canvas 文字换行.25.md ├── 24.canvas 图片跨域处理.26.md ├── 25.预请求 405 问题.27.md ├── 26.npm 发布包遇到的问题.28.md ├── 27.canvas 文本坐标(0,0)显示问题.29.md ├── 28.Chrome Failed to load response data.30.md ├── 29.打印分页问题.31.md ├── 3.使用iscroll.js后页面卡顿.5.md ├── 30.ASCII 和 Base64.32.md ├── 31.图片 src 为二进制的处理.33.md ├── 32.Mac 快捷键.34.md ├── 33.JavaScript 新旧替换二：赋值和取值.35.md ├── 34.JavaScript 新旧替换三：参数转换.36.md ├── 35.复制到剪切板的问题.37.md ├── 36.Writing Modes.38.md ├── 37.The new Operator.39.md ├── 38.关于 this 的误解.40.md ├── 39.apply、call 和 bind 方法.41.md ├── 4.input自动全选文本.6.md ├── 40.Programming paradigm.42.md ├── 41.sudo 找不到命令.43.md ├── 42.Linux 下克隆 GitHub 库很慢.44.md ├── 43.Node 遍历文件.45.md ├── 44.Node Command-line utility.46.md ├── 45.Transaction processing.47.md ├── 46.Object Overview.48.md ├── 47.JavaScript 新旧替换四：继承.49.md ├── 48.CORS.50.md ├── 49.stylelint rules.51.md ├── 5.inline-block 元素对齐问题.7.md ├── 50.String & Array Method.52.md ├── 51.Webpack Concept.57.md ├── 52.JavaScript 新旧替换五：函数嵌套.59.md ├── 53.SEO Concept.60.md ├── 54.Rich Text Editor.61.md ├── 55.Font.62.md ├── 56.回车和换行.63.md ├── 57.textarea.64.md ├── 58.Can I use xxx.66.md ├── 59.浮层滚动问题.67.md ├── 6.移动端 Click 300 毫秒延迟的问题.8.md ├── 60.粘性头部效果.68.md ├── 61.Safari 导航栏.70.md ├── 62.z-index.71.md ├── 63.h5 穿透滚动.72.md ├── 64.图像.73.md ├── 65.Canvas 图像灰度处理.74.md ├── 66.Canvas 橡皮擦效果.75.md ├── 67.配置环境遇到的零碎点.77.md ├── 68.Git branching model.78.md ├── 69.GitHub flow.79.md ├── 7.安装 node-sass 遇到的问题.9.md ├── 70.GitLab Flow.80.md ├── 71.Mac 配置记.81.md ├── 72.自定义 create-react-app.82.md ├── 73.Hoisting.84.md ├── 74.正则多次匹配无效的问题.85.md ├── 75.Canvas 绘制 1 px 直线模糊（非高清屏）的问题.86.md ├── 76.instanceof.87.md ├── 77.获取页面元素位置.88.md ├── 78.JavaScript 新旧替换六：键值对数据.90.md ├── 79.本地包调试 ：npm link.91.md ├── 8.box-shadow设置后看不到的问题.10.md ├── 80.Lerna 实践记录.92.md ├── 81.CentOS 7 下 Git 超时.95.md ├── 82.CentOS 7 后台克隆远程库.96.md ├── 83.Windows 下 Nginx 开机自启动.97.md ├── 84.Node 连接 MySql.98.md ├── 85.JavaScript 数学曲线—阿基米德螺线.102.md ├── 86.JavaScript 数学曲线—等角螺线.103.md ├── 87.JavaScript 数学曲线—连锁螺线.104.md ├── 88.JavaScript 数学曲线—星形线.105.md ├── 89.JavaScript 数学曲线—双角线.106.md ├── 9.模拟事件.11.md ├── 90.JavaScript 数学曲线—心形线.107.md ├── 91.JavaScript WebGL 基础概念.108.md ├── 92.JavaScript WebGL 绘制一条直线.109.md ├── 93.JavaScript WebGL 基础疑惑点.110.md ├── 94.JavaScript WebGL 绘制一个面.111.md ├── 95.JavaScript WebGL 设置颜色.112.md ├── 96.JavaScript WebGL 使用图片.113.md ├── 97.JavaScript WebGL 使用图片疑惑点.114.md ├── 98.JavaScript WebGL 图片透明处理.115.md ├── 99.JavaScript WebGL 帧缓冲区对象.116.md ├── food.md ├── multivariable-calculus.md ├── n.ESC 服务器操作记录.md ├── n.Jenkins.md ├── n.Visual Studio Code.md ├── n.npm CLI commands.md ├── n.template.md ├── n.服务器部署相关知识点.md ├── question.md ├── transform.md └── write.md ├── draft2 ├── 1 │ ├── JavaScript WebGL 三维相关概念.md │ ├── config.json │ ├── example │ │ ├── bg.png │ │ ├── no-watcher.html │ │ ├── no-watcher.js │ │ ├── orthographic-projection.html │ │ ├── orthographic-projection.js │ │ ├── perspective-projection.html │ │ ├── perspective-projection.js │ │ ├── watcher-rotate.html │ │ ├── watcher-rotate.js │ │ ├── watcher.html │ │ └── watcher.js │ └── image │ │ ├── 10.png │ │ └── 11.png ├── 2 │ ├── JavaScript WebGL 绘制顺序.md │ ├── config.json │ └── example │ │ ├── 2d-order1.html │ │ ├── 2d-order1.js │ │ ├── 2d-order2.html │ │ ├── 2d-order2.js │ │ ├── 3d-depth-conflict.html │ │ ├── 3d-depth-conflict.js │ │ ├── 3d-depth-conflict2.html │ │ ├── 3d-depth-conflict2.js │ │ ├── 3d-depth-offset.html │ │ ├── 3d-depth-offset.js │ │ ├── 3d-order1.html │ │ ├── 3d-order1.js │ │ ├── 3d-order2-depth.html │ │ ├── 3d-order2-depth.js │ │ ├── 3d-order2-projection-depth.html │ │ ├── 3d-order2-projection-depth.js │ │ ├── 3d-order2.html │ │ ├── 3d-order2.js │ │ └── bg.png ├── 3 │ ├── JavaScript WebGL 3D 绘制三棱锥.md │ ├── config.json │ ├── example │ │ ├── bg.png │ │ ├── cube.html │ │ ├── cube.js │ │ ├── index.html │ │ └── index.js │ └── image │ │ └── waste.png ├── 4 │ ├── JavaScript WebGL 3D 绘制球体.md │ ├── config.json │ └── example │ │ └── index.html └── template │ ├── config.json │ ├── example │ └── index.html │ └── template.md ├── images ├── 7 │ ├── 7-01.png │ ├── 7-02.png │ ├── angular-commit.png │ ├── changelog.png │ ├── failed1.png │ ├── npx.png │ ├── react-commit.png │ ├── validate-commit.png │ └── vuejs-commit.png ├── 8 │ ├── poster.jpeg │ ├── qrcode-question.png │ └── qrcode-space.png ├── 9 │ ├── 9-code.png │ └── 9-qrcode-create-event.png ├── 13 │ └── 13-support.png ├── 14 │ ├── 14-5.0-date-spec.png │ ├── 14-5.1-date-spec.png │ ├── 14-6-date-spec.png │ └── qr-code.png ├── 16 │ └── poster.jpeg ├── 17 │ ├── poster.jpg │ ├── qrcode-canvas-css.png │ └── qrcode-canvas-unit.png ├── 18 │ ├── poster.jpg │ ├── qrcode-canvas-image-hd.png │ └── qrcode-canvas-image.png ├── 19 │ ├── poster.jpg │ └── qrcode-canvas-border.png ├── 20 │ └── poster.jpeg ├── 21 │ ├── cli-guide.png │ ├── logo.png │ └── poster.png ├── 22 │ ├── poster.jpg │ ├── qrcode-border-radius.png │ └── qrcode-radius-clip.png ├── 23 │ ├── poster.png │ └── qrcode-canvas-text.png ├── 24 │ └── poster.jpg ├── 27 │ ├── img-textbaseline.gif │ ├── poster.jpg │ ├── qrcode-normal.png │ └── qrcode-problem.png ├── 28 │ └── paint.jpeg ├── 30 │ ├── ascii.png │ └── poster.jpeg ├── 31 │ ├── poster.jpeg │ ├── qrcode-btoa.png │ ├── qrcode-createobjectURL.png │ ├── qrcode-filereader.png │ ├── support-blob.png │ ├── support-btoa.png │ └── support-filereader.png ├── 33 │ └── poster.png ├── 34 │ └── poster.png ├── 35 │ ├── code.png │ └── qrcode.png ├── 36 │ ├── map.png │ └── poster.jpeg ├── 37 │ └── console.png ├── 38 │ ├── this-scope.png │ └── this-self.png ├── 39 │ ├── apply-no-strict.png │ ├── apply-strict.png │ └── bind.png ├── 42 │ └── yum-provides.png ├── 46 │ ├── 46-arr.png │ ├── 46-bool.png │ ├── 46-constructor.png │ ├── 46-func.png │ ├── 46-number.png │ ├── 46-obj.png │ ├── 46-string.png │ └── figure-1.png ├── 47 │ └── poster.png ├── 51 │ ├── dx.jpg │ └── jx.jpg ├── 52 │ └── tyzr.gif ├── 53 │ ├── poster1.jpg │ └── poster2.jpg ├── 54 │ ├── girls-and-balloons.jpg │ └── pic.jpg ├── 55 │ ├── cursive-examples.png │ ├── fantasy-examples.png │ ├── monospace-examples.png │ ├── poster.png │ ├── sansserif-examples.png │ └── serif-examples.png ├── 56 │ ├── code.png │ └── poster.png ├── 57 │ └── qrcode.png ├── 59 │ ├── poster.jpg │ ├── qrcode-body.png │ ├── qrcode-normal.png │ ├── qrcode-problem.png │ └── qrcode-scroll.png ├── 60 │ ├── poster.png │ ├── qr-fixed.png │ └── qr-sticky.png ├── 61 │ ├── body.png │ ├── full-screen.png │ ├── html-hidden.png │ ├── no-body.png │ ├── normalize-page.png │ └── pure-page.png ├── 62 │ ├── qr-diff.png │ └── qr-same.png ├── 63 │ ├── poster.png │ ├── qr-no-touch.png │ ├── qr-problem.png │ └── qr-solution.png ├── 64 │ └── poster.png ├── 65 │ ├── poster.png │ └── qr-gray.png ├── 66 │ ├── destination-out.png │ ├── poster.jpg │ ├── qr-index.png │ ├── qr-normal.png │ ├── qr-percentage.png │ └── qr-progress.png ├── 67 │ ├── poster.png │ ├── register.png │ └── search.png ├── 68 │ ├── centr-decentr.png │ ├── git-model.png │ ├── hotfix-branches.png │ ├── main-branches.png │ ├── merge-without-ff.png │ └── poster.jpg ├── 69 │ ├── flow.png │ └── poster.jpg ├── 70 │ ├── environment-branches.png │ ├── gitlab-flow.png │ ├── poster.jpg │ ├── production-branch.png │ └── release-branches.png ├── 71 │ ├── nvm.png │ ├── poster.jpg │ └── private.jpg ├── 72 │ ├── fork.png │ ├── help.png │ ├── modify.png │ ├── poster.jpg │ ├── start.png │ └── success.png ├── 73 │ └── poster.jpg ├── 74 │ └── poster.png ├── 75 │ ├── canvas-half-pixels-1.jpg │ ├── canvas-half-pixels-2.jpg │ ├── compare.png │ └── poster.png ├── 76 │ └── poster.png ├── 77 │ ├── client.png │ ├── inner-vs-outer.png │ ├── offset.png │ ├── poster.jpg │ ├── qr-higher-parent.png │ ├── qr-into-view.png │ └── qr-parent.png ├── 78 │ ├── map-base.png │ ├── object-base.png │ └── poster.jpg ├── 79 │ ├── link-module.png │ ├── link-package.png │ ├── link-result.png │ └── npm-link.png ├── 80 │ ├── poster.jpeg │ ├── publish-1.png │ ├── publish-2.png │ ├── publish-3.png │ └── publish-4.png ├── 81 │ └── poster.png ├── 82 │ ├── jobs.png │ ├── nohup.png │ ├── poster.jpg │ └── ps.png ├── 83 │ ├── cmd.png │ ├── error.png │ ├── install.png │ ├── nginx.png │ ├── poster.png │ └── step1.png ├── 84 │ ├── mysql-install.png │ ├── poster.png │ └── secure.png ├── 85 │ ├── 1.png │ ├── 2.png │ ├── 2.svg │ ├── 3.png │ └── poster.png ├── 86 │ ├── 1.gif │ ├── 2.png │ ├── 2.svg │ ├── 4.png │ ├── 4.svg │ └── poster.png ├── 87 │ ├── 1.gif │ ├── 2.png │ ├── 2.svg │ ├── 4.png │ ├── 4.svg │ └── poster.png ├── 88 │ ├── 1.gif │ ├── 2.svg │ ├── 3.svg │ └── poster.png ├── 89 │ ├── 1.gif │ ├── 2.svg │ ├── 3.svg │ └── poster.png ├── 90 │ ├── 1.gif │ ├── 2-1.svg │ ├── 2.svg │ └── 3.svg ├── 91 │ ├── 1.png │ └── poster.png ├── 92 │ └── poster.png ├── 93 │ ├── 1.png │ └── 2.png ├── 94 │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ └── poster.png ├── 95 │ ├── 1.png │ ├── 2.png │ └── poster.png ├── 96 │ ├── 1.png │ └── poster.png ├── 97 │ ├── 1.png │ ├── 2.jpg │ └── poster.png ├── 98 │ └── poster.png ├── 99 │ ├── 1.png │ └── poster.png ├── 100 │ ├── 1.png │ ├── 10.svg │ ├── 11.svg │ ├── 12.svg │ ├── 13.svg │ ├── 14.svg │ ├── 15.svg │ ├── 2.svg │ ├── 3.svg │ ├── 4.svg │ ├── 5.svg │ ├── 6.svg │ ├── 7.svg │ ├── 8.svg │ └── 9.svg ├── 2-1.png ├── 3-1.png ├── 4-1.png ├── 5-1.png ├── 6-delay.png ├── 6-no-delay.png ├── 6-pointer-events-support.png ├── 6-pointer-events.png ├── 6-touch-action-support.png ├── 6-touch-action.png ├── 6-viewport-support.png ├── database │ └── mongo-shell.png ├── n │ ├── linux-file-structure.jpg │ ├── linux-file-structure.png │ └── vim-vi-workmodel.png ├── n1 │ ├── 1.png │ ├── 2.png │ └── 3.png └── question │ ├── event-loop.png │ ├── https.jpg │ └── javascript-runtime.svg ├── package-lock.json ├── package.json ├── resource ├── webgl-1.0.pdf └── webgl-2.0.pdf ├── script ├── cli.js ├── compressImg.js ├── del.js ├── format.js └── img.js └── util ├── canvas ├── canvas.js ├── m4.js ├── m4Class.js └── webgl.js └── insertLink.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | *.iml 3 | .idea/ 4 | .ipr 5 | .iws 6 | *~ 7 | ~* 8 | *.diff 9 | *.patch 10 | *.bak 11 | .DS_Store 12 | Thumbs.db 13 | .svn/ 14 | *.swp 15 | .project 16 | .settings/ 17 | node_modules/ 18 | _site/ 19 | *.log 20 | *.plist 21 | draft/bky/ 22 | draft/jj/ 23 | draft/sf/ 24 | draft/origin/ 25 | draft2/**/format 26 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.tabSize": 2, 3 | "editor.formatOnPaste": false, 4 | "editor.formatOnSave": false, 5 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | 6 | ## [1.1.1](https://github.com/XXHolic/html-css-point/compare/v1.1.0...v1.1.1) (2018-07-05) 7 | 8 | 9 | 10 | 11 | # 1.1.0 (2018-07-05) 12 | 13 | 14 | ### Features 15 | 16 | * add ignore file ([7f85f7f](https://github.com/XXHolic/html-css-point/commit/7f85f7f)) 17 | * add QR code ([7438934](https://github.com/XXHolic/html-css-point/commit/7438934)) 18 | * add QRcode ([43f69ed](https://github.com/XXHolic/html-css-point/commit/43f69ed)) 19 | * finish oneth draft ([f8a9b5b](https://github.com/XXHolic/html-css-point/commit/f8a9b5b)) 20 | 21 | 22 | ### Performance Improvements 23 | 24 | * 尝试commitizen 成功 ([e07b186](https://github.com/XXHolic/html-css-point/commit/e07b186)) 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 thy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = {extends: ['@commitlint/config-conventional']} 2 | -------------------------------------------------------------------------------- /common/base.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 14px; 3 | } 4 | 5 | /* 6 | * 用于控制显示和隐藏的css 7 | */ 8 | .dn { 9 | display: none; 10 | } 11 | .di { 12 | display: inline; 13 | } 14 | .dib { 15 | display: inline-block; 16 | } 17 | .db { 18 | display: block; 19 | } 20 | .df { 21 | display: -webkit-flex; 22 | display: flex; 23 | } 24 | .dt { 25 | display: table; 26 | } 27 | .dtc { 28 | display: table-cell; 29 | } 30 | .dit { 31 | display: inline-table; 32 | } 33 | .flex-column { 34 | display: -webkit-flex; 35 | display: flex; 36 | flex-direction: column; 37 | } 38 | .flex-1 { 39 | flex: 1; 40 | } 41 | 42 | .flex-ac { 43 | -webkit-align-items: center; 44 | align-items: center; 45 | } 46 | .flex-jc { 47 | -webkit-justify-content: center; 48 | justify-content: center; 49 | } 50 | /* 51 | * 用于控制方向的css 52 | */ 53 | .tc { 54 | text-align: center; 55 | } 56 | .tl { 57 | text-align: left; 58 | } 59 | .tr { 60 | text-align: right; 61 | } 62 | 63 | /* 64 | * 浮动 65 | */ 66 | .fl { 67 | float: left; 68 | } 69 | .fr { 70 | float: right; 71 | } 72 | 73 | /* 74 | * margin居中 75 | */ 76 | .ma { 77 | margin: 0 auto; 78 | } 79 | /* 80 | * 用于间隔 81 | */ 82 | .mb10 { 83 | margin-bottom: 10px; 84 | } 85 | .mr10 { 86 | margin-right: 10px; 87 | } 88 | /* 89 | * 方便定位的position 90 | */ 91 | .pr { 92 | position: relative; 93 | } 94 | .pa { 95 | position: absolute; 96 | } 97 | .pf { 98 | position: fixed; 99 | } 100 | 101 | /* 102 | * 用于对齐 103 | */ 104 | .vam { 105 | vertical-align: middle; 106 | } 107 | 108 | a { 109 | color: #0366d6; 110 | text-decoration: none; 111 | } 112 | a:active, a:hover { 113 | color: #0366d6; 114 | text-decoration: underline; 115 | } 116 | /* 117 | * 顶部标题公用样式 118 | */ 119 | .fix-header { 120 | overflow: hidden; 121 | position: fixed; 122 | top: 0; 123 | left: 0; 124 | right: 0; 125 | z-index: 10; 126 | margin: 0; 127 | box-shadow: 0 0 5px #333; 128 | height: 50px; 129 | font-size: 20px; 130 | line-height: 50px; 131 | white-space: nowrap; 132 | text-overflow: ellipsis; 133 | background-color: #fff; 134 | } 135 | .normal-header { 136 | margin: 0; 137 | box-shadow: 0 0 5px #333; 138 | height: 50px; 139 | font-size: 20px; 140 | line-height: 50px; 141 | white-space: nowrap; 142 | text-overflow: ellipsis; 143 | background-color: #fff; 144 | } 145 | .pt50 { 146 | padding-top: 50px; 147 | } 148 | .pt30 { 149 | padding-top: 30px; 150 | } 151 | .container-width { 152 | width: 300px; 153 | } 154 | 155 | 156 | -------------------------------------------------------------------------------- /common/reset.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}a,a:active,a:hover{text-decoration:none;color: #fff;}iframe,img,legend{border:0}legend,td,th{padding:0}body{margin:0}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}ol,ul{list-style-type:none;list-style-image:none}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;-webkit-box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}[draggable]{cursor:move}table{border-collapse:collapse;border-spacing:0;} 2 | ol,ul{list-style:none;padding:0;}img{display:block;height: auto; border:0;}p{margin:0;}* {-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}*::-webkit-scrollbar{width: 0px;}input{outline: none;-webkit-appearance:none;}input:focus {outline: none;} 3 | html{height: 100%;overflow-x: hidden;font-size: 32px;font-family: "Microsoft Yahei",Helvetica,Arial,sans-serif;color: #24292e;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;}body{-webkit-overflow-scrolling: touch; overflow-scrolling: touch;text-rendering: optimizelegibility;height: 100%;} 4 | -------------------------------------------------------------------------------- /draft/1.计量长度.1.md: -------------------------------------------------------------------------------- 1 | # 计量长度 2 | ## 场景 3 | 在收集像素相关的资料时，发现了CSS里面关于长度的知识点，看了一下，在此进行整理和记录，感觉会用的到。 4 | ## 长度 5 | 长度是指距离测量，长度值的格式是一个数字后面紧跟着一个单位标识符，在0长度后面，单位标识符是可选项。有些属性允许使用负长度值，但这个可能会进行格式化，并且可能有特定的实现限制。如果一个负长度值不能够支持，那它应该转换成可支持的最近的值。如果一个属性值不允许负长度值，那就忽略这个负值声明。 6 | 7 | 在CSS里面有2种长度单位：相对和绝对。相对长度单位是指一个长度相对于另一个长度属性。样式使用相对长度单位更容易适配不同的输出环境。 8 | 9 | 相对长度单位有： 10 | - em:相对于字体的`font-size`计算值 11 | 12 | “em”单位相当于元素使用属性`font-size`的计算值，但有种例外情况，当`font-size`使用的单位也是`em`或没有使用`font-size`属性时，那它就相当于这个元素的父元素的`font-size`的计算值。这里的父元素需要注意的是，如果最近的父元素没有使用`font-size`属性，那么就会继续向上一级父元素寻找，直到找到第一个有使用`font-size`属性的父元素。 13 | 14 | - rem:相对于根元素的font-size计算值 15 | - ex:相对于小写“x”的高度 16 | 17 | “ex”单位由元素的第一个可用字体定义，但有种例外情况，当`font-size`使用的单位也是`ex`或没有使用`font-size`属性时，那它就指这个元素的父元素的`ex`的值。关于父元素具体指向，参考“ex”的相关说明。 18 | 19 | - ch:数字0的宽度 20 | - vh、vw:相对于视口的高度（vh）、宽度(vm)，视口被均分为100单位的vh和vm 21 | - vmax:相对于视口的宽度或高度中较大的那个，其中较大的那个被均分为100单位的vmax 22 | - vmin:相对于视口的宽度或高度中较小的那个，其中较小的那个被均分为100单位的vmin 23 | 24 | 绝对长度单位是相对彼此是固定的。绝对单位包含物理单位和像素单位： 25 | - in:英寸，1 in=2.54 cm 26 | - cm:厘米 27 | - mm:毫米 28 | - q:1/4毫米 29 | - pt:点，CSS中1 pt=1/72 in 30 | - pc:派卡，1 in=6 pc 31 | - px:像素，1 in=96 px 32 | 33 | ## 参考 34 | - https://www.w3.org/TR/CSS22/syndata.html#length-units 35 | - http://www.css88.com/book/css/values/length/length.htm -------------------------------------------------------------------------------- /draft/10.Github 上常用之外的 Markdown 语法.12.md: -------------------------------------------------------------------------------- 1 | # GitHub 上常用之外的 Markdown 语法 2 | ## 目录 3 | - [场景](#situation) 4 | - [Markdown Style](#style) 5 | - [链接书写](#link) 6 | - [目录跳转](#index-jump) 7 | - [靠右排版](#align-right) 8 | - [修改前后的展示](#show-modify) 9 | - [收起和展开](#show-hide) 10 | 11 | ## 场景 12 | 在 github 上看一些库的文档，发现写的方式在 github 官方提供的 [Mastering Markdown][mastering-markdown] 上没有相关的示例，但在 [GitHub Flavored Markdown Spec][markdown-spec] 里面可以找到，这里面说明示例非常多，平常都不一定用的上，于是碰上一个就收集记录一下。下面的一些写法，在 github 上支持，在一些编辑器上可能看不到预期的效果。 13 | 14 | ## Markdown Style 15 | ### 链接书写 16 | 基本书写的方式： 17 | ``` 18 | [GitHub](http://github.com) 19 | ``` 20 | 用标识的方式： 21 | ``` 22 | [GitHub][github] 23 | 24 | 25 | [github]:http://github.com 26 | ``` 27 | 这样的写法，不用在 markdown 里面突然插入一个很长的链接，文字排版看起来也相对一致。 28 | 29 | ### 目录跳转 30 | 添加目录展示，点击目录时，希望跳到对应内容区域。以这篇文档为例。 31 | ``` 32 | ---内容省略--- 33 | 34 | * [场景](#situation) 35 | * [Markdown Style](#style) 36 | 37 | ---内容省略--- 38 | 39 | ## 场景 40 | 41 | ---内容省略--- 42 | 43 | ## Markdown style 44 | 45 | ``` 46 | 这个是在看 [Developing AngularJS][develop-angularjs] 的时候发现的。这样子处理后，分享或者引用的时候，也可以针对性的选择内容，例如可以直接跳到本文的 [Markdown Style][markdown-style] 内容区。 47 | 48 | ### 靠右排版 49 | 如果想要图片或者文字靠右，可以使用下面的方法： 50 | ``` 51 | 52 | 53 |
文字靠右
54 | ``` 55 | 要注意的是，用了 html 标签后，有的情况下需要更其它的语法单独空一行，才会有效果，否则会解析失败。 56 |
Top :arrow_up:
57 | 58 | ### 修改前后的展示 59 | javascript 语法高亮，用的方式是 ```javascript，把 javascript 换成 diff 就可以了。 60 | ```diff 61 | { 62 | "scripts": { 63 | - "precommit": "npm test", 64 | - "commitmsg": "commitlint -E GIT_PARAMS" 65 | }, 66 | + "husky": { 67 | + "hooks": { 68 | + "pre-commit": "npm test", 69 | + "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 70 | + } 71 | + } 72 | } 73 | ``` 74 | ### 收起和展开 75 | 这种效果是在 [30-seconds-of-code][url-github-30-seconds] 这个库里面发现，由于要展示的内容很多，默认就先收起来。这种效果是使用了下面的标签： 76 | ```html 77 |
78 | 收缩起来后展示内容 79 | 80 | - 这是具体的内容，跟 summary 要空一行，否则有些效果会失效。 81 | - 这是第二行。 82 | 83 |
84 | ``` 85 |
86 | 这是示例 87 | 88 | - 示例的具体内容第一行。 89 | - 示例的具体内容第二行。 90 | 91 |
92 | 93 |
Top :arrow_up:
94 | 95 | 96 | [mastering-markdown]:https://guides.github.com/features/mastering-markdown/ 97 | [markdown-spec]:https://github.github.com/gfm/ 98 | 99 | 100 | [develop-angularjs]: https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#developing-angularjs 101 | [markdown-style]: https://github.com/XXHolic/segment/issues/12#style 102 | [url-github-30-seconds]: https://github.com/30-seconds/30-seconds-of-code -------------------------------------------------------------------------------- /draft/11.将数字转换为字符串碰到的问题.13.md: -------------------------------------------------------------------------------- 1 | # 将数字转换为字符串碰到的问题 2 | ## 场景 3 | 将数字转换为字符串，直接调用 `toString` 方法，报语法错误。 4 | 5 | ## 原因 6 | 出现问题的使用方式： 7 | ```javascript 8 | 2.toString(); // SyntaxError 9 | ``` 10 | . 运算符是有效的数字字符，会被优先识别为数字常量的一部分，然后才是对象属性访问运算符。所以上面使用的方式，. 被视为常量 2. 的一部分，没有 . 属性访问运算符来调用 `toString` 方法。 11 | 12 | ## 参考资料 13 | - [JavaScript Parser](http://esprima.org/demo/parse.html) 14 | 15 | -------------------------------------------------------------------------------- /draft/12.toString() 和 String() 的区别.14.md: -------------------------------------------------------------------------------- 1 | # toString() 和 String() 的区别 2 | ## 场景 3 | 由于在使用 `toString()` 方法碰到这个[问题][url-issue-13]，就想到了 `String()` 的方式，想比较一下其中的区别。 4 | 5 | ## 方法说明 6 | ### toString() 7 | 语法：object.toString()
8 | 作用：返回一个表示该对象的字符串
9 | 每一个对象都有一个 toString() 方法。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 "[object type]",其中 type 是对象类型。 10 | ```javascript 11 | var testObj = {"name":"jike","age":12}; 12 | var testArray1 = [1,2,3]; 13 | var testArray2 = [{"index1":0},{"index2":1},{"index3":2}]; 14 | var testBoolean = false; 15 | var testNum1 = 1; 16 | var testNum2 = NaN; 17 | var testString = "try"; 18 | 19 | console.info("testObj",testObj.toString()); // testObj [object Object] 20 | console.info("testArray1",testArray1.toString()); // testArray1 1,2,3 21 | console.info("testArray2",testArray2.toString()); // testArray2 [object Object],[object Object],[object Object] 22 | console.info("testBoolean",testBoolean.toString()); // testBoolean false 23 | console.info("testNum1",testNum1.toString()); // testNum1 1 24 | console.info("testNum2",testNum2.toString()); // testNum2 NaN 25 | console.info("testString",testString.toString()); // testString try 26 | ``` 27 | 对于特殊的 null 和 undefined，会报错提示找不到 toString 方法。 28 | 29 | ### String() 30 | 语法：String(thing)
31 | 作用：将其他值生成或转换为字符串
32 | 参数 thing 是任何可以被转换成字符串的值。 33 | ```javascript 34 | var testObj = {"name":"jike","age":12}; 35 | var testArray1 = [1,2,3]; 36 | var testArray2 = [{"index1":0},{"index2":1},{"index3":2}]; 37 | var testBoolean = false; 38 | var testNum1 = 1; 39 | var testNum2 = NaN; 40 | var testString = "try"; 41 | 42 | console.info("testObj",String(testObj)); // testObj [object Object] 43 | console.info("testArray1",String(testArray1)); // testArray1 1,2,3 44 | console.info("testArray2",String(testArray2)); // testArray2 [object Object],[object Object],[object Object] 45 | console.info("testBoolean",String(testBoolean)); // testBoolean false 46 | console.info("testNum1",String(testNum1)); // testNum1 1 47 | console.info("testNum2",String(testNum2)); // testNum2 NaN 48 | console.info("testString",String(testString)); // testString try 49 | ``` 50 | 对于特殊的 null 和 undefined，也可以进行转换。 51 | ```javascript 52 | var testNull = null; 53 | var testUndefined = undefined; 54 | 55 | console.info("testNull",String(testNull)); // testNull null 56 | console.info("testUndefined",String(testUndefined)); // testUndefined undefined 57 | ``` 58 | 59 | ## 参考资料 60 | - [toString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) 61 | - [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) 62 | 63 | 64 | [url-issue-13]:https://github.com/XXHolic/segment/issues/13 65 | 66 | -------------------------------------------------------------------------------- /draft/14.Date 转换报错.16.md: -------------------------------------------------------------------------------- 1 | # Date 转换报错 2 | ## 场景 3 | 前段时间，同事在开发 h5 相关的逻辑，处理时间的时候直接用了原生的 Date 对象，测试过程中，反馈在苹果手机上出现空白页。经过排查才发现是 Date 转换格式的问题。自己之前也没有碰到过这类问题，通过查找相关资料，尝试验证后，在此记录。 4 | 5 | ## 原因 6 | 问题重现[页面][url-data-error]，手机访问二维码如下： 7 | 8 | ![14-qrcode][url-local-qrcode] 9 | 10 | ```javascript 11 | var dateString = "2018-11-10 11:11:11" 12 | var date = new Date(dateString); 13 | ``` 14 | 原因是这个字符串格式不符合 `new Date` 规范中描述的格式。JavaScript 中日期格式标准是基于 [ISO 8601][url-wiki-iso-8601] 制定。这个规范是在 ES5 中加入。规范的格式为：`YYYY-MM-DDTHH:mm:ss.sssZ`，具体含义见 [Date 字符串格式][url-segment-17]。按照规范，将空格装换为 `T` 就可以了。 15 | ```javascript 16 | var dateString = "2018-11-10 11:11:11" 17 | var date = new Date(dateString.replace(' ', 'T')); 18 | ``` 19 | 在规范的格式中有个 `Z`，这个在 ISO-8601 中，如果没有指定，那么就默认为“当地时间”。但是 ES5.1 规范中说默认值是 `Z`。这个描述在 ES6 中进行了修正。下面是从规范中找到的描述： 20 | 21 | ES5 22 | ![14-5-spec][url-local-5] 23 | ES5.1 24 | ![14-5.1-spec][url-local-5.1] 25 | ES6 26 | ![14-6-spec][url-local-6] 27 | 28 | 但不幸的是，有些浏览器引擎遵循的是 ES5.1 中的标准，有些遵循的是 ES6 中的标准。所以如果想要跨浏览器支持，需要指定相应的时区，不然将无法知道时间是按照本地时间还是按照 GMT 解析。 29 | 30 | 如果以上还是不支持，虽然没有官方说明，可以将其装换为几乎普遍支持的格式：`YYYY/MM/DD HH:MM:SS`。 31 | ```javascript 32 | var dateString = "2018-11-10 11:11:11" 33 | var date = new Date(dateString.replace(/-/g, '/')); 34 | ``` 35 | 36 | ## 参考资料 37 | - [stackoverflow][url-stackoverflow] 38 | - [wiki ISO_8601][url-wiki-iso-8601] 39 | - [Date and time format - ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) 40 | 41 | 42 | [url-local-qrcode]:../images/14/qr-code.png 43 | [url-local-5]:../images/14/14-5.0-date-spec.png 44 | [url-local-5.1]:../images/14/14-5.1-date-spec.png 45 | [url-local-6]:../images/14/14-6-date-spec.png 46 | 47 | [url-data-error]:https://xxholic.github.io/lab/lab-js/segment/14/14.date-error.html 48 | [url-stackoverflow]:https://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios 49 | [url-wiki-iso-8601]:https://en.wikipedia.org/wiki/ISO_8601 50 | [url-segment-17]:https://github.com/XXHolic/segment/issues/17 -------------------------------------------------------------------------------- /draft/15.Date 字符串格式.17.md: -------------------------------------------------------------------------------- 1 | # Date 字符串格式 2 | ## 想法 3 | 在问题 [Date 转换问题][url-segment-16] 中，碰到了关于字符串格式的说明，为了方便理解，在这里把规范翻译一下。此翻译基于规范版本：ECMAScript® 2018 Language Specification，章节：20.3.1.15 Date Time String Format。 4 | 5 | ## 规范 6 | ECMAScript 基于 ISO 8601 延伸格式的简化版本，为日期时间定义了一个字符串交换格式。这个格式如下： 7 | 8 | **YYYY-MM-DDTHH:mm:ss.sssZ** 9 | 10 | 各字段的含义如下： 11 | 12 | 字段 | 含义 13 | :------------ | :------------- 14 | **YYYY** | 是在[公历][url-wiki-proleptic-gregorian-calendar]里面，从 0000 年到 9999 年之间的十进制数。 15 | **-** | “**-**”（连字符）像字面上在字符串里出现 2 次。 16 | **MM** | 是一年中 01 月到 12 月的某个月份。 17 | **DD** | 是一个月中 01 到 31 的某一天。 18 | **T** | “**T**”像字面上那样出现，表示时间元素的开始。 19 | **HH** | 是从午夜开始后经历的完整小时数，是在 00 到 24 之间的两位十进制数字。 20 | **:** | “**:**”（冒号）像字面上一样在字符中出现 2 次。 21 | **mm** | 是从小时开始后经历的完整分钟数，是在 00 到 59之间的两位十进制数字。 22 | **ss** | 是从分钟开始后经历的完整秒数，是在 00 到 59之间的两位十进制数字。 23 | **.** | “**.**”（点）像字面上那样出现。 24 | **sss** | 是从秒开始后经历的完整毫秒数，是三位十进制数字。 25 | **Z** | 是指定的时区偏移量，或者 在 **HH:mm** 时间格式后紧跟 “+” 或 “-”。 26 | 27 | 这个格式仅包含的日期格式有： 28 | YYY 29 | YYYY-MM 30 | YYYY-MM-DD 31 | 32 | 也包含“日期-时间”的格式，由以上的日期格式紧跟着以下时间格式之一，再加上时区偏移量可选项： 33 | THH:mm 34 | THH:mm:ss 35 | THH:mm:ss.sss 36 | 37 | 所有的数字必须基于 10，如果 **MM** 或者 **DD** 字段缺失，则默认值为 **“01”**。如果 **HH**、**mm** 或者 **ss** 字段缺失，则默认值为 **“00”**，如果 **sss** 字段缺数，则默认值为 **“000”**。如果时间偏移量缺失，日期格式按照 UTC 是按转换，时间格式按照当地时间转换。 38 | 39 | 格式字符串中非法的值（约定之外的格式或者语法错误）意味着这个格式的字符串不是一个有效的格式。 40 | 41 | > NOTE1 因为每一天都是在午夜开始和结束，用来区分两个午夜的符号 **00:00** 和 **24:00**，可以关联到同一个日期。这就意味着下面的两个符号其实指的是同一个时间点：**1995-02-04T24:00** 和 **1995-02-05T00:00**。 42 | 43 | > NOTE2 目前没有民用时区缩写的国际标准，像 CET、EST 等等。并且有些时候同一个缩写甚至在两个不同的时区里使用。由于这个原因，ISO 8601 和这个格式指定日期和时间的数字表示。 44 | 45 | ## 参考资料 46 | - [wiki ISO_8601][url-wiki-iso-8601] 47 | - [Date and time format - ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) 48 | 49 | [url-segment-16]:https://github.com/XXHolic/segment/issues/16 50 | [url-wiki-iso-8601]:https://en.wikipedia.org/wiki/ISO_8601 51 | [url-wiki-proleptic-gregorian-calendar]:https://en.wikipedia.org/wiki/Proleptic_Gregorian_calendar -------------------------------------------------------------------------------- /draft/17.canvas 宽高问题.19.md: -------------------------------------------------------------------------------- 1 | # 17.canvas 宽高问题.19 2 | ## 引子 3 | 在最近的工作中碰到了合成图片的需求，首先想到的便是 canvas，到网上查找了一些资料，大部分也是使用 canvas。因为好久没有实际接触过这方面的东西了，感觉到一些兴奋。预估会收获不少。 4 | 5 | ## 宽高问题 6 | 因为是在手机上，需要进行不同尺寸的适配，在项目中使用的是 rem 单位，想着既然拥有全局属性 `width` 和 `height`，那么理论上应该支持。进行了下面的尝试。 7 | ### html 标签属性设置 8 | 这是[示例][url-lab-canvas-unit]，扫描二维码访问如下。 9 | 10 | ![17-canvas-unit][url-local-canvas-unit] 11 | 12 | 发现这个想法不对，后来看[规范][url-spec-canvas]中的描述，发现描述的已经很清楚了： 13 | > The canvas element has two attributes to control the size of the element's bitmap: width and height. These attributes, when specified, must have values that are [valid non-negative integers][url-valid-non-negative-integers]. The [rules for parsing non-negative integers][url-parse-rule] must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150. 14 | 15 | > canvas 元素有2个控制元素位图的属性：width 和 height。这些属性，当指定的时候，必须要是[非负整数值][url-valid-non-negative-integers]。一定要使用解析非负整数的[规则][url-parse-rule]，来获取它们的数字值。如果一个属性值没有，或者解析的时候返回了一个错误，那么一定要使用默认的值。width 属性的默认值是 300，height 属性的默认值是 150。 16 | 17 | 仔细看看然后结合实践就会发现：**html 标签上 width 和 height 的属性值带单位不会有作用**。 18 | 19 | ### css 属性设置 20 | 除了直接设置元素属性，还可以通过 css 来控制 canvas 的宽高。这是[示例][url-lab-canvas-css]，扫描二维码访问如下。 21 | 22 | ![17-canvas-css][url-local-canvas-css] 23 | 24 | 实践后发现是可以的。此外，从示例中还可以发现现象： 25 | 1. 在 canvas 标签上没有设置 width 和 height 属性，用 css 只设置了 width 和 height 其中一种属性，那么另外一种属性的值，会根据默认宽高比例：300:150 = 2:1 进行转换得到。 26 | 2. 在 canvas 标签上有设置 width 和 height 属性，用 css 只设置了 width 和 height 其中一种属性，那么另外一种属性的值，会根据 canvas 标签上 width 和 height 值的比例进行转换得到。 27 | 28 | 这种方式可以让整体的显示，达到自适应的效果。 29 | 30 | ### 动态计算 31 | 根据宽高比例用 js 动态计算后进行赋值，也可以到达一种显示自适应的效果。 32 | 33 | 以上的方式只是整体的显示，在实际应用中会有其它的问题，在 [canvas 显示模糊问题][url-issue-18]中有更加详的细解释。 34 | 35 | ## 参考资料 36 | - [The canvas element][url-spec-canvas] 37 | 38 | [url-spec-canvas]:https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element 39 | 40 | 41 | 42 | [url-lab-canvas-unit]:https://xxholic.github.io/lab/lab-css/segment/17/17.canvas-unit.html 43 | [url-valid-non-negative-integers]:https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-non-negative-integer 44 | [url-parse-rule]:https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-non-negative-integers 45 | [url-lab-canvas-css]:https://xxholic.github.io/lab/lab-css/segment/17/17.canvas-css.html 46 | 47 | [url-repository-images]:https://xxholic.github.io/segment/images 48 | 49 | [url-local-canvas-unit]:../images/17/qrcode-canvas-unit.png 50 | [url-local-canvas-css]:../images/17/qrcode-canvas-css.png 51 | 52 | [url-issue-18]:https://github.com/XXHolic/segment/issues/20 53 | 54 | 55 |
56 | :wastebasket: 57 | 58 | 这两个人要是碰到一起，真不知道会出现什么样的故事！ 59 | 60 | ![17-poster][url-local-poster] 61 | 62 |
63 | 64 | [url-local-poster]:../images/17/poster.jpg -------------------------------------------------------------------------------- /draft/19.canvas 设置边框问题.21.md: -------------------------------------------------------------------------------- 1 | # 19.canvas 设置边框问题.21 2 | ## 引子 3 | 近期的工作中，是继 [canvas 显示模糊问题][url-segment-18] 之后碰到的第 3 个问题。 4 | 5 | ## 设置边框问题 6 | 这个是[示例][url-example-canvas-border]，扫描访问二维码如下。 7 | 8 | ![19-canvas-border][url-local-canvas-border] 9 | 10 | 在手机上可以看到，设置边框后，图片就模糊了。如果 `border` 不占用 canvas 的高宽度，就没有那个问题，在画布上画个边框也可以。 11 | 12 | 原因应该跟 [canvas 显示模糊问题][url-segment-18]中差不多，但疑问的是这种情况并没有少像素，而是展示的空间少了，画布上的像素多了，为什么也会模糊？难道是像素挤到一起重叠了？查了下资料，是有像素重叠的情况。真正原因是什么就不太确定了。 13 | 14 | ## 参考资料 15 | - [The canvas element][url-spec-canvas] 16 | 17 | [url-repository-images]:https://xxholic.github.io/segment/images 18 | 19 | [url-segment-18]:https://github.com/XXHolic/segment/issues/20 20 | [url-spec-canvas]:https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element 21 | [url-example-canvas-border]:https://xxholic.github.io/lab/lab-html/segment-19/19.canvas-border.html 22 | 23 | [url-local-canvas-border]:../images/19/qrcode-canvas-border.png 24 | 25 |
26 | :wastebasket: 27 | 28 | 感觉……嗯？~~好有……道理的样子。 29 | 30 | ![19-poster][url-local-poster] 31 | 32 |
33 | 34 | [url-local-poster]:../images/19/poster.jpg -------------------------------------------------------------------------------- /draft/2.阻止自动填充帐号 input.4.md: -------------------------------------------------------------------------------- 1 | # 阻止自动填充帐号 input 2 | ## 场景 3 | 在维护一个功能的时候，多个帐号切换登录的时候，微信内 h5 页面自动填充的帐号是错误的，需要阻止这种行为。 4 | 5 | ## 阻止自动填充帐号 input 6 | 从网上找了下面几种方法，但不可行的方法： 7 | - 使用假的 `input` 让浏览器去填充，设置 `display:none` 或者 `type:hidden` 。 8 | - 在 `input` 使用属性 `autocomplete="off"` 。 9 | - 页面加载完后，用 js 将其置空。 10 | 11 | 找到尝试后可行的方法： 12 | - 相关的 `input` 不使用 `id`，获取值的时候用 `class` 来获取。 13 | 14 | 15 | 手机测试页面如下： 16 | 17 | ![二维码](../images/2-1.png) 18 | 19 | 测试页面中使用了 `form`，为了方便测试，将信息提交给了百度，微信内再次进入的时候，就没有填充密码。 20 | 21 | ## PC 端阻止密码填充 22 | 在 PC 端尝试可行的方法有： 23 | - 在 input 使用属性 `autocomplete="off"`，在浏览器 chrome(63.0.3239.132)、火狐（59.0.2）、360（9.1.0.410/55.0.2883.87）中测试过可行。 24 | 25 | ### 2019.02.16 26 | 上述方式在最新 PC 的 Chrome 和 Firefox 都无效，于是开始尝试新的方法。 27 | 28 | 尝试后不可行的方法: 29 | - `type="password"` 的 input，设置 `autocomplete="new-password"`，此方法 Chrome 有效，但 Firefox 无效。 30 | - `form` 添加 `autocomplete="off"`。 31 | 32 | 尝试后可行的方法： 33 | - 将 `type="password"` 的 `input`，改成 `type="text"`，获取焦点时改变 `type`。 34 | ```html 35 | 36 | ``` 37 | windows 和 Mac 中测试可行的浏览器有： 38 | - Chrome-72.0.3626.109（64位，正式版本），Chrome-71.0.3578.98（64位，正式版本） 39 | - Firefox-65.0.1 (64 位) 40 | - macOS（10.14.3）中 Safari-12.0.3 (14606.4.5) 41 | 42 | 这是测试 [示例](https://xxholic.github.io/lab/lab-html/input-stop-auto-pc.html)。 43 | 44 | 欢迎补充~~~ 45 | 46 | ## 样式重置 47 | 如果使用自动填充，但要去掉选中帐号后的黄色背景，使用样式： 48 | ```css 49 | input:-webkit-autofill { 50 | -webkit-box-shadow: 0 0 0 1000px white inset !important; 51 | } 52 | ``` 53 | ## 参考 54 | - http://www.cnblogs.com/huangtailang/p/5257631.html 55 | - https://blog.csdn.net/theFrontCalf/article/details/78962123 56 | - https://blog.csdn.net/QQ164881500/article/details/79271318 57 | - https://blog.csdn.net/jiandan1127/article/details/80626605 58 | 59 | [url-base]:https://xxholic.github.io/segment/images 60 | 61 | [url-example1]:https://xxholic.github.io/lab/lab-html/input-auto.html -------------------------------------------------------------------------------- /draft/20.npm Getting started.22.md: -------------------------------------------------------------------------------- 1 | # npm Getting started 2 | ## 目录 3 | - [引子](#situation) 4 | - [组成](#consist) 5 | - [注册](#register) 6 | - [配置本地环境](#config) 7 | - [关于 npm CLI 版本](#version) 8 | - [安装](#install) 9 | - [参考资料](#reference) 10 | ## 引子 11 | 最近工作上要接触相关的东西，开始熟悉文档，这里主要是 Getting started 部分中，感觉有帮助的内容记录。 12 | 13 | ## 组成 14 | npm 包含三个不同的部分： 15 | - 网站 16 | - 命令行界面（CLI） 17 | - 登记处 18 | 19 | 通过使用网站，可以查找发现包、设置简介、管理你的其它方面 npm 经历。比如，你可以建立 [Orgs][url-orgs] ，用来管理共有或私有的包。 20 | 21 | 命令行界面通过终端运行，这个是大多数开发者与 npm 交互的方式。 22 | 23 | 登记处是一个包含大量 JavaScript 软件和元信息的公开信息库。 24 | 25 | ## 注册 26 | 按照提示注册后，用 npm 测试登录。 27 | ```shell 28 | npm login 29 | ``` 30 | 根据提示输入帐号、密码、邮箱。输入后检测是否登录成功 31 | ```shell 32 | npm whoami 33 | ``` 34 | 如果显示出你的用户名，表示登录成功。 35 |
Top :arrow_up:
36 | 37 | ## 配置本地环境 38 | ### 关于 npm CLI 版本 39 | npm 命令行界面按照一定的节奏正常发布。推荐安装的版本： 40 | - latest release：最新的稳定版本。 41 | - next release：最新的未发布的版本，即将成为最新版本。 42 | 43 | 安装 Node.js 的时候，npm 会自动安装。然而 npm 的版本更新比 Node.js 频繁的多，所以安装最新稳定版本的 npm 指令如下： 44 | ```shell 45 | npm install npm@latest -g 46 | ``` 47 | 安装 next release 版本指令为： 48 | ```shell 49 | npm install npm@next -g 50 | ``` 51 | 需要注意的是，next release 版本包含的功能，在最新的稳定版本中不一定会有。 52 | 53 | ### 安装 54 | 强烈建议用 Node 版本管理工具来安装 Node.js 和 npm。不要使用 Node 安装工具，因为 Node 安装进程安装 npm 需要本地文件的允许，当运行全局 npm 包的时候可能会导致权限错误。 55 | **检查npm Node的版本** 56 | ```shell 57 | node -v 58 | npm -v 59 | ``` 60 | **使用 Node 版本管理工具来安装 Node.js 和 npm。** 61 | 62 | Node 版本管理允许你在你自己环境上，安装和切换不同版本的 Node.js 和 npm。这样就能够测试不同的版本，确保它们在不同用户版本上正常运作。 63 | 64 | OSX、Linux Node 版本管理工具 65 | - [nvm][url-nvm] 66 | - [n][url-n] 67 | 68 | Window Node 版本管理工具 69 | - [nodist][url-nodist] 70 | - [nvm-windows][url-nvm-windows] 71 | 72 | 如果无法使用版本管理工具，则使用 Node 安装工具，这是[下载页面][url-node-down]。 73 | 74 | ## 参考资料 75 | - [npm help docs][url-npm-docs] 76 | 77 | [url-orgs]:https://www.npmjs.com/features 78 | [url-nvm]:https://github.com/creationix/nvm 79 | [url-n]:https://github.com/tj/n 80 | [url-nodist]:https://github.com/nullivex/nodist 81 | [url-nvm-windows]:https://github.com/coreybutler/nvm-windows 82 | [url-node-down]:https://nodejs.org/en/download/ 83 | [url-npm-docs]:https://docs.npmjs.com/ 84 | 85 |
86 | :wastebasket: 87 | 88 | 易消化！ 89 | 90 | ![20-poster][url-local-poster] 91 | 92 |
93 | 94 | [url-local-poster]:../images/20/poster.jpeg -------------------------------------------------------------------------------- /draft/22.canvas 图片圆角问题.24.md: -------------------------------------------------------------------------------- 1 | # 22.canvas 图片圆角问题 2 | ## 引子 3 | 近期的工作中，是继 [canvas 设置边框问题][url-segment-19] 之后碰到的第 4 个问题。 4 | 5 | ## 图片圆角问题 6 | 如果只是想要显示圆角的效果，设置 `border-radius` 就可以了，但如果要让 canvas 合成的图片显示为圆角，这种 css 方式不行。这是[示例][url-example-canvas-border-radius]，扫描访问二维码如下。 7 | 8 | ![19-canvas-border-radius][url-local-border-radius] 9 | 10 | 在网上查询资料，发现同样的[问题][url-stackoverflow2]，解决的方式是用 canvas 的裁剪功能。 11 | 12 | ## 解决方法 13 | 先画布上画一个有圆角的矩形，然后使用裁剪的方式 `clip()`。 14 | ```javascript 15 | // 生成有圆角的矩形 16 | function drawRoundedRect(cxt, x, y, width, height, radius) { 17 | cxt.beginPath(); 18 | cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); 19 | cxt.lineTo(width - radius + x, y); 20 | cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); 21 | cxt.lineTo(width + x, height + y - radius); 22 | cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2); 23 | cxt.lineTo(radius + x, height + y); 24 | cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); 25 | cxt.closePath(); 26 | } 27 | ``` 28 | 这是[示例][url-example-canvas-radius-clip]，扫描访问二维码如下。 29 | 30 | ![19-canvas-radius-clip][url-local-radius-clip] 31 | 32 | ## 参考资料 33 | - [The canvas element][url-spec-canvas] 34 | 35 | [url-repository-images]:https://xxholic.github.io/segment/images 36 | 37 | [url-segment-19]:https://github.com/XXHolic/segment/issues/21 38 | [url-spec-canvas]:https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element 39 | [url-example-canvas-border-radius]:https://xxholic.github.io/lab/lab-css/segment-22/22.canvas-border-radius.html 40 | [url-example-canvas-radius-clip]:https://xxholic.github.io/lab/lab-css/segment-22/22.canvas-radius-clip.html 41 | 42 | 43 | 44 | [url-stackoverflow1]:https://stackoverflow.com/questions/13482322/css3-border-radius-to-html5-canvas 45 | [url-stackoverflow2]:https://stackoverflow.com/questions/24228540/html2canvas-border-radius-not-applying-to-img-tag 46 | 47 | [url-local-border-radius]:../images/22/qrcode-border-radius.png 48 | [url-local-radius-clip]:../images/22/qrcode-radius-clip.png 49 | 50 |
51 | :wastebasket: 52 | 53 | 毒液加上蜘蛛侠，感觉更酷。 54 | 55 | ![22-poster][url-local-poster] 56 | 57 |
58 | 59 | [url-local-poster]:../images/22/poster.jpg -------------------------------------------------------------------------------- /draft/24.canvas 图片跨域处理.26.md: -------------------------------------------------------------------------------- 1 | # 24.canvas 图片跨域处理 2 | ## 引子 3 | 近期的工作中处理图片合并时，碰到图片来源跨域的情况，在此记录。 4 | 5 | ## 图片跨域处理 6 | 在用 canvas 合成图片时，放在画布里面的图片，有些图片源是另外一个域名，由于同源策略，首先需要在服务配置中添加对应的 `Access-Control-Allow-Origin`，允许对应域名的请求。在这次处理过程中，还发现如果有用 CDN 进行加速，那么对应的 CDN 的配置也要添加这个请求头。 7 | 8 | 此外在合成图片的时候，要给对应的图片添加 `crossOrigin` 属性，否则会被认为污染了画布，无法继续合成。详细可见[文档][url-mdn-cross-origin]说明。 9 | ```javascript 10 | var img = new Image(); 11 | img.crossOrigin = "Anonymous"; 12 | img.src = '***'; 13 | img.onload = function() {} 14 | ``` 15 | 最终合成图片的处理，要在图片加载完成的事件处理程序中才行，不然对应图片不会出现在合成的图片中。 16 | 17 | ## 参考资料 18 | - [The canvas element][url-spec-canvas] 19 | - [Allowing cross-origin use of images and canvas][url-mdn-cross-origin] 20 | 21 | [url-repository-images]:https://xxholic.github.io/segment/images 22 | 23 | [url-spec-canvas]:https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element 24 | [url-mdn-cross-origin]:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image 25 | 26 |
27 | :wastebasket: 28 | 29 | 开心的笑了。 30 | 31 | ![24-poster][url-local-poster] 32 | 33 |
34 | 35 | [url-local-poster]:../images/24/poster.jpg 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /draft/25.预请求 405 问题.27.md: -------------------------------------------------------------------------------- 1 | # 25.预请求 405 问题 2 | ## 场景 3 | 一个项目中存放了一个静态 json 文件，另外一个域名下获取这个 json 文件，发送 get 请求，请求报 405。 4 | 5 | ## 预请求 405 问题 6 | 通过对比测试，发现在同一工程下，也有其它对 json 文件的请求，但都没有这个问题，且它们用了同一个封装 JQuery 请求的方法。查询资料，很多情况是后台的服务配置问题，比如限制了请求的类型。但这个无法解释同一域名下，其它的 json 请求都是正常的现象。 7 | 8 | 目前解决问题的方式是把 JQuery 的请求换成原生写的 ajax 请求。 9 | 10 | 后来去详细了解 [CORS][url-segment-50]，推测应该是符合了其中的某些条件，当时没有详细的对比。 11 | 12 | ## 参考资料 13 | - [405 Method Not Allowed][url-mdn-405] 14 | 15 | [url-repository-images]:https://xxholic.github.io/segment/images 16 | 17 | [url-mdn-405]:https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405 18 | 19 | [url-segment-50]:https://github.com/XXHolic/segment/issues/50 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /draft/27.canvas 文本坐标(0,0)显示问题.29.md: -------------------------------------------------------------------------------- 1 | # 27.canvas 文本坐标(0,0)显示问题 2 | ## 引子 3 | 在测试 canvas 文字显示的时候，发现坐标设为(0,0)，文字显示会有问题。 4 | 5 | ## 文本坐标(0,0)显示问题 6 | 刚开始本以为使用 canvas 的方法不对，尝试改变坐标后，发现又可以显示。这是问题[示例][url-segment-27-example1]，扫描访问二维码如下。 7 | 8 | ![27-qrcode-problem][url-local-qrcode-problem] 9 | 10 | 查询资料，发现了类似的[问题][url-stackoverflow-question]，原因是 canvas 中的文本坐标位置，是按照属性 `textBaseline` 设置的基线作为参考，默认值是 alphabetic。效果如下图。 11 | 12 | ![27-img-textbaseline][url-local-img-textbaseline] 13 | 14 | 当位置坐标为(0,0)时，文本基线以上的就不在 canvas 显示区域内了，详细文档见 [MDN textBaseline][url-mdn-canvas-textBaseline]。将 `textBaseline` 设置为 top 就可以正常显示，这是正常[示例][url-segment-27-example2]，扫描访问二维码如下。 15 | 16 | ![27-qrcode-normal][url-local-qrcode-normal] 17 | 18 | 在测试的过程中，发现英文可以正常显示，但中文，字体大小不同，顶部显示可能有稍微的截断。目前想到的解决方法有： 19 | - 调整到适当的字体大小。 20 | - 将文本显示的位置稍微的下移。 21 | 22 | ## 参考资料 23 | - [html5 canvas doesn't fill text at coordinates (0,0)][url-stackoverflow-question] 24 | - [textBaseline][url-mdn-canvas-textBaseline] 25 | 26 | [url-repository-images]:https://xxholic.github.io/segment/images 27 | 28 | [url-stackoverflow-question]:https://stackoverflow.com/questions/14289331/html5-canvas-doesnt-fill-text-at-coordinates-0-0 29 | [url-mdn-canvas-textBaseline]:https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline 30 | 31 | 32 | [url-segment-27-example1]:https://xxholic.github.io/lab/lab-js/segment-27/27.canvas-text-problem.html 33 | [url-segment-27-example2]:https://xxholic.github.io/lab/lab-js/segment-27/27.canvas-text-normal.html 34 | 35 | [url-local-qrcode-problem]:../images/27/qrcode-problem.png 36 | [url-local-qrcode-normal]:../images/27/qrcode-normal.png 37 | [url-local-img-textbaseline]:../images/27/img-textbaseline.gif 38 | 39 | 40 | 41 |
42 | :wastebasket: 43 | 44 | 很符合蜘蛛的形象。 45 | 46 | ![27-poster][url-local-poster] 47 | 48 |
49 | 50 | [url-local-poster]:../images/27/poster.jpg 51 | 52 | -------------------------------------------------------------------------------- /draft/28.Chrome Failed to load response data.30.md: -------------------------------------------------------------------------------- 1 | # 28.Chrome Failed to load response data 2 | ## 引子 3 | 在最近的工作中，一个纯文本的请求，在 Chrome 中无法获取到返回值，显示 `Failed to load response data`，后台那里确认正常返回了结果。 4 | 5 | ## Failed to load response data 6 | 首先想到的是不是跨域了，但没有出现跨域的提示。用谷歌搜索，发现了类似的[问题][url-stackoverflow-question]。个人碰到的情况是因为开启了 `Preserve log`，这个是为了在页面跳转或者重新加载时，保留之前的日志。这个是 Chrome 已知的[问题][url-chrome-issues]，一直没有修复。 7 | 8 | 除此之外，回答中还列出了其它的几种可能性，在此列出： 9 | - Chrome 开发者工具开启了 `Preserve log`。 10 | - 请求一个很大的 JSON 数据，导致错误。 11 | - 跨域请求。 12 | 13 | 欢迎补充碰到的情况： 14 | - 请求响应后立即刷新页面 [By alanhg][url-user-1] 15 | 16 | 17 | ## 参考资料 18 | - [Chrome dev tools fails to show response even the content returned has header Content-Type:text/html; charset=UTF-8][url-stackoverflow-question] 19 | 20 | [url-repository-images]:https://xxholic.github.io/segment/images 21 | 22 | [url-stackoverflow-question]:https://stackoverflow.com/questions/38924798/chrome-dev-tools-fails-to-show-response-even-the-content-returned-has-header-con/38925237#38925237 23 | [url-chrome-issues]:https://bugs.chromium.org/p/chromium/issues/detail?id=141129 24 | 25 | [url-user-1]:https://github.com/alanhg 26 | 27 | 28 | 29 |
30 | :wastebasket: 31 | 32 | 33 | 最近逛网页的时候，看到了这幅作品，顿时有些记忆涌现。 34 | 35 | ![28-poster][url-local-paint] 36 | 37 | 38 |
39 | 40 | [url-local-paint]:../images/28/paint.jpeg 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /draft/29.打印分页问题.31.md: -------------------------------------------------------------------------------- 1 | # 29.打印分页问题 2 | ## 引子 3 | 修复 bug 的时候，碰到一个关于打印方面的问题，预览的时候本应该分页显示，但都重叠到一起。 4 | 5 | ## 打印分页问题 6 | 先说一下具体的情况，打印的内容是从第三方获取，返回的内容是 html 字符串。实现分页打印的方式是，创建一个 `iframe` ，将最终要渲染的 html 赋值给 `srcdoc` 属性。拼装 html 的时候，将返回要打印的字符串放到一个 `div` 中，这个 `div` 设置样式 `page-break-after: always`。 7 | 8 | 了解对应的实现方式后，前端这里只是调用打印的 API，应该是拼装的 html 有问题。这种打印无法中断浏览器，查看预览的过程，于是就将最终的 html 字符串单独弄出来，在一个新的 html 页面查看渲染效果。 9 | 10 | 最终发现第三方访问的元素定位都是 `position: absolute`，包裹的元素是默认的定位，所以页面渲染都会重叠到一起，打印预览自然就重叠了。解决方式是在包裹元素上添加下面的样式： 11 | ```html 12 |
13 | ``` 14 | 最后需要注意的是 `srcdoc` 属性有兼容性问题，见 [Can I use srcdoc ?][url-can-use-srcdoc]。 15 | 16 | ## 参考资料 17 | - [Printing][url-mdn-print] 18 | - [page-break-after][url-mdn-page-break-after] 19 | - [